@import url("/brand/palette.css");
:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--privymail-logo);background:var(--privymail-frost);font-size:16px}
*{box-sizing:border-box}body{margin:0}header{max-width:72rem;padding:1.5rem 2rem;margin:auto;display:flex;align-items:center;justify-content:space-between}header img{width:11rem;height:2.75rem}a{color:var(--privymail-action);text-underline-offset:.2em}main{max-width:48rem;margin:2rem auto 4rem;padding:0 1.5rem}.eyebrow{color:var(--privymail-crest);font-weight:650;letter-spacing:.08em;font-size:.8rem;text-transform:uppercase}h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12;margin:.75rem 0 1rem}h2{font-size:1.35rem}.intro{color:var(--privymail-steel);max-width:38rem;line-height:1.6}.card{background:white;border:1px solid var(--privymail-bone);border-radius:1rem;padding:2rem;margin-top:1.5rem;box-shadow:0 12px 40px #022c7008}label{display:block;font-weight:600;margin-top:1.2rem}input,select{display:block;width:100%;font:inherit;padding:.8rem .9rem;border:1px solid var(--privymail-mist);border-radius:.55rem;margin-top:.4rem;color:inherit;background:white}button{font:inherit;font-weight:650;padding:.75rem 1rem;border:0;border-radius:.55rem;background:var(--privymail-action);color:white;cursor:pointer;margin-top:1.2rem}button.secondary{background:var(--privymail-vapor);color:var(--privymail-logo)}button:disabled{opacity:.55;cursor:wait}:focus-visible{outline:3px solid var(--privymail-glow);outline-offset:3px}.note{font-size:.9rem;line-height:1.5;color:var(--privymail-steel)}#status{padding:1rem 0;line-height:1.5;min-height:3.5rem}#sessions{list-style:none;padding:0}#sessions li{border-top:1px solid var(--privymail-bone);padding:1rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem}#sessions p{font-size:.85rem;color:var(--privymail-steel);overflow-wrap:anywhere}#sessions button{margin:0;white-space:nowrap}footer{font-size:.85rem;display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:2rem}.notice{border-left:3px solid var(--privymail-blue);padding-left:1rem}[hidden]{display:none!important}@media(max-width:35rem){header{padding:1rem 1.5rem}.card{padding:1.25rem}#sessions li{align-items:flex-start;flex-direction:column}}

pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.95rem;line-height:1.8}#totp-uri{overflow-wrap:anywhere}.check{display:flex;gap:.75rem;align-items:flex-start}.check input{width:auto;margin:0}#app-passwords,#factors{padding:0;list-style:none}#app-passwords li,#factors li{display:flex;gap:1rem;align-items:center;justify-content:space-between;overflow-wrap:anywhere}#app-passwords li button,#factors li button{flex-shrink:0}
/* privymail.eu Konto (Free-Live-Profil, ADR-0280): Darstellung nach Designsystem S0, Entwurf B "Werkzeug, dicht"
   (docs/design/varianten/S0/B/tokens.css) und nach dem gewählten Zugangsentwurf N1 B "Alles auf einer Seite"
   (docs/design/varianten/N1/gewaehlt/), für die Konto-Unterseiten nach N7 bis N9 A. Bericht:
   docs/reports/2026-11-08-account-designsystem.md.

   Der Generator hängt diese Datei an die unveränderte static/account.css an (Ausgabe account.css, pages.py `live_assets`).
   Die Regeln stehen deshalb nach denen der Altdatei und überschreiben sie bei gleicher Spezifität. Nur Darstellung:
   keine Änderung an Markup, Skript, Worker, Routen oder Texten. Farben nur als Palettenvariablen (brand/palette.css).

   Bewusste Abweichungen vom Entwurf, jeweils mit Grund:
   - Keine Webschriften: Die CSP der Kontoseiten (default-src 'none', kein font-src) erlaubt sie nicht; es gilt die Systemschrift.
     Die Überschrift steht deshalb nicht in EB Garamond.
   - Keine Statusfarben für Fehler, Erfolg und Warnung: Das Profil kennt nur Palettenfarben (Test `live_css_only_adds_rules_and_uses_palette_variables`),
     und die Statuszeile (#status) trägt im Markup keine Zustandsangabe. Sie ist eine ruhige Hinweiszeile mit Zeichen.
   - Bedienziele 44 Pixel (Projektstandard, ANNAHME, vom Betreiber nicht bestätigt; S0-B selbst nennt 32).
   - Schrift im Fließtext 15 Pixel (N1 darf ruhiger sein als S0-B, ANNAHME aus der N1-Beschreibung), Eingabefelder 16 Pixel.
   - Kein Umschalter für Hell und Dunkel: Das Farbschema folgt prefers-color-scheme.
   - Im Dunkeln steht die Wortmarke (nur als dunkle Fassung ausgeliefert) auf heller Fläche. */

