/* ═══════════════════════════════════════════════════════════════
   Mapedit — Gestaltung
   Dunkle Werkstatt, damit die helle Karte in der Mitte wirkt.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --grund:   #14110c;
    --feld:    #1e1a13;
    --feld2:   #272117;
    --rand:    rgba(222, 167, 38, 0.22);
    --gold:    #dea726;
    --text:    #e8dcc0;
    --gedimmt: rgba(232, 220, 192, 0.70);
    --gut:     #7fc98a;
    --schlecht:#e88a7f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Die Schrift der Oberfläche ──
   Stefan am 13.08.: „ändere bitte die ‚normale' Schriftart in den Menüs
   so ab, das man sie besser lesen kann. Auf der Karte sehe sie jedoch
   TOP aus."

   ⚠️ Der Grund war nicht die Größe: **Cinzel hat gar keine
   Kleinbuchstaben.** Jeder Menütext stand damit in Kapitälchen — bei
   12 px in gedämpftem Grau auf Dunkel ist das keine Frage des
   Geschmacks mehr. Auf der KARTE ist genau das richtig, und dort bleibt
   Cinzel unangetastet.
   Die goldenen Überschriften und Fachköpfe bleiben ebenfalls: sie sind
   kurz, groß gesperrt und sollen dekorativ sein.
   ⚠️ Mit der Lesbarkeit hängt die Deckkraft zusammen: heller Text auf
   dunklem Grund läuft zu, und `--gedimmt` lag bei 0,55. Für die kleinen
   Hinweistexte reicht das nicht — deshalb 0,70. */
