/* ─────────────────────────────────────────────────────────────
   thomien.de · Hauptstylesheet
   Royales Preußisch-Blau / Gold mit heraldischer Typografie.
   Saison-Overlays unter season-*.css, Intensität unter intensity-*.css.
   ───────────────────────────────────────────────────────────── */

/* ───────────────────────────────────── Schriften (lokal) */

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/cormorant-garamond/cormorant-garamond-v21-latin-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/cormorant-garamond/cormorant-garamond-v21-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/cormorant-garamond/cormorant-garamond-v21-latin-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/cormorant-garamond/cormorant-garamond-v21-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/cormorant-garamond/cormorant-garamond-v21-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/cormorant-garamond/cormorant-garamond-v21-latin-300italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/cormorant-garamond/cormorant-garamond-v21-latin-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/cormorant-garamond/cormorant-garamond-v21-latin-500italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/cormorant-garamond/cormorant-garamond-v21-latin-600italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/cormorant-garamond/cormorant-garamond-v21-latin-700italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond Display';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/cormorant-garamond/cormorant-garamond-v21-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/cormorant-garamond/cormorant-garamond-v21-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/cinzel/cinzel-v26-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/cinzel/cinzel-v26-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/cinzel/cinzel-v26-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/lora/lora-v37-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/lora/lora-v37-latin-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/lora/lora-v37-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/lora/lora-v37-latin-700.woff2') format('woff2');
}

/* ───────────────────────────────────── Design Tokens */

:root {
    /* Farben */
    --preussisch-blau:       #003153;
    --preussisch-blau-tief:  #00253f;
    --preussisch-blau-hoch:  #0a3d62;
    --preussisch-blau-licht: #1a5687;

    --gold-1: #b8893a;
    --gold-2: #e8c878;
    --gold-3: #f4dc99;
    --gold-4: #c49a45;
    --gold-glow: rgba(232, 200, 120, 0.45);

    --ink:      #f3ead1;
    --ink-warm: #fff3d5;
    --ink-mute: rgba(243, 234, 209, 0.55);
    --ink-soft: rgba(243, 234, 209, 0.78);

    --line:      rgba(232, 200, 120, 0.28);
    --line-hot:  rgba(232, 200, 120, 0.55);
    --shadow:    rgba(0, 0, 0, 0.4);

    /* Typografie */
    --font-display: 'Cormorant Garamond Display', 'Cormorant Garamond', 'Times New Roman', serif;
    --font-serif:   'Lora', 'Cormorant Garamond', 'Times New Roman', serif;
    --font-caps:    'Cinzel', 'Cormorant Garamond', serif;

    /* Layout */
    --measure:     56rem;
    --measure-narrow: 42rem;
    /* Sticky-Bar-Höhen (Header + Footer): padding 0.55rem*2 + min-height 2.4rem */
    --topbar-h:    3.5rem;
    --bottombar-h: 3.5rem;
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2.25rem;
    --space-xl:  3.5rem;
    --space-2xl: 5rem;
    --space-3xl: 7rem;

    --radius: 2px;

    /* Transitions */
    --t-fast:  150ms ease;
    --t-mid:   320ms cubic-bezier(.2,.6,.2,1);
    --t-slow:  720ms cubic-bezier(.2,.6,.2,1);

    /* Saisonale Akzente – werden von season-*.css überschrieben */
    --season-accent: var(--gold-2);
    --season-mist:   rgba(232, 200, 120, 0.05);
}

/* ───────────────────────────────────── Reset */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: var(--preussisch-blau);
    color: var(--ink);
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.55;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

img, svg { max-width: 100%; display: block; }

