/* Stakeholdermapping — Gestaltung im Erscheinungsbild der Initiative.
 *
 * Grundlage ist das WordPress-Theme des Vereins (idt-deutschlandtakt,
 * style.css): dieselben Marken- und Neutralfarben, dieselbe Schrift, dieselben
 * Radien, Rahmenstärken, Schatten und Bewegungszeiten. Abschnitt 1 und 2 sind
 * deshalb wörtlich das Token-System des Themes — wer es dort ändert, gleicht
 * es hier ab. Alles Weitere baut nur noch darauf auf und erfindet keine Farbe
 * und keinen Wert dazu.
 *
 * Die Anwendung ist ein Werkzeug, kein Auftritt. Die Schriftgrößen sind
 * kleiner und die Abstände enger als im Theme, damit eine Bewertungstabelle
 * auf den Schirm passt. Die Marke trägt sich stattdessen über die
 * wiederkehrenden Stilelemente: Versalien-Etiketten in weiter Sperrung, harte
 * Rahmen mit versetztem Schatten, Pillen, den Verlauf Violett→Cyan und den
 * Taktstrich, der im Logo über der Wortmarke liegt.
 *
 * Zwei Festlegungen aus PROMPT_Stakeholder-App.md (GESTALTUNG) gelten
 * unverändert weiter:
 *
 * — Haltung wird durch Farbe UND Form kodiert (.marke), niemals durch Farbe
 *   allein. Die Paarung Blauviolett/Rot bleibt auch bei Rot-Grün-Schwäche
 *   unterscheidbar, weil der Blauanteil die Unterscheidung trägt; die Form
 *   trägt sie ohnehin.
 * — Hell- und Dunkelfassung. Die Dunkelfassung ist nichts Hinzuerfundenes:
 *   sie nimmt die Ink-Fläche des Themes (Fußzeile, dunkler Einschub) als
 *   Grundfläche und hellt die Markenfarben nur so weit auf, dass sie darauf
 *   lesbar bleiben.
 */

/* =============================================================================
   1) SCHRIFT — Inter (Variable), selbst mitgeliefert
   -----------------------------------------------------------------------------
   Dieselbe Datei wie im Theme, hier neben der Seite (kein Drittanbieter, kein
   Nachladen von außen — test_oberflaeche.py prüft das). Nur der aufrechte
   Schnitt: das Werkzeug setzt keine Kursive, die zweite Datei wären 380 kB
   ohne Gegenwert. Fällt die Schrift aus, greift die Systemschrift.
   ============================================================================= */
@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("InterVariable.woff2") format("woff2");
}

/* =============================================================================
   2) MARKEN-TOKEN — aus idt-deutschlandtakt/style.css
   ============================================================================= */
:root {
  /* ---- Brand core ------------------------------------------------------ */
  --idt-paper:   #FFF6F0;
  --idt-ink:     #00373C;
  --idt-yellow:  #FFFF96;
  --idt-cyan:    #00DCFA;
  --idt-violet:  #6E50FA;
  --idt-gray:    #585857;

  /* ---- Neutral-Ramp ---------------------------------------------------- */
  --idt-paper-2: #FBEDE6;
  --idt-paper-3: #F3E2DA;
  --idt-line:    #E2D3CB;
  --idt-line-strong: #C9B6AC;
  --idt-ink-70:  #3A6068;
  --idt-on-ink-muted: #8FB4BC;

  /* ---- Akzent-Tints und Zustände --------------------------------------- */
  --idt-yellow-soft:  #FFFDDB;
  --idt-violet-hover: #5A3DE6;

  /* ---- Schrift --------------------------------------------------------- */
  --font-sans: "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;

  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --ls-tight:   -0.015em;
  --ls-wide:     0.04em;
  --ls-label:    0.12em;

  /* ---- Radien und Rahmen ----------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-pill: 999px;

  --bw-hair:  1px;
  --bw-base:  1.5px;
  --bw-frame: 2px;

  /* ---- Bewegung -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;

  /* ---- Der Verlauf des Logos ------------------------------------------- */
  --verlauf: linear-gradient(90deg, var(--idt-violet), var(--idt-cyan));
}

/* =============================================================================
   3) WERKZEUG-EBENE, HELLFASSUNG
   -----------------------------------------------------------------------------
   Die Namen der Anwendung, den Marken-Token zugeordnet. Der übrige Stil nennt
   nur noch diese Namen; ein Wechsel der Fassung tauscht deshalb genau diesen
   einen Block aus. `--ok` wird auch aus dem Skript heraus gesetzt
   (ansicht_stammdaten.js) und darf nicht umbenannt werden.
   ============================================================================= */
:root {
  color-scheme: light;

  /* Flächen: die Seite liegt eine Stufe tiefer als die Karten darauf. */
  --plane:   var(--idt-paper-2);
  --surface: var(--idt-paper);
  --tief:    var(--idt-paper-3);

  /* Schrift */
  --ink:   var(--idt-ink);
  --ink2:  var(--idt-ink-70);
  --muted: var(--idt-gray);

  /* Linien: --grid trennt Tabellenzeilen, --axis rahmt Eingaben,
     --kante ist der harte Rahmen des Themes (Knöpfe, Kästen, Fenster). */
  --grid:  var(--idt-line);
  --axis:  var(--idt-line-strong);
  --ring:  rgba(0, 55, 60, .14);
  --kante: var(--idt-ink);

  /* Bedeutungen. --pro ist zugleich die Primärfarbe der Bedienung.
     --con und --ok sind die Statusfarben des Themes (--idt-danger #D64545,
     --idt-success #1F8A5B), um ein Achtel zum Ink hin abgedunkelt: als Text
     auf Papier erreichen sie sonst den Kontrast nicht, den eine
     Feldbeschriftung in 10 Pixeln braucht. */
  --pro:     var(--idt-violet);
  --con:     #BC4344;
  --ok:      #1A7D56;
  --neutral: var(--idt-gray);

  /* Gefüllte Primärflächen: die Farbe beim Überfahren und die Schrift darauf.
     Beides dreht sich in der Dunkelfassung um — dort ist --pro die helle
     Farbe, der Zeiger hellt weiter auf und die Schrift darauf wird dunkel. */
  --pro-hover: var(--idt-violet-hover);
  --auf-pro:   var(--idt-paper);

  /* Quadrantenflächen der Matrix: Q1/Q2 im Violett der Marke (dort steht,
     wer Macht hat), Q3/Q4 im Ink. Sehr blass — sie hinterlegen, sie färben
     nicht. Der Quadrant steht zusätzlich als Kürzel in der Ecke (.qtag). */
  --q1: rgba(110, 80, 250, .10);
  --q2: rgba(110, 80, 250, .045);
  --q3: rgba(0, 55, 60, .075);
  --q4: rgba(0, 55, 60, .03);

  /* --fill markiert, was beschreibbar ist: Eingabefelder im Detailfenster,
     die Zielzelle beim Ziehen, die Vorschau. */
  --fill: var(--idt-yellow-soft);
  --vert: rgba(188, 67, 68, .05);

  /* Schatten. Der versetzte Blockschatten ist das Kennzeichen des Themes
     (--shadow-block); er trägt hier die Fenster und die Konfliktanzeige. */
  --schatten-1: 0 1px 2px rgba(0, 50, 60, .07);
  --schatten-2: 0 4px 16px rgba(0, 50, 60, .10);
  --schatten-3: 0 12px 40px rgba(0, 50, 60, .18);
  --block:      4px 4px 0 var(--kante);
  --block-gross: 6px 6px 0 var(--kante);
}

