/* Gemeinsames Aussehen der statischen Seiten – Impressum, Datenschutz,
   Konto löschen, auth-action.
   ------------------------------------------------------------------------
   Diese Seiten müssen **ohne Flutter** laden (Rechtstexte auch dann, wenn das
   Bundle nicht kommt), tragen aber dieselben Token wie die App. Vorher stand in
   jeder Datei eine eigene Kopie von rund fünfzig Zeilen CSS; sie liefen
   auseinander, sobald man eine anfasste.

   Die Werte sind aus `lib/core/theme/app_theme.dart` und
   `lib/core/theme/tokens.dart` übernommen. **Wer die Token dort ändert, muss sie
   hier mitziehen** – es gibt keinen Build-Schritt, der das erzwingt.

   Die Schriften kommen aus dem Flutter-Build (`/assets/assets/fonts/…`) und sind
   auf die benutzten Zeichen verkleinert. Geprüft: alle deutschen Zeichen plus
   `§ · – „ “ € ©` sind im Subset. Wer sie neu verkleinert, muss das nachprüfen –
   sonst fehlt auf diesen Seiten ein Paragraphenzeichen. Systemschriften stehen
   als Rückfall dahinter, damit die Seite auch ohne den Build lesbar bleibt. */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/assets/fonts/IBMPlexSans-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/assets/fonts/IBMPlexSans-SemiBold.ttf') format('truetype');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/assets/fonts/IBMPlexSans-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/assets/fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}

:root {
  --brand: #0f7a74;
  --brand-quiet: #e2f1ef;
  --on-brand: #fbfcfc;
  --bg: #f2f6f5;
  --surface: #fbfcfc;
  --text: #151e1d;
  --muted: #4f5b5a;
  --border: #e6eceb;
  --danger: #b93a2c;
  --schrift: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             Roboto, Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #2fb3a8;
    --brand-quiet: #12312e;
    --on-brand: #04211f;
    --bg: #0e1414;
    --surface: #151e1d;
    --text: #e9efee;
    --muted: #93a3a1;
    --border: #26302f;
    --danger: #e4705e;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 720 px statt der 1120 px der App: Das hier ist Fließtext, und eine Zeile über
   etwa 75 Zeichen verliert man beim Zurückspringen. */
.wrap { max-width: 720px; margin: 0 auto; padding: 24px 20px 72px; }

/* ── Kopf ──────────────────────────────────────────────────────────────── */

header.seite {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 20px; margin-bottom: 32px;
  border-bottom: 1px solid var(--border);
}

/* Das Zeichen: Ziffernfenster mit Punkt, dieselbe Geometrie wie
   `lib/core/ui/brand.dart` und `scripts/app_symbole.py`. Wer es dort ändert,
   muss es hier mitziehen. */
header.seite svg { display: block; height: 26px; width: auto; flex-shrink: 0; }

.wortmarke {
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.63px;   /* fontSize × −0,03, wie VerbrWortmarke */
  line-height: 1;
}

/* Der Punkt der Wortmarke sitzt auf der Grundlinie, nicht auf Versalhöhe:
   `inline-block` mit `vertical-align: baseline` stellt seine **Unterkante** auf
   die Grundlinie. In der App war genau das der Fehler – dort saß er anfangs oben
   (siehe Kommentar in brand.dart). */
.wortmarke i {
  display: inline-block;
  width: 0.235em; height: 0.235em;
  margin-left: 0.094em;
  border-radius: 50%;
  background: var(--brand);
  vertical-align: baseline;
  font-style: normal;
}

header.seite .zurApp {
  margin-left: auto;
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  color: var(--brand);
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
header.seite .zurApp:hover { background: var(--brand-quiet); }

/* ── Text ──────────────────────────────────────────────────────────────── */

h1 {
  font-size: 30px; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 0 0 8px;
}

/* Drei Stufen, absteigend: 30 → 19 → 15. Der naheliegende Griff war, `h2` wie
   `SectionLabel` der App zu setzen – 12 px, gesperrt, in Versalien. Auf diesen
   Seiten wäre das falsch: Die Datenschutzerklärung hat unter ihren Abschnitten
   noch `h3`, und ein 17-px-`h3` unter einer 12-px-Überschrift stellt die
   Hierarchie auf den Kopf. In der App gibt es das Problem nicht, weil
   `SectionLabel` über Karten steht und keine Unterüberschriften hat. */
h2 {
  font-size: 19px; font-weight: 600; line-height: 1.35;
  letter-spacing: -0.2px;
  color: var(--brand);
  margin: 40px 0 8px;
}
h3 { font-size: 15px; font-weight: 600; margin: 24px 0 4px; }

p, li { margin: 8px 0; }
ul { padding-left: 22px; }
li { margin: 4px 0; }

.lead { font-size: 17px; color: var(--muted); margin: 0 0 8px; }
.muted { color: var(--muted); font-size: 14px; }
/* Die Menü-Punkte im Fließtext: an der Schriftgröße bemessen und auf der
   Grundlinie ausgerichtet, damit sie in der Zeile nicht springen. */
.menuepunkte { display: inline-block; }
.menuepunkte.senkrecht { height: 1em; width: 0.27em; vertical-align: -0.14em; }
.menuepunkte.waagerecht { width: 1em; height: 0.27em; vertical-align: 0.18em; }

.mono, code { font-family: var(--mono); font-size: 0.92em; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ── Karte ─────────────────────────────────────────────────────────────── */

/* Umriss statt Schatten, wie in der App: eine Haarlinie, Radius 6. */
.karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 16px 0;
}
.karte > :first-child { margin-top: 0; }
.karte > :last-child { margin-bottom: 0; }

.karte.warnung { border-color: var(--danger); }
.karte.warnung h3 { color: var(--danger); }

/* ── Knopf ─────────────────────────────────────────────────────────────── */

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;                     /* Touch.min der App */
  padding: 10px 20px;
  border: none; border-radius: 6px;
  /* Die Schrift auf dem Knopf wechselt mit dem Grund: helles Teal im dunklen
     Modus braucht dunkle Schrift. Dunkel auf dem hellen Teal700 käme auf 3,26
     und fiele unter AA – gemessen, nicht geschätzt. */
  background: var(--brand); color: var(--on-brand);
  font-family: var(--schrift); font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.knopf:hover { filter: brightness(1.08); }
.knopf.gefahr { background: var(--danger); color: var(--on-brand); }
.knopf[disabled] { opacity: 0.5; cursor: default; }

.knopf.leer {
  background: transparent; color: var(--brand);
  border: 1px solid var(--border);
}

/* ── Formularfeld ──────────────────────────────────────────────────────── */

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }

input[type=email], input[type=password], input[type=text] {
  width: 100%; min-height: 44px;
  padding: 10px 12px;
  font-family: var(--schrift); font-size: 16px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px;
}
input:focus-visible {
  outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand);
}

/* ── Fuß ───────────────────────────────────────────────────────────────── */

footer.seite {
  margin-top: 56px; padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 14px; color: var(--muted);
}
footer.seite a { margin-right: 4px; }

@media (max-width: 480px) {
  h1 { font-size: 26px; }
  .wrap { padding: 20px 16px 56px; }
}