/* Werkzeugkasten · Stil „Glas“ – Fläche statt Linie: leicht grauer Grund, Milchglas, runde Ecken, weiche Schatten.
   Graphit führt, ein gedämpftes Blau zeigt Fokus und Auswahl, Rot heißt nur dringend, Fehler oder endgültig.
   Zwei Dichten: komfort (Standard, Touch, Fenster unter 1100 px) und dicht (data-dichte="dicht", nur Maus ab 1100 px).
   Vertrag: 1.0 (design-grundlagen: tokens.css und bausteine.css darunter laden, dann diese Datei).
   Regeln: regeln.json im Repo Design (entwuerfe/glas, REGELWERK.md). Jede Zahl hier ist eine Regel; geprüft von
   werkzeug/glas.py (statisch) und vom Prüfstand im Browser. Eigene Namen des Stils ohne wk-Präfix: --glas-*. */

/* ---- Rollen des Vertrags: hell (-h) und dunkel (-d) ------------------------------------------------- */
[data-stil="glas"] {
  --wk-grund-h: #E6E8EC;                 --wk-grund-d: #0F1115;
  --wk-flaeche-h: #F7F8FA;               --wk-flaeche-d: #1A1D23;               /* feste Fläche: Rückfall für Glas */
  --wk-flaeche-2-h: #E3E4E7;             --wk-flaeche-2-d: #2A2D32;             /* feste Hover-Fläche */
  --wk-feld-h: rgba(22,28,44,.06);       --wk-feld-d: rgba(255,255,255,.045);   /* Felder, Knöpfe, Chips, Spuren */
  --wk-feld-hover-h: rgba(22,28,44,.09); --wk-feld-hover-d: rgba(255,255,255,.07);
  --wk-gedrueckt-h: rgba(22,28,44,.14);  --wk-gedrueckt-d: rgba(255,255,255,.11);
  --wk-auswahl-h: rgba(58,98,190,.12);   --wk-auswahl-d: rgba(128,164,246,.12); /* gewählt, geöffnet – nur mit Symbol (Z2, Z3) */
  --wk-aktiv-h: #1C2230;                 --wk-aktiv-d: #EEF0F4;                 /* Ort und Modus (Z1) */
  --wk-auf-aktiv-h: #FFFFFF;             --wk-auf-aktiv-d: #12151B;
  --wk-haupt-h: #1C2230;                 --wk-haupt-d: #EEF0F4;                 /* Hauptaktion (B4) */
  --wk-auf-haupt-h: #FFFFFF;             --wk-auf-haupt-d: #12151B;
  --wk-akzent-h: #1C2230;                --wk-akzent-d: #EEF0F4;                /* Marke der App; Glas selbst hat keine */
  --wk-auf-akzent-h: #FFFFFF;            --wk-auf-akzent-d: #12151B;
  --wk-text-h: #14171C;                  --wk-text-d: #EEF0F3;
  --wk-text-2-h: #343B4A;                --wk-text-2-d: #DCE0E7;
  --wk-text-leise-h: #414855;            --wk-text-leise-d: #D3D8E0;
  --wk-linie-h: transparent;             --wk-linie-d: transparent;             /* kein Trenner (F1): Abstand und Tönung */
  --wk-linie-stark-h: #6E7583;           --wk-linie-stark-d: #A0A8B6;           /* Spur von Schalter und Regler (C5) */
  --wk-fokus-h: #2F62D0;                 --wk-fokus-d: #8FB0F2;
  --wk-fehler-h: #8A1E16;                --wk-fehler-d: #FFCCC5;                /* nur Dringend, Fehler, Löschen (C3) */
  --wk-fehler-flaeche-h: rgba(138,30,22,.12); --wk-fehler-flaeche-d: rgba(255,204,197,.08);
  --wk-fehler-text-h: #8A1E16;           --wk-fehler-text-d: #FFCCC5;
  --wk-auf-fehler-h: #FFFFFF;            --wk-auf-fehler-d: #14171C;
  --wk-gut-h: #1F6B47;                   --wk-gut-d: #9FE0BC;                   /* erledigt, gespeichert */
  --wk-gut-flaeche-h: rgba(31,107,71,.12); --wk-gut-flaeche-d: rgba(159,224,188,.09);
  --wk-gut-text-h: #175236;              --wk-gut-text-d: #B8EBCF;
  --wk-gut-rand-h: transparent;          --wk-gut-rand-d: transparent;
  --wk-achtung-h: #7A5200;               --wk-achtung-d: #F5D58A;               /* bald fällig, offen */
  --wk-achtung-flaeche-h: rgba(196,140,0,.14); --wk-achtung-flaeche-d: rgba(245,213,138,.09);
  --wk-achtung-text-h: #5E3F00;          --wk-achtung-text-d: #F8E2AE;
  --wk-achtung-rand-h: transparent;      --wk-achtung-rand-d: transparent;
  --wk-info-h: #24529E;                  --wk-info-d: #A9C3F5;                  /* Hinweis ohne Wertung */
  --wk-info-flaeche-h: rgba(47,98,208,.1); --wk-info-flaeche-d: rgba(143,176,242,.09);
  --wk-info-text-h: #1F4785;             --wk-info-text-d: #C3D5F8;
  --wk-schleier-h: rgba(28,34,48,.32);   --wk-schleier-d: rgba(0,0,0,.56);
  --wk-schwebend-h: rgba(255,255,255,.9); --wk-schwebend-d: rgba(34,38,46,.94); /* Dialog, Blatt, Menü, Popover */
  --wk-glas-rand-h: transparent;         --wk-glas-rand-d: transparent;
  --wk-glas-h: linear-gradient(155deg, rgb(255 255 255 / clamp(var(--glas-deckung-min), calc(var(--glas-a) + .14), var(--glas-deckung-max))), rgb(255 255 255 / clamp(var(--glas-deckung-min), var(--glas-a), var(--glas-deckung-max))));
  --wk-glas-d: linear-gradient(155deg, rgb(255 255 255 / clamp(var(--glas-deckung-min), calc(var(--glas-a) * .12), var(--glas-deckung-max))), rgb(255 255 255 / clamp(var(--glas-deckung-min), calc(var(--glas-a) * .08), var(--glas-deckung-max))));
  --wk-schatten-1-h: 0 1px 2px rgba(24,32,52,.05), 0 4px 12px -4px rgba(24,32,52,.1);
  --wk-schatten-1-d: 0 1px 2px rgba(0,0,0,.35), 0 4px 12px -4px rgba(0,0,0,.42);
  --wk-schatten-2-h: 0 2px 4px rgba(24,32,52,.04), 0 16px 36px -12px rgba(24,32,52,.2);
  --wk-schatten-2-d: 0 2px 4px rgba(0,0,0,.3), 0 16px 36px -12px rgba(0,0,0,.62);
  --wk-schatten-3-h: 0 4px 12px rgba(24,32,52,.08), 0 32px 64px -16px rgba(24,32,52,.34);
  --wk-schatten-3-d: 0 4px 12px rgba(0,0,0,.4), 0 32px 64px -16px rgba(0,0,0,.78);

  /* ---- Eigene Werte des Stils, hell und dunkel ---- */
  --glas-blob-1-h: rgba(128,160,228,.7);  --glas-blob-1-d: rgba(60,92,170,.38);
  --glas-blob-2-h: rgba(206,176,230,.6);  --glas-blob-2-d: rgba(112,72,156,.28);
  --glas-blob-3-h: rgba(140,208,206,.55); --glas-blob-3-d: rgba(40,112,112,.24);
  --glas-deckung-min-h: .5;               --glas-deckung-min-d: .055;            /* C4 rechnet mit beiden Grenzen */
  --glas-deckung-max-h: 1;                --glas-deckung-max-d: .11;
  --glas-pruef-h: #CFDAF3;                --glas-pruef-d: #394561;               /* ungünstigste Glasmischung (C4) */
  --glas-pruef-grund-h: #9FB6E6;          --glas-pruef-grund-d: #202E4E;         /* ungünstigster Grund: nie Text darauf */
  --glas-karte-h: rgba(255,255,255,.62);  --glas-karte-d: rgba(255,255,255,.04);
  --glas-knauf-h: #FFFFFF;                --glas-knauf-d: #12151B;
  --glas-bahn-h: rgba(22,28,44,.1);       --glas-bahn-d: rgba(255,255,255,.14);  /* Fortschritt, nicht bedienbar */
  --glas-schatten-knauf-h: 0 2px 6px rgba(0,0,0,.28); --glas-schatten-knauf-d: 0 2px 6px rgba(0,0,0,.45);

  /* ---- Ohne Hell/Dunkel · Dichte komfort (D1) ---- */
  --glas-a: .6;                           /* Glas-Stärke, die App setzt sie (Optionen) */
  --wk-glas-unschaerfe: 24px;
  --wk-strich: 0px;                       /* Glas zieht keine Linien (F1); Rahmen der Grundlagen verschwinden */
  --wk-strich-aktiv: 3px;                 /* nur der Fokusring (B5) */
  --wk-deaktiviert: .45;
  --wk-radius-s: 8px; --wk-radius-m: 12px; --wk-radius-l: 16px; --wk-radius-xl: 24px; --wk-radius-rund: 999px;
  --wk-schrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wk-schrift-anzeige: var(--wk-schrift);
  --wk-schrift-lesen: "Source Serif 4", Georgia, "Times New Roman", serif;   /* Dokumente, Leseansicht, Druck */
  --wk-groesse-titel: 24px; --wk-groesse-abschnitt: 18px; --wk-groesse-gross: 15px; --wk-groesse-text: 15px;
  --wk-groesse-klein: 13px; --wk-groesse-marke: 12px; --wk-groesse-feld: 16px;   /* Feld 16 px: kein Zoom (KK3) */
  --wk-gewicht-normal: 400; --wk-gewicht-stark: 600; --wk-gewicht-titel: 700; --wk-gewicht-abschnitt: 700;
  --wk-zeilenhoehe: 1.5;
  --wk-dauer-kurz: 120ms; --wk-dauer-mittel: 220ms; --wk-dauer-blatt: 260ms; --wk-dauer-lang: 300ms; --wk-dauer-feiern: 300ms;
  --wk-kurve: cubic-bezier(.2,0,0,1); --wk-kurve-feiern: cubic-bezier(.2,1,.3,1);
  --glas-feiern-skala: 1.08;              /* Feiern dezent: Symbol federt einmal; „mehr“ und „aus“ unten */
  --wk-knopf: 36px; --wk-knopf-klein: 30px; --wk-knopf-leise: 36px; --wk-tippflaeche: 36px; --wk-ziel: 36px;   /* B1; Knopfhöhen wie alle Stile (Maus 36/30) */
  --wk-symbol-s: 12px; --wk-symbol-m: 16px; --wk-symbol-l: 20px;
  --wk-lesebreite: 760px;
  --glas-zeile: 44px;                     /* Felder, Listenzeilen, Abhak-Feld */
  --glas-symbol-status: 24px; --glas-avatar: 28px;
  --glas-schalter-b: 56px; --glas-schalter-h: 32px; --glas-knauf-mass: 24px; --glas-knauf-weg: 24px;
  --glas-abstand-knopf: 16px; --glas-abstand-chip: 12px; --glas-abstand-feld: 12px; --glas-abstand-zeile: 12px;
  --glas-abstand-gruppe: 16px; --glas-abstand-bereich: 24px; --glas-abstand-block: 24px;
  --wk-h1: var(--wk-gewicht-titel) var(--wk-groesse-titel)/1.25 var(--wk-schrift);
  --wk-h2: var(--wk-gewicht-titel) var(--wk-groesse-abschnitt)/1.35 var(--wk-schrift);
  --wk-h3: var(--wk-gewicht-stark) var(--wk-groesse-gross)/1.4 var(--wk-schrift);
  --wk-text-font: var(--wk-gewicht-normal) var(--wk-groesse-text)/var(--wk-zeilenhoehe) var(--wk-schrift);
  --wk-klein: var(--wk-gewicht-normal) var(--wk-groesse-klein)/1.45 var(--wk-schrift);
}
@media (pointer: coarse) {
  [data-stil="glas"] { --wk-knopf: 44px; --wk-knopf-klein: 44px; --wk-knopf-leise: 44px; --wk-tippflaeche: 44px; --wk-ziel: 44px; }
}

