/*
  Regulatory Radar · Designsystem (Ticket 53)
  Regeln, Quellen und Bausteine: docs/design/designsystem.md
  Apple HIG ist die Optik, Material 3 das Gerüst (Tokens, Zustände, Kontrast), ADR-0007.

  Aufbau
   1. Tokens hell (:root) und dunkel (System-Dunkel und data-theme="dark", zwei gleiche Blöcke)
   2. Grundelemente: Schrift, Text, Verweise, Tabellen, Formulare, Schaltflächen
   3. Portal-Rahmen: Seitenleiste, Kopfleiste, Inhalt, Nutzermenü, Anmeldung
   4. Bausteine: Seitenkopf, Karte, Abschnitt, Angaben, Abzeichen, Hinweis, Leerer Zustand,
      Verweis (Quellenangabe), Segmente, Kacheln
   5. Alte Klassennamen der ersten Seiten (bleiben gültig)
   6. Anpassungen: schmale Bildschirme, reduzierte Bewegung und Transparenz, Kontrastmodus, Druck
*/

/* ---------------------------------------------------------------- 1. Tokens */

:root {
  color-scheme: light dark;

  /* Schrift: Systemschrift (SF Pro auf Apple-Geräten, Segoe UI unter Windows, Roboto unter Android) */
  --schrift: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Schriftskala: HIG-Textstile (iOS „Large“) ↔ Material-3-Rollen; Größe/Zeilenhöhe in px */
  --typo-grosstitel: 700 2.125rem/1.18 var(--schrift);   /* Large Title 34/40 ↔ Headline Large */
  --typo-titel-1: 700 1.75rem/1.21 var(--schrift);       /* Title 1 28/34 ↔ Headline Medium */
  --typo-titel-2: 700 1.375rem/1.27 var(--schrift);      /* Title 2 22/28 ↔ Title Large */
  --typo-titel-3: 600 1.25rem/1.3 var(--schrift);        /* Title 3 20/26 ↔ Headline Small/Title Large */
  --typo-headline: 600 1.0625rem/1.41 var(--schrift);    /* Headline 17/24 ↔ Title Medium */
  --typo-koerper: 400 1.0625rem/1.53 var(--schrift);     /* Body 17/26 ↔ Body Large */
  --typo-callout: 400 1rem/1.5 var(--schrift);           /* Callout 16/24 ↔ Body Large */
  --typo-subheadline: 400 0.9375rem/1.47 var(--schrift); /* Subheadline 15/22 ↔ Body Medium */
  --typo-fussnote: 400 0.8125rem/1.38 var(--schrift);    /* Footnote 13/18 ↔ Body Small */
  --typo-caption: 500 0.75rem/1.33 var(--schrift);       /* Caption 1 12/16 ↔ Label Medium */
  /* Laufweite: groß enger, klein neutral, wie die SF-Tracking-Tabelle der HIG */
  --spationierung-gross: -0.022em;
  --spationierung-titel: -0.014em;
  --spationierung-text: -0.009em;
  --zeilenlaenge: 70ch;

  /* Abstände im 4/8-Raster */
  --abstand-1: 0.25rem;  --abstand-2: 0.5rem;  --abstand-3: 0.75rem; --abstand-4: 1rem;
  --abstand-5: 1.25rem;  --abstand-6: 1.5rem;  --abstand-8: 2rem;    --abstand-10: 2.5rem;
  --abstand-12: 3rem;    --abstand-16: 4rem;
  --rand-seite: 2.5rem;  /* Seitenrand; schmal 16 px, mittel 24 px (Material 3, Fenstergrößen) */
  --breite-seitenleiste: 16rem;
  --breite-inhalt: 76rem;

  /* Radien (Material 3 Shape: 4 · 8 · 12 · 16 · 28 · voll) */
  --radius-xs: 4px; --radius-s: 8px; --radius-m: 12px; --radius-l: 16px; --radius-xl: 28px; --radius-voll: 999px;

  /* Bewegung (Material 3 Standard-Easing; kurz, wie die HIG es will) */
  --kurve: cubic-bezier(0.2, 0, 0, 1);
  --kurve-raus: cubic-bezier(0.3, 0, 1, 1);
  --dauer-kurz: 150ms; --dauer-mittel: 250ms;

  /* Markenrot: #FF000D nur für Logo und Flächen ohne Text. Text und Schrift auf Rot nutzen dunklere Stufen. */
  --marke: #ff000d;

  /* Farbrollen hell */
  --flaeche-grund: #f5f5f7;           /* Seitenhintergrund (HIG grouped background ↔ M3 surface) */
  --flaeche-karte: #ffffff;           /* Karten, Tabellen, Formulare (↔ surface-container-lowest) */
  --flaeche-erhoeht: #ffffff;         /* Menüs, Popover (↔ surface-container-high + Schatten) */
  --flaeche-seitenleiste: #ebebef;    /* (↔ surface-container) */
  --flaeche-feld: #ffffff;
  --flaeche-glas: rgb(245 245 247 / 0.78); /* Kopfleiste, Material „regular“ */
  --fuellung: rgb(118 118 128 / 0.12);       /* Sekundärknopf, Segmente (↔ secondary-container) */
  --fuellung-stark: rgb(118 118 128 / 0.2);
  --segment-gewaehlt: #ffffff;
  --text: #1d1d1f;                    /* (↔ on-surface) 16,8:1 auf Karte */
  --text-sekundaer: #636366;          /* Metadaten, Hilfetexte; ≥ 5:1 auf jeder Fläche */
  --text-auf-akzent: #ffffff;
  --trennlinie: rgb(60 60 67 / 0.16); /* (↔ outline-variant) nur Dekor */
  --rand-feld: #8e8e93;               /* Feldrand (↔ outline) ≥ 3:1 */
  --akzent-flaeche: #e0000c;          /* Primärknopf; Weiß darauf 5,0:1 */
  --akzent-text: #c4000b;             /* Verweise, schlichte Knöpfe; 5,3–6,3:1 */
  --akzent-besucht: #8a1538;
  --akzent-toenung: rgb(255 0 13 / 0.1);
  --fokus: #e0000c;                   /* Fokusring 3 px (M3), ≥ 3:1 */
  --zustand-hover: rgb(29 29 31 / 0.06);   /* Zustandsschicht (M3 hover 8 %, gedämpft für Flächen) */
  --zustand-druck: rgb(29 29 31 / 0.1);
  --schatten-karte: 0 0 0 0.5px rgb(0 0 0 / 0.05), 0 1px 2px rgb(0 0 0 / 0.04);
  --schatten-menue: 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 10px 30px rgb(0 0 0 / 0.14), 0 2px 6px rgb(0 0 0 / 0.06);
  --schleier: rgb(0 0 0 / 0.32);
  --avatar: linear-gradient(180deg, #7c7c82, #58585d);

  /* Töne für Abzeichen und Hinweise: Text ≥ 4,5:1 auf der eigenen Tönung */
  --ton-neutral-text: #636366; --ton-neutral-flaeche: rgb(118 118 128 / 0.12);
  --ton-akzent-text: #c4000b;  --ton-akzent-flaeche: rgb(255 0 13 / 0.1);
  --ton-fehler-text: #c0001a;  --ton-fehler-flaeche: rgb(255 59 48 / 0.1);
  --ton-erfolg-text: #18753a;  --ton-erfolg-flaeche: rgb(52 199 89 / 0.14);
  --ton-warnung-text: #9a4a00; --ton-warnung-flaeche: rgb(255 149 0 / 0.16);
  --ton-info-text: #0058c9;    --ton-info-flaeche: rgb(0 122 255 / 0.1);
  --ton-indigo-text: #4a3fcf;  --ton-indigo-flaeche: rgb(88 86 214 / 0.12);

  /* Diagramme (Radar-Grafik, Ticket 33): Kategorien und Raster; wechseln mit der Darstellung */
  --diagramm-1: #0a6cdb; --diagramm-2: #e07a00; --diagramm-3: #1f9447; --diagramm-4: #5856d6;
  --diagramm-5: #0f8fa8; --diagramm-6: #c2378f; --diagramm-hervorhebung: #e0000c;
  --diagramm-raster: rgb(60 60 67 / 0.18); --diagramm-text: #636366;
  /* Ringe der Radar-Grafik: Tonstufen zwischen Karte und Text, innen am kräftigsten; folgen der Darstellung */
  --diagramm-ring-aussen: color-mix(in srgb, var(--text) 3.5%, var(--flaeche-karte));
  --diagramm-ring-mitte: color-mix(in srgb, var(--text) 6%, var(--flaeche-karte));
  --diagramm-ring-innen: color-mix(in srgb, var(--text) 9%, var(--flaeche-karte));
}

/* Dunkel, wenn das System es will und nicht „Hell“ gewählt ist … */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --flaeche-grund: #101012;
    --flaeche-karte: #1c1c1e;
    --flaeche-erhoeht: #2c2c2e;
    --flaeche-seitenleiste: #18181a;
    --flaeche-feld: #262628;
    --flaeche-glas: rgb(16 16 18 / 0.72);
    --fuellung: rgb(118 118 128 / 0.24);
    --fuellung-stark: rgb(118 118 128 / 0.34);
    --segment-gewaehlt: #636366;
    --text: #f5f5f7;
    --text-sekundaer: #a1a1a6;
    --text-auf-akzent: #ffffff;
    --trennlinie: rgb(84 84 88 / 0.6);
    --rand-feld: #7c7c82;
    --akzent-flaeche: #e0000c;
    --akzent-text: #ff6b66;
    --akzent-besucht: #e3a3ae;
    --akzent-toenung: rgb(255 69 58 / 0.22);
    --fokus: #ff6b66;
    --zustand-hover: rgb(245 245 247 / 0.07);
    --zustand-druck: rgb(245 245 247 / 0.12);
    --schatten-karte: 0 0 0 0.5px rgb(255 255 255 / 0.06);
    --schatten-menue: 0 0 0 0.5px rgb(255 255 255 / 0.1), 0 12px 32px rgb(0 0 0 / 0.5);
    --schleier: rgb(0 0 0 / 0.55);
    --avatar: linear-gradient(180deg, #8e8e93, #636366);
    --ton-neutral-text: #c7c7cc; --ton-neutral-flaeche: rgb(118 118 128 / 0.28);
    --ton-akzent-text: #ff8a85;  --ton-akzent-flaeche: rgb(255 59 48 / 0.22);
    --ton-fehler-text: #ff9b93;  --ton-fehler-flaeche: rgb(255 69 58 / 0.22);
    --ton-erfolg-text: #6be08b;  --ton-erfolg-flaeche: rgb(48 209 88 / 0.2);
    --ton-warnung-text: #ffb95f; --ton-warnung-flaeche: rgb(255 159 10 / 0.2);
    --ton-info-text: #7dbcff;    --ton-info-flaeche: rgb(10 132 255 / 0.24);
    --ton-indigo-text: #b4aeff;  --ton-indigo-flaeche: rgb(94 92 230 / 0.3);
    --diagramm-1: #4aa3ff; --diagramm-2: #ffa94d; --diagramm-3: #52d27a; --diagramm-4: #9d9bff;
    --diagramm-5: #4fd1e8; --diagramm-6: #f07cc4; --diagramm-hervorhebung: #ff6b66;
    --diagramm-raster: rgb(235 235 245 / 0.16); --diagramm-text: #a1a1a6;
  }
}

