/* ============================================================================
   VEREDLER - GESTALTUNGSSYSTEM
   Ersetzt den alten <style>-Block aus index.html (Zeilen 1 bis 325).
   Einbinden mit:  <link rel="stylesheet" href="app/design.css" />

   ---------------------------------------------------------------------------
   WIE DIESE DATEI AUFGEBAUT IST
   ---------------------------------------------------------------------------
   1. Marken   - die Massa-Grüntöne, unverändert im Namen, leicht gestuft
   2. Token    - Farben, Abstände, Radien, Höhen, Schrift, Schatten
   3. Grundlage- Reset, Grundraster der Seite, Fokus, Schrift
   4. Bereiche - Kopf, Rail, Spalten, Bühne, Fuß
   5. Bausteine- Panel, Feld, Knopf, Liste, Ebenen, Meldung
   6. Overlays - Lightbox, 3D, Projektdaten, Zieh-Etikett
   7. Zustände - gesperrt, ausgewählt, Fehler, Bewegung, Druck

   ---------------------------------------------------------------------------
   WIE MAN FARBEN ÄNDERT
   ---------------------------------------------------------------------------
   Nur im Block ":root" arbeiten, niemals weiter unten einzelne Hex-Werte
   eintragen. Die Regeln unten greifen ausschließlich über var(). So bleibt
   die Oberfläche in einem Zug umstellbar.

   Es gibt zwei Leitern:
   - NEUTRALE  --n0 bis --n7, grün getönt, von Weiß bis fast Schwarz.
     Sie tragen alles, was keine Bedeutung hat: Flächen, Kanten, Text.
   - MARKE     --gruen-dunkel, --gruen-600, --gruen, --gruen-hell, --wiese.
     Grün heißt hier etwas: Auswahl, aktiver Zustand, primäre Aktion.
     Grün niemals als Dekoration auf ruhige Flächen legen.

   Feste Bedeutungszuordnung (bitte einhalten):
     ruhig          Fläche --n0   Rand --n3         Text --n7
     bedienbar      Fläche --n0   Rand --n4         Text --n7
     überfahren     Fläche --gruen-tint  Rand --n4  Text --n7
     ausgewählt     Fläche --wiese  Rand --gruen    Text --gruen-dunkel
     primär         Fläche --gruen  Rand --gruen    Text #fff
     fokussiert     2px --fokus, Abstand 2px, Farbe sonst unverändert
     gesperrt       Fläche --n1   Rand --n3         Text --n5
     Warnung        Fläche --warn-bg    Rand --warn-rand    Text --warn
     Fehler         Fläche --fehler-bg  Rand --fehler-rand  Text --fehler

   Alle Kontrastwerte in den Kommentaren sind mit der WCAG-Relativluminanz-
   Formel nachgerechnet, nicht geschätzt. Wer eine Farbe austauscht, rechnet
   den Wert neu und schreibt ihn hier hin. Zielwerte nach WCAG 2.2 AA:
   Fließtext 4.5:1, Grenzen von Bedienelementen und bedeutungstragende
   Symbole 3:1. Rein dekorative Trennlinien dürfen darunter liegen.

   ASCII-Regel: Variablennamen, Klassennamen und Schlüssel bleiben ohne
   Umlaute, damit nichts bricht. Die bestehende Variable heißt --gruen.
   ============================================================================ */