/* ---- Dichte dicht (D1, D2): gleiche Namen, kleinere Werte ------------------------------------------- */
[data-stil="glas"][data-dichte="dicht"] {
  --wk-radius-s: 6px; --wk-radius-m: 8px; --wk-radius-l: 12px; --wk-radius-xl: 16px;
  --wk-groesse-titel: 20px; --wk-groesse-abschnitt: 15px; --wk-groesse-gross: 13px; --wk-groesse-text: 13px;
  --wk-groesse-klein: 12px; --wk-groesse-marke: 11px; --wk-groesse-feld: 13px;
  --wk-knopf: 32px; --wk-knopf-klein: 32px; --wk-knopf-leise: 32px; --wk-tippflaeche: 28px; --wk-ziel: 28px;   /* Knopf ≥ 30 (Vertrag G2), Ziel ≥ 28 (D2) */
  --wk-symbol-s: 12px; --wk-symbol-m: 14px; --wk-symbol-l: 16px;
  --glas-zeile: 32px;
  --glas-symbol-status: 18px; --glas-avatar: 22px;
  --glas-schalter-b: 40px; --glas-schalter-h: 24px; --glas-knauf-mass: 16px; --glas-knauf-weg: 16px;
  --glas-abstand-knopf: 12px; --glas-abstand-chip: 8px; --glas-abstand-feld: 8px; --glas-abstand-zeile: 4px;
  --glas-abstand-gruppe: 12px; --glas-abstand-bereich: 16px; --glas-abstand-block: 16px;
  --wk-zeilenhoehe: 1.45;
}

/* ---- Eigene Werte je Thema auflösen (wie tokens.css für die Rollen) ---------------------------------- */
[data-stil="glas"], [data-stil="glas"] [data-theme] {
  --glas-blob-1: var(--wk-wenn-hell, var(--glas-blob-1-d)) var(--wk-wenn-dunkel, var(--glas-blob-1-h));
  --glas-blob-2: var(--wk-wenn-hell, var(--glas-blob-2-d)) var(--wk-wenn-dunkel, var(--glas-blob-2-h));
  --glas-blob-3: var(--wk-wenn-hell, var(--glas-blob-3-d)) var(--wk-wenn-dunkel, var(--glas-blob-3-h));
  --glas-deckung-min: var(--wk-wenn-hell, var(--glas-deckung-min-d)) var(--wk-wenn-dunkel, var(--glas-deckung-min-h));
  --glas-deckung-max: var(--wk-wenn-hell, var(--glas-deckung-max-d)) var(--wk-wenn-dunkel, var(--glas-deckung-max-h));
  --glas-pruef: var(--wk-wenn-hell, var(--glas-pruef-d)) var(--wk-wenn-dunkel, var(--glas-pruef-h));
  --glas-pruef-grund: var(--wk-wenn-hell, var(--glas-pruef-grund-d)) var(--wk-wenn-dunkel, var(--glas-pruef-grund-h));
  --glas-karte: var(--wk-wenn-hell, var(--glas-karte-d)) var(--wk-wenn-dunkel, var(--glas-karte-h));
  --glas-knauf: var(--wk-wenn-hell, var(--glas-knauf-d)) var(--wk-wenn-dunkel, var(--glas-knauf-h));
  --glas-bahn: var(--wk-wenn-hell, var(--glas-bahn-d)) var(--wk-wenn-dunkel, var(--glas-bahn-h));
  --glas-schatten-knauf: var(--wk-wenn-hell, var(--glas-schatten-knauf-d)) var(--wk-wenn-dunkel, var(--glas-schatten-knauf-h));
}

/* ---- Fest statt Glas (F7): Einstellung, Systemwunsch, fehlende Unterstützung -------------------------- */
[data-stil="glas"][data-glas="fest"] { --wk-glas: var(--wk-flaeche); --wk-schwebend: var(--wk-flaeche); --glas-karte: var(--wk-flaeche); --wk-glas-unschaerfe: 0px; }
@media (prefers-reduced-transparency: reduce) {
  [data-stil="glas"] { --wk-glas: var(--wk-flaeche); --wk-schwebend: var(--wk-flaeche); --glas-karte: var(--wk-flaeche); --wk-glas-unschaerfe: 0px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-stil="glas"] { --wk-glas: var(--wk-flaeche); --wk-schwebend: var(--wk-flaeche); --glas-karte: var(--wk-flaeche); }
}

/* ---- Grund, Schrift, Fokus ---------------------------------------------------------------------------- */
[data-stil="glas"] { background: var(--wk-grund); color: var(--wk-text); font: var(--wk-text-font); -webkit-font-smoothing: antialiased; }
[data-stil="glas"] body, body[data-stil="glas"] { background: transparent; }
/* Verlauf hinter dem Glas: Glas braucht etwas, das durchscheint. Nie Text direkt darauf (G5, C4). */
[data-stil="glas"] body::before, body[data-stil="glas"]::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48vmax 40vmax at 12% -6%, var(--glas-blob-1), transparent 70%),
    radial-gradient(44vmax 36vmax at 104% 22%, var(--glas-blob-2), transparent 70%),
    radial-gradient(52vmax 40vmax at 38% 116%, var(--glas-blob-3), transparent 70%); }
[data-stil="glas"] :focus-visible { outline: var(--wk-strich-aktiv) solid var(--wk-fokus); outline-offset: 2px; }
/* Haken im gefüllten Statuskreis: hell auf Inhalt, dunkel auf der Aktiv-Fläche */
[data-stil="glas"] { --glas-haken-ink: var(--wk-auf-haupt); }
[data-stil="glas"] :is([aria-pressed="true"], [aria-current="page"], [aria-selected="true"], .wk-meldung) { --glas-haken-ink: var(--wk-aktiv); }
[data-stil="glas"] a { color: inherit; text-underline-offset: 4px; }                     /* A2: Links bleiben unterstrichen */
[data-stil="glas"] b, [data-stil="glas"] strong { font-weight: var(--wk-gewicht-titel); }
/* Taste: Kachel höher als die Zeile, darum negative Ränder oben und unten: Einblenden beim Hover ändert die Zeilenhöhe nicht */
[data-stil="glas"] kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-block: -4px; padding: 0 8px; border-radius: var(--wk-radius-s);
  background: var(--wk-feld); color: var(--wk-text-2); font: var(--wk-gewicht-stark) var(--wk-groesse-marke)/1 var(--wk-schrift); }
[data-stil="glas"][data-dichte="dicht"] kbd { min-width: 20px; height: 20px; padding: 0 4px; }

/* Schrift: fünf Größen plus Feld (T1), drei Gewichte (T2), Versalien nur als Marke (T3) */
[data-stil="glas"] .wk-h1 { font: var(--wk-h1); letter-spacing: -.015em; text-wrap: balance; margin: 0; }
[data-stil="glas"] .wk-h2 { font: var(--wk-h2); letter-spacing: -.01em; margin: 0; }
[data-stil="glas"] .wk-h3 { font: var(--wk-h3); margin: 0; }
[data-stil="glas"] .wk-klein { font: var(--wk-klein); color: var(--wk-text-leise); }
[data-stil="glas"] .wk-zahl { font-variant-numeric: tabular-nums; }
[data-stil="glas"] .wk-marke { font: var(--wk-gewicht-stark) var(--wk-groesse-marke)/1.4 var(--wk-schrift); letter-spacing: .06em; text-transform: uppercase;
  color: var(--wk-text-leise); }