/* =============================================================================
   4) DUNKELFASSUNG ("Ink") — einmal nach Systemeinstellung, einmal nach
   ausdrücklicher Wahl. Zwei Regeln, weil eine Medienabfrage nicht mit einem
   einfachen Selektor in derselben Regel stehen kann.
   ============================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    color-scheme: dark;

    --plane:   #002A2E;
    --surface: var(--idt-ink);
    --tief:    #002326;

    --ink:   var(--idt-paper);
    --ink2:  #B9D4D9;
    --muted: var(--idt-on-ink-muted);

    --grid:  rgba(255, 246, 240, .13);
    --axis:  rgba(255, 246, 240, .30);
    --ring:  rgba(255, 246, 240, .16);
    --kante: rgba(255, 246, 240, .55);

    /* Aufgehellt bis zum Kontrast 4.5 gegen die Ink-Fläche. */
    --pro:     #AD9BFF;
    --con:     #F08585;
    --ok:      #4FBF8B;
    --neutral: var(--idt-on-ink-muted);

    --pro-hover: #C7BCFF;
    --auf-pro:   var(--idt-ink);

    --q1: rgba(173, 155, 255, .17);
    --q2: rgba(173, 155, 255, .07);
    --q3: rgba(143, 180, 188, .13);
    --q4: rgba(143, 180, 188, .055);

    --fill: #0B4650;
    --vert: rgba(240, 133, 133, .10);

    --schatten-1: 0 1px 2px rgba(0, 0, 0, .40);
    --schatten-2: 0 4px 16px rgba(0, 0, 0, .45);
    --schatten-3: 0 12px 40px rgba(0, 0, 0, .55);
    /* Auf dunklem Grund wirft ein heller Blockschatten nicht, er blendet.
       Er kehrt sich um und wird zum tiefsten Ton der Fassung. */
    --block:       4px 4px 0 #001A1D;
    --block-gross: 6px 6px 0 #001A1D;
  }
}

:root[data-thema="dunkel"] {
  color-scheme: dark;

  --plane:   #002A2E;
  --surface: var(--idt-ink);
  --tief:    #002326;

  --ink:   var(--idt-paper);
  --ink2:  #B9D4D9;
  --muted: var(--idt-on-ink-muted);

  --grid:  rgba(255, 246, 240, .13);
  --axis:  rgba(255, 246, 240, .30);
  --ring:  rgba(255, 246, 240, .16);
  --kante: rgba(255, 246, 240, .55);

  --pro:     #AD9BFF;
  --con:     #F08585;
  --ok:      #4FBF8B;
  --neutral: var(--idt-on-ink-muted);

  --pro-hover: #C7BCFF;
  --auf-pro:   var(--idt-ink);

  --q1: rgba(173, 155, 255, .17);
  --q2: rgba(173, 155, 255, .07);
  --q3: rgba(143, 180, 188, .13);
  --q4: rgba(143, 180, 188, .055);

  --fill: #0B4650;
  --vert: rgba(240, 133, 133, .10);

  --schatten-1: 0 1px 2px rgba(0, 0, 0, .40);
  --schatten-2: 0 4px 16px rgba(0, 0, 0, .45);
  --schatten-3: 0 12px 40px rgba(0, 0, 0, .55);
  --block:       4px 4px 0 #001A1D;
  --block-gross: 6px 6px 0 #001A1D;
}

/* =============================================================================
   5) GRUNDLAGEN
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "calt" 1;
}

[hidden] { display: none !important; }

::selection { background: var(--idt-yellow); color: var(--idt-ink); }
:focus-visible { outline: var(--bw-frame) solid var(--pro); outline-offset: 2px; }

a { color: var(--pro); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; }

img { max-width: 100%; display: block; }

/* Überschriften. h2 führt eine Karte an und trägt den Taktstrich des Logos
   über sich — derselbe Verlauf Violett→Cyan wie die Balken der Bildmarke.
   h3 gliedert innerhalb einer Karte und ist das Etikett-Format des Themes:
   Versalien, weit gesperrt, klein. */
h2 {
  font-size: 17px; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight);
  color: var(--ink); margin: 0 0 6px;
}
.karte > h2::before {
  content: ""; display: block; width: 28px; height: 3px; border-radius: var(--radius-pill);
  background: var(--verlauf); margin-bottom: 9px;
}
h3 {
  font-size: 12.5px; font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--ink2); margin: 18px 0 6px;
}
/* Eine Ebene unter h3 steht wieder eine echte Überschrift und kein Etikett:
   h4 trägt den Namen eines Wirkungsziels, und Versalien sind kein Format für
   einen Titel, der ein Satz sein kann. */
h4 {
  font-size: 14.5px; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight);
  color: var(--ink); margin: 14px 0 6px;
}
/* Die unterste Ebene — die Kommentarüberschrift in einem Wirkungszielblock.
   Wieder ein Etikett wie h3, nur kleiner: sie benennt keinen Gegenstand,
   sondern was darunter steht. */
h5 {
  font-size: 11.5px; font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--muted); margin: 14px 0 6px;
}

/* In den Etiketten stehen Zählungen („Akteure (25)“, „rev 4“). Tabellenziffern
   halten sie gleich breit, damit eine Zahl beim Neuzeichnen nicht springt. */
h3, th, legend, label, .dl dt, .abzeichen, .marker-vertraulich, .qtag {
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
   6) KOPF UND NAVIGATION
   ============================================================================= */
header {
  position: sticky; top: 0; z-index: 20;
  /* Zwei Angaben: die erste trägt, falls color-mix fehlt. */
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  padding: 9px 20px 9px;
}
/* Zeile 1: die Marke — wo man ist. */
.kopf-marke { display: flex; align-items: center; gap: 12px; }
/* Zeile 2: was man tut — die Ansichten links, die Sitzung rechts. Der Abstand
   nach unten hält die Unterkante der aktiven Ansicht von der Verlaufskante
   des Kopfes frei; sonst laufen zwei Striche ineinander. */
.kopf-leiste {
  display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap;
  margin-top: 7px; padding-bottom: 4px;
}
/* Der Verlauf des Logos als Abschlusskante des Kopfes — im Theme trennt eine
   Haarlinie, hier trägt der Verlauf die Marke bis in die Arbeitsfläche. */
header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--verlauf);
}
header .logo { height: 28px; width: auto; flex: 0 0 auto; }
header h1 {
  font-size: 17px; font-weight: var(--fw-bold); margin: 0;
  letter-spacing: var(--ls-tight);
}
.kopf-rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Hier steht ein Name. Namen werden geschrieben, wie sie geschrieben werden —
   das Etikettformat mit Versalien gilt für Beschriftungen, nicht für Menschen. */
#wer { font-size: 13px; color: var(--ink2); }

/* Der Umschalter der Fassung trägt nur Mond oder Sonne. Er braucht deshalb
   keine Wortbreite, sondern ein festes Maß — sonst springt die Kopfzeile beim
   Umschalten, weil die beiden Zeichen unterschiedlich breit sind. */
#thema-knopf {
  min-width: 34px; padding: 2px 6px; justify-content: center;
  font-size: 15px; line-height: 1.25;
}

/* Die Hauptnavigation ist die des Themes: Versalien, gesperrt, ohne Fläche,
   der Zustand hängt an einer 2 Pixel starken Unterkante. Die aktive Ansicht
   trägt zusätzlich das volle Schriftgewicht — nicht Farbe allein. */
