/*
 * layout.css – Grid, Container, Sektionen
 */

/* ============================================================
   CONTAINER
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.container--narrow  { max-width: 768px; }
.container--wide    { max-width: 1440px; }
.container--full    { max-width: none; padding-inline: 0; }

/* ============================================================
   SITE HEADER – Weiß (wie eon.de – Logo braucht weißen Hintergrund)
   ============================================================ */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: var(--z-sticky);
    height: var(--header-height);
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-header);
    transition: box-shadow var(--transition-base), background var(--transition-base);
}
.site-header.is-scrolled {
    box-shadow: 0 2px 16px rgba(0,0,0,0.10);
    /* Der gescrollte Kopf darf nie kleiner werden als das Logo darin plus Luft. Sonst müsste
       man zwischen "Logo lesbar" und "Kopf schlank" wählen; so folgt die Kopfhöhe dem Logo. */
    height: max(var(--header-height-scrolled), calc(var(--logo-height-scrolled) + 1.75rem));
}
.site-header.is-scrolled .header__logo img {
    max-height: var(--logo-height-scrolled);
}
.site-header,
.header__logo img { transition: height var(--transition-base), max-height var(--transition-base); }

.header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    height: 100%;
}

.header__logo {
    text-decoration: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
/* Feste Breite ersetzt durch eine Höhenbegrenzung: das E.ON-Logo ist ein flaches Querformat,
   andere Event-Logos sind deutlich kompakter (Parkleuchten 320x155). Mit fester Breite wurde ein
   solches Logo höher als der Kopfbereich selbst und ragte darüber hinaus. Jetzt bestimmt die
   verfügbare Höhe die Größe, die Breite folgt dem Seitenverhältnis. */
.header__logo img {
    width: auto;
    max-width: min(var(--logo-max-width), 46vw);
    height: auto;
    max-height: var(--logo-max-height);
    object-fit: contain;
}
.header__logo-text {
    display: flex;
    flex-direction: column;
    color: var(--color-text);
    font-family: var(--font-heading);
    line-height: 1.1;
}
.header__logo-text strong { font-size: var(--text-xl); color: var(--color-primary); font-weight: 900; }
.header__logo-text span   { font-size: var(--text-sm); opacity: 0.60; color: var(--color-text); }

/* Navigation (Desktop) */
.nav { flex: 1; display: none; }
@media (min-width: 1024px) {
    .nav { display: flex; align-items: center; justify-content: center; }
}

.nav__list {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}
.nav__item { position: relative; }

.nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    /* Menüpunkte brechen nicht um. "Infos zum Lauf" stand auf RUNschnellweg dreizeilig im
       Kopfbereich, weil das breite Logo den Platz nimmt. Ein umbrechender Menüpunkt sieht aus
       wie drei Menüpunkte. Lieber schiebt die Leiste enger zusammen, dafür sind gap und
       Innenabstand da. */
    white-space: nowrap;
    padding: var(--space-2) var(--space-4);
    color: var(--color-text);
    text-decoration: none;
    /* War eine feste Zahl (22 px) und damit auf dem Handy genauso gross wie am Desktop —
       im ausgeklappten Menue wirkte das erschlagend. Jetzt ueber die Stufe. */
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--radius-md);
    transition: color var(--transition-fast), background var(--transition-fast);
}
.nav__link:hover,
.nav__item.is-active > .nav__link {
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.06);
}
.nav__arrow { font-size: 0.65em; opacity: 0.6; }

/* Zwischen Burger-Grenze und breitem Bildschirm wird es eng: ein breites Event-Logo plus sechs
   Menüpunkte plus Aktionen passen bei 1100 bis 1400 px sonst nicht nebeneinander. Vorher fiel das
   nicht auf, weil ein Menüpunkt einfach umbrach ("Infos zum Lauf" dreizeilig) und die Leiste damit
   schmal blieb. Mit `white-space: nowrap` muss der Platz stattdessen hier entstehen: Logo etwas
   kleiner, Menüpunkte enger. Beides proportional, damit es für jedes Event stimmt. */
