/* =====================================================================================================
   textd – Dein Text Daemon · Gestaltungssystem
   Ruhig und literarisch: warmes Papierweiß, Tinte. Typografische Trennung in drei Schriftrollen:
     --steuer   Terminal-Schrift (JetBrains Mono) für alles, was steuert: Marke, Navigation, Knöpfe, Felder,
                Zustände, Seitentitel, Hilfe, Kommentare – die Konsole des Daemons.
     --inhalt   Antiqua (Literata) für alles, was zum Buch gehört: Lesetext, Buch- und Dokumenttitel, Zitate.
     --entwurf  Schreibmaschine mit Serifen (Courier Prime) für Rohtext und – wahlweise (<html data-satz="zustand">) –
                für Entwürfe, linksbündig; übernommene Texte stehen dann in Antiqua im Blocksatz.
   Schriften liegen in static/schrift/ (alle SIL OFL 1.1). Keine externen Ressourcen. Aufbau:
     1. Tokens (Farbe je Thema, Schrift, Abstand, Form)      6. Felder, Schalter, Auswahl
     2. Grundlagen                                            7. Muster: Panel, Einstellungsliste, Tabelle …
     3. Rahmen (Kopfzeile, Navigation, Inhaltsbreite)        8. Ansichten
     4. Seitenkopf, Abschnittskopf                            9. Tablet-Ansicht   10. E-Ink
     5. Knöpfe (primär, sekundär, still; gefahr, klein)
   Themen: <html data-theme="hell|dunkel|eink">; ohne Attribut folgt die Seite dem System.
   Tablet:  <html data-tablet> (automatisch bei Touch und passender Breite oder von Hand gewählt).
   Satz:    <html data-satz="zustand"> Entwurf/übernommen unterschiedlich gesetzt; ohne Attribut alles in Antiqua.
   ===================================================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("schrift/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("schrift/jetbrains-mono-700.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 400; font-display: swap; src: url("schrift/literata-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 400; font-display: swap; src: url("schrift/literata-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("schrift/literata-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url("schrift/courier-prime-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: italic; font-weight: 400; font-display: swap; src: url("schrift/courier-prime-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap; src: url("schrift/courier-prime-700-normal.woff2") format("woff2"); }
:root {
  /* Farben (hell) */
  --grund: #faf8f4;            /* Seitengrund: warmes Papier */
  --flaeche: #fffefb;          /* Panels, Lesefläche */
  --getoent: #f4f1ea;          /* hervorgehobene Fläche („Nächster Schritt“) */
  --text: #1d2330;             /* Tinte */
  --leise: #676b74;            /* Metatext, Hilfetexte */
  --linie: rgba(29,35,48,.11); /* Haarlinie */
  --linie-stark: rgba(29,35,48,.22);  /* Feld- und Knopfrahmen */
  --tonung: rgba(29,35,48,.045);      /* Hover sekundär/still */
  --akzent: #2e78ad; --akzent-hover: #26668f; --akzent-text: #fbfdff;
  --akzent-weich: rgba(46,120,173,.08); --akzent-ring: rgba(46,120,173,.25);
  --gruen: #3d7a52; --ocker: #a8741a; --blau: #5b5ea6; --rot: #b03a32; --neutral: rgba(29,35,48,.32);
  --marker: rgba(255,214,70,.45); --plus: rgba(61,122,82,.16); --minus: rgba(176,58,50,.14);
  --schatten: 0 10px 30px rgba(29,35,48,.10), 0 1px 3px rgba(29,35,48,.06);  /* nur Popover, Leiste, Toast */

  /* Schrift */
  --steuer: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;      /* Steuerung */
  --inhalt: "Literata", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;   /* Buchinhalt */
  --schreibmaschine: "Courier Prime", "Courier New", Courier, monospace;                    /* Rohtext, Entwürfe */
  --entwurf: var(--inhalt);    /* Entwürfe: Antiqua; mit data-satz="zustand" Schreibmaschine (siehe Abschnitt 8) */
  --mono: var(--steuer);       /* Diffs, JSON-Rohdaten, Codeschnipsel */
  --terminal: var(--steuer);
  /* Größen: die Terminal-Schrift läuft breiter als eine Grotesk, daher eine Stufe kleiner als früher */
  --t-11: 10.5px; /* Versalien-Beschriftungen */
  --t-13: 12.5px; /* Metazeilen, Hilfe */
  --t-14: 13px;   /* Bedienelemente */
  --t-15: 14px;   /* Grundschrift der Oberfläche */
  --t-17: 15.5px; /* Titel in Listen */
  --t-19: 19px;   /* Lesetext klein, Hervorhebung */
  --t-22: 19px;   /* Abschnittstitel */
  --t-30: 25px;   /* Seitentitel */
  --zeile: 1.55;

  /* Abstand: 4 / 8 / 12 / 16 / 24 / 32 / 48 */
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 24px; --a6: 32px; --a7: 48px;

  /* Form */
  --radius: 6px;               /* Felder und Knöpfe gleich */
  --h: 36px;                   /* Steuerhöhe */
  --h-klein: 30px;
  --strich: 1px;               /* Linienstärke (E-Ink: kräftiger) */
  --dauer: 150ms;
  --breite: 1120px;            /* Inhaltsbreite */
  --lesebreite: 68ch;
  --kopfhoehe: 56px;
  color-scheme: light;
}
/* Dunkel: bei Systemeinstellung (ohne festes Thema) und bei data-theme="dunkel" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --grund: #1b1a18; --flaeche: #232220; --getoent: #2a2825; --text: #e8e4dc; --leise: #a39f95;
    --linie: rgba(232,228,220,.11); --linie-stark: rgba(232,228,220,.24); --tonung: rgba(232,228,220,.06);
    --akzent: #8cc4ec; --akzent-hover: #aad5f3; --akzent-text: #12202b; --akzent-weich: rgba(140,196,236,.10); --akzent-ring: rgba(140,196,236,.3);
    --gruen: #7cc496; --ocker: #dfb062; --blau: #a9a8e6; --rot: #ee8f86; --neutral: rgba(232,228,220,.35);
    --marker: rgba(200,160,30,.4); --plus: rgba(124,196,150,.18); --minus: rgba(238,143,134,.16);
    --schatten: 0 10px 30px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3);
    color-scheme: dark;
  }
}
:root[data-theme="dunkel"] {
  --grund: #1b1a18; --flaeche: #232220; --getoent: #2a2825; --text: #e8e4dc; --leise: #a39f95;
  --linie: rgba(232,228,220,.11); --linie-stark: rgba(232,228,220,.24); --tonung: rgba(232,228,220,.06);
  --akzent: #8cc4ec; --akzent-hover: #aad5f3; --akzent-text: #12202b; --akzent-weich: rgba(140,196,236,.10); --akzent-ring: rgba(140,196,236,.3);
  --gruen: #7cc496; --ocker: #dfb062; --blau: #a9a8e6; --rot: #ee8f86; --neutral: rgba(232,228,220,.35);
  --marker: rgba(200,160,30,.4); --plus: rgba(124,196,150,.18); --minus: rgba(238,143,134,.16);
  --schatten: 0 10px 30px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3);
  color-scheme: dark;
}
/* E-Ink: Weiß und Schwarz, kräftige Linien, keine Farben als Bedeutungsträger (Details in Abschnitt 10) */
:root[data-theme="eink"] {
  --grund: #fff; --flaeche: #fff; --getoent: #fff; --text: #000; --leise: #1a1a1a;
  --linie: #000; --linie-stark: #000; --tonung: #fff;
  --akzent: #000; --akzent-hover: #000; --akzent-text: #fff; --akzent-weich: #fff; --akzent-ring: #000;
  --gruen: #000; --ocker: #000; --blau: #000; --rot: #000; --neutral: #000;
  --marker: transparent; --plus: #fff; --minus: #fff; --schatten: none;
  --strich: 1.5px; --dauer: 0ms; --t-15: 15px; --t-13: 13.5px; --t-14: 14px; --zeile: 1.65;
  color-scheme: light;
}

