/*
 * main.css – Design-System, Reset, Basis-Typographie
 * Mobile First – Breakpoints: 480 / 768 / 1024 / 1440px
 */

/* ============================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   E.ON Firmenlauf Essen – Offizielles Marken-Design-System
   ============================================================ */
:root {
    /* --- E.ON Primärrot --- */
    --color-primary:       #E2001A;   /* E.ON Corporate Red */
    --color-primary-dark:  #B5000F;   /* Hover / Active */
    --color-primary-light: #FF1A2E;   /* Light Tint */
    --color-primary-rgb:   226, 0, 26; /* für rgba() */
    --color-dark-rgb:       75, 0, 40; /* dunkles Verlaufsende */
    --gradient-mid-rgb:    155, 16, 96; /* mittlere Verlaufsstufe */

    /* --- E.ON Gradienten (Kernidentität) --- */
    --gradient-eon:        linear-gradient(135deg, #E2001A 0%, #9B1060 55%, #4B0028 100%);
    --gradient-eon-dark:   linear-gradient(160deg, #1A0005 0%, #3D001A 45%, #1A0005 100%);
    --gradient-eon-image:  linear-gradient(135deg, rgba(226,0,26,0.80) 0%, rgba(75,0,40,0.65) 100%);
    --gradient-eon-subtle: linear-gradient(135deg, rgba(226,0,26,0.08) 0%, rgba(155,16,96,0.05) 100%);

    /* --- Dunkel-Palette (Header, Footer, dunkle Sektionen) --- */
    --color-dark:    #1A0000;   /* Sehr dunkles Rot-Schwarz (Footer) */
    --color-dark-2:  #2A0000;   /* Etwas heller */
    --color-dark-3:  #3C0000;
    --color-dark-4:  #4A0505;

    /* --- Hell-Palette --- */
    --color-surface:    #F5F5F5;   /* Hellgrau (Chips, Tabellenzeilen, Scrollbar) */
    --color-surface-2:  #EBEBEB;
    --color-white:      #FFFFFF;   /* NUR als Farbe, nie als Fläche — siehe unten */

    /* --- Flächen (Theme-Schicht) ---
       Bewusst getrennt von --color-white: dieselbe Variable hatte bisher zwei Rollen, sie war
       Textfarbe auf farbigem Grund UND Hintergrund von Karten, Header und Footer. Beim dunklen
       Design muss aber nur die zweite Rolle kippen — weiße Schrift auf einem roten Button bleibt
       weiß. Deshalb gibt es für Flächen eigene Token, die der Branding-Layer umschalten kann.
       Die Werte hier sind exakt die bisherigen, das helle Design ändert sich dadurch nicht. */
    --surface-page:   #FFFFFF;   /* Grundfläche der Seite, Header, Footer */
    --surface-raised: #FFFFFF;   /* Karten, Panels, Formularfelder */
    --surface-sunken: #f8f5f2;   /* alternierende Sektionen, FAQ-Zeilen */
    --surface-success: #edfaed;  /* weiche Tönung Erfolgsmeldung */
    --surface-danger:  #fff0f0;  /* weiche Tönung Fehlermeldung */
    --border-danger:   #ffc1c1;
    --border-header:   rgba(0, 0, 0, 0.08);  /* Trennlinie unter dem Kopfbereich */
    --tint-hover:      rgba(0, 0, 0, 0.05);  /* leichte Einfärbung bei Hover */
    --tint-chip:       rgba(0, 0, 0, 0.06);  /* neutraler Chip-Hintergrund */

    /* Hero: Grundfläche hinter dem Foto und der Marken-Overlay darüber.
       Werte identisch zum bisherigen E.ON-Hero, pro Event überschreibbar. */
    --hero-ground:       #0d0005;
    --hero-overlay:      linear-gradient(135deg,
                            rgba(226, 0, 26, 0.80) 0%,
                            rgba(155, 16, 96, 0.58) 50%,
                            rgba(75, 0, 40, 0.32) 80%,
                            rgba(75, 0, 40, 0.05) 100%);
    --hero-overlay-foot: rgba(20, 0, 5, 0.55);
    --hero-placeholder:  linear-gradient(160deg, #2a0005 0%, #1a0002 50%, #0d0005 100%);
    /* Marken-Schleier über Fotos: Kachelraster und Foto-Band. Zwei getrennte Token, weil beide
       unterschiedlich stark decken. Werte identisch zum bisherigen E.ON-Verlauf. */
    --overlay-card: linear-gradient(135deg,
                        rgba(226, 0, 26, 0.88) 0%,
                        rgba(155, 16, 96, 0.75) 55%,
                        rgba(75, 0, 40, 0.65) 100%);
    --overlay-band: linear-gradient(135deg,
                        rgba(226, 0, 26, 0.88) 0%,
                        rgba(155, 16, 96, 0.72) 50%,
                        rgba(75, 0, 40, 0.55) 100%);
    /* Kopfbanner der Unterseiten */
    --overlay-banner: linear-gradient(135deg,
                        rgba(226, 0, 26, 0.85) 0%,
                        rgba(155, 16, 96, 0.70) 50%,
                        rgba(75, 0, 40, 0.55) 100%);

    /* --- Akzentfarben --- */
    --color-accent:      #E2001A;   /* Primärrot auch als Akzent */
    --color-accent-dark: #B5000F;
    /* Signalfarbe für Startzeiten und Countdown. Standard = Akzentfarbe, damit sich ohne
       gepflegten Wert nichts ändert; pro Event über den Branding-Layer setzbar. */
    --color-highlight:   var(--color-accent);
    /* Marken-Farben in TEXT-Rollen (Vorzeilen, Links). Der Branding-Layer zieht sie bei
       Bedarf nach, bis der Kontrast auf der Grundfläche reicht. */
    --color-primary-text: var(--color-primary);
    --color-accent-text:  var(--color-accent);
    --color-success:     #2E7D32;
    --color-warning:     #F57F17;
    --color-danger:      #E2001A;
    --color-info:        #1565C0;

    /* --- Text --- */
    --color-text:        #333333;
    --color-text-muted:  #666666;
    --color-text-light:  #999999;
    --color-text-white:  #FFFFFF;
    --color-text-on-primary: #FFFFFF;

    /* --- Rahmen & Trenner --- */
    --color-border:       rgba(0, 0, 0, 0.10);
    --color-border-dark:  rgba(255, 255, 255, 0.15);

    /* --- E.ON Typographie --- */
    --font-heading: 'EON BrixSans', 'Arial Black', Arial, sans-serif;
    --font-display: 'EON Screen', 'EON BrixSans', 'Arial Black', sans-serif;
    --font-body:    'EON BrixSans', Arial, Helvetica, sans-serif;
    --font-mono:    'Courier New', Courier, monospace;

    /* --- E.ON Typografie-Skala (aus brand.eon.com Screenshots) ---
       Body: 18px, Headlines progressiv größer, Display sehr groß */
    --text-xs:   0.8125rem;  /* 13px – Kicker, Tags, Metadaten */
    --text-sm:   1rem;       /* 16px – Karten, Excerpts, Buttons (Untergrenze für Fließtext) */
    --text-base: 1.125rem;   /* 18px – Standard Body (E.ON-Vorgabe) */
    --text-lg:   1.25rem;    /* 20px – Lead-Text, große Body-Passagen */
    --text-xl:   1.375rem;   /* 22px – H6, Card-Titel klein */
    --text-2xl:  1.75rem;    /* 28px – H5, Subheadlines */
    /* Die Untergrenzen galten fuer JEDE Breite und waren auf einem 360-px-Geraet zu wuchtig:
       „Vielen Dank für die Unterstützung" fuellte bei 36 px die Zeile bis auf den letzten
       Punkt. Die Obergrenzen bleiben unveraendert, am Desktop aendert sich also nichts. */
    --text-3xl:  clamp(1.625rem, 3.5vw, 2.5rem);  /* 26–40px – H4, Section-Subhead */
    --text-4xl:  clamp(1.875rem, 4vw,   3.5rem);  /* 30–56px – H3, Section-Headlines */
    --text-5xl:  clamp(2.25rem,  5vw,   4.5rem);  /* 36–72px – H2, Page-Headlines */
    --text-6xl:  clamp(2.75rem,  6vw,   6rem);    /* 44–96px – H1, Hero-Headline */
    --text-hero: clamp(3.5rem,  8vw,   8rem);     /* 56–128px – Display (EON Screen) */

    /* Auf schmalen Geraeten sind diese Groessen zu wuchtig. Die grossen Stufen (3xl aufwaerts)
       regeln sich ueber ihr clamp() selbst, die FESTEN Stufen darunter taten es nicht: 19 px
       Fliesstext, 18 px in Knoepfen und 22 px in der Faktenleiste standen auf dem Handy genauso
       da wie auf dem Desktop. Sichtbare Folgen waren ein zu breiter Anmelde-Knopf und eine
       Faktenleiste, die ihre Woerter mitten durchbrach. Werte unten in der Media Query. */

    /* Semantische Sektions-Überschriften (Subpage-Kontext, nicht Display-Sized)
       Nur diese drei Werte in page-Templates und pages.css verwenden! */
    --section-h2-xl: clamp(2rem,    3.5vw, 3rem);     /* Primäre Sektions-Headline */
    --section-h2:    clamp(1.625rem, 3vw,  2.5rem);   /* Standard Sektions-Headline */
    --section-h3:    clamp(1.25rem,  2vw,  1.875rem); /* Sub-Headline in Sektionen */

    /* Zeilenhöhen (E.ON: Headlines 1.05–1.15, Body 1.6–1.7) */
    --leading-tight:  1.05;
    --leading-snug:   1.2;
    --leading-normal: 1.65;
    --leading-loose:  1.8;

    /* Buchstabenabstand */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide:  0.05em;
    --tracking-wider: 0.10em;
    --tracking-widest: 0.20em;

    /* --- Abstände (Spacing Scale) --- */
    --space-1:   0.25rem;   /* 4px */
    --space-2:   0.5rem;    /* 8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-14:  3.5rem;    /* 56px — fehlte, aber in pages.css genutzt (clamp-gap) */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */
    --space-24:  6rem;      /* 96px */
    --space-32:  8rem;      /* 128px */

    /* Semantische Abstände (E.ON: großzügig, 80–120px zwischen Sektionen) */
    --section-gap:    clamp(4rem, 10vw, 8rem);
    --section-gap-sm: clamp(2.5rem, 5vw, 5rem);

    /* --- Rundungen --- */
    --radius-sm:   4px;
    --radius-md:   4px;
    --radius-lg:   6px;
    --radius-xl:   8px;
    --radius-2xl:  12px;
    --radius-pill: 9999px;

    /* --- Schatten --- */
    --shadow-sm:       0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:       0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg:       0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.05);
    --shadow-xl:       0 20px 25px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.04);
    --shadow-card:     0 4px 24px rgba(0,0,0,0.12);
    --shadow-elevated: 0 12px 48px rgba(0,0,0,0.20);
    --shadow-primary:  0 4px 16px rgba(var(--color-primary-rgb), 0.40);

    /* --- Übergänge --- */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- Z-Index-Skala --- */
    --z-below:    -1;
    --z-base:      0;
    --z-above:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;

    /* --- Layout --- */
    --container-max:   1536px;
    --container-pad:   clamp(1rem, 5vw, 3rem);
    --header-height:   120px;
    /* Beim Scrollen schrumpft der Kopfbereich, damit ein großes Event-Logo im Ruhezustand
       Platz bekommt, ohne dauerhaft den halben Bildschirm zu belegen. */
    --header-height-scrolled: calc(var(--header-height) * 0.62);
    /* Logo-Größe im Kopfbereich. Die Standardwerte lassen das flache E.ON-Querformat
       (350x105) unverändert; kompaktere Event-Logos werden über den Branding-Layer
       auf eine passende Höhe gesetzt, statt auf eine feste Breite gezwungen zu werden. */
    --logo-max-width:  350px;
    --logo-max-height: var(--header-height);
    /* Höhe des Logos im gescrollten Kopf. Bisher fest 62 % der Logohöhe, was bei einem
       inhaltsreichen Logo (Wortmarke + Partner in einer Datei) unlesbar klein wurde. */
    --logo-height-scrolled: calc(var(--logo-max-height) * 0.62);

    /* Hero-Schriftzug. Werte identisch zum bisherigen E.ON-Hero; der Branding-Layer setzt sie je
       Schriftsatz neu. Grund: Versalien tragen nicht jede Schrift gleich gut — eine Display-Schrift
       wie EON Screen lebt davon, eine Grotesk wie Space Grotesk verliert dabei ihren Charakter. */
    --hero-title-size:      clamp(3rem, 7vw, 7rem);
    --hero-title-weight:    400;
    --hero-title-tracking:  -0.03em;
    --hero-title-transform: uppercase;
}

/* ============================================================
   2. RESET & BOX MODEL
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background-color: var(--surface-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Medien */
img, video, iframe, svg {
    max-width: 100%;
    display: block;
}
img { height: auto; }

/* Listen (Reset für UI-Listen, nicht für Fließtext) */
ul, ol { list-style: none; }

/* Links */
a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-dark); }
a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Buttons & Inputs: eigene Schrift erben */
button, input, select, textarea {
    font: inherit;
}

