/*
 * neon.css – Leuchtschicht für dunkle Events (Nacht- und Lichtläufe).
 *
 * Wird nur geladen, wenn im Branding-Layer „Dunkel" gewählt ist (functions.php). Die Datei setzt
 * KEINE Farben, sie arbeitet ausschließlich mit den Token aus main.css und dem Branding-Layer —
 * ein zweites dunkles Event bekommt damit automatisch seinen eigenen Schein.
 *
 * Grundgedanke: auf einer dunklen Seite trägt nicht der Schatten die Höhenstaffelung, sondern das
 * Licht. Statt Karten mit Schlagschatten abzuheben, bekommen sie eine feine leuchtende Kante;
 * statt Flächen einzufärben, glüht die Kontur.
 */

:root {
    /* Leuchtstärken an einer Stelle, damit der Schein über die ganze Seite gleich dosiert ist. */
    --glow-soft:   0 0 18px;
    --glow-medium: 0 0 30px;
    --glow-strong: 0 0 48px;
}

/* ============================================================
   1. Kopfbereich – über dem Hero transparent, beim Scrollen fest
   ============================================================ */
.site-header {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
}
/* Über einem Foto steht das Menü sonst auf beliebiger Helligkeit — auf der Startseite über dem
   Nachtfoto, auf den Unterseiten über dem Bannerbild. Ein schmaler Verlauf von oben hält die
   Navigation lesbar, ohne den Kopfbereich als Fläche sichtbar zu machen. */
.site-header::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: calc(var(--header-height) * 1.5);
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--surface-page) 82%, transparent) 0%,
        color-mix(in srgb, var(--surface-page) 45%, transparent) 55%,
        transparent 100%);
    transition: opacity var(--transition-base);
}
.site-header.is-scrolled::after { opacity: 0; }
/* main.js setzt .is-scrolled ab ca. 50px Scrollweite. */
.site-header.is-scrolled {
    background: color-mix(in srgb, var(--surface-page) 88%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: var(--border-header);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}
/* Ältere Browser ohne color-mix: volle Fläche statt durchsichtig. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .site-header.is-scrolled { background: var(--surface-page); }
}

/* Nur im Seitenkopf. Ohne diese Grenze ueberschrieb die Regel auch die Punkte im ausgeklappten
   Menue: dort stand dann die Fliesstextfarbe (#EFECF2) statt reinem Weiss — sichtbar als
   "abgedunkeltes Weiss" auf dem dunklen Panel. neon.css laedt NACH layout.css und gewinnt bei
   gleicher Spezifitaet, die Media Query im Panel-Block half also nicht. */
@media (min-width: 1024px) {
.nav__link { color: var(--color-text); }
.nav__link:hover,
.nav__item.is-active > .nav__link {
    color: var(--color-accent);
    background: transparent;
    text-shadow: var(--glow-soft) rgba(var(--accent-rgb, 192, 228, 252), 0.55);
}
}
/* Aktiver Punkt bekommt eine leuchtende Unterlinie statt einer Farbfläche. */
.nav__item.is-active > .nav__link::after {
    content: "";
    position: absolute;
    left: var(--space-4);
    right: var(--space-4);
    bottom: 0.35em;
    height: 2px;
    background: var(--color-accent);
    box-shadow: var(--glow-soft) var(--color-accent);
}
.nav__link { position: relative; }

/* ============================================================
   2. Knöpfe – Leuchtkante statt Schlagschatten
   ============================================================ */
.btn--primary {
    box-shadow: var(--glow-medium) rgba(var(--color-primary-rgb), 0.45);
}
.btn--primary:hover {
    box-shadow: var(--glow-strong) rgba(var(--color-primary-rgb), 0.65);
    transform: translateY(-1px);
}
.btn--outline,
.btn--ghost {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.btn--outline:hover,
.btn--ghost:hover {
    background: transparent;
    color: var(--color-accent);
    box-shadow: var(--glow-soft) var(--color-accent), inset 0 0 12px rgba(0, 0, 0, 0.35);
}

/* Tastaturfokus muss auf dunklem Grund deutlich sichtbar bleiben. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    box-shadow: var(--glow-soft) var(--color-accent);
}

/* ============================================================
   3. Karten und Flächen – leuchtende Kante statt Schatten
   ============================================================ */
.strecke-card,
.news-card,
.price-card,
.ct-form-card,
.faq-item {
    border: 1px solid var(--color-border);
    box-shadow: none;
}
.strecke-card:hover,
.news-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--glow-soft) rgba(var(--accent-rgb, 192, 228, 252), 0.28);
    transform: translateY(-3px);
}
/* Der farbige Oberstrich der Karten wird zur Leuchtlinie.
 *
 * NICHT als box-shadow: der legt sich um die GANZE Karte und sammelt sich sichtbar in den beiden
 * oberen Ecken — dort wirkte er wie ein Fehler statt wie Licht. Stattdessen eine eigene Leuchtlinie
 * unter der Oberkante, seitlich eingerückt, sodass sie an den Ecken ausläuft. */