/* … oder wenn „Dunkel“ gewählt ist. Dieser Block ist gleich dem darüber (ein Szenario-Test prüft das). */
:root[data-theme="dark"] {
  --flaeche-grund: #101012;
  --flaeche-karte: #1c1c1e;
  --flaeche-erhoeht: #2c2c2e;
  --flaeche-seitenleiste: #18181a;
  --flaeche-feld: #262628;
  --flaeche-glas: rgb(16 16 18 / 0.72);
  --fuellung: rgb(118 118 128 / 0.24);
  --fuellung-stark: rgb(118 118 128 / 0.34);
  --segment-gewaehlt: #636366;
  --text: #f5f5f7;
  --text-sekundaer: #a1a1a6;
  --text-auf-akzent: #ffffff;
  --trennlinie: rgb(84 84 88 / 0.6);
  --rand-feld: #7c7c82;
  --akzent-flaeche: #e0000c;
  --akzent-text: #ff6b66;
  --akzent-besucht: #e3a3ae;
  --akzent-toenung: rgb(255 69 58 / 0.22);
  --fokus: #ff6b66;
  --zustand-hover: rgb(245 245 247 / 0.07);
  --zustand-druck: rgb(245 245 247 / 0.12);
  --schatten-karte: 0 0 0 0.5px rgb(255 255 255 / 0.06);
  --schatten-menue: 0 0 0 0.5px rgb(255 255 255 / 0.1), 0 12px 32px rgb(0 0 0 / 0.5);
  --schleier: rgb(0 0 0 / 0.55);
  --avatar: linear-gradient(180deg, #8e8e93, #636366);
  --ton-neutral-text: #c7c7cc; --ton-neutral-flaeche: rgb(118 118 128 / 0.28);
  --ton-akzent-text: #ff8a85;  --ton-akzent-flaeche: rgb(255 59 48 / 0.22);
  --ton-fehler-text: #ff9b93;  --ton-fehler-flaeche: rgb(255 69 58 / 0.22);
  --ton-erfolg-text: #6be08b;  --ton-erfolg-flaeche: rgb(48 209 88 / 0.2);
  --ton-warnung-text: #ffb95f; --ton-warnung-flaeche: rgb(255 159 10 / 0.2);
  --ton-info-text: #7dbcff;    --ton-info-flaeche: rgb(10 132 255 / 0.24);
  --ton-indigo-text: #b4aeff;  --ton-indigo-flaeche: rgb(94 92 230 / 0.3);
  --diagramm-1: #4aa3ff; --diagramm-2: #ffa94d; --diagramm-3: #52d27a; --diagramm-4: #9d9bff;
  --diagramm-5: #4fd1e8; --diagramm-6: #f07cc4; --diagramm-hervorhebung: #ff6b66;
  --diagramm-raster: rgb(235 235 245 / 0.16); --diagramm-text: #a1a1a6;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ---------------------------------------------------------------- 2. Grundelemente */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--flaeche-grund);
  scroll-padding-top: 4.5rem; /* Sprungziele nicht unter der Kopfleiste */
}

body {
  margin: 0;
  min-height: 100dvh;
  font: var(--typo-koerper);
  letter-spacing: var(--spationierung-text);
  color: var(--text);
  background: var(--flaeche-grund);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { color: var(--text); text-wrap: balance; hyphens: manual; overflow-wrap: break-word; }
h1 { font: var(--typo-grosstitel); font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.125rem); letter-spacing: var(--spationierung-gross); margin: var(--abstand-2) 0 var(--abstand-4); }
h2 { font: var(--typo-titel-2); letter-spacing: var(--spationierung-titel); margin: var(--abstand-10) 0 var(--abstand-3); }
h3 { font: var(--typo-titel-3); letter-spacing: var(--spationierung-titel); margin: var(--abstand-8) 0 var(--abstand-2); }
h4 { font: var(--typo-headline); letter-spacing: var(--spationierung-text); margin: var(--abstand-6) 0 var(--abstand-2); }

p, li, dd, td, th, figcaption, blockquote { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; }
p { margin: 0 0 var(--abstand-3); max-width: var(--zeilenlaenge); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--abstand-4); padding-left: 1.4em; max-width: var(--zeilenlaenge); }
li + li { margin-top: var(--abstand-1); }
small, .fussnote { font: var(--typo-fussnote); letter-spacing: 0; color: var(--text-sekundaer); }
strong, b { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--trennlinie); margin: var(--abstand-8) 0; }
code, kbd, samp, pre { font-family: var(--schrift-mono); font-size: 0.875em; letter-spacing: 0; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
time, .datum, .zahl, .kennung, td, th { font-variant-numeric: tabular-nums; }
.datum, time, .kennung { white-space: nowrap; }
img, svg, video, iframe { max-width: 100%; }
::selection { background: rgb(255 0 13 / 0.18); }

/* Verweise: Akzentfarbe; im Fließtext immer unterstrichen (WCAG 1.4.1), sonst bei Hover und Fokus */
a { color: var(--akzent-text); text-decoration: none; text-underline-offset: 0.18em; text-decoration-thickness: 1px; border-radius: 2px; }
a:visited { color: var(--akzent-besucht); }
a:hover { text-decoration: underline; }
:is(p:not(.meta, .verweis-titel), blockquote, .fliesstext li) a:not(.knopf, .zurueck) { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
:is(p:not(.meta, .verweis-titel), blockquote, .fliesstext li) a:not(.knopf, .zurueck):hover { text-decoration-color: currentColor; }
.nav-eintrag, .kachel, .marke, .kopfleiste-marke { text-decoration: none !important; }
/* Externer Verweis: kleiner Pfeil am Ende, als Hintergrund im Innenabstand, damit er nie allein
   in eine neue Zeile rutscht. Grau (#8e8e93) wirkt in Hell und Dunkel; die Farbe trägt der Text. */
a[href^="http"]:not(.knopf, .quellen-adresse) {
  padding-right: 0.8em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5h9.5V15'/%3E%3Cpath d='M18.5 5.5L6 18'/%3E%3C/svg%3E") right 0.32em / 0.58em no-repeat;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
}

/* Fokus: immer sichtbar per Tastatur, 3 px, 2 px Abstand (Material 3 Fokusring) */
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
main:focus { outline: none; }

/* Tabellen: gruppiert wie in der HIG, als Karte mit Haarlinien */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 0 var(--abstand-8);
  background: var(--flaeche-karte);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-karte);
  font: var(--typo-subheadline);
  letter-spacing: var(--spationierung-text);
}
caption { text-align: left; font: var(--typo-headline); padding: 0 0 var(--abstand-2); }
th, td { text-align: left; vertical-align: top; padding: var(--abstand-3) var(--abstand-4); border-bottom: 1px solid var(--trennlinie); }
thead th { hyphens: manual; -webkit-hyphens: manual; font: var(--typo-fussnote); font-weight: 600; letter-spacing: 0; color: var(--text-sekundaer); padding-top: var(--abstand-3); padding-bottom: var(--abstand-2); vertical-align: bottom; }
tbody th { font-weight: 500; color: var(--text-sekundaer); }
tr:last-child > td, tr:last-child > th { border-bottom: 0; }
thead tr:last-child > th { border-bottom: 1px solid var(--trennlinie); }
th:first-child, td:first-child { padding-left: var(--abstand-5); }
th:last-child, td:last-child { padding-right: var(--abstand-5); }
tbody tr { transition: background-color var(--dauer-kurz) var(--kurve); }
tbody tr:hover { background: var(--zustand-hover); }
tbody tr:first-child:hover > :first-child { border-top-left-radius: var(--radius-l); }
tbody tr:last-child:hover > :first-child { border-bottom-left-radius: var(--radius-l); }
tbody tr:last-child:hover > :last-child { border-bottom-right-radius: var(--radius-l); }
td.zahl, th.zahl { text-align: right; }

/* Formulare: Beschriftung über dem Feld (HIG Text fields, M3 Text fields) */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; font: var(--typo-subheadline); font-weight: 600; color: var(--text); margin-bottom: var(--abstand-2); }
label { font: var(--typo-subheadline); font-weight: 500; letter-spacing: var(--spationierung-text); color: var(--text); }
label:has(> input:not([type="checkbox"], [type="radio"], [type="hidden"]), > select, > textarea) { display: grid; gap: 0.375rem; align-content: start; }

input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="range"], [type="color"], [type="file"]),
select, textarea {
  width: 100%;
  height: 2.75rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.625rem 0.75rem;
  font: 400 1rem/1.4 var(--schrift); /* 16 px: kein Zoomen beim Fokus auf iOS */
  letter-spacing: var(--spationierung-text);
  color: var(--text);
  background: var(--flaeche-feld);
  border: 1px solid var(--rand-feld);
  border-radius: var(--radius-m);
  transition: border-color var(--dauer-kurz) var(--kurve), box-shadow var(--dauer-kurz) var(--kurve);
}
input:is([type="date"], [type="time"]) { font-variant-numeric: tabular-nums; }
textarea { height: auto; min-height: 6.5rem; line-height: 1.5; resize: vertical; }
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 1.125rem;
}
::placeholder { color: var(--text-sekundaer); opacity: 1; }
:is(input, select, textarea):focus-visible { outline: none; border-color: var(--fokus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 30%, transparent); }
:is(input, select, textarea)[aria-invalid="true"] { border-color: var(--ton-fehler-text); }
:is(input, textarea)[readonly] { background: var(--fuellung); border-color: transparent; color: var(--text-sekundaer); }
:is(input, select, textarea):disabled { opacity: 0.38; }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--akzent-flaeche); flex: none; }

/* Schaltflächen: Kapselform (HIG 2025+, M3 Expressive), Grundform = sekundär (grau gefüllt) */
button, .knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2);
  min-height: 2.5rem;
  margin: 0;
  padding: 0.5rem 1.125rem;
  font: 600 0.9375rem/1.2 var(--schrift);
  letter-spacing: var(--spationierung-text);
  color: var(--text);
  background: var(--fuellung);
  border: 0;
  border-radius: var(--radius-voll);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dauer-kurz) var(--kurve), box-shadow var(--dauer-kurz) var(--kurve), transform var(--dauer-kurz) var(--kurve);
}
a.knopf:visited { color: var(--text); }
button:hover, .knopf:hover { background-color: var(--fuellung-stark); text-decoration: none; }
button:active, .knopf:active { transform: scale(0.98); }
button:disabled, .knopf[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; transform: none; }
.knopf-primaer, a.knopf-primaer:visited { color: var(--text-auf-akzent); background: var(--akzent-flaeche); }
.knopf-primaer:hover { background: var(--akzent-flaeche); box-shadow: inset 0 0 0 100vmax rgb(255 255 255 / 0.08); }
.knopf-primaer:active { box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / 0.12); }
.knopf-destruktiv, .loeschen button { color: var(--ton-fehler-text); background: var(--ton-fehler-flaeche); }
.knopf-destruktiv:hover, .loeschen button:hover { background: var(--ton-fehler-flaeche); box-shadow: inset 0 0 0 100vmax var(--zustand-hover); }
.knopf-schlicht, a.knopf-schlicht:visited { color: var(--akzent-text); background: transparent; padding-inline: 0.75rem; }
.knopf-schlicht:hover { background: var(--zustand-hover); }
.knopf-gross { min-height: 2.875rem; padding-inline: 1.5rem; font-size: 1.0625rem; }
.knopf-breit { width: 100%; }
.knopf .symbol, button .symbol { width: 1.125rem; height: 1.125rem; }

/* Symbol: Maske aus statisch/symbole, Farbe aus dem Text (wie SF Symbols neben Text) */
.symbol {
  display: inline-block;
  flex: none;
  width: 1.25rem; height: 1.25rem;
  background: currentColor;
  -webkit-mask: var(--symbol) center / contain no-repeat;
  mask: var(--symbol) center / contain no-repeat;
}
.symbolknopf { width: 2.5rem; min-height: 2.5rem; padding: 0; background: transparent; color: var(--text); }
.symbolknopf:hover { background: var(--zustand-hover); }
.symbolknopf .symbol { width: 1.375rem; height: 1.375rem; }

/* Schriftskala als Klassen, wenn ein Element einen Stil der Skala braucht, der nicht seiner ist */
.typo-grosstitel { font: var(--typo-grosstitel); letter-spacing: var(--spationierung-gross); }
.typo-titel-1 { font: var(--typo-titel-1); letter-spacing: var(--spationierung-gross); }
.typo-titel-2 { font: var(--typo-titel-2); letter-spacing: var(--spationierung-titel); }
.typo-titel-3 { font: var(--typo-titel-3); letter-spacing: var(--spationierung-titel); }
.typo-headline { font: var(--typo-headline); letter-spacing: var(--spationierung-text); }
.typo-koerper { font: var(--typo-koerper); letter-spacing: var(--spationierung-text); }
.typo-callout { font: var(--typo-callout); letter-spacing: var(--spationierung-text); }
.typo-subheadline { font: var(--typo-subheadline); letter-spacing: var(--spationierung-text); }
.typo-fussnote { font: var(--typo-fussnote); letter-spacing: 0; }
.typo-caption { font: var(--typo-caption); letter-spacing: 0.01em; }

/* Gefundene Wörter in Trefferlisten: Hintergrund und Fettdruck, nie nur Farbe */
mark { padding: 0 0.15em; font-weight: 600; color: inherit; background: var(--ton-warnung-flaeche); border-radius: var(--radius-xs); }

