/* privymail.eu Dashboard: Darstellung nach Designsystem S0, Entwurf B "Werkzeug, dicht"
   (docs/design/varianten/S0/B/tokens.css), mit den Seitenrahmen und Bausteinen der gewählten Entwürfe N2, N3, N5, N6, N7 bis N9.
   Nur Darstellung (Stufe 1, docs/reports/2026-11-07-dashboard-designsystem.md). Marke und Palette bleiben in brand/palette.css.

   Bewusste Abweichungen vom Entwurf, jeweils mit Grund:
   - Keine Webschriften: Die CSP des Dashboards (headers.json) hat kein font-src, und die Paketdatei-Liste ist fest. Schrift ist die Systemschrift.
   - Keine Hintergrundbilder und Symbolmasken: img-src erlaubt nur 'self'. Symbole in Chips sind Zeichen aus dem Text-Zeichensatz (CSS content).
   - Bedienziele 44 Pixel (Projektstandard, USER-DASHBOARD 7.7); S0-B selbst setzt 32. Dichte entsteht über 14-Pixel-Schrift und enge Abstände.
   - Kein Umschalter für Hell und Dunkel: Das Farbschema folgt prefers-color-scheme. */

/* ---------- Tokens (S0-B) ---------- */
: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-2xs: .6875rem; --t-xs: .75rem; --t-s: .8125rem; --t-base: .875rem; --t-lg: 1rem; --t-xl: 1.25rem; --t-2xl: 1.75rem;
  --lh-text: 1.45;
  --s-1: 2px; --s-2: 4px; --s-3: 8px; --s-4: 12px; --s-5: 16px; --s-6: 20px; --s-7: 28px; --s-8: 40px;
  --r-s: 3px; --r-m: 5px; --r-l: 8px; --r-pill: 999px;
  --target: 44px;
  --side: 15rem;
  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-nav-cur: var(--privymail-dusk); --c-on-nav-cur: var(--privymail-white);
  --c-danger: #B42318; --c-on-danger: #FFFFFF;
  --c-ok: #17703A; --c-ok-bg: #E8F4EC; --c-warn: #8A4B00; --c-warn-bg: #FDF1DE; --c-err: #B42318; --c-err-bg: #FCEAE8;
  --c-info: var(--privymail-crest); --c-info-bg: var(--privymail-frost); --c-neutral: var(--privymail-slate); --c-neutral-bg: var(--privymail-vapor);
}
@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 #3C83F6 hat nur 3,64:1; die Hover-Farbe bleibt deshalb 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-nav-cur: var(--privymail-glow); --c-on-nav-cur: var(--privymail-logo);
    --c-danger: #FF9B8F; --c-on-danger: #18181B;
    --c-ok: #7AD7A0; --c-ok-bg: #0E2E1E; --c-warn: #F2C46D; --c-warn-bg: #34270C; --c-err: #FF9B8F; --c-err-bg: #3A1715;
    --c-info: var(--privymail-glow); --c-info-bg: var(--privymail-logo); --c-neutral: var(--privymail-bone); --c-neutral-bg: var(--privymail-slate);
  }
}

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--c-app); color: var(--c-text-2);
  font: 400 var(--t-base)/var(--lh-text) 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; }
main:focus { outline: none; }
main:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
[hidden] { display: none !important; }
h1 { font: 600 var(--t-2xl)/1.15 var(--f-text); color: var(--c-heading); margin: 0; overflow-wrap: anywhere; }
h2 { font: 650 var(--t-s)/1.3 var(--f-text); color: var(--c-heading); margin: 0; letter-spacing: .02em; }
h3 { font: 600 var(--t-base)/1.3 var(--f-text); color: var(--c-heading); margin: var(--s-4) 0 var(--s-3); }
p { margin: 0 0 var(--s-3); max-width: 80ch; }
ul, ol { margin: 0 0 var(--s-3); padding-left: 1.25em; }
li { margin: var(--s-2) 0; }
code, pre { font-family: var(--f-mono); }
strong { color: var(--c-text); }

