/*
 * EMEU Kontext-Schicht — uebernommen aus bricks-child style.css
 * GENERIERT (Bricks-Uebersetzung) — ab 2026-08-29 KURATIERT (A3, Lumina-Setzung): Generator eingefroren (build.php-Guard), Pflege von Hand HIER; Bricks-Rueckweg via Archiv-Quellen (_bricksbuilder__styles plus bricks-child).
 *
 * Generator: emeu-design-system build.php | Version b398e8b88e6a (Quell-Hash)
 * Quellen:
 *   - emeu_brand-dna__bricks-classes.json (Stand 2026-08-04 19:27 UTC)
 *   - emeu_brand-dna__bricks-variables.json (Stand 2026-08-18 22:04 UTC)
 *   - emeu_brand-dna__color-palette-emeu-color.json (Stand 2026-08-18 21:08 UTC)
 *   - style.css (Stand 2026-08-06 00:06 UTC)
 * Bilanz: Kontext-Schicht ab LAYER 2 (49940 von 57615 Bytes; Font-Layer bewusst ausgelassen — liegt in den Child-Themes)
 */

/* ============================================================
   LAYER 2: VIEWPORT VARIABLES
   ============================================================ */
 
:root {
  --dvh: 1dvh;
  --svh: 1svh;
}

/* ============================================================
   LAYER 3: CONTEXT COLOR SYSTEM (v5.0 — A3-Kuration 2026-08-29, dark-first)
   KURATIERT (Lumina-Setzung): Werte auf der Neutral-Treppe (--neutral-*,
   Spiegel der Elementor-Kit-SSOT) plus Marken-DNA (--emeu-brand-dna-*).
   Ersetzt die warme Alt-Grau-Skala --aic--gray-* der AIC/Bricks-Aera
   (vormals v4.0 Walmart-Konzept 2026-06-06).

   DARK IST DEFAULT (REIN-DARK-Linie S122): body ohne Klasse faellt auf die
   dunkle Welt; .on-light ist Opt-in pro Seite (Metabox EMEU Seiten-Kontext)
   oder pro Section. Header-Welt-Schaltung (S069): der has-Selektor gibt dem
   .emeu-header das komplette Welt-Set, wenn auf der Seite ein
   header-world--*-Marker liegt; stehen beide Marker (Autoren-Fehler),
   gewinnt light (spaeterer Block).

   Links on-light auf BENANNTEN Messing-Stufen statt color-mix (Befund B3
   vom Farbwelt-Board; Kontraste gemessen auf hellem Grund).
   Sections tragen .on-dark oder .on-light, Widgets Worker-Klassen
   (.color-headline etc.). Familien: Text, Backgrounds, Borders, Links,
   Navigation (Header plus Footer), Buttons (Primary, Secondary, Pille),
   States.
   ============================================================ */

/* Alt-Namen-Bruecke (--signal auf Brand-DNA) ENTFERNT 2026-08-29: nach dem
   A3-Nutzungs-Schnitt existieren keine Alt-Nutzer mehr (gemessen: 0 in
   classes, hand und context). Status-Familien signal-green/red/orange/grey
   sind eigene Variablen und bleiben. */

/* ===== DARK — Default plus .on-dark plus Header-Welt-Marker dunkel ===== */
body,
.on-dark,
body:has(.header-world--dark) .emeu-header {
  /* Backgrounds */
  --color-bg:        var(--neutral-d-24);   /* #0a0a0a — Engine-Boden */
  --color-bg-card:   var(--neutral-d-22);   /* #1f1f1f */

  /* Text — Headline, Body, Icon, Muted */
  --color-headline:  var(--neutral-d-1);    /* #f5f5f5 */
  --color-body:      var(--neutral-d-3);    /* #e0e0e0 */
  --color-icon:      var(--color-body);
  --color-muted:     var(--neutral-d-9);    /* #a3a3a3 */

  /* Borders */
  --color-border:         var(--neutral-d-19);   /* #3d3d3d */
  --color-border-subtle:  var(--neutral-d-21);   /* #292929 */

  /* Primary / CI — Signal auf Dunkel (hoher Eigen-Kontrast, keine Staffelung) */
  --color-primary:        var(--emeu-brand-dna-signal);        /* #e9ff2e */
  --color-primary-hover:  var(--emeu-brand-dna-signal-d-1);    /* #c8db27 */
  --color-on-primary:     var(--neutral-d-23);   /* #141414 */
  --color-primary-accent: var(--emeu-brand-dna-signal);

  /* Links */
  --color-link:        var(--color-primary);
  --color-link-hover:  var(--color-primary-hover);

  /* Navigation — Header */
  --color-nav-header-link:         var(--color-headline);
  --color-nav-header-link-hover:   var(--color-primary);
  --color-nav-header-link-active:  var(--color-primary);

  /* Buttons — neutrale Solid-Flaeche */
  --color-btn-solid:        var(--neutral-d-20);   /* #333333 */
  --color-btn-solid-hover:  var(--neutral-d-19);   /* #3d3d3d */

  /* Buttons — Knopf-Pille (Inversion S068: helle Pille auf dunkler Welt) */
  --button-rounded-bg:        var(--neutral-d-1);    /* #f5f5f5 */
  --button-rounded-bg__hover: var(--neutral-d-5);    /* #cccccc */
  --button-rounded-text:      var(--neutral-d-23);   /* #141414 */

  /* Header-Glas (v3.0) — Neutral-Pendants; Feinjustage = KANN (A1) */
  --header-glass-bg:    rgba(20, 20, 20, 0.66);
  --header-glass-line:  rgba(245, 245, 245, 0.10);

  /* States */
  --color-success:  var(--signal-green);
  --color-error:    var(--signal-red);
  --color-warning:  var(--signal-orange);
  --color-focus-ring: var(--color-primary);
  --shadow-focus:   color-mix(in srgb, var(--emeu-brand-dna-signal) 25%, transparent);

  /* ===== Alias-Bruecke (Backward-Compat; faellt mit der Bestand-Migration) ===== */
  --color-bg-page:                   var(--color-bg);
  --color-bg-surface:                var(--color-bg-card);
  --color-bg-field:                  var(--color-bg-card);
  --color-display:                   var(--color-headline);
  --color-meta:                      var(--color-muted);
  --color-border-hover:              var(--color-border);
  --color-link-standalone:           var(--color-link);
  --color-link-listed:               var(--color-link);
  --color-nav-footer-headline:       var(--color-headline);
  --color-nav-footer-link:           var(--color-body);
  --color-nav-footer-link-hover:     var(--color-link-hover);
  --color-button-primary-bg:         var(--color-primary);
  --color-button-primary-text:       var(--color-on-primary);
  --color-button-primary-bg-hover:   var(--color-primary-hover);
  --color-button-secondary-bg:       transparent;
  --color-button-secondary-text:     var(--color-headline);
  --color-button-secondary-border:   var(--color-border);
  --color-disabled:                  var(--color-muted);
  --color-subhead:                   var(--color-headline);
  --color-lead:                      var(--color-body);
  --color-caption:                   var(--color-muted);
  --color-rule:                      var(--color-border-subtle);
  --color-text:                      var(--color-body);
  --color-text-muted:                var(--color-muted);
  --color-text-subtle:               var(--color-muted);
  --color-divider:                   var(--color-border-subtle);
}