.visuell-versteckt { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- 3. Portal-Rahmen */

.sprungmarke {
  position: fixed; left: var(--abstand-4); top: var(--abstand-3); z-index: 100;
  padding: var(--abstand-2) var(--abstand-4);
  color: var(--text-auf-akzent) !important; background: var(--akzent-flaeche);
  border-radius: var(--radius-voll); font: 600 0.9375rem/1.4 var(--schrift);
  transform: translateY(-200%);
}
.sprungmarke:focus { transform: none; }

.portal { display: grid; grid-template-columns: var(--breite-seitenleiste) minmax(0, 1fr); }

.seitenleiste {
  position: sticky; top: 0;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex; flex-direction: column;
  padding: var(--abstand-5) var(--abstand-3) var(--abstand-8);
  background: var(--flaeche-seitenleiste);
  border-right: 1px solid var(--trennlinie);
  scrollbar-width: thin;
}
.seitenleiste-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-2); padding: 0 var(--abstand-2) var(--abstand-6); }
.marke { display: grid; gap: var(--abstand-2); color: var(--text); padding: var(--abstand-1); margin: calc(-1 * var(--abstand-1)); border-radius: var(--radius-s); }
.marke:visited { color: var(--text); }
.marke:hover { text-decoration: none; }
.marke .logo { display: block; width: 10.5rem; height: auto; }
.marke-produkt { font: var(--typo-subheadline); font-weight: 600; letter-spacing: var(--spationierung-text); color: var(--text); }
.seitenleiste-schliessen { display: none; }

.nav-liste-oben { margin-bottom: var(--abstand-4); }
.nav-gruppe + .nav-gruppe { margin-top: var(--abstand-3); }
/* Name der Gruppe: zugleich der Schalter, der sie ein- und aufklappt (Ticket 64). Ein Knopf im Formular der Seitenleiste: ohne
   Skript schickt er es ab, mit Skript klappt portal.js die Liste sofort um. Symbol vorn, Pfeil hinten (HIG Disclosure, wie der
   einklappbare Bereich: rechts, wenn eingeklappt, nach unten, wenn offen). */
.nav-gruppe-titel {
  display: flex; align-items: center; justify-content: flex-start; gap: var(--abstand-3);
  width: 100%;
  min-height: 2.25rem;
  margin: 0 0 var(--abstand-1);
  padding: 0.375rem var(--abstand-3);
  font: var(--typo-fussnote);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-sekundaer);
  text-align: left;
  white-space: normal;
  background: transparent;
  border-radius: var(--radius-s);
}
.nav-gruppe-titel:hover { background: var(--zustand-hover); }
.nav-gruppe-titel:active { background: var(--zustand-druck); transform: none; }
.nav-gruppe-titel::before {
  content: "";
  flex: none;
  width: 1.25rem; height: 1.25rem;
  background: var(--text-sekundaer);
  -webkit-mask: var(--symbol) center / contain no-repeat;
  mask: var(--symbol) center / contain no-repeat;
}
.nav-gruppe-titel::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--text-sekundaer); border-bottom: 2px solid var(--text-sekundaer);
  transform: rotate(-45deg);
  transition: transform var(--dauer-kurz) var(--kurve);
}
.nav-gruppe-titel[aria-expanded="true"]::after { transform: rotate(45deg); }
/* Muster der Gruppen unter /bausteine: so breit und so getönt wie die Seitenleiste */
.muster-gruppen { max-width: var(--breite-seitenleiste); padding: var(--abstand-3); background: var(--flaeche-seitenleiste); border-radius: var(--radius-m); }
.nav-liste { list-style: none; margin: 0; padding: 0; max-width: none; }
.nav-liste li + li { margin-top: 2px; }
.nav-eintrag {
  display: flex; align-items: center; gap: var(--abstand-3);
  min-height: 2.25rem;
  padding: 0.375rem var(--abstand-3);
  font: var(--typo-subheadline);
  font-weight: 500;
  letter-spacing: var(--spationierung-text);
  color: var(--text);
  border-radius: var(--radius-s);
  transition: background-color var(--dauer-kurz) var(--kurve);
  hyphens: auto;
}
.nav-eintrag:visited { color: var(--text); }
.nav-eintrag::before {
  content: "";
  flex: none;
  width: 1.25rem; height: 1.25rem;
  background: var(--text-sekundaer);
  -webkit-mask: var(--symbol) center / contain no-repeat;
  mask: var(--symbol) center / contain no-repeat;
}
.nav-eintrag:hover { background: var(--zustand-hover); text-decoration: none; }
.nav-eintrag:active { background: var(--zustand-druck); }
.nav-eintrag[aria-current="page"] { background: var(--akzent-toenung); font-weight: 600; }
.nav-eintrag[aria-current="page"]::before { background: var(--akzent-text); }

.portal-flaeche { min-width: 0; display: flex; flex-direction: column; min-height: 100dvh; }

.kopfleiste {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--abstand-3);
  min-height: 3.25rem;
  padding: var(--abstand-2) var(--rand-seite);
  padding-top: max(var(--abstand-2), env(safe-area-inset-top));
  background: var(--flaeche-glas);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--trennlinie);
}
.kopfleiste-menue, .kopfleiste-marke { display: none; }
.kopfleiste-marke .logo { display: block; width: 8.5rem; height: auto; }
.kopfleiste-titel {
  margin: 0 auto 0 0;
  max-width: none;
  font: var(--typo-headline);
  letter-spacing: var(--spationierung-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0;
}
@supports (animation-timeline: scroll()) {
  .kopfleiste { border-bottom-color: transparent; animation: kopfleiste-linie linear both; animation-timeline: scroll(root); animation-range: 0 3rem; }
  .kopfleiste-titel { animation: kopfleiste-titel linear both; animation-timeline: scroll(root); animation-range: 3rem 5.5rem; }
}
@keyframes kopfleiste-linie { to { border-bottom-color: var(--trennlinie); } }
@keyframes kopfleiste-titel { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Suchfeld der Kopfleiste (HIG Search field, M3 Search bar): Kapsel mit Lupe, die Lupe sendet ab. */
.kopfleiste-suche { position: relative; flex: 0 1 22rem; min-width: 0; }
.kopfleiste-suche + .nutzermenue { margin-left: 0; } /* das Suchfeld rückt ans Nutzermenü, der Titel schiebt es nach rechts */
.kopfleiste-suche input[type="search"] {
  height: 2.5rem; min-height: 2.5rem;
  padding: 0.375rem 0.875rem 0.375rem 2.75rem;
  border-color: transparent; border-radius: var(--radius-voll);
  background: var(--fuellung);
  -webkit-appearance: none; appearance: none;
}
.kopfleiste-suche input[type="search"]:focus-visible { background: var(--flaeche-feld); border-color: var(--fokus); }
.kopfleiste-suche button { position: absolute; inset: 0 auto 0 0; width: 2.5rem; min-height: 2.5rem; color: var(--text-sekundaer); }
.kopfleiste-suche button:hover { background: transparent; color: var(--text); }
@media (max-width: 959.98px) { .kopfleiste-suche { flex: 1 1 0; margin-left: auto; } }

/* Hinweis in der Kopfleiste (Ticket 55): eine Warnung (Baustein Hinweis) in einer zweiten Zeile über
   die ganze Breite. Sie bleibt mit der Kopfleiste beim Scrollen stehen, solange eine Testeinstellung gilt. */
.kopfleiste[data-mit-hinweis] { flex-wrap: wrap; }
.kopfleiste[data-mit-hinweis] .kopfleiste-titel { flex: 1 1 0; min-width: 0; } /* ein langer Titel schiebt den Hinweis nicht um */
.hinweis.kopfleiste-hinweis { flex: 1 0 100%; max-width: none; margin: 0; padding: var(--abstand-1) var(--abstand-3); } /* gewinnt gegen .hinweis weiter unten */

.inhalt {
  flex: 1;
  width: 100%;
  max-width: calc(var(--breite-inhalt) + 2 * var(--rand-seite));
  margin: 0 auto;
  padding: var(--abstand-4) var(--rand-seite) var(--abstand-16);
}
.inhalt > :first-child { margin-top: var(--abstand-2); }

/* Nutzermenü: Avatar öffnet ein Popover (HIG Popovers/Menus) */
.nutzermenue { position: relative; margin-left: auto; flex: none; }
.nutzermenue > summary { list-style: none; cursor: pointer; border-radius: var(--radius-voll); display: block; }
.nutzermenue > summary::-webkit-details-marker { display: none; }
.nutzermenue > summary:hover .avatar { box-shadow: 0 0 0 4px var(--zustand-hover); }
.nutzermenue[open] > summary .avatar { box-shadow: 0 0 0 3px var(--akzent-toenung); }
.avatar {
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--avatar);
  color: #fff;
  font: 600 0.8125rem/1 var(--schrift);
  letter-spacing: 0.02em;
  transition: box-shadow var(--dauer-kurz) var(--kurve);
}
.avatar-gross { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
.nutzermenue-inhalt {
  position: absolute; right: 0; top: calc(100% + var(--abstand-2));
  width: min(19rem, calc(100vw - 2rem));
  padding: var(--abstand-4);
  display: grid; gap: var(--abstand-4);
  background: var(--flaeche-erhoeht);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-menue);
  transform-origin: top right;
  animation: menue-auf var(--dauer-kurz) var(--kurve);
}
@keyframes menue-auf { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }
.nutzermenue-person { display: flex; align-items: center; gap: var(--abstand-3); }
.nutzermenue-person p { margin: 0; display: grid; }
.nutzermenue-name { font: var(--typo-headline); letter-spacing: var(--spationierung-text); overflow-wrap: anywhere; }
.nutzermenue-rolle { font: var(--typo-fussnote); color: var(--text-sekundaer); }
.darstellung legend { font: var(--typo-fussnote); font-weight: 600; color: var(--text-sekundaer); }
.nutzermenue-abmelden { border-top: 1px solid var(--trennlinie); padding-top: var(--abstand-3); }
.nutzermenue-abmelden .knopf { width: 100%; justify-content: flex-start; padding-inline: var(--abstand-2); color: var(--text); font-weight: 500; }

/* Anmeldung und andere Seiten ohne Seitenleiste */
.einzelseite { background: var(--flaeche-grund); }
.einzelseite-inhalt {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--abstand-8) var(--abstand-4);
}
.anmeldung { width: min(100%, 25rem); }
.anmeldung-marke { display: grid; justify-items: center; gap: var(--abstand-4); margin-bottom: var(--abstand-8); text-align: center; }
.anmeldung-marke .logo { width: 15rem; height: auto; display: block; }
.anmeldung-produkt { font: var(--typo-headline); color: var(--text-sekundaer); margin: 0; }
.anmeldung-karte { background: var(--flaeche-karte); border-radius: var(--radius-xl); box-shadow: var(--schatten-karte); padding: var(--abstand-8); }
.anmeldung-karte h1 { font: var(--typo-titel-1); letter-spacing: var(--spationierung-gross); margin: 0 0 var(--abstand-2); text-align: center; }
.anmeldung-karte .seitenkopf-text { text-align: center; margin: 0 auto var(--abstand-6); }
.anmeldung-karte .formular { padding: 0; background: none; box-shadow: none; max-width: none; }
.anmeldung-fuss { margin: var(--abstand-6) auto 0; text-align: center; font: var(--typo-fussnote); color: var(--text-sekundaer); }

/* ---------------------------------------------------------------- 4. Bausteine */

/* Seitenkopf: Großtitel, optional Untertitel und Aktionen rechts (HIG Toolbars: Hauptaktion trailing) */
.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--abstand-4) var(--abstand-6); margin: var(--abstand-2) 0 var(--abstand-8); }
.seitenkopf-titel { min-width: 0; flex: 1 1 24rem; }
.seitenkopf h1 { margin: 0; }
.seitenkopf-text { margin: var(--abstand-2) 0 0; color: var(--text-sekundaer); font: var(--typo-koerper); letter-spacing: var(--spationierung-text); }
.zurueck {
  display: inline-flex; align-items: center; gap: 0.125rem;
  margin: 0 0 var(--abstand-2) -0.3rem;
  font: var(--typo-subheadline); font-weight: 500;
  color: var(--akzent-text);
}
.zurueck:visited { color: var(--akzent-text); }
.zurueck::before { content: ""; width: 1.125rem; height: 1.125rem; background: currentColor; -webkit-mask: url(/statisch/symbole/zurueck.svg) center / contain no-repeat; mask: url(/statisch/symbole/zurueck.svg) center / contain no-repeat; }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); margin: 0; }
.aktionen form { margin: 0; }

