/* Standard: Hell. Dunkel nur bei gespeicherter Wahl (data-theme=dark).
   ==========================================================================
   zb EMS · Anmeldeseiten – identisch zur NaFraPro-Anmeldung
   (zb-nafrapro-dataanalyse: Bild-Bühne, Glaskarte, Nunito Sans, zb-Rot-Knopf).
   ========================================================================== */
@font-face{font-family:'Nunito Sans';font-weight:400;font-display:swap;src:url(/fonts/nunito-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-weight:700;font-display:swap;src:url(/fonts/nunito-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-weight:800;font-display:swap;src:url(/fonts/nunito-sans-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-weight:900;font-display:swap;src:url(/fonts/nunito-sans-latin-900-normal.woff2) format('woff2')}

:root{color-scheme:light;--paper:#eef0f3;--card:#fff;--ink:#1a1f27;--muted:#5a6472;--muted2:#5f6874;--line:#e4e7ec;--soft:#f4f5f8;--accent:#eb0000;--accent-ink:#c60018;--grow:#1c7a44;--info:#2d327d}
[data-theme=dark]{color-scheme:dark;--paper:#0f141c;--card:#1e2530;--ink:#e7eaf1;--muted:#9aa3af;--muted2:#8894a5;--line:#333e4d;--soft:#232c3a;--accent:#ff5a4d;--accent-ink:#ff7367;--grow:#7ee2a8;--info:#a5b4fc}
:root{--rot:var(--accent);--bg:var(--paper);--grau:var(--muted);--rand:var(--line);--feld-bg:var(--card);
  --err-bg:color-mix(in srgb,var(--accent) 9%,var(--card));--err-ink:var(--accent-ink);--err-rand:color-mix(in srgb,var(--accent) 35%,var(--card));
  --ok-bg:color-mix(in srgb,var(--grow) 12%,var(--card));--ok-ink:var(--grow);--ok-rand:color-mix(in srgb,var(--grow) 40%,var(--card));
  --info-bg:color-mix(in srgb,var(--info) 10%,var(--card));--info-rand:color-mix(in srgb,var(--info) 35%,var(--card));
  --pill-schatten:0 4px 14px rgba(20,25,40,.06)}
[data-theme=dark]{--pill-schatten:0 4px 14px rgba(0,0,0,.4)}

*{box-sizing:border-box}
body{margin:0;font-family:'Nunito Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;position:relative;overflow-x:hidden}
a{color:inherit}

/* Bühne: Leitstellen-Bild hinter der Karte (hell und dunkel dasselbe Bild, nur der Schleier unterscheidet sich) */
body::before{content:"";position:fixed;inset:-2%;z-index:-2;background:var(--bg) url(/images/anmeldung/anmeldung-leitstelle.jpg) center/cover no-repeat;animation:bildAtem 38s ease-in-out infinite alternate}
@keyframes bildAtem{from{transform:scale(1)}to{transform:scale(1.055)}}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(120% 90% at 50% 45%,rgba(8,11,17,.10) 0%,rgba(8,11,17,.08) 42%,rgba(8,11,17,.45) 100%)}
@media (max-width:640px){body::before{background-image:url(/images/anmeldung/anmeldung-leitstelle-klein.jpg)}}
[data-theme=dark] body::before{background-image:url(/images/anmeldung/anmeldung-leitstelle.jpg)}
[data-theme=dark] body::after{background:radial-gradient(120% 90% at 50% 45%,rgba(8,11,17,.42) 0%,rgba(8,11,17,.24) 42%,rgba(8,11,17,.62) 100%)}
@media (max-width:640px){[data-theme=dark] body::before{background-image:url(/images/anmeldung/anmeldung-leitstelle-klein.jpg)}}

/* Glaskarte */
.karte{background:color-mix(in srgb,var(--card) 86%,transparent);border-radius:20px;width:100%;max-width:430px;padding:34px 32px;
  box-shadow:0 24px 70px rgba(12,16,26,.28),0 2px 0 rgba(255,255,255,.35) inset;border:1px solid color-mix(in srgb,#fff 55%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);animation:karteAuf .58s cubic-bezier(.16,.84,.28,1) both}
[data-theme=dark] .karte{background:color-mix(in srgb,var(--card) 82%,transparent);border-color:rgba(255,255,255,.13);box-shadow:0 28px 80px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.07) inset}
@keyframes karteAuf{from{opacity:0;transform:translateY(18px) scale(.975)}to{opacity:1;transform:none}}
@keyframes markeAuf{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes feldAuf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.kopf h1{animation:feldAuf .42s .16s cubic-bezier(.16,.84,.28,1) both}
.kopf p{animation:feldAuf .42s .22s cubic-bezier(.16,.84,.28,1) both}
form{animation:feldAuf .42s .26s cubic-bezier(.16,.84,.28,1) both}
.fuss{animation:feldAuf .42s .40s cubic-bezier(.16,.84,.28,1) both}

.kopf{text-align:center;margin-bottom:22px}
.kopf img{width:180px;height:auto;animation:markeAuf .5s .08s cubic-bezier(.2,.7,.3,1) both}
.lgpos{display:inline-block}.lgneg{display:none}
[data-theme=dark] .lgpos{display:none}[data-theme=dark] .lgneg{display:inline-block}
.kopf h1{font-size:22px;font-weight:900;margin:12px 0 2px}
.kopf p{font-size:13px;color:var(--grau);margin:0}

label{display:block;font-size:13px;font-weight:700;margin:16px 0 6px}
.feld{position:relative}
.feld .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted2);display:flex;pointer-events:none}
.feld input{width:100%;padding:12px 14px 12px 40px;font-size:14px;font-family:inherit;border:1px solid var(--rand);border-radius:10px;outline:none;color:var(--ink);
  background:color-mix(in srgb,var(--feld-bg) 72%,transparent);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.feld input:hover{border-color:color-mix(in srgb,var(--rot) 45%,var(--rand))}
.feld input:focus{border-color:#eb0000;background:var(--feld-bg);box-shadow:0 0 0 4px rgba(235,0,0,.14)}
.feld .auge{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted2);padding:6px;display:flex}
.feld .auge[aria-pressed=true]{color:#eb0000}

/* Knopf trägt die Marke: zb-Rot in hell UND dunkel */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:20px;padding:13px;font-size:15px;font-weight:700;font-family:inherit;color:#fff;
  background:#eb0000;border:none;border-radius:10px;cursor:pointer;box-shadow:0 8px 20px rgba(235,0,0,.26);transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.btn:hover{background:#cf0000;transform:translateY(-1px);box-shadow:0 12px 26px rgba(235,0,0,.34)}
.btn:active{transform:translateY(0);box-shadow:0 6px 14px rgba(235,0,0,.28)}
.btn:focus-visible{outline:3px solid rgba(235,0,0,.35);outline-offset:2px}

.merk{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--grau);margin-top:14px;cursor:pointer;user-select:none}
.merk input{appearance:none;-webkit-appearance:none;width:19px;height:19px;flex:none;margin:0;border:1.5px solid var(--rand);border-radius:6px;background:var(--feld-bg);cursor:pointer;position:relative;transition:background .15s,border-color .15s}
.merk input:hover{border-color:var(--rot)}
.merk input:checked{background:#eb0000;border-color:#eb0000}
.merk input:checked::after{content:"";position:absolute;left:5.5px;top:2.2px;width:5px;height:9.5px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

.meldung{border-radius:9px;padding:11px 13px;font-size:13px;margin-top:4px;margin-bottom:4px;border:1px solid}
.meldung.fehler{background:var(--err-bg);color:var(--err-ink);border-color:var(--err-rand)}
.meldung.ok{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-rand)}
.meldung.info{background:var(--info-bg);color:var(--ink);border-color:var(--info-rand)}
.hinweis{font-size:12.5px;color:var(--grau);margin-top:12px;line-height:1.5}
.link{display:block;text-align:center;margin-top:14px;font-size:13px;font-weight:600;color:var(--grau);text-decoration:none}
.link:hover{color:var(--rot)}
.fuss{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);text-align:center;font-size:12px;color:var(--muted2)}
.fuss button{background:none;border:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer;padding:0}

.umgebung{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--grau);
  box-shadow:var(--pill-schatten);background:color-mix(in srgb,var(--card) 80%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-transform:uppercase;
  animation:feldAuf .42s .46s cubic-bezier(.16,.84,.28,1) both}
.punkt{width:8px;height:8px;border-radius:50%}

@media (prefers-reduced-motion:reduce){.karte,.kopf img,.kopf h1,.kopf p,form,.fuss,.umgebung,body::before{animation:none!important}.btn,.feld input{transition:none}.btn:hover{transform:none}}

/* Zwei-Faktor-Einrichtung */
.schritte{margin:0 0 14px;padding-left:1.2em;font-size:14px;line-height:1.5}
.qr{display:flex;justify-content:center;margin:6px 0 10px}
.qr img{background:#fff;padding:8px;border:1px solid var(--line, #e6e6e6)}
.schluessel{font-family:ui-monospace,monospace;font-size:13px;letter-spacing:.04em;word-break:break-all}
.codes{list-style:none;padding:0;margin:10px 0 16px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.codes code{display:block;font-family:ui-monospace,monospace;font-size:14px;padding:6px 8px;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.link-form{margin:0;text-align:center}
.link-form .link{background:none;border:0;cursor:pointer;font:inherit;display:inline-block;width:auto;margin:10px auto 0}
.meldung.ok{background:#e8f4ec;color:#1c5f35;padding:10px 12px;margin-bottom:12px;font-size:14px}
a.btn{display:block;text-align:center;text-decoration:none}