a { color: var(--gold-2); text-decoration: none; }
a:hover, a:focus { color: var(--gold-3); }
a:focus-visible {
    outline: 2px solid var(--gold-3);
    outline-offset: 3px;
    border-radius: var(--radius);
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

ul, ol { list-style: none; }

::selection { background: var(--gold-2); color: var(--preussisch-blau-tief); }

/* Dekoratives nicht markierbar – Body-Text und Kontaktdaten bleiben markierbar */
.eyebrow, .display, .role, .rule, .section__heading,
.btn,
.primary-nav__link, .nav-toggle,
.site-footer__copy, .site-footer__links a,
.wappen-bg-wrap {
    -webkit-user-select: none;
    user-select: none;
}

/* Home: alle Texte komplett nicht markierbar (Hero-Intro, Construction-
   Kontaktblock etc.). Links bleiben klickbar, nur Text kann nicht selektiert
   und kopiert werden. */
.page-home .main {
    -webkit-user-select: none;
    user-select: none;
}

/* Impressum + Datenschutz: rechtlicher Pflichttext, komplett nicht markierbar
   und im Blocksatz mit Silbentrennung gesetzt. lang="de" auf <html> aktiviert
   die Trennmuster im Browser. */
.page-imprint .main,
.page-privacy .main {
    -webkit-user-select: none;
    user-select: none;
}
/* Blocksatz + Silbentrennung für längere Lauftext-Sektionen.
   Auf Impressum/Datenschutz wegen Rechtssicherheit, auf Seminare wegen
   einheitlicher Optik in der langen Themenliste, auf Software für die
   Programmbeschreibungen. */
.page-imprint div.section__body,
.page-privacy div.section__body,
.page-seminars div.section__body,
.page-software div.section__body {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
}
/* Hero auf Impressum/Datenschutz: keine lange Trennlinie unter der Headline,
   die kurze .rule-Goldlinie übernimmt diese Rolle (über 'rule' => true in
   der Config aktiviert). Padding-bottom reduziert, weil ohne Border-Linie
   der Standard-Abstand zur ersten Section optisch zu groß wirkt. */
.page-imprint .hero--page,
.page-privacy .hero--page {
    padding-bottom: 1rem;
    border-bottom: 0;
}
/* Pflichtangaben-Blöcke (Diensteanbieter, Kontakt, Verantwortlich, USt-IdNr):
   Sektion bleibt in der zentrierten Schmalspalte – nur das Textinnere
   wird linksbündig statt Blocksatz (passt zum Datencharakter dieser kurzen
   Adress-/Kontakt- und Datenangaben). */
.section--legal-flush div.section__body {
    text-align: left;
    -webkit-hyphens: manual;
    hyphens: manual;
}
/* Stand-Block (Datumsstempel) am Fuß: Heading linksbündig wie alle anderen
   Sektionen, nur das Datum darunter zentriert. */
.section--stand .section__body {
    text-align: center;
}

/* ───────────────────────────────────── Skip-Link */

.skip-link {
    position: fixed;
    top: -100px;
    left: 1rem;
    z-index: 200;
    padding: 0.6rem 1rem;
    background: var(--gold-2);
    color: var(--preussisch-blau-tief);
    font-family: var(--font-caps);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.78rem;
    transition: top var(--t-fast);
}
.skip-link:focus { top: 1rem; color: var(--preussisch-blau-tief); }

/* ───────────────────────────────────── Hintergrund-Layer */

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 38%,
                var(--preussisch-blau-hoch) 0%,
                var(--preussisch-blau)      55%,
                var(--preussisch-blau-tief) 100%);
    z-index: 0;
    pointer-events: none;
}

.bg-noise {
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.95 0 0 0 0 0.85 0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.5;
}

.bg-vignette {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 50%,
                transparent 0%,
                transparent 55%,
                rgba(0,0,0,0.55) 100%);
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* Wappen-Watermark – aus templates/coa.svg.inc (per readfile in layout.php)
   Größe = min(verfügbare Höhe, Cap), jeweils minus Edge oben/unten.
   Damit bleibt der vertikale Abstand zu den Bars konstant (= --wappen-edge);
   horizontal darf das Wappen den Viewport überlappen, margin:auto zentriert
   es symmetrisch (gleicher Überhang links/rechts). Der Cap verhindert, dass
   es auf großen Desktops bildschirmfüllend wird.
   inset + margin:auto zentriert im freien Raum zwischen Top- und Bottom-Bar;
   --topbar-h wird im Wartungsmodus 0 (kein Header im DOM). */
