/* ==============================================
   FOOTER CONSOLIDATION (2025-10-16)
   - Removed unused `.site-footer` rules.
   - Standardized on `.site-footer--slim` (used via partials/footer.php across all pages).
   ============================================== */
/* =========================================================
   style.css — Zentrale Styles (bereinigt & strukturiert)
   ========================================================= */

:root {
--bg: #d1d1d1;	/* Grau Mittel (Seitenhinterrund)*/
--fx: #ff5f1f;    /* Orange Dunkel (Active / Brand) */
--fx2: #faa14d;   /* Orange Hell (Accent/Hover) (z.B. Rang-Farbe) */
--muted: #6b6b6b;	/* Grau dunkel*/
--box: #ffffff; 	/* weißgrau (Box Hinterrund)*/
--hero: #767572; /* Grau  (Hero hintergrund und Logo grau)*/

  /* Typo */
  --h1: 36px;
  --h2: 26px;
  --h3: 16px;
  --text: 14px;

  /* Layout & Deko */
  --radius-box: 10px;
  --shadow: 0 2px 8px rgba(0,0,0,.06);
  --shadow-lg: 0 6px 16px rgba(0,0,0,.12);
  --border: 1px solid #e7e7e7;
  --container-pad: 24px;

  /* Grid */
  --grid-gap: 16px;

  /* Medien (Cards) */
  --card-media-height: 140px;
  --standings-media-zoom: 1.10; /* +10% Zoom für Fahrerbilder (Box 1 & 2) */
}

/* =========================
   Reset / Base
   ========================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; padding-bottom: 20px; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select, textarea { font: inherit; }
:focus-visible { outline: 2px dashed var(--fx2); outline-offset: 2px; }

/* =========================
   Body + Typography
   ========================= */
body.bg {
  background: var(--bg);
  color: #111;
  font: 400 var(--text)/1.6 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
h1, h2 { font-family: 'Orbitron', sans-serif; letter-spacing: .2px; }
h1 { font-size: var(--h1); font-weight: 700; margin: 0 0 8px; }
h2 { font-size: var(--h2); font-weight: 400; margin: 0 0 8px; }
h3 { font: italic 700 var(--h3)/1.4 'Montserrat', sans-serif; margin: 0 0 6px; }
p  { margin: 0 0 10px; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =========================
   Layout
   ========================= */
.container { max-width: 1800px; margin: 0 auto; padding: 0 var(--container-pad); }
.page { padding: 24px 0; }

/* Utility */
.grid-span-all { grid-column: 1 / -1; }

/* =========================================================
   Header / Navigation
   ========================================================= */
.site-header {
  position: sticky; top: 0;
  z-index: 1000;
  background: #6b6b6b; color: #fff; isolation: isolate;
  box-shadow: 0 1px 0 rgba(0,0,0,.1);
}
.nav-bg {
  position: absolute; inset: 0;
  background: url('/images/content/Header%20Hintergrund.webp') center/cover no-repeat;
  opacity: .5; z-index: -1;
}
.nav {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  height: 164px;
}
.brand { display: flex; align-items: center; }
.brand img { height: 140px; width: auto; }

/* Desktop-Menü */
.site-header .menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 12px;
}
.site-header .menu a {
  background: rgba(107,107,107,.75);
  color: #fff;
  padding: 10px 12px;
  border-radius: var(--radius-box);
  transition: background .2s ease, transform .15s ease, color .2s ease;
  text-align: center;
  white-space: nowrap;
}
.site-header .menu a:hover  { background: var(--fx2); color: #111; }
.site-header .menu a.active { background: var(--fx);  color: #fff; }
.site-header .menu a:active { transform: translateY(1px); }

/* Burger */
.burger { display: none; width: 40px; height: 40px; z-index: 1200; cursor: pointer; }
.burger span { display: block; height: 2px; background: #fff; margin: 7px 0; border-radius: 2px; }

/* =========================================================
   Hero (Full-bleed)
   ========================================================= */
.hero--full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border: 0; border-radius: 0; box-shadow: none;
  background: var(--box);
  margin-top: 0 !important;
}
.hero--full .hero-inner {
  padding: 0 30px;
  max-width: 1800px;
  margin: 0 auto;
}


/* =========================================================
   Grids & Cards
   ========================================================= */
.grid3, .grid4, .cards {
  display: grid; gap: var(--grid-gap);
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
}
@media (max-width: 1100px) { }
@media (max-width: 900px)  { .grid3, .grid4, .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .grid3, .grid4, .cards { grid-template-columns: 1fr; } }

.grid3 > *, .grid4 > *, .cards > * { margin: 8px; }

.card {
  background: var(--box);
  border: var(--border);
  border-radius: var(--radius-box);
  box-shadow: var(--shadow);
  padding: 20px;
  margin: 8px;
  transition: transform .15s ease, box-shadow .15s ease;
  will-change: transform;
}

/* ==========================================================================
   INDEX — Card Background Modifiers
   - Reusable renderer via CSS var --card-bg
   - Variants for: driver/team/event
   ========================================================================= */
.card[class*="card--bg-"] {
  position: relative;
  overflow: hidden;
  color: #fff;
}
.card[class*="card--bg-"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card-bg) center/cover no-repeat;
  z-index: 0;
  filter: saturate(105%) contrast(105%) brightness(.9);
  border-radius: inherit;
}
.card[class*="card--bg-"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35));
  z-index: 0;
  border-radius: inherit;
}
.card[class*="card--bg-"] > * { position: relative; z-index: 1; }
.card[class*="card--bg-"] a { color:#fff; text-decoration-color: rgba(255,255,255,.6); }

/* Variants (images under /public/images/content) */
.card--bg-driver { --card-bg: url("/images/content/bg_driver.png"); }
.card--bg-team   { --card-bg: url("/images/content/bg_team.png"); }
.card--bg-event  { --card-bg: url("/images/content/bg_event.png"); }

/* Direct background fallback to win over generic .card background */
.card.card--bg-driver,
.card.card--bg-team,
.card.card--bg-event {
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  color: #fff !important;
}
.card.card--bg-driver {
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35)),
    url("/images/content/bg_driver.png"),
    url("/rally/images/content/bg_driver.png") !important;
}
.card.card--bg-team {
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35)),
    url("/images/content/bg_team.png"),
    url("/rally/images/content/bg_team.png") !important;
}
.card.card--bg-event {
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35)),
    url("/images/content/bg_event.png"),
    url("/rally/images/content/bg_event.png") !important;
}

