@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* === CSS VARIABLES === */
:root {
  --color-black:       #000000;
  --color-white:       #FFFFFF;
  --color-bg:          #FFFFFF;
  --color-surface:     #FFFFFF;
  --color-border:      #E0E0E0;
  --color-text:        #1A1A1A;
  --color-text-muted:  #6B6B6B;
  --color-fia:         #0F2C5C;
  --color-f1-red:      #CE2E1E;
  /* Teamfarben (Quelle: Teamfarben.pdf) */
  --team-mercedes:      #00D7B6;
  --team-red-bull:      #152EFF;
  --team-ferrari:       #841B1D;
  --team-mclaren:       #F47600;
  --team-alpine:        #FC88BD;
  --team-aston-martin:  #229971;
  --team-williams:      #61BDF8;
  --team-haas:          #9C9FA2;
  --team-alphatauri:    #DBEDFC;
  --team-racing-bulls:  #FBD802;
  --team-alfa:          #FA050D;
  --team-kick-sauber:   #67DE44;
  --team-renault:       #FFFF00;
  --team-racing-point:  #FC00BD;
  --team-cadillac:      #DBEDFC;
  --team-audi:          #FA050D;
  /* Header/hero/footer background image */
  --bg-img: url('../Weittere Bilder/hintergrund-web.jpg');
}

/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

/* Auth-Guard: geschützte Seiten sind unsichtbar bis JS die Session bestätigt */
body[data-auth-required="true"] { visibility: hidden; }

body {
  font-family: 'Titillium Web', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ===================================================================
   HEADER / HERO BACKGROUND
   .top-wrapper shows the image via cover (no tiling at any viewport).
   .sticky-bar is transparent so the wrapper's bg shines through seamlessly.
   JS adds .has-bg when scrolled so the sticky-bar gets a dark fallback.
   =================================================================== */
.top-wrapper {
  background-image: var(--bg-img);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.sticky-bar {
  background: transparent;
}

.sticky-bar.has-bg {
  background: #111111;
}

.page-hero {
  background: transparent;
}

.site-footer {
  background-image: var(--bg-img);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

/* Children inside sticky-bar are transparent → sticky-bar bg shines through */
.site-header,
.main-nav {
  background: transparent;
}

/* === STICKY WRAPPER === */
.sticky-bar {
  position: sticky;
  top: 0;
  z-index: 200;
}

/* === ROW 1 — SITE HEADER === */
.site-header {
  padding: 0 1.5rem;
}

.header-inner {
  display: flex;
  align-items: stretch;
  min-height: 56px;
}

.header-logos {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  padding: 0.65rem 0;
}

.header-logo-link {
  display: flex;
  align-items: center;
  transition: opacity 0.15s;
}
.header-logo-link:hover { opacity: 0.8; }

.header-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
}

/* === MAIN NAVIGATION (inside header row) === */
.main-nav {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.nav-inner {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  position: relative;
}

.nav-list {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow: visible;
}

.nav-list > li {
  position: relative;
  display: flex;
  align-items: stretch;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 0.9rem 0.85rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-white);
  border-bottom-color: var(--color-f1-red);
}

/* === DROPDOWN (hover only, no JS toggle) === */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  cursor: pointer;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-image: linear-gradient(rgba(0,0,0,0.92), rgba(0,0,0,0.92)), var(--bg-img);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  border-top: 3px solid var(--color-f1-red);
  min-width: 260px;
  z-index: 300;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  list-style: none;
}

.nav-dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.dropdown-menu li:last-child { border-bottom: none; }

.dropdown-menu li a {
  display: block;
  padding: 0.75rem 1.25rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.85);
  transition: background 0.12s, color 0.12s, padding-left 0.12s;
}
.dropdown-menu li a:hover {
  background: rgba(0,0,0,0.25);
  color: var(--color-white);
  padding-left: 1.5rem;
}

/* === HAMBURGER OVERFLOW BUTTON === */
.nav-overflow-btn {
  display: none;
  align-items: center;
}

/* Stronger selector to override .nav-list > li { position: relative } */
.nav-list > li.nav-overflow-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}

.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0.9rem 0.85rem;
  background: none;
  border: none;
  cursor: pointer;
  height: 100%;
}

.hamburger-btn .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255, 255, 255, 0.85);
  transition: background 0.15s;
}
.hamburger-btn:hover .bar { background: var(--color-white); }

/* Overflow dropdown — Hintergrund image */
.overflow-panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background-image: linear-gradient(rgba(0,0,0,0.92), rgba(0,0,0,0.92)), var(--bg-img);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  border-top: 3px solid var(--color-f1-red);
  min-width: 200px;
  z-index: 300;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.nav-overflow-btn.open .overflow-panel {
  display: block;
}

.overflow-menu {
  list-style: none;
}

.overflow-menu li {
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.overflow-menu li:last-child { border-bottom: none; }

.overflow-menu li a {
  display: block;
  padding: 0.75rem 1.25rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  transition: color 0.12s, background 0.12s, padding-left 0.12s;
}
.overflow-menu li a:hover {
  color: var(--color-white);
  background: rgba(0,0,0,0.25);
  padding-left: 1.5rem;
}

/* === NAV ARROW (▼ after "Web" in row 2, 50% smaller) === */
.nav-arrow {
  font-size: 0.75em;
  vertical-align: middle;
  margin-left: 0.15em;
}

/* === NAV BADGE (rotes Ausrufezeichen) === */
.nav-badge {
  display: inline-block;
  color: var(--color-f1-red);
  font-weight: 900;
  font-size: 1.5em;
  margin-left: 0.2em;
  line-height: 1;
  vertical-align: middle;
}

/* === OVERFLOW EXPAND (Web sub-items in hamburger menu) === */
.overflow-item-row {
  display: flex;
  align-items: stretch;
}

.overflow-item-row > a {
  flex: 1;
  display: block;
  padding: 0.75rem 1.25rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  transition: color 0.12s, background 0.12s;
}
.overflow-item-row > a:hover {
  color: var(--color-white);
  background: rgba(0,0,0,0.25);
}

.overflow-expand-btn {
  background: none;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  padding: 0 0.85rem;
  color: rgba(255,255,255,0.5);
  font-size: 0.55rem;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: color 0.12s, transform 0.15s;
  transform-origin: center;
}
.overflow-expand-btn:hover { color: var(--color-f1-red); }
.overflow-expand-btn.expanded { transform: rotate(180deg); }

.overflow-sub-list {
  list-style: none;
  background-image: linear-gradient(rgba(0,0,0,0.92), rgba(0,0,0,0.92)), var(--bg-img);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.overflow-sub-list li { border-bottom: 1px solid rgba(255,255,255,0.1); }
.overflow-sub-list li:last-child { border-bottom: none; }
.overflow-sub-list li a {
  display: block;
  padding: 0.6rem 1.5rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
  transition: color 0.12s, background 0.12s;
}
.overflow-sub-list li a:hover {
  color: var(--color-white);
  background: rgba(0,0,0,0.25);
}

/* === ROW 3 — PAGE HERO (-30% height) === */
.page-hero {
  padding: 0.74rem 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.page-hero-inner {
  text-align: center;
}

.page-hero-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-f1-red);
  margin-bottom: 0.4rem;
}
.page-hero-label a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s;
}
.page-hero-label a:hover { opacity: 0.7; }

.page-hero-divider {
  width: 36px;
  height: 3px;
  background: var(--color-f1-red);
  margin: 0 auto 0.65rem;
}

.page-hero-title {
  font-size: 2.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-white);
}

/* === MAIN CONTENT === */
main { flex: 1; }

/* === PLACEHOLDER === */
.placeholder-content {
  padding: 4rem 2rem;
}

.placeholder-inner {
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-f1-red);
  background: var(--color-surface);
  padding: 3rem 2rem;
  text-align: center;
}

.placeholder-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.15;
}

.placeholder-text {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.placeholder-badge {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.4rem 1rem;
  background: var(--color-black);
  color: rgba(255,255,255,0.5);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* === FOOTER === */
.site-footer {
  padding: 1.25rem 2rem;
  margin-top: auto;
}

.footer-inner {
}

.footer-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 0.85rem;
}

.footer-legal {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .page-hero-title { font-size: 1.75rem; }
}

@media (max-width: 600px) {
  .header-logo { height: 36px; }
  .header-logos { flex-shrink: 1; min-width: 0; }
  .main-nav { min-width: 52px; }
  .page-hero { padding: 0.63rem 1rem; }
  .page-hero-title { font-size: 1.4rem; }
  .placeholder-content { padding: 2rem 1rem; }
}

/* ===================================================================
   ERGEBNISSE – ÜBERSICHTSKARTEN (ergebnisse.html)
   =================================================================== */

.ergebnisse-overview {
  padding: 2.5rem 2rem;
}

.ergebnisse-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
}

.ergebnisse-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  background: var(--color-surface);
  border-top: 4px solid var(--color-f1-red);
  padding: 1.75rem 1rem 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}

.ergebnisse-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

.ergebnisse-card-icon {
  font-size: 2.4rem;
  line-height: 1;
  opacity: 0.8;
}

.ergebnisse-card-body {
  flex: 1;
}

.ergebnisse-card-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-f1-red);
  margin-bottom: 0.35rem;
}

.ergebnisse-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin-bottom: 0.5rem;
  line-height: 1.25;
}

.ergebnisse-card-desc {
  font-size: 0.74rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.ergebnisse-card-arrow {
  font-size: 1.2rem;
  color: var(--color-f1-red);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s;
}

.ergebnisse-card:hover .ergebnisse-card-arrow {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 700px) {
  .ergebnisse-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .ergebnisse-overview {
    padding: 1.5rem 1rem;
  }
  .ergebnisse-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------
   ERGEBNISSE OVERVIEW – Podest-Zeile (Fahrer links | Teams rechts)
------------------------------------------------------------------- */
.overview-podium-row {
  display: flex;
  gap: 8rem;
  padding: 0 2rem 2.5rem;
}

.overview-podium-col {
  flex: 1;
  min-width: 0;
}

.overview-podium-heading {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.75rem;
  text-align: center;
}

/* -------------------------------------------------------------------
   HOVER-TOOLTIP (folgt Mauszeiger)
------------------------------------------------------------------- */
.ov-tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: #f2f2f2;
  color: #1a1a1a;
  border-radius: 10px;
  padding: 1rem 1.1rem 0.9rem;
  min-width: 220px;
  max-width: 280px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.28);
  font-family: 'Titillium Web', sans-serif;
  line-height: 1.35;
}

/* Zeile 1: Fahrerfoto-Kreis + Team-Logo nebeneinander */
.ov-tt-row1 {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

/* Fahrerfoto im farbigen Kreis */
.ov-tt-photo-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.ov-tt-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Team-Logo (2/3 der Fotogröße) */
.ov-tt-team-logo {
  height: 52px;
  width: auto;
  max-width: 80px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Zeile 2: Flagge + Code + (Nummer) */
.ov-tt-row2 {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: 0.2rem;
}

.ov-tt-flag {
  font-size: 1.2rem;
  line-height: 1;
}

.ov-tt-code {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.ov-tt-num {
  font-size: 1.05rem;
  font-weight: 400;
  color: #555;
}

/* Zeile 3: Vollständiger Name */
.ov-tt-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: #111;
}

/* Zeilen 4+5: Punkte / Siege */
.ov-tt-stat {
  font-size: 0.95rem;
  font-weight: 400;
  color: #333;
  line-height: 1.6;
}
.ov-tt-stat strong {
  font-weight: 700;
  color: #111;
}

/* Team-Tooltip: Logo zentriert, groß */
.ov-tt-team-header {
  display: flex;
  justify-content: center;
  margin-bottom: 0.65rem;
}

.ov-tt-team-logo-big {
  height: 90px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

@media (max-width: 700px) {
  .overview-podium-row {
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 1rem 2rem;
  }
}

/* ===================================================================
   F1 MULTIVIEWER – BUTTON-REIHE (setup-multiviewer.html)
   =================================================================== */

.mv-button-row-wrap {
  padding: 2.5rem 2rem;
}

.mv-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
  align-items: flex-start;
}

.mv-btn {
  display: block;
  flex: 0 0 auto;
  transition: transform 0.15s, box-shadow 0.15s;
}

.mv-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.mv-btn img {
  height: 125px;
  width: auto;
  display: block;
}

@media (max-width: 600px) {
  .mv-button-row-wrap {
    padding: 1.5rem 1rem;
  }
  .mv-btn img {
    height: 110px;
  }
}

/* ===================================================================
   TASTENKOMBINATIONEN (setup-multiviewer-tastenkombinationen.html)
   =================================================================== */

.shortcut-wrap {
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.shortcut-table {
  border-collapse: collapse;
  border: 1px solid #000000;
  background: #ffffff;
  font-family: 'Titillium Web', sans-serif;
  font-size: 1rem;
}

.shortcut-table td {
  border: none;
  padding: 0.3rem 0.6rem;
  line-height: 1.8;
  color: #000000;
}

.shortcut-table .col-key {
  text-align: right;
  font-weight: 600;
}

.shortcut-table .col-sep {
  text-align: center;
  width: 2rem;
  font-weight: 400;
}

.shortcut-table .col-desc {
  text-align: left;
  font-weight: 400;
}

.shortcut-table tr:nth-child(odd) td {
  background: #D9D9D9;
}

/* ===================================================================
   F1 RENNKALENDER (kalender.html)
   =================================================================== */

.calendar-wrap {
  padding: 2rem;
}

/* --- Toolbar --- */
.calendar-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.calendar-year-label {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-f1-red);
}

.calendar-year-select-wrapper {
  position: relative;
}

.calendar-year-select {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--color-black);
  color: var(--color-white);
  border: 2px solid var(--color-f1-red);
  padding: 0.5rem 2.2rem 0.5rem 0.85rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23CE2E1E'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
}

.calendar-year-select:focus {
  outline: 2px solid var(--color-f1-red);
  outline-offset: 2px;
}

.calendar-year-select option {
  background: #111;
  color: var(--color-white);
}

/* --- Card grid --- */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(405px, 1fr));
  gap: 1.25rem;
}

/* --- Race card --- */
.race-card {
  background: var(--color-surface);
  border-left: 4px solid var(--color-f1-red);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}

.race-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

