/* Anmeldung und zweiter Schritt als ein Glasfenster. Aussehen und Bewegung nach dem Prototyp, den Tim am 04.11.2026 bestaetigt hat
   ("finde ich gut", Quelle claude.ai/artifact/GGzYjJJibd1EGYvH4oLwWh): ruhige, langsam wandernde Farbfelder, ein Fenster mit 420 px,
   Systemschrift, Akzent Graphit (hell #3D4757, dunkel #E4E8EF), kein Glanz, kein Schimmer. Nur CSS; Verhalten in anmelde-fluss.js.
   Alles unter body.k-fenster; wird nach k-zugang-neu.css und k-liquid.css geladen. Ruhezustand ist der sichtbare Zustand: Animationen
   starten mit "both" nur auf Deckkraft und Lage, ohne Animation steht alles fertig da. Bei "weniger Bewegung" nur Ueberblenden.
   Einstieg und Begruessung sind noch offen (zweite Fassung in Arbeit): Einstieg ueber body[data-f-einstieg], Begruessung in .f-gruss. */

body.k-fenster {
  --f-sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
  --f-feder: cubic-bezier(.2, .8, .2, 1);
  --f-grund: #E9ECF1; --f-blob-1: #B9C3D3; --f-blob-2: #D9CFC4; --f-blob-3: #C4D2CE;
  --f-glas: rgba(255, 255, 255, .58); --f-glas-voll: rgba(255, 255, 255, .92);
  --f-kante: rgba(255, 255, 255, .85); --f-oben: rgba(255, 255, 255, .5);
  --f-schatten: 0 30px 80px -20px rgba(30, 40, 60, .28), 0 8px 24px -8px rgba(30, 40, 60, .14);
  --f-text: #161A21; --f-leise: #505867; --f-linie: rgba(22, 26, 33, .12);
  --f-feld: rgba(255, 255, 255, .62); --f-rand: rgba(22, 26, 33, .16);
  --f-akzent: #3D4757; --f-auf-akzent: #FFFFFF; --f-ring: rgba(61, 71, 87, .28);
  --f-fehler: #B42318; --f-fehler-flaeche: rgba(180, 35, 24, .08); --f-ok: #1F7A4D;
  --f-gleiter: rgba(255, 255, 255, .85); --f-gleiter-schatten: 0 2px 8px rgba(0, 0, 0, .12);
  /* Fusslinks liegen direkt auf den Farbfeldern; "leise" erreicht dort keine 4,5 sicher */
  --f-fuss: #2F3542;
  font-family: var(--f-sys); color: var(--f-text); background: var(--f-grund); -webkit-font-smoothing: antialiased;
  min-height: 100vh; min-height: 100dvh; margin: 0; padding: 32px 16px; display: grid; place-items: center; overflow-x: hidden;
}
html[data-k-modus="dunkel"] body.k-fenster {
  --f-grund: #0E1116; --f-blob-1: #2A3446; --f-blob-2: #3A3029; --f-blob-3: #22362F;
  --f-glas: rgba(28, 33, 42, .56); --f-glas-voll: rgba(36, 42, 54, .94);
  --f-kante: rgba(255, 255, 255, .12); --f-oben: rgba(255, 255, 255, .04);
  --f-schatten: 0 30px 80px -20px rgba(0, 0, 0, .6), 0 8px 24px -8px rgba(0, 0, 0, .4);
  --f-text: #F2F4F7; --f-leise: #A9B2C0; --f-linie: rgba(255, 255, 255, .1);
  --f-feld: rgba(255, 255, 255, .06); --f-rand: rgba(255, 255, 255, .16);
  --f-akzent: #E4E8EF; --f-auf-akzent: #11151B; --f-ring: rgba(228, 232, 239, .3);
  --f-fehler: #FF8A80; --f-fehler-flaeche: rgba(255, 138, 128, .1); --f-ok: #6FD3A0;
  --f-gleiter: rgba(255, 255, 255, .14);
  --f-fuss: #D5DAE2;
  color-scheme: dark;
}

/* Seitenwechsel Anmelden -> zweiter Schritt als Ansichtsuebergang: eingeschaltet von anmelde-fluss.js (CSSOM), damit Seiten
   ohne das Skript (Demo-Auswahl) keinen Uebergang anstossen, den die Zielseite abbricht */

/* ---------- Grund: drei unscharfe Farbfelder, die sehr langsam wandern ---------- */
body.k-fenster .k-tapete { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--f-grund); animation: none; translate: none; transition: none; opacity: 1; }
body.k-fenster .k-tapete i { display: block; position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; filter: blur(80px); opacity: .9; transition: none; }
body.k-fenster .k-tapete i:nth-child(1) { background: var(--f-blob-1); left: -18vmax; top: -22vmax; }
body.k-fenster .k-tapete i:nth-child(2) { background: var(--f-blob-2); right: -24vmax; top: 10vmax; }
body.k-fenster .k-tapete i:nth-child(3) { background: var(--f-blob-3); left: 10vmax; bottom: -30vmax; }
body.k-fenster .k-tapete i:nth-child(n+4) { display: none; }
@keyframes f-wandern { to { transform: translate(6vmax, 4vmax) scale(1.08); } }

/* ---------- Fenster ---------- */
body.k-fenster .f-spalte { position: relative; z-index: 1; width: min(420px, 100%); display: grid; gap: 18px; justify-items: stretch; }
/* Begruessung ueber dem Fenster (Fassung 2, Tim 04.11.2026): Tageszeit gross, ein Satz darunter. Liegt direkt auf den Farbfeldern,
   deshalb der dunklere Fusston fuer den kleinen Satz (leise erreicht dort keine 4,5 sicher). */
