/* 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");
}

/* ⚠️ **`hidden` muss staerker sein als jede Klasse.** Die Regel des Browsers
   dafuer ist `[hidden] { display: none }` — ein Attributwaehler, den jede
   Klassenregel mit `display` schlaegt. Am 29.08.2026 stand der Knopf „Beenden"
   der Fokusleiste dauerhaft auf dem Schirm, obwohl das Attribut gesetzt war
   und `element.hidden` `true` meldete: `.nebenknopf` setzt `display: block`,
   und damit war der Knopf im Sinne des Dokuments versteckt und im Sinne des
   Auges nicht. **Was man am Zustand ablesen kann, muss man auch sehen.**
   Steht hier ganz oben, damit es fuer jede Klasse gilt, die noch kommt. */
[hidden] { display: none !important; }

: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 ------------------------------------------------------- */

/* ⚠️ **Die Kopfzeile ist auf JEDER Seite gleich hoch — festgesetzt, nicht
   ausgerechnet.** Sonst bestimmt der höchste Gegenstand darin die Höhe, und der
   ist je Seite ein anderer: Auf der Startseite ist das Plattformzeichen 20
   Pixel gross (dort IST es das Zeichen der Seite), in der Brotkrume nur 15
   (dort begleitet es einen Namen). Mit `align-items: center` sass „Konto ·
   Abmelden“ damit auf der Startseite ein paar Pixel tiefer als in einer App —
   beim Wechsel sprang die Zeile, und das las sich, als würde die Schrift
   grösser.

   Die 24 Pixel sind nicht geraten: Das grösste Stück in dieser Zeile ist das
   Plattformzeichen mit 20 Pixeln plus seinen 3 Pixeln Grundlinienversatz. Wer
   dort je etwas Höheres hineinstellt, muss diese Zahl mitziehen — sonst wächst
   die Zeile wieder je nach Seite.

   ⚠️ Es ist dieselbe Regel wie bei der reservierten Breite von „Gespeichert“,
   nur senkrecht: Kein Mass, das sich ändert, während man dasselbe ansieht
   (CLAUDE.md, Invariante 6).

   ⚠️ **26, nicht 24 — die Lupe war der letzte Pixel.** Beim ersten Anlauf
   standen hier 24 Pixel, gerechnet auf das Plattformzeichen. Übersehen war der
   Suchknopf: 18 Pixel Zeichen plus zweimal 4 Pixel Polsterung sind 26. In
   Ariadne wuchs die Zeile darum auf 26, überall sonst blieb sie bei 24 — und
   „Konto“ sass um genau einen Pixel verschoben. Das Mass wird jetzt vom
   grössten Stück genommen, und die rechte Gruppe bekommt es fest, damit ein
   künftiges Stück die Zeile nicht wieder wachsen lässt. */
header {
  display: flex; align-items: center; gap: 26px;
  padding: 18px 40px; min-height: 62px; flex-wrap: wrap;
  font-family: var(--bau); font-size: 13px;
}
header .kopfrechts { height: 26px; }
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; }
/* ⚠️ **Hier stand `header.schmal` mit `padding-bottom: 0`** — die Kopfzeile der
   Rechtstexte war unten 18 Pixel flacher als die überall sonst. Seit es EINE
   Kopfzeile gibt (29.08.2026), gibt es auch nur noch eine Geometrie. Was sich
   auf jenen Seiten unterscheidet, ist der Inhalt: kein Menü, kein Konto — und
   das entscheidet die Funktion, nicht eine zweite Regel im Stilblatt. */
/* 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. */
/* ⚠️ **Lupe und Speicheranzeige gehören zusammen und nach rechts** — in JEDER
   App (28.08.2026, Inhaber-Befund). Vorher hing das `margin-left: auto` an der
   Lupe; wo es keine gibt — Klio, Peitho —, blieb „Gespeichert“ mitten in der
   Zeile neben dem Menü stehen. Der Rand gehört an die GRUPPE, nicht an eines
   ihrer Glieder. */
header .kopfrechts { margin-left: auto; display: flex; align-items: center;
                     gap: 18px; flex-shrink: 0; }
