/* ===================================================================
   FIX440 - Ausfahrbare Seitenleiste auf SCHMALEN BILDSCHIRMEN.

   WARUM ES DIESE DATEI GIBT
   -------------------------
   css/mobil.css hat die ausfahrbare Leiste bereits gebaut - aber jede
   Regel dort steht in

       @media (pointer: coarse) and (max-width: 1250px)

   und "pointer: coarse" trifft nur auf Finger zu. Ein MacBook mit
   Touchpad meldet "pointer: fine" und erfuellt die Bedingung nie. Auf
   einem 1440 x 900 grossen Bildschirm blieb die Leiste deshalb fest
   stehen, obwohl genau dort der Platz fehlt.

   GEMESSEN IM BROWSER (Radioseite, 1440 x 900, Chromium - nicht gerechnet;
   tests/schmale-leiste-fix440.cjs misst das bei jedem Lauf nach):
     .rad-player mit fester Leiste        580 px
     .rad-player mit eingefahrener        834 px
     Gewinn                              +254 px  (+44 %)
     Mindestmass von .rad-player          460 px

   Es passte also vorher gerade eben - mit 120 px Luft. Unterhalb von rund
   1310 px Fensterbreite faengt die Seite ausserdem an, waagerecht zu
   scrollen (.rad-wrap hat min-width:1000px). Die 254 px sind genau die
   Breite der Leiste; mehr ist hier nicht zu holen und weniger waere zu
   wenig.

   WAS HIER BEWUSST NICHT DRINSTEHT
   --------------------------------
   Die uebrigen Abschnitte aus mobil.css - 44-px-Tastflaechen, dvh statt
   vh, abgeschalteter Schwebezustand, Randbereiche des Geraetes - gehoeren
   zum Finger, nicht zum schmalen Bildschirm. Wer eine Maus hat, trifft
   auch eine Listenzeile, und ein Fenster hat keine Kameraaussparung.
   Uebernommen wird ausschliesslich die Mechanik der Leiste selbst.

   KEIN JAVASCRIPT
   ---------------
   js/mobil.js fragt nirgends nach dem Geraet; es schaltet nur die Klasse
   "mobil-menue-auf" am <body> um und schliesst die Leiste nach einem
   Menueklick, bei Escape und beim Klick auf die Abdunklung. Was davon
   sichtbar wird, entscheidet allein die Medienabfrage. Diese Datei
   braucht deshalb keine einzige Zeile Skript.

   DIE GRENZE
   ----------
   1919 px, also "alles unterhalb von 1080p". Ab 1920 bleibt es beim
   Schreibtisch-Layout - dort hat der Spieler 1038 px und die Leiste
   stoert niemanden. Die Zahl steht genau einmal, in der Zeile
   darunter; sie laesst sich also mit einem Wert verschieben.

   Geladen NACH mobil.css. Die beiden Baender koennen sich nicht in die
   Quere kommen: dieses verlangt "fine", jenes "coarse".
   =================================================================== */