/* Karte und Abschnitt */
.karte { background: var(--flaeche-karte); border-radius: var(--radius-l); box-shadow: var(--schatten-karte); padding: var(--abstand-6); margin: 0 0 var(--abstand-8); }
.karte > :last-child { margin-bottom: 0; }
.karte > h2:first-child, .karte > h3:first-child { margin-top: 0; }
.abschnitt { margin: 0 0 var(--abstand-10); }
.abschnitt > h2:first-child { margin-top: 0; }
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--abstand-2) var(--abstand-4); margin: var(--abstand-10) 0 var(--abstand-3); }
.abschnitt-kopf h2 { margin: 0; }
.abschnitt-kopf p { margin: 0; color: var(--text-sekundaer); font: var(--typo-subheadline); }
.abschnitt-text { color: var(--text-sekundaer); margin-top: calc(-1 * var(--abstand-1)); }
.meta { hyphens: manual; -webkit-hyphens: manual; margin: var(--abstand-1) 0 0; font: var(--typo-subheadline); letter-spacing: var(--spationierung-text); color: var(--text-sekundaer); max-width: none; }
.meta-trenner { padding: 0 0.35em; }

/* Tabelle im Rahmen: rollt auf schmalen Bildschirmen waagerecht, statt die Seite zu verbreitern */
.tabelle-rahmen {
  overflow-x: auto; margin: 0 0 var(--abstand-8); border-radius: var(--radius-l); box-shadow: var(--schatten-karte); -webkit-overflow-scrolling: touch;
  /* Schatten an den Rändern zeigen, dass die Tabelle waagerecht weitergeht */
  background:
    linear-gradient(to right, var(--flaeche-karte) 30%, transparent) left / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--flaeche-karte) 30%, transparent) right / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.14), transparent) left / 0.875rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.14), transparent) right / 0.875rem 100% no-repeat scroll,
    var(--flaeche-karte);
}
.tabelle-rahmen > table { margin: 0; box-shadow: none; background: transparent; }
.tabelle-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--abstand-2); margin: 0 0 var(--abstand-3); }
.tabelle-kopf p { margin: 0; color: var(--text-sekundaer); font: var(--typo-subheadline); }
td.titel { font: var(--typo-callout); font-weight: 600; letter-spacing: var(--spationierung-text); min-width: 14rem; hyphens: manual; -webkit-hyphens: manual; }
td.titel a:not(:hover) { color: var(--text); }
td.titel a:visited:not(:hover) { color: var(--akzent-besucht); }
td.aktion { text-align: right; white-space: nowrap; width: 1%; }
td.aktion a { font-weight: 500; }
td.quelle-zelle { min-width: 9rem; }
td:is(.quelle-zelle, .themen-zelle), .herausgeber { hyphens: manual; -webkit-hyphens: manual; }
td.titel .abzeichen { margin-left: 0.25rem; font-weight: 600; }
td.themen-zelle { font: var(--typo-fussnote); font-weight: 500; letter-spacing: 0; color: var(--text-sekundaer); min-width: 8rem; max-width: 14rem; }
.quellen-name { display: block; }
.beispiele { list-style: none; margin: 0; padding: 0; max-width: none; }
.beispiele li { margin: 0 0 var(--abstand-2); }
.beispiele li:last-child { margin-bottom: 0; }
.meta.abruf { color: var(--text); }
td.titel .meta { font-weight: 400; }
/* Deutsche Kurzfassung (Ticket 63): unter dem Titel in Listen der übernommene KI-Text oder der Teaser der Quelle, kleiner als der Titel. */
td.titel .kurzfassung { margin: var(--abstand-1) 0 0; font: var(--typo-subheadline); font-weight: 400; letter-spacing: var(--spationierung-text); color: var(--text-sekundaer); }
td.titel .kurzfassung .abzeichen { margin-left: 0; }
.quellenliste td.titel .meta:has(.quellen-adresse) { display: flex; min-width: 0; contain: inline-size; }
.quellenliste td.titel .meta > * { flex: none; }
td.titel .quellen-adresse { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-sekundaer); hyphens: none; }
td.titel .quellen-adresse:hover { color: var(--akzent-text); }
td.knapp, th.knapp { white-space: nowrap; width: 1%; padding-inline: 0.625rem; }
.leise { color: var(--text-sekundaer); }
abbr[title] { text-decoration: none; cursor: help; }

/* Angaben: Beschreibungsliste als gruppierte Zeilen (HIG Lists, inset grouped) */
.angaben {
  display: grid; grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr);
  margin: 0 0 var(--abstand-8);
  padding: var(--abstand-1) var(--abstand-5);
  background: var(--flaeche-karte);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-karte);
  font: var(--typo-subheadline);
  letter-spacing: var(--spationierung-text);
  max-width: 52rem;
}
.angaben dt, .angaben dd { margin: 0; padding: var(--abstand-3) 0; border-top: 1px solid var(--trennlinie); }
.angaben dt { color: var(--text-sekundaer); padding-right: var(--abstand-6); }
.angaben dt:first-of-type, .angaben dt:first-of-type + dd { border-top: 0; }
.angaben dd { font-variant-numeric: tabular-nums; }

/* Formular als Karte */
.formular { display: grid; gap: var(--abstand-5); max-width: 40rem; padding: var(--abstand-6); margin: 0 0 var(--abstand-8); background: var(--flaeche-karte); border-radius: var(--radius-l); box-shadow: var(--schatten-karte); }
.formular > button, .formular > .knopf, .formular-aktionen { justify-self: start; }
.formular-aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.formular-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--abstand-4); }
.feld { display: grid; gap: 0.375rem; }
.feld-hilfe { margin: 0; font: var(--typo-fussnote); letter-spacing: 0; color: var(--text-sekundaer); }
.feld-fehler { margin: 0; display: flex; gap: 0.375rem; align-items: flex-start; font: var(--typo-fussnote); font-weight: 500; color: var(--ton-fehler-text); }
.feld-fehler::before { content: ""; flex: none; width: 1rem; height: 1rem; margin-top: 1px; background: currentColor; -webkit-mask: url(/statisch/symbole/fehler.svg) center / contain no-repeat; mask: url(/statisch/symbole/fehler.svg) center / contain no-repeat; }
label:has(> input:is([type="checkbox"], [type="radio"])), label.auswahl, .auswahl { display: flex; align-items: center; gap: var(--abstand-3); min-height: 2.75rem; font-weight: 400; cursor: pointer; }
.auswahl-liste { display: grid; gap: 0; border-radius: var(--radius-m); }
.auswahl-liste > .auswahl + .auswahl { border-top: 1px solid var(--trennlinie); }
.formular label small, .formular .zusatz { font-weight: 400; }
.auswahl-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0 var(--abstand-4); }
.formular-breit { max-width: 60rem; }
.inline-formular { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--abstand-2); }
.inline-formular label { flex: 1 1 10rem; }
.karte-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-3) var(--abstand-6); }
.karte-zeile > p { margin: 0; }
td.countdown { color: var(--text-sekundaer); font-variant-numeric: tabular-nums; }

/* Filterleiste: Felder nebeneinander, Knopf am Ende */
.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--abstand-3); margin: 0 0 var(--abstand-6); padding: var(--abstand-4) var(--abstand-5); background: var(--flaeche-karte); border-radius: var(--radius-l); box-shadow: var(--schatten-karte); }
.filter label { display: grid; gap: 0.375rem; flex: 1 1 9rem; min-width: 0; max-width: 16rem; font-weight: 500; }
.filter button { flex: none; }
/* Suchseite: das Suchfeld mit seinem Knopf steht über den Filtern, in einer Zeile für sich */
.filter .filter-suchzeile { flex: 1 1 100%; display: flex; align-items: flex-end; gap: var(--abstand-3); }
.filter .filter-suchzeile label { flex: 1 1 auto; max-width: none; }

/* Abzeichen: Kapsel mit Tönung; Ton über data-ton oder Klasse */
.abzeichen {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  font: var(--typo-caption);
  letter-spacing: 0.01em;
  color: var(--ton-neutral-text);
  background: var(--ton-neutral-flaeche);
  border-radius: var(--radius-voll);
  white-space: nowrap;
  vertical-align: 0.08em;
  hyphens: none;
}
.abzeichen[data-ton="akzent"], .abzeichen-akzent { color: var(--ton-akzent-text); background: var(--ton-akzent-flaeche); }
.abzeichen[data-ton="fehler"], .abzeichen-fehler { color: var(--ton-fehler-text); background: var(--ton-fehler-flaeche); }
.abzeichen[data-ton="erfolg"], .abzeichen-erfolg { color: var(--ton-erfolg-text); background: var(--ton-erfolg-flaeche); }
.abzeichen[data-ton="warnung"], .abzeichen-warnung { color: var(--ton-warnung-text); background: var(--ton-warnung-flaeche); }
.abzeichen[data-ton="info"], .abzeichen-info { color: var(--ton-info-text); background: var(--ton-info-flaeche); }
.abzeichen[data-ton="indigo"], .abzeichen-indigo { color: var(--ton-indigo-text); background: var(--ton-indigo-flaeche); }
.abzeichen-punkt::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: currentColor; }

/* Begriff: Stichwort einer Liste (Fachtaxonomie, Begriffe) */
.begriffe { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; max-width: none; }
.begriff { display: inline-block; padding: 0.0625rem 0.5rem; margin: 0 0.25rem 0.25rem 0; font: var(--typo-fussnote); letter-spacing: 0; color: var(--text); background: var(--fuellung); border-radius: var(--radius-s); }
.begriffe .begriff { margin: 0; }

/* Hinweis: Rückmeldung auf der Seite (HIG Feedback; nah an dem, worauf sie sich bezieht) */
.hinweis, p.fehler, div.fehler {
  display: flex; gap: var(--abstand-3); align-items: flex-start;
  max-width: 52rem;
  margin: 0 0 var(--abstand-6);
  padding: var(--abstand-3) var(--abstand-4);
  font: var(--typo-subheadline); font-weight: 500;
  letter-spacing: var(--spationierung-text);
  color: var(--text);
  background: var(--ton-info-flaeche);
  border-radius: var(--radius-m);
  --hinweis-farbe: var(--ton-info-text);
  --hinweis-symbol: url(/statisch/symbole/info.svg);
}
.hinweis::before, p.fehler::before, div.fehler::before {
  content: ""; flex: none;
  width: 1.25rem; height: 1.25rem; margin-top: 0.0625rem;
  background: var(--hinweis-farbe);
  -webkit-mask: var(--hinweis-symbol) center / contain no-repeat;
  mask: var(--hinweis-symbol) center / contain no-repeat;
}
.hinweis > *, .fehler > * { margin: 0; }
.hinweis-inhalt { display: grid; gap: var(--abstand-1); }
.hinweis.erfolg, .hinweis-erfolg { background: var(--ton-erfolg-flaeche); --hinweis-farbe: var(--ton-erfolg-text); --hinweis-symbol: url(/statisch/symbole/erfolg.svg); }
.hinweis.warnung, .hinweis-warnung { background: var(--ton-warnung-flaeche); --hinweis-farbe: var(--ton-warnung-text); --hinweis-symbol: url(/statisch/symbole/warnung.svg); }
p.fehler, div.fehler, .hinweis.fehler, .hinweis-fehler { background: var(--ton-fehler-flaeche); --hinweis-farbe: var(--ton-fehler-text); --hinweis-symbol: url(/statisch/symbole/fehler.svg); }
:is(td, dd, span, li).fehler { color: var(--ton-fehler-text); font-weight: 500; }

