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-aspect-ratio: 16/9)
{
   #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;
}
body
{
   background-color: #000000;
   background-image: url('images/Hintergrundbild_long.jpg');
   background-position: center top;
   background-repeat: no-repeat;
   background-size: 100vw calc(100vw * 2446 / 1920);
   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-aspect-ratio: 16/9)
{
   body
   {
      background-image: url('images/Hintergrundbild-tall.jpg');
      background-size: 100vw calc(100vw * 3122 / 1682);
      background-position: center top;
   }
}
.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-aspect-ratio: 16/9)
{
   .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;
   /* Panel selbst hatte keinen eigenen Hintergrund - nur die einzelnen
      Eintraege. Dadurch schien der Inhalt dahinter (z.B. das mobile App-Grid)
      in allen Luecken/Raendern durch. */
   background-color: rgba(10, 6, 4, 0.95);
   border: 1px solid rgba(255, 153, 0, 0.5);
   border-radius: 8px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}
#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-aspect-ratio: 16/9)
{
   #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-aspect-ratio: 16/9)
{
   #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: max(320px, 30vh) 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 (320px/30vh), 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-aspect-ratio: 16/9)
{
   #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;
   max-height: calc(100vw * 2446 / 1920 - max(320px, 30vh) - 40px);
   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-aspect-ratio: 16/9)
{
   #app-frame-container
   {
      overflow: hidden;
   }
   #app-frame
   {
      max-height: none;
      transform-origin: top left;
   }
}
/* 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;
}