@font-face{font-family:Lexend;src:url('/assets/lexend.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}

:root{
  /* werden pro Besuch von auth.js gesetzt */
  --hero-bg:#0F2318;--hero-ink:#F3F7EC;--hero-muted:#B9CDB4;--accent:#FFD54A;--accent-ink:#13261A;
  --moss:#4F6B39;--moss-d:#364B27;--ink:#203E2B;--base:#F6F8EF;--line:#D5DFCD;--muted:#52604F;
  /* Karte: Flächen, Felder und Meldungen (die Karte bleibt in jeder Farbwelt hell) */
  --surface:#FFFFFF;--surface-hover:#F2F5EC;--field-border:#B8C6AE;--on-moss:#FFFFFF;--google-ink:#1F1F1F;
  --error-bg:#FBEDE6;--error-ink:#7A2E12;--ok-bg:#E7F1DE;--ok-ink:#2D4A1F;--note-bg:#EEF3E6;
  --danger:#9E3417;--danger-d:#7A2710;--on-danger:#FFFFFF;--qr-bg:#FFFFFF;
  --gutter:clamp(16px,4vw,40px);--ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--hero-bg);color:var(--hero-ink);font:17px/1.6 Lexend,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .8s}
a{color:inherit;text-underline-offset:4px}
img,svg{display:block}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:6px}

/* ---------- Muster ---------- */
.auth-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:-2;transition:opacity .5s}
.auth-canvas.fading{opacity:0}
.auth-veil{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(circle at 28% 50%,color-mix(in srgb,var(--hero-bg) 62%,transparent) 0,transparent 34%),
  linear-gradient(180deg,color-mix(in srgb,var(--hero-bg) 70%,transparent) 0,transparent 16%,transparent 80%,color-mix(in srgb,var(--hero-bg) 82%,transparent) 100%)}

/* ---------- Kopf ---------- */
.auth-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px var(--gutter)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:22px;font-weight:620;letter-spacing:-.04em}
.back{font-size:15px;text-decoration:none;opacity:.86}
.back:hover{opacity:1;text-decoration:underline}

/* ---------- Inhalt ---------- */
.auth-main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:center;gap:clamp(32px,6vw,96px);width:min(1180px,calc(100% - 2 * var(--gutter)));margin:0 auto;padding:clamp(12px,3vh,40px) 0}
.auth-brand{display:flex;flex-direction:column;align-items:center;text-align:center}
.auth-logo{width:clamp(200px,28vw,350px);height:auto}
.auth-wordmark{width:clamp(170px,21vw,270px);height:auto;margin-top:clamp(18px,3vh,30px);color:var(--hero-ink)}
.auth-tagline{margin:10px 0 0;color:var(--hero-muted);font-size:16px}

.auth-card{background:var(--base);color:var(--ink);border-radius:22px;padding:clamp(26px,3.2vw,40px);box-shadow:0 34px 70px -34px rgba(4,18,10,.65),0 0 0 1px rgba(255,255,255,.08)}
[data-hero-tone="light"] .auth-card{background:var(--surface);box-shadow:0 30px 60px -34px rgba(20,40,25,.35),0 0 0 1px var(--line)}
.auth-card :focus-visible{outline-color:var(--moss)}
.auth-card h1{margin:0 0 12px;font-size:clamp(30px,3.2vw,40px);line-height:1.1;letter-spacing:-.03em;font-weight:650}
.auth-lead{margin:0 0 24px;font-size:17.5px}
.auth-button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:54px;padding:0 26px;border:0;border-radius:999px;background:var(--moss);color:var(--on-moss);font:inherit;font-size:16.5px;font-weight:560;text-decoration:none;text-align:center;cursor:pointer;transition:background-color .16s,opacity .16s}
.auth-button:hover{background:var(--moss-d)}
.auth-button:disabled{opacity:.6;cursor:progress}
.auth-hint{margin:18px 0 0;color:var(--muted);font-size:14.5px}
.auth-hint a,.auth-fallback a{color:var(--moss)}

