/* ============================================================
   LUMI F1 — ENTWURF 3, Handy-Runde 2
   Michaels Durchgang auf dem echten Geraet.
   ============================================================ */

/* ------------------------------------------------------------
   KALENDER-METAZEILE, gilt auch am Desktop
   Badge, Wochentag und Ort stehen jetzt zusammen in einer Zeile
   unter dem Titel statt Badge oben und Wochentag darunter.
   ------------------------------------------------------------ */
.cal-meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 0;
}
.cal-meta .cal-wday{
  font-size: 13px;
  color: var(--ink-dim);
}

/* ============================================================
   HANDY
   ============================================================ */
@media (max-width: 700px){

  /* ---------- Kopfbereich ----------
     Logo kleiner, damit der Claim sicher passt. Der Claim skaliert
     jetzt mit der Bildschirmbreite, damit
     "FORMEL-1-STREAMINGKANAL" auch auf 320-Pixel-Geraeten in eine
     Zeile passt und nicht mitten im Wort bricht. */
  .hero-logo{ width: 76px; }
  .claim{ font-size: min(5.1vw, 20px); }
  .lockup{ gap: 12px; }

  /* Kennzahlen zurueckhaltender */
  .kpi-strip{ font-size: 11px; gap: 10px 14px; margin-top: 16px; }
  .kpi-strip b{ font-size: 15px; }
  .kpi-strip .avg{ font-size: 1.4em; }

  /* Startampel etwas groesser, sie ist das Erkennungszeichen */
  .lights{ gap: 11px; margin: 6px 0 18px; }
  .lights i{ width: 41px; height: 41px; }

  /* ---------- Events schmaler ---------- */
  .events-grid{ gap: 9px; }
  .events-grid .ev{ padding: 13px 14px 14px; }
  .events-grid .ev h3{ font-size: 16.5px; }
  .events-grid .ev-flag{ width: 44px; height: 30px; }
  .events-grid .ev-type{ padding: 4px 9px; font-size: 9.5px; }
  .events-grid .ev-when{ margin: 9px 0 4px; }
  .events-grid .ev-day{ font-size: 11.5px; }
  .events-grid .ev-time{ font-size: 16.5px; }
  .events-grid .ev-count{ padding-top: 9px; }
  .events-grid .ev-count b{ font-size: 18px; }

  .events-grid .ev:not(:first-child):not(.ev--islive){
    padding: 11px 14px 12px;
    row-gap: 5px;
  }
  .events-grid .ev:not(:first-child):not(.ev--islive) h3{ font-size: 15.5px; }
  .events-grid .ev:not(:first-child):not(.ev--islive) .ev-flag{ width: 38px; height: 26px; }
  .events-grid .ev:not(:first-child):not(.ev--islive) .ev-time{ font-size: 15px; }
  .events-grid .ev:not(:first-child):not(.ev--islive) .ev-count b{ font-size: 15px; }

  /* ============================================================
     KALENDER — zwei Zeilen statt vier
     Vorher: Titel, Badge, Wochentag mit Streckenname, Uhrzeit,
     alles untereinander. Jetzt Titel oben, darunter Badge,
     Wochentag und Uhrzeit in einer Zeile. Der Streckenname faellt
     weg, er steht ohnehin schon im Titel des Rennens.
     display:contents loest die Verschachtelung auf, damit die
     Uhrzeit neben dem Wochentag stehen kann, obwohl sie im
     Markup ein Geschwisterelement ist.
     ============================================================ */
  .cal-row{
    display: grid;
    grid-template-columns: 42px 1fr auto;
    grid-template-areas:
      "date title title"
      "date meta  time";
    align-items: center;
    column-gap: 12px;
    row-gap: 3px;
    padding: 11px 4px;
  }
  .cal-main{ display: contents; }
  .cal-date{ grid-area: date; }
  .cal-main h4{ grid-area: title; font-size: 14.5px; margin: 0; }
  .cal-meta{ grid-area: meta; margin: 0; gap: 7px; }
  .cal-time{ grid-area: time; font-size: 13.5px; white-space: nowrap; }
  .cal-meta .cal-wday{ font-size: 12px; }
  .cal-date b{ font-size: 19px; }
  .cal-date span{ font-size: 9px; }
  .cal-badge{ padding: 3px 7px; font-size: 8.5px; }

  /* ============================================================
     KANAELE — YouTube und WhatsApp nebeneinander
     Das Raster hat sechs Spalten. Die beiden grossen belegen jetzt
     je drei statt sechs, die drei kleinen weiterhin je zwei.
     ============================================================ */
  .social-grid .soc:nth-child(-n+2){ grid-column: span 3; }

  .social-grid .soc:nth-child(-n+2) .soc-preview{ aspect-ratio: 1 / 1; }
  .social-grid .soc:nth-child(-n+2) .soc-body{ padding: 11px 12px 13px; }
  .social-grid .soc:nth-child(-n+2) h4{ font-size: 14px; }
  .social-grid .soc:nth-child(-n+2) p{ font-size: 11.5px; line-height: 1.35; }
  .social-grid .soc:nth-child(-n+2) .soc-go{ font-size: 10.5px; margin-top: 8px; }
  .social-grid .soc:nth-child(-n+2) .soc-ico{ width: 17px; height: 17px; }

  /* Der WhatsApp-Verlauf hat auf halber Breite weniger Platz */
  .soc .pv-wa{ aspect-ratio: 1 / 1; padding: 9px 8px; }
  .pv-wa .wa-bubble{ font-size: 8.5px; padding: 5px 8px; max-width: 100%; }
  .pv-wa .wa-bubble em{ font-size: 7px; margin-left: 4px; }
  .pv-wa .wa-stack{ gap: 4px; }
  .pv-viewers{ font-size: 9px; }
  .pv-badge{ font-size: 8px; padding: 2px 6px; }

  /* ---------- Was bei uns laeuft, schmaler ---------- */
  .news{ padding: 14px 14px 15px; }
  .news h4{ font-size: 15.5px; line-height: 1.2; margin: 8px 0 6px; }
  .news p{ font-size: 12.5px; line-height: 1.45; }
  .news-more{ margin-top: 9px; font-size: 10.5px; }
  .news-grid{ gap: 10px; }
  .news-tag{ font-size: 8.5px; }
  .news-tag span{ padding: 3px 7px; }
  .news-date{ font-size: 10px; }

  /* ---------- Zitat sicher auf zwei Zeilen ----------
     Skaliert mit der Bildschirmbreite, damit die laengere der
     beiden Zeilen auch auf einem 320-Pixel-Geraet nicht bricht. */
  .big-quote{
    font-size: min(5.4vw, 21px);
    line-height: 1.16;
    margin-bottom: 22px;
  }

  /* ============================================================
     ZEITSTRAHL — vorher waren es nur vier Punkte
     Unter 900 Pixeln standen der Balken und die Strichelung auf
     display:none. Uebrig blieben die Punkte ohne Linie, also gar
     kein Zeitstrahl mehr.

     Jetzt eine echte senkrechte Linie mit den Punkten darauf und
     dem Text rechts daneben. Bewusst nicht links und rechts
     abwechselnd: Bei 390 Pixeln bleiben je Seite nur rund 150
     Pixel Text, die Absaetze waeren dann acht Zeilen lang und der
     Abschnitt fast doppelt so hoch. Einspaltig ist kuerzer und
     besser lesbar, und eine durchgehende Linie ist es trotzdem.
     ============================================================ */
  .track-tl{ padding-top: 4px; margin-bottom: 26px; }

  .track-tl::before{
    display: block;
    content: "";
    position: absolute;
    left: 10px;
    right: auto;
    top: 6px;
    bottom: 6px;
    width: 3px;
    height: auto;
    border-radius: 2px;
    background: var(--surface-2);
  }
  .track-tl::after{
    display: block;
    content: "";
    position: absolute;
    left: 11px;
    right: auto;
    top: 6px;
    bottom: 6px;
    width: 1px;
    height: auto;
    background: repeating-linear-gradient(
      180deg,
      rgba(242,242,242,.32) 0 9px,
      transparent 9px 20px
    );
  }

  .tl-row{
    grid-template-columns: 1fr;
    row-gap: 16px;
    padding-left: 34px;
  }
  .tl-step{ padding-top: 0; }
  .tl-step::before{
    left: -32px;
    top: 2px;
    width: 15px;
    height: 15px;
    border-width: 3px;
  }
  .tl-step span{ font-size: 9px; letter-spacing: .16em; }
  .tl-step b{ font-size: 15.5px; margin: 3px 0 3px; }
  .tl-step p{ font-size: 12.5px; line-height: 1.45; }

  /* ============================================================
     BILDER — man hat uns nicht erkannt
     Zwei Ursachen. Erstens standen die Bilder auf dem Handy
     zweispaltig, weil eine spaetere Regel fuer .shots die
     Einspalten-Regel fuer .shots--2 ueberschrieben hat. Bei rund
     110 Pixeln Hoehe erkennt man niemanden.
     Zweitens erscheint die Bildunterschrift nur beim Hover. Auf
     dem Handy heisst Hover: antippen. Dann legte sich der dunkle
     Verlauf ueber einen Grossteil des Bildes.

     Jetzt einspaltig, hoeher, und die Unterschrift steht
     dauerhaft als schmales Band unten.
     ============================================================ */
  .shots.shots--2{ grid-template-columns: 1fr; gap: 12px; }
  .shots--2 .shot{ aspect-ratio: 4 / 3; }

  .shot figcaption,
  .shots--2 figcaption{
    transform: none;
    opacity: 1;
    padding: 22px 14px 11px;
    font-size: 10px;
    background: linear-gradient(transparent, rgba(28,28,28,.92) 62%);
  }

  /* ---------- Crew ---------- */
  .driver{ min-height: 178px; }
  .driver b{ font-size: 16px; }

  /* ============================================================
     PARTNER — Knopf unter die Kacheln, Luecke schliessen
     display:contents loest den Zwischen-Container auf, damit sich
     Text, Kacheln und Knopf frei sortieren lassen.
     ============================================================ */
  .partner-grid{
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .partner-grid > .rise:first-child{ display: contents; }
  .partner-grid .section-title{ order: 1; }
  .partner-grid .section-lead{ order: 2; margin-bottom: 16px; }
  .partner-grid .kpi-grid{ order: 3; }
  .partner-grid .btn{ order: 4; margin-top: 16px; align-self: start; }
  .section-lead{ font-size: 13.5px; line-height: 1.55; }
}

/* ============================================================
   TIPPGERAETE
   Hier stand vorher eine Regel, die den Zoom beim Antippen
   abgeschaltet hat. Grund war damals, dass sich die
   Bildunterschrift beim Antippen ueber das halbe Bild gelegt hat.
   Das Problem ist inzwischen anders geloest, die Unterschrift ist
   dauerhaft ein schmales Band. Michael hat die Bewegung vermisst,
   also ist sie wieder da.
   ============================================================ */

/* Sehr schmale Geraete */
@media (max-width: 380px){
  .cal-row{ grid-template-columns: 36px 1fr auto; column-gap: 9px; }
  .cal-main h4{ font-size: 13.5px; }
  .tl-row{ padding-left: 30px; }
}

/* ============================================================
   ZITAT — es brach mitten im Wort
   Die dritte Zeile kam nicht von zu grosser Schrift, sondern von
   der Silbentrennung: Der Browser darf nach einem Bindestrich
   umbrechen und hat "Pay-TV-Ton" zu "Pay-TV-" und "Ton" geteilt.
   Zeile eins war 285 von 320 Pixeln breit, es fehlte also nur ein
   Wort. Jetzt haelt nowrap den Begriff zusammen und die Schrift
   skaliert so, dass die laengere Zeile auf jedem Handy passt.
   ============================================================ */
.nowrap{ white-space: nowrap; }

@media (max-width: 700px){
  /* max-width:22ch war die eigentliche Ursache. Die laengere Zeile
     hat 33 Zeichen und passt damit bei keiner Schriftgroesse in die
     Box. Auf dem Handy gibt die Sektionsbreite das Mass vor. */
  .big-quote{
    max-width: none;
    font-size: min(4.7vw, 20px);
  }
}

/* ============================================================
   HANDY, NACHZUG
   ============================================================ */
@media (max-width: 700px){

  /* Die Abstaende zwischen den Abschnitten waren ungleich: mal 36,
     mal 72, mal 120 Pixel, je nachdem welche Regel gerade gewonnen
     hat. Jetzt ueberall 60. Die Events bleiben bewusst dicht an den
     Kennzahlen, das war so gewollt. */
  section,
  .social-sec, .about-sec, .partner,
  #kalender, #social, #aktuelles, #ueber-uns, #partner{
    padding-top: 30px;
    padding-bottom: 30px;
  }
  #events{ padding-top: 8px; }

  /* Die Partner-Ueberschrift stand mittig statt links, weil der
     neue Flex-Container die Kinder zentriert hat. */
  .partner-grid{ align-items: stretch; }
  .partner-grid .section-title,
  .partner-grid .section-lead{ text-align: left; }
}