/* Symbole in Bausteinen: Raster 24, Strich 1,75, runde Enden, Farbe aus dem Text */
[data-stil="glas"] :where(.wk-knopf, .wk-typ, .wk-leer, .wk-leiste-eintrag, .wk-gruppenkopf, .wk-menue-eintrag, .wk-zeile-griff, .wk-etikett, .wk-chip,
  .wk-segment-wahl, .wk-reiter-wahl, .wk-feld-name, .wk-feld-hinweis, .wk-meldung, .wk-wahlfeld, .wk-feld) svg {
  width: var(--wk-symbol-l); height: var(--wk-symbol-l); flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
[data-stil="glas"] :where(.wk-chip, .wk-segment-wahl, .wk-reiter-wahl, .wk-feld-name, .wk-feld-hinweis, .wk-etikett, .wk-menue-eintrag) svg {
  width: var(--wk-symbol-m); height: var(--wk-symbol-m); }

/* ---- Material: Glas (Ebene 1), Karte (Ebene 2) – F5, F6 ------------------------------------------------ */
[data-stil="glas"] .wk-glas { background: var(--wk-glas); border: 0; border-radius: var(--wk-radius-xl); box-shadow: var(--wk-schatten-2);
  -webkit-backdrop-filter: blur(var(--wk-glas-unschaerfe)) saturate(1.5); backdrop-filter: blur(var(--wk-glas-unschaerfe)) saturate(1.5); }
[data-stil="glas"] .wk-karte { padding: var(--wk-abstand-4); border: 0; border-radius: var(--wk-radius-l); background: var(--glas-karte); color: var(--wk-text);
  box-shadow: var(--wk-schatten-1); transition: background var(--wk-dauer-kurz) var(--wk-kurve), box-shadow var(--wk-dauer-mittel) var(--wk-kurve); }
[data-stil="glas"] .wk-karte[data-variante="vorschlag"] { border: 0; background: var(--wk-feld); box-shadow: none; }      /* flach, Symbol kreis-strich + Wort (Z5) */
[data-stil="glas"] .wk-karte[data-variante="entschieden"] { border: 0; box-shadow: var(--wk-schatten-1); }
[data-stil="glas"] .wk-karte[data-variante="offen"] { border: 0; background: var(--wk-achtung-flaeche); box-shadow: none; }
[data-stil="glas"] .wk-karte:is(:hover, [data-vorschau="hover"]) { box-shadow: var(--wk-schatten-2); }
[data-stil="glas"] .wk-karte:is([aria-selected="true"], [data-zustand="gewaehlt"]) { background: var(--wk-auswahl); box-shadow: var(--wk-schatten-1); }
[data-stil="glas"] .wk-karte:is([aria-expanded="true"], [data-zustand="offen"]) { background: var(--wk-auswahl); box-shadow: var(--wk-schatten-2); }
[data-stil="glas"] .wk-karte[data-zustand="erledigt"] { background: var(--wk-feld); color: var(--wk-text-2); box-shadow: none; }
[data-stil="glas"] .wk-karte[data-zustand="gezogen"] { background: var(--wk-schwebend); box-shadow: var(--wk-schatten-3); transform: rotate(1deg); cursor: grabbing; }
[data-stil="glas"] .wk-karte[data-zustand="ablageziel"] { outline: 0; background: var(--wk-auswahl); box-shadow: none;  /* vertrag-ausnahme Z2: Fokus als Ring 3 px in --wk-fokus über box-shadow bei :focus-visible (Glas B5, F1 verbietet Umrisse). */ }   /* KK5: getönt, nie gestrichelt */

/* ---- Knopf: mit Wort immer gefüllt (F8), eine Hauptaktion (B4), Rot nur als Tönung (C3) ------------------ */
[data-stil="glas"] .wk-knopf { gap: var(--wk-abstand-2); min-height: var(--wk-knopf); padding: 0 var(--glas-abstand-knopf); border: 0; border-radius: var(--wk-radius-m);
  background: var(--wk-feld); color: var(--wk-text); font: var(--wk-gewicht-stark) var(--wk-groesse-text)/1.25 var(--wk-schrift); }
[data-stil="glas"] .wk-knopf:is(:hover, [data-vorschau="hover"]):not([data-variante="haupt"], [data-variante="aktion"]) { background: var(--wk-feld-hover); }
[data-stil="glas"] .wk-knopf:is(:active, [data-vorschau="gedrueckt"], [aria-pressed="true"]):not([data-variante="haupt"], [data-variante="aktion"]) { background: var(--wk-gedrueckt); color: var(--wk-text); }
[data-stil="glas"] .wk-knopf[data-variante="haupt"] { background: var(--wk-haupt); color: var(--wk-auf-haupt); box-shadow: var(--wk-schatten-1); }
[data-stil="glas"] .wk-knopf:is([data-variante="haupt"], [data-variante="aktion"]):is(:hover, [data-vorschau="hover"]) { filter: brightness(1.15); }
[data-stil="glas"] .wk-knopf:is([data-variante="haupt"], [data-variante="aktion"]):is(:active, [data-vorschau="gedrueckt"]) { filter: brightness(.9); }
[data-stil="glas"] .wk-knopf[data-variante="leise"] { padding: 0 var(--glas-abstand-chip); background: var(--wk-feld); color: var(--wk-text-2); }
[data-stil="glas"] .wk-knopf:is([data-variante="symbol"], [data-variante="schliessen"]) { min-width: var(--wk-knopf); padding: 0; background: transparent; color: var(--wk-text-2); }
[data-stil="glas"] .wk-knopf[data-variante="schliessen"] { border-radius: var(--wk-radius-rund); }
[data-stil="glas"] .wk-knopf:is([data-variante="symbol"], [data-variante="schliessen"]):is(:hover, [data-vorschau="hover"], [aria-expanded="true"]) { background: var(--wk-feld-hover); color: var(--wk-text); }
[data-stil="glas"] .wk-knopf[data-variante="gefahr"] { background: var(--wk-feld); color: var(--wk-fehler-text); }
[data-stil="glas"] .wk-knopf[data-variante="gefahr"]:is(:hover, [data-vorschau="hover"], :active, [data-vorschau="gedrueckt"]) { background: var(--wk-fehler-flaeche); color: var(--wk-fehler-text); }
[data-stil="glas"] .wk-knopf[data-variante="fertig"] { background: var(--wk-gut-flaeche); color: var(--wk-gut-text); }
[data-stil="glas"] .wk-knopf[data-variante="fertig"]:is(:hover, [data-vorschau="hover"], :active, [data-vorschau="gedrueckt"]) { background: var(--wk-gut-flaeche); color: var(--wk-gut-text); filter: brightness(.96); }
[data-stil="glas"] .wk-knopf[data-variante="plus"] svg { color: var(--wk-haupt); }
/* Aktionsknopf: schwebend im Daumenbereich (R4), Fläche in der Akzentfarbe der Marke */
[data-stil="glas"] .wk-knopf[data-variante="aktion"] { min-width: 56px; min-height: 56px; padding: 0 var(--wk-abstand-4); border-radius: var(--wk-radius-rund);
  background: var(--wk-akzent); color: var(--wk-auf-akzent); box-shadow: var(--wk-schatten-2); }
[data-stil="glas"] .wk-knopf[data-variante="aktion"] svg { width: 24px; height: 24px; }
[data-stil="glas"] .wk-knopf:is(:disabled, [aria-disabled="true"]) { opacity: var(--wk-deaktiviert); cursor: not-allowed; box-shadow: none; filter: none; }
/* Lädt: Ring ohne Rahmen (F1) vor dem Wort, aria-busy (Z8) */
[data-stil="glas"] .wk-knopf[data-zustand="laedt"]::before { width: var(--wk-symbol-m); height: var(--wk-symbol-m); border: 0; border-radius: var(--wk-radius-rund);
  background: conic-gradient(currentColor 0 72%, transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), currentColor calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), currentColor calc(100% - 3px)); }

/* ---- Feld: gefüllt (F8), Etikett sichtbar (B6), Fokus als Ring (B5), Schrift 16 / 13 px (T1, KK3) --------- */
[data-stil="glas"] .wk-feld-gruppe { display: grid; gap: var(--wk-abstand-2); min-width: 0; }
[data-stil="glas"] .wk-feld-name { display: flex; align-items: center; gap: var(--wk-abstand-2); font: var(--wk-gewicht-stark) var(--wk-groesse-klein)/1.4 var(--wk-schrift);
  color: var(--wk-text-2); }
[data-stil="glas"] .wk-feld-hinweis { display: flex; align-items: center; gap: var(--wk-abstand-2); margin: 0; font: var(--wk-klein); color: var(--wk-text-leise); }
[data-stil="glas"] .wk-feld-gruppe:has([aria-invalid="true"]) .wk-feld-hinweis, [data-stil="glas"] .wk-feld-hinweis[role="alert"] { color: var(--wk-fehler-text); font-weight: var(--wk-gewicht-stark); }
[data-stil="glas"] .wk-feld { box-sizing: border-box; width: 100%; min-height: var(--glas-zeile); margin: 0; padding: 0 var(--glas-abstand-feld); border: 0; border-radius: var(--wk-radius-m);
  background: var(--wk-feld); color: var(--wk-text); font: var(--wk-gewicht-normal) var(--wk-groesse-feld)/1.4 var(--wk-schrift);
  transition: background var(--wk-dauer-kurz) var(--wk-kurve), box-shadow var(--wk-dauer-kurz) var(--wk-kurve); }