nav { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
nav button {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; padding: 5px 1px; margin: 0;
  font-size: 12.5px; font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--ink); box-shadow: none;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
nav button:hover { background: transparent; color: var(--pro); border-bottom-color: var(--pro); transform: none; }
nav button[aria-current="page"] {
  color: var(--ink); font-weight: var(--fw-bold); border-bottom-color: var(--idt-cyan);
}
nav button[aria-current="page"]:hover { color: var(--ink); border-bottom-color: var(--idt-cyan); }

/* =============================================================================
   7) BEDIENELEMENTE
   ============================================================================= */
select, input, textarea {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--surface);
  border: var(--bw-base) solid var(--axis); border-radius: var(--radius-sm);
  padding: 5px 9px; max-width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out);
}
select:focus, input:focus, textarea:focus { border-color: var(--pro); }
input::placeholder, textarea::placeholder { color: var(--muted); }

/* Kontrollkästchen behalten die Darstellung des Systems — Rahmen und
   Innenabstand der Textfelder haben dort nichts zu suchen. Nur die
   Markierfarbe kommt aus der Marke. */
input[type="checkbox"], input[type="radio"] {
  border: 0; padding: 0; background: none; margin: 0;
  width: 15px; height: 15px; accent-color: var(--pro);
}

/* Der gerahmte Knopf des Themes (.idt-btn--outline): 2 Pixel Rahmen in Ink,
   beim Überfahren kehrt er sich um. */
button {
  font: inherit; font-size: 14.5px; font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--ink); background: transparent;
  border: var(--bw-frame) solid var(--kante); border-radius: var(--radius-sm);
  padding: 5px 13px; max-width: 100%; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
button:hover { background: var(--kante); color: var(--surface); transform: translateY(-1px); }
button:active { transform: translateY(0); }
button[disabled] { opacity: .45; cursor: not-allowed; }
button[disabled]:hover { background: transparent; color: var(--ink); transform: none; }

button.primaer { background: var(--pro); color: var(--auf-pro); border-color: var(--pro); }
button.primaer:hover { background: var(--pro-hover); border-color: var(--pro-hover); color: var(--auf-pro); }

button.gefahr { border-color: var(--con); color: var(--con); }
button.gefahr:hover { background: var(--con); color: var(--surface); }

/* Die kleinen Knöpfe am Zeilenende stehen zu dutzenden in einer Tabelle:
   dünnerer Rahmen, kein Anheben — sonst zappelt die ganze Zeile. */
button.klein {
  padding: 2px 8px; font-size: 12.5px; border-width: var(--bw-base); letter-spacing: 0;
}
button.klein:hover { transform: none; }

textarea { min-height: 54px; resize: vertical; width: 100%; line-height: 1.5; }
textarea.gross { min-height: 120px; }

/* Feldbeschriftungen im Etikett-Format des Themes. */
label {
  font-size: 11.5px; color: var(--muted); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--ls-label);
}
fieldset {
  border: var(--bw-hair) solid var(--ring); border-radius: var(--radius-md);
  padding: 12px 14px; margin: 0 0 12px;
}
legend {
  font-size: 11.5px; color: var(--muted); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-label); padding: 0 6px;
}

/* Zwei zurückgenommene Knöpfe: sie stehen neben dem, worauf sie sich beziehen,
   und sollen es nicht überstimmen. Ohne Fläche und ohne Rahmen, bis der Zeiger
   darauf liegt — die Tastatur bekommt den Rahmen über :focus-visible ohnehin,
   die Beschriftung hängt am aria-label. Ein Knopf, den man erst beim Hinsehen
   findet, ist richtig für einen Handgriff, den man selten braucht; für einen
   häufigen wäre er falsch.

   Runde Zeichenknöpfe wie im Theme (.idt-social__icon), und ohne das Anheben
   der übrigen Knöpfe: sie stehen mitten in einer Zeile, die still bleiben soll. */
button.leise-plus, button.leise-stift {
  border-color: transparent; background: transparent; color: var(--muted);
  border-radius: var(--radius-pill); justify-content: center; gap: 0;
  line-height: 1; letter-spacing: 0;
}
button.leise-plus:hover, button.leise-stift:hover {
  background: var(--tief); border-color: var(--axis); color: var(--ink); transform: none;
}
button.leise-plus { font-size: 20.5px; padding: 2px 10px; }
button.leise-stift { font-size: 16px; padding: 4px 10px; }
/* Ein abgeschalteter Knopf antwortet nicht. Die Regel steht hier, weil sie
   sonst gleich schwer wöge wie die Hover-Regel darüber und ihr unterläge. */
button.leise-plus[disabled]:hover, button.leise-stift[disabled]:hover {
  background: transparent; border-color: transparent; color: var(--muted);
}

/* Umschalter zwischen den gleichrangigen Unteransichten: die Knöpfe stehen in
   einer gemeinsamen Fassung und lesen sich dadurch als ein Schalter. Der aktive
   Zustand hängt am aria-pressed — dieselbe Angabe für Auge und Vorlesehilfe.
   Die Fassung ist eine Pille, wie die Knöpfe des Themes. */
.umschalter {
  display: inline-flex; gap: 2px; padding: 3px; background: var(--tief);
  border: var(--bw-base) solid var(--axis); border-radius: var(--radius-pill);
}
.umschalter button {
  border-color: transparent; background: transparent; border-radius: var(--radius-pill);
  padding: 4px 14px; font-size: 12.5px; font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--ink);
}
.umschalter button:hover { background: var(--grid); color: var(--ink); transform: none; }
.umschalter button[aria-pressed="true"] {
  background: var(--pro); color: var(--auf-pro); border-color: var(--pro);
}
.umschalter button[aria-pressed="true"]:hover { background: var(--pro-hover); color: var(--auf-pro); }

/* Der Schalter führt die Karte an und steht dabei mittig — er gehört keiner
   der Sichten, sondern wählt zwischen ihnen. Der Abstand nach unten
   setzt ihn von der Überschrift ab, die sonst unmittelbar anschlösse. */
.umschalter-reihe { display: flex; justify-content: center; margin-bottom: 18px; }

/* =============================================================================
   8) AUSWAHL MIT SUCHE
   ============================================================================= */

/* Eingabefeld mit Trefferliste darunter (App.suchauswahl). Die Liste liegt über
   allem, was unter ihr steht, und muss auch im modalen Fenster oben bleiben —
   dort sorgt die oberste Ebene des <dialog> von selbst dafür. */