/* ============================================================
   KOPFBEREICH — Logo und Claim nebeneinander
   Auf dem Handy sind sie umgebrochen, weil .lockup auf
   flex-wrap:wrap steht. Jetzt stehen sie wie am Desktop
   nebeneinander.

   Der Claim nutzt geschuetzte Bindestriche (‑), also ist
   "Formel-1-Streamingkanal" ein einziger unteilbarer Block aus
   23 Zeichen. Der muss komplett neben das Logo passen, deshalb
   skaliert die Schrift mit der Bildschirmbreite und das Logo ist
   auf schmalen Geraeten nochmal kleiner.
   ============================================================ */
@media (max-width: 700px){
  .lockup{
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
  }
  .hero-logo{ width: 62px; flex: none; }
  .claim{
    min-width: 0;
    font-size: min(4.5vw, 20px);
    line-height: 1.14;
  }
}

@media (max-width: 380px){
  .lockup{ gap: 9px; }
  .hero-logo{ width: 52px; }
}

/* ============================================================
   UEBER UNS — Nachbesserung
   ============================================================ */
@media (max-width: 700px){

  /* ---------- Punkte sassen nicht mittig auf der Linie ----------
     Die Linie liegt bei 10 bis 13 Pixel, ihre Mitte also bei 11,5.
     Der Punkt lag bei 2 bis 17, Mitte 9,5. Zwei Pixel zu weit
     links. Mit -30 statt -32 sitzt er genau auf der Linie. */
  .tl-step::before{ left: -30px; }

  /* ============================================================
     FAHRERKARTEN — es geht um uns, nicht um die Kulisse
     Die Portraits sind 1417 mal 2000 Pixel, also hochkant im
     Verhaeltnis 0,71. Die Karten waren mit 174 mal 178 Pixeln
     praktisch quadratisch. object-fit:cover hat deshalb oben und
     unten grosszuegig weggeschnitten und die Gesichter klein
     gemacht.

     Jetzt haben die Karten mit 5:7 fast genau das Format der
     Fotos. Dadurch wird kaum noch beschnitten und die Karte ist
     37 Prozent hoeher.
     ============================================================ */
  .driver{
    aspect-ratio: 5 / 7;
    min-height: 0;
    padding: 14px 13px 14px;
  }
  .driver img{ object-position: center 16%; }
  .driver b{ font-size: 17px; }
  .crew{ gap: 11px; }

  /* ============================================================
     PODIUM UND SIMULATOR — deutlich kleiner
     Die waren einspaltig 359 mal 269 Pixel und damit groesser als
     die Fahrerkarten. Falsche Gewichtung: Die vier Personen sind
     der Kern des Abschnitts, die beiden Situationsbilder sind
     Beiwerk. Jetzt zweispaltig als Miniaturen.
     ============================================================ */
  .shots.shots--2{ grid-template-columns: 1fr 1fr; gap: 11px; }
  .shots--2 .shot{ aspect-ratio: 4 / 3; }

  .shots--2 figcaption{
    padding: 16px 9px 8px;
    font-size: 8px;
    letter-spacing: .06em;
    line-height: 1.3;
  }
}