[data-stil="glas"] .wk-feld::placeholder { color: var(--wk-text-leise); opacity: 1; }
[data-stil="glas"] .wk-feld:is(:hover, [data-vorschau="hover"]) { background: var(--wk-feld-hover); }
[data-stil="glas"] .wk-feld:is(:focus, :focus-within, [data-vorschau="fokus"]) { outline: none; background: var(--wk-schwebend); box-shadow: 0 0 0 3px var(--wk-fokus);  /* vertrag-ausnahme Z2: Fokus als Ring 3 px in --wk-fokus über box-shadow bei :focus-visible (Glas B5, F1 verbietet Umrisse). */ }
[data-stil="glas"] .wk-feld[aria-invalid="true"] { box-shadow: 0 0 0 3px var(--wk-fehler); }   /* KK6: Ring plus Hinweistext */
/* Nur lesen: Text ohne Feldfläche, das Etikett bleibt (F8-Ausnahme: kein Eingabefeld mehr) */
[data-stil="glas"] .wk-feld:is([readonly], [aria-readonly="true"]) { padding-inline: 0; background: transparent; box-shadow: none; color: var(--wk-text-2); }
[data-stil="glas"] textarea.wk-feld { padding-block: var(--glas-abstand-feld); line-height: var(--wk-zeilenhoehe); }   /* mehrzeilig auch ohne data-variante (Bestand) */
[data-stil="glas"] .wk-feld[data-variante="mehrzeilig"] { min-height: 96px; padding: var(--glas-abstand-feld); line-height: var(--wk-zeilenhoehe); resize: vertical; }
[data-stil="glas"] .wk-feld:is([data-variante="zahl"], [data-variante="datum"], [data-variante="zeit"]) { font-variant-numeric: tabular-nums; }
[data-stil="glas"] .wk-feld[data-variante="zahl"] { text-align: end; }
[data-stil="glas"] .wk-feld[data-variante="datum"] { min-width: 10em; }
[data-stil="glas"] .wk-feld[data-variante="zeit"] { min-width: 6em; }
[data-stil="glas"] .wk-feld[data-variante="passwort"] { letter-spacing: .08em; }
[data-stil="glas"] .wk-feld[data-variante="code"] { font-family: var(--wk-schrift-mono); letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
/* Suche und Etiketten als Hülle: Ring an der Hülle, das Eingabefeld darin ohne eigene Fläche */
[data-stil="glas"] .wk-feld:is([data-variante="suche"], [data-variante="etiketten"]):is(div, label) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wk-abstand-2);
  padding: 0 var(--wk-abstand-1) 0 var(--glas-abstand-feld); color: var(--wk-text-2); }
[data-stil="glas"] .wk-feld[data-variante="etiketten"]:is(div, label) { padding: var(--wk-abstand-1) var(--glas-abstand-feld) var(--wk-abstand-1) var(--wk-abstand-1); }
[data-stil="glas"] .wk-feld:is([data-variante="suche"], [data-variante="etiketten"]) input { flex: 1; min-width: 8ch; min-height: var(--glas-zeile); margin: 0; padding: 0 var(--wk-abstand-1); border: 0;
  background: none; color: var(--wk-text); font: inherit; }
[data-stil="glas"] .wk-feld:is([data-variante="suche"], [data-variante="etiketten"]) input:focus-visible { outline: none;  /* vertrag-ausnahme Z2: Fokus als Ring 3 px in --wk-fokus über box-shadow bei :focus-visible (Glas B5, F1 verbietet Umrisse). */ } /* glas-ausnahme B5: Der Ring sitzt an der Hülle (.wk-feld:focus-within). */
[data-stil="glas"] .wk-feld:is([data-variante="suche"], [data-variante="etiketten"]) input::placeholder { color: var(--wk-text-leise); opacity: 1; }
[data-stil="glas"] .wk-feld input::-webkit-search-cancel-button { display: none; }

/* ---- Wahl: Schalter, Haken, Segment, Reiter, Regler, Wahlfeld ----------------------------------------- */
[data-stil="glas"] .wk-wahl-zeile { gap: var(--wk-abstand-3); min-height: var(--wk-ziel); }
/* Schalter: Spur ≥ 3 : 1 (C5), „an“ zusätzlich über die Lage des Knaufs (Z6) */
[data-stil="glas"] .wk-schalter { position: relative; flex: none; width: var(--glas-schalter-b); min-width: var(--glas-schalter-b); height: var(--glas-schalter-h); padding: 0;
  border: 0; border-radius: var(--wk-radius-rund); background: var(--wk-linie-stark); transition: background var(--wk-dauer-kurz) var(--wk-kurve); }
[data-stil="glas"] .wk-schalter::before { content: ""; position: absolute; inset: -8px 0; }                         /* Trefferfläche (B1) */
[data-stil="glas"] .wk-schalter::after { content: ""; position: absolute; top: 4px; left: 4px; width: var(--glas-knauf-mass); height: var(--glas-knauf-mass);
  border-radius: var(--wk-radius-rund); background: var(--glas-knauf); box-shadow: var(--glas-schatten-knauf); transition: transform var(--wk-dauer-mittel) var(--wk-kurve-feiern);  /* vertrag-ausnahme S5: Knauf von Schalter und Regler: enger Schatten, damit er sich auf der Spur abhebt (C5); keine Ebene. */ }
[data-stil="glas"] .wk-schalter[aria-checked="false"] { background: var(--wk-linie-stark); }
[data-stil="glas"] .wk-schalter[aria-checked="true"] { background: var(--wk-aktiv); }
[data-stil="glas"] .wk-schalter[aria-checked="true"]::after { transform: translateX(var(--glas-knauf-weg)); }
/* Haken (Mehrfachwahl): 40-px-Ziel, Kästchen und Haken als Flächen (kein Rahmen, F1) */
[data-stil="glas"] .wk-haken { position: relative; width: var(--wk-ziel); height: var(--wk-ziel); border: 0; border-radius: var(--wk-radius-m); background: transparent;
  transition: background var(--wk-dauer-kurz) var(--wk-kurve); }
[data-stil="glas"] .wk-haken:is(:hover, [data-vorschau="hover"]) { background: var(--wk-feld-hover); }
[data-stil="glas"] .wk-haken::before { content: ""; position: absolute; inset: calc(50% - var(--wk-symbol-l) / 2); border-radius: var(--wk-radius-s);
  background: var(--wk-linie-stark); transition: background var(--wk-dauer-kurz) var(--wk-kurve); }
[data-stil="glas"] .wk-haken::after { content: ""; position: absolute; inset: calc(50% - var(--wk-symbol-l) / 2 + 3px); width: auto; height: auto; margin: 0; border: 0;
  border-radius: var(--wk-radius-s); background: var(--glas-knauf); transform: none; }
[data-stil="glas"] .wk-haken:is(:checked, :indeterminate, [aria-checked="mixed"]) { border: 0; background: transparent; }
[data-stil="glas"] .wk-haken:is(:checked, :indeterminate, [aria-checked="mixed"])::before { background: var(--wk-aktiv); }
[data-stil="glas"] .wk-haken:checked::after { inset: calc(50% - var(--wk-symbol-l) / 2); width: auto; height: auto; margin: 0; border: 0; background: var(--wk-auf-aktiv);
  clip-path: polygon(22% 50%, 40% 68%, 78% 28%, 86% 36%, 40% 82%, 14% 58%); transform: none; }
[data-stil="glas"] .wk-haken:is(:indeterminate, [aria-checked="mixed"])::after { inset: calc(50% - var(--wk-symbol-l) / 2); width: auto; height: auto; margin: 0; border: 0;
  background: var(--wk-auf-aktiv); clip-path: polygon(22% 44%, 78% 44%, 78% 56%, 22% 56%); transform: none; }
[data-stil="glas"] .wk-haken:is(:disabled, [aria-disabled="true"]) { opacity: var(--wk-deaktiviert); cursor: not-allowed; }
/* Segment und Reiter: genau eins aktiv, Aktiv-Fläche (Z1) */
[data-stil="glas"] .wk-segment { display: flex; gap: var(--wk-abstand-1); max-width: 100%; padding: var(--wk-abstand-1); border-radius: var(--wk-radius-m); background: var(--wk-feld); }
[data-stil="glas"] :is(.wk-segment-wahl, .wk-reiter-wahl) { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: var(--wk-abstand-2);
  min-width: var(--wk-knopf); min-height: var(--wk-knopf); padding: 0 var(--glas-abstand-chip); border: 0; border-radius: var(--wk-radius-s); background: transparent;
  color: var(--wk-text-2); font: var(--wk-gewicht-stark) var(--wk-groesse-text)/1.25 var(--wk-schrift); white-space: nowrap; box-shadow: none;
  transition: background var(--wk-dauer-kurz) var(--wk-kurve), color var(--wk-dauer-kurz) var(--wk-kurve); }
[data-stil="glas"] :is(.wk-segment-wahl, .wk-reiter-wahl):is(:hover, [data-vorschau="hover"]) { background: var(--wk-feld-hover); color: var(--wk-text); }
[data-stil="glas"] :is(.wk-segment-wahl[aria-pressed="true"], .wk-reiter-wahl[aria-selected="true"]) { background: var(--wk-aktiv); color: var(--wk-auf-aktiv); box-shadow: none; font-weight: var(--wk-gewicht-stark); }
[data-stil="glas"] :is(.wk-segment-wahl, .wk-reiter-wahl):is(:disabled, [aria-disabled="true"]) { opacity: var(--wk-deaktiviert); cursor: not-allowed; }
[data-stil="glas"] .wk-reiter { display: flex; gap: var(--wk-abstand-1); padding: var(--wk-abstand-1); border: 0; overflow-x: auto; scrollbar-width: none; }
[data-stil="glas"] .wk-reiter-wahl { flex: none; border-radius: var(--wk-radius-m); }
/* Regler: Spur ≥ 3 : 1, Knauf ≥ 3 : 1 zur Spur (C5) */
[data-stil="glas"] .wk-regler { height: var(--glas-zeile); }
[data-stil="glas"] .wk-regler::-webkit-slider-runnable-track { height: 8px; border-radius: var(--wk-radius-rund); background: var(--wk-linie-stark); }
[data-stil="glas"] .wk-regler::-moz-range-track { height: 8px; border-radius: var(--wk-radius-rund); background: var(--wk-linie-stark); }
[data-stil="glas"] .wk-regler::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -8px; border: 0; border-radius: var(--wk-radius-rund); background: var(--glas-knauf);
  box-shadow: var(--glas-schatten-knauf);  /* vertrag-ausnahme S5: Knauf von Schalter und Regler: enger Schatten, damit er sich auf der Spur abhebt (C5); keine Ebene. */ }