header .suchknopf {
  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. */
/* ⚠️ **Gedeckelt bei 470 px** (Inhaber-Befund, 29.08.2026: „muss hier wirklich
   so eine grosse Luecke klaffen?"). Der Zweck der Luft ist, dass die zuletzt
   geschriebene Zeile nach oben rutschen kann statt am unteren Rand zu kleben.
   Dafuer braucht es ungefaehr eine halbe Fensterhoehe — aber „ungefaehr" hat
   nach oben keine Grenze: Auf einem hohen Schirm wurden daraus siebenhundert
   Pixel Nichts zwischen Text und Fusszeile, und das sieht nicht nach Ruhe aus,
   sondern nach einem Fehler.
   Auf gewoehnlichen Schirmen (bis ~940 px hoch) aendert der Deckel nichts —
   dort sind 50 vh ohnehin weniger. Er greift nur da, wo es zu viel wurde. */
body:has(.schriftfeld) main { padding-bottom: min(50vh, 470px); }

/* --- 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%; }
  /* ⚠️ **Auf dem Telefon nimmt die Gruppe die ganze Zeile.** Sonst stand die
     Lupe irgendwo in der Mitte — davor der Rand der Gruppe, dahinter die 92
     Pixel, die der Zustand freihält. Über die ganze Breite hat jedes Stück
     seinen Platz: Lupe links, Konto und Abmelden rechts, dazwischen der
     Zustand, der die Luft aufnimmt (`flex: 1`) statt sie zu reservieren.
     ⚠️ Und weil er sie AUFNIMMT statt sie zu reservieren, verschiebt
     „Gespeichert“ nichts — dieselbe Zusage wie am Schreibtisch, mit einem
     anderen Mittel (Invariante 6). */
  header .kopfrechts { width: 100%; margin-left: 0; }
  header .zustand { flex: 1; min-width: 0; }
  /* 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; }
/* ⚠️ **Der Dialog behält seine eigene Fassung, und das ist Absicht:** Dort ist
   der „Nebenknopf“ keine kleine Nebentaste, sondern eine Wahl über die ganze
   Breite, gestrichelt umrandet. Ein bewusster Sonderfall, nicht ein vergessener
   — deshalb steht er hier mit Begründung und nicht bloss da. */
.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; }
/* ⚠️ **In der Hilfe hat die Erläuterung dieselbe Breite wie der Text daneben.**
   Ihre 560 px sind für Dialoge und Formulare gedacht, wo sie neben kurzen
   Feldern steht; in der Hilfespalte brach sie mitten im Satz um, während
   rechts daneben eine Handbreit leer blieb (Inhaber-Befund, 29.08.2026). Ein
   Absatz, der ohne Grund früher umbricht als sein Nachbar, sieht nicht nach
   Absicht aus, sondern nach einem Fehler — und ist hier auch einer. */
.hilfeseite .erlaeuterung { max-width: none; }
.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); }

/* ⚠️ **Der Nebenknopf — EINE Regel für elf Stellen** (29.08.2026). Vorher war
   `.nebenknopf` dreimal beschrieben: einmal unter `.dialog`, einmal unter
   `.bildkasten`, und für alles Übrige gar nicht. Wer die Klasse an einer
   vierten Stelle verwendete, bekam den Knopf des Browsers — unter „Vita“ stand
   darum ein blauer Systemknopf mitten im Haus (Inhaber-Befund).

   Genau die Sorte Doppelung, gegen die Invariante 5 steht, nur besonders
   heimtückisch: Ein Klassenname, der an manchen Stellen wirkt und an anderen
   nicht, sieht beim Schreiben richtig aus. */
.nebenknopf {
  font: inherit; font-family: var(--bau); font-size: 11.5px; cursor: pointer;
  background: var(--blatt); color: var(--gedaempft);
  border: 1px solid var(--linie); border-radius: 2px; padding: 4px 9px;
  text-transform: none; letter-spacing: 0; display: inline-block;
}
.nebenknopf:hover { border-color: var(--akzent); color: var(--akzent); }

/* ⚠️ Und EINE Regel für die Auswahlfelder. Sie standen nur unter `.dialog`;
   überall sonst zeichnete der Browser sein eigenes. */
