/* ============================================================
   EMEU FORMS v2.2.3 — Formular-Design-Schicht (S111, Lumina-GO)
   v2.2.3 (Lumina-Setzung 2026-09-04, einheitlich mit WooCommerce):
   KONTEXT-TOKEN statt fester Grautoene — Labels, Gruppen-Titel,
   Hinweise, Stepper, Wahl-Karten, Farbboxen, Modal und Aktions-Knoepfe
   lesen --color-text, --color-text-muted, --color-border, --color-bg-
   card, --color-primary (Fallback die bisherigen Neutral-Stufen). Der
   EMEU Seiten-Kontext (on-light/on-dark) schaltet damit auch die
   Haus-Formulare. Kante: Kontext-Token leben am body — Farb-Werte
   werden direkt in den Regeln referenziert, nie ueber :root-Token.
   v2.2.2 (Lumina-Setzung 2026-09-04, S129): STEPPER ALS DESIGN-SPRACHE.
   Token-Satz fuer die Anzahl-Auswahl (Knopf 32px rund, Rand neutral-d-16,
   Hover neutral-d-9, Symbol 10px, Abstand 0.9rem, Wert neutral-d-4) —
   woo/emeu-woo.css liest ihn fuer das WooCommerce-Mengen-Steuerelement.
   Befund: die Kit-Regel .elementor-kit-83 button (0,1,1) schlug unsere
   Knopf-Regel (0,1,0): Innenabstand 12/24 frass die Breite, das Symbol
   schrumpfte als Flex-Kind auf 0px (Lumina: Symbole unsichtbar). Jetzt
   Gewicht 0,2,1 plus Hover/Disabled 0,3,1, Symbol mit festem Platz.
   v2.2.1 (2026-09-04): feste Hoehe fuer input und select (Edge-
   Messung: INNEN-Flug wuchs ueber min-height auf 52px).
   v2.2.0 (Lumina-GO 2026-09-04, S129): LABEL-MODUS-SCHWENK — zwei
   Token-Saetze steuern dieselben Regeln: KERBE (Bestand, Label auf
   der Rand-Linie, Feld 44px) und INNEN (WooCommerce-Mass, Blocks-
   Checkout 11.1 gemessen: Feld 50px, Label-Oberkante im Flug 6px,
   Innenabstand im Flug 24px oben plus 8px unten, der Wert rueckt
   unter das Label, die Rand-Linie bleibt geschlossen). Schalter:
   Body-Klasse emeu-feld-modus-innen oder -kerbe aus PHP (WooCommerce
   geladen gleich innen, Filter emeu_feld_modus) als Haus-Default,
   je Formular emeu-form--innen oder emeu-form--kerbe darueber.
   Dazu Schrift-Gurt: .emeu-feld erbt die Umgebungs-Schrift (das
   Elementor-Kit druckt label mit "Work Sans", die nicht geladen
   ist — Lumina-Fund 2026-09-04 in den DEV-Tools).
   v2.1.2 (Lumina 2026-09-04): Label-Grund ragt links und rechts 3px
   ueber die Label-Box hinaus (4px vor scale .75 = 3px sichtbar) und
   der weiche Auslauf ist um dieselben 3px laenger — der Uebergang zur
   Rand-Linie wird sanfter. Modal-Kerbe jetzt kontext-sicher ueber
   --color-bg-card (on-dark/on-light) statt festem neutral-d-22.
   v2.1.1 (Lumina-Sicht 2026-09-04): (a) Label sass ~2px zu hoch —
   scale(.75) um die linke OBERE Ecke zog die Label-Mitte nach oben
   (22px * 0.125 = 2.75px). Jetzt transform-origin left center: die
   Mitte des Labels bleibt beim Flug auf der Rand-Mitte. (b) Die
   Rand-Linie schien hinter dem Label durch (2px-Streifen zu duenn
   nach Skalierung, Subpixel). Jetzt traegt das Label im Flug einen
   zweifarbigen Grund ueber die ganze Label-Box: obere Haelfte in der
   Umgebungsfarbe (--form-notch-bg), untere Haelfte in der Feld-Farbe
   (--form-notch-feld-bg) — die Teilung liegt auf der Rand-Mitte, die
   Linie verschwindet unter dem Label, kein Flicken auf beiden Seiten.
   Die Enden laufen per mask-image weich aus (Luminas Verlaufs-Idee).
   v2.1.0 KERBE (Lumina-GO 2026-09-03, S128): das geflogene Label
   wohnte AUSSERHALB des Feldes (Flug-Ziel -1.25rem = 20px ueber der
   Oberkante) und borgte sich den Raum aus der Nachbar-Zeile — bei
   Feldern in Zeilen untereinander blieben 4px Luft (gap 24px minus
   20px Label). Mehr gap machte die leere Form loecherig. NEU: das
   Label fliegt nur bis zur oberen RAND-LINIE und bleibt im eigenen
   Kasten (Mittellinie des Labels = Mitte der Border); ein 2px-Streifen
   (::before, Farbe der Umgebung: --form-notch-bg, Default Seiten-
   Grund, in der Modal-Karte Karten-Grund) unterbricht die Rand-Linie
   unter dem Label — die Kerbe. Dadurch: Feld-Hoehe 44px (Token),
   Zeilen-Abstand 1rem senkrecht wie waagerecht, Flugweg 22 statt
   45px. Label traegt den Zustand: Fokus Signal, gueltig gruen,
   Fehler rot. NEU Zeilen-Klasse emeu-form__zeile (auto-fit ab 200px;
   --2/--3 feste Spalten, Umbruch unter 560px) fuer Felder nebeneinander.
   v2.0.1: Label-Ruhe-Anker von Container-Mitte (50 Prozent) auf
   halbe FELD-Hoehe (calc form-field-height / 2) — die Fehler-
   Meldung laesst den Container wachsen und zog die Prozent-Mitte
   nach unten (Lumina-Klick-Probe 2026-08-21, Pflichtfeld-Fall).
   v2.0.0: FLYING-LABEL-NEUFASSUNG nach Referenz-Zerlegung zeyna-test
   (Lumina-Auftrag 2026-08-21, Kopfschmerz-Thema). Gemessene
   Referenz-Mechanik uebernommen: Label als Overlay auf der
   Feld-Mittellinie (top 50%, translateY(-50%)), Input-Padding
   SYMMETRISCH und in allen Zustaenden KONSTANT (Cursor steht mittig
   in der Zeile, nichts verschiebt sich), Flug als reine
   transform/top/color-Transition 0.4s ease-in-out mit scale(.75)
   und transform-origin top left — font-size bleibt KONSTANT, die
   optische Verkleinerung macht allein das scale (darum ist die
   Animation weich: kein font-size-Layout-Thrash, kein harter
   text-transform-Sprung; uppercase des v1.9-Eyebrows entfaellt).
   Float-Ziel UEBER dem Feld (--form-label-float-top, -1.25rem) mit
   Luft zur oberen Border (unsere Felder tragen vollen Border, die
   Referenz nur border-bottom). NEU Zustand ist-gueltig
   (Positiv-Validierung via forms/emeu-forms.js: gruen NUR wenn eine
   Regel aktiv bestanden ist — die Referenz-Luecke E-Mail-Feld-als-
   type-text wird nicht geerbt). Form-Atmung: gap 1.5rem plus
   padding-top fuer die Flughoehe. Zwei Mess-Nachtraege aus der
   Beweis-Runde: box-sizing border-box (min-height fuehrt die
   GESAMT-Hoehe — content-box machte 71px aus 50px und verschob die
   Label-Mittellinie) plus Feld-Border-Basis mit Spezifitaets-Netz
   0,4,1 (das Elementor-Kit druckt input:not(button):not(submit)
   border-style none bei 0,3,1 — Buttons-Hueppf-Taeter, zweiter
   Fundort).
   v1.9.3: Sperr-Chip-Selektoren angehoben (Sperr-Klasse doppelt) —
   Bestand gegen das Generat-Spezifitaets-Netz (core-elements v1.9.0).
   v1.9.2: Gesperrt-Zustand INVERTIERT (BG #4a0a12, Color #fce8ea) —
   Lumina-Setzung visuell harter Unterschied: offen hell, gesperrt
   dunkelrot gefuellt.
   v1.9.1: Sperr-Rot wahrnehmbar (#fce8ea plus #4a0a12) — die reine
   Kanal-Spiegelung aus v1.9.0 war visuell unsichtbar (Lumina-Sicht).
   v1.9.0: Sperr-Chip-Zustaende — offen gruen (frosted-dew plus
   #052823), gesperrt rotes Gegenstueck; Schloss-Icon-Cross-Fade
   lock-open zu lock.
   v1.8.1: Themen-Sidebar auf 26% (31% brach, Lumina-Justierung).
   v1.8.0: Themen-Zeilen nach Lumina-Muster (Sidebar 31% links mit
   Themenbeschreibung, Boxen rechts); GAP-Setzung 1em durchgaengig
   (zwischen den Boxen plus zwischen den Kategorien im Main-Container).

   v1.7.0: Eingabebox (--eingabe-Modifier der Settings-Box-Familie):
   200px fest, Titel plus Sub ohne Farb-Container, Eingabefeld auf
   granny-apple (V4) mit neutral-d-24-Text. Benennungs-Setzung:
   Feld-Titel nutzen CSS-Vokabular (Border/Width statt Randbreite).
   v1.6.0: Farbbox nach Lumina-Sicht-Spezifikation PRAEZISIERT:
   kein fluides Design — Leiste als Flexbox mit Umbruch plus GAP,
   Box fest 320px, DIV-a-Struktur (Titel/Sub, GAP 0.5rem, LH 1.0),
   Farb-Container 32x32, Box-GAP 0.5em; feste Kacheln auch fuer
   Nicht-Farb-Felder (--emeu-kachel).
   v1.5.0: Farbbox-Familie (Lumina-Muster /design-verwaltung/chip/).
   v1.4.0: Chip-OPTIK umgezogen in die Core-Element-Verwaltung
   (emeu-core-elements, Generat core-elements.css) — hier bleibt
   nur das Funktions-Minimum des Chips. Masse plus Kontext-Farben
   pflegt die Verwaltung; beide Klassen-Welten adressieren das
   eine Generat (Lumina-Setzung S111, Aufloesung der Doppelung).
   v1.3.0: Wahl-Karten (Apple-Muster 1.3 — Headline, Subline,
   Symbol rechts oben, Radio-Semantik mit Abwahl).
   v1.2.0: V4-SSOT-Verkabelung (Lumina-Setzung S111: exklusiv die
   Elementor-Klassen und -Variablen als fuehrende Quelle). ALLE
   Farben referenzieren direkt die V4-Variablen-Namen des Kits
   (dna-signal, dna-ink, neutral-d-1..24); die Fallback-Werte
   spiegeln den Kit-Stand 2026-08-20 und greifen nur ohne Kit.
   NEU: Prio-Punkte, Stepper (Anzahl-Auswahl, vorbereitet),
   Filterknopf mit Badge, Modal-Fuss, Entfernen-Chips
   (Airbnb-Inspirations-Canvas, Lumina-Punkte a-d).
   v1.1.0: Chip-Familie (Plus = anwaehlbar, Minus = aktiv).

   Klassen-Grammatik fuer EIGENE Formulare (Popups, In-Place,
   Musterbogen). Masse konsumieren die Form-Token-Familie
   (dist Layer 3c) mit statischen Fallbacks — Farb-Fuehrung
   liegt beim Elementor-Kit.

   Flying-Label-Vertrag: Text-Eingaben tragen placeholder=" "
   (ein Leerzeichen) — die Fuellungs-Erkennung laeuft rein ueber
   :not(:placeholder-shown), ohne Skript. Selects ueber :has();
   Datums-Felder zeigen ihr Label IMMER geflogen. Die Validierung
   (ist-gueltig/ist-fehler) traegt forms/emeu-forms.js als
   POSITIV-Pruefung: Regel aus data-emeu-regel, sonst aus type —
   gruen gibt es NUR fuer aktiv bestandene Regeln, nie fuer blosse
   Fuellung (Referenz-Luecke nicht geerbt).
   ============================================================ */