/* ============================================================
   3. TYPOGRAPHIE BASISSTILE
   ============================================================ */
/* Lange deutsche Komposita ("Unterstützung", "Veranstaltungsort") stossen auf schmalen
   Bildschirmen an den Rand. `hyphens` trennt sie sauber — das <html> traegt lang="de", die
   Silbentrennung greift also. `break-word` faengt den Rest ab. */
h1, h2, h3, h4, h5, h6 {
    hyphens: auto;
    overflow-wrap: break-word;
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: inherit;
}

/* Dunkle/Gradient-Sektionen: Text weiß (Kinder erben via color: inherit) */
.section--dark,
.countdown-section,
.photo-band,
.footer__main,
.footer__quicklinks {
    color: var(--color-text-white);
}
.section--dark p,
.countdown-section p,
.photo-band p {
    color: rgba(255, 255, 255, 0.82);
}

/* E.ON Heading-Hierarchie: progressiv, bold, viel Luft */
h1 { font-size: var(--text-6xl); font-weight: 900; }
h2 { font-size: var(--text-5xl); font-weight: 800; }
h3 { font-size: var(--text-4xl); font-weight: 800; }
h4 { font-size: var(--text-3xl); font-weight: 700; }
h5 { font-size: var(--text-2xl); font-weight: 700; }
h6 { font-size: var(--text-xl);  font-weight: 600; }