.suchauswahl { position: relative; display: inline-flex; width: 380px; max-width: 100%; }
.suchauswahl-feld { flex: 1 1 auto; padding-right: 28px; min-width: 0; }
.suchauswahl-knopf {
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 26px;
  border: 0; background: transparent; color: var(--ink2); padding: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; justify-content: center;
}
.suchauswahl-knopf:hover { background: transparent; color: var(--pro); transform: none; }
.suchauswahl-liste {
  position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 30;
  margin: 0; padding: 4px; list-style: none; max-height: 300px; overflow-y: auto;
  background: var(--surface); border: var(--bw-base) solid var(--axis);
  border-radius: var(--radius-md); box-shadow: var(--schatten-3);
}
.suchauswahl-liste li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 5px 8px; border-radius: var(--radius-sm); font-size: 14.5px; cursor: pointer;
}
.suchauswahl-liste li .zusatz { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.suchauswahl-liste li[aria-selected="true"] { font-weight: var(--fw-bold); }
/* Der Eintrag unter Pfeiltaste oder Zeiger: Fläche UND Rahmen, nicht Farbe allein. */
.suchauswahl-liste li.hervor { background: var(--q1); outline: var(--bw-base) solid var(--pro); }
.suchauswahl-liste li.leer { color: var(--muted); cursor: default; }

/* =============================================================================
   9) FLÄCHEN
   ============================================================================= */
main { padding: 20px 20px 56px; }

/* Keine zweispaltige Anordnung: die Detailansicht einer Bewertungszeile liegt
   als Fenster über der Ansicht, nicht in einer festen Spalte rechts. Die
   Karten stehen dadurch über die volle Breite — die Mendelow-Matrix war in
   400 Pixel weniger die engste Stelle der Oberfläche. */
.karte {
  background: var(--surface); border: var(--bw-hair) solid var(--grid);
  border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 18px;
  box-shadow: var(--schatten-1);
}
.karte:last-child { margin-bottom: 0; }

.hinweis { color: var(--muted); font-size: 14px; margin: 0 0 12px; max-width: 90ch; }

/* Überschrift links, die Knöpfe dazu unmittelbar rechts daneben: der Stift
   gehört zu dem, was er ändert, und nicht in eine eigene Zeile darunter. Bei
   schmalem Fenster rutschen die Knöpfe unter die Überschrift, statt sie zu
   quetschen.

   Führt der Kopf eine Karte an, trägt er den Taktstrich des Logos — sonst
   ginge er der Karte verloren, weil er an `.karte > h2` hängt und die
   Überschrift hier ein Kind der Kopfzeile ist. Freigestellt darüber, sonst
   landete er als Element im Flex-Fluss neben der Überschrift. Dasselbe wie
   bei `.kopfzeile`. */
.kartenkopf {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  margin-bottom: 6px;
}
.kartenkopf > h2, .kartenkopf > h3, .kartenkopf > h4 { margin: 0; }
.karte > .kartenkopf { position: relative; padding-top: 12px; }
.karte > .kartenkopf::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 28px; height: 3px; border-radius: var(--radius-pill); background: var(--verlauf);
}
.kopfknoepfe { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* Allgemeine Beschreibung eines Bausteins, als Text gelesen: Absätze und
   Zeilenumbrüche bleiben stehen, wie sie eingegeben wurden. */
.beschreibung { font-size: 15.5px; margin: 0 0 14px; max-width: 70ch; white-space: pre-wrap; line-height: 1.55; }

.reihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.reihe > div { display: flex; flex-direction: column; gap: 3px; }
.rechts { margin-left: auto; }
.leer { color: var(--muted); font-size: 14.5px; padding: 8px 0; }
/* Zeile, die noch da ist, aber nicht mehr gilt — etwa ein widerrufener Zugang.
   Nicht ausgeblendet: dass es ihn gab, bleibt sichtbar. */
.gedimmt { color: var(--muted); text-decoration: line-through; }

/* Die nicht bewertbaren Akteure hängen unter der Matrix und werden durch eine
   Linie von ihr abgesetzt — sie sind kein zweiter Teil der Matrix. */
.nb { margin-top: 22px; padding-top: 4px; border-top: var(--bw-hair) solid var(--grid); }

/* =============================================================================
   10) BÄNDER UND MELDUNGEN
   -----------------------------------------------------------------------------
   Der Hinweiskasten des Themes (.idt-callout): harter Rahmen, versetzter
   Schatten, getönte Fläche. Die Art des Bandes steht in der linken Kante.

   Der Schatten bleibt in allen Fassungen neutral und wechselt nie in die
   Farbe der Kante. Sonst treffen sich unten links zwei Flächen derselben
   Farbe — der Schatten setzt 4 Pixel weiter innen an als der Rand — und aus
   Rand und Schatten wird ein Klumpen statt zweier Dinge. Aus demselben Grund
   ist die linke Kante genau 4 Pixel stark: so stößt sie bündig an den Beginn
   des Schattens, statt ihn um zwei Pixel zu überlappen.
   ============================================================================= */
.band {
  border-radius: var(--radius-md); padding: 10px 14px; margin: 0 0 12px;
  font-size: 14.5px; border: var(--bw-frame) solid var(--kante);
  background: var(--fill); color: var(--ink); box-shadow: var(--block);
}
.band strong { display: block; font-size: 15px; margin-bottom: 3px; letter-spacing: var(--ls-tight); }
.band.warnung { border-color: var(--con); border-left-width: 4px; }
.band.gut { border-color: var(--ok); border-left-width: 4px; background: var(--surface); }
/* Das ruhige Band meldet nichts, es begleitet: Haarlinie, kein Schatten. */
.band.ruhig {
  background: var(--surface); color: var(--ink2);
  border: var(--bw-hair) solid var(--grid); box-shadow: none;
}
#devbanner, #meldung { margin: 14px 20px 0; }
#meldung:empty { display: none; }
#meldung .band { margin: 0 0 6px; }

/* =============================================================================
   11) MATRIX
   ============================================================================= */
.mxwrap { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; }
.ylab {
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: var(--ls-label);
}
.mx { display: grid; grid-template-columns: 28px repeat(5, minmax(0, 1fr)); gap: 4px; }
.ynum, .xnum {
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums;
}
.xnum { padding-top: 4px; }
.xlab {
  grid-column: 2 / 7; text-align: center; color: var(--muted); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: var(--ls-label); padding-top: 4px;
}
.zelle {
  min-height: 66px; border: var(--bw-hair) solid var(--grid); border-radius: var(--radius-sm);
  padding: 5px; display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start;
  position: relative;
}
.zelle.Q1 { background: var(--q1); }
.zelle.Q2 { background: var(--q2); }
.zelle.Q3 { background: var(--q3); }
.zelle.Q4 { background: var(--q4); }
.qtag {
  position: absolute; right: 5px; bottom: 3px;
  font-size: 10.5px; font-weight: var(--fw-semibold); color: var(--muted);
  letter-spacing: var(--ls-label); pointer-events: none;
}

/* Die Akteursplättchen sind Pillen — die Grundform der Marke. */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: var(--fw-medium); line-height: 1.1; letter-spacing: 0;
  padding: 3px 8px; border-radius: var(--radius-pill);
  border: var(--bw-hair) solid var(--axis); color: var(--ink);
  background: var(--surface); cursor: pointer; max-width: 100%; text-transform: none;
}
.chip:hover { border-color: var(--pro); color: var(--pro); background: var(--surface); transform: none; }
.chip[aria-pressed="true"] { outline: var(--bw-frame) solid var(--pro); outline-offset: 1px; }
.chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.geprueft { font-weight: var(--fw-bold); border-color: var(--ink2); }

/* ---------- Akteure in der Matrix per Ziehen bewerten ---------- */

/* Ein Plättchen im Raster lässt sich in eine andere Zelle ziehen; das setzt
   Macht und Interesse. Ein langes Drücken darf dabei nicht als Textauswahl oder
   als Doppeltipp-Zoom enden — beides wird hier unterbunden, das Kontextmenü im
   Skript.

   Kein `touch-action: none`: das gälte schon beim Aufsetzen des Fingers und
   nähme der Seite das Scrollen an jedem Plättchen. Das Scrollen wird erst
   unterbunden, wenn das Ziehen erkannt ist (ansicht_baustein.js, touchmove). */