.wappen-bg-wrap {
    --wappen-edge: 1.5rem;
    --wappen-cap:  800px;
    --wappen-size: min(
        calc(100dvh - var(--topbar-h) - var(--bottombar-h) - 2 * var(--wappen-edge)),
        var(--wappen-cap)
    );
    position: fixed;
    inset: var(--topbar-h) 0 var(--bottombar-h) 0;
    margin: auto;
    width: var(--wappen-size);
    height: var(--wappen-size);
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Initial unsichtbar; JS setzt nach erstem writeBars() .wappen-ready
       auf <html>, dann sanft einblenden. Verhindert sichtbares „Aufbauen"
       des großen Inline-SVGs beim Page-Load. */
    opacity: 0;
    transition: opacity 220ms ease-out;
}
html.wappen-ready .wappen-bg-wrap { opacity: 1; }
/* Wartungsmodus: keine Top-Nav → Wappen darf größer werden. */
.is-construction {
    --topbar-h: 0px;
}
.is-construction .wappen-bg-wrap {
    --wappen-cap: 940px;
}
.wappen-bg { width: 100%; height: 100%; opacity: 0.18; transition: opacity var(--t-slow); }
.wappen-dark  { fill: #c9a76a; }
.wappen-light { fill: var(--preussisch-blau); }

/* Saison-Tönung (statisch, dynamische Partikel laufen über das Canvas) */
.bg-season {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.bg-particles {
    position: fixed;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* ───────────────────────────────────── Page-Shell */

.page-shell {
    position: relative;
    z-index: 3;
    height: 100vh;       /* Fallback */
    height: 100dvh;      /* Hartes Viewport-Limit, damit der Body nie scrollt */
    display: flex;
    flex-direction: column;
    /* Scroll passiert hier (am Viewport-Rand), nicht im zentrierten Main →
       Scrollbalken sitzt rechts am Bildschirmrand statt mitten im Bild.
       Header/Footer kleben via position: sticky an den Rändern dieser Box. */
    overflow-y: auto;
}

/* ───────────────────────────────────── Header / Top-Nav */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    /* Deckende Body-Blau-Schicht hinter dem Verlauf: Pixel-Farbe der Bar bleibt
       identisch (Body-Bg war ohnehin die Durchscheinfarbe), aber Partikel,
       Wappen und Saison-Layer werden in der Bar-Fläche jetzt abgeschirmt. */
    background:
        linear-gradient(180deg, rgba(0,37,63,0.55) 0%, rgba(0,37,63,0.25) 80%, rgba(0,37,63,0) 100%),
        var(--preussisch-blau);
    border-bottom: 1px solid rgba(232, 200, 120, 0.16);
    transition: background var(--t-mid), border-color var(--t-mid);
}

.site-header__inner {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0.55rem clamp(1rem, 4vw, 2.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 2.4rem;
}

/* Mobile-Toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 0.4rem;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    margin-right: auto;
}
.nav-toggle__bar {
    display: block;
    width: 1.4rem;
    height: 1px;
    background: var(--gold-2);
    transition: transform var(--t-mid), opacity var(--t-fast), width var(--t-fast);
    transform-origin: center;
}
.nav-toggle__label { position: absolute; left: -9999px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Desktop-Nav (schmal) */
.primary-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 2.6vw, 2rem);
}
/* „Doppelter Abstand": ein zusätzlicher Gap-Block links vom Eintrag, sodass
   der Zwischenraum zum Vorgänger optisch verdoppelt wird. Wird über das
   nav-Item-Flag 'gap' => 'double' in config/main.php aktiviert. */
.primary-nav__item--gap-double { margin-left: clamp(0.9rem, 2.6vw, 2rem); }
.primary-nav__link {
    display: inline-block;
    padding: 0.25rem 0;
    text-decoration: none;
    position: relative;
    font-family: var(--font-caps);
    font-weight: 400;
    font-size: 0.68rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-soft);
    transition: color var(--t-fast);
}
/* Hover-Underline für Header-Nav und Footer-Links (gleicher Gradient,
   gleicher Slide-In-Effekt). Die Hover-States bleiben jeweils lokal, weil
   sich die Trigger-Logik unterscheidet (Nav nutzt zusätzlich .is-active). */
.primary-nav__link::after,
.site-footer__links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--t-mid);
}
.primary-nav__link:hover,
.primary-nav__link:focus { color: var(--gold-2); }
.primary-nav__link:hover::after,
.primary-nav__link:focus::after,
.primary-nav__item.is-active .primary-nav__link::after { transform: scaleX(1); }
.primary-nav__item.is-active .primary-nav__link { color: var(--gold-2); }

/* ───────────────────────────────────── Main-Bereich */

.main {
    flex: 1;
    width: 100%;
    max-width: var(--measure);
    margin: 0 auto;
    padding: clamp(2rem, 6vh, 4rem) clamp(1rem, 4vw, 2.5rem);
    display: flex;
    flex-direction: column;
    /* Inhalt vertikal zentriert, wenn er zwischen die Bars passt – sonst
       Fallback auf flex-start (verhindert, dass der Anfang oben geclippt wird).
       Bei Überlauf wächst das Main natürlich, und die page-shell scrollt. */
    justify-content: safe center;
}

.main--home {
    max-width: none;
    padding: 0;
    justify-content: stretch;       /* Hero füllt das Main per flex: 1 */
}

/* ───────────────────────────────────── Hero (Home) */

.hero--home {
    /* füllt das Main, das wiederum die Höhe zwischen Top- und Bottom-Bar einnimmt */
    flex: 1;
    /* CTA-Reservierung: Button hängt absolut bei bottom = --cta-pad; das
       padding-bottom hier = Button-Höhe + 2 × --cta-pad sorgt dafür, dass
       der Text-Block oberhalb des Buttons immer mind. --cta-pad Schutzzone
       hat (= gleicher Abstand wie zwischen Button und Hero-Unterkante). */
    --cta-h:   3.2rem;
    --cta-pad: clamp(1rem, 3vh, 2.4rem);
    padding: var(--cta-pad) clamp(1rem, 5vw, 4rem)
             calc(var(--cta-h) + 2 * var(--cta-pad));
    position: relative;                      /* Anker für absolut positionierte cta-row */
    /* Grid 1fr|auto|auto|1fr: hero__center sitzt in Zeile 2, home-contact
       (nur im Wartungsmodus) in Zeile 3. Beide Auto-Zeilen bilden einen
       zusammenhängenden Block, der von den zwei 1fr-Spacern gemeinsam
       mittig zwischen Top und Footer gehalten wird – egal wie hoch der
       Kontaktblock wird. Im Normalmodus bleibt Zeile 3 leer (= 0 hoch),
       die Mitte verschiebt sich nicht. */
    display: grid;
    grid-template-rows: 1fr auto auto 1fr;
    justify-items: center;
    row-gap: clamp(1rem, 3vh, 2rem);
}