/* Leerer Zustand: sagt, was fehlt und was als Nächstes zu tun ist (HIG Writing) */
.leer {
  display: grid; justify-items: center; gap: var(--abstand-2);
  margin: 0 0 var(--abstand-8);
  padding: var(--abstand-10) var(--abstand-6);
  text-align: center;
  background: var(--flaeche-karte);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-karte);
  color: var(--text-sekundaer);
  --leer-symbol: url(/statisch/symbole/leer.svg);
}
.leer::before { content: ""; width: 2.75rem; height: 2.75rem; margin-bottom: var(--abstand-2); background: var(--text-sekundaer); opacity: 0.7; -webkit-mask: var(--leer-symbol) center / contain no-repeat; mask: var(--leer-symbol) center / contain no-repeat; }
.leer > * { margin: 0; max-width: 46ch; }
.leer-titel { font: var(--typo-headline); letter-spacing: var(--spationierung-text); color: var(--text); }
.leer .knopf { margin-top: var(--abstand-3); }
.leer-gesperrt { --leer-symbol: url(/statisch/symbole/pruefspur.svg); }

/* Verweis: Quellenangabe einer Meldung – Herausgeber · Datum, darunter der Titel als Verweis */
.verweis { display: grid; gap: 0.125rem; margin: 0 0 var(--abstand-4); max-width: var(--zeilenlaenge); }
.verweis-meta { margin: 0; font: var(--typo-fussnote); font-weight: 500; letter-spacing: 0; color: var(--text-sekundaer); }
.verweis-titel { margin: 0; font: var(--typo-callout); font-weight: 600; letter-spacing: var(--spationierung-text); hyphens: manual; }
.verweis-titel a:not(:hover) { color: var(--text); text-decoration: none; }
.verweis-titel a:visited:not(:hover) { color: var(--akzent-besucht); }
.url, .verweis-url { overflow-wrap: anywhere; hyphens: none; -webkit-hyphens: none; }
a.gekuerzt, .gekuerzt { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* Segmente: segmentierte Auswahl, gleich breite Segmente (HIG Segmented controls, M3 Segmented buttons) */
.segmente {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 2px; padding: 2px;
  background: var(--fuellung);
  border-radius: var(--radius-voll);
}
.segmente button {
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  font: 500 0.8125rem/1.2 var(--schrift);
  letter-spacing: 0;
  color: var(--text);
  background: transparent;
}
.segmente button:hover { background: var(--zustand-hover); }
.segmente button[aria-pressed="true"] { background: var(--segment-gewaehlt); font-weight: 600; box-shadow: 0 1px 3px rgb(0 0 0 / 0.12), 0 0 0 0.5px rgb(0 0 0 / 0.04); }
.segmente button:active { transform: none; }

/* Reiter: Segmente mit der Zahl der Einträge, über einer Liste (Feed, Ticket 62). Die Leiste ist so breit wie ihre Reiter und rollt auf
   schmaler Fläche waagerecht, statt zu brechen. */
.segmente.reiter { width: fit-content; max-width: 100%; overflow-x: auto; grid-auto-columns: minmax(max-content, 1fr); margin: 0 0 var(--abstand-5); }
.segmente.reiter button { white-space: nowrap; }

/* Bereichsreiter (Ticket 72): die Seiten eines Bereichs als Leiste unter dem Seitenkopf, z. B. „KI & Agenten“. Jeder Reiter ist ein Verweis
   auf eine eigene Seite (M3 Secondary tabs, HIG Tab bars); der geöffnete trägt aria-current="page", Text in Akzentfarbe, halbfett und
   einen Strich darunter. Anders als die Reiter des Feeds wechselt er die Seite. Die Leiste rollt auf schmaler Fläche waagerecht. */
.seitenkopf + .bereichsreiter { margin-top: calc(-1 * var(--abstand-4)); }
.bereichsreiter { position: relative; margin: 0 0 var(--abstand-8); overflow-x: auto; border-bottom: 1px solid var(--trennlinie); scrollbar-width: thin; }
.bereichsreiter ul { display: flex; gap: var(--abstand-1); width: max-content; min-width: 100%; margin: 0; padding: 0; list-style: none; max-width: none; }
.bereichsreiter li { margin: 0; }
.bereichsreiter li + li { margin-top: 0; }
.bereichsreiter a, .bereichsreiter a:visited {
  display: flex; align-items: center; min-height: 2.75rem; padding: 0 var(--abstand-4);
  font: var(--typo-subheadline); font-weight: 500; letter-spacing: var(--spationierung-text); white-space: nowrap;
  color: var(--text-sekundaer); text-decoration: none;
  border-bottom: 3px solid transparent; border-radius: var(--radius-s) var(--radius-s) 0 0;
}
.bereichsreiter a:hover { color: var(--text); background: var(--zustand-hover); text-decoration: none; }
.bereichsreiter a:active { background: var(--zustand-druck); }
.bereichsreiter a[aria-current="page"] { color: var(--akzent-text); font-weight: 600; border-bottom-color: var(--akzent-flaeche); }

/* Einklappbarer Bereich über einer Liste: Die Überschrift ist der Schalter (Feed: gespeicherte Suchen und Spalten, Ticket 62). */
.bereich { margin: 0 0 var(--abstand-5); padding: var(--abstand-2) var(--abstand-6); background: var(--flaeche-karte); border-radius: var(--radius-l); box-shadow: var(--schatten-karte); }
.bereich > summary { display: flex; align-items: center; gap: var(--abstand-3); min-height: 2.75rem; cursor: pointer; list-style: none; border-radius: var(--radius-xs); }
.bereich > summary::-webkit-details-marker { display: none; }
.bereich > summary::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--text-sekundaer); border-bottom: 2px solid var(--text-sekundaer); transform: rotate(-45deg); transition: transform var(--dauer-kurz) var(--kurve); }
.bereich[open] > summary::before { transform: rotate(45deg); }
.bereich > summary > h2 { margin: 0; font: var(--typo-headline); letter-spacing: var(--spationierung-text); }
.bereich[open] > summary { margin-bottom: var(--abstand-3); }
.bereich .formular { max-width: none; padding: 0; margin: 0 0 var(--abstand-4); background: transparent; box-shadow: none; }
.bereich .tabelle-rahmen { margin: 0 0 var(--abstand-4); }
.bereich .leer { margin: 0 0 var(--abstand-4); }
.bereich td.aktion { display: grid; gap: var(--abstand-2); justify-items: start; }
.bereich td.aktion .inline-formular { width: 100%; }
.spaltenwahl { display: grid; gap: var(--abstand-1); padding: var(--abstand-2) 0; }
.spaltenwahl input[type="number"] { width: 5rem; }
@media (prefers-reduced-motion: reduce) { .bereich > summary::before { transition: none; } }

/* Kacheln der Übersicht */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: var(--abstand-4); margin: 0 0 var(--abstand-10); padding: 0; list-style: none; max-width: none; }
.kacheln > li { margin: 0; }
.kachel {
  display: grid; gap: var(--abstand-1); align-content: start;
  height: 100%;
  padding: var(--abstand-5);
  color: var(--text);
  background: var(--flaeche-karte);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-karte);
  transition: box-shadow var(--dauer-kurz) var(--kurve), transform var(--dauer-kurz) var(--kurve);
}
a.kachel:visited { color: var(--text); }
a.kachel:hover { text-decoration: none; box-shadow: var(--schatten-karte), 0 6px 18px rgb(0 0 0 / 0.08); }
.kachel-titel { display: flex; align-items: center; gap: var(--abstand-2); font: var(--typo-subheadline); font-weight: 600; color: var(--text-sekundaer); }
.kachel-titel .symbol { width: 1.125rem; height: 1.125rem; color: var(--akzent-text); }
.kachel-wert { font: var(--typo-titel-1); letter-spacing: var(--spationierung-gross); font-variant-numeric: tabular-nums; hyphens: manual; -webkit-hyphens: manual; text-wrap: balance; } /* Werte wie „bleiben im eigenen Netz“ brechen um, nie mit Trennstrich */
.kachel-text { font: var(--typo-subheadline); color: var(--text-sekundaer); }

/* Prozess: die acht Schritte des Regulatory-Change-Prozesses */
.prozess { list-style: none; margin: 0 0 var(--abstand-10); padding: var(--abstand-2) var(--abstand-5); max-width: 52rem; background: var(--flaeche-karte); border-radius: var(--radius-l); box-shadow: var(--schatten-karte); counter-reset: schritt; }
.prozess li { counter-increment: schritt; display: flex; align-items: center; gap: var(--abstand-3); margin: 0; padding: var(--abstand-3) 0; border-top: 1px solid var(--trennlinie); font: var(--typo-callout); }
.prozess li:first-child { border-top: 0; }
.prozess li::before { content: counter(schritt); flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font: 600 0.8125rem/1 var(--schrift); font-variant-numeric: tabular-nums; color: var(--text-sekundaer); background: var(--fuellung); }
.prozess li.verfuegbar::before { color: var(--text-auf-akzent); background: var(--akzent-flaeche); }
.prozess li > :is(a, span):first-child { flex: 1; }
.prozess li a { font-weight: 500; }
/* Einrichtungsweg des KI-Bereichs (Ticket 72): wie der Prozess, mit Beschreibung unter dem Titel und dem Zustand als Abzeichen; ein
   erledigter Schritt trägt die Tönung „erfolg“ statt des Rots. */
.prozess.einrichtung li > div { flex: 1; min-width: 0; }
.prozess.einrichtung li .meta { margin: 0.125rem 0 0; }
.prozess.einrichtung li.erledigt::before { color: var(--ton-erfolg-text); background: var(--ton-erfolg-flaeche); }
/* Eine Liste in einer Tabellenzelle: kompakt, mit Aufzählungszeichen (Datenumfang, Ticket 72). */
td ul.kompakt { margin: 0; padding-left: 1.1em; max-width: none; }
/* Der Eingang der Vorschläge (Ticket 72): Auslöser und Modell stehen in kurzen Zellen und werden nicht getrennt. */
.ki-vorschlaege td { hyphens: manual; -webkit-hyphens: manual; }

/* Radar-Grafik (Ticket 33): Kreisausschnitte je Themengruppe, Ringe je Rechtsstand, Punkte je Vorgang.
   Das SVG hat nur Geometrie; Farbe, Schrift und Zustände kommen von hier. Punkte tragen den Ton
   ihres Rechtsstands wie die Abzeichen, die Zahl darin steht in der Farbe der Karte. */
.radar-filter .radar-ringwahl { display: grid; gap: 0.375rem; flex: 0 1 auto; }
.radar-filter .radar-ringwahl legend { float: left; margin: 0; font: var(--typo-subheadline); font-weight: 500; }
.radar-ringwahl-optionen { display: flex; flex-wrap: wrap; gap: 0 var(--abstand-4); clear: both; }
.radar-ringwahl-optionen .auswahl { min-height: 2.75rem; white-space: nowrap; }
.radar-filter label:not(.auswahl) { max-width: 13rem; }
.radar-filter button[hidden] { display: none; }
@media (max-width: 599.98px) {
  .radar-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-3); }
  .radar-filter label:not(.auswahl) { max-width: none; }
  .radar-filter .radar-ringwahl, .radar-filter button { grid-column: 1 / -1; }
  .radar-ringwahl-optionen { gap: 0 var(--abstand-3); }
  .radar-ringwahl-optionen .auswahl { min-height: 2.5rem; }
}

.radar-ergebnis { container-type: inline-size; transition: opacity var(--dauer-kurz) var(--kurve); }
.radar-ergebnis[aria-busy="true"] { opacity: 0.55; }
.radar { display: grid; gap: var(--abstand-6); align-items: center; padding: var(--abstand-6); }
@container (min-width: 62rem) {
  .radar { grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--abstand-8); padding: var(--abstand-6) var(--abstand-8); }
}
.radar-zeichnung { position: relative; min-width: 0; }
.radar-grafik { display: block; width: 100%; max-width: 47.5rem; height: auto; margin: 0 auto; overflow: visible; font-family: var(--schrift); -webkit-tap-highlight-color: transparent; }

.radar-feld { stroke: var(--flaeche-karte); stroke-width: 3; stroke-linejoin: round; transition: opacity var(--dauer-kurz) var(--kurve); }
.radar-feld[data-ring="aussen"] { fill: var(--diagramm-ring-aussen); }
.radar-feld[data-ring="mitte"] { fill: var(--diagramm-ring-mitte); }
.radar-feld[data-ring="innen"] { fill: var(--diagramm-ring-innen); }
.radar-feld[data-gedimmt] { opacity: 0.35; }