/* --- Feld-Struktur ------------------------------------------ */

/* Atmung (v2.1): das Label bleibt im Feld-Kasten, nur die halbe
   Label-Hoehe (~6px) ragt ueber die Rand-Linie — gap 1rem reicht,
   padding-top faengt den Ueberstand der ersten Zeile. */
.emeu-form {
  display: grid;
  gap: var(--form-gap, 1rem);
  padding-top: var(--form-atmung-top, 0.5rem);
}

.emeu-feld { position: relative; display: block; }

/* Schrift-Gurt (v2.2.0): das Elementor-Kit druckt label mit einer
   nicht geladenen Schrift (0,1,1). .emeu-feld ist selbst das label-
   Element — mit 0,2,0 erbt es die Umgebungs-Schrift, das Flug-Label
   (span) folgt ihm. Quelle bleibt das Kit (Label-Typografie). */
.emeu-feld.emeu-feld { font-family: inherit; }

/* --- Label-Modus (v2.2.0): KERBE oder INNEN --------------------
   Beide Modi teilen sich die Flug-Regeln weiter unten; nur die
   Token-Werte unterscheiden sich. KERBE: das geflogene Label sitzt
   auf der oberen Rand-Linie (Mittellinie = Rand-Mitte) mit dem
   zweifarbigen Grund, das Feld aendert seine Geometrie nie. INNEN
   (WooCommerce-Mass): Feld 50px, das Label wandert INS Feld nach
   oben links (Oberkante 6px: top 4px plus scale um die Mitte), der
   Wert rueckt unter das Label (Innenabstand 24px oben, 8px unten),
   kein Grund noetig — die Rand-Linie bleibt geschlossen.
   Gewichte: .emeu-form (0,1,0) traegt Kerbe als Default; die Haus-
   Klasse am Body (0,3,1 mit :not) schaltet auf Innen, ausser das
   Formular sagt emeu-form--kerbe; emeu-form--innen (0,2,0) schaltet
   ein einzelnes Formular unabhaengig vom Haus-Default. Felder
   ausserhalb eines .emeu-form (Farbbox-Leisten) bleiben Kerbe. */
