html, body
{
   height: 100%;
}
/* Zugriffssperre: ohne interne IP oder Login ist die Seite nur sichtbar,
   aber nichts ist klickbar - ausser dem Anmelden-Link selbst. */
/* Ganz oben am Bildrand, auf allen Breiten gleich (vorher hier auf Desktop
   "16vw", das lag deutlich unter dem Titel statt darueber - Inkonsistenz zur
   Handy-Ansicht). Auf Hintergrundbild-tall.jpg (Handy) wurde der Titel im Bild
   selbst 1cm nach unten versetzt (backups/Hintergrundbild-tall.orig-backup.jpg
   ist das Original), auf Hintergrundbild_long.jpg (Desktop) liegen die Buttons
   stattdessen deckend auf dem Titelschriftzug - ein Bild-Versatz war dort nicht
   sauber moeglich (der Bereich unter dem Titel ist selbst hell/unruhig, jeder
   Versatz erzeugte einen sichtbaren Geister-Schriftzug). */
#auth-bar
{
   position: fixed;
   top: calc(6px + env(safe-area-inset-top, 0px));
   left: 50%;
   transform: translateX(-50%);
   z-index: 10010;
   display: flex;
   gap: 10px;
   font-family: Arial;
   font-size: 12px;
}
#auth-bar .auth-link
{
   display: inline-block;
   padding: 4px 14px;
   border: 1px solid #FF8C00;
   border-radius: 14px;
   background-color: #1a0a05;
   box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.8);
   color: #FFD700;
   text-decoration: none;
   transition: color 150ms linear, box-shadow 150ms linear, border-color 150ms linear;
}
#auth-bar .auth-link:hover
{
   color: #fff;
   border-color: #FFD700;
   box-shadow: 0 0 10px 3px rgba(255, 153, 0, 0.7);
}
/* Handy-Hochformat: ca. 20% kleinere Buttons (Position kommt schon von oben). */
@media (max-width: 600px)
{
   #auth-bar
   {
      gap: 5px;
      font-size: 9px;
   }
   #auth-bar .auth-link
   {
      padding: 2px 8px;
   }
}
body.locked a:not(.auth-link),
body.locked button:not(.auth-link)
{
   pointer-events: none;
   cursor: default;
}
/* Hintergrund waechst mit der Seite: oben das Titelbild (Desktop: Hintergrundbild_long.jpg),
   darunter ein weicher Uebergang (Hintergrund_uebergang_desktop.jpg) und danach die rote
   Streifen-Kachel Hintergrund_unten.jpg, die sich nahtlos nach unten wiederholt (Bild und
   gespiegelte Kopie). So endet der Hintergrund bei langen Seiten (Suche, Dashboard) nicht
   mehr in Schwarz. --bg-img-h = Hoehe des Titelbilds bei Breite 100vw; die Kachel beginnt
   auf Hoehe des Uebergangs, dessen Zeilen mit den ersten Zeilen der Kachel uebereinstimmen. */
body
{
   --bg-img-h: calc(100vw * 2446 / 1920);
   background-color: #000000;
   background-image: url('images/Hintergrund_uebergang_desktop.jpg?v=2'), url('images/Hintergrundbild_long.jpg'), url('images/Hintergrund_unten.jpg?v=2');
   background-position: center calc(var(--bg-img-h) - 100vw * 200 / 1064 - 2px), center top, center calc(var(--bg-img-h) - 2px);
   background-repeat: no-repeat, no-repeat, repeat-y;
   background-size: 100vw auto, 100vw var(--bg-img-h), 100vw auto;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
   min-height: 100vh;
   min-height: 100dvh;
   overflow-x: hidden;
   display: flow-root;
}
/* Schmale/hohe Screens (Handy-Hochformat): eigenes, hochformatiges Hintergrundbild
   (Titel/Klingen/Augen aus dem Desktop-Bild einkomponiert), volle Breite sichtbar,
   Augen bleiben immer sichtbar. anchor.js rechnet dieselbe Umschaltung mit eigenen
   Augen-Koordinaten fuer dieses Bild nach. */