:root {
  /* ---------- Neutrale, grün getönt ------------------------------------- */
  --n0: #ffffff;   /* Panel, Karte, Eingabefeld                              */
  --n1: #f6f8f4;   /* Panelkopf, Fuß, ruhige Fläche                          */
  --n2: #e7ebe4;   /* Bühne hinter dem Plan                                  */
  --n3: #dde3d8;   /* dekorative Trennlinie, 1.31:1 auf --n0, bewusst schwach*/
  --n4: #75857a;   /* Grenze von Bedienelementen
                      3.89:1 auf --n0, 3.64:1 auf --n1, 3.23:1 auf --n2      */
  --n5: #5b6a5e;   /* Sekundärtext, Symbole
                      5.73:1 auf --n0, 5.36:1 auf --n1, 4.74:1 auf --n2      */
  --n6: #3a463c;   /* Feldbeschriftung, 9.90:1 auf --n0                      */
  --n7: #243027;   /* Fließtext, 13.75:1 auf --n0, 11.40:1 auf --n2          */

  /* ---------- Marke ------------------------------------------------------ */
  --gruen-dunkel: #20392a;  /* Kopfleiste, Text auf hellem Grün
                               12.50:1 auf --n0, 9.72:1 auf --wiese          */
  --gruen-600:    #2f6b3f;  /* Grün als Text oder Symbol
                               6.37:1 auf --n0, mit Weiß 6.37:1              */
  --gruen:        #3f7d4f;  /* Flächen, Rahmen, primärer Knopf
                               mit Weiß 4.93:1, als Rand auf --n0 4.93:1
                               NICHT als Text auf --n2 (nur 4.09:1)          */
  --gruen-hell:   #6fa979;  /* NUR Fläche, nie Text (2.75:1 auf --n0)        */
  --wiese:        #d9e8c9;  /* aktiver Zustand, Fläche                       */
  --wiese-tief:   #c4dbb0;  /* Innenkante im aktiven Zustand, dekorativ      */
  --gruen-tint:   #e8f2e9;  /* Fläche beim Überfahren, ruhiger Hinweiskasten
                               --gruen-dunkel darauf 10.90:1, --n7 11.99:1   */
  --beige:        #e7ddc9;  /* nur Plan-Signaturen                           */

  /* ---------- Zustände --------------------------------------------------- */
  --warn:        #8a5d00;  /* 5.76:1 auf --n0, 5.34:1 auf --warn-bg          */
  --warn-bg:     #fdf6e3;
  --warn-rand:   #b07800;  /* 3.80:1 auf --n0, als Grenze zulässig           */
  --fehler:      #a3271b;  /* 7.33:1 auf --n0, 6.41:1 auf --fehler-bg        */
  --fehler-bg:   #fdecea;
  --fehler-rand: #c0392b;  /* 5.44:1 auf --n0, mit Weiß 5.44:1               */

  /* ---------- Fokus ------------------------------------------------------ */
  --fokus:      #1f6f3a;   /* 6.19:1 auf --n0, 5.13:1 auf --n2, 4.81:1 auf --wiese */
  --fokus-hell: #8fd6a2;   /* Fokus auf dunklem Grund, 7.33:1 auf --gruen-dunkel   */

  /* Signalgelb, bewusst ausserhalb der grünen Welt: es markiert den Zeiger und
     den Fund auf dem Luftbild, wo Grün in der Landschaft untergehen würde. */
  --signal: #ffe23a;

  /* ---------- Zustandsfarben auf dunklem Grund (Kopfleiste) -------------- */
  --auf-dunkel:         #ffffff;  /* 12.50:1 auf --gruen-dunkel              */
  --auf-dunkel-gut:     #a8dcb5;  /*  8.08:1 auf --gruen-dunkel              */
  --auf-dunkel-warte:   #f0c36a;  /*  7.57:1 auf --gruen-dunkel              */
  --auf-dunkel-schlecht:#ff9c90;  /*  6.20:1 auf --gruen-dunkel              */
  --auf-dunkel-rand: rgba(255,255,255,.42); /* Grenze 3.55:1 auf --gruen-dunkel */
  --auf-dunkel-flaeche: rgba(255,255,255,.12);

  /* ---------- Altnamen, damit Skript und Zeichen-Module weiterlaufen ------ */
  --text:    var(--n7);
  --muted:   var(--n5);
  --linie:   var(--n3);
  --karte:   var(--n0);

  /* ---------- Abstände: 4px-Raster, sechs Stufen -------------------------- */
  --s1:  4px;   /* innerhalb eines Bedienelements, Symbol zu Text            */
  --s2:  8px;   /* zwischen verwandten Elementen                             */
  --s3: 12px;   /* Innenabstand eines Panels                                 */
  --s4: 16px;   /* zwischen Feldgruppen                                      */
  --s5: 24px;   /* Abschnittstrennung                                        */
  --s6: 32px;   /* nur Overlay-Ränder                                        */

  /* ---------- Radien: drei Stufen plus Pille ------------------------------ */
  --r1: 4px;    /* Farbfeld, kleines Symbolfeld                              */
  --r2: 6px;    /* Eingabefeld, Knopf, Werkzeugkachel                        */
  --r3: 10px;   /* Panel, Bühne, Overlay                                     */
  --r-pille: 999px;

  /* ---------- Höhen von Bedienelementen ----------------------------------- */
  --h1: 24px;   /* Symbolknopf in dichten Zeilen, Untergrenze nach WCAG 2.5.8 */
  --h2: 28px;   /* kompaktes Feld in der Ebenenliste                          */
  --h3: 32px;   /* Standard: Eingabe, Auswahl, Knopf, Panelkopf               */
  --h4: 36px;   /* Werkzeugkachel in der Rail                                 */

  /* ---------- Layout-Maße, alle auf dem 8er-Raster ------------------------  */
  --kopf-h: 48px;
  --fuss-h: 24px;
  --rail-b: 48px;
  --links:  280px;   /* wird beim Ziehen vom Skript überschrieben            */
  --rechts: 280px;

  /* ---------- Rahmen ------------------------------------------------------ */
  --rand-schwach: 1px solid var(--n3);   /* dekorative Trennung               */
  --rand-stark:   1px solid var(--n4);   /* Grenze eines Bedienelements       */

  /* ---------- Tiefe: Schatten nur für wirklich Schwebendes ---------------- */
  --e0: none;
  --e1: 0 1px 2px rgba(20,40,25,.10);                                /* Knopf auf der Bühne */
  --e2: 0 4px 12px rgba(20,40,25,.12), 0 1px 2px rgba(20,40,25,.06); /* Menü, Popover       */
  --e3: 0 16px 40px rgba(20,40,25,.24);                              /* Lightbox, 3D        */
  --schatten: var(--e2);   /* Altname, weiter benutzbar */

  /* ---------- Schrift ----------------------------------------------------- */
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
             "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-zahl: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                  Consolas, "Liberation Mono", monospace;

  /* Fünf Stufen, keine halben Pixel */
  --fs-xs: 11px;  --lh-xs: 16px;   /* Panelkopf, Legende, Versalien */
  --fs-sm: 12px;  --lh-sm: 16px;   /* Statuszeile, Hilfetext, Tooltip */
  --fs-md: 13px;  --lh-md: 18px;   /* Standard: Beschriftung, Knopf, Liste */
  --fs-lg: 15px;  --lh-lg: 20px;   /* Zahleneingabe, Ebenenname */
  --fs-xl: 20px;  --lh-xl: 26px;   /* genau eine Kennzahl je Panel */
}

/* ============================================================================
   3. GRUNDLAGE
   ============================================================================ */

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; overflow: hidden; }

/* Die Arbeitsfläche passt auf einen Bildschirm: Kopf, Mitte, Fuß.
   Nur die Spalten scrollen, die Seite selbst nie, auch nicht waagerecht. */
body {
  font-family: var(--schrift);
  font-size: var(--fs-md); line-height: var(--lh-md);
  background: var(--n1); color: var(--n7);
  -webkit-font-smoothing: antialiased;
  display: grid; grid-template-rows: var(--kopf-h) 1fr var(--fuss-h);
  height: 100dvh; min-width: 0;
}

header { display: none; }   /* ersetzt durch die Kopfleiste */

/* Alle Maße, Flächen und Koordinaten mit gleich breiten Ziffern, damit
   Werte untereinander vergleichbar bleiben. */
.zahl,
input[type=number],
.stats .line span:last-child,
.fuss b,
.grunddetails .kv span:last-child {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- Fokus: sichtbar auf allem Bedienbaren, nicht nur in Formularen ------
   Der alte Block schaltete den Ring mit outline:none ab. Das ist hier
   bewusst umgekehrt: erst gilt der Ring überall, dann folgen die Ausnahmen
   für dunkle Flächen. 2px Stärke, 2px Abstand, nach WCAG 2.2 Focus Appearance. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}
.kopf :focus-visible,
.lightbox :focus-visible,
.m3d :focus-visible,
.zoomctl button:focus-visible {
  outline-color: var(--fokus-hell);
}
/* Maus- und Zeigerbedienung bleibt ruhig, die Tastatur bekommt den Ring. */
:focus:not(:focus-visible) { outline: none; }

/* Dezente Rollbalken in den Spalten */
.seite-inhalt, #histTree { scrollbar-width: thin; scrollbar-color: var(--n4) transparent; }
.seite-inhalt::-webkit-scrollbar, #histTree::-webkit-scrollbar { width: 10px; }
.seite-inhalt::-webkit-scrollbar-thumb, #histTree::-webkit-scrollbar-thumb {
  background: var(--n3); border: 3px solid transparent; background-clip: content-box; border-radius: var(--r-pille);
}
.seite-inhalt:hover::-webkit-scrollbar-thumb, #histTree:hover::-webkit-scrollbar-thumb { background: var(--n4); background-clip: content-box; }

