/* ═══════════════════════════════════════════════════════════════════════════
   auth.css: die gemeinsame Vorlage von Login, Register und Reset (W6, SEL-2)

   Eine Datei für alle drei Seiten, damit sie gleich gebaut sind und bleiben
   (UMSETZUNG §3 W6). Sie liest ausschließlich Tokens aus tokens.css: kein
   Farb-, Radius-, Schatten- oder Dauer-Literal (DESIGN §1.1, §2.1).

   Aufbau jeder Seite (DESIGN §3.1): dunkle Kopfzeile als Rahmen (Marke links,
   Werkzeuge rechts), darunter die Bühne in --bg mit genau einer Formularkarte
   und der Rechtszeile. Formular nach §4.7, Knopfrollen nach §4.1, Meldungen
   nach §4.10, Fokus nach §2.9. Umbruchkante 760 (§3.3), 720 entfällt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Knopfrolle und -form wie in der App (W1): erben nicht, damit genau der
   Knopf eine Rolle hat, der sie setzt. tests/auth-durchklick.js prüft das. */
@property --btn-role { syntax: '*'; inherits: false; }

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-size: var(--fs-md); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ico { width: var(--ico-md); height: var(--ico-md); flex: none; stroke-width: var(--ico-stroke); }
.ico-sm { width: var(--ico-sm); height: var(--ico-sm); }
/* Das Sprite hat nur den Pfeil nach rechts; zurück ist derselbe Pfeil gespiegelt. */
.ico-zurueck { transform: scaleX(-1); }

/* ── Fokus (§2.9): ein Ring für alle Bedienelemente, nur per Tastatur ── */
:focus { outline: none; }
a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Hülle (§3.1, §2.6): Kopfzeile in beiden Modi dunkel ── */
.auth-top {
  position: sticky; top: 0; z-index: var(--z-sticky);
  height: var(--topbar-h); flex: none;
  display: flex; align-items: center; gap: var(--s6);
  padding: 0 var(--gutter);
  background: var(--chrome-bg); color: var(--chrome-ink);
  border-bottom: 1px solid var(--chrome-line);
}
.brand { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--chrome-ink); border-radius: var(--r-md); }
.brand-tile {
  width: var(--brand-tile); height: var(--brand-tile); flex: none; display: grid; place-items: center;
  border-radius: var(--brand-tile-r); background: var(--brand-tile-bg); color: var(--brand-tile-ink);
}
.brand-mark { width: 21px; height: 21px; }
/* Die Wortmarke ist die Ausnahme vom Token-Zwang (§2.1): 800, 18 px. */
.brand-word { font: 800 18px/1 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: -0.022em; }
.brand-word i { font-style: normal; color: var(--brand-word-accent); }
.auth-top-end, .auth-top-tools { display: flex; align-items: center; gap: var(--s2); }
.auth-top-end { margin-left: auto; }

/* Ruhige Knöpfe auf der Hülle: --chrome-ink-2, Hover --chrome-hover (§4.1). */
.auth-top .btn-quiet, .auth-top .iconbtn, #langToggle {
  --btn-role: quiet;
  color: var(--chrome-ink-2); background: transparent; border: 0;
}
.auth-top .btn-quiet:hover, .auth-top .iconbtn:hover, #langToggle:hover {
  color: var(--chrome-ink); background: var(--chrome-hover);
}
/* Reiner Icon-Knopf: quadratisch, --control-h (§4.1). Der Sprachknopf kommt
   aus i18n-lite.js und wird hier in dieselbe Form gebracht. */
.iconbtn, #langToggle {
  width: var(--control-h); height: var(--control-h); padding: 0;
  display: inline-grid; place-items: center; border-radius: var(--r-md); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
/* Gedrückt gilt für jede Rolle (§4.1), auch für die Icon-Knöpfe der Hülle. */
.iconbtn:active, #langToggle:active { transform: translateY(1px); }