/* ---------- Schaltflächen ---------- */
button, .button {
  font: 600 var(--t-s)/1.2 var(--f-text); min-height: var(--target); padding: 0 var(--s-5);
  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; text-decoration: none;
}
button:hover:not(:disabled), .button:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
button.secondary { background: var(--c-bg); color: var(--c-text); border-color: var(--c-border-strong); }
button.secondary:hover:not(:disabled) { background: var(--c-surface-2); border-color: var(--c-border-strong); }
button:disabled { background: var(--c-surface-2); color: var(--c-text-3); border-color: var(--c-border); cursor: not-allowed; }

/* ---------- Seitenrahmen: Kopfzeile, Hinweisband, Navigation (N2) ---------- */
.skip { position: absolute; left: 8px; top: -10rem; z-index: 70; background: var(--c-bg); color: var(--c-text); padding: 8px 12px; border: 2px solid var(--c-focus); }
.skip:focus { top: 8px; }
.top {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3) var(--s-5);
  padding: var(--s-3) var(--s-6); background: var(--c-bg); border-bottom: 1px solid var(--c-border);
}
.top .brand { display: inline-flex; align-items: center; min-height: var(--target); border-radius: var(--r-m); }
.top img { width: 140px; height: auto; max-width: 100%; display: block; }
.address { justify-self: end; min-width: 0; overflow-wrap: anywhere; font-size: var(--t-xs); color: var(--c-text-3); text-align: right; }
.top-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.top a:not(.brand) { min-height: var(--target); min-width: var(--target); display: inline-flex; align-items: center; justify-content: center; font-weight: 500; }
.banner {
  margin: 0; max-width: none; padding: var(--s-3) var(--s-6); background: var(--c-info-bg); color: var(--c-text);
  font-size: var(--t-s); border-bottom: 1px solid var(--c-border); border-left: 4px solid var(--c-info);
}
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); align-items: start; }
.navigation {
  position: sticky; top: 0; align-self: start; max-height: 100vh; overflow: auto;
  background: var(--c-bg); border-right: 1px solid var(--c-border); padding: var(--s-4) var(--s-3);
}
.navigation a {
  display: flex; align-items: center; min-height: var(--target); padding: var(--s-2) var(--s-3); border-radius: var(--r-m);
  color: var(--c-text-2); text-decoration: none; font-weight: 500;
}
.navigation a:hover { background: var(--c-surface-2); }
.navigation a[aria-current=page] { background: var(--c-nav-cur); color: var(--c-on-nav-cur); font-weight: 650; }
/* Gruppen wie in N2 (Zugang, Vertrag, Daten, Hilfe), nur durch Abstand und Linie getrennt; Gruppenüberschriften gäben neue Texte. */
.navigation a:nth-child(5), .navigation a:nth-child(9), .navigation a:nth-child(12) { margin-top: var(--s-4); position: relative; }
.navigation a:nth-child(5)::before, .navigation a:nth-child(9)::before, .navigation a:nth-child(12)::before {
  content: ""; position: absolute; left: var(--s-3); right: var(--s-3); top: calc(-1 * var(--s-3) / 2 - 1px); border-top: 1px solid var(--c-border);
}
main { min-width: 0; padding: var(--s-5) var(--s-6) var(--s-8); max-width: 96rem; }
.eyebrow { color: var(--c-text-3); margin: 0 0 var(--s-2); font-size: var(--t-xs); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-3); }
main > p { color: var(--c-text-2); }
#status { color: var(--c-text-3); font-size: var(--t-s); margin: 0 0 var(--s-4); min-height: 1.4em; }
#status p { margin: 0 0 var(--s-2); }
.section-content { margin-top: var(--s-4); display: grid; gap: var(--s-4); }
.section-content > div { min-width: 0; }
footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-5); margin-top: var(--s-7); padding-top: var(--s-4);
  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); }
footer p { margin: 0; flex-basis: 100%; }

