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

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

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

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

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

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

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

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--prosa);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

header {
  display: flex; align-items: center; gap: 26px;
  padding: 18px 40px; flex-wrap: wrap;
  font-family: var(--bau); font-size: 13px;
}
header .marke { display: flex; gap: 9px; align-items: baseline; }
header .haus { letter-spacing: 0.14em; text-transform: uppercase; color: var(--gedaempft); }
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); }
header nav { display: flex; gap: 20px; }
header nav a { color: var(--leise); }
header nav a.aktiv { color: var(--tinte); border-bottom: 2px solid var(--akzent); padding-bottom: 2px; }
header .suchen { margin-left: auto; }
header .suchen input {
  font: inherit; font-family: var(--bau);
  border: 1px solid var(--linie); border-radius: 2px; background: var(--blatt);
  padding: 7px 12px; width: 220px; color: var(--tinte);
}
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 { 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 { 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; }

.fund { border-top: 1px solid var(--linie); padding: 14px 0; }
.fund a { font-size: 16.5px; font-weight: 500; }
.fund ul { list-style: none; padding: 0; margin: 6px 0 0 0; }
.fund li { font-family: var(--bau); font-size: 12.5px; color: var(--gedaempft);
           line-height: 1.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- 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. */
body:has(.schriftfeld) { padding-bottom: 50vh; }

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

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

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

@media (max-width: 760px) {
  header { padding: 14px 18px; gap: 16px; }
  header .suchen { margin-left: 0; order: 3; width: 100%; }
  header .suchen input { width: 100%; }
  header .zustand { order: 2; margin-left: auto; }
  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; }
  .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); text-decoration: none; }
.leiste .eintrag.aktiv { background: var(--blatt); border-left-color: var(--farbe); font-weight: 500; }
.leiste .knopf { margin-top: 16px; }

.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); }

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

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

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

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

.zurueck { display: flex; gap: 20px; flex-wrap: wrap; }
.zurueck .leise { color: var(--leise); }

@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; text-decoration: none;
}
.stufe .weg button.ziel:hover, .stufe .weg a.ziel:hover { color: var(--akzent); }
/* Das Wort „Szene:" bleibt grau — genau wie „Abschnitt:". Gefärbt wird beim
   Darüberfahren nur der Pfeil und der Name dahinter. */
.stufe .kopf .marke { font-family: var(--bau); font-size: 11px; color: var(--leise); }
.stufe.verwaist .kopf .marke { color: var(--warnung); }
.stufe .weg { display: flex; gap: 24px; align-items: baseline; margin-top: 7px;
              padding-left: 14px; justify-content: space-between; }
.stufe .weg .satz { font-family: var(--bau); font-size: 13.5px; color: var(--akzent); }
.stufe .weg .ziel { font-family: var(--bau); font-size: 12px; color: var(--leise);
                    text-align: right; flex-shrink: 0; }
.stufe .weg .ziel.fehlt { color: var(--warnung); text-decoration: line-through; }
/* Der Ausgang eines Einschubs: kein fehlendes Ziel, sondern das Ziel selbst. */
.stufe .weg .ziel.heraus { color: var(--gedaempft); font-style: italic; }
.stufe .weg .marke { color: var(--leise); margin-right: 4px; }

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

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

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

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

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

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

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

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

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

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

.feld.teil { margin-top: -14px; }
.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;
}
.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); text-decoration: none; }
.geschichte:hover * { text-decoration: none; }
.geschichte.offen { border-left-color: var(--tinte); }
.geschichte .kopf { display: flex; gap: 16px; align-items: baseline;
                    justify-content: space-between; }
.geschichte .name { font-size: 20px; color: var(--tinte); }
.geschichte .marke { font-family: var(--bau); font-size: 11px; color: var(--leise);
                     letter-spacing: 0.08em; text-transform: uppercase; }
.geschichte.offen .marke { color: var(--akzent); }
.geschichte .kurz { display: block; margin-top: 7px; font-size: 15px; line-height: 1.6;
                    color: var(--gedaempft); }
.geschichte .zahlen { display: block; margin-top: 11px; font-family: var(--bau);
                      font-size: 11.5px; color: var(--leise); }

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

/* Die Fußzeile: leise, einzeilig, ganz unten. ⚠️ Sie steht auf JEDER Seite —
   Impressum und Datenschutz sind Pflichtangaben und dürfen nicht davon
   abhängen, auf welcher Unterseite jemand landet. */
.fuss {
  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);
}
.fuss a { color: var(--leise); text-decoration: none; }
.fuss a:hover { color: var(--tinte); text-decoration: underline; }
.fuss .beta { margin-left: auto; letter-spacing: 0.06em; }
body.anmeldung .fuss { justify-content: center; margin-top: 40px; border-top: 0;
                       padding: 0 20px; max-width: 560px; text-align: center; }
body.anmeldung .fuss .beta { margin-left: 0; }

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

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

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

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

   ⚠️ Die Liste ist die Wahrheit. Wer eine neue klickbare Fläche baut, trägt
   sie hier ein — sonst unterstreicht sie, und niemand sieht es beim Bauen.
   Ein einzelner Verweis IM Fließtext unterstreicht weiter; dort ist die
   Unterstreichung richtig, weil es keine Fläche gibt, die es sonst zeigen
   könnte. */
.knopf,
.szenechip,
.geruestzeile,
.geschichte,
.szenekarte,
.akt,
.formwahl,
.sequenzknopf,
.wahl button,
.merkmal,
.person,
.stufe .kopf a {
  text-decoration: none;
}
.knopf:hover, .knopf:focus-visible,
.szenechip:hover, .szenechip:focus-visible,
.geruestzeile:hover, .geruestzeile:focus-visible,
.geschichte:hover, .geschichte:focus-visible,
.szenekarte:hover, .szenekarte:focus-visible,
.akt:hover, .akt:focus-visible,
.formwahl:hover,
.sequenzknopf:hover, .sequenzknopf:focus-visible,
.wahl button:hover,
.merkmal:hover,
.person:hover,
.stufe .kopf a:hover {
  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); }

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

/* Eine Warnung, die man nicht überliest — vor dem Löschen eines Kontos. */
.warnung-kasten {
  border-left: 3px solid var(--warnung); background: var(--blatt);
  padding: 13px 16px; margin: 6px 0 12px; font-size: 13.5px; line-height: 1.6;
  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: 60px 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;
  border-left: 3px 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; }

/* 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; }
.rechtstext h2 { font-size: 15px; margin: 30px 0 8px; text-transform: none;
                 letter-spacing: 0; color: var(--tinte); font-family: var(--lese); }
.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; }