/*
 * ============================================================
 * EMEU HAND-WORKERS — die hand-gepflegte Schwester-Schicht
 * ============================================================
 * Heimat fuer kleines, wiederverwendbares Worker-Vokabular, das
 * bewusst NICHT durch den Generator laeuft (Lumina-Setzung
 * 2026-08-17). AUFGERAEUMT 2026-08-19 (Lumina-Auftrag sauberer
 * Start): MAAG-Bloecke entfernt, Farb-Verweise auf die Elementor-
 * Kit-Variablen (--dna-*, --neutral-*) umgestellt — das Kit ist
 * die Farb-Wahrheit, die Hand-Schicht nur Konsument.
 *
 * PFLEGE-WEGE: Backend-Editor "EMEU Workers" (Baustein
 * emeu-worker-editor.php, nur Administratoren, sichert vor jedem
 * Speichern) ODER direkt als Datei. Die Datei reist im
 * mu-plugins-Voll-Paket — Werkbank und Live per Upload deckungs-
 * gleich, schnelle Live-Edits zwischen Uploads per Editor plus
 * Copy-Paste-Abgleich.
 *
 * KONVENTION (die Chaos-Bremse):
 * - Praefix .w- fuer jede neue Worker-Klasse (eigener Namensraum,
 *   kollisionsfrei zu Themes, Elementor und anderen Schichten)
 * - EIN Eintrag pro Worker: Kommentar-Zeile mit Zweck plus
 *   Einsatz-Ort, darunter die Regel(n)
 * - Sektionen nach Familien: FARBWELTEN (Element-Ebene) / LAYOUT /
 *   ABSTAND / BILD / TEXT / SICHTBARKEIT / ELEMENTOR-ANPASSUNGEN
 *   (builder-gebundene Regeln). Neue Familie nur wenn keine passt
 * - Farb-Werte aus den KIT-Variablen (var(--dna-..., #fallback)
 *   bzw. var(--neutral-d-N, #fallback)) — das Elementor-Kit ist
 *   die einzige Farb-Quelle; nackte Werte nur wo kein Kit-Ton
 *   existiert
 * - Was hier NICHT wohnt: Brand-Wahrheiten (Kit), Widget-
 *   Einzelfaelle (Widget-Regler), Seiten-Sonderfaelle
 *
 * MUSTER-EINTRAG (als Vorlage, auskommentiert):
 * .w-beispiel-klasse {
 *     eigenschaft: wert;
 * }
 * ============================================================
 */

/* ============================================================
 * FARBWELTEN (Element-Ebene) — Grundset
 * ============================================================
 * Einzelne Elemente per Klasse in eine Farbwelt heben. Werte
 * kommen aus den KIT-Variablen (Elementor V4, Praefix dna-);
 * Fallback-Hex ist der Kit-Stand 2026-08-19. Paper wurde beim
 * Aufraeumen 2026-08-19 entfernt (kein dna-Ton im Kit — bei
 * Bedarf mit benanntem Kit-Ziel neu anlegen).
 *
 * NACHLEGE-MUSTER fuer Staffel-Stufen (bei Bedarf kopieren):
 * .w-bg-deep-green-d-2 { background-color: var(--dna-deep-green-d-2, #042c24); }
 * .w-text-signal-l-2   { color: var(--dna-signal-l-2, #efff6a); }
 */