/* ---------- Tokens (S0-B, Palettenvariablen) ---------- */
:root {
  --f-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --t-xs: .75rem; --t-s: .8125rem; --t-base: .9375rem; --t-lg: 1.0625rem; --t-xl: 1.25rem; --t-2xl: 1.75rem;
  --s-2: 4px; --s-3: 8px; --s-4: 12px; --s-5: 16px; --s-6: 24px; --s-7: 32px; --s-8: 48px;
  --r-s: 3px; --r-m: 5px; --r-l: 8px;
  --target: 44px;
  color-scheme: light;
  --c-bg: var(--privymail-white); --c-surface: var(--privymail-frost); --c-surface-2: var(--privymail-vapor); --c-app: var(--privymail-vapor);
  --c-text: var(--privymail-carbon); --c-text-2: var(--privymail-slate); --c-text-3: var(--privymail-steel); --c-heading: var(--privymail-carbon);
  --c-border: var(--privymail-bone); --c-border-strong: var(--privymail-fog);
  --c-accent: var(--privymail-action); --c-accent-hover: var(--privymail-crest); --c-on-accent: var(--privymail-white);
  --c-link: var(--privymail-crest); --c-focus: var(--privymail-crest);
  --c-info: var(--privymail-crest); --c-info-bg: var(--privymail-frost);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --c-bg: var(--privymail-carbon); --c-surface: var(--privymail-slate); --c-surface-2: var(--privymail-slate); --c-app: var(--privymail-logo);
    --c-text: var(--privymail-white); --c-text-2: var(--privymail-bone); --c-text-3: var(--privymail-mist); --c-heading: var(--privymail-white);
    --c-border: var(--privymail-slate); --c-border-strong: var(--privymail-mist);
    /* Befund aus N1: Weiß auf der hellen Hover-Farbe hat nur 3,64:1; sie bleibt auch im Dunkeln das tiefe Blau. */
    --c-accent: var(--privymail-action); --c-accent-hover: var(--privymail-crest); --c-on-accent: var(--privymail-white);
    --c-link: var(--privymail-glow); --c-focus: var(--privymail-glow);
    --c-info: var(--privymail-glow); --c-info-bg: var(--privymail-logo);
  }
}

/* ---------- Grundlagen ---------- */
:root { background: var(--c-app); color: var(--c-text-2); font-size: 16px; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--c-app); color: var(--c-text-2); font: 400 var(--t-base)/1.5 var(--f-text); font-variant-numeric: tabular-nums; }
a { color: var(--c-link); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .15em; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
[hidden] { display: none !important; }
code, pre { font-family: var(--f-mono); }
code { font-size: .95em; background: var(--c-surface-2); color: var(--c-text); padding: 0 .3em; border-radius: var(--r-s); }
strong { color: var(--c-text); }
p { margin: 0 0 var(--s-3); max-width: 70ch; }

/* ---------- Kopfzeile ---------- */
body > header {
  max-width: none; margin: 0; padding: var(--s-3) var(--s-6); background: var(--c-bg); border-bottom: 1px solid var(--c-border);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5);
}
body > header > a:first-child { display: inline-flex; align-items: center; min-height: var(--target); border-radius: var(--r-m); }
body > header img { width: 140px; height: auto; max-width: 100%; display: block; }
body > header nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
body > header nav a {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--target); min-width: var(--target);
  padding: 0 var(--s-3); border-radius: var(--r-m); font-weight: 500;
}
/* Der Weg zum Dashboard ist die Hauptaktion nach der Anmeldung. */
body > header nav #free-dashboard {
  padding: 0 var(--s-5); border: 1px solid var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); font-weight: 600; text-decoration: none;
}
body > header nav #free-dashboard:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
body > header nav #free-dashboard[aria-disabled="true"] {
  background: var(--c-surface-2); color: var(--c-text-3); border-color: var(--c-border); cursor: not-allowed;
}
@media (prefers-color-scheme: dark) {
  /* nur die dunkle Wortmarke ist im Paket: im Dunkeln auf heller Fläche */
  body > header > a:first-child { background: var(--privymail-white); padding: 0 var(--s-3); }
}

