/* Story Werkstatt.
   Still, hell, viel Luft, eine Akzentfarbe. Typografie trägt alles.

   Die Schrift ist iA Writer (SIL OFL 1.1), als variable Fassung mitgeliefert:

     Quattro — Oberfläche und Lesetext. Die proportionale Fassung.
     Duo     — die Schreibfelder. Duospaced, also gleichmäßig im Satz.
     Mono    — Beschriftungen, Kennungen, alles Technische.

   ⚠️ **Der Schreibzeiger.** Als die Schriften das erste Mal eingebaut waren,
   saß er neben der Schrift — und die Schrift war unschuldig: Der Spiegel
   versteckte damals die Rauten am Zeilenanfang, und wo Zeichen fehlen, meint
   ein Klick eine andere Stelle als die, auf die man zeigt. Seit der Ablauf in
   Segmente zerfällt, steht kein `###` mehr im Feld, und der Spiegel färbt nur
   noch.

   Damit das so bleibt, gilt hier eine Regel: **Feld und Spiegel müssen in
   Schrift, Größe, Zeilenhöhe, Rand und Innenabstand übereinstimmen.** Wer
   eines davon nur an einer Stelle ändert, trennt den Zeiger von der Schrift. */

@font-face {
  font-family: "iA Writer Quattro V"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("/static/schrift/iAWriterQuattroV.ttf") format("truetype");
}
@font-face {
  font-family: "iA Writer Quattro V"; font-style: italic; font-weight: 400 700;
  font-display: swap; src: url("/static/schrift/iAWriterQuattroV-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "iA Writer Duo V"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("/static/schrift/iAWriterDuoV.ttf") format("truetype");
}
@font-face {
  font-family: "iA Writer Duo V"; font-style: italic; font-weight: 400 700;
  font-display: swap; src: url("/static/schrift/iAWriterDuoV-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "iA Writer Mono V"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("/static/schrift/iAWriterMonoV.ttf") format("truetype");
}

:root {
  --grund: #FAFAF7;
  --blatt: #FFFFFF;
  --tinte: #16161A;
  --gedaempft: #6E6E77;
  --leise: #A3A3AA;
  --linie: #E6E5DF;
  --akzent: #5B54C6;
  --akzent-blass: #EDECFA;
  --notiz: #F2F1EC;
  --warnung: #C0392B;
  --prosa: "iA Writer Quattro V", -apple-system, BlinkMacSystemFont, sans-serif;
  --schreib: "iA Writer Duo V", ui-monospace, "SF Mono", Menlo, monospace;
  --bau: "iA Writer Mono V", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* ⚠️ **Die Fußzeile gehört an den unteren Rand des FENSTERS, nicht an das
   Ende des Textes.** Auf einer kurzen Seite — die Personenliste eines neuen
   Projekts etwa — endete der Inhalt nach 430 Pixeln, und die Fußzeile stand
   mitten im Bild, mit einem Meter Leere darunter. Das sah aus wie ein Fehler
   im Umbruch und war einer.

   Die Spalte ist ein Stapel: Kopf, Inhalt, Fuß. Der Inhalt wächst
   (`flex: 1 0 auto`) und schiebt die Fußzeile hinunter — reicht der Text
   nicht, füllt die Luft ihn auf; reicht er weiter als das Fenster, rutscht
   die Fußzeile nach unten aus dem Bild, wie es sich gehört.

   ⚠️ `min-height: 100dvh` statt `100vh`: Auf dem Telefon zählt `vh` die
   Leiste des Browsers mit, die beim Scrollen verschwindet — die Seite wäre
   immer ein Stück zu hoch. */
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--prosa);
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100dvh;
}
body > main { flex: 1 0 auto; }

a { color: var(--akzent); text-decoration: none; }
/* ⚠️ **`:where()` statt `a:hover`, und das ist keine Spielerei.** `a:hover`
   wiegt schwerer als eine Klasse; eine Kachel mit `.werkzeug { text-decoration:
   none }` unterstrich darum trotzdem. Der Ausweg war bisher eine ZWEITE Liste
   aller Flaechen, diesmal mit `:hover` — und genau die ist beim Eintragen
   vergessen worden. `:where()` zaehlt null Gewicht: Die Unterstreichung bleibt,
   was sie ist, verliert aber ihren Vorrang, und eine Liste genuegt. */
a:where(:hover) { text-decoration: underline; }

/* --- Kopfzeile ------------------------------------------------------- */

header {
  display: flex; align-items: center; gap: 26px;
  padding: 18px 40px; flex-wrap: wrap;
  font-family: var(--bau); font-size: 13px;
}
header .marke { display: flex; gap: 9px; align-items: baseline; min-width: 0; }
/* ⚠️ **Zwei Bremsen, zwei Aufgaben.** Die eine sitzt im Server: Ein Name wird
   auf KRUMENLAENGE Zeichen gekürzt, damit er die Krume nicht ins Uferlose
   zieht. Die andere sitzt hier: Bleibt auch dem gekürzten Namen zu wenig Platz
   — auf dem Telefon regelmäßig —, gibt er weiter nach, statt umzubrechen.
   Ohne `nowrap` brach ausgerechnet „ARIADNE" hinter seinem Zeichen um und
   stand allein in der zweiten Zeile. */
header .marke a { white-space: nowrap; }
header .marke .projekt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
header .haus { letter-spacing: 0.14em; text-transform: uppercase; color: var(--gedaempft); }
/* Das Zeichen der App vor ihrem Namen. ⚠️ Es sitzt auf der Grundlinie der
   Schrift, nicht darüber: Ein Bild, das mitten im Wort schwebt, sieht aus wie
   ein Fehler im Umbruch. Und es ist klein — es begleitet den Namen, es ersetzt
   ihn nicht. */
header .appzeichen { width: 15px; height: 15px; border-radius: 3px;
                     vertical-align: -2px; margin-right: 7px; }
header .projekt { letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinte); }
header .haus:hover, header .projekt:hover { color: var(--akzent); }
header .strich { color: var(--leise); }
/* ⚠️ **Das Menü gibt nicht nach.** Es ist ein Flex-Kind wie die Krume daneben
   und schrumpfte deshalb mit ihr — bei einem langen Namen der Geschichte
   quetschte es sich zusammen, bis die Punkte in sich umbrachen. Was nachgeben
   muss, ist der Name; der wird gekürzt (siehe KRUMENLAENGE). */
header nav { display: flex; gap: 20px; flex-shrink: 0; }
header nav a { color: var(--leise); }
header nav a.aktiv { color: var(--tinte); border-bottom: 2px solid var(--akzent); padding-bottom: 2px; }
/* Der Kopf einer Rechtsseite: dieselbe Marke, aber kein Menü und keine Suche —
   sie steht auch jemandem offen, der nicht angemeldet ist. */
header.schmal { border-bottom: none; padding-bottom: 0; }
/* Die Lupe. ⚠️ Sie steht dort, wo das Suchfeld stand — nur nimmt sie dreissig
   statt zweihundertzwanzig Pixel. Das Feld war die Breite, die das Menü in die
   zweite Zeile drückte, sobald das Fenster nicht sehr breit war. */
header .suchknopf {
  margin-left: auto; flex-shrink: 0;
  background: none; border: none; padding: 4px; cursor: pointer;
  color: var(--leise); line-height: 0;
}
header .suchknopf svg { width: 18px; height: 18px; }
header .suchknopf:hover { color: var(--akzent); }
header .zustand { color: var(--gedaempft); min-width: 92px; text-align: right; }

main { padding: 10px 40px 60px 40px; }
.spalte { max-width: 720px; margin: 0 auto; }

h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.015em; margin: 18px 0 14px 0; }
h2 { font-family: var(--bau); font-size: 11px; letter-spacing: 0.16em;
     text-transform: uppercase; color: var(--leise); font-weight: 400; margin: 34px 0 12px 0; }
.leer, .einleitung { color: var(--gedaempft); line-height: 1.7; }

/* --- Listen ----------------------------------------------------------- */

.liste { display: flex; flex-direction: column; gap: 3px; }
.behaelter, .person {
  display: flex; align-items: baseline; gap: 16px;
  background: var(--blatt); border: 1px solid var(--linie); border-radius: 2px;
  padding: 15px 18px; color: var(--tinte); text-decoration: none;
}
.behaelter:hover, .person:hover { border-color: var(--tinte); text-decoration: none; }
.behaelter .pfad, .person .name { font-size: 16.5px; font-weight: 500; }
.behaelter .zahl { margin-left: auto; font-family: var(--bau); font-size: 12px; color: var(--gedaempft); }
.person .kurz { color: var(--gedaempft); font-size: 14.5px; overflow: hidden; }
.tupfen { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--linie); flex-shrink: 0; }

.hinweise ul { list-style: none; padding: 0; margin: 0; }
.hinweise li { font-family: var(--bau); font-size: 12.5px; color: var(--gedaempft);
               padding: 7px 0; border-top: 1px solid var(--linie); }

/* --- Karte ------------------------------------------------------------ */

/* ⚠️ Der Kopf der Karte steht in DERSELBEN Spalte wie überall — nur die
   Leinwand darunter ist breiter. Vorher lag er ausserhalb, ganz links am Rand,
   und wirkte dadurch größer und anders gesetzt, obwohl dieselbe Schriftgröße
   eingestellt war. Was gleich aussehen soll, muss aus einer Quelle kommen. */
/* Der Fuß der Karte: links die Sequenzen, rechts die Werkzeuge — auf einer
   Zeile und genau so breit wie die Leinwand darüber. */
.kartefuss {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  max-width: 1400px; margin: 10px auto 0;
}
.kartefuss .sequenzleiste { margin: 0; }
.kartefuss .werkzeuge { margin-left: auto; flex-wrap: wrap; }
.werkzeuge { display: flex; gap: 10px; align-items: center; margin-left: auto; }
/* ⚠️ **Ein Knopf ist leise, bis man ihn meint.** Gestrichelter Rand, gedämpfte
   Schrift; erst beim Darüberfahren wird er schwarz umrandet. Vorher stand jeder
   Knopf mit voller Kontur da und zog den Blick von dem ab, worum es geht — dem
   Text. Wer wirklich Nachdruck braucht, nimmt `.aktiv`. */
.knopf { font: inherit; font-family: var(--bau); font-size: 12.5px;
         border: 1px dashed #D9D8D1; background: var(--blatt); color: var(--gedaempft);
         border-radius: 2px; padding: 7px 14px; cursor: pointer; }
.knopf:hover { border-style: solid; border-color: var(--tinte); color: var(--tinte); }
.knopf.aktiv { background: var(--tinte); color: var(--grund);
               border-style: solid; border-color: var(--tinte); }
.werkzeuge .hinweis { font-family: var(--bau); font-size: 12px; color: var(--gedaempft); }

.karte {
  position: relative; height: 640px; margin: 16px auto 0; max-width: 1400px;
  background: var(--blatt); border: 1px solid var(--linie); border-radius: 3px;
  overflow: auto;
}
.leinwandhuelle { position: relative; width: 2400px; height: 1600px; }
.leinwand { position: absolute; left: 0; top: 0; width: 2400px; height: 1600px;
            transform-origin: 0 0; }