.strecke-card {
    border-top: 2px solid var(--color-accent);
    box-shadow: none;
    position: relative;
}
.strecke-card::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: -1px;
    height: 2px;
    background: var(--color-accent);
    filter: blur(7px);
    opacity: .8;
    pointer-events: none;
}
.strecke-card--full::before { display: none; }
.strecke-card--full {
    border-top-color: var(--color-text-light);
    box-shadow: none;
}

/* ============================================================
   3b. Foto-Kacheln und Foto-Band – Licht statt Farbfläche
   ============================================================
   Im hellen Design deckt ein kräftiger Marken-Verlauf das Foto fast vollständig ab; das trägt dort,
   weil das Foto nur Textur ist. Bei einem Nachtlauf ist das Foto die Aussage — die Lichtinstallationen
   sind der Grund, warum jemand mitläuft. Deshalb hier ein deutlich durchlässigerer Schleier, der von
   unten abdunkelt (damit die Schrift steht) statt von oben einzufärben. */
.cta-card--photo::before {
    background:
        linear-gradient(to top,
            color-mix(in srgb, var(--surface-page) 92%, transparent) 0%,
            color-mix(in srgb, var(--surface-page) 55%, transparent) 45%,
            color-mix(in srgb, var(--surface-page) 15%, transparent) 100%),
        linear-gradient(135deg,
            rgba(var(--color-primary-rgb), 0.20) 0%,
            rgba(var(--gradient-mid-rgb), 0.14) 60%,
            transparent 100%);
}
.cta-card--photo {
    border: 1px solid var(--color-border);
    min-height: 320px;
    /* Der Rahmen ist halbtransparent; ohne padding-box scheint das Foto darunter durch und
       blitzt als heller Saum an den Kanten hervor. */
    background-clip: padding-box;
}
.cta-card--photo:hover {
    border-color: var(--color-accent);
    box-shadow: var(--glow-soft) rgba(var(--accent-rgb, 192, 228, 252), 0.30);
    filter: none;
}
/* Die Grundregel färbt beim Hover den kompletten Streifen ein — bei einer Fotokachel ist dieser
   Streifen das ganze Overlay, die Kachel wurde also einfarbig. Stattdessen nur etwas aufhellen. */
.cta-card--photo:hover::before {
    background:
        linear-gradient(to top,
            color-mix(in srgb, var(--surface-page) 86%, transparent) 0%,
            color-mix(in srgb, var(--surface-page) 42%, transparent) 45%,
            color-mix(in srgb, var(--surface-page) 8%, transparent) 100%),
        linear-gradient(135deg,
            rgba(var(--color-primary-rgb), 0.26) 0%,
            rgba(var(--gradient-mid-rgb), 0.18) 60%,
            transparent 100%);
}
.cta-card--photo .cta-card__arrow {
    color: var(--color-accent);
    font-size: var(--text-2xl);
    line-height: 1;
}
.cta-card--photo .cta-card__icon { color: var(--color-accent); }
.cta-card--photo .cta-card__text { opacity: 1; color: var(--color-text); }

.photo-band__overlay,
.page-banner__overlay {
    background:
        linear-gradient(to top,
            color-mix(in srgb, var(--surface-page) 90%, transparent) 0%,
            color-mix(in srgb, var(--surface-page) 40%, transparent) 60%,
            color-mix(in srgb, var(--surface-page) 65%, transparent) 100%),
        linear-gradient(135deg,
            rgba(var(--color-primary-rgb), 0.18) 0%,
            rgba(var(--gradient-mid-rgb), 0.12) 60%,
            transparent 100%);
}
/* Ohne color-mix: der Marken-Schleier aus dem Branding-Layer, immer noch besser als E.ON-Rot. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .cta-card--photo::before { background: var(--overlay-card); }
    .photo-band__overlay     { background: var(--overlay-band); }
    .page-banner__overlay    { background: var(--overlay-banner); }
}

/* ============================================================
   4. Überschriften und Auszeichnungen
   ============================================================ */