.chip.ziehbar {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation;
}
/* Nach dem langen Drücken auf dem Berührungsbildschirm: das Plättchen hat sich
   gehoben und wartet auf die Bewegung. Der Moment braucht ein sichtbares
   Zeichen — sonst weiß niemand, wann aus dem Halten ein Ziehen werden kann. */
.chip.hebt {
  border-color: var(--pro); box-shadow: var(--schatten-2);
  transform: scale(1.08);
}
/* Der alte Platz während des Ziehens: das Plättchen bleibt blass liegen. Es
   geht nichts weg — am Zeiger hängt eine Kopie. Wird abgebrochen oder vom
   Server abgelehnt, wird die Kopie einfach entfernt. */
.chip.zieht-quelle { opacity: .3; }
/* Die Kopie am Zeiger. Sie fängt keine Zeigerereignisse ab, sonst fände die
   Suche nach der Zelle unter dem Zeiger immer nur sie selbst. */
.chip.ziehschatten {
  position: fixed; left: -9999px; top: -9999px; z-index: 50;
  pointer-events: none; opacity: .95;
  border-color: var(--pro); box-shadow: var(--schatten-3);
}
/* Wo das Plättchen landen würde. Rahmen UND Füllung, nicht Farbe allein: die
   Quadrantenflächen sind selbst zart eingefärbt, ein bloßer Farbwechsel wäre
   dort nicht sicher zu unterscheiden. Steht nach den .zelle.Q* und gewinnt
   deshalb bei gleicher Gewichtung. */
.zelle.zielzelle {
  background: var(--fill);
  outline: var(--bw-frame) solid var(--pro); outline-offset: -2px;
}

.legende {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px;
  font-size: 13px; color: var(--ink2); align-items: center;
}
.legende .k { display: inline-flex; align-items: center; gap: 6px; }

/* =============================================================================
   12) HALTUNG — Farbe UND Form. Nie ohne den Textbaustein daneben verwenden.
   ============================================================================= */
.marke {
  display: inline-block; width: 9px; height: 9px; flex: 0 0 9px;
  border: 1.5px solid var(--neutral); border-radius: 50%; background: transparent;
}
.marke.unterstuetzend { background: var(--pro); border-color: var(--pro); border-radius: 50%; }
.marke.kritisch { background: var(--con); border-color: var(--con); border-radius: 1px; transform: rotate(45deg); }
.marke.neutral { background: var(--neutral); border-color: var(--neutral); border-radius: 50%; }
.marke.unklar { background: transparent; border-color: var(--muted); border-radius: 50%; }
.mit-marke { display: inline-flex; align-items: center; gap: 6px; }

/* =============================================================================
   13) TABELLEN
   ============================================================================= */
.tabellenrahmen { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; margin-top: 10px; }
th, td { text-align: left; padding: 7px 9px; border-bottom: var(--bw-hair) solid var(--grid); vertical-align: top; }
th {
  color: var(--muted); font-weight: var(--fw-semibold); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: var(--ls-label); white-space: nowrap;
  border-bottom-color: var(--axis);
}
td.n { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
tr.ausgewaehlt td { background: var(--q1); }
tbody tr.klickbar { cursor: pointer; }
tbody tr.klickbar:hover td { background: var(--tief); }
td input, td select, td textarea { padding: 3px 7px; font-size: 14px; }
/* Spalten, die einen Fließtext tragen: der Rahmen scrollt lieber waagerecht,
   als dass die Beschreibung in einer handbreiten Spalte steht. */
td.breit { min-width: 340px; }

details { margin-top: 14px; }
details summary {
  cursor: pointer; font-size: 12.5px; font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--ink2);
}
details summary:hover { color: var(--pro); }

/* Knöpfe in einer Tabellenzelle — die Wirkungsziele in ihrer Spalte,
   „Bearbeiten“ und „löschen“ am Zeilenende. Ohne Abstand kleben sie
   aneinander, und ein Umbruch mitten in der Beschriftung macht aus zwei
   Knöpfen einen Klumpen. */
td.knopfreihe { white-space: nowrap; }
td.knopfreihe > button + button { margin-left: 6px; }

/* =============================================================================
   14) FILTERLEISTE
   ============================================================================= */

/* Die Filter stehen als Pillen nebeneinander, die wichtigen offen, die
   selteneren hinter „Mehr Filter“. Die Leiste trägt links die Plättchen und
   rechts das Pluszeichen zum Bewerten; bei wenig Platz rutscht dieses in eine
   eigene Zeile, statt die Plättchen zu quetschen. */
.leiste { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin: 14px 0; }
.leiste > .filterleiste { flex: 1 1 420px; }
/* Ohne die Leiste drumherum — in der Akteursansicht steht sie allein in der
   Karte und braucht den Abstand selbst. */
.karte > .filterleiste { margin: 12px 0 16px; }
.filterchips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filterchips + .filterchips { margin-top: 8px; }
.filterchips[hidden] { display: none; }

/* Ein Filter ist eine Pille mit Etikett und Feld darin — dieselbe Grundform
   wie das Akteursplättchen und das Abzeichen. */
.filterchip {
  display: inline-flex; align-items: center; gap: 7px;
  border: var(--bw-hair) solid var(--axis); border-radius: var(--radius-pill);
  padding: 3px 12px 3px 13px; background: var(--surface);
  max-width: 100%; transition: border-color var(--dur-fast) var(--ease-out);
}
.filterchip:hover { border-color: var(--ink2); }
.filterchip > label { white-space: nowrap; }
/* Das Auswahlfeld bringt seine Liste und seinen Pfeil selbst mit; hier fällt
   nur die eigene Umrandung weg — die der Pille ist schon da. */
.filterchip select, .filterchip input {
  border: 0; background: transparent; color: var(--ink);
  padding: 2px 0 2px 2px; font-size: 14px; max-width: 180px;
}
.filterchip select:focus-visible, .filterchip input:focus-visible {
  outline: var(--bw-frame) solid var(--pro); outline-offset: 2px;
}
/* Ein gesetzter Filter ist abgesetzt — die Farbe trägt die Angabe aber nicht
   allein: der gewählte Wert steht im Feld daneben. */
.filterchip.gesetzt { border-color: var(--pro); background: var(--q1); }
.filterchip.gesetzt > label { color: var(--pro); }

/* „Mehr Filter“ ist der zurückgenommene Knopf des Themes (.idt-btn--ghost):
   ohne Rahmen und ohne Fläche, bis der Zeiger darauf liegt. Er steht zwischen
   den Filterpillen und soll sie nicht überstimmen. */
.mehr-filter {
  border-color: transparent; background: transparent; color: var(--ink2);
  border-radius: var(--radius-pill); padding: 4px 12px;
  font-size: 12.5px; font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-label);
}
.mehr-filter:hover { background: var(--tief); color: var(--ink); transform: none; }
/* Ein gesetzter Filter aus dem eingeklappten Teil wird am Knopf beim Namen
   genannt; die Farbe hebt ihn nur zusätzlich hervor. */