/* ⚠️ Hier stand `font-size: 1.375rem` als FESTE Zahl (22 px). Damit lief jeder Absatz der
   gesamten Website am Variablensystem vorbei: die Stufe `--text-base` war wirkungslos, und eine
   mobile Verkleinerung konnte gar nicht greifen, egal wo man sie eintrug. Genau das war die
   Ursache für „die Schrift ist überall zu groß" (12.08.2026). Feste Schriftgrößen gehören NUR
   an Icons — Text immer über die Stufen. */
p {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: inherit;
}

p + p { margin-top: var(--space-5); }

strong, b { font-weight: 700; }
em, i     { font-style: italic; }
small     { font-size: var(--text-sm); }

/* Prosa-Kontext (page.php, Editor-Output)
   Überschreibt die globalen Display-Heading-Größen für Dokument-/Fließtext-Seiten */
.prose {
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: var(--leading-loose);
}

/* Heading-Hierarchie im Prose-Kontext (viel kleiner als global) */
.prose h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 800;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
    padding-left: var(--space-4);
    border-left: 4px solid var(--color-primary);
}
.prose h3 {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: var(--leading-snug);
    color: var(--color-text);
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
}
.prose h4 {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
}
.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }

.prose p { margin-bottom: var(--space-4); }

/* Listen: custom roter Bullet statt disc */
.prose ul, .prose ol { margin-bottom: var(--space-5); padding-left: 0; }
.prose ul { list-style: none; }
.prose ul > li {
    position: relative;
    padding-left: var(--space-6);
    margin-bottom: var(--space-3);
}
.prose ul > li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}
.prose ol { list-style: decimal; padding-left: var(--space-6); }
.prose ol > li { margin-bottom: var(--space-3); }