/* ---------------------------------------------------------------- 2. Grundlagen */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font: var(--t-15)/var(--zeile) var(--steuer); -webkit-font-smoothing: antialiased; }
a { color: var(--akzent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dauer); }
a:hover { color: var(--akzent-hover); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--steuer); font-weight: 700; line-height: 1.25; margin: 0; letter-spacing: -.01em; }
h1 { font-size: var(--t-30); letter-spacing: -.02em; }
/* Titel, die zum Buch gehören (Buch, Dokument, Konzeptvariante), stehen in Antiqua */
.inhalt-titel { font-family: var(--inhalt); font-weight: 400; letter-spacing: 0; }
h1.inhalt-titel { font-size: 31px; }
h2 { font-size: var(--t-22); }
h3 { font-size: var(--t-17); }
p { margin: 0 0 var(--a3); }
.leise, .still { color: var(--leise); }
.klein { font-size: var(--t-13); }
.zahl { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.versal { font: 500 var(--t-11)/1.4 var(--steuer); letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
details > summary { cursor: pointer; }
.nur-tablet { display: none !important; }

/* ---------------------------------------------------------------- 3. Rahmen */
#kopf { position: sticky; top: 0; z-index: 10; background: var(--grund); border-bottom: var(--strich) solid var(--linie); }
#kopf[hidden] { display: none; }
.kopf-innen { max-width: calc(var(--breite) + 2 * var(--a6)); margin: 0 auto; padding: 0 var(--a6); height: var(--kopfhoehe); display: flex; align-items: center; gap: var(--a6); }
/* Marke: „textd▌“ in Terminal-Schrift, darunter der Nebentitel */
#kopf .marke { display: flex; flex-direction: column; gap: 3px; color: var(--text); text-decoration: none; white-space: nowrap; }
#kopf .marke:hover { color: var(--text); }
.marke-name { display: inline-flex; align-items: baseline; font: 700 21px/1 var(--terminal); letter-spacing: -.02em; }
.marke-cursor { display: inline-block; width: .55em; height: .95em; margin-left: .08em; align-self: center; background: var(--akzent); animation: blinken 1.1s steps(1) infinite; }
.marke-unter { font: 400 10.5px/1 var(--terminal); letter-spacing: .04em; color: var(--leise); }
@keyframes blinken { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .marke-cursor { animation: none; } }

/* Daemon-Zustand in der Kopfzeile (wie systemctl status): ● arbeitet / ● ruht / ○ angehalten */
.dienst { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: var(--strich) solid var(--linie); border-radius: 13px;
  font: 400 12px/1 var(--terminal); color: var(--leise); text-decoration: none; white-space: nowrap; transition: border-color var(--dauer), color var(--dauer); }
.dienst:hover { color: var(--text); border-color: var(--linie-stark); }
.dienst-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--neutral); flex: none; }
.dienst[data-zustand="arbeitet"] .dienst-punkt { background: var(--gruen); animation: puls 1.6s ease-in-out infinite; }
.dienst[data-zustand="arbeitet"] .dienst-text { color: var(--text); }
.dienst[data-zustand="ruht"] .dienst-punkt { background: var(--akzent); }
.dienst[data-zustand="angehalten"] .dienst-punkt { background: none; box-shadow: inset 0 0 0 1.5px var(--rot); }
.dienst[data-zustand="angehalten"] .dienst-text { color: var(--rot); }
.dienst-unter { opacity: .75; }
.dienst-unter::before { content: '· '; }
.dienst-wort { font: 400 .88em var(--terminal); white-space: nowrap; }
#nav { display: flex; align-self: stretch; gap: var(--a5); flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
#nav::-webkit-scrollbar { display: none; }
#nav a { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--t-14)/1 var(--steuer); color: var(--leise); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: calc(-1 * var(--strich)); padding-top: 2px; transition: color var(--dauer), border-color var(--dauer); }
#nav a:hover { color: var(--text); }
#nav a.aktiv { color: var(--text); border-bottom-color: var(--akzent); }
.zaehler { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ocker); color: var(--grund); font: 600 11px/18px var(--steuer); text-align: center; }
.kopf-rechts { display: flex; align-items: center; gap: var(--a2); }
#ich { color: var(--leise); font-size: var(--t-13); white-space: nowrap; margin-right: var(--a2); }
main { max-width: calc(var(--breite) + 2 * var(--a6)); margin: 0 auto; padding: var(--a6) var(--a6) var(--a7); }

/* ---------------------------------------------------------------- 4. Seitenkopf, Abschnittskopf */
.seitenkopf { margin-bottom: var(--a6); }
.krume { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-size: var(--t-13); color: var(--leise); margin-bottom: var(--a2); }
.krume a { color: var(--leise); text-decoration: none; }
.krume a:hover { color: var(--akzent); text-decoration: underline; }
.krume .trenner { opacity: .6; }
.seitenkopf-zeile { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--a4) var(--a5); flex-wrap: wrap; }
.seitenkopf-text { min-width: 0; flex: 1 1 320px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin-top: var(--a2); color: var(--leise); font-size: var(--t-14); }
/* Trenner zwischen den Einträgen */
.meta > * + *::before { content: '·'; display: inline-block; width: 20px; text-align: center; color: var(--leise); opacity: .7; }
.aktionen { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; }
.abschnitt { margin-top: var(--a7); }
.abschnitt:first-child, .seitenkopf + .abschnitt, .unterreiter + .abschnitt { margin-top: 0; }
.abschnitt-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--a3) var(--a4); flex-wrap: wrap; margin-bottom: var(--a4); }
.abschnitt-kopf h2 { font-size: var(--t-22); }
.abschnitt-kopf .unter { color: var(--leise); font-size: var(--t-14); margin-top: var(--a1); }
.gruppe-titel { margin: var(--a5) 0 var(--a2); }
.unterreiter { display: flex; gap: var(--a5); border-bottom: var(--strich) solid var(--linie); margin: calc(-1 * var(--a3)) 0 var(--a6); overflow-x: auto; scrollbar-width: none; }
.unterreiter a { font: 500 var(--t-14)/1 var(--steuer); color: var(--leise); text-decoration: none; padding: var(--a3) 0; border-bottom: 2px solid transparent; margin-bottom: calc(-1 * var(--strich)); white-space: nowrap; }
.unterreiter a:hover { color: var(--text); }
.unterreiter a[aria-current="page"] { color: var(--text); border-bottom-color: var(--akzent); }

/* ---------------------------------------------------------------- 5. Knöpfe
   .knopf = sekundär (Umriss neutral) · .primaer = gefüllt (höchstens einer je Kontext) · .still = nur Text
   Modifikatoren: .gefahr (rote Schrift; Löschen/Abbrechen) · .klein (30 px) · .nur-symbol */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--h); padding: 0 14px; margin: 0;
  font: 500 var(--t-14)/1 var(--steuer); letter-spacing: 0; white-space: nowrap; text-decoration: none; cursor: pointer; vertical-align: middle;
  color: var(--text); background: var(--flaeche); border: var(--strich) solid var(--linie-stark); border-radius: var(--radius);
  transition: background var(--dauer), border-color var(--dauer), color var(--dauer); -webkit-tap-highlight-color: transparent; }
