/* ═══ v2 · auth.css — Anmeldung (Mockup 29a–29e) ═══
   Vollflaechige Ebene ueber der App; nur diese Datei kennt die Anmelde-Klassen. */

.au-wrap{position:fixed;inset:0;z-index:900;background:var(--bg);display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* Mockup 33c: kein Kopfbalken — das Logo steht gross im Inhalt, darunter ein kurzer
   gelber Akzentstrich statt der durchgehenden Kante. */
.au-head{padding:calc(28px + env(safe-area-inset-top)) var(--edge) 0;flex-shrink:0;max-width:520px;width:100%;box-sizing:border-box;margin:0 auto}
.au-logo{height:52px;display:block}
/* Fortschritt statt Akzentstrich: erledigte/aktive Abschnitte gelb, kommende grau.
   Beginnt zweiteilig und waechst weich auf vier, wenn eine Erstanmeldung feststeht. */
.au-rule{display:flex;gap:5px;margin-top:20px;width:44px;transition:width .45s cubic-bezier(.4,0,.2,1)}
.au-rule[data-of="2"]{width:96px}
.au-rule[data-of="4"]{width:168px}
.au-rule i{flex:1;height:3px;border-radius:99px;background:var(--line);transition:background .35s ease,opacity .35s ease,flex-grow .45s ease}
[data-theme="dark"] .au-rule i{background:#3b3f43}
.au-rule i.on{background:var(--hl)}
.au-rule i.neu{animation:au-grow .45s ease both}
@keyframes au-grow{from{opacity:0;flex-grow:.02}to{opacity:1;flex-grow:1}}
[data-theme="dark"] .au-logo-h{display:none}
[data-theme="light"] .au-logo-d{display:none}

.au-body{flex:1;display:flex;flex-direction:column;padding:44px var(--edge) calc(26px + env(safe-area-inset-bottom));max-width:520px;width:100%;box-sizing:border-box;margin:0 auto}
.au-eb{font-size:var(--fs-eb);font-weight:800;letter-spacing:var(--lsp-eb);color:var(--hl-text,var(--hl));text-transform:uppercase;margin-top:12px}
.au-h{font-size:34px;font-weight:800;letter-spacing:-.6px;margin:0;color:var(--ink)}
.au-sub{font-size:var(--fs-body);color:var(--muted);margin:10px 0 0;line-height:1.6}
.au-sub b{font-weight:700;color:var(--ink)}
.au-sub svg{display:inline;vertical-align:-2px;margin-right:2px;color:var(--hl-text)}
.au-nb{white-space:nowrap}

.au-lab{font-size:var(--fs-eb);font-weight:800;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase;margin-top:30px}   /* 37b: Feldlabel grau */
.au-in{margin-top:8px;width:100%;box-sizing:border-box;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:15px 16px;font-family:var(--f);font-size:16px;color:var(--ink);outline:none;-webkit-appearance:none}
.au-in:focus{border-color:var(--hl)}
.au-in::placeholder{color:var(--muted)}
textarea.au-in{min-height:76px;resize:none;line-height:1.45}
[data-theme="light"] .au-in{border-color:var(--line)}

.au-go{margin-top:18px;width:100%;padding:16px;border:1.5px solid var(--hl);border-radius:var(--r-chip);background:transparent;
  color:var(--hl-text);font-family:var(--f);font-size:17px;font-weight:800;cursor:pointer}
.au-go[disabled]{border-color:var(--line);color:var(--muted);cursor:default}

/* Zweitaktionen als Chip-Paar */
.au-alt{display:flex;gap:9px;margin-top:12px}
.au-alt button{flex:1;padding:12px 6px;border:1px solid var(--line);border-radius:var(--r-chip);background:transparent;
  color:var(--ink);font-family:var(--f);font-size:13.25px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
[data-theme="dark"] .au-alt button{border-color:#3b3f43;color:#c6cacd}
.au-alt svg{flex-shrink:0}

/* Code-Felder */
.au-code{display:flex;gap:8px;margin-top:24px}
.au-code input{flex:1;min-width:0;aspect-ratio:1/1.15;background:var(--card);border:1px solid var(--line);border-radius:var(--r-field);
  text-align:center;font-family:var(--f);font-size:24px;font-weight:700;color:var(--ink);outline:none;-webkit-appearance:none;padding:0}
[data-theme="dark"] .au-code input{border-color:#3b3f43}
.au-code input:focus{border:1.5px solid var(--hl)}
.au-code.shake{animation:au-shake .35s}
@keyframes au-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* Fussnoten und Meldungen */
.au-foot{margin-top:auto;padding-top:28px;text-align:center}
.au-foot-q{font-size:13.25px;color:var(--muted)}
/* Hinweis-Variante: obere Zeile gelb, untere grau (Konzept 39c) */
.au-foot-q.hell{font-size:14.5px;font-weight:700;color:var(--hl-text)}
.au-foot-a{font-size:13.25px;color:var(--muted);margin-top:5px}
.au-link{font-size:14.5px;color:var(--hl-text);font-weight:700;margin-top:5px;cursor:pointer;background:none;border:0;font-family:var(--f);display:block;width:100%}
.au-msg.gut{background:rgba(79,211,148,.12);border-color:rgba(79,211,148,.42)}
.au-msg{margin-top:14px;background:rgba(224,83,63,.12);border:1px solid rgba(224,83,63,.4);border-radius:var(--r-field);
  padding:11px 13px;font-size:13.25px;color:var(--ink);line-height:1.45}

/* Zustimmung */
.au-ck{display:flex;gap:12px;align-items:flex-start;margin-top:22px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:14px;cursor:pointer}
[data-theme="dark"] .au-ck{border-color:#3b3f43}
.au-ck-box{width:21px;height:21px;border-radius:6px;border:1.5px solid var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.au-ck.on .au-ck-box{background:var(--hl);border-color:var(--hl)}
.au-ck-box svg{display:none}
.au-ck.on .au-ck-box svg{display:block}
.au-ck-tx{font-size:13.25px;color:var(--ink);line-height:1.45}
[data-theme="dark"] .au-ck-tx{color:#c6cacd}
.au-ck-tx a{color:var(--hl-text);text-decoration:none}

/* Ladezustand */
.au-load{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-size:14.5px}
.au-spin{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--hl);animation:au-spin .8s linear infinite}
@keyframes au-spin{to{transform:rotate(360deg)}}

/* Vereinswappen als blasses Wasserzeichen (Mockup 32a/35a).
   Der weiche Auslauf steckt jetzt IM Bild (echte Transparenz, an allen vier Seiten) — dadurch
   ist kein rechteckiger Rand mehr zu erahnen. Deshalb hier keine CSS-Maske mehr.
   fixed statt absolute: sonst vergroessert das Bild die Scrollhoehe des Anmeldescreens. */
.au-mark{position:fixed;right:-58px;bottom:-70px;width:74%;max-width:340px;opacity:.22;
  mix-blend-mode:screen;pointer-events:none;user-select:none;
  /* Leicht unscharf wie im alten Bild — nimmt den harten Rand oben und links. */
  filter:blur(1.2px);
  /* Das SVG endet hart an der Kontur — die Weichzeichnung des alten Bildes uebernimmt
     jetzt eine Maske: nach oben und links auslaufend. */
  -webkit-mask-image:radial-gradient(120% 120% at 100% 100%, #000 42%, rgba(0,0,0,.55) 68%, transparent 100%);
  mask-image:radial-gradient(120% 120% at 100% 100%, #000 42%, rgba(0,0,0,.55) 68%, transparent 100%)}

[data-theme="light"] .au-mark{opacity:.13;mix-blend-mode:multiply}

/* Solange die Anmeldung offen ist, bewegt sich die Seite dahinter nicht (kein position:fixed! */
html.au-open,body.au-open{overflow:hidden;touch-action:none;overscroll-behavior:none}

/* Mail-Icon und Adresse: kleiner Abstand, Zeile bleibt zusammen */
.au-nb{white-space:nowrap}
.au-nb svg{margin-right:5px}