.mehr-filter.filter-aktiv { color: var(--pro); }
.mehr-filter.filter-aktiv:hover { color: var(--pro); }
.symbol-regler line { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.symbol-regler circle { fill: var(--surface); stroke: currentColor; stroke-width: 1.6; }
.filter-zuruecknehmen {
  border-radius: var(--radius-pill); border-width: var(--bw-base);
  padding: 3px 13px; font-size: 12.5px; letter-spacing: 0;
}
.filter-zuruecknehmen:hover { transform: none; }

/* Das Pluszeichen: ein Knopf, der sagt, dass hier etwas hinzukommt. Er steht am
   rechten Ende der Filterleiste — die Filter verengen die Anzeige, er erweitert
   den Bestand. Als Pille in der Primärfarbe, damit er die Leiste anführt. */
.bewerten-reihe { margin-left: auto; }
.bewerten-knopf { gap: 7px; border-radius: var(--radius-pill); padding: 6px 16px; }
.bewerten-knopf .plus { font-size: 18.5px; line-height: 1; font-weight: var(--fw-bold); }

/* Die Akteurswahl im Bewertungsfenster: Suchfeld und Pluszeichen in einer
   Zeile. Wer einen Akteur sucht und nicht findet, legt ihn dort an, wo er ihn
   gesucht hat — der Knopf gehört deshalb neben das Feld und nicht darunter. */
.akteurwahl { display: flex; align-items: stretch; gap: 8px; }
.akteurwahl .plusknopf {
  flex: 0 0 auto; width: 32px; padding: 0; justify-content: center;
  /* Derselbe Radius wie das Suchfeld daneben: die beiden stehen auf Stoß und
     lesen sich als ein Bauteil, wenn ihre Ecken gleich laufen. */
  border-radius: var(--radius-sm); font-size: 19.5px; line-height: 1;
  font-weight: var(--fw-bold); letter-spacing: 0;
}

/* =============================================================================
   15) ERKLÄRUNG HINTER EINEM FRAGEZEICHEN
   ============================================================================= */
.hilfe { position: relative; display: inline-block; margin-left: 6px; vertical-align: middle; }
.hilfe-knopf {
  width: 18px; height: 18px; padding: 0; border-radius: 50%;
  justify-content: center; gap: 0;
  border: var(--bw-hair) solid var(--axis); background: var(--surface); color: var(--ink2);
  font-size: 12.5px; line-height: 1; font-weight: var(--fw-bold); letter-spacing: 0;
}
.hilfe-knopf:hover {
  border-color: var(--pro); color: var(--pro); background: var(--surface); transform: none;
}
/* Dieselbe schwebende Ebene wie die Trefferliste der Suchauswahl: nicht der
   harte Rahmen der Karten, sondern ein weicher Schatten — sie liegt über der
   Seite, sie steht nicht in ihr. */
/* Der erklärende Satz steht in normaler Schrift — auch dann, wenn das
   Fragezeichen an einer Beschriftung hängt, die in Versalien gesetzt ist:
   `text-transform` und `letter-spacing` vererben sich, und ein ganzer Satz in
   gesperrten Großbuchstaben ist nicht zu lesen. Dasselbe für das
   Schriftgewicht und die Farbe einer Feldbeschriftung. */
.hilfe-blase {
  display: none; position: absolute; z-index: 5; left: 0; top: calc(100% + 6px);
  width: min(460px, 80vw); padding: 10px 12px;
  border: var(--bw-base) solid var(--axis); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink); font-size: 14.5px; line-height: 1.5;
  text-transform: none; letter-spacing: normal; font-weight: 400; text-align: left;
  box-shadow: var(--schatten-3);
}
/* Drei Wege hinein, weil es drei Arten gibt, eine Seite zu bedienen: Zeiger,
   Tastatur, Finger. Der Finger setzt die Klasse `offen` (kern.js, App.hilfe). */
.hilfe:hover .hilfe-blase,
.hilfe:focus-within .hilfe-blase,
.hilfe.offen .hilfe-blase { display: block; }

/* =============================================================================
   16) DETAILANSICHT
   ============================================================================= */
.dl { margin: 0; }
.dl dt {
  font-size: 11.5px; color: var(--muted); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--ls-label); margin-top: 12px;
}
.dl dd { margin: 3px 0 0; font-size: 15px; white-space: pre-wrap; }
/* Mehrere kurze Angaben nebeneinander statt untereinander: sechs Stammdaten in
   einer Spalte wären eine halbe Bildschirmhöhe für sechs Wörter. Jedes Paar
   steht in einem eigenen `div` — im Raster wären dt und dd sonst getrennte
   Felder und lägen nebeneinander statt übereinander. */
.dl.spalten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 2px 20px; margin-bottom: 4px;
}
.dl.spalten > div > dt { margin-top: 12px; }
/* Steht ein Fragezeichen an einer Beschriftung, hängt die Blase nicht an ihm,
   sondern am ganzen Feld: an einem 18 Pixel breiten Knopf ausgerichtet, liefe
   sie in einer der rechten Spalten aus der Karte heraus. `position: static`
   auf der Hülle gibt die Bezugsfläche an das Feld darunter ab. */
.dl.spalten > div { position: relative; }
.dl.spalten .hilfe { position: static; }
.dl.spalten .hilfe-blase { left: 0; top: 100%; width: min(420px, 78vw); }
/* Was ein Satz ist und kein Wort, bekommt die volle Breite. */
.dl.spalten > div.weit { grid-column: 1 / -1; }
.dl.spalten > div.weit > dd { max-width: 80ch; }
.feld { margin-top: 12px; }
.feld > label { display: block; margin-bottom: 4px; }
.feld select, .feld input, .feld textarea { width: 100%; background: var(--fill); }
/* Quittung einer gespeicherten Eingabe: die Beschriftung wechselt die Farbe
   und bekommt einen Haken davor — Farbe trägt die Meldung nicht allein. */
.feld.gespeichert > label { color: var(--ok); }
.feld.gespeichert > label::before { content: "✓ "; }

/* Abzeichen sind Pillen im Etikett-Format des Themes. */
.abzeichen {
  display: inline-block; font-size: 11.5px; font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  padding: 3px 10px; border-radius: var(--radius-pill);
  border: var(--bw-hair) solid var(--axis); color: var(--ink2); background: var(--surface);
}
.abzeichen.stark { border-color: var(--pro); color: var(--pro); background: var(--q2); }

/* Offene gegen vertrauliche Felder sichtbar voneinander abgesetzt. */
.block {
  border: var(--bw-hair) solid var(--grid); border-radius: var(--radius-md);
  padding: 12px 14px; margin-top: 16px;
}
.block > h3 { margin-top: 0; }
.block.offen { border-left: 4px solid var(--pro); }
.block.modell { border-left: 4px solid var(--axis); background: transparent; }
/* Die vertraulichen Felder tragen ihren Sonderweg im Bild: gestrichelter
   Rahmen, eigene Fläche, roter Kopf und ein ausgeschriebener Marker. */
.block.vertraulich {
  border: var(--bw-base) dashed var(--con); border-left: 4px solid var(--con);
  background: var(--vert);
}
.block.vertraulich > h3 { color: var(--con); }
/* Ein Wirkungsziel in der Bausteinsicht: ein Block mit eigener Überschrift,
   an der Stift und Sprechblase hängen. */
.block.wirkungsziel > .kartenkopf { margin-bottom: 6px; }
.block.wirkungsziel .beschreibung { margin-bottom: 8px; }

/* ---------- Kommentare ---------- */

/* Wortmeldungen des Vorstands an Baustein und Wirkungsziel: Name und Zeitpunkt
   klein darüber, der Text darunter mit seinen Zeilenumbrüchen. Abgesetzt durch
   einen linken Strich — sie sind kein Feld des Gegenstands, sondern etwas, das
   jemand dazu gesagt hat. Der Strich ist violett wie die linke Kante des
   offenen Feldblocks: dieselbe Bedeutung, hier steht etwas zur Sache. */