.hero__center {
    /* sitzt in Grid-Zeile 2 (auto): genau zwischen den beiden 1fr-Zeilen → Hero-Mitte */
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(0.75rem, 2vh, 1.5rem);
    padding: clamp(1rem, 3vh, 2rem) 0;
    max-width: var(--measure);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-caps);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.eyebrow__line {
    display: inline-block;
    width: 2.4rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-hot), transparent);
}

.display {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.71rem, 8.5vw, 4.6rem);
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    background: linear-gradient(180deg,
                var(--gold-3) 0%,
                var(--gold-2) 28%,
                var(--gold-4) 65%,
                var(--gold-1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}

.rule {
    width: min(420px, 80%);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%,
                var(--gold-4) 25%, var(--gold-2) 50%, var(--gold-4) 75%, transparent 100%);
    margin: 0.4rem auto;
}
/* Auf Home sitzt der Hero in .hero__center (Flex mit gap clamp(0.75rem,2vh,1.5rem)).
   Der Gap würde zwischen .display und .rule zusätzlich zur Rule-Eigen-Margin
   wirken → Abstand wäre größer als auf Subpages (Block-Layout, nur Rule-Margin).
   Negative margin-top neutralisiert den Flex-Gap an dieser Stelle, sodass
   Display→Rule auf Home und Subpages denselben Abstand (0.4rem) hat. */
.hero__center .display + .rule {
    margin-top: calc(0.4rem - clamp(0.75rem, 2vh, 1.5rem));
}

.role {
    font-family: var(--font-caps);
    font-weight: 600;
    font-size: clamp(0.95rem, 1.6vw, 1.2rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-2);
}

.intro {
    max-width: 36rem;
    font-family: var(--font-serif);
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.55;
    color: var(--ink);
    font-weight: 400;
    font-style: italic;
}

/* CTA-Reihe (Home) */
.hero__cta-row {
    /* aus dem Flex-Fluss raus, damit hero__center die volle Hero-Mitte
       beanspruchen kann; Button hängt unabhängig am Hero-Boden.
       --cta-pad wird in .hero--home definiert und steuert sowohl diesen
       Abstand zum Hero-Bottom als auch die Schutzzone oberhalb des Buttons. */
    position: absolute;
    bottom: var(--cta-pad);
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

/* Kontakt-Block auf der Home (Wartungsmodus) */
.home-contact {
    /* sitzt in Grid-Zeile 3 (auto) direkt unter hero__center; beide bilden
       zusammen einen mittig zentrierten Block (siehe .hero--home). */
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 2rem;
    max-width: var(--measure);
    width: 100%;
    /* margin-top kompensiert hero__center.padding-bottom und hero--home.row-gap
       (je clamp(1rem, 3vh, 2rem)), sodass der Abstand vom Intro-Text zur
       Trennlinie identisch zur padding-top unter der Linie wird. */
    margin: calc(clamp(1.5rem, 4vh, 2.5rem) - 2 * clamp(1rem, 3vh, 2rem)) auto 0;
    padding-top: clamp(1.5rem, 4vh, 2.5rem);
    border-top: 1px solid var(--line);
}
.home-contact__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}
.home-contact dt {
    font-family: var(--font-caps);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.home-contact dd {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    line-height: 1.45;
    color: var(--ink);
}
.home-contact a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.home-contact a:hover,
.home-contact a:focus { color: var(--gold-2); border-bottom-color: var(--gold-2); }

@media (max-width: 720px) {
    .home-contact { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* ───────────────────────────────────── Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.95rem 1.8rem;
    font-family: var(--font-caps);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all var(--t-mid);
    cursor: pointer;
    line-height: 1;
}

.btn--primary {
    color: var(--preussisch-blau-tief);
    background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-3) 50%, var(--gold-4) 100%);
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
.btn--primary:hover,
.btn--primary:focus {
    color: var(--preussisch-blau-tief);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.5), 0 0 24px var(--gold-glow);
    filter: brightness(1.1);
}

.btn--ghost {
    color: var(--ink);
    border-color: var(--line-hot);
    background: rgba(243, 234, 209, 0.04);
}
.btn--ghost:hover,
.btn--ghost:focus {
    color: var(--gold-2);
    border-color: var(--gold-2);
    background: rgba(232, 200, 120, 0.08);
}

/* ───────────────────────────────────── Hero (Subpages) */