/* ---------- Karten und Kacheln (N2) ---------- */
/* Kacheln fließen spaltenweise (Leserichtung bleibt die Quellreihenfolge), damit bei unterschiedlich hohen Karten keine Lücken entstehen. */
.cards { display: block; column-width: 21rem; column-gap: var(--s-4); margin: 0 0 var(--s-4); }
.cards > * { break-inside: avoid; margin-bottom: var(--s-4); }
.card, .notice {
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-l); min-width: 0; overflow-wrap: anywhere; padding: 0 0 var(--s-2);
}
.card > h2, .notice > h2 { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); min-height: var(--target); display: flex; align-items: center; margin-bottom: var(--s-3); }
.card > :not(h2), .notice > :not(h2) { margin-left: var(--s-4); margin-right: var(--s-4); }
.card > h3, .notice > h3 { margin-top: var(--s-4); }
.card a, .notice > a { display: inline-flex; align-items: center; min-height: var(--target); }
.card p a, .notice p a, .card li a, .notice li a { display: inline; min-height: 0; }
.table-card { column-span: all; }
.meta { color: var(--c-text-3); font-size: var(--t-xs); overflow-wrap: anywhere; }
.error { color: var(--c-err); font-weight: 600; font-size: var(--t-s); }
.error::before { content: "▲ "; content: "▲ " / ""; }
/* Zeilen aus Beschriftung und Wert (product-view row()): eine Zeile je Angabe */
.card p:has(> strong:first-child + span) { padding: var(--s-2) 0; border-bottom: 1px solid var(--c-border); margin-bottom: 0; }
.card p:has(> strong:first-child + span) > strong { font-weight: 500; color: var(--c-text-3); }
.card p:has(> strong:first-child + span) > span { color: var(--c-text); font-weight: 600; }
.card > p.meta { margin-top: var(--s-2); }
.card > p.error { margin-top: var(--s-2); }

/* Statusband der Übersicht (N2 4.2): Zeichen und Text tragen die Bedeutung, die Linienfarbe ist nur Zugabe */
#status-band { border-left: 4px solid var(--c-border-strong); padding-bottom: var(--s-3); }
#status-band[data-band=attention] { border-left-color: var(--c-warn); }
#status-band[data-band=partial] { border-left-color: var(--c-info); }
#status-band > h2 { margin-left: 0; margin-right: 0; }
#status-band > h3::before { content: "▲"; content: "▲" / ""; color: var(--c-warn); margin-right: var(--s-2); }
#dashboard-hints { list-style: none; padding: 0; margin-bottom: var(--s-3); }
#dashboard-hints li { padding: var(--s-3) 0; border-bottom: 1px solid var(--c-border); margin: 0; }
#dashboard-hints li:last-child { border-bottom: 0; }
#dashboard-hints li p { margin: var(--s-1) 0 0; }
#status-band > button { margin-bottom: var(--s-3); }

/* Statuschips: Text und Zeichen zugleich, nie nur Farbe. "Nicht gemessen" ist ein eigener Zustand (Fragezeichen, gestrichelt), nie "In Ordnung". */
.state {
  display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%; margin: 0 0 var(--s-3);
  padding: 2px 9px 2px 6px; border-radius: var(--r-s); font: 600 var(--t-s)/1.5 var(--f-text);
  background: var(--c-info-bg); color: var(--c-info); border: 1px solid transparent;
}
.state::before { content: "i"; content: "i" / ""; display: inline-grid; place-items: center; flex: none; width: 1.3em; height: 1.3em; font-style: italic; font-family: Georgia, serif; }
.state[data-state=ok] { background: var(--c-ok-bg); color: var(--c-ok); }
.state[data-state=ok]::before { content: "✓"; content: "✓" / ""; font-style: normal; font-family: inherit; }
.state[data-state=warn] { background: var(--c-warn-bg); color: var(--c-warn); }
.state[data-state=warn]::before { content: "△"; content: "△" / ""; font-style: normal; font-family: inherit; }
.state[data-state=fail] { background: var(--c-err-bg); color: var(--c-err); }
.state[data-state=fail]::before { content: "✕"; content: "✕" / ""; font-style: normal; font-family: inherit; }
.state[data-state=unmeasured] { background: var(--c-neutral-bg); color: var(--c-neutral); border: 1px dashed var(--c-border-strong); }
.state[data-state=unmeasured]::before { content: "?"; content: "?" / ""; font-style: normal; font-family: inherit; }
.state[data-state=neutral] { background: var(--c-neutral-bg); color: var(--c-neutral); }
.state[data-state=neutral]::before { content: "–"; content: "–" / ""; font-style: normal; font-family: inherit; }
/* Steht das Zeichen schon im Text (Domainbefund: "✓ In Ordnung"), kommt kein zweites hinzu. */
.state[data-glyph=own]::before { display: none; }
.state[data-glyph=own] { padding-left: 9px; }