/* ===== LIGHT — Opt-in per Klasse plus Header-Welt-Marker hell ===== */
.on-light,
body:has(.header-world--light) .emeu-header {
  /* Backgrounds */
  --color-bg:        var(--neutral-d-1);    /* #f5f5f5 */
  --color-bg-card:   var(--neutral);        /* #ffffff */

  /* Text — Headline, Body, Icon, Muted */
  --color-headline:  var(--neutral-d-23);   /* #141414 */
  --color-body:      var(--neutral-d-19);   /* #3d3d3d */
  --color-icon:      var(--color-body);
  --color-muted:     var(--neutral-d-15);   /* #666666 */

  /* Borders */
  --color-border:         var(--neutral-d-5);    /* #cccccc */
  --color-border-subtle:  var(--neutral-d-3);    /* #e0e0e0 */

  /* Primary / CI — Messing auf Hell, Kontrast-Staffel aus der Labor-Runde:
     Basis fuer Flaechen, d-1 fuer UI/Fokus (3,42:1), d-2/d-3 fuer Text-Links */
  --color-primary:        var(--emeu-brand-dna-messing);        /* #aa9841 */
  --color-primary-hover:  var(--emeu-brand-dna-messing-d-1);    /* #928238 */
  --color-on-primary:     var(--neutral-d-23);   /* #141414 */
  --color-primary-accent: var(--emeu-brand-dna-messing);

  /* Links — benannte Stufen statt color-mix (B3): d-2 4,63:1 / d-3 6,46:1 */
  --color-link:        var(--emeu-brand-dna-messing-d-3);   /* #615725 — SSLB-Wert 2026-08-30: haelt auf Seite 6,65 und Karte d-3 5,49; d-2 fiel auf Karten unter die Latte (dunkelste-Flaeche-Regel) */
  --color-link-hover:  var(--emeu-brand-dna-messing-d-4);   /* #49411c — Hover-Konvention eine Stufe dunkler */

  /* Navigation — Header */
  --color-nav-header-link:         var(--color-headline);
  --color-nav-header-link-hover:   var(--emeu-brand-dna-messing-d-2);
  --color-nav-header-link-active:  var(--emeu-brand-dna-messing-d-2);

  /* Buttons — neutrale Solid-Flaeche */
  --color-btn-solid:        var(--neutral-d-5);    /* #cccccc */
  --color-btn-solid-hover:  var(--neutral-d-6);    /* #c2c2c2 */

  /* Buttons — Knopf-Pille (Inversion: dunkle Pille auf heller Welt) */
  --button-rounded-bg:        var(--neutral-d-23);   /* #141414 */
  --button-rounded-bg__hover: var(--neutral-d-19);   /* #3d3d3d */
  --button-rounded-text:      var(--neutral-d-1);    /* #f5f5f5 */

  /* Header-Glas (v3.0) — Neutral-Pendants; Feinjustage = KANN (A1) */
  --header-glass-bg:    rgba(245, 245, 245, 0.72);
  --header-glass-line:  rgba(20, 20, 20, 0.08);

  /* States */
  --color-success:  var(--signal-green-d-2);
  --color-error:    var(--signal-red-d-2);
  --color-warning:  var(--signal-orange-d-2);
  --color-focus-ring: var(--emeu-brand-dna-messing-d-1);   /* 3,42:1 — UI-Latte 3,0 */
  --shadow-focus:   color-mix(in srgb, var(--emeu-brand-dna-messing) 20%, transparent);

  /* ===== Alias-Bruecke (Backward-Compat; faellt mit der Bestand-Migration) ===== */
  --color-bg-page:                   var(--color-bg);
  --color-bg-surface:                var(--color-bg-card);
  --color-bg-field:                  var(--color-bg-card);
  --color-display:                   var(--color-headline);
  --color-meta:                      var(--color-muted);
  --color-border-hover:              var(--color-border);
  --color-link-standalone:           var(--color-link);
  --color-link-listed:               var(--color-link);
  --color-nav-footer-headline:       var(--color-headline);
  --color-nav-footer-link:           var(--color-body);
  --color-nav-footer-link-hover:     var(--color-link-hover);
  --color-button-primary-bg:         var(--color-primary);
  --color-button-primary-text:       var(--color-on-primary);
  --color-button-primary-bg-hover:   var(--color-primary-hover);
  --color-button-secondary-bg:       transparent;
  --color-button-secondary-text:     var(--color-headline);
  --color-button-secondary-border:   var(--color-border);
  --color-disabled:                  var(--color-muted);
  --color-subhead:                   var(--color-headline);
  --color-lead:                      var(--color-body);
  --color-caption:                   var(--color-muted);
  --color-rule:                      var(--color-border-subtle);
  --color-text:                      var(--color-body);
  --color-text-muted:                var(--color-muted);
  --color-text-subtle:               var(--color-muted);
  --color-divider:                   var(--color-border-subtle);
}

/* Body-Grund folgt dem Seiten-Schalter (Metabox EMEU Seiten-Kontext): kippt
   die Seite, kippt der Grund mit — keine durchscheinende Falsch-Farbe. Der
   Theme-Boden (style.css, neutral-d-24) bleibt Default plus Lade-Blitz-Schutz. */