.emeu-form {
  --form-flug-top-aktiv: calc(var(--form-field-border-width, 1px) / 2);
  --form-flug-transform-aktiv: translateY(-50%) scale(0.75);
  --form-flug-grund-aktiv: 1;
  --form-feld-pad-top-aktiv: var(--form-field-pad-block, 0.65rem);
  --form-feld-pad-bottom-aktiv: var(--form-field-pad-block, 0.65rem);
}
body.emeu-feld-modus-innen .emeu-form:not(.emeu-form--kerbe),
.emeu-form.emeu-form--innen {
  --form-field-height: 50px;                 /* WooCommerce-Mass */
  --form-flug-top-aktiv: 4px;                /* Label-Box 4..26, skaliert um die Mitte: sichtbar 6..24 wie Woo */
  --form-flug-transform-aktiv: translateY(0) scale(0.8125);   /* 16px zu 13px (Token active-size) */
  --form-flug-grund-aktiv: 0;                /* keine Kerbe: Rand-Linie bleibt geschlossen */
  --form-feld-pad-top-aktiv: 24px;           /* Woo: 24px oben im Flug */
  --form-feld-pad-bottom-aktiv: 8px;         /* Woo: 8px unten im Flug */
}

/* Musterbogen-Schwenk: aktiver Modus-Knopf traegt Signal-Rand. */
.emeu-form__aktion--neben.ist-aktiv {
  border-color: var(--color-primary, var(--dna-signal, #e9ff2e));
  color: var(--color-primary, var(--dna-signal, #e9ff2e));
}

/* Zeilen (v2.1): Felder nebeneinander mit demselben gap wie
   untereinander. Default auto-fit ab 200px Spalten-Breite; --2 und
   --3 setzen feste Spalten und brechen unter 560px auf eine. */
.emeu-form__zeile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--form-gap, 1rem);
  align-items: start;
}
.emeu-form__zeile--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.emeu-form__zeile--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) {
  .emeu-form__zeile--2,
  .emeu-form__zeile--3 { grid-template-columns: minmax(0, 1fr); }
}

/* KONSTANTES symmetrisches Padding in ALLEN Zustaenden (KERBE-Modus;
   im INNEN-Modus rueckt der Wert im Flug unter das Label, v2.2.0) — der
   blinkende Cursor steht mittig in der Zeile, beim Flug verschiebt
   sich nichts (Referenz-Prinzip: Label ist reines Overlay auf der
   Mittellinie, das Feld selbst aendert nie seine Geometrie).
   Hoehen-Hybrid-Doktrin: min-height fuehrt, Padding dient. */
.emeu-feld > input,
.emeu-feld > textarea,
.emeu-feld > select {
  box-sizing: border-box;         /* min-height fuehrt die GESAMT-Hoehe */
  width: 100%;
  min-height: var(--form-field-height, 50px);
  padding-top: var(--form-field-pad-block, 0.65rem);
  padding-bottom: var(--form-field-pad-block, 0.65rem);
  /* Border-FARBE bewusst hier in der normalen Basis (0,1,1),
     damit die Zustands-Regeln (0,2,1) sie wechseln koennen. */
  border-color: var(--form-field-border-color, var(--color-border, var(--neutral-d-19, #3d3d3d)));
  /* v2.2.0: Padding-Uebergang fuer den INNEN-Flug; Border und Schatten
     wie in der Kontext-Schicht, damit diese Regel (0,1,1) sie nicht verliert. */
  transition: border-color var(--duration-medium, 200ms) var(--ease-default, ease),
              box-shadow var(--duration-medium, 200ms) var(--ease-default, ease),
              padding-top 0.4s ease-in-out,
              padding-bottom 0.4s ease-in-out;
}

/* Border-Geometrie-Doktrin plus Spezifitaets-Netz (S111): das
   Elementor-Kit druckt site-weit input:not([type=button]):not(
   [type=submit]) mit border-style none (Spezifitaet 0,3,1) —
   dieselbe Fremd-Regel-Klasse wie beim Chip-Hueppf-Befund. Die
   Geometrie (width plus style, KONSTANT in allen Zustaenden)
   liegt deshalb mit 0,4,1 reihenfolge-unabhaengig DARUEBER. */
.emeu-feld.emeu-feld.emeu-feld.emeu-feld > input,
.emeu-feld.emeu-feld.emeu-feld.emeu-feld > textarea,
.emeu-feld.emeu-feld.emeu-feld.emeu-feld > select {
  border-width: var(--form-field-border-width, 1px);
  border-style: solid;
}

.emeu-feld > textarea { min-height: 120px; resize: vertical; }

/* v2.2.1: feste Hoehe fuer einzeilige Felder (Woo setzt height 50px).
   Im INNEN-Flug wuerde min-height sonst auf 52px wachsen (24 plus 8
   plus Rand plus Zeilenbox, Edge-Messung). Der Text zentriert sich im
   verbleibenden Inhalts-Kasten wie bei WooCommerce. Textarea bleibt
   min-height-gefuehrt. */
.emeu-feld > input,
.emeu-feld > select { height: var(--form-field-height, 50px); }

/* Flug-Geometrie des Feldes (v2.2.0): im INNEN-Modus rueckt der Wert
   unter das Label (Woo 24px oben, 8px unten); im KERBE-Modus sind die
   Aktiv-Werte gleich den Ruhe-Werten — die Regel greift, aendert aber
   nichts. Selbe Zustands-Selektoren wie der Label-Flug. */
.emeu-feld > input:focus,
.emeu-feld > input:not(:placeholder-shown),
.emeu-feld > textarea:focus,
.emeu-feld > textarea:not(:placeholder-shown),
.emeu-feld:has(> select:focus) > select,
.emeu-feld:has(> select option:checked:not([value=""])) > select,
.emeu-feld--datum > input {
  padding-top: var(--form-feld-pad-top-aktiv, var(--form-field-pad-block, 0.65rem));
  padding-bottom: var(--form-feld-pad-bottom-aktiv, var(--form-field-pad-block, 0.65rem));
}

/* --- Flying Label (Neufassung nach Referenz-Messung) --------- */

/* Ruhe: Overlay auf der Feld-Mittellinie. transform-origin top left
   ist der Kern der Weichheit — beim Flug schrumpft das Label nach
   oben links, waehrend top und transform GLEICHZEITIG ueber 0.4s
   ease-in-out laufen (die gemessene Referenz-Bahn). */
.emeu-feld > .emeu-flug {
  position: absolute;
  left: 0.75rem;                  /* v2.1: 1rem Text-Kante minus 0.25rem Kerben-Luft */
  padding: 0 0.25rem;
  /* Anker = halbe FELD-Hoehe, NICHT Container-Mitte (50 Prozent):
     die Fehler-Meldung (emeu-meldung) waechst in den Container und
     wuerde eine Prozent-Mitte nach unten ziehen — das Label sass
     dann zu tief (Lumina-Klick-Probe 2026-08-21). Das Feld selbst
     beginnt am Container-Oberrand und ist min-height-gefuehrt,
     darum ist die halbe Feld-Hoehe der stabile Mittellinien-Punkt. */
  top: calc(var(--form-field-height, 50px) / 2);
  transform: translateY(-50%);
  transform-origin: left center;    /* v2.1.1: Mitte bleibt beim Skalieren, wo sie ist */
  font-size: var(--form-label-floating-idle-size, 16px);
  line-height: var(--form-label-floating-idle-lh, 22px);
  font-weight: var(--form-label-floating-idle-weight, 300);
  color: color-mix(in srgb, var(--color-text-muted, var(--neutral-d-12, #858585)) 82%, transparent);
  pointer-events: none;
  z-index: 2;
  transition: top 0.4s ease-in-out,
              transform 0.4s ease-in-out,
              color 0.4s ease-in-out;
  white-space: nowrap;
  max-width: calc(100% - 1.5rem);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Die Kerbe (v2.1.1): zweifarbiger Grund ueber die ganze Label-Box.
   Die Label-Mitte liegt im Flug auf der Rand-Mitte, also teilt der
   50-Prozent-Punkt des Verlaufs genau dort: oben Umgebungsfarbe
   (Seiten-Grund; Modal-Karte setzt Karten-Grund), unten Feld-Farbe.
   Beide Haelften verschmelzen mit ihrer Seite, die Rand-Linie darunter
   ist verdeckt. Die Enden blenden ueber 0.3rem weich aus (mask), damit
   keine harte Kante entsteht. Ruhezustand unsichtbar, blendet mit dem
   Flug ein. */
.emeu-feld > .emeu-flug::before {
  content: "";
  position: absolute;
  inset: 0 -4px;                  /* v2.1.2: 4px vor scale = 3px sichtbar je Seite */
  background: linear-gradient(to bottom,
    var(--form-notch-bg, var(--color-bg-page, var(--neutral-d-24, #0a0a0a))) 50%,
    var(--form-notch-feld-bg, var(--color-bg-field, var(--neutral-d-22, #1f1f1f))) 50%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 calc(0.3rem + 4px), #000 calc(100% - 0.3rem - 4px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 calc(0.3rem + 4px), #000 calc(100% - 0.3rem - 4px), transparent);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease-in-out;
}

/* Textarea: Label ruht auf der ersten Zeile (kein Mittellinien-
   Overlay — mehrzeilig), Referenz-Sonderfall uebernommen. */
.emeu-feld > textarea ~ .emeu-flug {
  top: var(--form-field-pad-block, 0.65rem);
  transform: translateY(0);
}

/* Der Flug (v2.1): Fokus ODER gefuellt — Label fliegt auf die obere
   RAND-LINIE (Mittellinie des Labels = Mitte der Border) und bleibt
   im Feld-Kasten. font-size bleibt KONSTANT, scale(.75) macht die
   Verkleinerung (16px zu optisch 12px) — reine transform-Animation,
   kein Layout-Thrash, kein Schriftbild-Sprung. */
.emeu-feld > input:focus ~ .emeu-flug,
.emeu-feld > input:not(:placeholder-shown) ~ .emeu-flug,
.emeu-feld > textarea:focus ~ .emeu-flug,
.emeu-feld > textarea:not(:placeholder-shown) ~ .emeu-flug,
.emeu-feld:has(> select:focus) > .emeu-flug,
.emeu-feld:has(> select option:checked:not([value=""])) > .emeu-flug,
.emeu-feld--datum > .emeu-flug {
  top: var(--form-flug-top-aktiv, calc(var(--form-field-border-width, 1px) / 2));
  transform: var(--form-flug-transform-aktiv, translateY(-50%) scale(0.75));
  color: var(--color-text-muted, var(--neutral-d-9, #a3a3a3));
}

.emeu-feld > input:focus ~ .emeu-flug::before,
.emeu-feld > input:not(:placeholder-shown) ~ .emeu-flug::before,
.emeu-feld > textarea:focus ~ .emeu-flug::before,
.emeu-feld > textarea:not(:placeholder-shown) ~ .emeu-flug::before,
.emeu-feld:has(> select:focus) > .emeu-flug::before,
.emeu-feld:has(> select option:checked:not([value=""])) > .emeu-flug::before,
.emeu-feld--datum > .emeu-flug::before { opacity: var(--form-flug-grund-aktiv, 1); }

/* Farbaenderung im Fokus (Lumina-Anforderung: Flug MIT Farbe). */
.emeu-feld > input:focus ~ .emeu-flug,
.emeu-feld > textarea:focus ~ .emeu-flug,
.emeu-feld:has(> select:focus) > .emeu-flug {
  color: var(--color-primary, var(--dna-signal, #e9ff2e));
}

/* --- Gruppen plus Nebentexte -------------------------------- */

.emeu-form__gruppe {
  font-size: var(--form-label-group-size, 13px);
  line-height: var(--form-label-group-lh, 1.3);
  font-weight: var(--form-label-group-weight, 500);
  letter-spacing: var(--form-label-group-ls, 0.02em);
  text-transform: var(--form-label-group-transform, uppercase);
  margin-bottom: var(--form-label-group-margin-bottom, 12px);
  color: var(--color-text-muted, var(--neutral-d-9, #a3a3a3));
}

.emeu-feedback {
  font-size: var(--form-label-feedback-size, 13px);
  line-height: var(--form-label-feedback-lh, 1.4);
  font-weight: var(--form-label-feedback-weight, 400);
  padding-top: var(--form-label-feedback-padding-top, 6px);
  color: var(--color-text-muted, var(--neutral-d-12, #858585));
}

/* --- Zustaende ---------------------------------------------- */

/* Drei-Zustands-Modell der Positiv-Validierung (emeu-forms.js):
   neutral (keine Klasse) — ist-gueltig (Regel aktiv bestanden) —
   ist-fehler (Regel verletzt oder Pflicht leer, mit Meldung).
   Ein leeres optionales Feld bleibt IMMER neutral. */

.emeu-feld.ist-gueltig > input,
.emeu-feld.ist-gueltig > textarea,
.emeu-feld.ist-gueltig > select { border-color: var(--color-success, #2e7d32); }

.emeu-feld.ist-fehler > input,
.emeu-feld.ist-fehler > textarea,
.emeu-feld.ist-fehler > select { border-color: var(--color-error, #d9534f); }

.emeu-feld.ist-fehler > .emeu-feedback { color: var(--color-error, #d9534f); }

/* v2.1: das Label sitzt im Flug auf dem Rand und traegt dessen
   Zustands-Farbe mit (gueltig gruen, Fehler rot) — Rueckmeldung an
   der Stelle, auf die das Auge schaut. Fehler schlaegt Fokus-Signal.
   v2.2.3: Klasse doppelt (0,4,0) — die Flug-Regel traegt 0,3,1 und
   schlug die Zustands-Farbe bei gefuelltem Feld (Beweis-Fund). */
.emeu-feld.ist-gueltig.ist-gueltig > .emeu-flug { color: var(--color-success, #2e7d32); }
.emeu-feld.ist-fehler.ist-fehler > .emeu-flug { color: var(--color-error, #d9534f); }

.emeu-feld > .emeu-meldung { margin: 0; }

.emeu-form.ist-gespeichert .emeu-form__quittung { color: var(--color-primary, var(--dna-signal, #e9ff2e)); }

/* --- Aktionen ------------------------------------------------ */

.emeu-form__aktionen { display: flex; gap: 0.75rem; justify-content: flex-end; }

.emeu-form__aktion {
  min-height: var(--form-field-height, 50px);
  padding: 0 1.5rem;
  border-radius: var(--form-field-radius, 8px);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  background: var(--color-primary, var(--dna-signal, #e9ff2e));
  color: var(--dna-ink, #171916);
}

.emeu-form__aktion--neben {
  background: transparent;
  color: var(--color-text, var(--neutral-d-4, #d6d6d6));
  border-color: var(--color-border, var(--neutral-d-19, #3d3d3d));
}

.emeu-form__aktion--still {
  background: none;
  border: 0;
  color: var(--color-text, var(--neutral-d-4, #d6d6d6));
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0 0.5rem;
  min-height: 0;
}

.emeu-form__aktion:disabled { opacity: 0.55; cursor: wait; }

/* --- Modal (das Popup-Gesicht) ------------------------------- */

.emeu-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--neutral-d-24, #0a0a0a) 72%, transparent);
  backdrop-filter: blur(6px);
  z-index: 99990;
}

.emeu-modal.ist-offen { display: flex; }

.emeu-modal__karte {
  --form-notch-bg: var(--color-bg-card, var(--neutral-d-22, #1f1f1f));   /* v2.1.2: Kerbe oben in Karten-Grund, kontext-sicher */
  width: min(560px, 100%);
  max-height: min(84vh, 900px);
  overflow: auto;
  background: var(--color-bg-card, var(--neutral-d-22, #1f1f1f));
  border: 1px solid var(--color-border, var(--neutral-d-19, #3d3d3d));
  border-radius: 14px;
  padding: 1.75rem;
}

.emeu-modal__karte--breit { width: min(680px, 100%); }

/* Filter-Modal: Karte wird Spalten-Layout, der Fuss klebt unten. */
.emeu-modal__karte--filter {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.emeu-modal__karte--filter > .emeu-modal__kopf { padding: 1.5rem 1.75rem 0.75rem; margin-bottom: 0; }
.emeu-modal__karte--filter > .emeu-modal__body { padding: 0.5rem 1.75rem 1rem; overflow: auto; flex: 1; }

.emeu-modal__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.emeu-modal__titel { font-size: 1.15rem; font-weight: 500; margin: 0; }

.emeu-modal__zu {
  background: none;
  border: 0;
  color: var(--color-text-muted, var(--neutral-d-12, #858585));
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* Fuss-Leiste nach Airbnb-Muster: links Alle-loeschen, rechts der
   Primaer-Knopf mit Echtzeit-Treffer-Zahl. */
.emeu-modal__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.75rem;
  border-top: 1px solid var(--color-border, var(--neutral-d-19, #3d3d3d));
  background: var(--color-bg-card, var(--neutral-d-22, #1f1f1f));
  border-radius: 0 0 14px 14px;
}

/* --- Chips — Filter als klickbare Pills ---------------------- */
/* Lumina-Setzung (Inspirations-Pool plus Airbnb-Canvas): jeder Chip
   traegt sein eigenes Icon (leer, wenn keins passt); Plus/Minus
   zeigen den Zustand im Modal; aktive Chips staerker gerahmt.
   Zusatz-Klassen chip__container(-__status-icon/-__text) docken die
   Elementor-Klassen-Pflege an (V4-Klassen-SSOT). */

.emeu-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.emeu-chips__label {
  flex-basis: 100%;
  font-size: var(--form-label-group-size, 13px);
  line-height: var(--form-label-group-lh, 1.3);
  font-weight: var(--form-label-group-weight, 500);
  letter-spacing: var(--form-label-group-ls, 0.02em);
  text-transform: var(--form-label-group-transform, uppercase);
  color: var(--color-text-muted, var(--neutral-d-9, #a3a3a3));
  margin: 0.9rem 0 0.1rem;
}

.emeu-chips > .emeu-chips__label:first-child { margin-top: 0; }

/* Chip-FUNKTIONS-MINIMUM — die OPTIK (Hoehe, Innenabstand, Radius,
   Rand, Farben, Schrift- plus Symbol-Groesse) fuehrt die Core-
   Element-Verwaltung (Generat core-elements.css, beide Adressen). */
.emeu-chip,
a.emeu-chip,
button.emeu-chip {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.emeu-chip > svg,
.emeu-chip .emeu-chip__symbol > svg { flex: none; }

.emeu-chip__symbol { display: inline-flex; align-items: center; }

.emeu-chip__zahl {
  opacity: 0.55;
  font-size: 0.9em;
}

/* --- Filterknopf mit Badge (Airbnb 1.1/1.2) ------------------ */

.emeu-filterknopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  height: 40px;
  padding: 0 1.1em;
  border-radius: 999px;
  border: 1px solid var(--color-border, var(--neutral-d-16, #5c5c5c));
  background: transparent;
  color: var(--color-text, var(--neutral-d-4, #d6d6d6));
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.18s ease;
}

.emeu-filterknopf:hover { border-color: var(--color-text-muted, var(--neutral-d-9, #a3a3a3)); }

.emeu-filterknopf > svg { width: 1em; height: 1em; flex: none; }

.emeu-filterknopf__badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-primary, var(--dna-signal, #e9ff2e));
  color: var(--dna-ink, #171916);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

/* --- Prioritaets-Punkte (Lumina-Setzung b) ------------------- */
/* Drei Punkte uebereinander: niedrig = unterster voll, normal =
   untere zwei, hoch = alle drei in der Signal-Farbe. */

.emeu-prio {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  vertical-align: middle;
}

.emeu-prio > i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--neutral-d-17, #525252);
}

.emeu-prio--niedrig > i:nth-child(3),
.emeu-prio--normal  > i:nth-child(2),
.emeu-prio--normal  > i:nth-child(3),
.emeu-prio--hoch    > i { background: var(--color-primary, var(--dna-signal, #e9ff2e)); }

/* --- Stepper — Anzahl-Auswahl (Airbnb 1.3.1.1, vorbereitet) --- */

/* Token-Satz (v2.2.2): EINE Wahrheit fuer Haus-Stepper und WooCommerce-
   Mengen-Steuerelement (woo/emeu-woo.css). */
:root {
  --form-stepper-size: 32px;
  --form-stepper-icon: 10px;
  --form-stepper-gap: 0.9rem;
  /* Farben: direkt in den Regeln als Kontext-Token (v2.2.3) */
  --form-stepper-wert-breite: 4.5em;
}

.emeu-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.emeu-stepper__label { color: var(--color-text, var(--neutral-d-4, #d6d6d6)); }

.emeu-stepper__regler { display: inline-flex; align-items: center; gap: var(--form-stepper-gap, 0.9rem); }

/* Knopf mit Gewicht 0,2,1 gegen die Kit-Button-Regel (0,1,1); Hover und
   Disabled mit 0,3,1 gegen den Kit-Hover (0,2,1). */
button.emeu-stepper__knopf.emeu-stepper__knopf {
  box-sizing: border-box;
  width: var(--form-stepper-size, 32px);
  height: var(--form-stepper-size, 32px);
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 1px solid var(--color-border, var(--color-border, var(--neutral-d-16, #5c5c5c)));
  border-radius: 50%;
  background: transparent;
  color: var(--color-text, var(--color-text, var(--neutral-d-4, #d6d6d6)));
  font: inherit;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.15s ease;
}

button.emeu-stepper__knopf.emeu-stepper__knopf > svg {
  width: var(--form-stepper-icon, 10px);
  height: var(--form-stepper-icon, 10px);
  flex: none;
  display: block;
}

button.emeu-stepper__knopf.emeu-stepper__knopf:hover:not(:disabled),
button.emeu-stepper__knopf.emeu-stepper__knopf:focus-visible {
  border: 1px solid var(--color-text-muted, var(--color-text-muted, var(--neutral-d-9, #a3a3a3)));
  border-radius: 50%;
  background: transparent;
  color: var(--color-text, var(--color-text, var(--neutral-d-4, #d6d6d6)));
  outline: none;
}

button.emeu-stepper__knopf.emeu-stepper__knopf:disabled {
  opacity: 0.35;
  cursor: default;
  background: transparent;
  border-radius: 50%;
}

.emeu-stepper__wert {
  min-width: var(--form-stepper-wert-breite, 4.5em);
  text-align: center;
  color: var(--color-text, var(--color-text, var(--neutral-d-4, #d6d6d6)));
}

/* --- Wahl-Karten — Select als Karten (Apple-Muster 1.3) ------- */
/* Lumina-Setzung S111: Headline plus kurze Subline plus Symbol
   rechts oben; aktive Karte mit Signal-Rand plus Schleier.
   Radio-Semantik: eine Karte aktiv, Klick auf aktive waehlt ab. */

.emeu-wahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

.emeu-wahl__karte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--color-border, var(--neutral-d-19, #3d3d3d));
  background: transparent;
  color: var(--color-text, var(--neutral-d-4, #d6d6d6));
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.emeu-wahl__karte:hover { border-color: var(--color-text-muted, var(--neutral-d-9, #a3a3a3)); }

.emeu-wahl__karte.ist-aktiv {
  border-color: var(--color-primary, var(--dna-signal, #e9ff2e));
  background: color-mix(in srgb, var(--color-primary, var(--dna-signal, #e9ff2e)) 8%, transparent);
}

.emeu-wahl__titel {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.25;
  padding-right: 1.75rem;         /* Platz fuer das Symbol rechts oben */
}

.emeu-wahl__sub {
  font-size: var(--form-label-floating-active-size, 13px);
  line-height: 1.35;
  color: var(--color-text-muted, var(--neutral-d-9, #a3a3a3));
}

.emeu-wahl__symbol {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  color: var(--color-text-muted, var(--neutral-d-9, #a3a3a3));
}

.emeu-wahl__karte.ist-aktiv .emeu-wahl__symbol { color: var(--color-primary, var(--dna-signal, #e9ff2e)); }

/* --- Farbbox — Farb-Rollen-Auswahl (Lumina-Spezifikation --------
   2026-08-20 nach Sicht-Abgleich am Muster /design-verwaltung/chip/):
   KEIN fluides Design. Aussen-Leiste ist Flexbox mit Umbruch,
   Elemente per GAP platziert; die Box ist FEST 320px. Innen zwei
   Container: KOPF (DIV a: Titel plus Sub uebereinander, GAP 0.5rem,
   line-height 1.0 fuer eindeutiges Design; DIV b: Farb-Container
   exakt 32x32) plus darunter das Auswahlfeld; Box-GAP 0.5em. ---- */

.emeu-farbboxen {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;                        /* Lumina-Setzung S111: neue GAP 1em */
}

/* Themen-Zeilen (Lumina-Muster /design-verwaltung/chip/, 2026-08-20):
 * Main-Container stapelt die Kategorien (gap 1em), jede Themen-Zeile
 * traegt links die Beschreibungs-Sidebar (31%) und rechts die Boxen. */
.emeu-themen {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.emeu-thema {
  display: flex;
  gap: 1em;
}
.emeu-thema__beschreibung {
  width: 26%;                      /* Lumina-Justierung 2026-08-20: 31% brach */
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.emeu-thema__titel {
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  color: var(--color-text, var(--neutral-d-4, #d6d6d6));
}
.emeu-thema__sub {
  font-size: var(--form-label-floating-active-size, 13px);
  line-height: 1;
  color: var(--color-text-muted, var(--neutral-d-9, #a3a3a3));
}
.emeu-thema > .emeu-farbboxen {
  flex: 1;
  min-width: 0;
}

/* Sperr-Chips (Klassen-Schloss, Lumina-Setzung 2026-08-20):
 * offen = gruen (frosted-dew-Flaeche, Tiefgruen-Text), gesperrt =
 * rotes Gegenstueck (Kanal-Spiegelung der Gruen-Werte). Hover haelt
 * die Zustands-Farben (uebersteuert das Generat-Hover). */
/* v1.9.3: Selektoren angehoben (Sperr-Klasse doppelt), damit die
 * Zustands-Farben gegen das Spezifitaets-Netz des Generats bestehen
 * (Generat druckt seit v1.9.0 doppelte Adressen und laedt spaeter). */
.emeu-chip.emeu-sperr-chip.emeu-sperr-chip,
.emeu-chip.emeu-sperr-chip.emeu-sperr-chip:hover {
  background: var(--frosted-dew, #fbfefb);
  color: #052823;
  border-color: #052823;
}
.emeu-chip.emeu-sperr-chip.emeu-sperr-chip.ist-aktiv,
.emeu-chip.emeu-sperr-chip.emeu-sperr-chip.ist-aktiv:hover {
  /* v1.9.2 (Lumina-Setzung): gesperrt INVERTIERT — Color wird BG und
   * andersrum, fuer den visuell harten Unterschied zum Offen-Zustand. */
  background: #4a0a12;
  color: #fce8ea;
  border-color: #4a0a12;
}

/* Schloss-Icon: lock-open (offen) plus lock (gesperrt) uebereinander,
 * Cross-Fade beim Status-Switch — harmonisch wie der Farbwechsel. */
.emeu-sperr-chip .emeu-chip__symbol {
  position: relative;
  display: inline-flex;
}
.emeu-sperr-chip .emeu-chip__symbol svg {
  transition: opacity 0.25s ease;
}
.emeu-sperr-chip .emeu-chip__symbol svg + svg {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.emeu-sperr-chip.ist-aktiv .emeu-chip__symbol svg:first-child { opacity: 0; }
.emeu-sperr-chip.ist-aktiv .emeu-chip__symbol svg + svg { opacity: 1; }

.emeu-farbbox {
  width: 320px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 1rem;
  border: 1px solid var(--color-border, var(--neutral-d-19, #3d3d3d));
  border-radius: 12px;
}

.emeu-farbbox__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.emeu-farbbox__benennung {       /* DIV a */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.emeu-farbbox__titel {           /* a.1 */
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  color: var(--color-text, var(--neutral-d-4, #d6d6d6));
}

.emeu-farbbox__sub {             /* a.2 */
  font-size: var(--form-label-floating-active-size, 13px);
  line-height: 1;
  color: var(--color-text-muted, var(--neutral-d-9, #a3a3a3));
}

.emeu-farbbox__vorschau {        /* DIV b */
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 8px;
  border: 1px solid var(--color-border, var(--neutral-d-19, #3d3d3d));
}

.emeu-farbbox select {
  width: 100%;
  background: #082823; /* Lumina-Setzung 2026-08-20 (schnelle Probe) —
                          hebt das Auswahlfeld visuell ab; noch keine
                          V4-Variable, Anlage im Kit moeglich */
}

/* Feste Kachel fuer Nicht-Farb-Felder in derselben Leiste —
   Breite pro Leiste ueber --emeu-kachel steuerbar (Default 320px). */
.emeu-farbboxen > .emeu-feld { width: var(--emeu-kachel, 320px); flex: none; }

/* --- Eingabebox — freie Eingaben als Settings-Box (Lumina- ------
   Uebertragung 2026-08-20: gleiches Prinzip wie die Farbbox —
   Kasten mit Border plus Radius, Titel plus Subline (Farb-
   Container entfaellt), darunter das Eingabefeld. Box FEST 200px,
   Leiste mit Umbruch. Feld hebt sich ab: granny-apple-Grund
   (V4-Variable) mit neutral-d-24-Text. ------------------------- */

.emeu-farbbox--eingabe { width: 200px; }

.emeu-farbbox--eingabe input {
  width: 100%;
  background: var(--granny-apple, #c7e7d4);
  color: var(--neutral-d-24, #0a0a0a);
}