.radar-ausschnitt { font: var(--typo-fussnote); font-weight: 600; letter-spacing: 0; fill: var(--text); }
.radar-ausschnitt-anzahl { font: var(--typo-caption); font-variant-numeric: tabular-nums; fill: var(--text-sekundaer); }
.radar-ausschnitt[data-gedimmt] { opacity: 0.45; }
.radar-mitte-zahl { font: var(--typo-titel-1); letter-spacing: var(--spationierung-gross); fill: var(--text); text-anchor: middle; }
.radar-mitte-text { font: var(--typo-caption); fill: var(--text-sekundaer); text-anchor: middle; }

.radar-punkt { cursor: pointer; outline: none; transform-box: fill-box; transform-origin: center; transition: opacity var(--dauer-kurz) var(--kurve), transform var(--dauer-kurz) var(--kurve); }
.radar-punkt-ziel { fill: transparent; stroke: none; }
.radar-punkt-kreis { fill: var(--ton-neutral-text); stroke: var(--flaeche-karte); stroke-width: 2; }
.radar-punkt[data-ton="info"] .radar-punkt-kreis { fill: var(--ton-info-text); }
.radar-punkt[data-ton="indigo"] .radar-punkt-kreis { fill: var(--ton-indigo-text); }
.radar-punkt[data-ton="erfolg"] .radar-punkt-kreis { fill: var(--ton-erfolg-text); }
.radar-punkt-hoch { fill: none; stroke: var(--diagramm-hervorhebung); stroke-width: 2; }
.radar-punkt-nr { font: var(--typo-caption); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; fill: var(--flaeche-karte); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.radar-punkt:is(:hover, :focus-visible) { transform: scale(1.2); }
.radar-punkt:focus-visible .radar-punkt-ziel { stroke: var(--fokus); stroke-width: 2.5; }
.radar-punkte:has(.radar-punkt:is(:hover, :focus-visible)) .radar-punkt:not(:hover, :focus-visible) { opacity: 0.4; }

/* Hinweis beim Überfahren und im Fokus (portal.js); ohne Skript zeigt der Browser den <title> */
.radar-tipp {
  position: absolute; z-index: 5; left: 0; top: 0;
  display: grid; gap: 0.125rem;
  width: max-content; max-width: min(18rem, 80vw);
  padding: var(--abstand-3) var(--abstand-4);
  background: var(--flaeche-erhoeht);
  border-radius: var(--radius-m);
  box-shadow: var(--schatten-menue);
  font: var(--typo-fussnote); letter-spacing: 0; color: var(--text-sekundaer);
  pointer-events: none;
  animation: menue-auf var(--dauer-kurz) var(--kurve);
}
.radar-tipp[hidden] { display: none; }
.radar-tipp-kuerzel { font: var(--typo-headline); letter-spacing: var(--spationierung-text); color: var(--text); }
.radar-tipp-name { margin-bottom: var(--abstand-1); text-wrap: pretty; }
.radar-tipp-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); color: var(--text); font-weight: 500; }

/* Legende: je Ring die Farben seiner Stufen und die Zahl der Vorgänge */
.radar-legende { display: grid; gap: var(--abstand-4); align-content: center; font: var(--typo-subheadline); letter-spacing: var(--spationierung-text); }
.radar-legende-titel { margin: 0; font: var(--typo-headline); letter-spacing: var(--spationierung-text); color: var(--text); }
.radar-legende-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-4); }
.radar-legende-liste li + li { margin-top: 0; }
.radar-legende-ring { transition: opacity var(--dauer-kurz) var(--kurve); }
.radar-legende-ring[data-aus] { opacity: 0.45; }
.radar-legende-kopf { display: flex; align-items: center; gap: var(--abstand-3); margin: 0; max-width: none; font-weight: 600; color: var(--text); }
.radar-legende-name { display: grid; flex: 1; min-width: 0; }
.radar-legende-lage { font: var(--typo-fussnote); letter-spacing: 0; color: var(--text-sekundaer); }
.radar-legende-zahl { font: var(--typo-headline); font-variant-numeric: tabular-nums; color: var(--text); }
.radar-legende-toene { list-style: none; display: grid; gap: var(--abstand-1); margin: var(--abstand-2) 0 0; padding: 0 0 0 calc(1.5rem + var(--abstand-3)); color: var(--text-sekundaer); font: var(--typo-fussnote); letter-spacing: 0; }
.radar-legende-toene li { display: flex; align-items: center; gap: var(--abstand-2); }
.radar-legende-punkt { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--ton-neutral-text); }
.radar-legende-punkt[data-ton="info"] { background: var(--ton-info-text); }
.radar-legende-punkt[data-ton="indigo"] { background: var(--ton-indigo-text); }
.radar-legende-punkt[data-ton="erfolg"] { background: var(--ton-erfolg-text); }
.radar-legende-hoch { width: 0.75rem; height: 0.75rem; margin: 0 0.375rem; box-shadow: 0 0 0 2px var(--flaeche-karte), 0 0 0 4px var(--diagramm-hervorhebung); }
.radar-ringsymbol { flex: none; width: 1.5rem; height: 1.5rem; overflow: visible; }
.radar-ringsymbol circle { fill: none; stroke: var(--fuellung-stark); stroke-width: 2.5; }
.radar-ringsymbol:is([data-ring="aussen"]) circle[data-ring="aussen"],
.radar-ringsymbol:is([data-ring="mitte"]) circle[data-ring="mitte"],
.radar-ringsymbol:is([data-ring="innen"]) circle[data-ring="innen"] { stroke: var(--text); }

/* Liste der Kreisausschnitte: nur auf schmalen Flächen, wo die Namen nicht mehr um den Kreis passen */
.radar-ausschnitte { display: none; }
.radar-ausschnitte-liste { list-style: none; margin: var(--abstand-3) 0 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--abstand-2) var(--abstand-4); font: var(--typo-subheadline); }
.radar-ausschnitte-liste li { display: flex; align-items: center; gap: var(--abstand-2); margin: 0; }
.radar-ausschnitte-liste li[data-gedimmt] { opacity: 0.45; }
.radar-ausschnitte-name { flex: 1; min-width: 0; font-weight: 600; color: var(--text); }
.radar-ausschnitte-anzahl { font: var(--typo-fussnote); font-variant-numeric: tabular-nums; color: var(--text-sekundaer); white-space: nowrap; }
.radar-ausschnitt-symbol { flex: none; width: 1.25rem; height: 1.25rem; }
.radar-ausschnitt-symbol circle { fill: var(--fuellung-stark); }
.radar-ausschnitt-symbol path { fill: var(--text); }

/* Schmale Fläche: nur der Kreis, größere Punkte; die Namen stehen in der Liste darunter. Die
   viewBox (780 × 660, Kreis mit Radius 270 in der Mitte, internal/web/radargrafik.go) wird dafür
   auf den Kreis mit 10 Einheiten Rand beschnitten: 780/560 der Breite, links 110/560, oben 50/560. */
@container (max-width: 40rem) {
  .radar { padding: var(--abstand-4); gap: var(--abstand-5); }
  .radar-zeichnung { overflow: clip; }
  .radar-grafik { width: 139.29%; max-width: none; margin: -8.93% 0 -8.93% -19.64%; }
  .radar-beschriftungen, .radar-mitte-text { display: none; }
  .radar-mitte-zahl { font-size: 2.75rem; transform: translateY(0.375rem); }
  .radar-punkt-kreis { r: 14px; }
  .radar-punkt-hoch { r: 17.5px; stroke-width: 3; }
  .radar-punkt-ziel { r: 21px; }
  .radar-punkt-nr { font-size: 1.0625rem; }
  .radar-ausschnitte { display: block; }
}

/* Nummer in der Tabelle: derselbe Punkt wie in der Grafik */
.radar-nr {
  display: inline-grid; place-items: center;
  min-width: 1.5rem; height: 1.5rem; padding: 0 0.25rem;
  border-radius: var(--radius-voll);
  font: var(--typo-caption); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--flaeche-karte); background: var(--ton-neutral-text);
}
.radar-nr[data-ton="info"] { background: var(--ton-info-text); }
.radar-nr[data-ton="indigo"] { background: var(--ton-indigo-text); }
.radar-nr[data-ton="erfolg"] { background: var(--ton-erfolg-text); }
.radar-tabelle td.titel { min-width: 16rem; }
.radar-tabelle td.titel .meta { font-weight: 400; }
td:is(.radar-gruppe, .radar-ring) { hyphens: manual; -webkit-hyphens: manual; }
td.radar-gruppe { min-width: 10rem; }
td.radar-ring { min-width: 9.5rem; }
td.radar-stand { min-width: 12rem; }

/* Compliance-Gedächtnis (Ticket 48): Beziehungsgrafik und Balkendiagramm. Das SVG der Beziehungsgrafik hat nur
   Geometrie; Farbe, Schrift und Zustände kommen von hier. Welche Art ein Knoten ist, sagt auch sein Text
   („Fachbereich“, „verwandt: …“, „anwendbar · 09.11.2026“), die Form (Pille, Rechteck, scharfes Rechteck) und
   der Rand; welche Art eine Linie ist, sagt ihre Strichart (durchgezogen, gestrichelt, gepunktet). Die Farben
   der Ränder sind die Textfarben der Töne (≥ 5,7:1 auf der Karte in Hell und Dunkel). */
.beziehung { display: grid; gap: var(--abstand-6); padding: var(--abstand-6); }
.beziehung-zeichnung { min-width: 0; overflow-x: auto; border-radius: var(--radius-m); }
.beziehung-zeichnung:focus-visible { outline-offset: 2px; }
.beziehungsgrafik { display: block; width: 47.5rem; max-width: none; height: auto; margin: 0 auto; font-family: var(--schrift); }

.beziehung-kante { fill: none; stroke: var(--text-sekundaer); stroke-width: 1.5; }
.beziehung-kante[data-art="thema"] { stroke-width: 2.5; }
.beziehung-kante[data-art="verweis"] { stroke-width: 2; stroke-dasharray: 7 5; }
.beziehung-kante[data-art="themengruppe"] { stroke-width: 2.5; stroke-dasharray: 0.1 6; stroke-linecap: round; }

.knoten { cursor: pointer; outline: none; }
.knoten-kasten { fill: var(--flaeche-karte); stroke: var(--text-sekundaer); stroke-width: 2; transition: fill var(--dauer-kurz) var(--kurve); }
.knoten[data-art="mitte"] .knoten-kasten { stroke: var(--text); stroke-width: 3; }
.knoten[data-art="verwandt"] .knoten-kasten { stroke: var(--ton-info-text); }
.knoten[data-art="fachbereich"] .knoten-kasten { stroke: var(--ton-erfolg-text); }
.knoten[data-art="entscheidung"] .knoten-kasten { stroke: var(--ton-indigo-text); }
.knoten:hover .knoten-kasten { fill: color-mix(in srgb, var(--text) 6%, var(--flaeche-karte)); }
.knoten:focus-visible .knoten-kasten { stroke: var(--fokus); stroke-width: 4; }
.knoten-zeile { font: var(--typo-fussnote); font-weight: 600; letter-spacing: 0; fill: var(--text); }
.knoten-zusatz { font: var(--typo-caption); letter-spacing: 0; fill: var(--text-sekundaer); }
.beziehung-hinweis { font: var(--typo-caption); letter-spacing: 0; fill: var(--text-sekundaer); }

.beziehung-legende { display: flex; flex-wrap: wrap; gap: var(--abstand-4) var(--abstand-10); font: var(--typo-subheadline); letter-spacing: var(--spationierung-text); }
.beziehung-legende-gruppe { display: grid; gap: var(--abstand-2); align-content: start; }
.beziehung-legende-titel { margin: 0 0 var(--abstand-2); font: var(--typo-headline); letter-spacing: var(--spationierung-text); color: var(--text); }
.beziehung-legende-liste { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: var(--abstand-2); }
.beziehung-legende-liste li { display: flex; align-items: center; gap: var(--abstand-3); margin: 0; }
.beziehung-symbol { flex: none; width: 1.75rem; height: 1.125rem; overflow: visible; }
.beziehung-symbol rect { fill: var(--flaeche-karte); stroke: var(--text-sekundaer); stroke-width: 2; }
.beziehung-symbol[data-art="mitte"] rect { stroke: var(--text); stroke-width: 3; }
.beziehung-symbol[data-art="verwandt"] rect { stroke: var(--ton-info-text); }
.beziehung-symbol[data-art="fachbereich"] rect { stroke: var(--ton-erfolg-text); }
.beziehung-symbol[data-art="entscheidung"] rect { stroke: var(--ton-indigo-text); }
@media (max-width: 599.98px) {
  .beziehung { padding: var(--abstand-4); gap: var(--abstand-4); }
}