@media (pointer: fine) and (max-width: 1919px) {

  /* -----------------------------------------------------------------
     1. DIE LEISTE FAEHRT AUS DEM BILD.

     Sie ist in index.html bereits "position: fixed" und 254 px breit -
     hier wird sie nur hinausgeschoben. Der Inhalt rueckt nach (Punkt 2),
     denn anders als auf dem Handy ist hier Platz, der sich lohnt.
     ----------------------------------------------------------------- */
  .sidebar {
    transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.4, 0, .2, 1);
    /* Die Kopfleiste ist sticky mit z-index:100. Ohne einen hoeheren
       Wert schneidet sie der ausgefahrenen Leiste den Kopf ab. Dialoge
       liegen weiter darueber (ab 500). */
    z-index: 120;
    overflow-y: auto;
  }

  body.mobil-menue-auf .sidebar {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0, 0, 0, .65);
  }

  /* -----------------------------------------------------------------
     2. DER INHALT BEKOMMT DIE 254 PX.
     ----------------------------------------------------------------- */
  .main-scroll { margin-left: 0; }

  /* -----------------------------------------------------------------
     3. ABDUNKLUNG HINTER DER AUSGEFAHRENEN LEISTE.

     Schliesst bei Klick (js/mobil.js). Etwas heller als auf dem Handy:
     Dort verdeckt die Leiste zwei Drittel des Bildschirms und der Rest
     soll zuruecktreten - hier bleibt der groesste Teil der Seite
     sichtbar, und ein zu dunkler Schleier wirkt wie ein Fehler.
     ----------------------------------------------------------------- */
  .mobil-abdunkeln {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .42);
    z-index: 110;
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s;
  }
  body.mobil-menue-auf .mobil-abdunkeln {
    opacity: 1;
    pointer-events: auto;
  }

  /* -----------------------------------------------------------------
     4. DIE MENUETASTE.

     Steht in index.html auf display:none und wird hier eingeschaltet.
     Anders als in mobil.css bekommt sie einen Schwebezustand - hier gibt
     es einen Zeiger, der darueber stehen kann.
     ----------------------------------------------------------------- */
  .mobil-menue {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card-bg);
    color: #fff;
    padding: 0;
    cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .mobil-menue:hover {
    background: var(--purple);
    border-color: var(--purple);
  }
  .mobil-menue:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
  }
  .mobil-menue svg { width: 18px; height: 18px; }
}

/* -------------------------------------------------------------------
   BEWEGUNG ABSCHALTBAR. Wer im Betriebssystem "Bewegung reduzieren"
   eingestellt hat, bekommt die Leiste ohne Fahrt.
   ------------------------------------------------------------------- */
@media (pointer: fine) and (max-width: 1919px) and (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
  .mobil-abdunkeln { transition: none; }
}


/* ===================================================================
   FIX442 - DAS UKW-KOPFFENSTER ZIEHT SICH MIT DEM PLATZ ZUSAMMEN.

   WAS VORHER FALSCH WAR
   ---------------------
   FIX441 hat die Hoehe mit festen Deckeln in einem Band unterhalb von
   860 px Fensterhoehe erschlagen. Das sprang: bei 861 px die volle
   Groesse, bei 859 px ploetzlich klein - und dazwischen passierte gar
   nichts. Stufig statt stufenlos, und genau falsch herum: Der Block, der
   den meisten Platz frisst, wurde ueberhaupt nicht kleiner.

   GEMESSEN (UKW-Spieler, Hoehe je Block in px, vorher):

     Fenster       Platz   Kopf   Skala   VU-Reihe
     1920 x 1080    944     332    134      217
     1440 x  900    761     325    120      186
     1280 x  720    585     291     84      132

   Der verfuegbare Platz faellt um 359 px, das Kopffenster gibt 41 px ab.
   Es ist mit Abstand der groesste Posten und ruehrt sich praktisch nicht.
   Skala und VU-Reihe haben sich dagegen laengst angepasst.

   WAS JETZT PASSIERT
   ------------------
   Alles, was im Kopffenster Hoehe frisst, richtet sich nach der
   verfuegbaren Hoehe - stufenlos ueber clamp() und vh, ohne jeden
   Haltepunkt: das Logo, die Frequenzzahl, der Sendername, der
   Radiotext, die Innenabstaende. Dazu die beiden Bloecke darunter, die
   ihre Breite in Hoehe verwandeln (Skala und VU-Reihe) - sie bekommen
   einen Deckel, der ebenfalls an der Hoehe haengt statt an einer festen
   Zahl.

   Die Werte sind nicht geraten. Drei Saetze von Koeffizienten wurden im
   Browser ueber sechs Fenstergroessen durchgemessen; der sanfte Satz
   passte unterhalb von 820 px Hoehe noch immer nicht, der kraeftige
   schrumpfte mehr als noetig. Dieser hier ist der mittlere:

     Fenster       Platz   Logo  Freq   Kopf   Inhalt   Ergebnis
     1920 x 1080    944     189    56    301     944     passt
     1680 x 1000    861     175    52    281     861     passt
     1440 x  900    761     158    47    255     761     passt
     1440 x  820    681     144    43    234     681     passt
     1366 x  768    631     134    40    222     631     passt
     1280 x  720    585     126    37    210     585     passt

   AM PC AENDERT SICH ETWAS - UND ZWAR ABSICHTLICH
   -----------------------------------------------
   Bei 1920 x 1080 wird das Logo von 210 auf 189 px kleiner und die
   Frequenzzahl von 62 auf 56 px. Das ist kein Versehen: Gemessen lag der
   Inhalt dort bei 944 px auf 944 px Platz - die Seite war randvoll, ohne
   einen Pixel Reserve. Zehn Prozent Luft sind dort keine Einbusse.

   Der Finger bleibt aussen vor (pointer: fine): Fuer ihn gilt
   css/mobil.css mit eigenen Regeln fuer Logo und Schriftgroessen, und
   die duerfen hier nicht ueberschrieben werden.
   =================================================================== */

