/* Oberfläche nach dem Vorbild von content-studio (Nutzerwunsch 2026-08-13:
   „unordentlich und unübersichtlich" → dort ist die Struktur klarer).
   Übernommen sind Farbtokens, Abstands-Skala, Nav-Leiste mit Untermenüs,
   Karten- und Reiter-Vokabular sowie die Textbreite.

   Alle Abstände kommen aus --space-1..5 (4/8/12/16/20px). Neue Regeln bitte
   daraus bedienen, statt Pixelwerte zu streuen.

   Nur EIN Farbschema (dunkel). Der frühere `prefers-color-scheme: light`-Block
   ist entfallen: er kippte nur --bg/--panel/--line/--fg, während Kacheln,
   Zitatstriche und Abzeichen auf dunklem Grund gerechnet waren — hell sah das
   ausgewaschen aus. Ein zweites Schema will gepflegt werden; solange es niemand
   braucht, ist eins richtig.

   Deploy-Hinweis: Vorlagen lädt Jinja neu, DIESE Datei nicht — Änderungen hier
   brauchen `systemctl restart newapp` bzw. einen harten Reload im Browser. */

:root {
  --bg: #101216;
  --panel: #1a1e26;
  --border: #2a3040;
  --text: #e8ebf2;
  --muted: #8b93a7;
  --accent: #5b8cff;
  --danger: #e05555;
  --ok: #43b97f;
  --warn: #f5a524;

  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px;

  /* Ebenen-Skala. Alle z-index-Werte der App stehen HIER und nirgends sonst —
     verstreute Zahlen waren die Ursache dafür, dass die Nav-Untermenüs von der
     Reiterzeile verdeckt wurden (beide lagen auf 50, bei Gleichstand gewinnt das
     spätere Element im Dokument).
     Zwischen den Stufen liegen 100er-Schritte, damit später etwas dazwischen
     passt, ohne die Skala neu zu nummerieren. Seiteninhalt bekommt GAR KEINEN
     z-index: was keinen hat, kann die Leiste nicht überholen. */
  /* Höhe der klebenden Navigationsleiste. Wird beim Laden per Skript gemessen
     (base.html) — der Wert hier ist nur der Startwert, bis das passiert ist.
     Alles, was ebenfalls klebt oder per Anker angesprungen wird, muss um diesen
     Betrag nach unten: sonst verschwindet es hinter der Leiste. */
  --leiste-hoehe: 52px;

  --z-inhalt:     auto;   /* alles in <main> — bitte so lassen */
  --z-leiste:    1000;    /* die obere Navigationsleiste samt Untermenüs */
  --z-untermenu:   10;    /* innerhalb der Leiste; global zählt --z-leiste */
  --z-hintergrund: 1100;  /* abdunkelnder Grund der Handy-Schublade */
  --z-schublade:   1200;  /* die Schublade selbst, über allem */
}

/* Altnamen der ersten Fassung — Vorlagen und Formulare benutzen sie noch.
   Als Alias statt als Suchen-und-Ersetzen: so bleibt eine übersehene Stelle
   sichtbar korrekt, statt auf eine undefinierte Variable zu fallen. */
:root { --line: var(--border); --fg: var(--text); }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--panel); padding: 1px 5px; border-radius: 4px;
       font-size: .9em; color: var(--muted); }

/* ── Navigation ─────────────────────────────────────────────────────────────
   Flache Leiste mit Untermenüs beim Überfahren. Die Untermenüs führen direkt
   auf die Reiter der Zielseite (?tab=…), damit man nicht erst die Seite öffnen
   und dann noch einmal klicken muss.

   WICHTIG — die Leiste wird über die KLASSE .topbar angesprochen, nicht über den
   Elementselektor `nav`. Die Reiterzeilen auf Bewertungen, Jobs und Einrichtung
   sind ebenfalls <nav> (semantisch richtig: es ist Navigation) und erbten sonst
   `position: sticky`, `top: 0` und denselben z-index. Bei Gleichstand gewinnt
   das spätere Element im Dokument — die Reiterzeile legte sich damit über das
   aufgeklappte Untermenü. Befund 2026-08-14. */
.topbar {
  display: flex; gap: var(--space-4); align-items: center;
  padding: 10px 22px;
  background: var(--panel); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: var(--z-leiste);
}
.topbar a { color: var(--muted); padding: var(--space-1) var(--space-2);
            border-radius: 6px; text-decoration: none; }
.topbar a:hover, .topbar a.active { color: var(--text); background: var(--bg);
                                    text-decoration: none; }
.topbar a.brand { font-weight: 700; color: var(--text); margin-right: var(--space-3); }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--muted); font-size: .9em; }

/* Die unsichtbare Hover-Brücke über die Lücke zur Leiste sitzt am .nav-item,
   nicht am Untermenü: an dessen eigener Box würde ein ::before weggeschnitten,
   sobald das Menü je scrollt — der Hover riss dann beim Rüberfahren ab. */