body.k-fenster .f-gruss { display: grid; gap: 6px; min-height: 84px; align-content: end; margin: 0 0 4px; text-align: center; view-transition-name: f-gruss; }
body.k-fenster .f-gruss p { margin: 0; }
body.k-fenster .f-gruss-gross { color: var(--f-text); font: 650 clamp(30px, 7vw, 40px)/1.1 var(--f-sys); letter-spacing: -.03em; text-wrap: balance; }
body.k-fenster .f-gruss-klein { color: var(--f-fuss); font: 400 16px/1.4 var(--f-sys); }
body.k-fenster .f-wort { display: inline-block; }
body.k-fenster .f-spalte { transition: width .7s var(--f-feder); }
body.k-fenster.k-zugang .zugang {
  position: relative; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 28px; width: auto; min-height: 0; padding: 36px 36px 30px;
  border-radius: 22px; border: 1px solid var(--f-kante); background: var(--f-glas); overflow: clip;
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: var(--f-schatten), inset 0 1px 0 var(--f-oben);
  transition: height .42s var(--f-feder);
  view-transition-name: f-fenster;
}
body.k-fenster .zugang::before, body.k-fenster .zugang::after { content: none; }
body.k-fenster .zugang-logo { display: inline-flex; padding: 2px; border-radius: 10px; text-decoration: none; }
body.k-fenster .zugang-logo .logo-wort { color: var(--f-text); }
body.k-fenster .zugang-logo:focus-visible { outline: 2px solid var(--f-akzent); outline-offset: 3px; }
body.k-fenster .zugang-karte { width: 100%; max-width: none; margin: 0; display: grid; gap: 18px; view-transition-name: f-inhalt; }
body.k-fenster .zugang-links { display: flex; justify-content: center; gap: 18px; }
body.k-fenster .zugang-links a { color: var(--f-fuss); font: 400 13px/1.4 var(--f-sys); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--f-fuss) 40%, transparent); padding: 6px 2px; }
body.k-fenster .zugang-links a:hover { text-decoration-color: currentColor; }

/* ---------- Kopf: Logo links, Schrittpunkte rechts ---------- */
body.k-fenster .f-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
body.k-fenster .f-schritte { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
body.k-fenster .f-schritte li { width: 6px; height: 6px; border-radius: 3px; background: var(--f-linie); transition: width .4s var(--f-feder), background-color .4s; }
body.k-fenster .f-schritte[data-schritt="1"] li:nth-child(1),
body.k-fenster .f-schritte[data-schritt="2"] li:nth-child(-n+2),
body.k-fenster .f-schritte[data-schritt="3"] li { width: 18px; background: var(--f-akzent); }

/* ---------- Schrift ---------- */
body.k-fenster .zugang-karte h1, body.k-fenster .f-titel, body.k-fenster .zugang-karte p.f-titel { margin: 0; text-align: left; font: 650 28px/1.15 var(--f-sys); letter-spacing: -.022em; color: var(--f-text); text-wrap: balance; }
body.k-fenster .zugang-karte :is(p, .leise, .hilfe) { margin: 0; color: var(--f-leise); font: 400 15px/1.45 var(--f-sys); text-align: left; text-transform: none; letter-spacing: 0; }
/* :is() oben zaehlt mit der Klasse .leise; die Regel braucht deshalb dieselbe Staerke */
body.k-fenster .zugang-karte h1 + :is(p, .leise) { margin-top: -8px; }
body.k-fenster .zugang-karte a { color: var(--f-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--f-rand); font-weight: 500; }
body.k-fenster .zugang-karte a:hover { text-decoration-color: currentColor; }
body.k-fenster .zugang-karte a.knopf { text-decoration: none; }
body.k-fenster .zugang-karte :is(.adresse, strong) { color: var(--f-text); font-weight: 600; }
body.k-fenster .zugang-karte .zugang-fuss-text { font-size: 14px; text-align: center; }
body.k-fenster .zugang-karte .zugang-trenner { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--f-leise); font: 400 13px/1 var(--f-sys); text-transform: none; letter-spacing: 0; }
body.k-fenster .zugang-karte .zugang-trenner::before, body.k-fenster .zugang-karte .zugang-trenner::after { content: ""; flex: 1; height: 1px; background: var(--f-linie); }
/* Textknopf wie ein Link (Aendern, Abbrechen, Stattdessen Passkey, Neuen Code senden) */
body.k-fenster .f-link { background: none; border: 0; padding: 0; margin: 0; font: 400 14px/1.4 var(--f-sys); color: var(--f-leise); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
body.k-fenster .f-link:hover { color: var(--f-text); }
body.k-fenster .f-link:focus-visible { outline: 2px solid var(--f-akzent); outline-offset: 3px; border-radius: 4px; }
body.k-fenster .f-link:disabled { cursor: default; text-decoration: none; color: var(--f-leise); opacity: 1; }

/* ---------- Segmente der Registrierung (nur noch in alten Links, Ansicht selbst ohne Register) ---------- */
body.k-fenster .zugang-register { display: none; }

/* ---------- Felder ---------- */
body.k-fenster .zugang-karte .formular { display: grid; gap: 14px; }
body.k-fenster .zugang-karte .feld { display: grid; gap: 8px; }
body.k-fenster .zugang-karte label, body.k-fenster .zugang-karte .kpi-label { color: var(--f-leise); font: 550 13px/1.3 var(--f-sys); text-transform: none; letter-spacing: 0; }
body.k-fenster .zugang-karte :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select) {
  box-sizing: border-box; width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--f-rand); background: var(--f-feld);
  color: var(--f-text); font: 400 16px/1.2 var(--f-sys); box-shadow: none; text-align: left; letter-spacing: 0; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