.kommentare { list-style: none; margin: 0; padding: 0; }
.kommentare > li {
  border-left: 3px solid var(--pro); padding: 2px 0 2px 12px; margin: 0 0 12px;
}
.kommentare > li:last-child { margin-bottom: 0; }
/* Name und Zeitpunkt im Etikettformat — dieselbe Zeile wie in der Historie. */
.kommentar-kopf {
  color: var(--muted); font-size: 12.5px; margin: 0 0 3px;
  font-variant-numeric: tabular-nums;
}
.kommentar-text { font-size: 15px; margin: 0; max-width: 70ch; white-space: pre-wrap; line-height: 1.5; }
.kommentarflaeche { margin-bottom: 14px; }

.marker-vertraulich {
  display: inline-block; font-size: 10.5px; font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  border: var(--bw-hair) solid var(--con); color: var(--con);
  border-radius: var(--radius-xs); padding: 2px 6px; margin-left: 8px;
}

/* =============================================================================
   17) ÜBERFÄLLIGKEIT — die zweite Achse. Wie bei der Haltung: Farbe UND Form.
   ============================================================================= */

/* "Jeder Akteur mit überfälligem Zeitpunkt ist in der Matrix markiert"
   (PROMPT_Stakeholder-App.md, ANSICHTEN 1, ergänzt am 29.07.2026).

   Der linke Balken trägt die Farbe, das Zeichen ⚠ steht im Element selbst und
   bleibt auch dann erkennbar, wenn die Farbe nicht ankommt — dieselbe Regel wie
   in Abschnitt 12. Der Balken sitzt links, damit er sich nicht mit dem
   Auswahlrahmen (`aria-pressed`) beißt, der rundum läuft. */
.chip.ueberfaellig {
  border-left: var(--bw-frame) solid var(--con);
  font-weight: var(--fw-bold);
}

.marker-ueberfaellig {
  color: var(--con); font-size: 11.5px; line-height: 1;
}

/* In den Tabellen: eine getönte Zeile mit demselben Balken. Die Tönung ist
   schwach — überfällig ist häufig, und eine kräftige Fläche je Zeile machte die
   Tabelle unlesbar. */
tr.ueberfaellig > td:first-child { border-left: var(--bw-frame) solid var(--con); }
tr.ueberfaellig { background: color-mix(in srgb, var(--con) 7%, transparent); }
tr.ueberfaellig strong { color: var(--con); }

/* =============================================================================
   18) MODALES FENSTER
   ============================================================================= */

/* Anlegen geschieht über der laufenden Ansicht, nicht weiter unten auf der
   Seite: der Hintergrund bleibt sichtbar, der Arbeitsplatz erhalten. Der
   versetzte Blockschatten ist die Handschrift des Themes. */
dialog.modal {
  padding: 0; border: var(--bw-frame) solid var(--kante); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink);
  width: min(820px, calc(100vw - 24px));
  max-height: calc(100vh - 48px);
  box-shadow: var(--block-gross), var(--schatten-3);
}
dialog.modal[open] { display: flex; flex-direction: column; }
dialog.modal::backdrop { background: rgba(0, 40, 44, .55); }
.modal-kopf { display: flex; align-items: baseline; gap: 12px; padding: 16px 18px 4px; flex-wrap: wrap; }
.modal-kopf h2 { margin: 0; }
/* Der Gegenstand, zu dem der Titel gehört — im Detailfenster der Baustein.
   Er steht neben dem Titel und nicht darunter: er beantwortet dieselbe Frage
   („wo bin ich“) und gehört in dieselbe Zeile. Zurückgenommen, damit er den
   Titel nicht überstimmt, aber kräftig genug, um im Vorbeisehen zu tragen. */
.modal-untertitel {
  font-size: 12.5px; font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--ink2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 46ch;
}
.modal-koerper { padding: 0 18px 10px; overflow-y: auto; flex: 1 1 auto; }
.modal-koerper > .reihe { margin-top: 12px; }
.modal-koerper fieldset { margin-top: 14px; }
.modal-meldung:empty { display: none; }
.modal-meldung { margin-top: 12px; }
.modal-fuss {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 18px 16px; border-top: var(--bw-hair) solid var(--grid); background: var(--surface);
}

/* Ein Fenster, in dem gearbeitet und nicht nur eine Angabe gemacht wird, nimmt
   den ganzen Bildschirm: das Detailfenster einer Bewertungszeile und das
   Anlegen einer solchen Zeile, das ihm unmittelbar vorausgeht. Der Blick auf
   die Ansicht dahinter ist dort kein Halt mehr, sondern nur noch schmal — und
   auf einem Telefon war er nie einer.

   Der Inhalt bleibt trotzdem in Lesebreite: eine Zeile, die über einen ganzen
   breiten Bildschirm läuft, ist nicht zu lesen. Kopf und Fuß laufen mit dem
   Körper mit, damit „Schließen“ dort steht, wo der Text endet. */
dialog.modal.vollbild {
  inset: 0; margin: 0;
  width: 100%; max-width: none;
  height: 100%; max-height: none;
  border: 0; border-radius: 0; box-shadow: none;
}
dialog.modal.vollbild > .modal-kopf,
dialog.modal.vollbild > .modal-koerper,
dialog.modal.vollbild > .modal-fuss {
  width: 100%; max-width: 1120px; margin-left: auto; margin-right: auto;
}
/* Wo Rahmen und Blockschatten wegfallen, hält der Verlauf des Logos die
   Oberkante — dasselbe Zeichen wie am Kopf der Anwendung. Er läuft über die
   volle Breite, nicht nur über die Lesespalte darunter. */
dialog.modal.vollbild::before {
  content: ""; display: block; flex: 0 0 auto; height: 3px; background: var(--verlauf);
}

/* Das Detailfenster einer Bewertungszeile ist das inhaltsreichste Fenster der
   Anwendung: drei Feldblöcke, Präsenzanzeige, Konfliktanzeige. Seine Maße kommen
   von `vollbild`; hier steht nur, was allein für dieses Fenster gilt. */
/* Der Fensterkörper bekommt beim Öffnen den Fokus, damit Escape und Blättern
   sofort wirken, ohne dass ein Eingabefeld scharf steht. Er ist keine
   Bedienung und trägt deshalb keinen Fokusrahmen; die Tastaturbedienung
   sichtbar zu machen bleibt Sache der Knöpfe und Felder darin. */
dialog.modal.detailfenster > .modal-koerper:focus { outline: none; }

/* Ein Beschreibungsfeld ist ein Textfeld, kein Einzeiler. */
dialog.modal textarea { width: 100%; }
.reihe > div.waechst { flex: 1 1 220px; }
.reihe > div.waechst input { width: 100%; }
.vorschau {
  border: var(--bw-base) dashed var(--axis); border-radius: var(--radius-sm);
  padding: 5px 10px; background: var(--fill); font-variant-numeric: tabular-nums;
}

/* =============================================================================
   17b) HISTORIE
   -----------------------------------------------------------------------------
   Zugeklappt am Fuß eines Bearbeiten-Fensters. Sie ist Nachschlagewerk und
   nicht Bedienung: eine Linie setzt sie vom Formular darüber ab, die Zeilen
   sind klein und ruhig, und nichts darin ist anklickbar.
   ============================================================================= */