.nav-item { position: relative; }
.nav-submenu {
  display: none; position: absolute; top: calc(100% + 11px); left: 0;
  /* Zählt nur INNERHALB der Leiste: .topbar hat einen z-index und bildet damit
     einen eigenen Stapelkontext, in dem dieser Wert gilt. Gegenüber dem
     Seiteninhalt entscheidet allein --z-leiste. */
  z-index: var(--z-untermenu); min-width: max-content; padding: 6px;
  background: var(--panel); border: 1px solid var(--border);
  border-top: none; border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
.nav-item:hover::after { content: ""; position: absolute; top: 100%; left: 0;
                         width: 100%; height: 13px; }
.nav-item:hover .nav-submenu { display: block; }
.nav-submenu a { display: block; white-space: nowrap; padding: 6px var(--space-3); }

main { max-width: calc(50% + 550px); margin: 0 auto; padding: 22px 22px 64px; }

h1 { font-size: 1.5em; margin: 0 0 var(--space-4); }
h2 { font-size: 1.15em; margin: 0 0 var(--space-3); }
/* h3 ohne oberen Rand wie die anderen: alle h3 der App stehen als erstes Kind
   in einem Kasten, wo der Rand ohnehin auf 0 zurückgesetzt wurde — er lief also
   leer und wäre nur eine Falle für das nächste h3 an anderer Stelle. */
h3 { font-size: .95em; margin: 0 0 var(--space-2); color: var(--muted); }

/* Absätze in die Skala holen. Ohne das hier tragen sie den Browser-Standard
   `margin: 1em 0` = 15px — der einzige Abstandswert der App außerhalb von
   --space-1..5, und gleichzeitig der häufigste. Nebenwirkung: die Hilfsklasse
   `mt0` nach einer h1 tat nichts, weil kollabierende Ränder auf das Maximum
   gehen und 16 > 15 war. */
p, pre { margin: 0 0 var(--space-3); }

/* ── Reiter ─────────────────────────────────────────────────────────────── */
/* Eigenständig gestaltet — die Reiterzeile bekommt NICHTS von .topbar (s. o.).
   Kein z-index, kein sticky: dann kann sie auch kein Untermenü verdecken. */
.tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-5);
        flex-wrap: wrap; align-items: center; }
.tabs a { padding: 7px 14px; border-radius: 8px; background: var(--panel);
          color: var(--muted); border: 1px solid var(--border); text-decoration: none; }
.tabs a:hover { color: var(--text); border-color: var(--muted); text-decoration: none; }
/* `.on` ist der Name aus der ersten Fassung, `.active` der aus content-studio —
   beide gelten, damit keine Vorlage stillschweigend ihren aktiven Reiter verliert. */
.tabs a.on, .tabs a.active { color: var(--text); border-color: var(--accent); }

/* ── Karten und Textbausteine ───────────────────────────────────────────── */
/* 18px stammten aus der übernommenen Grundlage und lagen zwischen --space-4
   und --space-5. Jetzt ein Wert für alle Blockabstände: Karte, Reiterzeile,
   Kennzahlenreihe und Platzhalter setzen dieselben 20px. */
.card { background: var(--panel); border: 1px solid var(--border);
        border-radius: 12px; padding: var(--space-5);
        margin-bottom: var(--space-5); }
.card--narrow { max-width: 380px; margin: 64px auto; }
/* Der letzte Absatz in einem Kasten braucht keinen Rand nach unten — der
   Kasten hat sein eigenes Polster. Gilt für alle drei Kastenarten, sonst
   verhalten sie sich unterschiedlich und man braucht Hilfsklassen dagegen. */
.card > :last-child, .warnung > :last-child, .lauf > :last-child,
.placeholder > :last-child { margin-bottom: 0; }

/* margin-bottom, weil auf einen Platzhalter regelmäßig eine Karte folgt
   („noch kein Kapitel" über dem Anlegeformular) und sich sonst gestrichelter
   und durchgezogener Rahmen auf null Pixel berühren. Das ist der Zustand, den
   ein neuer Nutzer als Allererstes sieht. */
.placeholder { padding: var(--space-5); margin-bottom: var(--space-5);
               text-align: center; color: var(--muted);
               border: 1px dashed var(--border); border-radius: 12px; }
.muted, .hint { color: var(--muted); }
.hint { font-size: .9em; }
.error { color: var(--danger); }
.warn  { color: var(--warn); }
.ok    { color: var(--ok); }
.nowrap { white-space: nowrap; }
.msg { margin: 0 0 var(--space-4); padding: 9px var(--space-3); border-radius: 8px;
       background: rgba(91, 140, 255, .12); border: 1px solid var(--accent); }
/* Fehler als Banner oben im Formular bzw. direkt am betroffenen Feld. Rote
   Schrift allein reicht nicht — auf dunklem Grund geht sie zwischen den
   Beschriftungen unter. */
.form-error { margin: 0 0 var(--space-4); padding: 9px var(--space-3);
              border-radius: 8px; color: var(--danger);
              background: rgba(224, 85, 85, .12); border: 1px solid var(--danger); }
.field-error { margin: 6px 0 0; color: var(--danger); font-size: .88em; font-weight: 600; }

.quote { border-left: 3px solid var(--border); padding-left: var(--space-4);
         margin: 0 0 var(--space-3); white-space: pre-wrap; }
.badge { display: inline-block; margin-left: var(--space-1); padding: 1px 7px;
         font-size: .72em; border-radius: 999px; vertical-align: middle;
         background: rgba(91, 140, 255, .18); color: var(--accent); }
.badge--warn  { background: rgba(245, 165, 36, .18); color: var(--warn); }
.badge--ok    { background: rgba(67, 185, 127, .18); color: var(--ok); }
.badge--error { background: rgba(224, 85, 85, .18); color: var(--danger); }
.badge--muted { background: rgba(139, 147, 167, .18); color: var(--muted); }