body.k-fenster .zugang-karte :is(input, select)::placeholder { color: var(--f-leise); opacity: .8; }
body.k-fenster .zugang-karte :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select):focus { outline: none; border-color: var(--f-akzent); box-shadow: 0 0 0 4px var(--f-ring); animation: none; }
body.k-fenster .zugang-karte :is(input, select).af-falsch { border-color: var(--f-fehler); }
body.k-fenster .zugang-karte :is(input[readonly]) { opacity: .75; }
/* Ein Satz Fehler direkt unter dem Feld (anmelde-fluss.js) */
body.k-fenster .zugang-karte .f-feldfehler { margin: 0; color: var(--f-fehler); font: 400 14px/1.4 var(--f-sys); text-align: left; }

/* ---------- Knoepfe: klare Beschriftung, kein Glanz ---------- */
body.k-fenster .zugang-karte .knopf {
  box-sizing: border-box; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px; padding: 0 18px;
  border-radius: 14px; border: 1px solid var(--f-rand); background: var(--f-feld); color: var(--f-text);
  font: 600 16px/1 var(--f-sys); letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer; box-shadow: none; overflow: visible; filter: none;
  transition: transform .15s var(--f-feder), opacity .2s, box-shadow .2s;
}
body.k-fenster .zugang-karte .knopf::before, body.k-fenster .zugang-karte .knopf::after { content: none; }
body.k-fenster .zugang-karte .knopf:hover { background: var(--f-feld); border-color: var(--f-rand); transform: none; filter: none; }
body.k-fenster .zugang-karte .knopf:active { transform: scale(.985); }
body.k-fenster .zugang-karte .knopf:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--f-ring); }
body.k-fenster .zugang-karte .knopf.primaer, body.k-fenster .zugang-karte .knopf.primaer:hover { background: var(--f-akzent); border-color: var(--f-akzent); color: var(--f-auf-akzent); }
body.k-fenster .zugang-karte .knopf:disabled, body.k-fenster .zugang-karte .knopf[aria-disabled="true"] { opacity: .55; cursor: default; transform: none; }
body.k-fenster .zugang-karte .knopf.text { width: auto; height: 40px; border-color: transparent; background: transparent; color: var(--f-leise); font-weight: 500; font-size: 14px; }
body.k-fenster .zugang-karte .knopf.text:hover { color: var(--f-text); background: transparent; border-color: transparent; }
body.k-fenster .zugang-karte .knopf .sym { flex: none; }
/* Ladezustand im Knopf: Beschriftung unsichtbar, Ring 18 px in der Mitte, Breite bleibt */
body.k-fenster .zugang-karte .knopf.af-laeuft { pointer-events: none; color: transparent; }
body.k-fenster .zugang-karte .knopf.af-laeuft > * { opacity: 0; }
body.k-fenster .zugang-karte .knopf.af-laeuft::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--f-text); border-right-color: transparent; animation: f-drehen .7s linear infinite;
}
body.k-fenster .zugang-karte .knopf.primaer.af-laeuft::after { border-color: var(--f-auf-akzent); border-right-color: transparent; }
@keyframes f-drehen { to { transform: rotate(360deg); } }

/* ---------- Meldungen des Servers (ohne Skript bzw. nach dem Neuladen) ---------- */
body.k-fenster .zugang-karte .meldung { margin: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--f-rand); background: var(--f-feld); color: var(--f-text); font: 400 14px/1.45 var(--f-sys); text-align: left; animation: none; }
body.k-fenster .zugang-karte .meldung.fehler, body.k-fenster .zugang-karte .meldung.gefahr { border-color: var(--f-fehler); background: var(--f-fehler-flaeche); color: var(--f-fehler); font-weight: 500; }
body.k-fenster .zugang-karte .meldung.ok { border-color: var(--f-ok); color: var(--f-ok); }
body.k-fenster .zugang-karte:has(> .meldung.fehler) :is(input:not([type="hidden"], [type="checkbox"], [type="radio"])) { border-color: var(--f-fehler); }
body.k-fenster .zugang-karte:has(> .meldung.fehler) .af-kasten i { border-color: var(--f-fehler); }
body.k-fenster .zugang-ziel { padding: 12px 14px; border-radius: 14px; background: var(--f-feld); border: 1px solid var(--f-rand); color: var(--f-leise); font-size: 14px; text-align: left; display: grid; gap: 2px; }
body.k-fenster .zugang-ziel strong { color: var(--f-text); }

/* ---------- Person: Kreis mit Anfangsbuchstabe, Adresse, Aendern ---------- */
body.k-fenster .f-person { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid var(--f-rand); background: var(--f-feld); justify-self: start; width: max-content; max-width: 100%; box-sizing: border-box; }
body.k-fenster .f-person[hidden] { display: none; }
body.k-fenster .f-person-zeichen { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--f-akzent); color: var(--f-auf-akzent); font: 650 14px/1 var(--f-sys); }
body.k-fenster .f-person-adresse { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--f-text); font: 400 14px/1.2 var(--f-sys); }
body.k-fenster .f-person .f-link { margin-left: 4px; flex: none; }

/* ---------- Ansichten der Anmeldeseite (anmelde-fluss.js setzt data-af-ansicht an der Karte) ---------- */
body.k-fenster .zugang-karte[data-af-ansicht="passwort"] [data-af-nur-adresse] { display: none; }
/* Prototyp: im Passwortschritt steht die Person ueber der Ueberschrift */
body.k-fenster .zugang-karte[data-af-ansicht="passwort"] > [data-af-person] { order: -1; }
body.k-fenster .zugang-karte.af-pk[data-af-ansicht="passwort"] [data-af-nur-passwort] { display: block; justify-self: center; }
body.k-fenster .zugang-karte[data-af-ansicht="passkey"] > :not([data-af-passkey-warten]) { display: none; }
body.k-fenster .zugang-karte[data-af-ansicht="passkey"] > [data-af-passkey-warten] { display: grid; }