body {
    background: var(--grund);
    color: var(--text);
    font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ⚠️ Auf der Editor-Seite soll GAR NICHT gescrollt werden (13.08.).
   Dafür braucht es eine geschlossene Höhenkette von hier bis zum
   Canvas — `height: 100vh` UND `min-height: 0` an jedem Flex-Glied,
   sonst wächst ein Kind über seinen Anteil hinaus und schiebt die
   Seite doch wieder auf. Die Startseite behält ihr normales Scrollen. */
body.editor { height: 100vh; overflow: hidden; }

header {
    display: flex; align-items: baseline; gap: 14px;
    /* ⚠️⚠️ A.3.199.0 — EINE ZEILE, komme was wolle. Mit dem Kopf-Menü und
       dem Sicherungs-Stand ist der Kopf 240 px voller geworden; bei
       1280 px Breite brach der `#melder` mit einem längeren Text um, der
       Kopf wurde 90 statt 53 px hoch, und die Bühne verlor GEMESSEN eine
       Zeilenhöhe — 34 statt 40 % des Fensters (`bedienweg-leisten`).
       Dieselbe Falle steht seit dem 21.08. im Markup („die wechselnden
       Texte des Melders kippten den Umbruch, der Klickpunkt stand 9 px
       daneben"). Der Melder schrumpft jetzt statt umzubrechen. */
    flex-wrap: nowrap;
    padding: 8px 16px;
    background: linear-gradient(180deg, #221c12, #191509);
    border-bottom: 1px solid var(--rand);
}
header h1 {
    font-family: 'Cinzel Decorative', Georgia, serif;
    font-size: 21px; color: var(--gold); letter-spacing: 1px;
}
/* Ohne das steht „Mapedit" im Editorkopf im Browser-Blau — die Regel gab
   es nur in landing.css, und der Editor lädt die nicht. */
header h1 a { color: inherit; text-decoration: none; }
/* ⚠️ A.3.201.0 — GEMESSEN (`sonde-kopfzeile-melder.cjs`, 1920×1080): trug
   der Melder den langen WILD-Text, stand der Untertitel ZWEIZEILIG und
   der Kopf 62 statt 53 px hoch — die Bühne verlor 9 px. `flex-wrap:
   nowrap` am Kopf hält nur die KINDER in einer Zeile; ein Flexkind darf
   weiter schrumpfen (`flex-shrink: 1`), und dann bricht sein TEXT um.
   Der Untertitel weicht deshalb nicht mehr; der Melder allein schrumpft
   (`min-width: 0; flex: 1 1 auto`). Bei 1536 und darunter ist der
   Untertitel ohnehin aus, 3072 hat Platz. */
header .unter { color: var(--gedimmt); font-size: 13px; white-space: nowrap; flex: 0 0 auto; }
/* ⚠️ Derselbe Fehler wie eine Zeile höher, nur an einem anderen Link:
   „Recht" stand im Editorkopf im BROWSER-BLAU. Die Regel dafür gibt es
   nur in `landing.css`, und die lädt der Editor nicht. Gesehen hat es
   kein Prüfpunkt, sondern der Blick auf einen Bildschirmabzug. */
header .rechtslink { color: var(--gedimmt); text-decoration: none; font-size: 13px; }
header #melder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                 min-width: 0; flex: 1 1 auto; }
header .stand, header .kopfmenue, header .schrittfolge, header .konto-oben { flex: 0 0 auto; }

/* ══ SCHRITT 4 · KOPF (A.3.199.0) ══════════════════════════════════
   Der Kopf trägt seit diesem Stand drei Dinge mehr: das Menü „🗺 Karten ▾",
   den Sicherungs-Stand und darunter die Schrittleiste.
   ⚠️ Der Untertitel weicht auf schmalen Fenstern — er ist Schmuck, das
   Menü und der Stand sind Bedienung. Ohne diese Regel drückte die Zeile
   bei 1280 px Breite um. */
/* ⚠️ GEMESSEN: bei 1536 px Breite stand der Kopf ZWEIZEILIG (90 statt
   53 px) — der Untertitel passte gerade noch in die Regel und drückte
   Menü, Stand und Schrittfolge um. Die Schwelle liegt darum bei 1800:
   den Untertitel sieht, wer wirklich Platz hat (sein 3072er Schirm). */
@media (max-width: 1800px) { header .unter { display: none; } }

.kopfmenue { position: relative; }
.kopfmenue > button {
    font-size: 13px; padding: 5px 10px;
    background: var(--feld2); color: var(--gold); border-color: var(--rand);
}
/* Das Blatt hängt UNTER dem Knopf und über allem anderen. `position:
   absolute` statt eines Platzes im Fluss: der Kopf ist eine Zeile, ein
   ausklappendes Kind darin schöbe die ganze Bühne nach unten. */
.menueblatt {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
    width: 260px; max-height: 70vh; overflow-y: auto;
    background: var(--feld); border: 1px solid var(--gold); border-radius: 8px;
    padding: 10px 12px 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    text-align: left;
}
.menueblatt .blatttitel {
    font-size: 10px; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: var(--gedimmt);
    margin: 10px 0 5px; display: flex; gap: 6px; align-items: baseline;
}
.menueblatt .blatttitel:first-child { margin-top: 0; }
/* ⚠️ Im Blatt darf die Kartenliste länger sein als in der alten Spalte
   (dort 17vh/22vh, weil sie die Fachlänge abfangen musste). Das Blatt
   rollt selbst und nimmt der Bühne keinen Pixel. */
.menueblatt #kartenListe { max-height: 34vh; }
/* Der Sicherungs-Stand IM KOPF: dieselbe Auskunft, andere Form — eine
   Zeile in der Kopfleiste statt eines Kastens über den Fächern. */
header .stand {
    margin: 0; padding: 4px 10px; font-size: 12px;
    white-space: nowrap; align-self: center;
}

/* ── Die Schrittleiste ── */
.schritte {
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: linear-gradient(180deg, #1d1810, #191509);
    border-bottom: 1px solid var(--rand);
}
.reiter {
    font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
    font-weight: 700; font-size: 13px; letter-spacing: 1.1px;
    text-transform: uppercase; color: var(--gedimmt);
    background: transparent; border: 0; border-bottom: 3px solid transparent;
    border-radius: 0; padding: 7px 10px 5px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.reiter small {
    font-size: 11.5px; letter-spacing: 0; text-transform: none;
    color: var(--gedimmt); font-weight: 400; opacity: 0.85;
}
.reiter:hover:not(:disabled) { color: var(--gold); border-color: transparent; }
.reiter[aria-selected="true"] {
    color: var(--gold); border-bottom-color: var(--gold);
    background: linear-gradient(to top, #2a2216, transparent);
}
/* ⚠️ Auf flachen Fenstern fällt der Untertitel weg: die Leiste ist eine
   ZEILE, und jede Zeile über der Bühne hat schon einmal die Karte
   gekostet (209 → 93 px, A.1.7.0). Was der Reiter tut, sagt sein Name. */
/* ⚠️⚠️ GEMESSEN, nicht geschätzt: auf flachen Fenstern fällt der
   Untertitel weg UND die Reiter rücken enger. Der Grund ist der Schritt
   „Leben" — er behält als einziger BEIDE Spalten und die zweizeilige
   Werkzeugleiste, und mit der neuen Reihe fiel die Bühne bei 1280×720 auf
   34 % des Fensters. Seine Marke vom 13.08. ist 35 % (`bedienweg-leisten`
   misst sie). Zehn Pixel weniger Leiste holen genau die Marke zurück.
   Eine Zeile über der Bühne ist teuer — die Regel von A.1.7.0, hier zum
   vierten Mal bezahlt. */
@media (max-height: 900px) {
    .reiter small { display: none; }
    .reiter { padding: 4px 8px 3px; font-size: 12.5px; }
}

/* ⚠️⚠️ DAS RASTER JE SCHRITT — hier steckt der ganze Gewinn.
   Eine Spalte, die kein Schritt-Teil zeigt, ist `hidden` (schrittleiste.js),
   und ihre Rasterspalte fällt HIER weg. Ohne das stünde ein leerer
   206-px-Kasten da: das Grid hält seine Spalte, auch wenn ihr Inhalt weg
   ist — genau der Fehler, den dieser Schritt abschaffen soll. */
main > aside[hidden] { display: none; }
/* ⚠️⚠️ A.3.199.0 — die Werkzeugleiste ist eine eigene Rasterzeile über
   BEIDEN Spalten (Begründung im Markup, gemessen). Ohne `grid-column`
   stünde sie als erste Spalte neben den Leisten. */
main > .werkzeugkopf { grid-column: 1 / -1; }
body.editor[data-schritt] main { grid-template-rows: auto minmax(0, 1fr); }
body.editor[data-schritt="land"] main,
body.editor[data-schritt="ausgabe"] main { grid-template-columns: 206px minmax(0, 1fr); }
body.editor[data-schritt="aussehen"] main { grid-template-columns: minmax(0, 1fr) 252px; }
/* A.3.282.0 — im Schritt LEBEN ist die rechte Spalte 300 px: dort wohnt
   jetzt die Werkstatt, und ihr Bogen (276 px) soll das Zeichen GROSS
   zeigen — sein Befund vom 09.09. („zu klein"). Die 48 px gehen der Karte
   ab, nur in diesem Schritt; die Aussehen-Karten bleiben bei 252. */
body.editor[data-schritt="leben"] main { grid-template-columns: 206px minmax(0, 1fr) 300px; }
header .rechtslink:hover { color: var(--gold); }
/* ⚠️ Unter 1500 px passt der Untertitel nicht mehr neben Melder,
   „Zurück / Vor" und den Kontoblock — die Kopfzeile bricht dann um und
   wird 22 px höher. Von allem dort oben ist der Untertitel das
   Entbehrlichste: er erklärt, was die Seite ist, und das weiss man,
   sobald man drinsteht. */
@media (max-width: 1500px) { header .unter { display: none; } }
/* ⚠️ Der Melder GIBT NACH. Rechts von ihm stehen seit A.1.18.0 „Zurück"
   und „Vor", und seine Texte werden lang („Karte belebt: 34 Zeichen,
   3 Flüsse, 12 Wege"). Ohne `min-width: 0` schiebt er bei 1280 px die
   Knöpfe aus der Kopfzeile — ein Überstand, den man erst sieht, wenn
   zufällig eine lange Meldung dasteht. */
#melder {
    margin-left: auto; font-size: 13px; color: var(--gedimmt);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#melder.gut { color: var(--gut); }
#melder.schlecht { color: var(--schlecht); }

/* ── Zurück und Wiederholen ── (A.1.18.0)
   In der Kopfzeile, weil ein Rückgängig immer erreichbar sein muss. Die
   Knöpfe sind knapper gepolstert als sonst: die Kopfzeile soll dadurch
   nicht höher werden, denn ihre Höhe geht der Bühne ab. */
.schrittfolge { display: flex; gap: 6px; flex: 0 0 auto; }
.schrittfolge button { padding: 5px 9px; }
/* ⚠️ Hier stand bis A.3.43.2 eine EIGENE Regel für abgeschaltete Knöpfe
   (opacity 0.4 plus Hover-Rücknahme) — die einzige im ganzen Editor. Sie
   ist raus: seit `button:disabled` weiter unten für ALLE gilt, wären es
   zwei Wahrheiten für dieselbe Sache, und die beiden liefen schon
   auseinander (0,4 gegen 0,35). Die Hover-Rücknahme braucht es auch
   nicht mehr, der Hover greift nur noch `:not(:disabled)`. */

main {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    /* ⚠️ Schmaler und enger seit A.1.10.0. „Das Fenster in der Mitte mit
       der Karte muss größer" (13.08.) — 250+270 px Leisten plus 2×14 px
       Abstand plus 36 px Polster liessen der Karte bei 1366 px Breite nur
       782 px. Die Leisten kommen mit 206/222 aus; gemessen bleibt der
       Überstand in allen vier Fenstergrößen bei 0.
       ⚠️⚠️ A.3.176.0 — DIE RECHTE GEHT AUF 252. Sein Befund vom 01.09.
       abends, mit Bild: „das Menü an der Seite muss etwas breiter, dass
       ich es nicht mehr seitlich scrollen muss." Auf dem Bild ist es die
       RECHTE (Radiergummi, Blatt/Land/Küste/Meer/Schatten) — nachgesehen
       in `editor.html`, nicht geraten.
       ⚠️ DAS NIMMT DER KARTE 30 px, und das steht gegen seine Ansage vom
       13.08. Es ist trotzdem richtig herum: eine Leiste, die man seitlich
       schieben muss, kostet ihn mehr als 30 px Karte. Wer sie zurückdreht,
       muss erst sein Bild von damals wieder anschauen.
       ⚠️⚠️ Reproduzieren liess sich sein Rollbalken NICHT (vier Messungen,
       `pruefstand/messung-leistenbreite.cjs`, Überstand überall 0) —
       headless-Chrome hat OVERLAY-Rollbalken, die keinen Platz fressen.
       Die 30 px sind darum SEIN WUNSCH umgesetzt, keine gemessene Zahl. */
    grid-template-columns: 206px minmax(0, 1fr) 252px;
    gap: 10px;
    padding: 10px 12px 12px;
    align-items: stretch;
}

aside {
    background: var(--feld);
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 10px 11px;
    min-height: 0;
    /* Notnagel: bei sehr flachen Fenstern darf die Leiste selbst scrollen,
       statt die ganze Seite aufzuschieben. Mit einem offenen Fach tritt
       das nicht ein — gemessen bis hinunter zu 700 px Fensterhöhe. */
    overflow-y: auto;
    /* ⚠️⚠️ A.3.176.0 — GEGEN DEN WAAGERECHTEN BALKEN AUF SEINEM BILD.
       `overflow-y: auto` zieht in CSS die andere Achse auf `auto` mit
       (eine Achse nicht-`visible` genügt). Erscheint der SENKRECHTE
       Balken und frisst bei ihm ~15 px, passt der Inhalt nicht mehr —
       und darunter steht der waagerechte Balken, den er fotografiert hat.
       `stable` hält den Platz IMMER frei: der Inhalt springt beim
       Auftauchen des Balkens nicht mehr, und zu eng wird es nie.
       ⚠️ Hier nicht messbar (headless-Chrome hat Overlay-Balken, gemessen
       2 px statt 15) — die Wirkung sieht ER, nicht der Prüfstand. */
    scrollbar-gutter: stable;
}

/* ⚠️ Auch die Überschriften und Fachköpfe. Beim ersten Anlauf habe ich
   sie als „dekorativ und kurz" stehen lassen — seine Antwort war ein
   Bild genau dieser Köpfe: „Die Menüs haben immer noch die schwer
   lesbare Schriftart". Cinzel DECORATIVE ist als Zierschrift noch
   schwerer zu lesen als Cinzel, und in der Leiste ist sie kein Schmuck,
   sondern die Beschriftung, an der man sich zurechtfindet.
   Gold, Versalien und Sperrung bleiben — daran erkennt man den Kopf.
   Cinzel Decorative behält nur der Titel „Mapedit" im Seitenkopf. */
h2 {
    font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
    font-size: 13px; font-weight: 700; color: var(--gold);
    text-transform: uppercase; letter-spacing: 1.1px;
    margin: 16px 0 8px; padding-bottom: 5px;
    border-bottom: 1px solid var(--rand);
}
h2:first-child { margin-top: 0; }

/* ── Klappfächer ──
   Der Kopf sieht aus wie die alte Überschrift, ist aber ein Knopf.
   Der Pfeil sagt, ob offen oder zu; `list-style: none` nimmt das
   voreingestellte Dreieck weg, das in Safari sonst doppelt steht. */
.fach { border-bottom: 1px solid var(--rand); }
.fach:last-child { border-bottom: none; }
.fach > summary {
    font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
    font-size: 13.5px; font-weight: 700; color: var(--gold);
    text-transform: uppercase; letter-spacing: 1.1px;
    padding: 9px 2px; cursor: pointer;
    list-style: none;
    display: flex; align-items: center; justify-content: space-between;
    user-select: none;
}
.fach > summary::-webkit-details-marker { display: none; }
.fach > summary::after {
    content: '▾';
    font-size: 11px; opacity: 0.7;
    transition: transform 0.15s;
}
.fach[open] > summary::after { transform: rotate(180deg); }
.fach > summary:hover { color: #f2c94c; }
.fach[open] > summary { border-bottom: 1px solid var(--rand); margin-bottom: 9px; }
.fach > *:not(summary):last-child { margin-bottom: 10px; }

label {
    display: block;
    font-size: 13px; color: var(--gedimmt);
    margin-bottom: 9px;
}
label.wahl { display: flex; align-items: center; gap: 7px; color: var(--text); }
.wert { float: right; color: var(--gold); font-weight: 600; }

input[type=range] { width: 100%; margin-top: 4px; accent-color: var(--gold); }
input[type=text], select {
    width: 100%; margin-top: 4px; padding: 6px 8px;
    background: var(--grund); color: var(--text);
    border: 1px solid var(--rand); border-radius: 5px;
    font-family: inherit; font-size: 13px;
}
input[type=color] {
    width: 100%; height: 30px; margin-top: 4px; padding: 0;
    background: var(--grund); border: 1px solid var(--rand);
    border-radius: 5px; cursor: pointer;
}

button {
    font-family: inherit; font-size: 13px;
    padding: 8px 10px; border-radius: 6px; cursor: pointer;
    background: var(--feld2); color: var(--text);
    border: 1px solid var(--rand);
}
button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
button.haupt { background: var(--gold); color: #191509; font-weight: 700; border-color: var(--gold); }
button.haupt:hover:not(:disabled) { filter: brightness(1.1); color: #191509; }

/* ══ EIN KNOPF, AUF DEN ETWAS WARTET ══ (A.3.222.0)
   Sein „bau die anderen Sachen" (07.09.), Punkt 2: die Zoom-Anzeige
   erfindet keine Bergpfade mehr, weil man sie nicht anfassen konnte —
   also muss der Knopf, der sie WIRKLICH legt, von selbst sagen, dass
   etwas offen ist („⋯ Pfade zu den Bergen (3)").
   ⚠️ NICHT `.haupt`: golden gefüllt ist der Weg, den man gehen SOLL
   („Karte beleben" daneben). Hier wartet nur etwas — der Rand trägt
   die Aussage, die Fläche bleibt ruhig. Sonst stünden zwei
   Hauptknöpfe übereinander und keiner wäre mehr einer. */
button.wartet { border-color: var(--gold); color: var(--gold); font-weight: 600; }

/* ══ ABGESCHALTETE KNÖPFE SEHEN ABGESCHALTET AUS ══ (A.3.43.2)
   Seine Ansage vom 21.08.: „ja, für alle abgeschalteten Knöpfe im Editor."

   ⚠️⚠️ WARUM ES DIESE REGEL GIBT. Bis A.3.43.1 gab es im ganzen Editor
   KEINEN Stil für `:disabled` ausser in der Kopfzeile. Ein abgeschalteter
   Hauptknopf leuchtete weiter GOLDEN wie der Weg, den man gehen soll —
   man klickt ihn, und nichts passiert. Aufgefallen ist es am Assistenten
   („🎲 Würfeln" am letzten Schritt), es galt aber überall: „✕ Entfernen"
   und „Spiegeln" im Bearbeiten-Fach, die Knöpfe der Kartenliste, die
   Zeichenwerkstatt.

   ⚠️ EINE Regel für alle, nicht je Kennung. Drei Kennungen aufzuzählen
   war der erste Anlauf, und die Liste wäre bei jedem neuen Knopf wieder
   unvollständig — genau die „zwei Listen"-Falle.
   ⚠️ Und der Hover greift nur noch `:not(:disabled)`. Ohne das leuchtet
   der Rand eines abgeschalteten Knopfes beim Überfahren golden auf und
   verspricht wieder etwas, was nicht kommt. Deshalb brauchen die
   abgeschalteten Knöpfe hier auch keine eigenen Hover-Regeln mehr.
   ⚠️ `opacity` und `cursor`, sonst nichts: `pointer-events: none` würde
   den Knopf für Prüfstände unsichtbar machen, und die Farben bleiben so
   die des Knopfes (ein gedämpftes Gold bleibt gold und wandert nicht
   nach grau). */
button:disabled { opacity: 0.35; cursor: default; }
button.warnung:hover:not(:disabled) { border-color: var(--schlecht); color: var(--schlecht); }
/* WILD ist der eine Knopf, der eine ganze Welt macht — er darf grösser
   aussehen als „Erzeugen" daneben. Zwei gleich aussehende Hauptknöpfe
   in einem Fach sagen dagegen nicht, welcher der Weg ist. */
button.wild { font-size: 14px; padding: 11px 10px; letter-spacing: 0.4px; }

/* ── Rückfrage in der Seite ──
   Ersetzt `window.confirm()`. Der Browser-Balken oben sah aus wie ein
   Fehler und stand mitten in der Arbeit; „nicht als Systemmeldung" war
   am 13.08. eine ausdrückliche Ansage. Erscheint nur, wo wirklich etwas
   verloren geht — Beleben und Zone→Subkarte fragen gar nicht mehr. */
#frage {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10, 8, 5, 0.62);
}
#frage[hidden] { display: none; }
.frage-blatt {
    background: var(--feld); border: 1px solid var(--rand); border-radius: 10px;
    padding: 20px 22px; max-width: 440px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.frage-blatt p { font-size: 14px; line-height: 1.45; }
.frage-blatt .knopfreihe { margin-bottom: 0; }

/* Lupe: drei Knöpfe, die zusammengehören und deshalb zusammenstehen.
   Die Zahl in der Mitte ist zugleich der Knopf zurück auf „passend". */
.lupe { display: inline-flex; gap: 2px; margin-left: auto; }
.lupe button { padding: 8px 9px; min-width: 34px; }
.lupe #lupePassend { min-width: 72px; font-variant-numeric: tabular-nums; }

.knopfreihe { display: flex; gap: 6px; margin: 10px 0; }
.knopfreihe.spalte { flex-direction: column; }
.knopfreihe button { flex: 1; }

/* ⚠️ Die Liste bekommt eine eigene Grenze. Ein Admin sieht ALLE Karten;
   ohne das schob eine lange Liste die ganze Leiste auf und das mühsam
   erreichte „nichts scrollt" war beim zehnten Eintrag wieder hin.
   ⚠️⚠️ Sein Befund am 14.08.: „nicht schön geregelt und sehr unansehnlich."
   Gemessen war die Liste 182×147 px bei 654 px Inhalt — von zwölf Karten
   waren ZWEIEINHALB zu sehen, die dritte Zeile mittendrin abgeschnitten,
   und weil `overflow-y` gesetzt war, rechnete der Browser `overflow-x`
   auf `auto` hoch: darunter stand noch ein waagerechter Rollbalken für
   ein Pixel Überstand. Drei Dinge, alle drei sichtbar:
   · ein eigener RAHMEN, damit ein abgeschnittener Eintrag als „da kommt
     noch was" gelesen wird und nicht als kaputt gezeichnet,
   · doppelte Höhe (sieben statt zweieinhalb Einträge),
   · und `overflow-x: hidden` — waagerecht gibt es nichts zu rollen. */
/* ⚠️⚠️ GESCHLOSSENE HÖHENKETTE bis in die Liste (A.1.27.0). Die Altlast
   aus A.1.19.0: die feste `max-height: 34vh` passte nie zu ALLEN
   Fenstern — gemessen scrollte die linke Leiste um 132 px (lange Liste),
   99 px (1536×864) und 16 px (1280×720). Eine vh-Zahl kann das nicht
   lösen, sie kennt die übrigen Fächer nicht ([[Kein Scrollen braucht
   eine geschlossene Höhenkette]], A.1.1.0). Jetzt ist die Leiste eine
   Flex-Säule, das offene Karten-Fach ihr einziges schrumpfbares Glied,
   und die Liste klemmt sich in den Rest. `max-height` bleibt nur als
   Deckel für RIESIGE Fenster.
   ⚠️ `display:flex` NUR auf dem OFFENEN Fach — auf einem zugeklappten
   `details` hat es in Chrome historisch den Zuklapp-Mechanismus
   ausgehebelt. */
aside.links { display: flex; flex-direction: column; }
aside.links > * { flex: 0 0 auto; }
aside.links > details.fach:has(#kartenListe)[open] {
    flex: 0 1 auto; min-height: 0;
    display: flex; flex-direction: column;
}
aside.links > details.fach:has(#kartenListe)[open] > * { flex: 0 0 auto; }
/* ⚠️⚠️ `min-height: 48px`, NICHT 0: mit 0 drückte die Kette die Liste
   bei 1536×864 auf 14 px — der 36-px-Eintrag ragte heraus, sein
   Mittelpunkt lag AUSSERHALB der UL-Box, und ein Klick darauf traf
   das Fach statt des Eintrags (bedienweg-schritte Punkt 10 riss:
   `karteOeffnen` lief nie, still). Ein Eintrag samt Polster muss
   IMMER stehen — was darüber hinaus fehlt, gibt der Hinweistext her
   (Media-Regel unten). */
aside.links > details.fach:has(#kartenListe)[open] > #kartenListe {
    flex: 0 1 auto; min-height: 48px;
}
/* ⚠️⚠️ SEIN BEFUND 15.08.: Fachinhalt übermalte die Köpfe darunter.
   Chrome steckt den Inhalt eines <details> in einen eigenen Kasten
   (::details-content) — die Kinder oben sind damit KEINE Flex-Kinder
   des Fachs, beide Regeln davor greifen ins Leere: die Liste schrumpft
   nie, der Kasten schon, und der Rest ragt sichtbar unters Fach
   (gemessen 178 px bei 1536×864 und vollem Kartenbestand). Mit wenigen
   Karten blieb die Liste unter ihrem 34vh-Deckel und der Bruch war
   unsichtbar — leere Bereiche verstecken Layout-Fehler.
   ⚠️⚠️ NICHT `display: contents`: das stand hier einen halben Tag und
   riss `bedienweg-schritte` Punkt 10 — der Kasten verschwand, und der
   Kartenlisten-Eintrag war an seiner gemeldeten Stelle nicht mehr
   GEMALT (elementFromPoint lieferte das details, der Klick ging still
   daneben, `karteOeffnen` lief nie). Der Kasten bleibt deshalb ein
   Kasten und wird SELBST zur Flex-Säule: die Schrumpfregeln der
   Kinder oben matchen weiter (CSS matcht am DOM, nicht am Box-Baum),
   `min-height: 0` lässt ihn im Fach mitschrumpfen, und die
   Trefferfläche der Liste bleibt normal. Nur fürs OFFENE Karten-Fach —
   am Zuklapp-Mechanismus (siehe oben) ändert das nichts. */
aside.links > details.fach:has(#kartenListe)[open]::details-content {
    display: flex; flex-direction: column; min-height: 0;
}
/* Die letzten Fixkosten der Kette: das unterste Glied braucht keinen
   Abstand zum aside-Rand — in einer Flex-Säule kollabiert nichts, die
   8 px Rest-Scroll bei langer Liste waren genau dieser Rand. */
aside.links > :last-child,
aside.links > details.fach:has(#kartenListe)[open] > :last-child { margin-bottom: 0; }
#kartenListe {
    list-style: none;
    margin: 10px 0;
    padding: 6px;
    max-height: 34vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--rand);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--gedimmt) transparent;
}
#kartenListe:empty { display: none; }
#kartenListe::-webkit-scrollbar { width: 8px; }
#kartenListe::-webkit-scrollbar-track { background: transparent; }
#kartenListe::-webkit-scrollbar-thumb {
    background: var(--gedimmt); border-radius: 4px; border: 2px solid transparent;
    background-clip: content-box;
}
/* Die Zahl am Fachkopf: die Liste scrollt in sich, also muss dort stehen,
   wie viele es überhaupt sind. */
/* ⚠️ `margin-right: auto` gehört dazu: der Fachkopf ist ein Flex mit
   `space-between`, ohne das stünde die Zahl in der MITTE zwischen Wort
   und Pfeil statt daneben. */
.fach > summary .zahl {
    color: var(--gedimmt); font-weight: normal; margin-right: auto; margin-left: 5px;
}

/* ⚠️ Flache Fenster: Fachköpfe straffen.
   Das eigene Fach „WILD" ist seit A.1.6.0 eine ZEILE MEHR in der linken
   Leiste — bei 1280×720 stand sie danach 14 px über, und „am liebsten
   gar nicht mehr scrollen" war am 13.08. eine ausdrückliche Ansage.
   Drei Fachköpfe × 6 px gespart decken das mit Reserve. Nur hier
   gestrafft: auf grossen Bildschirmen bleibt die Leiste so, wie er sie
   kennt. Die Liste gibt zusätzlich Platz ab — sie scrollt in sich
   selbst, alles andere im Fach nicht. */
@media (max-height: 780px) {
    .fach > summary { padding: 6px 2px; }
    /* ⚠️ Auch auf flachen Fenstern nicht unter vier Einträge — bei
       13vh waren es anderthalb, und eine Liste, die einen halben
       Eintrag zeigt, sieht kaputt aus statt knapp. */
    #kartenListe { max-height: 22vh; }
    /* ⚠️ A.3.138.0 — die Zwischenüberschriften „Erzeugen"/„Ausgeben"
       sind Ordnung, kein Bedienelement: auf flachen Fenstern weichen
       sie wie die Hinweise (Regel darunter), sonst scrollte die Spalte
       bei 1280×720 gemessen 28 px (bedienweg-wild, offenes
       Würfeln-Fach). Die Fach-Reihenfolge trägt die Ordnung weiter.
       ⚠️ MIT `aside`-Vorspann: die Basis-Regel `.zwischen` steht
       WEITER UNTEN in der Datei und gewänne sonst bei gleicher
       Spezifität — der erste Anlauf blieb wirkungslos (gemessen). */
    aside .zwischen { display: none; }
    /* ⚠️ A.3.198.0 — die letzten Pixel des Fachs „Landmasse": bei
       1280×720 stand die Leiste mit offenem „Würfeln" GEMESSEN 6 px
       über (befund-land-0409 Punkt 10). Auf flachen Fenstern rücken
       seine Knopfreihen und sein Blocktitel noch einmal enger — auf
       grossen Schirmen bleibt beides, wie er es kennt. */
    #landFach .knopfreihe { margin: 3px 0; }
    #landFach details.fein > summary { padding: 4px 2px; }
    /* ⚠️ Und die Zwischenräume: jedes Label und jeder Klappblock gibt
       ein paar Pixel ab. Zusammen mit dem WILD-Titel im Knopf hat das
       Fach bei 1280×720 wieder Luft, statt auf der Grenze zu stehen —
       und genau auf der Grenze war es, als `bedienweg-wild` mit 14 px
       Überstand rot wurde. */
    #landFach label { margin-bottom: 4px; }
    #landFach details.fein { margin: 3px 0 2px; }
}
/* ⚠️⚠️ A.1.15.0: bei 1280×720 stand die linke Leiste WEITER über —
   gemessen 18 bis 40 px, aber NUR mit einem Admin-Konto. Der Grund
   ist nicht die Kartenliste (mit einem Eintrag 59 px, gedeckelt),
   sondern der Erklärtext im offenen Fach: allein 83 px. Deshalb war
   es auch mit einem normalen Konto nicht zu sehen — ein Admin hat
   eine Zeile „fremde Karte" mehr, und die kippt es.
   Ein Hilfetext ist kein Bedienelement: auf flachen Fenstern fällt
   er weg, die Knöpfe bleiben alle da. Das ist immer noch besser als
   eine Leiste, die still scrollt.
   ⚠️⚠️ A.2.4.3: Schwelle 780 → 900. Seit dem Assistent-Fach (A.2.3.0,
   eine Kopfzeile mehr) geht die Rechnung bei 864 nicht mehr auf:
   Fachinhalt MIT Hinweis (~535) + Listen-Untergrenze 48 + Summary 38
   + vier Fachköpfe (~148) > Leiste (787). Ohne den Hinweis passt es,
   die Liste zeigt wieder zwei, drei Einträge. Die Selbstsicherung
   sagt ihr „von selbst gesichert" ohnehin im Melder. */
@media (max-height: 900px) {
    aside.links .hinweis { display: none; }
}
#kartenListe li { display: flex; gap: 5px; margin-bottom: 5px; }
/* ⚠️ `min-width: 0` gehört dazu: ohne das schrumpft ein Flex-Kind nicht
   unter seine INHALTSBREITE, ein langer Kartenname macht die Zeile
   breiter als die Liste, und genau daher kam der waagerechte Rollbalken.
   Abgekürzt statt umgebrochen — zwei Zeilen hoch sah die Liste
   ausgefranst aus; der volle Name hängt als Kurzhinweis am Knopf. */
#kartenListe .karte {
    flex: 1; min-width: 0; text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#kartenListe .weg { flex: 0 0 32px; }
/* Fremde Karte (nur ein Admin bekommt sie überhaupt zu sehen) —
   erkennbar, ohne dass man sie mit der eigenen verwechselt. */
#kartenListe .fremde-karte .karte { opacity: 0.72; }
#kartenListe .fremd { font-size: 10px; color: var(--gedimmt); }
/* Subkarten hängen an ihrer Mutterkarte. Die Einrückung kommt aus dem
   Markup (sie hängt an der Tiefe), hier steht nur, wie sie aussehen:
   kleiner und mit einer Kante links, damit auf einen Blick klar ist,
   welche Einträge zusammengehören. */
#kartenListe .subkarte .karte {
    font-size: 12px; border-left: 2px solid var(--gedimmt); opacity: 0.9;
}
#kartenListe .offen .karte { outline: 1px solid var(--gedimmt); }

.mitte { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 0; }

/* Nimmt den Platz, der nach den Werkzeugzeilen übrig ist. */
/* ⚠️ `overflow: auto` erst AB Zoomstufe 1: bei „passend" passt die Karte
   genau hinein und es darf nichts scrollen (seine Ansage vom 13.08.).
   Wer hineinzoomt, will dagegen ausdrücklich einen Ausschnitt sehen —
   dann sind Rollbalken IM Bühnenfeld der einzige ehrliche Weg, und die
   Seite selbst scrollt weiterhin nicht. */
/* Die Hülle übernimmt den Platz, den vorher `.buehnenfeld` selbst im
   Spaltenfluss hatte — das Feld füllt sie aus. Sie rollt NICHT: nur so
   kann die Schärfeschicht über dem sichtbaren Ausschnitt stehen
   bleiben, während das Feld darunter rollt. */
/* ⚠️⚠️ `min-width: 0` UND `overflow: hidden` sind hier die tragenden
   Zeilen, nicht Beiwerk. Ohne sie hat der erste Anlauf am 16.08. die
   ganze Oberfläche gesprengt: sein Befund „ab einer gewissen Zoomstufe
   verschwinden die Menüs und das Bild wird nur noch von der Karte
   ausgefüllt". Der Grund ist die Vorgabe `min-width: auto` für
   Flex-Kinder — das Feld darf danach nicht kleiner werden als sein
   INHALT, und der Inhalt ist bei 8× ein 8000 px breites Canvas. Das
   Feld drückte damit die Leisten aus dem Bild. Vorher stand
   `.buehnenfeld` direkt in der Spalte und war über `width: 100 %`
   gedeckelt; die neue Hülle muss diesen Deckel ausdrücklich mitbringen. */
.buehnenhuelle {
    position: relative;
    flex: 1 1 auto;
    min-height: 0; min-width: 0;
    width: 100%;
    overflow: hidden;
}
.buehnenfeld {
    height: 100%; width: 100%;
    min-height: 0; min-width: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
/* ⚠️ `pointer-events: none` ist hier keine Feinheit, sondern die
   Bedingung: die ganze Zeiger-Rechnung hängt an `#buehne`. Eine Schicht,
   die Klicks abfängt, machte jeden Strich unmöglich. */
#schaerfe {
    position: absolute; left: 0; top: 0;
    pointer-events: none;
    border-radius: 8px;
}
/* ── Die Orts-Kartusche ── (A.3.76.0): oben rechts in der Hülle, die
   nicht rollt — der Titel steht fest, während die Karte wandert. */
#kartusche {
    position: absolute; top: 14px; right: 14px;
    pointer-events: none;
}
/* ── DIE BEDIENSCHICHT ── (A.3.121.0)
   ⚠️⚠️ Sie liegt über der Bühne UND über `#schaerfe`. Das ist ihr
   ganzer Zweck: bis hierher gingen Auswahlring, gewählter Weg, das
   Gummiband des Handzugs, die Zonenumrisse und das Löschziel auf die
   Bühne — und die Schärfeschicht deckte sie ab 2× vollständig zu
   (gemessen 0 Anzeige-Pixel auf jeder Zoomstufe).
   ⚠️ `pointer-events: none` ist Bedingung, nicht Geschmack: die ganze
   Zeiger-Rechnung hängt an `#buehne`. Eine Schicht, die Klicks
   abfängt, machte jeden Strich unmöglich — dieselbe Zeile und
   derselbe Grund wie bei `#schaerfe`. */
#bedienung {
    position: absolute; left: 0; top: 0;
    pointer-events: none;
    border-radius: 8px;
}
.buehnenfeld.gezoomt {
    overflow: auto;
    align-items: safe center; justify-content: safe center;
    cursor: grab;
}
.buehnenfeld.schiebt { cursor: grabbing; }
/* ⚠️⚠️ Ohne das passiert beim Zoomen NICHTS SICHTBARES. `#buehne` hat
   `max-width/max-height: 100%` — das ist die Regel, die bei „passend"
   die Karte ins Feld einpasst, und sie deckelt jede grössere Breite,
   die die Lupe setzt, stillschweigend wieder auf die Feldbreite.
   Gemessen: 760 → 952 px statt 760 → 1520 px, und das Feld bekam gar
   keinen Rollbalken. Am Bild war es nur als „der Zoom tut fast nichts"
   zu sehen. */
.buehnenfeld.gezoomt #buehne { max-width: none; max-height: none; }
#buehne {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    flex: 0 0 auto;
    background: #0c0a07;
    border: 1px solid var(--rand);
    border-radius: 8px;
    cursor: crosshair;
    touch-action: none;          /* sonst scrollt das Malen die Seite */
}

.hinweis { font-size: 11px; color: var(--gedimmt); line-height: 1.5; margin-top: 8px; }

/* Zwischenüberschrift in der linken Leiste (A.3.136.0): trennt
   „Erzeugen" und „Ausgeben" vom Karten-Fach. Eine Linie je Seite,
   damit sie als ABSCHNITT liest und nicht als weiteres Fach. */
.zwischen {
    display: flex; align-items: center; gap: 8px;
    font-size: 10px; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: var(--gedimmt);
    /* ⚠️ Knapp gehalten: jede Zeile hier ist Festkosten der Spalte,
       und die Spalte hat bei 720 px Fensterhöhe keine Luft. */
    margin: 8px 0 0;
}
.zwischen::before, .zwischen::after {
    content: ""; height: 1px; background: var(--rand); flex: 1;
}

/* Sicherungsstand — muss man sehen können, ohne danach zu suchen. */
.stand {
    font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
    text-align: center; padding: 5px 8px; margin-top: 8px;
    border: 1px solid var(--rand); border-radius: 6px;
    color: var(--gedimmt);
}
.stand.gut { color: var(--gut); border-color: rgba(127, 201, 138, 0.45); }
.stand.offen {
    color: #191509; background: var(--gold);
    border-color: var(--gold);
}
.hinweis code {
    font-family: ui-monospace, monospace; font-size: 10.5px;
    color: var(--gold); background: rgba(0,0,0,0.35);
    padding: 1px 4px; border-radius: 3px;
}

/* ── Werkzeugleiste über der Bühne ──
   Die Zeichen bekommen ihre EIGENE Vorschau (aus marken.js gezeichnet),
   damit man sieht was man setzt, statt es aus einem Wort zu raten. */
/* ⚠️ `display: flex` schlägt das `hidden`-Attribut — ohne diese Zeile
   stand die zugeklappte Formenzeile als leerer Balken über der Karte
   und nahm Höhe weg, die niemand braucht. */
.werkzeuge[hidden] { display: none; }
.werkzeuge {
    display: flex; flex-wrap: wrap; gap: 5px;
    width: 100%; padding: 8px;
    background: var(--feld); border: 1px solid var(--rand); border-radius: 9px;
}
/* ⚠️ A.3.133.0 — ENGER GESETZT, und das ist keine Kosmetik: die Gruppen
   brauchen Trenner, Trenner brauchen Platz, und Platz in dieser Leiste
   ist eine ZEILE MEHR und damit Höhe, die der Bühne fehlt. Gemessen bei
   1366 px: ungruppiert 4 Zeilen/159 px · gruppiert im alten Mass 5
   Zeilen/198 px · gruppiert in diesem Mass — siehe Kopf von
   `werkzeugleiste.js`. Wer hier wieder aufpolstert, nimmt der Karte die
   Höhe zurück. */
.werkzeuge .wz {
    display: flex; align-items: center; gap: 4px;
    padding: 4px 7px; font-size: 12px;
}
/* A.3.194.0: in der WERKZEUGLEISTE 7 → 5 px seitlich — die Gruppennamen
   brauchen Breite, und Breite ist dort eine Zeile (sonde-leistenhoehe).
   ⚠️ NUR `#werkzeuge`, nicht `.werkzeuge`: die Formentafel (`#formen`)
   trägt dieselbe Klasse, und mit schmaleren Kacheln brach ihre Zeile in
   der Gegenprobe von bedienweg-werkzeuge nicht mehr um (44/45). */
#werkzeuge .wz { padding: 4px 5px; }
.werkzeuge .wz img {
    width: 20px; height: 20px;
    /* Die Vorschau ist mit dunkler Tinte gezeichnet — auf der dunklen
       Werkstatt wäre sie unsichtbar, also hier aufhellen. */
    filter: invert(1) sepia(1) saturate(0.5) hue-rotate(5deg) brightness(1.25);
}
.werkzeuge .wz.an {
    background: var(--gold); color: #191509; border-color: var(--gold); font-weight: 700;
}
.werkzeuge .wz.an img { filter: none; }

/* ── DIE GRUPPEN DER OBEREN LEISTE ── (A.3.133.0)
   Sein Wort: „Derzeit ist es nur eine wilde undurchdachte Mischung."
   Fünfundzwanzig gleich aussehende Knöpfe in EINER umbrechenden Reihe —
   nichts sagte, was zusammengehört, und der Umbruch fiel dorthin, wo
   die Zeile gerade zu Ende war.
   Jede Gruppe ist jetzt ein eigener Block: sie bricht in SICH um, aber
   zwischen zwei Nachbargruppen zerfällt sie nicht mehr.
   ⚠️⚠️ DER TRENNER DARF DIE LEISTE NICHT HÖHER MACHEN. Sie steht über
   der Bühne, und „eine Zeile, die immer da ist, nimmt der Bühne die
   Höhe" ist in diesem Editor dreimal teuer bezahlt worden (der
   Leisten-Prüfstand fiel schon über 18 px). Deshalb KEINE Überschrift
   je Gruppe und keine eigene Zeile — nur ein Strich und etwas Luft, und
   beides gemessen: bei 1366 px bleibt es bei vier Zeilen.
   ⚠️ `align-items: flex-start`, damit ein Trennstrich nur so hoch wird
   wie seine eigene Gruppe und nicht über die ganze Leiste läuft. */
.werkzeuge .wzgruppe {
    display: flex; flex-wrap: wrap; gap: 4px;
}
/* ⚠️⚠️ A.3.199.0 — `display: flex` SCHLÄGT das `hidden`-Attribut. Dieselbe
   Falle steht seit A.1.6.0 eine Datei weiter oben bei `.werkzeuge[hidden]`
   (die zugeklappte Formenzeile stand als leerer Balken über der Karte) —
   und sie hat mich prompt wieder erwischt: die Schrittleiste schaltete die
   Gruppen `hidden`, die Leiste blieb GEMESSEN zweizeilig (79 px bei
   1366×768), und der Schritt „Land" zeigte weiter alle zwölf Werkzeuge. */
.werkzeuge .wzgruppe[hidden] { display: none; }
/* ⚠️⚠️ A.3.199.0 — auf SCHMALEN Fenstern fallen die Gruppennamen weg,
   und das ist gemessen: über die volle Breite gelegt kommt die Leiste
   bei 1366 px mit EINER Zeile aus (48 px), bei 1280 px nicht mehr
   (79 px) — und zwei Zeilen drückten Land und Leben auf 34 % Bühne,
   unter seine Marke von 35 % (13.08.). Die Namen kosten rund 180 px;
   ohne sie passen alle zwölf Werkzeuge und die Lupe in eine Zeile.
   Was zusammengehört, sagt bei 1280 px der Reiter oben („2 · Leben") —
   auf breiten Schirmen stehen die Namen wie seit A.3.194.0. */
@media (max-width: 1300px) { .werkzeuge .wzname { display: none; } }
.werkzeuge { align-items: flex-start; column-gap: 6px; row-gap: 4px; }
.werkzeuge .wzgruppe + .wzgruppe {
    border-left: 1px solid var(--rand); padding-left: 6px;
}
/* ── A.3.194.0 — DIE NAMEN DER GRUPPEN (Schritt 2 · Leben, sein „go") ──
   Land · Malen · Ziehen · Setzen · Anfassen. Der Name steht INLINE vor
   den Knöpfen, klein und gesperrt, KEINE eigene Zeile — die Regel von
   A.3.133.0 gilt weiter: was hier Höhe kostet, fehlt der Karte. Gemessen
   mit `sonde-leistenhoehe.cjs` (Werte im Kopf von CLAUDE.md). */
.werkzeuge .wzname {
    align-self: center;
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--gedimmt);
    margin-right: 1px; white-space: nowrap; user-select: none;
}
/* Das Vorwort „Zeichen:" am Zeichen-Knopf — immer gleich breit, damit die
   Maximalbreite des Artnamens (`#zeichenKnopf span`) weiter trägt. */
#zeichenKnopf .wzvor {
    font-size: 10px; font-weight: 600; letter-spacing: 1px;
    text-transform: uppercase; opacity: 0.75; margin-right: 1px;
}