/* Card: dark header strip */
.race-card-header {
  background: #0a0a0a;
  padding: 0.7rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.race-round {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.race-series-logos {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1;
  justify-content: center;
  padding: 0 0.5rem;
}

.race-series-logo {
  height: 18px;
  width: auto;
  object-fit: contain;
  display: block;
}

.race-flag {
  font-size: 1.8rem;
  line-height: 1;
}

/* Card: white body */
.race-card-body {
  padding: 1rem 1rem 1.1rem;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.race-body-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.race-track-img-wrap {
  flex-shrink: 0;
  width: 170px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.race-track-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.race-country {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.3rem;
}

.race-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

.race-circuit {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  flex: 1;
  padding-bottom: 0.75rem;
}

.race-date {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
  padding-top: 0.65rem;
}

.race-sprint-badge {
  display: inline-block;
  background: var(--color-f1-red);
  color: var(--color-white);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  margin-top: 0.55rem;
  align-self: flex-start;
}

/* --- Loading / Error / Empty state --- */
.calendar-state {
  grid-column: 1 / -1;
  padding: 4rem 2rem;
  text-align: center;
}

.calendar-state-text {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.calendar-state--error .calendar-state-text {
  color: var(--color-f1-red);
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .calendar-grid {
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  }
  .race-track-img-wrap {
    width: 130px;
  }
}

@media (max-width: 600px) {
  .calendar-wrap {
    padding: 1.25rem 1rem;
  }
  .calendar-grid {
    grid-template-columns: 1fr;
  }
  .race-track-img-wrap {
    width: 120px;
  }
}

/* ===================================================================
   AUFKLAPPBARER TERMINPLAN
   =================================================================== */

/* Gesamte Karte klickbar */
.race-card {
  cursor: pointer;
}

/* Vergangene Rennen: gedimmt */
.race-card--past {
  opacity: 0.45;
  filter: grayscale(35%);
}

.race-card--past:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

/* Aktuelles Rennen: roter Rahmen + Leuchten */
.race-card--current {
  box-shadow: 0 0 0 2px var(--color-f1-red), 0 6px 24px rgba(206, 46, 30, 0.35);
}

/* Nächstes Rennen: dezentes Leuchten */
.race-card--next {
  box-shadow: 0 4px 20px rgba(206, 46, 30, 0.22);
}

/* Status-Bar oben an der Karte */
.race-status-bar {
  background: var(--color-f1-red);
  color: var(--color-white);
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.28rem 1rem;
  text-align: center;
}

/* Panel (geschlossen → max-height: 0) */
.race-schedule-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  background: var(--color-surface);
}

.race-card.expanded .race-schedule-panel {
  max-height: 900px;
  border-top: 1px solid var(--color-border);
}

/* --- Countdown --- */
.countdown-box {
  background: url('../Weittere Bilder/hintergrund-web.jpg') center center / cover no-repeat;
  border-left: 4px solid var(--color-f1-red);
  padding: 2rem 1.6rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.32rem;
  position: relative;
  text-align: center;
}

.countdown-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  pointer-events: none;
}

.countdown-box > * {
  position: relative;
  z-index: 1;
}

.countdown-label {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-f1-red);
  margin-bottom: 0.08rem;
}

.countdown-session {
  font-family: 'Titillium Web', sans-serif;
  font-size: 1.16rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.countdown-gp {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

.countdown-time-local {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 0.48rem;
}

.countdown-digits {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.16rem;
  flex-wrap: wrap;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-num {
  font-family: 'Titillium Web', sans-serif;
  font-size: 2.56rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  min-width: 2.8ch;
  text-align: center;
  letter-spacing: -0.02em;
}

.countdown-unit-label {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.42rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 0.2rem;
}

.countdown-sep {
  font-family: 'Titillium Web', sans-serif;
  font-size: 2.08rem;
  font-weight: 700;
  color: var(--color-f1-red);
  line-height: 1;
  padding-bottom: 0.4rem;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  user-select: none;
}

/* --- Filter-Tabs --- */
.schedule-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0.75rem 1rem 0;
  border-bottom: 2px solid var(--color-border);
}

.schedule-filter-tab {
  padding: 0.4rem 0.85rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}

.schedule-filter-tab:hover {
  color: var(--color-text);
}

.schedule-filter-tab.active {
  color: var(--color-text);
  border-bottom-color: var(--color-f1-red);
}

/* Tabs ohne F1-Daten: leicht gedimmt */
.schedule-filter-tab--limited {
  opacity: 0.6;
}

.schedule-filter-tab--limited.active {
  opacity: 1;
}

/* --- Tagesstruktur (Spalten) --- */
.schedule-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  padding: 1rem;
}

.schedule-day {
  padding: 0 1rem 0 0;
  border-right: 1px solid var(--color-border);
  min-width: 0;
}

.schedule-day:last-child {
  border-right: none;
  padding-right: 0;
}

.schedule-day-header {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}

/* --- Session-Zeilen --- */
.schedule-session {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid #f4f4f4;
}

.schedule-session:last-child {
  border-bottom: none;
}

/* F1-Logo vor Sessions (kein Hintergrund) */
.schedule-session-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.schedule-session-badge img {
  height: 18px;
  width: auto;
  display: block;
}

.schedule-session-name {
  flex: 1;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--color-text);
  min-width: 0;
  line-height: 1.3;
}

.schedule-session-sep {
  color: #ccc;
  font-weight: 300;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.schedule-session-time {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Info-Nachricht (kein Inhalt / nicht-F1-Tab) --- */
.schedule-info-msg {
  padding: 0.85rem 1rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  font-style: italic;
}

/* --- Responsive: Tage stapeln vertikal --- */
@media (max-width: 600px) {
  .schedule-days {
    grid-template-columns: 1fr;
    padding: 0.75rem;
  }
  .schedule-day {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .schedule-day:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

/* ===================================================================
   PRESSE – SEKTIONEN
   =================================================================== */

.presse-wrap {
  padding: 2.5rem 2rem;
  text-align: center;
}

.presse-inner {
  display: inline-block;
  max-width: 100%;
}

.presse-section {
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 2px solid #aaaaaa;
}

.presse-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.web-full-divider {
  border: none;
  border-top: 2px solid #aaaaaa;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-top: 4rem;
  margin-bottom: 2rem;
}

.presse-section-title {
  font-size: 1.36rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-f1-red);
  margin-bottom: 1rem;
  text-align: center;
}

.presse-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.presse-btn {
  display: block;
  flex: 0 0 auto;
  transition: transform 0.15s, box-shadow 0.15s;
}

.presse-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.presse-btn img {
  height: 100px;
  width: auto;
  display: block;
}

.presse-btn--lg img {
  height: 200px;
  width: auto;
  display: block;
}

.presse-btn-row--spaced {
  margin-bottom: 12rem;
}

@media (max-width: 600px) {
  .presse-wrap {
    padding: 1.5rem 1rem;
  }
  .presse-btn img {
    height: 80px;
  }
  .presse-btn--lg img {
    height: 160px;
  }
}

/* === WEB PAGE BUTTONS === */
.web-btn-row {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: nowrap;
}

/* ===================================================================
   FAHRER WM STAND (ergebnisse-fahrer-wm-stand.html)
   =================================================================== */

.standings-wrap {
  padding: 2rem;
}

/* -----------------------------------------------------------------------
   ZWEI-SPALTEN-LAYOUT: Tabelle links | Podest rechts
----------------------------------------------------------------------- */
/*
  Desktop-Grid:
    [ Tabelle  |  Podest  ]
    [ Tabelle  | Diagramm ]
  Tabelle spannt beide Zeilen; Diagramm füllt die restliche Höhe.
*/
.standings-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "right chart"
    "left  chart";
  column-gap: 2rem;
  row-gap:    1.5rem;
}

/* Fahrer WM Stand: Tabelle links immer voll ausgeschrieben, Podest/Diagramm rechts
   schrumpfen mit. Linke Spalte = Inhaltsbreite der Tabelle (auto, wird nie
   abgeschnitten), rechte Spalte = restlicher Platz (minmax(0,1fr) darf bis 0
   schrumpfen und schützt so die Tabelle). */
.standings-layout--fahrer {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "left right"
    "left chart";
}

.standings-left {
  grid-area: left;
  min-width: 0;
}

.standings-right {
  grid-area: right;
  min-width: 0;
  width: 100%;
}

/* --- Toolbar --- */
.standings-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.standings-year-label {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-f1-red);
}

.standings-year-select-wrapper {
  position: relative;
}

.standings-year-select {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--color-black);
  color: var(--color-white);
  border: 2px solid var(--color-f1-red);
  padding: 0.5rem 2.2rem 0.5rem 0.85rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23CE2E1E'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
}

.standings-year-select:focus {
  outline: 2px solid var(--color-f1-red);
  outline-offset: 2px;
}

.standings-year-select option {
  background: #111;
  color: var(--color-white);
}

/* --- Lade-/Fehlerzustand --- */
.standings-state {
  padding: 4rem 2rem;
  text-align: center;
}

.standings-state-text {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.standings-state--error .standings-state-text {
  color: var(--color-f1-red);
}

/* --- Tabellen-Container --- */
.standings-table-wrap {
  overflow-x: auto;
  /* kein flex-center mehr: Tabelle bleibt linksbündig */
}

/* --- Tabelle --- */
.standings-table {
  border-collapse: collapse;
  width: auto;          /* schrumpft auf Inhaltsbreite */
  min-width: 540px;     /* verhindert zu schmale Darstellung */
  font-family: 'Titillium Web', sans-serif;
}

/* Header */
.standings-th {
  background: #0a0a0a;
  color: rgba(255,255,255,0.7);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.75rem 1rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 3px solid var(--color-f1-red);
}

.standings-th--pos,
.standings-th--photo,
.standings-th--wins,
.standings-th--points {
  text-align: center;
}

.standings-th--photo {
  width: 72px;
}

.standings-th--team {
  text-align: center;
}

/* Zeilen */
.standings-row {
  border-bottom: 1px solid var(--color-border);
  transition: background 0.1s;
}

.standings-row:nth-child(even) {
  background: #f9f9f9;
}

.standings-row:nth-child(odd) {
  background: #ffffff;
}

.standings-row:hover {
  background: #f0f0f0;
}

/* Podium: farbiger linker Rand */
.standings-row.standings-pos-1 { border-left: 4px solid #d4af37; }
.standings-row.standings-pos-2 { border-left: 4px solid #9e9e9e; }
.standings-row.standings-pos-3 { border-left: 4px solid #8c6239; }

/* Zellen allgemein */
.standings-cell {
  padding: 0.55rem 0.9rem;
  font-size: 0.85rem;
  color: var(--color-text);
  white-space: nowrap;
  vertical-align: middle;
}

.standings-cell--pos,
.standings-cell--wins,
.standings-cell--points {
  text-align: center;
}

/* --- Positions-Badge --- */
.standings-pos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 2px;
}

.standings-pos-1 .standings-pos-badge { background: #d4af37; color: #fff; }
.standings-pos-2 .standings-pos-badge { background: #9e9e9e; color: #fff; }
.standings-pos-3 .standings-pos-badge { background: #8c6239; color: #fff; }

/* --- Foto-Zelle --- */
.standings-cell--photo {
  text-align: center;
  padding: 0.4rem 0.6rem;
  width: 72px;
}

/* Hintergrundkreis + Fahrerfoto */
.driver-photo-wrap {
  display: inline-block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  /* background-color wird per inline-style gesetzt (Teamfarbe) */
}

.driver-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Teamlogo innerhalb des farbigen Kreises (vollständig sichtbar) */
.driver-photo-wrap .miami-team-logo-circle {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
  box-sizing: border-box;
  display: block;
}

/* --- Fahrer-Zelle --- */
.standings-cell--driver {
  /* bleibt display: table-cell – vertical-align: middle greift */
}

/* Innerer Flex-Container für Flagge + Kürzel + Name + Nummer */
.driver-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.standings-flag {
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
}

.standings-code {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  flex-shrink: 0;
  min-width: 2.2rem;
}

.standings-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
}

.standings-num {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* --- Team-Logo-Zelle --- */
.standings-cell--team {
  text-align: center;
  padding: 0.4rem 0.8rem;
}

.standings-team-logo {
  height: 32px;
  width: auto;
  max-width: 100px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

.standings-team-fallback {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* --- Siege + Punkte --- */
.standings-cell--wins {
  font-size: 0.85rem;
  text-align: center;
}

.standings-cell--points {
  font-weight: 700;
  font-size: 0.92rem;
  text-align: center;
}

/* --- Differenz-Spalte --- */
.standings-th--diff {
  text-align: center;
}

.standings-cell--diff {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Führender Fahrer: "–" dezenter */
.standings-pos-1 .standings-cell--diff {
  color: #bbb;
}

/* ===================================================================
   PODEST  –  absolut positionierte Fahrer über dem Bild
   =================================================================== */

/*
  Das Podest-Bild hat Seitenverhältnis 3089:779 ≈ 3.97:1
  → Bildhöhe = Containerbreite × (779/3089) = Containerbreite × 0.252

  Plattform-Oberkanten im Bild (gemessen, % von oben):
    P1 (Mitte):  y ≈   0 %  →  100 % der Bildhöhe über Bildunterkante
    P2 (links):  y ≈  45 %  →   55 % der Bildhöhe über Bildunterkante
    P3 (rechts): y ≈  70 %  →   30 % der Bildhöhe über Bildunterkante

  Der Container bekommt extra Platz oben (padding-top) für die Fahrerfotos.
  Höhe des Containers = padding-top + Bildhöhe.

  Wir wählen padding-top = 45 % der Containerbreite
  → Containergesamthöhe ≈ 45 % + 25,2 % = 70,2 % der Breite
  → aspect-ratio ≈ 100 : 70  →  wir nutzen padding-bottom für die Höhe.

  `bottom` in % ist immer % der CONTAINERHÖHE (= 70.2 % der Breite).
  Bildhöhe / Containerhöhe = 0.252 / 0.702 = 35.9 % ≈ 36 %

  Plattform-Oberkanten als `bottom`-Werte:
    P1 : 36 %  (Bildober­kante = P1-Plattformkante)
    P2 : 36 % × 0.55 = 19.8 % ≈ 20 %
    P3 : 36 % × 0.30 = 10.8 % ≈ 11 %
*/

.podium-section {
  position: relative;     /* scrollt normal mit – Podest verschwindet nach oben */
  width: 100%;
  padding-bottom: 50%;    /* Containerhöhe H = 50 % der Breite W */
  user-select: none;
  overflow: visible;
}

/* Das Bild liegt an der Unterkante */
.podium-bg-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* Gemeinsame Slot-Basis */
.podium-slot {
  position: absolute;
  display: flex;
  align-items: flex-end;   /* Foto bündig an der Unterkante des Slots */
  justify-content: center;
  overflow: visible;
}

/*
  Neue Berechnungsgrundlage: H = 50 % × W
  Bildhöhe (rendered) = W × 0,252 = 50,4 % × H

  Plattform-Oberkanten im Bild (geschätzt):
    P1 : y =   0 % → 100 % Bildhöhe von unten  → bottom = 50,4 % × 1,00 ≈ 50 %
    P2 : y ≈  36 % →  64 % Bildhöhe von unten  → bottom = 50,4 % × 0,64 ≈ 32 %
    P3 : y ≈  62 % →  38 % Bildhöhe von unten  → bottom = 50,4 % × 0,38 ≈ 19 %
*/

/* P1 – Mitte, höchste Plattform */
.podium-slot-p1 {
  left: 50%;
  transform: translateX(-50%);
  width: 33%;
  bottom: 50%;
  height: 46%;
}

/* P2 – links, mittlere Plattform
   Pixelanalyse: y=261 von 779 → 66,5 % der Bildhöhe über Bildunterkante
   bottom = 50,4 % × 0,665 ≈ 33,5 % */
.podium-slot-p2 {
  left: 14.6%;
  transform: translateX(-50%);
  width: 28%;
  bottom: 33.5%;
  height: 42%;
}

/* P3 – rechts, niedrigste Plattform
   Pixelanalyse: y=389 von 779 → 50,1 % der Bildhöhe über Bildunterkante
   bottom = 50,4 % × 0,501 ≈ 25,3 % */
.podium-slot-p3 {
  left: 84.8%;
  transform: translateX(-50%);
  width: 28%;
  bottom: 25.3%;
  height: 38%;
}

/* Fahrerfoto füllt den Slot höhenbasiert */
.podium-driver-img {
  display: block;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* ===================================================================
   RESPONSIVE: Layout auf kleinen Screens stapeln
   =================================================================== */
@media (max-width: 900px) {
  /* Mobil: einzelne Spalte – Podest oben, Tabelle mitte, Diagramm unten */
  .standings-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "right"
      "left"
      "chart";
    row-gap: 1rem;
  }

  .standings-right {
    width: 100%;
  }

  /* Kein Sticky auf Mobil – ABER position: relative beibehalten!
     Sonst verlieren die absolute-Kinder (Fahrer-Slots) ihren
     Positioning-Context und überlappen die Tabelle. */
  .podium-section {
    position: relative;
    overflow: hidden;  /* Fotos nicht außerhalb des Containers anzeigen */
  }
}

@media (max-width: 700px) {
  .standings-wrap {
    padding: 1.25rem 1rem;
  }

  .standings-cell {
    font-size: 0.76rem;
    padding: 0.45rem 0.55rem;
  }

  .standings-th {
    font-size: 0.56rem;
    padding: 0.6rem 0.55rem;
  }

  .driver-photo-wrap {
    width: 44px;
    height: 44px;
  }

  .standings-cell--photo {
    width: 54px;
    padding: 0.35rem 0.4rem;
  }

  .standings-team-logo {
    height: 26px;
    max-width: 80px;
  }
}

@media (max-width: 480px) {
  .standings-num {
    display: none;
  }

  .driver-photo-wrap {
    width: 38px;
    height: 38px;
  }
}

/* ===================================================================
   TEAM WM STAND – Team-Logo-Kreis (statt Fahrerfoto)
   =================================================================== */

.team-logo-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.team-logo-circle-img {
  width: 82%;
  height: auto;
  max-height: 82%;
  object-fit: contain;
  display: block;
}

@media (max-width: 700px) {
  .team-logo-circle {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 480px) {
  .team-logo-circle {
    width: 38px;
    height: 38px;
  }
}

/* --- Team-Logo auf dem Podest --- */
.podium-team-img {
  display: block;
  max-width: 88%;
  max-height: 65%;
  width: auto;
  height: auto;
  object-fit: contain;
  align-self: center;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.45));
}

/* ===================================================================
   SESSIONS ERGEBNISSE  (ergebnisse-sessions.html)
   =================================================================== */

.sessions-wrap {
  padding: 2rem;
}

/* --- Toolbar: Jahr + Rennen nebeneinander, zentriert --- */
.sessions-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.sessions-race-select {
  min-width: 260px;
}

/* --- Session-Buttons, zentriert --- */
.sessions-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  justify-content: center;
}

.sessions-btn {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #0a0a0a;
  color: rgba(255, 255, 255, 0.75);
  border: 2px solid #333;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sessions-btn:hover {
  background: #222;
  color: var(--color-white);
  border-color: #666;
}

.sessions-btn.active {
  background: var(--color-f1-red);
  color: var(--color-white);
  border-color: var(--color-f1-red);
}

/* --- Session-Info Überschrift + Grid (zentriert, kompakter) --- */
.sessions-info-section {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sessions-info-heading {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-f1-red);
  margin-bottom: 0.6rem;
  text-align: center;
}

.sessions-info-grid {
  /* Wrapper-Div, gefüllt via JS */
}

.sessions-info-grid-inner {
  width: 100%;
  max-width: 860px;
}

.sessions-info-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--color-border);
  border-bottom: none;
}

.sessions-info-cell {
  display: flex;
  flex-direction: column;
  padding: 0.45rem 0.85rem;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: #fafafa;
}

.sessions-info-cell:nth-child(3n) {
  border-right: none;
}

.sessions-records-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--color-border);
  border-top: none;
}

.sessions-record-cell {
  display: flex;
  flex-direction: column;
  padding: 0.45rem 0.85rem;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: #efefef;
}

.sessions-record-cell:last-child {
  border-right: none;
}

.sessions-info-label {
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.1rem;
}

.sessions-info-value {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
}

/* --- Lade-/Fehlerzustand --- */
.sessions-state {
  padding: 3rem 2rem;
  text-align: center;
}

.sessions-state-text {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.sessions-state--error .sessions-state-text {
  color: var(--color-f1-red);
}

/* --- Tabellen-Container: zentriert, Breite auf Inhalt begrenzt --- */
.sessions-table-wrap {
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Hinweis bei Live-/Backup-Daten (OpenF1) --- */
.sessions-live-note {
  max-width: 760px;
  margin: 0 auto 1rem;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(206, 46, 30, 0.5);
  border-left: 4px solid var(--color-f1-red);
  border-radius: 6px;
  background: rgba(206, 46, 30, 0.08);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
  text-align: center;
}

/* --- Hinweis bei unvollständigen Reifendaten (OpenF1-Lücken) --- */
.sessions-tyre-note {
  max-width: 760px;
  margin: 0 auto 1rem;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(214, 158, 0, 0.55);
  border-left: 4px solid #d69e00;
  border-radius: 6px;
  background: rgba(214, 158, 0, 0.10);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
  text-align: center;
}

/* --- Tabelle: Breite auf Inhalt, nicht 100% --- */
.sessions-table {
  border-collapse: collapse;
  width: auto;
  min-width: 580px;
  font-family: 'Titillium Web', sans-serif;
}

/* Header */
.sessions-th {
  background: #0a0a0a;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.75rem 0.9rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 3px solid var(--color-f1-red);
}

.sessions-th--sortable {
  user-select: none;
}

.sessions-th--sortable:hover {
  background: #1a1a1a;
  color: var(--color-white);
}

.sort-arrow {
  font-size: 0.65em;
  vertical-align: middle;
  opacity: 0.6;
}

.sessions-th--pos,
.sessions-th--photo,
.sessions-th--num,
.sessions-th--laps,
.sessions-th--gap,
.sessions-th--int,
.sessions-th--kmh,
.sessions-th--laptime {
  text-align: center;
}

.sessions-th--driver {
  text-align: left;
  min-width: 180px;
}

.sessions-th--team {
  text-align: center;
}

.sessions-th--photo {
  width: 72px;
}

/* --- Zeilen --- */
.sessions-row {
  border-bottom: 1px solid var(--color-border);
  transition: background 0.1s;
}

.sessions-row:nth-child(even) { background: #BFBFBF; }
.sessions-row:nth-child(odd)  { background: #D9D9D9; }
.sessions-row:hover           { background: #ADADAD; }

.sessions-pos-1 { border-left: 4px solid #d4af37; }
.sessions-pos-2 { border-left: 4px solid #9e9e9e; }
.sessions-pos-3 { border-left: 4px solid #8c6239; }

.sessions-pos-1 .standings-pos-badge { background: #d4af37; color: #fff; }
.sessions-pos-2 .standings-pos-badge { background: #9e9e9e; color: #fff; }
.sessions-pos-3 .standings-pos-badge { background: #8c6239; color: #fff; }

/* --- Zellen --- */
.sessions-cell {
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  color: var(--color-text);
  white-space: nowrap;
  vertical-align: middle;
}

.sessions-cell--pos,
.sessions-cell--num,
.sessions-cell--team {
  text-align: center;
}

.sessions-cell--photo {
  text-align: center;
  padding: 0.4rem 0.6rem;
  width: 72px;
}

.sessions-cell--laptime {
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Fahrer-Kürzel und -Name in der Sessions-Tabelle doppelt so groß
   (nur hier – die .standings-* Klassen werden auch auf anderen Seiten genutzt) */
.sessions-cell--driver .standings-code {
  font-size: 1.5rem;
  min-width: 4.4rem;
}

.sessions-cell--driver .standings-name {
  font-size: 1.76rem;
}

/* --- Reifenstrategie-Spalte --- */
/* Feste Gesamtbreite; die Leiste füllt sie zu 100 %, die Stints teilen sie
   anteilig nach Rundenzahl auf (flex-grow = Runden). */
.sessions-th--tyres {
  text-align: left;
  width: 360px;
  min-width: 360px;
}

.sessions-cell--tyres {
  width: 360px;
  text-align: left;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.tyre-strategy {
  display: flex;
  width: 100%;
  gap: 3px;
  align-items: stretch;
}

/* Einzelner Reifen-Stint: ausgefüllt = neu, nur Rahmen = gebraucht.
   Breite proportional zur Rundenzahl (flex-grow inline gesetzt). */
.tyre-box {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 2px;
  border-radius: 4px;
  border: 2px solid transparent;
  background: transparent;
  font-size: 1.61rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-sizing: border-box;
  overflow: hidden;
  color: #000 !important;
}

/* gebrauchter Reifen: kein eigener Hintergrund → die Tabellenzeilen-Farbe
   bleibt sichtbar (nur der farbige Rahmen kennzeichnet die Mischung) */
.tyre-box--used {
  background: transparent;
}

.tyre-none {
  color: var(--color-text-muted, #999);
}

/* =======================================================================
   REIFEN LIVE – eigene Seite (reifen-live.html)
======================================================================= */
.rl-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

/* Reifen Live: maximal kompakter Kopfbereich, damit alle 22 Fahrer ohne
   Scrollen ins Fenster passen (nur auf dieser Seite via body.rl-page).
   Die große Hero-Überschrift entfällt hier – der Kontext steht im Menü/Tab. */
.rl-page .page-hero { display: none; }
.rl-page .rl-wrap { padding-top: 0.6rem; padding-bottom: 0.8rem; }
.rl-page .sessions-toolbar { margin-bottom: 0.5rem; }
.rl-page #rl-buttons { margin-bottom: 0.45rem; }
.rl-page .sessions-btn { padding: 0.4rem 0.8rem; }

/* Status-/Live-Leiste */
.rl-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0.35rem 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}

.rl-status-msg { color: var(--color-text-muted, #6b6b6b); }

.rl-status-race { font-weight: 700; }

.rl-status-upd {
  font-size: 0.78rem;
  color: var(--color-text-muted, #6b6b6b);
}

.rl-status--live .rl-live-text { color: var(--color-f1-red); font-weight: 700; letter-spacing: 0.08em; }

.rl-live-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--color-f1-red);
  display: inline-block;
  animation: rl-pulse 1.2s ease-in-out infinite;
}
@keyframes rl-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}

.rl-refresh {
  border: 1px solid var(--color-border, #e0e0e0);
  background: #fff;
  color: var(--color-text);
  border-radius: 6px;
  width: 30px; height: 30px;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}
.rl-refresh:hover { background: #f0f0f0; }

/* Hinweis-Banner (Live läuft / wartet auf Start) – auf Wunsch komplett
   ausgeblendet (die „● LIVE"-Anzeige in der Statuszeile bleibt erhalten). */
.rl-live-hint {
  display: none !important;
  align-items: center;
  gap: 0.55rem;
  justify-content: center;
  max-width: 760px;
  margin: 0 auto 0.6rem;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.rl-live-hint[hidden] { display: none; }

.rl-live-hint--live {
  border: 1px solid rgba(206, 46, 30, 0.5);
  border-left: 4px solid var(--color-f1-red);
  background: rgba(206, 46, 30, 0.08);
  color: var(--color-text);
}

.rl-live-hint--waiting {
  border: 1px solid var(--color-border, #e0e0e0);
  background: #f4f4f4;
  color: var(--color-text-muted, #6b6b6b);
}

/* Fahrer-Liste
   Höhe der Zeilen auf ~60 % reduziert (Foto/Innenabstand/Schrift/Reifen-Box
   kleiner). Die BREITE bleibt unverändert: rl-pos/rl-code-Breiten und die
   flexible Reifenleiste sind nicht angetastet. */
.rl-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px;
  border-radius: 5px;
  background: #D9D9D9;
}
.rl-row:nth-child(even) { background: #BFBFBF; }

.rl-pos {
  width: 1.8rem;
  flex-shrink: 0;
  text-align: center;
  font-weight: 700;
  font-size: 1.04rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* Fahrerbilder klein gehalten – die Reifenbalken bestimmen die Zeilenhöhe.
   Größen identisch in Desktop- und Mobil-Ansicht. */
.rl-photo {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-photo--fb span {
  font-size: 0.44rem;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.04em;
}

.rl-code {
  width: 3.6rem;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.rl-bar {
  flex: 1 1 auto;
  min-width: 0;
}

/* Reifenbalken gut lesbar (groß); die Zeilenhöhe wird hierüber bestimmt.
   Größen identisch in Desktop- und Mobil-Ansicht. */
.rl-row .tyre-box {
  height: 33px;
  font-size: 1.12rem;
}

@media (max-width: 600px) {
  /* Mobil: Inhalte ~30 % größer als die kompakteste Variante (besser lesbar).
     Fahrerbilder klein gehalten; die Reifenbalken bestimmen die Zeilenhöhe. */
  .rl-row { gap: 8px; padding: 2px 8px; }
  .rl-photo { width: 22px; height: 22px; }
  .rl-code { width: 3.6rem; font-size: 1.06rem; }
  .rl-pos { width: 1.8rem; font-size: 1.04rem; }
  .rl-row .tyre-box { height: 33px; font-size: 1.12rem; }

  /* Kopfbereich straffen, damit auf dem schmalen Schirm alle 22 Zeilen passen */
  .rl-page .rl-live-hint { display: none; }      /* langer Banner – LIVE-Status bleibt in der Zeile darüber */
  .rl-page .rl-wrap { padding-top: 0.3rem; }
  .rl-page .sessions-toolbar { margin-bottom: 0.3rem; }
  .rl-page #rl-buttons { margin-bottom: 0.3rem; gap: 4px; }
  .rl-page .sessions-btn { padding: 0.3rem 0.55rem; font-size: 0.7rem; }
  .rl-page .rl-status { margin: 0.25rem 0 0.4rem; }
}

/* Hover-Tooltip für Reifen-Stints (am <body>, position:fixed).
   Doppelte Größe; Hintergrund wird per JS in der Reifenfarbe gesetzt. */
.tyre-tooltip {
  position: fixed;
  z-index: 9999;
  display: none;
  pointer-events: none;
  background: #111;
  color: #fff;
  font-size: 1.48rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 10px 20px;
  border-radius: 7px;
  white-space: nowrap;
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
}

/* Platzhalter wenn kein Foto vorhanden */
.sessions-photo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sessions-photo-code {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.04em;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .sessions-info-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .sessions-info-cell:nth-child(3n) {
    border-right: 1px solid var(--color-border);
  }
  .sessions-info-cell:nth-child(2n) {
    border-right: none;
  }
  .sessions-info-grid-inner {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .sessions-wrap {
    padding: 1.25rem 1rem;
  }
  .sessions-info-row {
    grid-template-columns: 1fr 1fr;
  }
  .sessions-records-row {
    grid-template-columns: 1fr;
  }
  .sessions-record-cell {
    border-right: none;
  }
  .sessions-cell {
    font-size: 0.76rem;
    padding: 0.4rem 0.55rem;
  }
  .sessions-th {
    font-size: 0.56rem;
    padding: 0.6rem 0.55rem;
  }
  .sessions-race-select {
    min-width: 180px;
  }
}

/* ===================================================================
   STARTGRID  –  Startaufstellung / Sprint Startaufstellung
   =================================================================== */

.sg-display {
  max-width: 920px;
  margin: 0 auto;
  padding: 0.5rem 0.5rem 1.5rem;
}

/* Jedes Paar = eine Startreihe (2 Fahrzeuge) */
.sg-pair {
  display: flex;
  gap: 0;
  align-items: flex-start;
  margin-bottom: 0;
  justify-content: space-between;
}

/* Ungerade Position (links): fixe Breite 45%, bündig links */
.sg-car--odd {
  flex: 0 0 45%;
  margin-top: 0;
}

/* Gerade Position (rechts): fixe Breite 45%, an rechtem Rand → 10% Lücke in der Mitte */
.sg-car--even {
  flex: 0 0 45%;
  margin-top: 1.4rem;
}

/* Leerer Platz wenn nur 1 Fahrzeug in einer Reihe */
.sg-car-empty {
  flex: 0 0 45%;
}

/* === Fahrzeug-Karte === */
.sg-car {
  /* flex-Größe wird durch .sg-car--odd / .sg-car--even gesteuert */
  min-width: 0;     /* verhindert, dass min-content die flex-basis überschreibt */
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #0f0f0f;
  border-left: 5px solid #555;
  padding: 0.7rem 1rem 0.7rem 0.85rem;
  color: var(--color-white);
  min-height: 72px;
  font-family: 'Titillium Web', sans-serif;
}

/* Goldene/Silberne/Bronze-Schrift für Top-3 */
.sg-pos-1 .sg-posbadge { color: #d4af37; }
.sg-pos-2 .sg-posbadge { color: #c8c8c8; }
.sg-pos-3 .sg-posbadge { color: #cd7f32; }

/* Positions-Nummer */
.sg-posbadge {
  font-size: 1.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  min-width: 2.4rem;
  text-align: center;
  line-height: 1;
  flex-shrink: 0;
}

/* Fahrerfoto */
.sg-photo {
  flex-shrink: 0;
}

.sg-photo .driver-photo-wrap {
  width: 54px;
  height: 54px;
}

.sg-photo-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Info-Block: Nummer, Kürzel, Name, Logo */
.sg-info {
  flex: 1;
  min-width: 0;
}

.sg-meta {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-bottom: 0.1rem;
}

.sg-num {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.38);
}

.sg-code {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.sg-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Team-Logo: dunkler Hintergrund passend zur Karte */
.sg-logobox {
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0f0f0f;
  padding: 2px 4px;
}

.sg-logo {
  height: 24px;       /* 150% von 16px */
  width: auto;
  max-width: 80px;
  object-fit: contain;
  display: block;
}

/* Responsive: auf schmalen Screens Foto etwas kleiner */
@media (max-width: 700px) {
  .sg-display {
    padding: 0.25rem 0 1rem;
  }
  .sg-pair {
    gap: 0.6rem;
  }
  .sg-photo .driver-photo-wrap {
    width: 40px;
    height: 40px;
  }
  .sg-posbadge {
    font-size: 1.3rem;
    min-width: 1.8rem;
  }
  .sg-name {
    font-size: 0.78rem;
  }
  .sg-car {
    padding: 0.5rem 0.6rem;
    gap: 0.5rem;
  }
}

/* ===================================================================
   SAISONVERLAUF-DIAGRAMM  (Punkteverlauf)
   =================================================================== */

.season-chart-section {
  grid-area: chart;                     /* Grid-Zelle: rechts unten */
  align-self: stretch;                  /* füllt die gesamte zweite Zeile */
  min-height: 380px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
}

/* --- Titelleiste --- */
.season-chart-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.75rem 0.45rem 1rem;
  background: #040e1e;
  border-bottom: 2px solid var(--color-f1-red);
  flex-shrink: 0;
}

.season-chart-section-title {
  font-size: 0.81rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

/* Vollbild-Button */
.season-chart-fs-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.season-chart-fs-btn:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* Zoom-Reset-Button (erscheint nur wenn Zoom aktiv) */
.season-chart-zoom-reset {
  width: calc(100% - 1.4rem);
  margin: 0.5rem 0.7rem 0.7rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(206,46,30,0.18);
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(206,46,30,0.45);
  border-radius: 3px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.season-chart-zoom-reset:hover {
  background: rgba(206,46,30,0.32);
  color: #fff;
}

/* Vollbild-Modus: Chart füllt den Bildschirm */
.season-chart-section:fullscreen {
  display: flex;
  flex-direction: column;
  background: #09182e;
}

.season-chart-section:fullscreen .season-chart-inner {
  flex: 1;
  min-height: 0;
}

/* --- Innen-Layout: Sidebar + Canvas --- */
.season-chart-inner {
  flex: 1;              /* füllt chart-section unterhalb der Titelleiste */
  display: flex;
  min-height: 0;        /* wichtig: erlaubt echtes Schrumpfen in Flex */
  background: #09182e;
}

/* ---- Linke Sidebar ---- */
.season-chart-sidebar {
  width: 175px;
  flex-shrink: 0;
  background: #061222;
  border-right: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
}

.schart-sidebar-header {
  padding: 0.65rem 0.75rem 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.schart-sidebar-title {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 0.45rem;
}

.schart-sidebar-controls {
  display: flex;
  gap: 0.35rem;
}

.schart-ctrl-btn {
  flex: 1;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 0.28rem 0.3rem;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.15s, color 0.15s;
}

.schart-ctrl-btn:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

/* Scrollbare Fahrerliste */
.schart-driver-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.3rem 0;
}

.schart-driver-list::-webkit-scrollbar { width: 3px; }
.schart-driver-list::-webkit-scrollbar-track { background: transparent; }
.schart-driver-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
}

/* Einzelner Fahrer-Button */
.schart-driver-btn {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  text-align: left;
  opacity: 0.35;
  transition: background 0.1s, opacity 0.15s;
}

.schart-driver-btn.schart-driver-btn--active {
  opacity: 1;
}

.schart-driver-btn:hover {
  background: rgba(255,255,255,0.05);
  opacity: 1;
}

/* Linienindikator (Team-Farbe) – horizontal wie eine Chartlinie */
.schart-driver-color-bar {
  display: inline-block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--driver-color, #888);
  flex-shrink: 0;
}

/* Gestrichelt = 2. Fahrer des Teams */
.schart-driver-color-bar--dashed {
  background: repeating-linear-gradient(
    to right,
    var(--driver-color, #888) 0px,
    var(--driver-color, #888) 5px,
    transparent             5px,
    transparent             8px
  );
}

.schart-driver-flag {
  font-size: 0.88rem;
  line-height: 1;
  flex-shrink: 0;
}

.schart-driver-code {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
  flex-shrink: 0;
  min-width: 1.9rem;
}

.schart-driver-name {
  font-size: 0.73rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Rechter Canvas-Bereich ---- */
.season-chart-canvas-wrap {
  flex: 1;
  min-width: 0;
  position: relative;   /* Positioning-Kontext für den inner div */
}

/* Innerer Container – absolut gespannt, gibt Chart.js die genaue Größe */
.season-chart-canvas-inner {
  position: absolute;
  top:    0.9rem;
  right:  0.9rem;
  bottom: 0.5rem;
  left:   0.4rem;
}

/* Touch-Zoom: Browser-Scroll auf dem Canvas unterdrücken */
.season-chart-canvas-wrap,
.season-chart-canvas-inner,
.season-chart-canvas-inner canvas {
  touch-action: none;
}

/* ===================================================================
   RESPONSIVE: Diagramm
   =================================================================== */
@media (max-width: 900px) {
  .season-chart-inner {
    flex-direction: column;
    min-height: unset;
  }

  .season-chart-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    max-height: 130px;
  }

  .schart-driver-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0.25rem 0.3rem;
  }

  .schart-driver-btn {
    width: auto;
    flex: 0 0 auto;
    padding: 0.25rem 0.5rem;
  }

  .season-chart-canvas-wrap {
    height: 260px;        /* auf Mobil feste Höhe, da kein stretch-parent */
  }

  .season-chart-canvas-inner {
    top: 0.7rem; right: 0.7rem; bottom: 0.5rem; left: 0.4rem;
  }
}

/* ===================================================================
   WM SIMULATOR  (ergebnisse-wm-simulator.html)
   =================================================================== */

.sim-outer {
  padding: 1.5rem 0 2rem;
}

/* --- Scroll-Container --- */
.sim-scroll-outer {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sim-table-capture {
  width: 100%;
  background: #ffffff;
}

/* --- Tabelle --- */
.sim-table {
  border-collapse: collapse;
  width: 100%;
  font-family: 'Titillium Web', sans-serif;
  white-space: nowrap;
  background: #ffffff;
}

/* --- Allgemeiner Header-Style --- */
.sim-th {
  background: #0a0a0a;
  color: rgba(255,255,255,0.75);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.55rem 0.6rem;
  text-align: center;
  vertical-align: bottom;
  border-right: 1px solid #222;
}

.sim-th:last-child { border-right: none; }

.sim-th-driver { text-align: left; min-width: 210px; }
.sim-th-pos    { min-width: 44px; }
.sim-th-team   { min-width: 70px; }
.sim-th-pts    { min-width: 72px; }
.sim-th-calc   { min-width: 80px; }
.sim-th-race   { min-width: 62px; font-size: 0.55rem; }
.sim-th-sprint { background: #1a0a00; color: rgba(255,180,60,0.85); }

.sim-th-group {
  background: #111;
  border-bottom: 1px solid #333;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  padding-bottom: 0.3rem;
}

/* Sortierbare Header */
.sim-sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.12s;
}
.sim-sortable:hover { color: #ffffff; }

.sim-sort-arrow {
  color: #777;
  font-size: 1.3rem;
  display: inline-block;
  margin-left: 0.15rem;
  line-height: 1;
  vertical-align: middle;
}
.sim-sort-arrow--active {
  color: var(--color-f1-red);
}

/* --- Tabellen-Zeilen --- */
.sim-row {
  border-bottom: 1px solid var(--color-border);
  transition: background 0.1s;
}
.sim-row:nth-child(even) { background: #f9f9f9; }
.sim-row:nth-child(odd)  { background: #ffffff; }
.sim-row:hover           { background: #f0f0f0; }

.sim-row.sim-pos-1 { border-left: 4px solid #d4af37; }
.sim-row.sim-pos-2 { border-left: 4px solid #9e9e9e; }
.sim-row.sim-pos-3 { border-left: 4px solid #8c6239; }
.sim-row.sim-pos-4 { border-left: 4px solid transparent; }

.sim-row--hidden { display: none !important; }

/* --- Allgemeine Zelle --- */
.sim-td {
  padding: 0.4rem 0.55rem;
  font-size: 0.83rem;
  color: var(--color-text);
  vertical-align: middle;
  border-right: 1px solid #ececec;
}
.sim-td:last-child { border-right: none; }

/* --- Pos-Badge --- */
.sim-td-pos { text-align: center; }

.sim-pos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  font-size: 0.77rem;
  font-weight: 700;
  background: #e0e0e0;
  color: #333;
}
.sim-pos-1 .sim-pos-badge { background: #d4af37; color: #fff; }
.sim-pos-2 .sim-pos-badge { background: #9e9e9e; color: #fff; }
.sim-pos-3 .sim-pos-badge { background: #8c6239; color: #fff; }

/* --- Fahrer-Zelle --- */
.sim-td-driver { padding: 0.3rem 0.55rem; }

.sim-driver-inner {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

/* Foto: kompakter als in der Tabelle (40 px statt 56 px) */
.sim-photo {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0;
}

.sim-photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255,255,255,0.8);
}

.sim-driver-info {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  flex-wrap: nowrap;
}

/* --- Team-Zelle --- */
.sim-td-team { text-align: center; }

/* --- Punkte-Zellen --- */
.sim-td-actual,
.sim-td-calc {
  text-align: center;
  font-weight: 700;
  font-size: 0.88rem;
}
.sim-td-calc { color: var(--color-f1-red); }

/* --- Rennen-Zelle / Dropdown --- */
.sim-td-race { padding: 0.25rem 0.2rem; text-align: center; }

.sim-race-select {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  background: #111;
  color: #fff;
  border: 1px solid #333;
  padding: 0.22rem 0.2rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  width: 58px;
}
.sim-race-select:focus { outline: 1px solid var(--color-f1-red); }

/* Sprint-Dropdown: goldener Rand */
.sim-race-select--sprint {
  border-color: #b87a00;
  background: #1a0d00;
  color: #ffcc55;
}

/* --- Footer-Flaggen-Zeile --- */
.sim-flag-cell {
  background: #f5f5f5;
  text-align: center;
  font-size: 1.2rem;
  padding: 0.35rem 0.2rem;
  border-right: 1px solid #ececec;
}
.sim-flag-cell:last-child { border-right: none; }
.sim-flag-sprint          { background: #fffbf0; }
.sim-flag-empty           { background: #f5f5f5; border-right: 1px solid #ececec; }

/* --- Button-Zeile unter der Tabelle --- */
.sim-btn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1rem 0.5rem;
}

.sim-btn-left {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.sim-btn {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  padding: 0.65rem 1.4rem;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.12s;
}
.sim-btn:hover  { opacity: 0.85; transform: translateY(-1px); }
.sim-btn:active { transform: translateY(0); }

.sim-btn-add {
  background: #111;
  color: #fff;
  border: 2px solid #444;
}

.sim-btn-reset {
  background: #2a2a2a;
  color: rgba(255,255,255,0.75);
  border: 2px solid #555;
}
.sim-btn-reset:hover { opacity: 1; color: #fff; border-color: #888; }

/* Temporäre Ersatz-Divs während des Bild-Exports */
.sim-race-capture {
  display: inline-block;       /* nicht flex: html2canvas zentriert Flexbox vertikal fehlerhaft */
  width: 88px;
  height: 2.4rem;
  line-height: 2.4rem;
  text-align: center;
  vertical-align: middle;
  background: #111;
  color: #fff;
  font-family: 'Titillium Web', sans-serif;
  font-size: 1.44rem;   /* doppelte Eingabe-Schriftgröße im Bild-Export */
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}
.sim-race-capture--sprint {
  background: #1a0d00;
  color: #ffcc55;
}
/* html2canvas rendert Text mit konstantem Abwärts-Bias; innerer Span gleicht ihn aus → vertikal mittig */
.sim-cap-txt {
  display: inline-block;
  transform: translateY(-0.48em);
}

.sim-btn-save {
  background: var(--color-f1-red);
  color: #fff;
}

/* --- Overlay --- */
.sim-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.sim-overlay[hidden] { display: none; }

.sim-overlay-box {
  background: #fff;
  border-top: 4px solid var(--color-f1-red);
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

.sim-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.sim-overlay-title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
}

.sim-overlay-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0.2rem 0.4rem;
  transition: color 0.12s;
}
.sim-overlay-close:hover { color: var(--color-f1-red); }

.sim-overlay-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  padding: 0.5rem 1.25rem 0;
  flex-shrink: 0;
}

/* --- Fahrer-Checkliste --- */
.sim-driver-checklist {
  overflow-y: auto;
  padding: 0.5rem 0;
  flex: 1;
  min-height: 0;
}

.sim-chk-item {
  border-bottom: 1px solid #f0f0f0;
}
.sim-chk-item:last-child { border-bottom: none; }

.sim-chk-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.25rem;
  cursor: pointer;
  transition: background 0.1s;
  font-size: 0.82rem;
}
.sim-chk-label:hover { background: #f7f7f7; }

.sim-chk-label input[type="checkbox"] {
  flex-shrink: 0;
  accent-color: var(--color-f1-red);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.sim-chk-pos {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-muted);
  min-width: 1.4rem;
  text-align: right;
}

.sim-chk-photo {
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0;
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .sim-outer        { padding: 1rem 0 1.5rem; }
  .sim-btn-row      { padding: 0.75rem 0.75rem 0.25rem; }
  .sim-btn          { font-size: 0.7rem; padding: 0.55rem 0.9rem; }
  .sim-overlay-box  { max-height: 90vh; }
}

/* ============================================================
   LEXIKON
   ============================================================ */

.lexikon-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}

/* Suchfeld */
.lexikon-search-wrapper {
  padding: 1.5rem 0 1rem;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 0;
}

.lexikon-search-input {
  width: 100%;
  padding: 0.55rem 0.9rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-f1-red);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.lexikon-search-input::placeholder {
  color: var(--color-text-muted);
}

.lexikon-search-input:focus {
  border-color: var(--color-f1-red);
}

/* Kategorie-Tabs – volle Bildschirmbreite, mittig */
.lexikon-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 1.5rem 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 0;
}

.lexikon-tabs .schedule-filter-tab {
  font-size: 1.02rem;
}

/* Suchfeld-Bereich ohne unteres Padding */
.lexikon-section--search {
  padding-bottom: 0;
}

/* Kategorie-Inhalt */
.lexikon-category {
  display: none;
  padding-top: 0.5rem;
}

.lexikon-category.active {
  display: block;
}

/* Einzel-Eintrag */
.lexikon-entry {
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}

.lexikon-entry:last-child {
  border-bottom: none;
}

.lexikon-term {
  font-family: 'Titillium Web', sans-serif;
  font-size: 1.23rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-f1-red);
  margin-bottom: 0.35rem;
}

.lexikon-definition {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.65;
  margin: 0;
}

/* "Keine Ergebnisse" */
.lexikon-no-results {
  display: none;
  padding: 2.5rem 0;
  text-align: center;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Suche aktiv: alle Kategorien sichtbar, Tabs ausgeblendet */
.lexikon-search-active .lexikon-tabs {
  display: none;
}

.lexikon-search-active .lexikon-category {
  display: block;
}

/* Eintrag versteckt durch Suche */
.lexikon-entry.hidden {
  display: none;
}

/* Eigenes Lexikon – Bild */
.lex-img-wrap {
  display: inline-block;
  margin: 0.75rem 0 0.25rem;
}

.lex-thumb {
  width: 220px;
  max-width: 45%;
  display: block;
  cursor: zoom-in;
  border: 1px solid var(--color-border);
  transition: opacity 0.15s;
}

.lex-thumb:hover {
  opacity: 0.75;
}

/* Eigenes Lexikon – eingerückte Unterabschnitte */
.lex-subsection {
  margin-top: 0.9rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--color-border);
}

.lex-subsection-title {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-f1-red);
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}

.lex-list {
  margin: 0 0 0.25rem;
  padding-left: 1.25rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.65;
}

.lex-list li {
  margin-bottom: 0.2rem;
}

.lex-gesamt {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.65;
  margin: 0.25rem 0 0;
}

/* Bild-Modal */
.lex-img-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lex-img-modal.active {
  display: flex;
}

.lex-img-modal-inner {
  position: relative;
  cursor: default;
}

.lex-img-modal-inner img {
  display: block;
  max-width: 72vw;
  max-height: 72vh;
  border: 2px solid var(--color-border);
}

.lex-img-modal-close {
  position: absolute;
  top: -0.9rem;
  right: -0.9rem;
  width: 1.8rem;
  height: 1.8rem;
  background: var(--color-f1-red);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9001;
}

/* Responsive */
@media (max-width: 600px) {
  .lexikon-section { padding: 0 0.75rem 2rem; }
  .lexikon-term    { font-size: 0.78rem; }
  .lex-thumb       { width: 160px; }
  .lex-img-modal-inner img { max-width: 92vw; max-height: 60vh; }
}

/* ===================================================================
   SETUP GALLERY
   =================================================================== */
.setup-gallery-section {
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
  box-sizing: border-box;
}

.setup-tabs {
  justify-content: center;
  margin-bottom: 1.75rem;
}

.setup-tab-panel {
  display: none;
}

.setup-tab-panel.active {
  display: block;
}

.setup-gallery-grid.setup-gallery-grid--single {
  columns: 1;
  max-width: 1650px;
  margin: 0 auto;
}

#setupGallery {
  columns: 5;
}

.setup-gallery-header {
  margin-bottom: 1.75rem;
}

.setup-gallery-title {
  font-family: 'Titillium Web', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.setup-gallery-divider {
  width: 48px;
  height: 3px;
  background: var(--color-f1-red);
}

.setup-gallery-grid {
  columns: 3;
  column-gap: 0.9rem;
}

.setup-gallery-item {
  break-inside: avoid;
  margin-bottom: 0.9rem;
  cursor: pointer;
  display: block;
  transition: opacity 0.15s;
}

.setup-gallery-item:hover {
  opacity: 0.88;
}

.setup-gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* === LIGHTBOX === */
.setup-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: center;
  justify-content: center;
}

.setup-lightbox.active {
  display: flex;
}

.setup-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.setup-lightbox-inner {
  position: relative;
  z-index: 9002;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 88vw;
  max-height: 84vh;
}

.setup-lightbox-inner img {
  display: block;
  max-width: 88vw;
  max-height: 78vh;
  object-fit: contain;
  border: 2px solid var(--color-border);
}

.setup-lightbox-counter {
  margin-top: 0.5rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.65);
}

.setup-lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 2.2rem;
  height: 2.2rem;
  background: var(--color-f1-red);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9010;
  transition: background 0.12s;
}

.setup-lightbox-close:hover {
  background: #a01a10;
}

.setup-lightbox-nav {
  position: relative;
  z-index: 9005;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s;
  margin: 0 0.75rem;
}

.setup-lightbox-nav:hover {
  background: rgba(206, 46, 30, 0.75);
  border-color: var(--color-f1-red);
}

@media (max-width: 1400px) {
  #setupGallery { columns: 4; }
}

@media (max-width: 1000px) {
  #setupGallery { columns: 3; }
}

@media (max-width: 900px) {
  .setup-gallery-grid { columns: 2; }
}

@media (max-width: 600px) {
  .setup-gallery-grid { columns: 1; column-gap: 0; }
  .setup-gallery-section { padding: 1.5rem 0.75rem 2rem; }
  .setup-lightbox-inner img { max-width: 94vw; max-height: 70vh; }
  .setup-lightbox-nav { width: 2.4rem; height: 2.4rem; font-size: 1.6rem; margin: 0 0.3rem; }
}

/* === WAS LIEGT AUF WELCHEM DESKTOP — GALERIE === */
.wlawd-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  width: 100%;
}

.wlawd-gallery-item {
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: opacity 0.15s;
}

.wlawd-start-wrap {
  width: 60%;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .wlawd-start-wrap { width: 100%; }
}

.wlawd-gallery-item:hover {
  opacity: 0.88;
}

.wlawd-gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 900px) {
  .wlawd-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .wlawd-gallery-grid { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* Graues Rechteck links (1/4 der Breite) in den Monitor-Reitern */
.setup-tab-panel.wlawd-monitor-panel.active {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}

.wlawd-side-rect {
  flex: 0 0 25%;
  width: 25%;
  align-self: stretch;
  min-height: 240px;
  background: #9e9e9e;
  padding: 1rem;
  box-sizing: border-box;
}

.wlawd-side-rect-title {
  margin: 0;
  font-family: 'Titillium Web', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a1a1a;
}

.wlawd-side-rect-list {
  margin: 0.85rem 0 0;
  padding-left: 1.4rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #1a1a1a;
}

.wlawd-side-rect-list li {
  margin-bottom: 0.3rem;
}

.wlawd-monitor-panel .wlawd-gallery-grid {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 600px) {
  .setup-tab-panel.wlawd-monitor-panel.active { flex-direction: column; }
  .wlawd-side-rect { flex-basis: auto; width: 100%; min-height: 140px; }
}

.wlawd-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: center;
  justify-content: center;
}

.wlawd-lightbox.active {
  display: flex;
}

.wlawd-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.wlawd-lightbox-inner {
  position: relative;
  z-index: 9002;
  display: flex;
}

.wlawd-lightbox-img {
  display: block;
  max-width: 88vw;
  max-height: 84vh;
  object-fit: contain;
  border: 2px solid var(--color-border);
}

.wlawd-lightbox-prev,
.wlawd-lightbox-next {
  margin: 0 0.75rem;
}

.wlawd-lightbox.wlawd-lightbox--single .wlawd-lightbox-prev,
.wlawd-lightbox.wlawd-lightbox--single .wlawd-lightbox-next {
  display: none;
}

.wlawd-lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 2.2rem;
  height: 2.2rem;
  background: var(--color-f1-red);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9010;
  transition: background 0.12s;
}

.wlawd-lightbox-close:hover {
  background: #a01a10;
}

@media (max-width: 600px) {
  .wlawd-lightbox-img { max-width: 94vw; max-height: 80vh; }
}

/* ===================================================================
   F1 AKADEMIE  (f1-akademie.html)
   =================================================================== */

.fak-wrap {
  padding: 1.5rem 2rem 3rem;
  width: 100%;
  box-sizing: border-box;
}

/* Haupt-Grid: linke 3/5 (Team-Karten) + rechte 2/5 (Tabelle) */
.fak-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2rem;
  align-items: start;
  min-width: 0;
}

/* --- 2×3 Team-Karten-Raster --- */
.fak-teams-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.fak-team-cell {
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 1.25rem 1rem 1rem;
}

.fak-team-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80px;
  margin-bottom: 1rem;
}

.fak-team-logo {
  max-height: 70px;
  max-width: 190px;
  width: auto;
  object-fit: contain;
}

.fak-cards-row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.fak-card {
  width: calc(33.33% - 0.34rem);
  max-width: 200px;
  min-width: 90px;
  cursor: pointer;
  display: block;
  transition: transform 0.15s, box-shadow 0.15s;
}

.fak-card:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 18px rgba(0,0,0,0.20);
  position: relative;
  z-index: 1;
}

/* --- Rechte Spalte: Standings --- */
.fak-standings-wrap {
  min-width: 0;
}

/* Volle Breite, normale Tabellendarstellung */
.fak-standings-wrap .standings-table {
  width: 100%;
}

.fak-standings-wrap .standings-cell--driver {
  max-width: none;
}

.fak-standings-wrap .driver-photo-wrap {
  width: 52px;
  height: 52px;
}

.fak-standings-wrap .standings-th--photo,
.fak-standings-wrap .standings-cell--photo {
  width: 64px;
}

.fak-standings-title {
  background: #0a0a0a;
  color: rgba(255,255,255,0.7);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.75rem 1rem;
  border-bottom: 3px solid var(--color-f1-red);
}

/* --- Modal-Overlay --- */
.fak-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fak-modal[hidden] {
  display: none;
}

.fak-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.80);
  cursor: pointer;
}

.fak-modal-box {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fak-modal-img {
  display: block;
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
}

.fak-modal-close {
  position: absolute;
  top: -2.2rem;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  opacity: 0.85;
  transition: opacity 0.15s;
}

.fak-modal-close:hover { opacity: 1; }

/* Responsive */
@media (max-width: 1100px) {
  .fak-card { max-width: 160px; }
}

@media (max-width: 900px) {
  .fak-layout { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .fak-teams-grid { grid-template-columns: 1fr; }
  .fak-card { max-width: 130px; }
  .fak-wrap { padding: 1rem 0.75rem 2rem; }
}

/* ===== FAHRER PAGE ===== */
.fr-wrap {
  width: 100%;
  padding: 1.5rem 1.5rem 3rem;
  box-sizing: border-box;
}

.fr-teams-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
}

.fr-team-cell {
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 1.25rem 1rem 1rem;
}

.fr-team-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  margin-bottom: 1rem;
}

.fr-team-logo {
  max-height: 80px;
  max-width: 200px;
  object-fit: contain;
}

.fr-cards-row {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.fr-card {
  width: calc(50% - 0.375rem);
  max-width: 320px;
  min-width: 120px;
  cursor: pointer;
  display: block;
  transition: transform 0.15s, box-shadow 0.15s;
}

.fr-card:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 18px rgba(0,0,0,0.20);
  position: relative;
  z-index: 1;
}

/* Modal */
.fr-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fr-modal[hidden] {
  display: none;
}

.fr-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.80);
}

.fr-modal-box {
  position: relative;
  z-index: 1;
  max-width: 60vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fr-modal-img {
  max-width: 60vw;
  max-height: 80vh;
  object-fit: contain;
  display: block;
}

.fr-modal-close {
  position: absolute;
  top: -2.2rem;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s;
  padding: 0;
}

.fr-modal-close:hover {
  opacity: 1;
}

@media (max-width: 1100px) {
  .fr-teams-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .fr-teams-grid { grid-template-columns: 1fr; }
  .fr-wrap { padding: 1rem 0.75rem 2rem; }
  .fr-modal-box { max-width: 92vw; }
  .fr-modal-img { max-width: 90vw; }
}

/* ===== KAMERA ZUORDNUNG PAGE ===== */
.kz-wrap {
  width: 100%;
  padding: 1.5rem 1.5rem 3rem;
  box-sizing: border-box;
}

.kz-tables-container {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

.kz-tables-container .kz-table {
  margin: 0;
}

.kz-table {
  width: auto;
  border-collapse: collapse;
  margin: 0 auto;
}

.kz-table tr {
  border-bottom: 1px solid var(--color-border);
}

.kz-table tr:first-child {
  border-top: 1px solid var(--color-border);
}

.kz-logo-cell {
  width: 130px;
  vertical-align: middle;
  padding: 0.75rem 0.5rem;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  text-align: center;
  display: table-cell;
}

.kz-team-logo {
  max-height: 70px;
  max-width: 110px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.kz-driver-cell {
  padding: 0.6rem 0.75rem;
  vertical-align: middle;
  border-right: 1px solid var(--color-border);
}

.kz-card-wrap {
  border-radius: 12px;
  padding: 0.65rem 0.75rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.kz-car1 { background: #1a1a1a; }
.kz-car2 { background: #FFE000; }

/* Circle photo */
.kz-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.kz-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Driver details next to circle */
.kz-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
}

.kz-info-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-family: 'Titillium Web', sans-serif;
}

.kz-flag {
  font-size: 1.2rem;
  line-height: 1;
}

.kz-abbrev {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
}

.kz-name {
  font-size: 0.95rem;
  font-weight: 600;
}

.kz-num {
  font-size: 0.95rem;
  font-weight: 600;
}

.kz-car1 .kz-abbrev,
.kz-car1 .kz-name,
.kz-car1 .kz-num { color: #ffffff; }

.kz-car2 .kz-abbrev,
.kz-car2 .kz-name,
.kz-car2 .kz-num { color: #1a1a1a; }

.kz-car-label {
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kz-car1 .kz-car-label { color: #aaaaaa; }
.kz-car2 .kz-car-label { color: #555555; }

@media (max-width: 1100px) {
  .kz-circle { width: 72px; height: 72px; }
  .kz-abbrev { font-size: 0.9rem; }
  .kz-name, .kz-num { font-size: 0.85rem; }
}

@media (max-width: 900px) {
  .kz-logo-cell { width: 80px; }
  .kz-team-logo { max-height: 50px; max-width: 70px; }
  .kz-card-wrap { padding: 0.5rem; gap: 0.5rem; border-radius: 8px; }
  .kz-circle { width: 60px; height: 60px; }
  .kz-flag { font-size: 1rem; }
  .kz-abbrev { font-size: 0.8rem; }
  .kz-name, .kz-num { font-size: 0.75rem; }
  .kz-car-label { font-size: 0.75rem; }
}

@media (max-width: 600px) {
  .kz-wrap { padding: 1rem 0.5rem 2rem; }
  .kz-logo-cell { width: 50px; padding: 0.3rem 0.2rem; }
  .kz-team-logo { max-height: 32px; max-width: 44px; }
  .kz-circle { width: 46px; height: 46px; }
  .kz-name { display: none; }
  .kz-car-label { font-size: 0.65rem; }
}

/* =============================================================
   CHAMPIONSHIP CHART – WM Simulator
   ============================================================= */

.champ-section {
  max-width: 960px;
  margin: 2.5rem auto 3rem;
  padding: 0 1.5rem;
}

/* Zeile 1 – Abschnittskopf (wie sim-th-group) */
.champ-title {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  text-align: center;
  color: rgba(255,255,255,0.75);
  background: #111;
  margin: 0;
  padding: 0.55rem 1.5rem 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border-bottom: 1px solid #333;
  border-radius: 6px 6px 0 0;
}

/* Zeile 2 – Stats-Header (wie sim-th) */
.champ-stats {
  display: flex;
  justify-content: space-around;
  gap: 1rem;
  margin: 0 0 0;
  padding: 0.55rem 0.6rem;
  background: #111;
  border-bottom: 1px solid #222;
}

.champ-stat {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #e10600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* --- Chart container (weißer Seitenhintergrund) --- */
.champ-chart {
  background: transparent;
  border-radius: 0;
  padding: 0 1.2rem 1rem;
  overflow: visible;
}

/* --- Legende (dunkler Header wie Tabellen-Header darüber) --- */
.champ-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 -1.2rem 0.75rem;
  padding: 0.55rem 1.2rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  background: #111;
  border-radius: 0;
  text-transform: uppercase;
}

.champ-legend-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.champ-leg-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.champ-leg-dot--current   { background: #aaa; }
.champ-leg-dot--remaining { background: #555; }

.champ-leg-label {
  color: rgba(255,255,255,0.75);
  margin-right: 0.75rem;
}

.champ-leg-leader {
  color: #f5d020;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* --- Bars container (relative, for the leader line) --- */
.champ-bars {
  position: relative;
}

/* --- Each driver row --- */
.champ-row {
  display: flex;
  align-items: center;
  height: 44px;
  margin-bottom: 6px;
}

/* --- Label side (photo + code) --- */
.champ-label {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 110px;
  flex-shrink: 0;
}

.champ-photo-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.champ-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.champ-photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
}

.champ-code {
  font-family: 'Titillium Web', sans-serif;
  font-size: 1.36rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* --- Bar area --- */
.champ-bar-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  height: 28px;
  gap: 0;
}

.champ-bar-current,
.champ-bar-additional {
  height: 100%;
  min-width: 0;
  transition: width 0.3s ease;
}

/* --- Leader line (absolute, spans all rows) --- */
.champ-leader-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 2px dashed #f5d020;
  pointer-events: none;
  /* left = label-width + bar-area * leaderPct
     label-width = 110px, bar-area = calc(100% - 110px) */
  left: calc(110px + (100% - 110px) * var(--leader-pct, 0));
}

/* --- X-axis --- */
.champ-axis {
  position: relative;
  height: 20px;
  margin-top: 4px;
  /* bar area starts at 110px */
  margin-left: 110px;
  border-top: 1px solid #ccc;
}

/* --- Champ Tooltip --- */
.champ-tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  display: none;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  min-width: 140px;
}
.champ-tooltip.visible {
  display: flex;
  align-items: center;
  gap: 12px;
}
.champ-tooltip-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.champ-tooltip-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.champ-tooltip-photo-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}
.champ-tooltip-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.champ-tooltip-code {
  font-family: 'Titillium Web', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.champ-tooltip-row {
  font-family: 'Titillium Web', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.champ-tooltip-row span {
  color: #fff;
  font-weight: 700;
}

.champ-axis-tick {
  position: absolute;
  transform: translateX(-50%);
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.6rem;
  color: #888;
  top: 3px;
}

/* ===================================================================
   RENNSTRECKEN – MIAMI
   =================================================================== */

/* --- Vollbild-Modal --- */
.miami-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.88);
  align-items: center;
  justify-content: center;
}
.miami-modal.open {
  display: flex;
}
.miami-modal-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  z-index: 1001;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.miami-modal-close:hover { opacity: 1; }
.miami-modal-content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 95vw;
  max-height: 92vh;
}
/* Feste Box statt nur max-*: Die Streckenkarten-SVGs haben nur eine viewBox,
   aber keine width/height-Attribute – also keine intrinsische Groesse. In der
   Shrink-to-fit-Flexbox des Modals rechnet Chrome daraus 0 x 0 (Bild unsichtbar),
   Safari/iOS faellt dagegen auf das Seitenverhaeltnis zurueck. Feste Masse +
   object-fit: contain liefern in allen Browsern dasselbe Ergebnis. */
.miami-modal-img {
  width: 92vw;
  height: 88vh;
  object-fit: contain;
  display: block;
}
.miami-modal-map {
  width: 88vw;
  height: 84vh;
  border: none;
  display: block;
}

/* --- Seiten-Wrapper & Spalten --- */
.miami-wrap {
  width: 100%;
}
.miami-columns {
  display: flex;
  gap: 1%;
  width: 100%;
  align-items: flex-start;
  padding: 0 1%;
  box-sizing: border-box;
}
.miami-col {
  flex: 1;
  min-width: 0;
}
/* Linke Spalte bekommt mehr Platz für 3 Unter-Spalten */
.miami-columns > .miami-col:first-child {
  flex: 1.7;
}

/* --- Bildkarte (natürliche Höhe) --- */
.miami-img-card {
  position: relative;
  border: 1px solid var(--color-border);
  background: #fafafa;
  overflow: hidden;
}
.miami-track-img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Vollbild-Button (Bilder + Karte) --- */
.miami-fullscreen-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1.15rem;
  line-height: 1;
  color: #fff;
  background: rgba(0,0,0,0.55);
  border: none;
  cursor: pointer;
  padding: 0.3rem 0.45rem;
  border-radius: 4px;
  transition: background 0.15s;
  z-index: 5;
}
.miami-fullscreen-btn:hover { background: rgba(206,46,30,0.85); }

/* --- Tabellen nebeneinander --- */
.miami-tables-row {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  width: 100%;
  margin-top: 1%;
}
/* Spalte 1: Gewinner + Siege (nebeneinander) – größte Spalte */
.miami-tables-row > .miami-tables-group {
  flex: 3;
  min-width: 0;
}
/* Spalte 2: Streckendaten-Grid */
.miami-tables-row > .miami-info-grid {
  flex: 1.5;
  min-width: 0;
}
/* Spalte 3: Kompass */
.miami-tables-row > .miami-kompas-wrap {
  flex: 1;
  min-width: 130px;
}

/* --- Streckendaten-Grid --- */
.miami-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}
.miami-info-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 1rem;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: #ffffff;
}
/* Jede zweite Zeile (Paare 3+4, 7+8 …) etwas dunkler */
.miami-info-cell:nth-child(4n+3),
.miami-info-cell:nth-child(4n+4) { background: #f5f5f5; }
/* Rundenrekord-Zellen: rot + 25 % größer */
.miami-info-cell:nth-child(6) .miami-info-label,
.miami-info-cell:nth-child(8) .miami-info-label {
  color: var(--color-f1-red);
  font-size: 0.825rem;
}
.miami-info-cell:nth-child(6) .miami-info-value,
.miami-info-cell:nth-child(8) .miami-info-value {
  color: var(--color-f1-red);
  font-size: 1.15rem;
}

/* --- Kompass-Bild + Sonnenuntergang --- */
/* Desktop: Kompass oben, Sunset darunter (column) */
.miami-kompas-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.miami-kompas-img {
  display: block;
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.miami-sunset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.miami-sunset-icon {
  width: 26px;
  height: 18px;
  color: var(--color-f1-red);
}
.miami-sunset-time {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

.miami-info-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.miami-info-value {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text);
}
/* Rundenrekord: Zeit (Zeile 2) und Fahrer/Jahr (Zeile 3) untereinander */
.miami-record-time { display: block; }
.miami-record-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* --- Streckenuhr (Ortszeit / Deutschland) über dem FIA-Bild --- */
.track-clock-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  margin-bottom: 0.5%;
}
.track-clock-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.65rem 1rem;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: #ffffff;
  text-align: center;
}
.track-clock-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.track-clock-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-f1-red);
  font-variant-numeric: tabular-nums;
}

/* --- Tab-Bereich --- */
/* Gemeinsame Reiter-Leiste mittig über beiden Tabellen */
.miami-tables-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.miami-tables-pair {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: flex-start;
}
/* Tabellen nur so breit wie ihr Inhalt, Abstand nur durch gap */
.miami-tabs-section,
.miami-wins-section {
  flex: 0 0 auto;
  width: fit-content;
}
.miami-tabs-section { overflow-x: auto; }
.miami-wins-section { overflow-x: auto; }
/* Übergeordnete Reiter „Fahrer“ / „Teams“ (Pillen-Stil) */
.miami-mode-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.miami-mode-btn {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  background: #fff;
  border: 2px solid #333;
  padding: 0.45rem 1.4rem;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.miami-mode-btn:hover { background: #ececec; }
.miami-mode-btn.active {
  background: #111;
  border-color: #111;
  color: #fff;
}

.miami-tab-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.miami-tab-btn {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: #1a1a1a;
  border: 1px solid #333;
  padding: 0.42rem 0.85rem;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s, border-color 0.15s;
}
.miami-tab-btn:hover { background: #2a2a2a; }
.miami-tab-btn.active {
  background: var(--color-f1-red);
  border-color: var(--color-f1-red);
}
.miami-tab-heading {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text);
  padding: 0.6rem 0;
  border-bottom: 2px solid var(--color-f1-red);
  margin-bottom: 0.25rem;
}

/* --- Sieger-Tabelle --- */
.miami-winners-table-wrap { overflow-x: auto; width: fit-content; margin: 0 auto; }
.miami-winners-table {
  width: auto;
  border-collapse: collapse;
  font-family: 'Titillium Web', sans-serif;
}
.miami-driver-cell {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
/* Teams-Modus: doppelte Team-Logo-Spalte ausblenden, nur der Kreis bleibt */
.miami-winners-table.miami-hide-team-col th:nth-child(3),
.miami-winners-table.miami-hide-team-col td.standings-cell--team {
  display: none;
}
.miami-table-empty {
  padding: 1.2rem 1rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* --- Siege-pro-Fahrer-Tabelle (Mitte der Tabellen-Reihe) --- */
.miami-wins-section {
  width: fit-content;
}

/* Desktop: Sieger-/Siege-Tabelle nebeneinander mit verfünffachtem Abstand,
   Streckendaten-Tabelle mittig im verbleibenden Platz darunter */
@media (min-width: 901px) {
  .miami-tables-row {
    gap: 0;
    align-items: flex-start;
  }
  /* Abstand zwischen den beiden Tabellen verfünffacht (0.6rem -> 3rem) */
  .miami-tables-pair {
    gap: 3rem;
  }
  /* Überschriften: bei wenig Platz auf zwei Zeilen umbrechen */
  .miami-tables-row .miami-tab-heading {
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.15;
    max-width: 12rem;
    margin-left: auto;
    margin-right: auto;
  }
  .miami-tables-row .standings-cell {
    padding: 0.3rem 0.24rem;
    font-size: 0.72rem;
  }
  .miami-tables-row .standings-th {
    padding: 0.45rem 0.28rem;
    font-size: 0.52rem;
    letter-spacing: 0.06em;
  }
  .miami-tables-row .driver-photo-wrap {
    width: 28px;
    height: 28px;
  }
  .miami-tables-row .miami-driver-cell { gap: 0.35rem; }
  .miami-tables-row .standings-name { font-size: 0.72rem; }
  .miami-tables-row .standings-team-logo { max-height: 22px; }
  .miami-info-cell { padding: 0.35rem 0.45rem; }
  .miami-info-label { font-size: 0.55rem; }
  .miami-info-value { font-size: 0.8rem; }
  .miami-info-cell:nth-child(6) .miami-info-value,
  .miami-info-cell:nth-child(8) .miami-info-value { font-size: 1rem; }
  .miami-info-cell:nth-child(6) .miami-info-label,
  .miami-info-cell:nth-child(8) .miami-info-label { font-size: 0.62rem; }
}
.miami-wins-count {
  text-align: center;
  font-weight: 700;
}

/* --- Karte --- */
.miami-map-wrap {
  margin-top: 1%;
  position: relative;
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.miami-map-iframe {
  width: 100%;
  height: 420px;
  border: none;
  display: block;
}
.miami-map-address {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  padding: 0 0.25rem;
}

/* --- Responsive (schmales Fenster, z. B. iPhone) --- */
@media (max-width: 900px) {
  .miami-columns {
    flex-direction: column;
    align-items: stretch;
  }
  /* Spalten- und Reihen-Wrapper auflösen, damit alle Blöcke
     direkte Geschwister werden und per order sortierbar sind */
  .miami-col,
  .miami-tables-row,
  .miami-tables-group,
  .miami-tables-pair { display: contents; }

  /* Gewünschte Reihenfolge im Stapel */
  .track-clock-row    { order: 0; } /* Streckenuhr ganz oben */
  .miami-columns > .miami-col:first-child > .miami-img-card { order: 1; } /* Motorsportstats-Bild */
  .miami-columns > .miami-col:last-child  > .miami-img-card { order: 2; } /* FIA-Bild */
  .miami-kompas-wrap  { order: 3; } /* Kompass unter FIA-Bild */
  .miami-info-grid    { order: 4; } /* Streckendaten */
  #miami-mode-btns    { order: 5; } /* übergeordnete Reiter Fahrer/Teams */
  #miami-tab-btns     { order: 5; } /* untergeordnete Reiter-Leiste */
  .miami-tabs-section { order: 6; } /* Gewinner der letzten 5 Jahre */
  .miami-wins-section { order: 7; } /* Siege auf dieser Strecke */
  .miami-map-wrap     { order: 8; } /* Karte */
  .miami-map-address  { order: 9; }

  /* Alle Blöcke über die volle Breite, mit kleinem Abstand */
  .miami-img-card,
  .track-clock-row,
  .miami-info-grid,
  #miami-mode-btns,
  #miami-tab-btns,
  .miami-tabs-section,
  .miami-wins-section,
  .miami-map-wrap,
  .miami-kompas-wrap {
    width: 100%;
    margin-top: 0.75rem;
  }
  /* Mobile: Kompass links, Sunset rechts nebeneinander */
  .miami-kompas-wrap {
    flex: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
  }
  .miami-kompas-img  { width: 110px; height: 110px; }
  /* Sunset-Info mobil: Icon + Zeit nebeneinander */
  .miami-sunset {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
  }
  .track-clock-row { margin-top: 0; }
  .miami-info-grid { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .miami-info-grid { grid-template-columns: 1fr; }
  .miami-map-iframe { height: 300px; }
}

/* ===================================================================
   RENNSTRECKEN – Button-Übersicht (Kalender-Reihenfolge)
   =================================================================== */
.track-wrap {
  padding: 2rem 2rem 3rem;
}

.track-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* mehr Zeilen- als Spaltenabstand: der oben überstehende rote Balken
     bekommt so einen kleinen Spalt zur darüberliegenden Reihe */
  gap: 2rem 1.25rem;
}

/* Einzelner Strecken-Button */
.track-btn {
  position: relative;
  flex: 0 0 220px;
  width: 220px;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-left: 4px solid var(--color-f1-red);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

.track-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.track-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Roter Status-Balken – steht oben über dem Button über, ohne dessen
   Höhe zu verändern, damit alle Buttons in einer Linie bleiben. */
.track-status-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  background: var(--color-f1-red);
  color: var(--color-white);
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.32rem 1rem;
  text-align: center;
}

/* Aktuelles Rennwochenende: roter Rahmen + Leuchten */
.track-btn--current {
  box-shadow: 0 0 0 2px var(--color-f1-red), 0 6px 24px rgba(206, 46, 30, 0.35);
}

/* Nächstes Rennen: dezentes Leuchten */
.track-btn--next {
  box-shadow: 0 4px 20px rgba(206, 46, 30, 0.22);
}

@media (max-width: 600px) {
  .track-wrap { padding: 1.5rem 1rem 2.5rem; }
  .track-grid { gap: 2rem 0.9rem; }
  .track-btn { flex-basis: calc(50% - 0.45rem); width: calc(50% - 0.45rem); }
}

/* --- FIA Reglement Dokumente: Original/Deutsch-Reiter --- */
.reglement-doc-tabs {
  justify-content: center;
}

.reglement-doc-panel {
  display: none;
}

.reglement-doc-panel.active {
  display: block;
}

.reglement-doc-subtabs {
  justify-content: center;
}

.reglement-doc-subpanel {
  display: none;
}

.reglement-doc-subpanel.active {
  display: block;
}

/* --- FIA Reglement Dokumente: PDF-Anzeige --- */
.reglement-pdf-wrap {
  padding: 1.25rem 1.5rem 2rem;
}

.reglement-pdf-download {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-f1-red);
  border-radius: 4px;
  text-decoration: none;
  transition: opacity 0.15s;
  margin-bottom: 1rem;
}

.reglement-pdf-download:hover {
  opacity: 0.85;
}

/* --- FIA Reglement CatBot --- */
.catbot-btn-wrap {
  display: flex;
  justify-content: center;
  padding: 4rem 2rem;
}

.catbot-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-f1-red);
  border-radius: 4px;
  text-decoration: none;
  transition: opacity 0.15s;
}

.catbot-btn:hover {
  opacity: 0.85;
}

/* PDF.js Canvas-Viewer */
.reglement-pdf-canvas {
  width: 66.66vw;
  max-width: 100%;
  margin: 0 auto;
}

.reglement-pdf-page {
  margin-bottom: 2px;
  line-height: 0;
}

.reglement-pdf-page canvas {
  display: block;
  width: 100%;
}

.reglement-pdf-loading {
  text-align: center;
  padding: 3rem 1rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .reglement-pdf-canvas {
    width: 100vw;
    max-width: 100%;
  }
}


/* ============================================================
   === WETTER PAGE ===
   ============================================================ */

/* --- Steuerungszeile (Dropdown + Tabs) --- */
.wetter-controls {
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--color-border);
  padding: 0.5rem 1.5rem 0;
  flex-wrap: wrap;
  gap: 0;
}

.wetter-track-select-wrapper {
  flex-shrink: 0;
  margin-right: 1.5rem;
  padding-bottom: 0.5rem;
}

.wetter-track-select {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--color-black);
  color: var(--color-white);
  border: 2px solid var(--color-f1-red);
  padding: 0.42rem 2.4rem 0.42rem 0.85rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23CE2E1E'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  min-width: 220px;
}

.wetter-track-select:focus {
  outline: 2px solid var(--color-f1-red);
  outline-offset: 2px;
}

.wetter-track-select option {
  background: #111;
  color: var(--color-white);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.wetter-tab-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-self: flex-end;
}

/* --- Tab-Inhalte --- */
.wetter-tab-content { display: none; }
.wetter-tab-content.active { display: block; }

/* --- Loading / Error --- */
.wetter-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.wetter-state--error { color: var(--color-f1-red); }

/* --- Aktuelles Wetter (Start + Live) --- */
.wetter-current-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 2rem;
}

.wetter-location-bar {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--color-border);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.wetter-gp-name {
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text);
}
.wetter-circuit-name {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}
.wetter-weekend-badge {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  color: var(--color-white);
  background: var(--color-f1-red);
}

/* Live-Indikator */
.wetter-live-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-f1-red);
  margin-bottom: 1.25rem;
}
.wetter-live-dot {
  width: 8px;
  height: 8px;
  background: var(--color-f1-red);
  border-radius: 50%;
  animation: wetterPulse 1.5s ease-in-out infinite;
}
.wetter-live-timer {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 0.65rem;
}
@keyframes wetterPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

/* Hauptzeile: Icon + Temp + Metrics */
.wetter-main-row {
  display: flex;
  align-items: stretch;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.wetter-icon-temp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  flex-shrink: 0;
}
.wetter-icon {
  font-size: 3.5rem;
  line-height: 1;
  color: var(--color-f1-red);
  margin-bottom: 0.4rem;
}
.wetter-temp-big {
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  letter-spacing: -0.02em;
}
.wetter-temp-unit {
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--color-text-muted);
}
.wetter-desc-text {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-top: 0.4rem;
  text-align: center;
}

.wetter-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  flex: 1;
  min-width: 280px;
  align-self: flex-start;
}
.wetter-metric {
  background: var(--color-bg);
  padding: 0.85rem 1rem;
}
.wetter-metric-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--color-text-muted);
  margin-bottom: 0.3rem;
}
.wetter-metric-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}
.wetter-metric-sub {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
}

.wetter-updated-row {
  margin-top: 1rem;
  font-size: 0.68rem;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}

/* --- Apple/Open-Meteo Vorhersage: stündlicher Wetterbericht (Tabelle + Grafik) --- */
.whr-view-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem 0;
}
.whr-view-btn {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.4rem 1rem;
  transition: color 0.15s, border-color 0.15s;
}
.whr-view-btn.active {
  color: var(--color-white);
  background: var(--color-f1-red);
  border-color: var(--color-f1-red);
}

.whr-table-wrap {
  padding: 1.25rem 1.5rem 1.5rem;
  overflow-x: auto;
}
.whr-table {
  border-collapse: collapse;
  width: auto;
  margin: 0 auto;
  font-family: 'Titillium Web', sans-serif;
  font-size: 1.2rem;
  white-space: nowrap;
}
.whr-table th {
  font-size: 1.86rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  text-align: center;
  padding: 0.4rem 0.35rem;
  border-bottom: 2px solid var(--color-border);
}
.whr-table th:first-child { text-align: left; }
.whr-table td {
  padding: 0.4rem 0.35rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
.whr-num {
  text-align: center;
  vertical-align: middle;
}
.whr-mini-bar {
  display: block;
  height: 3px;
  background: rgba(0,0,0,0.08);
  border-radius: 2px;
  margin-top: 2px;
  overflow: hidden;
}
.whr-mini-bar span {
  display: block;
  height: 100%;
  border-radius: 2px;
  opacity: 0.75;
}
.whr-day-row {
  background: #f0f3f8;
  font-weight: 700;
}
.whr-day-row.whr-row-alt {
  background: #e6ebf3;
}
.whr-day-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.whr-expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-f1-red);
  font-size: 0.7rem;
  padding: 0.1rem 0.3rem;
  transition: transform 0.15s;
}
.whr-hour-row {
  background: #fafbfc;
  color: var(--color-text-muted);
}
.whr-hour-row.whr-row-alt {
  background: #f4f7fc;
}
.whr-hour-label {
  padding-left: 2.35rem;
}
.whr-hour-row--now {
  background: #fff0ef !important;
  box-shadow: inset 3px 0 0 var(--color-f1-red);
}
.whr-icon {
  font-size: 1.1rem;
  text-align: center;
}

.whr-chart-wrap {
  padding: 0 0 1.5rem;
}
.whr-chart-controls {
  padding: 0.75rem 1.5rem 0;
}
.whr-chart-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.whr-day-picker {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  justify-content: center;
}
.whr-day-pick-btn {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.22rem 0.55rem;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.whr-day-pick-btn.active {
  background: var(--color-f1-red);
  color: #fff;
  border-color: var(--color-f1-red);
}
.whr-fullscreen-btn {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.22rem 0.65rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.whr-fullscreen-btn:hover {
  background: var(--color-f1-red);
  color: #fff;
  border-color: var(--color-f1-red);
}
.whr-ds-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-border);
}
.whr-ds-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  margin-right: 0.2rem;
  flex-shrink: 0;
}
.whr-ds-btn {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.18rem 0.55rem 0.18rem 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: border-color 0.12s, color 0.12s;
}
.whr-ds-btn::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ds-color, #888);
  opacity: 0.3;
  transition: opacity 0.12s;
  flex-shrink: 0;
}
.whr-ds-btn.active {
  border-color: var(--ds-color, #888);
  color: var(--color-text);
}
.whr-ds-btn.active::before {
  opacity: 1;
}
.whr-chart-scroll {
  height: 612px;
  padding: 0.75rem 1.5rem 0;
}
.whr-chart-canvas {
  height: 612px !important;
  width: 100% !important;
}
.whr-chart-wrap:fullscreen {
  background: #fff;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
.whr-chart-wrap:fullscreen .whr-chart-scroll {
  flex: 1;
  height: auto;
  padding: 0.5rem;
}
.whr-chart-wrap:fullscreen .whr-chart-canvas {
  height: 100% !important;
}

/* --- Radar --- */
.wetter-radar-wrap {
  position: relative;
  padding: 1.5rem;
}
.wetter-radar-iframe {
  width: 100%;
  height: 837px; /* 1116px x 75% */
  border: 1px solid var(--color-border);
  display: block;
  background: #eef2f7;
}
.wetter-radar-map {
  width: 100%;
  height: 806px; /* 620px x 130% */
  border: 1px solid var(--color-border);
  display: block;
  background: #eef2f7;
}
.wetter-radar-timeline {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.wetter-radar-timeline-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: #fff;
  color: #333;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.wetter-radar-timeline-btn:hover {
  background: #f2f2f2;
}
.wetter-radar-timeline-btn svg {
  display: block;
  width: 16px;
  height: 16px;
}
.wetter-radar-timeline-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  position: relative;
}
.wetter-radar-timeline-slider {
  width: 100%;
  accent-color: var(--color-f1-red);
  cursor: pointer;
}
.wetter-radar-timeline-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--color-text-muted);
  font-weight: 600;
  pointer-events: none;
}
.wetter-radar-now-marker {
  position: absolute;
  top: 1px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  pointer-events: none;
  z-index: 5;
}
.wetter-radar-now-marker-line {
  width: 2px;
  height: 9px;
  background: var(--color-f1-red);
  border-radius: 1px;
}
.wetter-radar-now-marker-label {
  font-size: 0.55rem;
  font-weight: 800;
  color: var(--color-f1-red);
  letter-spacing: 0.05em;
  line-height: 1;
}
.wetter-radar-timeline-label {
  flex: 0 0 auto;
  min-width: 150px;
  text-align: right;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text);
}
.wetter-radar-attribution {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-align: right;
}
.wetter-radar-attribution a {
  color: var(--color-f1-red);
  text-decoration: none;
}
.wetter-radar-attribution a:hover {
  text-decoration: underline;
}
.wetter-radar-note {
  margin-top: 0.3rem;
  font-size: 1.44rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* --- Live-Tab Diagramme --- */
.live-charts-container {
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.live-chart-block {
  margin-bottom: 1.5rem;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.85rem 1rem 0.6rem;
}
.live-chart-block:last-child {
  margin-bottom: 0.5rem;
}
.live-chart-title {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}
.live-chart-canvas-wrap {
  height: 200px;
  position: relative;
  overflow: hidden;
}
.live-chart-canvas {
  display: block;
}
@media (max-width: 600px) {
  .live-chart-canvas-wrap { height: 150px; }
  .live-charts-container { padding: 0.75rem; }
}
.wetter-radar-marker span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-f1-red);
  border: 2px solid #fff;
  box-shadow: 0 0 0 5px rgba(206, 46, 30, 0.35), 0 1px 4px rgba(0, 0, 0, 0.4);
}
.wetter-radar-fullscreen-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: #fff;
  color: #333;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}
.wetter-radar-fullscreen-btn:hover {
  background: #f2f2f2;
}
.wetter-radar-fullscreen-btn svg {
  display: block;
  width: 18px;
  height: 18px;
}
.wetter-radar-wrap:fullscreen {
  padding: 0;
  background: #000;
  display: flex;
  flex-direction: column;
}
.wetter-radar-wrap:-webkit-full-screen {
  padding: 0;
  background: #000;
  display: flex;
  flex-direction: column;
}
.wetter-radar-wrap:fullscreen .wetter-radar-iframe,
.wetter-radar-wrap:fullscreen .wetter-radar-map,
.wetter-radar-wrap:-webkit-full-screen .wetter-radar-iframe,
.wetter-radar-wrap:-webkit-full-screen .wetter-radar-map {
  flex: 1 1 auto;
  height: auto;
  border: none;
}
.wetter-radar-wrap:fullscreen .wetter-radar-timeline,
.wetter-radar-wrap:-webkit-full-screen .wetter-radar-timeline {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.96);
}
.wetter-radar-wrap:fullscreen .wetter-radar-timeline-btn,
.wetter-radar-wrap:-webkit-full-screen .wetter-radar-timeline-btn {
  background: #fff;
  color: #333;
  border-color: rgba(0, 0, 0, 0.2);
}
.wetter-radar-wrap:fullscreen .wetter-radar-timeline-label,
.wetter-radar-wrap:-webkit-full-screen .wetter-radar-timeline-label {
  color: var(--color-text);
}
.wetter-radar-wrap:fullscreen .wetter-radar-timeline-labels,
.wetter-radar-wrap:-webkit-full-screen .wetter-radar-timeline-labels {
  color: var(--color-text-muted);
}
.wetter-radar-wrap:fullscreen .wetter-radar-fullscreen-btn,
.wetter-radar-wrap:-webkit-full-screen .wetter-radar-fullscreen-btn {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
.wetter-radar-wrap:fullscreen .wetter-radar-attribution,
.wetter-radar-wrap:-webkit-full-screen .wetter-radar-attribution {
  display: none;
}

/* --- Responsive --- */
@media (max-width: 750px) {
  .wetter-controls {
    padding: 0.5rem 0.75rem 0;
  }
  .wetter-track-select-wrapper {
    margin-right: 0;
    width: 100%;
    padding-bottom: 0.4rem;
  }
  .wetter-track-select {
    width: 100%;
  }
  .wetter-main-row {
    flex-direction: column;
    gap: 1.5rem;
  }
  .wetter-icon-temp {
    flex-direction: row;
    gap: 1rem;
    justify-content: flex-start;
    min-width: 0;
  }
  .wetter-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    min-width: 0;
    width: 100%;
  }
  .wetter-radar-iframe {
    height: 513px; /* 684px x 75% */
  }
  .wetter-radar-map {
    height: 494px; /* 380px x 130% */
  }
  .wetter-radar-timeline-label {
    min-width: 110px;
    font-size: 0.72rem;
  }
  .whr-table {
    font-size: 1.05rem;
  }
  .whr-table th,
  .whr-table td {
    padding: 0.35rem 0.25rem;
  }
}

/* ─── Wetter Start-Tab: Zwei-Spalten-Layout ──────────────────────────────── */

.wetter-start-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}

.wetter-start-left {
  padding: 1.5rem;
  border-right: 1px solid var(--color-border);
}

.wetter-start-right {
  display: flex;
  flex-direction: column;
}

.wetter-start-section {
  margin-bottom: 1.4rem;
}

.wetter-start-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}

.wetter-start-address {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.5;
}

.wetter-start-map-wrap {
  margin-bottom: 1.5rem;
}

.wetter-start-map {
  width: 100%;
  height: 260px;
  border: 1px solid var(--color-border);
  display: block;
  background: #eef2f7;
}

/* Apps-Tabelle */
.wetter-apps-table {
  border-collapse: collapse;
  width: auto;
  margin-top: 0.5rem;
}

.wetter-apps-table td {
  padding: 0.45rem 0.75rem 0.45rem 0;
  vertical-align: middle;
  border: none;
  font-size: 0.9rem;
  color: var(--color-text);
}

.wetter-apps-table td:first-child {
  padding-right: 0.75rem;
  width: 100px;
}

.wetter-apps-table td:nth-child(2) {
  font-weight: 700;
  white-space: nowrap;
  padding-right: 0.75rem;
  min-width: 0;
}

.wetter-apps-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 14px;
  display: block;
}

/* Sub-Tabs Apple / Open-Meteo */
.wetter-api-tabs {
  display: flex;
  justify-content: center;
  border-bottom: 2px solid var(--color-border);
  padding: 0 1.5rem;
  flex-shrink: 0;
}

.wetter-api-tab {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.75rem 1.25rem;
  margin-bottom: -2px;
  transition: color 0.15s;
}

.wetter-api-tab.active {
  color: var(--color-text);
  border-bottom-color: var(--color-f1-red);
}

.wetter-api-tab:hover:not(.active) {
  color: var(--color-text);
}

.wetter-api-panel {
  display: none;
  flex: 1;
}

.wetter-api-panel.active {
  display: block;
}

.wetter-api-panel .wetter-metrics-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Responsive: unter 900 px einspaltenlayout */
@media (max-width: 900px) {
  .wetter-start-layout {
    grid-template-columns: 1fr;
  }

  .wetter-start-left {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
}

/* ─── Neue Wetter-Karte (.ww-*) ──────────────────────────────────────────── */

.ww-card {
  padding: 1.25rem 1.5rem 0.5rem;
  font-family: 'Titillium Web', sans-serif;
}

/* Kopfzeile */
.ww-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 0.1rem;
  border-bottom: 2px solid var(--color-border);
}

.ww-header-icon {
  font-size: 3rem;
  line-height: 1;
  flex-shrink: 0;
}

.ww-header-temp {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.ww-header-desc {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

.ww-updated {
  margin-left: auto;
  font-size: 0.62rem;
  color: var(--color-text-muted);
  text-align: right;
  line-height: 1.5;
  flex-shrink: 0;
}

/* Geteilte Abschnitt-Grundstruktur */
.ww-section {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--color-border);
}

.ww-section--last {
  border-bottom: none;
  padding-bottom: 0.25rem;
}

/* Label-Stil (klein, uppercase, gedämpft) */
.ww-bar-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-bottom: 0.3rem;
}

/* Temperatur-Anzeige groß */
.ww-temp-big {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

/* Temperatur-Balken mit Farbverlauf */
.ww-temp-bar-wrap {
  position: relative;
}

.ww-temp-bar {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(
    to right,
    #1a5fc8 0%,
    #29b0db 25%,
    #2ec97a 45%,
    #c8cc2e 60%,
    #f5c518 72%,
    #f58a18 84%,
    #d43520 100%
  );
  position: relative;
}

.ww-temp-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: #fff;
  border: 3px solid var(--color-f1-red);
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

.ww-temp-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.35rem;
  font-size: 0.6rem;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}

/* Zwei-Spalten-Zeile */
.ww-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--color-border);
}

/* Bar-Block (Bewölkung, Regen, Luftf.) */
.ww-bar-block {}

.ww-bar-value {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  margin-bottom: 0.45rem;
}

.ww-bar {
  height: 7px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

.ww-bar-fill {
  height: 100%;
  background: var(--color-f1-red);
  border-radius: 4px;
}

/* Wind-Zeile */
.ww-wind-row {
  display: flex;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--color-border);
}

.ww-wind-col {
  flex: 1;
}

.ww-wind-col + .ww-wind-col {
  border-left: 1px solid var(--color-border);
  padding-left: 1rem;
  margin-left: 0.5rem;
}

.ww-wind-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 0.25rem;
}

/* Einfacher Block (Sonnenstunden, Niederschlag) */
.ww-simple-block {}

.ww-simple-value {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 0.25rem;
}

/* Fehler */
.ww-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-f1-red);
}

/* ─── Vorhersage: Session-Kartengitter ───────────────────────────────────── */

.wetter-session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.5rem;
  padding: 1.5rem;
}

.ww-session-card {
  border: 1px solid var(--color-border);
}

.ww-session-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1.5rem;
  background: #f9f9f9;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-f1-red);
}

.ww-session-time {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.ww-session-card .wetter-state {
  min-height: 160px;
}

@media (max-width: 750px) {
  .wetter-session-grid {
    grid-template-columns: 1fr;
    padding: 1rem;
    gap: 1rem;
  }
}

/* ===================================================================
   FOOTER LINKS (Impressum / AGB / Cookie-Richtlinien)
   =================================================================== */
.footer-links {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.4rem;
}
.footer-links a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-links a:hover { color: #fff; }

/* ===================================================================
   RECHTLICHE SEITEN (impressum / agb / cookies)
   =================================================================== */
.legal-content {
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
}

.legal-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.legal-section {
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-border);
}
.legal-section:last-of-type { border-bottom: none; }

.legal-section h2 {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-f1-red);
  margin-bottom: 0.9rem;
}

.legal-section h3 {
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin: 1.1rem 0 0.5rem;
}

.legal-section p {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}
.legal-section p:last-child { margin-bottom: 0; }

.legal-section a {
  color: var(--color-f1-red);
  text-decoration: underline;
}
.legal-section a:hover { color: #a82417; }

.legal-list {
  list-style: disc;
  padding-left: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}
.legal-list li { margin-bottom: 0.25rem; }

.legal-table-wrap {
  overflow-x: auto;
  margin: 1rem 0;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.legal-table th {
  background: #0a0a0a;
  color: #fff;
  text-align: left;
  padding: 0.6rem 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  border-bottom: 3px solid var(--color-f1-red);
}
.legal-table td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  line-height: 1.5;
}
.legal-table tr:nth-child(even) td { background: #f9f9f9; }
.legal-table code {
  font-family: monospace;
  background: #f0f0f0;
  padding: 0.1em 0.4em;
  border-radius: 2px;
  font-size: 0.82rem;
}

.legal-back {
  margin-top: 2.5rem;
  font-size: 0.85rem;
}
.legal-back a {
  color: var(--color-f1-red);
  text-decoration: none;
  font-weight: 600;
}
.legal-back a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .legal-content { padding: 2rem 1rem 3rem; }
}

/* ===================================================================
   COOKIE-BANNER
   =================================================================== */
#cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #111;
  color: rgba(255,255,255,0.85);
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.82rem;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  z-index: 9999;
  border-top: 3px solid var(--color-f1-red);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.35);
}
#cookie-banner p { flex: 1; margin: 0; line-height: 1.6; min-width: 200px; }
#cookie-banner a { color: var(--color-f1-red); text-decoration: underline; }
#cookie-banner a:hover { color: #e04030; }
#cookie-banner button {
  background: var(--color-f1-red);
  color: #fff;
  border: none;
  padding: 0.5rem 1.5rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: background 0.15s;
}
#cookie-banner button:hover { background: #a82417; }