.hero--page {
    /* padding-top entfällt: das Main übernimmt mit clamp(2rem,6vh,4rem) das
       obere Atemraum-Maß und die safe-center-Zentrierung sorgt für Symmetrie. */
    padding: 0 0 clamp(2rem, 6vh, 4rem);
    border-bottom: 1px solid var(--line);
    margin-bottom: clamp(2rem, 5vh, 4rem);
    text-align: center;
}
.hero--page .eyebrow { margin-bottom: 1rem; }
.hero--page .intro {
    margin: 1.2rem auto 0;
    text-align: center;
    color: var(--ink-soft);
}

/* ───────────────────────────────────── Sections */

.section {
    margin-bottom: clamp(2rem, 5vh, 3rem);
    /* width: 100% ist im Flex-Kontext (.main ist flex column) entscheidend:
       ohne explizite Breite und mit margin-inline: auto schrumpft das Flex-Item
       auf fit-content – Sektionen mit kurzem Inhalt (Adress-/Kontaktblöcke)
       wirkten dadurch eingerückt, weil sie sich an ihrem schmalen Inhalt
       orientieren statt an der Schmalspalte. */
    width: 100%;
    max-width: var(--measure-narrow);
    margin-inline: auto;
}
.section + .section { padding-top: clamp(1rem, 3vh, 2rem); }

/* Section-Headings: h2 (.section__heading) und h3 innerhalb .section__body
   teilen sich den Caps-Style mit goldener Trennlinie. h3 zusätzlich mit
   Top-Margin für den Section-Rhythmus auf Seiten mit Sub-Headings (Seminare,
   Impressum, Datenschutz). */
.section__heading,
.section__body h3 {
    font-family: var(--font-caps);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-2);
    margin-bottom: 0.9rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--line);
}
.section__body h3 {
    margin-top: clamp(3rem, 8vh, 5rem);
}

/* Section-Heading mit rechts angedocktem Download-Icon: Heading wechselt
   in Flex, Titeltext links, Icon-Link ganz rechts. Die goldene Trennlinie
   unten umfasst beide Elemente weiterhin auf voller Breite. */
.section__heading--with-download {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.section__heading-text { flex: 1 1 auto; min-width: 0; }

.section__download {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-2);
    padding: 0.25rem;
    margin: -0.25rem;
    border-radius: 3px;
    transition: color var(--t-fast), transform var(--t-fast);
}
.section__download:hover,
.section__download:focus-visible { color: var(--gold-3); transform: translateY(1px); }
.section__download:focus-visible { outline: 2px solid var(--gold-3); outline-offset: 2px; }
.section__download svg {
    width: 1.4em;
    height: 1.4em;
    display: block;
}

.section__body {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--ink);
}
.section__body p + p { margin-top: 0.8rem; }
.section__body ul { padding-left: 1.4rem; list-style: square; color: var(--gold-4); }
.section__body ul li { margin-bottom: 0.35rem; }
.section__body ul li::marker { color: var(--gold-4); }
.section__body strong { color: var(--ink-warm); font-weight: 600; }
.section__body h3:first-child { margin-top: 0; }
.section__body h3 + p { margin-top: 0; }
.section__body a {
    color: var(--gold-2);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-fast);
}
.section__body a:hover { border-bottom-color: var(--gold-2); }

/* Inline-Auszeichnungen innerhalb von .section__body: <code> für Datei-/
   Funktionsnamen (warmer Goldton, leicht abgesetzter Hintergrund),
   <kbd> für Tastaturkürzel (Cinzel-Caps in Pillen-Optik). */
.section__body code {
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.92em;
    color: var(--gold-3);
    background: rgba(232, 200, 120, 0.08);
    border: 1px solid rgba(232, 200, 120, 0.18);
    border-radius: 3px;
    padding: 0.05em 0.35em;
}
.section__body kbd {
    font-family: var(--font-caps);
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-warm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(232, 200, 120, 0.35);
    border-bottom-width: 2px;
    border-radius: 3px;
    padding: 0.05em 0.45em;
    white-space: nowrap;
}

.section__address {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: 1.1rem;
    line-height: 1.7;
}
/* Innerhalb eines section__body (nur Datenschutz „Verantwortlicher" durch
   {address_with_contact}-Token): kleiner Abstand zwischen den beiden
   <address>-Blöcken sowie zu den umgebenden <p>-Texten. Margins zwischen
   benachbarten Geschwistern kollabieren auf max(0.8rem, 0.8rem) = 0.8rem. */
.section__body .section__address {
    margin-block: 0.8rem;
}

.section__lead {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--ink-soft);
    margin-bottom: 1rem;
    text-align: center;
}

/* CTA-Block (z. B. auf Home) */
.section--cta {
    text-align: center;
    padding: clamp(2rem, 5vh, 3rem) 0;
    border-top: 1px solid var(--line);
    margin-top: clamp(2rem, 5vh, 3rem);
}
.section--cta .section__heading {
    border: 0;
    color: var(--gold-2);
    font-size: 1.05rem;
}
.section--cta .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.4rem;
}