/* ============================================================================
   4. BEREICHE
   ============================================================================ */

/* ---------- Kopfleiste ---------------------------------------------------- */
.kopf {
  display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3);
  background: var(--gruen-dunkel); color: var(--auf-dunkel); min-width: 0;
}
.kopf .marke {
  font-weight: 700; font-size: var(--fs-md); letter-spacing: .02em; flex-shrink: 0;
}
.kopf select#projektWahl {
  background: var(--auf-dunkel-flaeche); border: 1px solid var(--auf-dunkel-rand);
  color: var(--auf-dunkel); border-radius: var(--r2);
  height: var(--h3); padding: 0 var(--s2); font: inherit; font-size: var(--fs-sm); font-weight: 600;
  max-width: 260px; min-width: 0; cursor: pointer;
}
.kopf select#projektWahl option { color: var(--n7); background: var(--n0); }
.kopf .kbtn {
  background: transparent; border: 1px solid var(--auf-dunkel-rand); color: var(--auf-dunkel);
  border-radius: var(--r2); min-height: var(--h1); height: var(--h3); padding: 0 var(--s2);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.kopf .kbtn:hover { background: var(--auf-dunkel-flaeche); }
.kopf .kbtn:disabled, .kopf .kbtn[aria-disabled="true"] { opacity: .45; cursor: default; }
.kopf .kbtn.primary { background: var(--gruen); border-color: var(--gruen); }
.kopf .kbtn.primary:hover { background: var(--gruen-600); border-color: var(--gruen-600); }
.kopf .rechts { margin-left: auto; display: flex; gap: var(--s1); align-items: center; }
.kopf .pl-stand { color: var(--auf-dunkel); }

/* ---------- Mitte: Rail, Spalten, Bühne -----------------------------------
   Die Spaltenbreite liegt am Element selbst, die Rasterspur steht auf auto.
   Damit verschwindet die Spur beim Zuklappen wirklich, statt als leerer
   Streifen stehen zu bleiben. Das Skript setzt --links / --rechts weiter auf
   .mitte, der Wert wird vererbt. Die Bühne bekommt minmax(0,1fr) und kann
   darum nichts waagerecht überlaufen lassen. */
.mitte {
  display: grid;
  grid-template-columns: var(--rail-b) auto minmax(0, 1fr) auto;
  min-height: 0; min-width: 0;
}

.rail {
  background: var(--n0); border-right: var(--rand-schwach);
  display: flex; flex-direction: column; align-items: center;
  padding: var(--s2) 0; gap: var(--s1);
}
.werkzeug {
  width: var(--h4); height: var(--h4); border-radius: var(--r2);
  border: 1px solid transparent; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--n5); position: relative; padding: 0;
}
.werkzeug svg { width: 20px; height: 20px; pointer-events: none; }
.werkzeug:hover { background: var(--gruen-tint); color: var(--gruen-dunkel); border-color: var(--n3); }
.werkzeug.aktiv { background: var(--wiese); color: var(--gruen-dunkel); border-color: var(--gruen); }
.werkzeug[disabled], .werkzeug[aria-disabled="true"] { color: var(--n4); cursor: default; background: transparent; }
.werkzeug .tip {
  position: absolute; left: calc(var(--rail-b) - 4px); top: 50%; transform: translateY(-50%);
  background: var(--gruen-dunkel); color: var(--auf-dunkel);
  padding: var(--s1) var(--s2); border-radius: var(--r2);
  font-size: var(--fs-sm); line-height: var(--lh-sm); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 40; box-shadow: var(--e2);
}
/* Der Name erscheint auch bei Tastaturbedienung, nicht nur unter der Maus. */
.werkzeug:hover .tip, .werkzeug:focus-visible .tip { opacity: 1; }
.rail .trenner { width: 24px; height: 1px; background: var(--n3); margin: var(--s1) 0; }

/* ---------- Spalten -------------------------------------------------------- */
.seite {
  background: var(--n0); display: flex; flex-direction: column;
  min-height: 0; min-width: 0; position: relative;
}
.seite.links  { width: var(--links);  border-right: var(--rand-schwach); }
.seite.rechts { width: var(--rechts); border-left: var(--rand-schwach); }
.seite.zu { display: none; }
.seite-inhalt {
  overflow-y: auto; overflow-x: hidden; padding: var(--s2);
  display: flex; flex-direction: column; gap: var(--s2); min-width: 0;
}
.griffkante { position: absolute; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 6; }
.seite.links  .griffkante { right: -3px; }
.seite.rechts .griffkante { left: -3px; }
.griffkante:hover { background: var(--gruen); opacity: .35; }

/* ---------- Bühne ----------------------------------------------------------
   Senkrecht gestapelt: Plan oben, Legende darunter. Vorher lagen Plan, Karte
   und Legende als drei Spalten nebeneinander, dadurch wurde der Plan schmal.
   Der Plan füllt den Rest und springt nicht, weil er über flex:1 misst und
   nicht über eine feste Höhe. */
.stage-wrap {
  position: relative; background: var(--n2);
  min-height: 0; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2);
}
#stage {
  flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden;
  border-radius: var(--r3); background: transparent;
}
#karte {
  display: none;                 /* Ausgangszustand, das Skript schaltet um */
  flex: 1 1 auto; min-height: 0; min-width: 0;
  border-radius: var(--r3); position: relative; overflow: hidden;
}
/* Nur die Bühnen-Zeichnung wird auf volle Größe gezogen. Früher galt das für
   jedes <svg> im Dokument, dadurch wuchsen auch alle Symbole in Knöpfen. */
#stage svg, svg#svg { width: 100%; height: 100%; display: block; border-radius: var(--r3); }
/* Leaflet-Vektor-Overlay ausnehmen, sonst rendert es mit 0 Breite nichts. */
.leaflet-pane svg, .leaflet-overlay-pane svg { width: auto !important; height: auto !important; border-radius: 0; }

.zoomctl {
  position: absolute; top: var(--s4); right: var(--s4); z-index: 5;
  display: flex; flex-direction: column; gap: var(--s1);
}
.zoomctl button {
  width: var(--h4); height: var(--h4); font-size: var(--fs-xl); font-weight: 700;
  border: var(--rand-stark); background: var(--n0); border-radius: var(--r2);
  cursor: pointer; box-shadow: var(--e1); color: var(--gruen-dunkel);
  display: grid; place-items: center; padding: 0;
}
.zoomctl button svg { width: 16px; height: 16px; }
.zoomctl button:hover { background: var(--gruen-tint); }
.zoomctl #zoomFit { font-size: var(--fs-sm); font-weight: 600; }
.zoomctl button.active {
  background: var(--gruen-dunkel); color: var(--auf-dunkel); border-color: var(--gruen-dunkel);
}