body.on-light { background-color: var(--color-bg-page); }
body.on-dark  { background-color: var(--color-bg-page); }

/* Text folgt dem Seiten-Schalter mit (Befund 2026-09-06, Datenschutzerklaerung
   on-light: roher Inhalt ohne Klassen erbte die Kit-Textfarbe der dunklen Welt).
   Ueberschriften mit niedrigster Spezifitaet (where), damit Klassen am Element
   (Worker, Globalklassen) weiterhin gewinnen. */
body.on-light { color: var(--color-body); }
:where(body.on-light) :where(h1, h2, h3, h4, h5, h6) { color: var(--color-headline); }

/* ============================================================
   LAYER 3c: GLOBAL FORM TOKENS (v2.0 — S027)
   Form-spezifische Tokens — Geometrie, Labels, Transition.
   State-Farben leben in Layer 3 (.on-light / .on-dark).
   ============================================================ */

:root {
  /* Form Field Geometry (v2.1 KERBE 2026-09-03: 44px statt 50px,
     gap 1rem — das Label bleibt im Feld-Kasten, siehe forms/) */
  --form-field-height:               44px;
  --form-gap:                        1rem;
  --form-atmung-top:                 0.5rem;
  --form-field-radius:               var(--radius-button, 8px);
  --form-field-padding:              0.75rem 1rem;
  --form-focus-width:                2px;

  /* Label-Typography Tokens (Rolle 1 — Floating-Idle) */
  --form-label-floating-idle-size:   16px;
  --form-label-floating-idle-lh:     22px;
  --form-label-floating-idle-weight: 300;

  /* Rolle 2 — Floating-Active: fix, keine Skalierung */
  --form-label-floating-active-size:   13px;
  --form-label-floating-active-lh:     17px;
  --form-label-floating-active-weight: 300;

  /* Rolle 3 — Permanent (Select2, Native Select) */
  --form-label-permanent-size:       13px;
  --form-label-permanent-lh:         17px;
  --form-label-permanent-weight:     300;

  /* Rolle 4 — Group (Checkbox/Radio-Gruppen-Titel, Meta-Stil) */
  --form-label-group-size:           13px;
  --form-label-group-lh:             1.3;
  --form-label-group-weight:         500;
  --form-label-group-ls:             0.02em;
  --form-label-group-transform:      uppercase;
  --form-label-group-margin-bottom:  12px;

  /* Rolle 5 — Item (Beschriftung neben Checkbox/Radio) */
  --form-label-item-size:            15px;
  --form-label-item-lh:              1.4;
  --form-label-item-weight:          400;

  /* Rolle 6 — Feedback (Error- und Helper-Text) */
  --form-label-feedback-size:        13px;
  --form-label-feedback-lh:          1.4;
  --form-label-feedback-weight:      400;
  --form-label-feedback-padding-top: 6px;
}

/* ============================================================
   BASIS INPUT STYLES — universell (v2.0)
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
  background-color: var(--color-bg-field);
  border: 1px solid var(--color-border);
  border-radius: var(--form-field-radius);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-body, 16px);
  font-weight: 300;
  min-height: var(--form-field-height);
  padding: var(--form-field-padding);
  width: 100%;
  transition: border-color var(--duration-medium, 200ms) var(--ease-default, ease),
              box-shadow var(--duration-medium, 200ms) var(--ease-default, ease);
  -webkit-appearance: none;
  appearance: none;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--form-focus-width) var(--shadow-focus);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

label {
  color: var(--color-text-muted);
  font-size: var(--form-label-floating-idle-size);
  font-weight: var(--form-label-floating-idle-weight);
  letter-spacing: 0.015em;
}

/* ============================================================
   COLOR WORKER-KLASSEN (v3.0 — S049, 2026-05-25)
   Manuell in Bricksbuilder anwendbar — setzen Farbe explizit.
   Erben aus dem .on-dark / .on-light-Kontext der umschliessenden
   Section. Funktions-getrieben, nicht hierarchie-getrieben.
   ============================================================ */

/* --- Text-Hierarchie (4 Stufen) --- */
.color-display   { color: var(--color-display); }
.color-headline  { color: var(--color-headline); }
.color-body      { color: var(--color-body); }
.color-icon     { color: var(--color-icon); }
.color-meta      { color: var(--color-meta); }

/* --- Text-Migrations-Klassen (werden nach Bestand-Umstellung entfernt) --- */
.color-subhead   { color: var(--color-subhead); }
.color-lead      { color: var(--color-lead); }
.color-caption   { color: var(--color-caption); }
.color-rule      { color: var(--color-rule); }

/* --- Links — drei Use-Cases mit Hover-State --- */

/* Link-Grundfarbe folgt der Welt (B-03 Mechanismus, 2026-08-30):
   ersetzt die welt-blinde Kit-Regel (.elementor-kit-83 a mit statischem
   Treppen-Grau) durch die Kontext-Variable — eine Spezifitaetsstufe
   hoeher (body-Typ-Anteil, die Kit-Klasse sitzt AM body), weil
   post-83.css NACH dieser Datei laedt.
   Faerbt exakt den Geltungsbereich der Kit-Regel um, nicht mehr:
   Elemente mit eigenen, staerkeren Regeln (Widgets, Worker, Buttons,
   Navigation) bleiben unberuehrt. Wert-Wahl je Welt liegt in den
   Kontext-Bloecken oben (Schicht 3), CI-Entscheid folgt separat. */
body.elementor-kit-83 a { color: var(--color-link); }
body.elementor-kit-83 a:hover { color: var(--color-link-hover); }

.color-link {
  color: var(--color-link);
  transition: color var(--duration-medium, 300ms) var(--ease-default, ease);
}
.color-link:hover { color: var(--color-link-hover); }

.color-link-standalone {
  color: var(--color-link-standalone);
  transition: color var(--duration-medium, 300ms) var(--ease-default, ease);
}
.color-link-standalone:hover { color: var(--color-link-hover); }

.color-link-listed {
  color: var(--color-link-listed);
  transition: color var(--duration-medium, 300ms) var(--ease-default, ease);
}
.color-link-listed:hover { color: var(--color-link-hover); }