/* ⚠️ **`appearance: none`, sonst malt der Browser weiter sein eigenes.**
   Rahmen, Farbe und Schrift zu setzen genügt bei einem `select` nicht: Safari
   und Chrome zeichnen ihr Bedienteil darüber, samt eigenem Pfeil und teils
   eigenem Grund. Genau das war auf dem Bild des Inhabers zu sehen — die Regel
   griff, und es sah trotzdem nach System aus.

   Der Pfeil kommt darum von uns, als eingebettetes SVG. ⚠️ Eingebettet und
   nicht als Datei: Ein Pfeil, der nachgeladen wird, fehlt im ersten Bild. */
select.nebenwahl {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-family: var(--bau); font-size: 11.5px;
  background: var(--blatt); color: var(--tinte);
  border: 1px solid var(--linie); border-radius: 2px;
  padding: 4px 26px 4px 9px;
  text-transform: none; letter-spacing: 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E6E77' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 9px 6px;
}
select.nebenwahl:focus { border-color: var(--akzent); outline: none; }
.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;
}
/* ⚠️ **Der Strich, der sagt, wohin es faellt.** Er ist zwei Pixel hoch und
   liegt zwischen den Karten — nicht auf einer. Ein Rahmen um die Karte
   darunter hiesse „hier hinein", und das ist eine andere Aussage als
   „hier davor". Bei sehr vielen Szenen ist genau das der Unterschied
   zwischen einem Zug und zwei. */
/* Ankreuzfelder im Dialog. ⚠️ Die ganze Zeile ist die Schaltflaeche, nicht
   nur das Kaestchen — ein 13 px grosses Quadrat zu treffen ist eine Uebung,
   kein Bedienen. */
/* Was diese Geschichte ist, in einer Zeile — direkt unter dem Titel.
   ⚠️ Leise gesetzt: Sie ist Auskunft, keine Ansage. Wer sie nicht braucht,
   soll sie ueberlesen koennen. */
/* Der Text auf einer Sequenzkarte. ⚠️ **Fuenf Zeilen, dann Schluss**
   (Inhaber-Entscheidung, 29.08.2026): Vier Karten nebeneinander sind nur
   vergleichbar, solange sie aehnlich hoch sind — eine, die auf das Dreifache
   waechst, macht aus dem Verlauf eine Textwueste. Der Rest ist nicht fort, er
   steht unten im Wortlaut. */
.phase .wozu { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
               overflow: hidden; }
/* ⚠️ **Der Unterschied muss zu SEHEN sein.** Der Satz aus dem Muster steht
   kursiv und gedaempft — ein Vorschlag, der auf Ersatz wartet. Was du selbst
   geschrieben hast, steht aufrecht in der Lesefarbe. Ohne diesen Unterschied
   haelt man den fremden Satz fuer den eigenen und schreibt ihn nie um. */
.phase .wozu.geruest { font-style: italic; color: var(--leise); }

/* Die Auskunft neben dem Namen eines Feldes — wie es gemeint ist.
   ⚠️ Klein und leise: Wer es weiss, ueberliest es; wer es nicht weiss, findet
   es dort, wo er hinsieht, bevor er tippt. */
.feldwie { font-family: var(--bau); font-size: 11px; color: var(--leise);
           letter-spacing: 0.02em; margin-left: 14px; font-weight: 400;
           text-transform: none; }

.steckzeile { font-family: var(--bau); font-size: 12.5px; color: var(--leise);
              letter-spacing: 0.02em; margin: -6px 0 18px; }

.haken { border: 0; margin: 14px 0 0; padding: 0; }
.haken legend { font-family: var(--bau); font-size: 11px; letter-spacing: 0.14em;
                text-transform: uppercase; color: var(--leise); padding: 0 0 6px; }
.haken label { display: flex; align-items: center; gap: 10px; cursor: pointer;
               padding: 7px 10px; border: 1px solid var(--linie); border-radius: 2px;
               margin-bottom: 6px; font-family: var(--bau); font-size: 13px;
               color: var(--tinte); background: var(--blatt); }
.haken label:hover { border-color: var(--akzent); }
/* ⚠️ **Die Breite muss ausdrücklich zurückgenommen werden.** Im Dialog gilt
   `input { width: 100% }` für die Eingabefelder — ein Ankreuzkästchen erbte
   das und war 376 px breit, worauf die Beschriftung rechts aus dem Kasten
   lief. `flex: none` machte es schlimmer: Es hielt genau diese Breite fest.
   Eine Regel, die für „Eingabefeld" gedacht war, trifft eben auch das
   Kästchen — dasselbe Element, ein anderes Wesen. */