/* Vorformatierter Rohtext (Prompt-Vorschau, Stichworte einer Fassung).
   `pre` bricht von sich aus NICHT um — ohne pre-wrap schöbe eine einzelne lange
   Zeile die ganze Seite nach rechts. */
.raw { max-height: 380px; overflow: auto; background: var(--bg);
       border: 1px solid var(--border); border-radius: 8px; padding: var(--space-3);
       font-size: .8em; line-height: 1.45;
       white-space: pre-wrap; word-break: break-word; }

/* ── Formulare ──────────────────────────────────────────────────────────── */
label { display: block; margin: 0 0 var(--space-3); color: var(--muted);
        font-size: .9em; }
label.inline { display: inline-flex; align-items: center; gap: var(--space-1);
               margin: 0; }

input[type=text], input[type=password], input[type=number], input[type=url],
input[type=search], input:not([type]), textarea, select {
  width: 100%; margin-top: var(--space-1); padding: 9px var(--space-3);
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; font: inherit;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
input::placeholder { color: var(--muted); }
input[type=checkbox], input[type=radio] { width: auto; margin-top: 0; }

button { padding: 9px var(--space-4); background: var(--accent); color: #fff;
         border: 0; border-radius: 8px; font: inherit; cursor: pointer;
         white-space: nowrap; }
button:hover { filter: brightness(1.12); }
button.danger { background: var(--danger); }
button.ghost { background: transparent; color: var(--muted);
               border: 1px solid var(--border); }
button.ghost:hover { color: var(--text); filter: none; }

/* Zeile aus Feldern/Schaltflächen. Der Trennstrich unten macht lange
   Einstellungslisten lesbar; in Kacheln und Stimmen wird er abgeschaltet. */
.row { display: flex; gap: var(--space-2); align-items: flex-end; flex-wrap: wrap;
       padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
/* Auch wenn danach nur noch Erklärtext kommt: ein Strich, der nichts trennt,
   sieht aus wie ein vergessener Eintrag. */
.row:last-child, .row:has(+ p) { border-bottom: 0; }
.row__label { min-width: 190px; display: flex; flex-direction: column; }
.row__label .muted { font-size: .82em; }
.row input { flex: 1; min-width: 160px; }
/* Formulare in einer .row sollen die Zeile nicht umbrechen. */
.row form { display: inline-flex; gap: var(--space-2); align-items: center; }

/* ── Kennzahlen ─────────────────────────────────────────────────────────── */
.stats { display: flex; gap: var(--space-5); flex-wrap: wrap;
         margin-bottom: var(--space-4); }
.stats span { color: var(--muted); }
.stats strong { color: var(--text); font-size: 1.15em; }

/* Kachelreihe des Dashboards: Zahl groß, Bezeichnung klein darunter.
   auto-fit statt fester Spaltenzahl — auf dem Handy stapeln sie sich selbst. */
.kpis { display: grid; gap: var(--space-3); margin-bottom: var(--space-5);
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi { display: block; padding: var(--space-3) var(--space-4); background: var(--bg);
       border: 1px solid var(--border); border-radius: 10px; color: inherit;
       text-decoration: none; }
a.kpi:hover { border-color: var(--accent); text-decoration: none; }
.kpi b { display: block; font-size: 1.7em; line-height: 1.2; font-weight: 700; }
.kpi span { color: var(--muted); font-size: .85em; }
.kpi--call b { color: var(--warn); }      /* wartet auf mich */
.kpi--done b { color: var(--ok); }

/* Fortschrittsbalken des Durchlaufs. Bei „137 von 204" über mehrere Stunden
   sagt ein Balken auf einen Blick mehr als die Zahl. */
.fortschritt { height: 10px; border-radius: 999px; background: var(--bg);
               border: 1px solid var(--border); overflow: hidden;
               margin: var(--space-2) 0 var(--space-1); }
.fortschritt > span { display: block; height: 100%; background: var(--ok);
                      transition: width .4s ease; }

/* ── Bildkacheln ────────────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--space-4); margin-top: var(--space-4);
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.tile { border: 1px solid var(--border); border-radius: 10px;
        padding: var(--space-2); background: var(--bg); }
.tile img, .tile video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
                         border-radius: 8px; display: block; background: var(--panel); }
.tile input { margin-top: var(--space-1); }
.tile .row { padding: var(--space-1) 0 0; border: 0; gap: var(--space-1);
             align-items: center; justify-content: space-between; }
/* Beschriftung über dem Video (Modellvergleich). Zwei Zeilen hoch fixiert, damit
   die Kacheln trotz unterschiedlich langer Namen auf einer Linie beginnen. */
.tile__titel { margin: 0 0 var(--space-2); font-size: .82em; font-weight: 600;
               line-height: 1.3; min-height: 2.6em; }
.tile--off { opacity: .45; }
.tile--on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
video.final { width: 100%; max-width: 340px; border-radius: 10px; display: block; }

/* ── Stimmenliste ───────────────────────────────────────────────────────── */
.voicelist { display: grid; gap: var(--space-3); margin: var(--space-4) 0;
             grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.voice { border: 1px solid var(--border); border-radius: 10px;
         padding: var(--space-3); background: var(--bg); }
.voice__head { display: flex; justify-content: space-between; gap: var(--space-2);
               flex-wrap: wrap; }
.voice__head .muted { font-size: .82em; }
.voice__desc { font-size: .82em; margin: var(--space-1) 0; }
.voice audio { width: 100%; margin: var(--space-2) 0; height: 34px; }
.voice .row { padding: 0; border: 0; gap: var(--space-1); }
.voice select { flex: 1; min-width: 130px; }
audio { max-width: 100%; }

/* ── Tabellen ───────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px var(--space-2);
         border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: .85em; }
tbody tr:last-child td { border-bottom: 0; }
td form { display: inline-flex; gap: var(--space-1); align-items: center; }
td.actions { white-space: nowrap; display: flex; gap: var(--space-1); }
.audit td { font-size: .88em; }
/* Breite Tabellen laufen auf dem Handy sonst über den Bildschirmrand hinaus. */
.scroll-x { overflow-x: auto; }

/* Ankersprünge (#glossar, #kapitel-7) landen sonst unter der klebenden Leiste:
   der Browser scrollt das Ziel an den Viewport-Rand, und dort steht die Leiste. */
[id] { scroll-margin-top: calc(var(--leiste-hoehe) + var(--space-3)); }

/* ── Klappbare Abschnitte ───────────────────────────────────────────────────
   Für Belege, die man selten braucht (Charakterspezifikation, Segmentliste,
   Kostenaufstellung). <details> statt JavaScript: der Browser merkt sich den
   Zustand nicht, aber es funktioniert ohne Skript und ohne Zustandsverwaltung. */
details { border-top: 1px solid var(--border); }
details:first-of-type { border-top: 0; }
details > summary { padding: var(--space-3) 0; cursor: pointer; color: var(--text);
                    list-style: none; display: flex; align-items: center;
                    gap: var(--space-2); }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "›"; color: var(--muted); font-size: 1.2em;
                            transition: transform .15s ease; }
details[open] > summary::before { transform: rotate(90deg); }
details > summary:hover { color: var(--accent); }
details > :last-child { margin-bottom: var(--space-4); }

/* ── Abstands-Utilities ─────────────────────────────────────────────────────
   Nur für den Einzelfall in einer Vorlage, in dem eine Regel zu schreiben
   übertrieben wäre. Aus der Skala bedient, damit auch Ausnahmen im Raster
   bleiben. Kein Ersatz für benannte Klassen. */
.mt { margin-top: var(--space-4); }
.mb { margin-bottom: var(--space-4); }
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }

/* ── Handy ──────────────────────────────────────────────────────────────────
   Die Leiste wird zur Schublade. Der Burger und die Schublade selbst stehen
   im <head> der base.html — nicht hier: Vorlagen lädt Jinja sofort neu, dieses
   Stylesheet erst beim Neustart. Wäre beides getrennt, zeigte ein Neustart-
   vergessen eine Seite ohne Menü. Hier steht nur, was die DESKTOP-Leiste
   ausblendet, sobald die Schublade übernimmt. */
@media (max-width: 760px) {
  .topbar .nav-item, .topbar .spacer, .topbar .who,
  .topbar a:not(.brand) { display: none; }
  /* Auch der Seitenrand der Leiste muss mit, sonst steht der Schriftzug 22 px
     vom Rand und jede Überschrift darunter 12 px — eine sichtbar versetzte
     linke Kante über die ganze Seitenhöhe. */
  .topbar { gap: var(--space-3); padding: 10px var(--space-3); }
  main { padding: var(--space-4) var(--space-3) 48px; }
  .row__label { min-width: 100%; }
}

/* ══ Lebensbuch ═════════════════════════════════════════════════════════════
   Alles ab hier ist neu gegenüber der aus newapp übernommenen Grundlage. */

/* ── Editor ─────────────────────────────────────────────────────────────────
   Zwei Kästen untereinander, jeder über die volle Breite: oben die Stichworte,
   darunter das Kapitel. Der dritte Kasten für den KI-Vorschlag ist am
   2026-08-23 entfallen — das Ergebnis landet jetzt direkt im Kapitel, und drei
   nebeneinanderstehende Textfelder waren für den Autor nicht mehr zuzuordnen. */
.block { display: block; padding-bottom: var(--space-5);
         margin-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
/* Beim letzten Block fällt auch das Polster weg, nicht nur der Strich: sonst
   stünden darunter Polster UND Rand als 40px Leerraum, mehr als das Doppelte
   des Abstands zwischen zwei Karten. */
.block--letzter, .block:last-of-type { border-bottom: 0; padding-bottom: 0; }
.block__kopf { display: flex; align-items: baseline; justify-content: space-between;
               gap: var(--space-2); margin-bottom: var(--space-2); }
.block__kopf h2 { margin: 0; }

/* Die Stichworte sind Notizen, kein Fließtext — Festbreite macht sichtbar, dass
   hier nichts gesetzt wird, und Zeilenumbrüche bleiben da, wo man sie setzt. */
.notizen { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
           font-size: .92em; min-height: 20vh; line-height: 1.6; }

/* Der Kapitelkasten soll sich wie ein Dokument anfühlen, nicht wie ein
   Formularfeld. Maße wie in einer Textverarbeitung: 11 pt Grundschrift mit
   anderthalbfachem Zeilenabstand — das ist, was in Word als Standard eingestellt
   ist, und es ist auch der Satzspiegel des fertigen Buches (siehe
   `--satz-groesse` weiter unten). Was hier gut aussieht, sieht gedruckt gut aus.

   Die drei Werte stehen als Variablen, weil die Nummernspalte daneben sie
   Zeichen für Zeichen treffen muss — sonst laufen Nummern und Text auseinander. */
:root {
  --dok-groesse: 11pt;
  --dok-hoehe:   1.5;
  --dok-rand:    var(--space-5);
}

/* Nummernspalte und Textfeld sitzen in EINEM Rahmen; das Textfeld gibt seinen
   eigenen ab, damit es nicht doppelt umrandet aussieht. */
.dokumentbox { display: flex; align-items: stretch; background: var(--bg);
               border: 1px solid var(--border); border-radius: 8px;
               overflow: hidden; }
.dokumentbox:focus-within { border-color: var(--accent); }

.zeilennr { flex: none; width: 3em; padding: var(--dok-rand) var(--space-2)
                                            var(--dok-rand) 0;
            text-align: right; overflow: hidden; user-select: none;
            border-right: 1px solid var(--border);
            background: rgba(255, 255, 255, .02);
            color: var(--accent); font-variant-numeric: tabular-nums;
            font-family: var(--buchschrift);
            font-size: var(--dok-groesse); line-height: var(--dok-hoehe); }
/* Eine Zelle je Absatz. Die HÖHE kommt aus der Messung im Spiegel: ein Absatz,
   der über sechs Bildschirmzeilen läuft, bekommt eine sechs Zeilen hohe Zelle,
   damit die nächste Nummer wieder auf der richtigen Höhe steht. */
.zeilennr__zelle { display: block; }
.zeilennr__zelle--leer { color: transparent; }

.dokument { flex: 1; min-width: 0; min-height: 60vh; margin-top: 0;
            padding: var(--dok-rand); border: 0; border-radius: 0;
            background: transparent; resize: vertical;
            font-family: var(--buchschrift);
            font-size: var(--dok-groesse); line-height: var(--dok-hoehe); }
.dokument:focus { outline: none; }

/* Der Spiegel misst, wie hoch ein Absatz im Feld wirklich wird. Er steht außer
   Sicht, aber NICHT auf display:none — ein verstecktes Element hat keine
   messbare Höhe. */
.zeilenspiegel { position: absolute; visibility: hidden; pointer-events: none;
                 top: 0; left: -9999px; white-space: pre-wrap;
                 overflow-wrap: break-word;
                 font-family: var(--buchschrift);
                 font-size: var(--dok-groesse); line-height: var(--dok-hoehe); }

/* ── Anweisung an Claude ────────────────────────────────────────────────────
   Feld und Knopf auf einer Zeile; auf dem Handy bricht der Knopf darunter. */
.anweisung { display: flex; gap: var(--space-2); align-items: stretch;
             flex-wrap: wrap; margin-bottom: var(--space-2); }
.anweisung input { flex: 1; min-width: 220px; margin-top: 0; }

/* ── Laufanzeige ────────────────────────────────────────────────────────────
   Schmale Leiste statt eines eigenen Kastens: sie sagt nur, dass gerade etwas
   passiert, und verschwindet danach wieder. */
.lauf { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
        padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
        background: var(--panel); border: 1px solid var(--accent);
        border-radius: 10px; }
.lauf__punkt { width: 9px; height: 9px; border-radius: 999px;
               background: var(--accent); flex: none;
               animation: pulsieren 1.4s ease-in-out infinite; }
@keyframes pulsieren { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* Wer Bewegung nicht mag oder nicht verträgt, bekommt einen ruhigen Punkt. */
@media (prefers-reduced-motion: reduce) { .lauf__punkt { animation: none; } }

/* Kopfzeile über dem Editor: Wortzahl, Status, später das Gegenstück der
   Doppelseite. Klebt beim Scrollen oben, weil sie beim Schreiben die einzige
   dauernd gebrauchte Information trägt. */
/* `top: var(--leiste-hoehe)` und nicht 0: die Navigationsleiste klebt ebenfalls
   oben und liegt mit --z-leiste darüber. Bei top:0 schob sich die Kopfzeile
   vollständig darunter und war beim Scrollen unsichtbar — also genau dann weg,
   wenn man sie braucht (Befund 2026-08-23). */
.kapkopf { position: sticky; top: var(--leiste-hoehe); z-index: var(--z-inhalt);
           display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
           padding: var(--space-2) 0 var(--space-3); margin-bottom: var(--space-3);
           border-bottom: 1px solid var(--border); background: var(--bg); }
.kapkopf__zahl { color: var(--muted); font-size: .9em; }
.kapkopf__zahl strong { color: var(--text); font-size: 1.15em; }

/* Aktionsleiste unter den Textfeldern. */
.aktionen { display: flex; gap: var(--space-2); align-items: center;
            flex-wrap: wrap; margin-top: var(--space-3); }
button.leise { background: transparent; color: var(--muted);
               border: 1px solid var(--border); }
button.leise:hover { color: var(--text); border-color: var(--muted); filter: none; }

/* ── Textvorschau ───────────────────────────────────────────────────────────
   Fließtext zum Lesen, nicht zum Bearbeiten (Fassungsansicht, Konfliktseite,
   später Buchansicht). Serifen und begrenzte Zeilenlänge: ein Absatz über die
   volle Bildschirmbreite ist auf einem 27-Zoll-Schirm nicht mehr lesbar. */
.prosa { font-family: Georgia, "DejaVu Serif", serif; line-height: 1.7;
         max-width: 62ch; }
.prosa p { margin: 0 0 var(--space-4); }
.prosa--eng { max-width: none; font-size: .95em; }

/* Nebeneinanderstellung zweier Textstände (Konflikt, Fassungsvergleich). */
.gegenueber { display: grid; gap: var(--space-4); margin-bottom: var(--space-5);
              grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.gegenueber__seite { min-width: 0; padding: var(--space-3); background: var(--bg);
                     border: 1px solid var(--border); border-radius: 10px; }
.gegenueber__seite h3 { margin-top: 0; }

/* Warnung, die man nicht übersehen darf (Konflikt, Leerschutz). */
.warnung { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
           border: 1px solid var(--warn); border-radius: 10px;
           background: rgba(245, 165, 36, .1); color: var(--text); }
.warnung strong { color: var(--warn); }


/* ── Handy ──────────────────────────────────────────────────────────────────
   Der Editor wird unterwegs benutzt (der Autor schreibt nicht nur am
   Schreibtisch), deshalb hier mehr als nur „passt so ungefähr“. */
@media (max-width: 760px) {

  /* iOS zoomt beim Antippen jedes Eingabefeldes, dessen Schrift kleiner als
     16px ist — die Seite springt und bleibt danach vergrößert stehen. Das ist
     kein Geschmacksdetail, sondern der häufigste Grund, warum sich Formulare
     auf dem iPhone kaputt anfühlen. 16px ist die Schwelle, nicht mehr. */
  input, textarea, select, button { font-size: 16px; }

  /* Fingerkuppen brauchen mehr Fläche als ein Mauszeiger. ~44px ist die
     Größe, unter der Fehlgriffe merklich zunehmen. */
  button { padding: 12px var(--space-4); min-height: 44px; }
  .row form button, td.actions button, .aktionen button { min-height: 44px; }

  /* Die Kopfzeile klebt oben und darf nicht den halben Schirm einnehmen. */
  .kapkopf { gap: var(--space-2); padding: var(--space-2) 0;
             font-size: .9em; }
  .kapkopf__zahl strong { font-size: 1em; }

  /* Der Kapitelkasten: weniger Innenrand, damit die Zeile nicht auf zehn
     Wörter schrumpft, und etwas kleiner gesetzt. */
  /* Auf dem Handy zählt jeder Millimeter Zeilenbreite. Die Variablen ändern
     sich mit — die Nummernspalte bleibt dadurch von selbst ausgerichtet. */
  /* 16px statt 11pt: unter 16px zoomt iOS beim Antippen jedes Eingabefeldes
     hinein. Der Zeilenabstand wächst mit, damit es auf dem schmalen Schirm
     nicht gedrängt wirkt. */
  :root { --dok-groesse: 16px; --dok-hoehe: 1.6; --dok-rand: var(--space-3); }
  .dokument { min-height: 55vh; }
  .zeilennr { width: 2.4em; }
  .notizen { min-height: 22vh; }

  /* Anweisungsfeld und Knopf untereinander statt gequetscht nebeneinander. */
  .anweisung { flex-direction: column; }
  .anweisung input { min-width: 0; width: 100%; }
  .anweisung button { width: 100%; }

  /* Die Schnellwege als Raster statt als Zeile, die unvorhersehbar umbricht. */
  .aktionen { gap: var(--space-2); }

  /* Die Laufanzeige: der Hinweistext darf weichen, Punkt und Abbrechen nicht. */
  .lauf { gap: var(--space-2); padding: var(--space-3); }
  .lauf .hint { display: none; }

  /* Gegenüberstellungen (Fassungsvergleich, Konflikt) stapeln statt zu
     schrumpfen — zwei Textspalten nebeneinander sind auf einem Telefon
     unlesbar, und sie zu erzwingen wäre schlechter als sie aufzulösen. */
  .gegenueber { grid-template-columns: 1fr; }

  /* Karten dichter, es zählt jeder Millimeter. */
  .card { padding: var(--space-4); }
  .card--narrow { margin: var(--space-5) auto; max-width: none; }
}

/* Lange Wörter, Dateinamen und Links dürfen die Seite nicht aufspannen —
   sonst scrollt der ganze Bildschirm seitwärts, nicht nur das eine Element. */
main, .card, .prosa, .warnung { overflow-wrap: anywhere; }
/* Tabellenzellen ausdrücklich NICHT: dort führte `anywhere` dazu, dass ein
   Kapiteltitel auf dem Handy Buchstabe für Buchstabe untereinander stand,
   sobald die Tabelle schmaler wurde als ihr Inhalt (gemeldet 2026-08-23). */
td, th { overflow-wrap: normal; }
/* Ausgenommen die Textfelder: dort bricht der Browser ohnehin richtig um, und
   `anywhere` würde beim Tippen mitten im Wort trennen. */
textarea, input { overflow-wrap: normal; }

/* Die „Wo?“-Auswahl neben den Knöpfen: das Label bleibt schmal, die Liste
   nimmt den Rest — Absatzanfänge sind unterschiedlich lang und sollen die
   Zeile nicht sprengen. */
.stelle { flex: 1; min-width: 0; margin: 0; display: flex;
          align-items: center; gap: var(--space-2); white-space: nowrap; }
.stelle select { margin-top: 0; min-width: 0; }
@media (max-width: 760px) {
  .stelle { flex-direction: column; align-items: stretch; white-space: normal; }
  .anweisung .stelle + button, .anweisung button { width: 100%; }
}

/* Eine Tabelle in .scroll-x soll SCROLLEN, nicht schrumpfen. Ohne das hier
   zwingt `table { width: 100% }` sie in die Containerbreite, und der Inhalt
   quetscht sich spaltenweise zusammen. */
.scroll-x > table { width: max-content; min-width: 100%; }

/* ── Listen auf dem Handy ───────────────────────────────────────────────────
   Eine fünfspaltige Tabelle bleibt auch mit Seitwärts-Scrollen unangenehm:
   man sieht nie die ganze Zeile. Auf schmalen Schirmen wird deshalb jede Zeile
   zu einem Block — Titel oben in einer Zeile, die Nebenangaben darunter. */
@media (max-width: 760px) {
  .liste, .liste tbody, .liste tr, .liste td { display: block; width: auto; }
  .liste thead { display: none; }
  .liste tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
  .liste tr:last-child { border-bottom: 0; }
  .liste td { border: 0; padding: 0; }
  /* Der Titel bekommt die ganze Zeile und bricht an Wortgrenzen. */
  .liste td.titel { font-size: 1.05em; margin-bottom: var(--space-2);
                    white-space: normal; }
  /* Alles Übrige fließt darunter in einer Zeile und wird kleiner gesetzt. */
  .liste td.neben { display: inline-block; margin-right: var(--space-3);
                    color: var(--muted); font-size: .9em; }
  .liste td.aktionen-zelle { display: flex; gap: var(--space-2);
                             margin-top: var(--space-2); }
  /* In der gestapelten Form scrollt nichts mehr seitwärts. */
  .scroll-x:has(.liste) { overflow-x: visible; }
  .scroll-x > .liste { width: auto; min-width: 0; }
}

/* ── Verknüpfte Paare ───────────────────────────────────────────────────────
   Die Liste soll die Doppelseite schon andeuten: zwei Felder nebeneinander,
   dazwischen der Pfeil von früh nach spät. */
.paar { padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
.paar:last-child { border-bottom: 0; padding-bottom: 0; }
.paar__kopf { display: flex; gap: var(--space-3); align-items: center;
              flex-wrap: wrap; margin-bottom: var(--space-3); }
.paar__motiv { display: flex; gap: var(--space-2); flex: 1; flex-wrap: wrap; }
.paar__motiv input { flex: 1; min-width: 140px; margin-top: 0; }
.paar__seiten { display: flex; gap: var(--space-3); align-items: stretch; }
.paar__seite { flex: 1; min-width: 0; display: flex; flex-direction: column;
               gap: 2px; padding: var(--space-3); background: var(--bg);
               border: 1px solid var(--border); border-radius: 10px;
               color: inherit; text-decoration: none; }
.paar__seite:hover { border-color: var(--accent); text-decoration: none; }
.paar__marke { color: var(--muted); font-size: .72em; text-transform: uppercase;
               letter-spacing: .06em; }
.paar__pfeil { align-self: center; color: var(--muted); font-size: 1.3em;
               flex: none; }
.paar__ampel { margin: var(--space-3) 0 0; }

@media (max-width: 760px) {
  /* Untereinander mit einem Pfeil nach unten: zwei Kästen nebeneinander sind
     auf dem Telefon zu schmal für Titel plus Kennzahlen. */
  .paar__seiten { flex-direction: column; }
  .paar__pfeil { transform: rotate(90deg); }
}

/* Die Stellen-Auswahl in der Kapitelliste: schmal halten, sie steht neben zwei
   Pfeilknöpfen und soll die Zeile nicht dominieren. */
.stelle-form { display: inline-flex; gap: var(--space-1); align-items: center; }
.stelle-form select { width: auto; min-width: 4.5em; margin-top: 0;
                      padding: 6px var(--space-2); }

/* Leiste über dem Editor: wogegen dieses Kapitel im Buch steht. */
.gegenstueck { display: flex; gap: var(--space-4); align-items: flex-start;
               flex-wrap: wrap; padding: var(--space-3) var(--space-4);
               margin-bottom: var(--space-4); background: var(--panel);
               border: 1px solid var(--border); border-radius: 10px; }
.gegenstueck__eins { display: flex; flex-direction: column; gap: 1px; }

/* ── Diktat ─────────────────────────────────────────────────────────────────
   Der Knopf wechselt sichtbar den Zustand: im Zuhören rot umrandet, mit
   pulsierendem Punkt. Ohne das weiß man nicht, ob das Mikrofon läuft. */
.diktat__punkt { display: inline-block; width: 9px; height: 9px;
                 margin-right: var(--space-2); border-radius: 999px;
                 background: var(--danger);
                 animation: pulsieren 1.4s ease-in-out infinite; }
button.diktat--an { border-color: var(--danger); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .diktat__punkt { animation: none; } }

/* ── Anweisungsfeld ─────────────────────────────────────────────────────────
   Kleiner als der Kapitelkasten und in der Oberflächenschrift, nicht in der
   Buchschrift: hier wird nichts gesetzt, hier wird gesprochen. */
.eingabe { min-height: 8rem; line-height: 1.6; }

/* ── Absatznummern ──────────────────────────────────────────────────────────
   Neben dem Kapitelkasten, nicht darin: eine Nummer im Text wäre Teil des
   Buches und müsste beim Export wieder heraus. */
.absaetze { list-style: none; margin: var(--space-3) 0 var(--space-2);
            padding: 0; counter-reset: none; }
.absaetze li { display: flex; gap: var(--space-3); align-items: baseline;
               padding: 4px 0; color: var(--muted); font-size: .9em;
               border-bottom: 1px solid var(--border); }
.absaetze li:last-child { border-bottom: 0; }
.absaetze__nr { flex: none; min-width: 2em; text-align: right;
                color: var(--accent); font-variant-numeric: tabular-nums;
                font-weight: 600; }

/* ══ Buchseite ══════════════════════════════════════════════════════════════
   Die Geometrie steht HIER und nur hier. Bildschirmvorschau, Druckansicht und
   PDF-Export lesen dieselben Werte — sonst zeigte die Vorschau etwas anderes,
   als aus dem Drucker kommt, und wäre nutzlos.
   12,5 × 20 cm ist ein gängiges Format für Erinnerungsbücher; der Satzspiegel
   ergibt ungefähr 250 Wörter je Seite, die Zahl hinter allen Seitenschätzungen. */
:root {
  --seite-breite: 125mm;
  --seite-hoehe:  200mm;
  --seite-rand:   18mm;
  --satz-groesse: 11pt;
  --satz-hoehe:   1.5;
  --buchschrift:  Georgia, "DejaVu Serif", serif;
}

.spread { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
          justify-content: center; margin: var(--space-4) 0; }
.seite { width: var(--seite-breite); max-width: 100%; min-height: var(--seite-hoehe);
         padding: var(--seite-rand); background: #f6f3ec; color: #1c1a17;
         border-radius: 2px; box-shadow: 0 2px 14px rgba(0,0,0,.45);
         font-family: var(--buchschrift); font-size: var(--satz-groesse);
         line-height: var(--satz-hoehe); }
.seite p { margin: 0 0 .7em; text-align: justify; hyphens: auto; }
/* Erste Zeile eines Kapitels ohne Einzug, alle weiteren mit — so setzt man
   Fließtext im Buch. */
.seite p + p { text-indent: 1.2em; margin-top: -.7em; }
.seite__kopf { display: flex; justify-content: space-between; align-items: baseline;
               margin-bottom: 1.4em; padding-bottom: .5em;
               border-bottom: 1px solid rgba(0,0,0,.18);
               font-size: .78em; letter-spacing: .04em; text-transform: uppercase;
               color: #6a6257; }
.seite__titel { margin: 0 0 .9em; font-size: 1.25em; font-weight: 600;
                line-height: 1.25; }
.seite__jahr { font-variant-numeric: tabular-nums; }
.seite--leer { display: flex; align-items: center; justify-content: center;
               color: #9a9184; font-style: italic; text-align: center; }

/* Das Motiv als Kolumnentitel über beiden Seiten — der sichtbare Träger des
   „der Kreis schließt sich". */
.spread__motiv { grid-column: 1 / -1; text-align: center; color: var(--muted);
                 font-size: .9em; letter-spacing: .08em; text-transform: uppercase; }

/* Wortzahl-Ampel. Ausgeglichen wird über Textarbeit, nicht über Layout —
   deshalb führen die Knöpfe in den Editor und nicht in eine Layout-Einstellung. */
.ampel { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
         justify-content: center; margin: var(--space-3) 0; color: var(--muted);
         font-size: .92em; }

@media (max-width: 900px) {
  /* Zwei Buchseiten nebeneinander sind auf einem Telefon unlesbar; sie zu
     erzwingen wäre schlechter, als sie aufzulösen. Untereinander mit einem
     Trenner dazwischen bleibt der Gedanke erhalten. */
  .spread { grid-template-columns: 1fr; }
  .seite { width: 100%; min-height: 0; padding: var(--space-5); }
}

/* Fundstelle in der Suche: der Treffer hervorgehoben, die Umgebung gedämpft —
   so erkennt man beim Überfliegen, ob es die gesuchte Stelle ist. */
.fundstelle { margin: 0 0 var(--space-2); line-height: 1.6; }
.fundstelle mark { background: rgba(245, 165, 36, .3); color: var(--text);
                   padding: 0 2px; border-radius: 3px; }

/* Inhaltsverzeichnis im Buchgerüst: Titel links, Angaben rechts, Punkte dazwischen. */
.inhalt { list-style: none; margin: 0; padding: 0; counter-reset: kap; }
.inhalt li { display: flex; align-items: baseline; gap: var(--space-2);
             padding: 5px 0; border-bottom: 1px solid var(--border); }
.inhalt li:last-child { border-bottom: 0; }
.inhalt__punkte { flex: 1; border-bottom: 1px dotted var(--border);
                  transform: translateY(-3px); }

/* Lesefluss: die Kapitel voneinander absetzen. */
.lesen__kapitel { padding-bottom: var(--space-5); margin-bottom: var(--space-5);
                  border-bottom: 1px solid var(--border); }
.lesen__kapitel:last-child { border-bottom: 0; padding-bottom: 0; }