/* ---------- Seitenrahmen: eine Seite, links die Aufgaben, rechts der Tarif (N1 B) ---------- */
main {
  max-width: 72rem; margin: 0 auto; padding: var(--s-6) var(--s-6) var(--s-8);
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
}
main > * { grid-column: 1; min-width: 0; }
main > .eyebrow { margin: 0 0 var(--s-2); color: var(--c-text-3); font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
main > h1 { margin: 0 0 var(--s-3); font: 600 var(--t-2xl)/1.15 var(--f-text); color: var(--c-heading); overflow-wrap: anywhere; }
main > .intro { margin: 0 0 var(--s-5); color: var(--c-text-2); font-size: var(--t-lg); line-height: 1.5; max-width: 42rem; }
/* Einmalanzeige der Codes: sie erscheint nur einmal und steht deshalb gleich unter der Statuszeile (nur visuelle Reihenfolge, nicht die des Markups). */
main > .eyebrow, main > h1, main > .intro { order: -4; }
#status, #registration-closed, #terms-stale, noscript { order: -3; }
#one-time, #free-after-setup { order: -1; }
/* Auf schmalen Fenstern kommen Anmeldung und Registrierung vor dem Tarif. */
#free-tariff { order: 2; }
main > footer { order: 3; }
@media (min-width: 64rem) {
  main { grid-template-columns: minmax(0, 1fr) 22rem; column-gap: var(--s-6); grid-template-rows: repeat(24, auto); }
  #free-tariff { order: 0; grid-column: 2; grid-row: 1 / 24; }
  main > footer { grid-column: 1 / -1; grid-row: 24; }
}
@media (min-width: 64rem) and (min-height: 46rem) { #free-tariff { position: sticky; top: var(--s-5); } }

/* ---------- Statuszeile, Hinweise ---------- */
#status {
  margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); min-height: 3rem; display: flex; align-items: center; gap: var(--s-3);
  background: var(--c-bg); border: 1px solid var(--c-border); border-left: 4px solid var(--c-info); border-radius: var(--r-m);
  color: var(--c-text); font-size: var(--t-s); line-height: 1.45; max-width: none;
}
#status::before {
  content: "i"; content: "i" / ""; flex: none; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  border: 1.5px solid var(--c-info); color: var(--c-info); font: 700 .75rem/1 var(--f-text);
}
.note { margin: var(--s-2) 0 0; font-size: var(--t-s); line-height: 1.45; color: var(--c-text-3); }
p.note.notice, noscript p {
  margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); max-width: none; background: var(--c-info-bg); color: var(--c-text);
  border: 1px solid var(--c-border); border-left: 4px solid var(--c-info); border-radius: var(--r-m); font-size: var(--t-s);
}
#registration-closed, #terms-stale { line-height: 1.5; }
#registration-closed::before, #terms-stale::before { content: "△ "; content: "△ " / ""; color: var(--c-info); font-weight: 700; }
#terms-stale a { display: inline-flex; align-items: center; min-height: var(--target); }

/* ---------- Karten (Kopfband wie in S0-B) ---------- */
.card {
  margin: 0 0 var(--s-4); padding: 0 var(--s-4) var(--s-4); background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-l); box-shadow: none; min-width: 0; overflow-wrap: anywhere;
}
.card > h2, .card > h3 {
  margin: 0 calc(-1 * var(--s-4)) var(--s-4); padding: var(--s-3) var(--s-4); min-height: var(--target); display: flex; align-items: center;
  border-bottom: 1px solid var(--c-border); font: 650 var(--t-xs)/1.3 var(--f-text); letter-spacing: .06em; text-transform: uppercase; color: var(--c-heading);
}
#security { margin: var(--s-6) 0 0; }
#security > h2 { margin: 0 0 var(--s-3); font: 600 var(--t-xl)/1.2 var(--f-text); color: var(--c-heading); }
#security > .note { margin-bottom: var(--s-3); }
#security > button { margin-bottom: var(--s-4); }
.note + .facts { margin-top: var(--s-3); }