@media (min-width: 1024px) and (max-width: 1400px) {
    .site-header.is-scrolled .header__logo img { max-height: calc(var(--logo-height-scrolled) * 0.85); }
    .nav__link { padding-left: var(--space-2); padding-right: var(--space-2); }
}
/* Das Logo darf frueher wieder auf volle Groesse als die Menuepunkte wieder Luft bekommen: Bis
   1400 px blieb es auf 74 %, obwohl der Platz schon ab etwa 1340 px reicht — auf einem
   1366-px-Bildschirm (verbreitetes Notebook) sah eine Vergroesserung deshalb nach nichts aus.
   Gemessen am breitesten Logo im Bestand (Parkleuchten, 500 px): bei 1340 px bleiben neben Logo,
   Menue und Aktionen rund 60 px frei, bei 1280 px waeren es 3 px. Deshalb 1339 als Grenze. */
@media (min-width: 1024px) and (max-width: 1339px) {
    .header__logo img { max-height: calc(var(--logo-max-height) * 0.74); }
}

/* Dropdown */
.nav__dropdown {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    background: var(--color-dark-2);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    transform: translateX(-50%) translateY(-8px);
    box-shadow: var(--shadow-xl);
}
.nav__item.has-dropdown:hover .nav__dropdown,
.nav__item.has-dropdown:focus-within .nav__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}
.nav__dropdown .nav__link {
    width: 100%;
    text-transform: none;
    letter-spacing: 0;
}

/* Header-Actions */
.header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}
.header__social {
    display: none;
    align-items: center;
    gap: var(--space-2);
}
@media (min-width: 768px) {
    .header__social { display: flex; }
}
/* Zwischen Burger-Grenze und 1200 px reicht der Platz nicht für Logo, sechs Menüpunkte UND die
   Kanal-Symbole. Dann entfallen die Symbole: sie stehen auf jeder Seite auch im Fußbereich, das
   Menü nicht. Vorher wurden sie stillschweigend aus dem Kopfbereich herausgeschoben und waren
   gar nicht mehr erreichbar. */
@media (min-width: 1024px) and (max-width: 1200px) {
    .header__social { display: none; }
}
/* Engste Desktop-Stufe direkt über der Burger-Grenze: hier muss auch das Logo deutlich
   nachgeben, sonst wird der letzte Menüpunkt abgeschnitten (bei 1024 px war "Kontakt" halb weg). */
@media (min-width: 1024px) and (max-width: 1150px) {
    .header__logo img { max-height: calc(var(--logo-max-height) * 0.56); }
    .nav__link { padding-left: var(--space-1); padding-right: var(--space-1); }
}

/* Im Burger-Modus steht neben dem Logo NUR noch der Menue-Knopf, also ist viel Platz frei. Die
   Schranke von 46vw stammt aus dem Desktop-Fall, wo die Menuepunkte daneben liegen — auf einem
   360-px-Geraet druckte sie ein breites Logo auf rund 40 px Hoehe herunter. 68vw lassen bei 360 px
   etwa 245 px Breite zu (rund 59 px hoch) und halten weiterhin Abstand zum Burger. */
@media (max-width: 1023px) {
    .header__logo img { max-width: min(var(--logo-max-width), 68vw); }
}
.header__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    transition: color var(--transition-fast);
}
.header__social-link:hover {
    color: var(--color-primary);
}
.header__social-link svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    display: block;
}

/* Hamburger */
.nav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    color: var(--color-text);
    padding: var(--space-2);
}
.nav__toggle:hover { background: var(--tint-hover); }
@media (min-width: 1024px) { .nav__toggle { display: none; } }
/* Der Kopf des Panels bringt seinen eigenen Schliessen-Knopf mit; der Burger darunter waere
   ohnehin verdeckt. Auf dem Desktop existiert das Panel nicht. */
.nav__kopf, .nav__close { display: none; }
@media (max-width: 1023px) { .nav__kopf { display: flex; } .nav__close { display: flex; } }

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 22px;
}
.hamburger__line {
    display: block;
    width: 100%;
    height: 2.5px;
    background: var(--color-primary);
    border-radius: 2px;
    transition: transform var(--transition-fast), opacity var(--transition-fast), width var(--transition-fast);
}
.hamburger__line:nth-child(2) { width: 68%; }