.knopf:hover { background: var(--tonung); border-color: var(--leise); color: var(--text); }
.knopf.primaer { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.knopf.primaer:hover { background: var(--akzent-hover); border-color: var(--akzent-hover); color: var(--akzent-text); }
.knopf.still { background: transparent; border-color: transparent; color: var(--leise); padding: 0 10px; }
.knopf.still:hover { background: var(--tonung); color: var(--text); }
.knopf.gefahr { color: var(--rot); }
.knopf.gefahr:hover { color: var(--rot); background: color-mix(in srgb, var(--rot) 8%, transparent); }
.knopf.klein { height: var(--h-klein); padding: 0 10px; font-size: 13px; }
.knopf.still.klein { padding: 0 8px; }
.knopf.nur-symbol { width: var(--h); padding: 0; }
.knopf.klein.nur-symbol { width: var(--h-klein); }
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.knopf .sym { font-size: 1.05em; line-height: 1; }
.knopfgruppe { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; }
.knopfgruppe.rechts { justify-content: flex-end; }
.knopfgruppe .abstand { flex: 1; }
.fuss { margin-top: var(--a4); }

/* Geteilter Knopf: nahtlos, gleiche Höhe */
.teilknopf { display: inline-flex; vertical-align: middle; }
.teilknopf > .knopf:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.teilknopf > .teil-pfeil { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: calc(-1 * var(--strich)); width: 32px; padding: 0; font-size: 11px; }
.teilknopf > .knopf.klein.teil-pfeil { width: 26px; }
.teilknopf > .knopf.primaer.teil-pfeil { border-left-color: color-mix(in srgb, var(--akzent-text) 35%, transparent); margin-left: 0; }

/* Popover / Menü */
.popover { position: fixed; z-index: 30; min-width: 220px; max-width: min(340px, calc(100vw - 16px)); padding: var(--a1); background: var(--flaeche);
  border: var(--strich) solid var(--linie-stark); border-radius: 8px; box-shadow: var(--schatten); }
.menue-eintrag { display: flex; align-items: center; width: 100%; min-height: var(--h); padding: 0 var(--a3); border: 0; border-radius: 4px; background: none;
  font: 500 var(--t-14)/1.3 var(--steuer); color: var(--text); text-align: left; cursor: pointer; }
.menue-eintrag:hover, .menue-eintrag:focus-visible { background: var(--tonung); outline: none; }
.menue-eintrag.gefahr { color: var(--rot); }
.menue-hilfe { padding: 0 var(--a3) var(--a2); font-size: var(--t-13); color: var(--leise); line-height: 1.45; }
.menue-trenner { height: var(--strich); background: var(--linie); margin: var(--a1) 0; }

/* ---------------------------------------------------------------- 6. Felder, Schalter, Auswahl */
input, select, textarea { font: 400 var(--t-14)/1.4 var(--steuer); color: var(--text); background: var(--flaeche); border: var(--strich) solid var(--linie-stark);
  border-radius: var(--radius); margin: 0; max-width: 100%; transition: border-color var(--dauer), box-shadow var(--dauer); }
input:not([type=checkbox]):not([type=radio]), select { height: var(--h); padding: 0 var(--a3); }
select { padding-right: 28px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--leise) 50%), linear-gradient(135deg, var(--leise) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
textarea { display: block; width: 100%; padding: var(--a2) var(--a3); resize: vertical; line-height: 1.55; min-height: calc(var(--h) * 2); }
input::placeholder, textarea::placeholder { color: var(--leise); opacity: .75; }
input:hover, select:hover, textarea:hover { border-color: var(--leise); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-ring); }
input:disabled, select:disabled { opacity: .55; }
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.breit { width: 100%; }
/* Feldmuster: Beschriftung oben – Feld – Hilfe unten */
.feld { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--a4); min-width: 0; }
.feld-titel { font: 500 var(--t-11)/1.4 var(--steuer); letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.feld-hilfe { font-size: var(--t-13); color: var(--leise); line-height: 1.45; }
.felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 var(--a4); align-items: start; }
/* Feld mit Einheit als Suffix */
.mit-einheit { position: relative; display: inline-flex; align-items: center; }
.mit-einheit input:not([type=checkbox]) { width: 100%; padding-right: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.mit-einheit .suffix { position: absolute; right: var(--a3); color: var(--leise); font-size: var(--t-13); pointer-events: none; }
.w-s { width: 104px; } .w-m { width: 160px; } .w-l { width: 240px; }

/* Kippschalter: <input type=checkbox role=switch class=schalter> */
.schalter { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 36px; height: 20px; margin: 0; border-radius: 10px; cursor: pointer;
  background: var(--linie-stark); border: 0; transition: background var(--dauer); vertical-align: middle; }
.schalter::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--flaeche);
  box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform var(--dauer); }
.schalter:checked { background: var(--akzent); }
.schalter:checked::after { transform: translateX(16px); }
.schalter:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; box-shadow: none; }
.schalter:disabled { opacity: .5; cursor: not-allowed; }

/* Kästchen und Optionsfeld */
input[type=checkbox]:not(.schalter), input[type=radio] { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; cursor: pointer;
  border: var(--strich) solid var(--linie-stark); background: var(--flaeche); display: inline-grid; place-content: center; vertical-align: middle; transition: background var(--dauer), border-color var(--dauer); }
input[type=checkbox]:not(.schalter) { border-radius: 4px; }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:not(.schalter):checked { background: var(--akzent); border-color: var(--akzent); }
input[type=checkbox]:not(.schalter):checked::after { content: ''; width: 9px; height: 5px; border: 2px solid var(--akzent-text); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
input[type=radio]:checked { border-color: var(--akzent); border-width: 5px; }

/* Auswahlkarten (Varianten, Genre, Begleitung) */
.auswahl-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--a3); }
.auswahl { position: relative; display: flex; gap: var(--a3); align-items: flex-start; padding: var(--a4); background: var(--flaeche); cursor: pointer;
  border: var(--strich) solid var(--linie); border-radius: var(--radius); transition: border-color var(--dauer), background var(--dauer); }
.auswahl:hover { border-color: var(--linie-stark); }
.auswahl.gewaehlt { border-color: var(--akzent); background: var(--akzent-weich); box-shadow: inset 0 0 0 1px var(--akzent); }
.auswahl > input { margin-top: 2px; }
.auswahl-inhalt { min-width: 0; flex: 1; }
.auswahl-titel { font: 700 var(--t-15)/1.35 var(--steuer); }
.auswahl-titel.inhalt-titel { font: 400 var(--t-17)/1.35 var(--inhalt); }
.auswahl-text { font-size: var(--t-13); color: var(--leise); margin-top: 2px; line-height: 1.45; }
.auswahl .status { margin-top: var(--a2); }
.auswahl textarea { margin-top: var(--a2); }

/* Segment-Schalter (Darstellung) */
.segment { display: inline-flex; padding: 2px; border: var(--strich) solid var(--linie-stark); border-radius: var(--radius); background: var(--flaeche); flex-wrap: wrap; }
.segment button { height: calc(var(--h) - 6px); padding: 0 12px; border: 0; border-radius: 4px; background: none; color: var(--leise); font: 500 var(--t-13)/1 var(--steuer); cursor: pointer; }
.segment button:hover { color: var(--text); }
.segment button[aria-checked="true"] { background: var(--text); color: var(--grund); }
.darstellung { padding: var(--a3); display: grid; gap: var(--a3); }
.darstellung .feld { margin: 0; }

/* ---------------------------------------------------------------- 7. Muster */
/* Panel: Haarlinie, kein Schatten */
.panel { background: var(--flaeche); border: var(--strich) solid var(--linie); border-radius: 8px; padding: var(--a5); }
.panel + .panel { margin-top: var(--a4); }
.messer-raster > .panel + .panel, .auswahl-raster > .panel + .panel { margin-top: 0; }
.panel.getoent { background: var(--getoent); }
.panel-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--a2) var(--a4); flex-wrap: wrap; margin-bottom: var(--a3); }
.panel-kopf h3 { font-size: var(--t-17); }

/* Einstellungsliste: Beschriftung + Hilfe links, Steuerelement rechts */
.eliste { background: var(--flaeche); border: var(--strich) solid var(--linie); border-radius: 8px; padding: 0 var(--a5); }
.ez { display: flex; align-items: center; justify-content: space-between; gap: var(--a3) var(--a5); padding: var(--a4) 0; min-height: 60px; }
.ez + .ez { border-top: var(--strich) solid var(--linie); }
.ez-text { flex: 1 1 260px; min-width: 0; }
.ez-titel { font-weight: 500; font-size: var(--t-15); }
.ez-hilfe { font-size: var(--t-13); color: var(--leise); margin-top: 2px; line-height: 1.45; max-width: 60ch; }
.ez-steuer { flex: none; display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; justify-content: flex-end; }
.ez.block { flex-direction: column; align-items: stretch; }
.ez.block .ez-steuer { justify-content: flex-start; }
.eliste-fuss { display: flex; justify-content: flex-end; gap: var(--a2); padding: var(--a4) 0; border-top: var(--strich) solid var(--linie); }

/* Tabelle */
.tabelle { width: 100%; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--t-14); }
th { font: 500 var(--t-11)/1.4 var(--steuer); letter-spacing: .06em; text-transform: uppercase; color: var(--leise); text-align: left; white-space: nowrap;
  padding: 0 var(--a4) var(--a2) 0; border-bottom: var(--strich) solid var(--linie-stark); }
