/* ==========================================================================
   Auth-Seiten — Anmelden, Registrieren, Passwort zurücksetzen.
   Baut auf app.css auf (Button, Input, Field, Toast) und ergänzt nur das
   Layout der zentrierten Karte.
   ========================================================================== */

body.auth {
  overflow: auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  background:
    radial-gradient(60rem 30rem at 50% -12rem,
      color-mix(in oklab, var(--foreground) 6%, transparent), transparent 70%),
    var(--background);
}

/* ---------------------------- Kopf ---------------------------- */

.auth-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
}

.auth-top .brand-mark { --logo-bg: var(--background); }
.auth-top .brand-mark svg { width: 1.25rem; height: 1.25rem; }

/* ---------------------------- Karte ---------------------------- */

.auth-main { display: grid; place-items: center; padding: 1rem 1.25rem 2rem; }

.auth-card {
  width: 100%;
  max-width: 24rem;
  /* Grund, Rand und Radius: app.css, Abschnitt „Karte". */
  padding: 2rem;
  animation: card-in .22s cubic-bezier(.16, 1, .3, 1);
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

.auth-mark {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto 1rem;
  color: var(--foreground);
  --logo-bg: var(--card);
}
.auth-mark svg { width: 2.75rem; height: 2.75rem; }

.auth-head { text-align: center; margin-bottom: 1.5rem; }
.auth-head h1 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; }
.auth-head p { font-size: 0.8125rem; color: var(--muted-foreground); margin-top: 0.375rem; line-height: 1.55; }

.auth-form { display: grid; gap: 1.125rem; }
.auth-form .field + .field { margin-top: 0; }

.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.label-row .label { margin-bottom: 0.5rem; }

.link {
  color: var(--foreground);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.link:hover { text-decoration: underline; text-underline-offset: 2px; }
.link-muted { color: var(--muted-foreground); font-weight: 400; font-size: 0.8125rem; }
.link-muted:hover { color: var(--foreground); }

/* -------------------- Eingabe mit Icon / Aktion -------------------- */

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input-icon {
  position: absolute; left: 0.9375rem; display: grid; place-items: center;
  color: var(--muted-foreground); pointer-events: none;
}
.input-wrap .input-icon svg { width: 0.9375rem; height: 0.9375rem; }
/* Icon und Aktion rücken von der Rundung des Feldes weg — am Rand eines
   runden Feldes säßen sie sonst in der Kurve. */
.input-wrap .input { padding-left: 2.5rem; }
.input-wrap .input-action {
  position: absolute; right: 0.375rem;
  width: 1.75rem; height: 1.75rem; color: var(--muted-foreground);
}
.input-wrap .input-action svg { width: 0.9375rem; height: 0.9375rem; }
.input-wrap:has(.input-action) .input { padding-right: 2.5rem; }

.input-invalid, .input-invalid:focus { border-color: var(--destructive); }
.input-invalid:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 30%, transparent); }

.error {
  display: flex; gap: 0.375rem;
  font-size: 0.75rem; color: var(--destructive); margin-top: 0.4375rem;
}

/* ---------------------------- Checkbox ---------------------------- */

.check { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; }
.check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 1rem; height: 1rem; flex: none; margin-top: 0.1875rem;
  /* Fest 5 px, nicht --radius-sm: Seit der auf 8 px gewachsen ist, war das
     16-px-Kästchen ein Kreis — und ein runder Haken liest sich als Radioknopf. */
  border: 1px solid var(--input); border-radius: 0.3125rem;
  background: var(--background); box-shadow: var(--shadow-xs);
  transition: background-color .15s, border-color .15s;
}
/* Haken als data-URI, weil ein Pseudo-Element kein <svg> aus js/icons.js
   aufnehmen kann. Pfad ist derselbe Hugeicons-"check" wie dort — nichts extern. */
.check input[type="checkbox"]:checked {
  background: var(--primary); border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13.2592L7.58583 15.9568C8.2525 16.6523 8.58583 17 9.00004 17C9.41425 17 9.74759 16.6523 10.4143 15.9568L19 7'/%3E%3C/svg%3E");
  background-size: 0.75rem; background-position: center; background-repeat: no-repeat;
}
.dark .check input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171717' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13.2592L7.58583 15.9568C8.2525 16.6523 8.58583 17 9.00004 17C9.41425 17 9.74759 16.6523 10.4143 15.9568L19 7'/%3E%3C/svg%3E");
}
.check label { cursor: pointer; line-height: 1.5; }

