/*
 * FIX472 - DARSTELLUNG AUF DEM FERNSEHER.
 *
 * Greift NUR, wenn <html> die Klasse ik-tv traegt. Die setzt
 * js/fernbedienung.js - automatisch bei einem erkannten Fernseher, per ?tv=1
 * oder spaetestens beim ersten Druck aufs Steuerkreuz. Auf jedem anderen
 * Geraet ist diese Datei wirkungslos.
 *
 * BEWUSST WENIG. Die Oberflaeche ist gebaut und eingerichtet; sie hier fuer
 * den Fernseher umzuformen hiesse, ein Layout zu aendern, das ich nicht am
 * Geraet sehen kann. Drei Dinge fehlen auf einem Fernseher wirklich, und nur
 * die stehen hier:
 *
 *   1. Ein SICHTBARER Fokus. Ohne ihn ist eine Fernbedienung unbenutzbar -
 *      man weiss nicht, was OK gerade tut. Das ist der eigentliche Grund
 *      fuer diese Datei.
 *   2. Ein Sicherheitsrand. Viele Fernseher beschneiden den Bildrand.
 *   3. Kein Mauszeiger.
 *
 * Alles Weitere - Schriftgroessen, Abstaende - erst, wenn Daniel es auf dem
 * A95K gesehen hat. Aus der Ferne daran zu drehen waere raten.
 */

/* ---- 1. Der Fokus ---- */

/*
 * Zwei Ringe uebereinander: aussen ein kraeftiger Rahmen, innen ein heller
 * Saum. Auf einem hellen Senderlogo verschwindet ein einzelner lila Rahmen
 * sonst, und auf dem dunklen Hintergrund verschwindet ein weisser.
 */
.ik-tv :focus,
.ik-tv :focus-visible {
    /* FIX509: schmaler (vorher 3 px Rahmen, 2 px Abstand, 6 px Schein) - Daniels Wunsch. */
    outline: 2px solid #7C4DFF !important;
    outline-offset: 1px;
    box-shadow: 0 0 0 3px rgba(124, 77, 255, .25),
                0 0 0 1px rgba(255, 255, 255, .55) inset !important;
    border-radius: 10px;
    /* Kein transition auf outline: Am Fernseher blaettert man schnell, und
       eine nachlaufende Animation macht den Fokus unleserlich. */
}

/* Der Browser zeichnet um Listeneintraege gern nur einen duennen Strich -
   auf drei Metern Abstand sieht man den nicht. */
.ik-tv .nav-item:focus,
.ik-tv .nav-subitem:focus,
.ik-tv [data-sender-id]:focus,
.ik-tv .sender-zeile:focus {
    background: #1C1636 !important;
}

/* ---- 2. KEIN Sicherheitsrand mehr (FIX482) ----
 *
 * Hier stand ein Innenabstand von 2,5 % am body. Er ist raus, und zwar aus
 * dem Grund, den Daniel genannt hat: Die Kopfleiste ist position:sticky
 * (app-overlays.css:321). Ein Abstand am body schiebt sie mit nach unten,
 * statt Platz fuer sie freizuhalten - sie sass danach zu tief.
 *
 * Der A95K beschneidet bei Apps ohnehin nichts. Der Rand hat also ein
 * Problem geloest, das es nicht gab, und dabei eines geschaffen. Sollte ein
 * anderer Fernseher wirklich beschneiden, gehoert das in die Viewport-Breite
 * und nicht ins Layout.
 */

/* ---- 3. Kein Mauszeiger ---- */
.ik-tv, .ik-tv * {
    cursor: none !important;
}

/*
 * Ein Fernseher rollt nicht mit der Maus. Die Rollbalken nehmen nur Platz weg
 * und zeigen dort einen Zustand an, den niemand anfassen kann.
 */
.ik-tv ::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/*
 * Weiches Rollen, damit der mittig gehaltene Fokus nicht springt. Wer das auf
 * einem langsamen Fernsehchip nicht will, schaltet es mit der Systemeinstellung
 * "Bewegung reduzieren" ab - deshalb die Abfrage.
 */
@media (prefers-reduced-motion: no-preference) {
    .ik-tv html, .ik-tv body {
        scroll-behavior: smooth;
    }
}

