/* ============================================================
   SEITLICHES SCROLLEN — gilt fuer alle Bildschirmgroessen
   ------------------------------------------------------------
   Gefunden beim Handy-Test, war aber am Desktop sogar groesser.
   Die Seite liess sich seitlich schieben: am Handy um rund 70,
   bei 1280 Pixeln Breite um 230 Pixel.

   Ursache: .hero hat zwar overflow:hidden, aber kein
   position:relative. Dadurch bezieht sich das dekorative
   .hero::before mit inset:-30% -10% nicht auf den Kopfbereich,
   sondern auf die ganze Seite, und wird von dessen overflow gar
   nicht erfasst. Dasselbe gilt fuer den roten Schein .hero::after
   mit right:-18%. Die Animation "drift" schob das Ganze zusaetzlich
   ueber 26 Sekunden um 224 Pixel nach rechts.

   Nebenwirkung am Handy: Weil die Layoutbreite dadurch auf 470
   Pixel wuchs, wurden auch die fest positionierten Panels 470
   breit. Im Jahreskalender lag deshalb der Sonntag ausserhalb
   des Bildes.

   Eine Zeile behebt alles. Die Deko bleibt sichtbar, sie wird
   jetzt nur dort beschnitten, wo sie von Anfang an hingehoerte.
   ============================================================ */
.hero{ position: relative; }

/* ============================================================
   LUMI F1 — ENTWURF 3, Handy-Fassung
   ------------------------------------------------------------
   Ausgangslage: 7969 Pixel Gesamthöhe, also 9,4 Bildschirme.
   Allein die vier Event-Kacheln haben 1120 Pixel belegt.

   Ziel: deutlich kompakter, ohne dass eine Funktion oder das
   Design verloren geht. Alle Countdowns laufen weiter, alle
   Fenster öffnen weiter, die Bildsprache bleibt.
   ============================================================ */

@media (max-width: 700px){

  /* ---------- Grundabstände enger ---------- */
  section{ padding: 46px 0; }
  h2.section-title{
    font-size: 27px;
    margin-bottom: 18px;
    letter-spacing: -.03em;
  }

  /* ---------- Kopfbereich ---------- */
  .hero{ padding-top: 88px; padding-bottom: 14px; }
  .lockup{ gap: 14px; }
  .hero-logo{ width: 96px; }
  .claim{ font-size: 21px; line-height: 1.12; }

  /* Kennzahlen: Zahl über Beschriftung, enges Raster.
     Vorher überlappte das Durchschnittszeichen die 8.000, weil
     line-height:0 es aus der Zeile gehoben hat. */
  .kpi-strip{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    margin-top: 20px;
    padding-top: 14px;
    font-size: 12px;
  }
  .kpi-strip span{ display: flex; flex-direction: column; line-height: 1.25; }
  .kpi-strip b{ font-size: 18px; margin-right: 0; }
  .kpi-strip .avg{
    font-size: 1.25em;
    line-height: inherit;
    top: 0;
    margin-right: .08em;
  }

  /* ---------- Startampel ---------- */
  .lights{ gap: 9px; margin: 4px 0 20px; }
  .lights i{ width: 34px; height: 34px; }

  /* ============================================================
     EVENTS — der grösste Platzfresser
     Die erste Kachel bleibt gross, weil sie den nächsten Stream
     zeigt. Die drei danach werden kompakt: Tag und Uhrzeit in
     einer Zeile, Countdown auf Tage und Stunden verkürzt.
     Der Countdown läuft weiter, er zeigt nur weniger Einheiten.
     ============================================================ */
  .events-grid{ gap: 10px; }

  /* Geister-Startnummern gehörten zum verworfenen Startgrid */
  .ev-pos{ display: none !important; }

  .events-grid .ev{
    padding: 15px 16px 17px;
    min-height: 0;
  }
  .events-grid .ev h3{ font-size: 18px; line-height: 1.2; }
  .events-grid .ev-flag{ width: 50px; height: 34px; }
  .events-grid .ev-type{ padding: 5px 10px; }

  /* Tag und Uhrzeit nebeneinander statt untereinander */
  .events-grid .ev-when{
    flex-direction: row;
    align-items: baseline;
    gap: 9px;
    margin: 12px 0 5px;
    flex-wrap: wrap;
  }
  .events-grid .ev-day{ font-size: 12.5px; }
  .events-grid .ev-time{ font-size: 18px; }

  .events-grid .ev-count{ padding-top: 11px; gap: 14px; }
  .events-grid .ev-count b{ font-size: 20px; }
  .events-grid .ev-count span{ font-size: 9px; }

  /* Kacheln zwei bis vier: nur Tage und Stunden */
  .events-grid .ev:not(:first-child):not(.ev--islive) .ev-count div:nth-child(n+3){ display: none; }
  .events-grid .ev:not(:first-child):not(.ev--islive) .ev-count b{ font-size: 17px; }

  /* ---------- Kalender ---------- */
  .cal-row{ padding: 14px 10px; }
  .cal-date b{ font-size: 22px; }
  .cal-main h4{ font-size: 15px; }
  .cal-time{ font-size: 14px; }
  .opener{ margin-top: 18px; padding: 11px 20px; font-size: 12px; }

  /* ---------- Kanäle ----------
     Die Vorschau war ein 16:10-Bild und damit fast so hoch wie
     der Text darunter. Als flaches Band bleibt der Eindruck,
     kostet aber halb so viel Platz. */
  .soc-preview{ aspect-ratio: 2 / 1; }
  .soc-body{ padding: 14px 16px 16px; }
  .soc h4{ font-size: 16px; }
  .soc p{ font-size: 12.5px; }
  .soc-go{ margin-top: 10px; }
  .social-grid{ gap: 12px; }
  .pv-play{ width: 44px; height: 44px; }
  .pv-play--sm{ width: 38px; height: 38px; }

  /* ---------- Aktuelles ---------- */
  .news{ padding: 18px 16px; }
  .news h4{ font-size: 17px; }
  .news p{ font-size: 13.5px; }
  .news-grid{ gap: 12px; }

  /* ---------- Über uns ---------- */
  .big-quote{ font-size: 22px; margin-bottom: 26px; }
  .track-tl{ padding-top: 34px; margin-bottom: 30px; }
  .tl-step b{ font-size: 16px; }
  .tl-step p{ font-size: 12.5px; }
  .crew{ gap: 10px; }
  .driver{ min-height: 190px; padding: 14px 13px 13px; }
  .driver b{ font-size: 17px; }
  .shots{ gap: 12px; margin-top: 14px; }

  /* ---------- Partner ---------- */
  .numbers, .kpi-grid{ gap: 10px; }
  .kpi{ padding: 15px 14px; }
  .kpi b{ font-size: 22px; }
  .btn{ padding: 13px 22px; font-size: 12px; }

  /* ---------- Fusszeile ---------- */
  footer{ padding: 26px 0 30px; }
  .foot{ gap: 16px; }
  .foot nav{ flex-wrap: wrap; gap: 14px; }
}