/* Placeholder-Block */
.section--placeholder .section__body {
    padding: 1.4rem 1.6rem;
    border: 1px dashed var(--line);
    background: rgba(243, 234, 209, 0.03);
    color: var(--ink-mute);
    font-style: italic;
}

/* ───────────────────────────────────── Kontakt-Formular */

.contact-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    max-width: var(--measure);
    margin: 0 auto;
}

.contact-card {
    background: rgba(0, 25, 42, 0.55);
    border: 1px solid var(--line);
    padding: clamp(1.4rem, 3vw, 2rem);
    align-self: start;
    backdrop-filter: blur(4px);
}
.contact-card .section__heading {
    margin-bottom: 1.2rem;
}

.contact-dl { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.6rem; }
.contact-dl__row { display: flex; flex-direction: column; gap: 0.15rem; }
.contact-dl dt {
    font-family: var(--font-caps);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.contact-dl dd {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--ink);
}
.contact-dl a {
    color: var(--ink);
    border-bottom: 1px solid transparent;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.contact-dl a:hover { color: var(--gold-2); border-bottom-color: var(--gold-2); }

.btn--block { width: 100%; justify-content: center; }

.contact-form-wrap {}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label {
    font-family: var(--font-caps);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.field input[type="text"],
.field input[type="email"],
.field textarea {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--ink-warm);
    background: rgba(0, 25, 42, 0.55);
    border: 1px solid var(--line);
    padding: 0.85rem 1rem;
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
    border-radius: var(--radius);
    line-height: 1.4;
}
.field textarea {
    resize: vertical;
    min-height: 9rem;
    font-family: var(--font-serif);
}
.field input::placeholder,
.field textarea::placeholder {
    color: var(--ink-mute);
    font-style: italic;
}
.field input:hover,
.field textarea:hover { border-color: var(--line-hot); }
.field input:focus,
.field textarea:focus {
    outline: 0;
    border-color: var(--gold-2);
    background: rgba(0, 25, 42, 0.75);
    box-shadow: 0 0 0 3px rgba(232, 200, 120, 0.18);
}
.field.is-error input,
.field.is-error textarea {
    border-color: rgba(216, 90, 90, 0.65);
    background: rgba(70, 20, 25, 0.45);
}

.field--check label {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    text-transform: none;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 0.95rem;
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--ink-soft);
    cursor: pointer;
}
.field--check input[type="checkbox"] {
    appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid var(--line-hot);
    background: rgba(0, 25, 42, 0.55);
    flex-shrink: 0;
    margin-top: 0.2rem;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
    position: relative;
}
.field--check input[type="checkbox"]:checked {
    background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
    border-color: var(--gold-2);
}
.field--check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3 8.5l3 3 7-7' stroke='%2300253f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}
.field--check.is-error label { color: rgb(216, 90, 90); }

.field--actions { margin-top: 0.4rem; }

/* Honeypot vollständig versteckt für Menschen */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-flash {
    padding: 1rem 1.2rem;
    border: 1px solid var(--line);
    margin-bottom: 1.6rem;
    background: rgba(0, 25, 42, 0.55);
}
.form-flash strong {
    display: block;
    font-family: var(--font-caps);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}
.form-flash p {
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.5;
}
.form-flash--ok    { border-color: var(--gold-2); background: rgba(232, 200, 120, 0.08); }
.form-flash--ok strong { color: var(--gold-2); }
.form-flash--error { border-color: rgba(216, 90, 90, 0.55); background: rgba(70, 20, 25, 0.35); }
.form-flash--error strong { color: rgb(232, 130, 130); }