/* Schritte: E-Mail, Passwort, Code, Warten */
.auth-step[hidden]{display:none}
html.js:not(.static) .auth-step{animation:step-in .45s var(--ease)}
@keyframes step-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.auth-label{display:block;margin:0 0 6px;font-size:15px;font-weight:560}
.auth-input{display:block;width:100%;min-height:52px;margin:0 0 18px;padding:0 16px;border:1px solid var(--field-border);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;font-size:17px;transition:border-color .16s,box-shadow .16s}
.auth-input:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 3px color-mix(in srgb,var(--moss) 28%,transparent)}
.auth-code{font-size:22px;letter-spacing:.3em;font-variant-numeric:tabular-nums}
.auth-shadow{position:absolute;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none}
.auth-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 20px;font-size:16px;overflow-wrap:anywhere}
.auth-who span{font-weight:560}
.auth-link{display:inline-flex;align-items:center;min-height:32px;padding:0;border:0;background:none;color:var(--moss);font:inherit;font-size:14.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.auth-link:disabled{opacity:.6;cursor:progress}
.auth-or{display:flex;align-items:center;gap:14px;margin:18px 0;color:var(--muted);font-size:14px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-google{background:var(--surface);color:var(--google-ink);box-shadow:inset 0 0 0 1px var(--field-border)}
.auth-google:hover{background:var(--surface-hover)}
.auth-captcha:not(:empty){margin:0 0 18px}
.auth-error{margin:0 0 20px;padding:12px 14px;border-radius:12px;background:var(--error-bg);color:var(--error-ink);font-size:15px}
.auth-fallback{margin:0 0 18px;color:var(--muted);font-size:14.5px}
.auth-wait{display:flex;align-items:center;gap:12px}
.auth-wait::before{content:"";width:18px;height:18px;flex-shrink:0;border:2px solid var(--line);border-top-color:var(--moss);border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.auth-legacy{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-size:14.5px}
.auth-legacy summary{cursor:pointer;font-weight:560}
.auth-legacy p{margin:10px 0 0;color:var(--muted)}
.auth-legacy a{color:var(--moss)}
.auth-card[data-phase="konto"] .auth-legacy{display:none}

/* ---------- Kontoschritte: Passwort, Mindestalter, Zwei-Faktor ---------- */
.auth-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.auth-success{margin:0 0 20px;padding:12px 14px;border-radius:12px;background:var(--ok-bg);color:var(--ok-ink);font-size:15px}
/* Leer bleibt die Statusregion im Baum der Bedienungshilfen, nur ohne Fläche */
.auth-success:empty{margin:0;padding:0}
.auth-account{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:0 0 20px;color:var(--muted);font-size:15px;overflow-wrap:anywhere}
.auth-account strong{color:var(--ink);font-weight:560}
.auth-account[hidden]{display:none}
.auth-note{margin:0 0 20px;padding:12px 14px 12px 16px;border-radius:12px;border-left:3px solid var(--moss);background:var(--note-bg);color:var(--ink);font-size:15px}
.auth-note[hidden]{display:none}
.auth-text{margin:0 0 18px;color:var(--muted);font-size:15px}
.auth-text a,.auth-hint a,.auth-check a{color:var(--moss)}
.auth-hint+.auth-hint{margin-top:6px}
.auth-button-quiet{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--field-border)}
.auth-button-quiet:hover{background:var(--surface-hover)}
.auth-actions{display:grid;gap:10px;margin-top:4px}
.auth-select{appearance:auto;cursor:pointer}

.auth-rules{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:6px 16px;margin:-6px 0 20px;padding:0;color:var(--muted);font-size:14px}
.auth-rules li{display:flex;align-items:center;gap:8px;line-height:1.35}
.auth-rules li::before{content:"";display:grid;place-items:center;width:16px;height:16px;flex-shrink:0;border:1.5px solid var(--field-border);border-radius:50%;font-size:11px;font-weight:700;line-height:1;color:var(--on-moss);transition:background-color .16s,border-color .16s}
.auth-rules li[data-ok="true"]{color:var(--ink)}
.auth-rules li[data-ok="true"]::before{content:"✓";background:var(--moss);border-color:var(--moss)}

.auth-checks{margin:0 0 6px;padding:0;border:0;min-width:0}
.auth-check{display:flex;align-items:flex-start;gap:12px;min-height:44px;margin:0 0 10px;font-size:15.5px;line-height:1.5;cursor:pointer}
.auth-check input{width:22px;height:22px;margin:1px 0 0;flex-shrink:0;accent-color:var(--moss);cursor:pointer}

.auth-qr{width:200px;height:200px;margin:0 auto 14px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--qr-bg)}
.auth-qr:not([src]){display:none}
.auth-secret{margin:0 0 18px;font-size:14.5px}
.auth-secret summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:560;color:var(--moss)}
.auth-secret code{display:block;margin-top:4px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:15px/1.5 ui-monospace,"SFMono-Regular",Consolas,monospace;letter-spacing:.06em;overflow-wrap:anywhere;user-select:all}

