/* ============================================================
   LUMI F1 — ENTWURF 3, Runde 3
   Michaels Durchgang ueber die Live-Seite.
   ============================================================ */

/* ---------- Flaggen sassen zu tief ----------
   Badge und Flagge stehen jetzt auf derselben Oberkante. */
.events-grid .ev-top{ align-items: flex-start; }
.events-grid .ev-flag{ margin-top: 0; }

/* ---------- Durchschnittszeichen sichtbar machen ---------- */
.kpi-strip .avg{
  font-size: 1.45em;
  line-height: 0;
  position: relative;
  top: .06em;
  margin-right: .12em;
  color: var(--live-text);
  font-weight: 400;
}

/* ============================================================
   LIVE
   Waehrend ein Stream laeuft, pulsiert die ganze Kachel und ist
   anklickbar. Die Dauer kommt aus der Endzeit im Outlook-Kalender,
   also exakt so lang wie der Stream wirklich angesetzt ist.
   ============================================================ */
.ev--islive{
  border-color: var(--red);
  animation: livepulse 2.4s ease-in-out infinite;
}
a.ev--islive{ cursor: pointer; }
a.ev--islive:hover{ transform: translateY(-7px); }

@keyframes livepulse{
  0%, 100%{
    box-shadow: 0 0 0 0 rgba(227,6,19,.5),
                inset 0 0 34px rgba(227,6,19,.10);
  }
  55%{
    box-shadow: 0 0 0 14px rgba(227,6,19,0),
                inset 0 0 52px rgba(227,6,19,.26);
  }
}

/* Der rote Balken bleibt, damit auch ohne Bewegung klar ist was los ist */
.ev--islive .ev-live-now{ font-size: 15px; }

@media (prefers-reduced-motion: reduce){
  .ev--islive{ animation: none; box-shadow: inset 0 0 40px rgba(227,6,19,.22); }
}

/* ============================================================
   KALENDER
   Qualifying war grau, soll wie oben gruen sein.
   ============================================================ */