/* Zuklappen der Teile ohne display:none (Passwort-Manager fuellen auch das zweite Feld) */
body.k-fenster [data-af-teil].af-zu { height: 0; overflow: hidden; opacity: 0; margin: 0; pointer-events: none; }
/* Im Raster kann ein negativer Abstand die Spur nicht unter 0 druecken: den Abstand nimmt deshalb das naechste Element zurueck */
body.k-fenster .zugang-karte .formular > .knopf { margin-top: 0; }
body.k-fenster .zugang-karte .formular > [data-af-teil].af-zu + * { margin-top: -14px; }

/* ---------- Passkey ---------- */
body.k-fenster .af-passkey { display: grid; gap: 18px; margin: 0; }
body.k-fenster .af-passkey[hidden] { display: none; }
body.k-fenster .af-passkey.af-zuletzt { order: -1; }
body.k-fenster .af-passkey > .meldung[hidden] { display: none; }
body.k-fenster .f-passkey-warten { justify-items: center; gap: 16px; padding: 8px 0; text-align: center; }
body.k-fenster .zugang-karte .f-passkey-warten p, body.k-fenster .zugang-karte .f-passkey-warten p.f-titel { text-align: center; }
body.k-fenster .f-scan { width: 96px; height: 96px; }
body.k-fenster .f-scan svg { width: 100%; height: 100%; display: block; }
body.k-fenster .f-scan-rahmen { fill: none; stroke: var(--f-akzent); stroke-width: 3; stroke-linecap: round; }
body.k-fenster .f-scan-linie { stroke: var(--f-akzent); stroke-width: 2; opacity: .6; transform-box: view-box; }
@keyframes f-scannen { from { transform: translateY(-22px); } to { transform: translateY(22px); } }