/* Balkendiagramm: je Zeile Name, Balken und Zahl. Der Balken ist ein kleines SVG (Spur 0 bis 100) und streckt sich
   auf die Breite der Spalte; Name und Zahl sind Text und schrumpfen nicht. Alle Balken einer Skala beginnen
   an derselben Kante. */
.balkendiagramm { display: grid; gap: var(--abstand-4); padding: var(--abstand-6); }
.balken-titel { font: var(--typo-headline); letter-spacing: var(--spationierung-text); color: var(--text); }
.balken-liste { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: var(--abstand-3); }
.balken-zeile { display: grid; grid-template-columns: 12rem minmax(0, 1fr) 3rem; align-items: center; gap: var(--abstand-3); margin: 0; }
.balken-name { font: var(--typo-subheadline); letter-spacing: var(--spationierung-text); color: var(--text); }
.balken-wert { font: var(--typo-headline); font-variant-numeric: tabular-nums; text-align: right; color: var(--text); }
.balken-spur { display: block; width: 100%; height: 1.125rem; border-radius: var(--radius-xs); overflow: hidden; }
.balken-grund { fill: var(--fuellung); }
.balken { fill: var(--diagramm-1); }
@media (max-width: 599.98px) {
  .balkendiagramm { padding: var(--abstand-4); }
  .balken-zeile { grid-template-columns: minmax(0, 1fr) auto; gap: var(--abstand-1) var(--abstand-3); }
  .balken-spur { grid-column: 1 / -1; grid-row: 2; }
}
@media (forced-colors: active) {
  .balken { fill: Highlight; }
  .balken-grund { fill: Canvas; stroke: CanvasText; stroke-width: 1; vector-effect: non-scaling-stroke; }
  .knoten-kasten, .beziehung-symbol rect { stroke: CanvasText; }
  .beziehung-kante { stroke: CanvasText; }
}

/* Vergleich (Ticket 42): zwei Fassungen eines Textes, Absatz für Absatz nebeneinander, schmal
   untereinander. Markiert wird nie nur mit Farbe: Eingefügtes ist unterstrichen, Gelöschtes
   durchgestrichen (WCAG 1.4.1), dazu kommt die Tönung. Der Lesetext hat Fließtextgröße und je Spalte
   höchstens 70 Zeichen. Die Spalten richten sich nach der Breite der Fläche, nicht des Fensters. */
ins, del, .einfuegung, .loeschung {
  color: inherit;
  padding: 0 0.1em;
  text-decoration-thickness: 0.125em;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: none;
  border-radius: var(--radius-xs);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
ins, .einfuegung { background: var(--ton-erfolg-flaeche); text-decoration-line: underline; text-decoration-color: var(--ton-erfolg-text); }
del, .loeschung { background: var(--ton-fehler-flaeche); text-decoration-line: line-through; text-decoration-color: var(--ton-fehler-text); }

.vergleich-legende { max-width: none; margin: 0 0 var(--abstand-4); font: var(--typo-subheadline); letter-spacing: var(--spationierung-text); color: var(--text-sekundaer); }
.vergleich { container-type: inline-size; margin: 0 0 var(--abstand-8); background: var(--flaeche-karte); border-radius: var(--radius-l); box-shadow: var(--schatten-karte); }
.vergleich-leiste {
  position: sticky; top: 3.5rem; z-index: 20;
  padding: var(--abstand-3) var(--abstand-5) 0;
  background: var(--flaeche-karte);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  border-bottom: 1px solid var(--trennlinie);
}
.vergleich-bedienung { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-2) var(--abstand-4); padding-bottom: var(--abstand-3); }
.vergleich-stand { margin: 0; font: var(--typo-subheadline); font-weight: 600; letter-spacing: var(--spationierung-text); font-variant-numeric: tabular-nums; }
.vergleich-spalten { display: none; }
.vergleich-spalten p { margin: 0; padding: var(--abstand-2) 0; font: var(--typo-fussnote); letter-spacing: 0; color: var(--text-sekundaer); hyphens: manual; }
.vergleich-spalten strong { color: var(--text); }
.vergleich-zeile { padding: var(--abstand-4) var(--abstand-5); border-top: 1px solid var(--trennlinie); border-left: 3px solid transparent; scroll-margin-top: 5.5rem; }
.vergleich-leiste + .vergleich-zeile { border-top: 0; }
.vergleich-zeile:focus { outline: none; background: var(--zustand-hover); }
.vergleich-zeile[data-art="geaendert"] { border-left-color: var(--ton-warnung-text); }
.vergleich-zeile[data-art="neu"] { border-left-color: var(--ton-erfolg-text); }
.vergleich-zeile[data-art="geloescht"] { border-left-color: var(--ton-fehler-text); }
.vergleich-kopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-1) var(--abstand-3); max-width: none; margin: 0 0 var(--abstand-3); font: var(--typo-subheadline); letter-spacing: var(--spationierung-text); }
.vergleich-kopfzeile .meta { margin: 0; }
.vergleich-kopfzeile a { margin-left: auto; font-weight: 500; }
.vergleich-seiten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand-4); }
.vergleich-seite { min-width: 0; }
.vergleich-etikett { margin: 0 0 var(--abstand-1); font: var(--typo-fussnote); font-weight: 600; letter-spacing: 0; color: var(--text-sekundaer); }
.vergleich-text { margin: 0; font: var(--typo-koerper); letter-spacing: var(--spationierung-text); overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; } /* Wörter bleiben ganz: Wer vergleicht, liest jedes einzeln. */
.vergleich-leer { margin: 0; font: var(--typo-subheadline); letter-spacing: var(--spationierung-text); color: var(--text-sekundaer); }
.vergleich-luecke { max-width: none; margin: 0; padding: var(--abstand-2) var(--abstand-5); border-top: 1px solid var(--trennlinie); background: var(--fuellung); font: var(--typo-fussnote); letter-spacing: 0; text-align: center; color: var(--text-sekundaer); }
.vergleich > :last-child { border-radius: 0 0 var(--radius-l) var(--radius-l); }
/* Breite Fläche: die Fassungen stehen nebeneinander, die Namen der Fassungen im Kopf statt in jeder Zeile */
@container (min-width: 52rem) {
  .vergleich-seiten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-8); }
  .vergleich-etikett { display: none; }
  .vergleich-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-8); padding-left: 3px; }
}
/* Schmale Fläche: unveränderte Absätze stehen nur einmal da, die Fassungen untereinander */
@container (max-width: 51.99rem) {
  .vergleich-zeile[data-art="gleich"] .vergleich-seite:first-child { display: none; }
  .vergleich-zeile[data-art="gleich"] .vergleich-etikett { display: none; }
  .vergleich-zeile { padding: var(--abstand-4); }
  .vergleich-leiste { padding-inline: var(--abstand-4); }
  .vergleich-luecke { padding-inline: var(--abstand-4); }
}
@media (max-width: 599.98px) {
  /* Schmal bliebe von der Leiste zu wenig Platz zum Lesen; jede Änderung führt selbst zur nächsten. */
  .vergleich-leiste { position: static; }
  .vergleich-bedienung .aktionen { width: 100%; }
  .vergleich-bedienung .aktionen .knopf { flex: 1 1 auto; }
}

/* Synopse (Ticket 42): Begriffe als Zeilen, Regelwerke als Spalten, in jeder Zelle ein Auszug.
   Der Auszug ist ein Zitat: Anführungszeichen der Sprache des Textes („…“ deutsch, “…” englisch), darunter
   Fundstelle, Quelle, Stand und Tag der Prüfung. Geänderter Wortlaut trägt dieselbe Markierung wie im
   Fassungsvergleich (ins, del). Schmal steht jede Zeile als Karte da, und jede Zelle nennt ihr Regelwerk. */
.synopse thead th { min-width: 18rem; }
.synopse thead th a { display: block; font: var(--typo-subheadline); font-weight: 600; letter-spacing: var(--spationierung-text); hyphens: manual; }
.synopse thead th .meta { margin: 0; font: var(--typo-fussnote); letter-spacing: 0; font-weight: 400; }
.synopse tbody tr:hover { background: transparent; }
.synopse tbody tr:hover > :first-child { border-radius: 0; }
.synopse th.synopse-begriff { min-width: 12rem; width: 12rem; }
.synopse tbody th.synopse-begriff { font: var(--typo-callout); font-weight: 600; letter-spacing: var(--spationierung-text); color: var(--text); hyphens: manual; -webkit-hyphens: manual; }
.synopse tbody th.synopse-begriff a:not(:hover) { color: var(--text); }
.synopse tbody th.synopse-begriff a:visited:not(:hover) { color: var(--akzent-besucht); }
.synopse tbody th.synopse-begriff .meta { display: block; margin-top: var(--abstand-1); font: var(--typo-fussnote); font-weight: 400; letter-spacing: 0; }
.synopse tbody td { min-width: 18rem; padding-bottom: var(--abstand-4); }
@media (min-width: 600px) {
  .synopse th.synopse-begriff { position: sticky; left: 0; z-index: 1; background: var(--flaeche-karte); }
}
.synopse-regelwerk { display: none; margin: 0 0 var(--abstand-1); font: var(--typo-fussnote); font-weight: 600; letter-spacing: 0; color: var(--text-sekundaer); hyphens: manual; }
.auszug { margin: 0 0 var(--abstand-2); }
.auszug-text { margin: 0; padding: 0; quotes: "„" "“" "‚" "‘"; }
.auszug-text:lang(en) { quotes: "“" "”" "‘" "’"; }
/* Keine automatische Silbentrennung im Zitat: Sie trennt Fachbegriffe wie „Compliance“ nach deutschen Regeln falsch. */
.auszug-text p { margin: 0 0 var(--abstand-2); overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; }
.auszug-text p:last-child { margin-bottom: 0; }
.auszug-text p:first-child::before { content: open-quote; }
.auszug-text p:last-child::after { content: close-quote; }
.auszug figcaption { margin-top: var(--abstand-2); }
.auszug-fundstelle { max-width: none; margin: 0; font: var(--typo-fussnote); font-weight: 600; letter-spacing: 0; color: var(--text); hyphens: manual; -webkit-hyphens: manual; }
.auszug .meta { margin: var(--abstand-1) 0 0; font: var(--typo-fussnote); letter-spacing: 0; }
.auszug-stand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-1) var(--abstand-2); max-width: none; margin: 0 0 var(--abstand-2); }
.auszug-stand:not(:has(*)) { display: none; }
blockquote + .auszug-stand { margin-top: var(--abstand-2); }
.abschnitt > .aktionen { margin: 0 0 var(--abstand-4); }
.auszug-stand .meta { margin: 0; font: var(--typo-fussnote); letter-spacing: 0; }
.auszug-frueher { margin: 0 0 var(--abstand-2); font: var(--typo-fussnote); letter-spacing: 0; }
.auszug-frueher > summary { cursor: pointer; color: var(--akzent-text); font-weight: 500; border-radius: var(--radius-xs); }
.auszug-frueher .auszug-text { margin-top: var(--abstand-2); padding: var(--abstand-3); background: var(--fuellung); border-radius: var(--radius-s); font: var(--typo-subheadline); letter-spacing: var(--spationierung-text); }
.auszug-frueher .meta { margin-top: var(--abstand-2); }
.auszug-aktion { max-width: none; margin: 0; font: var(--typo-fussnote); font-weight: 500; letter-spacing: 0; }
td .auszug-text { font: var(--typo-subheadline); letter-spacing: var(--spationierung-text); }
@media (max-width: 599.98px) {
  .synopse, .synopse tbody, .synopse tr, .synopse td, .synopse th { display: block; width: auto; }
  .synopse thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .synopse tr { padding: var(--abstand-4); border-bottom: 1px solid var(--trennlinie); }
  .synopse tr:last-child { border-bottom: 0; }
  .synopse tbody th.synopse-begriff, .synopse tbody td { min-width: 0; width: auto; padding: 0; border: 0; }
  .synopse tbody th.synopse-begriff { margin-bottom: var(--abstand-2); font: var(--typo-headline); }
  .synopse tbody td { padding-top: var(--abstand-3); }
  .synopse-regelwerk { display: block; }
}