/* Muted text light on image cards */
.card[class*="card--bg-"] .muted { color: rgba(255,255,255,.82); }
.card[class*="card--bg-"] .muted a { color: inherit; text-decoration-color: rgba(255,255,255,.6); }

.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card .card-media { height: var(--card-media-height); background: #dcdcdc center/cover no-repeat; }
.card .card-body  { padding: 14px; }

.card-media { position: relative; overflow: hidden; border-radius: var(--radius-box); }
.card-media .card-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =========================================================
   Tabs
   ========================================================= */
.tabs { display: flex; gap: 12px; align-items: center; margin: 8px 0 16px; flex-wrap: wrap; }
.tab.active { background: var(--fx); color: #fff; }

/* =========================================================
   Tables
   ========================================================= */
.table-wrap { overflow: auto; }
.table {
  width: 100%; border-collapse: collapse;
  background: var(--box); border: var(--border);
  border-radius: var(--radius-box); overflow: hidden;
}
.table th, .table td { border-bottom: 1px solid #ddd; padding: 8px; vertical-align: middle; }
.table thead th { position: sticky; top: 0; z-index: 1; background: #f8f8f8; text-align: left; }
.num { text-align: right; }
.accordion-item { border-bottom: 1px solid #e9e9e9; }
.accordion-item:last-child { border-bottom: 0; }
.accordion-item.open .accordion-panel { display:  block; }

/* =========================================================
   Forms (global)
   ========================================================= */
.form-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .form-row { grid-template-columns: 1fr; } }
label { font-weight: 700; font-size: 13px; }
input[type="text"], input[type="date"], input[type="email"], input[type="password"], select, textarea {
  width: 100%; padding: 8px 10px; border-radius: var(--radius-box);
  border: 1px solid #ccc; background: #fff;
}
input[type="text"]:focus, input[type="date"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
  border-color: var(--fx);
}

/* Saison-Auswahl (Standings) */
.season-form { display: flex; align-items: center; gap: 10px; margin: 12px 8px 20px; }
.season-form label { font-weight: 700; }
.season-form select, .season-form button { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid #ccc; background: #fff; }
.season-form select:focus, .season-form button:focus { outline: 2px solid var(--fx2); outline-offset: 1px; }
.select-full { width: 100%; }

/* =========================================================
   Buttons & Chips
   ========================================================= */
.btn {
  display: inline-block; padding: 8px 12px; border-radius: var(--radius-box);
  background: var(--fx); color: #fff; text-decoration: none;
  transition: transform .15s ease, background .2s ease;
}
.btn:hover { background: #ff6f2f; }
.btn:active { transform: translateY(1px); }

/* =========================================================
   Animations
   ========================================================= */
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.card, .table, .accordion { animation: fadeUp .25s ease both; }/* =========================================================
   Print
   ========================================================= */
@media print {
  .site-header, .tabs, .btn, .burger { display: none !important; }
  body.bg { background: #fff; }
  .card, .table { box-shadow: none; border: 1px solid #ccc; }
}

/* =========================================================
   Standings – Tabellen & Medien
   ========================================================= */
.table-left th, .table-left td { text-align: left !important; }
.table-left .col-total { font-weight: 700; }


/* =========================================================
   Standings – Tabelleninhalte (Angleichen an fahrerlager_results.php)
   ========================================================= */
.gw-table td, .gw-table th {
  font-size: var(--text) !important; /* gleiche Größe wie in fahrerlager_results.php */
  line-height: 1.6 !important;
}
/* =========================================================
   Calendar — Vergangene & nächstes Event
   ========================================================= */
.card.event.past { position: relative; }
.card.event.past::after {
  content: ""; position: absolute; inset: 0; background: #6b6b6b; opacity: 0.5; border-radius: inherit; pointer-events: none;
}
.card.event.upcoming { box-shadow: 0 0 14px 4px rgba(255, 95, 31, 0.45); }

/* =========================================================
   Navigation – Logout-Icon
   ========================================================= */
.site-header .menu .menu-logout a {
  background: transparent !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(1em + 20px);
  transition: transform .15s ease;
}
.site-header .menu .menu-logout a:hover,
.site-header .menu .menu-logout a:active { background: transparent !important; transform: none; }
.site-header .menu .menu-logout img { display: block; height: 100%; width: auto; }

/* =========================================================
   Mobile Navigation (Burger + CSS-only Toggle)
   ========================================================= */
@media (max-width: 900px) {
  .burger { display: inline-block; }
  .nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

  .site-header .menu {
    position: absolute; top: 164px; right: var(--container-pad);
    display: none; flex-direction: column; align-items: flex-end; gap: 8px;
    background: transparent; padding: 0; z-index: 1100;
  }
  .nav-toggle:checked + .menu,
  .site-header .menu.open { display: flex; }

  .site-header .menu a {
    display: block; width: auto; text-align: center; padding: 9px 16px;
    background: rgba(107,107,107,1); color: #fff; border-radius: var(--radius-box);
    margin: 4px 0;
  }

  .site-header .menu .menu-logout a {
    background: transparent !important; padding: 0 !important; border-radius: 0 !important; margin: 4px 0;
  }
  .site-header .menu .menu-logout a:hover,
  .site-header .menu .menu-logout a:active { background: transparent !important; transform: none; }
}

/* =========================================================
   Fahrerlager – Subnavigation (Kachel-Grid)
   ========================================================= */

/* eigene Grid-Zeile; Breite = Boxbreite */
.fahrerlager .subnav-row { 
  margin-top: 8px; 
}

/* Subnav selbst sitzt in der Grid-Zeile (zentriert) */
.fahrerlager .subnav-row > .fahrerlager-subnav {
  grid-column: 2;
  justify-self: center;
  width: 100%;
}

/* Standard: Desktop-Gitter für den Fahrerlager-Content */
.fahrerlager .subnav-row {
  grid-template-columns: repeat(3, 1fr);
}

/* Fahrerlager – Kachel-Navigation */
.fahrerlager .fahrerlager-subnav {
  display: grid;
  gap: 8px;
  /* seitlicher Innenabstand wie bei den Content-Boxen (ggf. 16px anpassen) */
  padding: 0 8px;
  margin: 8px 0;
  background: transparent; /* Kacheln liegen direkt auf dem Seitenhintergrund */
  box-sizing: border-box;

  /* Mobile/Tablet: Spaltenanzahl aus PHP (max. 2 Zeilen bei 8–10 Einträgen) */
  grid-template-columns: repeat(var(--nav-cols-two-row, 4), minmax(0, 1fr));
}

/* Kacheln (einzeln, gleiche Farbe wie bisherige Pille) */
.fahrerlager .subnav-tile {
  position: relative;
  display: flex;
  flex-direction: column;      /* Icon oben, Text unten (auch wenn Text versteckt ist) */
  align-items: center;
  justify-content: center;
  gap: 4px;

  min-height: 64px;            /* große Touchfläche */
  padding: 8px 6px 10px;

  text-decoration: none;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;

  background: #98a2ab;         /* wie bisherige subnav-Pille */
  color: #fff;
  border-radius: var(--radius-box);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);

  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.fahrerlager .subnav-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,.18);
}

/* aktiver Eintrag: orange Ring + Unterstrich */
.fahrerlager .subnav-tile.is-active {
  box-shadow: 0 0 0 2px var(--fx);
}

.fahrerlager .subnav-tile.is-active::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 4px;
  height: 3px;
  border-radius: 999px;
  background: var(--fx);
}

/* Icon */
.fahrerlager .subnav-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fahrerlager .subnav-icon {
  display: block;
  width: 38px;  /* vorher 26px, jetzt ~20% größer */
  height: auto;
}

/* Text-Label: komplett ausgeblendet (Desktop, Tablet, Mobile) */
/* -> Navigation rein über Icons, Aria-Label/Alt bleiben für Screenreader */
.fahrerlager .subnav-label {
  display: none;
}

/* Responsives Verhalten */
/* Tablet-Breakpoint: 2 Spalten im Container-Grid, Subnav nutzt beide Spalten */
@media (max-width: 900px) {
  .fahrerlager .subnav-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .fahrerlager .subnav-row > .fahrerlager-subnav {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
  }
}

/* Sehr schmale Screens: eine Spalte, Subnav volle Breite */
@media (max-width: 700px) {
  .fahrerlager .subnav-row {
    grid-template-columns: 1fr;
  }
  .fahrerlager .subnav-row > .fahrerlager-subnav {
    grid-column: 1;
    width: 100%;
  }
}

/* Desktop: eine Zeile, nur Logos (Text ist sowieso global versteckt) */
@media (min-width: 1024px) {
  .fahrerlager .fahrerlager-subnav {
    grid-template-columns: repeat(var(--nav-count, 8), minmax(0, 1fr));
  }

  .fahrerlager .subnav-tile {
    min-height: 56px;
    padding: 10px 4px;
  }
}

/* =========================================================
   Fahrerlager – spezifische Boxen
   ========================================================= */

/* Box 1: Fahrer- & Team-Bilder */
.fahrerlager .driver-media .card-img {
  object-fit: contain !important;
  object-position: center;
  transform: scale(var(--standings-media-zoom));
  transform-origin: center center;
}
.fahrerlager .team-logo { margin-top: 12px; text-align: center; }
.fahrerlager .team-logo img { display: block; margin: 0 auto; max-height: 80px; width: auto; }

/* Box 2: Wertung – Kopfzeile: Platz links, Punkte rechts */
.fahrerlager .rating-box { margin-top: 6px; }
.fahrerlager .rating-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  background: #f8f8f8;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  margin-bottom: 10px;
}
.fahrerlager .rating-summary .left {
  display: flex; align-items: baseline; gap: 8px;
}
.fahrerlager .rating-summary .left .rating-title { margin: 0; font-size: 18px; }
.fahrerlager .rating-summary .left .rank { color: var(--fx2); font-weight: 800; font-size: 22px; }
.fahrerlager .rating-summary .points-right {
  font-weight: 700; font-size: 12px; color: var(--muted); text-align: right;
}
.fahrerlager .rating-summary .value { display: flex; align-items: baseline; gap: 8px; font-weight: 800; font-size: 22px; }
.fahrerlager .rating-summary .value .rank { color: var(--fx2); }
.fahrerlager .rating-summary .value .suffix { font-weight: 600; font-size: 12px; color: var(--muted); }

.fahrerlager .rating-box .subhead { margin-top: 18px; }

/* Letzte 3 Events */
.fahrerlager .event-ranks { list-style: none; margin: 0; padding: 0; --event-left-col: 210px; }
.fahrerlager .event-ranks li {
  display: grid;
  grid-template-columns: var(--event-left-col) 1fr;
  column-gap: 12px;
  align-items: start;
  text-align: left;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 6px;
}
.fahrerlager .event-ranks .label .date  { display: block; font-weight: 700; }
.fahrerlager .event-ranks .label .ename { display: block; color: var(--muted); }
.fahrerlager .event-ranks .badge {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
}
.fahrerlager .event-ranks .badge .badge-inline { display: block; font-weight: 700; line-height: 1.1; }
.fahrerlager .event-ranks .badge .badge-inline .badge-rank { font-weight: 800; }
.fahrerlager .event-ranks .badge .badge-points { display: block; font-weight: 600; font-size: 12px; color: var(--muted); margin-top: 2px; }
@media (max-width: 820px) { .fahrerlager .event-ranks { --event-left-col: 180px; } }
@media (max-width: 600px) { .fahrerlager .event-ranks { --event-left-col: 150px; } }

/* Box 3: Profil */
.fahrerlager .profile-form .form-row {
  display: flex !important;
  flex-direction: column-reverse;
  gap: 0 !important;
  margin-bottom: 16px;
}
.fahrerlager .profile-form label {
  margin: 0 0 14px !important;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.fahrerlager .profile-form input[type="text"],
.fahrerlager .profile-form input[type="email"],
.fahrerlager .profile-form input[type="password"],
.fahrerlager .profile-form textarea,
.fahrerlager .profile-form select {
  -webkit-appearance: none; appearance: none;
  width: 100%; padding: 10px 12px;
  border-radius: var(--radius-box); border: 1px solid #ccc;
  background: #fff !important; line-height: 1.4;
}

/* Spinner-Pfeile entfernen (normale Eingabefelder), Dropdowns bleiben */
.fahrerlager .card .form input[type="number"]{
  -moz-appearance: textfield;
}
.fahrerlager .card .form input[type="number"]::-webkit-inner-spin-button,
.fahrerlager .card .form input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Falls im Setup eine custom Spinbox verwendet wird: Pfeile ausblenden */
.fahrerlager .card .form .spinbox__arrows{ display:none !important; }
.fahrerlager .card .form .spinbox input{ padding-right: 12px !important; }
.fahrerlager .profile-form input:focus,
.fahrerlager .profile-form textarea:focus,
.fahrerlager .profile-form select:focus {
  border-color: var(--fx); outline: none;
}


/* =========================================================
   Reglement — flache Akkordeons (Header farbig, Grid-Layout)
   ========================================================= */
.reglement-acc {
  margin: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}
@media (max-width: 900px) { .reglement-acc { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .reglement-acc { grid-template-columns: 1fr; } }

/* jedes Item verhält sich wie eine Box-Spalte */
.reglement-acc .acc-item { display: block; }

/* farbiger Header in Subnav-Farbe, weiße Schrift */
.reglement-acc .acc-head {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: #98a2ab;
  color: #fff;
  border: 0;
  cursor: pointer; text-align: left;
  border-radius: var(--radius-box);
  box-shadow: var(--shadow);
  transition: filter .15s ease, transform .12s ease;
}
.reglement-acc .acc-head:hover,
.reglement-acc .acc-head:focus-visible { filter: brightness(1.05); }
.reglement-acc .acc-head:active { transform: translateY(1px); }

/* Icon + Titel */
.reglement-acc .acc-ico { width: 28px; height: 28px; object-fit: contain; flex: none; }
.reglement-acc .acc-title { font-weight: 800; font-size: 16px; letter-spacing: .2px; }

/* Caret (Chevron) rechts — weiß */
.reglement-acc .acc-head .acc-caret {
  margin-left: auto;
  width: 10px; height: 10px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  transition: transform .18s ease, opacity .15s ease;
  opacity: .9;
}
.reglement-acc .acc-item.open .acc-head .acc-caret { transform: rotate(45deg); }

/* Panel wie eine Card; sitzt direkt unter dem Header innerhalb der gleichen Grid-Zelle */
.reglement-acc .acc-panel {
  display: none;
  margin-top: 6px;
  background: var(--box);
  border: var(--border);
  border-radius: var(--radius-box);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.reglement-acc .acc-item.open .acc-panel { display: block; }
.reglement-acc .acc-panel > :first-child { margin-top: 0; }
.reglement-acc .acc-panel > :last-child  { margin-bottom: 0; }

/* =========================================================
   Admin — View-Switch & Nutzerkarten
   ========================================================= */

/* zentrierter View-Dropdown (ohne Card), volle Spaltenbreite */
.admin-view-switch {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 0;              /* kein Card-Padding */
  margin: 8px;             /* an Grid-Karten-Margins angleichen */
}
.admin-view-switch select {
  width: 100%;             /* so breit wie die (Grid-)Karten */
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: var(--radius-box);
  background: #fff;
  max-width: none;
}

/* Fahrerkarte: etwas Luft und Name orange, wenn geöffnet */
.user-cards details.user-card { margin-bottom: 16px; }
/* robustes Highlighting */
details.user-card[open] summary .user-name { color: var(--fx2) !important; }
/* Schlanker Minimal-Footer */
.site-footer--slim {
  background: #f2f2f2;       /* hellgrau wie Hero */
  color: #333;               /* dunkelgrau */
  font-size: 10px;
  height: 10px;
  line-height: 10px;
  text-align: center;
}
.site-footer--slim a {
  color: #333;
  text-decoration: none;
}

/* =========================
   Standings — Gesamtwertung (nur letzte Box)
   ========================= */

/* Desktop (≥ 768px): volle Labels zeigen, Mobilspalte ausblenden */
@media (min-width: 768px) {
  .gw-table .th-full { display: inline; }
  .gw-table .th-narrow { display: none; }
  .gw-table .col-rq { display: none; }
}

/* Mobil (≤ 767px): Kurzlabels, Tages- & Quali-Punkte ausblenden, Renn/Quali einblenden */
@media (max-width: 767px) {
  .gw-table .th-full { display: none; }
  .gw-table .th-narrow { display: inline; }

  .gw-table th.col-day, .gw-table td.col-day,
  .gw-table th.col-qual, .gw-table td.col-qual { display: none; }

  .gw-table .col-rq { display: table-cell; }
}

/* === Fix: Responsive toggling for Gesamtwertung (.gw-table) === */
/* Desktop (≥ 768px): hide "Renn/Quali" */
@media (min-width: 768px) {
  .gw-table .col-rq { display: none !important; }
  /* Fallback by position (7th column) */
  .gw-table th:nth-child(7),
  .gw-table td:nth-child(7) { display: none !important; }
}

/* Mobile (≤ 767px): hide Tages-/Quali-Punkte; show Renn/Quali */
@media (max-width: 767px) {
  /* Class-based */
  .gw-table th.col-day, .gw-table td.col-day,
  .gw-table th.col-qual, .gw-table td.col-qual { display: none !important; }
  .gw-table .col-rq { display: table-cell !important; }

  /* Fallback by position (4th & 5th hide, 7th show) */
  .gw-table th:nth-child(4), .gw-table td:nth-child(4),
  .gw-table th:nth-child(5), .gw-table td:nth-child(5) { display: none !important; }
  .gw-table th:nth-child(7), .gw-table td:nth-child(7) { display: table-cell !important; }
}

/* Schlanker Minimal-Footer */
.site-footer--slim {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f2f2f2;   /* hellgrau wie Hero */
  color: #333;           /* dunkelgrau */
  font-size: 10px;
  height: 20px;          /* 10px ist zu knapp für Text, etwas Reserve */
  line-height: 20px;     /* vertikal zentrieren */
  text-align: center;
  z-index: 1000;         /* über Inhalt */
  border-top: 1px solid #ddd;
}
.site-footer--slim a {
  color: #333;
  text-decoration: none;
  

}

/* Cookie-Hinweis (fixed bottom, dark theme, single orange button) */
.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: none; /* JS zeigt es bei Bedarf; Server-Fallback kann inline display:block setzen */
  background: #333;         /* dunkelgrau */
  color: #d1d1d1;           /* hellgrau */
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.4;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.cookie-bar a { color: #fff; text-decoration: underline; }

.cookie-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cookie-bar__text { margin: 0; }

.cookie-bar__btn {
  display: inline-block;
  padding: 8px 12px;
  border-radius: var(--radius-box);
  background: var(--fx);   /* Orange wie Nav-Buttons */
  color: #fff;
  text-decoration: none;
  transition: transform .15s ease, background .2s ease;
  border: none;
  cursor: pointer;
  font-weight: 700;
}
.cookie-bar__btn:hover { background: #ff6f2f; }
.cookie-bar__btn:active { transform: translateY(1px); }

@media (max-width: 767px) {
  .cookie-bar { font-size: 13px; }
}


/* =========================================================
   Fahrzeug: Toolbar – eine Linie auf Desktop
   ========================================================= */
.vehicle-toolbar{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:nowrap;       /* Desktop: eine Zeile */
  width:100%;
}

/* Dropdown flexibel, nicht überbreit */
.vehicle-toolbar #vehicle_select,
.vehicle-toolbar select{
  flex:1 1 auto;
  min-width:260px;
  max-width:520px;
}

/* "Neu" & "Löschen" rechtsbündig */
.vehicle-toolbar #btn_new_vehicle_empty{
  margin-left:auto;       /* schiebt die Buttons nach rechts */
}

/* Buttons & Formular bündig, ohne Sprung */
.vehicle-toolbar .btn{
  margin:0;
  line-height:1;
  height:40px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}
.vehicle-toolbar form{
  margin:0;
  display:inline-flex;
  align-items:center;
}

/* Mobile/Tablet: umbrechen erlaubt */
@media (max-width:900px){
  .vehicle-toolbar{ flex-wrap:wrap; gap:12px; }
  .vehicle-toolbar #vehicle_select,
  .vehicle-toolbar select{ flex:1 1 100%; min-width:0; max-width:none; }
  .vehicle-toolbar #btn_new_vehicle_empty{ margin-left:0; }
}


/* ===== Fahrerlager Setup: Formularfelder wie in Box "Profil" (ohne Fahrzeug-Toolbar) ===== */
.fahrerlager .card .form .form-row { 
  display: flex; 
  flex-direction: column-reverse; 
  gap: 0; 
  margin-bottom: 16px;
}
.fahrerlager .card .form label {
  margin: 0 0 14px;
  font-size: 12px; 
  font-weight: 600; 
  color: var(--muted);
}
.fahrerlager .card .form input[type="text"],
.fahrerlager .card .form input[type="email"],
.fahrerlager .card .form input[type="password"],
.fahrerlager .card .form input[type="date"],
.fahrerlager .card .form input[type="number"],
.fahrerlager .card .form textarea,
.fahrerlager .card .form select {
  -webkit-appearance: none; appearance: none;
  width: 100%; padding: 10px 12px;
  border-radius: var(--radius-box); border: 1px solid #ccc;
  background: #fff !important; line-height: 1.4;
}
.fahrerlager .card .form input:focus,
.fahrerlager .card .form textarea:focus,
.fahrerlager .card .form select:focus {
  border-color: var(--fx); outline: none;
}
/* Schutz: Fahrzeug-Toolbar nicht beeinflussen */
.vehicle-toolbar select { -webkit-appearance: none; appearance: none; }



/* === OVERRIDE: filter selects must fill 100% (50/50 with 16px gap) === */
.season-form.season-and-event{ width:100%; margin:0 0 12px 0 !important; }
.season-form.season-and-event .season-row{ display:flex; width:100%; gap:16px; align-items:center; flex-wrap:nowrap; }
.season-form.season-and-event .season-row .col{ flex:1 1 0; min-width:0; }
.season-form.season-and-event .select-full,
.season-form.season-and-event select{ width:100% !important; display:block; box-sizing:border-box; }



/* === FIX: enforce Pinterest column layout (with vendor prefixes) =========== */
#gallery-grid.pin-columns{
  display:block !important;
  width:100% !important;
  column-count: 4 !important;
  column-gap: 16px !important;
  -webkit-column-count: 4 !important;
  -webkit-column-gap: 16px !important;
  -moz-column-count: 4 !important;
  -moz-column-gap: 16px !important;
  padding: 0 8px !important;
  margin:0 !important;
}
@media (max-width: 1100px){
  #gallery-grid.pin-columns{
    column-count: 3 !important;
    -webkit-column-count: 3 !important;
    -moz-column-count: 3 !important;
  }
}
@media (max-width: 640px){
  #gallery-grid.pin-columns{
    column-count: 2 !important;
    -webkit-column-count: 2 !important;
    -moz-column-count: 2 !important;
  }
}
/* Tiles must not break and must behave like blocks inside columns */
#gallery-grid.pin-columns .pin{
  display:block !important;
  break-inside: avoid-column !important;
  -webkit-column-break-inside: avoid !important;
  -moz-column-break-inside: avoid !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  float: none !important;
}
#gallery-grid.pin-columns .pin > img,
#gallery-grid.pin-columns .pin > video{
  display:block !important;
  width:100% !important;
  height:auto !important;
  border-radius: var(--pin-radius);
}



/* === FIX: rounded corners for pins and media ================================= */
#gallery-grid.pin-columns .pin{
  border-radius: var(--pin-radius) !important;
  overflow: hidden !important;          /* clip child corners */
  background: transparent !important;
}
#gallery-grid.pin-columns .pin > img,
#gallery-grid.pin-columns .pin > video{
  border-radius: inherit !important;    /* take radius from parent */
  display: block !important;
}



/* === FORCE ROUNDED CORNERS (with fallback + Safari clip) =================== */
:root{ --pin-radius: 14px; } /* ensure variable exists */
#gallery-grid.pin-columns .pin{
  border-radius: var(--pin-radius,14px) !important;
  overflow: hidden !important;
  background: transparent !important;
  /* Safari/WebKit sometimes ignores overflow for masks; clip-path enforces rounding */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  clip-path: inset(0 round var(--pin-radius,14px)) !important;
}
#gallery-grid.pin-columns .pin > img,
#gallery-grid.pin-columns .pin > video{
  border-radius: var(--pin-radius,14px) !important;
  display: block !important;
}