.gruppe-prompt {
  position: absolute; top: var(--s4); left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: var(--s3);
  background: var(--n0); border: 1px solid var(--gruen); border-radius: var(--r3);
  padding: var(--s2) var(--s3); box-shadow: var(--e2);
  font-size: var(--fs-md); color: var(--n7);
}
.gruppe-prompt .btn { width: auto; padding: 0 var(--s3); height: var(--h2); }

.legend {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: var(--s3);
  padding: 0 var(--s1); font-size: var(--fs-sm); line-height: var(--lh-sm);
  color: var(--n5);   /* 4.74:1 auf der Bühnenfläche --n2 */
}
.legend i {
  display: inline-block; width: 12px; height: 12px; border-radius: var(--r1);
  margin-right: var(--s1); vertical-align: -1px;
}

/* Fadenkreuz beim Abklicken auf der Karte */
.fadenkreuz { position: absolute; inset: 0; pointer-events: none; z-index: 600; display: none; }
.fadenkreuz .fk-h, .fadenkreuz .fk-v {
  position: absolute; background: rgba(255,255,255,.9); box-shadow: 0 0 1px rgba(0,0,0,.75);
}
.fadenkreuz .fk-h { left: 0; right: 0; height: 1px; }
.fadenkreuz .fk-v { top: 0; bottom: 0; width: 1px; }
.fadenkreuz .fk-dot {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border: 2px solid var(--signal); border-radius: 50%; background: rgba(255,226,58,.25);
}

/* Suchlauf: der Puls zeigt, dass die Flurstück-Abfrage läuft. Zweckgebunden,
   darum erlaubt, aber unter prefers-reduced-motion abgeschaltet. */
.scan::after {
  content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px;
  margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid var(--signal);
  animation: scanpuls .9s ease-out infinite;
}
@keyframes scanpuls { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(3.4); opacity: 0; } }
path.alkis-found {
  stroke-dasharray: 2400; stroke-dashoffset: 2400;
  animation: alkisDraw .9s ease forwards; filter: drop-shadow(0 0 5px var(--signal));
}
@keyframes alkisDraw { to { stroke-dashoffset: 0; } }

/* ---------- Statusleiste ---------------------------------------------------
   Der Fuß ist die Wahrheit über den Systemzustand und darf nie umbrechen.  */
.fuss {
  display: flex; align-items: center; gap: var(--s4); padding: 0 var(--s3);
  background: var(--n1); border-top: var(--rand-schwach);
  font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--n5);
  overflow: hidden; white-space: nowrap; min-width: 0;
}
.fuss b { color: var(--n7); font-weight: 700; }
.fuss .rechts { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.fuss .fbtn {
  border: 0; background: transparent; font: inherit; font-size: var(--fs-sm); color: var(--n5);
  cursor: pointer; min-height: var(--h1); padding: 0 var(--s2); border-radius: var(--r1);
}
.fuss .fbtn:hover { background: var(--gruen-tint); color: var(--gruen-dunkel); }
.fuss .fbtn.an { background: var(--wiese); color: var(--gruen-dunkel); font-weight: 600; }
.fuss .fbtn:disabled { color: var(--n4); cursor: default; background: transparent; }

/* ============================================================================
   5. BAUSTEINE
   ============================================================================ */

/* ---------- Panel ----------------------------------------------------------
   Ein Panel, eine Anatomie: Kopf 32px auf --n1, Rumpf mit --s3 Innenabstand.
   Der Innenabstand sitzt am Panel, der Kopf hebt ihn seitlich einmal auf.
   Das ist bewusst die einzige Gegenrechnung, weil der Kopf im Markup ein Kind
   des Panels ist und randlos über die volle Breite laufen muss. */
.group {
  border: var(--rand-schwach); border-radius: var(--r3); background: var(--n0);
  padding: 0 var(--s3) var(--s3); margin: 0; overflow: hidden; flex-shrink: 0; min-width: 0;
}
.group > .label {
  display: flex; align-items: center; gap: var(--s2);
  margin: 0 calc(-1 * var(--s3)) var(--s3); padding: 0 var(--s3);
  height: var(--h3); flex-shrink: 0;
  background: var(--n1); border-bottom: var(--rand-schwach);
  font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--n5);                 /* 5.36:1 auf --n1 */
  cursor: grab; user-select: none;
}
.group > .label:active { cursor: grabbing; }
/* Der Aufklapp-Pfeil trägt Bedeutung und braucht darum 3:1. Das frühere
   Braille-Griffsymbol ist weg: es hatte 1.53:1 und keine Funktion. */
.group > .label::after {
  content: "▾"; margin-left: auto; color: var(--n5); font-size: var(--fs-xs);
  transition: transform .15s;
}
.group.zu { padding-bottom: 0; }
.group.zu > .label { margin-bottom: 0; border-bottom: 0; }
.group.zu > .label::after { transform: rotate(-90deg); }
.group.zu > *:not(.label) { display: none !important; }
.group.zieht { opacity: .4; }
.group.ziel { border-color: var(--gruen); box-shadow: 0 0 0 2px rgba(63,125,79,.22); }
/* Nichts darf über den Panel-Rand hinauslaufen. */
.group input, .group select, .group textarea, .group .btn { max-width: 100%; }

/* Panels ohne Kopfzeile: Kennzahlen und Meldung. Genau einmal definiert. */
.stats {
  border: var(--rand-schwach); border-radius: var(--r3); background: var(--n0);
  padding: var(--s3); flex-shrink: 0; font-size: var(--fs-md); line-height: 1.7;
}
.stats .line { display: flex; justify-content: space-between; gap: var(--s2); }
.stats .line span:first-child { color: var(--n5); min-width: 0; }
.stats .line span:last-child { font-weight: 700; color: var(--gruen-dunkel); text-align: right; }

/* Der Sammelbehälter aus dem Altbestand, sichtbar wird er nie allein. */
.panel { min-width: 0; }

/* ---------- Schritt-Umschalter (liegt im Altbestand, bleibt bedienbar) ----- */
.stepper { display: flex; gap: var(--s1); margin-bottom: var(--s2); }
.stepper .step {
  flex: 1; min-height: var(--h3); padding: 0 var(--s1);
  font-size: var(--fs-xs); font-weight: 700; font-family: inherit;
  border: var(--rand-stark); background: var(--n0); border-radius: var(--r2);
  cursor: pointer; color: var(--n5);
}
.stepper .step:hover { background: var(--gruen-tint); color: var(--gruen-dunkel); }
.stepper .step.active {
  background: var(--gruen); color: var(--auf-dunkel); border-color: var(--gruen);
}
.stepnav { display: flex; gap: var(--s2); margin-bottom: var(--s4); }
.stepnav .btn { flex: 1; }