.auth-state{margin:0 0 16px;font-size:15.5px;font-weight:560}
.auth-factors{list-style:none;display:grid;gap:10px;margin:0 0 18px;padding:0}
.auth-factors[hidden]{display:none}
.auth-factor{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.auth-factor>div:first-child{min-width:0;overflow-wrap:anywhere}
.auth-factor strong{display:block;font-weight:560;font-size:15.5px}
.auth-factor span{color:var(--muted);font-size:13.5px}
.auth-factor-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.auth-factor-actions .auth-confirm{flex-basis:100%;color:var(--ink);font-size:14px;font-weight:560}
.auth-factor-actions .auth-confirm:focus-visible{outline-offset:2px}
.auth-small{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--field-border);font:inherit;font-size:14.5px;font-weight:560;cursor:pointer;transition:background-color .16s}
.auth-small:hover{background:var(--surface-hover)}
.auth-small-danger{background:var(--danger);color:var(--on-danger);box-shadow:none}
.auth-small-danger:hover{background:var(--danger-d)}
.auth-small:disabled{opacity:.6;cursor:progress}

/* ---------- Fuß ---------- */
.auth-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding:18px var(--gutter) 22px;font-size:13.5px;color:var(--hero-muted)}
.pattern{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.pattern p{margin:0}
.pattern-id{color:var(--hero-ink);font-weight:600;font-variant-numeric:tabular-nums}
.pattern-glyph{width:30px;height:30px;overflow:visible;flex-shrink:0}
.pattern-glyph path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pattern-glyph .gi{opacity:.6;stroke-width:1.4}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 13px;border-radius:999px;border:1px solid color-mix(in srgb,var(--hero-ink) 26%,transparent);background:transparent;color:var(--hero-ink);font:inherit;font-size:12.5px;font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s}
.chip:hover{background:color-mix(in srgb,var(--hero-ink) 12%,transparent)}
.chip:disabled{opacity:.6;cursor:default}
.chip[hidden]{display:none}
.links{display:flex;flex-wrap:wrap;gap:6px 20px}
.links a{text-decoration:none}
.links a:hover{text-decoration:underline}
html:not(.js) .pattern{display:none}

/* ---------- Bewegung (Standard; ?bewegung=aus schaltet ab) ---------- */
html.js:not(.static) .auth-logo{opacity:0;transform:scale(.88)}
html.js:not(.static) .auth-wordmark,html.js:not(.static) .auth-tagline,html.js:not(.static) .auth-card{opacity:0;transform:translateY(18px)}
html.ready:not(.static) .auth-logo{animation:logo-in 1.1s var(--ease) forwards,float 7s ease-in-out 1.1s infinite}
html.ready:not(.static) .auth-card{animation:rise .9s var(--ease) .2s forwards}
html.ready:not(.static) .auth-wordmark{animation:rise .9s var(--ease) .35s forwards}
html.ready:not(.static) .auth-tagline{animation:rise .9s var(--ease) .5s forwards}
/* Falls das Skript abbricht, erscheint der Inhalt trotzdem */
html.js:not(.ready) .auth-logo,html.js:not(.ready) .auth-wordmark,html.js:not(.ready) .auth-tagline,html.js:not(.ready) .auth-card{animation:rise .01s 2.5s forwards}
@keyframes logo-in{to{opacity:1;transform:none}}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
html.static *,html.static *::before,html.static *::after{animation:none!important;transition:none!important}