@media (max-width: 600px)
{
   body
   {
      --bg-img-h: calc(100vw * 3122 / 1682);
      /* Handy: Fortsetzung im Stil des Handy-Bildes (Sternenfeld/roter Nebel, passende
         Farbverteilung, kachelbar): Hintergrund_unten_handy.jpg, dazu ein Uebergang, in dem das
         Bildende (Planeten) langsam in die Kachel ausblendet (Hintergrund_uebergang_handy.jpg,
         700 Zeilen bei Breite 1064). Die roten Streifen gehoeren nur zum Desktop-Hintergrund. */
      background-image: url('images/Hintergrund_uebergang_handy.jpg'), url('images/Hintergrundbild-tall.jpg'), url('images/Hintergrund_unten_handy.jpg');
      background-size: 100vw auto, 100vw var(--bg-img-h), 100vw auto;
      background-position: center calc(var(--bg-img-h) - 100vw * 700 / 1064), center top, center calc(var(--bg-img-h) - 2px);
      background-repeat: no-repeat, no-repeat, repeat-y;
   }
}
/* Eigener Hintergrund fuer Home und die Startseite ohne Login (Desktop): Hintergrundbild_Home.jpg
   (1920x3831, Titelbanner im Bild, Augen an denselben Stellen wie im alten Bild), darunter ein
   Uebergang (Hintergrund_uebergang_home.jpg, 700 Zeilen bei Breite 1064) in die Streifen-Kachel.
   Handy (bis 600 px) behaelt Hintergrundbild-tall.jpg. Weitere Seiten bekommen spaeter ihr eigenes
   Bild ueber body[data-page="dashboard|software|search"]. */
@media (min-width: 601px)
{
   body[data-page="home"],
   body.locked
   {
      --bg-img-h: calc(100vw * 3831 / 1920);
      background-image: url('images/Hintergrund_uebergang_home.jpg?v=2'), url('images/Hintergrundbild_Home.jpg'), url('images/Hintergrund_unten.jpg?v=2');
      background-position: center calc(var(--bg-img-h) - 100vw * 700 / 1064), center top, center calc(var(--bg-img-h) - 2px);
      background-repeat: no-repeat, no-repeat, repeat-y;
      background-size: 100vw auto, 100vw var(--bg-img-h), 100vw auto;
   }
}
.eye-trigger
{
   position: absolute;
   width: 44px;
   height: 44px;
   margin-left: -22px;
   margin-top: -22px;
}
.eye-glow
{
   display: block;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   animation: animate-box-shadow 1000ms linear 0ms infinite normal;
}
/* Augen im Hochformat-Bild sind kleine schwarze Punkte (~14px) statt der grossen
   Sternblende im Desktop-Bild, daher hier deutlich kleinerer Trigger/Glow. */
@media (max-width: 600px)
{
   .eye-trigger
   {
      width: 24px;
      height: 24px;
      margin-left: -12px;
      margin-top: -12px;
   }
   .eye-glow
   {
      width: 6px;
      height: 6px;
   }
   /* Rechte Menue-Schaltflaeche auf Mobil nochmal kleiner als der Standard-Trigger. */
   #wb_Rechts.eye-trigger
   {
      width: 18px;
      height: 18px;
      margin-left: -9px;
      margin-top: -9px;
   }
   #wb_Rechts .eye-glow
   {
      width: 5px;
      height: 5px;
   }
   .volcano-trigger
   {
      width: 20px;
      height: 20px;
      margin-left: -10px;
      margin-top: -10px;
   }
}
/* Verstecktes drittes "Auge": ein Glutfunke im Vulkan/Lavastrom des Hintergrunds,
   der zum Login fuehrt. Bewusst klein und dezent, damit man ihn erst entdecken muss. */
