/* ==================================================================
   Rennseiten unter /rennen/

   Bewusst schlank gehalten. Die Startseite tragt dick auf, weil sie
   beeindrucken soll. Diese Seiten beantworten eine einzige Frage:
   Wann faehrt die Formel 1 dort, und wo sehe ich es auf Deutsch.
   Wer "F1 Baku" sucht, will die Uhrzeit, nicht eine Show.

   Nutzt die Farbvariablen der Hauptseite, damit es dieselbe Marke
   bleibt. Eigene Praefixe (rn-), damit nichts kollidiert.
   ================================================================== */

.rn-nav{
  border-bottom:1px solid var(--line);
  background:var(--bg-2);
  position:sticky; top:0; z-index:20;
}
.rn-nav .shell{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-block:14px;
}
.rn-marke{
  font-weight:900; letter-spacing:-.02em; font-size:19px;
  color:var(--ink); text-decoration:none;
}
.rn-zurueck{ font-size:14px; color:var(--ink-dim); text-decoration:none; }
.rn-zurueck:hover{ color:var(--ink); }

.rn-haupt{ padding-block:clamp(26px,4vw,52px) clamp(40px,6vw,80px); }

.rn-weg{ font-size:13px; color:var(--ink-faint); margin:0 0 22px; }
.rn-weg a{ color:inherit; }
.rn-weg a:hover{ color:var(--ink); }

.rn-haupt h1{
  font-size:clamp(30px,5.6vw,62px); font-weight:900; line-height:.98;
  letter-spacing:-.035em; margin:0 0 16px; text-transform:uppercase;
}
.rn-haupt h1 span{
  display:block; color:var(--ink-dim); font-size:.52em;
  letter-spacing:-.01em; text-transform:none; font-weight:700;
  margin-top:8px;
}
.rn-haupt h2{
  font-size:clamp(20px,2.6vw,29px); font-weight:800; letter-spacing:-.02em;
  margin:clamp(34px,5vw,56px) 0 14px;
}