td { padding: var(--a3) var(--a4) var(--a3) 0; border-bottom: var(--strich) solid var(--linie); vertical-align: top; }
th:last-child, td:last-child { padding-right: 0; }
th.zahl, td.zahl { text-align: right; }
td.aktion, th.aktion { text-align: right; white-space: nowrap; width: 1%; }
td.aktion .aktionen { justify-content: flex-end; flex-wrap: nowrap; }
td a { text-decoration: none; }
td a:hover { text-decoration: underline; }
td .unter { font-size: var(--t-13); color: var(--leise); margin-top: 2px; }
tbody tr { transition: background var(--dauer); }
.tabelle td > input, .tabelle td > select { width: 100%; }
.tabelle td.mitte { vertical-align: middle; }
.protokoll td:first-child { white-space: nowrap; color: var(--leise); width: 1%; }
.protokoll td:nth-child(2) { white-space: nowrap; width: 1%; }

/* Status: Punkt + Text */
.status { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-13); color: var(--text); line-height: 1.4; }
td .status, .einheit > .status, .meta .status, .buchkarte .status { white-space: nowrap; }
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--neutral); flex: none; }
.status.gut::before { background: var(--gruen); }
.status.warn::before { background: var(--ocker); }
.status.info::before { background: var(--blau); }
.status.schlecht { color: var(--rot); } .status.schlecht::before { background: var(--rot); }
.status.laeuft::before { animation: puls 1.6s ease-in-out infinite; }

/* Hinweise, leere Zustände, Toast */
.leer { color: var(--leise); font-size: var(--t-14); margin: var(--a2) 0; }
.hinweis { font-size: var(--t-14); color: var(--leise); border-left: 2px solid var(--linie-stark); padding: 2px 0 2px var(--a3); margin: var(--a3) 0; }
.hinweis.warn { border-left-color: var(--ocker); color: var(--text); }
.fehlerbox { border-left: 2px solid var(--rot); padding: var(--a2) var(--a4); color: var(--rot); }
#meldungen { position: fixed; right: var(--a5); bottom: var(--a5); z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: var(--a2); pointer-events: none; }
.meldung { pointer-events: auto; display: flex; align-items: center; gap: var(--a3); max-width: 420px; padding: var(--a2) var(--a2) var(--a2) var(--a4);
  background: var(--text); color: var(--grund); border-radius: 8px; box-shadow: var(--schatten); font-size: var(--t-14); animation: auf var(--dauer) ease-out; }
.meldung span { flex: 1; white-space: pre-wrap; }
.meldung.fehler { background: var(--rot); color: #fff; }
.meldung .knopf.still { color: inherit; opacity: .8; }
.meldung .knopf.still:hover { background: rgba(255,255,255,.12); color: inherit; opacity: 1; }
@keyframes auf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes puls { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* Kennzahlen */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border: var(--strich) solid var(--linie); border-radius: 8px; background: var(--flaeche); }
.kennzahl { padding: var(--a4) var(--a5); border-left: var(--strich) solid var(--linie); min-width: 0; }
.kennzahl:first-child { border-left: 0; }
.kennzahl-wert { font: 400 var(--t-22)/1.2 var(--steuer); font-variant-numeric: tabular-nums; margin-top: var(--a1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kennzahl-wert .status { font: 400 var(--t-15)/1.4 var(--steuer); }
.kennzahl .unter { font-size: var(--t-13); color: var(--leise); margin-top: 2px; }

/* Auslastung: feiner Balken mit Grenzmarken */
.messer-raster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a4); }
.messer { padding: var(--a4) var(--a5) var(--a5); }
.messer-kopf { display: flex; justify-content: space-between; align-items: baseline; }
.messer-wert { font: 400 var(--t-22)/1 var(--steuer); font-variant-numeric: tabular-nums; }
.balken { position: relative; height: 6px; background: var(--linie); border-radius: 3px; margin: var(--a3) 0 var(--a2); }
.balken .fuell { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--akzent); }
.balken.warn .fuell { background: var(--ocker); } .balken.schlecht .fuell { background: var(--rot); }
.balken .marke { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ocker); border-radius: 1px; }
.balken .marke.hart { background: var(--rot); }
.messer-fuss { font-size: var(--t-13); color: var(--leise); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 8. Ansichten */
/* Startseite: Marke, Ausblick, Newsletter, Anmeldung */
.startseite { max-width: 440px; margin: 10vh auto var(--a7); }
.anmeldung-marke { margin-bottom: var(--a5); }
.anmeldung-marke .marke-name { font-size: 40px; }
.anmeldung-marke .marke-unter { display: block; margin-top: var(--a2); font-size: 14px; }
.teaser { margin-bottom: var(--a5); }
.teaser-status { font: 400 var(--t-13)/1.4 var(--steuer); color: var(--leise); margin-bottom: var(--a3); }
.teaser-punkt { color: var(--gruen); animation: blinken 2.2s steps(1) infinite; }
.teaser-text { font: 400 var(--t-19)/1.5 var(--inhalt); }
.teaser-text + .teaser-text { margin-top: var(--a3); }
.start-titel { font: 700 var(--t-15)/1.3 var(--steuer); margin-bottom: var(--a3); }
.startseite .panel .knopf { width: 100%; margin-top: var(--a2); }
.startseite .panel .feld-hilfe { margin-top: var(--a3); }
/* Einblick: etwas breiter als die Spalte, unten ausgeblendet */
.einblick { position: relative; left: 50%; transform: translateX(-50%); width: min(760px, calc(100vw - 32px)); margin: 0 0 var(--a6); }
.einblick img { display: block; width: 100%; height: auto; border: var(--strich) solid var(--linie); border-radius: 8px; box-shadow: var(--schatten);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.einblick figcaption { max-width: 440px; margin: var(--a2) auto 0; font: 400 var(--t-13)/1.45 var(--steuer); color: var(--leise); }
.einblick picture { display: block; }
.einblick-dunkel { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .einblick-hell { display: none !important; }
  :root:not([data-theme]) .einblick-dunkel { display: block !important; }
}
:root[data-theme="dunkel"] .einblick-hell { display: none !important; }
:root[data-theme="dunkel"] .einblick-dunkel { display: block !important; }
.honigtopf { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .teaser-punkt { animation: none; } }

/* Bücher */
.buchraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--a4); }
.buchkarte { display: flex; flex-direction: column; gap: var(--a2); padding: var(--a5); color: inherit; text-decoration: none; background: var(--flaeche);
  border: var(--strich) solid var(--linie); border-radius: 8px; transition: border-color var(--dauer); }
.buchkarte:hover { color: inherit; border-color: var(--linie-stark); }
.buchkarte h3 { font: 400 22px/1.25 var(--inhalt); letter-spacing: 0; }
.buchkarte .unter { font-size: var(--t-13); color: var(--leise); }
.buchkarte-fuss { display: flex; justify-content: space-between; align-items: center; gap: var(--a3); flex-wrap: wrap; margin-top: auto; padding-top: var(--a2); }
.fortschritt { display: flex; height: 3px; border-radius: 2px; overflow: hidden; background: var(--linie); margin: var(--a2) 0 var(--a1); }
.fortschritt i { display: block; }
.f-freigegeben { background: var(--gruen); } .f-entwurf { background: var(--ocker); } .f-aenderung { background: var(--blau); }
.neues-buch { margin-bottom: var(--a6); }
.schrittzahl { margin-bottom: var(--a2); }

/* Buch: Nächster Schritt – das eine hervorgehobene Element */
.naechster { background: var(--getoent); border: var(--strich) solid var(--linie); border-radius: 8px; padding: var(--a5) var(--a5) var(--a5); margin-bottom: var(--a6); }
.naechster-text { font: 400 var(--t-17)/1.5 var(--steuer); margin: var(--a2) 0 var(--a4); max-width: 60ch; }
.naechster-text:last-child { margin-bottom: 0; }
.naechster .weitere { margin-top: var(--a5); border-top: var(--strich) solid var(--linie); }
.weiter-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--a2) var(--a4); padding: var(--a3) 0; border-bottom: var(--strich) solid var(--linie); font-size: var(--t-14); color: var(--leise); flex-wrap: wrap; }
.weiter-zeile:last-child { border-bottom: 0; padding-bottom: 0; }
.weiter-zeile > span { flex: 1 1 300px; }
.vorschlag + .vorschlag { margin-top: var(--a5); padding-top: var(--a5); border-top: var(--strich) solid var(--linie); }
.betroffen { display: flex; gap: var(--a3); align-items: flex-start; padding: var(--a2) 0; cursor: pointer; }
.betroffen > input { margin-top: 3px; }
.betroffen .unter { font-size: var(--t-13); color: var(--leise); }