.werkzeugzeile {
    display: flex; align-items: flex-end; gap: 10px;
    width: 100%; padding: 8px 10px;
    background: var(--feld); border: 1px solid var(--rand); border-radius: 9px;
}
/* ⚠️ `display: flex` aus der Regel darüber ÜBERSTIMMT das
   `hidden`-Attribut (das ist nur eine Vorgabe des Browsers). Die
   Zonen-Zeile stand deshalb seit A.1.4.0 immer über der Bühne, obwohl
   `werkzeug.js` sie mit `zeile.hidden = …` abschaltet — 55 px Höhe und
   ein Regler, der gerade nichts tut. Gefunden nicht im Code, sondern
   auf dem gerenderten Bild. */
.werkzeugzeile[hidden] { display: none; }
.werkzeugzeile label.klein { flex: 1; margin-bottom: 0; }
.werkzeugzeile button { flex: 0 0 auto; }
.werkzeugzeile .hinweis { flex: 2; }

/* ── DER BEDIENSATZ ZU DEN WEG-PUNKTEN ── (A.3.222.0)
   Seine Frage vom 06.09.: „Ich weiß nicht, wie ich neue Punkte setzen
   und/oder Punkte fixieren kann." Es gab alles davon schon — der Satz
   stand nur im MELDER, und der ist 300 ms später überschrieben.

   ⚠️⚠️ EIGENE REIHE IN DER ZEILE, KEINE ZWEITE ZEILE ÜBER DER BÜHNE.
   `flex: 0 0 100%` bricht ihn unter die Bedienelemente; die Zeile wächst
   dadurch, aber sie steht ohnehin nur mit gewähltem Weg. `order: 9` hält
   ihn hinter „✕ Entfernen", auch wenn später Felder dazukommen.
   ⚠️ `nowrap` + `ellipsis`: umbrechen dürfte er nicht — zwei Reihen
   Hinweis wären die Höhe, die der Karte fehlt. Was auf einem schmalen
   Fenster nicht mehr hinpasst, steht im `title` (editor.html). */