/* ---------- Felder --------------------------------------------------------- */
label.field {
  display: block; font-size: var(--fs-sm); line-height: var(--lh-sm);
  margin: var(--s3) 0 var(--s1); font-weight: 600; color: var(--n6);
}
select, input[type=number], input[type=text], input[type=search], textarea {
  width: 100%; min-width: 0; min-height: var(--h3); padding: 6px 9px;
  font-family: inherit; font-size: var(--fs-md); line-height: var(--lh-md);
  border: var(--rand-stark);         /* 3.89:1, erfüllt WCAG 1.4.11 */
  border-radius: var(--r2); background: var(--n0); color: var(--n7);
}
input[type=number] { font-size: var(--fs-lg); font-weight: 600; }
textarea { resize: vertical; min-height: 56px; line-height: 1.45; }
select:hover, input:hover, textarea:hover { border-color: var(--n5); }
select:focus, input:focus, textarea:focus {
  border-color: var(--gruen); box-shadow: 0 0 0 3px rgba(63,125,79,.16);
}
select:disabled, input:disabled, textarea:disabled,
select[aria-disabled="true"], input[aria-disabled="true"] {
  background: var(--n1); border-color: var(--n3); color: var(--n5); cursor: default;
}
input::placeholder, textarea::placeholder { color: var(--n5); opacity: 1; }
input[type=range] { accent-color: var(--gruen); }
input[type=checkbox] { accent-color: var(--gruen); }

.row { display: flex; gap: var(--s2); }
.row > * { flex: 1; min-width: 0; }
.btnrow { display: flex; gap: var(--s2); }
.btnrow .btn { width: auto; flex: 1; }

/* ---------- Umschaltgruppe -------------------------------------------------- */
.seg { display: flex; background: var(--n2); border-radius: var(--r2); padding: 3px; gap: 3px; }
.seg button {
  flex: 1; min-height: var(--h2); border: 1px solid transparent; background: transparent;
  padding: 0 var(--s1); border-radius: var(--r1); cursor: pointer;
  font-family: inherit; font-size: var(--fs-md); font-weight: 600;
  color: var(--n5);                  /* 4.74:1 auf --n2 */
}
.seg button:hover { color: var(--gruen-dunkel); background: var(--gruen-tint); }
.seg button.active {
  background: var(--n0); color: var(--gruen-dunkel); border-color: var(--n4); box-shadow: var(--e1);
}

/* ---------- Knöpfe ---------------------------------------------------------- */
.btn {
  width: 100%; min-height: var(--h3); padding: var(--s1) var(--s3);
  border: var(--rand-stark); background: var(--n0); border-radius: var(--r2);
  cursor: pointer; font-family: inherit; font-size: var(--fs-md); font-weight: 600;
  color: var(--n7); transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--gruen-tint); border-color: var(--n5); }
.btn:active { background: var(--wiese); }
.btn.primary { background: var(--gruen); border-color: var(--gruen); color: var(--auf-dunkel); }
.btn.primary:hover { background: var(--gruen-600); border-color: var(--gruen-600); }
.btn.active { background: var(--wiese); border-color: var(--gruen); color: var(--gruen-dunkel); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--n1); border-color: var(--n3); color: var(--n5); cursor: default;
}
.btn:disabled:hover { background: var(--n1); border-color: var(--n3); }
.btn.linklike {
  border: 0; background: transparent; color: var(--n5); padding: var(--s1);
  font-weight: 500; text-decoration: underline; min-height: var(--h1); width: 100%;
}
.btn.linklike:hover { background: transparent; color: var(--gruen-dunkel); }

/* ---------- Aufklappbare Grundstücksdaten ----------------------------------- */
.grunddetails {
  margin-top: var(--s3); border: var(--rand-schwach); border-radius: var(--r3);
  background: var(--n0); padding: var(--s2) var(--s3); font-size: var(--fs-md);
}
.grunddetails > summary {
  cursor: pointer; font-weight: 600; color: var(--gruen-dunkel); list-style: none;
  min-height: var(--h1); display: flex; align-items: center; gap: var(--s1);
}
.grunddetails > summary::-webkit-details-marker { display: none; }
.grunddetails > summary::before { content: "\25b8"; color: var(--n5); }
.grunddetails[open] > summary::before { content: "\25be"; }
.grunddetails .dd-body { margin-top: var(--s2); }
.grunddetails .kv {
  display: flex; justify-content: space-between; gap: var(--s3);
  padding: var(--s1) 0; border-top: 1px solid var(--n3);
}
.grunddetails .kv span:first-child { color: var(--n5); }
.grunddetails .kv span:last-child { font-weight: 600; text-align: right; }

/* ---------- Hinweis, Meldung, Warnung ---------------------------------------- */
.hint {
  font-size: var(--fs-sm); line-height: 1.5; color: var(--n5); margin-top: var(--s3);
}
.hint a { color: var(--gruen-600); }

.warnung {
  display: none; margin: 0; padding: var(--s3);
  background: var(--fehler-bg); border: 1px solid var(--fehler-rand); border-radius: var(--r3);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--fehler);   /* 6.41:1 */
  flex-shrink: 0;
}
.warnung.on { display: block; }
.warnung:empty, .warnung.on:empty { display: none; }   /* kein leerer roter Kasten */

/* Die fachliche Pruefung meldet zwei Schweregrade. Ein Verstoss gegen die GRZ
   ist etwas anderes als ein fehlender Stellplatz-Nachweis, und das muss man
   sehen, ohne den Text zu lesen. Gelb ist der Regelfall, Rot nur bei Fehlern. */
.warnung { background: var(--warn-bg); border-color: var(--warn-rand); color: var(--warn); }
.warnung.hat-fehler { background: var(--fehler-bg); border-color: var(--fehler-rand); color: var(--fehler); }
.warnung .wz + .wz { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid currentColor; }
.warnung .wz-mehr { opacity: .75; font-style: italic; }
/* Ein einzelner Fehler faerbt den ganzen Kasten rot (.hat-fehler). Steht er
   zwischen Warnungen, hebt ihn zusaetzlich der fette Satz hervor. */
.warnung .wz-fehler { font-weight: 600; }