.historie { margin-top: 20px; border-top: var(--bw-hair) solid var(--grid); padding-top: 4px; }
.historie[open] > summary { margin-bottom: 8px; }

.historie-liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
  max-height: 40vh; overflow-y: auto;
}
.historie-liste li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  padding: 6px 2px; border-bottom: var(--bw-hair) solid var(--grid); font-size: 14.5px;
}
.historie-liste li:last-child { border-bottom: none; }
/* Zeitpunkt und Name führen jede Zeile an und stehen in fester Breite
   untereinander — sonst beginnt jede Änderung an einer anderen Stelle. */
.historie-wann {
  flex: 0 0 auto; min-width: 15em; color: var(--muted); font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.historie-feld {
  flex: 0 0 auto; min-width: 8em; font-size: 11.5px; font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--ink2);
}
.historie-liste code {
  font-family: inherit; font-size: 11.5px; font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--grid); color: var(--ink2);
}
/* Der alte und der neue Wert. Der Pfeil dazwischen trägt die Richtung; für die
   Vorlesehilfe steht sie ausgeschrieben am aria-label (kern.js). */
.historie-liste .wert { color: var(--ink); }
.historie-liste .leerwert { color: var(--muted); font-style: italic; }
.historie-pfeil { color: var(--pro); font-weight: var(--fw-bold); }
/* Angelegt und gelöscht sind Ereignisse und keine Änderung eines Feldes. */
.historie-marke { background: var(--tief); border-radius: var(--radius-sm); padding-left: 8px; }

/* =============================================================================
   19) KONFLIKTANZEIGE
   -----------------------------------------------------------------------------
   Zwei Fassungen derselben Zeile stehen nebeneinander und wollen entschieden
   werden. Das ist der lauteste Zustand der Anwendung und trägt deshalb den
   Blockschatten in Rot.
   ============================================================================= */
.konflikt {
  border: var(--bw-frame) solid var(--con); border-radius: var(--radius-md);
  padding: 12px 14px; margin-top: 14px; box-shadow: 4px 4px 0 var(--con);
}
.konflikt h3 { color: var(--con); margin-top: 0; }
.konflikt table { margin-bottom: 8px; }
.konflikt td { white-space: pre-wrap; }

/* =============================================================================
   20) ANMELDUNG
   -----------------------------------------------------------------------------
   Die einzige Seite ohne Arbeitsfläche — hier steht die Marke ganz. Der
   Hintergrund zitiert den Horizont-Splash des Themes: dieselben Diagonalen
   im Winkel 131°, dieselbe Papierfläche darunter.
   ============================================================================= */
#anmeldung {
  min-height: 100vh; min-height: 100svh; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px;
  background:
    linear-gradient(
      131deg,
      transparent 10%,
      #FFFFFF 10%, #FFFFFF 26%,
      transparent 26%, transparent 58%,
      #FFFFFF 58%, #FFFFFF 70%,
      transparent 70%
    ),
    var(--idt-paper-2);
}
:root[data-thema="dunkel"] #anmeldung {
  background: #001F22;
  background:
    linear-gradient(
      131deg,
      transparent 10%,
      color-mix(in srgb, var(--idt-violet) 80%, transparent) 10%,
      color-mix(in srgb, var(--idt-violet) 80%, transparent) 26%,
      transparent 26%, transparent 58%,
      color-mix(in srgb, var(--idt-cyan) 45%, transparent) 58%,
      color-mix(in srgb, var(--idt-cyan) 45%, transparent) 70%,
      transparent 70%
    ),
    #001F22;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) #anmeldung {
    background: #001F22;
    background:
      linear-gradient(
        131deg,
        transparent 10%,
        color-mix(in srgb, var(--idt-violet) 80%, transparent) 10%,
        color-mix(in srgb, var(--idt-violet) 80%, transparent) 26%,
        transparent 26%, transparent 58%,
        color-mix(in srgb, var(--idt-cyan) 45%, transparent) 58%,
        color-mix(in srgb, var(--idt-cyan) 45%, transparent) 70%,
        transparent 70%
      ),
      var(--idt-ink);
  }
}
.anmeldung-logo { width: min(300px, 74vw); height: auto; margin: 0 0 32px; }
#anmeldung .karte {
  width: 460px; max-width: 100%; margin-bottom: 0;
  border: var(--bw-frame) solid var(--kante); box-shadow: var(--block-gross);
}
#anmeldung .karte h2 { font-size: 18.5px; }
#anmeldung .hinweis { margin-bottom: 14px; }
#anmeldung button.primaer { margin-top: 12px; }

/* =============================================================================
   21) KLEINIGKEITEN
   ============================================================================= */
.pillen { display: flex; gap: 6px; flex-wrap: wrap; }
.kasten { display: flex; gap: 10px 16px; flex-wrap: wrap; }
/* Ein Kontrollkästchen führt einen ganzen Satz mit sich — hier ist die
   Beschriftung Text und kein Etikett, die Versalien werden zurückgenommen. */
.kasten label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; color: var(--ink); font-weight: 400;
  text-transform: none; letter-spacing: 0;
}

/* Die Ausgabe eines Exports steht Zeile für Zeile so da, wie sie die Datei
   verlässt. Das braucht eine feste Laufweite — die Mono-Angabe des Themes
   ist Inter und damit proportional, hier gilt sie deshalb nicht. */
pre.ausgabe {
  background: var(--tief); border: var(--bw-hair) solid var(--grid); border-radius: var(--radius-md);
  padding: 12px; overflow: auto; max-height: 60vh; font-size: 14px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* Der Balken für Macht und Interesse trägt den Verlauf des Logos. */
.balken {
  display: inline-block; width: 90px; height: 6px; border-radius: var(--radius-pill);
  background: var(--grid); vertical-align: middle; overflow: hidden; margin: 0 8px;
}
.balken i { display: block; height: 100%; background: var(--verlauf); }

/* Ein Messwert: Beschriftung, Zahl, Balken — in drei festen Spalten. Macht und
   Interesse stehen untereinander und sollen sich vergleichen lassen; als
   Fließtext schoben die verschieden langen Beschriftungen die Balken
   gegeneinander, und zwei versetzte Balken vergleicht niemand. Die dritte
   Spalte nimmt, was übrig ist — dadurch sind auch die Balken gleich lang.

   Die ersten beiden Spalten haben feste Maße und nicht `auto`: jede Zeile ist
   ein eigenes Raster, `auto` bemäße sie also je Zeile neu, und „unklar“ neben
   einer „5“ schöbe den Balken wieder ein Stück weiter. 4em fassen „unklar“. */
.messwert {
  display: grid; grid-template-columns: 5.5em 4em minmax(40px, 1fr);
  align-items: center; gap: 8px; margin: 0 0 5px;
}
.messwert-zahl { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); color: var(--ink2); }
.messwert .balken { width: auto; margin: 0; }

.nur-lesen { color: var(--ink2); }

/* Zwei Fassungen der Wortmarke: die dunkle auf Papier, die helle auf Ink.
   Beide liegen in der Seite, sichtbar ist je nach Fassung genau eine. */
.logo-dunkel { display: none; }
:root[data-thema="dunkel"] .logo-hell { display: none; }
:root[data-thema="dunkel"] .logo-dunkel { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .logo-hell { display: none; }
  :root:not([data-thema="hell"]) .logo-dunkel { display: block; }
}

/* Wer keine Bewegung sehen will, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  button:hover, .chip.hebt { transform: none; }
}