.haken input { accent-color: var(--akzent); margin: 0; flex: none;
               width: 15px; height: 15px; min-width: 0; }
.haken input:checked + span { color: var(--akzent); }

.einfuegemarke { height: 2px; margin: 2px 0; background: var(--akzent);
                 border-radius: 1px; pointer-events: none; }

.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,
.wapp,
.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). */
/* ⚠️ **Hier stand `.appzeichen.gross` mit 20 Pixeln** — das Zeichen der
   Startseite. Es ist fort, seit es eine Kopfzeile gibt: Genau dieser
   Unterschied zu den 15 Pixeln der Brotkrume war die Ursache dafür, dass die
   rechte Gruppe beim Seitenwechsel sprang. Ein Zeichen, das je nach Seite eine
   andere Grösse hat, ist ein Mass, das sich ändert. */
/* ⚠️ Konto und Abmelden stehen in JEDER App an derselben Stelle — sie kommen
   aus `kopfrechts()`, das auch die Startseite baut. Der Kasten selbst wird
   oben unter `header .kopfrechts` gesetzt; hier steht nur, wie die beiden
   Verweise aussehen. */
.hausweg { color: var(--leise); flex-shrink: 0; }
.hausweg: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: Portfolios ----------------------------------------------- */

.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; }
/* ⚠️ Und hier die dritte Fassung. Die Pfeiltasten tragen jetzt selbst
   `nebenknopf`, statt sich auf ihre Umgebung zu verlassen. */
/* ⚠️ 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); }

/* ⚠️ **Die Druckstile sind nach `satz.css` umgezogen** (29.08.2026). Sie
   standen hier, weil Peithos Druckansicht die erste war; seit es Vita,
   Werkverzeichnis-Katalog und Manuskriptsatz gibt, ist das der falsche Ort.
   `werkstatt.css` ist die App, `satz.css` sind die Dokumente — und die
   Trennung ist keine Ordnungsliebe: Solange beides hier lag, faerbten die
   Regeln der App in die Dokumente hinein, und ein `<header>` in einer Vita
   bekam die Polsterung der Kopfzeile.

   Was hier bleibt, ist die Leiste ueber der Druckansicht — die gehoert zur
   App, nicht auf das Papier. */
.druckleiste { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
               padding: 14px 24px; background: var(--blatt);
               border-bottom: 1px solid var(--linie); }
.druckleiste .klein { color: var(--gedaempft); font-family: var(--bau); font-size: 11.5px; }

/* Freigabelinks eines Portfolios. */
.freigaben { list-style: none; padding: 0; margin: 10px 0 12px; }
.freigabe { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
            padding: 9px 0; border-top: 1px solid var(--linie); }
.freigaben .freigabe:first-child { border-top: none; }
/* ⚠️ Der Link steht vollständig da und bricht um, statt abgeschnitten zu
   werden: Er wird kopiert, und ein Link mit fehlendem Ende ist wertlos. */
.freigabe code { font-family: var(--bau); font-size: 12.5px; color: var(--tinte);
                 word-break: break-all; flex: 1; min-width: 240px; }
.freigabe .wann { font-family: var(--bau); font-size: 11.5px; color: var(--leise);
                  white-space: nowrap; }
.chronikzeile label.klein { font-family: var(--bau); font-size: 12px;
                            color: var(--gedaempft); display: flex; align-items: center;
                            gap: 6px; }
.chronikzeile input[type="number"] { width: 70px; font: inherit; font-family: var(--bau);
                                     font-size: 13px; padding: 7px 9px;
                                     border: 1px solid var(--linie); border-radius: 2px;
                                     background: var(--blatt); color: var(--tinte); }

/* Der Balken beim Hochladen. */
.ladebalken { position: relative; height: 26px; margin: -12px 0 22px;
              border: 1px solid var(--linie); border-radius: 2px;
              background: var(--blatt); overflow: hidden; }
/* ⚠️ Die Breite wird vom Skript gesetzt; der Übergang macht aus den Sprüngen
   des Netzwerks eine Bewegung, die man als Fortschritt liest. */
.ladebalken .fortschritt { position: absolute; inset: 0 auto 0 0; width: 0;
                           background: var(--akzent-blass); transition: width .25s ease-out; }
