/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      2.1
 Text Domain:  bricks
*/

/* ==========================================================================
   LAYER 1: FONT FACE — CUSTOM FONTS - Mont (CI-Font) & BD Megalona

   Mont: Premium Corporate Identity Font
   - 6 Weights (100-900) + Italic Varianten
   - Wird als Standard-Font für body verwendet
   - Bricks Theme Styles überschreiben bei expliziter Auswahl

   BD Megalona: Ergänzende Serif-Font
   - Nur Regular Weight
   ========================================================================== */

/* --------------------------------------------------------------------------
   MONT - Normal Weights
   -------------------------------------------------------------------------- */

/* Mont Thin (100) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-100.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-100.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* Mont Light (300) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-300.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-300.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Mont Regular (400) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-Regular.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Mont SemiBold (600) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-600.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-600.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Mont Bold (700) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-700.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-700.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Mont Black (900) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-900.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-900.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   MONT - Italic Weights
   -------------------------------------------------------------------------- */

/* Mont Thin Italic (100) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-Italic-100.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-Italic-100.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

/* Mont Light Italic (300) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-Italic-300.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-Italic-300.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* Mont Regular Italic (400) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-Italic-Regular.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-Italic-Regular.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Mont SemiBold Italic (600) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-Italic_600.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-Italic_600.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* Mont Bold Italic (700) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-Italic-700.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-Italic-700.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Mont Black Italic (900) */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/mont/Mont-Latin-Italic-900.woff2') format('woff2'),
         url('assets/fonts/mont/Mont-Latin-Italic-900.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   BD MEGALONA - Serif Font
   -------------------------------------------------------------------------- */

/* BD Megalona Regular */
@font-face {
    font-family: 'BD Megalona';
    src: url('assets/fonts/bdmegalona/BDMegalona-Regular.woff2') format('woff2'),
         url('assets/fonts/bdmegalona/BDMegalona-Regular.woff') format('woff'),
         url('assets/fonts/bdmegalona/BDMegalona-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   NOTO SANS — Google Variable Font (Sans-Serif)
   Eine Datei mit Weight-Axis (100-900) plus Width-Axis (62.5%-100%).
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Noto Sans';
    src: url('assets/fonts/noto_sans/NotoSans-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 62.5% 100%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('assets/fonts/noto_sans/NotoSans-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 62.5% 100%;
    font-style: italic;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   NOTO SERIF — Google Variable Font (Serif)
   Eine Datei mit Weight-Axis (100-900) plus Width-Axis (62.5%-100%).
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Noto Serif';
    src: url('assets/fonts/noto_serif/NotoSerif-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 62.5% 100%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('assets/fonts/noto_serif/NotoSerif-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 62.5% 100%;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   DEFAULT TYPOGRAPHY

   Theme-Default-Font wird vom WordPress-Admin gesteuert (Appearance >
   Theme-Font). Die CSS-Variable --font-family-default wird via wp_head
   in functions.php gesetzt — Default-Fallback ist Mont.
   Bricks Theme Styles überschreiben diese Einstellungen wenn explizit gesetzt.
   ========================================================================== */

body {
    font-family: var(--font-family-default, 'Mont'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

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

/* ============================================================
   LAYER 3: CONTEXT COLOR SYSTEM (v4.0 — Walmart-Konzept, 2026-06-06)
   Verschlankt: die kanonischen Komponenten-Variablen zeigen direkt
   auf die warme Graustufen-Skala (--aic--gray-*) plus --signal aus
   der Bricksbuilder Color Palette. Gestrichene Token bleiben als
   Alias-Bruecke (Backward-Compat) bis zur Bestand-Migration.

   Sections im Bricks bekommen die Klasse .on-dark oder .on-light.
   Widgets in der Section bekommen Worker-Klassen wie .color-headline,
   .color-nav-header-link etc., die ueber die hier definierten
   Komponenten-Variablen die richtige Farbe pro Modus erhalten.

   Familien: Text-Hierarchie, Backgrounds, Borders, Links, Navigation
   (Header + Footer getrennt), Buttons (Primary + Secondary), States.
   ============================================================ */

body,
.on-light,
body:has(.header-world--light) .emeu-header {
  /* ===== AIC v4.0 Color-Tokens (Walmart-Konzept, 2026-06-06) =====
     Verschlankt: Headline/Body/Icon/Muted, bg/bg-card, border(+subtle),
     Primary(+hover/on/accent), btn-solid, States. Werte auf der warmen
     Graustufen-Skala (--aic--gray-*) plus --signal. Architektur bleibt. */

  /* Backgrounds */
  --color-bg:        var(--aic--gray-100);   /* #f5f4ed */
  --color-bg-card:   var(--aic--gray-050);   /* #faf9f5 */

  /* Text — Headline, Body, Icon, Muted */
  --color-headline:  var(--aic--gray-950);   /* #141413 */
  --color-body:      var(--aic--gray-650);   /* #4d4c48 */
  --color-icon:      var(--color-body);
  --color-muted:     var(--aic--gray-600);   /* #5e5d59 */

  /* Borders — Default plus subtiler Divider */
  --color-border:         var(--aic--gray-300);   /* #d1cfc5 */
  --color-border-subtle:  var(--aic--gray-200);   /* #e8e6dc */

  /* Primary / CI */
  --color-primary:        var(--signal);          /* #00e5ff */
  --color-primary-hover:  var(--signal-d-1);
  --color-on-primary:     var(--aic--gray-950);   /* #141413 */
  --color-primary-accent: var(--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 (Outline = border + transparent, Komposition) */
  --color-btn-solid:        var(--aic--gray-300);   /* #d1cfc5 */
  --color-btn-solid-hover:  var(--aic--gray-350);   /* #c2c0b6 */

  /* Buttons — Knopf-Pille (Inversion-Prinzip, S068 2026-07-03):
     maximale Praesenz in BEIDEN Welten — dunkle Pille auf light,
     invertiert helle Pille auf dark (OpenAI-Referenz-Muster).
     Die Namen sind exakt die vom Bricks-Style-Manager konsumierten
     Variablen; diese Kontext-Werte ueberstimmen die :root-Fallbacks. */
  --button-rounded-bg:        var(--aic--gray-950);   /* #141413 */
  --button-rounded-bg__hover: var(--aic--gray-700);   /* #3d3d3a — 5 Stufen Richtung Mitte (Feinjustierung 2026-07-04) */
  --button-rounded-text:      var(--aic--gray-050);   /* #faf9f5 */

  /* Header-Glas (v3.0, Lumina-Setzung 2026-07-04): fester Glas-Boden
     statt Transparenz-plus-Hover-Scroll-Schaltung */
  --header-glass-bg:    rgba(250, 249, 245, 0.72);
  --header-glass-line:  rgba(20, 20, 19, 0.08);

  /* States */
  --color-success:  var(--signal-green-d-2);
  --color-error:    var(--signal-red-d-2);
  --color-warning:  var(--signal-orange-d-2);
  --shadow-focus:   rgba(0, 229, 255, 0.2);

  /* ===== Alias-Bruecke (Backward-Compat; faellt mit der Bestand-Migration weg) ===== */
  --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-focus-ring:                var(--color-primary);
  --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);
}

.on-dark,
body:has(.header-world--dark) .emeu-header {
  /* ===== AIC v4.0 Color-Tokens (Walmart-Konzept, 2026-06-06) =====
     Header-Welt-Schaltung (S069): der has-Selektor gibt dem Header
     das komplette Welt-Token-Set, wenn irgendwo auf der Seite der
     Marker header-world--dark liegt (reine Marker-Klasse, property-
     waehlbar auf leerem Div — Lumina-Vehikel 2026-07-04). Default
     ohne Marker: Header erbt die body-Welt (light). Stehen beide
     Marker (Autoren-Fehler), gewinnt dark (spaeterer Block). */

  /* Backgrounds */
  --color-bg:        var(--aic--gray-950);   /* #141413 */
  --color-bg-card:   var(--aic--gray-900);   /* #1a1918 */

  /* Text — Headline, Body, Icon, Muted */
  --color-headline:  var(--aic--gray-050);   /* #faf9f5 */
  --color-body:      var(--aic--gray-400, var(--aic--gray-40));   /* #b0aea5 (Palette-Typo gray-40, Fallback bis Fix) */
  --color-icon:      var(--color-body);
  --color-muted:     var(--aic--gray-500);   /* #87867f */

  /* Borders */
  --color-border:         var(--aic--gray-700);   /* #3d3d3a */
  --color-border-subtle:  var(--aic--gray-800);   /* #292827 */

  /* Primary / CI */
  --color-primary:        var(--signal);          /* #00e5ff */
  --color-primary-hover:  var(--signal-d-1);
  --color-on-primary:     var(--aic--gray-950);   /* #141413 */
  --color-primary-accent: var(--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 */
  --color-btn-solid:        var(--aic--gray-750);   /* #30302e */
  --color-btn-solid-hover:  var(--aic--gray-700);   /* #3d3d3a */

  /* Buttons — Knopf-Pille (Inversion-Prinzip, S068): invertiert —
     warm-weisse Pille auf dunkler Welt, Hover dimmt Richtung warm */
  --button-rounded-bg:        var(--aic--gray-050);   /* #faf9f5 */
  --button-rounded-bg__hover: var(--aic--gray-300);   /* #d1cfc5 — 5 Stufen Richtung Mitte, symmetrisch zu on-light (2026-07-04) */
  --button-rounded-text:      var(--aic--gray-950);   /* #141413 */

  /* Header-Glas (v3.0): dunkle Welt */
  --header-glass-bg:    rgba(20, 20, 19, 0.66);
  --header-glass-line:  rgba(250, 249, 245, 0.10);

  /* States */
  --color-success:  var(--signal-green);
  --color-error:    var(--signal-red);
  --color-warning:  var(--signal-orange);
  --shadow-focus:   rgba(0, 229, 255, 0.25);

  /* ===== Alias-Bruecke ===== */
  --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-focus-ring:                var(--color-primary);
  --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);
}

/* ============================================================
   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 */
  --form-field-height:               50px;
  --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 --- */
.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;
}

/* ============================================================
   UNIT: Three Media Drag Slider (S027, 2026-04-19)
   Wiederverwendbare Unit im Unit-Namespace-Pattern
   (siehe epem-51-04 Section 2 "Unit-Namespace-Pattern").

   Namespace: .three-media-drag-slider__*
   Script-Hook (Ebene 4): .drag-slider plus optional .drag-slider--infinite

   Use-Case: Storytelling-Media, Video-Reel, Bild-Serien mit 16/9 Aspect
   und drei Items fuer Infinite-Loop.
   ============================================================ */

.three-media-drag-slider__content__slider .drag-slider__track {
  /* Track-Hoehe ergibt sich aus aspect-ratio der Items */
  height: auto;
}

.three-media-drag-slider__content__slider .drag-slider__item {
  flex-shrink: 0;
  width: 41vw;
  aspect-ratio: 16 / 9;
  height: auto;
  overflow: hidden;
}

/* Breakpoint-Staffelung — Items werden relativ groesser auf kleineren
   Viewports, damit sie auch auf engen Screens praesent bleiben.
   Basis-Vorlage: 1050 mal 596 bei 2544px Viewport (entspricht 41vw). */

@media (max-width: 1279px) {
  /* BP-B Compact */
  .three-media-drag-slider__content__slider .drag-slider__item {
    width: 45vw;
  }
}

@media (max-width: 1024px) {
  /* BP-D Tablet */
  .three-media-drag-slider__content__slider .drag-slider__item {
    width: 55vw;
  }
}

@media (max-width: 899px) {
  /* BP-E Tablet Portrait */
  .three-media-drag-slider__content__slider .drag-slider__item {
    width: 65vw;
  }
}

@media (max-width: 600px) {
  /* BP-F Mobile + BP-G Mobile klein */
  .three-media-drag-slider__content__slider .drag-slider__item {
    width: 85vw;
  }
}

/* Content-Helfer: Bilder und Videos fuellen das 16/9-Feld via object-fit */
.three-media-drag-slider__content__slider .drag-slider__item > img,
.three-media-drag-slider__content__slider .drag-slider__item > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   HOVER-FX-SYSTEM (S028, 2026-04-20)
   Worker-Klassen am Slider-Container steuern die Hover-Animation.
   Drei Varianten: corporate, cinema, editorial.
   Kein FX-Klasse = kein Hover-Effekt (roh wie Standard).
   ============================================================ */

/* Base: Item ist Positioning-Context fuer Overlay */
.drag-slider__item {
  position: relative;
}

/* Overlay-Wrapper — sitzt ueber dem Bild/Video */
.drag-slider__item__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

/* Headline im Overlay — Start-Position unten mit translateY */
.drag-slider__item__headline {
  transform: translateY(20px);
  color: #FFFFFF;
  font-size: clamp(1.25rem, 1.5vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}

/* Pseudo-Element-Opacity wird via CSS-Variable animiert
   (GSAP kann CSS-Variablen auf Element animieren, nicht auf Pseudo direkt) */

/* --- Variante A: Corporate (hover-fx--corporate) ---
   Gradient-Overlay von unten, Sibling-Darken */
.hover-fx--corporate .drag-slider__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(5, 12, 16, 0.85) 0%,
    rgba(5, 12, 16, 0.4) 50%,
    rgba(5, 12, 16, 0) 100%
  );
  opacity: var(--fx-pseudo-opacity, 0);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* --- Variante B: Cinema (hover-fx--cinema) ---
   Scale-Up + Sibling-Blur */
.hover-fx--cinema .drag-slider__item {
  transform-origin: center;
  will-change: transform, filter;
}

.hover-fx--cinema .drag-slider__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 60%,
    rgba(5, 12, 16, 0) 40%,
    rgba(5, 12, 16, 0.75) 100%
  );
  opacity: var(--fx-pseudo-opacity, 0);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* --- Variante C: Editorial (hover-fx--editorial) ---
   Vignette + Sibling-Grayscale */
.hover-fx--editorial .drag-slider__item {
  will-change: filter;
}

.hover-fx--editorial .drag-slider__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(5, 12, 16, 0) 50%,
    rgba(5, 12, 16, 0.5) 100%
  );
  opacity: var(--fx-pseudo-opacity, 0);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}