[data-stil="glas"] .wk-regler::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: var(--wk-radius-rund); background: var(--glas-knauf); box-shadow: var(--glas-schatten-knauf);  /* vertrag-ausnahme S5: Knauf von Schalter und Regler: enger Schatten, damit er sich auf der Spur abhebt (C5); keine Ebene. */ }
[data-stil="glas"] .wk-regler:is(:disabled, [aria-disabled="true"]) { opacity: var(--wk-deaktiviert); cursor: not-allowed; }
/* Wahlfeld: Ersatz für select, öffnet Popover (weit) oder Blatt (kompakt) */
[data-stil="glas"] .wk-wahlfeld { justify-content: flex-start; gap: var(--wk-abstand-2); min-height: var(--glas-zeile); padding: 0 var(--glas-abstand-feld); border: 0; border-radius: var(--wk-radius-m);
  background: var(--wk-feld); color: var(--wk-text); font: var(--wk-gewicht-normal) var(--wk-groesse-feld)/1.4 var(--wk-schrift); }
[data-stil="glas"] .wk-wahlfeld::after { flex: none; width: 10px; height: 6px; margin: 0 0 0 auto; border: 0; background: currentColor; transform: none;
  clip-path: polygon(0 0, 50% 70%, 100% 0, 100% 30%, 50% 100%, 0 30%); }
[data-stil="glas"] .wk-wahlfeld:is(:hover, [data-vorschau="hover"]) { background: var(--wk-feld-hover); }
[data-stil="glas"] .wk-wahlfeld[aria-expanded="true"] { background: var(--wk-schwebend); box-shadow: 0 0 0 3px var(--wk-fokus); }
[data-stil="glas"] .wk-wahlfeld[aria-expanded="true"]::after { margin: 0 0 0 auto; transform: rotate(180deg); }
[data-stil="glas"] .wk-wahlfeld:is(:disabled, [aria-disabled="true"]) { opacity: var(--wk-deaktiviert); cursor: not-allowed; }

/* ---- Anzeige ------------------------------------------------------------------------------------------- */
/* Chip: Wert wählen, gewählt = Auswahlfläche plus Haken (Z2) */
[data-stil="glas"] .wk-chip { display: inline-flex; align-items: center; justify-content: center; gap: var(--wk-abstand-2); min-width: var(--wk-knopf); min-height: var(--wk-knopf); padding: 0 var(--glas-abstand-chip); border: 0;
  border-radius: var(--wk-radius-m); background: var(--wk-feld); color: var(--wk-text-2); font: var(--wk-gewicht-stark) var(--wk-groesse-text)/1.25 var(--wk-schrift); white-space: nowrap;
  transition: background var(--wk-dauer-kurz) var(--wk-kurve), color var(--wk-dauer-kurz) var(--wk-kurve); }
[data-stil="glas"] button.wk-chip { min-height: var(--wk-knopf); }
[data-stil="glas"] .wk-chip:is(:hover, [data-vorschau="hover"]) { background: var(--wk-feld-hover); color: var(--wk-text); }
[data-stil="glas"] .wk-chip[aria-pressed="true"] { background: var(--wk-auswahl); color: var(--wk-text); }
/* Etikett: Zustand als Symbol plus Wort (Z6), Tönung statt Rand */
[data-stil="glas"] .wk-etikett { gap: var(--wk-abstand-1); min-height: 24px; padding: 0 var(--wk-abstand-2); border: 0; border-radius: var(--wk-radius-rund); outline: 0;
  background: var(--wk-feld); color: var(--wk-text-2); font: var(--wk-gewicht-stark) var(--wk-groesse-klein)/1.4 var(--wk-schrift); box-shadow: none;  /* vertrag-ausnahme Z2: Fokus als Ring 3 px in --wk-fokus über box-shadow bei :focus-visible (Glas B5, F1 verbietet Umrisse). */ }
[data-stil="glas"] .wk-etikett svg { fill: none; stroke: currentColor; }
[data-stil="glas"] .wk-etikett[data-variante="vorschlag"] { outline: 0; background: var(--wk-feld);  /* vertrag-ausnahme Z2: Fokus als Ring 3 px in --wk-fokus über box-shadow bei :focus-visible (Glas B5, F1 verbietet Umrisse). */ }
[data-stil="glas"] .wk-etikett:is([data-variante="entschieden"], [data-variante="gut"]) { background: var(--wk-gut-flaeche); color: var(--wk-gut-text); box-shadow: none; }
[data-stil="glas"] .wk-etikett[data-variante="achtung"] { background: var(--wk-achtung-flaeche); color: var(--wk-achtung-text); }
[data-stil="glas"] .wk-etikett[data-variante="fehler"] { background: var(--wk-fehler-flaeche); color: var(--wk-fehler-text); }
[data-stil="glas"] .wk-etikett[data-variante="info"] { background: var(--wk-info-flaeche); color: var(--wk-info-text); }
/* Zähler: Aktiv-Fläche; Signal nur als Tönung (C3) */
[data-stil="glas"] .wk-zaehler { min-width: 20px; height: 20px; padding: 0 var(--wk-abstand-1); border-radius: var(--wk-radius-rund); background: var(--wk-aktiv); color: var(--wk-auf-aktiv);
  font: var(--wk-gewicht-titel) var(--wk-groesse-marke)/1 var(--wk-schrift); font-variant-numeric: tabular-nums; }
[data-stil="glas"] .wk-zaehler[data-variante="signal"] { background: var(--wk-fehler-flaeche); color: var(--wk-fehler-text); }
[data-stil="glas"][data-dichte="dicht"] .wk-zaehler { min-width: 16px; height: 16px; }
/* Statuspunkt: jede Lage eine eigene Form (Z6) – Ring, Punkt, Raute, Quadrat, Dreieck – plus Wort */
[data-stil="glas"] .wk-statuspunkt { gap: var(--wk-abstand-2); color: var(--wk-text-2); font: var(--wk-text-font); }
[data-stil="glas"] .wk-statuspunkt::before { width: var(--wk-symbol-s); height: var(--wk-symbol-s); border-radius: var(--wk-radius-rund); color: var(--wk-linie-stark);
  background: radial-gradient(circle, transparent 42%, currentColor 46%); }