/* ---------- Tabellen ---------- */
.table-wrap { overflow-x: auto; margin-left: 0 !important; margin-right: 0 !important; }
.table-wrap:focus-visible { outline-offset: -2px; }
table { border-collapse: collapse; width: 100%; min-width: 32rem; }
caption { text-align: left; font-size: var(--t-xs); color: var(--c-text-3); padding: 0 var(--s-4) var(--s-2); }
th, td { text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-border); padding: 7px var(--s-4); overflow-wrap: anywhere; font-size: var(--t-s); }
th { font-weight: 600; color: var(--c-text-3); background: var(--c-surface); white-space: nowrap; overflow-wrap: normal; }
tbody th { color: var(--c-text); background: transparent; white-space: normal; }
tr:last-child td, tr:last-child th { border-bottom: 0; }

/* ---------- Postfach und Zugang (N3): Kopierfeld, Servereinstellungen, App-Passwort-Liste ---------- */
.address-value {
  display: block; width: fit-content; max-width: 100%; margin-bottom: var(--s-3); padding: 8px var(--s-4);
  background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--r-m);
  font: 500 var(--t-base)/1.4 var(--f-mono); color: var(--c-text); overflow-wrap: anywhere;
}
#client-setup ul, #client-setup-pending ul { list-style: none; margin-left: var(--s-4); padding: 0; border: 1px solid var(--c-border-strong); border-radius: var(--r-m); overflow: hidden; }
#client-setup li { margin: 0; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); color: var(--c-text); font-family: var(--f-mono); font-size: var(--t-s); }
#client-setup li:nth-child(odd) { background: var(--c-surface); }
#client-setup li:last-child { border-bottom: 0; }
#webmail-steps { padding-left: 1.5em; }
.app-passwords { list-style: none; padding: 0; margin: 0 var(--s-4) var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-m); }
.app-passwords li { margin: 0; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); }
.app-passwords li:last-child { border-bottom: 0; }
.app-passwords li p { margin: var(--s-1) 0; font-size: var(--t-s); color: var(--c-text-3); }
.app-passwords li > strong { font-size: var(--t-base); overflow-wrap: anywhere; }
.app-passwords li > button { margin-top: var(--s-2); }
.app-confirm { margin: var(--s-3) 0 0; }
.card > .app-confirm { margin-left: var(--s-4); margin-right: var(--s-4); }
/* Erst die Bestätigungsfrage (role=group) bekommt den Rahmen mit der Warnkante; davor ist der Container nur eine Hülle. */
.app-confirm[role=group] { padding: var(--s-4); border: 1px solid var(--c-border-strong); border-left: 4px solid var(--c-danger); border-radius: var(--r-m); background: var(--c-surface); }
.app-confirm p { color: var(--c-text); }
.app-buttons { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.app-buttons button { flex: 1 1 9rem; }
.app-buttons button:not(.secondary) { background: var(--c-danger); border-color: var(--c-danger); color: var(--c-on-danger); }
.app-outcome { font-weight: 600; color: var(--c-text) !important; padding: var(--s-2) var(--s-3); background: var(--c-info-bg); border-radius: var(--r-s); }
.app-outcome:focus-visible { outline-offset: 0; }

/* Sicherheits-Check (N7 bis N9): ein Punkt je Zeile, Beschriftung und Wert, Quelle darunter */
#security-read-check ul, #emergency-guide ol { margin-bottom: var(--s-3); }
#security-read-check ul { list-style: none; padding: 0; border: 1px solid var(--c-border); border-radius: var(--r-m); }
#security-read-check li { margin: 0; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); }
#security-read-check li:last-child { border-bottom: 0; }
#security-read-check li > strong { font-weight: 500; color: var(--c-text-3); }
#security-read-check li > span { color: var(--c-text); font-weight: 600; }
#security-read-check li > .meta { margin: var(--s-1) 0 0; }

/* ---------- Domains (N5) und Prüfbefunde: Einträge mit Zustand als Text und Zeichen ---------- */
.domain-name { font-weight: 650; font-size: var(--t-xl); color: var(--c-heading); overflow-wrap: anywhere; }
.domain-checks { list-style: none; padding: 0; }
.domain-checks li { margin: 0; padding: var(--s-3) 0 var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); border-left: 4px solid var(--c-border-strong); }
.domain-checks li:last-child { border-bottom: 0; }
.domain-checks li[data-state=ok] { border-left-color: var(--c-ok); }
.domain-checks li[data-state=warn] { border-left-color: var(--c-warn); }
.domain-checks li[data-state=fail] { border-left-color: var(--c-err); }
.domain-checks li p { margin: 0 0 var(--s-1); }
dl { margin: var(--s-3) 0; display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 0 var(--s-4); }
dt { font-weight: 500; color: var(--c-text-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--c-border); }
dd { margin: 0; padding: var(--s-2) 0; border-bottom: 1px solid var(--c-border); color: var(--c-text); overflow-wrap: anywhere; }
.dkim-text, pre {
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-size: var(--t-xs);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-s); padding: var(--s-3); margin: 0 0 var(--s-3);
}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Schmale Fenster ---------- */
@media (prefers-color-scheme: dark) {
  /* Im Paket liegt nur die dunkle Wortmarke; auf dunklem Grund steht sie auf einer hellen Fläche (Marke unverändert). */
  .top .brand { background: var(--privymail-white); padding: 0 var(--s-4); }
}
@media (max-width: 62rem) {
  :root { --side: 12.5rem; }
}
@media (max-width: 50rem) {
  .top { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); padding: var(--s-3) var(--s-4); }
  .top .brand { justify-self: start; }
  .address { justify-self: start; text-align: left; }
  .top-actions { gap: var(--s-2) var(--s-4); }
  .banner { padding: var(--s-3) var(--s-4); }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .navigation { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--c-border); padding: var(--s-3); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-2); }
  .navigation a { font-size: var(--t-s); }
  .navigation a:nth-child(5), .navigation a:nth-child(9), .navigation a:nth-child(12) { margin-top: 0; }
  .navigation a:nth-child(5)::before, .navigation a:nth-child(9)::before, .navigation a:nth-child(12)::before { display: none; }
  main { padding: var(--s-4) var(--s-3) var(--s-7); }
  h1 { font-size: var(--t-xl); }
  .cards { column-width: auto; column-count: 1; }
  dl { grid-template-columns: minmax(0, 1fr); }
  dt { border-bottom: 0; padding-bottom: 0; }
  table { min-width: 28rem; }
}