.cal-badge.quali{
  background: rgba(88,120,96,.95);
  color: #fff;
}
.cal-badge.race{ background: var(--red); color: #fff; }
/* alles andere bleibt grau, also Sonderstreams und Videos */

/* Farbe der Zeile passend zur Art */
.row--quali .cal-date b,
.cal-row .cal-badge.quali{ color: #fff; }

/* ============================================================
   BILDUNTERSCHRIFTEN
   "Im Simulator" war unten angeschnitten.
   ============================================================ */
.shots figcaption{
  padding: 38px 18px 18px;
  line-height: 1.45;
}

/* ---------- Runde 3, Nachschlag ---------- */

/* Durchschnittszeichen deutlich sichtbarer */
.kpi-strip .avg{
  font-size: 1.9em;
  color: var(--ink);
  font-weight: 400;
  top: .09em;
  margin-right: .1em;
}

/* Datum klein darueber, Uhrzeit gross darunter.
   Vorher brach die Zeile mitten im Datum und der Trennpunkt
   stand am Zeilenende. */
.ev-when{
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 20px 0 8px;
}
.ev-day{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink-dim);
}
.ev-time{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.015em;
  line-height: 1.1;
}

/* Die neuen Portraits sind hochformatiger als die alten.
   Etwas weiter oben anschneiden, damit die Koepfe ganz drauf sind. */
.driver img{ object-position: center 14%; }

/* ------------------------------------------------------------
   Kopfhoehe angleichen (2026-09-04)

   Michaels Bild ist der Massstab: Kopf weit oben, kaum Luft
   darueber. Die anderen drei sind lockerer fotografiert, ihre
   Koepfe sassen dadurch deutlich tiefer in der Karte.

   Gemessen wurde im Browser an der echten Karte (296 x 308) und
   nicht geschaetzt. Je Person ein eigener Wert, weil jedes Bild
   ein anderes Verhaeltnis und einen anderen Bildausschnitt hat:

     Michael  1336x2000  14 %  (unveraendert, Massstab)
     Daniel   1000x1778  34 %  (enger geschnitten, siehe unten)
     Jan      1400x2070  60 %
     Roman    1080x1920  14 %  (eigenes Bild, siehe unten)

   Ueber den Dateinamen ausgewaehlt, nicht ueber die Position:
   so bleibt es richtig, wenn die Karten umsortiert werden.

   ROMAN war ein Sonderfall, und zwar ein lehrreicher. Sein erstes
   Bild kam als 3:4, alle anderen sind 2:3. Bei den schmalen
   Handy-Karten (5:7 = 1:1,40) ging ein 3:4-Bild fast genau auf:
   Ueberstand nur 16 Pixel. Da gab es schlicht nichts mehr zu
   verschieben, keine object-position der Welt haette geholfen.
   Auf dem Rechner sah es trotzdem gut aus, weil dort 136 Pixel
   Ueberstand waren. Ein Fehler, der nur am Telefon sichtbar war.

   Michael hat daraufhin ein Bild im Format 9:16 geliefert, mit dem
   Kopf schon in der Datei ganz oben. Damit gibt es auf beiden
   Groessen genug Spielraum:

                   Ueberstand vorher   nachher
     Rechner            136 px          218 px
     Telefon             16 px           64 px

   Merksatz fuer neue Portraits: Das Bild muss deutlich
   hochformatiger sein als die Karte, sonst laesst sich der Kopf
   nicht mehr ausrichten. 2:3 ist die Untergrenze, 9:16 ist besser.
   ------------------------------------------------------------ */
.driver img[src*="Daniel"]{ object-position: center 34%; }
.driver img[src*="Jan"]{    object-position: center 60%; }
.driver img[src*="Roman"]{  object-position: center 14%; }

/* ============================================================
   RUNDE 4 — zwei Fehler, die ich vorher falsch diagnostiziert habe
   ============================================================ */

/* Die Flagge war position:absolute und hing damit gar nicht im
   Fluss. Deshalb hatte align-items keine Wirkung. Jetzt steht sie
   normal in der Zeile und schiebt sich per margin-left nach rechts,
   Oberkante identisch mit dem Badge. */
.events-grid .ev-flag{
  position: static;
  margin-left: auto;
  top: auto;
  right: auto;
  flex: none;
}

/* Die Bildunterschrift lag in der abgeschnittenen Ecke.
   .shot hat clip-path mit 6 Prozent Schraege, beim zweiten Bild
   unten links, also genau dort wo der Text beginnt. Jetzt hat der
   Text genug Abstand, die Schraege bleibt als Gestaltungselement. */
.shots--2 figcaption{
  padding: 44px 20px 32px;
}

/* ============================================================
   KALENDERZELLE — jede Session einzeln statt "+1"
   Beispiel Zandvoort, Samstag: Sprintrennen und Qualifying am
   selben Tag. Frueher stand da nur eine Uhrzeit und ein "+1".
   ============================================================ */
.day{ min-height: 60px; }

.day.has{
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 5px 3px;
}
.day-head{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.day-flag{ width: 17px; height: 12px; }
.day-num{ font-size: 12px; font-weight: 900; line-height: 1; }

.day-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.day-row b{
  font-weight: 900;
  opacity: .7;
  font-size: 9px;
}
.day-mark{ font-size: 12px; line-height: 1; }

.legend b{ font-weight: 900; color: var(--ink); }

/* ============================================================
   SOCIALS MIT ECHTEM MATERIAL
   Michael hat Screenshots aus dem Stream, den Reels und dem
   WhatsApp-Kanal geliefert. Die Attrappen fliegen raus, wo es
   ein echtes Bild gibt. Der WhatsApp-Chat bleibt gebaut, weil
   er sich bewegt, hat jetzt aber echte Nachrichten aus dem Kanal.
   ============================================================ */

.pv-yt,
.pv-ig,
.pv-tt,
.pv-fb{
  background-size: cover;
  background-repeat: no-repeat;
}
.pv-yt{ background-image: url("../img/social-youtube.jpg");   background-position: center 45%; }
.pv-ig{ background-image: url("../img/social-instagram.jpg"); background-position: center 42%; }
.pv-tt{ background-image: url("../img/social-tiktok.jpg");    background-position: center 55%; }
.pv-fb{ background-image: url("../img/social-facebook.jpg");  background-position: center 62%; }

/* Damit Symbole und Text auf dem Foto lesbar bleiben */
.pv-ig::before,
.pv-tt::before,
.pv-fb::before,
.pv-yt::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,20,20,.45), rgba(20,20,20,.15) 45%, rgba(20,20,20,.6));
}