/* ── Knöpfe: vier Rollen (§4.1), hier gebraucht: Primär, Ruhig, Text ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--control-h); padding: 0 var(--btn-px); border-radius: var(--btn-r);
  border: 1px solid transparent; background: none; color: inherit;
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-tight);
  white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-lg { min-height: calc(var(--control-h) + 6px); font-size: var(--fs-md); }
.btn-block { width: 100%; }
.btn-primary {
  --btn-role: primary;
  background: var(--btn-primary-bg); color: var(--on-accent); box-shadow: var(--btn-primary-shadow);
}
.btn-primary:hover:not(:disabled) { background: var(--btn-primary-hover); }
.btn-quiet { --btn-role: quiet; color: var(--ink-2); }
.btn-quiet:hover { background: var(--hover-bg); color: var(--ink); }
.btn-text {
  --btn-role: text;
  display: inline-flex; align-items: center; gap: var(--s1);
  min-height: 0; padding: 0; border: 0; border-radius: var(--r-sm);
  color: var(--accent-ink); font-weight: var(--fw-medium); text-decoration: none;
}
.btn-text:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Beschäftigt (§4.1): nimmt keine Klicks an, ein Kreis dreht sich vor dem Text.
   Zustandsanimation, läuft nur solange der Zustand besteht (§2.10). */
.btn.is-busy { pointer-events: none; }
.btn.is-busy::before {
  content: ''; width: var(--ico-sm); height: var(--ico-sm); flex: none; border-radius: var(--r-full);
  border: 2px solid currentColor; border-right-color: transparent;
  animation: auth-spin .9s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* ── Bühne und Karte (§3.2, §4.5) ── */
.auth-stage {
  flex: 1; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--s10) var(--gutter);
}
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--card-r);
  box-shadow: var(--card-shadow); padding: var(--s8);
}
.auth-card h1 {
  font-family: var(--font-display); letter-spacing: var(--display-tracking);
  font-size: var(--fs-2xl); font-weight: var(--fw-strong); line-height: var(--lh-tight); color: var(--ink);
}
.subtitle { margin-top: var(--s2); color: var(--ink-2); font-size: var(--fs-md); }
/* Bestätigungsansicht (Register nach dem Absenden): Icon über dem Titel. */
.auth-card .auth-zeichen {
  width: var(--s10); height: var(--s10); display: grid; place-items: center; margin-bottom: var(--s5);
  border-radius: var(--r-full); background: var(--success-tint); color: var(--success);
}

/* ── Formular (§4.7) ── */
.auth-form { margin-top: var(--s6); display: grid; gap: var(--s5); }
.field { display: grid; gap: var(--s2); }
.field label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink); }
.field input {
  width: 100%; min-height: var(--control-h); padding: 0 var(--s3);
  background: var(--input-bg); border: 1px solid var(--input-line); border-radius: var(--input-r);
  font-family: inherit; font-size: var(--fs-md); color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field input::placeholder { color: var(--ink-3); }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring-input); }
.hint { font-size: var(--fs-xs); color: var(--ink-3); }
/* Fehler am Feld: Rand --danger, Meldung darunter in --danger mit Alert-Icon. */
.field-error { display: flex; align-items: flex-start; gap: var(--s1); font-size: var(--fs-xs); color: var(--danger); }
.field-error .ico { margin-top: 1px; }
.auth-form .btn-primary { margin-top: var(--s1); }

/* ── Meldungen (§4.10): Ton auf Tönung, Icon 20 px, in der Karte ──
   Eine Form für alles, was die Seite meldet: Serverfehler und falsche Angaben
   (Gefahr), Limiter (Warnung), Erfolg (belegt). */
.notice {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid transparent;
  font-size: var(--fs-sm); line-height: var(--lh-body);
}
.notice .ico { margin-top: 1px; }
.notice.is-danger { background: var(--danger-tint); color: var(--danger); }
.notice.is-warn { background: var(--warn-tint); color: var(--warn); border-color: var(--warn-line); }
.notice.is-success { background: var(--success-tint); color: var(--success); }
/* Neutrale Auskunft (§4.10 Hinweis): ruhige Fläche, Icon in --ink-3. */
.notice.is-info { background: var(--notice-bg); border-color: var(--notice-line); color: var(--ink-2); }
.notice.is-info .ico { color: var(--ink-3); }
.card-banner { margin-top: var(--s5); }