.ladebalken .wort { position: relative; display: block; line-height: 24px;
                    padding: 0 10px; font-family: var(--bau); font-size: 11.5px;
                    color: var(--gedaempft); }
/* Gesperrte Felder sollen aussehen wie gesperrt, nicht wie kaputt. */
.bildform input:disabled, .bildform button:disabled { opacity: .45; cursor: default; }

/* Chronikzeilen sind Felder, keine Beschriftungen — sie lassen sich ändern. */
.chronik li input { font: inherit; border: none; background: none; padding: 4px 0;
                    border-bottom: 1px solid transparent; color: var(--tinte); }
.chronik li input:hover { border-bottom-color: var(--linie); }
.chronik li input:focus { outline: none; border-bottom-color: var(--akzent); }
.chronik li input.cdatum { font-family: var(--bau); font-size: 12px; color: var(--leise);
                           width: 100px; flex-shrink: 0; }
.chronik li input.csatz { flex: 1; font-size: 15px; }
.chronik li [data-cweg] { opacity: 0; flex-shrink: 0; font-family: var(--bau);
                          font-size: 11.5px; padding: 3px 7px; cursor: pointer;
                          border: 1px solid var(--linie); border-radius: 2px;
                          background: var(--blatt); color: var(--gedaempft); }
.chronik li [data-cweg]:hover { border-color: var(--warnung); color: var(--warnung); }
/* ⚠️ Der Löschknopf erscheint erst beim Darüberfahren — er soll erreichbar sein,
   aber nicht in jeder Zeile mitschreien. Auf dem Telefon gibt es kein
   Darüberfahren, dort steht er immer da. */
.chronik li:hover [data-cweg], .chronik li:focus-within [data-cweg] { opacity: 1; }
@media (hover: none) { .chronik li [data-cweg] { opacity: 1; } }

.bildkasten { width: 240px; }
/* ⚠️ **Auch in der App wird nichts beschnitten.** Die Breite gehört der Spalte,
   die Höhe dem Bild — wer ein Panorama hochlädt, sieht ein Panorama. Dasselbe
   wie in der Vorlage (Inhaber-Entscheidung, 29.08.2026). */
.bildkasten img { width: 100%; height: auto; display: block; border-radius: 3px; }
.bildwege { display: flex; gap: 6px; margin-top: 6px; }
.bildwege form { margin: 0; }
.bildwege label { cursor: pointer; }
/* ⚠️ Hier stand eine eigene Fassung von `.nebenknopf` — sie war der Grund,
   warum die Doppelung so lange nicht auffiel: In der Bildkachel sah alles
   richtig aus. Die allgemeine Regel oben tut dasselbe. */

/* --- Schneller Wechsel zwischen den Apps -------------------------------- */

/* ⚠️ **Ohne eine Zeile Skript.** Die Hülle merkt sich mit `:hover` und
   `:focus-within` selbst, ob jemand da ist — das zweite ist der Grund, warum
   die Liste auch mit der Tastatur aufgeht. Ein Klappmenü, für das es
   JavaScript braucht, wäre in diesem Haus die falsche Bauart. */
header .appwechsel { position: relative; display: inline-block; }
header .appliste {
  position: absolute; top: 100%; left: -13px; z-index: 60;
  /* ⚠️ **Eine Brücke aus Polsterung, kein Abstand.** Zwischen Marke und Kasten
     liegen 14 Pixel Luft — als `margin` wären sie tote Fläche: Die Maus
     verlässt die Marke, erreicht den Kasten noch nicht, und die Liste klappt
     weg, bevor man sie anfassen kann. Als Polsterung gehören sie zur Fläche,
     die den Zustand hält. */
  padding-top: 14px;
  visibility: hidden; opacity: 0; transition: opacity 90ms ease;
}
header .appwechsel:hover .appliste,
header .appwechsel:focus-within .appliste { visibility: visible; opacity: 1; }
header .appliste .wkasten {
  background: var(--blatt); border: 1px solid var(--linie); border-radius: 6px;
  box-shadow: 0 8px 26px rgba(22, 22, 26, .12); padding: 4px; width: 276px;
}
/* ⚠️ Die Beschriftungen dieser Verweise sind normale Schrift, nicht die
   Versalien der Krume: Der Kasten ist eine Liste, keine Fortsetzung der
   Brotkrume. Darum `text-transform: none` — sonst erbt er sie von `.haus`. */