/* Kleinerer Abspielknopf fuer die drei Hochformat-Vorschauen */
.pv-play--sm{
  width: 44px;
  height: 44px;
  animation: none;
  background: rgba(28,28,28,.72);
  border: 2px solid rgba(242,242,242,.9);
  backdrop-filter: blur(3px);
}
.pv-play--sm::after{
  border-left-width: 13px;
  border-top-width: 8px;
  border-bottom-width: 8px;
  margin-left: 3px;
}
.soc:hover .pv-play--sm{ transform: scale(1.12); }

/* WhatsApp behaelt seinen gebauten Chat, nur etwas mehr Platz
   fuer die laengeren echten Nachrichten */
.pv-wa{ align-items: center; }
.wa-bubble{ font-size: 11px; line-height: 1.35; max-width: 92%; }

/* ============================================================
   WHATSAPP — laufender Verlauf aus echten Kanal-Nachrichten
   ------------------------------------------------------------
   Die Nachrichten stammen aus Michaels WhatsApp-Kanal vom
   2. und 3. Mai 2026 und ergeben zusammen eine echte Geschichte:
   Freitag sind wir live, das Wetter sieht kritisch aus, der
   Rennstart wird vorverlegt.

   Die private Ticket-Nachricht aus dem Verlauf ist bewusst NICHT
   dabei, die gehoert nicht auf eine oeffentliche Seite.

   Alle vier Elemente stehen von Anfang an im Fluss und werden nur
   ein- und ausgeblendet. So springt das Layout nie.
   ============================================================ */
.pv-wa{ align-items: center; padding: 12px 13px; }
.wa-stack{ gap: 5px; }

.wa-bubble{
  position: relative;
  font-size: 10.5px;
  line-height: 1.4;
  max-width: 94%;
  padding: 7px 11px 7px 11px;
  opacity: 0;
}
.wa-bubble em{
  font-style: normal;
  display: inline-block;
  margin-left: 7px;
  font-size: 8.5px;
  font-weight: 700;
  opacity: .6;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
}
.wa-bubble.m4{ padding: 9px 13px; align-self: flex-start; }

.wa-bubble.m1{ animation: waM1 13s var(--ease) infinite; }
.wa-bubble.m2{ animation: waM2 13s var(--ease) infinite; }
.wa-bubble.m3{ animation: waM3 13s var(--ease) infinite; }
.wa-bubble.m4{ animation: waM4 13s var(--ease) infinite; }

@keyframes waM1{
  0%, 2%   { opacity: 0; transform: translateY(9px) scale(.97); }
  7%, 86%  { opacity: 1; transform: none; }
  93%, 100%{ opacity: 0; transform: translateY(-7px); }
}
@keyframes waM2{
  0%, 14%  { opacity: 0; transform: translateY(9px) scale(.97); }
  19%, 88% { opacity: 1; transform: none; }
  94%, 100%{ opacity: 0; transform: translateY(-7px); }
}
@keyframes waM3{
  0%, 30%  { opacity: 0; transform: translateY(9px) scale(.97); }
  35%, 90% { opacity: 1; transform: none; }
  95%, 100%{ opacity: 0; transform: translateY(-7px); }
}
@keyframes waM4{
  0%, 46%  { opacity: 0; transform: translateY(9px) scale(.97); }
  51%, 92% { opacity: 1; transform: none; }
  96%, 100%{ opacity: 0; transform: translateY(-7px); }
}

@media (prefers-reduced-motion: reduce){
  .wa-bubble{ opacity: 1; animation: none; transform: none; }
}

/* Der Verlauf haengt jetzt unten, wie in einem echten Chat, und
   laeuft nach oben weich aus statt hart angeschnitten zu werden. */
.pv-wa{ align-items: flex-end; padding-bottom: 12px; }
.pv-wa .wa-stack{
  justify-content: flex-end;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
}

/* TikTok zeigt jetzt die Team-Collage im Querformat,
   deshalb anderer Bildausschnitt als bei den Hochformat-Reels. */
.pv-tt{ background-position: center 40%; }

.pv-tt{ background-position: center center; }