/* Links, Inline-Elemente */
.prose a { color: var(--color-primary); font-weight: 500; text-underline-offset: 3px; }
.prose a:hover { color: var(--color-primary-dark); }
.prose strong, .prose b { font-weight: 700; color: var(--color-text); }
.prose em { font-size: var(--text-xs); color: var(--color-text-muted); font-style: normal; }

/* Uppercase Utility für Headings */
.text-uppercase { text-transform: uppercase; letter-spacing: var(--tracking-wider); }

/* ============================================================
   E.ON SECTION BACKGROUNDS (aus brand.eon.com)
   Weiß dominant, Surface für Wechsel, Gradient für CTAs/Footer
   ============================================================ */

/* Standard: Weiß */
.section--white    { background: var(--surface-page); color: var(--color-text); }

/* Hellbeige: für alternierenden Rhythmus */
.section--surface  { background: var(--surface-sunken); color: var(--color-text); }

/* E.ON Primär-Gradient für alle branded Sektionen */
.section--dark     { background: var(--gradient-eon); color: var(--color-white); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6 { color: var(--color-white); }
.section--dark p   { color: rgba(255,255,255,0.80); }

/* Primary: E.ON Rot-Gradient (Facts-Bar, starke CTAs) */
.section--primary  { background: var(--gradient-eon); color: var(--color-white); }
.section--primary h1, .section--primary h2, .section--primary h3,
.section--primary h4, .section--primary h5, .section--primary h6 { color: var(--color-white); }
.section--primary p { color: rgba(255,255,255,0.85); }

/* Text-Farben explizit erzwingen bei dark/gradient Backgrounds */
.bg-dark, .gradient-eon-dark, .footer__main, .footer__quicklinks,
.countdown-section { color: var(--color-white); }

/* ============================================================
   4. BARRIEREFREIHEIT
   ============================================================ */
.screen-reader-text,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.screen-reader-text:focus {
    background: var(--surface-raised);
    color: var(--color-text);
    padding: var(--space-3) var(--space-6);
    position: fixed;
    top: var(--space-4);
    left: var(--space-4);
    z-index: var(--z-toast);
    font-size: var(--text-base);
    clip: auto;
    width: auto;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated);
    text-decoration: none;
}