.rn-stand{
  display:inline-block; margin:0 0 22px; padding:8px 14px;
  border:1px solid var(--line-2); border-radius:999px;
  font-size:14px; font-weight:700; color:var(--ink-dim);
}
.rn-stand.rn-live{
  color:var(--live-text, #FF4D57); border-color:currentColor;
  animation:rn-puls 1.6s ease-in-out infinite;
}
.rn-stand.rn-vorbei{ opacity:.7; }
@keyframes rn-puls{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

.rn-vor{
  font-size:clamp(15px,1.7vw,18px); line-height:1.65;
  color:var(--ink-dim); max-width:68ch; margin:0 0 8px;
}

.rn-tabelle{
  width:100%; max-width:620px; border-collapse:collapse; margin:0 0 10px;
}
.rn-tabelle th{
  text-align:left; font-size:11px; letter-spacing:.14em; font-weight:700;
  text-transform:uppercase; color:var(--ink-faint);
  padding:0 10px 10px 0; border-bottom:1px solid var(--line-2);
}
.rn-tabelle td{
  padding:13px 10px 13px 0; border-bottom:1px solid var(--line);
  font-size:16px; color:var(--ink-dim);
}
.rn-tabelle td b{ color:var(--ink); font-weight:700; }

.rn-klein{ font-size:13px; color:var(--ink-faint); margin:0; max-width:60ch; }

.rn-wege{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,4vw,40px); }
.rn-knopf{
  display:inline-flex; align-items:center; min-height:50px; padding:0 26px;
  background:var(--red); color:#fff; border:1px solid var(--red);
  border-radius:999px; text-decoration:none; font-weight:800; font-size:15px;
  transition:background var(--med), color var(--med);
}
.rn-knopf:hover{ background:transparent; color:var(--ink); }
.rn-knopf--leer{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.rn-knopf--leer:hover{ border-color:var(--ink); background:transparent; }

.rn-liste{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.rn-liste a{
  display:inline-block; padding:9px 15px; border:1px solid var(--line-2);
  border-radius:999px; font-size:14px; color:var(--ink-dim); text-decoration:none;
}
.rn-liste a:hover{ color:var(--ink); border-color:var(--ink); }

.rn-kacheln{
  list-style:none; padding:0; margin:0;
  display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
}
.rn-kacheln a{
  display:flex; flex-direction:column; gap:5px; height:100%;
  padding:17px 19px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r);
  text-decoration:none; transition:border-color var(--med), background var(--med);
}
.rn-kacheln a:hover{ border-color:var(--red); background:var(--surface-2); }
.rn-kacheln b{ font-size:17px; color:var(--ink); letter-spacing:-.01em; }
.rn-kacheln span{ font-size:13px; color:var(--ink-faint); }
.rn-blass a{ opacity:.58; }
.rn-blass a:hover{ opacity:1; }

.rn-fuss{
  border-top:1px solid var(--line); padding-block:22px;
  font-size:13px; color:var(--ink-faint);
}
.rn-fuss a{ color:inherit; }
.rn-fuss a:hover{ color:var(--ink); }

@media (prefers-reduced-motion: reduce){
  .rn-stand.rn-live{ animation:none; }
}

/* Der Stream-Knopf pulsiert, sobald eine Session laeuft. Michaels
   ausdruecklicher Wunsch: Wer kurz vor dem Rennen auf der Seite landet,
   soll sofort sehen, wo es langgeht. */
.rn-knopf--live{
  animation:rn-knopf-puls 1.5s ease-in-out infinite;
  box-shadow:0 0 0 0 rgba(227,6,19,.55);
}
@keyframes rn-knopf-puls{
  0%{   box-shadow:0 0 0 0   rgba(227,6,19,.55); }
  70%{  box-shadow:0 0 0 16px rgba(227,6,19,0); }
  100%{ box-shadow:0 0 0 0   rgba(227,6,19,0); }
}
.rn-stand.rn-bald{ color:var(--ink); border-color:var(--ink); }
@media (prefers-reduced-motion: reduce){
  .rn-knopf--live{ animation:none; box-shadow:0 0 0 3px rgba(227,6,19,.4); }
}

/* ------------------------------------------------------------------
   Nachtrag 16.09.2026, auf Michaels Rueckmeldung:
   Zeiten und Knoepfe gehoeren nach oben, der Text nach unten und
   kleiner. Wer auf so einer Seite landet, will die Uhrzeit, nicht
   einen Aufsatz.
   ------------------------------------------------------------------ */
.rn-nachsatz{
  margin-top:clamp(40px,6vw,72px); padding-top:22px;
  border-top:1px solid var(--line);
}
.rn-nachsatz p{
  font-size:14px; line-height:1.65; color:var(--ink-faint);
  max-width:70ch; margin:0 0 18px;
}

/* Hinweis auf den Kalender der naechsten Saison. Bewusst auffaellig:
   Genau danach wird gerade gesucht. */
.rn-saisonbanner{
  display:flex; flex-direction:column; gap:4px;
  margin:0 0 clamp(22px,3vw,34px); padding:18px 22px;
  background:var(--red-soft); border:1px solid var(--red);
  border-radius:var(--r); text-decoration:none;
  transition:background var(--med);
}
.rn-saisonbanner:hover{ background:rgba(227,6,19,.22); }
.rn-saisonbanner b{ font-size:17px; color:var(--ink); letter-spacing:-.01em; }
.rn-pfeil{ display:inline-block; transition:transform var(--med); }
.rn-saisonbanner span{ font-size:14px; color:var(--ink-dim); }

/* Saisontabelle: Nummer schmal, Sprint als kleine Marke */
.rn-tabelle--saison{ max-width:760px; }
.rn-nr{
  width:38px; color:var(--ink-faint); font-variant-numeric:tabular-nums;
  font-weight:700;
}
.rn-sprint{
  display:inline-block; margin-left:8px; padding:2px 8px;
  border:1px solid var(--red); border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--live-text,#FF4D57);
  vertical-align:middle;
}
@media (max-width:620px){
  .rn-tabelle--saison td,.rn-tabelle--saison th{ font-size:14px; padding-right:6px; }
  .rn-sprint{ margin-left:6px; padding:1px 6px; font-size:10px; }
}

/* ==================================================================
   Flaggen, zweite Fassung nach Michaels Rueckmeldung am 16.09.2026:
   "die Flaggen sind jetzt sehr gross und einfach drauf geklatscht,
   ich haette es gerne in einer schoeneren uebersicht, flagge catcht
   und text ist wichtig... flaggen schoen einbauen, grafisch clever,
   vielleicht leichter verlauf in das 1c1c1c bisschn abgerundet"

   Also: Die Flagge ist kein Aufkleber mehr, sondern laeuft als Flaeche
   von rechts in die Kachel hinein und verliert sich im Hintergrund.
   Der Text bleibt vorne und voll lesbar, die Farbe gibt nur den
   Wiedererkennungswert.
   ================================================================== */

/* --- Flagge als hereinlaufende Flaeche ---------------------------- */
.rn-flagge{
  position:absolute; top:0; right:0; bottom:0;
  width:58%; overflow:hidden; pointer-events:none;
  border-radius:inherit;
}
.rn-flagge img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:.32; filter:saturate(1.1) contrast(1.02);
  /* Spaet einblenden, damit die Schrift nie gegen Farbe kaempfen muss.
     Erst ab zwei Dritteln der Flaeche wird die Flagge sichtbar. */
  -webkit-mask-image:linear-gradient(100deg, transparent 22%, #000 92%);
          mask-image:linear-gradient(100deg, transparent 22%, #000 92%);
}
/* Zweite Lage: sanft in die Kachelfarbe, damit keine Kante entsteht */
.rn-flagge::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,
    var(--surface) 0%, rgba(38,38,38,.82) 30%, rgba(38,38,38,.22) 70%,
    rgba(38,38,38,0) 100%);
}

/* --- Kopf der Rennseite: Flagge als breites Band ------------------- */
.rn-kopf{
  position:relative; overflow:hidden;
  border-radius:calc(var(--r) * 1.4);
  background:var(--surface);
  border:1px solid var(--line);
  padding:clamp(22px,3.4vw,40px);
  margin-bottom:clamp(20px,3vw,32px);
}
.rn-kopf .rn-flagge{ width:52%; }
.rn-kopf .rn-flagge img{ opacity:.26; }
.rn-kopf .rn-flagge::after{
  background:linear-gradient(100deg,
    var(--surface) 8%, rgba(38,38,38,.6) 40%, rgba(38,38,38,0) 78%);
}
.rn-kopf > div{ position:relative; z-index:1; }
.rn-kopf h1{ margin:0 0 14px; }
@media (max-width:620px){
  .rn-kopf .rn-flagge{ width:70%; }
  .rn-kopf .rn-flagge img{ opacity:.26; }
}

/* --- Countdown ---------------------------------------------------- */
.rn-uhr{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:0 0 clamp(26px,3.6vw,40px);
}
.rn-uhr span{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  min-width:68px; padding:12px 14px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r);
}
.rn-uhr b{
  font-size:clamp(23px,3vw,31px); font-weight:900; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.rn-uhr i{
  font-style:normal; font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-faint);
}
.rn-uhr-live{
  display:inline-block; padding:13px 22px; border-radius:999px;
  background:var(--red); color:#fff; font-weight:900; font-size:16px;
  letter-spacing:.04em; animation:rn-puls 1.4s ease-in-out infinite;
}