/* ── Links unter dem Formular und Rechtszeile ── */
.card-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); font-size: var(--fs-sm); }
.reg-notice { margin-top: var(--s5); font-size: var(--fs-xs); color: var(--ink-3); }
.reg-notice a { color: var(--accent-ink); text-underline-offset: 3px; }
.page-legal { margin-top: var(--s5); text-align: center; font-size: var(--fs-xs); color: var(--ink-3); }
.page-legal a { color: var(--ink-3); text-decoration: none; border-radius: var(--r-sm); }
.page-legal a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── Rechtsseiten: Impressum, Datenschutz, AGB (ENG-183) ──
   Dieselbe Hülle wie Anmelden, darunter statt der Formularkarte EINE Karte
   mit dem Rechtstext in Lesebreite. Abschnittstitel in Satzschreibung (§2.2,
   bis ENG-183 standen sie in Versalien), Fließtext --fs-md mit --lh-body.
   Kästen im Text (AGB: Widerrufsbelehrung, Muster) sind ruhige Flächen in
   --surface-2, keine Karten in der Karte (§4.5). */
.recht-stage { justify-content: flex-start; }
.recht, .recht-hinweis { width: 100%; max-width: 680px; }
.recht {
  background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--card-r);
  box-shadow: var(--card-shadow); padding: var(--s8); color: var(--ink-2);
}
.recht h1, .recht h2 {
  font-family: var(--font-display); letter-spacing: var(--display-tracking);
  font-weight: var(--fw-strong); line-height: var(--lh-tight); color: var(--ink);
}
.recht h1 { font-size: var(--fs-2xl); }
.recht h2 { font-size: var(--fs-lg); margin-top: var(--s8); }
.recht .lead { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--ink-3); }
.recht p, .recht li { font-size: var(--fs-md); line-height: var(--lh-body); }
.recht h2 + *, .recht p + p, .recht p + ul, .recht ul + p { margin-top: var(--s3); }
.recht ul { padding-left: var(--s5); }
.recht li + li { margin-top: var(--s1); }
.recht strong { font-weight: var(--fw-strong); color: var(--ink); }
.recht code { font-size: var(--fs-sm); }
.recht a { color: var(--accent-ink); text-decoration: none; border-radius: var(--r-sm); }
.recht a:hover { text-decoration: underline; text-underline-offset: 3px; }
.recht .box {
  margin: var(--s3) 0; padding: var(--s4);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.recht-hinweis { margin-bottom: var(--s4); }
/* Der Hinweis spricht nur, wer Englisch gewählt hat: i18n-lite setzt lang. */
html:not([lang="en"]) .recht-hinweis { display: none; }

/* ── Mobil (≤ 760 px, §3.3) und Finger-Geräte ──
   Zwei Auslöser, eine Regelmenge: schmale Fenster und Geräte, die mit dem
   Finger bedient werden. Tablets sind breiter, brauchen aber dieselben
   Trefferflächen von 44 px (§2.3). */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  /* Zentriert würde die Karte bei eingeblendeter Tastatur oben abgeschnitten. */
  .auth-stage { justify-content: flex-start; padding: var(--s6) var(--s4) var(--s10); }
  .field input, .btn-primary { min-height: var(--touch-min); }
  /* Unter 16 px zoomt iOS Safari beim Fokus in das Feld hinein. Wie in der
     App (index.html, Mobilregel der Eingaben) ist 16 px hier der Riegel gegen
     diesen Zoom und kein Schriftmaß der Skala. */
  .field input { font-size: var(--fs-input-touch); }
  .iconbtn, #langToggle, .auth-top .back-link { min-width: var(--touch-min); min-height: var(--touch-min); }
  .card-links a, .auth-card .btn-text { display: inline-flex; align-items: center; min-height: var(--touch-min); }
  .page-legal a { display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--s2); }
  /* Die Marke ist auch ein Link: Trefferfläche per Mindestmaß, die Kachel bleibt 30 px. */
  .brand { min-width: var(--touch-min); min-height: var(--touch-min); }
}
@media (max-width: 760px) {
  .auth-top { gap: var(--s2); }
  /* Die Kopfzeile zeigt mobil nur Marken-Kachel und Icon-Knöpfe (§3.1): der
     Rückweg bleibt, sein Text steht nur noch für Screenreader da. */
  .brand-word { display: none; }
  .auth-top .back-link { padding: 0; }
  .auth-top .back-link .back-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .auth-card, .recht { padding: var(--s6) var(--s5); }
}