/* Flaechen-Farben (Hintergrund) */
.w-bg-deep-green { background-color: var(--dna-deep-green, #063d33); }
.w-bg-messing    { background-color: var(--dna-messing, #aa9841); }
.w-bg-ink        { background-color: var(--dna-ink, #171916); }
.w-bg-signal     { background-color: var(--dna-signal, #e9ff2e); }

/* Text-Farben */
.w-text-deep-green { color: var(--dna-deep-green, #063d33); }
.w-text-messing    { color: var(--dna-messing, #aa9841); }
.w-text-ink        { color: var(--dna-ink, #171916); }
.w-text-signal     { color: var(--dna-signal, #e9ff2e); }

/* ===== LAYOUT ===== */

/* Leinwand-Ausrichtung (Lumina 2026-09-19 01:4x, Nachbau-Seiten): auf die
   Leinwand (w-section__canvas__max-width__1700) gesetzt, zentriert sie ihre
   Leinwand-Elemente; jedes Element bleibt so breit, wie seine Breiten-Klasse
   (inner-element__width__s, m, _l, _xl) erlaubt, weil der Konverter dem
   Element lokal Breite 100 Prozent gibt. Die Anatomie der Leinwand bleibt
   neutral; die Referenzseite 5836 setzt dasselbe 62-mal lokal je Leinwand.
   Schwester w-align-items__start erst bei einem Anwendungsfall. */
.w-align-items__center {
    align-items: center !important;
}

/* Zweispalter mit Textblock (Lumina 2026-09-19 02:0x, Punkt 2 des Durchgangs):
   die Struktur Spalte > Textblock > Kopf plus Inhalt > Knopfreihe als Worker,
   damit keine lokale Einstellung je Instanz noetig ist. Werte aus Amaras
   Nachbau (OpenAI-Adaption): Spaltenabstand fluid 28 bis 80 px, Textblock
   480 px ab Desktop, Luft Kopf zu Inhalt 20 px, Absatz zu Knopfreihe 30 px,
   Knoepfe 10 px, eine Spalte unter 720 px. Der Konverter setzt die Klassen
   aus zwei__text automatisch; Variante gestreckt (Kopf oben am Bildrand,
   Inhalt unten buendig) ueber zwei--gestreckt an der Reihe. */
.w-zweispalter {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: clamp(28px, 5vw, 80px) !important;
    align-items: center !important;
}

.w-zweispalter--gestreckt {
    align-items: stretch !important;
}

.w-zweispalter__spalte {
    display: flex !important;
    flex-direction: column !important;
    width: 50% !important;
    min-width: 0;
    gap: 12px !important; /* Bild zu Bildunterschrift (Amaras Nachbau 12 px) */
    align-items: center !important; /* Lumina 02:2x: der Textblock steht mittig in seiner Spalte, Vorgabe fuer alle Bild-Text-Baender */
    justify-content: center !important;
}

/* Kinder der Spalte bleiben volle Breite (Bild, Bildunterschrift linksbuendig unter dem Bild);
   der Textblock begrenzt sich selbst ueber max-width und steht dadurch mittig. */
.w-zweispalter__spalte > * {
    width: 100% !important;
}

.w-text-block {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 480px !important;
    gap: 20px !important;
}

.w-text-block--gestreckt {
    height: 100% !important;
    justify-content: space-between !important;
}

.w-text-block__kopf {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
}

.w-text-block__inhalt {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
}

.w-knopfreihe {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    align-self: stretch;
}

.w-knopfreihe--mitte {
    justify-content: center !important;
}

@media (max-width: 1024px) {
    .w-text-block { max-width: none !important; }
}

@media (max-width: 720px) {
    .w-zweispalter { flex-direction: column !important; }
    .w-zweispalter__spalte { width: 100% !important; }
}

/* Kacheln mit Kennzahlen und Steckbrief (Amaras zweite Nachbau-Seite, NISO 2026-09-19 02:4x,
   Werte aus ihrer Vorschau): zwei Spalten mit 20 px Luft, links der Steckbrief, rechts
   gestapelte Kacheln; eine Kachel = Karten-Grund (bg-card) plus Radius md plus dieses Polster;
   der Steckbrief ist ein Raster Bezeichnung / Wert. Unter 720 px eine Spalte. */
.w-kacheln {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    align-items: start !important;
}

.w-kacheln__spalte {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.w-kachel {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: clamp(20px, 2.4vw, 32px) !important;
}

.w-steckbrief {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 8px 16px !important;
    align-items: baseline !important;
}

/* Kacheln dreispaltig (Amaras vierte Seite 2026-09-19, Loesungs-Seite):
   Modifikator zu w-kacheln; unter 1024px zwei, unter 720px eine Spalte
   (Tablet-Stufe Annahme NISO). */
.w-kacheln--drei {
    grid-template-columns: 1fr 1fr 1fr !important;
}

/* Logo-Reihe (Amaras vierte Seite): gleich hohe Marken-Zeichen, mittig,
   umbrechend; Luft 24 px in der Zeile, 56 px zwischen den Zeichen
   (Amaras Mass am Original, Annahme). w-logo ist der Rahmen mit fester
   Hoehe 34 px; ein Bild darin folgt der Hoehe. Leerer Rahmen (Platzhalter
   bis zur Freigabe der Marken) traegt bg-card plus border__radius__sm. */
.w-logos {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 24px 56px !important;
}

.w-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    height: 34px !important;
    min-width: 150px !important;
    width: auto !important;
    max-width: none !important;
}

.w-logo img {
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
}

/* Kennzahlen-Reihe (Amaras vierte Seite): so viele Spalten, wie Posten
   ab 220 px Platz haben (drei bei drei Posten auf dem Desktop, eine auf dem
   Smartphone) — ohne Media-Query. Ein Posten = Wert (font__zahl__wert) ueber
   Was (font__zahl__was), 8 px Luft. */
.w-zahlen {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 24px !important;
    align-items: start !important;
}

.w-zahlen__posten {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Frage-Liste (Amaras vierte Seite): Linie oben, je Frage Linie unten,
   24 px Polster oben und unten, 12 px zwischen Frage und Antwort. Statische
   Fassung — das Aufklappen (Haus-Bewegung w-bewegung-aufklappen wohnt an
   <details>, Elementor-Flexbox kennt kein details) ist Setzung bei Lumina. */
.w-fragen {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border-top: 1px solid var(--color-border, #3d3d3d) !important;
}

.w-frage {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding-block: 24px !important;
    border-bottom: 1px solid var(--color-border, #3d3d3d) !important;
}

@media (max-width: 1024px) {
    .w-kacheln--drei { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 720px) {
    .w-kacheln,
    .w-kacheln--drei { grid-template-columns: 1fr !important; }
}

/* ===== ABSTAND ===== */

/* Kanten-Luft NUR auf Tablet und Mobil (Lumina-Setzung 2026-08-17):
   oberhalb 1024px ruehrt die Klasse nichts an; ab 1535px abwaerts
   32px, ab 600px abwaerts 24px links und rechts. Feste Werte seit
   dem Aufraeumen 2026-08-19 — die alte Token-Indirektion zeigte auf
   die abgeloeste Vorlagen-Schicht. */
@media (max-width: 1535px) {
    .w-edge-padding-mobil {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}
@media (max-width: 600px) {
    .w-edge-padding-mobil {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* Sektions-Innenabstand oben bzw. unten — FLUIDE FASSUNG
   (Lumina-Setzung 2026-08-21, ersetzt die Zwei-Stufen-Staffel vom
   2026-08-17): konstant 11rem ab 1780px Breite, fluide herunter bis
   5rem bei 600px, darunter konstant 5rem. Herleitung: 6rem Spanne
   ueber 1180px ergibt 8.136vw Steigung plus 1.949rem Grund-Anteil
   (Eckpunkte exakt getroffen, Kontrolle: 1190px = 8rem).
   Zwei getrennte Klassen, damit Top und Bottom unabhaengig vergeben
   werden koennen. important noetig, weil Elementors Element-Regeln
   sonst gewinnen (Lumina-Test-Empirie 2026-08-17). WOHNORT-REGEL:
   Diese Werte leben HIER (Pflege via emeu-worker-editor) — die
   gleichnamige Elementor-Klasse bleibt wert-LEER, sonst Doppel-
   Pflege ohne Wirkung (S113-Befund: important hier schlaegt jede
   Builder-Eingabe). */
.w-section-padding-top {
    padding-top: clamp(5rem, 1.949rem + 8.136vw, 11rem) !important;
}

.w-section-padding-bottom {
    padding-bottom: clamp(5rem, 1.949rem + 8.136vw, 11rem) !important;
}

/* Innen-Sektions-Abstand (Lumina-Auftrag 2026-08-23): exakt die
   HAELFTE der w-section-padding-Staffel — konstant 5.5rem ab
   1780px, fluide herunter bis 2.5rem bei 600px, darunter konstant
   2.5rem. Parameter halbiert (0.9745rem Grund-Anteil plus 4.068vw
   Steigung): Eckpunkte exakt getroffen, Kontrolle 1190px = 4rem
   (halbe Referenz-Kontrolle). Getrennte Top/Bottom-Klassen und
   important aus denselben Gruenden wie oben — das important ist
   zugleich der Schluessel durchs Anatomie-Padding-Schloss
   (Lumina-Entscheid 2026-08-23: Schloss bleibt, Abstaende laufen
   nur ueber Worker-Klassen). WOHNORT-REGEL wie oben: Werte leben
   HIER — die gleichnamigen Elementor-Klassen bleiben wert-LEER. */
/* TOKEN (2026-09-04, Lumina-Setzung Top-Padding fuer Seiten ohne
   regulaeren Header): die Innen-Staffel lebt EINMAL hier als Variable,
   die beiden Worker lesen sie, und die Anatomie liest sie fuer die
   WooCommerce-Block-Seiten (Warenkorb, Kasse) — eine Wahrheit, Wohnort
   unveraendert in der Hand-Schicht. */
:root {
    --w-inner-section-padding: clamp(2.5rem, 0.9745rem + 4.068vw, 5.5rem);
}

.inner-section__padding__top {
    padding-top: var(--w-inner-section-padding, clamp(2.5rem, 0.9745rem + 4.068vw, 5.5rem)) !important;
}

.inner-section__padding__bottom {
    padding-bottom: var(--w-inner-section-padding, clamp(2.5rem, 0.9745rem + 4.068vw, 5.5rem)) !important;
}

/* ===== POSITIONIERUNG ===== */

/* Absolute Zentrierung im positionierten Eltern (Lumina-Auftrag
   2026-08-23): left/top 50% beziehen sich auf die ELTERN-Groesse
   (Ecke auf Mitte), translate -50% auf die EIGENE Groesse
   (Rueckschub um die halbe Eigengroesse) — dadurch voll dynamisch,
   das Element darf seine Groesse jederzeit aendern. Das ELTERN-DIV
   braucht position relative (Anatomie-Ebenen tragen es bereits).
   KOLLISIONS-HINWEIS: transform ist belegt — laeuft auf demselben
   Element eine Animation mit transform, springt die Zentrierung;
   dann Animation auf ein inneres Kind legen oder die
   transform-freie Mitte (inset 0, margin auto, fit-content). */
.w-abs-center {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.w-abs-center-x {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.w-abs-center-y {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* ===== BUTTON-FORM ===== */

/* Radius-Familie fuer Buttons plus verlinkte Elemente (Lumina-Auftrag
   2026-08-23): der Radius wird in ALLEN VIER Interaktions-Zustaenden
   konstant gehalten — die V3-Kit-Welt kennt nur Normal plus Hover,
   V4 fuehrt Active und Focus getrennt; ohne Voll-Definition springt
   die Form nach dem Klick (Focus bleibt, Hover geht — der Zustand
   faellt auf fremde Werte). Gleiche Doktrin wie die Huepf-Heilung
   S111: Geometrie explizit pro Zustand. Der Kind-Durchgriff
   (border-radius inherit auf direkte a/button-Kinder) deckt den
   Fall, dass die Klasse an einem Wrapper sitzt und das
   Interaktions-Element innen wohnt — inherit folgt dem Traeger
   automatisch, bewusst KEIN overflow hidden (wuerde Focus-Ringe
   und Schatten clippen). Namens-Wahl circle statt round: neben
   rounded im Alltag unterscheidbar (Lumina-Alternative 2026-08-23).
   NAMENS-FAMILIE w-link__button-radius__* (Lumina-Konvention
   2026-08-23; die Erst-Familie w-radius-* wurde entfernt, nachdem
   deren Manager-Anlage nicht persistierte). */
.w-link__button-radius__small,
.w-link__button-radius__small:hover,
.w-link__button-radius__small:active,
.w-link__button-radius__small:focus,
.w-link__button-radius__small:focus-visible {
    border-radius: 8px !important;
}

.w-link__button-radius__small > a,
.w-link__button-radius__small > button {
    border-radius: inherit !important;
}

.w-link__button-radius__rounded,
.w-link__button-radius__rounded:hover,
.w-link__button-radius__rounded:active,
.w-link__button-radius__rounded:focus,
.w-link__button-radius__rounded:focus-visible {
    border-radius: 40px !important;
}

.w-link__button-radius__rounded > a,
.w-link__button-radius__rounded > button {
    border-radius: inherit !important;
}

.w-link__button-radius__circle,
.w-link__button-radius__circle:hover,
.w-link__button-radius__circle:active,
.w-link__button-radius__circle:focus,
.w-link__button-radius__circle:focus-visible {
    border-radius: 999px !important;
}

.w-link__button-radius__circle > a,
.w-link__button-radius__circle > button {
    border-radius: inherit !important;
}

/* ===== BILD ===== */

/* Bild-Relation (Lumina-GO 2026-08-19): erzwingt das Seitenverhaeltnis
   wie das native Bricks-Feld. aspect-ratio ergaenzt die FEHLENDE
   Dimension (Breite kommt aus dem Layout, Hoehe folgt der Relation),
   object-fit cover fuellt und beschneidet statt zu verzerren, height
   auto loest fest gesetzte Hoehen (sind beide Dimensionen explizit,
   wuerde die Ratio still ignoriert). Jede Klasse traegt einen
   Durchgriff-Zwilling fuers innere img — dadurch wirkt sie DIREKT
   am Bild (Atomic-Bild ist das img selbst) UND am Wrapper gewrappter
   Bilder (z.B. JetEngine Dynamic Image im Listing, auch durch den
   Link-Tag hindurch).

   NACHLEGE-MUSTER fuer weitere Relationen (bei Bedarf kopieren):
   .w-ratio-21-9, .w-ratio-21-9 img { aspect-ratio: 21 / 9; ... }     */
.w-ratio-16-9,
.w-ratio-16-9 img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.w-ratio-4-3,
.w-ratio-4-3 img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.w-ratio-1-1,
.w-ratio-1-1 img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.w-ratio-3-4,
.w-ratio-3-4 img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* 2:3 — Produktbilder des Marktplatzes (Lumina-Setzung 2026-09-18 20:0x; Shopseite 2026-09-22) */
.w-ratio-2-3,
.w-ratio-2-3 img {
    aspect-ratio: 2 / 3;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.w-ratio-9-16,
.w-ratio-9-16 img {
    aspect-ratio: 9 / 16;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* ===== TEXT ===== */

/* Zeilen-Umbruch ausbalancieren (Ueberschriften, kurze Absaetze).
   Bestand vor .w-Praefix-Konvention — Name bleibt, weil bereits
   im Einsatz. */
.text-wrap__balance {
    text-wrap: balance;
}

/* ============================================================
 * ELEMENTOR-ANPASSUNGEN — builder-gebundene Einzel-Regeln
 * ============================================================
 * Regeln an Elementor-eigenen Selektoren. Theme-neutral — sie
 * wirken ueberall, wo Elementor rendert.
 */

/* Container-Nullstellung (Lumina-Doktrin 2026-08-19): von Haus
   aus traegt KEIN Elementor-Container Innenabstand — Abstaende
   setzen wir selbst, oder sie sind 0. Elementors frontend.css
   gibt .e-con den Innenabstand ueber
   var(--container-default-padding-*, 10px) — die 10px sind der
   eingebaute RUECKFALL, der greift, solange niemand die Variable
   setzt (das Kit-Feld Container Padding existiert nur bei
   aktivem Container-Experiment und druckt nur gespeicherte
   Werte). Dieser Block setzt die Variable — dadurch ist der
   Rueckfall dauerhaft neutralisiert, OHNE important und ohne
   Krieg mit dem Editor: individuell gesetzte Element-Paddings
   schreiben --padding-* direkt am Element und gewinnen lokal
   weiterhin. */
.e-con {
    --container-default-padding-top: 0px;
    --container-default-padding-right: 0px;
    --container-default-padding-bottom: 0px;
    --container-default-padding-left: 0px;
}

/* Menue-Spotlight v2 (Lumina-Wunsch 2026-08-19; Weg ueber die
   Widget-Variable nach Luminas DevTools-Fund): das Mega-Menu-Widget
   vergibt seine Normal-Farbe per var(--n-menu-title-color-normal) an
   alle Titel, die weder aktiv noch gehovert sind — die widget-eigene
   :not(.e-current):not(:hover)-Kette. Dieser Worker schaltet beim
   Hovern ueber die Leiste genau DIESE Variable auf den Dim-Ton um;
   Elementors eigene Regel verteilt ihn dann und nimmt das gehoverte
   UND das aktive Element von selbst aus. Kein important, kein Kampf
   gegen Widget-Selektoren: das Panel bleibt die einzige Wahrheit fuer
   Normal, Hover und Aktiv — die aktuelle Seite dimmt nicht mit.
   OPT-IN per Klasse w-menu-spotlight an der Menue-Huelle oder am
   Widget. Bei offenem Dropdown bleibt der Spotlight stehen, solange
   die Maus im Panel ist. Dim-Ton aendern = eine Zeile. */
.w-menu-spotlight .e-n-menu-title-text {
    transition: color 0.25s ease;
}

.w-menu-spotlight .e-n-menu-heading:hover {
    --n-menu-title-color-normal: var(--neutral-d-10, #999999);
}

/* Header-Verhalten — SELBSTTRAGENDE FASSUNG (v1.1, Lumina-Befund
   2026-08-21: der V3-zu-V4-Template-Umbau nahm sowohl die manuell
   am Container gepflegten Klassen als auch Elementor Pros
   Motion-Effects-Sticky mit — V4-Flexbox kennt beides nicht. Die
   Regie traegt ihre Mechanik deshalb jetzt KOMPLETT selbst; das
   Skript plus die Beitrags-Regie liegt in emeu-header-regie.php):
   - Das Skript findet den Header am stabilen Theme-Builder-Anker
     header[data-elementor-type="header"] und vergibt die Klassen
     w-header-sticky plus w-header-fade SELBST — keine manuelle
     Klassen-Pflege im Builder mehr, kein Elementor-Pro-Sticky.
   - w-header-sticky: eigene Klebe-Grundlage (position sticky).
   - w-header-scrolled setzt das Skript ab kleiner Scroll-Schwelle
     (ersetzt das fruehere elementor-sticky--effects) — Milchglas:
     halbtransparenter neutral-Ton plus Weichzeichnung.
   - w-header-autohide (per Beitrags-Regie erzwungen): beim
     Runterscrollen kommt w-header-hidden (Header gleitet hinaus),
     beim Hochscrollen verschwindet sie wieder.
   - Beitrags-Regie (Metabox) druckt Body-Klassen w-hregie-*: das
     Verhalten schaltet das Skript, die Ton-Klassen lenken den
     Hintergrund ueber die Variable --w-header-bg um.
   Ton aendern = eine Zeile am jeweiligen color-mix. */
.w-header-sticky {
    position: sticky;
    top: 0;
    z-index: 990;
}

.w-header-fade,
.w-header-autohide {
    transition: background-color 0.35s ease, backdrop-filter 0.35s ease, transform 0.4s ease;
}

.w-header-fade.w-header-scrolled {
    background-color: var(--w-header-bg, color-mix(in srgb, var(--neutral-d-23, #141414) 82%, transparent));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.w-header-autohide.w-header-hidden {
    transform: translateY(-100%);
}

/* Beitrags-Regie: solid heisst Hintergrund von Anfang an, ohne
   auf den Effects Offset zu warten. */
body.w-hregie-solid .w-header-fade {
    background-color: var(--w-header-bg, color-mix(in srgb, var(--neutral-d-23, #141414) 82%, transparent));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Beitrags-Regie: Hintergrund-Toene (Auswahl in der Metabox). */
body.w-hregie-ton-schwarz { --w-header-bg: color-mix(in srgb, var(--neutral-d-24, #0a0a0a) 88%, transparent); }
body.w-hregie-ton-green   { --w-header-bg: color-mix(in srgb, var(--dna-deep-green-d-2, #042c24) 85%, transparent); }
body.w-hregie-ton-deckend { --w-header-bg: var(--neutral-d-24, #0a0a0a); }

/* ============================================================
   KONTEXT-WERTE — UMGEZOGEN (A3-Kuration 2026-08-29, Lumina-Setzung)
   Die on-dark/on-light-Bloecke inkl. body-Grund leben jetzt KURATIERT in
   dist/emeu-context.css (LAYER 3 v5.0, dark-first, Neutral plus DNA,
   inkl. Header-Welt-Schaltung). EINE Wahrheit statt Ueberstimm-Doppel.
   Dieser Ort bleibt frei fuer kuenftige Hand-Kuration OBERHALB der
   Kontext-Schicht. Historie: S122-Erst-Verdrahtung; Sicherung
   emeu-hand-workers.css.alt-20260829.
   ============================================================ */