[aria-expanded="true"] .hamburger__line:nth-child(1) { transform: translateY(8.5px) rotate(45deg); width: 100%; }
[aria-expanded="true"] .hamburger__line:nth-child(2) { opacity: 0; width: 0; }
[aria-expanded="true"] .hamburger__line:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* Mobile Nav Panel */
@media (max-width: 1023px) {
    /* Vollbild statt schmalem Streifen, und in drei Zonen geteilt: Kopf (Marke + Schliessen),
       scrollbare Liste, Aktionsknopf unten. Vorher hatte das Panel einen Innenabstand in Hoehe
       des Seitenkopfs (auf park 182 px) — der wirkte wie ein Fehler, weil oben nichts stand. */
    .nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        width: 100%;
        /* ⚠️ Bewusst der DUNKLE Marken-Verlauf, nicht der farbige. Auf rcr ist der Marken-Verlauf
           orange: weisse Menueschrift kam dort am oberen Ende auf 3,02:1 — unter der Norm von
           4,5:1. Als schmaler Streifen fiel das kaum auf, seit das Panel den ganzen Bildschirm
           einnimmt sehr wohl. Der dunkle Verlauf traegt auf allen vier Sites (13,4:1 bis 18,3:1)
           und bleibt trotzdem markentypisch, weil er aus der Event-Farbe abgeleitet ist. */
        background: var(--gradient-eon-dark, var(--gradient-eon));
        z-index: var(--z-modal);
        padding: 0;
        overflow: hidden;              /* gescrollt wird NUR in .nav__scroll */
        transform: translateX(100%);
        transition: transform var(--transition-slow);
        justify-content: flex-start;
    }
    .nav.is-open { transform: translateX(0); }

    .nav__kopf {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-5) var(--space-5) var(--space-4);
        border-bottom: 1px solid rgba(255,255,255,0.14);
        flex-shrink: 0;
    }
    .nav__kopf-name {
        font-family: var(--font-heading);
        font-weight: 800;
        font-size: var(--text-lg);
        color: var(--color-white);
    }
    .nav__kopf-logo {
        height: 52px;
        width: auto;
        max-width: 62vw;
        object-fit: contain;
    }
    .nav__close {
        width: 44px;                   /* Mindestgroesse fuer eine sichere Tippflaeche */
        height: 44px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid rgba(255,255,255,0.28);
        border-radius: var(--radius-md);
        color: var(--color-white);
        cursor: pointer;
        transition: background var(--transition-fast), border-color var(--transition-fast);
    }
    .nav__close:hover,
    .nav__close:focus-visible {
        background: rgba(255,255,255,0.12);
        border-color: rgba(255,255,255,0.55);
    }

    /* Der einzige scrollende Bereich. `min-height: 0` ist noetig, damit ein Flex-Kind ueberhaupt
       kleiner werden darf als sein Inhalt — ohne das waechst es stattdessen und scrollt nie. */
    .nav__scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: var(--space-2) var(--space-5) var(--space-4);
    }

    .nav__list {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }
    .nav__item { border-bottom: 1px solid rgba(255,255,255,0.12); }
    .nav__link {
        width: 100%;
        /* War `--text-2xl` (24 px auf dem Handy) — im ausgeklappten Menue erschlagend gross.
           Die gut treffbare Flaeche entsteht ueber das Padding weiter unten, nicht ueber den
           Schriftgrad; 18 px liegen im ueblichen Rahmen fuer mobile Menuepunkte. */
        font-size: var(--text-lg);
        font-weight: 700;
        color: var(--color-white);
        text-transform: none;
        letter-spacing: 0;
        padding: var(--space-4) var(--space-2);
        border-radius: 0;
    }
    .nav__link:hover,
    .nav__item.is-active > .nav__link {
        color: var(--color-white);
        background: rgba(255,255,255,0.10);
    }
    .nav__dropdown {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        /* War rgba(0,0,0,0.20) — gedacht als Vertiefung, gerechnet für ein helles Panel. Seit
           das Menü auf dem dunklen Markenverlauf steht, ist Schwarz auf Schwarz fast nichts.
           Ein leichter Aufhellung folgt der Sprache der Nachbarn im Panel (Trennlinien und
           Hover arbeiten dort ebenfalls mit Weiß bei geringer Deckkraft) und hebt die Gruppe
           messbar ab: 1,12:1 gegen die Panelfläche. */
        background: rgba(255,255,255,0.06);
        box-shadow: none;
        border-radius: 0;
        border: none;
        margin: 0;
        padding: 0;
    }
    .nav__dropdown .nav__link {
        font-size: var(--text-lg);
        padding-left: var(--space-6);
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
}