[data-stil="glas"] .wk-statuspunkt[data-variante="gut"]::before { color: var(--wk-gut); background: currentColor; }
[data-stil="glas"] .wk-statuspunkt[data-variante="achtung"]::before { color: var(--wk-achtung); background: currentColor; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
[data-stil="glas"] .wk-statuspunkt[data-variante="fehler"]::before { color: var(--wk-fehler); background: currentColor; clip-path: inset(12% round 2px); }
[data-stil="glas"] .wk-statuspunkt[data-variante="info"]::before { color: var(--wk-info); background: currentColor; clip-path: polygon(50% 4%, 100% 92%, 0 92%); }
/* Avatar, Fortschritt, Typ */
[data-stil="glas"] .wk-avatar { width: var(--glas-avatar); height: var(--glas-avatar); border-radius: var(--wk-radius-rund); background: var(--wk-feld); color: var(--wk-text-2);
  font: var(--wk-gewicht-titel) var(--wk-groesse-marke)/1 var(--wk-schrift); }
[data-stil="glas"] .wk-fortschritt { height: 8px; border: 0; border-radius: var(--wk-radius-rund); background: var(--glas-bahn); color: var(--wk-aktiv); }
[data-stil="glas"] .wk-fortschritt::-webkit-progress-bar { background: var(--glas-bahn); border-radius: var(--wk-radius-rund); }
[data-stil="glas"] .wk-fortschritt::-webkit-progress-value { background: var(--wk-aktiv); border-radius: var(--wk-radius-rund); transition: width var(--wk-dauer-mittel) var(--wk-kurve); }
[data-stil="glas"] .wk-fortschritt::-moz-progress-bar { background: var(--wk-aktiv); border-radius: var(--wk-radius-rund); }
[data-stil="glas"][data-dichte="dicht"] .wk-fortschritt { height: 6px; }
[data-stil="glas"] .wk-typ { width: var(--wk-symbol-l); height: var(--wk-symbol-l); color: var(--wk-text-2); }

/* ---- Zeile und Gruppenkopf: ohne Linien, drei Ebenen über Einzug (L08) --------------------------------- */
[data-stil="glas"] .wk-zeilen { display: grid; gap: var(--wk-abstand-1); align-content: start; margin: 0; padding: 0; list-style: none; }
[data-stil="glas"][data-dichte="dicht"] .wk-zeilen { gap: 0; }
[data-stil="glas"] .wk-zeile { gap: var(--wk-abstand-1); min-height: var(--glas-zeile); padding: 0 var(--wk-abstand-1); border: 0; border-radius: var(--wk-radius-l);
  background: transparent; color: var(--wk-text); box-shadow: none; }
[data-stil="glas"] .wk-zeile:is(:hover, [data-vorschau="hover"]) { background: var(--wk-feld); }
[data-stil="glas"] .wk-zeile:is(:focus-visible, [data-vorschau="fokus"]) { outline: var(--wk-strich-aktiv) solid var(--wk-fokus); outline-offset: -3px; }
[data-stil="glas"] .wk-zeile:is([aria-selected="true"], [data-zustand="gewaehlt"]) { background: var(--wk-auswahl); }           /* plus Haken (Z2) */
[data-stil="glas"] .wk-zeile:is([aria-expanded="true"], [data-zustand="offen"]) { background: var(--wk-auswahl); box-shadow: none; } /* plus Pfeil (Z3) */
[data-stil="glas"] .wk-zeile[data-zustand="erledigt"] .wk-zeile-text { color: var(--wk-text-leise); text-decoration: line-through; font-weight: var(--wk-gewicht-normal); }
[data-stil="glas"] .wk-zeile[data-zustand="gezogen"] { background: var(--wk-schwebend); box-shadow: var(--wk-schatten-2); cursor: grabbing; }
[data-stil="glas"] .wk-zeile[data-zustand="ablageziel"] { outline: 0; background: var(--wk-auswahl);  /* vertrag-ausnahme Z2: Fokus als Ring 3 px in --wk-fokus über box-shadow bei :focus-visible (Glas B5, F1 verbietet Umrisse). */ }                            /* KK5 */
[data-stil="glas"] .wk-zeile[data-ebene="2"] { margin-left: var(--wk-abstand-6); }
[data-stil="glas"] .wk-zeile[data-ebene="3"] { margin-left: var(--wk-abstand-7); }
[data-stil="glas"] .wk-zeile-griff { min-width: 24px; min-height: var(--glas-zeile); color: var(--wk-text-leise); }
[data-stil="glas"] .wk-zeile-text { flex: 1; min-width: 0; font-weight: var(--wk-gewicht-stark); }
[data-stil="glas"] .wk-zeile-neben { display: inline-flex; align-items: center; gap: var(--wk-abstand-1); color: var(--wk-text-leise); font: var(--wk-klein); font-variant-numeric: tabular-nums; }
[data-stil="glas"] .wk-gruppenkopf { gap: var(--wk-abstand-2); min-height: var(--wk-knopf); padding: var(--glas-abstand-gruppe) var(--wk-abstand-3) var(--wk-abstand-1); border: 0;
  border-radius: var(--wk-radius-m); background: transparent; color: var(--wk-text-leise);
  font: var(--wk-gewicht-stark) var(--wk-groesse-marke)/1.4 var(--wk-schrift); letter-spacing: .06em; text-transform: uppercase; }
[data-stil="glas"] .wk-gruppenkopf svg { width: var(--wk-symbol-m); height: var(--wk-symbol-m); }
[data-stil="glas"] .wk-gruppenkopf:is(:hover, [data-vorschau="hover"]) { background: var(--wk-feld); color: var(--wk-text); }
[data-stil="glas"] .wk-gruppenkopf[aria-expanded="false"] { color: var(--wk-text-leise); }
[data-stil="glas"] .wk-gruppenkopf .wk-zaehler { margin-left: auto; letter-spacing: 0; }

/* ---- Überlagerungen: Schleier, Dialog, Blatt, Menü, Popover, Meldung, Betrachter (F5 Ebene 3) ------------- */
[data-stil="glas"] .wk-schleier { position: fixed; inset: 0; z-index: var(--wk-ebene-dialog); display: grid; place-items: center; padding: var(--wk-abstand-4); background: var(--wk-schleier);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: glas-blende var(--wk-dauer-mittel) var(--wk-kurve) both; }
[data-stil="glas"] :is(.wk-dialog, .wk-blatt, .wk-menue, .wk-popover) { border: 0; background: var(--wk-schwebend); color: var(--wk-text);
  -webkit-backdrop-filter: blur(var(--wk-glas-unschaerfe)) saturate(1.5); backdrop-filter: blur(var(--wk-glas-unschaerfe)) saturate(1.5); }
[data-stil="glas"] .wk-dialog { display: grid; gap: var(--glas-abstand-block); width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: var(--glas-abstand-bereich);
  border-radius: var(--wk-radius-xl); box-shadow: var(--wk-schatten-3); }
[data-stil="glas"] .wk-dialog:is([data-zustand="offen"], [open]) { animation: glas-hoch var(--wk-dauer-blatt) var(--wk-kurve-feiern) both; }
[data-stil="glas"] .wk-dialog-kopf { display: flex; align-items: center; gap: var(--wk-abstand-3); margin: 0; font: var(--wk-h2); }
[data-stil="glas"] .wk-dialog-kopf > :is(h2, h3) { flex: 1; min-width: 0; margin: 0; font: inherit; }
[data-stil="glas"] .wk-dialog-text { margin: 0; color: var(--wk-text-2); }
[data-stil="glas"] .wk-dialog-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--wk-abstand-2); margin: 0; }
/* Blatt: von unten (kompakt, mittel), seitlich ab weit; Griff zeigt: ziehen oder wischen schließt (L10) */
[data-stil="glas"] .wk-blatt { gap: var(--wk-abstand-3); padding: var(--wk-abstand-2) var(--glas-abstand-bereich) max(var(--glas-abstand-bereich), env(safe-area-inset-bottom));
  border-radius: var(--wk-radius-xl) var(--wk-radius-xl) var(--wk-radius-s) var(--wk-radius-s); box-shadow: var(--wk-schatten-3); transition: transform var(--wk-dauer-blatt) var(--wk-kurve); }
[data-stil="glas"] .wk-blatt-griff { display: block; width: 40px; height: 4px; margin: var(--wk-abstand-1) auto var(--wk-abstand-2); border-radius: var(--wk-radius-rund); background: var(--wk-linie-stark); }
@media (min-width: 1100px) {
  [data-stil="glas"] .wk-blatt { padding-top: var(--glas-abstand-bereich); border-radius: var(--wk-radius-xl) var(--wk-radius-s) var(--wk-radius-s) var(--wk-radius-xl); }
  [data-stil="glas"] .wk-blatt-griff { display: none; }
}
/* Menü und Popover: schwebend (Ebene menue), Einträge mit Symbol und Wort, Kürzel rechts */
[data-stil="glas"] :is(.wk-menue, .wk-popover) { display: grid; gap: var(--wk-abstand-1); min-width: 208px; padding: var(--wk-abstand-2); border-radius: var(--wk-radius-l);
  box-shadow: var(--wk-schatten-2); }
[data-stil="glas"] .wk-menue-eintrag { gap: var(--wk-abstand-3); min-height: var(--wk-knopf); padding: 0 var(--glas-abstand-chip); border: 0; border-radius: var(--wk-radius-s);
  background: transparent; color: var(--wk-text); font: var(--wk-gewicht-stark) var(--wk-groesse-text)/1.3 var(--wk-schrift); }
[data-stil="glas"] .wk-menue-eintrag:is(:hover, :focus-visible, [data-vorschau="hover"]) { background: var(--wk-feld-hover); }
[data-stil="glas"] .wk-menue-eintrag:is(:focus-visible, [data-vorschau="fokus"]) { outline: var(--wk-strich-aktiv) solid var(--wk-fokus); outline-offset: -3px; }
[data-stil="glas"] .wk-menue-eintrag[data-variante="gefahr"] { color: var(--wk-fehler-text); }
[data-stil="glas"] .wk-menue-eintrag[aria-selected="true"] { background: var(--wk-auswahl); font-weight: var(--wk-gewicht-stark); }   /* plus Haken (Z2) */
[data-stil="glas"] .wk-menue-eintrag[aria-expanded="true"] { background: var(--wk-feld-hover); }
[data-stil="glas"] .wk-menue-eintrag kbd { margin-left: auto; }
/* Meldung: unten, mit Rückgängig (B7); Erfolg und Fehler mit Symbol, nie nur Farbe (Z6) */
[data-stil="glas"] .wk-meldungen { gap: var(--wk-abstand-2); }
[data-stil="glas"] .wk-meldung { gap: var(--wk-abstand-2); min-height: var(--wk-knopf); padding: var(--wk-abstand-1) var(--wk-abstand-1) var(--wk-abstand-1) var(--wk-abstand-4); border: 0;
  border-radius: var(--wk-radius-rund); background: var(--wk-aktiv); color: var(--wk-auf-aktiv); box-shadow: var(--wk-schatten-3);
  font: var(--wk-gewicht-stark) var(--wk-groesse-text)/1.35 var(--wk-schrift); animation: glas-hoch var(--wk-dauer-mittel) var(--wk-kurve-feiern) both; }
[data-stil="glas"] .wk-meldung .wk-knopf { border-radius: var(--wk-radius-rund); background: var(--wk-auf-aktiv); color: var(--wk-aktiv); text-decoration: none; }
[data-stil="glas"] .wk-meldung .wk-knopf:is(:hover, [data-vorschau="hover"]) { background: var(--wk-auf-aktiv); color: var(--wk-aktiv); filter: brightness(.92); }
[data-stil="glas"] .wk-meldung:is([data-variante="erfolg"], [data-variante="fehler"]) { background: var(--wk-schwebend); box-shadow: var(--wk-schatten-3); }
[data-stil="glas"] .wk-meldung[data-variante="erfolg"] { color: var(--wk-gut-text); }
[data-stil="glas"] .wk-meldung[data-variante="fehler"] { color: var(--wk-fehler-text); }
[data-stil="glas"] .wk-meldung:is([data-variante="erfolg"], [data-variante="fehler"]) .wk-knopf { background: var(--wk-feld); color: var(--wk-text); }
[data-stil="glas"] .wk-betrachter { background: var(--wk-grund); }
/* Kompakt: Dialoge kommen von unten (R4, Daumenbereich) */
@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) {
  [data-stil="glas"] .wk-schleier { place-items: end stretch; padding: var(--wk-abstand-2); }
  [data-stil="glas"] .wk-dialog { width: 100%; max-height: calc(100dvh - 16px); }
}
@keyframes glas-blende { from { opacity: 0; } }
@keyframes glas-hoch { from { opacity: 0; transform: translateY(16px); } }