/* ---------- Tarif und Mailprogramm: Zeilenliste statt Aufzählung ---------- */
.facts { list-style: none; margin: 0; padding: 0; line-height: 1.5; }
.facts li { margin: 0; padding: var(--s-3) 0; border-top: 1px solid var(--c-border); }
.facts li:first-child { border-top: 0; padding-top: 0; }
.facts li + li { margin-top: 0; }

/* ---------- Formulare ---------- */
label { display: block; margin: var(--s-4) 0 var(--s-2); font-size: var(--t-s); font-weight: 600; color: var(--c-text); }
input, select {
  display: block; width: 100%; min-height: var(--target); margin: 0; padding: 0 var(--s-3);
  font: inherit; font-size: 1rem; color: var(--c-text); background: var(--c-bg);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-m);
}
input:disabled, select:disabled { background: var(--c-surface-2); color: var(--c-text-3); border-color: var(--c-border); cursor: not-allowed; }
input[type="checkbox"] { min-height: 0; padding: 0; accent-color: var(--c-accent); }
.check { display: flex; gap: var(--s-3); align-items: flex-start; min-height: var(--target); margin: var(--s-4) 0 0; padding: var(--s-2) 0; font-weight: 400; color: var(--c-text); }
.check input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; }
.address-field { display: flex; align-items: stretch; margin: 0; }
.address-field input { flex: 1 1 auto; min-width: 0; width: 100%; margin: 0; border-radius: var(--r-m) 0 0 var(--r-m); }
.address-domain {
  display: inline-flex; align-items: center; padding: 0 var(--s-4); white-space: nowrap; font-weight: 650; font-size: var(--t-s);
  background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border-strong); border-left: 0; border-radius: 0 var(--r-m) var(--r-m) 0;
}
pre { margin: 0 0 var(--s-3); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-lg); line-height: 1.7; color: var(--c-text); }