/* Zeitleiste */
.phase { margin: var(--a6) 0 var(--a2); }
.phase:first-of-type { margin-top: 0; }
.zeitleiste { border-left: var(--strich) solid var(--linie-stark); margin-left: 4px; }
.einheit { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--a4); padding: 10px var(--a3) 10px var(--a5); border-radius: 0 var(--radius) var(--radius) 0; transition: background var(--dauer); }
.einheit::before { content: ''; position: absolute; left: -5px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--grund); border: var(--strich) solid var(--linie-stark); box-sizing: border-box; }
.einheit[data-art="gut"]::before { background: var(--gruen); border-color: var(--gruen); }
.einheit[data-art="warn"]::before { background: var(--ocker); border-color: var(--ocker); }
.einheit[data-art="info"]::before { background: var(--blau); border-color: var(--blau); }
.einheit[data-art="schlecht"]::before { background: var(--rot); border-color: var(--rot); }
.einheit:has(.einheit-titel[href]):hover { background: var(--tonung); }
.einheit-haupt { min-width: 0; flex: 1; }
.einheit-titel { font: 400 var(--t-15)/1.4 var(--steuer); color: var(--text); text-decoration: none; }
a.einheit-titel::after { content: ''; position: absolute; inset: 0; }
a.einheit-titel:hover { color: var(--text); }
.einheit.platzhalter .einheit-titel { color: var(--leise); }
.einheit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: var(--t-13); color: var(--leise); margin-top: 1px; }
.einheit-meta { margin-left: -16px; overflow: hidden; }
.einheit-meta > * + *::before { content: '·'; display: inline-block; width: 16px; text-align: center; opacity: .7; }
.einheit-meta .warnung { color: var(--ocker); }
.einheit-meta .knopf { position: relative; z-index: 1; height: auto; padding: 0; border: 0; background: none; color: var(--akzent); font-size: var(--t-13); }
.einheit-meta .knopf:hover { text-decoration: underline; background: none; }
.einheit > .status { margin-top: 4px; }
.einheit.zwischen { padding-top: 4px; padding-bottom: 4px; }
.einheit.zwischen .einheit-titel { font-size: var(--t-15); color: var(--leise); }
.einheit.zwischen::before { width: 7px; height: 7px; left: -4px; top: 13px; }

/* Dokument */
.entscheidung { margin-bottom: var(--a6); }
.entscheidung .hilfe { font: 400 var(--t-14)/1.6 var(--steuer); color: var(--leise); max-width: 64ch; margin: var(--a2) 0 var(--a5); }
.entscheidung h3 { margin-bottom: var(--a3); }
.entscheidung .feld { margin: var(--a4) 0 0; }
.entscheidung .knopfgruppe { margin-top: var(--a5); }
.dokument { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--a6); align-items: start; }
.leseflaeche { position: relative; background: var(--flaeche); border: var(--strich) solid var(--linie); border-radius: 8px; padding: var(--a7) 56px; min-height: 320px; }
.lese-werkzeuge { position: absolute; top: var(--a3); right: var(--a3); }
.lesetext { font-family: var(--inhalt); font-size: 18px; line-height: 1.75; max-width: var(--lesebreite); margin: 0 auto; overflow-wrap: anywhere; hyphens: auto; }
.lesetext h1, .lesetext h2, .lesetext h3, .lesetext h4 { margin: 1.8em 0 .5em; font-family: inherit; font-weight: 600; letter-spacing: 0; text-align: left; }
.lesetext > :first-child { margin-top: 0; }
.lesetext h1 { font-size: 28px; } .lesetext h2 { font-size: 22px; } .lesetext h3 { font-size: 19px; font-style: italic; }
.lesetext p { margin: 0 0 1em; }
.lesetext ul, .lesetext ol { padding-left: 1.3em; }
.lesetext blockquote { margin: 1.2em 0; padding: 0 0 0 1.2em; border-left: var(--strich) solid var(--linie-stark); color: var(--leise); font-style: italic; }
.lesetext code { font-family: var(--mono); font-size: .8em; background: var(--getoent); padding: .1em .35em; border-radius: 3px; }
.lesetext pre { background: var(--getoent); padding: var(--a3) var(--a4); border-radius: var(--radius); overflow-x: auto; line-height: 1.45; }
.lesetext pre code { background: none; padding: 0; }
.lesetext table { font-family: inherit; font-size: 15px; line-height: 1.5; display: block; overflow-x: auto; }
.lesetext hr { border: 0; border-top: var(--strich) solid var(--linie); margin: 2em 0; }
/* Satz nach Zustand (wahlweise): Entwurf in Schreibmaschine, linksbündig – übernommener Text in Antiqua, Blocksatz */
:root[data-satz="zustand"] { --entwurf: var(--schreibmaschine); }
:root[data-satz="zustand"] .lesetext.entwurf { font-family: var(--schreibmaschine); font-size: 17px; line-height: 1.7; text-align: left; hyphens: manual; }
:root[data-satz="zustand"] .lesetext.fertig :is(p, li, dd, blockquote) { text-align: justify; hyphens: auto; }
mark, mark.treffer { background: var(--marker); color: inherit; border-radius: 2px; padding: 0 .08em; }
.json dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--a1) var(--a5); margin: 0; }
.json dt { color: var(--leise); font: 500 var(--t-11) var(--steuer); letter-spacing: .1em; text-transform: uppercase; padding-top: 7px; }
.json dd { margin: 0; }
.json .kachel { border-top: var(--strich) solid var(--linie); padding: var(--a3) 0; }
.json ul { margin: 0; padding-left: 1.2rem; }
.rohtext { min-height: 60vh; font: 16px/1.6 var(--schreibmaschine); }
.diff { font: 13px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.diff div { padding: 0 var(--a2); }
.diff .plus { background: var(--plus); } .diff .minus { background: var(--minus); text-decoration: line-through; text-decoration-color: var(--linie-stark); }
.diff .kopf { color: var(--leise); } .diff .hunk { color: var(--akzent); }
.diff-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--a3); margin-bottom: var(--a4); }

/* Kommentarspalte */
.seite { position: sticky; top: calc(var(--kopfhoehe) + var(--a5)); max-height: calc(100vh - var(--kopfhoehe) - var(--a6)); overflow-y: auto; scrollbar-width: thin; }
.seite-kopf { display: flex; justify-content: space-between; align-items: center; min-height: var(--h-klein); margin-bottom: var(--a2); }
.verfassen { margin-bottom: var(--a4); }
.verfassen .knopfgruppe { margin-top: var(--a2); }
.zitat-vorschau { font: italic 14.5px/1.5 var(--inhalt); color: var(--leise); border-left: 2px solid var(--ocker); padding-left: var(--a2); margin-bottom: var(--a2); }
.kommentar { padding: var(--a3) 0; border-top: var(--strich) solid var(--linie); font-size: var(--t-14); }
.kommentar.erledigt { opacity: .6; }
.kommentar.hat-zitat { cursor: pointer; }
.kommentar.hat-zitat:hover .text { color: var(--akzent); }
.kommentar .kopfzeile { display: flex; gap: 0 6px; flex-wrap: wrap; align-items: baseline; color: var(--leise); font-size: var(--t-13); margin-bottom: 2px; }
.kommentar .kopfzeile b { font-weight: 600; color: var(--text); }
.kommentar .kopfzeile > * + *::before { content: '·'; margin-right: 6px; opacity: .7; }
.kommentar.ki .kopfzeile b { font-weight: 500; font-style: italic; }
.kommentar.ki .kopfzeile b::after { content: ' ✦'; color: var(--akzent); font-style: normal; }
.kommentar blockquote { margin: var(--a1) 0; padding-left: var(--a2); border-left: 2px solid var(--marker); font: italic 14.5px/1.5 var(--inhalt); color: var(--leise); }
.kommentar .text { white-space: pre-wrap; overflow-wrap: anywhere; transition: color var(--dauer); }
.kommentar .knopf { margin: var(--a1) 0 0 -8px; }
.fassungen { margin-top: var(--a5); border-top: var(--strich) solid var(--linie); padding-top: var(--a3); }
.fassungen > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: var(--h-klein); }
.fassungen > summary::-webkit-details-marker { display: none; }
.fassungen > summary::after { content: '▸'; color: var(--leise); font-size: 11px; }
.fassungen[open] > summary::after { content: '▾'; }
.fassung { padding: var(--a2) 0; border-top: var(--strich) solid var(--linie); font-size: var(--t-13); }
.fassung:first-of-type { border-top: 0; }
.fassung .knopfgruppe { gap: 0; margin-left: -8px; }
.erledigte > summary { font-size: var(--t-13); color: var(--leise); padding: var(--a2) 0; }
#markierung { position: fixed; z-index: 25; display: none; box-shadow: var(--schatten); }