/* ---- Leer, Leerbild, Lader (Ansichtszustände, L09) ------------------------------------------------------ */
[data-stil="glas"] .wk-leer { display: grid; justify-items: center; gap: var(--wk-abstand-3); padding: var(--wk-abstand-7) var(--wk-abstand-5); border-radius: var(--wk-radius-l);
  color: var(--wk-text-leise); text-align: center; }
/* Leerbild: großes Symbol auf einer runden Tönung */
[data-stil="glas"] .wk-leer svg { box-sizing: content-box; width: 40px; height: 40px; padding: var(--wk-abstand-4); border-radius: var(--wk-radius-rund); background: var(--wk-feld);
  color: var(--wk-text-2); stroke-width: 1.5; }
[data-stil="glas"] .wk-leer[data-variante="ohne-treffer"] { padding-block: var(--wk-abstand-5); }
[data-stil="glas"] .wk-leer[data-variante="fehler"] { background: var(--wk-fehler-flaeche); color: var(--wk-fehler-text); }
[data-stil="glas"] .wk-leer[data-variante="fehler"] svg { background: transparent; color: var(--wk-fehler); }
[data-stil="glas"] .wk-lader { width: var(--wk-symbol-l); height: var(--wk-symbol-l); border: 0; border-radius: var(--wk-radius-rund);
  background: conic-gradient(var(--wk-aktiv) 0 25%, var(--wk-linie-stark) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), currentColor calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), currentColor calc(100% - 3px));
  animation: wk-drehen 900ms linear infinite; } /* glas-ausnahme M1: Dauerdrehung des Laders ist keine Übergangsdauer; unter reduzierter Bewegung steht er still. */

/* ---- Leisten: Seitenleiste, Kopfzeile, Reiterleiste, Werkzeugleiste, Auswahlleiste (L07) ---------------- */
[data-stil="glas"] .wk-seitenleiste { gap: var(--wk-abstand-1); width: auto; padding: var(--wk-abstand-2); border: 0; border-radius: var(--wk-radius-xl); background: var(--wk-glas);
  box-shadow: var(--wk-schatten-2); -webkit-backdrop-filter: blur(var(--wk-glas-unschaerfe)) saturate(1.5); backdrop-filter: blur(var(--wk-glas-unschaerfe)) saturate(1.5); }
[data-stil="glas"] .wk-leiste-eintrag { position: relative; gap: var(--wk-abstand-3); min-height: var(--glas-zeile); padding: 0 var(--wk-abstand-2); border: 0; border-radius: var(--wk-radius-m);
  background: transparent; color: var(--wk-text-2); font: var(--wk-gewicht-stark) var(--wk-groesse-text)/1.3 var(--wk-schrift); text-align: start;
  transition: background var(--wk-dauer-kurz) var(--wk-kurve), color var(--wk-dauer-kurz) var(--wk-kurve); }
[data-stil="glas"] .wk-leiste-eintrag:is(:hover, [data-vorschau="hover"]) { background: var(--wk-feld-hover); color: var(--wk-text); }
[data-stil="glas"] :is(.wk-seitenleiste, .wk-reiterleiste) .wk-leiste-eintrag:is([aria-current="page"], [aria-expanded="true"]) { background: var(--wk-aktiv); color: var(--wk-auf-aktiv);
  font-weight: var(--wk-gewicht-stark); box-shadow: none; }
[data-stil="glas"] .wk-leiste-eintrag[data-zustand="ablageziel"] { background: var(--wk-auswahl); color: var(--wk-text); }   /* beim Ziehen, mit Wort (B12) */
/* Eingeklappt: Schiene mit Symbol über Wort – Orte tragen immer ein Wort (G6) */
/* Bei Bedarf: Schiene aus Glas; ausgefahren schwebend (F10: gedeckte Fläche) mit Ebene 3, Bewegung ≤ 300 ms (M1) */
[data-stil="glas"] .wk-seitenleiste[data-zustand="bedarf"] { width: 15rem; }
[data-stil="glas"] .wk-seitenleiste[data-zustand="bedarf"]:is(:hover, :focus-within, [data-vorschau="offen"]) { background: var(--wk-schwebend); box-shadow: var(--wk-schatten-3); }
/* Detailbereich: Glasfläche rechts wie die Leiste links; das Blatt darin steht ohne eigene Glasschicht (F6) */
[data-stil="glas"] .wk-detailbereich { border: 0; border-radius: var(--wk-radius-xl); background: var(--wk-glas); box-shadow: var(--wk-schatten-2);
  -webkit-backdrop-filter: blur(var(--wk-glas-unschaerfe)) saturate(1.5); backdrop-filter: blur(var(--wk-glas-unschaerfe)) saturate(1.5); }
[data-stil="glas"] .wk-detailbereich-kopf { padding: var(--glas-abstand-gruppe) var(--glas-abstand-gruppe) 0; }
[data-stil="glas"] .wk-detailbereich-inhalt { padding: var(--glas-abstand-gruppe); }
[data-stil="glas"] .wk-detailbereich[data-zustand="zu"] .wk-detailbereich-kopf { padding: var(--wk-abstand-2) 0; }
[data-stil="glas"] .wk-seitenleiste[data-zustand="eingeklappt"] { width: auto; }
[data-stil="glas"] .wk-seitenleiste[data-zustand="eingeklappt"] .wk-leiste-eintrag { flex-direction: column; justify-content: center; gap: var(--wk-abstand-1); min-height: 64px;
  padding: var(--wk-abstand-2) var(--wk-abstand-1); border-radius: var(--wk-radius-l); font-size: var(--wk-groesse-marke); text-align: center; }
[data-stil="glas"] .wk-seitenleiste[data-zustand="eingeklappt"] .wk-leiste-eintrag > span { width: auto; height: auto; overflow: visible; clip-path: none; white-space: nowrap; }
[data-stil="glas"] .wk-seitenleiste[data-zustand="eingeklappt"] .wk-leiste-eintrag > span:not(.wk-zaehler) { position: static; }
[data-stil="glas"] :is(.wk-seitenleiste[data-zustand="eingeklappt"], .wk-reiterleiste) .wk-leiste-eintrag > .wk-zaehler { position: absolute; top: 4px; right: 8px; }
[data-stil="glas"] .wk-leiste-eintrag > .wk-zaehler { margin-left: auto; }
[data-stil="glas"] :is(.wk-seitenleiste, .wk-reiterleiste) .wk-leiste-eintrag:is([aria-current="page"], [aria-expanded="true"]) > .wk-zaehler { background: var(--wk-auf-aktiv); color: var(--wk-aktiv); }
[data-stil="glas"] .wk-kopfzeile { position: relative; z-index: auto; flex-wrap: wrap; gap: var(--wk-abstand-3); min-height: 0; padding: var(--glas-abstand-bereich) var(--glas-abstand-bereich) var(--wk-abstand-3);
  border: 0; background: transparent; }
[data-stil="glas"] .wk-kopfzeile > :last-child { margin-left: 0; }
[data-stil="glas"] .wk-kopfzeile[data-zustand="eingeklappt"] { position: sticky; top: 0; z-index: var(--wk-ebene-kopf); padding: var(--wk-abstand-2) var(--wk-abstand-3); border-radius: var(--wk-radius-l);
  background: var(--wk-schwebend); box-shadow: var(--wk-schatten-1); -webkit-backdrop-filter: blur(var(--wk-glas-unschaerfe)); backdrop-filter: blur(var(--wk-glas-unschaerfe)); }
[data-stil="glas"] .wk-reiterleiste { gap: var(--wk-abstand-1); padding: var(--wk-abstand-1); border: 0; border-radius: var(--wk-radius-xl); background: var(--wk-glas); box-shadow: var(--wk-schatten-2);
  -webkit-backdrop-filter: blur(var(--wk-glas-unschaerfe)) saturate(1.5); backdrop-filter: blur(var(--wk-glas-unschaerfe)) saturate(1.5); }
[data-stil="glas"] .wk-reiterleiste .wk-leiste-eintrag { flex: 1; flex-direction: column; justify-content: center; gap: var(--wk-abstand-1); min-width: 0; min-height: 64px;
  padding: var(--wk-abstand-2) var(--wk-abstand-1); border-radius: var(--wk-radius-l); font: var(--wk-gewicht-stark) var(--wk-groesse-marke)/1.3 var(--wk-schrift); }
[data-stil="glas"] .wk-werkzeugleiste { gap: var(--wk-abstand-1); padding: var(--wk-abstand-1); border-radius: var(--wk-radius-m); background: var(--wk-feld); box-shadow: none; scrollbar-width: none; }
[data-stil="glas"] .wk-werkzeugleiste .wk-knopf { background: transparent; }
[data-stil="glas"] .wk-werkzeugleiste .wk-knopf:is(:hover, [data-vorschau="hover"]) { background: var(--wk-feld-hover); }
[data-stil="glas"] .wk-werkzeugleiste [aria-pressed="true"] { background: var(--wk-aktiv); color: var(--wk-auf-aktiv); }
[data-stil="glas"] .wk-werkzeugleiste .wk-knopf[aria-pressed="true"]:is(:hover, [data-vorschau="hover"], :active) { background: var(--wk-aktiv); color: var(--wk-auf-aktiv); }
[data-stil="glas"] .wk-auswahlleiste { gap: var(--wk-abstand-2); padding: var(--wk-abstand-2) var(--wk-abstand-2) var(--wk-abstand-2) var(--wk-abstand-4); border-radius: var(--wk-radius-l);
  background: var(--wk-schwebend); color: var(--wk-text); box-shadow: var(--wk-schatten-2);
  -webkit-backdrop-filter: blur(var(--wk-glas-unschaerfe)); backdrop-filter: blur(var(--wk-glas-unschaerfe)); }