.karte svg { position: absolute; left: 0; top: 0; width: 2400px; height: 1600px; }
.karte svg line { stroke: #C9C7DE; stroke-width: 1.5; }
.karte svg line.einbahn { stroke: #8F8BC0; }
.karte svg line.bedingt { stroke-dasharray: 5 5; stroke: #8F8BC0; }
.karte svg text { font-family: var(--bau); font-size: 11.5px; fill: #6E6A9E; }
.karte svg a.bedingung { cursor: pointer; }
.karte svg a.bedingung:hover text { fill: var(--akzent); text-decoration: underline; }
.karte svg marker path { fill: #8F8BC0; }

.szene {
  position: absolute; width: 200px; background: var(--blatt);
  border: 1px solid var(--tinte); border-radius: 2px; padding: 11px 13px;
  cursor: grab; user-select: none;
}
.szene.leer { background: #FBFBF9; border: 1px dashed #C9C8C1; }
.szene.leer .name { color: var(--gedaempft); font-weight: 450; }
.szene.gewaehlt { outline: 2px solid var(--akzent); outline-offset: 2px; }
.szene .name { font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.szene .fuss { display: flex; justify-content: space-between;
              font-family: var(--bau); font-size: 11.5px; color: var(--gedaempft); }
.szene.leer .stand { color: var(--leise); }
.szene:not(.leer) .stand { color: var(--akzent); }
.szene .wege { display: none; }

.legende { max-width: 1400px; margin-left: auto; margin-right: auto; display: flex; gap: 20px; margin-top: 12px;
           font-family: var(--bau); font-size: 11.5px; color: var(--gedaempft); }

/* --- Schreiben -------------------------------------------------------- */

/* ⚠️ Die Rückkehrzeile gehört ZU SICH SELBST, nicht zur Schreibansicht. Sie
   hing an `.schreiben` — und die Karte ist keine: Dort stand dieselbe Zeile in
   16 statt 12,5 Pixel und ohne den Abstand nach oben. Gemessen am 27.08.2026.
   Was überall gleich aussehen soll, darf nicht an einer Klasse hängen, die es
   nur an einer Stelle gibt. */
.zurueck { font-family: var(--bau); font-size: 12.5px; margin-top: 8px; }
.schreiben h1 { outline: none; }
.schreiben h1:focus { background: var(--akzent-blass); border-radius: 2px; }
.kennzahlen { display: flex; gap: 18px; font-family: var(--bau); font-size: 12.5px;
              color: var(--gedaempft); margin-bottom: 30px; flex-wrap: wrap; }
.kennzahlen .art { color: var(--akzent); }

.feld { display: flex; flex-direction: column; gap: 9px; margin-bottom: 30px; }
.feld label, .feld .feldkopf { font-family: var(--bau); font-size: 11px;
                              letter-spacing: 0.16em;
              text-transform: uppercase; color: var(--leise); }
.feld textarea {
  font: inherit; font-family: var(--schreib); font-size: 16px; line-height: 1.78; color: var(--tinte);
  background: transparent; border: none; border-left: 2px solid transparent;
  padding: 2px 0; outline: none; width: 100%; display: block;
  /* ⚠️ Kein Fenster: keine Bildlaufleiste, kein Ziehgriff. Die Höhe setzt
     werkstatt.js aus dem Inhalt — man schreibt in ein Blatt, nicht in ein Feld. */
  resize: none; overflow: hidden; min-height: 2.6em;
}

/* ⚠️ **Der Einzug ist jetzt immer da — nur der Strich kommt und geht.**
   Vorher sprang die Polsterung beim Hineinklicken von 0 auf 20 Pixel, und das
   war eine Maßänderung mitten im Betrieb. Sie hat dreierlei angerichtet:
   Der Spiegel trug einen Moment lang den alten Einzug (der Zeiger stand neben
   der Schrift), das Feld war 20 Pixel schmaler und brach anders um (ein Wort
   rutschte in die nächste Zeile), und weil dadurch eine Zeile dazukam, ragte
   die letzte aus dem Feld heraus — man kam scheinbar nicht weiter nach unten.

   Alle drei Male war die Antwort dieselbe: nachziehen, sobald der Fokus da
   ist. Und alle drei Male ging es schief, weil es diesen Zeitpunkt nicht
   gibt: Beim `focus`-Ereignis ist die neue Polsterung noch nicht berechnet,
   und was man ins nächste Bild verschiebt, läuft in einem Fenster, das nicht
   im Vordergrund liegt, überhaupt nicht — der Browser gibt ihm kein Bild.

   Also gibt es die Änderung nicht mehr. Der Text steht immer eingerückt, in
   beiden Zuständen gleich; sichtbar wird beim Schreiben nur der Strich. Was
   sich nie ändert, kann nicht auseinanderlaufen — und das ist die Regel
   über diesem Spiegel, wörtlich genommen.

   Wer den bündigen Rand beim Lesen zurückwill: Das geht, aber nur ohne
   Maßänderung — das Feld müsste zugleich 20 Pixel breiter werden
   (`width: calc(100% + 20px)`), damit die Zeile gleich lang bleibt. */
.schriftfeld textarea { padding-left: 20px; }
.schriftfeld:focus-within textarea { border-left-color: var(--akzent); }
/* ⚠️ Der Spiegel zieht mit — und zwar HIER, in derselben Regel, nicht erst
   hinterher über werkstatt.js. `gleicheAus` liest die Maße aus dem Feld ab und
   schreibt sie als Stilangabe in den Spiegel; das lief bisher in einem
   `requestAnimationFrame`, und dazwischen lag ein Bild lang ein Spiegel mit
   dem alten Einzug. Ein Bild genügt: Das Feld ist dann 20 Pixel schmaler als
   der Spiegel, bricht anders um — ein Wort rutscht in die nächste Zeile —, und
   der Schreibzeiger steht neben der Schrift. In einem Hintergrundfenster, wo
   der Browser `requestAnimationFrame` bremst, bleibt es sogar dabei.

   Eine Stilangabe im Element schlägt eine Regel im Blatt; darum trägt
   `gleicheAus` den Einzug jetzt gar nicht mehr ein (siehe MASSE), und beide
   bekommen ihn von hier. Was sich gemeinsam ändert, kann nicht auseinanderlaufen. */
.schriftfeld .spiegel { padding-left: 20px; }

/* --- Der Spiegel hinter dem Schreibfeld -------------------------------
   ⚠️ Spiegel und Feld MÜSSEN in Schrift, Zeilenhöhe, Rand und Innenabstand
   Zeichen für Zeichen übereinstimmen. Wer hier eine Schriftgröße ändert,
   verschiebt den Schreibzeiger gegen die Schrift. */

.schriftfeld { position: relative; }
/* ⚠️ Schrift, Größe, Zeilenhöhe und Abstände setzt **werkstatt.js** aus dem
   Feld selbst — hier stehen sie bewusst NICHT. Sie hier zu wiederholen war
   schon einmal der Fehler: Das Feld bekam eine neue Schrift, der Spiegel
   nicht, und der Zeiger stand neben der Schrift. Was aus einer Quelle kommt,
   kann nicht auseinanderlaufen. */
.schriftfeld .spiegel {
  position: absolute; inset: 0; pointer-events: none;
  color: var(--tinte); white-space: pre-wrap; overflow-wrap: break-word;
}
.schriftfeld textarea { position: relative; color: transparent; caret-color: var(--tinte); }
.schriftfeld textarea::selection { background: rgba(91, 84, 198, 0.18); }
.schriftfeld textarea::placeholder { color: var(--leise); }
/* Ein Feld mit Vorschau hat keinen Spiegel — dort bleibt der Text sichtbar. */
.feld.mitvorschau textarea { color: var(--tinte); }

/* ⚠️ **Nur Farbe. Keine Ausnahme.** Hier stand eine: Das Ziel eines Satzes
   rückte nach rechts, solange niemand in dem Feld schrieb — `display: flex`
   mit `gap: 24px`. Das sah aufgeräumt aus und war ein Maß, das es im Feld
   darunter nicht gibt: Der Text stand 24 Pixel weiter rechts, als das Feld ihn
   hat. Wer hinzeigte, setzte den Schreibzeiger daneben; und weil die
   Verschiebung erst beim Fokus verschwand, sprang beim Hineinklicken auch noch
   die Zeile um. Gemessen am 27.08.2026: 24 px im Ruhezustand, −20 px mit
   Fokus. Ein Spiegel, der anders umbricht als das Feld, ist kein Spiegel.
   Wer die Ausrichtung wiederhaben will, muss sie absolut positionieren wie
   `data-wenn` weiter unten — dann kostet sie keinen Platz. */
/* ⚠️ **Die offene Frage — auffällig, und nur Farbe.** Kein fetterer Schnitt,
   keine andere Größe: Beides änderte die Breite, und der Spiegel muss Zeichen
   für Zeichen so breit bleiben wie das Feld darunter. Ein Hintergrund tut das
   nicht, eine Farbe auch nicht. Der Ton ist bewusst keiner aus der Tafel —
   Violett gehört der Struktur, Rot den Klagen; eine offene Frage ist weder
   das eine noch das andere, sondern etwas, das noch aussteht. */
.spiegel .frage, mark.frage {
  color: #9A5B00; background: #FDF0D5; border-radius: 2px;
  font: inherit; font-weight: inherit;
}
mark.frage { padding: 0 1px; }

.spiegel .strich { color: var(--leise); }
/* Der Pfeil: die echten Zeichen bleiben stehen und tragen die Farbe des
   Papiers, das `→` wird darübergelegt. So ist der Spiegel genau so breit wie
   das Feld — kein Zeichen wird ersetzt, also kann sich nichts verschieben. */
.spiegel .pfeilzeichen { color: transparent; position: relative; }
.spiegel .pfeilzeichen::after {
  content: "→"; position: absolute; left: 0; right: 0; top: 0;
  text-align: center; color: var(--leise); pointer-events: none;
  /* ⚠️ Zwei Korrekturen, und beide sind nötig:
     `line-height: 1` nimmt die halbe Durchschusszeile weg. Ohne sie bekommt
     der abgesetzte Kasten die Zeilenhöhe des Textes (1,78) und schiebt das
     Zeichen um deren halbe Differenz nach unten — der Pfeil lag auf der
     Unterkante der Zeile.
     Der Rest ist die Schrift selbst: Die Tinte des `→` sitzt um 1,45 px höher
     als die Mitte der Kleinbuchstaben. Gemessen, nicht geschätzt. */
  line-height: 1; transform: translateY(0.09em);
}
.spiegel em { font-style: italic; }
.spiegel .stern { color: var(--linie); }
.spiegel .satz { color: var(--akzent); }
.spiegel .ziel { color: var(--leise); }
/* ⚠️ Der graue Strich an einer Antwort steht im Rand — und den gibt es nur
   beim Schreiben. Beim Lesen ist der Einzug null, und dann liefe der Strich
   mitten durch den Text: Die zweite Zeile einer umbrochenen Antwort beginnt
   ganz links, weil der Umbruch weich ist und nicht eingerückt werden kann,
   ohne den Schreibzeiger von der Schrift zu trennen. */
.spiegel .antwort { color: var(--gedaempft); }
.schriftfeld:focus-within .spiegel .antwort {
  background: linear-gradient(var(--linie), var(--linie)) 8px 0 / 2px 100% no-repeat;
}

/* Eine Bedingung am Ziel eines Satzes — beim Lesen, wo Platz dafür ist.
   ⚠️ Absolut gesetzt: So nimmt sie keinen Platz in der Zeile ein und
   verschiebt kein Zeichen. */
.spiegel .ziel { position: relative; }
.schriftfeld:not(:focus-within) .spiegel .ziel[data-wenn]::after {
  content: attr(data-wenn); position: absolute; left: 100%; white-space: pre;
  margin-left: 14px; font-size: 12px; color: var(--akzent); opacity: 0.75;
}
.feld.regie textarea { font-family: var(--bau); font-size: 14px; line-height: 1.7; color: #4A4A52; }
.feld.quelle textarea { font-family: var(--bau); font-size: 13.5px; line-height: 1.7; }
.feld.notiz { background: var(--notiz); border-radius: 2px; padding: 16px 18px; }
/* Die Notiz hat keinen Strich und darum auch keinen Einzug — ⚠️ dann aber in
   BEIDEN, Feld und Spiegel. Ein Einzug, den nur einer von beiden hat, ist
   genau der Fehler, den die Regel oben beschreibt. */
.feld.notiz textarea { font-size: 15.5px; border-left: none; color: #5A5A62; }
.feld.notiz .schriftfeld textarea,
.feld.notiz .schriftfeld .spiegel { padding-left: 0; }

/* --- Abschnitte entfernen und Vorschauen ------------------------------ */

.feld label, .feld .feldkopf { display: flex; justify-content: space-between;
                              align-items: baseline; gap: 20px; }
.feldweg {
  opacity: 0; border: 0; background: none; cursor: pointer; padding: 0;
  font-family: var(--bau); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--leise); transition: opacity 0.12s;
}
.griffe { display: flex; gap: 14px; align-items: baseline; }
.feldweg.pfeil { font-size: 13px; letter-spacing: 0; }
.feld:hover .feldweg, .feldweg:focus { opacity: 1; }
.feldweg:hover { color: var(--warnung); }

.feld.mitvorschau textarea { display: none; }
.feld.mitvorschau.offen textarea { display: block; }
.feld.mitvorschau.offen .vorschau { display: none; }
.vorschau { cursor: text; }

/* --- Der Steckbrief, gesetzt wie in der Vorlage ----------------------- */

.personenkopf { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.personenkopf h1 { margin-bottom: 0; }
.herkunft { font-family: var(--bau); font-size: 13px; color: var(--gedaempft); }
.tafel .reihe { display: flex; gap: 24px; align-items: baseline; padding: 4px 0; }
.tafel .kategorie { font-family: var(--bau); font-size: 12.5px; color: var(--gedaempft);
                    width: 150px; flex-shrink: 0; }
.tafel .wert { font-size: 16px; line-height: 1.6; }
.tafel .wert .tupfen { display: inline-block; margin-right: 10px; }
.tafel .reihe.frei .wert { color: var(--gedaempft); }

/* --- Merkmale und Funde ------------------------------------------- */

.merkmal { cursor: pointer; display: flex; gap: 16px; align-items: baseline;
              background: var(--blatt); border-top: 1px solid var(--linie); padding: 15px 18px; }
.merkmal .kennung { font-family: var(--bau); font-size: 13.5px; color: var(--akzent);
                    width: 165px; flex-shrink: 0; }
.merkmal .art { font-family: var(--bau); font-size: 11px; color: var(--gedaempft);
                letter-spacing: 0.08em; text-transform: uppercase; width: 58px;
                flex-shrink: 0; }
.merkmal .wer { font-family: var(--bau); font-size: 12px; color: var(--gedaempft);
                width: 105px; flex-shrink: 0; }
.merkmal .satz { flex-grow: 1; font-size: 16px; line-height: 1.6; }
.merkmal .benutzt { font-family: var(--bau); font-size: 11.5px; color: var(--gedaempft);
                    flex-shrink: 0; width: 190px; text-align: right; }
.merkmal:hover { background: var(--akzent-blass); }
.merkmal .benutzt.nie { color: var(--warnung); }
.leer.klein { font-family: var(--bau); font-size: 12px; margin-top: 10px; }

/* --- Anmeldung -------------------------------------------------------- */

/* ⚠️ **Luft unter dem letzten Absatz — aber nur beim Schreiben.** Die Zeile,
   in der man schreibt, steht in der Mitte des Fensters (siehe `zentriere` in
   werkstatt.js). Am Ende eines Textes ginge das nicht: Man kann nicht weiter
   scrollen, als das Dokument lang ist. Also bekommt die Seite beim Schreiben
   unten eine halbe Fensterhöhe dazu. Sie steht UNTER allem und ändert keine
   Breite — es bricht also nichts anders um, und der Spiegel bleibt der
   Spiegel.

   ⚠️ **Und sie bleibt auch beim Lesen.** Erst stand sie nur beim Schreiben da,
   und beim Verlassen des Feldes sprang die Seite nach oben: Das Dokument wurde
   in dem Augenblick um eine halbe Fensterhöhe kürzer, also musste der Browser
   den Rollstand kappen. Wieder eine Maßänderung mitten im Betrieb, wieder
   dieselbe Antwort — sie darf sich nicht ändern. Der Preis ist eine halbe
   Fensterhöhe Leere unter dem letzten Absatz; sie steht dort, wo ohnehin
   nichts mehr kommt.

   ⚠️ Über `:has()` und nicht über eine Klasse, die JavaScript setzt. Der
   Grund ist derselbe wie beim Einzug weiter oben: Was an einem Ereignis
   hängt, kann auseinanderlaufen — ein `focus`, das nicht ankommt, und die
   Luft fehlt für immer. Eine Regel im Blatt kennt den Zustand ohne Zutun.
   Kennt ein Browser `:has()` nicht, fehlt nur die letzte halbe Fensterhöhe;
   alles andere bleibt, wie es ist.

   ⚠️ **Am `main`, nicht am `body` — und das ist der Unterschied.** Sie stand
   am `body`, und solange die Seite dort aufhörte, sah man es nicht. Seit die
   Fußzeile da ist, steht sie als Kind des `body` VOR dieser Polsterung: erst
   die Fußzeile, dann eine halbe Fensterhöhe Nichts. Die Luft gehört unter den
   Text, nicht unter die Seite. */
body:has(.schriftfeld) main { padding-bottom: 50vh; }

/* --- Ruhe ringsum, solange geschrieben wird --------------------------------
   ⚠️ **Nur die Deckkraft.** Kein Ausblenden, keine Größe, keine Lage — sonst
   bricht etwas anders um, und der Spiegel wäre wieder nicht der Spiegel.
   Blass heißt hier: noch lesbar, aber nicht mehr im Weg. Und blass wird der
   ganze Block, nicht nur sein Text: Die Überschrift eines Abschnitts gehört zu
   ihm, ein heller Titel über blassem Text sähe aus wie ein Fehler. */
body:has(.schriftfeld:focus-within) .spalte.schreiben > * {
  opacity: 0.3;
  transition: opacity 140ms ease;
}
body:has(.schriftfeld:focus-within) .spalte.schreiben > *:has(.schriftfeld:focus-within) {
  opacity: 1;
}

/* ⚠️ Spalte, nicht Reihe. Sie stand als Reihe da, solange die Seite nur das
   Formular enthielt — mit der Fusszeile daneben rutschte das Formular an den
   linken Rand und die Fusszeile in die Mitte. Eine Regel, die nur mit genau
   einem Kind stimmt, ist eine Falle für das zweite. */
body.anmeldung {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; gap: 0;
}
body.anmeldung form { display: flex; flex-direction: column; gap: 14px; width: 280px; }
body.anmeldung .haus { font-family: var(--bau); font-size: 13px; letter-spacing: 0.14em;
                       text-transform: uppercase; color: var(--gedaempft); text-align: center;
                       margin-bottom: 10px; }
body.anmeldung input, body.anmeldung button {
  font: inherit; font-family: var(--bau); font-size: 14px; padding: 11px 14px;
  border: 1px solid var(--linie); border-radius: 2px; background: var(--blatt);
}
body.anmeldung button { background: var(--tinte); color: var(--grund); border-color: var(--tinte);
                        cursor: pointer; }
.fehler { color: var(--warnung); font-family: var(--bau); font-size: 12.5px; text-align: center; }

/* --- Am Telefon: aus der Karte wird eine Liste ------------------------- */

/* ⚠️ **Auf dem Telefon: ansehen und schreiben, sonst nichts.** Der ganze
   Zusammenhang — Karte, Prüfbericht, Suche, Muster — gehört an den Schreibtisch.
   Das ist keine Sparsamkeit: Ein Werkzeug, das auf 375 Pixeln alles zeigen
   will, zeigt nichts richtig, und die Zeilen brechen aus dem Rahmen.

   Gemessen an der Übersicht: Das Dokument war 552 Pixel breit bei 375 Pixeln
   Fenster, allein wegen der Menüzeile — man konnte nach rechts wegscrollen und
   fand dort die halbe Seite. */
@media (max-width: 760px) {
  header { padding: 14px 18px; gap: 14px; }
  /* Das Menü bricht um, statt aus dem Bild zu laufen. Nichts wird unerreichbar:
     Wer auf dem Telefon in die Einstellungen will, soll das können. */
  header nav { flex-wrap: wrap; gap: 14px 18px; min-width: 0; }
  /* Drei Punkte, mehr nicht — der Rest ist Schreibtischarbeit. */
  header nav a.nurgross { display: none; }
  header .marke { width: 100%; }
  header .zustand { margin-left: auto; }
  /* Das Suchfenster nimmt die ganze Breite und hängt höher — auf 375 Pixeln
     ist der Rand Platzverschwendung, und die Tastatur nimmt die untere Hälfte. */
  .suchschleier { padding: 6vh 10px 10px 10px; }
  .suchblatt { max-height: 82vh; }
  .suchzeile { padding: 13px 15px; }
  .suchzeile input { font-size: 17px; }
  .suchanzahl { padding: 11px 15px 5px 15px; }
  .suchtreffer { padding: 11px 15px; }

  main { padding: 6px 18px 50px 18px; }
  h1 { font-size: 24px; }

  .karte { position: static; height: auto; border: none; background: transparent;
           display: flex; flex-direction: column; gap: 10px; overflow: visible; }
  .karte svg { display: none; }
  /* ⚠️ Die Leinwand bleibt sonst 2400 Pixel breit, auch wenn die Karte zur
     Liste geworden ist — sie ist der eigentliche Grund, warum sich die
     Kartenseite waagrecht schieben liess. */
  .leinwandhuelle, .leinwand { position: static; width: auto !important;
                               height: auto !important; transform: none !important;
                               display: flex; flex-direction: column; gap: 10px; }
  .szene { position: static !important; width: 100%; cursor: pointer; padding: 14px 16px; }
  .szene .wege { display: block; margin-top: 8px;
                font-family: var(--bau); font-size: 12px; color: var(--gedaempft); }
  .werkzeuge { margin-left: 0; width: 100%; }
  .legende { display: none; }
  .merkmal { flex-direction: column; gap: 6px; }
  .merkmal .kennung { width: auto; }
}

/* --- Zweispaltig: Leiste und Blatt ------------------------------------ */

.zweispaltig { display: flex; gap: 44px; align-items: flex-start; max-width: 1020px; margin: 0 auto; }
.zweispaltig .schreiben { flex-grow: 1; max-width: 700px; min-width: 0; }
.spalte.breit { max-width: 880px; }

.leiste { width: 210px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px;
          position: sticky; top: 20px; padding-top: 26px; }
.leiste .rang { font-family: var(--bau); font-size: 10.5px; letter-spacing: 0.16em;
                text-transform: uppercase; color: var(--leise); margin: 14px 0 6px 12px; }
.leiste .eintrag { display: flex; align-items: center; gap: 11px; padding: 9px 12px;
                   color: var(--tinte); border-radius: 2px; font-size: 15.5px;
                   border-left: 2px solid transparent; }
.leiste .eintrag:hover { background: var(--blatt); }
.leiste .eintrag.aktiv { background: var(--blatt); border-left-color: var(--farbe); font-weight: 500; }
.leiste .knopf { margin-top: 16px; }

/* Das Inhaltsverzeichnis der Hilfe: dieselbe Leiste wie bei den Personen,
   nur mit Wörtern statt Farbtupfen. ⚠️ Es steht in der Bauschrift und klein —
   es ist ein Register, kein Text. */
.hilfeverzeichnis { width: 240px; font-family: var(--bau); font-size: 12px;
                    max-height: calc(100dvh - 60px); overflow-y: auto; }
.hilfeverzeichnis a { display: block; padding: 4px 10px; color: var(--leise);
                      border-left: 2px solid transparent; line-height: 1.45; }
.hilfeverzeichnis a:hover { color: var(--tinte); background: var(--blatt); }
.hilfeverzeichnis a.hier { color: var(--tinte); border-left-color: var(--akzent); }
.zweispaltig.hilfe { max-width: 1160px; }
.zweispaltig.hilfe .hilfeseite { flex-grow: 1; min-width: 0; margin: 0; }

@media (max-width: 900px) {
  .zweispaltig.hilfe { flex-direction: column; gap: 0; }
  .hilfeverzeichnis { position: static; width: 100%; max-height: none;
                      display: flex; flex-wrap: wrap; gap: 2px 10px; padding-top: 0; }
}

.tupfen { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
          background: var(--farbe, #808080); box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); }
.tupfen.gross { width: 15px; height: 15px; display: inline-block; margin-right: 12px;
                vertical-align: baseline; }
.farbwert { font-family: var(--bau); font-size: inherit; color: var(--gedaempft);
            border: 0; background: none; padding: 0; cursor: pointer; }
.farbwert:hover { color: var(--akzent); }

/* --- Übersicht -------------------------------------------------------- */

.szenegitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.szenekarte { display: flex; flex-direction: column; gap: 7px; background: var(--blatt);
             border: 1px solid var(--tinte); border-radius: 2px; padding: 16px 18px;
             color: var(--tinte); }
.szenekarte:hover { text-decoration: none; box-shadow: 0 1px 0 var(--tinte); }
.szenekarte.leer { background: #FBFBF9; border: 1px dashed #C9C8C1; }
.szenekarte .name { font-size: 16.5px; font-weight: 500; }
.szenekarte.leer .name { color: var(--gedaempft); font-weight: 450; }
.szenekarte .stand { font-family: var(--bau); font-size: 11.5px; color: var(--akzent); }
.szenekarte.leer .stand { color: var(--leise); }

.strang { background: var(--blatt); border: 1px solid var(--linie); border-radius: 2px;
          padding: 20px 22px; margin-bottom: 14px; }
.strang .kopf { display: flex; justify-content: space-between; align-items: baseline;
                margin-bottom: 16px; }
.strang .kopf .name { font-size: 20px; font-weight: 600; }
.strang .kopf .zahl { font-family: var(--bau); font-size: 12px; color: var(--gedaempft); }
.akte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.akt { border-top: 2px solid var(--tinte); padding-top: 10px; display: flex;
       flex-direction: column; gap: 4px; color: var(--tinte); }
/* ⚠️ Derselbe Strich unten wie bei einer Szenekachel — er sagt „hier kannst du
   klicken". Der Strich OBEN bleibt unangetastet: Der bedeutet etwas (dunkel =
   geschrieben, hell = leer) und darf nicht als Zeigefinger missbraucht werden. */
.akt:hover { text-decoration: none; box-shadow: 0 1px 0 var(--tinte); }
.akt:hover .name { color: var(--tinte); }
.akt.leer { border-top-color: var(--linie); }
.akt .name { font-size: 15px; font-weight: 500; }
.akt.leer .name { color: var(--gedaempft); font-weight: 450; }
.akt .zahl { font-family: var(--bau); font-size: 11.5px; color: var(--leise); }

/* --- Knöpfe ----------------------------------------------------------- */

.knopf.leise { align-self: flex-start; padding: 9px 15px; margin-top: 28px; }
.merkmale + .knopf.leise { margin-top: 32px; }
.knopf.leise:hover { border-style: solid; border-color: var(--tinte); color: var(--tinte); }

/* --- Das Suchfenster hinter der Lupe ---------------------------------- */

/* ⚠️ **Es hängt oben, nicht in der Mitte.** Eine Liste, die mit jedem
   Buchstaben kürzer wird, darf nicht mitwandern: Wer tippt, schaut auf eine
   Stelle, und die Zeile darunter soll dieselbe Zeile bleiben. Ein in der Mitte
   zentriertes Fenster verschiebt bei jedem Anschlag alles. */
.suchschleier { position: fixed; inset: 0; background: rgba(22,22,26,.28);
                display: flex; justify-content: center; align-items: flex-start;
                padding: 11vh 16px 16px 16px; z-index: 60; }
.suchschleier[hidden] { display: none; }
.suchblatt { background: var(--blatt); border-radius: 3px; width: 660px;
             max-width: 100%; max-height: 74vh;
             box-shadow: 0 18px 50px rgba(22,22,26,.18);
             display: flex; flex-direction: column; overflow: hidden; }
.suchzeile { display: flex; align-items: center; gap: 12px; flex-shrink: 0;
             padding: 15px 20px; border-bottom: 1px solid var(--linie); }
.suchzeile svg { width: 18px; height: 18px; color: var(--leise); flex-shrink: 0; }
/* Der Ring, den manche Browser um ein fokussiertes Feld legen, wäre hier ein
   Kasten im Kasten — die Zeile IST das Feld. */
.suchzeile input { flex: 1; min-width: 0; font: inherit; font-family: var(--prosa);
                   font-size: 19px; color: var(--tinte);
                   border: none; outline: none; background: none; padding: 0; }
.suchzeile input::placeholder { color: var(--leise); }
/* ⚠️ Das eigene Kreuz des Browsers muss weg: Neben unserem standen zwei, und
   das eine löschte den Text, das andere schloss das Fenster — bei gleichem
   Aussehen. */
.suchzeile input::-webkit-search-cancel-button { display: none; }
.suchzu { background: none; border: none; cursor: pointer; padding: 0 2px;
          font-size: 22px; line-height: 1; color: var(--leise); }
.suchzu:hover { color: var(--tinte); }
.suchergebnis { overflow-y: auto; }

/* Sie sagt, wie viele es sind und worin gesucht wurde. ⚠️ Eine Zeile, nicht
   zwei: Bei einem langen Namen der Geschichte brach sie um und schob die
   Trefferliste nach unten — ausgerechnet auf dem Telefon, wo am wenigsten
   Platz ist. */
.suchanzahl { margin: 0; padding: 13px 20px 6px 20px;
              font-family: var(--bau); font-size: 11px; letter-spacing: 0.14em;
              text-transform: uppercase; color: var(--leise);
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suchleer { margin: 0; padding: 16px 20px 20px 20px; color: var(--gedaempft); }
.suchliste { display: flex; flex-direction: column; }

/* ⚠️ Dass hier nichts unterstrichen wird, steht NICHT hier, sondern unten in
   der einen Liste am Ende dieses Blattes. Eine Fläche, die ihre Absage selbst
   mitbringt, ist genau die Zeile, die der Wächter nicht findet. */
.suchtreffer { display: flex; align-items: baseline; gap: 18px;
               justify-content: space-between; padding: 11px 20px;
               border-top: 1px solid var(--linie); color: var(--tinte); }
.suchliste .suchtreffer:first-child { border-top: none; }
.suchtreffer:hover, .suchtreffer.gewaehlt { background: var(--notiz); }
.suchtreffer.gewaehlt { box-shadow: inset 2px 0 0 var(--akzent); }
.suchinfo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.suchtitel { font-size: 15.5px; }
/* Ein Merkmal heisst `weiss-vom-feuer` und steht überall sonst in der
   Schreibmaschinenschrift. Hier auch. */
.suchtitel.kennung { font-family: var(--bau); font-size: 13.5px; }
.suchwo { font-family: var(--bau); font-size: 11.5px; color: var(--gedaempft); }
/* Die gefundene Zeile: eine, und nur eine. Drei Zeilen Fliesstext je Treffer,
   und die Liste ist keine Liste mehr. */
.suchstelle { font-size: 13px; color: var(--gedaempft); line-height: 1.5;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suchart { font-family: var(--bau); font-size: 10.5px; letter-spacing: 0.12em;
           text-transform: uppercase; color: var(--leise);
           white-space: nowrap; flex-shrink: 0; }
.suchtreffer mark { background: var(--akzent-blass); color: inherit;
                    border-radius: 2px; padding: 0 1px; }
.suchmehr .suchtitel { font-family: var(--bau); font-size: 12px; color: var(--akzent); }

/* Dieselben Zeilen auf der Seite `/suche` — dort tragen sie den Rand der
   Spalte, nicht den des Fensters. */
.funde .suchanzahl, .funde .suchleer { padding-left: 0; padding-right: 0; }
.funde .suchtreffer { padding-left: 0; padding-right: 0; }
/* ⚠️ Sonst nichts. Zwei Treffer, die verschieden aussehen, je nachdem ob man
   sie im Fenster oder auf der Seite ansieht, wären genau der Fehler, den die
   gemeinsame Quelle vermeiden soll. */

/* --- Eigener Dialog statt Browserfenster ------------------------------ */

.schleier { position: fixed; inset: 0; background: rgba(22,22,26,.28);
            display: flex; align-items: center; justify-content: center; z-index: 50; }
.schleier[hidden] { display: none; }
/* ⚠️ **Der Dialog muss scrollen können.** Er hatte keine Höhenbegrenzung —
   bei einer langen Wahl (acht Gerüste) lief er oben und unten aus dem Bild,
   und weder Titel noch Knöpfe waren erreichbar. Man sah die Mitte einer
   Entscheidung und konnte sie nicht treffen.
   Nicht der Dialog selbst scrollt, sondern seine MITTE: Titel und Fusszeile
   bleiben stehen, dazwischen wird gerollt. Ein Dialog, dessen „Übernehmen"
   wegscrollt, ist derselbe Fehler noch einmal. */
.dialog { background: var(--blatt); border-radius: 3px; padding: 28px 30px; width: 470px;
          max-width: calc(100vw - 32px); max-height: calc(100vh - 48px);
          box-shadow: 0 18px 50px rgba(22,22,26,.18);
          display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.dialog h3, .dialog .fuss { flex-shrink: 0; }
.dialog .wahl {
  overflow-y: auto; min-height: 0;
  /* Ein angeschnittener Knopf am unteren Rand sagt „hier geht es weiter" —
     besser als jeder Balken, den man erst suchen muss. */
  scrollbar-width: thin;
}
.dialog h3 { margin: 0; font-size: 19px; font-weight: 600; }
.dialog p { margin: 0; color: var(--gedaempft); font-size: 14.5px; line-height: 1.6; }
.dialog input { font: inherit; font-size: 16px; padding: 10px 12px; width: 100%;
                border: 1px solid var(--linie); border-radius: 2px; background: var(--grund);
                color: var(--tinte); outline: none; }
.dialog input:focus { border-color: var(--akzent); }
.dialog .wahl { display: flex; flex-direction: column; gap: 8px; }
.dialog .wahl button { font: inherit; text-align: left; background: var(--grund); cursor: pointer;
                       border: 1px solid var(--linie); border-radius: 2px; padding: 13px 15px;
                       display: flex; flex-direction: column; gap: 4px; color: var(--tinte); }
.dialog .wahl button:hover { border-color: var(--tinte); }
.dialog .wahl button.gewaehlt { border-color: var(--akzent); background: var(--akzent-blass); }
.dialog .wahl .titel { font-size: 15.5px; font-weight: 500; }
.dialog .wahl .dazu { font-size: 13px; color: var(--gedaempft); line-height: 1.5; }
.dialog .nebenknopf {
  font: inherit; font-family: var(--bau); font-size: 13px; cursor: pointer; width: 100%;
  border: 1px dashed var(--linie); border-radius: 2px; background: none;
  color: var(--gedaempft); padding: 11px 14px;
}
.dialog .nebenknopf:hover { border-color: var(--akzent); color: var(--akzent); }
.dialog .fussnote { margin: -4px 0 0 0; font-size: 13px; color: var(--leise); line-height: 1.55; }
.dialog .fuss { display: flex; gap: 10px; justify-content: flex-end;
                align-items: center; flex-wrap: wrap; }
.dialog .fuss button { white-space: nowrap; }
.dialog .fuss button.weg { margin-right: auto; color: var(--warnung);
                           border-color: transparent; }
.dialog .fuss button.weg:hover { border-color: var(--warnung); }
.dialog .fuss button { font: inherit; font-family: var(--bau); font-size: 13px; cursor: pointer;
                       border-radius: 2px; padding: 9px 16px; border: 1px solid var(--linie);
                       background: var(--grund); color: var(--gedaempft); }
.dialog .fuss button.haupt { background: var(--tinte); color: var(--grund); border-color: var(--tinte); }

/* Eine Regel in der Hilfe: der Satz, den man sich merken muss.
   ⚠️ Sie hiess frueher „⚠️" mitten im Absatz — ein Zeichen aus meinen eigenen
   Notizen, das im Text eines Lesers nichts verloren hat. Eine Regel traegt ihr
   Gewicht in der Kante links, nicht in einem Warndreieck. Rot ist sie NICHT:
   Rot heisst „Achtung, Schaden"; eine Regel ist keine Gefahr, sondern eine
   Auskunft, die gilt. */
.hilfeseite .regel { border-left: 2px solid var(--tinte); padding: 2px 0 2px 14px;
                     margin: 14px 0; }

/* --- Hilfeseite ------------------------------------------------------- */

.hilfeseite h2 { margin-top: 40px; }
.hilfeseite p { line-height: 1.75; font-size: 16.5px; }
.hilfeseite ul { line-height: 1.75; font-size: 16px; padding-left: 20px; }
.hilfeseite li { margin-bottom: 8px; }
.hilfeseite pre { font-family: var(--bau); font-size: 13.5px; line-height: 1.75;
                  background: var(--blatt); border-left: 2px solid var(--akzent);
                  padding: 16px 20px; overflow-x: auto; white-space: pre-wrap; }
.hilfeseite code { font-family: var(--bau); font-size: 13.5px; background: var(--notiz);
                   padding: 2px 6px; border-radius: 2px; }
.tafel { border-collapse: collapse; width: 100%; font-size: 16px; }
.tafel td { border-top: 1px solid var(--linie); padding: 11px 0; vertical-align: top;
            line-height: 1.65; }
.tafel td:first-child { width: 190px; padding-right: 20px; }

.zurueck { display: flex; gap: 20px; flex-wrap: wrap; }
.zurueck .leise { color: var(--leise); }
/* ⚠️ **Wo man steht, sieht anders aus als wohin man kann.** Beide Ansichten
   eines Akts standen in derselben grauen Schrift — die eine ein Verweis, die
   andere die Seite, auf der man gerade ist. Man sah der einen nicht an, dass
   sie klickbar ist, und der anderen nicht, dass sie es nicht ist; sie wirkte
   wie ein toter Link. Der Stand bekommt darum dieselbe Marke wie im Menü:
   Tinte statt Grau, dazu die Kante in der Akzentfarbe. Eine Marke fürs
   „hier bin ich", nicht zwei. */
.zurueck .hier { color: var(--tinte); border-bottom: 2px solid var(--akzent);
                 padding-bottom: 2px; }

@media (max-width: 760px) {
  .zweispaltig { flex-direction: column; gap: 0; }
  .leiste { width: 100%; position: static; padding-top: 0; flex-direction: row;
            flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
  .leiste .rang { width: 100%; margin: 6px 0 0 0; }
  .leiste .eintrag { border: 1px solid var(--linie); border-radius: 2px; background: var(--blatt); }
  .szenegitter, .akte { grid-template-columns: minmax(0, 1fr); }
  .tafel td:first-child { width: 120px; }
}

/* --- Der Ablauf auf einen Blick --------------------------------------- */

#ablaufbild { margin-bottom: 30px; }
.ablaufbild { display: flex; flex-direction: column; gap: 2px; }
.stufe { background: var(--blatt); border-left: 2px solid var(--linie); padding: 12px 16px; }
/* ⚠️ Kein eigener Strich für den ersten Abschnitt. Dass er der Anfang ist,
   steht als Wort daneben — zweimal dasselbe zu sagen heißt, dass man beim
   zweiten Mal nach einer weiteren Bedeutung sucht, die es nicht gibt. */
.stufe.verwaist { border-left-color: var(--warnung); background: #FDF6F5; }
.stufe .kopf { display: flex; gap: 12px; align-items: baseline; }
.stufe .kopf .name { font-family: var(--bau); font-size: 13.5px; font-weight: 500;
                     border: 0; background: none; padding: 0; cursor: pointer;
                     color: var(--tinte); }
.stufe .kopf .name:hover { color: var(--akzent); }
/* ⚠️ Ein Ziel verhält sich immer gleich, ob es ein Abschnitt oder eine Szene
   ist. Die Szene war ein `a` und bekam darum die Unterstreichung aller
   Verweise — dieselbe Sache sah an zwei Stellen verschieden aus. */
.stufe .weg button.ziel, .stufe .weg a.ziel {
  border: 0; background: none; padding: 0; cursor: pointer;
}
.stufe .weg button.ziel:hover, .stufe .weg a.ziel:hover { color: var(--akzent); }
/* Das Wort „Szene:" bleibt grau — genau wie „Abschnitt:". Gefärbt wird beim
   Darüberfahren nur der Pfeil und der Name dahinter. */
.stufe .kopf .marke { font-family: var(--bau); font-size: 11px; color: var(--leise); }
.stufe.verwaist .kopf .marke { color: var(--warnung); }
.stufe .weg { display: flex; gap: 24px; align-items: baseline; margin-top: 7px;
              padding-left: 14px; justify-content: space-between; }
.stufe .weg .satz { font-family: var(--bau); font-size: 13.5px; color: var(--akzent); }
.stufe .weg .ziel { font-family: var(--bau); font-size: 12px; color: var(--leise);
                    text-align: right; flex-shrink: 0; }
.stufe .weg .ziel.fehlt { color: var(--warnung); text-decoration: line-through; }
/* Der Ausgang eines Einschubs: kein fehlendes Ziel, sondern das Ziel selbst. */
.stufe .weg .ziel.heraus { color: var(--gedaempft); font-style: italic; }
.stufe .weg .marke { color: var(--leise); margin-right: 4px; }

/* --- Vorschläge beim Schreiben ---------------------------------------- */

.vorschlagsliste {
  position: absolute; z-index: 60; min-width: 220px; max-width: 340px;
  background: var(--blatt); border: 1px solid var(--linie); border-radius: 6px;
  box-shadow: 0 8px 26px rgba(22, 22, 26, .12); padding: 4px; overflow: hidden;
}
.vorschlagsliste button {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 6px 9px; border-radius: 4px;
}
.vorschlagsliste button.gewaehlt { background: var(--akzent-blass); }
.vorschlagsliste .kennung { font-family: var(--bau); font-size: 13px; color: var(--tinte); }
.vorschlagsliste .dazu { font-family: var(--bau); font-size: 11px; color: var(--leise); }

/* --- Stränge und Akte verwalten --------------------------------------- */

button.leiser {
  border: 0; background: none; cursor: pointer; padding: 2px 0;
  font-family: var(--bau); font-size: 11.5px; color: var(--leise);
}
button.leiser:hover { color: var(--akzent); }
.strang .kopf { display: flex; align-items: baseline; gap: 14px; }
.strang .kopf .zahl { flex: 1; }

/* --- Der Prüfbericht: Fehler sehen nach Fehlern aus -------------------- */

.klagen ul { list-style: none; padding: 0; margin: 0; }
.klagen li { font-family: var(--bau); font-size: 12.5px; color: var(--warnung);
             padding: 7px 12px; border-left: 2px solid var(--warnung);
             background: #FDF6F5; margin-bottom: 2px; }

.sicherungsstand { font-family: var(--bau); font-size: 12.5px; color: var(--gedaempft); }
.sicherungsstand .meldung { color: var(--warnung); }

textarea::placeholder { color: var(--leise); opacity: 1; }

.klagen.zurszene { margin: -14px 0 30px 0; }

/* --- Segmente: ein Feld je Abschnitt ---------------------------------- */

.feld.teil { margin-top: -14px; }
/* ⚠️ **Ein 11-Pixel-Streifen ist kein Ziel.** Der Name einer Sequenz ist
   beschreibbar, war aber nur 16 Pixel hoch — man traf ihn mit der Maus kaum.
   Die Polsterung vergrössert die Trefferfläche nach oben und unten; das
   negative Aussenmass hebt sie wieder auf, damit sich am Umbruch nichts
   verschiebt (Invariante 6: kein Mass, das sich zur Laufzeit ändert). */
.segmentname {
  font-family: var(--bau); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gedaempft); outline: none;
  border-bottom: 1px solid transparent;
  padding: 6px 4px; margin: -6px -4px; cursor: text;
}
.segmentname:hover { border-bottom-color: var(--linie); }
.segmentname:focus { border-bottom-color: var(--akzent); color: var(--tinte); }
#neues-segment { margin: -10px 0 30px 0; }

/* --- Verbindungen auf der Karte --------------------------------------- */

.karte svg line.griff { stroke: transparent; stroke-width: 14; cursor: pointer; }
.karte svg line.griff:hover { stroke: rgba(91, 84, 198, 0.12); }
.legende .leise { color: var(--leise); }

.dialog label.auswahl {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--bau); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--leise);
}
.dialog select {
  font: inherit; font-size: 15.5px; padding: 9px 10px; width: 100%;
  border: 1px solid var(--linie); border-radius: 2px; background: var(--grund);
  color: var(--tinte); text-transform: none; letter-spacing: 0;
}
.dialog select:focus { border-color: var(--akzent); outline: none; }
.dialog label.auswahl input { text-transform: none; letter-spacing: 0; }

.kennzahlen .wenn { color: var(--akzent); font-size: 11.5px; }

/* --- Näher heran, weiter weg ------------------------------------------ */

.werkzeuge .zoom { display: flex; align-items: center; gap: 6px; }
.werkzeuge .zoom .knopf { padding: 5px 10px; font-size: 14px; line-height: 1; }
.werkzeuge .zoom #zoom-stand { font-family: var(--bau); font-size: 12px;
                               color: var(--gedaempft); min-width: 44px; text-align: center; }

.stufe .weg .beschreibung { font-size: 13px; color: var(--gedaempft); font-style: italic; }

/* --- Ein begehbare Szene zeigt einen Anlaufpunkt auf einmal ----------
   ⚠️ In einer begehbaren Szene gibt es keine Reihenfolge — alle Anlaufpunkte
   ausgeklappt untereinander sind darum nur eine lange Wurst. Die Liste oben
   ist die Übersicht; ein Klick öffnet genau einen darunter. In einer
   gestellten Szene ist das anders: Dort IST die Reihenfolge die Sache, und
   alle Abschnitte bleiben sichtbar. */

.schreiben.nureines .feld.teil { display: none; }
.schreiben.nureines .feld.teil.offen { display: flex; }
.stufe.offen { background: var(--akzent-blass); }
.stufe .kopf .name { text-align: left; }

/* Was ein Satz einbringt — die Merkmal, die man danach hat. */
.stufe .weg .rechts { display: flex; gap: 14px; align-items: baseline; flex-shrink: 0; }
/* Was beim Wählen geschieht: Regie, Rede, Vergabe — unter dem Satz, in der
   geschriebenen Reihenfolge. */
.stufe .dabei { display: flex; flex-wrap: wrap; gap: 6px 12px; padding-left: 28px;
                margin-top: 3px; font-family: var(--bau); font-size: 11.5px; }
.stufe .dabei .tut { color: var(--gedaempft); letter-spacing: 0.06em;
                     text-transform: uppercase; }
.stufe .dabei .tut.unbekannt { color: var(--warnung); }
.stufe .dabei .spricht { color: var(--akzent); }
.stufe .dabei .spricht::after { content: " spricht"; color: var(--gedaempft); }
.stufe .dabei .gelernt { color: var(--akzent); }
/* „wenn …" steht klein vor dem, was es bedingt — in der Übersicht wie im Text. */
.stufe .wenn, .stufe .dabei .wenn { font-family: var(--bau); font-size: 11px;
                                    color: var(--gedaempft); margin-right: 6px; }
.stufe .wenn a { color: inherit; }
/* Der Satz des Merkmals steht daneben — eine Kennung allein sagt nach drei
   Wochen Pause nichts. */
.stufe .wenn .dazu { color: var(--leise); margin-left: 6px; font-style: italic; }
.stufe .dabei .gelernt a { color: inherit; }
/* Was unter einem Satz steht, ist sein Verlauf: Prosa, Regie, Rede, Vergabe.
   ⚠️ Eigene Klassennamen, unter `.spiegel` gebunden — `.merkmal` und
   `.regie` gehören anderen Stellen und brächten deren Kästen mit. */
/* ⚠️ Ohne `.antwort` davor, sonst gilt es nur für die eingerückte Fassung.
   Regie und Rede stehen aber auch linksbündig — mitten in der Erzählung einer
   gestellten Szene —, und dort sahen sie aus wie gewöhnlicher Text. Ein
   Zeichen, das etwas bedeutet, muss überall gleich aussehen. */
.spiegel .vergabe { color: var(--akzent); }
.spiegel .anweisung { color: var(--gedaempft); font-style: italic; }
.spiegel .rede { color: var(--tinte); }
/* ⚠️ Nur Farbe. Ein anderer Schnitt oder gesperrte Kapitälchen wären hübsch
   und würden den Schreibzeiger verschieben — der Spiegel muss Zeichen für
   Zeichen so breit bleiben wie das Feld. */
.spiegel .rede .wer { color: var(--akzent); }
.spiegel .rede .wie { color: var(--leise); }
.spiegel .bedingt { color: var(--gedaempft); }

/* --- Das Regal: die Geschichten auf der Startseite --------------------- */

.regal { display: flex; flex-direction: column; gap: 2px; margin: 26px 0 30px; }
.geschichte { display: block; background: var(--blatt); padding: 20px 22px;
              border-left: 2px solid transparent; }
/* ⚠️ Beim Darüberfahren nur der Strich links — KEINE Unterstreichung. Die
   ganze Karte ist der Verweis, also unterstrich der Browser den ganzen Text:
   drei Zeilen mit Linien darunter, was aussieht wie ein Fehler und nichts
   sagt, was der Strich nicht schon sagt. */
.geschichte:hover { border-left-color: var(--akzent); }
.geschichte:hover * { text-decoration: none; }
.geschichte.offen { border-left-color: var(--tinte); }
.geschichte .kopf { display: flex; gap: 16px; align-items: baseline;
                    justify-content: space-between; }
.geschichte .name { font-size: 20px; color: var(--tinte); }
.geschichte .marke { font-family: var(--bau); font-size: 11px; color: var(--leise);
                     letter-spacing: 0.08em; text-transform: uppercase; }
.geschichte.offen .marke { color: var(--akzent); }
.geschichte .kurz { display: block; margin-top: 7px; font-size: 15px; line-height: 1.6;
                    color: var(--gedaempft); }
.geschichte .zahlen { display: block; margin-top: 11px; font-family: var(--bau);
                      font-size: 11.5px; color: var(--leise); }

/* --- Die Probe: das Geschriebene durchspielen ------------------------- */
/* ⚠️ Sieht bewusst nach Werkzeug aus. Wer hier über die Anmutung urteilt,
   urteilt über das falsche Ding — das Spiel ist Geometrie in Godot. */

.probe .hinweis { font-family: var(--bau); font-size: 11.5px; color: var(--leise);
                  letter-spacing: 0.06em; text-transform: uppercase; }
.probe h1 { margin-top: 6px; }
.probe .dazu { font-family: var(--bau); font-size: 12px; color: var(--leise);
               margin-top: -6px; }
.probe .geschehen { background: var(--blatt); padding: 18px 22px; margin: 22px 0; }
.probe .hier { margin: 26px 0; }
.probe .ding { margin-bottom: 30px; }
.probe .ding h3 { font-family: var(--bau); font-size: 11.5px; color: var(--leise);
                  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.probe .prosa { font-size: 17px; line-height: 1.75; margin: 0 0 10px; }
.probe .rede { font-size: 17px; line-height: 1.75; margin: 0 0 10px; }
.probe .rede .wer { font-family: var(--bau); font-size: 12px; letter-spacing: 0.06em;
                    text-transform: uppercase; margin-right: 8px; }
/* Die Klammer des Drehbuchs: wie etwas gesagt wird, nicht was. */
.probe .rede .wie { font-family: var(--bau); font-size: 12.5px; color: var(--leise); }
.probe .regie { font-family: var(--bau); font-size: 12px; color: var(--gedaempft);
                margin: 0 0 6px; }
.probe .regie .wort { color: var(--leise); letter-spacing: 0.08em;
                      text-transform: uppercase; margin-right: 8px; }
.probe .gelernt { font-family: var(--bau); font-size: 12px; color: var(--akzent);
                  margin: 6px 0 0; }
.probe .satz { display: flex; gap: 24px; justify-content: space-between;
               align-items: baseline; padding: 9px 0; border-top: 1px solid var(--linie);
               font-family: var(--bau); font-size: 14px; color: var(--akzent); }
.probe a.satz:hover { color: var(--tinte); }
.probe .satz.zu { color: var(--leise); }
.probe .satz .wohin { font-size: 11.5px; color: var(--leise); flex-shrink: 0; }
.probe .ende { font-family: var(--bau); font-size: 12px; color: var(--leise);
               border-top: 1px solid var(--linie); padding-top: 9px; }
.probe .verschlossen { font-family: var(--bau); font-size: 12.5px; color: var(--warnung); }
.probe .stand { font-family: var(--bau); font-size: 12px; color: var(--gedaempft);
                border-top: 1px solid var(--linie); padding-top: 12px; margin-top: 30px; }
.probe .stand .wort { color: var(--leise); letter-spacing: 0.08em;
                      text-transform: uppercase; margin-right: 10px; }

/* Zwischenzeilen in der Vorschlagsliste: wie nah eine Szene liegt — und was
   nicht dasteht. ⚠️ Beides ist Text, kein Knopf: Auswählen kann man es nicht. */
.vorschlagsliste .gruppe { font-family: var(--bau); font-size: 10.5px; color: var(--leise);
                           letter-spacing: 0.1em; text-transform: uppercase;
                           padding: 9px 14px 3px; }
.vorschlagsliste .gruppe:first-child { padding-top: 6px; }
.vorschlagsliste .mehr { font-family: var(--bau); font-size: 11.5px; color: var(--leise);
                         padding: 8px 14px 10px; border-top: 1px solid var(--linie); }

/* Ein Weg, dessen anderes Ende auf einer anderen Karte liegt: Der Ort steht
   dabei, sonst sähe die Kachel aus, als führte der Weg ins Nichts. */
.szene .wege .anderswo { color: var(--leise); }

/* Der Erreichbarkeitslauf in Zahlen — auf der Übersicht unter den Strängen. */
.lauf { border: 1px solid var(--linie); border-radius: 2px; padding: 4px 16px; }
.lauf .zeile {
  display: flex; gap: 16px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--linie);
}
.lauf .zeile:last-child { border-bottom: none; }
.lauf .was { flex: 0 0 130px; color: var(--gedaempft); font-size: 14px; }
.lauf .wert { font-size: 15px; }
.lauf .dazu { color: var(--gedaempft); font-size: 13px; margin-left: 6px; }
@media (max-width: 640px) {
  .lauf .zeile { display: block; }
  .lauf .was { display: block; margin-bottom: 2px; }
}

/* --- Sequenzen: die Phasen eines Akts ---------------------------------------
   ⚠️ Eine Sequenz ist eine Gliederung, kein Ort. Sie steht deshalb IM Akt und
   hat keine eigene Seite — man will sie sehen, nicht betreten. Und sie bekommt
   eine eigene, blasse Farbreihe: Die fünf Töne der Figuren gehören den Figuren,
   eine Sequenz in Korallenrosa sähe aus wie Luna. */
.akt .sequenzen { display: block; margin-top: 9px; }
.akt .sequenz {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--bau); font-size: 12px; color: var(--gedaempft);
  padding: 2px 0 2px 10px; position: relative;
}
.akt .sequenz::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; border-radius: 2px; background: var(--sequenz);
}
.akt .sequenz .wieviel { color: var(--leise); }

/* Auf der Karte: ein schmaler Streifen je Sequenz, oben an der Kachel. */
.sequenzstreifen { display: flex; gap: 2px; margin: -7px -9px 7px; }
.sequenzstreifen span { height: 3px; flex: 1; background: var(--sequenz); border-radius: 2px; }

/* --- Der Verlauf: die Sequenzen als Blöcke ---------------------------------
   ⚠️ Blöcke, durch Striche verbunden — A–B–C. Eine Sequenz ist eine
   Handlungseinheit, und Einheiten stehen nebeneinander und hängen zusammen;
   eine Liste untereinander sagte „das sind drei Dinge", ein Band sagt „so
   läuft es". Waagerecht, weil es die Zeit ist, die vergeht. */
.zeitstrahl {
  display: flex; align-items: stretch; gap: 0;
  overflow-x: auto; padding: 4px 0 16px; margin: 22px 0 6px;
}
.zeitstrahl .phase {
  flex: 1 0 200px; max-width: 280px;
  background: var(--blatt); border: 1px solid var(--linie); border-radius: 3px;
  border-top: 3px solid var(--sequenz); padding: 11px 13px 13px;
}
.zeitstrahl .verbinder {
  flex: 0 0 26px; align-self: center; height: 1px; background: var(--linie);
  position: relative;
}
.zeitstrahl .verbinder::after {
  content: ""; position: absolute; right: 0; top: -3px;
  border-left: 6px solid var(--linie);
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
}
.zeitstrahl .phase .kopf { display: flex; align-items: baseline; gap: 8px; }
.zeitstrahl .marke {
  font-family: var(--bau); font-size: 11px; letter-spacing: 0.1em;
  color: var(--blatt); background: var(--sequenz);
  border-radius: 2px; padding: 2px 6px;
}
.zeitstrahl .name { font-size: 16px; font-weight: 500; }
.zeitstrahl .wozu {
  margin: 8px 0 11px; font-size: 14px; line-height: 1.55; color: var(--gedaempft);
}
.zeitstrahl .szenen { display: flex; flex-direction: column; gap: 4px; }
.zeitstrahl .wieviel {
  font-family: var(--bau); font-size: 12px; color: var(--leise); margin-top: 10px;
}
.szenechip {
  display: inline-block; text-decoration: none; color: var(--tinte);
  font-size: 14px; padding: 5px 9px; border: 1px solid var(--linie);
  border-radius: 2px; background: var(--grund);
}
.szenechip:hover { border-color: var(--tinte); }
.szenechip .wieder { color: var(--leise); margin-left: 5px; font-size: 12px; }
.ohnephase {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 12px 0 4px; border-top: 1px dashed var(--linie);
}
.ohnephase .was {
  font-family: var(--bau); font-size: 12px; color: var(--gedaempft);
  text-transform: uppercase; letter-spacing: 0.1em; margin-right: 6px;
}

/* --- Ziehen in eine Phase --------------------------------------------------- */
.szenechip[draggable] { cursor: grab; }
.szenechip.unterwegs { opacity: 0.4; }
.phase.zielbereit, .ohnephase.zielbereit {
  background: var(--akzent-blass); border-radius: 2px;
  box-shadow: 0 0 0 2px var(--akzent) inset;
}

/* --- Die Sequenzleiste unter der Karte -------------------------------------
   ⚠️ Hervorheben, nicht filtern: Die übrigen Kacheln werden blass, sie
   verschwinden nicht. Eine Karte, die eine Sequenz herausschneidet, zeigt Wege
   ins Leere — Verbindungen laufen über Sequenzgrenzen. */
.sequenzleiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 14px 0 4px; font-size: 13px;
}
.sequenzleiste .was {
  font-family: var(--bau); font-size: 12px; color: var(--gedaempft);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.sequenzknopf {
  font: inherit; font-size: 13px; cursor: pointer; color: var(--tinte);
  background: none; border: 1px solid var(--linie); border-radius: 2px;
  padding: 4px 10px 4px 8px; border-left: 3px solid var(--sequenz);
}
.sequenzknopf:hover { border-color: var(--gedaempft); border-left-color: var(--sequenz); }
.sequenzknopf.gewaehlt { background: var(--akzent-blass); border-color: var(--akzent);
                         border-left-color: var(--sequenz); }
.szene.abseits { opacity: 0.22; transition: opacity 140ms ease; }
/* Zwischen der Überschrift und dem ersten Abschnitt darunter braucht es Luft:
   sonst stehen zwei Beschriftungen in derselben Schriftgröße übereinander. */
h2.mitluft { margin-bottom: 22px; }
/* Strang · Akt · Sequenz unter dem Namen einer Szene — dasselbe helle Grau wie
   die Kennzahlen, denn es ist dieselbe Sorte Auskunft. */
.kennzahlen.ort { margin-top: -4px; }
.kennzahlen.ort a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linie); }
.kennzahlen.ort a:hover { color: var(--akzent); border-bottom-color: var(--akzent); }


/* Eine Zeile im Regal: die Karte, und unten rechts IN ihr der Entfernen-Knopf.
   ⚠️ Absolut gesetzt, damit er die Breite der Karte nicht verändert — und
   unsichtbar, bis man über der Zeile steht. Ein Knopf, der immer sichtbar neben
   jeder Geschichte steht, wird irgendwann versehentlich getroffen; das ist bei
   dieser Wirkung eine zu teure Gelegenheit. */
.geschichtenzeile { position: relative; }
/* ⚠️ **Das Verstecken gehört der Zeile, nicht dem Knopf.** Derselbe Knopf steht
   auch in den Einstellungen, und dort steht er allein auf der Seite — es gibt
   keine Zeile, über der man stehen könnte. Hing das `opacity: 0` am Knopf, war
   er dort unsichtbar und obendrein absolut in eine Ecke gesetzt: dagestanden
   hat nur die Überschrift, der Knopf darunter war nicht zu treffen. Wer die
   Regeln wieder an die Klasse hängt, holt den Fehler zurück. */
.geschichtenzeile .geschichte-entfernen {
  position: absolute; right: 20px; bottom: 16px;
  font: inherit; font-family: var(--bau); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; background: none; border: 0; cursor: pointer;
  color: var(--leise); padding: 4px 6px; opacity: 0; transition: opacity 120ms ease;
}
.geschichtenzeile:hover .geschichte-entfernen,
.geschichtenzeile .geschichte-entfernen:focus { opacity: 1; }
.geschichte-entfernen:hover { color: var(--warnung); }

/* Der eine Satz über allem: worum es in dieser Szene geht. Größer als der
   Rest und ohne Kasten — er ist die Auskunft, nicht ein Feld unter vielen. */
.feld.kurz textarea, .feld.kurz .spiegel {
  font-size: 18px; line-height: 1.55; color: var(--tinte);
}
.feld.kurz { margin-bottom: 6px; }

/* Die Marke im Knopf — **derselbe gefüllte Block wie im Verlauf**. Sie stand
   hier zuerst nur als getönter Buchstabe: Die Sequenzfarben sind blass, und
   blass auf fast weiß bei elf Pixeln liest sich nicht, sondern ahnt sich. Eine
   Folge, die man erraten muss, ist keine. Beide Ansichten zeigen dieselbe
   Sache, also zeigen sie sie gleich. */
.sequenzknopf { display: inline-flex; align-items: baseline; gap: 7px; }
.sequenzknopf .marke {
  font-family: var(--bau); font-size: 10px; letter-spacing: 0.1em;
  color: var(--blatt); background: var(--sequenz);
  border-radius: 2px; padding: 2px 5px;
}

/* Zwischenüberschrift in einer Wahl: der Rang eines Gerüsts. Sie steht über
   den Knöpfen und ist selbst keiner — leise, klein, in Versalien wie jede
   andere Beschriftung der Werkstatt. */
.wahl .wahlgruppe {
  font-family: var(--bau); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--leise);
  margin: 12px 0 -2px;
}
.wahl button .zusatz {
  display: block; font-size: 12px; color: var(--leise); margin-top: 5px;
}
/* ⚠️ Der Einwand steht nur bei der getroffenen Wahl. Vier Absätze
   Kleingedrucktes übereinander liest niemand — einer, der gerade zutrifft,
   schon. */
.wahl button .einwand { display: none; }
.wahl button.gewaehlt .einwand {
  display: block; font-size: 12.5px; line-height: 1.5;
  color: var(--gedaempft); margin-top: 9px;
  padding-top: 9px; border-top: 1px solid var(--linie);
}

/* Die Formwahl in den Einstellungen: vier Zeilen, eine davon aktiv. Kein
   Auswahlfeld — man soll den Satz dazu lesen können, ohne zu klappen. */
.formen { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; }
.formwahl {
  display: block; cursor: pointer; padding: 11px 14px; border-radius: 2px;
  border: 1px solid transparent; border-left: 3px solid var(--linie);
}
.formwahl:hover { border-color: var(--linie); border-left-color: var(--gedaempft); }
.formwahl.gewaehlt { border-color: var(--akzent); border-left-color: var(--akzent);
                     background: var(--akzent-blass); }
.formwahl input { position: absolute; opacity: 0; pointer-events: none; }
.formwahl .titel { display: block; font-size: 14px; }
.formwahl .dazu { display: block; font-size: 12.5px; color: var(--gedaempft);
                  line-height: 1.5; margin-top: 3px; }

/* Ein Abschnitt, den die gewählte Form nicht anbietet, der aber Text enthält.
   ⚠️ Er wird GEZEIGT, nicht versteckt: Sonst wäre er für den Schreibenden fort,
   auch wenn er in der Datei steht. Gedämpft, damit klar ist, dass er gerade
   nicht dazugehört — aber lesbar. */
.feld.fremd { opacity: 0.62; }
.feld.fremd:focus-within { opacity: 1; }
.feld.fremd .was { color: var(--warnung); }

/* Unter dem Namen einer Szene im Verlauf: Dauer und Perspektive. Nur in den
   Prosaformen — im Spiel sagt die Karte, was hier zu sagen wäre. */
.szenechip .achse {
  display: block; font-family: var(--bau); font-size: 10.5px;
  letter-spacing: 0.06em; color: var(--leise); margin-top: 3px;
}

/* Das Regal der Gerüste — wie das Regal der Geschichten, nur ohne Öffnen-Marke. */
.geruestzeile {
  display: block; text-decoration: none; color: inherit; padding: 14px 18px;
  border-left: 3px solid var(--linie); border-radius: 0 2px 2px 0;
  background: var(--blatt); margin-bottom: 2px;
}
.geruestzeile:hover { border-left-color: var(--akzent); }
.geruestzeile.eigen { border-left-color: var(--gedaempft); }
.geruestzeile .kopf { display: flex; align-items: baseline; justify-content: space-between; }
.geruestzeile .name { font-size: 16px; }
.geruestzeile .marke {
  font-family: var(--bau); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--leise);
}
.geruestzeile .dazu {
  display: block; font-size: 13px; line-height: 1.55; color: var(--gedaempft);
  margin-top: 5px;
}
.geruestzeile .zahlen {
  display: block; font-family: var(--bau); font-size: 11.5px; color: var(--leise);
  margin-top: 8px;
}
/* Ein mitgeliefertes Gerüst wird gelesen, nicht geschrieben — kein Feld, kein
   Spiegel, kein Zeiger. Es sieht darum aus wie Text und nicht wie ein Kasten. */
.feld.gelesen { display: block; margin: 22px 0; }
.feld.gelesen .gelesen-text {
  white-space: pre-wrap; font-size: 14px; line-height: 1.62; color: var(--tinte);
  padding-left: 18px; border-left: 1px solid var(--linie);
}

/* Die Fußzeile: leise, einzeilig, ganz unten. ⚠️ Sie steht auf JEDER Seite —
   Impressum und Datenschutz sind Pflichtangaben und dürfen nicht davon
   abhängen, auf welcher Unterseite jemand landet.

   ⚠️ **Sie heißt `seitenfuss`, nicht `fuss`, und das ist der Punkt.** Sie hieß
   `fuss` — und `fuss` gab es schon zweimal: unten in jeder Szenenkachel auf der
   Karte und unten in jedem Dialog. Die Regel hier ist unverschachtelt, also
   griff sie auch dort: 64 Pixel Abstand nach oben, 40 Pixel seitlich, eine
   Trennlinie. Die Kacheln der Karte wurden dadurch dreimal so hoch wie ihr
   Inhalt und überlappten einander. Derselbe Fehler machte den Dialog zu hoch —
   auch dessen Knopfleiste heißt `fuss`. Ein Klassenname bedeutet EINE Sache;
   wer einen zweimal vergibt, verschiebt Dinge, die er nie angesehen hat.

   ⚠️ **Geprüft, ob sich das bewachen lässt: nein.** Die naheliegende Regel wäre
   „kein unverschachtelter Klassenwähler darf Abstände setzen, wenn dieselbe
   Klasse anderswo verschachtelt vorkommt". Sie schlägt in dieser Datei
   zehnmal an, und neunmal zu Recht so: `.knopf`, `.spalte`, `.feld` sind
   absichtlich allgemein. Ein Wächter, der neun falsche Alarme je echtem Fund
   gibt, wird nach einer Woche überlesen — dann ist er schlechter als keiner.
   Diese Klasse Fehler findet man beim Ansehen, nicht beim Prüfen. */
.seitenfuss {
  display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline;
  margin: 64px 0 0; padding: 18px 40px 26px;
  border-top: 1px solid var(--linie);
  font-family: var(--bau); font-size: 11.5px; color: var(--leise);
}
.seitenfuss a { color: var(--leise); text-decoration: none; }
.seitenfuss a:hover { color: var(--tinte); text-decoration: underline; }
.seitenfuss .beta { margin-left: auto; letter-spacing: 0.06em; }
body.anmeldung .seitenfuss { justify-content: center; margin-top: 40px; border-top: 0;
                       padding: 0 20px; max-width: 560px; text-align: center; }
body.anmeldung .seitenfuss .beta { margin-left: 0; }

/* ⚠️ **Nichts rechtsbündig am Telefon** (28.08.2026, Inhaber-Entscheidung).
   Der Beta-Vermerk wird von `margin-left: auto` an den rechten Rand gedrückt
   und landet beim Umbruch dort allein — eine Zeile, die an der einen Kante
   klebt, während alles darüber an der anderen steht. Am Schreibtisch ist das
   die rechte Ecke einer breiten Leiste und richtig; auf 375 Pixeln ist es
   bloss schief.

   ⚠️ **Und diese Regel steht HIER, nicht im grossen Telefonblock weiter oben.**
   Dort stand sie zuerst und tat nichts: Die Fusszeile wird achthundert Zeilen
   später beschrieben, gleiche Spezifität, und bei gleicher Spezifität gewinnt
   die spätere Regel. Eine Ausnahme gehört neben das, wovon sie die Ausnahme
   ist — sonst sucht man den Fehler im Browser statt in der Reihenfolge. */
@media (max-width: 760px) {
  .seitenfuss { justify-content: center; text-align: center;
                padding: 16px 18px 22px; gap: 4px 14px; }
  .seitenfuss .beta { margin-left: 0; }
}

/* Registrieren: Zustimmung und Umschalter unter dem Formular. */
.anmeldung .zustimmung {
  display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 2px;
  font-size: 12.5px; line-height: 1.5; color: var(--gedaempft); text-align: left;
}
.anmeldung .zustimmung input { width: auto; margin-top: 2px; }
.anmeldung .wechsel { font-size: 12.5px; color: var(--gedaempft); margin-top: 14px; }

/* Die Nutzungsbedingungen als nummerierte Liste — kurz gehalten, damit man sie
   wirklich liest. */
.regeln { padding-left: 22px; margin: 14px 0 22px; }
.regeln li { margin-bottom: 11px; line-height: 1.62; }

/* ==========================================================================
   Klickbare Flächen — die eine Regel (27.08.2026, Inhaber-Entscheidung)
   ==========================================================================
   ⚠️ **Eine Fläche zeigt Klickbarkeit durch ihre Umrandung, nie durch eine
   Unterstreichung.** Schwarze Umrandung beim Darüberfahren, sonst nichts.

   Der Grund, warum das eine eigene Regel braucht und nicht bei jedem Element
   einzeln steht: `a:hover { text-decoration: underline }` gilt für JEDEN
   Verweis. Sobald ein Verweis eine Fläche wird — eine Kachel, eine Zeile im
   Regal, ein Knopf —, unterstreicht er plötzlich seinen ganzen Inhalt: bei
   einer Gerüstzeile waren das fünf Zeilen Prosa. Es fiel immer erst auf, wenn
   man mit der Maus darüberkam.

   ⚠️ Die Liste ist die Wahrheit. Wer eine neue klickbare Fläche baut, trägt
   sie hier ein — sonst unterstreicht sie, und niemand sieht es beim Bauen.
   Ein einzelner Verweis IM Fließtext unterstreicht weiter; dort ist die
   Unterstreichung richtig, weil es keine Fläche gibt, die es sonst zeigen
   könnte. */
.knopf,
.szenechip,
.geruestzeile,
.geschichte,
.szenekarte,
.akt,
.formwahl,
.sequenzknopf,
.wahl button,
.merkmal,
.person,
.werkzeug,
.eintrag,
.satz,
.ziel,
.suchtreffer,
.werkzeile,
.bildkachel,
.stufe .kopf a {
  text-decoration: none;
}
/* Und die Umrandung, die es statt dessen sagt. */
.szenechip:hover, .geruestzeile:hover, .szenekarte:hover, .akt:hover {
  border-color: var(--tinte);
}
/* ⚠️ Die farbige Kante links bleibt farbig — sie sagt etwas anderes
   (welche Sequenz, welcher Rang), und sie soll beim Darüberfahren nicht
   ihre Bedeutung verlieren. */
.geruestzeile:hover { border-left-color: var(--tinte); }

/* Einladungen auf der Kontoseite — nur der Inhaber sieht sie. */
.einladen { display: flex; gap: 10px; margin: 0 0 16px; flex-wrap: wrap; }
.einladen input { flex: 1; min-width: 240px; font: inherit; font-family: var(--bau);
                  font-size: 13px; padding: 9px 12px; color: var(--tinte);
                  border: 1px solid var(--linie); border-radius: 2px; background: var(--blatt); }
.einladungen { list-style: none; padding: 0; margin: 0; }
.einladung { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
             padding: 11px 0; border-top: 1px solid var(--linie); }
/* ⚠️ Der Code steht in der Schreibmaschinenschrift und wird ABGETIPPT — deshalb
   auswählbar breit und nicht umbrechend. Wer ihn vorliest oder überträgt, darf
   sich nicht an einem Zeilenumbruch verzählen. */
.einladung code { font-family: var(--bau); font-size: 14px; color: var(--tinte);
                  white-space: nowrap; }
.einladung .notiz { color: var(--gedaempft); font-size: 14px; }
.einladung .wann { margin-left: auto; font-family: var(--bau); font-size: 11.5px;
                   color: var(--leise); white-space: nowrap; }
.einladung form { margin: 0; }
/* Verbrauchte bleiben stehen — sie sind das Verzeichnis. Aber sie treten zurück. */
.einladung.verbraucht code, .einladung.verbraucht .notiz { color: var(--leise); }

/* Die Kontoseite: schmale Formulare, untereinander. */
.konto { display: flex; flex-direction: column; gap: 8px; max-width: 420px; margin: 4px 0 8px; }
.konto input[type="password"] {
  font: inherit; font-family: var(--bau); font-size: 13px; padding: 9px 12px;
  border: 1px solid var(--linie); border-radius: 2px; background: var(--blatt);
}
.konto input[type="password"]:focus { outline: 0; border-color: var(--akzent); }
.konto .knopf { align-self: flex-start; }
/* ⚠️ Rot erst beim Darüberfahren, nicht von vornherein: Ein Knopf, der immer
   rot dasteht, wird zur Tapete — und dieser hier soll im Moment des Klickens
   auffallen, nicht die ganze Zeit. */
.warnknopf:hover { border-color: var(--warnung); color: var(--warnung); }

/* ⚠️ **Die Kontoseite trägt ZWEI Schriften, klar verteilt** — und das musste
   aufgeräumt werden: Sie war in Etappen gewachsen und zeigte am Ende die
   Leseschrift, die Bauschrift, Fettdruck mitten im Satz und zweimal ein
   Warnzeichen im Fließtext. Ein Warnzeichen ist eine Notiz von mir an mich;
   im Text, den jemand liest, hat es nichts verloren.

   Die Verteilung: die Bauschrift benennt (Beschriftung links in der Tafel,
   die Zwischenüberschriften), die Leseschrift sagt (Werte, Erläuterungen,
   Warnungen). Betont wird durch die Stelle, nicht durch Fettdruck. */
.tafel td.was { font-family: var(--bau); font-size: 12.5px; color: var(--gedaempft); }
.erlaeuterung { color: var(--gedaempft); font-size: 14.5px; line-height: 1.68;
                max-width: 560px; margin: 6px 0 14px; }

/* Eine Warnung, die man nicht überliest — vor dem Löschen eines Kontos.
   Sie trägt ihr Gewicht in der roten Kante, nicht im Fettdruck. */
.warnung-kasten {
  border-left: 3px solid var(--warnung); background: var(--blatt);
  padding: 13px 16px; margin: 6px 0 14px; font-size: 14.5px; line-height: 1.68;
  max-width: 560px;
}

/* Die Startseite der Toolbox — dieselbe Bauform wie das Regal der
   Geschichten, damit man nicht zwei Sprachen lernt. */
body.sammlungsseite main { max-width: 720px; margin: 0 auto; padding: 30px 40px 0; }
.werkzeuge-liste { display: flex; flex-direction: column; gap: 2px; margin: 20px 0 26px; }
.werkzeug {
  display: block; text-decoration: none; color: inherit; padding: 18px 20px;
  /* ⚠️ 2 Pixel wie jede andere Zeile, die man anklickt — das Regal der
     Geschichten, die Stufen im Verlauf, die Personenliste. 3 Pixel tragen
     hier nichts vor, sie fallen nur auf. */
  border-left: 2px solid var(--linie); background: var(--blatt); border-radius: 0 2px 2px 0;
}
.werkzeug:hover { border-left-color: var(--akzent); }
.werkzeug .name { display: block; font-size: 19px; }
.werkzeug .dazu { display: block; font-size: 13.5px; color: var(--gedaempft);
                  line-height: 1.55; margin-top: 6px; }

/* Der Kopf der Startseite. ⚠️ Er nimmt dieselbe Bauform wie jede andere
   Kopfzeile — Zeichen, Name, Wege rechts —, damit die Vordertür nicht aussieht
   wie ein anderes Haus. Nur ist die Marke hier KEIN Verweis: Man steht schon
   darauf, und ein Link auf die eigene Seite ist eine Tür, die auf sich selbst
   zeigt. Deshalb ein `span`, nicht ein `a`. */
/* ⚠️ Und er wiederholt NICHTS davon. Hier stand einmal die ganze Geometrie noch
   einmal — Anzeige, Abstände, Schrift —, wortgleich mit `header` oben. Wirkung:
   Auf dem Telefon blieb der Kopf bei 40 Pixel Rand, weil die Klasse das
   Element-Auswahlmuster schlug und die Telefonregel ins Leere lief. Zwei
   Stellen für dieselbe Sache, und schon lief es auseinander (Invariante 5). */
/* Grösser als in der Brotkrume: Hier IST es das Zeichen der Seite, nicht die
   Begleitung eines Namens im Vorbeigehen. */
.appzeichen.gross { width: 20px; height: 20px; border-radius: 4px;
                    vertical-align: -3px; margin-right: 9px; }
.hauswege { margin-left: auto; display: flex; gap: 18px; }
.hauswege a { color: var(--leise); }
.hauswege a:hover { color: var(--akzent); }

/* Das „Über" auf der Startseite. Es steht unter den Werkzeugen, nicht darüber:
   Wer hierherkommt, will meistens arbeiten und nicht lesen. */
.ueber { margin: 46px 0 0; padding-top: 28px; border-top: 1px solid var(--linie); }
/* ⚠️ Dieselben hellgrauen Grossbuchstaben wie in den Rechtstexten — dort war es
   eine Inhaber-Entscheidung, und zwei Sorten Zwischenüberschrift im selben Haus
   wären genau die Doppelung, die diese Werkstatt sonst beseitigt. */
.ueber h2 { font-family: var(--bau); font-size: 11px; letter-spacing: 0.16em;
            text-transform: uppercase; color: var(--leise); font-weight: 400;
            margin: 28px 0 10px; }
.ueber h2:first-child { margin-top: 0; }
.ueber p { margin: 0 0 12px; line-height: 1.7; color: var(--tinte); }

/* Rechtstexte: eine Schrift, Überschriften und Absätze, sonst nichts.
   ⚠️ Keine Auszeichnung im Fließtext — das ist kein Geschmack, sondern der
   Hausstil der Zeichenfabrik, und eine Seite, die anders aussieht als die
   verlinkte Erklärung derselben Firma, liest sich wie von zwei Häusern. */
body .rechtstext { max-width: 680px; margin: 0 auto; padding: 56px 40px 0; }
.rechtstext h1 { margin-bottom: 26px; }
/* ⚠️ Die Zwischenüberschriften brauchen eine EIGENE Schrift. Sie standen in
   derselben wie der Fließtext, eine halbe Stufe größer — damit gliederten sie
   nichts: Wer eine Rechtsseite liest, sucht einen Abschnitt, und dafür muss man
   ihn im Überfliegen finden. Die Bauschrift in gesperrten Versalien ist im Haus
   ohnehin die Marke für „hier fängt etwas Neues an". */
.rechtstext h2 { font-family: var(--bau); font-size: 11.5px; letter-spacing: 0.16em;
                 text-transform: uppercase; color: var(--leise); font-weight: 400;
                 margin: 34px 0 10px; }
.rechtstext p { font-size: 14.5px; line-height: 1.68; margin: 0 0 12px;
                color: var(--tinte); }
.rechtstext .stand { font-family: var(--bau); font-size: 12px; color: var(--leise);
                     margin-top: 26px; }

/* --- Klio: Werkverzeichnis -------------------------------------------- */

.werkliste { display: flex; flex-direction: column; margin: 14px 0 22px; }
/* Dieselbe Bauform wie das Regal der Geschichten — man lernt nicht zwei. */
.werkzeile { display: flex; align-items: baseline; gap: 16px; padding: 12px 0;
             border-top: 1px solid var(--linie); color: var(--tinte); }
.werkliste .werkzeile:first-child { border-top: none; }
.werkzeile:hover { background: var(--notiz); }
.wtitel { font-size: 16px; }
.wbei { font-family: var(--bau); font-size: 12px; color: var(--gedaempft); }
/* ⚠️ Rechts steht, wo es JETZT ist — die Frage, für die es Klio gibt. */
.wort { margin-left: auto; font-family: var(--bau); font-size: 11.5px;
        color: var(--leise); white-space: nowrap; }

.wfelder { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 26px; }
.wfeld { display: flex; align-items: baseline; gap: 14px; }
.wfeld label { font-family: var(--bau); font-size: 11.5px; color: var(--leise);
               width: 90px; flex-shrink: 0; }
.wfeld input { flex: 1; font: inherit; font-size: 15px; color: var(--tinte);
               border: none; border-bottom: 1px solid var(--linie);
               background: none; padding: 4px 0; }
.wfeld input:focus { outline: none; border-bottom-color: var(--akzent); }

.chronik { list-style: none; padding: 0; margin: 0 0 14px; }
.chronik li { display: flex; gap: 16px; padding: 7px 0;
              border-top: 1px solid var(--linie); }
.chronik li:first-child { border-top: none; }
.cdatum { font-family: var(--bau); font-size: 12px; color: var(--leise);
          width: 90px; flex-shrink: 0; }
.csatz { font-size: 15px; line-height: 1.5; }
.chronikzeile { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.chronikzeile input { font: inherit; font-family: var(--bau); font-size: 13px;
                      padding: 8px 11px; color: var(--tinte);
                      border: 1px solid var(--linie); border-radius: 2px;
                      background: var(--blatt); }
.chronikzeile input[name="datum"] { width: 110px; }
.chronikzeile input[name="satz"] { flex: 1; min-width: 200px; }
.krume a { font-family: var(--bau); color: var(--gedaempft); }

/* Abbildungen eines Werks. */
.bilder { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 18px; }
.bildkachel { display: block; width: 240px; color: var(--gedaempft); }
/* ⚠️ `height: auto` ist Pflicht, wenn am Bild `width`/`height` stehen — sonst
   wird das Attribut zur echten Höhe und das Bild verzerrt. */
.bildkachel img { width: 100%; height: auto; display: block; border-radius: 2px;
                  background: var(--notiz); }
.bildkachel span { display: block; margin-top: 6px; font-family: var(--bau);
                   font-size: 11.5px; line-height: 1.5; }
.bildform { display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
            margin-bottom: 24px; }
.bildform input[type="text"] { flex: 1; min-width: 200px; font: inherit;
                               font-family: var(--bau); font-size: 13px; padding: 8px 11px;
                               color: var(--tinte); border: 1px solid var(--linie);
                               border-radius: 2px; background: var(--blatt); }
.bildform input[type="file"] { font-family: var(--bau); font-size: 12.5px;
                               color: var(--gedaempft); }

/* Der Prüfbericht von Klio. */
.befunde { list-style: none; padding: 0; margin: 0 0 20px; }
.befunde li { padding: 9px 0 9px 16px; border-left: 2px solid var(--linie);
              line-height: 1.6; margin-bottom: 2px; }
/* ⚠️ Ein Widerspruch ist rot, eine Auskunft nicht. Der Unterschied muss man
   sehen, ohne zu lesen — sonst liest man beides gleich aufmerksam, also keines. */
.befunde .klage { border-left-color: var(--warnung); }
.befunde .hinweis { border-left-color: var(--leise); color: var(--gedaempft); }

/* Die Auflage eines Blatts: ein Feld je Exemplar. */
.auflage { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 8px; }
.exemplar { display: inline-flex; align-items: center; justify-content: center;
            width: 30px; height: 26px; border-radius: 2px; font-family: var(--bau);
            font-size: 11.5px; border: 1px solid var(--linie); }
/* ⚠️ Drei Zustände, drei Erscheinungen — und keiner davon ist rot. Ein
   vergebenes Exemplar ist kein Mangel, sondern der Zweck einer Auflage. */
.exemplar.frei { color: var(--gedaempft); background: var(--blatt); }
.exemplar.unterwegs { color: var(--tinte); border-color: var(--akzent);
                      background: var(--akzent-blass); }
.exemplar.weg { color: var(--leise); background: var(--notiz); border-color: var(--notiz); }

/* --- Peitho: Mappen --------------------------------------------------- */

.anschreiben { width: 100%; min-height: 120px; font: inherit; font-family: var(--schreib);
               font-size: 15px; line-height: 1.7; color: var(--tinte); padding: 12px 14px;
               border: 1px solid var(--linie); border-radius: 2px; background: var(--blatt);
               resize: vertical; margin-bottom: 22px; }
.anschreiben:focus { outline: none; border-color: var(--akzent); }

.mappenliste { list-style: none; counter-reset: mappe; padding: 0; margin: 12px 0 22px; }
.mappenwerk { display: flex; align-items: center; gap: 14px; padding: 10px 0;
              border-top: 1px solid var(--linie); }
.mappenliste .mappenwerk:first-child { border-top: none; }
.mappenwerk img { width: 90px; height: auto; border-radius: 2px; background: var(--notiz);
                  flex-shrink: 0; }
/* Ein Platzhalter in derselben Grösse — sonst springt die Liste, sobald ein
   Werk ein Bild hat und das nächste nicht. */
.mappenwerk .kein { width: 90px; height: 68px; border-radius: 2px;
                    background: var(--notiz); flex-shrink: 0; }
.minfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.minfo input { font: inherit; font-size: 13.5px; color: var(--gedaempft);
               border: none; border-bottom: 1px solid var(--linie);
               background: none; padding: 3px 0; }
.minfo input:focus { outline: none; border-bottom-color: var(--akzent); }
.mwege { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.mwege button { font: inherit; font-family: var(--bau); font-size: 12px; cursor: pointer;
                background: var(--blatt); color: var(--gedaempft);
                border: 1px solid var(--linie); border-radius: 2px; padding: 5px 9px; }
.mwege button:hover { border-color: var(--akzent); color: var(--akzent); }
/* ⚠️ Ein fehlendes Werk ist keine Panik — aber man muss es sehen, sonst fehlt
   im PDF eine Seite und niemand weiss warum. */
.mappenwerk.fehlt .wtitel { color: var(--warnung); font-family: var(--bau); font-size: 13px; }

.dazuliste { list-style: none; padding: 0; margin: 10px 0 20px;
             display: flex; flex-wrap: wrap; gap: 8px; }
.dazuliste li { display: flex; align-items: baseline; gap: 7px;
                border: 1px solid var(--linie); border-radius: 2px; padding: 6px 10px;
                background: var(--blatt); }
.dazuliste button { font: inherit; font-size: 14px; cursor: pointer; background: none;
                    border: none; padding: 0; color: var(--tinte); }
.dazuliste li:hover { border-color: var(--akzent); }