/* Fokus-Ring global */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* Reduzierte Bewegung respektieren */
/* ============================================================
   TYPOGRAFIE MOBIL
   Nur die festen Stufen. Der Fliesstext bleibt mit 17px deutlich ueber der Lesbarkeitsgrenze,
   die Reduktion liegt je nach Stufe bei 11 bis 20 Prozent.
   ============================================================ */
@media (max-width: 640px) {
    :root {
        --text-sm:   0.9375rem;   /* 16 -> 15px  (Karten, Excerpts) */
        --text-base: 1rem;        /* 18 -> 16px  (Fließtext, gängige Untergrenze) */
        --text-lg:   1.125rem;    /* 20 -> 18px  (Lead, Faktenleisten-Wert) */
        --text-xl:   1.25rem;     /* 22 -> 20px */
        --text-2xl:  1.5rem;      /* 28 -> 24px */
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   5. HILFSEIGENSCHAFTEN (Utilities)
   ============================================================ */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.font-heading   { font-family: var(--font-heading); }
.font-mono      { font-family: var(--font-mono); }
.text-primary   { color: var(--color-primary); }
.text-accent    { color: var(--color-accent); }
.text-muted     { color: var(--color-text-muted); }
.text-white     { color: var(--color-text-white); }
.bg-dark        { background-color: var(--color-dark); color: var(--color-text-white); }
.bg-dark-2      { background-color: var(--color-dark-2); color: var(--color-text-white); }
.bg-surface     { background-color: var(--color-surface); }
.bg-primary     { background-color: var(--color-primary); color: var(--color-text-white); }

/* Scrollbar anpassen (Chrome/Edge) */
::-webkit-scrollbar        { width: 8px; }
::-webkit-scrollbar-track  { background: var(--color-surface); }
::-webkit-scrollbar-thumb  { background: var(--color-primary); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dark); }

/* Textauswahl */
::selection {
    background: var(--color-primary);
    color: var(--color-white);
}