/* ---------- Schaltflächen ---------- */
button {
  font: 600 var(--t-s)/1.2 var(--f-text); min-height: var(--target); padding: 0 var(--s-5); margin: var(--s-4) var(--s-3) 0 0;
  border: 1px solid var(--c-accent); border-radius: var(--r-m); background: var(--c-accent); color: var(--c-on-accent);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-align: center;
}
button:hover:not(:disabled) { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
/* Nebenaktionen (Typ button) sind zurückhaltend; Bestätigen und Absenden tragen die Hauptfarbe. */
button.secondary, button[type="button"]:not(#codes-ack) { background: var(--c-bg); color: var(--c-text); border-color: var(--c-border-strong); }
button.secondary:hover:not(:disabled), button[type="button"]:not(#codes-ack):hover:not(:disabled) { background: var(--c-surface-2); border-color: var(--c-border-strong); }
button:disabled { opacity: 1; background: var(--c-surface-2); color: var(--c-text-3); border-color: var(--c-border); cursor: not-allowed; }
#register > button[type="submit"] { margin-top: var(--s-4); min-width: 14rem; }

/* ---------- Registrierung (N1 B: drei nummerierte Abschnitte) ---------- */
.step { margin: 0; padding: var(--s-4) 0 var(--s-3); }
.step + .step { border-top: 1px solid var(--c-border); }
.step-title { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-2); font-size: var(--t-lg); font-weight: 650; color: var(--c-heading); }
.step-no {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--c-surface-2); color: var(--c-text); font-size: var(--t-s); font-weight: 700;
}
.step label:first-of-type { margin-top: var(--s-3); }
.callout {
  margin: var(--s-3) 0 var(--s-4); padding: var(--s-4); background: var(--c-info-bg); color: var(--c-text);
  border: 1px solid var(--c-border); border-left: 4px solid var(--c-info); border-radius: var(--r-m);
}
.callout h3 { margin: 0 0 var(--s-3); font: 650 var(--t-base)/1.3 var(--f-text); color: var(--c-heading); }
.callout ul { margin: 0; padding-left: 1.2em; line-height: 1.5; }
.callout li { margin: var(--s-2) 0; }
.callout li + li { margin-top: var(--s-3); }
.consent { margin-top: var(--s-4); }
.consent .check { margin-top: 0; }
.consent .check input { flex-shrink: 0; margin-top: .2rem; }
.consent .check a { overflow-wrap: anywhere; }
.consent .note { margin: var(--s-2) 0 0 calc(22px + var(--s-3)); }
.resume { margin-top: var(--s-4); border-top: 1px solid var(--c-border); }
.resume summary { display: flex; align-items: center; gap: var(--s-3); min-height: var(--target); cursor: pointer; line-height: 1.4; color: var(--c-text); font-weight: 500; list-style: none; }
.resume summary::-webkit-details-marker { display: none; }
.resume summary::before { content: "\25B8"; content: "\25B8" / ""; flex: none; color: var(--c-text-3); }
.resume[open] summary::before { content: "\25BE"; content: "\25BE" / ""; }
.resume button { margin-top: var(--s-2); }

/* ---------- Angemeldet: Sitzungen, App-Passwörter, Faktoren (N7 bis N9 A) ---------- */
#sessions, #app-passwords, #factors { list-style: none; margin: 0 0 var(--s-3); padding: 0; }
#sessions:empty, #app-passwords:empty, #factors:empty { display: none; }
#sessions li, #app-passwords li, #factors li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4);
  margin: 0; padding: var(--s-3) 0; border-top: 1px solid var(--c-border); overflow-wrap: anywhere;
}
#sessions li:first-child, #app-passwords li:first-child, #factors li:first-child { border-top: 0; }
#sessions li > div, #app-passwords li > span, #factors li > span { flex: 1 1 12rem; min-width: 0; }
#sessions strong { display: block; }
#sessions p { margin: var(--s-2) 0 0; font-size: var(--t-s); color: var(--c-text-3); overflow-wrap: anywhere; }
#sessions button, #app-passwords li button, #factors li button { margin: 0; flex: none; }
#address-label { margin: 0 0 var(--s-3); color: var(--c-text); font-weight: 600; overflow-wrap: anywhere; }
#one-time { border: 2px solid var(--c-text); }
#one-time-title { text-transform: none; font-size: var(--t-base); letter-spacing: 0; }
#one-time-value { padding: var(--s-4); background: var(--c-surface); border-radius: var(--r-m); column-width: 15rem; column-gap: var(--s-5); user-select: text; }
#codes-controls > .note { margin: var(--s-3) 0; color: var(--c-text); font-weight: 650; }
#totp-enrollment, #passkey-create { margin-top: var(--s-4); padding-top: var(--s-2); border-top: 1px solid var(--c-border); }
#totp-secret { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--c-surface); border-radius: var(--r-m); letter-spacing: .06em; }
#totp-uri { overflow-wrap: anywhere; font-family: var(--f-mono); }

/* ---------- Fuß ---------- */
footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-5); margin: var(--s-6) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--c-border); font-size: var(--t-xs); color: var(--c-text-3); }
footer a { display: inline-flex; align-items: center; min-height: var(--target); min-width: var(--target); }

/* ---------- Schmale Fenster ---------- */
@media (max-width: 35rem) {
  body > header { padding: var(--s-3) var(--s-5); }
  main { padding: var(--s-5) var(--s-5) var(--s-7); }
  main > h1 { font-size: 1.5rem; }
  .card { padding: 0 var(--s-4) var(--s-4); }
  .consent .note { margin-left: 0; }
  #register > button[type="submit"] { width: 100%; }
  .callout { padding: var(--s-3) var(--s-4); }
  #sessions li { flex-direction: row; align-items: center; }
  #one-time-value { padding: var(--s-3) var(--s-4); font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Hochkontrast (Windows): Systemfarben, Rahmen und Fokus bleiben sichtbar; Zustände stehen zusätzlich als Text da. */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
  button, input, select, textarea, summary, .btn { border: 1px solid ButtonText; }
  [aria-current], [aria-selected="true"], [aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}