/* ============================================================
   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%; }

/* ============================================================
   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; }