/* --- Navigation — Header --- */
.color-nav-header-link {
  color: var(--color-nav-header-link);
  transition: color var(--duration-medium, 300ms) var(--ease-default, ease);
}
.color-nav-header-link:hover { color: var(--color-nav-header-link-hover); }
.color-nav-header-link.active,
.color-nav-header-link[aria-current="page"] { color: var(--color-nav-header-link-active); }

/* --- Navigation — Footer --- */
.color-nav-footer-headline { color: var(--color-nav-footer-headline); }
.color-nav-footer-link {
  color: var(--color-nav-footer-link);
  transition: color var(--duration-medium, 300ms) var(--ease-default, ease);
}
.color-nav-footer-link:hover { color: var(--color-nav-footer-link-hover); }

/* --- Buttons — Primary (Call-to-Action) --- */
.color-button-primary-bg          { background-color: var(--color-button-primary-bg); }
.color-button-primary-text        { color: var(--color-button-primary-text); }
.color-button-primary-bg:hover    { background-color: var(--color-button-primary-bg-hover); }

/* --- Buttons — Secondary (Ghost mit Border) --- */
.color-button-secondary-bg        { background-color: var(--color-button-secondary-bg); }
.color-button-secondary-text      { color: var(--color-button-secondary-text); }
.color-button-secondary-border    { border-color: var(--color-button-secondary-border); }

/* --- States --- */
.color-success     { color: var(--color-success); }
.color-error       { color: var(--color-error); }
.color-warning     { color: var(--color-warning); }
.color-disabled    { color: var(--color-disabled); }
.color-focus-ring  { box-shadow: 0 0 0 2px var(--color-focus-ring); }

/* --- Brand-Akzente --- */
.color-primary          { color: var(--color-primary); }
.color-primary-accent   { color: var(--color-primary-accent); }

/* --- Background Worker-Klassen --- */
.bg-page    { background-color: var(--color-bg-page); }
.bg-card    { background-color: var(--color-bg-card); } /* Karten-Grund direkt (S069, CTA-Slider-Luecke) */
.bg-surface { background-color: var(--color-bg-surface); }
.bg-field   { background-color: var(--color-bg-field); }

/* --- Border Worker-Klassen --- */
.border-default  { border-color: var(--color-border); }
.border-hover    { border-color: var(--color-border-hover); }
.border-subtle   { border-color: var(--color-border-subtle); }
.border-rule     { border-color: var(--color-border-subtle); }

/* ============================================================
   BUTTON WORKER-KLASSEN (v1.0 — S068, 2026-07-03)
   Zwei-Button-System (Regelfall): Knopf-Pille plus Text-Link.
   Farben kommen aus dem .on-light/.on-dark-Kontext (Inversion-
   Prinzip, Token in Layer 3) — KEIN Welt-Chip am Element noetig,
   die Section-Property steuert alles. Die Pillen-FORM (Padding,
   Radius, Background) lebt weiter in der Bricks-Klasse
   .button__rounded-corner (Style Manager); hier kommt die kontext-
   bewusste TEXT-Farbe dazu. Bewusst NACH .color-body definiert,
   damit sie am selben Element die Kaskade gewinnt.
   ============================================================ */

/* Knopf-Pille: kontextbewusste Text-Farbe plus sanfte Uebergaenge.
   ZWEI Verteidigungs-Linien pro Regel:
   - #brx-content-Anker: Bricks verankert seine Link- und Inhalts-
     Grundregeln unter der ID des Inhalts-Wrappers (brx-content).
     Eine ID schlaegt JEDE Klassen-Kette — deshalb ankern die Worker-
     Regeln unter derselben ID (gleiche ID, mehr Klassen: wir gewinnen)
   - Doppel-Klasse als Fallback ausserhalb von brx-content plus
     Gleichstand-Schutz gegen spaeter ladendes Bricks-Klassen-CSS */
#brx-content .button__rounded-corner,
.button__rounded-corner.button__rounded-corner {
  color: var(--button-rounded-text);
  /* inline-flex sichert den Transform ab: auf rein-inline Elementen
     werden Transforms ignoriert — das Text-Link-Widget rendert ein a */
  display: inline-flex;
  align-items: center;
  transition: background-color var(--duration-medium, 300ms) var(--ease-default, ease),
              color var(--duration-medium, 300ms) var(--ease-default, ease),
              transform var(--duration-medium, 300ms) var(--ease-default, ease);
}

/* Hover-Aufwertung (Lumina-Entscheid 2026-07-04): hauchfeines Anheben
   statt Skalierung — welt-agnostisch, dieselbe Geste auf light und dark.
   Bewusst OHNE Schatten (waere auf dunkler Welt unsichtbar und braeche
   die Gleich-Laut-Regel) und OHNE will-change (Compositor-Ebenen-Kosten,
   Lehre aus dem Drag-Slider-Umbau). */
#brx-content .button__rounded-corner:hover,
.button__rounded-corner.button__rounded-corner:hover {
  transform: translateY(-2px);
}

/* Text-Link (Zweit-Aktion, Text plus Icon): nutzt bestehende
   Kontext-Token — Headline-Farbe im Ruhezustand, Signal beim Hover
   (die etablierte Link-Sprache des Systems). Das Bricks-Text-Link-
   Widget rendert einen echten Link (a) und wird deshalb von den
   ID-verankerten a-Grundregeln getroffen — daher der ID-Anker. */
#brx-content .button__text-link,
.button__text-link.button__text-link {
  color: var(--color-headline);
  transition: color var(--duration-medium, 300ms) var(--ease-default, ease);
}

#brx-content .button__text-link:hover,
.button__text-link.button__text-link:hover {
  color: var(--color-primary);
}