/* Mobile Nav Footer (CTA + Social) */
.nav__mobile-footer {
    display: none;
}
@media (max-width: 1023px) {
    .nav__mobile-footer {
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
        margin-top: auto;
        padding-top: var(--space-8);
        border-top: 1px solid rgba(255,255,255,0.20);
    }
}
@media (max-width: 1023px) {
    .nav__mobile-footer {
        flex-shrink: 0;
        padding: var(--space-4) var(--space-5) var(--space-6);
        border-top: 1px solid rgba(255,255,255,0.14);
    }
}
.nav__mobile-cta {
    display: block;
    text-align: center;
    padding: var(--space-4) var(--space-6);
    background: var(--surface-raised) !important;
    color: var(--color-primary) !important;
    font-weight: 700;
    font-size: var(--text-base);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}
.nav__mobile-cta:hover { opacity: 0.92; }
.nav__mobile-social {
    display: flex;
    gap: var(--space-5);
    justify-content: center;
}
.nav__mobile-social a {
    color: rgba(255,255,255,0.75);
    transition: color var(--transition-fast);
    text-decoration: none;
}
.nav__mobile-social a:hover { color: var(--color-white); }
.nav__mobile-social svg { width: 22px; height: 22px; fill: currentColor; display: block; }

/* Overlay */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: calc(var(--z-modal) - 1);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base);
}
.nav-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* ⚠️ Seit das Menue den ganzen Bildschirm einnimmt, hat der Abdunkler keine Funktion mehr — es
   gibt kein "daneben" mehr, auf das man zum Schliessen tippen koennte. Schlimmer: er LAG UEBER
   dem Menue und dunkelte es ab. Grund ist der Stapelkontext: der Kopfbereich ist `position:
   fixed` mit `z-index: 200`, das Menue steckt darin. Sein eigener `z-index: 400` gilt nur
   INNERHALB des Kopfes und kann den Abdunkler (399, direkt im body) nicht ueberholen.
   Wer das Menue je wieder schmal macht, nimmt diese Regel raus. */
@media (max-width: 1023px) {
    .nav-overlay { display: none; }
}

/* Das Skript setzt diese Klasse am <body>, sobald das Menue offen ist — eine CSS-Regel dazu gab
   es aber nie, also scrollte die Seite HINTER dem geoeffneten Menue einfach weiter. Aufgefallen
   beim mobilen Audit am 12.08.2026, zusammen mit den falschen Menue-Selektoren im Skript. */
body.nav-is-open {
    overflow: hidden;
}

/* ============================================================
   HERO
   ============================================================ */
/* --------------------------------------------------------------------------------------
   Hero, Faktenleiste und Countdown standen hier UND in home.css — zwei Fassungen derselben
   Klassen. Weil home.css nach layout.css lädt, gewann dort immer die zweite; die Regeln hier
   waren toter Code, an dem Änderungen wirkungslos blieben.

   Gemessen am 12.08.2026 über alle vier Sites und alle Unterseiten: Diese Klassen erscheinen
   ausschliesslich auf Startseiten — und nur dort wird home.css geladen. Entfernt wurden
   deshalb genau die Blöcke, deren Eigenschaften home.css vollständig abdeckt:
   .countdown-section__subtitle,
   .countdown-section__title,
   .facts-bar,
   .facts-bar__inner,
   .facts-bar__label,
   .hero__media,
   .hero__overlay,
   .hero__placeholder,
   .hero__scroll,
   .hero__title.

   In einem zweiten Schritt kamen .hero__content, .facts-bar__value und
   .countdown-section__inner dazu: Ihre fehlenden Eigenschaften stehen jetzt in home.css.

   NICHT entfernt wurden .hero, .facts-bar__item, .countdown-section__widget, .section__header und
   .section__header--center: Dort setzt layout.css Eigenschaften, die home.css NICHT setzt
   (Hintergrund, Farbe, Zeilenhöhe, Textausrichtung, Flex-Richtung). Sie wirken also weiterhin
   und dürfen erst weg, wenn home.css sie übernimmt.

   Gegenprobe: berechnete Stile von 13 Elementen auf allen vier Startseiten vorher/nachher
   verglichen — identisch.
   -------------------------------------------------------------------------------------- */

.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--color-dark);
}