@media (max-width: 600px) {
  #cookie-banner { padding: 1rem; gap: 0.75rem; }
  #cookie-banner button { width: 100%; }
}

/* =====================================================
   AUTH — Login/Logout Button im Header
   ===================================================== */
.auth-btn-area {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 0.5rem 0 0.75rem;
}

.auth-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--color-f1-red);
  color: #fff !important;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 5px;
  white-space: nowrap;
  transition: background 0.15s;
  text-decoration: none;
}

.auth-login-btn:hover { background: #a82417; }

.auth-user-pill {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 100px;
  padding: 0.25rem 0.25rem 0.25rem 0.75rem;
}

.auth-bereich-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff !important;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.auth-bereich-link:hover { opacity: 0.8; }

.auth-logout-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 100px;
  color: #fff;
  font-size: 0.7rem;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  padding: 0;
  flex-shrink: 0;
}

.auth-logout-btn:hover { background: var(--color-f1-red); }

/* Auth-Item im Hamburger-Menü */
.overflow-auth-wrapper {
  border-top: 2px solid rgba(206, 46, 30, 0.35);
  padding: 0.75rem 1.25rem;
}

.overflow-auth-wrapper .auth-login-btn {
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: center;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}

.overflow-auth-wrapper .auth-login-btn:hover {
  color: var(--color-white);
}