/* --- Kacheln: Uebersicht und Saison gleich aufgebaut --------------- */
.rn-kacheln,
.rn-saison{
  list-style:none; padding:0; margin:0; display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(285px,1fr));
}
.rn-kacheln a,
.rn-saison-kachel{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:4px; height:100%;
  padding:20px 22px; padding-right:38%;
  background:var(--surface);
  border:1px solid var(--line); border-radius:calc(var(--r) * 1.15);
  text-decoration:none;
  transition:border-color var(--med), transform var(--med);
}
.rn-kacheln a:hover{ border-color:var(--red); transform:translateY(-2px); }
/* Die Flagge MUSS hier ausgenommen werden. Ohne das :not() setzt
   diese Regel sie auf position:relative und meine absolute
   Positionierung greift nicht mehr. Genau so ist es am 16.09.
   passiert: Die Flagge hing als Block ueber dem Text. */
.rn-kacheln a > *:not(.rn-flagge),
.rn-saison-kachel > *:not(.rn-flagge){ position:relative; z-index:1; }

.rn-kacheln b,
.rn-saison-kachel b{
  font-size:19px; color:var(--ink); letter-spacing:-.015em;
  line-height:1.15; font-weight:800;
}
.rn-kacheln span:not(.rn-sprint),
.rn-saison-wann{ font-size:14px; color:var(--ink-dim); }
.rn-saison-nr{
  font-size:11px; font-weight:900; letter-spacing:.16em;
  color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
.rn-saison-strecke{ font-size:13px; color:var(--ink-faint); }
.rn-saison-wann{ margin-top:5px; color:var(--ink); font-weight:700; }

.rn-sprint{
  align-self:flex-start; margin:3px 0 1px;
  display:inline-block; padding:3px 9px;
  border:1px solid var(--red); border-radius:999px;
  font-size:10px; font-weight:900; letter-spacing:.12em;
  text-transform:uppercase; color:#FF6A72;
  background:rgba(227,6,19,.12);
}

/* --- Banner auf die naechste Saison ------------------------------- */
.rn-saisonbanner{
  position:relative; overflow:hidden; display:block;
  margin:0 0 clamp(24px,3.2vw,36px); padding:22px 26px;
  background:linear-gradient(100deg, #2A1113 0%, var(--surface) 62%);
  border:1px solid rgba(227,6,19,.45);
  border-radius:calc(var(--r) * 1.15);
  text-decoration:none;
  transition:border-color var(--med), transform var(--med);
}
.rn-saisonbanner:hover{ border-color:var(--red); transform:translateY(-2px); }
/* Zielflaggen-Karo als Kante, dieselbe Sprache wie im Fuss der Startseite */
.rn-saisonbanner::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:10px;
  background-image:
    linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%),
    linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%);
  background-size:10px 10px; background-position:0 0,5px 5px;
  background-color:#111; opacity:.85;
}
.rn-saisonbanner b{
  display:block; padding-left:14px;
  font-size:clamp(17px,2.2vw,21px); font-weight:900; color:var(--ink);
  letter-spacing:-.015em;
}
.rn-pfeil{ display:inline-block; transition:transform var(--med); }
.rn-saisonbanner span{
  display:inline-flex; align-items:center; gap:8px; padding-left:14px;
  margin-top:5px; font-size:14px; color:var(--ink-dim); font-weight:600;
}
.rn-saisonbanner:hover .rn-pfeil{ transform:translateX(4px); }

@media (prefers-reduced-motion: reduce){
  .rn-kacheln a:hover,.rn-saisonbanner:hover{ transform:none; }
}