@keyframes animate-ember-glow
{
   0%   { box-shadow: 0px 0px 4px 2px #FF9900; opacity: 0.6; }
   50%  { box-shadow: 0px 0px 18px 10px #FFDD55; opacity: 1; }
   100% { box-shadow: 0px 0px 4px 2px #FF9900; opacity: 0.6; }
}
.volcano-trigger
{
   position: absolute;
   width: 30px;
   height: 30px;
   margin-left: -15px;
   margin-top: -15px;
   z-index: 10000;
}
.volcano-trigger a
{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
}
.volcano-glow
{
   display: block;
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background-color: #FFCC66;
   animation: animate-ember-glow 2600ms ease-in-out 0ms infinite normal;
}
/* Kategorien mit Unterpunkten (z.B. System, Gamez): Klick klappt die Liste inline auf,
   anstatt die Seite zu verlassen. */
.has-sub > a.submenu-toggle
{
   position: relative;
}
.has-sub > a.submenu-toggle::before
{
   content: "\25B8";
   display: inline-block;
   margin-right: 6px;
   transition: transform 200ms linear;
}
.has-sub.open > a.submenu-toggle::before
{
   transform: rotate(90deg);
}
.submenu
{
   display: none;
   list-style: none;
   margin: 0;
   padding: 0 0 0 14px;
}
.has-sub.open > .submenu
{
   display: block;
}
.submenu li a
{
   font-size: 13px;
}
#wb_Links a, #Links_markup li a
{
   display: block;
   text-align: center;
   vertical-align: middle;
}
#Links_markup
{
   display: none;
   margin: 0;
   padding: 20px;
}
#Links_panel #Links_markup
{
   display: block;
}
#Links_markup ul
{
   list-style: none;
   list-style-type: none;
   margin: 0;
   padding: 0;
}
#Links_markup li a, #Links_markup li a:hover, #Links_markup li .active
{
   padding: 6px 8px 6px 8px;
   border-width: 0 0 1px 0 !important;
   border-radius: 0;
   box-shadow: none;
}
#Links_markup .divider
{
   height: 1px;
   margin: 9px 0;
   overflow: hidden;
   background-color: #000000;
}
#Links_panel
{
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
   transition: opacity 150ms linear;
   position: fixed;
   top: max(120px, 16vh);
   left: 20px;
   max-height: calc(100vh - 150px);
   width: min(190px, 80vw);
   z-index: 9999;
}
#Links_panel.reveal
{
   visibility: visible;
   opacity: 1;
   pointer-events: auto;
}
#Links_markup li a
{
   color: #FF8C00;
   border: 1px solid #000000;
   background-color: #800000;
   background: linear-gradient(to bottom, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.20) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%), radial-gradient(ellipse at bottom, #800000 0%,rgba(0,0,0,0.0) 100%), #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 14px;
   font-style: normal;
   text-decoration: none;
   text-transform: none;
}
#wb_Links a
{
   color: #F7F7F7;
   background-color: rgba(0,0,0,0.00);
   font-family: Arial;
   font-weight: normal;
   font-size: 19px;
   font-style: normal;
   text-decoration: none;
   text-align: center;
   text-transform: none;
}
#Links_markup li a
{
   background-color: transparent;
}
/* Mobil: gleiche Verkleinerung wie beim rechten Menue - Schrift, Zeilenabstand,
   Panelbreite und Randabstand (11px = ca. 3mm) identisch, nur seitenverkehrt. */
@media (max-width: 600px)
{
   #Links_markup li a, #Links_markup li a:hover, #Links_markup li .active
   {
      font-size: 12px;
      padding: 3px 6px 3px 6px;
   }
   #Links_panel
   {
      left: 11px;
      width: min(150px, 70vw);
   }
}
#Links_markup li:nth-child(n+2) a, #Links_markup li:nth-child(n+2) a:hover
{
   border-top-color: transparent !important;
}
#Links_markup li a:hover, #Links_markup li .active
{
   color: #FFD700;
   background-color: #FF6600;
   background: linear-gradient(to bottom, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.20) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%), radial-gradient(ellipse at bottom, #FF6600 0%,rgba(0,0,0,0.0) 100%), #000000;
   border: 1px solid #000000;
}
#Links_markup li a .icon
{
   fill: currentColor;
   margin-right: 4px;
   height: 20px;
   width: 20px;
   vertical-align: middle;
}
#Links_markup li a:hover .icon
{
   fill: currentColor;
}
#Links_panel
{
   overflow-y: auto;
}
#wb_Links #Links
{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   z-index: 999;
}
#wb_Rechts a, #Rechts_markup li a
{
   display: block;
   text-align: center;
   vertical-align: middle;
}
#Rechts_markup
{
   display: none;
   margin: 0;
   padding: 20px;
}
#Rechts_panel #Rechts_markup
{
   display: block;
}
#Rechts_markup ul
{
   list-style: none;
   list-style-type: none;
   margin: 0;
   padding: 0;
}
#Rechts_markup li a, #Rechts_markup li a:hover, #Rechts_markup li .active
{
   padding: 6px 8px 6px 8px;
   border-width: 0 0 1px 0 !important;
   border-radius: 0;
   box-shadow: none;
}
#Rechts_markup .divider
{
   height: 1px;
   margin: 9px 0;
   overflow: hidden;
   background-color: #000000;
}
#Rechts_panel
{
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
   transition: opacity 150ms linear;
   position: fixed;
   top: max(120px, 16vh);
   right: 20px;
   max-height: calc(100vh - 150px);
   width: min(190px, 80vw);
   z-index: 9999;
}
#Rechts_panel.reveal
{
   visibility: visible;
   opacity: 1;
   pointer-events: auto;
}
#Rechts_markup li a
{
   color: #FF8C00;
   border: 1px solid #000000;
   background-color: #800000;
   background: linear-gradient(to bottom, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.20) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%), radial-gradient(ellipse at bottom, #800000 0%,rgba(0,0,0,0.0) 100%), #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 14px;
   font-style: normal;
   text-decoration: none;
   text-transform: none;
}
#wb_Rechts a
{
   color: #F7F7F7;
   background-color: rgba(0,0,0,0.00);
   font-family: Arial;
   font-weight: normal;
   font-size: 19px;
   font-style: normal;
   text-decoration: none;
   text-align: center;
   text-transform: none;
}
#Rechts_markup li a
{
   background-color: transparent;
}
/* Mobil: Schrift im rechten Menue 2 Stufen kleiner (14px Basis -> 12px) und die
   Zeilen selbst deutlich kompakter (weniger Innenabstand), nicht nur die Schrift.
   Panel selbst schmaler und nur noch ca. 3mm (11px) vom rechten Rand entfernt,
   statt der 20px Basis-Abstand. */
@media (max-width: 600px)
{
   #Rechts_markup li a, #Rechts_markup li a:hover, #Rechts_markup li .active
   {
      font-size: 12px;
      padding: 3px 6px 3px 6px;
   }
   #Rechts_panel
   {
      right: 11px;
      width: min(150px, 70vw);
   }
}
#Rechts_markup li:nth-child(n+2) a, #Rechts_markup li:nth-child(n+2) a:hover
{
   border-top-color: transparent !important;
}
#Rechts_markup li a:hover, #Rechts_markup li .active
{
   color: #FFD700;
   background-color: #FF6600;
   background: linear-gradient(to bottom, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.20) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%), radial-gradient(ellipse at bottom, #FF6600 0%,rgba(0,0,0,0.0) 100%), #000000;
   border: 1px solid #000000;
}
#Rechts_markup li a .icon
{
   fill: currentColor;
   margin-right: 4px;
   height: 20px;
   width: 20px;
   vertical-align: middle;
}
#Rechts_markup li a:hover .icon
{
   fill: currentColor;
}
#Rechts_panel
{
   overflow-y: auto;
}
#wb_Rechts #Rechts
{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   z-index: 999;
}
/* Eingebetteter App-Frame: Klick auf einen Kategorie-Link laedt apps.destroyer-netzwerk.de
   direkt im normalen Seitenfluss, weiter unten auf der Homepage, statt in einem
   schwebenden Fenster mit eigenem Rahmen. */
#app-frame-container
{
   display: none;
   margin: 15vw 210px 40px 210px;
}
/* Mobil: die festen 210px Rand links/rechts vom Desktop ergeben auf schmalen
   Bildschirmen eine negative Breite - der App-Frame war dadurch unsichtbar.
   12vw je Seite = mittig, schmaler als voll breit. Oben deutlich weniger
   Abstand als die Desktop-Formel (15vw), damit es direkt unter dem
   Titel anfaengt statt mit grosser Luecke. Muss zum marginTop/bgRatio in
   der postMessage-Handler-Funktion in index.php passen (dort fuer die
   Hoehenberechnung dupliziert). */
@media (max-width: 600px)
{
   #app-frame-container
   {
      margin-top: max(80px, 14vh);
      margin-left: 12vw;
      margin-right: 12vw;
   }
}
#app-frame-container.open
{
   display: block;
}
#app-frame
{
   display: block;
   width: 100%;
   height: 200px;
   border: 0;
}
/* Muss zur mobilen margin-top/Formel oben und zum postMessage-Handler in
   index.php passen - sonst klemmt diese max-height den Frame trotz korrekt
   gesetzter Hoehe wieder auf einen winzigen Wert (das war der eigentliche
   Rest-Bug: die Handy-Ansicht blieb kaputt, weil dieser Wert hier beim
   letzten Fix uebersehen wurde). */
/* Handy: apps.destroyer-netzwerk.de zeigt seine Kachel-Liste erst ab ca. 310px
   Breite in 4 statt 3 Spalten an (mit deutlich weniger Leerraum je Kachel) -
   unser Container ist aber meist schmaler. Da wir die fremde Seite selbst
   nicht anfassen duerfen/koennen (Cross-Origin-iframe), lassen wir sie intern
   auf APP_FRAME_VIRTUAL_WIDTH (siehe index.php) rendern und skalieren das
   Ergebnis per CSS-Transform wieder auf unsere tatsaechliche Breite runter.
   transform-origin hier fest, Breite/scale/Container-Hoehe setzt das Script. */
@media (max-width: 600px)
{
   #app-frame-container
   {
      overflow: hidden;
   }
   #app-frame
   {
      max-height: none;
      transform-origin: top left;
   }
}
/* Dashboard im Hauptframe: gleiche Position/Breite wie der App-Frame. Die Hoehe
   waechst mit dem Inhalt: die Dashboard-Seite meldet sie per postMessage
   (siehe index.php), der Frame hat dann keinen eigenen Scrollbalken und die Seite
   scrollt am rechten Rand. Bis zur ersten Meldung (oder falls keine kommt) fuellt
   der Frame das Fenster bis unten - die Abstandsformel muss zu #app-frame-container
   oben passen. Die inline gesetzte Hoehe aus dem Script ueberschreibt diesen
   Startwert; Breite/Transform der App-Frame-Skalierung sind hier abgeschaltet. */
#app-frame-container.dashboard-mode #app-frame
{
   width: 100% !important;
   transform: none !important;
   max-height: none;
   height: max(500px, calc(100vh - 15vw - 40px));
}
@media (max-width: 600px)
{
   #app-frame-container.dashboard-mode #app-frame
   {
      height: max(500px, calc(100vh - max(80px, 14vh) - 40px));
   }
}
/* Mobil: die Kategorie-Liste (Icon-Kacheln) wird NICHT mehr ueber den fremden
   iframe angezeigt (dessen feste Kachelhoehe liess sich von aussen nicht enger
   packen - Transform/Masken-Tricks sahen nie richtig gut aus). Stattdessen holt
   mobile-apps.php die Kartendaten (Name/Icon/Link) serverseitig von der
   Kategorie-Seite und wir rendern unser eigenes, eng gepacktes Grid hier drunter.
   Der iframe wird auf Mobil nur noch fuer die App-Detailseite (Beschreibung/
   Download) benutzt, wenn eine Kachel angeklickt wird. */
.mobile-app-grid
{
   display: none;
   grid-template-columns: repeat(4, 1fr);
   gap: 6px;
   padding: 2px;
}
.mobile-app-grid.visible
{
   display: grid;
}
.mobile-app-grid .tile
{
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
   padding: 6px 4px;
   background: rgba(0, 0, 0, 0.35);
   border: 1px solid rgba(255, 153, 0, 0.35);
   border-radius: 8px;
   text-decoration: none;
   color: #FFD9A0;
   /* Grid-/Flex-Kinder duerfen laut Spec standardmaessig nicht unter ihre
      Inhalts-Mindestbreite schrumpfen (min-width:auto). Ohne dieses Overrride
      hat ein einzelnes langes Wort im Namen (z.B. "DirectorServer") die Spalte
      und damit das ganze Grid ueber den Bildschirmrand hinaus breit gedrueckt -
      dadurch fehlte optisch die 4. Spalte (war nur nach rechts rausgeschoben). */
   min-width: 0;
}
.mobile-app-grid .tile img
{
   width: 40px;
   height: 40px;
   object-fit: contain;
}
.mobile-app-grid .tile span
{
   font-family: Arial;
   font-size: 10px;
   line-height: 1.2;
   text-align: center;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   overflow-wrap: anywhere;
   word-break: break-word;
   max-width: 100%;
}
.mobile-app-grid .tile-loading
{
   grid-column: 1 / -1;
   color: #FFD9A0;
   font-family: Arial;
   font-size: 13px;
   text-align: center;
   padding: 20px 0;
}
.mobile-app-back
{
   display: none;
   margin-bottom: 10px;
   color: #FF8C00;
   font-family: Arial;
   font-size: 13px;
   text-decoration: none;
}
.mobile-app-back.visible
{
   display: inline-block;
}
.mobile-app-back:hover
{
   color: #FFD700;
}

/* ---- Suche (Menuepunkt "Searching"): Look wie das Destroyer-Dashboard ----
   Goldrahmen und Vulkan-Banner uebernommen aus dessen custom.css (#destroyer-title-card).
   Sitzt im selben Hauptframe-Container wie Apps und Dashboard (search-mode). */
/* Breite und Abstand wie der Banner im Dashboard: dort liegt darueber die Statusleiste
   (CPU/RAM/Platte), der Banner beginnt ca. 73px unter dem Frame-Anfang, also auf Hoehe
   Mitte "Shit List" und unter den Drachenklingen; Breite ca. 81% des Frames, mittig. */
#search-view
{
   display: none;
   width: 80.5%;
   margin: 0 auto;
   font-family: Arial, sans-serif;
   color: #ffe9c4;
}
#app-frame-container.search-mode #search-view
{
   display: block;
}
.search-title-card
{
   min-height: 138px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 4px solid transparent;
   border-radius: 22px;
   background:
      linear-gradient(90deg, rgba(5,1,2,.26), rgba(3,0,2,.48) 31%, rgba(3,0,2,.64) 50%, rgba(3,0,2,.48) 69%, rgba(5,1,2,.26)) padding-box,
      url("images/dashboard-title-volcano-2026-11-01.jpg") center 47% / cover no-repeat padding-box,
      linear-gradient(120deg, #6f3506 0%, #ffe39e 10%, #b86a0b 22%, #5e2407 40%, #ffdf81 50%, #5e2407 60%, #b86a0b 78%, #ffe39e 90%, #6f3506 100%) border-box;
   box-shadow: 0 16px 34px rgba(0,0,0,.53), 0 0 13px rgba(255,72,8,.10), inset 0 0 0 2px rgba(255,190,80,.20);
}
.search-title-card span
{
   font-family: "Viner Hand ITC", "Segoe Script", "Comic Sans MS", cursive;
   font-size: 48px;
   font-weight: 400;
   letter-spacing: 1px;
   color: #fff;
   text-align: center;
   text-shadow: 0 0 8px rgba(255,140,20,.75), 0 0 18px rgba(255,72,8,.55);
}
.search-form
{
   display: flex;
   gap: 10px;
   max-width: 760px;
   margin: 34px auto 12px auto;
}
.search-form input
{
   flex: 1;
   min-width: 0;
   height: 48px;
   padding: 0 20px;
   border: 3px solid transparent;
   border-radius: 26px;
   background:
      linear-gradient(#150607, #230a08) padding-box,
      linear-gradient(120deg, #6f3506 0%, #ffe39e 10%, #b86a0b 22%, #5e2407 40%, #ffdf81 50%, #5e2407 60%, #b86a0b 78%, #ffe39e 90%, #6f3506 100%) border-box;
   box-shadow: inset 0 0 12px rgba(0,0,0,.6);
   color: #fff2d6;
   font-family: Arial, sans-serif;
   font-size: 18px;
   outline: none;
}
.search-form input:focus
{
   box-shadow: 0 0 14px rgba(255,170,40,.45), inset 0 0 12px rgba(0,0,0,.6);
}
.search-form button
{
   height: 48px;
   padding: 0 30px;
   border: 3px solid transparent;
   border-radius: 26px;
   background:
      linear-gradient(#7a2a08, #3a0f05) padding-box,
      linear-gradient(120deg, #6f3506 0%, #ffe39e 10%, #b86a0b 22%, #5e2407 40%, #ffdf81 50%, #5e2407 60%, #b86a0b 78%, #ffe39e 90%, #6f3506 100%) border-box;
   color: #ffe39e;
   font-family: Arial, sans-serif;
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;
}
.search-form button:hover
{
   color: #fff;
   box-shadow: 0 0 14px rgba(255,170,40,.45);
}
.search-engine
{
   text-align: center;
   color: #f9c35f;
   font-size: 14px;
   margin-bottom: 14px;
}
.search-engine strong
{
   color: #ffe39e;
}
.search-warn
{
   max-width: 760px;
   margin: 0 auto 14px auto;
   padding: 10px 16px;
   border: 1px solid rgba(255, 90, 60, .7);
   border-radius: 12px;
   background: rgba(120, 15, 10, .45);
   color: #ffc9b8;
   font-size: 13px;
   text-align: center;
}
.search-sources
{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8px;
   margin-bottom: 10px;
}
.search-chip
{
   padding: 5px 14px;
   border: 1px solid rgba(249, 195, 95, .6);
   border-radius: 16px;
   background: rgba(20, 6, 7, .75);
   color: #f9c35f;
   font-family: Arial, sans-serif;
   font-size: 13px;
   cursor: pointer;
}
.search-chip:hover, .search-chip.active
{
   background: rgba(184, 106, 11, .55);
   color: #fff;
}
.search-status
{
   min-height: 20px;
   margin-bottom: 12px;
   text-align: center;
   color: #ffd9a0;
   font-size: 14px;
}
.search-results
{
   margin: 0 auto;
   padding: 0;
   max-width: 980px;
}
.search-hit
{
   list-style: none;
   margin: 0 0 12px 0;
   padding: 14px 18px;
   border: 2px solid transparent;
   border-radius: 14px;
   background:
      linear-gradient(90deg, rgba(19,6,7,.93), rgba(75,19,9,.80) 48%, rgba(27,6,7,.93)) padding-box,
      linear-gradient(120deg, #6f3506 0%, #ffe39e 10%, #b86a0b 22%, #5e2407 40%, #ffdf81 50%, #5e2407 60%, #b86a0b 78%, #ffe39e 90%, #6f3506 100%) border-box;
   box-shadow: 0 8px 18px rgba(0,0,0,.45);
}
.search-hit a.search-title
{
   color: #ffe39e;
   font-size: 18px;
   font-weight: bold;
   text-decoration: none;
   overflow-wrap: anywhere;
}
.search-hit a.search-title:hover
{
   color: #fff;
   text-decoration: underline;
}
.search-hit mark
{
   padding: 0 2px;
   border-radius: 3px;
   background: rgba(255, 170, 40, .30);
   color: #fff;
}
.search-url
{
   margin-top: 4px;
   color: #d9a05a;
   font-size: 12px;
   overflow-wrap: anywhere;
}
.search-meta
{
   margin-top: 2px;
   color: #b88a55;
   font-size: 12px;
}
.search-summary
{
   margin: 8px 0 0 0;
   color: #f1d9b0;
   font-size: 13px;
   line-height: 1.4;
}
.search-more
{
   display: block;
   margin: 14px auto 0 auto;
   padding: 8px 26px;
   border: 1px solid rgba(249, 195, 95, .7);
   border-radius: 20px;
   background: rgba(20, 6, 7, .8);
   color: #ffe39e;
   font-family: Arial, sans-serif;
   font-size: 14px;
   cursor: pointer;
}
.search-more:hover
{
   background: rgba(184, 106, 11, .55);
   color: #fff;
}
/* Malware-Watch: Rahmen und Titel rot abgesetzt, damit der Bereich nie mit Software verwechselt wird. */
#search-view.watch .search-hit
{
   background:
      linear-gradient(90deg, rgba(30,4,4,.94), rgba(95,12,8,.82) 48%, rgba(30,4,4,.94)) padding-box,
      linear-gradient(120deg, #4a0d08 0%, #ff8a70 10%, #a32012 22%, #4a0d08 40%, #ff9f8a 50%, #4a0d08 60%, #a32012 78%, #ff8a70 90%, #4a0d08 100%) border-box;
}
#Rechts_markup a.nav-link.active
{
   font-weight: bold;
   text-decoration: underline;
}
@media (max-width: 600px)
{
   #search-view
   {
      width: 100%;
      padding-top: 0;
   }
   .search-title-card
   {
      min-height: 90px;
   }
   .search-title-card span
   {
      font-size: 30px;
   }
   .search-form
   {
      flex-direction: column;
      margin-top: 18px;
   }
   .search-form button
   {
      width: 100%;
   }
}

/* ---- Home-Seite (Menuepunkt "Home"): News, Bugfix-Zeile, Schnellstart-Kacheln ----
   Gleicher Frame, Breite und Goldrahmen wie Dashboard und Suche. */
/* Titelbanner oben (1208x138): sitzt exakt auf dem Banner im Hintergrundbild Hintergrundbild_Home.jpg
   (1920 px breit, Banner bei x=359, y=72) und deckt auf den anderen Seiten den Schriftzug ab.
   Mass in vw wie die Hintergrundbilder, damit es bei jeder Breite deckungsgleich bleibt. */
#page-title
{
   display: none; /* AUS, bis Tim die neu zugeschnittenen Banner liefert (Zeile entfernen zum Einschalten) */
   position: absolute;
   top: calc(100vw * 72 / 1920);
   left: calc(100vw * 359 / 1920);
   width: calc(100vw * 1208 / 1920);
   aspect-ratio: 1208 / 138;
   z-index: 1;
   pointer-events: none;
}
#page-title img
{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   transition: opacity .7s ease;
}
#page-title img.on
{
   opacity: 1;
}
@media (max-width: 600px)
{
   #page-title
   {
      display: none;
   }
}
#home-view
{
   display: none;
   width: 80.5%;
   margin: 0 auto;
   font-family: Arial, sans-serif;
   color: #ffe9c4;
}
#app-frame-container.home-mode #home-view
{
   display: block;
}
.home-widget
{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: baseline;
   gap: 6px 16px;
   width: fit-content;
   max-width: 100%;
   margin: 0 auto;
   padding: 9px 28px;
   border: 1px solid rgba(249,195,95,.65);
   border-radius: 999px;
   background: linear-gradient(90deg, rgba(19,6,7,.82), rgba(75,19,9,.62) 50%, rgba(19,6,7,.82));
   box-shadow: 0 6px 16px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,190,80,.12);
   color: #ffe39e;
   text-shadow: 0 0 8px rgba(255,120,20,.55), 0 1px 2px #000;
}
/* Uhrzeit, Datum und Wetter: gleiche Schrift, Groesse und Farbe */
#home-time, #home-date, #home-weather
{
   font-family: "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
   font-size: 19px;
   font-weight: 600;
   font-style: italic;
   letter-spacing: .6px;
   color: #ffe39e;
}
.home-sep
{
   color: #d98a1c;
   font-size: 11px;
}
.home-heading
{
   display: block; /* HP.css setzt h2 auf inline-block, dann wirkt text-align nicht */
   margin: 38px 0 18px 0;
   font-family: "Viner Hand ITC", "Segoe Script", "Comic Sans MS", cursive;
   font-size: 34px;
   font-weight: 400;
   letter-spacing: 1px;
   color: #fff;
   text-align: center;
   text-shadow: 0 0 8px rgba(255,140,20,.75), 0 0 18px rgba(255,72,8,.55);
}
.home-loading
{
   padding: 20px 0;
   text-align: center;
   color: #ffd9a0;
   font-size: 14px;
}
.home-card
{
   display: block;
   margin: 0 0 12px 0;
   padding: 14px 20px;
   border: 2px solid transparent;
   border-radius: 14px;
   background:
      linear-gradient(90deg, rgba(19,6,7,.93), rgba(75,19,9,.80) 48%, rgba(27,6,7,.93)) padding-box,
      linear-gradient(120deg, #6f3506 0%, #ffe39e 10%, #b86a0b 22%, #5e2407 40%, #ffdf81 50%, #5e2407 60%, #b86a0b 78%, #ffe39e 90%, #6f3506 100%) border-box;
   box-shadow: 0 8px 18px rgba(0,0,0,.45);
   color: inherit;
   text-decoration: none;
}
a.home-card:hover
{
   box-shadow: 0 8px 18px rgba(0,0,0,.45), 0 0 14px rgba(255,170,40,.45);
}
.home-card-head
{
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 6px;
   font-size: 12px;
}
.home-badge
{
   padding: 2px 10px;
   border: 1px solid rgba(249,195,95,.7);
   border-radius: 10px;
   background: rgba(20,6,7,.8);
   color: #f9c35f;
   font-weight: bold;
}
.home-when
{
   color: #b88a55;
}
.home-card-title
{
   color: #ffe39e;
   font-size: 19px;
   font-weight: bold;
   overflow-wrap: anywhere;
}
a.home-card:hover .home-card-title
{
   color: #fff;
}
.home-card-summary
{
   margin-top: 6px;
   color: #f1d9b0;
   font-size: 13px;
   line-height: 1.4;
}
.home-bugfix
{
   margin: 4px 0 22px 0;
   padding: 10px 18px;
   border: 1px solid rgba(249,195,95,.6);
   border-radius: 12px;
   background: rgba(20,6,7,.78);
   color: #ffd9a0;
   font-size: 13px;
   line-height: 1.4;
   text-align: center;
}
.home-bugfix strong
{
   color: #ffe39e;
}
.home-bugfix a
{
   color: #f9c35f;
   text-decoration: none;
}
.home-bugfix a:hover
{
   color: #fff;
   text-decoration: underline;
}
/* Schnellstart-Kacheln: quadratisch, etwa halb so gross wie die Dashboard-Kacheln, mittig. */
.home-tiles
{
   display: grid;
   grid-template-columns: repeat(auto-fill, 180px);
   justify-content: center;
   gap: 16px;
   margin-bottom: 20px;
}
.home-tile
{
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   gap: 2px;
   box-sizing: border-box;
   aspect-ratio: 1 / 1;
   padding: 10px 12px;
   border: 3px solid transparent;
   border-radius: 16px;
   background:
      linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.05) 62%) padding-box,
      var(--tile-img, linear-gradient(135deg, #1c0707, #5a1a0a 55%, #2a0a07)) center / cover no-repeat padding-box,
      linear-gradient(120deg, #6f3506 0%, #ffe39e 10%, #b86a0b 22%, #5e2407 40%, #ffdf81 50%, #5e2407 60%, #b86a0b 78%, #ffe39e 90%, #6f3506 100%) border-box;
   box-shadow: 0 10px 22px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,190,80,.18);
   color: #f4dca0;
   text-decoration: none;
}
.home-tile:hover
{
   box-shadow: 0 10px 22px rgba(0,0,0,.5), 0 0 16px rgba(255,170,40,.5);
}
.home-tile-label
{
   font-family: Georgia, "Times New Roman", serif;
   font-size: 17px;
   font-weight: bold;
   letter-spacing: .5px;
   text-transform: uppercase;
   text-shadow: 0 2px 4px #000;
}
.home-tile-sub
{
   font-size: 12px;
   color: #e8cf98;
   text-shadow: 0 1px 3px #000;
}
/* Eigene Hintergrundbilder je Seite: body traegt data-page="home|dashboard|software|search".
   Beispiel (spaeter ausfuellen):
   body[data-page="home"] { background-image: url('images/Hintergrund_home.jpg'), ...; } */
@media (max-width: 600px)
{
   #home-view
   {
      width: 100%;
   }
   .home-heading
   {
      font-size: 26px;
   }
   .home-tiles
   {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
   }
   .home-tile-label
   {
      font-size: 15px;
   }
   #home-time, #home-date, #home-weather
   {
      font-size: 16px;
   }
   .home-widget
   {
      border-radius: 18px;
      padding: 8px 16px;
   }
}