/* ============================================================
   ZEITSTRAHL — die Linie lief durch die Punkte hindurch
   .track-tl::after ist als letztes Kind des Containers nach den
   .tl-step-Elementen gezeichnet worden und lag damit ueber den
   Punkten. Die sahen dadurch aus wie Schluesselloecher statt wie
   Punkte auf einer Linie. Der Punkt bekommt eine Ebene darueber.

   Ausserdem laeuft die Linie unten weich aus, statt hinter dem
   letzten Absatz einfach abgeschnitten zu enden.
   ============================================================ */
@media (max-width: 700px){
  .tl-step::before{ z-index: 2; }
  .track-tl::before,
  .track-tl::after{
    z-index: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 0 84%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0 84%, transparent 100%);
  }
}

/* Unter 380 Pixeln ist der Innenabstand der Zeitstrahl-Spalte
   kleiner (30 statt 34). Der Versatz des Punktes muss dann
   ebenfalls kleiner sein, sonst sitzt er wieder 4 Pixel daneben. */
@media (max-width: 380px){
  .tl-step::before{ left: -26px; }
}

/* ============================================================
   FENSTER AUF DEM HANDY — Leseansicht statt Hinweiskasten
   ------------------------------------------------------------
   Vorher war das Fenster 359 mal 370 Pixel und schwebte mittig,
   drumherum blieb die Seite sichtbar. Bei 844 Pixeln Bildschirm
   also weniger als die Haelfte. Das wirkt wie ein Hinweiskasten,
   nicht wie ein Artikel.

   Jetzt fuellt es die ganze Flaeche, die Ueberschrift ist weniger
   fett und der Text hat deutlich mehr Zeilenabstand.

   Wichtig: Der Jahreskalender nutzt dieselbe Klasse, braucht aber
   seinen schmalen Innenabstand, sonst faellt der Sonntag wieder
   aus dem Bild. Deshalb sind die Innenabstaende je Fenster
   getrennt gesetzt.
   ============================================================ */