#wegZeile { flex-wrap: wrap; }
#wegZeile .wegtipp {
    flex: 0 0 100%; order: 9;
    margin-top: 2px; font-size: 11px; line-height: 1.35;
    color: var(--gedimmt);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Die Bearbeiten-Zeile trägt seit A.1.20.0 SECHS Bedienelemente ──
   (Was · Größe · Name · Spiegeln · Drehen · Schrift · Entfernen)

   ⚠️⚠️ Gemessen (`befund-bearbeitenzeile.cjs`): mit dem Schriftregler
   wuchs die Zeile bei 1280×720 von 72 auf 97 px Höhe. Sie lief dabei
   NICHT über — `scrollWidth` meldete 0, und kein Kind stand draussen.
   Ein Überstandsmass allein hätte davon nichts gesehen.

   ⚠️ Der erste Verdacht war FALSCH und die Messung hat es sofort
   gesagt: `min-width: 0` auf Labels und Namensfeld änderte exakt
   nichts (72/72/79/97 vorher wie nachher). Es ist die ANZEIGE
   `#bearbeitenWas`, ein Flex-Kind mit `flex: 0 1 auto`: sie schrumpft,
   und ihr Text BRICHT UM statt sich zu kürzen — bei „Gebirge
   (Zwillingsgipfel) · 2047 | 1151" auf drei Zeilen.

   Also dieselbe Lösung wie in der Kartenliste: `min-width: 0` am
   Flex-Kind und ABKÜRZEN statt umbrechen. Der volle Text hängt als
   Kurzhinweis daran (`bearbeiten.js` setzt ihn mit). */
