/* ============================================================
   Startbildschirm und Anmeldung.
   Der Design-Entwurf selbst bringt sein eigenes CSS mit (inline
   im <style>-Block) und wird hier NICHT veraendert - diese Datei
   ergaenzt nur die vorgelagerten Ueberlagerungen.
   ============================================================ */

.hidden { display: none !important; }

/* --- Startbildschirm --- */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: #05030a;
  opacity: 1; transition: opacity 400ms ease;
}
.splash.splash-done { opacity: 0; pointer-events: none; }

.splash-canvas {
  position: relative;
  aspect-ratio: 1535 / 1024;
  width: min(100vw, calc(100vh * 1535 / 1024));
  height: min(100vh, calc(100vw * 1024 / 1535));
  background-image: url("../img/splash-background.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  container-type: size;
}

.splash-status {
  position: absolute; top: 75.68%; left: 0; right: 0;
  transform: translateY(-50%); text-align: center;
  font-size: clamp(0.9rem, 2.6cqh, 1.6rem); color: #c9a9ff; padding: 0 6%;
}
.splash-status-error { color: #fca5a5; }

.splash-progress {
  position: absolute; top: 79.88%; left: 26.06%; width: 47.88%;
  height: 0.85%; min-height: 6px; transform: translateY(-50%);
  border-radius: 999px; background: rgba(255,255,255,0.16); overflow: hidden;
}
.splash-progress-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #a855f7);
  box-shadow: 0 0 14px rgba(168,85,247,0.75);
  transition: width 350ms ease;
}
.splash-percent {
  position: absolute; top: 84.28%; left: 0; right: 0;
  transform: translateY(-50%); text-align: center;
  font-size: clamp(0.95rem, 2.8cqh, 1.7rem); color: #b98cff;
  font-variant-numeric: tabular-nums;
}
.splash-retry {
  position: absolute; top: 90%; left: 50%; transform: translateX(-50%);
  padding: 10px 24px; border: 1px solid rgba(168,85,247,0.6);
  border-radius: 8px; background: rgba(124,58,237,0.22);
  color: #e9d5ff; font-size: 0.95rem; cursor: pointer;
}
.splash-retry:hover { background: rgba(124,58,237,0.38); }

/* --- FIX572: Startbildschirm des Administrators ---------------------------
   Bild quer (1672x941) bzw. hoch (941x1672), fuellt den Schirm (cover, der
   Ausschnitt bleibt mittig - Balken und Schrift liegen in der Mitte). Die
   gemalte Fortschrittsanzeige ist aus dem Bild entfernt; Balken, Prozentzahl
   und Statuszeile sind die echten Elemente aus splash.js, auf Pixel genau an
   die Stelle der gemalten gesetzt (Prozent der Bildgroesse, cqw/cqh = Bild). */
.splash.ik-admin-splash { overflow: hidden; background: #070316; }
.splash.ik-admin-splash .splash-canvas {
  aspect-ratio: auto;
  width: max(100vw, calc(100vh * 1672 / 941));
  height: max(100vh, calc(100vw * 941 / 1672));
  flex: 0 0 auto;
  background-image: url("../img/splash-admin-quer.jpg");
  background-size: 100% 100%;
  --ik-spur-breite: 27.45cqw;
}
.splash.ik-admin-splash .splash-progress {
  /* Spur innen: x 627..1086, y 573..601 (von 1672x941) */
  left: 37.50%; top: 60.89%; width: 27.45%; height: 2.98%;
  min-height: 0; transform: none;
  background: transparent; border-radius: 999px; overflow: hidden;
}
.splash.ik-admin-splash .splash-progress-fill {
  border-radius: 999px;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 1.6cqw, rgba(255,255,255,0.20) 1.6cqw 2.4cqw),
    linear-gradient(90deg, #fc04fb 0%, #c41dfd 22%, #a530fd 42%, #9b6dfc 62%, #5eaefc 82%, #58f0fd 100%);
  background-size: 4cqw 100%, var(--ik-spur-breite) 100%;
  background-repeat: repeat, no-repeat;
  box-shadow: 0 0 1.1cqh rgba(236, 72, 255, 0.75), inset 0 0 0.35cqh rgba(255,255,255,0.55);
  animation: ik-admin-streifen 1.4s linear infinite;
}
@keyframes ik-admin-streifen { from { background-position: 0 0, 0 0; } to { background-position: 4cqw 0, 0 0; } }
.splash.ik-admin-splash .splash-percent {
  /* Feld rechts in der Spur: x 1094..1159 */
  left: 65.43%; right: auto; top: 61.00%; width: 3.89%; height: 2.76%;
  transform: none; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(8, 2, 48, 0.92);
  color: #ffffff; font-weight: 700; font-size: 2.0cqh; letter-spacing: 0.02em;
}
.splash.ik-admin-splash .splash-status {
  /* Zeile hinter dem Zahnrad: ab x 760, y 622..648 */
  left: 45.45%; right: auto; top: 66.10%; width: 19.5%; height: 2.76%;
  transform: none; padding: 0; text-align: left;
  display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #ebe6fb; font-size: 1.95cqh;
}
.splash.ik-admin-splash .splash-status-error { color: #fca5a5; white-space: normal; }
.splash.ik-admin-splash .splash-retry { top: 71.5%; }

@media (orientation: portrait) {
  .splash.ik-admin-splash .splash-canvas {
    width: max(100vw, calc(100vh * 941 / 1672));
    height: max(100vh, calc(100vw * 1672 / 941));
    background-image: url("../img/splash-admin-hoch.jpg");
    --ik-spur-breite: 32.94cqw;
  }
  .splash.ik-admin-splash .splash-progress {
    /* x 290..600, y 717..741 (von 941x1672) */
    left: 30.82%; top: 42.88%; width: 32.94%; height: 1.44%;
  }
  .splash.ik-admin-splash .splash-progress-fill {
    background-size: 5cqw 100%, var(--ik-spur-breite) 100%;
    background-image:
      repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 2cqw, rgba(255,255,255,0.20) 2cqw 3cqw),
      linear-gradient(90deg, #fc04fb 0%, #c41dfd 22%, #a530fd 42%, #9b6dfc 62%, #5eaefc 82%, #58f0fd 100%);
    box-shadow: 0 0 0.6cqh rgba(236, 72, 255, 0.75), inset 0 0 0.2cqh rgba(255,255,255,0.55);
    animation-name: ik-admin-streifen-hoch;
  }
  @keyframes ik-admin-streifen-hoch { from { background-position: 0 0, 0 0; } to { background-position: 5cqw 0, 0 0; } }
  .splash.ik-admin-splash .splash-percent {
    /* x 608..656 */
    left: 64.61%; top: 42.88%; width: 5.10%; height: 1.44%; font-size: 1.1cqh;
  }
  .splash.ik-admin-splash .splash-status {
    /* ab x 365, y 763..787 */
    left: 38.79%; top: 45.63%; width: 32%; height: 1.44%; font-size: 1.0cqh;
  }
  .splash.ik-admin-splash .splash-retry { top: 48.6%; }
}
@media (prefers-reduced-motion: reduce) {
  .splash.ik-admin-splash .splash-progress-fill { animation: none; }
}

/* --- Anmeldung: gleicher Hintergrund wie der Startbildschirm, abgedunkelt --- */
.overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background-color: #05030a;
  background-image:
    linear-gradient(rgba(5,3,10,0.62), rgba(5,3,10,0.62)),
    url("../img/splash-background.jpg");
  background-size: cover, cover;
  background-position: center, center;
}

.auth-card {
  width: min(400px, 90vw);
  padding: 32px 30px;
  border-radius: 14px;
  background: rgba(18,18,28,0.94);
  border: 1px solid #2a2a38;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  display: flex; flex-direction: column; gap: 14px;
  color: #e8e8f0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.auth-brand { font-size: 1.5rem; font-weight: 700; text-align: center; }
.auth-brand span { color: #a855f7; }
.auth-card h2 { margin: 0; font-size: 1.05rem; font-weight: 600; text-align: center; }
.auth-hint { margin: 0; font-size: 0.82rem; color: #8b8b9e; line-height: 1.5; }
.auth-card label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: #b7b7c6; }
.auth-card input {
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid #2f2f3d; background: #101018; color: #e8e8f0; font-size: 0.92rem;
}
.auth-card input:focus { outline: none; border-color: #7c3aed; }

/* FIX446 - der Haken "Angemeldet bleiben".
 *
 * Die Regel .auth-card input darueber gilt fuer JEDES Eingabefeld in der
 * Karte, auch fuer ein Kaestchen: 10px Innenabstand und eine eigene
 * Hintergrundfarbe machen daraus einen grauen Klotz. Deshalb wird das hier
 * ausdruecklich zurueckgenommen.
 *
 * Die Zeile selbst bekommt 44px Mindesthoehe - das Mass, auf das Apple
 * Bedienelemente fuer den Finger auslegt. Darunter trifft man das Kaestchen
 * auf dem iPhone nur mit Glueck. */
.auth-card label.auth-merken {
  flex-direction: row; align-items: center; gap: 10px;
  min-height: 44px; cursor: pointer; user-select: none;
}
.auth-card label.auth-merken input[type="checkbox"] {
  width: 18px; height: 18px; flex: 0 0 auto;
  padding: 0; margin: 0; background: none; border: 0; border-radius: 0;
  accent-color: #8b5cf6; cursor: pointer;
}
.auth-card button {
  margin-top: 6px; padding: 11px 16px; border: 0; border-radius: 8px; cursor: pointer;
  background: linear-gradient(97deg, #6d28d9, #8b5cf6); color: #fff;
  font-size: 0.95rem; font-weight: 600;
}
.auth-card button:hover { filter: brightness(1.1); }
.auth-error { color: #fca5a5; font-size: 0.82rem; min-height: 1.1em; }

/* FIX495: PIN-Anmeldung - der Benutzer steht schon da, nur die PIN fehlt. */
.auth-pin { display: flex; flex-direction: column; gap: 14px; }
.auth-pin.hidden, #login-pw-block.hidden { display: none; }
.auth-pin-wer { text-align: center; font-size: 0.95rem; color: #b7b7c6; }
.auth-pin-wer b { color: #fff; }
.auth-pin input#login-pin { text-align: center; letter-spacing: 0.5em; font-size: 1.4rem; }
.auth-card button.auth-link {
  margin: 0; padding: 6px 0; background: none; color: #a78bfa; font-weight: 500; font-size: 0.82rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.auth-card button.auth-link:hover { filter: none; color: #c4b5fd; }

@media (prefers-reduced-motion: reduce) {
  .splash, .splash-progress-fill { transition: none; }
}
/* --- FIX573/FIX586: Anmeldung des Administrators ---------------------------
   FIX586 (Daniel: "sieht aus, als waere das Anmeldefenster gedruckt"): Die Karte
   ist nicht mehr gemalt. Das Bild (cover, mittig) zeigt nur noch den leeren
   Rahmen; Ueberschrift, Beschriftungen, Felder, Haken und Knopf zeichnet der
   Browser - scharf auf jedem Bildschirm. Die Pfote(n) des Charakters liegen
   als eigene Ebene (::after, ausgeschnitten aus dem Originalbild) VOR der Karte,
   damit er weiter darauf lehnt. Alle Masse in Prozent der Bildgroesse bzw. cq*. */
.overlay.ik-admin-login { background: #070316; overflow: hidden; }
.overlay.ik-admin-login .auth-card {
  position: relative; flex: 0 0 auto; display: block;
  width: max(100vw, calc(100vh * 1672 / 941));
  height: max(100vh, calc(100vw * 941 / 1672));
  padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: url("../img/login-admin-quer-leer.jpg") center / 100% 100% no-repeat;
  container-type: size;
  color: #ffffff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Karte (Rahmen im Bild) */
  --k-links: 42.344%; --k-oben: 34.219%; --k-breite: 25.478%; --k-hoehe: 42.296%; --k-rund: 0.9cqw;
  /* Pfote vor der Karte */
  --h-links: 41.746%; --h-oben: 33.156%; --h-breite: 5.742%; --h-hoehe: 10.414%;
  --hand: url("../img/login-admin-quer-hand.png");
  /* Ueberschrift, "Anmelden", Beschriftungen (Mitte der Zeile) */
  --t-oben: 39.55%; --t-schrift: 3.3cqh; --a-oben: 43.9%; --a-schrift: 2.2cqh;
  --l1-oben: 47.9%; --l2-oben: 55.15%; --l-schrift: 1.65cqh;
  --f-links: 44.50%; --f-breite: 21.53%;
  --u-oben: 49.42%; --u-hoehe: 4.25%;
  --p-oben: 56.54%; --p-hoehe: 4.04%;
  --m-links: 44.26%; --m-oben: 62.49%; --m-hoehe: 3.61%;
  --k-groesse: 2.13cqh;
  --b-links: 44.56%; --b-oben: 69.08%; --b-breite: 21.47%; --b-hoehe: 4.36%;
  --e-oben: 73.75%; --e-hoehe: 2.55%;
  --pin-oben: 46.76%; --pin-hoehe: 14.35%;
  --schrift: 1.7cqh; --einzug: 0.75cqw; --rund: 0.5cqw; --pin-feld: 4.04cqh;
}
/* Glas ueber dem Rahmen: scharfe Kante und Leuchten - auf 4K nicht mehr weich */
.overlay.ik-admin-login .auth-card::before {
  content: ""; position: absolute; pointer-events: none;
  left: var(--k-links); top: var(--k-oben); width: var(--k-breite); height: var(--k-hoehe);
  box-sizing: border-box; border-radius: var(--k-rund);
  border: 1px solid rgba(214, 196, 255, 0.62);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 22%), rgba(9, 6, 24, 0.30);
  box-shadow: 0 0 1.3cqh rgba(168, 85, 247, 0.55), inset 0 0 2.4cqh rgba(124, 58, 237, 0.12);
}
/* die Pfote(n) liegen vor der Karte */
.overlay.ik-admin-login .auth-card::after {
  content: ""; position: absolute; pointer-events: none;
  left: var(--h-links); top: var(--h-oben); width: var(--h-breite); height: var(--h-hoehe);
  background: var(--hand) center / 100% 100% no-repeat;
}
.overlay.ik-admin-login .auth-brand,
.overlay.ik-admin-login .auth-card h2 {
  position: absolute; left: var(--k-links); width: var(--k-breite); margin: 0;
  transform: translateY(-50%); text-align: center; white-space: nowrap; line-height: 1.1;
}
.overlay.ik-admin-login .auth-brand { top: var(--t-oben); font-size: var(--t-schrift); font-weight: 700; letter-spacing: 0.01em; }
.overlay.ik-admin-login .auth-brand span { color: #a855f7; }
.overlay.ik-admin-login .auth-card h2 { top: var(--a-oben); font-size: var(--a-schrift); font-weight: 400; color: #ffffff; }
.overlay.ik-admin-login #login-pw-block { display: contents; }
.overlay.ik-admin-login #login-pw-block > label { font-size: 0; color: transparent; display: block; }
.overlay.ik-admin-login #login-pw-block > label::before {
  position: absolute; left: var(--f-links); transform: translateY(-50%);
  font-size: var(--l-schrift); line-height: 1.1; color: #ffffff; white-space: nowrap;
}
.overlay.ik-admin-login #login-pw-block > label:nth-child(1)::before { content: "Benutzername"; top: var(--l1-oben); }
.overlay.ik-admin-login #login-pw-block > label:nth-child(2)::before { content: "Passwort"; top: var(--l2-oben); }
.overlay.ik-admin-login #login-username,
.overlay.ik-admin-login #login-password {
  position: absolute; left: var(--f-links); width: var(--f-breite);
  box-sizing: border-box; margin: 0; padding: 0 var(--einzug);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--rund);
  background: rgba(4, 3, 14, 0.55);
  color: #ffffff; -webkit-text-fill-color: #ffffff; caret-color: #e879f9;
  font-size: var(--schrift); font-family: inherit;
  outline: none; transition: border-color 120ms ease, box-shadow 120ms ease;
}
.overlay.ik-admin-login #login-username:hover,
.overlay.ik-admin-login #login-password:hover { border-color: rgba(255, 255, 255, 0.30); }
.overlay.ik-admin-login #login-username { top: var(--u-oben); height: var(--u-hoehe); }
.overlay.ik-admin-login #login-password { top: var(--p-oben); height: var(--p-hoehe); }
/* Rahmen des aktiven Feldes (magenta) */
.overlay.ik-admin-login #login-username:focus,
.overlay.ik-admin-login #login-password:focus,
.overlay.ik-admin-login #login-pin:focus {
  border-color: #d946ef; box-shadow: 0 0 0 1px #d946ef, 0 0 0.9cqh rgba(217, 70, 239, 0.55);
}
.overlay.ik-admin-login input:-webkit-autofill,
.overlay.ik-admin-login input:-webkit-autofill:hover,
.overlay.ik-admin-login input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff; transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0 100cqw rgba(4, 3, 14, 0.55) inset;
}
/* Haken "Angemeldet bleiben" - echt, die ganze Zeile ist anklickbar */
.overlay.ik-admin-login .auth-card label.auth-merken {
  position: absolute; left: var(--m-links); top: var(--m-oben); height: var(--m-hoehe); width: auto;
  min-height: 0; margin: 0; padding: 0 0.6cqw 0 0.24cqw; gap: 0.75cqw; box-sizing: border-box;
  display: flex; flex-direction: row; align-items: center;
}
.overlay.ik-admin-login .auth-card label.auth-merken span { font-size: var(--l-schrift); color: #ffffff; white-space: nowrap; }
.overlay.ik-admin-login .auth-card label.auth-merken input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: var(--k-groesse); height: var(--k-groesse); flex: 0 0 auto;
  margin: 0; border-radius: 0.32cqh; cursor: pointer;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.55);
}
.overlay.ik-admin-login .auth-card label.auth-merken input[type="checkbox"]:checked {
  background: #8b5cf6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.6 3.6L15.5 6.5' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
  border-color: #a78bfa; box-shadow: 0 0 0.8cqh rgba(139, 92, 246, 0.8);
}
.overlay.ik-admin-login .auth-card label.auth-merken input[type="checkbox"]:focus-visible,
html.ik-tv .overlay.ik-admin-login .auth-card label.auth-merken input[type="checkbox"]:focus {
  outline: 2px solid #e879f9; outline-offset: 2px;
}
/* Knopf - echt */
.overlay.ik-admin-login .auth-card button[type="submit"] {
  position: absolute; left: var(--b-links); top: var(--b-oben); width: var(--b-breite); height: var(--b-hoehe);
  margin: 0; padding: 0; border: 0; border-radius: var(--rund);
  background: linear-gradient(97deg, #6d28d9 0%, #8b5cf6 55%, #a78bfa 100%);
  color: #ffffff; font-size: calc(var(--schrift) * 1.08); font-weight: 600; font-family: inherit; cursor: pointer;
  box-shadow: 0 0 1.4cqh rgba(139, 92, 246, 0.55);
  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}
.overlay.ik-admin-login .auth-card button[type="submit"]:hover { filter: brightness(1.12); }
.overlay.ik-admin-login .auth-card button[type="submit"]:active { filter: brightness(0.92); transform: translateY(1px); }
.overlay.ik-admin-login .auth-card button[type="submit"]:focus-visible,
html.ik-tv .overlay.ik-admin-login .auth-card button[type="submit"]:focus {
  outline: none; box-shadow: 0 0 0 2px #ffffff, 0 0 1.4cqh rgba(168, 85, 247, 0.9);
}
.overlay.ik-admin-login .auth-error {
  position: absolute; left: var(--f-links); width: var(--f-breite); top: var(--e-oben); height: var(--e-hoehe);
  min-height: 0; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: calc(var(--schrift) * 0.82); line-height: 1.15; color: #fca5a5;
}
/* PIN-Anmeldung (FIX495) */
.overlay.ik-admin-login .auth-pin {
  position: absolute; left: var(--f-links); width: var(--f-breite); top: var(--pin-oben); height: var(--pin-hoehe);
  box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 0;
}
.overlay.ik-admin-login .auth-pin.hidden { display: none; }
.overlay.ik-admin-login .auth-pin-wer { font-size: var(--schrift); color: #ffffff; text-align: center; }
.overlay.ik-admin-login .auth-pin label {
  display: flex; flex-direction: column; gap: 0.45cqh; font-size: calc(var(--schrift) * 0.9); color: #ffffff;
}
.overlay.ik-admin-login .auth-pin input#login-pin {
  box-sizing: border-box; height: var(--pin-feld); flex: 0 0 auto; padding: 0 var(--einzug); margin: 0;   /* cqh: Prozent bezoegen sich hier aufs Label */
  border: 1px solid rgba(255,255,255,0.16); border-radius: var(--rund);
  background: rgba(4, 3, 14, 0.55); color: #fff; -webkit-text-fill-color: #fff;
  font-size: calc(var(--schrift) * 1.25); letter-spacing: 0.5em; text-align: center; outline: none;
}
.overlay.ik-admin-login .auth-card button.auth-link {
  position: static; align-self: center; width: auto; height: auto; margin: 0; padding: 0; background: none; box-shadow: none;
  color: #c4b5fd; font-size: calc(var(--schrift) * 0.82); font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
}
.overlay.ik-admin-login .auth-card button.auth-link:focus-visible,
html.ik-tv .overlay.ik-admin-login .auth-card button.auth-link:focus { outline: 2px solid #e879f9; outline-offset: 3px; }

@media (orientation: portrait) {
  .overlay.ik-admin-login .auth-card {
    width: max(100vw, calc(100vh * 941 / 1672));
    height: max(100vh, calc(100vw * 1672 / 941));
    background-image: url("../img/login-admin-hoch-leer.jpg");
    --k-links: 17.428%; --k-oben: 42.703%; --k-breite: 65.356%; --k-hoehe: 34.809%; --k-rund: 2.2cqw;
    --h-links: 33.900%; --h-oben: 42.105%; --h-breite: 39.107%; --h-hoehe: 3.589%;
    --hand: url("../img/login-admin-hoch-hand.png");
    --t-oben: 48.03%; --t-schrift: 3.4cqh; --a-oben: 51.6%; --a-schrift: 2.05cqh;
    --l1-oben: 55.32%; --l2-oben: 61.3%; --l-schrift: 1.5cqh;
    --f-links: 21.79%; --f-breite: 56.85%;
    --u-oben: 56.52%; --u-hoehe: 3.47%;
    --p-oben: 62.50%; --p-hoehe: 3.41%;
    --m-links: 21.25%; --m-oben: 67.34%; --m-hoehe: 2.69%;
    --k-groesse: 1.97cqh;
    --b-links: 21.79%; --b-oben: 71.47%; --b-breite: 56.96%; --b-hoehe: 3.77%;
    --e-oben: 75.48%; --e-hoehe: 1.79%;
    --pin-oben: 54.13%; --pin-hoehe: 12.14%;
    --schrift: 1.35cqh; --einzug: 1.7cqw; --rund: 0.9cqw; --pin-feld: 3.41cqh;
  }
  .overlay.ik-admin-login .auth-card label.auth-merken { padding-left: 0.65cqw; gap: 2cqw; }
}
/* iPhone/iPad: unter 16 px vergroessert Safari beim Antippen die ganze Seite */
@media (pointer: coarse) {
  .overlay.ik-admin-login #login-username,
  .overlay.ik-admin-login #login-password,
  .overlay.ik-admin-login #login-pin { font-size: max(16px, var(--schrift)); }
}




/* --- Rueckmeldungen (Toasts) fuer Schaltflaechen-Aktionen --- */
.ik-toasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 10000;
  display: flex; flex-direction: column; gap: 10px; max-width: min(420px, 90vw);
}
.ik-toast {
  padding: 12px 16px; border-radius: 10px;
  background: rgba(18,18,28,0.96); border: 1px solid #2a2a38;
  color: #e8e8f0; font-size: 0.85rem; line-height: 1.45;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  opacity: 1; transform: translateY(0); transition: opacity 400ms ease, transform 400ms ease;
}
.ik-toast.out { opacity: 0; transform: translateY(8px); }
.ik-toast-ok   { border-left: 3px solid #22c55e; }
.ik-toast-warn { border-left: 3px solid #f59e0b; }
.ik-toast-err  { border-left: 3px solid #ef4444; }

/* --- Live TV: echtes Suchfeld anstelle des Platzhaltertexts im Entwurf --- */
#ltv-search-input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  color: inherit; font: inherit;
}
#ltv-search-input::placeholder { color: inherit; opacity: 0.75; }
.ltv-row[data-channel-id] { cursor: pointer; }

/* --- Radio: echte Suchfelder anstelle der Platzhaltertexte im Entwurf --- */
#rad-search-sat, #rad-search-dab, #rad-search-ukw, #rad-search-net {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  color: inherit; font: inherit;
}
#rad-search-sat::placeholder, #rad-search-dab::placeholder,
#rad-search-ukw::placeholder, #rad-search-net::placeholder { color: inherit; opacity: 0.75; }
.ltv-row[data-radio-id] { cursor: pointer; }

/* --- Einstellungen: Eingabefelder des Internetradio-Pruefstands --- */
#isr-form input {
  padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border, #23232f);
  background: var(--panel-2, #16161f); color: inherit; font: inherit;
}
#isr-form input:focus { outline: none; border-color: #7c4dff; }
#isr-table td, #isr-table th { vertical-align: middle; }
#isr-table .btn { padding: 5px 10px; font-size: 11px; }
.ltv-row[data-isr-select] { cursor: pointer; }

/* --- Internetradio: Infobereich zwischen Titelbild und VU-Metern --- */
.net-nowplaying {
  text-align: center;
  padding: 10px 12px 12px;
  margin: 2px 0 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);

  /*
   * FIX450 - DER BLOCK DARF NICHT BREITER WERDEN ALS SEINE SPALTE.
   *
   * Der Spieler ist eine Flex-Spalte mit "align-items: center" (index.html,
   * .rad-player). In so einer Spalte werden die Kinder NICHT auf die volle
   * Breite gezogen, sondern auf ihren Inhalt geschrumpft - und wachsen
   * damit ueber den Rand hinaus, wenn der Inhalt lang ist.
   *
   * Gemessen auf einem 390 px breiten Telefon mit einem langen DAB-
   * Radiotext: Die Spalte war 358 px breit, dieser Block 930 px, mittig
   * zentriert - also links wie rechts 270 px ausserhalb des Bildschirms.
   *
   * Die Kuerzung eine Zeile tiefer (text-overflow: ellipsis) war die ganze
   * Zeit richtig gesetzt und konnte trotzdem nie greifen: Sie kuerzt erst,
   * wenn der Platz knapp wird, und hier bot das Elternteil 906 px an.
   *
   * "align-self: stretch" nimmt die Zentrierung fuer dieses eine Kind
   * zurueck; "min-width: 0" erlaubt ihm, unter seine Inhaltsbreite zu
   * schrumpfen - ohne das haelt ein Flex-Element an seinem Inhalt fest.
   */
  align-self: stretch;
  min-width: 0;
  max-width: 100%;
}
.net-nowplaying .np-label {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #7c4dff; margin-bottom: 5px;
}
/*
 * FIX450: ZWEI ZEILEN STATT EINER.
 *
 * Bei Internetradio steht hier ein Titel ("Interpret - Lied"), da reicht
 * eine Zeile. Bei DAB+ steht hier das Dynamic Label des Senders, und das
 * ist oft ein ganzer Satz ("... und immer deine Lieblingshits! Anruf ins
 * MDR JUMP-Studio unter ..."). Auf eine Zeile gekuerzt bleibt davon nichts
 * Lesbares uebrig.
 *
 * Zwei Zeilen fassen "Interpret - Lied" sicher und geben einem Satz
 * wenigstens den Anfang. Nach oben bleibt es begrenzt, damit ein langer
 * Text den Spieler nicht auseinanderschiebt - darunter sitzen die
 * Messwerke.
 */
.net-nowplaying .np-station {
  font-size: 17px; font-weight: 600; line-height: 1.25;
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.net-nowplaying .np-detail {
  font-size: 11px; color: #8b8b9e; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* Hier stand kurzzeitig "min-width: 0; max-width: 100%". Der Gegentest
     zeigte, dass beides nichts bewirkt: Diese Zeile ist ein gewoehnlicher
     Block und damit ohnehin so breit wie ihr Elternteil - und das wird seit
     FIX450 eine Ebene hoeher begrenzt. Eine Zeile, die sich entfernen
     laesst, ohne dass eine Messung es merkt, gehoert entfernt. */
}

/* ============================================================
   Schwarzes VU-Gehäuse auch auf den Radio-Seiten.

   Der Entwurf gibt den Instrumenten nur in der Seitenleiste ein Gehäuse
   (.vu-panel: schwarzer Grund, Rahmen, abgerundete Ecken). Auf den
   Radio-Seiten hebt .rad-vu-panel das wieder auf - dort stehen die
   Instrumente frei auf dem Seitenhintergrund.

   Hier wird das Gehäuse wiederhergestellt. Die Werte stammen unverändert
   aus .vu-panel des Entwurfs; nur der Innenabstand und der Zwischenraum
   sind an die grösseren Instrumente (220 px statt 98 px) angepasst -
   mit den Werten der kleinen Anzeige säßen sie sonst zu eng im Rahmen.
   ============================================================ */
.vu-panel.rad-vu-panel {
  background: #000;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px 16px 12px;
  gap: 20px;
  /* Nur so breit wie die Instrumente - nicht über die ganze Spalte. */
  display: inline-flex;
  align-self: center;
}

/* Der Spieler richtet seine Kinder linksbündig aus; das Gehäuse soll
   mittig unter dem Titelbild sitzen. */
.rad-player .vu-panel.rad-vu-panel,
.ltv-player .vu-panel.rad-vu-panel {
  margin-left: auto;
  margin-right: auto;
}

/* --- Profilmenü in der Kopfleiste --- */
.profile { position: relative; cursor: pointer; user-select: none; }
.profile:focus-visible { outline: 2px solid #7c4dff; outline-offset: 2px; border-radius: 8px; }

.profile-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 500;
  min-width: 210px; padding: 6px;
  background: #14141e; border: 1px solid #2a2a38; border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  cursor: default;
}
.profile-dropdown .pd-head {
  padding: 9px 11px 10px; margin-bottom: 4px;
  border-bottom: 1px solid #23232f;
}
.profile-dropdown .pd-name { font-size: 13px; font-weight: 600; color: #e8e8f0; }
.profile-dropdown .pd-role { font-size: 11px; color: #8b8b9e; margin-top: 2px; }

.profile-dropdown .pd-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 11px; border: 0; border-radius: 7px;
  background: transparent; color: #e8e8f0;
  font: inherit; font-size: 13px; cursor: pointer;
}
.profile-dropdown .pd-item:hover { background: rgba(255,255,255,0.06); }
.profile-dropdown .pd-logout { color: #fca5a5; }
.profile-dropdown .pd-logout:hover { background: rgba(239,68,68,0.12); }

/* --- Suchfeld in der Kopfleiste (im Entwurf nur Platzhaltertext) --- */
#topbar-search {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  color: inherit; font: inherit;
}
#topbar-search::placeholder { color: inherit; opacity: 0.75; }

/* ============================================================
   Feste Kopfleiste.

   Der Entwurf legt die Kopfleiste in .main-scroll - also in den einzigen
   scrollenden Bereich. Dadurch wandert sie beim Scrollen mit nach oben aus
   dem Bild. Sie soll aber stehen bleiben.

   Umgesetzt mit position:sticky statt fixed: sticky bleibt Teil des
   Layouts und behält damit automatisch die Breite der Hauptspalte. Mit
   fixed müsste die Breite von Hand nachgeführt werden - und bei
   eingeklappter Seitenleiste (Menütaste) würde sie nicht mehr passen.
   ============================================================ */
.main-scroll .topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Deckender Hintergrund ist zwingend - sonst scheint der Inhalt durch.
     Derselbe Wert wie im Entwurf, damit der Übergang unsichtbar bleibt. */
  background: var(--bg);
}

/* Das Profilmenü muss über der Kopfleiste liegen, sonst wird es von der
   nachfolgenden Seite verdeckt. */
.profile-dropdown { z-index: 500; }

/* ============================================================
   Radio-Seiten an die Fenstergröße anpassen.

   Der Entwurf arbeitet hier mit festen Pixelgrößen (Titelbild 220 px,
   Instrumente 220 px, Tasten 44/60 px) und erzwingt über
   min-width:1000px eine Mindestbreite. Bei kleinerem Fenster entstand
   dadurch Scrollen in beide Richtungen.

   Stattdessen wachsen und schrumpfen die Elemente jetzt mit dem
   verfügbaren Platz. Umgesetzt mit clamp(min, wunsch, max):
   der Wunschwert bezieht sich auf die Fensterhöhe (vh) bzw. -breite
   (vw), die Grenzen verhindern, dass etwas unlesbar klein oder auf
   einem großen Bildschirm unnatürlich groß wird.
   ============================================================ */

/*
 * Höhe ohne Zahlenwerte ermitteln.
 *
 * Eine Rechnung wie "100vh minus 104px" waere brüchig: Kopfleisten- und
 * Innenabstände ändern sich, und schon ein paar Pixel Abweichung erzeugen
 * wieder einen Rollbalken. Stattdessen wird der Platz durchgereicht -
 * .main-scroll teilt sich in feste Kopfleiste und dehnbaren Inhalt, und die
 * Radio-Seite füllt genau diesen Rest.
 */
.main-scroll { display: flex; flex-direction: column; }
.main-scroll > .content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/*
 * Standardfall (Dashboard, Live TV, alle Listenseiten): die Seite bekommt
 * ihre NATUERLICHE Hoehe und schiebt die Fusszeile nach unten weg; gescrollt
 * wird im uebergeordneten Bereich.
 *
 * Vorher stand hier "flex: 1 1 auto; min-height: 0" fuer ALLE Seiten. Das war
 * der Fehler: "min-height: 0" erlaubt einem Flex-Element, unter seine
 * Inhaltshoehe zu schrumpfen. Ist eine Seite laenger als das Fenster (also
 * ausserhalb des Vollbilds), schrumpfte die Seitenbox auf die verfuegbare
 * Hoehe - ihr Inhalt lief aber weiter und legte sich dabei UEBER die
 * Fusszeile. Genau deshalb stand "Alle Rechte vorbehalten" mitten im
 * Tuner-Status-Fenster, und unten fehlte der Streifen dafuer.
 */
.main-scroll > .content > .page:not([hidden]) {
  flex: 0 0 auto;
}

/*
 * Ausnahme: die Radio-Seiten sollen den Rest der Hoehe ausfuellen und NICHT
 * scrollen (dort passt sich stattdessen der Inhalt der Fenstergroesse an).
 * Nur sie brauchen daher das dehnbare Verhalten.
 */
.main-scroll > .content > #page-radio:not([hidden]),
.main-scroll > .content > #page-radio-dab:not([hidden]),
.main-scroll > .content > #page-radio-ukw:not([hidden]),
.main-scroll > .content > #page-radio-internet:not([hidden]) {
  flex: 1 1 auto;
  min-height: 0;
}

/*
 * Fusszeile immer am unteren Rand, unabhaengig davon, wieviel die sichtbare
 * Seite tatsaechlich fuellt.
 *
 * ".page" waechst zwar bereits per flex-grow, aber "margin-top: auto" ist der
 * zuverlaessigere Weg: es zieht in einer Flex-Spalte IMMER den gesamten noch
 * freien Platz vor dieses Element, ganz gleich, ob eine Seite ihren Raum voll
 * ausfuellt oder nicht. Die Fusszeile bleibt damit stets am Boden, und der
 * Bereich darueber (Senderliste, Player, Details) darf den gesamten Rest
 * einnehmen - genau wie gewuenscht.
 */
.main-scroll > .content > footer {
  margin-top: auto;
  flex: 0 0 auto;

  /*
   * Fusszeile dicht an den unteren Rand.
   *
   * Trennlinie ist wieder entfernt (auf Wunsch). Der Abstand nach OBEN bleibt
   * knapp, damit die Karten darueber den gewonnenen Platz nutzen koennen; nach
   * UNTEN bleibt nur so viel, dass der Text nicht am Fensterrand klebt.
   *
   * Der Abstand nach oben ist weiterhin fest gesetzt (nicht nur "margin-top:auto"),
   * weil letzteres bei Seiten, die laenger als der Bildschirm sind, gar keinen
   * Platz zu verteilen hat - dort saesse die Fusszeile sonst direkt auf der
   * letzten Karte.
   *
   * FIX453: Hier kam in FIX449 der sichere Rand unten dazu. Wieder raus.
   *
   * Der Gedanke war richtig - auf einem iPhone liegt dort der Home-Balken.
   * Zusammen mit "viewport-fit=cover" wurde daraus aber eine doppelte
   * Rechnung: Der Darstellungsbereich war ohnehin schon um den Rand
   * groesser geworden, und der Abstand kam noch obendrauf. Die Seite
   * reichte unten nicht mehr bis an den Bildschirmrand.
   *
   * Beides zusammen hat es verschlimmert, also geht beides zusammen wieder
   * weg. Sollte sich spaeter zeigen, dass die Fusszeile doch unter dem
   * Home-Balken liegt, kommt der Rand ALLEIN zurueck - und dann wird
   * einzeln nachgesehen, was er bewirkt.
   */
  padding: 10px 20px 8px;
}

/*
 * ".page .rad-wrap" statt nur ".rad-wrap": das urspruengliche Regelwerk setzt
 * dort eine feste Rechnung ("calc(100vh - 108px)"), passend zur alten,
 * NICHT-fest-stehenden Kopfleiste. Gleiche Spezifitaet wuerde je nach
 * Reihenfolge im Quelltext entscheiden - mit dem zusaetzlichen Vorfahren
 * ".page" gewinnt diese Regel unabhaengig davon immer, und die Seite kann
 * bis knapp ueber die Fusszeile reichen.
 */
.page .rad-wrap {
  /* Mindestbreite aufheben - sie war die Ursache für waagerechtes Scrollen. */
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Auf den Radio-Seiten soll gar nichts rollen. */
.main-scroll > .content > #page-radio:not([hidden]),
.main-scroll > .content > #page-radio-dab:not([hidden]),
.main-scroll > .content > #page-radio-ukw:not([hidden]),
.main-scroll > .content > #page-radio-internet:not([hidden]) {
  overflow: hidden;
}

/* Seitenspalten: mitwachsend statt fest. */
.rad-wrap .rad-stations {
  width: clamp(180px, 17vw, 280px);
  padding: clamp(10px, 1.2vh, 16px);
}
.rad-wrap .rad-details {
  width: clamp(200px, 19vw, 300px);
  padding: clamp(10px, 1.2vh, 16px);
}

/* Der Spieler darf nicht mehr selbst scrollen - er passt sich an. */
.rad-wrap .rad-player {
  min-width: 0;
  overflow: hidden;
  padding: clamp(10px, 1.6vh, 20px) clamp(12px, 1.6vw, 24px);
  justify-content: center;
  gap: 0;
}

/* --- Elemente des Spielers --- */

.rad-player .rad-player-head .name { font-size: clamp(15px, 2.1vh, 22px); }
.rad-player .rad-sub {
  font-size: clamp(11px, 1.3vh, 13px);
  margin-bottom: clamp(6px, 1.4vh, 20px);
}

.rad-player .rad-art-row { margin-bottom: clamp(6px, 1.4vh, 18px); }
.rad-player .rad-cover {
  /*
   * Obergrenze deutlich angehoben (220px -> 300px, 19vh -> 24vh): vorher
   * blieb die Zusammenstellung auf einem grossen/maximierten Fenster bei
   * dieser Groesse stehen, obwohl reichlich Platz frei war - der Rahmen
   * (die Karte selbst) wurde zwar breiter, ihr INHALT aber nicht. Jetzt
   * waechst das Titelbild wirklich mit dem verfuegbaren Feld mit.
   */
  width: clamp(96px, 24vh, 300px);
  height: clamp(96px, 24vh, 300px);
}
/* Die Wellenform links und rechts darf zuerst weichen - sie ist Zierde. */
.rad-player .rad-wave { max-width: 27%; height: auto; }   /* Anteil der Spielerbreite, nicht des Browserfensters */
@media (max-height: 760px) { .rad-player .rad-wave { display: none; } }

.rad-player .rad-tags { margin-bottom: clamp(6px, 1.2vh, 18px); }
.rad-player .net-nowplaying {
  padding: clamp(5px, 0.9vh, 10px) 12px clamp(6px, 1vh, 12px);
  margin: 0 0 clamp(4px, 0.8vh, 6px);
}
.rad-player .net-nowplaying .np-station { font-size: clamp(13px, 1.7vh, 17px); }
.rad-player .net-nowplaying .np-detail  { font-size: clamp(10px, 1.1vh, 11px); }

/* Instrumente: Breite an die Höhe koppeln, damit das Gehäuse mitskaliert. */
.rad-wrap .vu-panel.rad-vu-panel {
  gap: clamp(8px, 1.4vw, 20px);
  padding: clamp(8px, 1.2vh, 14px) clamp(10px, 1.2vw, 16px) clamp(7px, 1vh, 12px);
  margin-bottom: clamp(8px, 1.6vh, 20px);
}
.rad-wrap .vu-meter.rad-vu-meter { width: clamp(96px, 21vh, 280px); }   /* siehe rad-cover: Obergrenze angehoben */
.rad-player .rad-vu-meter .ch-label {
  font-size: clamp(12px, 1.7vh, 16px);
  letter-spacing: .12em;
}

/* Steuertasten */
.rad-player .rad-controls {
  gap: clamp(10px, 1.8vw, 22px);
  margin-bottom: clamp(8px, 1.4vh, 18px);
}
.rad-player .rad-controls button {
  width: clamp(32px, 5.2vh, 52px);
  height: clamp(32px, 5.2vh, 52px);
}
.rad-player .rad-controls button svg {
  width: clamp(14px, 2.1vh, 21px);
  height: clamp(14px, 2.1vh, 21px);
}
.rad-player .rad-controls button.primary {
  width: clamp(44px, 7vh, 72px);
  height: clamp(44px, 7vh, 72px);
}
.rad-player .rad-controls button.primary svg {
  width: clamp(17px, 2.6vh, 26px);
  height: clamp(17px, 2.6vh, 26px);
}


.rad-player .rad-volume-row {
  margin-bottom: clamp(8px, 1.6vh, 22px);
  /*
   * Der Entwurf begrenzt diese Zeile fest auf 420px - auf einem breiten
   * Spielerfenster blieb sie dadurch schmal, mit sichtbarem Leerraum links
   * und rechts. "92%" bezieht sich auf die tatsaechliche Breite des
   * Spielers (dessen Containing Block), waechst also mit ihm mit; die
   * 900px-Obergrenze verhindert nur, dass der Regler auf sehr breiten
   * Fenstern unnatuerlich lang wird.
   */
  max-width: min(900px, 92%);
}
.rad-player .rad-action-row { margin-bottom: 0; }

/* Sehr flache Fenster: der Zierbereich weicht zuerst, damit Instrumente
   und Bedienung lesbar bleiben. */
@media (max-height: 620px) {
  .rad-player .rad-sub { display: none; }
  .rad-player .rad-tags { display: none; }
}

/* ============================================================
   Senderlisten: Favoritenstern, Kategorieauswahl, Verschieben
   ============================================================ */

/* Der Stern sitzt rechts in der Zeile und ist einzeln anklickbar. */
.ltv-row .ik-stern {
  margin-left: auto;
  padding: 2px 4px;
  font-size: 15px;
  line-height: 1;
  color: #5a5a70;
  cursor: pointer;
  user-select: none;
  transition: color 120ms ease, transform 120ms ease;
}
.ltv-row .ik-stern:hover { color: #c9a227; transform: scale(1.15); }
.ltv-row .ik-stern.aktiv { color: #f0b429; }
.ltv-row .ik-stern:focus-visible { outline: 2px solid #7c4dff; outline-offset: 2px; border-radius: 4px; }

/* Kategorieauswahl: als echtes Auswahlfeld, Aussehen wie im Entwurf. */
select.ltv-group-select {
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  color: inherit; font: inherit;
  /* Eigener Pfeil, da das Auswahlfeld seinen eigenen sonst doppelt zeigt. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 26px;
}
select.ltv-group-select option { background: #12121c; color: #e8e8f0; }

/* Sortiertaste: sichtbar aktiv, solange verschoben werden kann. */
.ltv-filter-btn { cursor: pointer; }
.ltv-filter-btn.aktiv {
  background: rgba(124, 77, 255, 0.18);
  border-color: rgba(124, 77, 255, 0.55);
  color: #a78bfa;
}
.ltv-filter-btn:focus-visible { outline: 2px solid #7c4dff; outline-offset: 2px; }

/* Zeilen im Verschiebemodus */
.ltv-row.ik-sortierbar { cursor: grab; }
.ltv-row.ik-sortierbar:active { cursor: grabbing; }
.ltv-row.ik-zieht { opacity: 0.45; outline: 1px dashed rgba(124,77,255,0.7); }

/* --- Lautstärkezeile: mittig, mit Lautsprechersymbol links --- */
.rad-player .rad-volume-row {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
.rad-player .rad-volume-row .ik-vol-icon {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  color: inherit;
}

/*
 * Regler so dick wie der weisse Punkt (Knopf ist 13px Durchmesser laut
 * Entwurf) - vorher war die Rille nur 4px hoch, der Knopf wirkte dadurch
 * unverhaeltnismaessig gross gegenueber der duennen Linie.
 */
.rad-player .rad-vol-slider {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 4px 0;   /* etwas zusaetzliche Grifflaeche zum Ziehen */
  height: 13px;
  border-radius: 6.5px;
  box-sizing: content-box;
  background-clip: content-box;
  cursor: pointer;
  touch-action: none;
}
.rad-player .rad-vol-slider .fill {
  top: 4px;
  height: 13px;
  border-radius: 6.5px;
}
.rad-player .rad-vol-slider .knob { top: calc(50%); }
.rad-player .rad-vol-slider.ik-zieht .knob { transform: translate(-50%, -50%) scale(1.25); }

/* --- "Aktuell läuft" bei FERNSEHEN: Vorschaufenster immer im Format 16:9 --- */
.ik-tv-fenster {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #0c0c14;
}
/* Das Fenster des Entwurfs füllt den Rahmen vollständig aus. */
.ik-tv-fenster > .live-thumb {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
}
.ik-tv-fenster > .live-thumb > svg,
.ik-tv-fenster > .live-thumb > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* --- "Aktuell läuft" bei RADIO: Logo links, Sendername rechts --- */
.ik-now-thumb {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(12px, 2.5vw, 22px);
  padding: 18px clamp(14px, 2.5vw, 24px);
  min-height: 132px;
  background: radial-gradient(circle at 30% 45%, #1b1430, #0c0c14 72%);
  border-radius: 10px;
  overflow: hidden;
}

/* Das Abzeichen bleibt oben links im Fenster. */
.ik-now-thumb .live-badge {
  position: absolute;
  /* Etwas weiter von der Ecke weg als vorher - direkt an der Rundung
     wirkte das Abzeichen so, als wuerde es vom Fensterrand angeschnitten. */
  top: 14px;
  left: 16px;
  z-index: 1;
}

.ik-now-bild {
  flex: 0 0 auto;
  width: clamp(64px, 22%, 96px);
  height: clamp(64px, 22%, 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.ik-now-bild .ik-now-logo { max-width: 88%; max-height: 88%; object-fit: contain; }
.ik-now-bild .ik-now-mark {
  font-size: clamp(20px, 3.4vh, 30px);
  font-weight: 700;
  color: #a78bfa;
  letter-spacing: 0.03em;
}

.ik-now-text { min-width: 0; }
.ik-now-text .ik-now-name {
  font-size: clamp(15px, 2.2vh, 20px);
  font-weight: 700;
  color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ik-now-text .ik-now-quelle {
  margin-top: 3px;
  font-size: 12px;
  color: #8b8b9e;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Kennzeichnung TV/Radio in der Legende der Kachel "Top Sender". */
.legend-row .ik-art {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #a78bfa;
  background: rgba(124, 77, 255, 0.16);
  vertical-align: middle;
}

/* --- Senderlisten-Fusszeile: "Favoriten" links, "Sender: N" rechts --- */
.ltv-favorites {
  /* Der Entwurf schiebt hierueber "margin-left:auto" auf jedes <span> - das
     wuerde jetzt "Favoriten" faelschlich nach rechts ziehen. Stattdessen
     traegt nur noch die rechte Gruppe den Abstand (siehe unten). */
  justify-content: flex-start;
}
.ltv-favorites .ik-fav-label {
  margin-left: 0 !important;
  color: var(--purple);
  font-weight: 600;
}
.ltv-favorites .ik-sender-count {
  margin-left: auto !important;
  color: var(--text-dim);
  font-weight: 600;
}

/* --- "Top Sender": Laufzeit statt Wiedergabezahl - braucht mehr Breite --- */
.legend-row .time {
  /* Der Entwurf reserviert hier nur 46px fuer eine Zahl wie "3" - "1h 12m"
     wuerde darin ueberlaufen und wirkte dadurch abgeschnitten. */
  width: auto;
  min-width: 56px;
  white-space: nowrap;
}


/*
 * Die Seiten duerfen bis knapp vor die Fusszeile reichen.
 *
 * Der Entwurf setzt unten 40px Innenabstand am Inhaltsbereich - zusammen mit
 * der Fusszeile blieb darunter sichtbar Platz ungenutzt. Auf 10px reduziert;
 * den restlichen Abstand zur Fusszeile liefert deren eigener oberer Abstand.
 */
.main-scroll > .content {
  padding-bottom: 10px;
}

/* ============================================================
   Titelverlauf in "Nächste Sendungen".

   Der Verlauf kann bis zu 12 Einträge lang werden - ohne Begrenzung würde
   die Karte dabei immer weiter wachsen und die Nachbarkarten in der Zeile
   auseinanderziehen. Deshalb bekommt der Bereich unterhalb der Kopfzeile
   eine Höhenbegrenzung und rollt bei Bedarf für sich allein.
   ============================================================ */
#card-next {
  display: flex;
  flex-direction: column;
}
#card-next .card-head { flex: 0 0 auto; }

/* Alles nach der Kopfzeile ist der Verlauf selbst (siehe fillCard). */
#card-next .sched-item {
  flex: 0 0 auto;
}
#card-next > .sched-item:first-of-type {
  margin-top: 2px;
}

/*
 * Der eigentliche Rollbereich.
 *
 * "max-height: 100%" war hier WIRKUNGSLOS: die Karte sitzt in einem Raster
 * (.row-2) ohne festgelegte Zeilenhoehe. Eine Prozentangabe braucht aber eine
 * bestimmte Bezugshoehe - ohne die wird sie ignoriert, und die Karte wuchs
 * einfach weiter, statt zu rollen. Zusaetzlich bestimmt eine wachsende Karte
 * in einem Raster selbst die Zeilenhoehe, kann also nie "zu hoch" werden.
 *
 * Deshalb eine echte Obergrenze, bezogen auf die Fensterhoehe: bis 420 Pixel
 * waechst die Karte mit, darueber wird gerollt. Die Untergrenze verhindert,
 * dass auf sehr flachen Fenstern nur noch ein Eintrag sichtbar ist.
 */
#card-next {
  max-height: clamp(240px, 38vh, 420px);
  overflow-y: auto;
  /* Damit der Rollbalken nicht ueber dem abgerundeten Rand klebt. */
  overscroll-behavior: contain;
  /* Schmaler, unaufdringlicher Rollbalken - der Standard wirkt hier zu massiv. */
  scrollbar-width: thin;
}

/*
 * Die Kopfzeile bleibt beim Rollen stehen - sonst waere beim Herunterrollen
 * nicht mehr erkennbar, welche Karte man gerade liest.
 */
#card-next {
  /*
   * Oberen Innenabstand der Karte auf die Kopfzeile verlagern. Bliebe er an
   * der Karte, entstuende oberhalb der festgehefteten Kopfzeile ein Streifen,
   * durch den der wegrollende Inhalt sichtbar waere.
   */
  padding-top: 0;
}
#card-next .card-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card-bg);
  padding-top: 18px;
  padding-bottom: 8px;
}
#card-next::-webkit-scrollbar { width: 6px; }
#card-next::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

/* ============================================================
   Benutzer-Seite - Regeln 1:1 aus dem Design-Entwurf uebernommen.
   (Der Entwurf liefert sein CSS inline; hier stehen nur die fuer
   diese Seite noetigen Regeln, unveraendert im Wortlaut.)
   ============================================================ */

.rec-stat-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px;
}

.rec-stat-card {
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:18px; display:flex; align-items:center; gap:14px;
}

.rec-stat-icon {
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.rec-stat-num {
  font-size:22px; font-weight:700; color:#fff;
}

.rec-stat-lbl {
  font-size:12px; color:var(--text-dim);
}

.usr-head-icon {
  width:46px; height:46px; border-radius:12px; background:rgba(124,77,255,.18); color:#a78bfa; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.usr-stat-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px;
}

.usr-stat-grid .rec-stat-num {
  font-size:28px; line-height:1.15;
}

.usr-body {
  display:flex; gap:16px; align-items:flex-start;
}

.usr-table-card {
  flex:1; min-width:0; background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:6px 0; overflow:hidden;
}

.usr-detail-card {
  width:600px; flex-shrink:0; background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:20px;
}

table.usr-table {
  width:100%; border-collapse:collapse; font-size:12.5px;
}

table.usr-table th {
  text-align:left; color:var(--text-dim); font-weight:600; font-size:11.5px; padding:12px 10px;
}

table.usr-table td {
  padding:12px 10px; border-top:1px solid var(--card-border); color:#fff; vertical-align:middle;
}

table.usr-table tr.usr-row {
  cursor:pointer;
}

table.usr-table tr.usr-row:hover td {
  background:#16162a;
}

table.usr-table tr.usr-row.selected td {
  background:rgba(124,77,255,.10);
}

.usr-avatar {
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff;
}

.usr-role-pill {
  display:inline-block; padding:4px 12px; border-radius:7px; font-size:11px; font-weight:600;
}

.usr-role-pill.admin {
  background:rgba(124,77,255,.18); color:#a78bfa; border:1px solid rgba(124,77,255,.4);
}

.usr-role-pill.user {
  background:rgba(56,189,248,.14); color:#38bdf8; border:1px solid rgba(56,189,248,.35);
}

.usr-role-pill.read {
  background:rgba(34,197,94,.14); color:#22c55e; border:1px solid rgba(34,197,94,.35);
}

.usr-status-cell {
  display:flex; align-items:center; gap:7px; font-size:12px;
}

.usr-status-cell .dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
}

.usr-icon-btn {
  width:32px; height:30px; border-radius:8px; background:transparent; border:1px solid var(--card-border); color:var(--text-dim); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; margin-right:5px; vertical-align:middle;
}

table.usr-table td:last-child {
  white-space:nowrap;
}

.usr-icon-btn:hover {
  color:#fff; border-color:var(--purple);
}

.usr-detail-top {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;
}

.usr-detail-top h3 {
  font-size:18px; font-weight:700; color:#fff;
}

.usr-detail-head {
  display:flex; align-items:center; gap:16px; margin-bottom:18px;
}

.usr-avatar-lg {
  width:74px; height:74px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; color:#fff; background:linear-gradient(135deg,#7c4dff,#c084fc); border:2px solid var(--purple); flex-shrink:0;
}

.usr-detail-name {
  font-size:22px; font-weight:700; color:#fff;
}

.usr-detail-status {
  display:flex; align-items:center; gap:7px; font-size:13px; color:var(--green); margin:3px 0;
}

.usr-detail-role {
  font-size:16px; font-weight:700; color:var(--purple);
}

.usr-tabs {
  margin-bottom:16px;
}

.usr-detail-cols {
  display:flex; gap:16px; align-items:flex-start;
}

.usr-info-box {
  flex:1; min-width:0; background:#0d0d18; border:1px solid var(--card-border); border-radius:12px; padding:16px;
}

.usr-info-title {
  font-size:13.5px; font-weight:700; color:#fff; margin-bottom:12px;
}

.usr-actions-col {
  width:230px; flex-shrink:0; display:flex; flex-direction:column; gap:8px;
}

.usr-action-btn {
  display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:9px; background:#0d0d18; border:1px solid var(--card-border); color:var(--text); font-size:12.5px; font-weight:500; cursor:pointer; text-align:left;
}

.usr-action-btn:hover {
  border-color:var(--purple);
}

.usr-action-btn.warn {
  color:#f59e0b;
}

.usr-action-btn.danger {
  color:var(--red);
}

.usr-action-btn.warn svg {
  color:#f59e0b;
}

.usr-action-btn.danger svg {
  color:var(--red);
}

.usr-toast {
  position:fixed; bottom:calc(26px + var(--sicher-unten)); left:50%; transform:translateX(-50%); background:#1a1a2e; border:1px solid var(--purple); color:#fff; font-size:13px; padding:11px 20px; border-radius:10px; z-index:100; box-shadow:0 8px 30px rgba(0,0,0,.5);
}

.usr-toast[hidden] {
  display:none;
}

.usr-perm-row {
  display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--card-border); font-size:12.5px;
}

.usr-perm-row:last-child {
  border-bottom:none;
}

.usr-perm-row .k {
  color:var(--text-dim);
}

.usr-toggle {
  width:38px; height:21px; border-radius:11px; background:#2a2a3a; position:relative; cursor:pointer; flex-shrink:0; transition:background .15s;
}

.usr-toggle::after {
  content:""; position:absolute; top:2.5px; left:2.5px; width:16px; height:16px; border-radius:50%; background:#8888a0; transition:all .15s;
}

.usr-toggle.on {
  background:rgba(124,77,255,.5);
}

.usr-toggle.on::after {
  left:19.5px; background:var(--purple);
}

/* Scrollbereiche bleiben bedienbar, aber die native Scrollleiste bleibt unsichtbar. */
*, *::before, *::after { scrollbar-width:none !important; -ms-overflow-style:none !important; }
*::-webkit-scrollbar { width:0 !important; height:0 !important; display:none !important; }

/* --- Aufnahmen, EPG, TV-Guide und Mediathek --- */
.ik-media-page { max-width:1220px; margin:0 auto; padding-bottom:36px; }
.ik-media-page .content-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; }
.ik-media-page h1 { margin:0; color:#fff; font-size:25px; }
.ik-media-page .lede { color:var(--muted); margin-top:5px; font-size:13px; }
.ik-outline-btn,.ik-small-btn { border:1px solid var(--card-border); background:#11111e; color:var(--text); border-radius:8px; padding:9px 13px; cursor:pointer; font-size:12px; }
.ik-outline-btn:hover,.ik-small-btn:hover { border-color:var(--purple); color:#fff; }
.ik-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:16px; }
.ik-stat,.ik-panel { background:#11111e; border:1px solid var(--card-border); border-radius:12px; }
.ik-stat { padding:16px; display:flex; flex-direction:column; gap:5px; }
.ik-stat b { color:#fff; font-size:23px; }
.ik-stat span,.ik-muted { color:var(--muted); font-size:12px; }
.ik-panel { padding:17px; margin-bottom:16px; }
.ik-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ik-panel-head h3 { margin:0; color:#fff; font-size:15px; }
.ik-search { border:1px solid var(--card-border); background:#0d0d18; border-radius:7px; color:#fff; padding:8px 10px; min-width:200px; outline:none; }
.ik-search:focus { border-color:var(--purple); }
.ik-list { display:flex; flex-direction:column; max-height:520px; overflow:auto; }
.ik-list-row { display:flex; align-items:center; gap:14px; padding:12px 2px; border-top:1px solid var(--card-border); min-height:48px; }
.ik-list-main { min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; }
.ik-list-main strong,.ik-media-card strong { color:#fff; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ik-list-main span,.ik-media-card span,.ik-media-card small { color:var(--muted); font-size:11px; }
.ik-badge { color:#b9f6cf; background:rgba(34,197,94,.14); padding:4px 8px; border-radius:999px; font-size:11px; }
.ik-size { min-width:68px; color:var(--muted); font-size:11px; text-align:right; }
.ik-small-btn { padding:6px 9px; font-size:11px; white-space:nowrap; }
.ik-channel-groups section { border-top:1px solid var(--card-border); padding-top:13px; margin-top:13px; }
.ik-channel-groups section:first-child { border-top:0; padding-top:0; margin-top:0; }
.ik-channel-groups h4 { margin:0 0 8px; color:#d8c8ff; font-size:13px; }
.ik-program { display:flex; align-items:center; gap:14px; padding:10px 0; border-top:1px solid rgba(45,45,65,.7); }
.ik-program-time { width:54px; color:#fff; font-size:12px; line-height:1.4; flex-shrink:0; }
.ik-program-time small { color:var(--muted); }
.ik-program > div:nth-child(2) { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.ik-program strong { color:#fff; font-size:12px; }
.ik-program span { color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ik-guide-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ik-now-card { border:1px solid var(--card-border); background:#0d0d18; border-radius:9px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.ik-now-card strong { color:#fff; font-size:17px; }
.ik-now-card span:not(.ik-live),.ik-now-card p { color:var(--muted); font-size:12px; margin:0; line-height:1.5; }
.ik-live { width:max-content; color:#fff; background:#ef4444; border-radius:4px; padding:3px 6px; font-size:10px; font-weight:700; }
.ik-empty { color:var(--muted); border:1px dashed var(--card-border); border-radius:9px; padding:22px; text-align:center; font-size:12px; }
.ik-media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.ik-media-card { min-width:0; border:1px solid var(--card-border); background:#0d0d18; border-radius:9px; overflow:hidden; }
.ik-media-thumb { height:90px; display:flex; align-items:center; justify-content:center; color:#c9a9ff; background:linear-gradient(135deg,#241650,#11111e); font-size:24px; }
.ik-media-card > div:last-child { padding:11px; display:flex; flex-direction:column; gap:5px; }
@media (max-width:760px) { .ik-stat-grid,.ik-guide-columns { grid-template-columns:1fr 1fr; } .ik-media-page .content-head { align-items:flex-start; flex-direction:column; } .ik-list-row { flex-wrap:wrap; } .ik-search { min-width:0; width:100%; } }

/* --- DVB-Sendersuchlauf --- */
.ik-dvb-page { max-width:1260px; margin:0 auto; padding-bottom:36px; }
.ik-dvb-page .content-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; }
.ik-dvb-title { display:flex; align-items:center; gap:14px; }
.ik-dvb-title h1 { margin:0; color:#fff; font-size:25px; }
.ik-dvb-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; color:#bd75ff; background:rgba(124,77,255,.15); border-radius:13px; }
.ik-dvb-icon svg { width:32px; height:32px; }
.ik-dvb-actions { display:flex; gap:9px; flex-wrap:wrap; }
.ik-dvb-layout { display:grid; grid-template-columns:315px minmax(0,1fr) 315px; gap:14px; align-items:start; }
.ik-dvb-card { background:linear-gradient(145deg,#111522,#0d101a); border:1px solid var(--card-border); border-radius:11px; padding:16px; min-width:0; }
.ik-dvb-card h3 { margin:0 0 14px; color:#fff; font-size:16px; }
.ik-dvb-label { display:block; color:var(--muted); font-size:12px; margin:12px 0 6px; }
.ik-dvb-select,.ik-dvb-number { width:100%; box-sizing:border-box; border:1px solid var(--card-border); background:#0b0d16; border-radius:7px; color:#eee; padding:10px; outline:none; }
.ik-dvb-select:focus,.ik-dvb-number:focus { border-color:var(--purple); }
.ik-dvb-tabs { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--card-border); border-radius:7px; overflow:hidden; }
.ik-dvb-tabs button { border:0; border-right:1px solid var(--card-border); background:#11111e; color:var(--muted); padding:9px 5px; cursor:pointer; font-size:11px; }
.ik-dvb-tabs button:last-child { border-right:0; }
.ik-dvb-tabs button.active { background:linear-gradient(135deg,#7138ed,#8b4df7); color:#fff; }
.ik-dvb-check { display:flex; align-items:center; gap:8px; color:#c8c8d8; font-size:12px; margin:12px 0; }
.ik-dvb-check input { accent-color:#934cff; width:17px; height:17px; }
.ik-dvb-start { width:100%; margin-top:12px; border:0; border-radius:8px; background:linear-gradient(135deg,#6427df,#9856ff); color:#fff; padding:13px; font-weight:700; cursor:pointer; }
.ik-dvb-start:disabled { opacity:.55; cursor:not-allowed; }
.ik-dvb-progress { display:flex; align-items:center; gap:13px; border:1px solid var(--card-border); border-radius:10px; padding:14px; margin-bottom:14px; background:#0c0f19; }
.ik-dvb-ring { width:40px; height:40px; border-radius:50%; background:conic-gradient(#a855f7 var(--progress,0%),#25283a 0); position:relative; flex-shrink:0; }
.ik-dvb-ring::after { content:""; position:absolute; inset:7px; background:#0c0f19; border-radius:50%; }
.ik-dvb-progress strong { display:block; color:#fff; font-size:15px; }
.ik-dvb-progress span { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.ik-dvb-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:14px; }
.ik-dvb-kpi { border:1px solid var(--card-border); border-radius:9px; padding:12px; background:#0d101a; }
.ik-dvb-kpi b { display:block; color:#fff; font-size:20px; }
.ik-dvb-kpi span { color:var(--muted); font-size:10px; }
.ik-dvb-table-wrap { overflow:auto; max-height:440px; }
.ik-dvb-table { width:100%; border-collapse:collapse; font-size:12px; }
.ik-dvb-table th { color:var(--muted); text-align:left; padding:9px 7px; font-weight:500; white-space:nowrap; }
.ik-dvb-table td { color:#ddd; padding:9px 7px; border-top:1px solid rgba(45,45,65,.75); white-space:nowrap; }
.ik-dvb-table td:first-child { color:var(--muted); }
.ik-dvb-signal { height:7px; border-radius:99px; background:#282c3c; min-width:95px; overflow:hidden; }
.ik-dvb-signal i { display:block; height:100%; background:#43e58d; border-radius:inherit; }
.ik-dvb-result-actions { display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.ik-dvb-result-actions button { width:100%; }
.ik-dvb-muted { color:var(--muted); font-size:12px; line-height:1.5; }
@media (max-width:1050px) { .ik-dvb-layout { grid-template-columns:270px minmax(0,1fr); } .ik-dvb-layout > .ik-dvb-card:last-child { grid-column:1 / -1; } }
@media (max-width:700px) { .ik-dvb-page .content-head { align-items:flex-start; flex-direction:column; } .ik-dvb-layout { grid-template-columns:1fr; } .ik-dvb-layout > .ik-dvb-card:last-child { grid-column:auto; } .ik-dvb-kpis { grid-template-columns:repeat(2,1fr); } }

/* --- Internet-Radio-Senderverwaltung --- */
.ik-internet-page { max-width:1260px; margin:0 auto; padding-bottom:36px; }
.ik-internet-page .content-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.ik-internet-title { display:flex; align-items:center; gap:14px; }
.ik-internet-title h1 { margin:0; color:#fff; font-size:25px; }
.ik-internet-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; color:#bd75ff; }
.ik-internet-icon svg { width:42px; height:42px; }
.ik-internet-add { border:0; border-radius:7px; padding:13px 20px; color:#fff; background:linear-gradient(135deg,#6b28dc,#984cff); font-weight:700; cursor:pointer; }
.ik-ir-toolbar { display:flex; gap:12px; margin-bottom:13px; }
.ik-ir-toolbar input,.ik-ir-toolbar select,.ik-ir-form input { border:1px solid var(--card-border); background:#11111e; color:#eee; border-radius:7px; padding:10px 12px; outline:none; }
.ik-ir-toolbar input { flex:1; min-width:180px; }
.ik-ir-toolbar select { min-width:180px; }
.ik-ir-table { width:100%; border-collapse:collapse; background:#0d1019; border:1px solid var(--card-border); border-radius:10px; overflow:hidden; }
.ik-ir-table th { color:var(--muted); font-size:12px; text-align:left; padding:12px; background:#111522; }
.ik-ir-table td { color:#ddd; font-size:12px; padding:10px 12px; border-top:1px solid rgba(45,45,65,.72); }
.ik-ir-table td:nth-child(3) { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.ik-ir-logo { width:42px; height:32px; object-fit:contain; border-radius:4px; background:#151523; display:block; }
.ik-ir-online { color:#43e58d; white-space:nowrap; }
.ik-ir-action { border:1px solid var(--card-border); background:#11111e; color:#ddd; border-radius:6px; padding:6px 8px; cursor:pointer; margin-right:5px; }
.ik-ir-action.danger { color:#f87171; }
.ik-ir-form { margin-top:15px; background:#111522; border:1px solid var(--card-border); border-radius:11px; padding:18px; display:none; }
.ik-ir-form.open { display:block; }
.ik-ir-form h3 { margin:0 0 14px; color:#fff; }
.ik-ir-form-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:12px; }
.ik-ir-form input { width:100%; box-sizing:border-box; }
.ik-ir-form label { color:var(--muted); font-size:12px; display:flex; flex-direction:column; gap:6px; }
.ik-ir-form-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:14px; }
.ik-ir-msg { font-size:12px; color:var(--muted); margin-top:10px; min-height:17px; }
@media (max-width:700px) { .ik-internet-page .content-head { align-items:flex-start; flex-direction:column; } .ik-ir-toolbar,.ik-ir-form-grid { flex-direction:column; display:flex; } .ik-ir-table { display:block; overflow:auto; } }

/* ===================================================================
   FIX255 - EPG als Zeitraster (Programmuebersicht wie Vorlage Bild 2)
   =================================================================== */
.epg-page{ display:flex; flex-direction:column; gap:14px; min-height:calc(100vh - 150px); }
.epg-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.epg-title{ display:flex; align-items:center; gap:14px; }
.epg-title h1{ font-size:24px; font-weight:700; color:#fff; margin:0; }
.epg-title .lede{ font-size:13px; color:var(--text-dim); margin-top:3px; }
.epg-title-icon{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--purple),#3b82f6); color:#fff; box-shadow:0 6px 18px rgba(124,77,255,.35); flex:none; }
.epg-title-icon svg{ width:24px; height:24px; }

/* Quellen-Reiter: 5 gleich breite Knoepfe, aktiv violett */
.epg-quellen{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.epg-quelle{ display:flex; align-items:center; justify-content:center; gap:9px; height:48px; border-radius:12px; cursor:pointer;
  background:var(--card-bg); border:1px solid var(--card-border); color:var(--text-dim); font-size:14px; font-weight:600; font-family:inherit; transition:.15s; }
.epg-quelle svg{ width:19px; height:19px; }
.epg-quelle:hover{ color:var(--text); border-color:#34345a; background:#17172a; }
.epg-quelle.active{ background:var(--purple); border-color:var(--purple); color:#fff; box-shadow:0 6px 16px rgba(124,77,255,.35); }

/* Werkzeugleiste */
.epg-toolbar{ display:flex; align-items:center; gap:10px; }
.epg-btn{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:10px; cursor:pointer;
  background:var(--card-bg); border:1px solid var(--card-border); color:var(--text); font-size:13.5px; font-weight:600; font-family:inherit; }
.epg-btn svg{ width:17px; height:17px; }
.epg-btn:hover{ background:#17172a; border-color:#34345a; }
.epg-icon-btn{ width:40px; padding:0; justify-content:center; }
.epg-tag{ min-width:190px; justify-content:center; }
.epg-spacer{ flex:1; }
.epg-suche{ display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; width:300px; max-width:40vw; border-radius:10px;
  background:var(--card-bg); border:1px solid var(--card-border); color:var(--text-dim); }
.epg-suche svg{ width:17px; height:17px; flex:none; }
.epg-suche input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--text); font-size:13.5px; font-family:inherit; }
.epg-suche input::placeholder{ color:var(--text-faint); }
.epg-suche:focus-within{ border-color:var(--purple); }

/* Hauptbereich: Raster links, Detailspalte rechts */
.epg-body{ display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:14px; flex:1; min-height:0; }
.epg-grid-wrap{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; overflow:hidden; position:relative;
  display:flex; flex-direction:column; height:calc(100vh - 330px); min-height:420px; }
.epg-scroll{ overflow:scroll; flex:1; min-height:0; scrollbar-width:thin; scrollbar-color:#2c2c48 transparent; cursor:grab; outline:0; } /* FIX259: Leisten immer sichtbar, Ziehen mit der Maus */
.epg-scroll.ziehen{ cursor:grabbing; user-select:none; }
.epg-scroll::-webkit-scrollbar-track{ background:#0f0f1c; }
.epg-scroll::-webkit-scrollbar-corner{ background:#0f0f1c; } /* FIX256: min-height:0, sonst waechst der Flex-Kindknoten mit dem Inhalt und nichts scrollt */
.epg-scroll::-webkit-scrollbar,.epg-detail-body::-webkit-scrollbar{ width:8px; height:8px; display:block; }
.epg-scroll::-webkit-scrollbar-thumb,.epg-detail-body::-webkit-scrollbar-thumb{ background:#2c2c48; border-radius:4px; }
.epg-axis-row{ display:flex; position:sticky; top:0; z-index:5; background:#0f0f1c; border-bottom:1px solid var(--card-border); height:42px; width:max-content; min-width:100%; }
.epg-axis-corner{ display:flex; align-items:center; font-size:12px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; height:42px; }
.epg-axis{ position:relative; height:42px; flex:none; }
.epg-tick{ position:absolute; top:0; height:100%; padding-left:6px; display:flex; align-items:center; font-size:12px; color:var(--text-dim); border-left:1px solid #1e1e33; white-space:nowrap; }
.epg-now-chip{ position:absolute; top:8px; transform:translateX(-50%); background:var(--purple); color:#fff; font-size:11.5px; font-weight:700;
  padding:4px 9px; border-radius:999px; box-shadow:0 4px 12px rgba(124,77,255,.45); z-index:6; white-space:nowrap; }
.epg-rows{ position:relative; width:max-content; min-width:100%; }
.epg-row{ display:flex; border-bottom:1px solid #1a1a2c; width:max-content; min-width:100%; } /* FIX259: Zeile so breit wie der Inhalt, sonst verliert die Senderspalte beim Scrollen ihren Halt */
.epg-row:nth-child(even) .epg-lane{ background:rgba(255,255,255,.012); }
.epg-sender{ width:180px; flex:none; position:sticky; left:0; z-index:4; background:#0f0f1c; border-right:1px solid var(--card-border);
  display:flex; align-items:center; gap:10px; padding:0 12px; cursor:pointer; }
.epg-sender:hover .epg-sender-name{ color:#fff; }
.epg-logo{ width:52px; height:36px; flex:none; position:relative; display:flex; align-items:center; justify-content:center;
  background:#181828; border-radius:8px; overflow:visible; }
.epg-logo img{ max-width:46px; max-height:30px; object-fit:contain; }
.epg-mark{ font-size:11px; font-weight:800; letter-spacing:.04em; padding:3px 6px; border-radius:6px; background:#26264a; color:#c9c1ff; }
.epg-hd{ position:absolute; right:-6px; bottom:-6px; font-size:9px; font-weight:800; background:var(--purple); color:#fff; padding:1px 4px; border-radius:4px; line-height:1.3; }
.epg-sender-name{ font-size:13px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.epg-lane{ position:relative; flex:none; height:100%; background-image:linear-gradient(90deg,#1a1a2c 1px,transparent 1px); background-size:130px 100%; }
.epg-block{ position:absolute; top:7px; bottom:7px; border-radius:8px; padding:8px 10px; overflow:hidden; cursor:pointer; user-select:none;
  background:color-mix(in srgb,var(--tint,#7c4dff) 16%,#151526); border:1px solid color-mix(in srgb,var(--tint,#7c4dff) 30%,transparent);
  border-left:3px solid var(--tint,#7c4dff); transition:.12s; }
.epg-block:hover{ background:color-mix(in srgb,var(--tint,#7c4dff) 26%,#151526); }
.epg-block.laeuft{ background:color-mix(in srgb,var(--tint,#7c4dff) 32%,#151526); border-color:var(--tint,#7c4dff); }
.epg-block.gewaehlt{ outline:2px solid #fff; outline-offset:-2px; }
.epg-block.treffer{ box-shadow:0 0 0 2px var(--orange) inset; }
.epg-block-title{ font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.epg-block-time{ font-size:11.5px; color:var(--text-dim); margin-top:3px; white-space:nowrap; }
.epg-block.leer{ background:transparent; border:1px dashed #2a2a44; color:var(--text-faint); font-size:12px; display:flex; align-items:center; justify-content:center; cursor:default; }
.epg-now-line{ position:absolute; top:0; bottom:0; width:2px; background:var(--purple); z-index:3; pointer-events:none; box-shadow:0 0 8px rgba(124,77,255,.8); }
.epg-hinweis{ padding:40px 20px; text-align:center; color:var(--text-dim); font-size:13.5px; }
.epg-hinweis.klein{ padding:24px 8px; }

/* Detailspalte */
.epg-detail{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; height:calc(100vh - 330px); min-height:420px; }
.epg-tabs{ display:flex; border-bottom:1px solid var(--card-border); background:#0f0f1c; }
.epg-tab{ flex:1; text-align:center; padding:13px 6px; font-size:13px; font-weight:600; color:var(--text-dim); cursor:pointer; border-bottom:2px solid transparent; user-select:none; }
.epg-tab:hover{ color:var(--text); }
.epg-tab.active{ color:#fff; border-bottom-color:var(--purple); }
.epg-detail-body{ padding:18px; overflow:auto; flex:1; min-height:0; scrollbar-width:thin; }
.epg-detail-head{ display:flex; gap:14px; align-items:flex-start; }
.epg-detail-logo{ width:72px; height:50px; flex:none; position:relative; display:flex; align-items:center; justify-content:center; background:#181828; border-radius:10px; }
.epg-detail-logo img{ max-width:62px; max-height:40px; object-fit:contain; }
.epg-detail-titel{ min-width:0; }
.epg-detail-titel h2{ font-size:18px; font-weight:700; color:#fff; margin:0; line-height:1.25; }
.epg-detail-sender{ font-size:13px; color:var(--purple); font-weight:600; margin-top:4px; }
.epg-detail-zeit{ font-size:12.5px; color:var(--text-dim); margin-top:2px; }
.epg-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.epg-tag-chip{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; background:#1c1c30; color:var(--text-dim); border:1px solid var(--card-border); }
.epg-tag-chip.genre{ background:rgba(124,77,255,.18); color:#c9b8ff; border-color:rgba(124,77,255,.4); }
.epg-progress-row{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.epg-progress{ flex:1; height:6px; border-radius:3px; background:#1e1e33; overflow:hidden; }
.epg-progress .fill{ display:block; height:100%; background:linear-gradient(90deg,var(--purple),#3b82f6); border-radius:3px; }
.epg-rest{ font-size:12px; color:var(--text-dim); white-space:nowrap; }
.epg-desc{ font-size:13px; line-height:1.55; color:#c9c9d8; margin-top:14px; white-space:pre-line; }
.epg-sep{ height:1px; background:var(--card-border); margin:16px 0 12px; }
.epg-next-head{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); margin-bottom:6px; }
.epg-next{ display:flex; justify-content:space-between; gap:10px; font-size:13px; }
.epg-next-title{ color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.epg-next-time{ color:var(--text-dim); white-space:nowrap; }
.epg-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:18px; }
.epg-action{ display:flex; align-items:center; justify-content:center; gap:8px; height:40px; border-radius:10px; cursor:pointer;
  background:#1a1a2e; border:1px solid var(--card-border); color:var(--text); font-size:13px; font-weight:600; font-family:inherit; }
.epg-action svg{ width:16px; height:16px; }
.epg-action:hover:not(:disabled){ background:#22223a; border-color:#34345a; }
.epg-action:disabled{ opacity:.45; cursor:default; }
.epg-action.primary{ background:var(--purple); border-color:var(--purple); color:#fff; }
.epg-action.primary:hover{ background:var(--purple-dark); }
.epg-action.aktiv{ border-color:var(--purple); color:#c9b8ff; }
.epg-rec-dot{ width:10px; height:10px; border-radius:50%; background:var(--red); box-shadow:0 0 6px rgba(239,68,68,.7); }
.epg-listrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--card-border); }
.epg-listrow-title{ font-size:13px; font-weight:600; color:var(--text); }
.epg-listrow-sub{ font-size:12px; color:var(--text-dim); margin-top:2px; }
.epg-mini{ height:30px; padding:0 10px; border-radius:8px; background:#1a1a2e; border:1px solid var(--card-border); color:var(--text-dim); font-size:12px; font-family:inherit; cursor:pointer; white-space:nowrap; }
.epg-mini:hover{ color:var(--text); border-color:#34345a; }

/* Fusszeile */
.epg-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:44px; padding:0 16px; border-radius:12px;
  background:var(--card-bg); border:1px solid var(--card-border); font-size:12.5px; color:var(--text-dim); }
.epg-foot-l,.epg-foot-r{ display:inline-flex; align-items:center; gap:8px; }
.epg-foot svg{ width:15px; height:15px; }

@media (max-width:1180px){
  .epg-body{ grid-template-columns:1fr; }
  .epg-detail{ height:auto; min-height:0; }
  .epg-grid-wrap{ height:70vh; }
  .epg-quellen{ grid-template-columns:repeat(3,1fr); }
  .epg-toolbar{ flex-wrap:wrap; }
  .epg-suche{ width:100%; max-width:none; }
}

/* ===================================================================
   FIX257 - Aufnahmen-Seite nach Vorlage
   =================================================================== */
.rec-page{ display:flex; flex-direction:column; gap:14px; }
.rec-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rec-title{ display:flex; align-items:center; gap:14px; }
.rec-title h1{ font-size:24px; font-weight:700; color:#fff; margin:0; }
.rec-title .lede{ font-size:13px; color:var(--text-dim); margin-top:3px; }
.rec-title-icon{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none;
  background:linear-gradient(135deg,var(--purple),#3b82f6); color:#fff; box-shadow:0 6px 18px rgba(124,77,255,.35); }
.rec-title-icon svg{ width:24px; height:24px; }
.rec-primary{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px; border-radius:10px; cursor:pointer; border:0;
  background:var(--purple); color:#fff; font-size:14px; font-weight:600; font-family:inherit; box-shadow:0 6px 16px rgba(124,77,255,.35); }
.rec-primary:hover{ background:var(--purple-dark); }
.rec-primary svg{ width:18px; height:18px; }

/* Statuskarten */
.rec-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.rec-stat{ display:flex; align-items:center; gap:14px; padding:16px 18px; min-height:82px; border-radius:14px; background:var(--card-bg); border:1px solid var(--card-border); }
.rec-stat b{ display:block; font-size:22px; font-weight:700; color:#fff; line-height:1.1; }
.rec-stat span{ font-size:13px; color:var(--text-dim); }
.rec-stat-icon{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
.rec-stat-icon svg{ width:22px; height:22px; }
.rec-stat-icon.lila{ background:rgba(124,77,255,.16); color:#b39dff; }
.rec-stat-icon.rot{ background:rgba(239,68,68,.16); }
.rec-stat-speicher{ flex:1; min-width:0; }
.rec-dot{ width:14px; height:14px; border-radius:50%; background:var(--red); box-shadow:0 0 8px rgba(239,68,68,.8); display:inline-block; animation:rec-puls 1.4s ease-in-out infinite; }
.rec-dot.klein{ width:9px; height:9px; }
@keyframes rec-puls{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.rec-bar{ height:6px; border-radius:3px; background:#1e1e33; overflow:hidden; margin-top:8px; }
.rec-bar .fill{ display:block; height:100%; background:linear-gradient(90deg,var(--purple),#3b82f6); border-radius:3px; }
.rec-bar.lang{ flex:1; margin:0; min-width:80px; cursor:pointer; }

/* Quellenreiter */
.rec-quellen{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.rec-quelle{ display:flex; align-items:center; justify-content:center; gap:9px; height:48px; border-radius:12px; cursor:pointer;
  background:var(--card-bg); border:1px solid var(--card-border); color:var(--text-dim); font-size:14px; font-weight:600; font-family:inherit; transition:.15s; }
.rec-quelle svg{ width:19px; height:19px; }
.rec-quelle:hover{ color:var(--text); border-color:#34345a; background:#17172a; }
.rec-quelle.active{ background:var(--purple); border-color:var(--purple); color:#fff; box-shadow:0 6px 16px rgba(124,77,255,.35); }

/* Hauptbereich */
.rec-body{ display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:14px; align-items:start; }
.rec-main{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; overflow:hidden; min-height:520px; display:flex; flex-direction:column; }
.rec-status-tabs{ display:flex; border-bottom:1px solid var(--card-border); background:#0f0f1c; padding:0 8px; }
.rec-tab{ padding:14px 14px 12px; font-size:13.5px; font-weight:600; color:var(--text-dim); cursor:pointer; border-bottom:2px solid transparent; user-select:none; }
.rec-tab:hover{ color:var(--text); }
.rec-tab.active{ color:#fff; border-bottom-color:var(--purple); }
.rec-toolbar{ display:flex; align-items:center; gap:10px; padding:14px 14px 4px; flex-wrap:wrap; }
.rec-suche{ display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; flex:1; min-width:200px; border-radius:10px; background:#0f0f1c; border:1px solid var(--card-border); color:var(--text-dim); }
.rec-suche svg{ width:17px; height:17px; flex:none; }
.rec-suche input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--text); font-size:13.5px; font-family:inherit; }
.rec-suche input::placeholder{ color:var(--text-faint); }
.rec-suche:focus-within{ border-color:var(--purple); }
.rec-select{ height:40px; padding:0 34px 0 14px; border-radius:10px; background:#0f0f1c; border:1px solid var(--card-border); color:var(--text); font-size:13.5px; font-weight:600; font-family:inherit; cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238888a0' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 10px center; background-size:16px; }
.rec-ansicht{ display:flex; border:1px solid var(--card-border); border-radius:10px; overflow:hidden; }
.rec-ansicht-btn{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:#0f0f1c; border:0; color:var(--text-dim); cursor:pointer; }
.rec-ansicht-btn svg{ width:18px; height:18px; }
.rec-ansicht-btn.active{ background:var(--purple); color:#fff; }

/* Laufende Aufnahme */
.rec-running{ display:flex; align-items:center; gap:12px; margin:10px 14px 0; padding:10px 14px; border-radius:12px; background:#0f0f1c; border:1px solid var(--card-border); cursor:pointer; flex-wrap:wrap; }
.rec-running-label{ font-size:13.5px; font-weight:600; color:var(--text); }
.rec-running-sender{ font-size:12.5px; color:var(--text-dim); }
.rec-running-titel{ font-size:13.5px; color:#fff; font-weight:600; }
.rec-running-zeit{ font-size:12.5px; color:var(--text-dim); margin-left:auto; font-variant-numeric:tabular-nums; }
.rec-running .rec-bar{ max-width:220px; }
.rec-stop{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:9px; cursor:pointer; background:#1a1a2e; border:1px solid var(--card-border); color:var(--text); font-size:13px; font-weight:600; font-family:inherit; }
.rec-stop svg{ width:14px; height:14px; }
.rec-stop:hover{ border-color:var(--red); color:#fff; }

/* Logos */
.rec-logo{ width:40px; height:26px; object-fit:contain; border-radius:5px; background:#181828; flex:none; }
.rec-logo.klein{ width:30px; height:20px; }
.rec-logo.mark{ display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; letter-spacing:.04em; color:#c9c1ff; background:#26264a; }
.rec-logo.mark.klein{ font-size:9px; }

/* Kacheln / Liste */
.rec-liste{ padding:12px 14px 14px; flex:1; }
.rec-liste.kacheln{ display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:12px; align-content:start; }
.rec-liste.liste{ display:flex; flex-direction:column; gap:8px; }
.rec-leer{ grid-column:1/-1; padding:60px 20px; text-align:center; color:var(--text-dim); font-size:13.5px; border:1px dashed #2a2a44; border-radius:12px; }
.rec-card{ position:relative; display:flex; gap:12px; padding:10px; border-radius:12px; background:#0f0f1c; border:1px solid var(--card-border); cursor:pointer; transition:.12s; min-width:0; }
.rec-card:hover{ border-color:#34345a; background:#13132a; }
.rec-card.gewaehlt{ border-color:var(--purple); box-shadow:0 0 0 1px var(--purple), 0 6px 18px rgba(124,77,255,.25); }
.rec-thumb{ position:relative; width:190px; aspect-ratio:16/9; flex:none; border-radius:9px; overflow:hidden; background:linear-gradient(135deg,#1a1a30,#0d0d1a); }
.rec-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.rec-thumb-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.rec-thumb-fallback .rec-logo{ width:64px; height:44px; font-size:13px; background:transparent; }
.rec-thumb.radio{ background:linear-gradient(135deg,#2a1a50,#0d0d1a); }
.rec-liste.liste .rec-thumb{ width:120px; }
.rec-card-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; padding-right:26px; }
.rec-card-titel{ font-size:15px; font-weight:700; color:#fff; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.rec-card-sender{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-dim); min-width:0; }
.rec-card-sender span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rec-card-sender span:last-child{ flex:none; }
.rec-card-sender i{ font-style:normal; color:var(--text-faint); }
.rec-card-meta{ font-size:12.5px; color:var(--text-dim); }
.rec-card-status{ font-size:12.5px; margin-top:auto; }
.rec-st{ display:inline-flex; align-items:center; gap:6px; color:var(--text-dim); }
.rec-st svg{ width:14px; height:14px; }
.rec-st.fertig{ color:var(--green); }
.rec-st.laeuft{ color:var(--red); }
.rec-st.geplant{ color:var(--blue); }
.rec-st.fehler{ color:var(--orange); }
.rec-more{ position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:8px; border:0; background:transparent; color:var(--text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.rec-more:hover{ background:#22223a; color:#fff; }
.rec-more svg{ width:18px; height:18px; }

/* Detailspalte */
.rec-detail{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; overflow:hidden; position:sticky; top:14px; }
.rec-detail-leer{ padding:70px 24px; text-align:center; color:var(--text-dim); font-size:13.5px; }
.rec-detail-leer svg{ width:56px; height:56px; color:#2f2f4d; margin-bottom:12px; }
.rec-preview{ position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,#1a1a30,#0d0d1a); overflow:hidden; }
.rec-preview.radio{ background:linear-gradient(135deg,#2a1a50,#0d0d1a); }
.rec-preview > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.rec-preview .rec-thumb-fallback .rec-logo{ width:120px; height:80px; font-size:20px; }
.rec-play-big{ position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; border:2px solid rgba(255,255,255,.8); background:rgba(0,0,0,.45); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); transition:.15s; }
.rec-play-big:hover{ background:var(--purple); border-color:var(--purple); transform:translate(-50%,-50%) scale(1.06); }
.rec-play-big svg{ width:30px; height:30px; margin-left:3px; }
.rec-media{ position:absolute; inset:0; width:100%; height:100%; z-index:3; background:#000; }
audio.rec-media{ top:auto; height:44px; bottom:0; }
.rec-radio-deck{ position:absolute; inset:0 0 44px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#fff; font-weight:600; z-index:2; }
.rec-radio-deck .rec-logo{ width:120px; height:80px; font-size:20px; background:transparent; }
.rec-detail-body{ padding:16px 18px 18px; }
.rec-detail-titel{ font-size:18px; font-weight:700; color:#fff; margin:0; line-height:1.25; }
.rec-detail-sender{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13.5px; color:var(--text); font-weight:600; }
.rec-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.rec-chip{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:6px; background:#1c1c30; color:var(--text-dim); border:1px solid var(--card-border); }
.rec-chip.lila{ background:rgba(124,77,255,.18); color:#c9b8ff; border-color:rgba(124,77,255,.4); }
.rec-chip.gruen{ background:rgba(34,197,94,.14); color:#4ade80; border-color:rgba(34,197,94,.35); }
.rec-chip.rot{ background:rgba(239,68,68,.14); color:#f87171; border-color:rgba(239,68,68,.35); }
.rec-meta{ width:100%; border-collapse:collapse; margin-top:12px; font-size:13px; }
.rec-meta td{ padding:3px 0; vertical-align:top; }
.rec-meta td:first-child{ color:var(--text-dim); width:118px; }
.rec-meta td:last-child{ color:var(--text); }
.rec-desc{ font-size:13px; line-height:1.55; color:#c9c9d8; margin-top:10px; white-space:pre-line; max-height:120px; overflow:auto; }
.rec-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.rec-action{ display:flex; align-items:center; justify-content:center; gap:8px; height:40px; border-radius:10px; cursor:pointer; text-decoration:none;
  background:#1a1a2e; border:1px solid var(--card-border); color:var(--text); font-size:13px; font-weight:600; font-family:inherit; }
.rec-action svg{ width:16px; height:16px; }
.rec-action:hover:not(:disabled):not(.disabled){ background:#22223a; border-color:#34345a; }
.rec-action:disabled,.rec-action.disabled{ opacity:.45; cursor:default; pointer-events:none; }
.rec-action.primary{ background:var(--purple); border-color:var(--purple); color:#fff; }
.rec-action.primary:hover{ background:var(--purple-dark) !important; }
.rec-action.loeschen{ grid-column:1/-1; border-color:rgba(239,68,68,.5); color:#f87171; background:rgba(239,68,68,.08); }
.rec-action.loeschen:hover{ background:rgba(239,68,68,.18) !important; border-color:var(--red) !important; }
.rec-zuletzt{ margin-top:14px; }
.rec-zuletzt-text{ font-size:12.5px; color:var(--text-dim); margin-bottom:6px; }

/* Menue + Dialog */
.rec-menu{ position:absolute; z-index:1000; min-width:240px; padding:6px; border-radius:10px; background:#15152a; border:1px solid #2c2c48; box-shadow:0 12px 30px rgba(0,0,0,.5); display:flex; flex-direction:column; }
.rec-menu button{ text-align:left; padding:9px 12px; border:0; border-radius:7px; background:transparent; color:var(--text); font-size:13px; font-family:inherit; cursor:pointer; }
.rec-menu button:hover{ background:#22223a; color:#fff; }
.rec-dialog-bg{ position:fixed; inset:0; z-index:1100; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:16px; }
.rec-dialog{ width:100%; max-width:440px; background:#12121f; border:1px solid #2c2c48; border-radius:14px; padding:20px; box-shadow:0 20px 50px rgba(0,0,0,.6); }
.rec-dialog h3{ margin:0 0 4px; color:#fff; font-size:17px; }
.rec-dialog p{ margin:0 0 14px; color:var(--text-dim); font-size:13px; }
.rec-dialog label{ display:block; font-size:12.5px; color:var(--text-dim); margin-top:10px; }
.rec-dialog input,.rec-dialog select{ display:block; width:100%; margin-top:5px; height:40px; padding:0 12px; border-radius:9px; background:#0f0f1c; border:1px solid var(--card-border); color:var(--text); font-size:13.5px; font-family:inherit; }
.rec-dialog-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:18px; }

/* Fusszeile */
.rec-foot{ display:flex; align-items:center; gap:14px; height:44px; padding:0 16px; border-radius:12px; background:var(--card-bg); border:1px solid var(--card-border); font-size:12.5px; color:var(--text-dim); }
.rec-foot-l,.rec-foot-r{ display:inline-flex; align-items:center; gap:8px; }
.rec-foot svg{ width:16px; height:16px; }
.rec-foot b{ font-weight:600; }
.rec-foot b.gruen{ color:var(--green); }
.rec-foot b.rot{ color:var(--red); }
.rec-foot-sep{ width:1px; height:20px; background:var(--card-border); }

@media (max-width:1280px){
  .rec-body{ grid-template-columns:1fr; }
  .rec-detail{ position:static; }
  .rec-stats{ grid-template-columns:repeat(2,1fr); }
  .rec-quellen{ grid-template-columns:repeat(3,1fr); }
}

/* ===================================================================
   FIX258 - Mein Profil (eigenes Konto fuer jeden Benutzer)
   =================================================================== */
#page-benutzer.usr-selbst .usr-stat-grid,
#page-benutzer.usr-selbst .usr-body,
#page-benutzer.usr-selbst .usr-nur-admin:not(#usr-profil-toggle){ display:none !important; }
#page-benutzer.usr-selbst #usr-self{ display:grid !important; }
#usr-profil-toggle[hidden]{ display:none !important; }
.prf-page{ display:grid; grid-template-columns:380px minmax(0,1fr); gap:14px; align-items:start; }
.prf-page[hidden]{ display:none; }
.prf-card{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:18px; }
.prf-kopf{ display:flex; align-items:center; gap:14px; }
.prf-avatar{ width:72px; height:72px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; flex:none;
  background:linear-gradient(135deg,var(--purple),#3b82f6); color:#fff; font-size:24px; font-weight:700; }
.prf-avatar img{ width:100%; height:100%; object-fit:cover; }
.prf-name{ font-size:18px; font-weight:700; color:#fff; }
.prf-user{ font-size:12.5px; color:var(--text-dim); margin-top:2px; }
.prf-rolle{ display:inline-block; margin-top:6px; font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; background:rgba(124,77,255,.18); color:#c9b8ff; border:1px solid rgba(124,77,255,.4); }
.prf-avatar-actions{ display:flex; gap:8px; margin-top:12px; }
.prf-label{ display:block; font-size:12.5px; color:var(--text-dim); margin-top:12px; }
.prf-label input{ display:block; width:100%; margin-top:5px; height:40px; padding:0 12px; border-radius:9px; background:#0f0f1c; border:1px solid var(--card-border); color:var(--text); font-size:13.5px; font-family:inherit; }
.prf-label input:focus{ outline:0; border-color:var(--purple); }
.prf-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 14px; border-radius:9px; cursor:pointer; background:#1a1a2e; border:1px solid var(--card-border); color:var(--text); font-size:13px; font-weight:600; font-family:inherit; }
.prf-btn:hover{ background:#22223a; border-color:#34345a; }
.prf-btn.primary{ background:var(--purple); border-color:var(--purple); color:#fff; width:100%; margin-top:14px; }
.prf-btn.primary:hover{ background:var(--purple-dark); }
#prf-pw-speichern{ width:100%; margin-top:14px; }
.prf-sep{ height:1px; background:var(--card-border); margin:18px 0 12px; }
.prf-abschnitt{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); }
.prf-meta{ margin-top:14px; font-size:11.5px; color:var(--text-faint); line-height:1.5; }
.prf-listen{ padding:0; overflow:hidden; }
.prf-tabs{ display:flex; border-bottom:1px solid var(--card-border); background:#0f0f1c; padding:0 8px; }
.prf-tab{ padding:14px 14px 12px; font-size:13.5px; font-weight:600; color:var(--text-dim); cursor:pointer; border-bottom:2px solid transparent; user-select:none; }
.prf-tab:hover{ color:var(--text); }
.prf-tab.active{ color:#fff; border-bottom-color:var(--purple); }
.prf-tab-body{ padding:14px; }
.prf-add{ display:flex; gap:8px; margin-bottom:12px; }
.prf-add select{ flex:1; height:38px; padding:0 12px; border-radius:9px; background:#0f0f1c; border:1px solid var(--card-border); color:var(--text); font-size:13.5px; font-family:inherit; }
.prf-add .prf-btn.primary{ width:auto; margin:0; }
.prf-rows{ display:flex; flex-direction:column; gap:6px; }
.prf-row{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px; background:#0f0f1c; border:1px solid var(--card-border); }
.prf-nr{ width:22px; font-size:12px; color:var(--text-faint); text-align:right; flex:none; }
.prf-logo{ width:40px; height:26px; object-fit:contain; border-radius:5px; background:#181828; flex:none; }
.prf-logo.mark{ display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#c9c1ff; background:#26264a; }
.prf-row-name{ flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; flex-direction:column; gap:2px; }
.prf-row-name small{ font-size:12px; font-weight:400; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; }
.prf-row-actions{ display:flex; gap:4px; flex:none; }
.prf-mini{ height:30px; min-width:30px; padding:0 9px; border-radius:7px; background:#1a1a2e; border:1px solid var(--card-border); color:var(--text-dim); font-size:12px; font-family:inherit; cursor:pointer; }
.prf-mini:hover:not(:disabled){ color:#fff; border-color:#34345a; }
.prf-mini:disabled{ opacity:.35; cursor:default; }
.prf-mini.rot:hover{ border-color:var(--red); color:#f87171; }
.prf-hinweis{ padding:30px 12px; text-align:center; color:var(--text-dim); font-size:13px; }
@media (max-width:1100px){ .prf-page{ grid-template-columns:1fr; } }

/* ===================================================================
   FIX261 - DVB-Sendersuchlauf nach Vorlage
   =================================================================== */
.ik-dvb-page{ max-width:none; }
.ik-dvb-page .content-head{ margin-bottom:16px; }
.ik-dvb-icon{ background:linear-gradient(135deg,var(--purple),#3b82f6); color:#fff; box-shadow:0 6px 18px rgba(124,77,255,.35); width:52px; height:52px; border-radius:14px; }
.ik-dvb-actions{ display:flex; gap:10px; }
.dvb-kopf-btn{ display:inline-flex; align-items:center; gap:9px; height:42px; padding:0 16px; border-radius:10px; cursor:pointer;
  background:var(--card-bg); border:1px solid rgba(124,77,255,.55); color:#fff; font-size:14px; font-weight:600; font-family:inherit; }
.dvb-kopf-btn:hover{ background:#17172a; border-color:var(--purple); }
.dvb-kopf-btn svg{ width:18px; height:18px; color:#b39dff; }
.dvb-kopf-btn[hidden]{ display:none !important; }
.dvb-grid{ display:grid; grid-template-columns:315px minmax(0,1fr) 345px; gap:14px; align-items:stretch; } /* FIX262: alle Spalten gleich hoch - enden an der Karte Sender & Logo */
.dvb-mitte,.dvb-rechts{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.dvb-mitte .dvb-card:last-child,.dvb-rechts .dvb-card:last-child{ flex:1; }
#dvb-einst{ display:flex; flex-direction:column; }
#dvb-treffer{ display:flex; flex-direction:column; }
#dvb-treffer .dvb-table-wrap{ flex:1; min-height:200px; }
.dvb-mitte[hidden],.dvb-rechts[hidden]{ display:none; }
.dvb-card{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:18px; min-width:0; }
.dvb-card h3{ margin:0 0 12px; color:#fff; font-size:17px; font-weight:600; }
.dvb-label{ display:block; color:var(--text-dim); font-size:13px; margin:12px 0 6px; }
.dvb-opt{ color:var(--text-faint); }
.dvb-select{ width:100%; box-sizing:border-box; height:42px; border:1px solid var(--card-border); background:#0f0f1c; border-radius:9px; color:var(--text); padding:0 12px; font-size:13.5px; font-family:inherit; outline:0; }
.dvb-select:focus{ border-color:var(--purple); }
.dvb-select.dvb-liste{ height:auto; padding:6px; }
.dvb-select.dvb-liste option{ padding:6px 8px; border-radius:6px; }
.dvb-muted{ color:var(--text-dim); font-size:12.5px; line-height:1.5; margin-top:8px; }
.dvb-muted a{ color:#b39dff; }
.dvb-tabs{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--card-border); border-radius:9px; overflow:hidden; background:#0f0f1c; }
.dvb-tabs button{ border:0; border-right:1px solid var(--card-border); background:transparent; color:var(--text-dim); padding:11px 4px; cursor:pointer; font-size:12.5px; font-weight:600; font-family:inherit; }
.dvb-tabs button:last-child{ border-right:0; }
.dvb-tabs button.active{ background:var(--purple); color:#fff; }
.dvb-tabs button:disabled{ opacity:.45; cursor:not-allowed; }
.dvb-checks{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.dvb-check{ display:flex; align-items:center; gap:10px; color:var(--text); font-size:13px; cursor:pointer; }
.dvb-check input{ appearance:none; -webkit-appearance:none; width:20px; height:20px; border-radius:6px; border:1px solid #3a3a58; background:#0f0f1c; flex:none; cursor:pointer; position:relative; }
.dvb-check input:checked{ background:var(--purple); border-color:var(--purple); }
.dvb-check input:checked::after{ content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.dvb-check input:disabled{ opacity:.55; cursor:default; }
.dvb-check input:disabled + span{ color:var(--text-dim); }
.dvb-start{ width:100%; margin-top:16px; display:flex; align-items:center; justify-content:center; gap:9px; height:46px; border:0; border-radius:10px; cursor:pointer;
  background:var(--purple); color:#fff; font-size:14.5px; font-weight:700; font-family:inherit; box-shadow:0 6px 16px rgba(124,77,255,.35); }
.dvb-start:hover:not(:disabled){ background:var(--purple-dark); }
.dvb-start:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }
.dvb-start svg{ width:18px; height:18px; }
.dvb-btn{ width:100%; display:flex; align-items:center; justify-content:center; gap:9px; height:44px; border-radius:10px; cursor:pointer;
  background:#0f0f1c; border:1px solid var(--card-border); color:var(--text); font-size:13.5px; font-weight:600; font-family:inherit; }
.dvb-btn:hover:not(:disabled){ border-color:#34345a; background:#17172a; }
.dvb-btn:disabled{ opacity:.5; cursor:default; }
.dvb-btn svg{ width:17px; height:17px; }
.dvb-btn.klein{ width:auto; height:42px; padding:0 14px; flex:none; }
.dvb-btn.rot{ color:#f87171; border-color:rgba(239,68,68,.45); }
.dvb-btn.rot:hover{ background:rgba(239,68,68,.12) !important; border-color:var(--red) !important; }
.dvb-zeile{ display:flex; gap:8px; align-items:center; }
.dvb-meldung{ margin-top:10px; font-size:12.5px; line-height:1.5; min-height:18px; }

/* Status */
.dvb-status-kopf{ display:flex; align-items:center; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--card-border); flex-wrap:wrap; }
.dvb-ring{ width:44px; height:44px; border-radius:50%; flex:none; position:relative; background:conic-gradient(var(--purple) var(--p,0%),#23233a 0); }
.dvb-ring::after{ content:""; position:absolute; inset:6px; border-radius:50%; background:var(--card-bg); }
.dvb-ring.dreht::before{ content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid transparent; border-top-color:#3b82f6; animation:dvb-dreh 1s linear infinite; }
@keyframes dvb-dreh{ to{ transform:rotate(360deg); } }
.dvb-status-text{ flex:1; min-width:160px; }
.dvb-status-text strong{ display:block; color:#fff; font-size:17px; font-weight:600; }
.dvb-status-text span{ display:block; color:var(--text-dim); font-size:12.5px; margin-top:3px; }
.dvb-zeit{ text-align:center; min-width:110px; }
.dvb-zeit span{ display:block; font-size:12px; color:var(--text-dim); }
.dvb-zeit b{ display:block; font-size:17px; color:#fff; font-variant-numeric:tabular-nums; margin-top:2px; }
.dvb-status-body{ display:grid; grid-template-columns:1fr 1fr; gap:24px; padding-top:14px; }
.dvb-sub{ font-size:13.5px; color:var(--text); font-weight:600; margin-bottom:8px; }
.dvb-kv{ display:flex; gap:10px; font-size:13px; padding:3px 0; }
.dvb-kv span{ width:100px; color:var(--text-dim); flex:none; }
.dvb-kv b{ color:var(--text); font-weight:600; }
.dvb-bar-row{ display:flex; align-items:center; gap:10px; }
.dvb-bar{ flex:1; height:9px; border-radius:5px; background:#1e1e33; overflow:hidden; }
.dvb-bar .fill{ display:block; height:100%; border-radius:5px; background:#3a3a58; transition:width .4s; }
.dvb-bar .fill.gruen{ background:var(--green); } .dvb-bar .fill.gelb{ background:var(--orange); } .dvb-bar .fill.rot{ background:var(--red); }
.dvb-bar-row b{ width:44px; text-align:right; color:var(--text); font-size:13px; font-variant-numeric:tabular-nums; }
.dvb-fehler{ margin-top:12px; font-size:12.5px; color:var(--text-dim); }
.dvb-fehler summary{ cursor:pointer; color:var(--orange); }
.dvb-fehler pre{ white-space:pre-wrap; margin-top:8px; max-height:180px; overflow:auto; font-size:11.5px; color:var(--text-dim); }

/* Trefferliste */
.dvb-treffer-kopf{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.dvb-treffer-kopf h3{ margin:0; }
.dvb-zaehler{ display:flex; gap:16px; font-size:13px; color:var(--text-dim); }
.dvb-zaehler b{ color:#fff; }
.dvb-table-wrap{ overflow:auto; max-height:520px; margin-top:12px; scrollbar-width:thin; }
.dvb-table-wrap::-webkit-scrollbar{ width:8px; height:8px; display:block; }
.dvb-table-wrap::-webkit-scrollbar-thumb{ background:#2c2c48; border-radius:4px; }
.dvb-table{ width:100%; border-collapse:collapse; font-size:13px; }
.dvb-table th{ position:sticky; top:0; background:var(--card-bg); color:var(--text-dim); text-align:left; padding:8px 8px; font-weight:600; white-space:nowrap; border-bottom:1px solid var(--card-border); }
.dvb-table td{ color:var(--text); padding:9px 8px; border-top:1px solid #1a1a2c; white-space:nowrap; }
.dvb-table tr.neu td:nth-child(2){ color:#fff; }
.dvb-art{ width:16px; height:16px; vertical-align:-3px; margin-right:8px; color:var(--text-dim); }
.dvb-tag{ font-size:10px; font-weight:700; padding:1px 6px; border-radius:5px; background:#1c1c30; color:var(--text-dim); border:1px solid var(--card-border); margin-left:4px; }
.dvb-tag.neu{ background:rgba(34,197,94,.14); color:#4ade80; border-color:rgba(34,197,94,.35); }
.dvb-leer{ padding:36px 12px; text-align:center; color:var(--text-dim); border:1px dashed #2a2a44; border-radius:10px; white-space:normal; }

/* Ergebnis-Kacheln */
.dvb-kacheln{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dvb-kachel{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:12px; background:#0f0f1c; border:1px solid var(--card-border); }
.dvb-kachel svg{ width:36px; height:36px; padding:8px; border-radius:10px; flex:none; }
.dvb-kachel b{ display:block; font-size:24px; font-weight:700; line-height:1.1; }
.dvb-kachel span{ font-size:12px; color:var(--text-dim); }
.dvb-kachel.lila{ border-color:rgba(124,77,255,.45); } .dvb-kachel.lila svg{ background:rgba(124,77,255,.18); color:#b39dff; } .dvb-kachel.lila b{ color:#b39dff; }
.dvb-kachel.blau{ border-color:rgba(56,189,248,.4); } .dvb-kachel.blau svg{ background:rgba(56,189,248,.16); color:#7dd3fc; } .dvb-kachel.blau b{ color:#7dd3fc; }
.dvb-kachel.gruen{ border-color:rgba(34,197,94,.4); } .dvb-kachel.gruen svg{ background:rgba(34,197,94,.16); color:#4ade80; } .dvb-kachel.gruen b{ color:#4ade80; }
.dvb-kachel.weiss svg{ background:#1c1c30; color:#fff; } .dvb-kachel.weiss b{ color:#fff; }

/* Sender & Logo */
.dvb-logo-karte{ margin-top:14px; }
.dvb-logo-karte[hidden]{ display:none; }
.dvb-logo-kopf h3{ margin-bottom:4px; }
.dvb-logo-grid{ display:grid; grid-template-columns:minmax(260px,1fr) minmax(0,2fr); gap:24px; margin-top:6px; }
.dvb-logo-vorschau{ height:110px; border-radius:10px; background:#0f0f1c; border:1px solid var(--card-border); display:flex; align-items:center; justify-content:center; overflow:hidden; padding:8px; }
.dvb-logo-vorschau img{ max-width:100%; max-height:100%; object-fit:contain; }

/* Neustart-Overlay */
.dvb-restart{ position:fixed; inset:0; z-index:2000; background:rgba(5,5,12,.85); display:flex; align-items:center; justify-content:center; padding:20px; }
.dvb-restart-box{ text-align:center; max-width:420px; }
.dvb-restart-box h3{ color:#fff; margin:16px 0 8px; font-size:20px; }
.dvb-restart-box p{ color:var(--text-dim); font-size:13.5px; line-height:1.5; }
.dvb-spinner{ width:56px; height:56px; margin:0 auto; border-radius:50%; border:4px solid #23233a; border-top-color:var(--purple); animation:dvb-dreh .9s linear infinite; }

@media (max-width:1300px){
  .dvb-grid,.dvb-grid.nur-links{ grid-template-columns:1fr; }
  .dvb-status-body{ grid-template-columns:1fr; }
  .dvb-logo-grid{ grid-template-columns:1fr; }
}

/* FIX263: TV-Detailspalte - Informationen bleiben stehen, nur "Danach" scrollt */
.ltv-details{ overflow:hidden !important; display:flex; flex-direction:column; }
.ltv-details > .ltv-detail-section{ flex:none; }
.ltv-details > .ltv-detail-section.ltv-danach{ flex:1 1 auto; min-height:120px; display:flex; flex-direction:column; }
.ltv-danach-liste{ flex:1; min-height:0; overflow-y:auto; padding-right:4px; scrollbar-width:thin; scrollbar-color:#2c2c48 transparent; }
.ltv-danach-liste::-webkit-scrollbar{ width:6px; display:block; }
.ltv-danach-liste::-webkit-scrollbar-thumb{ background:#2c2c48; border-radius:3px; }

/* ===================================================================
   FIX264 - System-Seite (Update-Funktion)
   =================================================================== */
.sys-page{ max-width:none; }
.sys-page .content-head{ margin-bottom:16px; }
.sys-grid{ display:grid; grid-template-columns:minmax(300px,1fr) minmax(360px,1.4fr) minmax(280px,1fr); gap:14px; align-items:stretch; }
.sys-card{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:18px; min-width:0; }
.sys-card h3{ margin:0 0 12px; color:#fff; font-size:17px; font-weight:600; }
.sys-kv{ display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:6px 0; border-bottom:1px solid #1a1a2c; }
.sys-kv span{ color:var(--text-dim); flex:none; }
.sys-kv b{ color:var(--text); font-weight:600; text-align:right; min-width:0; }
.sys-pfad{ display:inline-block; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; direction:rtl; }
.sys-muted{ color:var(--text-dim); font-size:12.5px; line-height:1.5; margin-top:8px; }
.sys-muted code{ color:#c9b8ff; }
.sys-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 14px; border-radius:10px; cursor:pointer; background:#1a1a2e; border:1px solid var(--card-border); color:var(--text); font-size:13px; font-weight:600; font-family:inherit; }
.sys-btn:hover:not(:disabled){ background:#22223a; border-color:#34345a; }
.sys-btn:disabled{ opacity:.5; cursor:default; }
.sys-btn svg{ width:16px; height:16px; }
.sys-btn.primary{ background:var(--purple); border-color:var(--purple); color:#fff; box-shadow:0 6px 16px rgba(124,77,255,.3); }
.sys-btn.primary:hover:not(:disabled){ background:var(--purple-dark) !important; }
.sys-btn.klein{ height:32px; padding:0 10px; font-size:12px; }
.sys-drop{ display:flex; align-items:center; gap:14px; padding:16px; border:2px dashed #2a2a44; border-radius:12px; background:#0f0f1c; transition:.15s; }
.sys-drop.aktiv{ border-color:var(--purple); background:rgba(124,77,255,.08); }
.sys-drop > svg{ width:34px; height:34px; color:#b39dff; flex:none; }
.sys-drop > div{ flex:1; min-width:0; }
.sys-drop b{ display:block; color:#fff; font-size:13.5px; }
.sys-drop span{ display:block; color:var(--text-dim); font-size:12px; margin-top:2px; }
.sys-progress{ position:relative; height:22px; border-radius:6px; background:#1e1e33; overflow:hidden; margin-top:10px; }
.sys-progress .fill{ position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,var(--purple),#3b82f6); transition:width .2s; }
.sys-progress span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; font-weight:600; }
.sys-progress[hidden]{ display:none; }
.sys-paket{ margin-top:14px; padding:14px; border-radius:12px; background:#0f0f1c; border:1px solid var(--card-border); }
.sys-paket-kopf{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.sys-paket-kopf b{ color:#fff; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; }
.sys-tag{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; border:1px solid var(--card-border); background:#1c1c30; color:var(--text-dim); white-space:nowrap; }
.sys-tag.gruen{ background:rgba(34,197,94,.14); color:#4ade80; border-color:rgba(34,197,94,.35); }
.sys-tag.gelb{ background:rgba(245,158,11,.14); color:#fbbf24; border-color:rgba(245,158,11,.35); }
.sys-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.sys-hinweis{ margin-top:12px; padding:10px 12px; border-radius:10px; font-size:12.5px; line-height:1.5; border:1px solid var(--card-border); background:#0f0f1c; color:var(--text); }
.sys-hinweis.gruen{ border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.08); }
.sys-hinweis.rot{ border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.08); }
.sys-hinweis.lila{ border-color:rgba(124,77,255,.4); background:rgba(124,77,255,.1); }
.sys-rows{ display:flex; flex-direction:column; gap:6px; }
.sys-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:10px; background:#0f0f1c; border:1px solid var(--card-border); }
.sys-row b{ display:block; color:#fff; font-size:13px; }
.sys-row small{ display:block; color:var(--text-dim); font-size:11.5px; margin-top:2px; }
.sys-log-kopf{ display:flex; align-items:center; justify-content:space-between; }
.sys-log-kopf h3{ margin:0; }
.sys-log{ margin-top:12px; max-height:260px; overflow:auto; padding:12px; border-radius:10px; background:#0a0a13; border:1px solid var(--card-border); color:var(--text-dim); font-size:11.5px; line-height:1.5; white-space:pre-wrap; font-family:Consolas,Menlo,monospace; scrollbar-width:thin; }
@media (max-width:1280px){ .sys-grid{ grid-template-columns:1fr; } }

/* ===================================================================
   FIX265 - Update-Seite nach Vorlage (Einstellungen > Update)
   =================================================================== */
.upd-page{ display:flex; flex-direction:column; gap:14px; }
.upd-muted{ color:var(--text-dim); font-size:12.5px; line-height:1.5; }
.upd-kopf{ position:relative; border-radius:16px; overflow:hidden; padding:14px 18px 18px; background:linear-gradient(90deg,#0d0d18 0%,#0d0d18 55%,#16122b 100%); border:1px solid var(--card-border); min-height:140px; }
.upd-crumb{ font-size:15px; color:var(--text); display:flex; gap:10px; align-items:center; }
.upd-crumb i{ font-style:normal; color:var(--text-dim); }
.upd-crumb b{ color:#b39dff; font-weight:600; }
.upd-kopf-inner{ display:flex; align-items:center; gap:22px; margin-top:12px; }
.upd-cloud{ width:78px; height:78px; color:#8b5cf6; flex:none; }
.upd-cloud svg{ width:100%; height:100%; }
.upd-kopf h1{ margin:0; color:#fff; font-size:32px; font-weight:700; }
.upd-kopf .lede{ font-size:15px; color:var(--text-dim); margin-top:4px; }
.upd-slogan{ margin-left:auto; text-transform:uppercase; letter-spacing:.32em; font-size:13px; color:#cfcfe0; line-height:1.8; text-align:left; padding-right:20px; }
.upd-rack{ position:relative; width:360px; height:130px; flex:none; border-radius:10px; overflow:hidden; background:linear-gradient(135deg,#1a1630,#0a0a13); border:1px solid #2a2547; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:10px 14px; box-shadow:inset 0 0 40px rgba(124,77,255,.25); }
.upd-rack-name{ position:absolute; right:26px; top:14px; font-size:16px; font-weight:700; color:#e6dcff; letter-spacing:.06em; text-shadow:0 0 12px rgba(124,77,255,.8); transform:rotate(-8deg); }
.upd-rack-unit{ height:16px; border-radius:4px; background:linear-gradient(180deg,#26223f,#15122a); border:1px solid #33305a; display:flex; align-items:center; gap:6px; padding:0 8px; }
.upd-rack-unit i{ width:14px; height:6px; border-radius:2px; background:#1b1830; border:1px solid #3a3660; }
.upd-rack-unit b{ width:5px; height:5px; border-radius:50%; background:#8b5cf6; box-shadow:0 0 6px #8b5cf6; margin-left:auto; }
.upd-rack-unit b + b{ margin-left:0; background:#22c55e; box-shadow:0 0 6px #22c55e; }
.upd-reihe1{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.upd-reihe2{ display:grid; grid-template-columns:minmax(0,2fr) minmax(300px,1fr); gap:14px; align-items:start; }
.upd-links,.upd-rechts{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.upd-card{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:16px 18px; min-width:0; }
.upd-card-kopf{ display:flex; align-items:center; gap:12px; font-size:17px; color:#fff; font-weight:600; padding-bottom:10px; border-bottom:1px solid var(--card-border); margin-bottom:12px; }
.upd-card-kopf > svg{ width:30px; height:30px; padding:6px; border-radius:8px; background:rgba(124,77,255,.15); color:#b39dff; flex:none; }
.upd-card-kopf.klappbar{ cursor:pointer; user-select:none; }
.upd-chev{ margin-left:auto; display:flex; color:var(--text-dim); }
.upd-chev svg{ width:20px; height:20px; transition:transform .2s; }
.upd-chev.offen svg{ transform:rotate(180deg); }
.upd-gross{ font-size:30px; font-weight:700; color:#fff; margin:2px 0 8px; }
.upd-gross.klein{ font-size:24px; }
.upd-status{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; }
.upd-status svg{ width:18px; height:18px; }
.upd-status.gruen{ color:#4ade80; } .upd-status.rot{ color:#f87171; } .upd-status.gelb{ color:#fbbf24; }
.upd-klein{ font-size:12.5px; color:var(--text-dim); margin-top:6px; }
.upd-toggle{ display:flex; align-items:center; gap:12px; cursor:pointer; margin:4px 0 12px; }
.upd-toggle input{ display:none; }
.upd-schalter{ width:52px; height:28px; border-radius:14px; background:#2a2a44; position:relative; flex:none; transition:.2s; }
.upd-schalter::after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:.2s; }
.upd-toggle input:checked + .upd-schalter{ background:var(--purple); }
.upd-toggle input:checked + .upd-schalter::after{ left:27px; }
.upd-toggle-text b{ display:block; font-size:13.5px; color:var(--text); font-weight:500; }
.upd-toggle-text small{ display:block; font-size:12px; color:var(--text-dim); }
.upd-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; height:42px; padding:0 16px; border-radius:9px; cursor:pointer; font-size:14px; font-weight:600; font-family:inherit; width:100%; }
.upd-btn svg{ width:18px; height:18px; }
.upd-btn.outline{ background:transparent; border:1px solid rgba(124,77,255,.6); color:#fff; }
.upd-btn.outline:hover:not(:disabled){ background:rgba(124,77,255,.12); }
.upd-btn.primary{ background:var(--purple); border:1px solid var(--purple); color:#fff; box-shadow:0 6px 16px rgba(124,77,255,.35); }
.upd-btn.primary:hover:not(:disabled){ background:var(--purple-dark); }
.upd-btn:disabled{ opacity:.5; cursor:default; }
.upd-mini{ height:32px; padding:0 10px; border-radius:7px; background:#1a1a2e; border:1px solid var(--card-border); color:var(--text); font-size:12px; font-family:inherit; cursor:pointer; white-space:nowrap; }
.upd-mini:hover{ border-color:#34345a; color:#fff; }
.upd-mini.rot:hover{ border-color:var(--red); color:#f87171; }
.upd-paket{ display:flex; gap:16px; align-items:center; padding:12px; border-radius:12px; background:#0f0f1c; border:1px solid var(--card-border); flex-wrap:wrap; }
.upd-paket-logo{ width:84px; height:84px; border-radius:12px; background:rgba(124,77,255,.12); border:1px solid rgba(124,77,255,.3); display:flex; align-items:center; justify-content:center; color:#a78bfa; flex:none; }
.upd-paket-logo svg{ width:44px; height:44px; }
.upd-paket-info{ flex:1; min-width:220px; }
.upd-paket-name{ font-size:17px; font-weight:600; color:#fff; }
.upd-paket-version{ font-size:26px; font-weight:700; color:#fff; display:flex; align-items:center; gap:10px; margin:2px 0 6px; }
.upd-paket-meta{ display:flex; gap:24px; font-size:13px; color:var(--text-dim); flex-wrap:wrap; }
.upd-paket-meta b{ color:var(--text); font-weight:500; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:bottom; }
.upd-paket-actions{ display:flex; flex-direction:column; gap:8px; width:290px; flex:none; }
.upd-paket-actions2{ display:flex; gap:8px; }
.upd-paket-actions2 .upd-btn{ height:38px; font-size:13px; padding:0 10px; }
.upd-tag{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:6px; background:#1c1c30; color:var(--text-dim); border:1px solid var(--card-border); vertical-align:middle; }
.upd-tag.lila{ background:rgba(124,77,255,.18); color:#c9b8ff; border-color:rgba(124,77,255,.45); }
.upd-tag.gelb{ background:rgba(245,158,11,.14); color:#fbbf24; border-color:rgba(245,158,11,.35); }
.upd-drop{ display:flex; align-items:center; gap:14px; padding:16px; border:2px dashed #2a2a44; border-radius:12px; background:#0f0f1c; transition:.15s; }
.upd-drop.klein{ margin-top:10px; padding:10px 14px; font-size:12.5px; color:var(--text-dim); }
.upd-drop.aktiv{ border-color:var(--purple); background:rgba(124,77,255,.08); }
.upd-drop > svg{ width:36px; height:36px; color:#b39dff; flex:none; }
.upd-drop > div{ flex:1; min-width:0; }
.upd-drop b{ display:block; color:#fff; font-size:14px; }
.upd-drop span{ display:block; color:var(--text-dim); font-size:12.5px; margin-top:2px; }
.upd-drop .upd-btn{ width:auto; }
.upd-progress{ position:relative; height:22px; border-radius:6px; background:#1e1e33; overflow:hidden; margin-top:10px; }
.upd-progress .fill{ position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,var(--purple),#3b82f6); transition:width .2s; }
.upd-progress span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; font-weight:600; }
.upd-progress[hidden]{ display:none; }
.upd-filter{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.upd-filter button{ height:34px; padding:0 18px; border-radius:8px; background:#0f0f1c; border:1px solid var(--card-border); color:var(--text); font-size:13px; font-family:inherit; cursor:pointer; }
.upd-filter button.active{ background:var(--purple); border-color:var(--purple); color:#fff; }
.upd-cl-liste{ max-height:320px; overflow:auto; scrollbar-width:thin; scrollbar-color:#2c2c48 transparent; }
.upd-cl-liste::-webkit-scrollbar{ width:8px; display:block; } .upd-cl-liste::-webkit-scrollbar-thumb{ background:#2c2c48; border-radius:4px; }
.upd-cl-zeile{ display:flex; align-items:center; gap:14px; padding:9px 4px; border-bottom:1px solid #1a1a2c; }
.upd-badge{ width:56px; height:26px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; letter-spacing:.04em; flex:none; }
.upd-badge.neu{ background:#166534; color:#dcfce7; } .upd-badge.fix{ background:#991b1b; color:#fee2e2; } .upd-badge.opt{ background:#1e3a8a; color:#dbeafe; }
.upd-cl-text{ flex:1; min-width:0; }
.upd-cl-text b{ display:block; font-size:13.5px; color:#fff; font-weight:600; }
.upd-cl-text small{ display:block; font-size:12px; color:var(--text-dim); margin-top:1px; }
.upd-cl-datum{ font-size:12.5px; color:var(--text-dim); flex:none; }
.upd-kv-liste{ display:flex; flex-direction:column; gap:8px; }
.upd-kv{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; }
.upd-kv span{ color:var(--text-dim); } .upd-kv b{ color:#fff; font-weight:600; } .upd-kv .gruen{ color:#4ade80; }
.upd-checks{ display:flex; flex-direction:column; gap:10px; }
.upd-check{ display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--text); cursor:pointer; }
.upd-check input{ display:none; }
.upd-check span{ width:22px; height:22px; border-radius:6px; border:1px solid #3a3a58; background:#0f0f1c; position:relative; flex:none; }
.upd-check input:checked + span{ background:var(--purple); border-color:var(--purple); }
.upd-check input:checked + span::after{ content:""; position:absolute; left:7px; top:3px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.upd-check.fest{ cursor:default; } .upd-check.fest span{ opacity:.75; }
.upd-backup-zeile{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.upd-backup-zeile small{ display:block; font-size:12.5px; color:var(--text-dim); }
.upd-backup-zeile b{ display:block; font-size:15px; color:#fff; }
.upd-backups{ margin-top:12px; display:flex; flex-direction:column; gap:6px; max-height:220px; overflow:auto; scrollbar-width:thin; }
.upd-backup{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:9px; background:#0f0f1c; border:1px solid var(--card-border); }
.upd-backup b{ display:block; font-size:13px; color:#fff; } .upd-backup small{ display:block; font-size:11.5px; color:var(--text-dim); margin-top:2px; }
.upd-backup-actions{ display:flex; gap:4px; flex:none; }
.upd-log{ margin:0; max-height:260px; overflow:auto; padding:12px; border-radius:10px; background:#0a0a13; border:1px solid var(--card-border); color:var(--text-dim); font-size:11.5px; line-height:1.5; white-space:pre-wrap; font-family:Consolas,Menlo,monospace; }
@media (max-width:1300px){ .upd-reihe1{ grid-template-columns:1fr; } .upd-reihe2{ grid-template-columns:1fr; } .upd-rack,.upd-slogan{ display:none; } }

/* FIX268: Kodi & Geraete (Geraetetoken) */
.prf-add .prf-select{ flex:1; height:38px; padding:0 12px; border-radius:9px; background:#0f0f1c; border:1px solid var(--card-border); color:var(--text); font-size:13.5px; font-family:inherit; }
.prf-token{ margin:0 0 12px; padding:12px 14px; border-radius:10px; background:rgba(124,77,255,.08); border:1px solid rgba(124,77,255,.4); }
.prf-token > b{ display:block; color:#fff; font-size:13.5px; margin-bottom:8px; }
.prf-token-zeile{ display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:8px; align-items:center; padding:5px 0; }
.prf-token-zeile small{ color:var(--text-dim); font-size:12px; }
.prf-token-zeile code{ font-size:11.5px; color:#c9b8ff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:#0a0a13; padding:5px 8px; border-radius:6px; }
.prf-kodi{ margin-top:10px; font-size:12.5px; color:var(--text-dim); line-height:1.5; }
.prf-kodi b{ color:var(--text); }

/* FIX269/FIX271: Server-Rack-Foto im Kopf der Update-Seite - laeuft ueber die volle Hoehe
   des Kopfbereichs (von oben bis unten) und verblasst nach links weich Richtung Schriftzug. */
.upd-kopf{ background:#0d0d18; padding-bottom:0; }
.upd-kopf-inner{ margin-top:0; position:relative; z-index:1; }
.upd-crumb{ margin-bottom:12px; position:relative; z-index:1; }
.upd-rack.upd-foto{ position:absolute; top:0; right:0; bottom:0; height:auto; width:min(48%,560px); border:0; box-shadow:none; padding:0; border-radius:0; z-index:0; flex:none;
  background:url("../img/update-header.jpg") right center / cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 25%,#000 55%); mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 25%,#000 55%); }
.upd-slogan{ margin-right:min(40%,470px); padding-right:0; }
@media (max-width:1300px){ .upd-rack.upd-foto{ display:block; width:40%; } .upd-slogan{ display:none; } }
@media (max-width:900px){ .upd-rack.upd-foto{ display:none; } }

.upd-fehlertext{ color:#f87171; }

/* ===================================================================
   FIX271 - TV-Guide nach Vorlage (js/tvguide.js)
   =================================================================== */
.tg-page{ display:flex; flex-direction:column; gap:16px; }
.tg-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.tg-head h1{ font-size:30px; font-weight:700; color:#fff; letter-spacing:-.01em; }
.tg-head .lede{ font-size:14px; color:var(--text-dim); margin-top:2px; }
.tg-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tg-btn{ height:40px; padding:0 16px; border-radius:10px; border:1px solid var(--card-border); background:var(--card-bg); color:var(--text); font-size:14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.tg-btn:hover{ background:#1a1a2c; }
.tg-btn.tg-icon{ width:40px; padding:0; justify-content:center; }
.tg-btn svg{ width:18px; height:18px; }
.tg-datum{ font-size:15px; color:var(--text); padding:0 8px; min-width:230px; text-align:center; }
.tg-suche{ display:flex; align-items:center; gap:10px; height:40px; padding:0 14px; border-radius:10px; border:1px solid var(--card-border); background:var(--card-bg); width:290px; color:var(--text-dim); }
.tg-suche svg{ width:18px; height:18px; flex:none; }
.tg-suche input{ flex:1; background:transparent; border:0; outline:0; color:var(--text); font-size:14px; min-width:0; }
.tg-suche input::placeholder{ color:var(--text-faint); }

.tg-body{ display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:20px; align-items:start; }
.tg-main{ min-width:0; display:flex; flex-direction:column; gap:18px; }
.tg-side{ display:flex; flex-direction:column; gap:16px; position:sticky; top:0; }
.tg-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--card-border); }
.tg-tab{ background:transparent; border:0; border-bottom:2px solid transparent; color:var(--text-dim); font-size:15px; font-weight:500; padding:8px 20px 12px; cursor:pointer; margin-bottom:-1px; }
.tg-tab:hover{ color:var(--text); }
.tg-tab.active{ color:#b39dff; border-bottom-color:var(--purple); font-weight:600; background:linear-gradient(180deg,rgba(124,77,255,.12),transparent); border-radius:8px 8px 0 0; }
.tg-tab:disabled{ opacity:.35; cursor:default; }

/* Buehne */
.tg-hero{ position:relative; border-radius:16px; overflow:hidden; min-height:320px; border:1px solid var(--card-border); background:linear-gradient(135deg,var(--tg-farbe)); display:flex; }
.tg-hero-bild{ position:absolute; inset:0; }
.tg-hero-unscharf{ position:absolute; inset:-20%; width:140%; height:140%; object-fit:cover; filter:blur(60px) saturate(1.4); opacity:.55; }
.tg-hero-logo{ position:absolute; right:8%; top:50%; transform:translateY(-50%); width:34%; max-height:60%; object-fit:contain; filter:drop-shadow(0 12px 40px rgba(0,0,0,.6)); opacity:.95; }
.tg-hero-kuerzel{ position:absolute; right:12%; top:50%; transform:translateY(-50%); font-size:120px; font-weight:800; color:rgba(255,255,255,.14); letter-spacing:-.04em; }
.tg-hero-kuerzel.klein{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transform:none; font-size:34px; color:rgba(255,255,255,.35); }
.tg-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,10,19,.96) 0%,rgba(10,10,19,.9) 32%,rgba(10,10,19,.45) 62%,rgba(10,10,19,.15) 100%); pointer-events:none; }
.tg-hero-inhalt{ position:relative; z-index:1; padding:28px 30px 26px; max-width:560px; display:flex; flex-direction:column; gap:10px; }
.tg-hero h2{ font-size:38px; font-weight:700; color:#fff; line-height:1.1; letter-spacing:-.01em; }
.tg-hero-sub{ font-size:22px; color:#e8e8f0; margin-top:-4px; }
.tg-hero-sender{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--text); }
.tg-mini-logo{ width:30px; height:22px; object-fit:contain; border-radius:5px; background:rgba(255,255,255,.06); padding:2px; flex:none; }
span.tg-mini-logo,.tg-logo-leer{ display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:#cfcfe0; letter-spacing:.04em; }
.tg-live{ background:#5b1d2b; color:#ffb4c0; border:1px solid #8b2a3e; font-size:11px; font-weight:700; letter-spacing:.08em; padding:3px 8px; border-radius:5px; }
.tg-bald{ background:rgba(124,77,255,.18); color:#c9b8ff; border:1px solid rgba(124,77,255,.45); font-size:11px; font-weight:600; padding:3px 8px; border-radius:5px; }
.tg-hero-zeit{ font-size:17px; color:#fff; }
.tg-hero-fortschritt{ display:flex; align-items:center; gap:14px; }
.tg-bar{ display:block; width:270px; height:5px; border-radius:3px; background:rgba(255,255,255,.14); overflow:hidden; }
.tg-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--purple),#8b5cf6); border-radius:3px; }
.tg-bar.flach{ width:auto; height:3px; margin:0 12px 10px; }
.tg-bar.flach.seite{ margin:14px 0 0; }
.tg-rest{ font-size:12.5px; color:var(--text); }
.tg-hero-text{ font-size:14.5px; color:#d6d6e4; line-height:1.45; }
.tg-dim{ color:var(--text-dim); font-size:13px; }
.tg-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tg-tags span{ border:1px solid #3a3a58; border-radius:6px; padding:3px 10px; font-size:12.5px; color:#cfcfe0; background:rgba(255,255,255,.03); }
.tg-hero-aktionen{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.tg-primaer,.tg-sekundaer{ height:42px; padding:0 20px; border-radius:9px; font-size:15px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.tg-primaer{ background:linear-gradient(135deg,var(--purple),#6d3df0); border:0; color:#fff; }
.tg-primaer:hover{ filter:brightness(1.08); }
.tg-sekundaer{ background:rgba(18,18,31,.85); border:1px solid #33334d; color:var(--text); }
.tg-sekundaer:hover{ border-color:#5a4fa0; }
.tg-sekundaer.aktiv{ color:#c9b8ff; border-color:var(--purple); }
.tg-sekundaer:disabled{ opacity:.6; cursor:default; }
.tg-primaer svg,.tg-sekundaer svg{ width:18px; height:18px; }
.tg-hero-leer .tg-hero-inhalt p{ color:var(--text-dim); font-size:14px; line-height:1.5; }

/* Reihen */
.tg-reihe{ display:flex; flex-direction:column; gap:12px; }
.tg-reihe-kopf{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tg-reihe-kopf h3{ font-size:22px; font-weight:700; color:#fff; }
.tg-reihe-rechts{ display:flex; align-items:center; gap:18px; }
.tg-filter{ background:transparent; border:0; color:#b39dff; font-size:14px; font-weight:500; cursor:pointer; outline:0; }
.tg-filter option{ background:#12121f; color:var(--text); }
.tg-mehr{ background:transparent; border:0; color:#b39dff; font-size:14px; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:4px; padding:0; }
.tg-mehr svg{ width:16px; height:16px; }
.tg-mehr:hover{ color:#fff; }
.tg-mehr.mitte{ margin:10px auto 0; display:flex; }
.tg-scroller-wrap{ position:relative; }
.tg-scroller{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:4px; }
.tg-scroller .tg-karte{ flex:0 0 200px; scroll-snap-align:start; }
.tg-pfeil{ position:absolute; right:-6px; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; border:1px solid #3a3a58; background:#1a1a2c; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,0,0,.5); }
.tg-pfeil svg{ width:18px; height:18px; }
.tg-raster{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.tg-karte{ position:relative; border-radius:12px; overflow:hidden; background:var(--card-bg); border:1px solid var(--card-border); cursor:pointer; display:flex; flex-direction:column; transition:border-color .15s, transform .15s; }
.tg-karte:hover{ border-color:#5a4fa0; transform:translateY(-2px); }
.tg-karte-bild{ position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,var(--tg-farbe)); overflow:hidden; }
.tg-karte-logo{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:22px 30px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.6)); }
.tg-karte-sender{ position:absolute; left:8px; top:8px; }
.tg-karte-sender .tg-mini-logo{ background:rgba(10,10,19,.75); border:1px solid rgba(255,255,255,.12); }
.tg-karte-text{ position:relative; padding:10px 12px 8px; display:flex; flex-direction:column; gap:2px; }
.tg-karte-text strong{ font-size:15px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tg-karte-text span{ font-size:12.5px; color:var(--text-dim); }
.tg-karte-text small{ font-size:12px; color:var(--text-dim); min-height:14px; }
.tg-karte-abend .tg-karte-text{ padding-bottom:10px; padding-right:40px; }
.tg-glocke{ position:absolute; right:10px; bottom:10px; width:30px; height:30px; border-radius:8px; border:0; background:transparent; color:#b39dff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.tg-glocke svg{ width:20px; height:20px; }
.tg-glocke:hover{ background:rgba(124,77,255,.18); }
.tg-glocke.aktiv{ color:#c9b8ff; }
.tg-leer{ color:var(--text-dim); font-size:13.5px; padding:22px; border:1px dashed var(--card-border); border-radius:12px; text-align:center; }
.tg-leer.klein{ padding:12px; font-size:12.5px; }

/* Seitenspalte */
.tg-card{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:16px; }
.tg-card h3{ font-size:19px; font-weight:700; color:#fff; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
.tg-stern{ background:transparent; border:0; color:#b39dff; cursor:pointer; width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
.tg-stern svg{ width:22px; height:22px; }
.tg-stern.aktiv svg{ fill:#b39dff; }
.tg-liste{ display:flex; flex-direction:column; }
.tg-zeile{ display:flex; align-items:center; gap:12px; padding:11px 8px; border-bottom:1px solid #1d1d30; cursor:pointer; border-radius:8px; }
.tg-zeile:last-child{ border-bottom:0; }
.tg-zeile:hover{ background:#17172a; }
.tg-zeile .tg-mini-logo{ width:44px; height:30px; }
.tg-zeile-zeit{ font-size:14px; color:var(--text-dim); width:46px; flex:none; }
.tg-zeile-titel{ font-size:15px; font-weight:500; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tg-zeile-text{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.tg-zeile-text strong{ font-size:14.5px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tg-zeile-text span{ font-size:12.5px; color:var(--text-dim); }
.tg-zeile .tg-glocke{ position:static; }
.tg-merk{ display:flex; align-items:center; gap:12px; padding:8px; border-radius:10px; background:#0f0f1a; border:1px solid #1d1d30; margin-bottom:8px; cursor:pointer; }
.tg-merk:hover{ border-color:#3a3a58; }
.tg-merk-bild{ position:relative; width:76px; height:52px; border-radius:8px; overflow:hidden; background:linear-gradient(135deg,var(--tg-farbe)); flex:none; }
.tg-merk-bild img{ width:100%; height:100%; object-fit:contain; padding:8px; }
.tg-merk-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.tg-merk-text strong{ font-size:15px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tg-merk-text span{ font-size:12.5px; color:var(--text-dim); }
.tg-merk .tg-glocke{ position:static; }

/* Fuss */
.tg-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; color:var(--text-dim); padding:4px 2px 0; }
.tg-status{ display:inline-flex; align-items:center; gap:8px; }
.tg-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); display:inline-block; }
.tg-dot.aus{ background:var(--orange); box-shadow:0 0 8px var(--orange); }
.tg-anzahl{ display:inline-flex; align-items:center; gap:8px; color:var(--text); font-size:14px; }
.tg-anzahl svg{ width:18px; height:18px; color:var(--text-dim); }

@media (max-width:1250px){ .tg-body{ grid-template-columns:1fr; } .tg-side{ position:static; display:grid; grid-template-columns:1fr 1fr; } .tg-hero h2{ font-size:30px; } }
@media (max-width:760px){ .tg-side{ grid-template-columns:1fr; } .tg-suche{ width:100%; } .tg-hero-logo{ display:none; } .tg-tab{ padding:8px 12px 12px; font-size:14px; } }

/* FIX273: Senderlisten-Auswahl je Geraetetoken */
.prf-geraet-add{ flex-wrap:wrap; }
.prf-select-klein{ font-size:12.5px; padding:0 8px; height:34px; min-width:150px; background:#0f0f1c; border:1px solid var(--card-border); color:var(--text); border-radius:8px; }
.prf-add .prf-select-klein{ flex:0 0 auto; height:38px; }
.prf-geraet-row .prf-row-actions{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

/* FIX274: Leiste im Verschieben-Modus (eigene Senderreihenfolge) */
.ltv-sort-bar{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; margin-bottom:6px; border-radius:8px; background:rgba(124,77,255,.1); border:1px dashed rgba(124,77,255,.45); font-size:11.5px; color:#c9b8ff; flex-wrap:wrap; }
.ltv-sort-bar-btns{ display:flex; gap:6px; }
.ltv-sort-bar button{ background:#1a1a2c; border:1px solid #3a3a58; color:var(--text); font-size:11px; padding:4px 8px; border-radius:6px; cursor:pointer; }
.ltv-sort-bar button:hover{ border-color:var(--purple); }

/* FIX276: Verwaltungs-Menuepunkte fuer Nicht-Administratoren ausgeblendet */
.nav-item[hidden]{ display:none !important; }
.btn[hidden]{ display:none !important; }

/* FIX278: Tuner-Status als Ampel */
.badge-busy{ background:rgba(245,158,11,.15); color:var(--orange); font-weight:700; font-size:11px; padding:3px 9px; border-radius:6px; }
.badge-err{ background:rgba(239,68,68,.15); color:var(--red); font-weight:700; font-size:11px; padding:3px 9px; border-radius:6px; }
/* FIX309: Karteileiche aus der Tunerliste werfen (nur Administrator, nur nicht gefundene Sticks). */
.ik-sdr-entfernen{ display:inline-block; margin-left:6px; cursor:pointer; color:var(--text-dim); font-size:12px; line-height:1; padding:2px 4px; border-radius:4px; }
.ik-sdr-entfernen:hover{ color:var(--red); background:rgba(239,68,68,.12); }

/* FIX279: Sitzungen/Zuschauer je Tuner */
.tuner-belegung{ font-size:10.5px; color:var(--text-dim); margin-top:4px; white-space:nowrap; }

/* FIX280: Zuschauer hinter dem Stream in "Aktuelle Transcodings" */
.ik-benutzer{ display:inline-block; margin-left:6px; font-size:10.5px; color:#cfcfe0; background:rgba(255,255,255,.06); border:1px solid #33334d; border-radius:5px; padding:1px 7px; vertical-align:middle; }

/* FIX284: "Nur ein Stream" je Geraetetoken */
.prf-check{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text); white-space:nowrap; cursor:pointer; }
.prf-check input{ accent-color:var(--purple); }

/* ===================================================================
   FIX285 - DAB+ Sendersuchlauf nach Vorlage (js/dab-scan.js)
   =================================================================== */
.dsc-page{ display:flex; flex-direction:column; gap:14px; }
.dsc-kopf{ position:relative; border-radius:16px; overflow:hidden; background:#0d0d18; border:1px solid var(--card-border); min-height:118px; padding:18px 22px; }
.dsc-foto{ position:absolute; top:0; right:0; bottom:0; width:min(58%,720px); background:url("../img/dab-header.jpg") right center / cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 28%,#000 60%); mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 28%,#000 60%); }
.dsc-kopf-inner{ position:relative; z-index:1; display:flex; align-items:center; gap:18px; }
.dsc-kopf-icon{ width:74px; height:74px; color:#b39dff; flex:none; }
.dsc-kopf-icon svg{ width:100%; height:100%; }
.dsc-kopf h1{ margin:0; color:#fff; font-size:30px; font-weight:700; }
.dsc-kopf .lede{ font-size:15px; color:var(--text-dim); margin-top:3px; }
.dsc-body{ display:grid; grid-template-columns:320px minmax(0,1fr) 360px; gap:14px; align-items:start; }
.dsc-mitte,.dsc-rechts{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.dsc-card{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:14px 16px 16px; }
.dsc-card > h3{ font-size:17px; font-weight:700; color:#fff; margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid #1d1d30; }
.dsc-label{ display:block; font-size:12px; color:var(--text-dim); margin:12px 0 6px; }
.dsc-label:first-of-type{ margin-top:0; }
.dsc-row{ display:flex; gap:8px; }
.dsc-select{ width:100%; height:40px; padding:0 12px; border-radius:9px; background:#0f0f1c; border:1px solid var(--card-border); color:var(--text); font-size:13.5px; font-family:inherit; }
.dsc-icon-btn{ width:40px; height:40px; flex:none; border-radius:9px; background:#0f0f1c; border:1px solid var(--card-border); color:#b39dff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.dsc-icon-btn svg{ width:18px; height:18px; }
.dsc-seg{ display:flex; border:1px solid var(--card-border); border-radius:9px; overflow:hidden; }
.dsc-seg button{ flex:1; height:38px; background:#0f0f1c; border:0; border-right:1px solid var(--card-border); color:var(--text-dim); font-size:12.5px; cursor:pointer; }
.dsc-seg button:last-child{ border-right:0; }
.dsc-seg button.aktiv{ background:var(--purple); color:#fff; font-weight:600; }
.dsc-check{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text); padding:6px 0; cursor:pointer; }
.dsc-check input{ position:absolute; opacity:0; width:0; height:0; }
.dsc-box{ width:18px; height:18px; border-radius:5px; border:1px solid #4a4a6a; background:#0f0f1c; flex:none; position:relative; }
.dsc-check input:checked + .dsc-box{ background:var(--purple); border-color:var(--purple); }
.dsc-check input:checked + .dsc-box::after{ content:""; position:absolute; left:5px; top:1px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.dsc-start{ width:100%; margin-top:14px; height:52px; border-radius:11px; border:0; background:linear-gradient(135deg,var(--purple),#6d3df0); color:#fff; font-size:15.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; }
.dsc-start svg{ width:18px; height:18px; }
.dsc-start:disabled{ opacity:.5; cursor:default; }
.dsc-decoder{ margin-top:10px; font-size:11.5px; line-height:1.45; }
.dsc-decoder .ok{ color:var(--green); }
.dsc-decoder .warn{ color:var(--orange); }
.dsc-decoder .dsc-outline{ margin-top:8px; }
/* FIX286: Suchlauf-Protokoll (Decoder-Ausgabe) */
.dsc-log{ margin:10px 0 0; max-height:260px; overflow:auto; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:8px 10px; font:11px/1.45 ui-monospace,Consolas,monospace; color:var(--muted,#aab); white-space:pre-wrap; word-break:break-all; }
.dsc-status{ display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:18px; }
.dsc-status-kopf{ display:flex; align-items:center; gap:12px; }
.dsc-status-icon{ width:46px; height:46px; color:#b39dff; flex:none; }
.dsc-status-icon svg{ width:100%; height:100%; }
.dsc-status-titel{ font-size:18px; font-weight:600; color:#fff; }
.dsc-status-unter{ font-size:13px; color:var(--text-dim); }
.dsc-status-unter.fehler{ color:#f87171; }
.dsc-progress{ display:flex; align-items:center; gap:10px; margin:14px 0; }
.dsc-progress span{ flex:1; height:16px; border-radius:8px; background:#1a1a2c; overflow:hidden; display:block; }
.dsc-progress i{ display:block; height:100%; background:linear-gradient(90deg,var(--purple),#8b5cf6); border-radius:8px; transition:width .4s; }
.dsc-progress b{ font-size:14px; color:#fff; width:40px; text-align:right; }
.dsc-zaehler{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text); margin:6px 0; }
.dsc-zaehler b{ color:#fff; }
.dsc-zaehler .ico{ width:22px; height:22px; color:#b39dff; }
.dsc-zaehler .ico.note{ color:#f59e0b; }
.dsc-zaehler .ico svg{ width:100%; height:100%; }
.dsc-kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font-size:12.5px; align-items:center; }
.dsc-kv span{ color:var(--text-dim); }
.dsc-kv b{ color:#fff; font-weight:600; text-align:right; white-space:nowrap; }
.dsc-kv.breit{ font-size:13px; gap:8px 12px; }
.dsc-kv.breit b{ text-align:right; }
.dsc-bar{ display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.dsc-bar span{ width:70px; height:8px; border-radius:4px; background:#1a1a2c; overflow:hidden; display:inline-block; }
.dsc-bar i{ display:block; height:100%; background:var(--green); border-radius:4px; }
.dsc-outline{ height:40px; padding:0 16px; border-radius:9px; border:1px solid var(--purple); background:transparent; color:var(--text); font-size:13.5px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.dsc-outline svg{ width:16px; height:16px; color:#b39dff; }
.dsc-outline:disabled{ opacity:.45; cursor:default; }
.dsc-outline.breit{ width:100%; margin-top:12px; }
.dsc-primaer{ height:42px; padding:0 16px; border-radius:9px; border:0; background:linear-gradient(135deg,var(--purple),#6d3df0); color:#fff; font-size:14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.dsc-primaer svg{ width:16px; height:16px; }
.dsc-primaer.breit{ width:100%; margin-top:10px; }
.dsc-toolbar{ display:flex; align-items:center; gap:14px; margin-bottom:10px; flex-wrap:wrap; }
.dsc-toolbar .dsc-check{ padding:0; }
.dsc-suche{ flex:1; min-width:180px; display:flex; align-items:center; gap:8px; height:38px; padding:0 12px; border-radius:9px; border:1px solid var(--card-border); background:#0f0f1c; color:var(--text-dim); }
.dsc-suche svg{ width:16px; height:16px; }
.dsc-suche input{ flex:1; background:transparent; border:0; outline:0; color:var(--text); font-size:13px; min-width:0; }
.dsc-tabelle-wrap{ max-height:420px; overflow:auto; border-radius:8px; }
.dsc-tabelle{ width:100%; border-collapse:collapse; font-size:12.5px; }
.dsc-tabelle th{ text-align:left; color:var(--text-dim); font-weight:600; padding:8px 8px; border-bottom:1px solid #1d1d30; position:sticky; top:0; background:var(--card-bg); }
.dsc-tabelle td{ padding:7px 8px; border-bottom:1px solid #1a1a2c; color:var(--text); white-space:nowrap; }
.dsc-tabelle tr.aktiv td{ background:rgba(124,77,255,.08); }
.dsc-tabelle tr:hover td{ background:#17172a; cursor:pointer; }
.dsc-tabelle input[type=checkbox]{ accent-color:var(--purple); width:16px; height:16px; }
.dsc-name{ font-weight:600; color:#fff; }
.dsc-tag{ font-size:10px; color:var(--text-dim); border:1px solid #33334d; border-radius:4px; padding:0 5px; margin-left:6px; font-weight:400; }
.dsc-sig{ display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
.dsc-sig i{ width:4px; background:#2a2a40; border-radius:1px; }
.dsc-sig i:nth-child(1){ height:5px; } .dsc-sig i:nth-child(2){ height:8px; } .dsc-sig i:nth-child(3){ height:11px; } .dsc-sig i:nth-child(4){ height:14px; }
.dsc-sig i.an{ background:var(--green); }
.dsc-leer{ color:var(--text-dim); font-size:13px; padding:14px 4px; text-align:center; }
.dsc-panel{ margin-top:0; padding:10px; gap:10px; }
.dsc-meter{ width:auto; flex:1; min-width:0; }
.dsc-live{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:12px; border:1px solid var(--card-border); border-radius:10px; overflow:hidden; }
.dsc-live > div{ padding:8px 10px; border-right:1px solid var(--card-border); display:flex; flex-direction:column; gap:3px; min-width:0; }
.dsc-live > div:last-child{ border-right:0; }
.dsc-live span{ font-size:11px; color:var(--text-dim); }
.dsc-live b{ font-size:13px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:1400px){ .dsc-body{ grid-template-columns:300px minmax(0,1fr); } .dsc-rechts{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); } }
@media (max-width:1000px){ .dsc-body{ grid-template-columns:1fr; } .dsc-rechts{ grid-template-columns:1fr; } .dsc-status{ grid-template-columns:1fr; } .dsc-foto{ display:none; } }

/* FIX407: FM/AM-Suchlaufseite - dieselben Bausteine wie die DAB+-Seite (dsc-*), dazu das
   Kopffoto in anderer Faerbung, das Namensfeld in der Fundliste und die Band-Uebersicht. */
.dsc-foto.ukw{ background-image:url("../img/fm-header.jpg"); }
.dsc-name-input{ width:100%; min-width:150px; height:30px; padding:0 8px; border-radius:7px; background:#0f0f1c; border:1px solid var(--card-border); color:#fff; font-weight:600; font-size:13px; font-family:inherit; }
.dsc-name-input:focus{ outline:none; border-color:rgba(124,77,255,.7); }
.fsc-spektrum{ position:relative; margin-bottom:10px; min-height:60px; }
.fsc-spektrum canvas{ display:block; width:100%; border-radius:10px; border:1px solid var(--card-border); }
.fsc-spektrum .dsc-leer{ padding:14px 0; }

/* FIX318: Karte "Sender & Logo" auf der DAB+-Suchlaufseite - gleiche Bausteine wie beim
   Satelliten-Suchlauf, nur mit den dsc-Klassen der DAB-Seite. */
.dsc-logo-grid{ display:grid; grid-template-columns:minmax(220px,1fr) minmax(240px,1.2fr); gap:16px; align-items:start; }
@media (max-width:900px){ .dsc-logo-grid{ grid-template-columns:1fr; } }
.dsc-liste{ height:auto; padding:6px; }
.dsc-liste option{ padding:4px 6px; }
.dsc-muted{ color:var(--text-dim); font-size:12px; }
.dsc-zeile{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.dsc-zeile .dsc-select{ flex:1; min-width:140px; }
.dsc-rot{ border-color:#7f2b2b; color:#fca5a5; }
.dsc-logo-vorschau{ height:96px; border-radius:9px; border:1px solid var(--card-border); background:#0f0f1c;
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.dsc-logo-vorschau img{ max-width:90%; max-height:80%; object-fit:contain; }

/* ===================================================================
   FIX346 - System > DVB Tuner / System > SDR Tuner

   Die Seiten benutzen dieselben Bausteine wie die bisherige Systemseite
   (.sys-page, .content-head, .sys-card, .sys-kv, .sys-muted) und denselben
   Schalter wie Einstellungen > Update (.upd-toggle). Ergaenzt wird nur, was
   es dort nicht gab: ein Raster, das sich nach der Zahl der Karten richtet
   statt nach drei festen Spalten, ein Eingabefeld innerhalb einer
   Werte-Zeile und die Kennzeichnung einer abgeschalteten Karte.
   =================================================================== */
.tun-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; align-items:start; }
@media (max-width:1280px){ .tun-grid{ grid-template-columns:1fr; } }

/* Eine abgeschaltete Karte verschwindet nicht - sie wird nur zurueckgenommen.
   Gedimmt werden dabei die Werte, nicht die Bedienelemente: der Schalter muss
   genauso deutlich bleiben wie vorher, sonst findet man nicht zurueck. */
.sys-card.tun-aus{ background:#101018; border-color:#2a2038; }
.sys-card.tun-aus h3{ color:var(--text-dim); }
.sys-card.tun-aus .sys-kv{ opacity:.55; }

.tun-marke{ display:inline-block; vertical-align:middle; margin-left:8px; font-size:11px; font-weight:700;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
  background:rgba(245,158,11,.14); color:#fbbf24; border:1px solid rgba(245,158,11,.35); }

/* Namenszeile: gleiche Zeile wie die Werte darueber, aber ohne Trennstrich -
   sie gehoert schon zum Bedienteil der Karte. */
.tun-namenszeile{ border-bottom:0; padding-top:12px; align-items:center; }
.tun-name{ flex:1 1 auto; min-width:0; height:36px; padding:0 12px; border-radius:9px;
  background:#0f0f1c; border:1px solid var(--card-border); color:var(--text);
  font-size:13px; font-family:inherit; text-align:right; }
.tun-name::placeholder{ color:var(--text-dim); }
.tun-name:focus{ outline:0; border-color:var(--purple); }
.tun-name:disabled{ opacity:.5; cursor:default; }

.tun-id{ margin-top:10px; font-family:Consolas,Menlo,monospace; font-size:11.5px;
  color:var(--text-dim); word-break:break-all; }

/* ===================================================================
   FIX347 - Feste Bindung (Transponder bzw. Multiplex/Frequenz)

   Ein eigener Block am Fuss der Karte, durch eine Trennlinie abgesetzt: darueber steht,
   was die Karte gerade TUT, hier unten, was sie tun SOLL. Ohne diese Trennung liest sich
   das Auswahlfeld wie noch ein Messwert.
   =================================================================== */
.tun-bindung{ margin-top:14px; padding-top:12px; border-top:1px solid #1a1a2c; }
.tun-bindung-kopf{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:8px; }
.tun-bindung .upd-toggle{ margin:10px 0 0; }
.tun-bindung .sys-muted{ margin-top:8px; }

/* Das Auswahlfeld. Bei Astra stehen hier gut 110 Zeilen, deshalb die volle Breite -
   die Beschriftung traegt den Satelliten, die Frequenz UND Beispielsender. */
.tun-wahl{ display:block; width:100%; height:38px; padding:0 10px; border-radius:9px;
  background:#0f0f1c; border:1px solid var(--card-border); color:var(--text);
  font-size:13px; font-family:inherit; cursor:pointer; }
.tun-wahl:focus{ outline:0; border-color:var(--purple); }
.tun-wahl:disabled{ opacity:.5; cursor:default; }
.tun-wahl optgroup{ background:#0f0f1c; color:var(--text-dim); font-style:normal; font-weight:700; }
.tun-wahl option{ background:#0f0f1c; color:var(--text); }

/* ===================================================================
   FIX348 - DVB-Tunerseite im Entwurf des Benutzers

   Bausteine: Kopf mit Brotkrume und gezeichneter Karte, Gerätekarte,
   Tunertabelle mit Schaltern und Auswahlfeldern, Detailspalte mit
   Signalbalken. Farben und Radien wie überall sonst - neu ist nur die
   Anordnung.
   =================================================================== */
.tun-seite{ display:flex; flex-direction:column; gap:14px; }

/* --- Kopf ---------------------------------------------------------- */
.tun-kopf{ position:relative; border-radius:16px; overflow:hidden; padding:14px 18px 18px; min-height:172px;
  background:linear-gradient(90deg,#0d0d18 0%,#0d0d18 48%,#1a1236 100%);
  border:1px solid var(--card-border); }
/* FIX353: Ohne Brotkrume steht der Titel allein im Kopf - dann gehoert er auch in die
   Mitte und nicht an den oberen Rand geschoben. */
.tun-kopf-inner{ position:relative; z-index:2; display:flex; align-items:center; gap:18px;
  min-height:144px; }
.tun-kopf-icon{ width:64px; height:64px; border-radius:16px; flex:none; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#8b5cf6,#6d28d9); box-shadow:0 8px 22px rgba(124,77,255,.35); }
.tun-kopf-icon svg{ width:34px; height:34px; color:#fff; }
.tun-kopf-inner h1{ margin:0; font-size:34px; font-weight:700; color:#fff; letter-spacing:-.02em; }
.tun-kopf-inner .lede{ color:var(--text-dim); font-size:14px; margin-top:2px; }

/* FIX352: Das Kopfbild - die Satellitenanlage im Abendrot.

   Die Breite ist so gewaehlt, dass das Bild bei der Hoehe des Kopfes OHNE Beschnitt
   hineinpasst (Seitenverhaeltnis 7,26:1). Wuerde es schmaler stehen, schnitte "cover" links
   etwas ab - und zwar genau den dunklen Auslauf, in dem die Ueberblendung laufen soll. Der
   Schriftzug im Bild rueckte dann in die Ueberblendung hinein.

   Die Ueberblendung endet bei 16 %, der Auslauf im Bild ist 17,5 % breit: sie laeuft also
   vollstaendig in dem Bereich, in dem ohnehin nichts steht. */
.tun-bild{ position:absolute; inset:0 0 0 auto; width:min(76%,1280px); z-index:1; pointer-events:none;
  background:url("../img/dvb-header.jpg") right center / cover no-repeat; }
.tun-bild::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,#0d0d18 0%,rgba(13,13,24,.82) 7%,rgba(13,13,24,0) 16%); }
/* Ein Hauch der Kopffarbe von unten, damit das Bild nicht als Kachel endet. */
.tun-bild::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(13,13,24,.4) 0%,rgba(13,13,24,0) 26%); }

/* FIX354: Schmaler als 1250 px passt das Bild NEBEN den Titel nicht mehr - dann liefe der
   Schriftzug in ihn hinein oder das Bild wuerde links so stark beschnitten, dass vom Auslauf
   nichts uebrig bliebe. Frueher entfiel es dort ganz; auf dem iPad quer war der Kopf damit
   leer.

   Jetzt rutscht es stattdessen UNTER den Titel und nimmt die volle Breite ein. Das Feld
   bekommt dazu das Seitenverhaeltnis des Bildes (1700:234) - dann sitzt es ohne jeden
   Beschnitt darin, beide Schriftzuege sind zu sehen, und die Ueberblendung bleibt links im
   dunklen Auslauf. */
@media (max-width:1250px){
  .tun-kopf{ min-height:0; padding-bottom:14px; }
  .tun-kopf-inner{ min-height:0; }
  .tun-bild{ position:relative; inset:auto; width:100%; max-width:none;
    aspect-ratio:1700 / 234; margin-top:14px; border-radius:10px; overflow:hidden; }
  /* Im eigenen Kasten darf die Ueberblendung kuerzer sein - links steht kein Titel mehr. */
  .tun-bild::before{ background:linear-gradient(90deg,#0d0d18 0%,rgba(13,13,24,.45) 5%,rgba(13,13,24,0) 13%); }
  .tun-bild::after{ background:none; }
}

/* Noch schmaler waeren die Schriftzuege im Bild nur noch Striche. */
@media (max-width:820px){ .tun-bild{ display:none; } }

/* --- Gerätekarte --------------------------------------------------- */
.tun-geraet{ display:grid; grid-template-columns:auto minmax(160px,1fr) minmax(230px,1fr) minmax(230px,auto);
  gap:20px; align-items:center;
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:16px 18px; }
.tun-geraet-name h2{ margin:0; font-size:22px; font-weight:700; color:#fff; }
.tun-geraet-typ{ color:var(--text-dim); font-size:13px; margin-top:3px; }
/* Beschriftung und Wert dicht beieinander statt an den Rändern der Spalte - bei vier
   kurzen Werten sähe ein Blocksatz über die volle Breite nach Tabelle aus, nicht nach Karte. */
.tun-geraet-kv .sys-kv{ display:grid; grid-template-columns:118px minmax(0,1fr); gap:10px;
  padding:4px 0; border-bottom:0; font-size:12.5px; }
.tun-geraet-kv .sys-kv b{ text-align:left; }
.tun-geraet-kv code{ color:#c9b8ff; font-family:Consolas,Menlo,monospace; }
.tun-geraet-status{ display:flex; align-items:center; gap:13px; padding:12px 16px; border-radius:12px;
  background:#0f0f1c; border:1px solid var(--card-border); }
.tun-geraet-status b{ display:block; font-size:14.5px; color:#fff; }
.tun-geraet-status small{ display:block; font-size:12.5px; color:var(--text-dim); margin-top:2px; }
.tun-geraet-ring{ width:40px; height:40px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; }
.tun-geraet-ring svg{ width:22px; height:22px; }
.tun-geraet-status.gruen .tun-geraet-ring{ background:rgba(34,197,94,.14); color:#4ade80; border:1px solid rgba(34,197,94,.4); }
.tun-geraet-status.gruen b{ color:#4ade80; }
.tun-geraet-status.gelb .tun-geraet-ring{ background:rgba(245,158,11,.14); color:#fbbf24; border:1px solid rgba(245,158,11,.4); }
.tun-geraet-status.gelb b{ color:#fbbf24; }

/* FIX351: Das Bildfeld der Gerätekarte - hier gehoert die Karte hin.
   Ein eigener, eingelassener Rahmen statt einer freistehenden Zeichnung: so sieht man,
   dass das Feld zum Gerät gehoert, und die Karte steht darin wie in einer Vitrine. */
.tun-mini{ width:262px; flex:none; padding:12px 14px; border-radius:12px;
  background:radial-gradient(120% 140% at 30% 20%,#1a1a2e 0%,#0c0c16 70%);
  border:1px solid var(--card-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 28px rgba(0,0,0,.55);
  display:flex; align-items:center; }
.tun-mini .tun-karte-bild{ width:100%; height:auto; filter:drop-shadow(0 8px 18px rgba(0,0,0,.6)); }

@media (max-width:900px){ .tun-mini{ width:100%; } }

/* --- Zweispaltiger Rumpf ------------------------------------------- */
.tun-body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,380px); gap:14px; align-items:start; }
.tun-tabellenkarte{ min-width:0; }
.tun-fussnote{ margin-top:0; }

/* --- Tabelle ------------------------------------------------------- */
.tun-tabelle-rollt{ overflow-x:auto; margin:0 -4px; }
.tun-tabelle{ width:100%; border-collapse:collapse; font-size:13px; }
.tun-tabelle th{ text-align:left; padding:9px 10px; font-size:12px; font-weight:600; color:var(--text-dim);
  border-bottom:1px solid #1f1f34; white-space:nowrap; }
.tun-tabelle td{ padding:7px 10px; border-bottom:1px solid #161626; color:var(--text); vertical-align:middle; }
.tun-tabelle tbody tr:last-child td{ border-bottom:0; }
.tun-th-nr{ width:36px; text-align:left; color:var(--text-dim); }
.tun-th-mitte{ text-align:center; }
.tun-td-std, .tun-td-tp{ color:var(--text-dim); white-space:nowrap; }
.tun-td-karte{ color:var(--text-dim); max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tun-td-wahl{ min-width:190px; }
.tun-td-wahl .tun-wahl{ height:32px; font-size:12.5px; }

/* Die ausgewählte Zeile - sie bestimmt, was in der Detailspalte steht. */
.tun-zeile{ cursor:pointer; transition:background .12s; }
.tun-zeile:hover{ background:#14142a; }
.tun-zeile.aktiv{ background:linear-gradient(90deg,rgba(124,77,255,.18),rgba(124,77,255,.05)); }
.tun-zeile.aktiv td:first-child{ box-shadow:inset 3px 0 0 var(--purple); }
/* FIX356: Eine abgeschaltete Zeile wird zurueckgenommen - aber NICHT ueber "opacity" auf der
   Zelle. Deckkraft eines Elternteils laesst sich von einem Kind nicht zuruecknehmen; der
   Schalter und das Zahnrad waeren also mitgedimmt gewesen, obwohl man genau sie braucht, um
   die Zeile wieder einzuschalten. Stattdessen nur die Schriftfarbe. */
.tun-zeile.aus td{ color:var(--text-dim); }

.tun-punkt{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:middle; }
.tun-punkt.gruen{ background:#22c55e; box-shadow:0 0 7px rgba(34,197,94,.8); }
.tun-punkt.gelb{ background:#f59e0b; box-shadow:0 0 7px rgba(245,158,11,.8); }
.tun-punkt.rot{ background:#ef4444; box-shadow:0 0 7px rgba(239,68,68,.8); }
.tun-gruen{ color:#4ade80; } .tun-gelb{ color:#fbbf24; } .tun-rot{ color:#f87171; }

/* Kleiner Schalter für die Tabellenzeile - derselbe Mechanismus wie .upd-toggle,
   nur auf Zeilenhöhe zusammengeschoben. */
.tun-mini-schalter{ display:inline-block; cursor:pointer; }
.tun-mini-schalter.gesperrt{ cursor:default; opacity:.5; }
.tun-mini-schalter input{ display:none; }
.tun-mini-schalter span{ display:block; width:40px; height:22px; border-radius:11px; background:#2a2a44; position:relative; transition:.2s; }
.tun-mini-schalter span::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px;
  border-radius:50%; background:#fff; transition:.2s; }
.tun-mini-schalter input:checked + span{ background:var(--purple); }
.tun-mini-schalter input:checked + span::after{ left:21px; }

.tun-zahnrad{ width:32px; height:32px; border-radius:9px; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; background:#1a1a2e; border:1px solid var(--card-border); color:var(--text-dim); }
.tun-zahnrad:hover{ background:#22223a; border-color:#34345a; color:#fff; }
.tun-zahnrad svg{ width:16px; height:16px; }

.tun-sammel{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.tun-sammel .sys-btn{ flex:1 1 200px; height:46px; }

/* --- Detailspalte -------------------------------------------------- */
.tun-detail{ position:sticky; top:12px; }
.tun-detail-kopf{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.tun-detail-kopf h3{ margin:0; }
.tun-detail-status{ font-size:12.5px; color:var(--text-dim); white-space:nowrap; }

.tun-balken-block{ margin:14px 0; display:flex; flex-direction:column; gap:9px; }
.tun-balken-zeile{ display:grid; grid-template-columns:96px minmax(0,1fr) 64px; gap:10px; align-items:center; font-size:12.5px; }
.tun-balken-zeile > span{ color:var(--text-dim); }
.tun-balken-zeile > b{ color:var(--text); font-weight:600; text-align:right; white-space:nowrap; }
.tun-balken{ height:9px; border-radius:5px; background:#1e1e33; overflow:hidden; }
.tun-balken i{ display:block; height:100%; border-radius:5px;
  background:linear-gradient(90deg,#22c55e,#4ade80); transition:width .3s; }

/* --- Dialog am Zahnrad --------------------------------------------- */
.tun-dlg-schalter{ display:flex !important; align-items:center; gap:10px; margin-top:14px; cursor:pointer; }
.tun-dlg-schalter input{ width:auto !important; height:auto !important; margin:0 !important; accent-color:var(--purple); }
.tun-dlg-schalter span{ font-size:13.5px; color:var(--text); }

/* --- Schmaler: erst die Detailspalte unter die Tabelle, dann die
       Gerätekarte untereinander. Die Tabelle rollt notfalls seitlich. --- */
@media (max-width:1200px){
  .tun-body{ grid-template-columns:1fr; }
  .tun-detail{ position:static; }
}
@media (max-width:900px){
  .tun-geraet{ grid-template-columns:1fr; gap:14px; }
  .tun-bild{ display:none; }
  .tun-kopf-inner h1{ font-size:26px; }
}

/* ===================================================================
   FIX349 - Update: jetzt oder heute Nacht

   Der Terminblock steht direkt unter „Jetzt installieren", in derselben
   Knopfspalte: es sind zwei Wege für dasselbe Paket, keine getrennte
   Funktion irgendwo anders auf der Seite.
   =================================================================== */
.upd-termin{ margin-top:10px; padding-top:10px; border-top:1px solid #23233c; }
.upd-termin-zeile{ display:flex; gap:8px; align-items:stretch; }
.upd-termin-zeile .upd-btn{ flex:1 1 auto; width:auto; }
/* 112 px, nicht 96: manche Browser blenden im Zeitfeld noch ein Uhrsymbol oder ein
   AM/PM-Feld ein - bei 96 px wird die Uhrzeit dann abgeschnitten. */
.upd-termin input[type="time"]{ width:112px; flex:none; height:42px; padding:0 8px; border-radius:9px;
  background:#0f0f1c; border:1px solid var(--card-border); color:var(--text);
  font-size:14px; font-family:inherit; font-variant-numeric:tabular-nums; }
.upd-termin input[type="time"]:focus{ outline:0; border-color:var(--purple); }
/* Das Uhrsymbol des Browsers ist in einem dunklen Feld sonst kaum zu sehen. */
.upd-termin input[type="time"]::-webkit-calendar-picker-indicator{ filter:invert(1); opacity:.55; cursor:pointer; }
.upd-termin-text{ margin-top:7px; font-size:12.5px; color:var(--text-dim); line-height:1.5; }

/* Ist ein Termin gesetzt, tritt er an die Stelle des Knopfes - man soll auf einen Blick
   sehen, dass etwas vorgemerkt ist, und nicht versehentlich zweimal planen. */
.upd-termin.gesetzt{ border-top:0; margin-top:10px; padding:12px 14px; border-radius:11px;
  background:rgba(124,77,255,.1); border:1px solid rgba(124,77,255,.42); }
.upd-termin-kopf{ display:flex; align-items:center; gap:9px; color:#fff; font-size:14px; }
.upd-termin-kopf svg{ width:17px; height:17px; color:#b39dff; flex:none; }
.upd-termin.gesetzt .upd-btn{ margin-top:10px; height:36px; font-size:13px; }

.upd-hinweis{ display:flex; align-items:flex-start; gap:9px; margin-bottom:12px; padding:11px 13px;
  border-radius:10px; font-size:12.5px; line-height:1.5; border:1px solid var(--card-border); background:#0f0f1c; color:var(--text); }
.upd-hinweis svg{ width:16px; height:16px; flex:none; margin-top:1px; }
.upd-hinweis.gelb{ border-color:rgba(245,158,11,.42); background:rgba(245,158,11,.09); color:#fbbf24; }


/* ===================================================================
   FIX351 - Der Luefter dreht sich

   Langsam im Leerlauf, schneller sobald ein Tuner empfaengt. Damit ist das
   Bild nicht nur Schmuck: man sieht auf einen Blick, ob etwas laeuft.
   =================================================================== */
/* view-box statt fill-box: so ist die Drehachse genau der Nabenpunkt der Zeichnung und
   nicht die Mitte des umschliessenden Rechtecks der Fluegel - das waere bei neun Fluegeln
   fast, aber eben nicht ganz derselbe Punkt, und das Rad wuerde eiern. */
.tun-luefter{ animation:tun-drehen 5.5s linear infinite;
  transform-box:view-box; transform-origin:330px 104px; }
.tun-karte-bild.aktiv .tun-luefter{ animation-duration:1.3s; }
@keyframes tun-drehen{ to{ transform:rotate(360deg); } }

/* Wer Bewegung abbestellt hat, bekommt ein stehendes Bild - die Angabe, ob
   etwas laeuft, steht ohnehin als Text daneben. */
@media (prefers-reduced-motion: reduce){
  .tun-luefter{ animation:none; }
}

/* ===================================================================
   FIX356 - SDR-Seite im selben Entwurf wie die DVB-Seite

   Sie hat (vorerst) kein Kopfbild und keine Gerätezeichnung. Ohne sie
   braucht der Kopf seine Mindesthöhe nicht - sonst stünde dort ein
   handbreiter leerer Streifen -, und die Gerätekarte kommt mit drei
   Spalten statt vier aus.
   =================================================================== */
/* FIX357: Die SDR-Seite hat jetzt ihr eigenes Kopfbild. Die Gerätekarte bleibt ohne
   Zeichnung - ein Stick ist keine Karte, die man abbilden muesste.

   Das Seitenverhaeltnis der beiden Kopfbilder ist NICHT gleich (DVB 7,26:1, SDR 6,83:1).
   Deshalb setzt jede Seite ihr eigenes: das Feld muss genau so breit sein, dass das Bild
   bei der Kopfhoehe ohne Beschnitt hineinpasst - sonst faellt der linke Auslauf weg, in dem
   die Ueberblendung laeuft. */
.tun-bild.sdr{ background-image:url("../img/sdr-header.jpg"); width:min(72%,1210px); }
@media (max-width:1250px){ .tun-bild.sdr{ width:100%; aspect-ratio:1700 / 249; } }

/* FIX358: Das Bildfeld der SDR-Gerätekarte. Derselbe eingelassene Rahmen wie bei DVB -
   nur steht darin ein freigestelltes Foto des Sticks statt einer Zeichnung. Der Stick ist
   sehr breit und flach; deshalb hat das Feld hier weniger Hoehe und mehr Breite. */
.tun-stick{ width:100%; display:flex; align-items:center; justify-content:center; }
.tun-stick img{ width:100%; height:auto; display:block;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.65)); }
#tsdr-root .tun-geraet-bild{ width:250px; flex:none; padding:16px 14px; border-radius:12px;
  background:radial-gradient(120% 160% at 30% 20%,#1a1a2e 0%,#0c0c16 70%);
  border:1px solid var(--card-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 28px rgba(0,0,0,.55);
  display:flex; align-items:center; }
@media (max-width:900px){ #tsdr-root .tun-geraet-bild{ width:100%; } }

/* ===================================================================
   FIX359 - System > GPU

   Der Entwurf ist derselbe wie bei den beiden Tunerseiten: ein Kopf mit Bild,
   darunter Karten aus .sys-card. Neu ist nur, dass hier zwoelf kleine Kacheln
   in einem Gitter stehen statt drei grosse untereinander.

   Das Kopfbild ist KEIN Hintergrundbild wie bei DVB und SDR, sondern eine
   eingebettete Zeichnung. Zwei Gruende: es muss sich nach dem Hersteller
   richten (gruen/rot/blau), und die Luefter sollen sich drehen - beides kann
   ein Hintergrundbild nicht. Damit die Zeichnung ohne Beschnitt und ohne
   Randbalken sitzt, bekommt ihr Feld das Seitenverhaeltnis des Bildes; die
   Hoehe ergibt sich dann aus der Breite, und "meet" hat nichts abzuschneiden.
   =================================================================== */

/* --- Kopf ---------------------------------------------------------- */
/* Flacher Untergrund statt des Verlaufs der anderen Koepfe: die Farbe kommt
   hier aus der Zeichnung, und ein Verlauf dahinter gaebe an ihrer linken Kante
   eine sichtbare Naht. */
.gpu-kopf{ display:flex; align-items:center; gap:18px; background:#0d0d18; min-height:0; padding:14px 18px; }
.gpu-kopf .tun-kopf-inner{ flex:1 1 auto; min-height:120px; }
.gpu-kopf-icon{ background:linear-gradient(145deg,#6366f1,#4338ca) !important;
  box-shadow:0 8px 22px rgba(79,70,229,.35) !important; }
.gpu-bild{ flex:0 1 min(58%,1020px); aspect-ratio:2000 / 340; min-width:0; }
.gpu-bild svg{ width:100%; height:100%; display:block; }
.gpu-b-text text{ fill:#e8e8f2; font-size:46px; font-weight:700; letter-spacing:.055em; }
.gpu-b-marke{ font-size:19px; font-weight:700; letter-spacing:.24em; text-anchor:middle; opacity:.75; }

/* Der Luefter dreht um seine Nabe. transform-box:view-box heisst: die Achse
   liegt im Koordinatensystem der Zeichnung - genau dort, wo die Nabe sitzt.
   Mit fill-box waere es die Mitte des umschliessenden Rechtecks der Blaetter,
   und das Rad wuerde eiern (dieselbe Falle wie in FIX351). */
.gpu-luefter{ animation:gpu-drehen 3.2s linear infinite; transform-box:view-box; }
@keyframes gpu-drehen{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .gpu-luefter{ animation:none; } }

@media (max-width:1250px){
  .gpu-kopf{ flex-direction:column; align-items:stretch; gap:0; }
  .gpu-kopf .tun-kopf-inner{ min-height:0; }
  .gpu-bild{ flex:none; width:100%; margin-top:14px; border-radius:10px; overflow:hidden; }
}
/* Schmaler waere der Schriftzug nur noch ein Strich - die Karte bleibt, weil
   sie als Zeichnung beliebig klein noch erkennbar ist. */
@media (max-width:820px){ .gpu-b-text{ display:none; } }

/* --- Hinweisbalken -------------------------------------------------- */
.gpu-hinweis{ display:flex; gap:13px; align-items:flex-start; padding:13px 16px; border-radius:12px;
  background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.32); }
.gpu-hinweis svg{ width:22px; height:22px; flex:none; color:#fbbf24; margin-top:1px; }
.gpu-hinweis b{ display:block; color:#fbbf24; font-size:14px; margin-bottom:3px; }
.gpu-hinweis span{ display:block; color:var(--text-dim); font-size:13px; line-height:1.55; }
.gpu-hinweis code{ color:#c9b8ff; font-family:Consolas,Menlo,monospace; font-size:12.5px; }

/* --- Gitter --------------------------------------------------------- */
.gpu-gitter{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:start; }
.gpu-kurvenkarte{ grid-column:span 2; }
.gpu-stapel{ grid-column:span 2; display:flex; flex-direction:column; gap:14px; }
.gpu-karte{ min-width:0; }
.gpu-karte h3{ margin:0 0 12px; }
.gpu-leer{ font-size:13px; line-height:1.55; }

@media (max-width:1500px){
  .gpu-gitter{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gpu-kurvenkarte, .gpu-stapel{ grid-column:span 2; }
  .gpu-stapel{ flex-direction:row; }
  .gpu-stapel > *{ flex:1 1 0; min-width:0; }
}
@media (max-width:900px){
  .gpu-gitter{ grid-template-columns:1fr; }
  .gpu-kurvenkarte, .gpu-stapel{ grid-column:span 1; }
  .gpu-stapel{ flex-direction:column; }
}

/* --- Kachel: Status -------------------------------------------------- */
.gpu-status-inner{ display:flex; align-items:center; gap:14px; }
.gpu-ring{ width:46px; height:46px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; }
.gpu-ring svg{ width:24px; height:24px; }
.gpu-ring.gruen{ background:rgba(34,197,94,.14); color:#4ade80; border:1px solid rgba(34,197,94,.42); }
.gpu-ring.gelb{ background:rgba(245,158,11,.14); color:#fbbf24; border:1px solid rgba(245,158,11,.42); }
.gpu-ring.rot{ background:rgba(239,68,68,.14); color:#f87171; border:1px solid rgba(239,68,68,.42); }
.gpu-status-text b{ display:block; font-size:19px; font-weight:700; }
.gpu-status-text small{ display:block; color:var(--text-dim); font-size:12.5px; margin-top:3px; line-height:1.5; }

/* --- Kachel: Grafikkarte --------------------------------------------- */
.gpu-modell{ display:flex; align-items:center; gap:13px; }
.gpu-marke{ flex:none; padding:7px 11px; border-radius:9px; border:1px solid;
  font-size:12px; font-weight:700; letter-spacing:.06em; }
.gpu-modell b{ display:block; color:#fff; font-size:15px; line-height:1.35; }
.gpu-modell small{ display:block; color:var(--text-dim); font-size:12.5px; margin-top:3px; }

/* --- Beschriftung/Wert ----------------------------------------------- */
.gpu-kv{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:5px 0;
  border-bottom:0; font-size:12.5px; }
.gpu-kv span{ color:var(--text-dim); }
.gpu-kv b{ text-align:right; color:var(--text); font-weight:600; }

/* --- Kachel: Auslastung ---------------------------------------------- */
.gpu-aus-kopf{ display:flex; align-items:flex-end; gap:14px; margin-bottom:8px; }
.gpu-aus-zahl{ flex:none; font-size:30px; font-weight:700; color:#fff; line-height:1.1; letter-spacing:-.02em; }
.gpu-funke{ flex:1 1 auto; min-width:0; height:34px; }
.gpu-funke svg{ width:100%; height:34px; display:block; }
.gpu-funke-leer{ color:var(--text-dim); font-size:11px; text-align:right; padding-top:14px; }

/* --- Kachel: Schalter ------------------------------------------------ */
.gpu-schaltzeile{ display:flex; align-items:flex-start; gap:12px; padding:8px 0; }
.gpu-schaltzeile + .gpu-schaltzeile{ border-top:1px solid #161626; }
.gpu-schaltzeile b{ display:block; color:var(--text); font-size:13.5px; font-weight:600; }
.gpu-schaltzeile small{ display:block; color:var(--text-dim); font-size:12px; margin-top:2px; line-height:1.45; }
.gpu-schalter{ margin-top:2px; }

/* --- Kachel: Fähigkeiten --------------------------------------------- */
.gpu-faehig{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.gpu-fspalte h4{ margin:0 0 9px; font-size:12px; font-weight:600; color:var(--text-dim);
  text-transform:none; letter-spacing:0; }
.gpu-fzeile{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 0; font-size:12.5px; }
.gpu-haken{ width:16px; height:16px; flex:none; }
.gpu-haken.ja{ color:#4ade80; }
.gpu-haken.nein{ color:#5a5a74; }

/* --- Kachel: Kurve ---------------------------------------------------- */
.gpu-kurve-kopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.gpu-legende{ display:flex; gap:14px; font-size:12px; color:var(--text-dim); }
.gpu-legende span{ display:flex; align-items:center; gap:6px; }
.gpu-legende i{ width:8px; height:8px; border-radius:50%; display:block; }
/* Die Achsenbeschriftung steht als Text NEBEN der Zeichnung, nicht darin: die
   Zeichnung wird in der Breite gestreckt (preserveAspectRatio="none"), Schrift
   darin waere dadurch verzerrt. Beide liegen in einer Flexzeile und nicht
   uebereinander - absolut positioniert braeuchte die Beschriftung einen
   positionierten Vorfahren, und den haette sie hier nicht sicher. */
.gpu-kurve-zeile{ display:flex; gap:8px; align-items:stretch; margin-top:12px; }
.gpu-kurve-achse{ flex:none; width:34px; height:200px; display:flex; flex-direction:column;
  justify-content:space-between; font-size:10.5px; color:var(--text-dim); text-align:right; }
.gpu-kurve{ flex:1 1 auto; min-width:0; height:200px; border-left:1px solid #1f1f34; }
.gpu-kurve-svg{ width:100%; height:200px; display:block; }
.gpu-kurve-fuss{ display:flex; justify-content:space-between; margin-left:42px; margin-top:6px;
  font-size:10.5px; color:var(--text-dim); }
.gpu-kurve-leer{ display:flex; align-items:center; justify-content:center; height:200px;
  font-size:13px; text-align:center; padding:0 20px; line-height:1.5; }

/* --- Kachel: Verwendet von -------------------------------------------- */
.gpu-nzeile{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 0; font-size:12.5px; }
.gpu-nzeile + .gpu-nzeile{ border-top:1px solid #161626; }
.gpu-nname{ color:var(--text); }

/* --- Kachel: Einstellungen -------------------------------------------- */
/* Umbrechen erlaubt: wird die Kachel schmal, rutscht die Auswahl unter ihre
   Beschriftung, statt sie abzuschneiden. */
.gpu-ezeile{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 0; font-size:12.5px; flex-wrap:wrap; }
.gpu-ezeile + .gpu-ezeile{ border-top:1px solid #161626; }
.gpu-ezeile > span{ color:var(--text-dim); flex:1 1 92px; min-width:0; }
/* width:auto hebt das width:100% von .tun-wahl auf - sonst waere die Auswahl
   so breit wie die Zeile und ihre Beschriftung muesste immer darueber. */
.gpu-wahl{ flex:0 1 auto; width:auto; height:32px; font-size:12.5px; min-width:118px; max-width:100%; }
.gpu-zahl{ flex:none; height:32px; width:70px; font-size:12.5px; text-align:center; }

/* --- Kachel: Aktionen -------------------------------------------------- */
.gpu-aktionen{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.gpu-akt{ justify-content:flex-start; font-size:12.5px; }
.gpu-akt svg{ width:16px; height:16px; flex:none; }
.gpu-nuradmin{ margin-top:10px; font-size:12px; }
.gpu-testergebnis{ margin-top:12px; padding:10px 12px; border-radius:10px; font-size:12.5px; }
.gpu-testergebnis.ok{ background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.34); }
.gpu-testergebnis.fehler{ background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.34); }
.gpu-testergebnis b{ display:block; color:#fff; margin-bottom:3px; }
.gpu-testergebnis span{ color:var(--text-dim); }
.gpu-testergebnis code{ display:block; margin-top:4px; color:#f8a5a5; font-family:Consolas,Menlo,monospace;
  font-size:11.5px; white-space:pre-wrap; word-break:break-word; }
@media (max-width:520px){ .gpu-aktionen{ grid-template-columns:1fr; } }

/* --- Kachel: Ereignisse ------------------------------------------------ */
.gpu-erz{ display:flex; align-items:baseline; gap:8px; padding:5px 0; font-size:12.5px; }
.gpu-erz + .gpu-erz{ border-top:1px solid #161626; }
.gpu-erzeit{ flex:none; color:var(--text-dim); font-family:Consolas,Menlo,monospace; font-size:11.5px; }
.gpu-ertext{ color:var(--text); min-width:0; }

/* FIX363: Der Wortlaut der FFmpeg-Meldung in der Statuskachel. Schmal und umbrechend -
   die Meldung ist oft lang und darf die Kachel nicht auseinanderziehen. */
.gpu-grund{ margin-top:12px; padding-top:11px; border-top:1px solid #1f1f34; }
.gpu-grund span{ display:block; font-size:11.5px; color:var(--text-dim); margin-bottom:5px; }
.gpu-grund code{ display:block; font-family:Consolas,Menlo,monospace; font-size:11.5px; line-height:1.5;
  color:#f8a5a5; white-space:pre-wrap; word-break:break-word; max-height:96px; overflow:auto; }

/* FIX364: Pfadfeld fuer ein eigenes FFmpeg. Eigene Zeile statt Beschriftung/Wert nebeneinander -
   ein Windows-Pfad ist zu lang fuer eine halbe Kachelbreite. */
.gpu-ffmpeg{ padding:10px 0 2px; border-top:1px solid #161626; }
.gpu-ffmpeg > span{ display:block; color:var(--text-dim); font-size:12.5px; }
.gpu-ffmpeg > small{ display:block; color:var(--text-dim); font-size:11px; margin-top:2px;
  opacity:.8; word-break:break-all; }
.gpu-ffmpeg-zeile{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.gpu-ffmpeg-zeile input{ flex:1 1 150px; min-width:0; height:32px; padding:0 10px; border-radius:9px;
  background:#0f0f1c; border:1px solid var(--card-border); color:var(--text);
  font-family:Consolas,Menlo,monospace; font-size:11.5px; }
.gpu-ffmpeg-zeile input:focus{ outline:0; border-color:var(--purple); }
.gpu-ffmpeg-zeile input:disabled{ opacity:.5; }
.gpu-ffmpeg-zeile .sys-btn{ flex:0 0 auto; height:32px; font-size:12px; }

/* FIX365: Aussteuerungsbalken mit Zielfenster.

   Bei allen anderen Balken gilt "mehr ist besser" - hier nicht: Der richtige Wert liegt
   zwischen 20 und 45 %, darueber uebersteuert der Wandler. Deshalb ist das Fenster im Balken
   markiert und der Wert bekommt seine Farbe danach, ob er darin liegt. */
.tun-balken.tun-mit-ziel{ position:relative; }
.tun-zielfenster{ position:absolute; left:20%; width:25%; top:0; bottom:0; display:block;
  background:rgba(34,197,94,.16); border-left:1px solid rgba(34,197,94,.45);
  border-right:1px solid rgba(34,197,94,.45); pointer-events:none; z-index:0; }
.tun-balken.tun-mit-ziel i{ position:relative; z-index:1; }
.tun-balken.tun-mit-ziel i.gut{ background:linear-gradient(90deg,#16a34a,#4ade80); }
.tun-balken.tun-mit-ziel i.gelb{ background:linear-gradient(90deg,#b45309,#fbbf24); }
.tun-balken.tun-mit-ziel i.rot{ background:linear-gradient(90deg,#b91c1c,#f87171); }
.tun-balken-zeile b small{ display:block; font-weight:400; font-size:10.5px;
  color:var(--text-dim); margin-top:1px; }

/* FIX398b: Direktadressen je Radiosender (radioExt) im Profil */
.prf-direkt{ margin:10px 0 14px; padding:10px 14px; border-radius:10px; background:rgba(124,77,255,.06); border:1px solid rgba(124,77,255,.3); }
.prf-direkt > summary{ cursor:pointer; color:#fff; font-size:13.5px; list-style:revert; }
.prf-direkt .prf-token-zeile{ grid-template-columns:220px minmax(0,1fr) auto; }
.prf-direkt .prf-token-zeile small .tag{ margin-left:6px; font-size:10.5px; padding:1px 6px; border-radius:6px; background:rgba(124,77,255,.25); color:#d9ccff; }
.prf-direkt code{ overflow-wrap:anywhere; }
@media (max-width:700px){ .prf-direkt .prf-token-zeile{ grid-template-columns:1fr; } }

/* FIX400: Diaschau des DAB-Senders rechts neben dem Namen in "Aktuell laeuft" */
.ik-now-folie { flex: 0 0 auto; margin-left: auto; height: clamp(72px, 26%, 108px); max-width: 42%; border-radius: 8px; overflow: hidden; background: #000; }
.ik-now-folie img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }
@media (max-width: 560px) { .ik-now-folie { display: none; } }

/* FIX400c: Diaschau im Titelfeld des Spielers - bleibt innerhalb der Rundung. */
.rad-player .rad-cover { overflow: hidden; border-radius: 16px; }
.rad-player .rad-cover > img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
/*
 * FIX400d: Zeigt der Sender eine Diaschau, sitzt das Bild ein Stueck kleiner im
 * Titelfeld: 3 px Rand ringsum (Kastenmass, Padding), eine 1 px feine Linie aussen
 * und eine um den Rand verkleinerte Rundung (16 - 3 = 13 px). Damit bleibt der
 * Rahmen sichtbar und die Ecke oben links ragt nicht mehr ueber die Kante.
 * Das Senderlogo (ohne data-folie) bleibt unveraendert.
 */
.rad-player .rad-cover[data-folie] {
  box-sizing: border-box;
  padding: 3px;
  background: #0b0b16;
  box-shadow: inset 0 0 0 1px rgba(124, 77, 255, .45), 0 0 40px rgba(124, 77, 255, .25);
}
.rad-player .rad-cover[data-folie] > img { border-radius: 13px; background: #000; }

/* FIX401a: "Jetzt laeuft" im DAB-Spieler rueckt von der letzten Detailzeile (Favorit) ab. */
#dab-current-section { margin-top: 18px; }

/* FIX404: Suche und Filter ueber den Direktadressen */
.prf-direkt-suche { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }
.prf-direkt-suche input[type="search"] { flex: 1 1 220px; min-width: 160px; }
.prf-filter.aktiv { background: var(--purple); color: #fff; border-color: var(--purple); }

/* ===================================================================
   FIX509 - Einstellungen > Anzeigegroesse
   =================================================================== */
.anz-card { max-width: 760px; }
#anzeige-diagnose { max-width: 760px; }   /* FIX550: Geraete-Werte oben auf der Seite Anzeige */
.anz-zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.anz-knopf { min-width: 150px; padding: 14px 18px; font-size: 16px; }
.anz-wert { text-align: center; }
.anz-wert span { font-size: 44px; font-weight: 800; color: #fff; letter-spacing: -1px; }
.anz-stufe { color: var(--muted, #9a9ab5); font-size: 13px; margin-top: 2px; }
.anz-vorwahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.anz-vorwahl button { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--card-border); background: #16162A; color: #d8d8ea; cursor: pointer; font-size: 14px; }
.anz-vorwahl button.aktiv { background: #7C4DFF; border-color: #7C4DFF; color: #fff; }
.anz-hinweis { color: var(--muted, #9a9ab5); font-size: 13px; line-height: 1.5; margin-top: 16px; }
/* FIX550: Schmale Bildschirme (Handy hochkant) - die Knoepfe teilen sich die Breite, statt mit
   150 px Mindestbreite rechts aus der Karte zu laufen; "100 %" bleibt in einer Zeile. */
@media (max-width: 600px) {
  .anz-zeile { gap: 10px; }
  .anz-knopf { min-width: 0; flex: 1 1 0; padding: 12px 8px; font-size: 15px; white-space: nowrap; }
  .anz-wert { flex: 0 0 auto; }
  .anz-wert span { font-size: 34px; white-space: nowrap; }
}

/* FIX512: CSS-zoom im Browser - vh zoomt mit, deshalb hier gegenrechnen. */
html.ik-zoom .sidebar { height: calc(100vh / var(--ik-zoom, 1)); }
html.ik-zoom .main-scroll { height: calc(100vh / var(--ik-zoom, 1)); }
html.ik-zoom .ltv-wrap { height: calc(100vh / var(--ik-zoom, 1) - 134px); }   /* FIX524 */
html.ik-zoom .rad-wrap { height: calc(100vh / var(--ik-zoom, 1) - 108px); }

/* ===================================================================
   FIX526 - App-Update der Android-TV-App (Seite + Band beim Start)
   =================================================================== */
.apu-card { max-width: 760px; }
.apu-zeile { display: flex; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--card-border, #22223a); }
.apu-k { flex: 0 0 150px; color: var(--muted, #9a9ab5); font-size: 13px; }
.apu-w { font-size: 18px; font-weight: 700; color: #fff; }
.apu-w small { font-weight: 400; color: var(--muted, #9a9ab5); font-size: 13px; }
.apu-neu { color: #7CFFB2; }
.apu-schlecht { color: #ff8a80 !important; }
.apu-anmerkung { margin-top: 12px; color: #d8d8ea; font-size: 14px; line-height: 1.5; white-space: pre-line; }
.apu-stand { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: #16162A; color: #d8d8ea; font-size: 14px; line-height: 1.5; }
.apu-knoepfe { margin-top: 16px; display: flex; gap: 10px; }
.apu-jetzt { padding: 14px 22px; font-size: 16px; }
.apu-hinweis { color: var(--muted, #9a9ab5); font-size: 13px; line-height: 1.5; margin-top: 16px; }
.apu-leer { padding: 20px; color: var(--muted, #9a9ab5); }

/* Das Band: unten quer, ueber allem, aber nicht ueber Dialogen (Overlays liegen bei 1000+). */
.apu-band { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px; background: #1b1b33; border-top: 2px solid #7C4DFF; color: #d8d8ea; font-size: 15px; box-shadow: 0 -6px 24px rgba(0,0,0,.45); }
.apu-band[hidden] { display: none !important; }
.apu-band-text { flex: 1 1 auto; min-width: 0; line-height: 1.4; }
.apu-band-text b { color: #fff; }
.apu-band-stand { font-size: 13px; color: var(--muted, #9a9ab5); margin-top: 3px; }
.apu-band-knoepfe { display: flex; gap: 10px; flex: 0 0 auto; }
.apu-band .btn, .apu-band .ik-outline-btn { padding: 10px 18px; font-size: 15px; }
html.ik-tv .apu-band { padding: 16px 28px; font-size: 18px; }
html.ik-tv .apu-band .btn, html.ik-tv .apu-band .ik-outline-btn { padding: 12px 24px; font-size: 18px; }

/* ===================================================================
   FIX575 - Einstellungen > HTTPS (js/https-einstellungen.js)
   Aus dem Management (HttpsPage.css) uebernommen, auf die Farben hier umgestellt.
   =================================================================== */
.https-kopf{ min-height:0; }
.https-kopf-rechts{ margin-left:auto; }
.https-text{ margin:0 0 12px; }
.https-link{ margin-top:12px; text-decoration:none; }
.https-formular{ display:flex; flex-direction:column; gap:12px; margin:6px 0 14px; }
.https-formular label:not(.upd-check){ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-dim); }
.https-formular input:not([type='checkbox']), .https-formular textarea{
  padding:0 12px; border-radius:9px; background:#0f0f1c; border:1px solid var(--card-border); color:var(--text); font-size:14px; font-family:inherit; }
.https-formular input:not([type='checkbox']){ height:40px; }
.https-formular textarea{ padding:10px 12px; resize:vertical; font-size:13.5px; line-height:1.5; }
.https-formular input:focus, .https-formular textarea:focus{ outline:0; border-color:var(--purple); }
.https-formular .upd-check{ font-size:12.5px; color:var(--text-dim); line-height:1.4; }
.https-knoepfe{ display:flex; gap:10px; }
.https-knoepfe .upd-btn.outline{ width:160px; flex:none; }
.https-status{ margin-top:14px; }
.https-spinner{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(124,77,255,.3); border-top-color:#b39dff; flex:none; animation:https-dreh 1s linear infinite; }
@keyframes https-dreh{ to{ transform:rotate(360deg); } }
.https-liste{ display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.https-zert{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 12px; border-radius:9px; background:#0f0f1c; border:1px solid var(--card-border); }
.https-zert--aktiv{ border-color:rgba(124,77,255,.6); }
.https-zert-haupt{ flex:1; min-width:200px; }
.https-zert-haupt b{ display:block; font-size:13px; color:#fff; word-break:break-all; }
.https-zert-haupt small{ display:block; font-size:11.5px; color:var(--text-dim); margin-top:2px; }
.https-anleitung{ margin-top:12px; font-size:13px; color:var(--text-dim); }
.https-anleitung summary{ cursor:pointer; color:#b39dff; }
.https-anleitung ol{ margin:10px 0 0; padding-left:20px; line-height:1.6; }
.https-anleitung p{ margin:8px 0 0; line-height:1.6; }
.https-anleitung code{ background:#0f0f1c; border:1px solid var(--card-border); border-radius:5px; padding:1px 5px; font-size:12px; }
.https-anleitung .upd-log{ margin-top:8px; }
.https-unterkopf{ font-size:14px; font-weight:600; color:#fff; margin:18px 0 8px; }
@media (max-width:700px){ .https-knoepfe{ flex-direction:column; } .https-knoepfe .upd-btn.outline{ width:100%; } }

/* ===================================================================
   FIX578 - Einstellungen > Senderlogos (js/logo-bibliothek.js)
   =================================================================== */
.lgb-ordner{ font-family:Consolas,Menlo,monospace; font-size:12px; word-break:break-all; text-align:right; }
.lgb-drop{ display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; text-align:center; margin-top:14px; padding:18px; border:2px dashed #2a2a44; border-radius:12px; background:#0f0f1c; cursor:pointer; transition:.15s; }
.lgb-drop.aktiv, .lgb-drop:hover{ border-color:var(--purple); background:rgba(124,77,255,.08); }
.lgb-drop b{ color:#fff; font-size:14px; } .lgb-drop span{ color:var(--text-dim); font-size:12.5px; }
.lgb-werkzeug{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:6px; }
.lgb-werkzeug .upd-filter{ margin:0; }
.lgb-suche{ height:34px; min-width:200px; flex:1; max-width:320px; padding:0 12px; border-radius:8px; background:#0f0f1c; border:1px solid var(--card-border); color:var(--text); font-family:inherit; font-size:13px; }
.lgb-suche:focus{ outline:0; border-color:var(--purple); }
.lgb-liste{ display:flex; flex-direction:column; }
.lgb-zeile{ display:flex; align-items:center; gap:12px; padding:8px 4px; border-bottom:1px solid #1a1a2c; flex-wrap:wrap; }
.lgb-logo{ width:64px; height:40px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:7px; background:#0f0f1c; border:1px solid var(--card-border); overflow:hidden; }
.lgb-logo img{ max-width:60px; max-height:36px; object-fit:contain; }
.lgb-leer{ color:var(--text-dim); }
.lgb-name{ flex:1; min-width:180px; }
.lgb-name b{ display:block; font-size:13.5px; color:#fff; font-weight:600; }
.lgb-name small{ display:block; font-size:11.5px; color:var(--text-dim); margin-top:1px; }
.lgb-aktionen{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.lgb-vorschlaege{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.lgb-vorschlaege small{ color:var(--text-dim); font-size:11.5px; }
.lgb-bilder{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.lgb-bild{ position:relative; display:flex; flex-direction:column; gap:4px; padding:10px; border-radius:10px; background:#0f0f1c; border:1px solid var(--card-border); min-width:0; }
.lgb-bild-vorschau{ height:64px; display:flex; align-items:center; justify-content:center; }
.lgb-bild-vorschau img{ max-width:100%; max-height:60px; object-fit:contain; }
.lgb-bild b{ font-size:12.5px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lgb-bild small{ font-size:11px; color:var(--text-dim); }
.lgb-bild .upd-mini{ position:absolute; top:6px; right:6px; height:26px; padding:0 8px; }
@media (max-width:700px){ .lgb-suche{ max-width:none; } .lgb-aktionen{ width:100%; } }

/* FIX600: Senderlogos - Logo von Hand waehlen (Auswahl aus dem Logo-Ordner) */
.lgb-waehler{ position:fixed; inset:0; z-index:9000; background:rgba(5,5,12,.72); display:flex; align-items:center; justify-content:center; padding:16px; }
.lgb-w-fenster{ width:min(980px,100%); max-height:min(86vh,900px); display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:14px; background:var(--card-bg); border:1px solid var(--card-border); box-shadow:0 20px 60px rgba(0,0,0,.6); }
.lgb-w-kopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.lgb-w-kopf b{ display:block; color:#fff; font-size:15px; }
.lgb-w-kopf small{ display:block; color:var(--text-dim); font-size:12px; margin-top:3px; }
.lgb-w-kopf .lgb-ordner{ text-align:left; }
.lgb-w-werkzeug{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.lgb-w-neu{ cursor:pointer; }
.lgb-w-bilder{ overflow:auto; min-height:120px; padding:2px; }
.lgb-w-bild{ cursor:pointer; text-align:left; font:inherit; color:inherit; }
.lgb-w-bild:hover, .lgb-w-bild:focus-visible{ border-color:var(--purple); outline:0; background:rgba(124,77,255,.08); }
.lgb-w-bild.aktuell{ border-color:var(--purple); }