/* Eingebettete Vorschau (PDF, HTML einer Mail) */
.vorschau { display: block; width: 100%; height: min(80vh, 60rem); border: 0; border-radius: var(--radius-l); background: var(--flaeche-karte); box-shadow: var(--schatten-karte); margin: 0 0 var(--abstand-6); }

/* Fortschritt: läuft etwas länger, zeigt eine <progress> den Stand, mit Worten daneben (HIG Progress indicators) */
.fortschritt { display: grid; gap: var(--abstand-2); margin: 0 0 var(--abstand-6); padding: var(--abstand-4); background: var(--flaeche-karte); border-radius: var(--radius-l); box-shadow: var(--schatten-karte); }
.fortschritt > p { margin: 0; }
.fortschritt-balken {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 0.5rem; border: 0; border-radius: var(--radius-voll);
  background: var(--ton-neutral-flaeche); color: var(--akzent-flaeche);
  overflow: hidden;
}
.fortschritt-balken::-webkit-progress-bar { background: var(--ton-neutral-flaeche); }
.fortschritt-balken::-webkit-progress-value { background: var(--akzent-flaeche); border-radius: var(--radius-voll); transition: width var(--dauer-mittel) var(--kurve); }
.fortschritt-balken::-moz-progress-bar { background: var(--akzent-flaeche); border-radius: var(--radius-voll); }

/* ---------------------------------------------------------------- 5. Alte Klassennamen */

.liste { /* Grundform der Tabelle */ }
.liste .url { font-size: 0.875rem; }
.liste .datum { white-space: nowrap; }
.herausgeber { color: var(--text-sekundaer); }
.pull-ergebnis { margin: 0 0 var(--abstand-6); }
.pull-ergebnis > p:not(.fehler) { font-weight: 600; }
.pruefung { margin: 0 0 var(--abstand-6); }
.merkmal { margin: 0 0 var(--abstand-10); }
.volltext { margin: 0 0 var(--abstand-8); }
.volltext p { white-space: pre-line; }
.kommentar-text { margin: 0; white-space: pre-line; }
.fliesstext.karte { max-width: 48rem; }
table.profil { table-layout: fixed; }
table.profil th:nth-child(1) { width: 30%; }
table.profil th:nth-child(2), table.profil th:nth-child(3) { width: 30%; }
table.profil th:nth-child(4) { width: 10%; }
.mail th { width: 14rem; }
.grund { color: var(--text-sekundaer); }
.mailtext { white-space: pre-wrap; background: var(--flaeche-karte); padding: var(--abstand-5) var(--abstand-6); font: var(--typo-callout); letter-spacing: var(--spationierung-text); border-radius: var(--radius-l); box-shadow: var(--schatten-karte); max-width: 52rem; margin: 0 0 var(--abstand-8); }
.mailhtml { width: 100%; min-height: 24rem; border: 0; border-radius: var(--radius-l); background: #fff; box-shadow: var(--schatten-karte); }
.loeschen { margin: 0 0 var(--abstand-8); }
td .loeschen, .aktionen .loeschen, td form { margin: 0; }
tr:has(> td.aktion form) > td { vertical-align: middle; }
.navigation { display: flex; flex-wrap: wrap; gap: var(--abstand-3); }

/* ---------------------------------------------------------------- 6. Anpassungen */

/* Mittlere und schmale Fenster: Seitenleiste als Schublade (M3 modal navigation drawer) */
@media (max-width: 959.98px) {
  :root { --rand-seite: 1.5rem; }
  .portal { display: block; }
  .seitenleiste {
    position: fixed; inset: 0 auto 0 0; z-index: 60;
    width: min(20rem, 86vw);
    height: 100dvh;
    padding-top: max(var(--abstand-5), env(safe-area-inset-top));
    background: var(--flaeche-erhoeht);
    border-right: 0;
    box-shadow: var(--schatten-menue);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform var(--dauer-mittel) var(--kurve-raus), visibility 0s linear var(--dauer-mittel);
  }
  :root[data-menue-offen] .seitenleiste { transform: none; visibility: visible; transition: transform var(--dauer-mittel) var(--kurve), visibility 0s; }
  .seitenleiste-schliessen { display: inline-flex; }
  .seitenleiste-schleier { position: fixed; inset: 0; z-index: 50; background: var(--schleier); animation: schleier-auf var(--dauer-mittel) var(--kurve); }
  .kopfleiste-menue { display: inline-flex; margin-left: calc(-1 * var(--abstand-2)); }
  .kopfleiste-marke { display: block; }
  .kopfleiste-titel { display: none; }
}
@keyframes schleier-auf { from { opacity: 0; } }
@media (min-width: 960px) { .seitenleiste-schleier { display: none; } }

@media (max-width: 599.98px) {
  :root { --rand-seite: 1rem; }
  body { font-size: 1.0625rem; }
  .seitenkopf { margin-bottom: var(--abstand-6); }
  .seitenkopf .aktionen { width: 100%; }
  .karte, .formular { padding: var(--abstand-5) var(--abstand-4); }
  .angaben { grid-template-columns: minmax(0, 1fr); padding-inline: var(--abstand-4); }
  .angaben dt { padding-bottom: 0; }
  .angaben dd { border-top: 0; padding-top: 0.125rem; }
  .filter label { max-width: none; flex-basis: 100%; }
  .filter .filter-suchzeile { flex-wrap: wrap; }
  .filter .filter-suchzeile button { width: 100%; }
  th:first-child, td:first-child { padding-left: var(--abstand-4); }
  th:last-child, td:last-child { padding-right: var(--abstand-4); }
  td.titel { min-width: 14rem; }
  /* Gestapelte Liste: jede Zeile eine Karte, Zellen untereinander (Meldungen, Postausgang) */
  :is(table.stapel, table.einordnung), :is(table.stapel, table.einordnung) :is(tbody, tr, td) { display: block; width: auto; }
  :is(table.stapel, table.einordnung) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  :is(table.stapel, table.einordnung) tr { padding: var(--abstand-3) var(--abstand-4); border-bottom: 1px solid var(--trennlinie); }
  :is(table.stapel, table.einordnung) tr:last-child { border-bottom: 0; }
  :is(table.stapel, table.einordnung) td { padding: 0.125rem 0; border: 0; min-width: 0; max-width: none; }
  table.stapel td.aktion { text-align: left; width: auto; padding-top: var(--abstand-2); }
  table.stapel td:is(.datum, .countdown, .knapp) { display: inline-block; margin-right: var(--abstand-3); }
  .tabelle-rahmen > table:not(.stapel, .einordnung) :is(td, th) { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
  table.pruefspur { min-width: 64rem; }
  table.stapel td:empty { display: none; }
  /* Tabellen anderer Seiten ohne Rahmen rollen waagerecht, statt die Seite zu sprengen */
  .inhalt > table:not(.stapel), .inhalt > section > table:not(.stapel) { display: block; overflow-x: auto; }
}

@media (pointer: coarse) {
  button, .knopf { min-height: 2.75rem; }
  .nav-eintrag, .nav-gruppe-titel { min-height: 2.75rem; }
  .segmente button { min-height: 2.5rem; }
}

/* Risikomatrix (Ticket 44): zwei Raster aus Auswirkung (Zeilen) und Eintrittswahrscheinlichkeit (Spalten). Jede Zelle nennt ihren
   Wert als Zahl; die Stufe zeigt die Tönung (niedrig neutral, mittel Warnung, hoch Akzent, kritisch Fehler auf Akzent, also am
   kräftigsten) und, für Hilfstechnik, ein Wort (.nur-sr). Ein kräftiger Rand in der Hervorhebungsfarbe markiert jede Zelle über dem
   Risikoappetit, ein Warnsymbol mit Wort jedes Risiko darüber. Risiken stehen als Verweise in Textfarbe: Auf der Tönung hat sie den
   größten Kontrast, die Verweisfarbe nicht. */
.nur-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.matrix-rahmen { margin-bottom: var(--abstand-6); }
table.matrix { table-layout: fixed; min-width: 44rem; background: transparent; }
.matrix :is(th, td) { padding: var(--abstand-2); border-bottom: 0; }
.matrix tbody tr:hover { background: transparent; }
.matrix thead th { text-align: center; vertical-align: middle; border-bottom: 0; }
.matrix thead th:first-child, .matrix tbody th { width: 9.5rem; text-align: left; vertical-align: middle; white-space: nowrap; background: var(--flaeche-karte); position: sticky; left: 0; z-index: 1; }
.matrix tbody th { padding-left: var(--abstand-4); font-weight: 500; }
.matrix-achse { display: block; font: var(--typo-caption); font-weight: 500; letter-spacing: 0; color: var(--text-sekundaer); text-align: left; }
.matrix-stufe { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.matrix-name { font: var(--typo-caption); font-weight: 500; letter-spacing: 0; color: var(--text-sekundaer); }
.matrix thead .matrix-name { display: block; }
.matrix-zelle { height: 4.5rem; vertical-align: top; border: 2px solid var(--flaeche-karte); }
.matrix-zelle[data-stufe="niedrig"] { background: var(--ton-neutral-flaeche); }
.matrix-zelle[data-stufe="mittel"] { background: var(--ton-warnung-flaeche); }
.matrix-zelle[data-stufe="hoch"] { background: var(--ton-akzent-flaeche); }
.matrix-zelle[data-stufe="kritisch"] { background: linear-gradient(var(--ton-fehler-flaeche), var(--ton-fehler-flaeche)), linear-gradient(var(--ton-akzent-flaeche), var(--ton-akzent-flaeche)); }
.matrix-zelle[data-ueber] { outline: 2px solid var(--diagramm-hervorhebung); outline-offset: -2px; }
.matrix-wert { display: block; margin-bottom: var(--abstand-1); font: var(--typo-caption); letter-spacing: 0; color: var(--text-sekundaer); font-variant-numeric: tabular-nums; }
.matrix-risiko, .matrix-risiko:visited { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0 var(--abstand-2) 0 0; font: var(--typo-fussnote); font-weight: 600; letter-spacing: 0; color: var(--text); text-decoration: underline; text-underline-offset: 0.18em; }
.matrix-risiko .symbol { width: 0.875rem; height: 0.875rem; color: var(--ton-fehler-text); }
td.massnahmen-zelle { min-width: 13rem; hyphens: manual; -webkit-hyphens: manual; }
.matrix-legende { list-style: none; display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-6); margin: 0 0 var(--abstand-8); padding: 0; max-width: none; }
.matrix-legende li { display: flex; align-items: center; gap: var(--abstand-2); margin: 0; }
@media (forced-colors: active) { .matrix-zelle[data-ueber] { outline-color: Highlight; } }

/* Reduzierte Bewegung: keine Verschiebungen und Skalierungen, nur Überblendungen (HIG Motion) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  button:active, .knopf:active { transform: none; }
  .kopfleiste-titel { animation: none; opacity: 1; }
  .kopfleiste { animation: none; border-bottom-color: var(--trennlinie); }
}

/* Reduzierte Transparenz: deckende Flächen statt Glas */
@media (prefers-reduced-transparency: reduce) {
  .kopfleiste { background: var(--flaeche-grund); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Mehr Kontrast: kräftigere Linien und Ränder */
@media (prefers-contrast: more) {
  :root { --trennlinie: rgb(60 60 67 / 0.4); --text-sekundaer: #48484a; --rand-feld: #6c6c70; }
  :root[data-theme="dark"] { --trennlinie: rgb(150 150 160 / 0.6); --text-sekundaer: #c7c7cc; --rand-feld: #a1a1a6; }
}

/* Erzwungene Farben (Windows-Kontrastmodus): Systemfarben, sichtbare Ränder */
@media (forced-colors: active) {
  .nav-eintrag[aria-current="page"] { outline: 2px solid CanvasText; }
  .bereichsreiter a[aria-current="page"] { outline: 2px solid CanvasText; }
  .nav-eintrag::before, .nav-gruppe-titel::before, .symbol, .hinweis::before, .leer::before { background: CanvasText; forced-color-adjust: none; }
  button, .knopf, .abzeichen { border: 1px solid ButtonText; }
  .segmente button[aria-pressed="true"] { outline: 2px solid Highlight; }
}

@media print {
  .seitenleiste, .kopfleiste, .sprungmarke, .aktionen, form { display: none !important; }
  .portal { display: block; }
  body, table, .karte { background: #fff; box-shadow: none; color: #000; }
  a { color: #000; text-decoration: underline; }
}