.grid {
  display: grid;
}


/* ==========================================================================
   HERO COMPONENT
   - Base: .hero
   - Inner: .hero .hero-inner (keeps content above overlays)
   - Modifier: .hero--fade (solid gradient #6b6b6b -> #d1d1d1; fade starts at 50%)
   ========================================================================= */
.hero { position: relative; }
.hero .hero-inner { position: relative; z-index: 1; }
.hero--fade::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff var(--hero-fade-hold, 50%),
    #d1d1d1 100%
  );
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

/* ===== Teams & Fahrer ===== */
/* =====================================================================
   Teams & Fahrer
   - Team-Logos +50px (122x122)
   - Logo-Container ohne Border, Padding, Background, Schatten
   - Fahrer-Karten behalten ihren Rand (keine Änderung an .card border)
   - Team-Boxen untereinander; Fahrergrid max 3 → 2 → 1
   ===================================================================== */

.teams-driver .td-team-stack{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

.teams-driver .td-team.card{ margin: 8px; }
.teams-driver .td-team__header{ display:flex; align-items:center; gap:16px; margin-bottom:8px; }

/* LOGO: größer & nackter Container (keine Zierelemente) */
.teams-driver .td-team__logo{
  width:122px;
  height:122px;
  border:none !important;
  padding:0 !important;
  background: transparent !important;
  box-shadow:none !important;
  border-radius:0; /* Container selbst ohne Radius */
  display:flex; align-items:center; justify-content:center;
}
.teams-driver .td-team__logo img{
  width:100%; height:100%;
  object-fit:contain;
  box-shadow:none !important;
  background:transparent !important;
  outline:none;
}

/* Fahrer-Grid: MAX 3 → 2 → 1 Spalten */
.teams-driver .td-driver-grid{
  display:grid; gap: var(--grid-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px){
  .teams-driver .td-driver-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .teams-driver .td-driver-grid{ grid-template-columns: 1fr; }
}

/* Fahrer-Card: gleiche Höhe & KEIN Zoom */
.teams-driver .td-driver-card{ display:flex; flex-direction:column; height:100%; }
.teams-driver .td-driver-grid > .td-driver-card{ height:100%; }
.teams-driver .td-driver-card .card-media{
  --card-media-height: 200px;
  height: var(--card-media-height);
  border-radius: var(--radius-box);
  overflow: hidden;
  background: #dcdcdc center/contain no-repeat;
}
.teams-driver .td-driver-card .card-img{
  width:100%; height:100%;
  object-fit: contain !important;
  transform: scale(1) !important;
  object-position:center;
  display:block;
}
.teams-driver .td-driver-card .card-body{
  display:flex; flex-direction:column; gap:6px;
  padding:8px; flex:1 1 auto;
  padding-bottom:0px;
}
.teams-driver .td-driver-card .awards{
  margin-top:auto; display:flex; flex-wrap:wrap; gap:6px;
}

/* ===== Overrides (logo padding-left 10px) ===== */
/* =====================================================================
   Teams & Fahrer: Logo-Container mit 10px Padding links
   ===================================================================== */
.teams-driver .td-team__logo {
  padding-left: 10px !important;
  box-sizing: border-box;
}

/* ===== Responsive fixes (v5) ===== */
/* =====================================================================
   Teams & Fahrer (Responsive hardening for ultra-narrow screens)
   - Prevent horizontal scroll caused by team header row
   - Allow wrapping & breaking long team names/badges
   - Ensure grid/cars/images don't impose min-width
   ===================================================================== */

/* 1) Team-Header: allow wrap, prevent overflow from long names/badges */
.teams-driver .td-team__header {
  flex-wrap: wrap;
}
.teams-driver .td-team__header > div {
  min-width: 0;                      /* flex child can shrink */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.teams-driver .td-team__header h2,
.teams-driver .td-team__header .meta {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

/* 2) Driver cards: ensure items can shrink & never overflow */
.teams-driver .td-driver-grid,
.teams-driver .td-driver-card {
  min-width: 0;
  padding-bottom: 10px;
}
.teams-driver .td-driver-card .card-media,
.teams-driver .td-driver-card .card-img {
  max-width: 100%;
}

/* 3) Ultra-narrow safety (stack header vertically, slightly smaller logo) */
@media (max-width: 380px) {
  .teams-driver .td-team__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .teams-driver .td-team__logo {
    width: 96px;
    height: 96px;
  }
}

/* ===== v6 (single-line header, auto-shrinking logo) ===== */
/* =====================================================================
   Teams & Fahrer
   Wunsch: KEIN Zeilenumbruch (Logo + Teamname + Badge in EINER Zeile).
   Lösung: Logo schrumpft automatisch (clamp), Teamname mit Ellipsis.
   ===================================================================== */

/* Header bleibt EINZEILIG (kein wrap) */
.teams-driver .td-team__header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;                  /* NIE umbrochen */
}

/* Logo: automatisch schrumpfen statt umbrechen */
.teams-driver .td-team__logo {
  /* vorher 122px fest; nun dynamisch 48–122px */
  width: clamp(48px, 12vw, 122px);
  height: clamp(48px, 12vw, 122px);
  flex: 0 1 122px;                    /* darf schrumpfen bis ~48px */
  padding-left: 10px !important;      /* dein Wunschpadding */
  box-sizing: border-box;
  border: none !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.teams-driver .td-team__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-shadow: none !important;
  background: transparent !important;
  outline: none;
}

/* Text+Badge Container: EINZEILIG, mit Ellipsis für Teamnamen */
.teams-driver .td-team__header > div:not(.td-team__logo) {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;                     /* nimmt restliche Breite */
  min-width: 0;                       /* darf schrumpfen */
  white-space: nowrap;                /* keine Zeilenumbrüche */
}
.teams-driver .td-team__header h2 {
  margin: 0;
  flex: 1 1 auto;                     /* füllt, darf schrumpfen */
  min-width: 0;
  overflow: hidden;                   /* Ellipsis bei Platzmangel */
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teams-driver .td-team__header .meta {
  flex: 0 0 auto;                     /* Badge bleibt sichtbar */
  white-space: nowrap;
}

/* Rücknahme der v5-Mobile-Änderung: bei sehr schmalen Screens NICHT stapeln */
@media (max-width: 380px) {
  .teams-driver .td-team__header {
    flex-direction: row;              /* explizit einzeilig */
  }
  /* Logo schrumpft ohnehin über clamp() */
}

/* ===== v7 (nowrap name, meta wraps on small) ===== */
/* =====================================================================
   Teams & Fahrer
   Wunsch: Nur der Teamname darf NICHT umgebrochen werden.
           Bei sehr schmalen Displays darf die Meta/Badge-Zeile unter den Namen rutschen.
   ===================================================================== */

/* Header: erlaub Umbruch innerhalb des Textcontainers, nicht global */
.teams-driver .td-team__header{
  flex-wrap: nowrap;             /* Logo + Textcontainer bleiben nebeneinander */
}
/* Textcontainer (enthält h2 + .meta): standardmäßig eine Zeile */
.teams-driver .td-team__header > div:not(.td-team__logo){
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;             /* standard: Name + Meta in einer Zeile */
}
/* Teamname: niemals umbrechen, ggf. Ellipsis */
.teams-driver .td-team__header h2{
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Meta/Badge bleibt sichtbar am Ende, darf aber bei sehr schmalen Screens runter rutschen */
.teams-driver .td-team__header .meta{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Bei schmalen Displays: NUR innerhalb des Textcontainers umbrechen → Meta/Bage auf neue Zeile */
@media (max-width: 460px){
  .teams-driver .td-team__header > div:not(.td-team__logo){
    flex-wrap: wrap;             /* erlaubt Umbruch innerhalb des Textcontainers */
  }
  .teams-driver .td-team__header .meta{
    flex-basis: 100%;            /* auf nächste Zeile */
    margin-left: 0;
    margin-top: 4px;
  }
}

/* Logo schrumpft weiterhin automatisch, damit kein globaler Wrap nötig ist */
.teams-driver .td-team__logo{
  width: clamp(48px, 12vw, 122px);
  height: clamp(48px, 12vw, 122px);
  flex: 0 1 122px;
}

/* Nur in Fahrerkarten: zweite P-Zeile im Card-Body an erste heranziehen */
.teams-driver .td-driver-card .card-body p + p {
  margin-top: -10px !important;   /* -3 / -2 je nach Geschmack */
}
/* =========================================================
   Reglement card — show real image (no grey overlay) + dark text
   ========================================================= */
.card.card--bg-reglement::before {
  background-image: url("/images/content/bg_reglement.png") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Remove the generic dark overlay for this one card */
.card.card--bg-reglement::after { background: none !important; }

/* Belt & suspenders: direct element background too */
.card.card--bg-reglement {
  background-image: url("/images/content/bg_reglement.png"), url("/rally/images/content/bg_reglement.png") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  color: #111 !important;
}
.card.card--bg-reglement .muted { color: #6b6b6b !important; }
.card.card--bg-reglement a { color: #111 !important; text-decoration-color: rgba(0,0,0,.45) !important; }

/* Keep spacing consistent to grid */
.page .card--bg-reglement { margin-top: var(--grid-gap); }
.card.card--bg-reglement p { margin: 0; }

/* === Upload Overlay (modal) === */
.upload-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,.65);
  display: none;
  align-items: center;
  justify-content: center;
}
.upload-overlay.is-open { display: flex; }
.upload-overlay.is-done .btn-cancel { display: none; }
.upload-overlay.is-done .btn-done   { display: inline-block; }

.upload-modal {
  width: min(640px, 92vw);
  background: #fff;
  color: #111;
  border: var(--border);
  border-radius: var(--radius-box);
  box-shadow: var(--shadow-lg);
  padding: 18px 18px 14px;
}
.upload-title { font-weight: 800; font-size: 18px; margin: 0 0 6px; }
.upload-stats { color: var(--muted); margin: 0 0 12px; }

.progress { height: 10px; background: #eee; border-radius: 999px; overflow: hidden; }
.progress > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--fx), var(--fx2));
  transition: width .12s linear;
}

.upload-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.btn-cancel {
  background: #bbb; color: #111;
  padding: 8px 12px; border-radius: var(--radius-box);
}
.btn-done {
  display: none;
  background: var(--fx); color: #fff;
  padding: 8px 12px; border-radius: var(--radius-box);
}
/* === /Upload Overlay === */


.upload-info{margin-top:10px;font-size:14px;color:var(--muted);}
.upload-info ul{margin:8px 0 0 16px;}


      /* minimal, unintrusive styles (use site classes if available) */
	  /* Fahrerlager Medien – Event-Logo-Auswahl */
.rcr-logo-card { margin-top: 24px; }
.rcr-logo-card .rcr-logo-intro {
  margin: 6px 0 0 0;
  color: #666;
}
      .rcr-logo-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 12px; }
      .rcr-logo-tile { position: relative; border: 1px solid #e2e2e2; border-radius: 12px; overflow: hidden; padding-top: 0; cursor: pointer; background:#fff; }
      .rcr-logo-tile input[type="radio"] { position: absolute; z-index: 2; top: 8px; left: 8px; }
      .rcr-logo-tile img { display:block; width:100%; height:120px; object-fit:cover; }
      .rcr-logo-tile .rcr-fn { display:block; font-size:12px; padding:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-top:1px solid #eee; background:#fafafa; }
      .rcr-logo-tile.is-selected { outline: 2px solid #0b5; }
      .rcr-badge { position:absolute; right:8px; top:8px; z-index:2; background:#111; color:#fff; font-size:12px; line-height:1; padding:4px 8px; border-radius:999px; }
      .rcr-badge.is-hidden { display:none; }
      .rcr-tile-none { display:flex; align-items:center; justify-content:center; min-height:160px; }
      .rcr-tile-none .rcr-none { text-align:center; padding:16px; color:#333; }
      /* simple card skeleton if not present */
      .btn.btn--primary { background:#111; color:#fff; border:0; border-radius:8px; padding:8px 12px; cursor:pointer; }
      .btn.btn--primary:hover { opacity:.9; }
	  
	  /* Fahrerlager – Zusatz-Styles (Flash-Meldungen, Filter, Upload, Feinabstimmung) */
.fahrerlager .fahrerlager-driver-title { margin-bottom: 6px; }
.fahrerlager .fahrerlager-driver-media { margin-top: 10px; }

.fahrerlager .mini-stats { margin-top: 10px; }
.fahrerlager .mini-stats-table { font-size: 0.95rem; }

/* Flash-/Hinweis-Karten */
.fahrerlager .card--success {
  background: #f0fff2;
  border: 1px solid #c9f1cf;
  margin: 8px 0;
}
.fahrerlager .card--error {
  background: #fff3f0;
  border: 1px solid #ffd5c7;
  margin: 8px 0;
}
.fahrerlager .card--error-alt {
  background: #fff3f0;
  border: 1px solid #ffd7cf;
  margin: 8px 0;
}
.fahrerlager .card--info {
  background: #f6f8ff;
  border: 1px solid #e0e5ff;
  margin: 8px 0;
}
.fahrerlager .card-inner {
  margin: 8px 12px;
}

/* Profil-Aktionszeile */
.fahrerlager .profile-actions { margin-top: 12px; }

/* Medien-Filter (Event-/Season-Auswahl für Medien) */
.fahrerlager .media-filter-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.fahrerlager .media-filter-field {
  min-width: 240px;
  flex: 1 1 320px;
}

/* Medien-Upload Formular & Inline-Reihe */
.fahrerlager .media-upload-form { margin-top: 12px; }
.fahrerlager .upload-inline-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Upload-Zusammenfassung (unterhalb des Fortschrittsbalkens) */
.fahrerlager .upload-summary { margin-top: 12px; }
.upload-summary-block { margin-top: 8px; }
.upload-summary-separator {
  border: none;
  border-top: 1px solid #eee;
  margin: 8px 0;
}


/* === Lapupload: Renndatenimport Tabs & JSON-Codefeld === */

.tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0 16px;
  flex-wrap: wrap;
}

/* Tabs optisch wie Fahrerlager-Subnav-Kacheln */
.tab-btn {
  padding: 6px 12px;
  border-radius: var(--radius-box);
  background: #98a2ab;   /* gleiche Grundfarbe wie .fahrerlager .subnav-tile */
  color: #fff;
  border: 1px solid #98a2ab;
  cursor: pointer;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .03em;
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}

.tab-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Aktiver Tab: gleicher Grundton, aber mit orangem Rand (kein Unterstrich) */
.tab-btn.active {
  border-color: var(--fx);           /* Orange-Ring */
  box-shadow: 0 0 0 2px var(--fx);   /* sichtbarer orangener Rahmen */
}

/* Panel-Container */
.tab-panels {
  border: var(--border);
  border-radius: var(--radius-box);
  padding: 8px;
  background: #fff;
  margin-bottom: 8px;
}

.tab-panel {
  display: none;
}

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

/* JSON-Codefeld */
.codearea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9rem;
  border-radius: 6px;
  padding: 8px;
  border: 1px solid #444;
  background: #0b0b0b;
  color: #e6e6e6;
}

.codearea:focus {
  outline: 2px solid var(--fx);   /* dein Orange aus :root */
  outline-offset: 1px;
}

.upload-overlay .progress {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
}

/* Normalzustand: helles Orange, kein Puls */
#uploadBar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: #ffd28a;  /* helles Orange */
  transition:
    width 0.2s ease-out,
    background-color 0.25s ease-out,
    box-shadow 0.25s ease-out;
}

/* Processing: Farb-Puls mit deutlicherem Unterschied */
#uploadBar.is-processing {
  animation: uploadBarPulse 2s ease-in-out infinite;
}


/* 2s Zyklus:
   0–0.5s   kräftig (#ff3b00)
   0.5–1s   Übergang zu hell
   1–1.5s   hell (#ffd28a)
   1.5–2s   Übergang zurück zu kräftig
*/
@keyframes uploadBarPulse {
  /* 0–0.5s: kräftig, bleibt stabil */
  0%,
  25% {
    background: #ff3b00;
    box-shadow: 0 0 14px rgba(255, 59, 0, 0.9);
    opacity: 1;
    transform: scaleX(1.01);
  }

  /* 0.5–1s: Übergang von kräftig zu hell (Browser eased automatisch) */
  50% {
    background: #ffd28a;
    box-shadow: 0 0 6px rgba(255, 210, 138, 0.7);
    opacity: 0.9;
    transform: scaleX(1.0);
  }

  /* 1–1.5s: hell, bleibt stabil */
  75% {
    background: #ffd28a;
    box-shadow: 0 0 6px rgba(255, 210, 138, 0.7);
    opacity: 0.9;
    transform: scaleX(1.0);
  }

  /* 1.5–2s: Übergang zurück zu kräftig */
  100% {
    background: #ff3b00;
    box-shadow: 0 0 14px rgba(255, 59, 0, 0.9);
    opacity: 1;
    transform: scaleX(1.01);
  }
}