/* ---------- Stufe 2: Einstiege der Übersicht (N2), Kopierfelder (N3), Aufgaben der Sicherheitsseite (N7) ---------- */
/* Einstiege: eine Zeile je Aufgabe, der Link steht rechts; ein nicht aktiver Bereich trägt seinen Zustand statt eines Versprechens. */
.intents { list-style: none; padding: 0; margin-top: 0; margin-bottom: var(--s-3); }
.intents li { display: grid; grid-template-columns: minmax(0, 1fr) 16rem 12rem; gap: var(--s-2) var(--s-4); align-items: center; margin: 0; padding: var(--s-1) 0; border-bottom: 1px solid var(--c-border); }
.intents li:last-child { border-bottom: 0; }
.intents .intent-task { color: var(--c-text); font-weight: 500; }
.intents .state { grid-column: 2; grid-row: 1; justify-self: start; }
.card .intents li a { grid-column: 3; grid-row: 1; justify-self: end; }
.card .intents li a { display: inline-flex; align-items: center; justify-content: flex-end; min-height: var(--target); min-width: var(--target); }
/* Kopierfelder: Beschriftung, Wert im Kasten, Schaltfläche; nie ein Passwort. */
.copy-fields { list-style: none; padding: 0; margin-top: 0; margin-bottom: var(--s-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-m); overflow: hidden; }
.copy-fields li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); align-items: center; margin: 0; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); }
.copy-fields li:last-child { border-bottom: 0; }
.copy-label { grid-column: 1 / -1; color: var(--c-text-3); font-size: var(--t-s); }
.copy-value { font: 500 var(--t-base)/1.4 var(--f-mono); color: var(--c-text); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-s); padding: 6px var(--s-3); overflow-wrap: anywhere; min-width: 0; }
#security-tasks ol { padding-left: 1.5em; margin-top: 0; }
#security-tasks li { margin: var(--s-2) 0; }
@media (max-width: 50rem) {
  .intents li { grid-template-columns: minmax(0, 1fr) auto; }
  .intents .intent-task { grid-column: 1 / -1; }
  .intents .state { grid-column: 1; grid-row: 2; }
  .card .intents li a { grid-column: 2; grid-row: 2; }
}

/* 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; }
}