/* Queue Studio -- Huelle. Farben und Kopfleiste wie in beiden Apps (LED Wand Vorschau / Rundown).
   Die Apps fuellen das ganze Fenster; die Kopfleiste liegt obendrauf, der Platz ihrer eigenen
   (unsichtbar geschalteten) Kopfleiste bleibt frei, damit der Lichtschein der App wie bisher dahinter liegt. */
:root{
  --bg-deep:#0e2038; --line:rgba(190,225,255,0.22); --accent:#6fd0ff; --text:#f4f9ff; --text-dim:#a9c4e0;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; overflow:hidden; background:var(--bg-deep); color:var(--text);
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }

.rahmen{ position:fixed; inset:0; }
.app-rahmen{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:var(--bg-deep); }
/* Nicht aktiver Bereich bleibt geladen und behaelt seine Groesse (visibility statt display:none:
   die LED-App misst z. B. die Breite ihrer Galerie auch, wenn gerade der andere Reiter offen ist). */
.app-rahmen:not(.aktiv){ visibility:hidden; }
.app-rahmen.laedt{ opacity:0; }

.kopf{
  position:fixed; top:0; left:0; right:0; z-index:2;
  min-height:78px; padding:16px 26px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(120,180,230,0.35), rgba(14,32,56,0.15));
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; gap:18px;
}
.kopf-logo{ height:46px; display:block; }
.kopf-sportschau{ height:40px; display:block; margin-left:auto; }

/* Zwei Hauptbereiche mittig, im Stil des Titels der LED-App */
.reiter{ position:absolute; left:50%; top:0; bottom:0; transform:translateX(-50%); display:flex; align-items:stretch; gap:96px; }
.reiter-knopf{
  all:unset; box-sizing:border-box; cursor:pointer; position:relative;
  display:flex; flex-direction:column; justify-content:center; gap:3px; padding:0 4px; color:#fff;
}
.reiter-titel{ font-size:19px; font-weight:800; font-style:italic; text-transform:uppercase; letter-spacing:.01em; line-height:1.1; white-space:nowrap; }
.reiter-sub{ font-size:12px; color:var(--text-dim); white-space:nowrap; }
.reiter-knopf[aria-selected="false"] > *{ opacity:.25; }
.reiter-knopf[aria-selected="false"]:hover > *{ opacity:.5; }
.reiter-knopf[aria-selected="true"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; border-radius:2px;
  background:var(--accent); box-shadow:0 0 12px rgba(111,208,255,.8);
}
.reiter-knopf:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }

/* Mini-Fusszeile unten rechts: kaum sichtbar, erst beim Darueberfahren deutlicher */
.fuss{ position:fixed; right:14px; bottom:8px; z-index:2; font-size:10.5px; letter-spacing:.02em; color:rgba(169,196,224,0.22); pointer-events:none; }
.fuss a{ color:inherit; text-decoration:none; pointer-events:auto; transition:color .15s; }
.fuss a:hover, .fuss a:focus-visible{ color:rgba(169,196,224,0.85); }
.fuss a:focus-visible{ outline:1px solid var(--accent); outline-offset:2px; border-radius:2px; }

/* Schmalere Fenster: erst die Unterzeilen weg, dann Reiter in eine eigene Zeile */
@media (max-width: 1320px){ .reiter-sub{ display:none; } }
@media (max-width: 860px){
  .kopf{ flex-wrap:wrap; padding:12px 16px 0; row-gap:8px; }
  .kopf-logo{ height:36px; }
  .kopf-sportschau{ height:30px; }
  .reiter{ position:static; transform:none; order:3; flex-basis:100%; gap:0; }
  .reiter-knopf{ flex:1; align-items:center; padding:10px 0 12px; }
  .reiter-titel{ font-size:15px; }
}