.hero__video,
.hero__poster,
.hero__placeholder {
    background: linear-gradient(135deg, #1a0a0a 0%, #1a1a1a 50%, #0a0a1a 100%);
}


.hero__edition {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}


.hero__date {
    font-size: var(--text-xl);
    color: rgba(255,255,255,0.80);
    font-weight: 500;
    margin-bottom: var(--space-8);
}

.hero__countdown { margin-bottom: var(--space-8); }

.hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.scroll-indicator {
    display: block;
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.6));
    margin: 0 auto;
    animation: scrollPulse 2s ease-in-out infinite;
}

/* ============================================================
   SEKTIONEN
   ============================================================ */
.section {
    padding-block: var(--section-gap);
}
.section--sm { padding-block: var(--section-gap-sm); }
.section--dark {
    background: var(--gradient-eon);
    color: var(--color-text-white);
}
.section--surface { background: var(--color-surface); }
.section--primary { background: var(--gradient-eon); color: var(--color-white); }

/* Sektions-Header */
/* ⚠️ `align-items` und `margin-bottom` standen bis zum 21.08.2026 zusaetzlich in home.css und
   gewannen dort, weil home.css spaeter laedt. Wirksam waren also IMMER die Werte von unten —
   aber nur auf der Startseite, denn nur dort laedt home.css. Auf einer Unterseite mit
   Abschnittskopf haette derselbe Kopf anders gestanden. Jetzt steht der wirksame Wert hier,
   an einer Stelle, und gilt ueberall gleich. */
.section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-12);
    flex-wrap: wrap;
}
.section__header--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.section__title {
    font-size: var(--text-4xl);
    color: inherit;
}
.section--dark .section__title { color: var(--color-white); }
.section__link {
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    color: var(--color-primary);
    white-space: nowrap;
}
.section__link:hover { color: var(--color-primary-dark); }

/* ============================================================
   FACTS BAR
   ============================================================ */
/* ⚠️ Zusammengefuehrt am 21.08.2026. Vorher stand die Haelfte hier und die Haelfte in
   home.css; wirksam war eine Mischung aus beiden (Spaltenrichtung von hier, Abstand und
   Breite von dort), und das auch nur auf der Startseite. Die Werte unten sind genau die,
   die vorher gegolten haben. */
.facts-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    /* ⚠️ Bewusst KEIN `flex-grow`. Mit `flex: 1 1 auto` zieht sich ein einzelner Fakt, der in
       die naechste Reihe rutscht, ueber die volle Breite — und weil der Inhalt in
       Zeilenrichtung am Anfang gepackt ist, steht er dann linksbuendig unter vier zentrierten.
       Gemessen bei 1100 px. Dieselbe Falle wurde unter 640 px schon einmal behoben, dort im
       Raster. Ohne Wachstum traegt `justify-content: center` des Elternteils auch
       unvollstaendige Reihen. */
    flex: 0 1 auto;
    min-width: 160px;
}

/* ============================================================
   CTA GRID
   ============================================================ */
.cta-grid__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
@media (min-width: 640px) { .cta-grid__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cta-grid__inner { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   NEWS GRID
   ============================================================ */
.news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
@media (min-width: 640px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   COUNTDOWN SEKTION
   ============================================================ */
@media (min-width: 768px) {
    .countdown-section__inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        gap: var(--space-16);
    }
}
.countdown-section__text { flex: 1; }
.countdown-section__widget { flex-shrink: 0; }

/* ============================================================
   SPONSOREN
   ============================================================ */
/* .sponsors-wall → components.css. Der Block stand bis zum 21.08.2026 auch hier, mit
   `gap: var(--space-6)` statt space-8, und war vollstaendig wirkungslos: components.css
   laedt spaeter und setzt jede einzelne dieser Eigenschaften noch einmal. */
.sponsors-wall--titelpartner .sponsor-logo { flex: 0 1 280px; }
.sponsors-wall--partner      .sponsor-logo { flex: 0 1 160px; }

.sponsor-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    background: var(--surface-raised);
}
.sponsor-logo:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}
.sponsor-logo img { height: 48px; width: auto; object-fit: contain; }
.sponsor-logo__name {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-muted);
    text-align: center;
}
.sponsors-cta { text-align: center; margin-top: var(--space-4); }

/* ============================================================
   PAGE HEADER (innere Seiten)
   ============================================================ */