/* Unbekannte Kennzahl. Sie steht bewusst da, statt weggelassen zu werden: der
   Anwender soll sehen, DASS die Zahl fehlt. Aber sie darf nicht so aussehen,
   als waere sie ein Ergebnis. Der Grund steht im Tooltip der Zeile. */
.stats .line.unklar span:last-child {
  font-weight: 500; color: var(--n5); font-style: italic;
}
.stats .line.unklar { cursor: help; }

.editbar {
  display: none; margin-top: var(--s3); padding: var(--s3);
  background: var(--gruen-tint); border: 1px solid var(--wiese-tief); border-radius: var(--r3);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--gruen-dunkel);   /* 10.90:1 */
}
.editbar.on { display: block; }

/* Ungültige Eingabe: Rand, Fläche und Ring gemeinsam, nie Farbe allein. */
input.invalid, select.invalid {
  border-color: var(--fehler-rand) !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,.18) !important;
  background: var(--fehler-bg) !important;
}

/* ---------- Ablegefläche ------------------------------------------------------ */
.dropzone {
  border: 2px dashed var(--n4); border-radius: var(--r3); padding: var(--s4) var(--s3);
  text-align: center; color: var(--n5); font-size: var(--fs-sm); line-height: 1.5;
  background: var(--n1); cursor: default;
}
.dropzone.over { border-color: var(--gruen); background: var(--gruen-tint); color: var(--gruen-dunkel); }
.dropzone.set {
  border-style: solid; border-color: var(--gruen); background: var(--gruen-tint);
  color: var(--gruen-dunkel); font-weight: 600;
}

/* ---------- Vorschlagsliste (Adresse) ------------------------------------------ */
.vorschlaege { margin-top: 2px; }
.vorschlaege div {
  padding: var(--s2) var(--s3); font-size: var(--fs-md); min-height: var(--h3);
  cursor: pointer; border: var(--rand-schwach); border-top: 0; background: var(--n0); color: var(--n7);
}
.vorschlaege div:first-child { border-top: var(--rand-schwach); border-radius: var(--r2) var(--r2) 0 0; }
.vorschlaege div:last-child { border-radius: 0 0 var(--r2) var(--r2); }
.vorschlaege div:hover { background: var(--gruen-tint); }
.vorschlaege div.akt { background: var(--wiese); color: var(--gruen-dunkel); font-weight: 600; }

/* ---------- Bibliothek --------------------------------------------------------- */
.palette { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  user-select: none; cursor: grab; touch-action: none;
  display: inline-flex; align-items: center; min-height: var(--h2);
  padding: 0 var(--s3); font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  border: var(--rand-stark); border-radius: var(--r-pille);
  background: var(--n0); color: var(--gruen-dunkel);
}
.chip:hover { background: var(--gruen-tint); border-color: var(--gruen); }
.chip:active { cursor: grabbing; background: var(--wiese); }

.bildgalerie { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.bildgalerie img {
  width: 62px; height: 46px; object-fit: cover; border-radius: var(--r1);
  border: 1px solid var(--n3); cursor: pointer; background: var(--n2);
}
.bildgalerie img:hover { border-color: var(--gruen); }
.bildgalerie .gtitle {
  width: 100%; font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--n5); margin-top: var(--s1);
}

/* ---------- Ebenenliste ---------------------------------------------------------
   Dichte Werkzeug-Optik: 28px Zeilen, aber jedes Ziel bleibt mindestens 24px. */
.ebenen { border: var(--rand-schwach); border-radius: var(--r3); overflow: hidden; background: var(--n0); }
.ebene {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s2); min-height: var(--h2); border-bottom: 1px solid var(--n3);
}
.ebene:last-child { border-bottom: 0; }
.ebene .eye {
  width: var(--h1); height: var(--h1); border: 0; background: none; cursor: pointer;
  color: var(--gruen-600); display: flex; align-items: center; justify-content: center;
  border-radius: var(--r1); flex: 0 0 auto; padding: 0;
}
.ebene .eye svg { width: 16px; height: 16px; }
.ebene .eye:hover { background: var(--gruen-tint); }
.ebene.off { background: var(--n1); }
.ebene.off .eye { color: var(--n4); }   /* 3.64:1 auf --n1, bleibt erkennbar */
.ebene.off .enm { color: var(--n5); }   /* 5.36:1 auf --n1 */
.ebene .sw {
  width: 12px; height: 12px; border-radius: var(--r1);
  background: var(--c, var(--n3)); border: 1px solid var(--b, var(--n4)); flex: 0 0 auto;
}
.ebene .enm {
  flex: 1; min-width: 0; font-size: var(--fs-md); color: var(--n7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ebene .opac { width: 56px; flex: 0 0 auto; accent-color: var(--gruen); cursor: pointer; }
.ebene .ico {
  width: var(--h1); height: var(--h1); border: var(--rand-stark); background: var(--n0);
  border-radius: var(--r1); cursor: pointer; color: var(--n5);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0;
}
.ebene .ico svg { width: 14px; height: 14px; }
.ebene .ico:hover { background: var(--gruen-tint); border-color: var(--gruen); color: var(--gruen-dunkel); }
.ebene .ico.active { background: var(--gruen); color: var(--auf-dunkel); border-color: var(--gruen); }
.ebene .ico.lockbtn.locked {
  background: var(--fehler-rand); color: var(--auf-dunkel); border-color: var(--fehler-rand);
}

/* Ebenen-Zeile kompakt halten, damit die Namen lesbar bleiben. */
.seite .ebenen label { min-width: 0; }
.seite .ebenen input[type=range] { max-width: 62px; }

/* Einfache Ebenenzeile aus dem Altbestand (derzeit ohne Markup, bleibt
   erhalten, damit ein späteres Wiederverwenden nicht nackt dasteht). */
.lay {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s1) 0; border-bottom: 1px solid var(--n3); min-height: var(--h2);
}
.lay:last-of-type { border-bottom: 0; }
.lay input[type=checkbox] { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--gruen); }
.lay .lname { flex: 1; min-width: 0; font-size: var(--fs-md); color: var(--n7); }
.lay .btn { padding: 0 var(--s3); font-size: var(--fs-xs); width: auto; min-height: var(--h1); }

/* ---------- Projektstand ---------------------------------------------------------
   Der Punkt trägt Bedeutung, darum immer zusammen mit Text, nie Farbe allein. */