/* Farbe tragen nur die Vorzeilen. Überschriften bleiben in der Textfarbe — sonst leuchtet die
   halbe Seite und die Hierarchie geht verloren (im Entwurf genauso gelöst). */
.section__kicker,
.hero__kicker,
.counter-section__kicker,
.startpaket-section .section__kicker {
    color: var(--color-accent-text);
}
/* ⚠️ Die Vorzeile des Seitenbanners steht NICHT auf einer Sektionsfläche, sondern auf einem
   FOTO. `--color-accent-text` ist die für Text abgedunkelte Akzentvariante und damit für hellen
   Grund gedacht — über einem dunklen Bild ist das die falsche Richtung. Mit dem gelben Akzent
   fiel das nicht auf (auch abgedunkelt noch hell); als RUNschnellweg am 13.08.2026 auf Rot
   umgestellt wurde, stand dort dunkelrot auf dunklem Nachtfoto und war praktisch unlesbar.
   Deshalb bleibt hier die gedämpfte weiße Grundregel aus pages.css. */
.section__title,
.strecken-section__title,
.startpaket__title,
.page-banner__title { color: var(--color-text); }
.hero__title,
.hero__slogan {
    text-shadow: 0 0 28px rgba(var(--accent-rgb, 192, 228, 252), 0.35),
                 0 0 70px rgba(var(--color-primary-rgb), 0.20);
}

/* Startzeiten und Countdown tragen die Signalfarbe – im Foto ist der Startbogen
   genau diese Farbe, deshalb steht sie hier für „Start". */
.be-countdown__value,
.schedule-item__time,
.strecke-card__meta .strecke-card__row:first-child dd {
    color: var(--color-highlight);
    text-shadow: var(--glow-soft) rgba(var(--highlight-rgb, 249, 249, 31), 0.40);
}

/* ============================================================
   5. Trennlinien und Sektionsübergänge
   ============================================================ */
.section--surface {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.facts-bar {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.facts-bar__value { color: var(--color-accent); }

/* Formularfelder: dunkle Fläche, leuchtender Rand im Fokus. */
input, select, textarea, .form-control {
    background: var(--surface-raised);
    border-color: var(--color-border);
    color: var(--color-text);
}
input:focus, select:focus, textarea:focus, .form-control:focus {
    border-color: var(--color-accent);
    box-shadow: var(--glow-soft) rgba(var(--accent-rgb, 192, 228, 252), 0.30);
}
::placeholder { color: var(--color-text-light); }

/* Partnerlogos sind meist für helle Hintergründe gebaut – auf Schwarz zusammengeführt. */
/* Partnerlogos kommen als fertige Dateien vom Kunden und haben meist einen deckend weißen
   Hintergrund. Eine Invertierung würde daraus weiße Klötze machen. Stattdessen bekommt jedes Logo
   eine eigene helle Kachel — das ist die übliche und ehrliche Lösung, wenn die Logoqualität
   gemischt ist, und funktioniert für transparente wie für deckende Dateien gleichermaßen. */
.sponsors-wall__item {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.sponsors-wall__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-soft) rgba(var(--accent-rgb, 192, 228, 252), 0.25);
}
/* WICHTIG: hier NUR die helle Kachel und die Mischung setzen, keine Maße.
   Das Raster in components.css arbeitet mit !important-Breiten und festen Höhen; ein zweites
   Layout darüber hebt beides gegenseitig auf. Die Größen bleiben deshalb dort, wo sie hingehören.
   Die Logodateien selbst sind bereits aufbereitet (Weißrand beschnitten, gleiche optische Fläche,
   einheitliche Leinwand) — damit sitzen sie auf jeder Kachel gleich. */
.sponsors-section .sponsors-wall__item {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.sponsors-section .sponsors-wall__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-soft) rgba(var(--accent-rgb, 192, 228, 252), 0.25);
}
/* Spezifität muss die Tier-Regeln in components.css erreichen, sonst bleibt die dortige
   Deckkraft von 0.85/0.90 stehen und die Logos wirken auf der hellen Kachel ausgewaschen. */