/* ⚠️ Zeichen links, Text rechts — als Reihe, nicht als Fluss. Als
   `inline`-Bild vor zwei Blockelementen stand das Zeichen allein in der
   ersten Zeile und der Name darunter; es sah aus wie ein Umbruchfehler. */
header .appliste .wapp {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 10px; border-radius: 4px;
  text-transform: none; letter-spacing: 0; white-space: normal;
  color: var(--tinte);
}
header .appliste .wtext { min-width: 0; }
header .appliste .wapp:hover { background: var(--akzent-blass); }
header .appliste .wappname { display: block; font-size: 13px; color: var(--tinte); }
header .appliste .wappdazu { display: block; font-size: 11px; color: var(--leise);
                          line-height: 1.45; margin-top: 2px; }
header .appliste .appzeichen { margin: 1px 0 0; flex-shrink: 0; }

/* ⚠️ **Auf dem Telefon gibt es kein Darüberfahren** — und ein Kasten, der
   sich beim Antippen öffnet, verschluckte den Verweis, auf dem er sitzt. Dort
   bleibt die Stufe darum, was sie ist: der Weg zur Startseite der App. Der
   Wechsel führt über TOOLBOX in der Krume, einen Schritt weiter. */
@media (hover: none) {
  header .appliste { display: none; }
}

/* --- Das Profil und was daraus gedruckt wird --------------------------- */

.profilseite h2 { margin-top: 34px; }

/* Wie viel noch auf das Deckblatt passt. ⚠️ Sie steht nur da, wenn es eng
   wird — eine Zahl, die immer mitläuft, liest nach einer Woche niemand mehr,
   und dann ist sie auch dann unsichtbar, wenn sie etwas sagen wollte. */
.zeichenzahl { font-family: var(--bau); font-size: 11.5px; color: var(--leise);
               margin: 5px 0 0; min-height: 1em; }
.zeichenzahl.zuviel { color: var(--warnung); }

/* Der Kontaktblock auf dem Deckblatt: eine Zeile unter dem Namen. */
.dkontakt { margin: 0 0 12mm; font-family: var(--bau); font-size: 9.5pt;
            color: var(--gedaempft); }
/* ⚠️ Der Name steht jetzt aus dem Profil da und der Kontakt darunter — die
   alte Regel schob unter `.dvon` noch 2 mm Luft, was zwischen Name und
   Kontaktzeile ein Loch riss. */
.dvon + .dkontakt { margin-top: 3mm; }

/* Die Vita, ganz hinten. Sie ist Text, kein Bild — darum oben beginnend
   und nicht mittig wie das Deckblatt. */
.vitaseite { justify-content: flex-start; padding-top: 22mm; }
.vitaseite h2 { font-family: var(--bau); font-size: 11pt; letter-spacing: 0.14em;
                text-transform: uppercase; color: var(--gedaempft);
                margin: 0 0 8mm; }
.dvita { white-space: pre-wrap; font-size: 10.5pt; line-height: 1.65;
         max-width: 150mm; }

/* --- Die Hilfe von Klio und Peitho ------------------------------------- */

/* ⚠️ **Eine Seite, keine Maschine.** Ariadnes Hilfe hat ein Verzeichnis zum
   Springen, weil sie vier Vokabulare bedient und lang ist. Diese beiden sind
   kurz genug zum Durchlesen — ein Verzeichnis über acht Überschriften wäre
   Beiwerk, das so lang ist wie das, worauf es zeigt. */
.hilfeblatt h2 { margin: 34px 0 10px; }
.hilfeblatt p { line-height: 1.62; margin: 0 0 12px; max-width: 62ch; }
.hilfeblatt code { font-family: var(--bau); font-size: 0.92em;
                   background: var(--notiz); padding: 1px 5px; border-radius: 3px; }
.hilfeblatt .beispiel { font-family: var(--bau); font-size: 12.5px;
                        line-height: 1.75; background: var(--notiz);
                        padding: 12px 15px; border-radius: 4px;
                        margin: 0 0 14px; overflow-x: auto; }

/* --- Eukleia: die Vita nach Gruppen ------------------------------------ */