.pl-stand {
  font-size: var(--fs-sm); font-weight: 600; display: inline-flex; align-items: center;
  gap: var(--s1); white-space: nowrap; min-width: 0;
}
.pl-punkt { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
/* Auf hellem Grund */
.pl-stand.gut      { color: var(--gruen-600); }   /* 6.37:1 auf --n0 */
.pl-stand.warte    { color: var(--warn); }        /* 5.76:1 auf --n0 */
.pl-stand.schlecht { color: var(--fehler); }      /* 7.33:1 auf --n0 */
/* In der dunklen Kopfleiste */
.kopf .pl-stand.gut      { color: var(--auf-dunkel-gut); }
.kopf .pl-stand.warte    { color: var(--auf-dunkel-warte); }
.kopf .pl-stand.schlecht { color: var(--auf-dunkel-schlecht); }

/* ---------- Historien-Baum --------------------------------------------------- */
#histTree {
  max-height: 230px; overflow-y: auto; border: var(--rand-schwach); border-radius: var(--r2);
  padding: var(--s1) 0; background: var(--n1); font-size: var(--fs-sm);
}
.ht-node {
  padding: var(--s1) var(--s2); min-height: var(--h1); display: flex; align-items: center;
  cursor: pointer; border-radius: var(--r1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--n7);
}
.ht-node:hover { background: var(--gruen-tint); }
.ht-node.cur { background: var(--wiese); font-weight: 700; color: var(--gruen-dunkel); }
.ht-node.geschuetzt::after { content: " ★"; color: var(--warn); }  /* 5.39:1 auf --n1 */
.ht-dot { color: var(--n5); }
.ht-fork { color: var(--warn); font-size: var(--fs-xs); font-weight: 600; }
.ht-empty { padding: var(--s2) var(--s3); color: var(--n5); }

/* ============================================================================
   6. OVERLAYS
   ============================================================================ */

/* Projektdaten schweben unter der Kopfleiste, nur bei Bedarf sichtbar. */
.pl-felder {
  position: fixed; top: calc(var(--kopf-h) + var(--s1)); left: var(--s3); right: var(--s3); z-index: 45;
  display: flex; gap: var(--s2); background: var(--n0); padding: var(--s2);
  border: var(--rand-schwach); border-radius: var(--r3); box-shadow: var(--e2);
}
.pl-felder input { flex: 1 1 0; font-size: var(--fs-sm); }

.lightbox {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(20,30,22,.86);
  align-items: center; justify-content: center; flex-direction: column;
  gap: var(--s3); padding: var(--s6);
}
.lightbox img {
  max-width: 92vw; max-height: 82vh; object-fit: contain;
  border-radius: var(--r2); box-shadow: var(--e3); background: var(--n0);
}
.lightbox .cap { color: var(--auf-dunkel); font-size: var(--fs-md); }
.lightbox .close {
  position: absolute; top: var(--s4); right: var(--s5); width: 40px; height: 40px;
  border: 1px solid var(--auf-dunkel-rand); border-radius: 50%;
  background: rgba(255,255,255,.14); color: var(--auf-dunkel);
  font-size: var(--fs-xl); line-height: 1; cursor: pointer;
}
.lightbox .close:hover { background: rgba(255,255,255,.3); }

.m3d {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(20,30,22,.86);
  align-items: center; justify-content: center; flex-direction: column;
  gap: var(--s4); padding: var(--s5);
}
.m3d .m3dbar {
  display: flex; align-items: center; gap: var(--s5);
  color: var(--auf-dunkel); font-size: var(--fs-md);
}
.m3d .m3dtitle { font-weight: 600; }
.m3d .m3dexag { display: flex; align-items: center; gap: var(--s2); }
.m3d .m3dbar .btn { width: auto; padding: 0 var(--s4); }
.m3d canvas {
  background: var(--n1); border-radius: var(--r3); box-shadow: var(--e3);
  max-width: 92vw; max-height: 78vh; cursor: grab; touch-action: none;
}
.m3d canvas:active { cursor: grabbing; }

/* Zieh-Etikett am Zeiger */
#ghost {
  position: fixed; z-index: 9999; pointer-events: none;
  background: var(--gruen); color: var(--auf-dunkel);
  padding: var(--s1) var(--s2); border-radius: var(--r2);
  font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--e2);
}

/* ============================================================================
   7. PLAN-ELEMENTE, BEWEGUNG, DRUCK
   ============================================================================ */

/* Griffe im Plan: die Farbgebung steckt in der Zeichnung, hier nur der Zeiger. */
.handle, .phandle, .shandle { cursor: grab; }
.objdel, .objrot, .objscale, .objunlink { cursor: pointer; }
.objedge:hover { stroke-opacity: .3 !important; }

/* Bewegung nur mit Zweck: die laufende Linie zeigt eine Gruppe, der weiche
   Puls zeigt den Einrast-Vorschlag. */