#bearbeitenZeile label.klein, #bearbeitenZeile input[type=text] { min-width: 0; }
#bearbeitenWas {
    flex: 1 1 0; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Die Formen je Zeichen — eigene Zeile, damit klar ist, dass sie
   zum gewählten Werkzeug gehören und nicht selbst eines sind. */
.werkzeuge.formen { align-items: center; background: var(--feld2); }

/* ⚠️ SECHS Fassungen (A.1.7.0) passten bei 1366×768 nicht mehr in eine
   Zeile: die Tafel brach um, und die Bühne schrumpfte von 174 auf 93 px
   — die Karte war praktisch nicht mehr zu sehen. Auf schmalen Fenstern
   fiel deshalb das WORT weg und nur die Vorschau blieb.
   ⚠️⚠️ Seit A.1.12.0 sind es ZWÖLF, und damit gilt das auf JEDEM
   Fenster: zwölf Knöpfe mit Wort sind rund 1300 px breit, die Tafel
   bräche also auch auf einem grossen Schirm um. Das Wort fällt nun immer
   weg — und `nowrap` ist das Netz darunter, damit ein Umbruch der Bühne
   die Höhe auch dann nicht nehmen kann, wenn jemand die Schrift
   vergrössert. Die Reihenfolge stimmt so: die Vorschau gibt es, weil
   „Kette" nichts über das Bild sagt — umgekehrt trägt das Bild allein.
   Der Name steht weiterhin im Tooltip. */