.vitagruppe { margin: 0 0 26px; }
.vitagruppe h3 { font-family: var(--bau); font-size: 11.5px; letter-spacing: 0.1em;
                 text-transform: uppercase; color: var(--gedaempft);
                 font-weight: 400; margin: 0 0 6px; }
.vitagruppe .chronik { list-style: none; margin: 0 0 6px; padding: 0; }
.vitagruppe .chronik li { display: flex; gap: 12px; align-items: baseline; }
/* Dieselben Felder wie in Klios Chronik — es ist dieselbe Sorte Zeile, und sie
   soll sich auch so anfühlen (Invariante 5). */
.vitagruppe .chronikzeile { display: flex; gap: 12px; align-items: baseline;
                            margin: 0; }
.vitagruppe .chronikzeile .csatz { flex: 1; }
/* Die Gruppenwahl: unten, ruhig, mit Abstand zu dem, was darüber steht — sie
   ist ein Angebot am Rand, keine Aufforderung am Anfang. */
.gruppenwahl { display: flex; gap: 10px; align-items: center; margin: 22px 0 0; }

/* Die Vita hinten im Portfolio — dieselben Zeilen wie in Eukleias Vorlage,
   nur eine Stufe kleiner, weil sie dort ein Anhang ist und kein Dokument. */
.vitaseite h3 { font-family: var(--bau); font-size: 9pt; letter-spacing: 0.12em;
                text-transform: uppercase; color: #777; font-weight: 400;
                margin: 7mm 0 2.5mm; break-after: avoid; page-break-after: avoid; }
.vitaseite h3:first-of-type { margin-top: 0; }

/* Die Pfeile an einer Vita-Gruppe. ⚠️ Sie erscheinen beim Darüberfahren, wie
   der Löschknopf einer Chronikzeile — die Reihenfolge ändert man selten, und
   eine Überschrift mit zwei Knöpfen daneben liest sich schlechter als eine
   Überschrift. */
.vitagruppe h3 { display: flex; align-items: center; gap: 10px; }
.gwege { display: flex; gap: 5px; opacity: 0; transition: opacity 90ms ease; }
.vitagruppe:hover .gwege, .vitagruppe:focus-within .gwege { opacity: 1; }
@media (hover: none) { .gwege { opacity: 1; } }

/* Die Vita-Gruppen, die ein Portfolio anhängt. ⚠️ Häkchen, keine Pfeile: Die
   Reihenfolge gehört der Vita, hier wird nur weggelassen. */
.vhaken-liste { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 8px 0 0; }
.vhaken { display: flex; align-items: center; gap: 7px; font-size: 14px;
          cursor: pointer; }
.vhaken input { accent-color: var(--akzent); }

/* --- Fokus: dranbleiben, ohne getrieben zu werden ----------------------- */

/* ⚠️ **Er darf die Schreibfläche nie dominieren.** Deshalb: keine Umrandung,
   kein Kasten mit Schatten, keine Farbe. Ein schmaler Streifen über dem Text,
   in der Schrift der Beschriftungen — etwas, das man ansehen kann, wenn man
   will, und das sonst nicht da ist. */
/* ⚠️ **Am ENDE der Schreibspalte, mit Abstand.** Zuerst stand er oben als
   graues Wort neben „Einstellungen“ — und der Inhaber hat ihn nicht gefunden.
   „Unauffällig zuschaltbar“ war der Auftrag; unauffindbar war die Umsetzung. */
/* --- Der Fokus: eine Statuszeile am unteren Fensterrand ------------------

   ⚠️ **Eine Konstante, zwei Stellen** (Invariante 5 und 6). `--fokusleiste`
   ist die Hoehe der festen Leiste UND die Hoehe der Luft, die im Fluss unter
   der Schreibspalte freibleibt. Zwei Zahlen liefen auseinander, sobald jemand
   die Schriftgroesse aendert — und dann verdeckt die Leiste die letzte Zeile,
   die man gerade schreibt. */
:root { --fokusleiste: 34px; }

/* ⚠️ **Der Seitenfuss darf nicht unter der Leiste liegen.** Sie ist `fixed`,
   also nimmt sie im Fluss keinen Platz ein; ohne diese Zeile schiebt sich der
   Fuss darunter und ist nicht mehr zu lesen. Der Platz wird dort freigehalten,
   wo die Seite endet — nicht mit einem Abstandshalter in der Schreibspalte,
   der stand im ersten Anlauf an der falschen Stelle und half nichts. */