/* Hier stand einmal `.check-row` (space-between, gap: 1rem) — auf den
   Auth-Seiten von nichts benutzt, aber schaedlich: auth.css haengt in JEDER
   Seite hinter app.css, und dort heisst `.check-row` die Kaestchen-Zeile mit
   Beschriftung daneben. Gleiche Spezifitaet, spaetere Datei — also gewann
   diese Regel, und Kaestchen und Text standen quer ueber die ganze Karte
   auseinandergezogen (zuletzt gesehen in support.html). Neue Klassen fuer die
   Auth-Seiten deshalb mit `auth-` davor oder unter `.check` verschachtelt,
   nie auf einem Namen, den app.css schon fuehrt. */

/* ------------------------- Passwortstärke ------------------------- */

.strength { margin-top: 0.5rem; display: flex; align-items: center; gap: 0.625rem; }
.strength-bar {
  flex: 1; height: 0.25rem; border-radius: 999px;
  background: var(--secondary); overflow: hidden;
}
.strength-bar span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--destructive); transition: width .2s, background-color .2s;
}
.strength-label { font-size: 0.6875rem; color: var(--muted-foreground); min-width: 3.25rem; text-align: right; }
.strength[data-score="2"] .strength-bar span { background: var(--warning); }
.strength[data-score="3"] .strength-bar span,
.strength[data-score="4"] .strength-bar span { background: oklch(0.62 0.16 150); }

/* ---------------------------- Trenner + Fuß ---------------------------- */

.auth-sep {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.25rem 0 1rem;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted-foreground);
}
.auth-sep::before, .auth-sep::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

.auth-alt { text-align: center; font-size: 0.8125rem; color: var(--muted-foreground); }

/* Der Rechtshinweis unter dem Absenden-Knopf: kleiner als der Rest des
   Formulars, damit er nicht mit den Feldern konkurriert. */
.auth-legal {
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.auth-foot {
  padding: 0 1.25rem 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.auth-foot a { color: inherit; }

/* ---------------------------- Hinweisboxen ---------------------------- */

.notice {
  display: flex; gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--muted);
  font-size: 0.75rem; line-height: 1.55; color: var(--muted-foreground);
}
.notice svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.0625rem; }
.notice strong { color: var(--foreground); font-weight: 500; }
.notice-warning {
  background: color-mix(in oklab, var(--warning) 12%, transparent);
  border-color: color-mix(in oklab, var(--warning) 35%, var(--border));
  color: var(--warning-foreground);
}
.notice-warning strong { color: inherit; }
.notice-warning svg { color: var(--warning); }

.sent { display: grid; gap: 1rem; }
.sent-icon {
  display: grid; place-items: center; justify-self: center;
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  background: var(--muted); color: var(--foreground);
}
.sent-icon svg { width: 1.25rem; height: 1.25rem; }
.sent p { font-size: 0.8125rem; color: var(--muted-foreground); text-align: center; line-height: 1.6; }
.sent p strong { color: var(--foreground); font-weight: 500; }

.dev-link { display: grid; gap: 0.5rem; }
.dev-link code {
  display: block; padding: 0.5rem 0.625rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--background);
  font-family: var(--font-mono); font-size: 0.6875rem;
  overflow-wrap: anywhere; color: var(--muted-foreground);
}

/* ---------------------------- Konto in der Sidebar ---------------------------- */

.account {
  display: flex; align-items: center; gap: 0.5rem;
  height: 3rem; padding: 0.5rem;
  min-width: 0; border-radius: var(--radius-md);
  cursor: pointer;
}
.account:hover, .account:focus-visible { background: var(--accent); }
.account:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }
.avatar {
  display: grid; place-items: center; flex: none;
  width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--primary); color: var(--primary-foreground);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
}
/* account-name/-mail sind <span> (inline) — ohne display:flex liefen sie
   nebeneinander statt untereinander. */