/* ===================================================================
   FIX481 - EIN FERNSEHER BRAUCHT KEINE SPIELERKNOEPFE.
   ===================================================================

   Am Rechner sind Abspielen, Lautstaerke und Vollbild sinnvoll. Am
   Fernseher sind sie dreifach im Weg: Die Fernbedienung hat eigene
   Tasten dafuer, die Lautstaerke regelt ohnehin der Fernseher, und
   jeder dieser Knoepfe ist ein weiteres Ziel, an dem das Steuerkreuz
   vorbei muss, bevor es beim naechsten Sender ankommt.

   Ausgeblendet wird mit display:none - damit sind sie auch fuer die
   Fernbedienung weg, denn die ueberspringt unsichtbare Elemente. */
.ik-tv .ltv-controls,
.ik-tv .rad-controls {
    display: none !important;
}

/* ===================================================================
   FIX482 - DER RAND AUF BODY WAR FALSCH.
   ===================================================================

   Hier stand ein Innenabstand auf <body> gegen Overscan. Das war aus
   zwei Gruenden falsch:

   1. Die Kopfleiste ist position:sticky (app-overlays.css:321). Ein
      Abstand am body schiebt sie mit nach unten, statt sie freizuhalten -
      sie sass danach zu tief und klebte an der falschen Kante.
   2. Der A95K beschneidet bei Apps ohnehin nichts. Der Rand hat also ein
      Problem geloest, das es nicht gab, und dabei eines geschaffen.

   Zurueckgenommen. Bleibt am Fernseher wirklich etwas ausserhalb, ist die
   richtige Stelle die Viewport-Breite, nicht ein Abstand im Layout.
   =================================================================== */