/* Leitstand, Rückfragen */
.rf-karte { border-left: 3px solid var(--ocker); }
.rf-karte + .rf-karte { margin-top: var(--a4); }
.rf-paar { margin-top: var(--a5); }
.rf-frage { font: var(--t-15)/1.5 var(--steuer); margin-bottom: 2px; }
.rf-paar textarea { margin: var(--a2) 0 var(--a1); }
.rf-alt { border-top: var(--strich) solid var(--linie); padding: var(--a3) 0; font-size: var(--t-14); }
.rf-alt .rf-paar { margin-top: var(--a2); }
.aufklapp > summary { font-size: var(--t-14); color: var(--leise); padding: var(--a3) 0; }
.modell-dialog td { background: var(--getoent); }
.modell-dialog .knopfgruppe { padding: var(--a1) 0; }

/* Verbrauch */
svg.diagramm { width: 100%; height: auto; display: block; }
svg.diagramm .s { fill: var(--akzent); opacity: .85; }
svg.diagramm .g { stroke: var(--linie); stroke-width: 1; }
svg.diagramm text { fill: var(--leise); font: 10px var(--steuer); }
.tabellen-raster { margin-top: var(--a7); display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: var(--a6) var(--a6); }

/* So funktioniert's */
.hilfe-seite { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--a7); align-items: start; }
.inhalt-verz { position: sticky; top: calc(var(--kopfhoehe) + var(--a5)); font-size: var(--t-14); }
.inhalt-verz ol { list-style: none; margin: var(--a2) 0 0; padding: 0; border-left: var(--strich) solid var(--linie); }
.inhalt-verz a { display: block; padding: 5px 0 5px var(--a3); margin-left: calc(-1 * var(--strich)); border-left: 2px solid transparent; color: var(--leise); text-decoration: none; line-height: 1.35; }
.inhalt-verz a:hover { color: var(--text); }
.inhalt-verz a.aktiv { color: var(--text); border-left-color: var(--akzent); }
.hilfe-text { font: 14.5px/1.75 var(--steuer); min-width: 0; }
.hilfe-text section > :not(.ablauf) { max-width: var(--lesebreite); }
.hilfe-text section { margin-bottom: var(--a7); scroll-margin-top: calc(var(--kopfhoehe) + var(--a5)); }
.hilfe-text h2 { font-size: 21px; margin-bottom: var(--a3); }
.hilfe-text h3 { font-size: 16px; margin: var(--a5) 0 var(--a2); }
.hilfe-text p { margin: 0 0 1em; }
.hilfe-text ul, .hilfe-text ol { padding-left: 1.2em; margin: 0 0 1em; }
.hilfe-text li { margin: .25em 0; }
.hilfe-text dl { margin: 0 0 1em; }
.hilfe-text dt { font-weight: 600; margin-top: var(--a3); }
.hilfe-text dd { margin: 0; }
.hilfe-text .leitsatz { font-size: 16.5px; line-height: 1.6; }
.hilfe-text .knopf-name { font: 500 .8em var(--steuer); border: var(--strich) solid var(--linie-stark); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.frage { border-top: var(--strich) solid var(--linie); padding: var(--a3) 0; }
.frage > summary { font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--a3); }
.frage > summary::-webkit-details-marker { display: none; }
.frage > summary::after { content: '+'; font: 400 20px/1 var(--steuer); color: var(--leise); }
.frage[open] > summary::after { content: '–'; }
.frage > div { margin-top: var(--a2); }
/* Ablaufdiagramm */
.ablauf { font-family: var(--steuer); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a3); margin: var(--a5) 0 var(--a3); max-width: none; }
.ablauf-phase { position: relative; background: var(--flaeche); border: var(--strich) solid var(--linie); border-radius: 8px; padding: var(--a3); }
.ablauf-phase:not(:last-child)::after { content: '→'; position: absolute; right: -14px; top: 10px; color: var(--leise); font-size: 14px; }
.ablauf-phase.folgt { border-style: dashed; background: transparent; }
.ablauf-phase ol { list-style: none; margin: var(--a2) 0 0; padding: 0; counter-reset: s; }
.ablauf-phase li { overflow-wrap: anywhere; hyphens: auto; font-size: var(--t-13); line-height: 1.35; padding: 6px 8px; margin: 0 0 4px; border-radius: 4px; background: var(--grund); border: var(--strich) solid var(--linie); }
.ablauf-phase.folgt li { color: var(--leise); background: transparent; border-style: dashed; }
.ablauf-phase li .rolle { display: block; color: var(--leise); font-size: 11.5px; }
.ablauf-phase li.tor { border-color: var(--akzent); }
.ablauf-phase li.tor::before { content: '◆ '; color: var(--akzent); }
.ablauf-legende { font: var(--t-13) var(--steuer); color: var(--leise); }
@media (max-width: 1000px) { .ablauf { grid-template-columns: 1fr 1fr; } .ablauf-phase:nth-child(2)::after { display: none; } }
@media (max-width: 560px) { .ablauf { grid-template-columns: 1fr; } .ablauf-phase::after { display: none; } }

/* Verlauf: Leiste von rechts */
.verlauf { position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 100%; z-index: 20; background: var(--flaeche); border-left: var(--strich) solid var(--linie-stark); box-shadow: var(--schatten); display: flex; flex-direction: column; }
@media (min-width: 1300px) { body.mit-verlauf main { margin-left: var(--a5); margin-right: 584px; } }
.vl-kopf { padding: var(--a4) var(--a5) var(--a3); border-bottom: var(--strich) solid var(--linie); }
.vl-kopfzeile { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--a3); }
.vl-titel { font: 700 var(--t-17)/1.3 var(--steuer); margin-top: 2px; }
.vl-meta { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--t-13); color: var(--leise); margin-top: var(--a1); }
.vl-meta > * + *::before { content: '·'; margin: 0 6px; opacity: .7; }
.vl-body { flex: 1; overflow-y: auto; padding: var(--a4) var(--a5) var(--a6); position: relative; }
.vl-neues { position: absolute; right: var(--a5); bottom: var(--a5); box-shadow: var(--schatten); }
.vl-block { border-top: var(--strich) solid var(--linie); padding: var(--a2) 0; font-size: var(--t-14); }
.vl-block:last-of-type { border-bottom: var(--strich) solid var(--linie); }
.vl-block summary { color: var(--text); }
.vl-docs { font-size: var(--t-13); color: var(--leise); margin: 2px 0 0 var(--a4); }
.vl-block pre { font: 12px/1.45 var(--mono); max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--getoent); padding: var(--a2) var(--a3); border-radius: var(--radius); margin: var(--a2) 0 0; }
.vl-versuch { margin: var(--a5) 0 var(--a2); padding-top: var(--a2); border-top: var(--strich) solid var(--linie-stark); }
.vl-denkt { color: var(--leise); font-size: var(--t-13); font-style: italic; margin: var(--a3) 0; }
.vl-werkzeug { color: var(--leise); font-size: var(--t-13); margin: var(--a1) 0; overflow-wrap: anywhere; }
pre.vl-antwort { font: 17px/1.7 var(--entwurf); white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--a3) 0; }
pre.vl-antwort.json { font: 13px/1.5 var(--mono); }
.vl-antwort.md { font-size: 16.5px; line-height: 1.65; margin: var(--a3) 0; }
.cursor { display: inline-block; width: .5em; height: 1em; vertical-align: text-bottom; background: var(--akzent); opacity: .7; margin-left: 2px; animation: puls 1.1s ease-in-out infinite; }
.vl-ende { margin: var(--a4) 0; padding-top: var(--a3); border-top: var(--strich) solid var(--linie-stark); font-size: var(--t-14); color: var(--gruen); }
.vl-ende.fehler { color: var(--rot); } .vl-ende.warte { color: var(--ocker); }
.vl-fragen { padding-left: 1.3rem; font: 14px/1.6 var(--steuer); }
.vl-fragen li { margin: var(--a2) 0; }
.trotz { font-size: var(--t-13); color: var(--ocker); }