/* leading-tight wie in shadcns NavUser: 13-px-Name und 12-px-Adresse
   passen mit der normalen Zeilenhöhe 1.5 nicht in die h-12-Zeile (37,5 px
   Text gegen 32 px Innenraum) — mit 1.25 sind es 31,25 px.
   Der Name steht auf 13 px/500 wie die Knöpfe der Navigation darüber
   (.nav-item in css/app.css); mit 14 px/600 war er das Lauteste in der
   Leiste. */
.account-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.account-name {
  display: block;
  font-size: 0.8125rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-mail {
  display: block;
  font-size: 0.75rem; color: var(--muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account .btn { width: 1.25rem; height: 1.25rem; flex: none; color: var(--muted-foreground); }
.account .btn svg { width: 1rem; height: 1rem; }
.account .btn:hover {
  background: var(--background); color: var(--destructive);
  box-shadow: 0 0 0 1px var(--border);
}

/* Untermenü der Konto-Zeile: Statistics · Einstellungen · Abmelden.

   Es klappt nach OBEN auf — die Zeile steht am unteren Rand, nach unten wäre
   kein Platz. Bezugspunkt ist der Fuß der Leiste, deshalb liegt das Menü im
   Markup vor der Zeile und wird hier über sie gelegt. */
.sidebar-foot { position: relative; }
.account-caret {
  display: flex; flex: none; color: var(--muted-foreground);
  transition: transform .18s ease;
}
.account-caret svg { width: 1rem; height: 1rem; }
.sidebar-foot.open .account { background: var(--accent); }
.sidebar-foot.open .account-caret { transform: rotate(180deg); }

.account-menu {
  position: absolute; z-index: 20;
  bottom: calc(100% - 0.375rem); left: 0.5rem; right: 0.5rem;
  padding: 0.25rem;
  /* Dieselben 0.25rem wie in .menu-below. Die Eintraege standen hier frueher
     dicht an dicht — bei zwei Zeilen ging das durch, bei vieren (mit Admin
     fuenf) lief die Liste zu einem Block zusammen. */
  display: grid; gap: 0.25rem;
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: dialog-in .14s cubic-bezier(.16, 1, .3, 1);
}
/* [hidden] verliert sonst gegen die Positionierung. */
.account-menu[hidden] { display: none; }
/* Der Abstand um die Trennlinie kommt jetzt aus dem gap darüber — bliebe der
   eigene Rand stehen, stünde vor „Abmelden“ doppelt so viel Luft wie zwischen
   den Einträgen darüber. */
.account-menu .menu-sep { margin-block: 0; }

/* Statistics ist ein <a> — der Eintrag soll trotzdem wie die Knöpfe aussehen. */
.account-menu .menu-item { color: inherit; text-decoration: none; }
.account-menu .menu-item:focus-visible {
  outline: none; background: var(--accent); color: var(--accent-foreground);
}

/* ---------------------------- Responsive ---------------------------- */

@media (max-width: 480px) {
  .auth-card { padding: 1.5rem 1.25rem; }
  .auth-main { padding: 0.5rem 0.875rem 1.5rem; }
}

/* ---------------------------- Rechtstexte ---------------------------- */

/* Impressum, Datenschutz und AGB stehen nur auf der Website; die App
   verlinkt dorthin. Hier bleiben nur die Verweise in der Fusszeile der
   Anmeldung. */
.legal-links {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 0.5rem;
}

/* ------------------------ Kuendigen und Widerrufen ------------------------ */

/* kuendigen.html und widerrufen.html (§ 312k, § 356a BGB). Nach dem Absenden
   steht die Erklaerung als .settings-rows in der Karte, darunter in einem
   Satz, was jetzt geschieht. Siehe DESIGN.md, „Kuendigen und Widerrufen“. */
#stepDone .settings-rows { margin-bottom: 1rem; }
.vertrag-result {
  font-size: 0.8125rem; line-height: 1.6; color: var(--muted-foreground);
  margin-bottom: 1.25rem;
}

/* Die Bestaetigung muss sich speichern lassen: gedruckt bleibt nur die
   Karte, ohne Kopf, Fuss und Knoepfe. */
@media print {
  .auth-top, .auth-foot, .toaster, .no-print { display: none !important; }
  .auth-card { background: none; animation: none; }
}