.page-header {
    padding-top: calc(var(--header-height) + var(--space-12));
    padding-bottom: var(--space-10);
    background: var(--color-dark);
    color: var(--color-white);
}
.page-header__title {
    font-size: var(--text-5xl);
    color: var(--color-white);
    text-transform: uppercase;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer__newsletter {
    /* Eigenes Token, damit dieses Band unabhängig vom Marken-Verlauf gesetzt werden kann.
       Ohne Wert bleibt es beim bisherigen Verhalten. */
    background: var(--gradient-band, var(--gradient-eon));
    padding-block: var(--space-8);
}
.footer__newsletter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    flex-wrap: wrap;
}
.footer__newsletter-title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: var(--space-1);
}
.footer__newsletter-desc {
    font-size: var(--text-base);
    color: rgba(255,255,255,0.80);
    margin: 0;
}
.footer__newsletter-btn {
    flex-shrink: 0;
    background: var(--surface-raised) !important;
    /* Die abgedunkelte Variante: die reine Primärfarbe auf Weiß trägt bei hellen Marken nicht
       (Logo-Orange 3,05:1). --color-primary-text ist genau dafür gerechnet. */
    color: var(--color-primary-text, var(--color-primary)) !important;
    font-weight: 700;
}
.footer__newsletter-btn:hover {
    background: rgba(255,255,255,0.90) !important;
}
@media (max-width: 640px) {
    .footer__newsletter-inner { flex-direction: column; align-items: flex-start; }
}

.footer__quicklinks {
    background: var(--surface-page);
    padding-block: var(--space-4);
    border-top: 3px solid var(--color-primary);
    /* War rgba(0,0,0,0.07) — auf einem fast schwarzen Grund unsichtbar. Aus der Primärfarbe
       gemischt trägt die Linie in beiden Modi. Die einfache Deklaration davor bleibt stehen,
       damit ältere Browser überhaupt eine Kante bekommen. */
    border-bottom: 1px solid rgba(128,128,128,0.28);
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.quicklinks__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    justify-content: center;
}
.quicklinks__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.quicklinks__item:hover { background: var(--tint-hover); color: var(--color-primary); }
.quicklinks__item--cta { font-weight: 700; color: var(--color-primary); }

.footer__main {
    /* Der Fussbereich hatte exakt dieselbe Flaeche wie die Seite und verschmolz mit ihr. Auf
       Sites MIT Social-Knoepfen fiel das nicht auf, weil die als Trenner wirkten — auf park
       sind die Kanaele nicht gepflegt, und damit fehlte jede Grenze.
       Statt einer harten Kante ein weicher Schimmer der Primaerfarbe, der nach unten auslaeuft:
       oben 9 % Beimischung (auf park ein Abstand von 1,12 zur Seitenflaeche, damit sichtbar),
       ab einem Drittel Hoehe wieder die normale Flaeche. Funktioniert in hell wie dunkel, weil
       er aus den Tokens gemischt wird. */
    /* Erst die einfache Flaeche, dann der Verlauf: Browser ohne `color-mix` ignorieren die
       zweite Deklaration und behalten eine korrekte Flaeche statt gar keiner. */
    background: var(--surface-page);
    background:
        linear-gradient(to bottom,
            color-mix(in srgb, var(--color-primary) 9%, var(--surface-page)) 0%,
            var(--surface-page) 34%);
    padding-block: var(--space-16) var(--space-10);
    /* War rgba(0,0,0,0.07) — auf einer fast schwarzen Flaeche unsichtbar. */
    border-top: 1px solid rgba(128,128,128,0.18);
    border-top-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
}
@media (min-width: 640px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.footer__heading {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.footer__logo { margin-bottom: var(--space-4); }
/* Höhe aus dem Branding (--footer-logo-height), Rückfall auf 48px. Feste 48px passten zum
   flachen E.ON-Querformat; ein Logo mit mehr Inhalt — RUNschnellweg trägt Wortmarke,
   Westenergie UND bunert in einer Datei — ist dabei nicht mehr lesbar. */
.footer__logo img { height: var(--footer-logo-height, 48px); width: auto; max-width: 100%; }
/* Auf schmalen Geraeten begrenzt die BREITE, nicht die Hoehe.
 *
 * Die Hoehe kommt aus dem Branding und ist eine Desktop-Zahl. Bei einem breiten Logo wird daraus
 * mobil eine Breite, die fast die ganze Spalte einnimmt: Parkleuchten (4,17:1) steht bei 72 px
 * Hoehe 300 px breit — am Desktop sind das 300 von 428 (70 Prozent), auf einem 390er Geraet
 * 300 von 351 (85 Prozent). Dieselbe Datei, viel weniger Luft, und genau das wirkt gestaucht.
 *
 * ⚠️ `max-width` allein reicht NICHT, es muss zusammen mit `height: auto` stehen. Bliebe die
 * feste Hoehe daneben, klemmte der Browser nur die Breite ab und das Logo waere tatsaechlich
 * verzerrt — aus einem Platzproblem wuerde ein Darstellungsfehler.
 *
 * Beide Deckel zusammen halten das Seitenverhaeltnis: Ein hohes Logo (Rhein City Run, 1,8:1)
 * bleibt an seiner Hoehe haengen und aendert sich nicht, ein breites an der Breite. */
@media (max-width: 639px) {
    .footer__logo img {
        height: auto;
        max-height: var(--footer-logo-height, 48px);
        max-width: 70%;
    }
}
.footer__logo-text {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--color-text);
}
.footer__tagline   { color: var(--color-text-muted); font-size: var(--text-base); margin-bottom: var(--space-2); }
.footer__location  { color: var(--color-text-muted); font-size: var(--text-base); margin-bottom: var(--space-4); }

.footer__social { display: flex; gap: var(--space-3); }
.social__link   { color: var(--color-text-muted); transition: color var(--transition-fast); text-decoration: none; }
.social__link:hover { color: var(--color-primary); }

.footer__nav-list { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__nav-list a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--text-base);
    transition: color var(--transition-fast);
}
.footer__nav-list a:hover { color: var(--color-primary); }