.werkzeuge.formen { flex-wrap: nowrap; overflow-x: auto; }
/* A.3.60.5 — der PLATZHALTER im Bearbeiten-Modus: die Leiste haelt ihre
   Hoehe, auch wenn nichts gewaehlt ist. Vorher sprang die BUEHNE beim
   ANFASSEN eines Zeichens um die Leistenhoehe nach unten — mitten in
   der Zieh-Geste (17 Kartenpixel bei 4x, zoomdrag-messen.cjs). Die 35px
   sind die Hoehe der Leiste im ZIEL-Modus (nur die Vorschau-Reihe, ohne
   Art-Wahlzeile; box-sizing: border-box) — am Sprungprotokoll abgelesen
   (75er-Platzhalter -> 40px-Sprung nach oben, zoomdrag-messen 22.08.). */
.werkzeuge.formen.leer { min-height: 35px; }
.werkzeuge.formen .formtitel { flex: 0 0 auto; }
/* ── Die Art-Wahl eines Faches ── (A.3.15.0)
   ⚠️ `flex: 0 0 auto`, sonst quetscht `nowrap` sie mit wachsender
   Fassungszahl zusammen, bis nur noch der Pfeil dasteht — und dann wäre
   die Auswahl zwar da, aber nicht mehr lesbar. Genau der Fehler, den
   dieser Umbau beheben soll, nur eine Etage tiefer. */
.werkzeuge.formen .fachwahl {
    flex: 0 0 auto; margin-right: 6px; max-width: 190px;
    font-size: 13px; padding: 4px 6px;
}
.werkzeuge.formen .wz span { display: none; }
.werkzeuge.formen .wz img { width: 28px; height: 28px; }
.formtitel {
    font-size: 12px; color: var(--gold); font-weight: 600;
    letter-spacing: 0.4px; margin-right: 4px;
}

@media (max-width: 1100px) {
    /* Schmales Fenster: die Leisten stehen untereinander, hier IST
       Scrollen richtig — sonst bliebe für die Karte nichts übrig. */
    body.editor { height: auto; overflow: visible; }
    main { grid-template-columns: 1fr; min-height: 0; }
    aside { max-height: none; }
    .buehnenfeld { min-height: 50vh; }
}

/* ── Werkzeuge und Lupe in einer Zeile (A.1.10.0) ──
   Die Lupe hatte eine eigene Reihe über der Bühne. Zusammen mit der
   Marken- und der Beleben-Zeile waren das drei Reihen, die der Karte die
   Höhe wegnahmen — bei 1280×720 blieben ihr 218 px. */
.werkzeugkopf { display: flex; align-items: flex-start; gap: 8px; }
.werkzeugkopf #werkzeuge { flex: 1 1 auto; min-width: 0; }
/* A.3.194.0 — die Lupe steht IN der Leiste, rechtsbündig am Ende ihrer
   Zeile (`margin-left: auto` aus `.lupe`); Grund in editor.html. Ihre
   Knöpfe sind flacher als vorher, damit sie die Zeile nicht höher machen
   als die Werkzeugknöpfe. */
.werkzeuge .lupe { flex: 0 0 auto; align-self: center; }
.werkzeuge .lupe button { padding: 4px 8px; min-width: 32px; font-size: 12px; }
.werkzeuge .lupe #lupePassend { min-width: 66px; }
.werkzeugzeile.schmal:empty, .werkzeugzeile.schmal { margin: 0; }
.werkzeugzeile.schmal:not(:has(button:not([hidden]))) { display: none; }

/* ── Die Zeichenwerkstatt ── (A.3.7.0)
   Sein Auftrag vom 17.08.: das POI gross sehen und geringfügig
   bearbeiten. ⚠️ Der Bogen ist 276 px im Bild UND im Stil — weicht
   beides voneinander ab, radiert man neben dem, was man sieht
   (`nachEinheit` rechnet mit dem Verhältnis, aber ein verzerrter
   Bogen macht aus dem runden Radiergummi ein Ei).
   A.3.282.0: 240 → 276, die Spalte ist im Schritt LEBEN 300 px breit
   (unten bei `main`), und der Bogen füllt sie. `FELD` in
   zeichenwerkstatt.js und die Canvas-Masse in editor.html sind dieselbe
   Zahl — drei Stellen, EIN Mass. */