@media (max-width: 700px){

  /* Es bleibt ein Kasten, der aufgeht, kein Vollbild. Rundherum
     bleibt die Seite sichtbar, damit klar ist dass etwas
     daruebergelegt ist. Nur eben deutlich hoeher als die
     urspruenglichen 370 Pixel. */
  .panel{
    padding: 16px;
    place-items: center;
  }
  .panel-box{
    width: 100%;
    max-width: none;
    max-height: 86dvh;
    border-radius: 16px;
  }
  .panel-close{ top: 13px; right: 13px; }

  /* ---------- Aktuelles: als Artikel lesbar ---------- */
  /* Am Telefon volle Breite, die Begrenzung vom Rechner gilt hier
     nicht. Hoehe als Obergrenze statt fest: die Artikel sind seit
     dem 04.09. lang genug, dass der Kasten ohnehin scrollt, und
     ein kurzer Text soll nicht kuenstlich gestreckt werden. */
  #panel-news .panel-box{
    width: 100%;
    max-height: 82dvh;
    padding: 62px 20px 28px;
  }
  #panel-news .panel-meta{
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
  }
  #panel-news h3{
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.24;
    margin: 12px 0 20px;
  }
  #panel-news p{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.72;
    color: #C4C4C4;
    max-width: none;
  }
  #pn-body p + p{ margin-top: 15px; }

  /* ---------- Jahreskalender behaelt seinen schmalen Rand ---------- */
  #panel-year .panel-box{ padding: 56px 6px 22px; }
}

