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

.kartekopf { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.werkzeuge { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.knopf { font: inherit; font-family: var(--bau); font-size: 12.5px;
         border: 1px solid var(--tinte); background: var(--blatt); color: var(--tinte);
         border-radius: 2px; padding: 7px 14px; cursor: pointer; }
.knopf.aktiv { background: var(--tinte); color: var(--grund); }
.werkzeuge .hinweis { font-family: var(--bau); font-size: 12px; color: var(--gedaempft); }

.karte {
  position: relative; height: 640px; margin-top: 16px;
  background: var(--blatt); border: 1px solid var(--linie); border-radius: 3px;
  overflow: auto;
}
.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 marker path { fill: #8F8BC0; }

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

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

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

.schreiben .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 Strich links erscheint erst beim Schreiben. Beim Lesen steht der Text
   bündig unter der Überschrift des Abschnitts — ein Strich, der immer da ist,
   zerlegt die Seite in Kästen, und gelesen wird öfter als geschrieben. */
.schriftfeld:focus-within textarea { border-left-color: var(--akzent); padding-left: 20px; }
/* Der Spiegel zieht mit — aber über werkstatt.js, aus dem Feld abgelesen. */

/* --- 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 — kein `display: none`, kein fehlendes Zeichen. Die einzige
   Ausnahme ist das Ziel eines Satzes: Es rückt nach rechts, **solange niemand
   in dem Feld schreibt**. Sobald das Feld den Fokus hat, steht es wieder
   unmittelbar hinter dem Satz, damit ein Klick genau dort landet, wo man
   hinzeigt. Gelesen wird ausgerichtet, geschrieben wird bündig. */
.schriftfeld:not(:focus-within) .spiegel .wahl {
  display: flex; justify-content: space-between; gap: 24px; white-space: pre;
}
.schriftfeld:not(:focus-within) .spiegel .wahl .anfang { flex-shrink: 0; }
.spiegel .strich { color: var(--leise); }
.spiegel em { font-style: italic; }
.spiegel .stern { color: var(--linie); }
.spiegel .satz { color: var(--akzent); }
.spiegel .ziel { color: var(--leise); }
.spiegel .antwort {
  color: var(--gedaempft);
  background: linear-gradient(var(--linie), var(--linie)) 8px 0 / 2px 100% no-repeat;
}
.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; }
.feld.notiz textarea { font-size: 15.5px; border-left: none; padding-left: 0; color: #5A5A62; }
.feld.notiz .schriftfeld:focus-within textarea { 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); }

/* --- Erkenntnisse und Funde ------------------------------------------- */

.erkenntnis { cursor: pointer; display: flex; gap: 20px; align-items: baseline;
              background: var(--blatt); border-top: 1px solid var(--linie); padding: 15px 18px; }
.erkenntnis .kennung { font-family: var(--bau); font-size: 13.5px; color: var(--akzent);
                       width: 180px; flex-shrink: 0; }
.erkenntnis .satz { flex-grow: 1; font-size: 16px; line-height: 1.6; }
.erkenntnis .benutzt { font-family: var(--bau); font-size: 11.5px; color: var(--gedaempft);
                       flex-shrink: 0; }
.erkenntnis:hover { background: var(--akzent-blass); }
.erkenntnis .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 -------------------------------------------------------- */

body.anmeldung { display: flex; align-items: center; justify-content: center; height: 100vh; }
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; }
  .raum { position: static !important; width: 100%; cursor: pointer; padding: 14px 16px; }
  .raum .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; }
  .erkenntnis { flex-direction: column; gap: 6px; }
  .erkenntnis .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 -------------------------------------------------------- */

.raumgitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.raumkarte { display: flex; flex-direction: column; gap: 7px; background: var(--blatt);
             border: 1px solid var(--tinte); border-radius: 2px; padding: 16px 18px;
             color: var(--tinte); }
.raumkarte:hover { text-decoration: none; box-shadow: 0 1px 0 var(--tinte); }
.raumkarte.leer { background: #FBFBF9; border: 1px dashed #C9C8C1; }
.raumkarte .name { font-size: 16.5px; font-weight: 500; }
.raumkarte.leer .name { color: var(--gedaempft); font-weight: 450; }
.raumkarte .stand { font-family: var(--bau); font-size: 11.5px; color: var(--akzent); }
.raumkarte.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); }
.akt:hover { text-decoration: none; }
.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 { border: 1px dashed #D9D8D1; color: var(--gedaempft); align-self: flex-start;
               padding: 9px 15px; margin-top: 28px; }
.erkenntnisse + .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; }
.dialog { background: var(--blatt); border-radius: 3px; padding: 28px 30px; width: 470px;
          max-width: calc(100vw - 32px); box-shadow: 0 18px 50px rgba(22,22,26,.18);
          display: flex; flex-direction: column; gap: 16px; }
.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; }
.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); }
  .raumgitter, .akte { grid-template-columns: minmax(0, 1fr); }
  .tafel td:first-child { width: 120px; }
}

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

.ablaufbild { display: flex; flex-direction: column; gap: 2px; }
.stufe { background: var(--blatt); border-left: 2px solid var(--linie); padding: 12px 16px; }
.stufe.anfang { border-left-color: var(--tinte); }
.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); }
.stufe .weg button.ziel { border: 0; background: none; padding: 0; cursor: pointer; }
.stufe .weg button.ziel:hover { color: var(--akzent); }
.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; }
.stufe .weg .ziel.fort { color: var(--akzent); }
.stufe .weg .marke { margin-left: 10px; color: var(--leise); }

/* --- 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.amraum { 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; }