@media (max-width: 720px) {
    .contact-grid { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────── Footer (gespiegelter Header-Stil) */

.site-footer {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    z-index: 50;
    /* Deckende Body-Blau-Schicht hinter dem Verlauf — Pendant zum Header. */
    background:
        linear-gradient(0deg, rgba(0,37,63,0.55) 0%, rgba(0,37,63,0.25) 80%, rgba(0,37,63,0) 100%),
        var(--preussisch-blau);
    border-top: 1px solid rgba(232, 200, 120, 0.16);
    transition: background var(--t-mid), border-color var(--t-mid);
}
.site-footer__inner {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0.55rem clamp(1rem, 4vw, 2.5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.4rem;
}
.site-footer__links {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 2.6vw, 2rem);
}
.site-footer__links a {
    display: inline-block;
    padding: 0.25rem 0;
    text-decoration: none;
    position: relative;
    font-family: var(--font-caps);
    font-weight: 400;
    font-size: 0.68rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-soft);
    transition: color var(--t-fast);
}
.site-footer__links a:hover,
.site-footer__links a:focus { color: var(--gold-2); }
.site-footer__links a:hover::after,
.site-footer__links a:focus::after { transform: scaleX(1); }

.site-footer__copy {
    font-family: var(--font-caps);
    font-weight: 400;
    font-size: 0.68rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

/* ───────────────────────────────────── Reveal-Animationen */

[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 800ms cubic-bezier(.2,.6,.2,1),
                transform 800ms cubic-bezier(.2,.6,.2,1);
    transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ───────────────────────────────────── Responsive */

@media (max-width: 880px) {
    .nav-toggle { display: inline-flex; }
    .primary-nav {
        position: fixed;
        inset: 0;
        background: linear-gradient(180deg, var(--preussisch-blau-tief) 0%, var(--preussisch-blau) 100%);
        z-index: 40;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--t-mid), visibility var(--t-mid);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6rem 2rem 3rem;
    }
    .primary-nav.is-open { opacity: 1; visibility: visible; }
    .primary-nav__list {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    /* Im Mobile-Drawer wirkt der „doppelter Abstand"-Marker als Vorlauf
       nach oben (statt links), da die Liste vertikal stapelt. */
    .primary-nav__item--gap-double { margin-left: 0; margin-top: 1.5rem; }
}

@media (max-width: 720px) {
    /* Mobile-Footer stackt vertikal → höher als Desktop-Bar */
    :root { --bottombar-h: 5.5rem; }
    .site-footer__inner { flex-direction: column; gap: 0.6rem; padding: 0.8rem clamp(1rem, 4vw, 2.5rem); }
    .site-footer__links { justify-content: center; flex-wrap: wrap; gap: 1rem; }
    .wappen-bg-wrap { --wappen-edge: 1rem; --wappen-cap: 9999px; }
    .wappen-bg { opacity: 0.13; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
    /* Easter Egg: Animation aus, ein dezenter Text-Flash übernimmt – ein
       Klick auf das Copyright zeigt kurz „I = U/R" am Footer-Rand. */
    .easter-egg { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   Easter Egg · Pixel-Dozent (GIF-basiert, Zufalls-Szene)
   – wird nur gerendert, wenn site.easter_egg.enabled = true.
   – Trigger: Klick auf .site-footer__copy (siehe main.js).
   – Bühne sitzt fixed direkt über der Bottom-Bar (Boden = Top-Kante des
     Footers), pointer-events: none, hoch z-indiziert.
   – Drei Phasen, von JS per Klassen-Wechsel orchestriert:
        .phase-walk-in   → translateX-Animation off-right → Stop  (9 s)
        .phase-standing  → bleibt am Stop, JS swappt GIF-src  (variabel)
        .phase-walk-out  → translateX-Animation Stop → off-right (9 s)
     Die Sprite-src wird ebenfalls per JS gesetzt: walking-west / Action /
     walking-east. Jeder src-Wechsel startet die GIF-Animation bei Frame 0.
   ───────────────────────────────────────────────────────────── */

.easter-egg {
    --ee-walk-ms: 9000ms;           /* Dauer je Walk-Phase – muss zu WALK_MS in main.js passen */
    --ee-sprite: 92px;              /* native GIF-Größe; image-rendering: pixelated */
    --ee-stop-left: 75%;            /* linke Kante des Dozenten in der Stop-Phase */
    --ee-foot-pad: 7px;             /* leere Pixel-Reihen im GIF unterhalb der Schuhe –
                                       Container ragt um diesen Wert ins Bar-Territorium,
                                       damit die Schuhsohle bündig auf der Bar steht */
    --ee-walk-distance: 25vw;
                                    /* Translation off-right ↔ Stop: 25vw deckt
                                       100% − 75% Stop-Position. Bei translateX(25vw)
                                       sitzt sprite-left exakt auf der Viewport-Kante,
                                       der Sprite ragt mit seinen 92 px rechts darüber
                                       hinaus und wird von Stage `overflow: hidden`
                                       geclippt. Kein zusätzlicher Buffer nötig –
                                       sonst wartet man ~3 s, bis der Charakter aus
                                       dem rechten Sprite-Padding herausläuft. */

    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--bottombar-h);
    height: calc(var(--ee-sprite) + 4px);
    z-index: 30;
    pointer-events: none;
    overflow: hidden;
    /* Initial unsichtbar; Klasse .is-running blendet die Bühne ein. */
    opacity: 0;
    visibility: hidden;
}
.easter-egg.is-running {
    opacity: 1;
    visibility: visible;
}

.easter-egg img {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

/* Dozent-Container: linke Kante in der Stop-Phase bei --ee-stop-left.
   Default-Transform = off-right (Bühne nicht sichtbar). Stage hat
   overflow: hidden – die --ee-foot-pad-Reihen unter den Schuhen werden
   geclippt, fallen aber transparent ohnehin nicht auf. */
.easter-egg__dozent {
    position: absolute;
    bottom: calc(var(--ee-foot-pad) * -1);
    left: var(--ee-stop-left);
    width: var(--ee-sprite);
    height: var(--ee-sprite);
    transform: translateX(var(--ee-walk-distance));
}

.easter-egg__sprite {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Phase 1: Walk-in (off-right → Stop). linear = konstante px/s. */
.easter-egg.phase-walk-in .easter-egg__dozent {
    animation: ee-walk-in var(--ee-walk-ms) linear forwards;
}
@keyframes ee-walk-in {
    from { transform: translateX(var(--ee-walk-distance)); }
    to   { transform: translateX(0); }
}

/* Phase 2: Action-Sequenz – Container bleibt am Stop, JS swappt nur die
   GIF-src zwischen den verschiedenen Idle-Animationen. */
.easter-egg.phase-standing .easter-egg__dozent {
    transform: translateX(0);
}

/* Phase 3: Walk-out (Stop → off-right). Identische Distanz und Dauer wie
   Walk-in → identische Geschwindigkeit. */
.easter-egg.phase-walk-out .easter-egg__dozent {
    animation: ee-walk-out var(--ee-walk-ms) linear forwards;
}
@keyframes ee-walk-out {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--ee-walk-distance)); }
}


/* ─────────────────────────────────────────────────────────────
   Saisonale Tönungen
   – statische Hintergründe; bewegte Partikel laufen über main.js + Canvas.
   ───────────────────────────────────────────────────────────── */

/* ─────────── Frühling */
.season-spring {
    --season-accent: #f0d97f;
    --season-mist:   rgba(244, 220, 153, 0.06);
}
.season-spring .bg-season {
    background:
        radial-gradient(circle at 18% 22%, rgba(244, 220, 153, 0.10) 0%, transparent 35%),
        radial-gradient(circle at 82% 78%, rgba(232, 200, 120, 0.08) 0%, transparent 40%);
    mix-blend-mode: screen;
}
.season-spring .wappen-bg { opacity: 0.20; }

/* ─────────── Sommer */
.season-summer {
    --season-accent: #f4dc99;
    --season-mist:   rgba(244, 220, 153, 0.10);
}
.season-summer .bg-season {
    background:
        radial-gradient(ellipse at 50% 10%, rgba(244, 220, 153, 0.18) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 95%, rgba(232, 200, 120, 0.12) 0%, transparent 45%);
    mix-blend-mode: screen;
}
.season-summer::before {
    background: radial-gradient(ellipse at 50% 38%,
        #0e4570 0%,
        var(--preussisch-blau)      55%,
        var(--preussisch-blau-tief) 100%);
}
.season-summer .wappen-bg { opacity: 0.22; }
.season-summer .display { filter: drop-shadow(0 2px 10px rgba(244, 220, 153, 0.35)); }

/* ─────────── Herbst */
.season-autumn {
    --season-accent: #c49a45;
    --season-mist:   rgba(196, 154, 69, 0.08);
}
.season-autumn .bg-season {
    background:
        radial-gradient(circle at 25% 20%, rgba(184, 137, 58, 0.10) 0%, transparent 38%),
        radial-gradient(circle at 78% 85%, rgba(196, 154, 69, 0.10) 0%, transparent 42%);
    mix-blend-mode: screen;
}
.season-autumn .wappen-dark { fill: #c49a45; }
.season-autumn .wappen-bg { opacity: 0.20; }

/* ─────────── Winter */
.season-winter {
    --season-accent: #cfdfee;
    --season-mist:   rgba(207, 223, 238, 0.08);
}
.season-winter.season-winter::before {
    background: radial-gradient(ellipse at 50% 38%,
        #08344f 0%,
        #002a48 55%,
        #001a30 100%);
}
.season-winter .bg-season {
    background:
        radial-gradient(circle at 30% 15%, rgba(207, 223, 238, 0.10) 0%, transparent 40%),
        radial-gradient(circle at 70% 90%, rgba(180, 200, 220, 0.06) 0%, transparent 45%);
    mix-blend-mode: screen;
}
.season-winter .wappen-dark { fill: #d8e1ec; }
.season-winter .wappen-bg { opacity: 0.16; }

/* ─────────────────────────────────────────────────────────────
   Intensitätsstufen
   – wirken auf statische Layer; Partikel-Anzahl wird in JS skaliert.
   ───────────────────────────────────────────────────────────── */

.intensity-subtle .bg-season   { opacity: 0.35; }
.intensity-subtle .bg-particles { opacity: 0.55; }
.intensity-subtle .wappen-bg   { opacity: 0.13; }

.intensity-bold   .bg-season   { opacity: 1.4; }
.intensity-bold   .bg-particles { opacity: 1.0; }
.intensity-bold   .wappen-bg   { opacity: 0.28; }
.intensity-bold   .display     { filter: drop-shadow(0 2px 12px var(--gold-glow)); }