/* ---- Bestand der Grundlagen (ältere Apps, z. B. Werkbank): .wk-btn, .wk-seg, .wk-stufen, .wk-toast in der Form von
   Knopf, Segment, Regler und Meldung (schwebend und gedeckt, nie durchscheinend). Höhen bleiben die der Grundlagen (Maus 36/30, Finger 44), damit alle Stile gleich hoch sind. ---- */
[data-stil="glas"] .wk-btn { gap: var(--wk-abstand-2); padding: 0 var(--glas-abstand-knopf); border: 0; border-radius: var(--wk-radius-m);
  background: var(--wk-feld); color: var(--wk-text); font: var(--wk-gewicht-stark) var(--wk-groesse-text)/1.25 var(--wk-schrift); box-shadow: none; }
[data-stil="glas"] .wk-btn:is(:hover, [data-vorschau="hover"]):not(.haupt, .akzent) { background: var(--wk-feld-hover); }
[data-stil="glas"] .wk-btn:is(:active, [data-vorschau="gedrueckt"], [aria-pressed="true"]):not(.haupt, .akzent) { background: var(--wk-gedrueckt); color: var(--wk-text); }
[data-stil="glas"] .wk-btn.haupt { background: var(--wk-haupt); color: var(--wk-auf-haupt); box-shadow: var(--wk-schatten-1); }
[data-stil="glas"] .wk-btn.akzent { background: var(--wk-akzent); color: var(--wk-auf-akzent); box-shadow: var(--wk-schatten-1); }
[data-stil="glas"] .wk-btn:is(.haupt, .akzent):is(:hover, [data-vorschau="hover"]) { filter: brightness(1.15); }
[data-stil="glas"] .wk-btn.gefahr { background: var(--wk-feld); color: var(--wk-fehler-text); }
[data-stil="glas"] .wk-btn.gefahr:is(:hover, [data-vorschau="hover"], :active) { background: var(--wk-fehler-flaeche); color: var(--wk-fehler-text); }
[data-stil="glas"] .wk-btn.klein { position: relative; padding: 0 var(--glas-abstand-chip); border-radius: var(--wk-radius-s); font-size: var(--wk-groesse-klein); }
[data-stil="glas"] .wk-btn.klein::before { content: ""; position: absolute; inset: calc((var(--wk-knopf-klein) - var(--wk-ziel)) / 2) 0; }   /* Trefferfläche (B1) */
[data-stil="glas"] .wk-btn:is(:disabled, [aria-disabled="true"]) { opacity: var(--wk-deaktiviert); cursor: not-allowed; box-shadow: none; filter: none; }
[data-stil="glas"] .wk-seg { gap: var(--wk-abstand-1); padding: var(--wk-abstand-1); border-radius: var(--wk-radius-m); background: var(--wk-feld); }
[data-stil="glas"] .wk-seg button { position: relative; border-radius: var(--wk-radius-s); color: var(--wk-text-2); font: var(--wk-gewicht-stark) var(--wk-groesse-klein)/1.25 var(--wk-schrift); }
[data-stil="glas"] .wk-seg button::before { content: ""; position: absolute; inset: calc((var(--wk-knopf-klein) - var(--wk-ziel)) / 2) 0; }   /* Trefferfläche (B1) */
[data-stil="glas"] .wk-seg button:is(:hover, [data-vorschau="hover"]) { background: var(--wk-feld-hover); color: var(--wk-text); }
[data-stil="glas"] .wk-seg button[aria-pressed="true"] { background: var(--wk-aktiv); color: var(--wk-auf-aktiv); box-shadow: none; }
[data-stil="glas"] .wk-toast { padding: var(--wk-abstand-2) var(--wk-abstand-4); border-radius: var(--wk-radius-l); background: var(--wk-aktiv); color: var(--wk-auf-aktiv);
  box-shadow: var(--wk-schatten-3); font: var(--wk-gewicht-stark) var(--wk-groesse-text)/1.35 var(--wk-schrift); }
[data-stil="glas"] .wk-toast.erfolg { background: var(--wk-schwebend); color: var(--wk-gut-text); box-shadow: var(--wk-schatten-3);
  -webkit-backdrop-filter: blur(var(--wk-glas-unschaerfe)); backdrop-filter: blur(var(--wk-glas-unschaerfe)); }
[data-stil="glas"] .wk-toast.erfolg svg { color: var(--wk-gut); }
/* Seitenkopf als Block (nie als Band über die ganze Breite); Lage und Ränder setzt die App */
[data-stil="glas"] .wk-kopf { gap: var(--wk-abstand-3) var(--wk-abstand-5); padding: var(--glas-abstand-bereich); border: 0; border-radius: var(--wk-radius-xl);
  background: var(--glas-karte); -webkit-backdrop-filter: blur(var(--wk-glas-unschaerfe)); backdrop-filter: blur(var(--wk-glas-unschaerfe)); }
[data-stil="glas"] .wk-krumen { font-weight: var(--wk-gewicht-normal); }
[data-stil="glas"] :is(.wk-stufen-label, .wk-stufen-zeiger) { font-weight: var(--wk-gewicht-normal); }
[data-stil="glas"] .wk-stufen-wort, [data-stil="glas"] .wk-stufen[data-wert="0"] .wk-stufen-wort { font-weight: var(--wk-gewicht-stark); }
/* Chip ohne Bedienung (Bestand: Eigenschaft wie Projekt oder Stufe) in Etikett-Form: Ein Chip ist eine Wahl (B14) */
[data-stil="glas"] .wk-chip:not(button, a, label, [role], [tabindex]) { min-width: 0; min-height: 24px; padding: 0 var(--wk-abstand-2); border-radius: var(--wk-radius-rund);
  font: var(--wk-gewicht-stark) var(--wk-groesse-klein)/1.4 var(--wk-schrift); }
[data-stil="glas"] .wk-pill.vorschlag { box-shadow: none; }   /* F1: keine Innenkante; Vorschlag heißt Wort und Kreis (Z5) */
[data-stil="glas"] .wk-stufen-spur i { background: var(--glas-bahn); }
[data-stil="glas"] .wk-stufen-spur i.an { background: var(--wk-aktiv); }
[data-stil="glas"] .wk-stufen-eingabe::-webkit-slider-thumb { border: 0; background: var(--glas-knauf); box-shadow: var(--glas-schatten-knauf);  /* vertrag-ausnahme S5: Knauf von Schalter und Regler: enger Schatten, damit er sich auf der Spur abhebt (C5); keine Ebene. */ }
[data-stil="glas"] .wk-stufen-eingabe::-moz-range-thumb { border: 0; background: var(--glas-knauf); box-shadow: var(--glas-schatten-knauf);  /* vertrag-ausnahme S5: Knauf von Schalter und Regler: enger Schatten, damit er sich auf der Spur abhebt (C5); keine Ebene. */ }
[data-stil="glas"] .wk-stufen[data-wert="0"] .wk-stufen-eingabe::-webkit-slider-thumb { border: 0; background: var(--glas-knauf); }
[data-stil="glas"] .wk-stufen[data-wert="0"] .wk-stufen-eingabe::-moz-range-thumb { border: 0; background: var(--glas-knauf); }

/* ---- Feiern in drei Stufen (Einstellung der Person, data-feiern an html) ------------------------------- */
[data-stil="glas"][data-feiern="aus"] { --wk-dauer-feiern: 0ms; --glas-feiern-skala: 1; }
[data-stil="glas"][data-feiern="mehr"] { --glas-feiern-skala: 1.2; }

/* ---- Fremdbibliotheken folgen den Rollen (Tiptap/ProseMirror, highlight.js, pdf.js, Excalidraw) ------- */
[data-stil="glas"] .ProseMirror { color: var(--wk-text); font: var(--wk-text-font); caret-color: var(--wk-aktiv); max-width: var(--wk-lesebreite); }
[data-stil="glas"] .ProseMirror p.is-editor-empty:first-child::before { color: var(--wk-text-leise); }
[data-stil="glas"] :is(.ProseMirror, .textLayer) ::selection { background: var(--wk-auswahl); color: var(--wk-text); }
[data-stil="glas"] .hljs { border-radius: var(--wk-radius-m); background: var(--wk-feld); color: var(--wk-text); font-family: var(--wk-schrift-mono); }
[data-stil="glas"] :is(.hljs-keyword, .hljs-built_in, .hljs-type, .hljs-selector-tag) { color: var(--wk-info-text); font-weight: var(--wk-gewicht-stark); }
[data-stil="glas"] :is(.hljs-string, .hljs-attr, .hljs-addition) { color: var(--wk-gut-text); }
[data-stil="glas"] :is(.hljs-number, .hljs-literal, .hljs-symbol) { color: var(--wk-achtung-text); }
[data-stil="glas"] :is(.hljs-comment, .hljs-meta, .hljs-quote) { color: var(--wk-text-leise); font-style: italic; }
[data-stil="glas"] .hljs-deletion { color: var(--wk-fehler-text); }
[data-stil="glas"] .pdfViewer .page { border: 0; border-radius: var(--wk-radius-s); background: var(--wk-flaeche); box-shadow: var(--wk-schatten-1); }
[data-stil="glas"] .excalidraw { --color-primary: var(--wk-aktiv); --color-primary-darker: var(--wk-aktiv); --island-bg-color: var(--wk-flaeche);
  --default-bg-color: var(--wk-grund); --text-primary-color: var(--wk-text); --border-radius-lg: var(--wk-radius-l); }

/* ---- Bewegung (M2) ---------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-stil="glas"] *, [data-stil="glas"] *::before, [data-stil="glas"] *::after { animation: none !important; transition: none !important;  /* vertrag-ausnahme A01: Reduzierte Bewegung muss jede Animation und jeden Übergang sicher abschalten (M2). */ }
}