/* ---------- Code: sechs gleich grosse Kaesten ueber EINEM echten Feld ---------- */
body.k-fenster .af-kasten-feld > label { text-align: left; }
body.k-fenster .af-kasten-rahmen { position: relative; display: block; }
body.k-fenster .af-kasten { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
body.k-fenster .af-kasten i {
  box-sizing: border-box; display: grid; place-items: center; aspect-ratio: 52 / 60; max-height: 64px; border-radius: 14px; border: 1px solid var(--f-rand); background: var(--f-feld);
  color: var(--f-text); font: 600 26px/1 var(--f-sys); font-style: normal; font-variant-numeric: tabular-nums; letter-spacing: 0;
  transition: border-color .2s, box-shadow .2s, transform .2s var(--f-feder);
}
body.k-fenster .af-kasten-feld.fokus .af-kasten i.aktiv { border-color: var(--f-akzent); box-shadow: 0 0 0 4px var(--f-ring); }
body.k-fenster .af-kasten-feld.af-falsch .af-kasten i, body.k-fenster .af-kasten-feld.af-falsch.fokus .af-kasten i.aktiv { border-color: var(--f-fehler); }
@keyframes f-tippen { 50% { transform: scale(1.06); } }
body.k-fenster .af-kasten-rahmen input.af-code {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 14px; background: transparent; box-shadow: none;
  color: transparent; caret-color: transparent; font-size: 16px; opacity: .01; cursor: text; letter-spacing: 0;
}
body.k-fenster .af-kasten-rahmen input.af-code:focus { box-shadow: none; border: 0; }
/* Ohne Skript bleibt es ein einzelnes, schlichtes Feld */
body.k-fenster .zugang-karte input.codefeld:not(.af-code) { text-align: center; font: 600 24px/1 var(--f-sys); font-variant-numeric: tabular-nums; letter-spacing: .3em; padding-left: .3em; }
/* Takt der App-Codes: Ring 18 px, der Rest des 30-s-Fensters in Akzent */
body.k-fenster .zf-takt { display: inline-flex; align-items: center; gap: 10px; color: var(--f-leise); font-size: 14px; }
@property --f-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
body.k-fenster .zf-takt-ring { width: 18px; height: 18px; flex: none; border-radius: 50%; --f-winkel: 0deg;
  background: conic-gradient(var(--f-linie) var(--f-winkel), var(--f-akzent) 0);
  -webkit-mask: radial-gradient(circle, transparent 6.4px, #000 6.8px); mask: radial-gradient(circle, transparent 6.4px, #000 6.8px);
  animation: f-takt 30s linear infinite; }
@keyframes f-takt { to { --f-winkel: 360deg; } }
body.k-fenster .zf-takt [data-af-sek] { font-variant-numeric: tabular-nums; }

/* ---------- Zweiter Schritt ---------- */
body.k-fenster .sf-kontozeile { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
body.k-fenster .sf-konto-adresse { color: var(--f-leise); font: 400 13px/1.2 var(--f-sys); overflow-wrap: anywhere; }
body.k-fenster .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Segmentauswahl App-Code | Geraet | E-Mail mit gleitendem Hintergrund (ohne Skript, ueber :has) */
body.k-fenster .zf-wege { display: grid; gap: 0; }
body.k-fenster .zf-segmente { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: 18px; padding: 4px; border-radius: 14px; background: var(--f-feld); border: 1px solid var(--f-rand); }
body.k-fenster .zf-gleiter { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 10px; background: var(--f-gleiter); box-shadow: var(--f-gleiter-schatten); transition: transform .38s var(--f-feder); pointer-events: none; }
body.k-fenster .zf-segmente:has(#zf-w-geraet:checked) .zf-gleiter { transform: translateX(100%); }
body.k-fenster .zf-segmente:has(#zf-w-email:checked) .zf-gleiter { transform: translateX(200%); }
body.k-fenster .zf-segmente label { position: relative; z-index: 1; margin: 0; height: 36px; display: grid; place-items: center; border-radius: 10px; cursor: pointer; color: var(--f-leise); font: 550 14px/1 var(--f-sys); transition: color .2s; }
body.k-fenster .zf-segmente input:checked + label { color: var(--f-text); }
body.k-fenster .zf-segmente input:focus-visible + label { outline: 2px solid var(--f-akzent); outline-offset: -2px; }
@supports not selector(:has(*)) {
  body.k-fenster .zf-gleiter { display: none; }
  body.k-fenster .zf-segmente input:checked + label { background: var(--f-gleiter); box-shadow: var(--f-gleiter-schatten); }
}
/* Panels: alle im Fluss, nur das gewaehlte offen; die Hoehe gleitet (0fr -> 1fr), unsichtbare Panels sind nicht erreichbar */
body.k-fenster .zf-panel { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .42s var(--f-feder), opacity .2s ease, visibility 0s linear .42s; }
body.k-fenster .zf-panel > .zf-innen { min-height: 0; overflow: hidden; display: grid; gap: 14px; padding: 4px; margin: -4px; }
body.k-fenster .zf-wege:has(#zf-w-app:checked) .zf-p-app, body.k-fenster .zf-wege:has(#zf-w-geraet:checked) .zf-p-geraet, body.k-fenster .zf-wege:has(#zf-w-email:checked) .zf-p-email {
  grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s, .08s, 0s;
}
body.k-fenster .zf-panel:not(.zf-p-app) .formular + .formular { margin-top: 2px; }
/* Geraet: Zahl in einem Kreis mit Pulsring, Stand mit atmendem Punkt */
body.k-fenster .zf-p-geraet .zf-innen { justify-items: center; text-align: center; }
body.k-fenster .zf-p-geraet .zf-innen > .formular { justify-self: stretch; }
body.k-fenster .zugang-karte .zf-p-geraet p { text-align: center; }
body.k-fenster .zugang-karte .zf-zahl { position: relative; box-sizing: border-box; width: 132px; height: 132px; margin: 4px auto 0; padding: 0; border-radius: 50%; border: 2px solid var(--f-linie); background: none;
  display: grid; place-items: center; color: var(--f-text); font: 650 56px/1 var(--f-sys); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
body.k-fenster .zugang-karte .zf-zahl::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--f-akzent); opacity: .5; }
@keyframes f-puls { 0% { transform: scale(.86); opacity: .55; } 100% { transform: scale(1.06); opacity: 0; } }
body.k-fenster .zf-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--f-leise); font: 400 14px/1.3 var(--f-sys); }
body.k-fenster .zf-warte { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--f-akzent); }
body.k-fenster .zf-warte.frei { background: var(--f-ok); animation: none; }
@keyframes f-atmen { 50% { opacity: .3; } }

/* Notfaelle: Backup-Code, Wiederherstellung - leise Zeilen unter dem Fenster-Inhalt */
body.k-fenster .zf-details { border: 0; border-top: 1px solid var(--f-linie); border-radius: 0; background: transparent; padding: 0; margin: 0; }
body.k-fenster .zf-details summary { min-height: 44px; padding: 12px 2px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: var(--f-leise); font: 500 14px/1.3 var(--f-sys); list-style: none; }
body.k-fenster .zf-details summary::-webkit-details-marker { display: none; }
body.k-fenster .zf-details summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin-right: 4px; }
body.k-fenster .zf-details[open] summary::after { transform: rotate(-135deg); }
body.k-fenster .zf-details + .zf-details, body.k-fenster .zf-details + .sf-unten { margin-top: -18px; }
body.k-fenster .zf-details summary:hover { color: var(--f-text); }
body.k-fenster .zf-details summary:focus-visible { outline: 2px solid var(--f-akzent); outline-offset: 1px; border-radius: 6px; }
body.k-fenster .zf-details-inhalt { padding: 2px 2px 14px; display: grid; gap: 12px; }
body.k-fenster .zf-backup-feld { text-align: center; text-transform: uppercase; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
body.k-fenster .zf-frist { font-size: 13px; }
body.k-fenster .zf-anleitung { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--f-leise); font-size: 15px; text-align: left; }
body.k-fenster .zf-anleitung strong { color: var(--f-text); }
body.k-fenster .sf-qr-rahmen { display: grid; gap: 10px; justify-items: center; padding: 14px; border-radius: 16px; border: 1px solid var(--f-rand); background: var(--f-feld); }
body.k-fenster .sf-qr-rahmen > span { display: inline-flex; align-items: center; gap: 8px; color: var(--f-leise); font-size: 13px; }
body.k-fenster .zf-qr { width: 200px; max-width: 100%; margin: 0; padding: 10px; border-radius: 12px; background: #fff; box-shadow: none; }
body.k-fenster .zf-geheimnis { display: block; padding: 10px 12px; border-radius: 10px; background: var(--f-feld); border: 1px solid var(--f-rand); color: var(--f-text); font: 500 14px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; overflow-wrap: anywhere; text-align: left; }
body.k-fenster .zf-manuell { display: grid; gap: 10px; margin: 0; text-align: left; }
body.k-fenster .zf-manuell dt { color: var(--f-leise); font-size: 13px; }
body.k-fenster .zf-manuell dd { margin: 0; color: var(--f-text); }
body.k-fenster .zf-codes { margin: 0; padding: 14px 14px 14px 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; border-radius: 14px; border: 1px solid var(--f-rand); background: var(--f-feld); color: var(--f-text); text-align: left; }
body.k-fenster .zf-codes code { font: 600 14px/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--f-text); }
body.k-fenster .sf-unten { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px solid var(--f-linie); }
body.k-fenster .sf-unten a { display: inline-flex; align-items: center; gap: 8px; color: var(--f-leise); font: 500 14px/1.3 var(--f-sys); text-decoration: none; padding: 8px 2px; }
body.k-fenster .sf-unten a:hover { color: var(--f-text); text-decoration: underline; }
body.k-fenster .sf-unten form { margin: 0; }