body:has(.fokusleiste) { padding-bottom: var(--fokusleiste); }

/* ⚠️ **`--fokusleiste` meint die GANZE Leiste, Rahmen eingerechnet.** Ohne
   `border-box` waren es 34 px Inhalt plus 1 px Rahmen, und der Seitenfuss lag
   genau diesen einen Pixel zu tief — dieselbe Konstante an zwei Stellen mit
   zwei Bedeutungen. Eine Zahl, ein Sinn. */
.fokusleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
               height: var(--fokusleiste); box-sizing: border-box;
               background: var(--blatt); border-top: 1px solid var(--linie); }

/* Der Balken sitzt AUF der Trennlinie, zwei Pixel hoch. ⚠️ Er ist eine
   Anzeige, kein Wettbewerb: keine Prozentzahl, keine Farbe, die feiert. Beim
   Erreichen wird er dunkler, nicht gruen — ein Erfolgsgruen waere eine
   Belohnung, und Belohnungen gehoeren hier nicht hin. */
.fbalken { position: absolute; left: 0; right: 0; top: -1px; height: 2px;
           background: var(--linie); }
.fbalken > i { display: block; height: 2px; width: 0;
               background: var(--leise); transition: width .3s ease; }
.fbalken.erreicht > i { background: var(--gedaempft); }

.fleiste { display: flex; align-items: center; gap: 16px;
           height: 100%; padding: 0 40px; }

.fknopf { font-family: var(--bau); font-size: 12px; letter-spacing: 0.06em;
          color: var(--gedaempft); background: none; border: 0; padding: 0;
          cursor: pointer; flex: none; }
.fknopf:hover, .fknopf[aria-expanded="true"] { color: var(--akzent); }

.fstand { font-family: var(--bau); font-size: 12px; color: var(--leise);
          margin: 0; flex: 1 1 auto; white-space: nowrap;
          overflow: hidden; text-overflow: ellipsis; }
.fstand.erreicht { color: var(--gedaempft); }
.fbeenden { flex: none; }

/* Die Tafel klappt NACH OBEN auf und deckt dabei nichts zu, was man
   schreibt — sie sitzt ueber der Leiste, nicht ueber dem Text. */
.ftafel { position: absolute; left: 0; bottom: var(--fokusleiste);
          width: min(560px, 100%); max-height: 44vh; overflow-y: auto;
          padding: 22px 40px 26px; background: var(--blatt);
          border-top: 1px solid var(--linie); border-right: 1px solid var(--linie); }
.ftafel .erlaeuterung { max-width: 62ch; }

.fueber { font-family: var(--bau); font-size: 11px; letter-spacing: 0.14em;
          text-transform: uppercase; color: var(--leise); font-weight: 400;
          margin: 22px 0 4px; }
.fzeile { display: flex; margin: 4px 0 0; align-items: center; gap: 12px;
          flex-wrap: wrap; }
.fzeile label { display: flex; align-items: center; gap: 8px;
                font-family: var(--bau); color: var(--gedaempft); }
.fzeile input[type=number] { font: inherit; font-family: var(--bau); font-size: 12.5px;
                             width: 74px; padding: 4px 8px; color: var(--tinte);
                             border: 1px solid var(--linie); border-radius: 2px;
                             background: var(--blatt); }

.fliste { list-style: none; margin: 10px 0 0; padding: 0;
          font-family: var(--bau); font-size: 12px; color: var(--gedaempft); }
.fliste li { display: flex; gap: 16px; margin-bottom: 3px; }
.fliste .fd { min-width: 88px; color: var(--leise); }
.fliste .fm { min-width: 62px; }

/* Auf schmalen Schirmen faellt der Rand mit dem der Seite zusammen. */
@media (max-width: 700px) {
  .fleiste { padding: 0 16px; gap: 10px; }
  .ftafel { padding: 18px 16px 20px; width: 100%; }
}

/* ⚠️ Beim Drucken ist sie fort. Eine Leiste, die sich auf jedes Blatt legt,
   waere genau der Fehler, den `satz.css` sonst abwehrt. */
@media print { .fokusleiste, .fokusluft { display: none; } }