/* Formel1de.com – öffentliche Startseite. Führt die Kartensprache aus dem Admin-Bereich
   (roter Akzentrand, dunkle Verlaufskarten) fort, mit angehobenem Textkontrast und
   verfeinerter Typografie/Abständen gegenüber der alten Referenzseite. */

:root {
    --f1-bg: #0a0a0f;
    --f1-card-bg-1: #242432;
    --f1-card-bg-2: #1b1b26;
    --f1-red: #e10600;
    --f1-red-bright: #ff3b30;
    --f1-white: #ffffff;
    --f1-text: #d7d7de;      /* Fließtext – deutlich heller als das alte #a0a0a2 */
    --f1-text-dim: #9a9aa5;  /* Sekundärtext – heller als das alte #555/#777 */
    --f1-border: #2a2a3a;
    --f1-green: #52b788;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--f1-bg);
    color: var(--f1-text);
    font-family: 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ── Top-Navigation ── */
.site-nav {
    position: sticky; top: 0; z-index: 100;
    background: #101018;
    border-bottom: 3px solid var(--f1-red);
    box-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.site-nav__inner {
    max-width: 1280px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between;
    height: 64px;
}
.site-nav__logo {
    display: flex; align-items: center; gap: 10px;
    font-size: 18px; font-weight: 900; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px;
}
.site-nav__logo span {
    background: var(--f1-red); color: #fff; padding: 4px 9px; border-radius: 5px;
    font-size: 15px; font-weight: 900;
}
.site-nav__tagline {
    font-size: 10.5px; font-weight: 600; text-transform: none; letter-spacing: 0;
    color: var(--f1-text-dim); border-left: 1px solid var(--f1-border); padding-left: 10px; margin-left: 2px;
}
@media (max-width: 640px) { .site-nav__tagline { display: none; } }
.site-nav__links { display: flex; align-items: center; gap: 6px; }
.site-nav__link {
    display: flex; align-items: center; padding: 10px 16px; text-decoration: none; color: #b5b5c0;
    font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;
    border-radius: 6px; transition: color 0.15s, background 0.15s; cursor: pointer; border: none; background: none;
}
.site-nav__link:hover, .site-nav__link.is-active { color: #fff; background: rgba(225,6,0,0.12); }
.site-nav__link.is-active { color: var(--f1-red-bright); }
.site-nav__caret { font-size: 10px; display: inline-block; margin-left: 4px; transition: transform 0.15s; }
.site-nav__dropdown { position: relative; }
.site-nav__dropdown.is-open .site-nav__caret { transform: rotate(180deg); }
.site-nav__dropdown-menu {
    display: none; position: absolute; top: 100%; left: 0; min-width: 180px;
    background: #17171f; border: 1px solid var(--f1-border); border-radius: 8px;
    padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,0.5); margin-top: 6px;
}
.site-nav__dropdown:hover .site-nav__dropdown-menu, .site-nav__dropdown.is-open .site-nav__dropdown-menu { display: block; }
/* Unsichtbare Brücke über den margin-top-Abstand zwischen Trigger und Menü - ohne das würde
   die Maus beim geraden Runterfahren kurz keine der beiden Boxen mehr treffen und :hover
   ginge verloren, bevor das Menü erreicht ist (das eigentliche "Menü klappt zu"-Problem). */
.site-nav__dropdown-menu::before {
    content: ""; position: absolute; top: -6px; left: 0; right: 0; height: 6px;
}
.site-nav__dropdown-menu a {
    display: block; padding: 9px 12px; font-size: 12.5px; font-weight: 600; color: #c5c5d0;
    text-decoration: none; border-radius: 5px; text-transform: none;
}
.site-nav__dropdown-menu a:hover { background: rgba(225,6,0,0.12); color: #fff; }
.site-nav__burger { display: none; background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; }

@media (max-width: 860px) {
    .site-nav__burger { display: block; }
    .site-nav__links {
        display: none; position: absolute; top: 64px; left: 0; right: 0;
        background: #101018; flex-direction: column; align-items: stretch;
        padding: 10px; border-bottom: 1px solid var(--f1-border);
    }
    .site-nav__links.is-open { display: flex; }
    .site-nav__dropdown-menu { position: static; box-shadow: none; margin-left: 12px; }
}

/* ── Layout ── */
.site-main { max-width: 1280px; margin: 0 auto; padding: 28px 24px 60px; }

.f1-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 22px;
}

/* ── Karten ── */
.f1-card {
    background: linear-gradient(160deg, var(--f1-card-bg-1) 0%, var(--f1-card-bg-2) 100%);
    border-radius: 12px;
    border-top: 3px solid var(--f1-red);
    border-left: 1px solid rgba(255,255,255,0.06);
    border-right: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 6px 22px rgba(0,0,0,0.35);
    overflow: hidden;
}
.f1-card__header {
    padding: 16px 22px; font-weight: 800; text-transform: uppercase; font-size: 13px;
    letter-spacing: 0.5px; color: #fff; border-bottom: 1px solid var(--f1-border);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.f1-card__header small { font-weight: 600; font-size: 10.5px; color: var(--f1-text-dim); text-transform: none; letter-spacing: 0; }
.f1-card__header--stack { flex-direction: column; align-items: flex-start; gap: 4px; }
.f1-card__header-flag { width: 16px; height: auto; border-radius: 2px; vertical-align: -2px; margin-right: 6px; }
.f1-card__body { padding: 22px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.f1-card__body p { line-height: 1.6; color: var(--f1-text); }
.f1-card__more {
    display: inline-block; margin-top: 14px; font-size: 12.5px; font-weight: 700;
    color: #fff; text-decoration: none; border-bottom: 2px solid var(--f1-red); padding-bottom: 2px;
}
.f1-card__more:hover { color: var(--f1-red-bright); }
.f1-empty { color: var(--f1-text-dim); font-style: italic; font-size: 13px; text-align: center; padding: 24px 0; }

.f1-richtext { color: var(--f1-text); font-size: 15px; line-height: 1.7; }
.f1-richtext p { margin: 0 0 16px; }
.f1-richtext p:last-child { margin-bottom: 0; }
.f1-richtext a { color: var(--f1-red-bright); text-decoration: underline; }
.f1-richtext strong { color: #fff; }
.f1-richtext img { max-width: 100%; border-radius: 8px; margin: 10px 0; }
.f1-richtext ul, .f1-richtext ol { margin: 0 0 16px; padding-left: 22px; }
.f1-richtext h1, .f1-richtext h2, .f1-richtext h3, .f1-richtext h4, .f1-richtext h5, .f1-richtext h6 {
    color: #fff; font-weight: 800; line-height: 1.3; margin: 26px 0 14px;
}
.f1-richtext h1:first-child, .f1-richtext h2:first-child, .f1-richtext h3:first-child,
.f1-richtext h4:first-child, .f1-richtext h5:first-child, .f1-richtext h6:first-child { margin-top: 0; }
.f1-richtext h1 { font-size: 1.7rem; }
.f1-richtext h2 { font-size: 1.4rem; border-bottom: 2px solid rgba(255,255,255,0.18); padding-bottom: 8px; }
.f1-richtext h3 { font-size: 1.2rem; }
.f1-richtext h4, .f1-richtext h5, .f1-richtext h6 { font-size: 1.05rem; }

/* ── Hero ── */
.hero {
    grid-column: 1 / -1;
    position: relative;
    min-height: 440px;
    display: flex; align-items: flex-end;
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 10px 34px rgba(0,0,0,0.45);
}
.hero__bg {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    filter: brightness(0.55) saturate(1.05);
}
.hero__copyright { position: absolute; bottom: 12px; left: 20px; font-size: 11px; color: rgba(255,255,255,0.45); z-index: 3; }
.hero__content {
    position: relative; z-index: 2; width: 100%; padding: 46px 44px 40px;
    background: linear-gradient(to top, rgba(6,6,10,0.98) 5%, rgba(6,6,10,0.55) 65%, rgba(6,6,10,0) 100%);
}
.hero__badge {
    display: inline-block; background: var(--f1-red); color: #fff; padding: 5px 12px;
    font-weight: 800; text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.5px;
    border-radius: 4px; margin-bottom: 16px;
}
.hero__gp { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.hero__gp img.hero__gp-flag { width: 40px; height: auto; border-radius: 3px; box-shadow: 0 2px 8px rgba(0,0,0,0.45); flex-shrink: 0; }
.hero__gp span {
    font-size: 1.4rem; font-weight: 900; text-transform: uppercase; color: #fff;
    letter-spacing: 0.4px; text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.hero__title {
    margin: 0 0 14px; color: #fff; font-size: 2.6rem; font-weight: 900; line-height: 1.12;
    text-shadow: 0 2px 14px rgba(0,0,0,0.7); max-width: 780px;
}
.hero__meta { display: flex; align-items: center; gap: 10px; font-weight: 700; text-transform: uppercase; font-size: 13px; margin-bottom: 16px; }
.hero__meta .divider { color: var(--f1-red-bright); }
.hero__teaser { max-width: 620px; color: #e4e4ea; font-size: 15px; line-height: 1.6; margin-bottom: 20px; }
.hero__btn {
    display: inline-block; background: var(--f1-red); color: #fff; text-decoration: none;
    padding: 12px 26px; font-weight: 800; text-transform: uppercase; font-size: 12.5px;
    letter-spacing: 0.5px; border-radius: 6px; transition: background 0.15s, transform 0.15s;
}
.hero__btn:hover { background: var(--f1-red-bright); transform: translateY(-1px); }
.hero__btn--ghost {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); margin-left: 10px;
}
.hero__btn--ghost:hover { background: rgba(255,255,255,0.16); }

@media (max-width: 700px) {
    .hero { min-height: auto; flex-direction: column; align-items: stretch; }
    .hero__bg { position: relative; height: 220px; width: 100%; filter: brightness(0.75); }
    .hero__copyright { bottom: auto; top: 194px; }
    .hero__content { position: static; background: var(--f1-card-bg-2); padding: 26px 22px; }
    .hero__title { font-size: 1.7rem; text-shadow: none; }
    .hero__btn { display: block; width: fit-content; }
    .hero__btn + .hero__btn { margin-left: 0; margin-top: 10px; }
}

/* ── Flash News ── */
.fn-list { list-style: none; margin: 0; padding: 0; }
.fn-item {
    display: flex; gap: 12px; align-items: flex-start; padding: 12px 0;
    border-bottom: 1px solid var(--f1-border); text-decoration: none; color: inherit;
}
.fn-item:last-child { border-bottom: none; padding-bottom: 0; }
.fn-item:hover .fn-title { color: var(--f1-red-bright); }
.fn-thumb, .fn-thumb-empty { flex-shrink: 0; width: 84px; height: 56px; border-radius: 6px; overflow: hidden; background: #14141c; }
.fn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fn-thumb-empty { display: flex; align-items: center; justify-content: center; font-size: 20px; opacity: 0.5; }
.fn-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 13.5px; font-weight: 700; color: #fff; line-height: 1.35; margin-bottom: 4px;
}
.fn-teaser {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12px; color: var(--f1-text-dim); line-height: 1.45;
}
.fn-source { font-size: 10.5px; color: var(--f1-text-dim); text-align: right; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--f1-border); }
.fn-source a { color: var(--f1-text-dim); text-decoration: none; }
.fn-source a:hover { color: var(--f1-red-bright); }

/* ── Nächstes Event ── */
.next-event__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.next-event__country { background: var(--f1-red); color: #fff; padding: 3px 9px; font-size: 11px; font-weight: 800; border-radius: 4px; text-transform: uppercase; }
.next-event__title-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
.next-event__title-row img.next-event__flag { width: 26px; height: auto; border-radius: 3px; flex-shrink: 0; }
.next-event__title { margin: 0; font-size: 1.5rem; font-weight: 900; text-transform: uppercase; color: #fff; }
.next-event__track { color: var(--f1-text-dim); font-size: 13px; margin: 0 0 18px; }
.next-event__countdown { background: #2a2a3a; padding: 10px 16px; border-radius: 10px; text-align: center; min-width: 66px; }
.next-event__countdown strong { display: block; font-size: 1.35rem; font-weight: 900; color: var(--f1-red-bright); line-height: 1; }
.next-event__countdown span { font-size: 10px; color: var(--f1-text-dim); text-transform: uppercase; letter-spacing: 0.5px; }

.session-schedule { margin-top: 18px; border-top: 1px solid var(--f1-border); padding-top: 16px; }
.session-schedule h3 { font-size: 11.5px; color: var(--f1-text-dim); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 10px; }
.session-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.session-row__left { display: flex; align-items: center; gap: 12px; }
.session-row__bar { width: 4px; height: 18px; border-radius: 2px; background: transparent; }
.session-row__bar.is-highlight { background: var(--f1-red); }
.session-row__name { color: #fff; font-size: 13.5px; font-weight: 600; }
.session-row__time { text-align: right; }
.session-row__time strong { display: block; color: #fff; font-size: 13.5px; font-weight: 700; }
.session-row__time small { display: block; color: var(--f1-text-dim); font-size: 11px; }
.session-row.is-past { opacity: 0.4; }

.f1-live {
    background: var(--f1-red); color: #fff; padding: 2px 8px; border-radius: 4px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px; margin-left: 8px;
    animation: pulse-red 2s infinite;
}
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(225,6,0,0.6); }
    70% { box-shadow: 0 0 0 8px rgba(225,6,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(225,6,0,0); }
}

.track-stats { display: flex; justify-content: space-between; border-top: 1px solid var(--f1-border); padding-top: 16px; margin-top: 16px; }
.track-stats__item { text-align: center; }
.track-stats__item span { display: block; font-size: 10.5px; color: var(--f1-text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.track-stats__item strong { color: #fff; font-weight: 800; font-size: 14px; }

/* ── Tabellen (WM-Stände, Ergebnisse) ── */
.f1-table { width: 100%; border-collapse: collapse; }
.f1-table th {
    text-align: left; padding: 8px 6px; font-size: 10.5px; color: var(--f1-text-dim);
    text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--f1-border);
}
.f1-table td { padding: 10px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: middle; }
.f1-table tr:last-child td { border-bottom: none; }
.f1-pos {
    font-family: 'Titillium Web', sans-serif; font-weight: 900; font-size: 1.15rem; font-style: italic;
    color: #fff; text-align: center; width: 46px; border-left: 5px solid var(--row-color, var(--f1-red));
    padding-left: 12px !important;
}
.f1-points { display: inline-block; min-width: 46px; text-align: center; font-weight: 800; color: #fff; background: #2a2a3a; padding: 6px 10px; border-radius: 6px; font-size: 13px; }
.f1-entity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.f1-entity img.f1-photo { width: 30px; height: auto; border-radius: 4px; flex-shrink: 0; }
.f1-entity img.f1-logo { width: 54px; max-height: 28px; object-fit: contain; flex-shrink: 0; }
.f1-entity-name { font-weight: 700; color: #fff; font-size: 13.5px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f1-entity-name a, a.f1-entity-name { color: inherit; text-decoration: none; }
.f1-entity-name a:hover, a.f1-entity-name:hover { color: var(--f1-red-bright); }
.f1-entity-name img.f1-flag { width: 18px; height: auto; border-radius: 2px; flex-shrink: 0; }
.f1-entity-sub { font-size: 11px; color: var(--f1-text-dim); text-transform: uppercase; letter-spacing: 0.3px; }
.f1-entity-sub a, a.f1-entity-sub { color: inherit; text-decoration: none; display: inline-block; }
.f1-entity-sub a:hover, a.f1-entity-sub:hover { color: var(--f1-red-bright); }
.f1-gap { color: var(--f1-text-dim); font-size: 12.5px; }
.f1-drno { flex-shrink: 0; color: var(--f1-text-dim); font-weight: 800; font-size: 11.5px; font-style: italic; }
.f1-badge-box { flex-shrink: 0; background: rgba(255,159,10,0.18); color: #ffb648; font-size: 9.5px; font-weight: 800; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; letter-spacing: 0.3px; }
.f1-points-badge { flex-shrink: 0; background: rgba(255,159,10,0.18); color: #ffb648; font-size: 9.5px; font-weight: 800; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; letter-spacing: 0.3px; }
.f1-quali-penalty { color: #ffb648; font-size: 10.5px; margin-top: 2px; font-style: italic; }
.f1-quali-segpos { color: var(--f1-text-dim); font-size: 10.5px; }
.f1-footnote-ref { color: var(--f1-red-bright); font-weight: 800; font-size: 10px; margin-left: 2px; cursor: help; }
.f1-footnotes { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 12px; color: var(--f1-text-dim); line-height: 1.8; }
.f1-footnotes strong { color: #fff; }

/* ── session.php: Schnellste Runde ── */
.fastest-lap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.fastest-lap .f1-entity img.f1-photo { width: 44px; }
.fastest-lap__time { font-family: 'Titillium Web', sans-serif; font-weight: 900; font-style: italic; font-size: 1.5rem; color: #b478ff; }
.fastest-lap__lap { display: block; font-family: inherit; font-weight: 600; font-style: normal; font-size: 11px; color: var(--f1-text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.f1-fail { color: #ff6b6b; font-size: 12px; font-weight: 700; }
.f1-delta { display: inline-block; min-width: 32px; text-align: center; padding: 3px 7px; border-radius: 5px; font-weight: 800; font-size: 11.5px; color: var(--f1-text-dim); }
.f1-delta.stat-cell--gain { background: rgba(82,183,136,0.22); color: #7be0af; }
.f1-delta.stat-cell--loss { background: rgba(255,59,48,0.18); color: #ff8a80; }
.f1-delta.stat-cell--dnf { background: rgba(255,255,255,0.04); color: #8a8a95; box-shadow: inset 0 0 0 1px rgba(255,59,48,0.4); }
.f1-fastest-lap-cell { color: #b478ff; font-weight: 700; font-size: 12.5px; }
.f1-table-divider td {
    padding-top: 18px; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; color: var(--f1-text-dim); border-bottom: 1px solid var(--f1-border);
}
.f1-table-subhead th { padding-top: 10px; }

/* ── Bildergalerie-Vorschau (session.php) ── */
.session-gallery-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 16px; }
.session-gallery-strip img {
    width: 100%; height: 78px; object-fit: cover; border-radius: 6px;
    border: 1px solid var(--f1-border); background: #15151e;
}

/* ── Bildergalerie (galerie.php) ── */
.gallery-search { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.gallery-search input[type="text"] {
    flex: 1; min-width: 240px; background: #13131f; border: 1px solid var(--f1-border);
    border-radius: 8px; padding: 10px 14px; color: #fff; font-size: 13.5px; outline: none;
}
.gallery-search input[type="text"]:focus { border-color: var(--f1-red); }
.gallery-search button[type="submit"] {
    background: var(--f1-red); color: #fff; border: none; border-radius: 8px; padding: 10px 20px;
    font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer;
}
.gallery-search button[type="submit"]:hover { background: var(--f1-red-bright); }
.f1-btn-secondary {
    background: transparent; border: 1px solid var(--f1-border); color: var(--f1-text-dim);
    padding: 10px 16px; border-radius: 8px; font-size: 12.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; text-decoration: none; display: inline-flex; align-items: center;
    transition: border-color 0.15s, color 0.15s;
}
.f1-btn-secondary:hover { border-color: var(--f1-red); color: #fff; }

/* "Backstein"-Grid mit genau zwei festen Kachelformaten: eine Hochformat-Kachel ist exakt so
   hoch wie zwei Querformat-Kacheln übereinander plus der Zwischenabstand (grid-row: span 4 bei
   auto-rows von 60px + 12px Gap = 4*60+3*12 = 276px = 2*(2*60+12) + 12). grid-auto-flow: dense
   lässt das Grid nachfolgende (kleinere) Kacheln automatisch in entstehende Lücken nachrücken,
   statt Leerraum stehen zu lassen - eine reine aspect-ratio-Lösung (frühere Version) konnte das
   nicht, weil dort die Zeilenhöhe vom höchsten Element der Reihe bestimmt wurde. Orientierung
   (hoch/quer) wird clientseitig anhand der geladenen Bildmaße erkannt (siehe Script unten) und
   per .is-portrait-Klasse auf den doppelten Zeilen-Span gemappt. */
.gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: 60px; grid-auto-flow: dense; gap: 12px;
}
.gallery-item {
    position: relative; display: block; padding: 0; border: 1px solid var(--f1-border); border-radius: 8px;
    overflow: hidden; background: #15151e; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
    grid-row: span 2;
}
.gallery-item.is-portrait { grid-row: span 4; }
.gallery-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
/* Zeigt bei der GP-übergreifenden Suche (bilder.php) an, zu welchem Grand Prix ein Treffer
   gehört - in galerie.php (Kontext ist immer schon ein einziger GP+Tag) nicht nötig. */
.gallery-item__tag {
    position: absolute; left: 0; bottom: 0; right: 0; padding: 4px 8px;
    background: rgba(6,6,10,0.72); color: #ddd; font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gallery-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.gallery-pager span { color: var(--f1-text-dim); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.gallery-lightbox {
    position: fixed; inset: 0; background: rgba(6,6,10,0.92); z-index: 999;
    flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px;
}
/* .gallery-lightbox and [hidden] tie on specificity, but author CSS beats the UA stylesheet
   regardless of order, so display had to be scoped to :not([hidden]) instead of the bare class -
   otherwise the "hidden" attribute (and the JS that toggles it) has no visual effect at all. */
.gallery-lightbox:not([hidden]) { display: flex; }
.gallery-lightbox__frame { position: relative; max-width: 100%; max-height: 78vh; line-height: 0; }
.gallery-lightbox__frame img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 6px; display: block; }
.gallery-lightbox__credit {
    position: absolute; left: 0; bottom: 0; right: 0; padding: 6px 12px;
    background: rgba(6,6,10,0.72); color: #ddd; font-size: 11px; letter-spacing: 0.2px;
    border-radius: 0 0 6px 6px;
}
.gallery-lightbox p { color: var(--f1-text-dim); font-size: 13px; max-width: 70ch; text-align: center; margin: 16px 0 0; }
.gallery-lightbox__close {
    position: absolute; top: 18px; right: 24px; background: rgba(255,255,255,0.08); border: none;
    color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; cursor: pointer;
    line-height: 1;
}
.gallery-lightbox__close:hover { background: var(--f1-red); }
.gallery-lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
    background: rgba(255,255,255,0.08); border: none; color: #fff; width: 48px; height: 48px;
    border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer;
}
.gallery-lightbox__nav:hover { background: var(--f1-red); }
.gallery-lightbox__nav--prev { left: 16px; }
.gallery-lightbox__nav--next { right: 16px; }
/* Same author-vs-UA-stylesheet issue as .gallery-lightbox: display must be scoped to
   :not([hidden]), otherwise the buttons ignore their "hidden" attribute entirely. */
.gallery-lightbox__nav:not([hidden]) { display: flex; align-items: center; justify-content: center; }
@media (max-width: 640px) {
    .gallery-lightbox__nav { width: 40px; height: 40px; font-size: 22px; }
    .gallery-lightbox__nav--prev { left: 6px; }
    .gallery-lightbox__nav--next { right: 6px; }
}

/* ── Bilder-Übersicht (bilder.php) ── */
.bilder-year-list { display: flex; flex-wrap: wrap; gap: 10px; }
.bilder-year-chip {
    display: flex; align-items: baseline; gap: 8px; background: #13131f; border: 1px solid var(--f1-border);
    border-radius: 8px; padding: 12px 18px; color: #fff; font-weight: 800; font-size: 18px;
    text-decoration: none; transition: border-color 0.15s, transform 0.15s;
}
.bilder-year-chip:hover { border-color: var(--f1-red); transform: translateY(-2px); }
.bilder-year-chip span { color: var(--f1-text-dim); font-size: 11.5px; font-weight: 600; }

.bilder-gp-list { display: flex; flex-direction: column; gap: 2px; }
.bilder-gp-item {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 8px; text-decoration: none; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.05); transition: background 0.15s;
}
.bilder-gp-item:hover { background: rgba(255,255,255,0.04); }
.bilder-gp-item__name { font-weight: 700; font-size: 14px; }
.bilder-gp-item__count { color: var(--f1-text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }

/* ── videos.php: YouTube-Kanal (neueste Videos + Playlists) ── */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.video-tile {
    display: block; text-decoration: none; background: #13131f; border: 1px solid var(--f1-border);
    border-radius: 10px; overflow: hidden; transition: border-color 0.15s, transform 0.15s;
}
.video-tile:hover { border-color: var(--f1-red); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,0.4); }
.video-tile__thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0a0a10; overflow: hidden; }
.video-tile__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s; }
.video-tile:hover .video-tile__thumb img { transform: scale(1.05); }
.video-tile__play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #fff; background: rgba(6,6,10,0.35); opacity: 0; transition: opacity 0.2s;
}
.video-tile__play::before {
    content: ''; position: absolute; width: 46px; height: 46px; border-radius: 50%;
    background: rgba(225,6,0,0.85);
}
.video-tile__play { text-indent: 2px; }
.video-tile:hover .video-tile__play { opacity: 1; }
.video-tile__count {
    position: absolute; right: 6px; bottom: 6px; background: rgba(6,6,10,0.8); color: #fff;
    font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 4px;
}
.video-tile__body { padding: 12px 14px; }
.video-tile__title {
    color: #fff; font-weight: 700; font-size: 13.5px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.video-tile__meta { color: var(--f1-text-dim); font-size: 11.5px; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.3px; }
.video-tile__desc {
    color: var(--f1-text-dim); font-size: 12px; line-height: 1.5; margin-top: 8px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Grand-Prix-Wochenend-Übersicht (grand-prix.php) ── */
.gp-header { max-width: 1280px; margin: 0 auto 32px; padding: 0 24px; }
.gp-header__title { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.gp-header__title img.gp-header__flag { width: 44px; height: auto; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.35); flex-shrink: 0; }
.gp-header h1 { margin: 0 0 4px; font-size: 2rem; font-weight: 900; text-transform: uppercase; color: #fff; }
.gp-header p { margin: 0; color: var(--f1-text-dim); font-size: 14px; }

/* ── ergebnisse-gp.php: Session-Tabs ── */
.erg-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.erg-tab {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    background: transparent; border: 1px solid var(--f1-border); color: var(--f1-text-dim);
    padding: 9px 16px; border-radius: 8px; font-size: 12.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px; transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.erg-tab:hover { border-color: var(--f1-red); color: #fff; }
.erg-tab.is-active { background: var(--f1-red); border-color: var(--f1-red); color: #fff; }
.erg-tab.is-cancelled { opacity: 0.55; }
.erg-tab__flag { font-size: 9.5px; font-weight: 800; background: rgba(255,255,255,0.15); padding: 1px 5px; border-radius: 3px; }

/* ── ergebnisse-gp.php: Startaufstellung (grafische 2-Spalten-Ansicht) ──
   Zwei Spalten per CSS Grid (kein PHP-Array-Split noetig): der Grid-Zeilenumbruch
   (grid-auto-flow: row, Standard) fuellt Zeile 1 links/rechts, dann Zeile 2 usw. - dadurch
   landen ungerade Positionen automatisch links, gerade rechts, exakt in DOM-Reihenfolge. */
.startgrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; }
.startgrid__row {
    display: flex; align-items: center; gap: 14px; padding: 13px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.startgrid__pos {
    font-family: 'Titillium Web', sans-serif; font-weight: 900; font-size: 1.9rem; font-style: italic;
    color: #fff; width: 50px; flex-shrink: 0; text-align: center;
    border-left: 6px solid var(--row-color, var(--f1-red)); padding-left: 10px;
}
.startgrid__row img.f1-photo { width: 46px; height: auto; border-radius: 6px; flex-shrink: 0; }
.startgrid__info { min-width: 0; }
.startgrid__name { font-weight: 800; color: #fff; font-size: 15px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; text-decoration: none; }
.startgrid__name:hover { color: var(--f1-red-bright); }
.startgrid__name img.f1-flag { width: 19px; height: auto; border-radius: 2px; flex-shrink: 0; }
.startgrid__team { font-size: 11.5px; color: var(--f1-text-dim); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; text-decoration: none; display: inline-block; }
.startgrid__team:hover { color: var(--f1-red-bright); }
.startgrid__penalty { color: #ffb648; font-size: 11px; margin-top: 3px; font-style: italic; }
@media (max-width: 760px) { .startgrid { grid-template-columns: 1fr; } }

.gp-day { max-width: 1280px; margin: 0 auto 48px; padding: 0 24px; }
.gp-day__title {
    font-size: 1.1rem; font-weight: 900; text-transform: uppercase; color: #fff;
    border-left: 4px solid var(--f1-red); padding-left: 12px; margin: 0 0 18px;
}

.gp-day__gallery-wrap { margin-bottom: 22px; }
.gp-day__gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.gp-day__gallery img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; display: block; }

.gp-sessions { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.gp-session-card {
    background: linear-gradient(160deg, var(--f1-card-bg-1) 0%, var(--f1-card-bg-2) 100%);
    border-radius: 12px; border-top: 3px solid var(--f1-red); overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.gp-session-card__thumb { height: 130px; background-size: cover; background-position: center; }
.gp-session-card__body { padding: 18px; }
.gp-session-card__title { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--f1-text-dim); margin-bottom: 8px; }
.gp-session-card__headline { color: #fff; font-weight: 800; font-size: 15px; line-height: 1.35; margin-bottom: 8px; }
.gp-session-card__teaser { color: var(--f1-text); font-size: 12.5px; line-height: 1.5; margin: 0 0 12px; }

.gp-short-results { list-style: none; margin: 0 0 14px; padding: 0; border-top: 1px solid var(--f1-border); padding-top: 10px; }
.gp-short-results li { font-size: 12.5px; color: var(--f1-text); padding: 3px 0; }
.gp-short-results strong { color: #fff; margin-right: 4px; }
.gp-session-card__subresult-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--f1-text-dim); margin-top: 4px; }

.gp-press-links { margin-top: 26px; border-top: 1px solid var(--f1-border); padding-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ── presse.php: Fahrerstimmen mit Foto + Ergebnis je Session des Tages ── */
.presse-driver { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.presse-driver__photo { width: 56px; height: auto; border-radius: 6px; flex-shrink: 0; border: 2px solid var(--row-color, var(--f1-red)); }
.presse-driver__meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--f1-text-dim); text-transform: uppercase; letter-spacing: 0.3px; }
.presse-driver__meta img.f1-flag { width: 18px; height: auto; border-radius: 2px; flex-shrink: 0; }
.presse-results { list-style: none; margin: 0 0 16px; padding: 10px 14px; background: rgba(255,255,255,0.03); border-radius: 8px; font-size: 12.5px; color: var(--f1-text); line-height: 1.7; }
.presse-results strong { color: #fff; margin-right: 4px; }

/* ── Rennkalender (rennkalender.php) ── */
.rk-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.rk-header h1 { margin: 0; font-size: 1.7rem; font-weight: 900; text-transform: uppercase; color: #fff; }
.rk-year-form { display: flex; flex-wrap: wrap; gap: 10px; }
.rk-year-form select {
    background: #13131f; border: 1px solid var(--f1-border); color: #fff; font-weight: 700;
    font-size: 13.5px; padding: 9px 14px; border-radius: 8px; cursor: pointer; outline: none;
}
.rk-year-form select:focus { border-color: var(--f1-red); }

.rk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }

.rk-card {
    display: block; color: inherit;
    background: linear-gradient(160deg, var(--f1-card-bg-1) 0%, var(--f1-card-bg-2) 100%);
    border-radius: 12px;
    border-top: 3px solid var(--f1-red);
    border-left: 1px solid rgba(255,255,255,0.06);
    border-right: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 6px 22px rgba(0,0,0,0.35);
    padding: 18px 20px 20px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rk-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.5); }

.rk-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rk-card__actions .f1-btn-secondary { flex: 1; justify-content: center; text-align: center; }

.rk-card__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.rk-card__num {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 7px; background: #2a2a3a;
    color: #fff; font-weight: 900; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.rk-card__title { min-width: 0; }
.rk-card__name { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15.5px; color: #fff; }
.rk-card__name img.f1-flag { width: 20px; height: auto; border-radius: 2px; flex-shrink: 0; }
.rk-card__dates { color: var(--f1-text-dim); font-size: 12px; margin-top: 3px; }
.rk-card__fullname {
    text-transform: uppercase; font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px;
    color: var(--f1-text-dim); margin: 10px 0 16px; line-height: 1.4;
}

.rk-podium { display: flex; gap: 10px; }
.rk-podium__item { flex: 1; min-width: 0; text-align: center; display: block; color: inherit; text-decoration: none; }
.rk-podium__item:hover .rk-podium__code { color: var(--f1-red-bright); }
.rk-podium__photo {
    position: relative; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden;
    background: linear-gradient(160deg, #55555f, #2a2a3a);
}
.rk-podium__item--p1 .rk-podium__photo { background: linear-gradient(160deg, #ffb347, var(--f1-red)); }
.rk-podium__item--p2 .rk-podium__photo { background: linear-gradient(160deg, #d8d8de, #9a9aa5); }
.rk-podium__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rk-podium__pos {
    position: absolute; left: 6px; bottom: 6px; background: rgba(6,6,10,0.72); color: #fff;
    font-weight: 900; font-size: 11.5px; width: 20px; height: 20px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
}
.rk-podium__code { margin-top: 8px; font-weight: 800; font-size: 12px; letter-spacing: 0.4px; color: #fff; }

/* ── Fahrer-Übersicht (fahrer.php) ── */
.drv-section-title {
    margin: 32px 0 16px; font-size: 13px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.8px; color: var(--f1-text-dim); border-top: 1px solid var(--f1-border); padding-top: 20px;
}
.drv-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.drv-card2 {
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    background: linear-gradient(160deg, var(--f1-card-bg-1) 0%, var(--f1-card-bg-2) 100%);
    border-radius: 12px; border-top: 3px solid var(--f1-red); overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3); transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.drv-card2:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.45); }
.drv-card2__photo { position: relative; aspect-ratio: 3 / 4; background: #15151e; }
.drv-card2__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drv-card2__number {
    position: absolute; left: 8px; top: 8px; background: rgba(6,6,10,0.75); color: #fff;
    font-weight: 800; font-size: 12px; padding: 3px 8px; border-radius: 4px;
}
.drv-card2__name {
    font-size: 13px; font-weight: 800; color: #fff; padding: 10px 10px 4px;
    display: flex; align-items: center; gap: 6px;
}
.drv-card2__name img.f1-flag { width: 16px; height: auto; border-radius: 2px; flex-shrink: 0; }
.drv-card2__teams { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 10px 12px; }
.drv-chip {
    font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px;
    color: var(--f1-text-dim); background: rgba(255,255,255,0.06); border: 1px solid var(--f1-border);
}
.drv-chip--current { color: #fff; background: color-mix(in srgb, var(--chip-color, var(--f1-red)) 55%, #17171f); border-color: var(--chip-color, var(--f1-red)); }

/* ── Fahrer-Profil (fahrer-profil.php) ── */
.drvp-header { position: relative; text-align: center; margin-bottom: 28px; padding-top: 4px; }
.drvp-back { position: absolute; left: 0; top: 6px; text-decoration: none; color: var(--f1-text-dim); font-size: 13px; font-weight: 700; }
.drvp-back:hover { color: #fff; }
.drvp-header h1 { margin: 0 0 4px; font-size: 1.9rem; font-weight: 900; text-transform: uppercase; color: #fff; }
.drvp-header p { margin: 0; color: var(--f1-text-dim); font-size: 13.5px; }

.drvp-grid { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 960px) { .drvp-grid { grid-template-columns: 1fr; } }

.drvp-side { display: flex; flex-direction: column; gap: 14px; }
.drvp-photo { position: relative; border-radius: 12px; overflow: hidden; background: #15151e; aspect-ratio: 3 / 4; }
.drvp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drvp-photo__year { position: absolute; left: 8px; top: 8px; background: rgba(6,6,10,0.75); color: #fff; font-weight: 800; font-size: 12px; padding: 3px 8px; border-radius: 4px; }
/* Boliden-Fotos (team-profil.php) sind quer, nicht hoch wie Fahrerfotos - eigenes
   Seitenverhältnis, und object-fit:contain statt cover, damit das ganze Auto sichtbar bleibt
   statt in eine Hochformat-Box hineingezoomt/beschnitten zu werden. */
.drvp-photo--wide { aspect-ratio: 4 / 3; }
.drvp-photo--wide img { object-fit: contain; }
.drvp-flag { width: 36px; height: auto; border-radius: 3px; }

.drvp-years { display: flex; flex-wrap: wrap; gap: 6px; }
.drvp-years a { text-decoration: none; color: var(--f1-text-dim); font-size: 12px; font-weight: 700; padding: 5px 8px; border-radius: 5px; background: #15151e; border: 1px solid var(--f1-border); }
.drvp-years a:hover { color: #fff; border-color: var(--f1-red); }
.drvp-years a.is-active { color: #fff; background: var(--f1-red); border-color: var(--f1-red); }
.drvp-years--header { justify-content: center; margin-top: 14px; }

.drvp-main, .drvp-season { display: flex; flex-direction: column; gap: 18px; }

.drvp-kv { width: 100%; border-collapse: collapse; }
.drvp-kv td { padding: 7px 4px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.drvp-kv tr:last-child td { border-bottom: none; }
.drvp-kv td:first-child { color: var(--f1-text-dim); }
.drvp-kv td:last-child { color: #fff; font-weight: 700; text-align: right; }
/* ── statistik-teamduelle.php: Kopf-an-Kopf-Tabelle je Team ── */
.tmd-duel { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tmd-duel col.tmd-duel__name-col { width: 42%; }
.tmd-duel col.tmd-duel__score-col { width: 16%; }
.tmd-duel td { padding: 9px 4px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.tmd-duel tr:last-child td { border-bottom: none; }
.tmd-duel__name { font-size: 14.5px; color: #eee; }
.tmd-duel__name--b { text-align: right; }
.tmd-duel__name a { color: inherit; text-decoration: none; }
.tmd-duel__name a:hover { color: #fff; }
.tmd-duel__score { text-align: center; }
.tmd-duel__score span { display: inline-block; min-width: 56px; background: #2a2a3a; color: #fff; font-weight: 800; font-size: 15px; padding: 5px 10px; border-radius: 6px; }

.drvp-subhead { margin: 16px 0 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--f1-text-dim); border-top: 1px solid var(--f1-border); padding-top: 12px; }

.drvp-debut { color: var(--f1-text-dim); font-size: 13px; margin: 0; }

.drvp-races { list-style: none; margin: 0; padding: 0; }
.drvp-races li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px; }
.drvp-races li:last-child { border-bottom: none; }
.drvp-races a { color: #fff; text-decoration: none; font-weight: 600; }
.drvp-races a:hover { color: var(--f1-red-bright); }
.drvp-races li span { color: var(--f1-text-dim); }

/* ── Teams-Übersicht (teams.php) ── */
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.tm-card {
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    background: linear-gradient(160deg, var(--f1-card-bg-1) 0%, var(--f1-card-bg-2) 100%);
    border-radius: 12px; border-top: 3px solid var(--row-color, var(--f1-red)); overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3); transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tm-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.45); }
.tm-card__logo { min-height: 110px; display: flex; align-items: center; justify-content: center; padding: 22px; }
.tm-card__logo img { max-width: 100%; max-height: 68px; object-fit: contain; }
.tm-card__name { padding: 0 16px 18px; font-weight: 800; font-size: 13px; text-transform: uppercase; text-align: center; color: #fff; line-height: 1.35; }

/* ── Team-Profil (team-profil.php) ── */
.tmp-pairings { list-style: none; margin: 0; padding: 0; }
.tmp-pairings li { display: flex; gap: 14px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px; }
.tmp-pairings li:last-child { border-bottom: none; }
.tmp-pairings strong { color: #fff; min-width: 40px; flex-shrink: 0; }
.tmp-pairings span { color: var(--f1-text-dim); }
.tmp-pairings span a { color: inherit; text-decoration: none; }
.tmp-pairings span a:hover { color: var(--f1-red-bright); }

.tmp-races { list-style: none; margin: 0; padding: 0; }
.tmp-races li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px; }
.tmp-races li:last-child { border-bottom: none; }
.tmp-races a { color: #fff; text-decoration: none; font-weight: 700; display: block; margin-bottom: 4px; }
.tmp-races a:hover { color: var(--f1-red-bright); }
.tmp-races__results { display: flex; flex-direction: column; gap: 2px; color: var(--f1-text-dim); font-size: 12.5px; }
.tmp-races__results a.tmp-races__driver-link { color: inherit; font-weight: 400; display: inline; text-decoration: none; }
.tmp-races__results a.tmp-races__driver-link:hover { color: var(--f1-red-bright); }

/* ── Strecken-Übersicht (strecken.php) ── */
.trk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.trk-card {
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    background: linear-gradient(160deg, var(--f1-card-bg-1) 0%, var(--f1-card-bg-2) 100%);
    border-radius: 12px; border-top: 3px solid var(--f1-red); overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3); transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.trk-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.45); }
.trk-card__map { height: 130px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 14px; }
.trk-card__map img { max-width: 100%; max-height: 100%; object-fit: contain; }
.trk-card__map-fallback { font-size: 34px; opacity: 0.35; }
.trk-card__body { padding: 14px 16px 16px; }
.trk-card__name { font-weight: 800; font-size: 14px; color: #fff; margin-bottom: 6px; }
.trk-card__meta { display: flex; align-items: center; gap: 8px; color: var(--f1-text-dim); font-size: 12.5px; }
.trk-card__meta img.f1-flag { width: 18px; height: auto; border-radius: 2px; flex-shrink: 0; }

/* ── Strecken-Profil (strecken-profil.php) ── */
.trk-detail-grid { display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: start; }
@media (max-width: 760px) { .trk-detail-grid { grid-template-columns: 1fr; } }
.trk-map { background: #fff; border-radius: 12px; padding: 20px; min-height: 200px; display: flex; align-items: center; justify-content: center; }
.trk-map img { max-width: 100%; max-height: 260px; object-fit: contain; }
.trk-map__fallback { font-size: 48px; opacity: 0.3; }

/* ── Statistiken (statistik-*.php) ── */
.stat-layout { display: grid; grid-template-columns: 190px 1fr; gap: 22px; align-items: start; }

.stat-nav {
    display: flex; flex-direction: column; gap: 2px;
    background: linear-gradient(160deg, var(--f1-card-bg-1) 0%, var(--f1-card-bg-2) 100%);
    border-radius: 12px; border-top: 3px solid var(--f1-red); padding: 14px; position: sticky; top: 78px;
}
.stat-nav__group-title {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
    font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    color: #fff; padding: 9px 12px; margin: 14px 0 0; border-radius: 8px;
    background: rgba(150,20,20,0.35); border: 1px solid rgba(225,6,0,0.7);
    font-family: inherit; cursor: pointer; transition: background 0.15s;
}
.stat-nav__group-title:hover { background: rgba(150,20,20,0.5); }
.stat-nav__group:first-child .stat-nav__group-title { margin-top: 0; }
.stat-nav__group-arrow {
    width: 8px; height: 8px; flex-shrink: 0; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(45deg); margin-top: -3px; transition: transform 0.15s;
}
.stat-nav__group.is-open .stat-nav__group-arrow { transform: rotate(-135deg); margin-top: 3px; }
.stat-nav__items { display: none; flex-direction: column; gap: 2px; padding-top: 6px; }
.stat-nav__group.is-open .stat-nav__items { display: flex; }
.stat-nav a {
    display: block; padding: 8px 8px; border-radius: 6px; text-decoration: none; color: #c5c5d0;
    font-size: 13px; font-weight: 600; transition: background 0.15s, color 0.15s;
}
.stat-nav a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.stat-nav a.is-active { background: rgba(225,6,0,0.15); color: #fff; font-weight: 700; }

.stat-nav-mobile { display: none; }
.stat-nav-mobile select {
    width: 100%; background: #13131f; border: 1px solid var(--f1-border); color: #fff; font-weight: 700;
    font-size: 13.5px; padding: 12px 14px; border-radius: 8px; cursor: pointer; outline: none;
}
.stat-nav-mobile select:focus { border-color: var(--f1-red); }

@media (max-width: 760px) {
    .stat-layout { grid-template-columns: 1fr; }
    .stat-nav { display: none; }
    .stat-nav-mobile { display: block; margin-bottom: 4px; }
}

.stat-content { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stat-matrix-wrap { overflow-x: auto; padding: 0; }
.stat-matrix { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.stat-matrix th, .stat-matrix td { padding: 5px 6px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.05); }
.stat-matrix thead th { color: var(--f1-text-dim); font-size: 10px; text-transform: uppercase; font-weight: 700; padding-bottom: 8px; }
.stat-matrix__pos, .stat-matrix__driver {
    position: sticky; background: var(--f1-card-bg-2); z-index: 1;
}
.stat-matrix__pos { left: 0; width: 34px; color: var(--f1-text-dim); }
.stat-matrix__driver { left: 34px; text-align: left; font-weight: 700; color: #fff; padding-right: 14px; }
.stat-matrix__driver a { color: inherit; text-decoration: none; }
.stat-matrix__driver a:hover { color: var(--f1-red-bright); }
.stat-matrix__points { color: var(--f1-text-dim); }
.stat-matrix__race img.f1-flag { width: 20px; height: auto; border-radius: 2px; }
.stat-cell {
    width: 26px; height: 26px; min-width: 26px; border-radius: 5px; font-weight: 800; font-size: 11px;
    color: var(--f1-text-dim); background: rgba(255,255,255,0.03);
}
.stat-cell--p1 { background: #e8b923; color: #241a00; }
.stat-cell--p2 { background: #c9ccd6; color: #1a1a1a; }
.stat-cell--p3 { background: #c9793f; color: #241200; }
.stat-cell--points { background: rgba(225,6,0,0.22); color: #fff; }
.stat-cell--dnf { background: rgba(255,255,255,0.04); color: #8a8a95; box-shadow: inset 0 0 0 1px rgba(255,59,48,0.4); }
.stat-cell--gain { background: rgba(82,183,136,0.22); color: #7be0af; }
.stat-cell--loss { background: rgba(255,59,48,0.18); color: #ff8a80; }
.stat-cell--count { background: rgba(255,255,255,0.06); color: #fff; font-weight: 800; }
.stat-cell--peak { background: var(--f1-red); color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }
.stat-dist__head--p1 { color: #e8b923; }
.stat-dist__head--p2 { color: #c9ccd6; }
.stat-dist__head--p3 { color: #c9793f; }

.stat-note { margin: 0; color: var(--f1-text-dim); font-size: 12.5px; font-style: italic; }
.stat-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 12px; color: var(--f1-text-dim); }
.stat-legend__item { display: flex; align-items: center; gap: 8px; }
.stat-legend__item i {
    display: inline-flex; align-items: center; justify-content: center; font-style: normal;
    width: 22px; height: 22px; border-radius: 5px; font-size: 11px; font-weight: 800;
}

/* ── History (history.php) ── */
.hist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; }
.hist-card {
    display: flex; flex-direction: column; text-decoration: none; color: inherit; position: relative;
    background: linear-gradient(160deg, var(--f1-card-bg-1) 0%, var(--f1-card-bg-2) 100%);
    border-radius: 12px; border-top: 3px solid var(--row-color, var(--f1-red)); overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3); transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hist-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.45); }
.hist-card__year {
    position: absolute; left: 8px; top: 8px; z-index: 1; background: rgba(6,6,10,0.75); color: #fff;
    font-weight: 800; font-size: 12px; padding: 3px 8px; border-radius: 4px;
}
.hist-card__photo { aspect-ratio: 3 / 4; background: #15151e; }
.hist-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hist-card__body { padding: 10px 12px 14px; }
.hist-card__name { font-weight: 800; font-size: 13px; color: #fff; display: flex; align-items: center; gap: 6px; }
.hist-card__name img.f1-flag { width: 16px; height: auto; border-radius: 2px; flex-shrink: 0; }
.hist-card__team { font-size: 11px; color: var(--f1-text-dim); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.3px; }

.hist-section-title {
    margin: 40px 0 18px; font-size: 1.2rem; font-weight: 900; text-transform: uppercase; color: #fff;
    border-left: 4px solid var(--f1-red); padding-left: 12px;
}
.hist-records { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.hist-board { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.hist-board li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.hist-board li:last-child { border-bottom: none; }
.hist-board__pos { width: 18px; flex-shrink: 0; color: var(--f1-text-dim); font-weight: 800; font-size: 12.5px; text-align: center; }
.hist-board img.f1-photo { width: 30px; height: auto; border-radius: 4px; flex-shrink: 0; }
.hist-board__name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-board__name a { color: inherit; text-decoration: none; }
.hist-board__name a:hover { color: var(--f1-red-bright); }
.hist-board__name img.f1-flag { width: 16px; height: auto; border-radius: 2px; flex-shrink: 0; }
.hist-board__value { flex-shrink: 0; font-weight: 800; color: #fff; background: #2a2a3a; padding: 4px 9px; border-radius: 6px; font-size: 12.5px; }

/* ── Footer ── */
.site-footer { border-top: 1px solid var(--f1-border); margin-top: 40px; }
.site-footer__inner {
    max-width: 1280px; margin: 0 auto; padding: 22px 24px; display: flex;
    justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
    color: var(--f1-text-dim); font-size: 12.5px;
}
.site-footer__links { display: flex; gap: 18px; }
.site-footer__links a { text-decoration: none; color: var(--f1-text-dim); }
.site-footer__links a:hover { color: #fff; }