.overflow-auth-wrapper .auth-user-pill {
  width: 100%;
  justify-content: space-between;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}

/* Auth-Button lebt ausschliesslich im Hamburger-Menü, nie im Header */
#auth-btn-area { display: none !important; }

/* Sticky-Bar: hat immer dunklen Hintergrund wenn Auth-Button sichtbar */
.sticky-bar { background: transparent; }

/* Lock-Icon auf geschützten Nav-Links */
.nav-link-locked::after {
  content: ' 🔒';
  font-size: 0.7em;
  opacity: 0.6;
}

/* ===== Strategy Guidelines – Tabs ===== */
.sg-tabs-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.sg-tab-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  padding: 1.5rem 0 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 1.5rem;
}

.sg-tab {
  padding: 0.5rem 1.2rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}

.sg-tab:hover {
  color: var(--color-text);
}

.sg-tab.active {
  color: var(--color-text);
  border-bottom-color: var(--color-f1-red);
}

/* ===================================================================
   START – RACING GUID HUB (index.html)
   =================================================================== */
.home-hub {
  padding: 3rem 2rem 4rem;
}

.home-hub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
}

.home-hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  min-height: 190px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-f1-red);
  padding: 2rem 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.home-hub-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

.home-hub-icon {
  color: var(--color-fia);
  transition: color 0.15s;
}

