/*
 * 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;
    font-size: 1.375rem;
    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) {
    .header__logo img { max-height: calc(var(--logo-max-height) * 0.74); }
    .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); }
}

/* 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); }
}
.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; } }

.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) {
    .nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(340px, 90vw);
        background: var(--gradient-eon);
        z-index: var(--z-modal);
        padding: calc(var(--header-height) + var(--space-8)) var(--space-6) var(--space-8);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform var(--transition-slow);
        justify-content: flex-start;
    }
    .nav.is-open { transform: translateX(0); }

    .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%;
        font-size: var(--text-2xl);
        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;
        background: rgba(0,0,0,0.20);
        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);
    }
}
.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;
}

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

.hero__media {
    position: absolute;
    inset: 0;
    z-index: var(--z-below);
}
.hero__video,
.hero__poster,
.hero__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.hero__placeholder {
    background: linear-gradient(135deg, #1a0a0a 0%, #1a1a1a 50%, #0a0a1a 100%);
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(15,15,15,0.95)  0%,
        rgba(15,15,15,0.65) 40%,
        rgba(15,15,15,0.40) 70%,
        rgba(15,15,15,0.20) 100%
    );
}

.hero__content {
    position: relative;
    z-index: var(--z-above);
    padding-top: calc(var(--header-height) + var(--space-12));
    padding-bottom: var(--space-16);
    color: var(--color-white);
}

.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__title {
    font-size: var(--text-hero);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-white);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-6);
}

.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);
}

.hero__scroll {
    position: absolute;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
}
.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 */
.section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-10);
    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
   ============================================================ */
.facts-bar {
    background: var(--color-primary);
    padding-block: var(--space-5);
}
.facts-bar__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6) var(--space-8);
    justify-content: center;
    align-items: center;
}
.facts-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-1);
}
.facts-bar__value {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-white);
    line-height: 1;
    text-transform: uppercase;
}
.facts-bar__label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

/* ============================================================
   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
   ============================================================ */
.countdown-section__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    align-items: center;
    text-align: center;
}
@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__title {
    font-size: var(--text-4xl);
    font-family: var(--font-heading);
    color: var(--color-white);
    margin-bottom: var(--space-3);
}
.countdown-section__subtitle {
    color: rgba(255,255,255,0.70);
    margin-bottom: var(--space-6);
    font-size: var(--text-lg);
}
.countdown-section__widget { flex-shrink: 0; }

/* ============================================================
   SPONSOREN
   ============================================================ */
.sponsors-wall {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-8);
}
.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);
    border-bottom: 1px solid rgba(0,0,0,0.07);
}
.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 {
    background: var(--surface-page);
    padding-block: var(--space-16) var(--space-10);
    border-top: 1px solid rgba(0,0,0,0.07);
}
.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%; }
.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);
    border-top: 1px solid rgba(0,0,0,0.07);
}
.footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 639px) {
    .footer__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        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;
}