/* ---------- Erfolg: Haken zeichnet sich, ein Satz, dann geht es weiter ---------- */
body.k-fenster .f-erfolg { display: grid; justify-items: center; gap: 14px; padding: 12px 0 8px; text-align: center; view-transition-name: none; }
body.k-fenster .f-erfolg[hidden] { display: none; }
body.k-fenster .f-haken { width: 84px; height: 84px; display: block; }
body.k-fenster .f-haken circle { fill: none; stroke: var(--f-ok); stroke-width: 3; }
body.k-fenster .f-haken path { fill: none; stroke: var(--f-ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
body.k-fenster .f-erfolg .f-titel { text-align: center; }
body.k-fenster .f-erfolg-unter { margin: 0; color: var(--f-leise); font: 400 15px/1.45 var(--f-sys); }
html.af-erfolg body.k-fenster .zugang-karte { display: none; }
@keyframes f-zeichnen-kreis { from { stroke-dasharray: 240; stroke-dashoffset: 240; } to { stroke-dasharray: 240; stroke-dashoffset: 0; } }
@keyframes f-zeichnen-haken { from { stroke-dasharray: 60; stroke-dashoffset: 60; } to { stroke-dasharray: 60; stroke-dashoffset: 0; } }

/* ---------- Passwort-Staerke bei der Registrierung (Farben der Konsole bleiben, nur Form ans Fenster angepasst) ---------- */
body.k-fenster .pw-zeile .knopf, body.k-fenster .pw-zeige, body.k-fenster .pw-erzeugen { width: auto; height: 50px; flex: none; }
body.k-fenster .pw-regeln li, body.k-fenster .pw-gleich, body.k-fenster .pw-hinweis { color: var(--f-leise); text-align: left; }
body.k-fenster .pw-wort { color: var(--f-text); }
body.k-fenster .pw-regeln li[data-erfuellt="ja"] { color: var(--f-text); }

/* ---------- Auswahl im Demo-Modus ---------- */
body.k-fenster .auswahlliste { display: grid; gap: 10px; }
body.k-fenster .auswahl-zeile { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--f-rand); background: var(--f-feld); color: var(--f-text); text-align: left; cursor: pointer; font: 400 15px/1.3 var(--f-sys); transition: border-color .2s, transform .15s var(--f-feder); }
body.k-fenster .auswahl-zeile:hover { border-color: var(--f-akzent); background: var(--f-feld); transform: none; }
body.k-fenster .auswahl-zeile:active { transform: scale(.99); }
body.k-fenster .auswahl-zeile:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--f-ring); border-color: var(--f-akzent); }
body.k-fenster .wechsler-zeichen { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--f-akzent); color: var(--f-auf-akzent); font-weight: 650; }
body.k-fenster .position-text { display: grid; gap: 2px; min-width: 0; }
body.k-fenster .position-name { font-weight: 600; }
body.k-fenster .position-unter { color: var(--f-leise); font-size: 13px; overflow-wrap: anywhere; }
body.k-fenster .demo-hinweis { justify-self: start; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--f-rand); color: var(--f-leise); font: 600 12px/1.2 var(--f-sys); }