.sponsors-section .sponsors-wall__grid .sponsors-wall__item img,
.sponsors-section .sponsors-wall__item img {
    mix-blend-mode: multiply;
    opacity: 1;
}
.sponsors-section .sponsors-wall__item:hover img { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .strecke-card:hover,
    .news-card:hover,
    .btn--primary:hover { transform: none; }
}

/* ============================================================
   KOPFBEREICH ALS FLÄCHE (Branding-Schalter `header_style: flaeche`)
   ============================================================

   Standard bei dunklen Events ist der transparente Kopf über dem Hero-Foto (oben in dieser
   Datei). Für RUNschnellweg hat Christian am 13.08.2026 ausdrücklich das alte Seitenbild
   verlangt: eine farbige Leiste mit dem Originallogo darauf, so wie es auf runschnellweg.de
   steht. Das ist keine Geschmacksfrage, sondern eine Voraussetzung — das Originallogo trägt ein
   SCHWARZES „RUN" und ist auf einem dunklen Foto unlesbar. Erst die Fläche macht es möglich.

   Der Hero rückt dafür unter den Kopf, statt darunter durchzulaufen. Ohne das läge die Leiste
   über dem Foto und schnitte es an — genau der Zustand, den die Fläche vermeiden soll. */

body.be-kopf-flaeche .site-header {
    background: var(--header-flaeche, var(--color-primary));
    border-bottom-color: transparent;
}
/* Der Lesbarkeits-Verlauf ist für eine Fläche sinnlos und würde sie nur eintrüben. */
body.be-kopf-flaeche .site-header::after { content: none; }
/* Beim Scrollen bleibt die Fläche, nur der Schatten kommt dazu. */
body.be-kopf-flaeche .site-header.is-scrolled {
    background: var(--header-flaeche, var(--color-primary));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Der Hero beginnt UNTER der Leiste. `min-height` wird um dieselbe Höhe verringert, sonst
   ragt die Startseite genau um die Kopfhöhe über den Bildschirm hinaus. */
body.be-kopf-flaeche .hero {
    margin-top: var(--header-height);
    min-height: calc(100svh - var(--header-height));
}
/* `.hero__content` hält oben Platz für den überlagernden Kopf frei. Liegt der Kopf nicht mehr
   darüber, ist dieser Platz doppelt vergeben und der Inhalt sitzt zu tief. */
body.be-kopf-flaeche .hero__content { padding-top: var(--space-12); }
/* Dasselbe für den Seitenbanner der Unterseiten: Er hält den Platz über sein eigenes
   `padding-block`, nicht über ein inneres Element. */
body.be-kopf-flaeche .page-banner {
    margin-top: var(--header-height);
    padding-block: var(--space-10) var(--space-12);
}

/* Menüschrift auf der Kopffläche: nicht die gedämpfte Fließtextfarbe, sondern die Farbe, die
   AUF DIESER FLÄCHE trägt. neon.css setzt `.nav__link { color: var(--color-text) }` (auf runs
   #E8EAED); auf einer farbigen Leiste kostet das messbar Kontrast: gemessen 3,57:1 statt der
   nötigen 4,5:1 für 18px.

   ⚠️ Hier stand bis 13.08.2026 fest `--color-white`, weil die erste Kopffläche rot war
   (runs, 4,96:1). Beim Mülheimer Firmenlauf ist die Leiste WEISS — damit stand weiße Schrift
   auf weißem Grund, gemessene 1,00:1, das Menü war unsichtbar. Gefunden hat es der Prüflauf,
   nicht der Blick auf die Seite. `--header-flaeche-text` wird in inc/branding.php aus der
   Leistenfarbe abgeleitet (Weiß oder Fast-Schwarz, je nach Kontrast); der Rückfall auf Weiß
   hält das Verhalten für Sites ohne gesetzte Leistenfarbe unverändert.

   Die Regel steht NACH dem 1024px-Block oben und hat mit `body.be-kopf-flaeche` eine Klasse
   mehr — sie gewinnt also, ohne dass jemand an der Reihenfolge drehen muss. */
@media (min-width: 1024px) {
    body.be-kopf-flaeche .site-header .nav__link { color: var(--header-flaeche-text, var(--color-white)); }
}