/* FIB Dienstanmeldung – Anmeldemaske und tägliche Anmeldesequenz im Panel.
   Design: Stil A "Behörden-Hightech" (Richtung A, gewählt von Leon am 26.10.2026): dunkelblaue Glasflächen, Lichtkante, Aurora-Hintergrund,
   Siegel mit Ring, Prüfzeilen mit grünen Punkten. Die Farben kommen aus static/fib-tokens.css (Grundwerte); alle Variablen haben Rückfallwerte.
   Klassen und Zustände (da-*) sind unverändert, weil dienstanmeldung.js sie setzt. Eigenständig, ohne externe Ressourcen.
   Animiert werden nur transform und opacity; prefers-reduced-motion schaltet alles ab. */
.da-seite, #da-sequenz {
  --da-bg: var(--fib-bg, #030b1a); --da-text: var(--fib-text, #f0f6fd); --da-text2: var(--fib-text-2, #cfdcec); --da-muted: var(--fib-muted, #a8bdd6);
  --da-accent: var(--fib-accent, #9fd6ff); --da-hi: var(--fib-accent, #9fd6ff); --da-gruen: var(--fib-ok, #6fdba6);
  --da-line: rgba(120, 190, 255, .22); --da-line2: rgba(150, 215, 255, .5);
  --da-sans: 'FIB Sans', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --da-head: 'FIB Sans', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --da-mono: 'FIB Mono', ui-monospace, 'Cascadia Mono', Consolas, 'SFMono-Regular', Menlo, monospace;
  --da-glas: linear-gradient(150deg, rgba(24, 62, 118, .5), rgba(8, 26, 56, .42));
}
.da-seite { margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--da-text); font: 400 15px/1.5 var(--da-sans); -webkit-font-smoothing: antialiased; background: var(--da-bg); position: relative; overflow-x: hidden; }

/* Hintergrund: Aurora (nur transform) und HUD-Gitter */
.da-seite::before, #da-sequenz::before { content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 42% at 18% 8%, rgba(40, 140, 240, .5), transparent 70%), radial-gradient(40% 40% at 88% 40%, rgba(110, 90, 255, .3), transparent 70%), radial-gradient(40% 30% at 50% 100%, rgba(30, 200, 255, .2), transparent 70%);
  animation: da-drift 30s ease-in-out infinite alternate; }