.home-hub-icon svg {
  width: 56px;
  height: 56px;
  display: block;
}

.home-hub-card:hover .home-hub-icon {
  color: var(--color-f1-red);
}

.home-hub-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1.25;
}

.home-hub-arrow {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  font-size: 1.1rem;
  color: var(--color-f1-red);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.15s;
}

.home-hub-card:hover .home-hub-arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 900px) {
  .home-hub-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
  .home-hub-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .home-hub { padding: 2rem 1rem 3rem; }
  .home-hub-grid { grid-template-columns: 1fr; }
  .home-hub-card { min-height: 150px; }
}

/* ===================================================================
   TEAMS – Logo-Übersicht (teams.html) & Team-Unterseiten
   =================================================================== */
.teams-logo-grid {
  padding: 2.5rem 2rem 3.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}

.team-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 2;
  padding: 1rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.team-logo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
  border-color: var(--color-text-muted);
}

.team-logo-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Team-Unterseite: grosses Logo */
.team-page-logo {
  max-width: 900px;
  margin: 3rem auto;
  padding: 2.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-page-logo img {
  max-width: 360px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ===================================================================
   TEAM-Unterseiten – Personen (Driver & Team) + Link-Leiste
   =================================================================== */
.team-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 2rem 2rem;
}

.team-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin: 2rem 0 1.5rem;
}