/* ============================================================
   HEADER WORKER-KLASSEN (v1.0 — S069, Header-Navigation Stufe 1+2)
   Anker: .emeu-header wird der HEADER-Section (GRID CanvasElement
   __ HEADER) als CSS-Klasse zugewiesen — bewusst KLASSE statt
   brxe-ID (Spezifitaets-Lehre 2026-07-04; die Live-Seiten tragen
   zudem noch keinen Bricks-Header-Wrapper, eine ID waere unverifiziert).
   Welt-Schaltung: Default folgt der body-Welt (light); die Marker
   header-world--dark / header-world--light schalten ueber die
   has-Selektoren an den Welt-Bloecken (Layer 3). Der Header
   konsumiert ausschliesslich Token.
   Zustaende: Ruhe = transparent (der Header hat keinen eigenen
   Boden); Hover ODER is-scrolled = Welt-Boden. is-scrolled setzt
   der Waechter-Punkt in emeu-header.js (IntersectionObserver,
   Eintritt bei etwa 80px — Referenz-Fenster 60 bis 100px).
   Timing nach OpenAI-Referenz: kurzer Fade (150ms) mit kleinem
   Delay (60ms) = das bewusst harte, entschlossene Da-Sein.
   Feinkalibrierung am lebenden Objekt in Stufe 6.
   ============================================================ */

.emeu-header {
  color: var(--color-headline);
  /* Eigener Stapel-Raum (v1.3): position plus z-index bilden den
     Stacking-Context des Headers. Der Mega-Schleier liegt als KIND
     im Header auf Ebene -1: er malt per BAUART ueber allem, was vor
     dem Header gerendert ist (die Seite — wird weich), aber unter
     Header-Inhalt und Mega-Menue (bleiben scharf). Das traegt
     selbst dann, wenn eine Bricks-Element-Einstellung Position
     oder z ueberstimmt — JEDER positionierte z-Wert bildet den
     Kontext, den der Schleier braucht (v1.2-Lehre: die reine
     Klassen-Etage ohne Position war wirkungslos, weil z-index
     auf unpositionierten Elementen ignoriert wird).
     Bewusst KEIN isolation: das bildet nach Filter-Effects-Spec
     eine Backdrop-Wurzel und naehme dem Schleier die Sicht auf
     die Seite.
     v2.0 TELESKOP (Lumina-Konzept, GO 2026-07-04): der Leisten-
     Boden liegt nicht mehr als background-color am Element,
     sondern als eigene Flaeche emeu-header__surface — GSAP faehrt
     sie zusammen mit dem Mega-Panel als EINEN Stab (emeu-header.js
     v2.0). Der fruehere Fade-Hover plus is-scrolled-Boden sind
     dadurch abgeloest. */
  position: relative;
  z-index: 9000;
}

/* Leisten-Boden = GLAS (v3.0, Lumina-Setzung 2026-07-04): fester,
   halbtransparenter Boden mit Weichzeichnung des Dahinter. Die
   fruehere Transparenz-Ruhe plus Hover-Scroll-Schaltung ENTFAELLT
   vollstaendig — der Design-Schnitt loest Doppel-Rueckzug und
   Oeffnungs-Pop an der Wurzel (Sonden-Beleg: Nur-Mega-Fahrten
   waren durchgehend butterweich). Farbwerte pro Welt ueber die
   header-glass-Token in den Welt-Bloecken (Layer 3).
   WICHTIG, Backdrop-Wurzel-Lehre 2026-07-04: das Glas liegt auf
   DIESER Kind-Schicht, niemals am Header-Element selbst — sonst
   erblindet der Mega-Schleier (dessen backdrop-filter saehe die
   Seite nicht mehr). Die feine Unterkante gehoert zur Glas-
   Anatomie (Definition auf unruhigen Heros) — auf Zuruf abschaltbar. */
.emeu-header__surface {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* v4.0 WELT-GRUND (Lumina-Setzung Headline-First, 2026-07-04):
     Seiten starten mit der grossen Headline auf ruhigem Grund —
     die Leiste sitzt nie mehr ueber einem Bild. Ihr Boden ist der
     Welt-Grund: am Seitenanfang unsichtbar (Grund auf Grund),
     beim Scrollen der stabile Schild. Die GLAS-Variante bleibt
     geparkt (Token header-glass-* in den Welt-Bloecken plus der
     auskommentierte Block hier). */
  background-color: var(--color-bg-page);
  /* Geparkte Glas-Variante (v3.0):
  background-color: var(--header-glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid var(--header-glass-line);
  */
  pointer-events: none;
}

/* Bricks-Sticky-Header-Korrektur (Lumina-Fund 2026-07-04):
   die Template-Funktion "Sticky Header" generiert
   #brx-header.brx-sticky mit z-index 998 und ueberstimmt damit
   per ID-plus-Klasse JEDE Autoren-Etage — Luminas 9999-Setzung
   ebenso wie jede Klassen-Regel. Gleicher Selektor hier, spaeter
   geladen: stellt die beabsichtigte Etage dauerhaft wieder her
   (kein manueller Eingriff in generierte Regeln noetig). */
#brx-header.brx-sticky {
  z-index: 9999;
}

/* Scroll-Einfrieren bei aktivem Mega (Lumina-Wunsch 2026-07-04):
   die Klasse setzt emeu-header.js zusammen mit dem Lenis-Stopp
   (window.emeuLenis). scrollbar-gutter reserviert die Leisten-Spur
   DAUERHAFT, damit die Seite beim Sperren nicht um die Scrollbar-
   Breite springt (Nebeneffekt: sehr kurze Seiten zeigen die leere
   Spur ebenfalls — bewusst in Kauf genommen). */
html {
  scrollbar-gutter: stable;
}

html.emeu-scroll-lock {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .emeu-header {
    transition: none;
  }
}

/* ---- Stufe 3: Mega-Menue-Choreographie (S069) ----
   Spike-Befund am Bricks-Substrat: das Nested-Nav toggelt die Klasse
   "open" am .brxe-dropdown (alle Modi), der Inhalt bleibt im Layout
   (opacity/visibility, KEIN display-Wechsel) mit eigener 0.2s-Transition.
   Konsequenz: die Drei-Phasen-Choreographie laeuft KOMPLETT in CSS —
   das streng-rueckwaerts-Abspielen entsteht durch GETAUSCHTE Delays
   pro Zustand (oeffnen: Flaeche, Blur, Inhalt — schliessen: Inhalt,
   Blur, Flaeche). GSAP wird in dieser Stufe nicht gebraucht
   (Plan-Verfeinerung nach Spike). Nur Desktop — Mobile hat eigene
   Menue-Mechanik (Stufe 5). Alle Zeiten sind Startwerte fuer die
   Stufe-6-Kalibrierung. */