.da-seite::after, #da-sequenz::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(120, 190, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 190, 255, .07) 1px, transparent 1px); background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%); }
.da-flaeche { background: radial-gradient(120% 80% at 50% -10%, #0a2350 0%, var(--da-bg) 60%); }
#da-sequenz::before, #da-sequenz::after { z-index: 0; }
#da-sequenz > * { position: relative; z-index: 1; }
.da-seite { background: radial-gradient(120% 80% at 50% -10%, #0a2350 0%, var(--da-bg) 60%) fixed; }
.da-seite :focus-visible, #da-sequenz :focus-visible { outline: 2px solid var(--da-accent); outline-offset: 3px; }
.da-zurueck { position: absolute; top: 16px; left: 16px; z-index: 5; padding: 9px 14px; border: 1px solid var(--da-line); border-radius: 12px; background: rgba(130, 200, 255, .08); color: var(--da-text2); font: 500 14px var(--da-sans); text-decoration: none; }
.da-zurueck:hover { background: rgba(130, 200, 255, .18); color: #fff; }
.da-buehne { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 72px 16px 40px; box-sizing: border-box; }
.da-mitte { width: min(560px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Siegel und Kennung */
.da-siegel { position: relative; width: 132px; height: 132px; display: grid; place-items: center; margin-bottom: 14px; }
.da-siegel img { width: 76%; height: 76%; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 12px 32px rgba(0, 0, 0, .6)) drop-shadow(0 0 28px rgba(110, 190, 255, .5)); }
.da-siegel .da-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--da-line2); border-top-color: var(--da-accent); box-shadow: 0 0 0 14px rgba(120, 180, 240, .04), 0 0 40px rgba(90, 170, 255, .25); animation: da-dreh 1.4s linear infinite; }
.da-siegel::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px dashed rgba(159, 214, 255, .3); pointer-events: none; animation: da-dreh 40s linear infinite reverse; }
.da-ruhe .da-ring, .da-ring.da-still { animation: none; }
.da-kennung { margin: 14px 0 24px; display: flex; flex-direction: column; gap: 6px; }
.da-kennung b { font: 700 13px var(--da-sans); letter-spacing: .34em; text-transform: uppercase; color: var(--da-text); }
.da-kennung span { font: 500 12px var(--da-mono); letter-spacing: .1em; color: var(--da-accent); }

/* Maske: Glaskarte mit Lichtkante */
.da-maske { position: relative; width: min(440px, 100%); box-sizing: border-box; padding: 24px 26px 26px; border: 1px solid var(--da-line2); border-radius: 24px; text-align: left;
  background: var(--da-glas); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 30px 70px -30px #000, inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: opacity .45s ease, transform .45s ease, max-height .55s ease, margin .55s ease, padding .55s ease; max-height: 520px; overflow: hidden; animation: da-zeile .5s ease-out; }
.da-maske::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--da-accent), transparent); }
.da-titel { font: 700 20px/1.2 var(--da-sans); color: var(--da-text); margin: 0 0 16px; }
.da-feld { margin-bottom: 12px; }
.da-feld label { display: block; font: 500 12px var(--da-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--da-muted); margin-bottom: 7px; }
.da-wert { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--da-line); background: rgba(3, 12, 28, .6);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4); font: 500 15px var(--da-mono); color: var(--da-text); transition: border-color .25s, box-shadow .25s; overflow: hidden; }
.da-wert svg { width: 16px; height: 16px; color: var(--da-muted); flex: none; }
.da-wert .da-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-wert .da-text.da-kennwort { letter-spacing: .14em; }
.da-wert .da-platz { color: var(--da-muted); font: 400 15px/1.3 var(--da-sans); white-space: normal; padding: 10px 0; }
.da-cursor { width: 2px; height: 18px; background: var(--da-accent); opacity: 0; flex: none; }
.da-feld.da-aktiv .da-wert { border-color: var(--da-accent); background: rgba(3, 12, 28, .8); box-shadow: 0 0 0 3px rgba(159, 214, 255, .28), 0 0 26px -6px rgba(110, 190, 255, .6); }
.da-feld.da-aktiv .da-cursor { opacity: 1; animation: da-blink 1s steps(2, start) infinite; }
.da-hinweis { margin: 14px 0 0; color: var(--da-muted); font-size: 13.5px; line-height: 1.5; }