#werkstattBogen {
  width: 100%;
  max-width: 276px;
  aspect-ratio: 1 / 1;
  display: block;
  margin: 6px auto 8px;
  border-radius: 6px;
  border: 1px solid rgba(120, 100, 70, 0.45);
  cursor: crosshair;
  touch-action: none;             /* sonst scrollt das Fach beim Ziehen */
}
#werkstattFach.leer #werkstattBogen { cursor: default; opacity: 0.75; }

/* ── A.3.194.0 — DIE LEISTE AM GEWÄHLTEN ZEICHEN ── (Schritt 2 · Leben)
   Schwebt in der `.buehnenhuelle` über der Karte, unter dem Auswahlring
   (oder darüber, wenn unten kein Platz ist); `zeichenleiste.js` setzt
   left/top. Über den Leinwänden der Hülle (die haben keinen z-index),
   UNTER dem Formenblatt (z-index 30) — das Blatt deckt beim Wählen alles.
   ⚠️ `display: flex` schlägt `hidden` (Falle 18 in CLAUDE.md) — deshalb
   die [hidden]-Regel ausdrücklich. */
.zeichenleiste {
    position: absolute; z-index: 20;
    display: flex; align-items: center; gap: 3px;
    padding: 5px 6px;
    background: rgba(23, 19, 15, 0.94);
    border: 1px solid var(--rand); border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
}
.zeichenleiste[hidden] { display: none; }
.zeichenleiste .tag {
    font-size: 10.5px; font-weight: 600; letter-spacing: 1px;
    text-transform: uppercase; color: var(--gold);
    margin: 0 5px 0 2px; max-width: 190px;
    overflow: hidden; text-overflow: ellipsis;
}
.zeichenleiste button { padding: 3px 7px; font-size: 12px; }
/* ── A.3.285.0 — DIESELBEN GRIFFE IM FACH ── (sein Auftrag 10.09.)
   Zwei Reihen zu drei Knöpfen: die rechte Spalte ist im Schritt LEBEN
   300 px breit, sechs Knöpfe nebeneinander passen dort nicht — sie
   würden umbrechen und die Reihenfolge zerreissen. `grid` hält sie in
   Form, ohne dass eine feste Breite geraten werden muss. */
.werkstattgriffe {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    margin: 8px 0 4px;
}
.werkstattgriffe[hidden] { display: none; }
.werkstattgriffe button {
    padding: 5px 4px; font-size: 12px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.werkstattgriffe button.an { color: var(--gold); border-color: var(--gold); }
#werkstattGross { font-weight: 700; }
/* A.3.207.0 / A.3.209.0 — ein SCHALTER in der Leiste zeigt seinen Zustand
   („❄ Schnee" am Zug, „⛰ hinters Gelände" am Zeichen): an = Gold, wie die
   gewählte Werkzeugtaste (.wz.an). Ein Knopf, der nicht sagt, ob er an ist,
   zwingt zum Ausprobieren. */
.zeichenleiste button.an,
/* A.3.225.0 — derselbe Zustand am Anker-Knopf der Weg-Zeile („📌 Punkt
   freigeben" steht Gold, solange der angetippte Punkt festgehalten ist).
   ⚠️ Der Selektor musste dazu: `.an` war nur für die Zeichenleiste gestylt,
   und ein Knopf, der seinen Zustand nur im WORT trägt, ist genau die halbe
   Auskunft, gegen die A.3.207.0 gebaut wurde. */
.werkzeugzeile button.an { background: var(--gold); color: #191509; border-color: var(--gold); font-weight: 700; }

/* ── A.3.282.0 — DIE WERKSTATT IST EIN FACH DER RECHTEN SPALTE ──
   Von A.3.194.0 bis A.3.280.0 stand `#werkstattFach` hier als
   schwebendes Fenster über der Karte (position: absolute, 268 px,
   `.ohneAnker`, max-height aus zeichenleiste.js). Sein Befund vom 09.09.:
   „zu klein, ungünstig positioniert, separates Fenster". Jetzt trägt es
   `.fach` und erbt Kopf und Rahmen der Nachbarn; `hidden` setzt weiter
   werkzeug.js mit dem Bearbeiten-Schalter.
   ⚠️ Der Körper-Bogen (Brücke) skaliert mit der Spalte wie der grosse
   Bogen — dieselbe Regel, sonst dreht man neben dem, was man sieht. */
#werkstattFach[hidden] { display: none; }
#werkstattKoerper {
    width: 100%; max-width: 276px; aspect-ratio: 276 / 193;
    display: block; margin: 4px auto 4px;
}
/* Der Körper-Stand („Blick 27° · Höhe 22° · Zeichen 240×168") wechselt mit
   jedem Drehbild — er bleibt EINE Zeile, sonst wüchse das Fenster unter
   dem gehaltenen Drehknopf (zeichenleiste.js, Kopf). */
#werkstattKoerperStand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── Die Motiv-Kacheln der Brücke ── (A.3.75.1)
   Drei Spalten unterm grossen Bild; die Vorschauen sind dunkle Tinte
   und werden wie in der Werkzeugleiste aufgehellt — die GEWÄHLTE
   Kachel steht auf Gold und zeigt die Tinte unverfälscht. */
#werkstattMotive {
  /* A.3.282.0 — VIER Spalten statt drei: im Fach rechts stehen unter dem
     grossen Bogen noch Grösse, Körper und Radierer; drei Reihen Kacheln
     statt vier lassen davon mehr ohne Rollen im Bild. Die grossen
     Motiv-Bilder hat ohnehin die Form-Zeile über der Bühne. */
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4px; margin: 0 0 8px;
}
/* ⚠️⚠️ A.3.282.0 — GESEHEN im zweiten Bildvorschlag: `display: grid`
   schlägt das `hidden`-Attribut (Falle 18 in CLAUDE.md). Unter einer
   gewählten BURG standen weiter die zehn Brücken-Motive, obwohl
   zeichenwerkstatt.js `gitter.hidden = true` längst gesetzt hatte — das
   war im schwebenden Fenster genauso, nur hat es dort niemand gesehen. */
#werkstattMotive[hidden] { display: none; }
#werkstattMotive .motiv {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 2px; font-size: 9.5px; line-height: 1.15;
}
#werkstattMotive .motiv img {
  width: 40px; height: 40px;
  filter: invert(1) sepia(1) saturate(0.5) hue-rotate(5deg) brightness(1.25);
}
#werkstattMotive .motiv.an {
  background: var(--gold); color: #191509; border-color: var(--gold); font-weight: 700;
}
#werkstattMotive .motiv.an img { filter: none; }
#werkstattWas { font-weight: 600; margin: 2px 0 0; }
.hinweis-leise { opacity: 0.7; margin: 4px 0 8px; }

/* ── A.3.193.0 — FEINEINSTELLUNG in den fünf Aussehen-Karten ──
   Sein Auftrag vom 03.09.: „zu überladen, unübersichtlich, nicht
   intuitiv." Vorn stehen je Karte zwei bis vier grobe Regler; der Rest
   liegt hinter diesem leisen Kopf mit der Zahl dahinter. Kein `.fach`:
   die Leisten-Regel (eins offen je Leiste) gilt den Karten, nicht ihrem
   Innenleben — zwei Karten offen wäre der alte Wust, eine Karte mit
   offener Feineinstellung ist gewollt. */
.fein { border-top: 1px dashed var(--rand); margin: 6px 0 4px; }
.fein > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between;
                  align-items: baseline; padding: 7px 2px; font-size: 12px; color: var(--gedimmt); }
.fein > summary::-webkit-details-marker { display: none; }
.fein > summary::after { content: '▸'; font-size: 11px; opacity: 0.7; }
.fein[open] > summary::after { content: '▾'; }
.fein > summary:hover { color: var(--text); }
.fein > summary .zahl { color: var(--gold); font-weight: 600; font-size: 11.5px; margin-left: auto; margin-right: 6px; }
.fein[open] > summary { margin-bottom: 6px; }
/* ⚠️⚠️ A.3.198.0 — DAS FACH „LANDMASSE" IST DICHT GESETZT, und zwar
   GEMESSEN: der WILD-Block steht als einziger IMMER offen, also zahlt
   jeder andere Weg seine Höhe mit. Mit offenem „Würfeln" stand die linke
   Leiste bei 1366×768 um 20 px und bei 1280×720 um 68 px über
   (befund-land-0409 Punkt 10). Drei Straffungen, nur in diesem Fach —
   auf grossen Schirmen ändert sich dadurch nichts Sichtbares:
   · die Knopfreihen rücken enger zusammen (10 → 5 px),
   · das Saat-Feld steht EINZEILIG (Wort links, Feld rechts) statt mit
     dem Wort darüber — die Form seiner Skizze („WILD-Saat 813454958"),
   · die Regler bleiben ZWEIZEILIG: einzeilig blieben von der schmalen
     Spalte rund 90 px Schiene, und der Wasseranteil hat 60 Stufen. */
/* ⚠️⚠️ A.3.200.0 — „· 🌪 WILD" IM FACHKOPF (sein Zuruf „Wo ist WILD hin?").
   Zwei Dinge, beide gemessen:
   · `margin-right: auto` wie bei `.zahl` — der Kopf ist ein Flexkasten
     mit `space-between`, ohne das stünde der Zusatz in der MITTE
     zwischen „LANDMASSE" und dem Pfeil statt daneben.
   · `nowrap` und ein Hauch weniger Sperrung: ein Kopf, der auf der
     schmalen linken Spalte UMBRICHT, kostet dieselben 18 px, die
     A.3.198.0 dreimal weggemessen hat (`sonde-fachkopf.cjs`). */