@media (min-width: 992px) {

  /* Panel-Anker-Hinweis (v1.4 zurueckgebaut, 2026-07-04): die tote
     Fuge zwischen Menuepunkt und Panel (Blur-Streifen plus Hover-
     Abriss) entstand durch Bricks' Submenu-Offset-Funktion, die
     per TRANSLATE verschiebt. Geloest auf Bricks-Seite (Lumina):
     translate raus, stattdessen Padding-Bruecke an der inneren
     Mega-Sektion plus Background erst auf innerer Ebene — der
     Panel-Bereich gehoert damit durchgehend zum Hover-Baum des
     Menuepunkts, keine tote Zone. Ein CSS-seitiger Static-Anker
     (v1.4-Entwurf) wuerde mit der Padding-Bruecke KOLLIDIEREN
     (Doppel-Versatz) und bleibt deshalb draussen. */

  /* Glied 2 — das MEGA-PANEL. v2.0: GSAP ist der EINZIGE Fahrer
     (Teleskop-Sequenz in emeu-header.js) — die frueheren CSS-
     Uebergaenge sind stillgelegt, damit nie zwei Haende am selben
     Lenkrad ziehen. Bricks' eigene 0.2s-Transition wird hier im
     Scope neutralisiert; Sichtbarkeit verwaltet die Sequenz. */
  .emeu-header .brxe-dropdown > .brx-dropdown-content {
    clip-path: inset(0 0 100% 0);
    opacity: 1;
    visibility: hidden;
    transition: none;
    /* v2.2 (Lumina-Fund am Bricks-Basis-CSS): das Panel malt von
       Haus aus WEISS (#fff) — sichtbar ueberall, wo die innere
       Mega-Sektion nicht deckt, insbesondere in der transparenten
       Padding-Bruecken-Zone, und beim Rueckzug faehrt diese weisse
       Kante sichtbar mit. Transparent gestellt: die EINZIGE
       sichtbare Flaeche ist die innere Sektion (eine Quelle der
       Sichtbarkeit, wie ueberall im System). */
    background-color: transparent;
  }

  /* Phase 3 ENTFERNT (v2.2, Lumina-Fund 2026-07-04): die Inhalts-
     Erscheinen-Regel (Kinder des Panels auf opacity 0 mit Fade bei
     .open) KOLLIDIERTE mit der Padding-Bruecken-Loesung — seit der
     Mega-HINTERGRUND auf der inneren Ebene liegt, war der Hinter-
     grund-Traeger selbst ein Kind des Panels: die Regel blendete
     ihn aus, die Teleskop-Maske lief auf einem durchsichtigen
     Container, die Fahrt war unsichtbar (nur spaeter Fade), und
     beim Schliessen verschwand der Hintergrund per Fade GETRENNT
     vom Rueckzug. Der Inhalt faehrt jetzt MIT der Maske (die
     Enthuellung durch die Flaeche ist das Erscheinen). Ein feines
     Inhalts-Nachziehen kommt spaeter als Politur auf der richtigen
     Tiefen-Ebene — NACH dem sitzenden Stab, nie am Hintergrund-
     Traeger. */
}

/* Phase 2 — der WEICHZEICHNER als Backdrop-Schleier (v1.1, S069).
   LEHRE aus dem ersten Wurf: ein filter auf einem VORFAHREN macht
   diesen per CSS-Spezifikation zum Positions-Anker fuer fixierte
   Nachfahren — der fixierte OHIC-Hero verlor beim Blur seinen
   Viewport-Anker, die Sektionen rissen auf (Lumina-Fund 2026-07-04,
   Canvas Ansicht-der-Zustaende). Deshalb blurt jetzt ein fixierter
   SCHLEIER (backdrop-filter) das gerenderte Bild unter sich, statt
   Elemente anzufassen: keine Geometrie-Aenderung, OHIC bleibt
   intakt — und der fixierte Hero wird mit-geblurt, was visuell
   sogar korrekter ist. Den Schleier legt emeu-header.js einmalig
   in den Body; die Body-Klasse emeu-mega-open schaltet ihn.
   z-Index unter Header und Mega (9999 plus), ueber dem Content.
   Oeffnen: Delay 80ms. Schliessen: mittlere Position, Schleier
   klappt nach dem Ausblenden weg (340ms). */
.emeu-mega-backdrop {
  position: fixed;
  inset: 0;
  /* Kind des Headers (v1.3, emeu-header.js haengt ihn DORT ein):
     Ebene -1 im isolierten Header-Kontext = ueber der Seite,
     unter Nav und Mega. fixed inset 0 deckt weiter den ganzen
     Viewport (der Header traegt keinen transform/filter, der
     die Fixierung einfangen wuerde). */
  z-index: -1;
  pointer-events: none;
  visibility: hidden;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition:
    -webkit-backdrop-filter 240ms ease 100ms,
    backdrop-filter 240ms ease 100ms,
    visibility 0ms linear 340ms;
}

body.emeu-mega-open .emeu-mega-backdrop {
  visibility: visible;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
    -webkit-backdrop-filter 280ms ease 80ms,
    backdrop-filter 280ms ease 80ms,
    visibility 0ms linear 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .emeu-header .brxe-dropdown > .brx-dropdown-content,
  .emeu-mega-backdrop {
    transition: none;
  }
}