/* ============================================================
   ORTSZEIT-HINWEIS
   Verbindlich ist die deutsche Zeit. Wer in einer anderen
   Zeitzone sitzt, bekommt seine Ortszeit klein daneben, damit
   er nicht selbst rechnen muss. Fuer alle in Deutschland,
   Oesterreich und der Schweiz ist der Hinweis gar nicht da,
   die Zeiten sind dort identisch.
   ============================================================ */
.ev-lokal{
  display: block;
  width: 100%;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-faint);
}
.cal-time .ev-lokal{
  margin-top: 1px;
  font-size: 10.5px;
  font-weight: 600;
}

@media (max-width: 700px){
  .ev-lokal{ font-size: 10px; margin-top: 1px; }
  .cal-time .ev-lokal{ font-size: 9.5px; }
}

/* ============================================================
   ROTER SCHEIN IM KOPFBEREICH — harte Abbruchkante
   ------------------------------------------------------------
   Michael am 01.09.2026: "Oben rechts ist so ein roter art
   kreis, der endet sehr abrupt, ist mir eine zu harte Linie."

   URSACHE, und die ist hausgemacht:
   Vorher war .hero::after ein 1008 Pixel grosser Kreis mit
   top:-210px, der also bis 798 Pixel hinunterreichte. Der
   Kopfbereich ist aber nur 526 Pixel hoch. Weil .hero frueher
   kein position:relative hatte, bezog sich der Kreis gar nicht
   auf den Kopfbereich und lief ungehindert ueber die Seite
   hinaus. Genau das war der Fehler mit dem seitlichen Scrollen,
   der heute behoben wurde.

   Seitdem wird der Kreis korrekt beschnitten, und der Schnitt
   liegt mitten im Farbverlauf. Ergebnis: eine harte waagerechte
   Kante an der Unterkante des Kopfbereichs.

   LOESUNG
   Der Schein deckt jetzt exakt den Kopfbereich ab (inset:0) und
   der Verlauf laeuft von selbst aus, bevor er die Unterkante
   erreicht. Rechnung: Mittelpunkt bei 12 Prozent Hoehe, senkrechter
   Radius 85 Prozent, durchsichtig ab 72 Prozent davon. Macht
   12 + 0,85 x 0,72 = rund 73 Prozent der Hoehe. Bei 100 Prozent
   ist also laengst nichts mehr da, was abgeschnitten werden
   koennte.

   Rechts und oben darf er ruhig bis an den Rand laufen, das ist
   der Bildschirmrand und faellt niemandem auf.

   filter:blur(30px) faellt weg. Ein Farbverlauf ist von Haus aus
   weich, die Unschaerfe hat nur Rechenzeit gekostet und beim
   Beschneiden zusaetzlich einen sichtbaren Saum erzeugt.
   ============================================================ */
.hero::after{
  inset: 0;
  top: 0;
  right: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  filter: none;
  background: radial-gradient(
    ellipse 55% 85% at 84% 12%,
    rgba(227, 6, 19, .22) 0%,
    rgba(227, 6, 19, .13) 30%,
    rgba(227, 6, 19, .05) 52%,
    transparent 72%
  );
}