/* Sehr schmale Geräte */
@media (max-width: 380px){
  .kpi-strip{ grid-template-columns: 1fr; gap: 9px; }
  .claim{ font-size: 19px; }
  .lights i{ width: 29px; height: 29px; }
}

/* ============================================================
   HANDY, RUNDE 2
   Nach der Messung: 6570 Pixel. Die Kanäle allein 1727 davon,
   also zwei volle Bildschirme für fünf Links. Das ist die
   eigentliche Baustelle, nicht die Events.
   ============================================================ */

@media (max-width: 700px){

  /* ---------- Durchschnittszeichen zurück in die Zeile ----------
     Die Regel aus Runde 1 hat alle Spans zu Flex-Spalten gemacht,
     auch das Zeichen selbst. Deshalb stand es allein über der Zahl.
     Jetzt greift sie nur noch für die vier direkten Kinder. */
  .kpi-strip > span{ display: flex; flex-direction: column; }
  .kpi-strip .avg{
    display: inline;
    font-size: 1.5em;
    line-height: 1;
    top: .07em;
  }
  .kpi-strip .sep{ display: none; }

  /* ============================================================
     EVENTS — Kacheln zwei bis vier als Kompaktzeile
     Die erste Kachel bleibt gross, sie zeigt den nächsten Stream.
     Bei den anderen stehen Zeitpunkt und Countdown nebeneinander
     statt untereinander. Alles bleibt sichtbar, nur dichter.
     ============================================================ */
  .events-grid .ev:not(:first-child):not(.ev--islive){
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "top   top"
      "title title"
      "when  count";
    align-items: end;
    row-gap: 7px;
    padding: 13px 15px 14px;
  }
  .events-grid .ev:not(:first-child):not(.ev--islive) .ev-top{   grid-area: top; }
  .events-grid .ev:not(:first-child):not(.ev--islive) h3{        grid-area: title; margin: 0; }
  .events-grid .ev:not(:first-child):not(.ev--islive) .ev-when{  grid-area: when;  margin: 0; }
  .events-grid .ev:not(:first-child):not(.ev--islive) .ev-count{
    grid-area: count;
    padding-top: 0;
    border-top: 0;
    gap: 11px;
    margin: 0;
  }
  .events-grid .ev:not(:first-child):not(.ev--islive) .ev-flag{ width: 42px; height: 28px; }
  .events-grid .ev:not(:first-child):not(.ev--islive) .ev-time{ font-size: 16px; }
  .events-grid .ev:not(:first-child):not(.ev--islive) h3{ font-size: 16.5px; }

  /* ============================================================
     KANÄLE — Rangfolge statt fünf gleich grosser Blöcke
     YouTube und WhatsApp bleiben in voller Breite, das sind die
     beiden Kanäle die wirklich zählen und die einzigen mit
     Bewegung. Instagram, TikTok und Facebook stehen darunter als
     Dreierreihe. Anklickbar bleibt alles, die Bilder bleiben.
     ============================================================ */
  .social-grid{
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
  }
  .social-grid .soc:nth-child(-n+2){ grid-column: span 6; }
  .social-grid .soc:nth-child(n+3){  grid-column: span 2; }

  /* Die drei kleinen: Bild, Symbol, Name. Der Beschreibungstext
     fällt weg, auf dem Handy zählt der Weg zum Kanal, nicht der Satz. */
  .social-grid .soc:nth-child(n+3) .soc-preview{ aspect-ratio: 1 / 1; }
  .social-grid .soc:nth-child(n+3) .soc-body{ padding: 9px 6px 11px; }
  .social-grid .soc:nth-child(n+3) .soc-head{ justify-content: center; gap: 5px; }
  .social-grid .soc:nth-child(n+3) .soc-ico{ width: 15px; height: 15px; }
  .social-grid .soc:nth-child(n+3) h4{ font-size: 12px; }
  .social-grid .soc:nth-child(n+3) p,
  .social-grid .soc:nth-child(n+3) .soc-go{ display: none; }
  .social-grid .soc:nth-child(n+3) .pv-play--sm{ width: 30px; height: 30px; }
  .social-grid .soc:nth-child(n+3) .pv-play--sm::after{
    border-left-width: 9px; border-top-width: 6px; border-bottom-width: 6px;
  }

  /* WhatsApp bekommt etwas mehr Höhe, sonst wird der Verlauf gequetscht */
  .soc .pv-wa{ aspect-ratio: 16 / 9; }
  .pv-viewers{ font-size: 10px; }

  /* ---------- Über uns etwas straffer ---------- */
  .shot{ aspect-ratio: 16 / 11; }
  .track-tl{ padding-top: 28px; margin-bottom: 26px; }
}