/* ---------- Ladeanzeige nach dem Haken (Fassung 2): Skelett der Konsole und Fortschrittsbalken, bis die Konsole gezeichnet ist ---------- */
body.k-fenster .f-laden { display: none; }
html.af-laden body.k-fenster .f-spalte { width: min(760px, 100%); }
html.af-laden body.k-fenster .f-kopf, html.af-laden body.k-fenster .f-erfolg { display: none; }
html.af-laden body.k-fenster .f-laden:not([hidden]) { position: relative; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px; padding-bottom: 16px; }
body.k-fenster .f-sk-menue, body.k-fenster .f-sk-kopf, body.k-fenster .f-sk-karte { border-radius: 12px; background: var(--f-feld); border: 1px solid var(--f-rand); }
body.k-fenster .f-sk-menue { display: grid; align-content: start; gap: 14px; padding: 16px 14px; }
body.k-fenster .f-sk-haupt { display: grid; gap: 12px; min-width: 0; }
body.k-fenster .f-sk-kopf { height: 44px; display: flex; align-items: center; padding: 0 14px; }
body.k-fenster .f-sk-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.k-fenster .f-sk-karte { min-height: 92px; padding: 14px; display: grid; align-content: start; gap: 10px; }
body.k-fenster .f-sk-breit { min-height: 110px; }
body.k-fenster .f-sk { display: block; height: 10px; border-radius: 5px; background: var(--f-linie); }
body.k-fenster .f-sk-gross { height: 22px; width: 40%; }
body.k-fenster .f-sk-m0 { width: 70%; } body.k-fenster .f-sk-m2 { width: 80%; } body.k-fenster .f-sk-m3 { width: 60%; } body.k-fenster .f-sk-m5 { width: 75%; }
body.k-fenster .f-sk-w40 { width: 40%; } body.k-fenster .f-sk-w55 { width: 55%; } body.k-fenster .f-sk-w65 { width: 65%; } body.k-fenster .f-sk-w70 { width: 70%; } body.k-fenster .f-sk-w85 { width: 85%; }
body.k-fenster .f-ladebalken { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--f-linie); overflow: hidden; }
body.k-fenster .f-ladebalken i { display: block; width: 0; height: 100%; border-radius: 2px; background: var(--f-akzent); transition: width .5s var(--f-feder); }
@media (max-width: 520px) {
  html.af-laden body.k-fenster .f-laden:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
  body.k-fenster .f-sk-menue { display: none; }
  body.k-fenster .f-sk-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.k-fenster .f-sk-reihe > :nth-child(3) { display: none; }
}
@keyframes f-atmen-sk { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes f-aufbau { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes f-wortrein { from { opacity: 0; filter: blur(8px); transform: translateY(14px); } }
@keyframes f-wortraus { to { opacity: 0; filter: blur(6px); transform: translateY(-10px); } }
@keyframes f-himmelrein { from { opacity: 0; transform: scale(1.15); } }
@keyframes f-ankunft-b { from { opacity: 0; transform: translateY(40px) scale(.94); filter: blur(6px); } }
@keyframes f-staffel { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Bewegung ---------- */
/* Alte Zitter- und Schuettelregeln aus k-zugang-neu.css ausser Kraft: es schuettelt genau EINE Stelle */
body.k-fenster .zugang-karte:has(.meldung.fehler), body.k-fenster .zugang-karte .meldung.fehler, body.k-fenster .zugang-karte .meldung.gefahr,
body.k-fenster .zugang-karte .meldung.fehler ~ .formular input:not([type="hidden"]), body.k-fenster .zugang-karte .meldung.fehler ~ form .codefeld { animation: none; }
body.k-fenster .zugang-karte .codefeld:focus, body.k-fenster .zugang-karte :is(input, select):focus { animation: none; }
/* Die gestaffelte Einblendung je Kind (k-zugang-neu.css zg-ein) startet bei jedem Ansichtswechsel neu; im Fenster gleitet die ganze Ansicht */
body.k-fenster.k-zugang .zugang-karte > *, html.af-erfolg body.k-fenster .zugang-karte { animation: none; }
@keyframes f-ankunft { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes f-schuetteln { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes f-rein { from { opacity: 0; transform: translateX(28px); } }
@keyframes f-rein-zurueck { from { opacity: 0; transform: translateX(-28px); } }
@keyframes f-raus { to { opacity: 0; transform: translateX(-28px); } }
@keyframes f-blenden { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  body.k-fenster .k-tapete i:nth-child(1) { animation: f-wandern 38s ease-in-out infinite alternate; }
  body.k-fenster .k-tapete i:nth-child(2) { animation: f-wandern 46s ease-in-out infinite alternate-reverse; }
  body.k-fenster .k-tapete i:nth-child(3) { animation: f-wandern 52s ease-in-out infinite alternate; }
  /* Einstieg "ruhig" (Prototyp vom 04.11.); weitere Einstiege kommen als eigener Wert von data-f-einstieg */
  body.k-fenster[data-f-einstieg="ruhig"].k-zugang .zugang { animation: f-ankunft .5s var(--f-feder) both; }
  html:active-view-transition body.k-fenster.k-zugang .zugang { animation: none; }
  /* Einstieg "willkommen" (Fassung 2): Farbfelder kommen herein, Begruessung zeilenweise, das Fenster folgt nach 0,9 s, Inhalt gestaffelt.
     Alles mit "both" nur auf Deckkraft und Lage: ohne Animation steht alles da. */
  body.k-fenster[data-f-einstieg="willkommen"] .k-tapete { animation: f-himmelrein 1.6s ease-out both; }
  body.k-fenster[data-f-einstieg="willkommen"].k-zugang .zugang { animation: f-ankunft-b .9s .9s var(--f-feder) both; }
  body.k-fenster[data-f-einstieg="willkommen"] .zugang-links { animation: f-blenden .6s 1.6s both; }
  body.k-fenster[data-f-einstieg="willkommen"] .f-gruss-gross { animation: f-wortrein .7s var(--f-feder) both; }
  body.k-fenster[data-f-einstieg="willkommen"] .f-gruss-klein { animation: f-wortrein .7s .3s var(--f-feder) both; }
  html:not(.af-gestartet) body.k-fenster[data-f-einstieg="willkommen"].k-zugang .zugang-karte > * { animation: f-staffel .55s var(--f-feder) 1.3s both; }
  html:not(.af-gestartet) body.k-fenster[data-f-einstieg="willkommen"].k-zugang .zugang-karte > :nth-child(2) { animation-delay: 1.37s; }
  html:not(.af-gestartet) body.k-fenster[data-f-einstieg="willkommen"].k-zugang .zugang-karte > :nth-child(3) { animation-delay: 1.44s; }
  html:not(.af-gestartet) body.k-fenster[data-f-einstieg="willkommen"].k-zugang .zugang-karte > :nth-child(4) { animation-delay: 1.51s; }
  html:not(.af-gestartet) body.k-fenster[data-f-einstieg="willkommen"].k-zugang .zugang-karte > :nth-child(n+5) { animation-delay: 1.58s; }
  /* Wechsel der Begruessung (anmelde-fluss.js): alte Zeilen gehen, die neuen kommen Wort fuer Wort */
  body.k-fenster .f-gruss.f-raus p { animation: f-wortraus .35s var(--f-feder) forwards; }
  body.k-fenster .f-gruss.f-neu .f-wort { animation: f-wortrein .7s var(--f-feder) both; }
  body.k-fenster .f-gruss.f-neu .f-wort:nth-child(2) { animation-delay: .09s; } body.k-fenster .f-gruss.f-neu .f-wort:nth-child(3) { animation-delay: .18s; }
  body.k-fenster .f-gruss.f-neu .f-wort:nth-child(4) { animation-delay: .27s; } body.k-fenster .f-gruss.f-neu .f-wort:nth-child(5) { animation-delay: .36s; }
  body.k-fenster .f-gruss.f-neu .f-wort:nth-child(n+6) { animation-delay: .45s; }
  body.k-fenster .f-gruss.f-neu .f-gruss-klein .f-wort { animation-delay: .5s; }
  /* Skelett: Bausteine bauen sich auf und atmen (kein Lichtstreifen) */
  html.af-laden body.k-fenster .f-laden > *, html.af-laden body.k-fenster .f-sk-haupt > *, html.af-laden body.k-fenster .f-sk-reihe > * { animation: f-aufbau .55s var(--f-feder) both; }
  html.af-laden body.k-fenster .f-sk-kopf { animation-delay: .11s; }
  html.af-laden body.k-fenster .f-sk-reihe > :nth-child(1) { animation-delay: .22s; } html.af-laden body.k-fenster .f-sk-reihe > :nth-child(2) { animation-delay: .33s; }
  html.af-laden body.k-fenster .f-sk-reihe > :nth-child(3) { animation-delay: .44s; } html.af-laden body.k-fenster .f-sk-breit { animation-delay: .55s; }
  html.af-laden body.k-fenster .f-sk { animation: f-atmen-sk 1.4s ease-in-out infinite; }
  html.af-laden body.k-fenster .f-sk:nth-child(2n) { animation-delay: .24s; } html.af-laden body.k-fenster .f-sk:nth-child(3n) { animation-delay: .36s; }
  /* Schrittwechsel auf der Seite (anmelde-fluss.js): Inhalt gleitet 28 px seitlich herein, zurueck aus der anderen Richtung */
  body.k-fenster .af-rein { animation: f-rein .38s var(--f-feder) both; }
  body.k-fenster .af-rein-zurueck { animation: f-rein-zurueck .38s var(--f-feder) both; }
  body.k-fenster .zf-wege:has(#zf-w-app:checked) .zf-p-app > .zf-innen, body.k-fenster .zf-wege:has(#zf-w-geraet:checked) .zf-p-geraet > .zf-innen,
  body.k-fenster .zf-wege:has(#zf-w-email:checked) .zf-p-email > .zf-innen { animation: f-rein .38s var(--f-feder) both; }
  body.k-fenster .af-schuetteln { animation: f-schuetteln .36s var(--f-feder); }
  body.k-fenster .af-kasten i.tipp { animation: f-tippen .18s var(--f-feder); }
  body.k-fenster .f-scan-linie { animation: f-scannen 1.4s ease-in-out infinite alternate; }
  body.k-fenster .zugang-karte .zf-zahl::after { animation: f-puls 2.4s var(--f-feder) infinite; }
  body.k-fenster .zf-warte:not(.frei) { animation: f-atmen 1.6s ease-in-out infinite; }
  body.k-fenster .f-erfolg:not([hidden]) .f-haken circle { animation: f-zeichnen-kreis .6s var(--f-feder) both; }
  body.k-fenster .f-erfolg:not([hidden]) .f-haken path { animation: f-zeichnen-haken .4s .45s var(--f-feder) both; }
  /* Seitenwechsel: das Fenster waechst oder schrumpft in 0,42 s, der Inhalt gleitet quer */
  ::view-transition-group(f-fenster), ::view-transition-group(f-inhalt) { animation-duration: .42s; animation-timing-function: var(--f-feder, cubic-bezier(.2, .8, .2, 1)); }
  ::view-transition-group(f-fenster) { overflow: clip; border-radius: 22px; }
  ::view-transition-group(f-inhalt) { overflow: clip; }
  ::view-transition-old(f-inhalt) { animation: f-raus .18s ease-in both; }
  ::view-transition-new(f-inhalt) { animation: f-rein .38s cubic-bezier(.2, .8, .2, 1) .08s both; }
}

@media (max-width: 420px) {
  body.k-fenster { padding: 16px; place-items: start center; }
  body.k-fenster.k-zugang .zugang { padding: 28px 22px 24px; }
  body.k-fenster .af-kasten { gap: 8px; }
  body.k-fenster .zf-codes { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  body.k-fenster *, body.k-fenster *::before, body.k-fenster *::after { transition-duration: .15s !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  body.k-fenster.k-zugang .zugang { transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .2s !important; }
}
/* Weniger Bewegung, nur Ueberblenden: lage/plattform.css setzt dort animation-name: none !important in der Ebene "alt", und wichtige
   Angaben einer Ebene schlagen ungeschichtete. Das Ueberblenden steht deshalb in derselben Ebene (dort entscheidet die Spezifitaet). */
@layer alt {
  @media (prefers-reduced-motion: reduce) {
    body.k-fenster[data-f-einstieg].k-zugang .zugang, body.k-fenster .af-rein, body.k-fenster .af-rein-zurueck {
      animation-name: f-blenden !important; animation-duration: .2s !important; animation-timing-function: ease !important; animation-fill-mode: both !important; animation-iteration-count: 1 !important;
    }
  }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  body.k-fenster.k-zugang .zugang { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--f-glas-voll); }
}
@supports not (backdrop-filter: blur(1px)) {
  body.k-fenster.k-zugang .zugang { background: var(--f-glas-voll); }
}