/* ---------- Schmal ---------- */
@media (max-width:860px){
  body{font-size:16px}
  .auth-veil{background:
    radial-gradient(circle at 50% 24%,color-mix(in srgb,var(--hero-bg) 62%,transparent) 0,transparent 40%),
    linear-gradient(180deg,color-mix(in srgb,var(--hero-bg) 70%,transparent) 0,transparent 12%,transparent 70%,color-mix(in srgb,var(--hero-bg) 88%,transparent) 100%)}
  .auth-header{padding-block:14px}
  .back{font-size:14px}
  .auth-main{grid-template-columns:1fr;gap:28px;padding:8px 0 24px}
  .auth-logo{width:clamp(130px,38vw,190px)}
  .auth-wordmark{width:clamp(140px,40vw,190px);margin-top:14px}
  .auth-tagline{font-size:15px}
  .auth-card{border-radius:18px}
  .auth-lead{font-size:16.5px}
  .auth-link{min-height:44px}
  .auth-small{min-height:44px}
  .auth-factor-actions{width:100%}
  .auth-factor-actions .auth-small{flex:1}
  .auth-footer{flex-direction:column;align-items:flex-start}
}

/* Registration uses the available desktop width instead of a tall login card.
   Never lock scrolling: small screens, browser zoom and errors remain reachable. */
#register-rules{margin:0 0 18px}
.register-mail-note{margin-top:12px}
/* The newsletter consent stays visibly apart from the required confirmations. */
.auth-optin{margin:4px 0 16px;padding-top:14px;border-top:1px solid var(--line)}
.auth-optin legend{float:left;width:100%;padding:0;margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.auth-optin legend+*{clear:both}
.auth-optin .auth-hint{margin:0 0 0 34px;font-size:13.5px;line-height:1.5}
@media (min-width:861px) and (max-height:850px){
  .auth-header{padding-block:12px}
  .auth-main{padding-block:12px}
  .auth-card{padding:28px}
  .auth-footer{padding-block:12px}
}
@media (min-width:861px){
  body:has(#step-register:not([hidden])) .auth-header{padding-block:12px}
  body:has(#step-register:not([hidden])) .auth-main{width:min(1180px,calc(100% - 2 * var(--gutter)));grid-template-columns:minmax(160px,250px) minmax(0,850px);gap:40px;padding-block:12px}
  body:has(#step-register:not([hidden])) .auth-logo{width:220px;max-width:100%}
  body:has(#step-register:not([hidden])) .auth-wordmark{width:190px;max-width:100%;margin-top:20px}
  body:has(#step-register:not([hidden])) .auth-tagline{font-size:14px}
  body:has(#step-register:not([hidden])) .auth-card{padding:28px}
  body:has(#step-register:not([hidden])) .auth-card h1{font-size:32px;margin-bottom:12px}
  body:has(#step-register:not([hidden])) .auth-footer{padding-block:12px;font-size:12px;gap:10px 20px}
  body:has(#step-register:not([hidden])) .pattern{gap:8px 10px}
  body:has(#step-register:not([hidden])) .pattern-glyph{width:24px;height:24px}
  #step-register .register-intro{max-width:66ch;margin-bottom:24px;font-size:15px;line-height:1.5}
  .register-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
  .register-fields{padding-right:28px;border-right:1px solid var(--line)}
  #step-register .auth-label{font-size:14.5px;line-height:1.4}
  #step-register .auth-input{min-height:48px;margin-bottom:14px;font-size:16px}
  #step-register .auth-check{font-size:14px;line-height:1.5;min-height:44px;margin-bottom:8px;gap:10px}
  #step-register .auth-check input{width:20px;height:20px}
  #step-register .auth-checks{margin-bottom:12px}
  #step-register .auth-captcha:not(:empty){margin-bottom:14px}
  #step-register .auth-button{min-height:48px;font-size:15.5px}
  #step-register .auth-hint{font-size:13px;line-height:1.5}
  #step-register .auth-link{font-size:14px}
  #step-register #register-rules{margin-bottom:0}
  #step-register .register-mail-note{margin-top:12px}
  #step-register .register-mail-note+.auth-hint{margin-top:6px}
}
@media (min-width:861px) and (max-width:1100px){
  body:has(#step-register:not([hidden])) .auth-main{max-width:880px;grid-template-columns:1fr}
  body:has(#step-register:not([hidden])) .auth-brand{display:none}
}