/* ============================================================
   REVEAL-WINDOW (v1.0 — S069, Editorial-Opening)
   Dritte Variante der Reveal-Familie (epem-51-05: Vorhang,
   Frame — plus jetzt FENSTER). Rejouice-Rezept, frame-forensisch
   verifiziert am Original (2026-07-04): das Medium KLEBT am
   Viewport, waehrend die Fenster-Sektion durchlaeuft — die Hero-
   Sektion davor gibt es durch ihre eigene Abfahrt frei (der
   Anschnitt am Seitenstart entsteht allein durch Hero-Hoehe
   UNTER 100vh: Hero 80vh ergibt 20vh Streifen), und die Folge-
   Sektion schiebt sich per Ueberlapp DRUEBER, solange es noch
   klebt (Vorhang-Abgang mit Parallax-Eindruck).
   REINE SCROLL-GEOMETRIE: kein JavaScript, keine Animations-Uhr —
   damit immun gegen die komplette Uhren-Problem-Familie des
   Abends. Loest auch das 140-Prozent-Raetsel: Ueberhoehe braucht
   nur der Wander-Inhalt-Weg, der Klebe-Weg nicht.
   NUTZUNG (Bricks-Seite):
   - Hero-Sektion davor:  Klasse reveal-window-start, OPAKER
     Welt-Grund, Hoehe unter 100vh (steuert den Anschnitt)
   - Fenster-Sektion:     Klasse reveal-window (transparent
     lassen); Ueberlapp pro Instanz via --rw-overlap im CSS-Tab
   - Media-Wrapper darin: Klasse reveal-window__media, Inhalt
     ist unser Loop-Video (emeu_loop_video) oder Bild mit cover
   - Folge-Sektion:       Klasse reveal-window-follower, OPAKER
     Welt-Grund
   Etagen und Positionen leben KOMPLETT in diesen Klassen —
   keine z- oder Positions-Eingriffe an Elementen (Tages-Lehre).
   ============================================================ */

.reveal-window {
  --rw-overlap: 50vh; /* wie lange das Vollbild steht, waehrend der Vorhang drueberzieht */
  /* v1.1 UNTERLEGUNG (Lumina-Testbefund 2026-07-04): das Fenster
     rutscht per Negativ-Margin UNTER die Hero-Sektion. Damit
     beginnt es an der Seiten-Oberkante, das Medium KLEBT ab dem
     ERSTEN Pixel am Viewport (100vh-Buehne hinter dem opaken
     Hero) — die Anschnitt-Luecke zeigt eine STEHENDE Szene und
     gibt sie beim Scrollen nach OBEN hin frei. Ohne Unterlegung
     hing das Medium am Sektions-Anfang unterhalb der Falz: man
     sah seine OBERSTEN Zentimeter, mitwandernd — der Fehler.
     PAAR-WERT 2: --rw-under MUSS der Hero-Hoehe entsprechen
     (Standard 80vh passt zum Rezept-Beispiel; bei 88vh-Hero im
     CSS-Tab der Fenster-Sektion: root { --rw-under: 88vh; }). */
  --rw-under: 80vh;
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--rw-under));
  height: calc(100vh + var(--rw-under) + var(--rw-overlap));
}

.reveal-window__media {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  flex-shrink: 0; /* Bricks-Flex-Spalten-Schutz (Labor-Befund S069) */
}

.reveal-window__media > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reveal-window-start {
  position: relative;
  z-index: 2;
}

.reveal-window-follower {
  position: relative;
  z-index: 2;
  /* PAAR-WERT-REGEL: der Ueberlapp ist ein Paar aus Fenster-Hoehe
     und Follower-Einzug. Standard 50vh passt ohne Zutun. Bei
     abweichendem Wunsch --rw-overlap auf BEIDEN Sektionen setzen
     (CSS-Tab: root { --rw-overlap: 70vh; }) — die Variable erbt
     nicht zwischen Geschwister-Sektionen. */
  margin-top: calc(-1 * var(--rw-overlap, 50vh));
}

/* ============================================================
   PARALLAX-REVEAL CENTER-VARIANTE (v1.0 — S069)
   Die dritte Fahr-Art des S024d-Reveal-Systems (Vorhang, Frame —
   plus jetzt CENTER). Rejouice-Rekonstruktion nach Lumina-Modell:
   die sichtbar werdende Partie zeigt IMMER nahe der BILD-MITTE —
   der Ausschnitt waechst gefuehlt symmetrisch um das Zentrum,
   das Medium bewegt sich dafuer mit etwa halbem Scroll-Tempo mit
   (der Parallax-Eindruck IST der Effekt). Antrieb: hero-parallax.js
   Variante isCenter (Gegenlauf plus-minus 14.2857 Prozent, scrub).
   MITTEN-RESERVE: das Innere ist 140 Prozent hoch und um 20
   Prozent nach oben versetzt — 20vh Luft je Seite, exakt der
   Fahrweg des Gegenlaufs. Das ist die historische 140-Prozent-
   Erkenntnis aus den fruehen Rejouice-Arbeiten (S024d-Umfeld),
   jetzt persistiert.
   BASIS-QUARTETT hier defensiv mitdefiniert (Original laut
   epem-51-05 als Bricks-Global-Classes angelegt — diese Regeln
   tragen das System auch ohne sie; Doppel-Definition ist harmlos).
   NUTZUNG (Bricks-Seite):
   - Hero-Sektion:   Klasse parallax-reveal-start, opaker Grund,
     Hoehe unter 100vh (Anschnitt-Regler)
   - Fenster-Sektion: Klassen parallax-reveal plus
     parallax-reveal--center, KEINE eigene Hoehe, kein Padding
   - Div darin:      Klasse parallax-reveal__inner, darin das
     Medium (Loop-Video oder Bild, fuellt via cover)
   - Folge-Sektion:  Klasse parallax-reveal-follower, opaker Grund
   ============================================================ */

.parallax-reveal-start {
  position: relative;
  z-index: 2;
}

.parallax-reveal {
  position: relative;
  z-index: 1;
  height: 100vh;
  overflow: hidden;
}

.parallax-reveal__inner {
  width: 100%;
  height: 100%;
  will-change: transform;
}

.parallax-reveal-follower {
  position: relative;
  z-index: 2;
}

/* Center-Variante: Mitten-Reserve am Inneren (Spezifitaet 0,2,0
   gewinnt bewusst gegen die Bricks-Global-Class-Definition) */
.parallax-reveal--center .parallax-reveal__inner {
  position: relative;
  top: -20%;
  height: 140%;
  /* Bricks-Sektionen sind Flex-Spalten: ohne shrink-Verbot wuerde
     das 140-Prozent-Kind auf Container-Hoehe zurueckkomprimiert
     (Labor-Befund S069) — die Kaskade gewinnt, Flex verliert trotzdem */
  flex-shrink: 0;
}

.parallax-reveal--center .parallax-reveal__inner > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   LABEL WORKER-KLASSEN (v2.0 — S027)
   Manuell in Bricksbuilder anwendbar
   ============================================================ */