/* FIX481: Das Senderbanner im Vollbild - wie beim Fernseher. */
.ik-tv-banner {
    /*
     * FIX482: Das Vollbild wird auf dem <video> angefordert (livetv.js).
     * Dann liegt NUR dieses Element auf dem Schirm - ein Banner am body
     * waere unsichtbar. Deshalb haengt es sich zur Laufzeit in das
     * Vollbild-Element ein; absolut statt fest, damit es darin sitzt.
     */
    position: absolute;
    left: 4%; right: 4%; bottom: 6%;
    z-index: 2147483000;
    display: flex; align-items: center; gap: 20px;
    padding: 22px 32px;
    background: rgba(10, 10, 19, .93);
    border: 2px solid #23233A;
    border-radius: 20px;
    color: #E8E8F0;
    font-size: 26px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .6);
}
/* FIX497: Nummer mit "von 390" darunter, Logo direkt daneben, kein Hinweis rechts. */
.ik-tv-banner .nrblock { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 72px; }
.ik-tv-banner .nr { font-size: 44px; font-weight: 700; color: #7C4DFF; line-height: 1; }
.ik-tv-banner .gesamt { font-size: 15px; color: #6E6E8A; margin-top: 6px; white-space: nowrap; }
.ik-tv-banner img { width: 104px; height: 74px; object-fit: contain; border-radius: 10px; background: #16162A; margin-left: -8px; }
.ik-tv-banner .txt { flex: 1; min-width: 0; }
.ik-tv-banner .nm { font-size: 32px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ik-tv-banner .ep { font-size: 22px; color: #9A9AB8; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ik-tv-banner .hinweis { font-size: 14px; color: #7C4DFF; white-space: nowrap; margin-top: 4px; }
.ik-tv-banner .hinweis:empty { display: none; }

/* ===================================================================
   FIX489 - KEINE LAUTSTAERKE AM FERNSEHER.

   Am Fernseher regelt die Fernbedienung die Lautstaerke am Geraet; die
   Seite laeuft immer mit vollem Pegel (fernbedienung.js setzt ihn beim
   Start jedes Tons). Ein Regler, der auf 20 % steht und nichts bewirkt,
   sieht wie ein Defekt aus - deshalb sind alle Regler ausgeblendet:
   Radio (Satellit, DAB+, UKW, Internet) und der Schieber im Live-TV-Spieler.
   Die Stummtaste bleibt; sie tut, was sie sagt.
   =================================================================== */
.ik-tv .rad-volume-row,
.ik-tv .ltv-vol-slider,
.ik-tv #net-vol-pct {
    display: none !important;
}

/* FIX490: Jetzt / Danach im Vollbild-Banner. */
.ik-tv-banner .epg { margin-top: 8px; font-size: 21px; color: #C9C9DC; }
.ik-tv-banner .epg .jetzt, .ik-tv-banner .epg .danach {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ik-tv-banner .epg .lbl { color: #7C4DFF; font-weight: 700; margin-right: 6px; }
.ik-tv-banner .epg .zeit { color: #9A9AB8; margin-right: 10px; font-variant-numeric: tabular-nums; }
.ik-tv-banner .epg .titel { color: #E8E8F0; }
.ik-tv-banner .epg .balken { height: 5px; margin: 6px 0 8px; background: #23233A; border-radius: 3px; overflow: hidden; max-width: 900px; }
.ik-tv-banner .epg .fuellung { height: 100%; background: #7C4DFF; }
.ik-tv-banner .epg .keine { color: #6E6E8A; font-style: italic; }

/* ===================================================================
   FIX491 - DER FOKUS WAECHST LEICHT.

   Kodi hebt das ausgewaehlte Element neben dem Rahmen auch durch eine
   leichte Vergroesserung hervor; auf drei Metern sieht man das schneller
   als einen Rand. 3 % reichen, mehr schiebt die Nachbarn sichtbar. Nur auf
   Senderzeilen und Menuepunkten - ein vergroesserter Knopf in der Kopfleiste
   wuerde die Leiste sprengen. Keine Uebergangsanimation: Am Fernseher
   blaettert man schnell.
   =================================================================== */
.ik-tv .ltv-row:focus,
.ik-tv .nav-item:focus,
.ik-tv .nav-subitem:focus {
    transform: scale(1.03);
    transform-origin: center left;
    position: relative;
    z-index: 3;
}

/* FIX502: Anzeige des Tonversatzes im Vollbild (Links/Rechts). */
.ik-tv-versatz {
    position: absolute; left: 50%; top: 6%; transform: translateX(-50%);
    z-index: 2147483001;
    padding: 14px 26px; border-radius: 14px;
    background: rgba(10, 10, 19, .93); border: 2px solid #23233A;
    color: #E8E8F0; font-size: 24px; white-space: nowrap;
}

/* ===================================================================
   FIX503 - NATIVER SPIELER HINTER DER WEBVIEW.

   Spielt die App das Bild (ExoPlayer hinter der WebView), muss die Seite
   dort DURCHSICHTIG sein, wo das Bild liegt - sonst malt sie ihren dunklen
   Grund ueber den Spieler. Durchsichtig sind: html/body (nur im nativen
   Modus, Klasse ik-nativ), der Videokasten und das <video>, sobald die App
   "spielt" meldet (davor zeigt es das Poster).
   =================================================================== */
html.ik-nativ, html.ik-nativ body { background: transparent !important; }
html.ik-nativ .ltv-video { background: transparent !important; }
html.ik-nativ video.ik-nativ-spielt { visibility: hidden; }
html.ik-nativ #ltv-live-video[data-ik-nativ] { background: transparent !important; }
/* FIX504: Sobald die App "spielt" meldet, verschwindet auch, was UNTER dem
   <video> liegt - der Platzhalter der Seite (SVG: Himmel, Raster, Kreis), die
   Wortmarke und das SD/HD-Abzeichen. Im WebView-Modus deckt das <video> sie zu;
   nativ ist es unsichtbar, und sie standen vor dem Spieler. Gilt auch im
   nachgestellten Vollbild (dort setzt die Kastenregel unten alles auf sichtbar,
   deshalb hier !important). */
html.ik-nativ .ltv-video.ik-nativ-spielt > svg,
html.ik-nativ .ltv-video.ik-nativ-spielt > svg *,
html.ik-nativ .ltv-video.ik-nativ-spielt > .ltv-video-badge,
html.ik-nativ .ltv-video.ik-nativ-spielt > .ltv-wordmark { visibility: hidden !important; }
/* FIX505: "> svg *" ist noetig, weil visibility VERERBT wird und ein Kind sie
   ueberstimmen darf: Die Vollbild-Kastenregel (.ik-vollbild-nativ-kasten *)
   setzte rect, circle und path des SVG wieder auf visible - das Raster stand
   im Vollbild vor dem Spieler, obwohl das <svg> selbst "hidden" war (Foto).

   FIX505: Zwischen Videokasten und body liegt die Spaltenkarte .ltv-player mit
   OPAKEM Hintergrund (#12121f). Der durchsichtige Kasten zeigte deshalb die
   Karte, nicht den Spieler dahinter - im kleinen Modus war er schwarz. Im
   nativen Modus ist die Karte durchsichtig; was dann durchscheint, ist der
   Grund der App (#0A0A13, dieselbe Farbe wie --bg), der Rand bleibt. */
html.ik-nativ .ltv-col.ltv-player { background: transparent !important; }
/* FIX506: Dasselbe fuer die Dashboard-Kachel "Jetzt laeuft", in die das <video>
   beim Verlassen der Live-TV-Seite umzieht (stream-exklusiv.js): der Platz
   #ik-live-host (#000) und die Karte #card-now (#12121f) lagen vor dem
   Spieler. Nur solange dort wirklich ein Bild laeuft (ik-live-aktiv). */
html.ik-nativ #ik-live-host { background: transparent !important; }
html.ik-nativ #card-now.ik-live-aktiv { background: transparent !important; }

/* Das nachgestellte Vollbild: der Kasten ueber allem, alles andere unsichtbar. */
html.ik-vollbild-nativ body { visibility: hidden; }
html.ik-vollbild-nativ .ik-vollbild-nativ-kasten,
html.ik-vollbild-nativ .ik-vollbild-nativ-kasten * { visibility: visible; }
html.ik-vollbild-nativ .ik-vollbild-nativ-kasten {
    position: fixed !important; left: 0 !important; top: 0 !important;
    width: 100vw !important; height: 100vh !important; max-width: none !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    z-index: 2147482000; background: transparent !important;
}
html.ik-vollbild-nativ .ik-vollbild-nativ-kasten video { width: 100%; height: 100%; }
/* Das Poster-<video> selbst bleibt beim Laden sichtbar; die Startflaeche ("VOX starten") nicht im Vollbild. */
html.ik-vollbild-nativ .ik-vollbild-nativ-kasten #ltv-startflaeche { visibility: hidden; }

/* ===================================================================
   FIX508/510/511 - UKW: Signal/Deviation-Umschalter am Fernseher.
   Der Knopf aus FIX408 sitzt in der Bedienleiste, und die ist am Fernseher
   ausgeblendet (FIX489). Deshalb ein eigener, nur im TV-Modus sichtbarer
   Umschalter - seit FIX511 als Pille in der Reihe mit RDS/TA/TP, Beschriftung
   = aktueller Stand ("Signal" / "Deviation"). Er ist ein normales Ziel fuer
   das Steuerkreuz. (FIX508 hatte ihn in den Messwerk-Kasten gesetzt und das
   Messwerk zusammengedrueckt, FIX510 als eigene Zeile darunter - beides nicht
   gewollt.)
   =================================================================== */
.ik-tv-nur { display: none; }
.ik-tv .ik-tv-nur { display: block; }
.ik-tv #ukw-meter-wechsel-tv {
    display: flex; cursor: pointer; color: #E8E8F4; background: #16162A;
    font: inherit; font-size: 11.5px; font-weight: 600; line-height: inherit;
}
.ik-tv #ukw-meter-wechsel-tv:focus { outline: 2px solid #7C4DFF; outline-offset: 1px; }

/* ===================================================================
   FIX509 - ANZEIGEGROESSE: DIE SEITE BEI SCHMALEREM VIEWPORT.

   Groesser heisst am Fernseher: schmalerer Viewport (1920 / Faktor, bis
   1280 bei 150 %). Zwei Dinge muessen dabei gelten:

   1. Die Seitenleiste bleibt IMMER stehen. schmal.css (pointer: fine,
      < 1920) und mobil.css (pointer: coarse, < 1250) fahren sie sonst aus
      dem Bild und stellen eine Menuetaste hin - am Fernseher gibt es keinen
      Zeiger, der darauf tippen koennte, und die Fernbedienung braucht die
      Leiste als festen Bereich (FIX491).
   2. Nichts ragt ueber den rechten Rand. Die Kopfleiste laesst in derselben
      Reihenfolge weg wie am Rechner (index.html), nur frueher, weil die
      Leiste 254 px des Viewports belegt; die Spalten der Live-TV- und
      Radioseiten werden schmaler statt ueberzustehen.

   Gemessen: tests/browser/anzeige-groesse-fix509.test.cjs prueft jede Stufe
   auf jeder Seite auf Ueberstand und waagerechten Rollbalken.

   FIX513: Dasselbe gilt fuer "html.ik-gross" - gesetzt von js/anzeige.js,
   sobald die Anzeigegroesse ueber 100 % steht, auf JEDEM Geraet. Im
   Windows-Client zoomt WebView2 echt (FIX512): Bei 120 % auf 1920 ist der
   Viewport 1600 CSS-Pixel breit - und schmal.css faehrt dann die Seitenleiste
   ein und stellt eine Menuetaste hin (FIX440, gedacht fuer kleine Fenster).
   Wer die Anzeige groesser stellt, will aber nicht, dass die Leiste
   verschwindet: Sie bleibt stehen, und die Spalten werden schmaler - genau
   wie am Fernseher.
   =================================================================== */
.ik-tv .sidebar, .ik-gross .sidebar { transform: none !important; box-shadow: none !important; width: 254px !important; min-width: 254px !important; }
.ik-tv .main-scroll, .ik-gross .main-scroll { margin-left: 254px !important; }
.ik-tv .mobil-menue, .ik-tv .mobil-abdunkeln, .ik-gross .mobil-menue, .ik-gross .mobil-abdunkeln { display: none !important; }

@media (max-width: 1750px) {
    .ik-tv .topbar-greeting, .ik-gross .topbar-greeting { display: none; }
}
@media (max-width: 1500px) {
    .ik-tv .metric-spark, .ik-gross .metric-spark { display: none; }
    .ik-tv .ltv-wrap, .ik-gross .ltv-wrap, .ik-tv .rad-wrap, .ik-gross .rad-wrap { min-width: 0; }
    .ik-tv .ltv-details, .ik-gross .ltv-details, .ik-tv .rad-details, .ik-gross .rad-details { width: 230px; }
    .ik-tv .ltv-senders, .ik-gross .ltv-senders, .ik-tv .rad-stations, .ik-gross .rad-stations { width: 230px; }
    .ik-tv .ltv-player, .ik-gross .ltv-player { min-width: 360px; }
    .ik-tv .rad-player, .ik-gross .rad-player { min-width: 380px; padding: 16px; }
}
@media (max-width: 1400px) {
    .ik-tv .metric-group[data-metric="gpu"], .ik-gross .metric-group[data-metric="gpu"], .ik-tv .metric-group[data-metric="net"], .ik-gross .metric-group[data-metric="net"] { display: none; }
    .ik-tv .topbar-datetime .date, .ik-gross .topbar-datetime .date { display: none; }
    .ik-tv .topbar-datetime, .ik-gross .topbar-datetime { min-width: auto; }
    .ik-tv .ltv-details, .ik-gross .ltv-details, .ik-tv .rad-details, .ik-gross .rad-details { width: 210px; }
    .ik-tv .ltv-senders, .ik-gross .ltv-senders, .ik-tv .rad-stations, .ik-gross .rad-stations { width: 220px; }
}
@media (max-width: 1300px) {
    .ik-tv .profile .n, .ik-gross .profile .n { display: none; }
    .ik-tv .search, .ik-gross .search { max-width: 220px; }
}

/* ===================================================================
   FIX515 - ANZEIGEGROESSE: DIE MESSWERKE SCHRUMPFEN NICHT ZUERST.

   Vom Rechner (Daniel): Beim Vergroessern wurden die Messwerke der
   Radioseiten (Signal/Quality, VU L/R, Tuning) mit der Spalte kleiner - das
   Gegenteil von "groesser". Gewuenscht: Sie behalten ihre Groesse und
   ruecken zusammen - bis auf 2 px von Messwerk zu Messwerk und bis an den
   Rand des Spielers. Erst wenn selbst das nicht reicht, werden sie kleiner.

   Grundmasse bei 100 % (gemessen, 1920 breit): 208 / 474 / 208 px in einer
   930-px-Zeile mit 20-px-Luecken. Hier werden sie zu festen Ausgangsbreiten
   (flex-basis); die Luecke ist mindestens 2 px und waechst mit dem Platz
   (space-between); die Zeile darf bis 2 px an den Kartenrand (negative
   Raender in die Innenabstaende hinein); flex-shrink greift erst danach.
   Damit der Spieler mehr Platz hat, sind Senderliste und Details in
   ik-gross auf 230 px (sonst 260/280), und der Spieler hat 8 px Innenabstand.
   =================================================================== */
.ik-gross .rad-stations { width: 230px; }
.ik-gross .rad-details { width: 230px; }
.ik-gross .rad-player { padding-left: 8px; padding-right: 8px; min-width: 0; }
.ik-gross .fm-meter-row {
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
    column-gap: 2px; width: calc(100% + 12px); max-width: none;
    margin-left: -6px; margin-right: -6px;   /* bis 2 px an den Kartenrand (8 px Innenabstand) */
    /* Ist Platz, bleiben die Messwerke in Grundgroesse und die Luecken wachsen
       (space-between); fehlt Platz, gehen die Luecken auf 2 px und erst dann
       schrumpfen die Messwerke (flex-shrink). */
}
.ik-gross .fm-meter-row > .vu-panel { flex: 0 1 auto; width: auto; min-width: 0; }
.ik-gross .fm-meter-row > .fm-aux-meter { flex-basis: 208px; }
.ik-gross .fm-meter-row > .rad-vu-panel { flex-basis: 474px; }
.ik-gross .fm-meter-row > .rad-vu-panel .rad-vu-meter { min-width: 0; }
/* Der UKW-Umschalter (FIX511) sitzt in der Pillenreihe, nicht hier. */