#landFach > summary .kopfwild {
    margin-right: auto; margin-left: 5px;
    white-space: nowrap; letter-spacing: 0.6px;
}
/* ⚠️ A.3.213.0 — bei OFFENEM Fach steht der Zusatz nicht: zwei Zeilen
   tiefer steht der Knopf „🌪 WILD" selbst, und „🌪 WILD" zweimal (Kopf +
   Knopf) war sein offener Punkt (06.09., „mache alle"). ZUGEKLAPPT bleibt
   er — dafür war er gebaut („Wo ist WILD hin?", A.3.200.0).
   `display: none` ändert den TEXT des Kopfes nicht: leisten.js merkt sich
   das offene Fach an `summary.textContent`, und der heisst weiter
   „Landmasse · 🌪 WILD" — ein gemerktes Fach findet sich beim nächsten
   Laden wieder. Rückweg: style.css.bak-vor-a3213. */
#landFach[open] > summary .kopfwild { display: none; }
#landFach .knopfreihe { margin: 5px 0; }
#landFach > label:has(input[type=text]) {
    display: flex; align-items: center; gap: 8px;
}
#landFach > label:has(input[type=text]) > input { flex: 1; min-width: 0; margin: 0; }
/* „↺ Vorgabe" je Karte: ein Knopf in voller Breite am Fuss der Karte. */
.fachZurueck { width: 100%; margin: 2px 0 10px; font-size: 12px; opacity: 0.85; }
.fachZurueck:hover { opacity: 1; }
#werkstattStand { min-height: 1.1em; }

/* ── Das Formenblatt ── (A.3.8.0, deine UI-Ansage vom 17.08.)
   ⚠️⚠️ Gemessen war die Formenzeile bei Burg unbenutzbar: 48 Fassungen,
   Vorschaubild 28 × 28 px, Leiste 1128 px breit bei 2638 px Inhalt —
   23 von 48 sichtbar. Das Blatt zeigt alle, mit Namen, gross genug zum
   Unterscheiden. Es liegt ÜBER der Bühne, damit es ihr keine Höhe nimmt
   (der A.1.7.0-Fehler: Tafel bricht um, Bühne 174 → 93 px). */
/* ⚠️⚠️ `:not([hidden])` ist hier die TRAGENDE Zeile, kein Beiwerk.
   Der erste Anlauf schrieb schlicht `#formenblatt { display: flex }` —
   und damit war das Blatt IMMER da. `[hidden]` ist nur die Vorgabe des
   Browsers; jede Autorenregel mit `display` schlägt sie. Das Attribut
   stand korrekt auf `true`, das Blatt lag trotzdem mit `inset: 0` und
   `z-index: 30` über der ganzen Bühne und fing JEDEN Klick — die Karte
   wäre unbedienbar gewesen.
   ⚠️ Gefunden hat es nur der Bedienweg-Punkt „ein Klick auf die Karte
   setzt das Zeichen". Die Prüfung `!blatt.hidden` sagte die ganze Zeit
   brav „geschlossen": sie fragte das ATTRIBUT, nicht das Bild.
   Familie: „Formular bietet an ≠ es wirkt". */
#formenblatt:not([hidden]) {
    position: absolute; inset: 0; z-index: 30;
    background: rgba(24, 20, 14, 0.96);
    display: flex; flex-direction: column;
    padding: 10px 12px 12px;
    overflow: hidden;
}
.formenblatt-kopf {
    display: flex; align-items: center; gap: 10px;
    flex: 0 0 auto; margin-bottom: 8px;
}
.formenblatt-kopf .formtitel { flex: 1 1 auto; font-size: 14px; }
/* ⚠️ `auto-fill` mit fester Mindestbreite statt einer Spaltenzahl: das
   Blatt steht auf jedem Fenster, ohne dass jemand Haltepunkte pflegt —
   eine von Hand gepflegte Zahl wird irgendwann nachgegeben. */
.formenblatt-raster {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    align-content: start;
}
.formenblatt-form {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 4px 6px;
    background: var(--feld2, #2a231a);
    border: 1px solid rgba(150, 125, 80, 0.35);
    border-radius: 6px;
    color: inherit; font: inherit; cursor: pointer;
}
.formenblatt-form:hover { border-color: var(--gold, #d9b45a); }
.formenblatt-form.an {
    border-color: var(--gold, #d9b45a);
    box-shadow: 0 0 0 1px var(--gold, #d9b45a) inset;
}
/* Auf Pergament, damit die Tusche so steht wie auf der Karte — auf
   dunklem Grund sieht eine schwarze Zeichnung nach nichts aus. */
.formenblatt-form img {
    width: 88px; height: 88px; object-fit: contain;
    background: #efdfba; border-radius: 4px; padding: 3px;
}
.formenblatt-form span {
    font-size: 11px; line-height: 1.25; text-align: center;
    opacity: 0.85; overflow-wrap: anywhere;
}
/* ── Das ARTEN-Blatt ── (A.3.138.0): mehrere Gruppen in EINEM rollenden
   Mantel — #formenblatt hat overflow:hidden, und im Fassungs-Blatt
   scrollt nur dessen eines Raster. Ohne den Mantel wären die unteren
   Gruppen abgeschnitten, ohne Balken. */
.formenblatt-rollen { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.formenblatt-rollen .formenblatt-raster { flex: none; overflow: visible; }
.formenblatt-gruppe {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: var(--gold, #d9b45a);
    margin: 12px 0 6px;
}
.formenblatt-gruppe::after { content: ""; height: 1px; background: var(--rand); flex: 1; }
/* Der Zeichen-Knopf trägt Bild UND Wort — das Bild wie die alten
   Art-Knöpfe, das Wort sagt die gemerkte Art. Die Maximalbreite hält
   die Leiste ruhig: ein Knopf, der mit der Wahl wächst, bricht die
   Zeile um und lässt die Bühne springen (A.3.60.5-Klasse). */
#zeichenKnopf span {
    white-space: nowrap; max-width: 128px;
    overflow: hidden; text-overflow: ellipsis;
}
/* Die Pinsel-Zeile steht beim VORWAHL-Werkzeug praktisch immer — jede
   Handbreit Polster hier ist Bühnenhöhe (der leisten-Stand hält die
   35-%-Untergrenze der Karte, seine Ansage vom 13.08.). */
#pinselZeile { padding: 4px 10px; align-items: center; }

/* ══ DIE POI-WAHL IN DER RECHTEN SPALTE ══ (A.3.197.0)
   Sein Befund vom 04.09.: „Die Auswahl ist unpraktisch und
   unübersichtlich, da ich die Karte ja nicht sehe und immer hin und her
   switchen muss." Gemessen (sonde-poiblatt.cjs): das Blatt über der
   Bühne verdeckte sie in BEIDEN Schirmgrössen zu 100 %.
   ⚠️⚠️ Hier gilt das Gegenteil der Blatt-Regeln: die Spalte ist SCHMAL
   (gemessen 213 px), also KEIN `minmax(104px, …)` — die Kacheln müssen
   mitschrumpfen. `minmax(0, 1fr)` statt einer festen Mindestbreite:
   sonst bricht das Raster auf EINE Spalte, und aus 34 Kacheln wird eine
   endlose Liste.
   ⚠️⚠️ DREI Spalten, nicht zwei — GEMESSEN: bei zwei Spalten standen
   2534 px Inhalt hinter 562 px Sichtfenster, also acht von
   vierunddreissig Kacheln. Drei Spalten drücken das Bild auf rund 56 px;
   die Warnung aus `formenblatt.js` gilt weiter (bei 28 px ist keine Burg
   von der anderen zu unterscheiden), 56 px liegen deutlich darüber.
   ⛔ NICHT auf vier Spalten gehen: dann wären es 40 px, und genau dort
   fängt das Raten an.
   ⚠️ Das Bild bekommt sein Mass über `aspect-ratio`, nicht über feste
   Pixel — sonst stünde es in der schmalen Spalte über den Rand. */
#poiWahl { display: block; }
.poigruppe {
    margin: 10px 0 4px; font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; opacity: 0.7;
}
.poigruppe:first-child { margin-top: 2px; }
.poiraster {
    display: grid; gap: 6px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Die Kachel selbst ist dieselbe wie auf dem Blatt — nur kleiner. Sie
   erbt `.artkachel`, damit `poiwahl.js` und das Blatt DIESELBE Klasse
   markieren (`.an`) und ein Prüfstand nicht zwei Namen kennen muss. */
#poiWahl .artkachel {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 5px 3px 4px;
    background: var(--feld2, #2a231a);
    border: 1px solid rgba(150, 125, 80, 0.35);
    border-radius: 5px;
    color: inherit; font: inherit; cursor: pointer;
}
#poiWahl .artkachel:hover { border-color: var(--gold, #d9b45a); }
#poiWahl .artkachel.an {
    border-color: var(--gold, #d9b45a);
    box-shadow: 0 0 0 1px var(--gold, #d9b45a) inset;
}
/* Auf Pergament — auf dunklem Grund sieht eine schwarze Zeichnung nach
   nichts aus (dieselbe Begründung wie beim Blatt). */
#poiWahl .artkachel img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
    background: #efdfba; border-radius: 3px; padding: 2px;
}
#poiWahl .artkachel span {
    font-size: 10px; line-height: 1.2; text-align: center;
    opacity: 0.85; overflow-wrap: anywhere;
}
/* ⚠️ Das Fach darf die Spalte nicht sprengen: 34 Kacheln sind mehr, als
   auf jeden Schirm passen. Es rollt IN SICH, damit die Aussehen-Karten
   darunter erreichbar bleiben. */
#poiFach[open] > #poiWahl {
    max-height: 66vh; overflow-y: auto; padding-right: 2px;
}