/* ---------------------------------------------------------------- Schmale Bildschirme (Telefon) */
@media (max-width: 960px) {
  .dokument { grid-template-columns: 1fr; }
  .seite { position: static; max-height: none; border-top: var(--strich) solid var(--linie); padding-top: var(--a5); }
  .hilfe-seite { grid-template-columns: 1fr; gap: var(--a5); }
  .inhalt-verz { position: static; border: var(--strich) solid var(--linie); border-radius: 8px; padding: var(--a3) var(--a4); background: var(--flaeche); }
  .inhalt-verz ol { columns: 2; border-left: 0; }
  .inhalt-verz a { padding-left: 0; border-left: 0; }
  .tabellen-raster { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .kopf-innen { padding: 0 var(--a4); gap: var(--a4); height: auto; flex-wrap: wrap; padding-top: var(--a3); }
  .marke-name { font-size: 19px; }
  .dienst-unter { display: none; }
  .kopf-rechts { margin-left: auto; }
  #ich { display: none; }
  #nav { order: 3; flex-basis: 100%; height: 44px; gap: var(--a4); }
  #kopf { position: static; }
  main { padding: var(--a5) var(--a4) var(--a7); }
  h1 { font-size: 22px; } h1.inhalt-titel { font-size: 26px; }
  .naechster { padding: var(--a4); }
  .naechster-text { font-size: var(--t-15); }
  .leseflaeche { padding: var(--a6) var(--a4) var(--a5); }
  .lesetext { font-size: 17.5px; }
  .panel, .messer { padding: var(--a4); }
  .eliste { padding: 0 var(--a4); }
  .ez { flex-wrap: wrap; }
  .ez:not(:has(.schalter)) .ez-steuer { flex-basis: 100%; justify-content: flex-start; }
  .messer-raster { grid-template-columns: 1fr; }
  .kennzahl { border-left: 0; border-top: var(--strich) solid var(--linie); padding: var(--a3) var(--a4); }
  .kennzahl:first-child { border-top: 0; }
  .kennzahlen { grid-template-columns: 1fr 1fr; }
  .kennzahl:nth-child(2) { border-top: 0; border-left: var(--strich) solid var(--linie); }
  .kennzahl:nth-child(2n+1) { border-left: 0; }
  .kennzahl:nth-child(2n) { border-left: var(--strich) solid var(--linie); }
  .inhalt-verz ol { columns: 1; }
  .hilfe-text { font-size: 17px; }
  #meldungen { left: var(--a4); right: var(--a4); bottom: var(--a4); align-items: stretch; }
  .meldung { max-width: none; }
  .einheit { padding-right: 0; }
  .einheit > .status { font-size: 12px; }
  /* Tabellen als Karten */
  .mobil-karten table, .mobil-karten tbody, .mobil-karten tr, .mobil-karten td { display: block; width: 100%; }
  .mobil-karten thead { display: none; }
  .mobil-karten tr { padding: var(--a3) 0; border-bottom: var(--strich) solid var(--linie); }
  .mobil-karten td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: var(--a4); text-align: right; }
  .mobil-karten td::before { content: attr(data-label); font: 500 var(--t-11)/1.9 var(--steuer); letter-spacing: .1em; text-transform: uppercase; color: var(--leise); text-align: left; flex: none; }
  .mobil-karten td:not([data-label])::before, .mobil-karten td[data-label=""]::before { display: none; }
  .mobil-karten td.haupt { display: block; text-align: left; font-weight: 500; }
  .mobil-karten td.haupt::before { display: none; }
  .mobil-karten td.aktion { width: 100%; justify-content: flex-start; padding-top: var(--a2); }
  .mobil-karten td.aktion::before { display: none; }
  .mobil-karten td > input, .mobil-karten td > select, .mobil-karten td > .mit-einheit { width: 60%; }
  .mobil-karten .modell-dialog td { display: block; text-align: left; }
  .protokoll td { display: block; width: auto !important; padding: 2px 0; border: 0; }
  .protokoll tr { display: block; padding: var(--a2) 0; border-bottom: var(--strich) solid var(--linie); }
  .verlauf { width: 100%; border-left: 0; }
}

/* ---------------------------------------------------------------- 9. Tablet-Ansicht (Touch, ca. 768–1180 px)
   Aktiv über <html data-tablet>: Tippziele ≥ 44 px, Kommentare als einblendbare Leiste, Tabellen als Karten. */
:root[data-tablet] { --h: 44px; --h-klein: 40px; --kopfhoehe: 60px; --t-14: 15px; --t-13: 14px; }
:root[data-tablet] .nur-tablet { display: inline-flex !important; }
:root[data-tablet] .nur-desktop { display: none !important; }
:root[data-tablet] .kopf-innen { padding: 0 var(--a5); gap: var(--a5); }
:root[data-tablet] #nav { gap: 0; }
:root[data-tablet] #nav a { padding: 0 var(--a3); min-height: 44px; }
:root[data-tablet] #ich { display: none; }
@media (max-width: 1100px) {   /* Tablet hochkant: Reiter in eigener Zeile, alle sichtbar und gut mit dem Daumen erreichbar */
  :root[data-tablet] { --kopfhoehe: 112px; }
  :root[data-tablet] .kopf-innen { flex-wrap: wrap; height: auto; padding-top: var(--a2); gap: 0 var(--a4); }
  :root[data-tablet] .kopf-rechts { margin-left: auto; }
  :root[data-tablet] #nav { order: 3; flex-basis: 100%; justify-content: space-between; height: 52px; }
}
:root[data-tablet] main { padding: var(--a5) var(--a5) var(--a7); }
:root[data-tablet] .schalter { width: 50px; height: 30px; border-radius: 15px; }
:root[data-tablet] .schalter::after { width: 26px; height: 26px; }
:root[data-tablet] .schalter:checked::after { transform: translateX(20px); }
:root[data-tablet] input[type=checkbox]:not(.schalter), :root[data-tablet] input[type=radio] { width: 24px; height: 24px; }
:root[data-tablet] input[type=radio]:checked { border-width: 7px; }
:root[data-tablet] .einheit { min-height: 56px; padding-top: 14px; padding-bottom: 14px; }
:root[data-tablet] .einheit::before { top: 21px; }
:root[data-tablet] .einheit.zwischen { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
:root[data-tablet] .einheit-meta .knopf { min-height: 32px; }
:root[data-tablet] .menue-eintrag { min-height: 48px; }
:root[data-tablet] .segment button { min-width: 44px; }
:root[data-tablet] .unterreiter a { padding: 14px var(--a2); }
:root[data-tablet] .inhalt-verz a { padding-top: 10px; padding-bottom: 10px; }
:root[data-tablet] .krume a { display: inline-block; padding: 8px 0; }
:root[data-tablet] .fassungen > summary, :root[data-tablet] .erledigte > summary, :root[data-tablet] .aufklapp > summary, :root[data-tablet] details > summary { min-height: 44px; display: flex; align-items: center; }
:root[data-tablet] #meldungen { top: calc(var(--kopfhoehe) + var(--a3)); bottom: auto; }  /* Toasts oben: nie unter der Bildschirmtastatur */
/* Dokument: Lesetext volle Breite, Kommentare als Leiste */
:root[data-tablet] .dokument { grid-template-columns: 1fr; }
:root[data-tablet] .leseflaeche { padding: var(--a7) var(--a6); }
:root[data-tablet] .seite { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); max-height: none; z-index: 22; background: var(--flaeche);
  border-left: var(--strich) solid var(--linie-stark); box-shadow: var(--schatten); padding: var(--a4) var(--a5) var(--a7); transform: translateX(105%); transition: transform 200ms ease; overscroll-behavior: contain; }