/* Knopf: Primärknopf mit Glanzstreifen */
.da-knopf { box-sizing: border-box; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; margin-top: 18px; border-radius: 14px;
  font: 700 16px var(--da-sans); color: #04122a; text-decoration: none; cursor: pointer; border: 1px solid rgba(255, 255, 255, .7);
  background: linear-gradient(180deg, #c3e8ff, #7cc2f5); box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset, 0 14px 40px -12px rgba(110, 190, 255, .8);
  transition: transform .2s, background .2s, box-shadow .2s; }
.da-knopf::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%); transform: translateX(-120%); animation: da-glanz 5s 1.2s infinite; pointer-events: none; }
.da-knopf svg { width: 19px; height: 19px; flex: none; }
.da-knopf:hover, .da-knopf:focus-visible { background: linear-gradient(180deg, #dcf1ff, #98d0ff); outline: none; transform: translateY(-2px); }
.da-knopf:focus-visible { box-shadow: 0 0 0 3px rgba(159, 214, 255, .5), 0 14px 40px -12px rgba(110, 190, 255, .8); }
.da-knopf.da-gedrueckt { transform: scale(.97); }
.da-knopf.da-pruefen { color: #e7f3ff; background: linear-gradient(180deg, rgba(44, 114, 179, .7), rgba(31, 88, 148, .7)); border-color: rgba(190, 225, 255, .4); box-shadow: none; animation: da-puls 1s infinite ease-in-out; pointer-events: none; }
.da-knopf.da-pruefen::after { display: none; }
.da-fuss { margin-top: 22px; color: var(--da-muted); font-size: 13.5px; }

/* Anmeldesequenz im Panel (Überlagerung) */
#da-sequenz { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; cursor: default; color: var(--da-text); padding: 16px; box-sizing: border-box; overflow: hidden; transition: opacity .6s ease, transform .6s ease; font: 400 15px/1.5 var(--da-sans); }
#da-sequenz.da-weg { opacity: 0; transform: scale(1.015); pointer-events: none; }
#da-sequenz .da-ring.da-still, #da-sequenz.da-fertig .da-ring, #da-sequenz.da-kurz .da-ring { animation: none; }
.da-platzhalter { width: 100%; display: flex; flex-direction: column; align-items: center; }
.da-log { width: min(440px, 100%); min-height: 0; text-align: left; font: 500 13px/1 var(--da-mono); color: var(--da-text2); transition: opacity .35s, max-height .45s; max-height: 280px; overflow: hidden; }
.da-log:not(:empty) { padding: 12px 18px; border: 1px solid var(--da-line2); border-radius: 20px; background: var(--da-glas); box-shadow: 0 30px 70px -30px #000, inset 0 1px 0 rgba(255, 255, 255, .16); }
#da-sequenz.da-fertig .da-log { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
.da-zeile { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; animation: da-zeile .25s ease-out; }
.da-zeile .da-was { color: var(--da-muted); white-space: nowrap; }
.da-zeile .da-was::before { content: '›'; color: var(--da-accent); margin-right: 8px; }
.da-zeile .da-punkte { flex: 1; border-bottom: 1px dotted var(--da-line2); transform: translateY(-3px); min-width: 12px; }
.da-zeile .da-ergebnis { color: var(--da-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-zeile .da-ergebnis.da-laeuft { color: var(--da-muted); animation: da-puls 1s infinite ease-in-out; }
.da-zeile .da-ergebnis.da-ok::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 10px; border-radius: 50%; background: var(--da-gruen); box-shadow: 0 0 10px var(--da-gruen); vertical-align: 1px; }
.da-gruss { opacity: 0; transform: translateY(8px); transition: opacity .55s ease, transform .55s ease; margin-top: 8px; }
.da-gruss.da-an { opacity: 1; transform: none; }
.da-gruss h1 { margin: 0; font: 700 clamp(30px, 4vw, 46px)/1.1 var(--da-head); letter-spacing: -.01em; background: linear-gradient(100deg, #7cc2f5, #e5f4ff 45%, #9fd6ff); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.da-gruss p { margin: 6px 0 0; color: var(--da-text2); font-size: 18px; }
.da-gruss .da-knopf { width: auto; min-width: 200px; padding: 0 22px; margin-top: 20px; }
.da-oeffnet { margin-top: 18px; font: 500 13px var(--da-mono); letter-spacing: .1em; color: var(--da-muted); animation: da-puls 1.1s infinite ease-in-out; }
.da-ueberspringen { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 9px 16px; border: 1px solid var(--da-line); border-radius: 999px; background: rgba(130, 200, 255, .08); color: var(--da-text2); font: 500 13px var(--da-sans); cursor: pointer; }
.da-ueberspringen:hover { color: #fff; border-color: var(--da-line2); }
.da-pruefung .da-maske { opacity: 0; transform: translateY(-6px); max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; }

.da-ruhe, .da-ruhe * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .da-seite::before, #da-sequenz::before, .da-siegel .da-ring, .da-siegel::after, .da-cursor, .da-maske, .da-zeile, .da-gruss, .da-oeffnet, .da-knopf::after { animation: none !important; } }
@media (max-width: 560px) {
  .da-gruss h1 { font-size: 28px; }
  .da-zeile { font-size: 12px; }
  .da-kennung b { letter-spacing: .2em; }
  .da-maske { padding: 20px 18px 22px; }
  .da-siegel { width: 104px; height: 104px; }
}
@media (max-height: 560px) { .da-siegel { width: 88px; height: 88px; } .da-kennung { margin: 10px 0 14px; } }
@keyframes da-dreh { to { transform: rotate(360deg); } }
@keyframes da-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }
@keyframes da-glanz { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes da-zeile { from { opacity: 0; transform: translateY(4px); } }
@keyframes da-puls { 50% { opacity: .3; } }
@keyframes da-blink { to { visibility: hidden; } }