.team-people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.25rem;
}

.person-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-surface);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.person-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
  border-color: var(--color-text-muted);
}

.person-card-img {
  aspect-ratio: 3 / 4;
  background: #f2f2f2;
}

.person-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}

.person-card-body {
  padding: 0.75rem 0.9rem 1rem;
}

.person-card-role {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}

.person-card-name {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.25;
}

/* Link-Leiste (Teamwebseite, Instagram, Formula 1, Motorsport Magazin) */
.team-links-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.team-link-card {
  width: 210px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.team-link-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
  border-color: var(--color-text-muted);
}

.team-link-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ===================================================================
   AUTOS – Auto-Button (Teamseite) + Auto-Unterseite (Galerie/Lightbox)
   =================================================================== */
.car-card-row { display: flex; justify-content: center; }

.car-card {
  display: flex;
  flex-direction: column;
  width: 340px;
  max-width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-surface);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
a.car-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
  border-color: var(--color-text-muted);
}
.car-card-img { aspect-ratio: 16 / 10; background: #f2f2f2; }
.car-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-card-name { text-align: center; font-weight: 700; font-size: 1.1rem; padding: 0.8rem; }

/* Auto-Unterseite: Link-Button */
.car-link-wrap { text-align: center; padding: 1.5rem 2rem 0.5rem; }
.car-link-btn {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  background: var(--color-f1-red);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  transition: opacity 0.15s ease;
}
.car-link-btn:hover { opacity: 0.85; }

/* Auto-Unterseite: Bildergalerie */
.car-gallery {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 2rem 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.car-gallery-item {
  position: relative;
  padding: 0;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-surface);
  cursor: pointer;
  aspect-ratio: 16 / 10;
  display: block;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.car-gallery-item:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10); }
.car-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-gallery-zoom {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

/* Auto-Unterseite: Vergrößern-Overlay (kein echtes Vollbild) */
.car-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  padding: 2rem;
}
.car-lightbox.open { display: flex; }
.car-lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.car-lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.75rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
}