.form-label-group {
  font-size:      var(--form-label-group-size);
  line-height:    var(--form-label-group-lh);
  font-weight:    var(--form-label-group-weight);
  letter-spacing: var(--form-label-group-ls);
  text-transform: var(--form-label-group-transform);
  color:          var(--color-text-muted);
  margin-bottom:  var(--form-label-group-margin-bottom);
  display:        block;
}

.form-label-item {
  font-size:   var(--form-label-item-size);
  line-height: var(--form-label-item-lh);
  font-weight: var(--form-label-item-weight);
  color:       var(--color-text);
  cursor:      pointer;
  user-select: none;
  margin:      0;
}

.form-label-feedback {
  font-size:   var(--form-label-feedback-size);
  line-height: var(--form-label-feedback-lh);
  font-weight: var(--form-label-feedback-weight);
  color:       var(--color-text-muted);
  padding-top: var(--form-label-feedback-padding-top);
  display:     block;
}

.form-label-feedback--error,
.wsf-field-wrapper.wsf-validated .form-label-feedback {
  color: var(--color-error);
}

/* ============================================================
   LAYER 4: HEADER INVERT SYSTEM
   ============================================================ */
 
.site-header {
  transition:
    color var(--duration-medium, 300ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1)),
    background-color var(--duration-medium, 300ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1));
}
 
.site-header .nav-link {
  color: var(--color-nav-header-link);
  transition: color var(--duration-medium, 300ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1));
}

.site-header .nav-link:hover { color: var(--color-nav-header-link-hover); }
.site-header .nav-link.active,
.site-header .nav-link[aria-current="page"] { color: var(--color-nav-header-link-active); }
 
.site-header .logo {
  color: var(--color-headline);
  transition: color var(--duration-medium, 300ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1));
}
 
.site-header .cta {
  color: var(--color-headline);
  border-color: var(--color-border);
  transition:
    color var(--duration-medium, 300ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1)),
    border-color var(--duration-medium, 300ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1));
}

/* ============================================================
   emeu Link Arrow — Variante C (Rejouice-Style)
   Underline gleitet durch, Pfeil durchfliegt.
   Nutzt currentColor — erbt automatisch aus .on-dark / .on-light
   ============================================================ */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}

.link-arrow .link-arrow-text {
  position: relative;
}

.link-arrow .link-arrow-text::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.link-arrow:hover .link-arrow-text::after {
  transform-origin: left;
  animation: emeu-underline-through 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes emeu-underline-through {
  0%   { transform: scaleX(1); transform-origin: right; }
  49%  { transform: scaleX(0); transform-origin: right; }
  50%  { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

.link-arrow .link-arrow-icon {
  position: relative;
  width: 1em;
  height: 1em;
  overflow: hidden;
  flex-shrink: 0;
}

.link-arrow .link-arrow-icon svg {
  display: block;
  width: 1em;
  height: 1em;
}

.link-arrow .link-arrow-icon-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.link-arrow .link-arrow-icon-clone {
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  transform: translate(-100%, 100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.link-arrow:hover .link-arrow-icon-main {
  transform: translate(100%, -100%);
}

.link-arrow:hover .link-arrow-icon-clone {
  transform: translate(0, 0);
}

/* --- Variante: Headline-Links (groessere Schrift) --- */

.link-arrow-heading {
  font-size: var(--text-body);
  font-weight: 300;
  letter-spacing: 0.0125em;
}

/* --- Variante: Primary Accent Color --- */

.link-arrow-accent {
  color: var(--color-primary);
}

/* ============================================================
   emeu Link Underline — Through-Effekt (ohne Pfeil)
   ============================================================ */

.link-underline {
  text-decoration: none;
  position: relative;
  cursor: pointer;
}

.link-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.link-underline:hover::after {
  transform-origin: left;
  animation: emeu-underline-through 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* ============================================================
   emeu Link Swap — Text-Wechsel mit Stagger + Underline
   Nutzt currentColor — erbt automatisch aus .on-dark / .on-light
   
   Bricks / JetEngine Component:
   Klasse "link-swap" auf das <a>-Element setzen.
   Data-Attribute:
     data-primary="Sichtbarer Text"
     data-secondary="Hover Text"
   
   Varianten (zusätzliche Klasse):
     .link-swap-large    Grössere Schrift (Statement-Links)
   
   Das Script (link-swap.js) splittet die Buchstaben
   und erstellt die Underline automatisch.
   ============================================================ */

.link-swap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  color: currentColor;
  line-height: 1.4;
  padding-bottom: 5px;
}

.link-swap-inner {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.link-swap-primary {
  display: inline-flex;
  justify-content: center;
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.link-swap-secondary {
  display: inline-flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.link-swap-measure {
  display: inline-flex;
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
}

.link-swap-primary .char,
.link-swap-secondary .char {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  white-space: pre;
}

.link-swap:hover .link-swap-primary {
  transform: translateY(-100%);
}

.link-swap:hover .link-swap-secondary {
  transform: translateY(0);
}

.link-swap:hover .link-swap-primary .char {
  transform: translateY(-15%);
}

.link-swap:hover .link-swap-secondary .char {
  transform: translateY(-15%);
}

.link-swap-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 1px;
  background: currentColor;
  transition: width 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

/* --- Variante: Groessere Links --- */

.link-swap-large {
  font-size: 22px;
  font-weight: 200;
  letter-spacing: -0.02em;
}

/* ============================================================
   UTILITY: sticky-bottom
   Haelt ein Element am unteren Rand seiner Sektion.
   Letztes sichtbares Element beim Scrollen (Hero-Footer Pattern).
   ============================================================ */

.sticky-bottom {
  position: sticky;
  bottom: 0;
}

/* ============================================================
   ENTFERNT 2026-08-29 (Lumina-Setzung, Slider-Legacy):
   UNIT Three Media Drag Slider (S027) plus altes HOVER-FX-SYSTEM (S028)
   auf dem .drag-slider__*-Namespace — ersetzt durch das Modul
   mu-plugins/emeu-drag-slider (eigener Namespace emeu-drag-slider__*,
   eigene Assets inkl. hover-fx-Bindung). Sicherung: emeu-context.css.alt-20260829
   ============================================================ */