:root[data-tablet] body.kommentare-offen .seite { transform: none; }
:root[data-tablet] #markierung { left: 50% !important; top: auto !important; bottom: calc(var(--a6) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); }
/* Tabellen als Karten */
:root[data-tablet] .mobil-karten table, :root[data-tablet] .mobil-karten tbody, :root[data-tablet] .mobil-karten tr, :root[data-tablet] .mobil-karten td { display: block; width: 100%; }
:root[data-tablet] .mobil-karten thead { display: none; }
:root[data-tablet] .mobil-karten tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--a3); }
:root[data-tablet] .mobil-karten tr { padding: var(--a3) var(--a4); background: var(--flaeche); border: var(--strich) solid var(--linie); border-radius: 8px; }
:root[data-tablet] .mobil-karten td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; align-items: center; gap: var(--a4); text-align: right; }
:root[data-tablet] .mobil-karten td::before { content: attr(data-label); font: 500 var(--t-11)/1.9 var(--steuer); letter-spacing: .1em; text-transform: uppercase; color: var(--leise); text-align: left; flex: none; }
:root[data-tablet] .mobil-karten td:not([data-label])::before, :root[data-tablet] .mobil-karten td[data-label=""]::before { display: none; }
:root[data-tablet] .mobil-karten td.haupt { display: block; text-align: left; font-weight: 500; }
:root[data-tablet] .mobil-karten td.haupt::before { display: none; }
:root[data-tablet] .mobil-karten td.aktion { justify-content: flex-start; padding-top: var(--a2); }
:root[data-tablet] .mobil-karten td.aktion::before { display: none; }
:root[data-tablet] .mobil-karten td > input, :root[data-tablet] .mobil-karten td > select { width: 60%; }
:root[data-tablet] .mobil-karten .modell-dialog { grid-column: 1 / -1; }
:root[data-tablet] .mobil-karten .modell-dialog td { display: block; text-align: left; background: none; }
/* Verlauf: Querformat Seitenleiste, Hochformat Vollbild */
:root[data-tablet] .verlauf { width: 480px; }
:root[data-tablet] body.mit-verlauf main { margin-right: auto; margin-left: auto; }
@media (orientation: portrait) { :root[data-tablet] .verlauf { width: 100%; border-left: 0; } }
@media (orientation: landscape) and (min-width: 1100px) { :root[data-tablet] body.mit-verlauf main { margin-left: 0; margin-right: 480px; } }

/* ---------------------------------------------------------------- 10. E-Ink
   Reines Schwarz auf Weiß, Zustände über Symbole, kräftige Linien, keine Schatten/Übergänge/Animationen. */
:root[data-theme="eink"] *, :root[data-theme="eink"] *::before, :root[data-theme="eink"] *::after { transition: none !important; animation: none !important; box-shadow: none !important; text-shadow: none !important; }
:root[data-theme="eink"] { scroll-behavior: auto; }
:root[data-theme="eink"] .leise, :root[data-theme="eink"] .ez-hilfe, :root[data-theme="eink"] .feld-hilfe, :root[data-theme="eink"] .meta, :root[data-theme="eink"] .einheit-meta { font-style: italic; }
:root[data-theme="eink"] .knopf { border-width: 2px; }
:root[data-theme="eink"] .knopf.still { border-width: 0; text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme="eink"] .knopf:hover { background: #fff; }
:root[data-theme="eink"] .knopf.primaer:hover { background: #000; }
:root[data-theme="eink"] .knopf.gefahr { font-weight: 700; }
:root[data-theme="eink"] input, :root[data-theme="eink"] select, :root[data-theme="eink"] textarea { border-width: 1.5px; }
:root[data-theme="eink"] input:focus, :root[data-theme="eink"] select:focus, :root[data-theme="eink"] textarea:focus { outline: 2px solid #000; outline-offset: 1px; }
:root[data-theme="eink"] input[type=radio]:checked { border-width: 6px; }
:root[data-theme="eink"][data-tablet] input[type=radio]:checked { border-width: 8px; }
:root[data-theme="eink"] .schalter { background: #fff; border: 2px solid #000; }
:root[data-theme="eink"] .schalter::after { background: #000; top: 2px; left: 2px; width: 12px; height: 12px; }
:root[data-theme="eink"] .schalter:checked { background: #000; }
:root[data-theme="eink"] .schalter:checked::after { background: #fff; }
:root[data-theme="eink"][data-tablet] .schalter::after { width: 22px; height: 22px; }
:root[data-theme="eink"] .segment button[aria-checked="true"] { background: #000; color: #fff; }
:root[data-theme="eink"] .auswahl.gewaehlt { border-width: 3px; padding: calc(var(--a4) - 1.5px); }
:root[data-theme="eink"] .naechster { border-width: 3px; }
:root[data-theme="eink"] .zaehler { background: #000; color: #fff; }
:root[data-theme="eink"] .marke-cursor { background: #000; }
:root[data-theme="eink"] .dienst { border-color: #000; color: #000; }
:root[data-theme="eink"] .dienst-punkt { background: none !important; box-shadow: inset 0 0 0 1.5px #000 !important; }
:root[data-theme="eink"] .dienst[data-zustand="arbeitet"] .dienst-punkt { background: #000 !important; }
:root[data-theme="eink"] .dienst[data-zustand="angehalten"] .dienst-text { color: #000; font-weight: 700; }
:root[data-theme="eink"] .meldung, :root[data-theme="eink"] .meldung.fehler { background: #fff; color: #000; border: 2px solid #000; }
/* Zustände als Symbole statt Farben */
:root[data-theme="eink"] .status::before { content: '○'; width: auto; height: auto; background: none; border-radius: 0; font-size: 1.05em; line-height: 1; }
:root[data-theme="eink"] .status.gut::before { content: '●'; }
:root[data-theme="eink"] .status.warn::before { content: '◆'; }
:root[data-theme="eink"] .status.info::before { content: '◌'; }
:root[data-theme="eink"] .status.schlecht::before { content: '✕'; }
:root[data-theme="eink"] .status.schlecht { font-weight: 700; }
:root[data-theme="eink"] .einheit::before { background: #fff !important; border: 1.5px solid #000 !important; }
:root[data-theme="eink"] .einheit[data-art="gut"]::before { background: #000 !important; }
:root[data-theme="eink"] .einheit-meta .warnung { font-weight: 700; }
:root[data-theme="eink"] .einheit:has(.einheit-titel[href]):hover { background: #fff; }
:root[data-theme="eink"] mark, :root[data-theme="eink"] mark.treffer { background: none; text-decoration: underline 2px; text-underline-offset: 3px; outline: 1.5px solid #000; }
:root[data-theme="eink"] .kommentar blockquote, :root[data-theme="eink"] .zitat-vorschau { border-left: 3px solid #000; }
:root[data-theme="eink"] .kommentar.erledigt { opacity: 1; text-decoration: line-through; }
:root[data-theme="eink"] .rf-karte { border-left-width: 4px; }
/* Balken: Rahmen mit schwarzer Füllung, Grenzmarken als Striche */
:root[data-theme="eink"] .balken { height: 12px; background: #fff; border: 1.5px solid #000; border-radius: 0; }
:root[data-theme="eink"] .balken .fuell { background: #000 !important; border-radius: 0; }
:root[data-theme="eink"] .balken .marke { top: -6px; bottom: -6px; width: 2px; background: #000; }
:root[data-theme="eink"] .balken .marke.hart { width: 4px; margin-left: -2px; background: repeating-linear-gradient(#000 0 2px, #fff 2px 4px); }
:root[data-theme="eink"] .fortschritt { height: 8px; background: #fff; border: 1.5px solid #000; border-radius: 0; }
:root[data-theme="eink"] .f-freigegeben { background: #000; }
:root[data-theme="eink"] .f-entwurf { background: repeating-linear-gradient(45deg, #000 0 2px, #fff 2px 5px); }
:root[data-theme="eink"] .f-aenderung { background: repeating-linear-gradient(90deg, #000 0 1px, #fff 1px 4px); }
:root[data-theme="eink"] svg.diagramm .s { fill: #000; opacity: 1; }
:root[data-theme="eink"] .diff .plus { text-decoration: underline; font-weight: 700; }
:root[data-theme="eink"] .diff .minus { text-decoration: line-through; text-decoration-color: #000; }
:root[data-theme="eink"] .cursor { opacity: 1; }
:root[data-theme="eink"] .ablauf-phase li.tor { border-width: 2.5px; }
:root[data-theme="eink"] .lesetext { font-size: 19.5px; line-height: 1.8; }