@media (pointer: fine) {

  /* ---- Das Logo ist der groesste Posten im Kopffenster -------------
     Es ist quadratisch (aspect-ratio:1), seine Breite ist also auch
     seine Hoehe. Deshalb haengt hier der groesste Hebel. */
  #page-radio-ukw #rad-cover-ukw { max-width: clamp(80px, 17.5vh, 210px); }

  /* ---- Die Frequenzzahl ---------------------------------------------
     Bisher nur an der Breite (4.4vw). Auf einem breiten, niedrigen
     Fenster - genau der Fall eines Notebooks - blieb sie dadurch gross,
     waehrend die Hoehe knapp war. min() nimmt jetzt, was kleiner ist. */
  #page-radio-ukw .rad-fm-freq .num { font-size: clamp(28px, min(4.4vw, 5.2vh), 62px); }

  #page-radio-ukw .rad-fm-name {
    font-size: clamp(14px, 1.7vh, 19px);
    /* Eine Mindesthoehe bleibt, sonst springt die Zeile, sobald ein
       Sendername kommt oder verschwindet. */
    min-height: clamp(18px, 2.2vh, 26px);
  }

  #page-radio-ukw .rad-fm-rt-text { font-size: clamp(12.5px, 1.5vh, 17px); }

  #page-radio-ukw .rad-fm-meta-row {
    padding: clamp(8px, 1.3vh, 16px) 18px;
    row-gap: clamp(7px, 1.15vh, 14px);
    margin-bottom: clamp(8px, 1.6vh, 20px);
  }
  #page-radio-ukw .rad-fm-rt-zeile { padding-top: clamp(6px, 1.15vh, 12px); }

  /* ---- Skala und VU-Reihe -------------------------------------------
     Beide haben ein festes Seitenverhaeltnis: Ihr Bild bzw. ihre Meter
     fuellen die Breite, die Hoehe folgt daraus. Mehr Platz zur Seite
     wird bei ihnen also zu weniger Platz nach unten. Der Deckel haengt
     deshalb an der Fensterhoehe - ein fester Wert wuerde sie auch auf
     grossen Schirmen klein halten.

     Gedeckelt wird die BREITE, nicht die Hoehe: max-height wuerde bei
     width:100% das Bild stauchen, das Seitenverhaeltnis bliebe nicht
     erhalten. */
  #page-radio-ukw .rad-fm-dial {
    max-width: min(100%, 82vh);
    padding: clamp(7px, 1.3vh, 16px);
    margin-bottom: clamp(8px, 1.6vh, 24px);
  }
  #page-radio-ukw .fm-meter-row {
    max-width: min(100%, 76vh);
    margin-bottom: clamp(8px, 1.6vh, 20px);
  }
}