.footer__address   { color: var(--color-text-muted); font-size: var(--text-base); font-style: normal; margin-bottom: var(--space-3); line-height: var(--leading-loose); }
.footer__contact-item { color: var(--color-text-muted); font-size: var(--text-base); margin-bottom: var(--space-2); }
.footer__contact-item a { color: inherit; text-decoration: none; }
.footer__contact-item a:hover { color: var(--color-primary); }
.footer__organizer { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-4); }
.footer__organizer a { color: inherit; }

.footer__bottom {
    background: var(--surface-sunken);
    padding-block: var(--space-5);
    /* Gleiche Begruendung wie oben: eine schwarze Linie auf fast schwarzem Grund trennt nichts. */
    border-top: 1px solid rgba(128,128,128,0.14);
    border-top-color: color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 639px) {
    /* Zentriert untereinander statt linksbuendig mit umbrechender Linkzeile: die vier
       Rechtslinks liefen vorher von links nach rechts um und rissen dabei ungleiche Luecken. */
    .footer__bottom-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-4);
    }
    .footer__legal-nav ul {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }
    .footer__legal-nav ul {
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-4);
    }
}
.footer__copyright { font-size: var(--text-sm); color: var(--color-text); font-weight: 400; }
.footer__copyright strong { font-weight: 800; }
.footer__copyright a { color: inherit; font-weight: 600; }
.footer__legal-nav ul { display: flex; gap: var(--space-6); }
.footer__legal-nav a  { font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; }
.footer__legal-nav a:hover { color: var(--color-text); }
.footer__credit { font-size: var(--text-sm); color: rgba(0,0,0,0.35); }
.footer__credit a { color: inherit; }

/* ============================================================
   ERROR 404
   ============================================================ */
.error-404 { min-height: 60vh; display: flex; align-items: center; text-align: center; }
.error-404__inner { width: 100%; }
.error-404__code {
    font-family: var(--font-heading);
    font-size: clamp(8rem, 20vw, 16rem);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    opacity: 0.15;
    margin-bottom: calc(-1 * clamp(4rem, 10vw, 8rem));
}
.error-404__title { font-size: var(--text-4xl); margin-bottom: var(--space-4); }
.error-404__text  { color: var(--color-text-muted); margin-bottom: var(--space-8); }
.error-404__actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb { margin-bottom: var(--space-6); }
.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.50);
}
.breadcrumb__item + .breadcrumb__item::before { content: '›'; margin-right: var(--space-2); }
.breadcrumb__item a { color: rgba(255,255,255,0.60); text-decoration: none; }
.breadcrumb__item a:hover { color: var(--color-white); }
.breadcrumb__item.is-current { color: rgba(255,255,255,0.80); }

/* Zwei Kanal-Knöpfe im Newsletter-Block, wenn das Event keinen Newsletter hat. */
.footer__newsletter-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}