/* ============================================================
   HANDY, RUNDE 3 — Feinschliff
   ============================================================ */

@media (max-width: 700px){

  /* Zwischen den Abschnitten standen rund 140 Pixel Leerraum.
     Auf dem Desktop ist das Luft, auf dem Handy ist es ein
     Scrollweg durch Nichts. */
  section{ padding: 36px 0; }
  h2.section-title{ margin-bottom: 16px; }

  /* WhatsApp: der Verlauf hing oben und darunter war tote Fläche.
     In einem echten Chat sitzen die neuen Nachrichten unten. */
  .soc .pv-wa{ aspect-ratio: 5 / 3; }
  .soc .pv-wa .wa-stack{
    height: 100%;
    justify-content: flex-end;
  }

  /* Die Ampel darf enger an die Kennzahlen ruecken */
  .lights{ margin: 2px 0 16px; }
}

/* ============================================================
   HANDY, RUNDE 4 — Live-Fall
   Laeuft ein Stream gerade, ersetzt "Wir sind jetzt live" den
   Countdown. In der schmalen rechten Spalte des Kompaktrasters
   waere dieser Satz umgebrochen. Live-Kacheln behalten deshalb
   die volle Karte, egal an welcher Position sie stehen. Das ist
   auch inhaltlich richtig: was gerade laeuft, darf auffallen.
   ============================================================ */
@media (max-width: 700px){
  .events-grid .ev--islive{ padding: 15px 16px 17px; }
  .events-grid .ev--islive .ev-when{ margin: 12px 0 5px; }
  .events-grid .ev--islive .ev-count div:nth-child(n+3){ display: block; }
  .events-grid .ev--islive .ev-live-now{ font-size: 14px; }
}

/* ============================================================
   HANDY, RUNDE 5 — zwei echte Fehler aus dem Funktionstest
   ============================================================ */

@media (max-width: 700px){


  /* ---------- Jahreskalender war zu breit ----------
     Die Monate rechneten mit fest 330 Pixeln, zur Verfuegung
     standen 305. Deshalb ragte der Kalender 127 Pixel raus.
     Ein Monat pro Zeile, dafuer grosse Tagesfelder zum Antippen. */
  .year{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .month{ min-width: 0; max-width: none; }
  .month-grid{
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
  }
  /* Die Tageszellen brauchten 59 Pixel Mindestbreite und haben damit
     das ganze Fenster auf 472 Pixel aufgedrueckt, der Sonntag lag
     ausserhalb des Bildes. Alles muss unter 52 Pixel passen. */
  .day{ min-height: 46px; padding: 4px 2px; min-width: 0; }
  .day-head{ gap: 3px; }
  .day-flag{ width: 14px; height: 10px; }
  .day-num{ font-size: 12px; }
  .day-row{ font-size: 9.5px; gap: 2px; }
  .day-row b{ font-size: 8px; }
  .day-mark{ font-size: 9px; }
  .dow{ font-size: 9px; }
  .panel-box{ padding-left: 4px; padding-right: 4px; width: 100%; }
}

/* Die Streckenlinie im Hintergrund ist breiter als das Bild und
   war der letzte Grund, warum sich die Seite seitlich schieben
   liess. Sie ist reine Deko, beschneiden faellt nicht auf. */
@media (max-width: 700px){
  .track-bg{ overflow: hidden; }
}