/* ===================================================================
   FIX443 - ERSATZWEG FUER BROWSER OHNE CONTAINER-ABFRAGEN.

   WARUM
   -----
   Die UKW-Kopfzeile schaltet seit FIX421 ueber @container um - das gibt
   es erst ab Safari 16. Auf einem Mac mit Big Sur ist bei Safari 15.6
   Schluss, dort wird der ganze @container-Block stillschweigend
   uebersprungen. Das iPad merkt davon nichts (aktuelles Safari), ein
   aelterer Mac schon.

   GEMESSEN (Container-Abfragen kuenstlich abgeschaltet, Kopfzeile auf
   Ueberlauf geprueft):

     Fenster        mit @container      ohne @container
     1440 x 790     BREIT,  passt       BREIT,  passt      <- kein Unterschied
     1440 x 875     BREIT,  passt       BREIT,  passt      <- kein Unterschied
     1100 x 790     SCHMAL, passt       BREIT,  28 px Ueberlauf
      900 x 700     SCHMAL, passt       BREIT,  60 px Ueberlauf

   Auf einem 1440 px breiten Bildschirm faellt es also gar nicht auf -
   der Container liegt dort mit 786 px ohnehin ueber der Schwelle. Erst
   ein schmaler gezogenes Fenster faellt auf die Nase.

   WIE
   ---
   @supports prueft, ob der Browser container-type ueberhaupt kennt. Wenn
   nicht, wird dasselbe ueber die FENSTERbreite nachgebaut. Das ist
   groeber - das Fenster ist nicht die Spalte -, aber es trifft die
   Faelle, um die es geht. Browser mit @container sehen diesen Block nie.

   Die Umschaltpunkte sind GEMESSEN, nicht gerechnet. Der erste Anlauf
   ueber eine Formel (Fensterbreite minus Raender und Nachbarspalten)
   ergab 1352 px und lag daneben: Die Spalte schrumpft nicht gleichmaessig
   mit dem Fenster, weil .rad-wrap ein min-width:1000px hat und ab dort
   waagerecht gescrollt wird. Gemessene Paare Fenster -> Container:

     1440 -> 786    1360 -> 736    1300 -> 700    1100 -> 579
      1000 -> 498     900 -> 401     800 -> 304

   Daraus: Container 680 entspricht rund 1280 px Fenster, Container 430
   rund 930 px. Genau diese beiden Werte stehen unten - damit schalten
   beide Wege an derselben Stelle um.
   =================================================================== */

@supports not (container-type: inline-size) {

  @media (max-width: 1280px) {
    #page-radio-ukw .rad-fm-meta-row {
      grid-template-columns: 104px minmax(0, 1fr);
      grid-template-areas: "logo mitte" "rds rds" "rt rt";
      column-gap: 12px;
      /* Auch hier stufenlos statt fest - sonst baut der Kopf gemessen
         10 px hoeher als auf dem Weg mit Container-Abfragen. */
      row-gap: clamp(7px, 1.15vh, 12px);
      padding: clamp(8px, 1.3vh, 14px);
    }
    #page-radio-ukw #rad-cover-ukw { width: 104px; height: 104px; max-width: none; aspect-ratio: auto; }
    #page-radio-ukw .rad-fm-rds-box { border-top: 1px solid var(--card-border); padding-top: 10px; }
    /* Schriftgroessen NICHT festnageln: Die stufenlosen Regeln aus FIX442
       stehen weiter oben in dieser Datei und gelten hier genauso - ein
       fester Wert wuerde sie ueberschreiben und den Kopf gemessen 18 px
       hoeher machen als noetig. Nur die Obergrenze wird gesenkt. */
    #page-radio-ukw .rad-fm-freq .num { font-size: clamp(28px, min(3.4vw, 5.2vh), 48px); }
    #page-radio-ukw .rad-fm-freq .unit { font-size: 15px; }
    #page-radio-ukw .rad-fm-tune { width: 40px; height: 40px; }
    #page-radio-ukw .rad-fm-tune svg { width: 18px; height: 18px; }
  }

  @media (max-width: 930px) {
    #page-radio-ukw .rad-fm-meta-row { grid-template-columns: 72px minmax(0, 1fr); column-gap: 10px; padding: clamp(8px, 1.2vh, 12px); }
    #page-radio-ukw #rad-cover-ukw { width: 72px; height: 72px; }
    #page-radio-ukw .rad-fm-freq-row { gap: 8px; }
    #page-radio-ukw .rad-fm-freq .num { font-size: clamp(26px, min(3.4vw, 5vh), 40px); }
    #page-radio-ukw .rad-fm-name { font-size: clamp(14px, 1.7vh, 16px); }
    #page-radio-ukw .rad-fm-tune { width: 36px; height: 36px; }
    #page-radio-ukw .rad-fm-rds-grid { grid-template-columns: 62px minmax(0, 1fr); }
  }
}