@keyframes march { to { stroke-dashoffset: -22; } }
.grpdash { animation: march 2.2s linear infinite; }
@keyframes softpulse { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
.snapghost { animation: softpulse 1.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .grpdash, .snapghost, .scan::after { animation: none !important; }
  /* Ohne Zeichen-Animation muss die Linie sofort vollständig dastehen. */
  path.alkis-found { animation: none !important; stroke-dashoffset: 0 !important; filter: none; }
}

/* ---------- Druck: nur der Plan, quer, ohne Bedienoberfläche ------------------
   Für den Lageplan-Ausdruck. Der übliche Weg bleibt der PDF-Export, dies ist
   der direkte Ausdruck aus dem Browser. */
@page { size: A4 landscape; margin: 12mm; }

@media print {
  html, body { height: auto; overflow: visible; background: #fff; }
  body { display: block; color: #000; }
  .kopf, .rail, .seite, .fuss, .pl-felder, .zoomctl, .gruppe-prompt,
  .lightbox, .m3d, #ghost, .griffkante, #karte { display: none !important; }
  .mitte { display: block; min-height: 0; }
  .stage-wrap {
    display: block; overflow: visible; padding: 0; background: #fff; height: auto;
  }
  #stage { overflow: visible; border-radius: 0; }
  #stage svg, svg#svg { width: 100%; height: auto; border-radius: 0; }
  .legend {
    margin-top: 6mm; color: #000; font-size: 10pt;
    break-inside: avoid; page-break-inside: avoid;
  }
  .scan::after, .grpdash, .snapghost { animation: none !important; }
  path.alkis-found { stroke-dashoffset: 0 !important; filter: none; }
}

/* ============================================================================
   SCHMALER SCHIRM (Handy, Tablet hochkant)
   ============================================================================
   Die App-Shell oben ist fuer den Schreibtisch gebaut: Rail, zwei Spalten und
   Buehne nebeneinander auf einem Bildschirm. Auf einem Handy ist dafuer kein
   Platz, dort standen die Spalten uebereinandergeschoben und die Buehne fiel
   ganz heraus.

   Deshalb wird hier gestapelt statt nebeneinandergestellt, und die Seite darf
   ausnahmsweise senkrecht scrollen. Waagerecht scrollt sie weiterhin nie.
   Reihenfolge bewusst: erst der Plan (darum geht es), dann die Werkzeuge.
   ========================================================================= */
@media (max-width: 900px) {
  body {
    grid-template-rows: auto 1fr auto;
    height: auto; min-height: 100dvh;
  }

  /* Kopfleiste umbrechen lassen, statt die Knoepfe uebereinander zu schieben. */
  .kopf {
    flex-wrap: wrap; height: auto; min-height: var(--kopf-h);
    padding: var(--s2); gap: var(--s2); row-gap: var(--s2);
  }
  .kopf select#projektWahl { flex: 1 1 100%; min-width: 0; order: 10; }
  .kopf .marke { flex: 0 0 auto; }

  /* Aus vier Spalten wird eine Reihe untereinander. */
  .mitte {
    grid-template-columns: 1fr;
    grid-template-areas: "rail" "buehne" "links" "rechts";
  }
  .rail       { grid-area: rail; }
  .stage-wrap { grid-area: buehne; }
  .seite-links  { grid-area: links; }
  .seite-rechts { grid-area: rechts; }

  /* Die Rail wird zur waagerechten Schritt-Leiste am oberen Rand. */
  .rail {
    flex-direction: row; justify-content: center;
    border-right: none; border-bottom: var(--rand-schwach);
    padding: var(--s2); gap: var(--s2);
    position: sticky; top: 0; z-index: 30;
  }
  /* Der Tooltip sass links neben der Rail, dort ist jetzt nichts mehr. */
  .werkzeug .tip {
    left: 50%; top: calc(100% + 4px); transform: translateX(-50%);
  }

  /* Spalten nehmen die volle Breite und scrollen mit der Seite, nicht in sich.
     Ein eigenes Scrollfeld in einem Scrollfeld ist am Finger unbedienbar. */
  .seite {
    width: auto !important; max-width: none !important;
    border-left: none; border-right: none;
    border-top: var(--rand-schwach);
  }
  .seite-inhalt { overflow: visible; max-height: none; }
  /* Die Griffe zum Breiterziehen ergeben ohne Maus keinen Sinn. */
  .seite-griff, .spalten-griff, .seite .griff { display: none; }

  /* Buehne: feste Hoehe statt Rest-Platz, damit der Plan nicht zusammenfaellt. */
  .stage-wrap { flex-direction: column; min-height: 60vh; }
  #stage, #karte { width: 100%; height: 60vh; min-height: 320px; }

  /* Fingerfreundliche Groessen. 44 Pixel ist das uebliche Mindestmass. */
  .btn, .seg button, .step, .kbtn, .fbtn { min-height: 44px; }
  .ebene .eye, .ebene .ico { min-width: 36px; min-height: 36px; }
  input, select, textarea { font-size: 16px; }  /* verhindert das Zoomen in iOS */

  /* Die raeumlichen Ansichten sind fest auf 860 Pixel gebaut. */
  .m3d > div[id$="Buehne"], #m3dCanvas, #haus3dBuehne {
    width: 100% !important; max-width: 100%; height: 60vh !important;
  }
  .m3d { width: 96vw; max-width: 96vw; }

  /* Fussleiste darf umbrechen, sonst schneidet sie Werte ab. */
  .fuss { height: auto; flex-wrap: wrap; padding: var(--s2); gap: var(--s2); }
}

/* ---------- Maß-Verwaltung -------------------------------------------------
   Liste aller Maßketten in der rechten Spalte. Bewusst sehr dicht: hier stehen
   schnell zwanzig Zeilen, und die Spalte soll trotzdem nicht ueberlaufen. */
.massliste { margin-top: var(--s2); max-height: 260px; overflow-y: auto; }
.massgruppe {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); margin: var(--s3) 0 var(--s1);
  font-size: var(--fs-sm); font-weight: 700; color: var(--n6);
  text-transform: uppercase; letter-spacing: .04em;
}
.massgruppe:first-child { margin-top: 0; }
.btn.mini {
  width: auto; padding: 2px var(--s2); font-size: 11px; min-height: 0;
  font-weight: 600; text-transform: none; letter-spacing: 0;
}
.masszeile {
  display: flex; align-items: center; gap: var(--s2);
  padding: 3px var(--s1); border-radius: var(--r1);
  font-size: var(--fs-sm); line-height: 1.35; cursor: pointer;
}
.masszeile:hover { background: var(--gruen-tint); }
.masszeile .eye {
  flex: 0 0 auto; width: 18px; height: 18px; padding: 0;
  border: none; background: transparent; cursor: pointer;
  color: var(--gruen-600); font-size: 12px; line-height: 1;
}
.masszeile .mname {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--n7);
}
.masszeile .mwert {
  flex: 0 0 auto; font-weight: 700; color: var(--gruen-dunkel);
  font-variant-numeric: tabular-nums;
}
.masszeile .loesch {
  flex: 0 0 auto; width: 20px; height: 20px; padding: 0;
  border: none; background: transparent; color: var(--n5);
  font-size: 15px; line-height: 1; cursor: pointer; border-radius: var(--r1);
}
.masszeile .loesch:hover { background: var(--fehler-bg); color: var(--fehler); }
/* Ausgeblendet: bleibt lesbar, sieht aber klar nach "aus" aus. */
.masszeile.aus .mname, .masszeile.aus .mwert { color: var(--n4); }
.masszeile.aus .eye { color: var(--n4); }
/* Unterschreitet ein Abstand den eingestellten Grenzabstand, faellt er auf. */
.masszeile.knapp .mwert { color: var(--fehler); }
.masszeile.knapp .mname::after { content: " (zu knapp)"; color: var(--fehler); font-weight: 600; }
/* Laufender Vorgang "Maß setzen" am Knopf sichtbar machen. */
#massNeu.aktiv { background: var(--wiese); border-color: var(--gruen); color: var(--gruen-dunkel); }
/* Ausgeschaltete Maß-Gruppe: Kopf bleibt sichtbar, Zeilen sind eingeklappt. */
.massgruppe.aus { color: var(--n4); }

/* Ankreuzfeld mit Beschriftung, dicht wie der Rest der Spalte. */
.check {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s2); font-size: var(--fs-sm); color: var(--n6);
  cursor: pointer; min-height: 28px;
}
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--gruen); cursor: pointer; }