/* Geruest der Oberflaeche, Vorbild Fusion 360.
   Die 3D-Ansicht liegt vollflaechig darunter, alle Tafeln schweben darueber.
   Das ist Absicht: Die Szene ist die Wahrheit, die Tafeln sind Zubehoer und
   fallen in der Brille weg.

   ERSCHEINUNGSBILD (Paket 50). Es gibt drei Stufen, umgeschaltet ueber
   data-erscheinung am Wurzelelement:

     (kein Attribut) oder "jetzt"  der heutige Look, unveraendert
     "neu-hell"                    modernes Helldesign
     "neu-dunkel"                  modernes Dunkeldesign

   In diesem Blatt steht NUR Farbe: Grund, Rand, Schrift, Schatten. Alle
   Groessen (--hoehe-*), Abstaende und Schriftgroessen sind stufenunabhaengig
   und stehen darum nur einmal. Kein einziger Farbwert steht mehr direkt an
   einer Regel; wer eine Farbe braucht, nimmt ein Token. Der Entwurf mit
   Begruendung und Kontrastwerten:
   20_planung/eigenes-cad/2026-09-05_design-hell-dunkel.md

   Die SZENE (Canvas) faerbt dieses Blatt NICHT. Ihre Farben stehen in
   js/farben.js, das dieselben drei Stufen kennt und beim Umschalten die
   Zeichenpfade neu einfaerbt. */

:root {
  --grund: #2c313a;
  --grund-hell: #363c46;
  --leiste: #2b3039;
  --leiste-tief: #24282f;
  --linie: #1d2026;
  --linie-hell: #454b55;
  --schrift: #c9ced5;
  --schrift-hell: #eef1f4;
  --schrift-matt: #868d97;
  --akzent: #4a90d9;
  --akzent-warm: #e08a3c;
  --auswahl: #2f6ea8;

  /* Schwebende Aufsteller: Tooltip, Verlauf-Fach, Marking-Menue,
     Schnellbox, Anzeige-Menue, Kontextmenue, Werteingabe. */
  --tafel: #23262d;
  --tafel-rand: #3a3f4a;
  --tafel-hover: #2e3340;
  /* Der durchscheinende Grund der festen Tafeln (Browser, Kommentare),
     der Massanzeige und der Navigationsleiste. */
  --tafel-grund: rgba(38, 42, 49, .92);
  --anzeige-grund: rgba(38, 42, 49, .88);
  --leiste-schwebend: rgba(38, 42, 49, .82);

  /* Dialoge und Fenster */
  --fenster: #2b303a;
  --dialog-grund: #262b33;
  --dialog-kopf: #1d2127;
  --schleier: rgba(20, 22, 26, .45);

  /* Eingaben */
  --feld: #1f242c;
  --feld-tief: #1b1e24;
  --feld-rand: #333a45;
  --gruppe: #2e343e;

  /* Zustaende: Knopfflaeche im Hover und aktiv, Zeilen-Hover in Listen */
  --flaeche-hover: #3b414c;
  --zeile-hover: #333944;
  --konto: #4b525c;
  --wpfeil-hover: rgba(59, 65, 76, .7);

  /* Schriftabstufungen neben --schrift, --schrift-hell, --schrift-matt */
  --schrift-klar: #e8edf2;
  --schrift-dialog: #dfe4ea;
  --schrift-gedaempft: #9aa3ad;
  --schrift-auf-akzent: #10151b;
  --schrift-invers: #fff;

  /* Akzente und Warnung */
  --akzent-hover: #3f7fc4;
  --akzent-warm-hell: #f2a45c;
  --warnung: #e2725b;

  /* Zeitleisten-Marker: Schraffur und Kante hinter dem Marker */
  --marker-streifen-a: rgba(224, 138, 60, .13);
  --marker-streifen-b: rgba(224, 138, 60, .05);
  --marker-linie: rgba(224, 138, 60, .5);

  /* Schatten. Sie tragen die Aussage "das schwebt ueber der Szene". */
  --schatten-weich: 0 4px 14px rgba(0, 0, 0, 0.45);
  --schatten-stark: 0 6px 22px rgba(0, 0, 0, 0.55);
  --schatten-dialog: 0 12px 36px rgba(0, 0, 0, .5);
  --schatten-rand: 0 0 0 1px rgba(0, 0, 0, .45);

  /* Vollbild-Knopf UND VR-Knopf. Die drei Werte sind in dieser Stufe
     exakt die aus dem Vendor-Code von VRButton.js (stylizeElement:
     1px solid #fff, rgba(0,0,0,0.1), #fff). Der VR-Knopf traegt sie als
     Inline-Stil; die Regel #VRButton weiter unten holt ihn mit
     !important auf dieselben Token, sonst stuende auf hellem Grund
     weisse Schrift auf hellem Grund. */
  --vr-knopf-rand: #fff;
  --vr-knopf-grund: rgba(0, 0, 0, .1);
  --vr-knopf-schrift: #fff;

  --hoehe-kopf: 28px;
  --hoehe-reiter: 22px;
  --hoehe-band: 58px;
  --hoehe-zeit: 30px;
}

/* ---------- Erscheinungsbild "neu hell" ----------
   Ruhiges Grau statt reinem Weiss (#eceef1): ein weisser Grund blendet,
   und ein hellgrauer Koerper waere darauf nicht mehr zu erkennen. Ein
   Akzent, sonst Farbe nur dort, wo sie etwas sagt. Nur Farbwerte, keine
   Groessen. */
:root[data-erscheinung="neu-hell"] {
  --grund: #eceef1;
  --grund-hell: #f6f7f9;
  --leiste: #e3e6ea;
  --leiste-tief: #d9dde2;
  --linie: #c2c8d0;
  --linie-hell: #b3bac3;
  --schrift: #2c3138;
  --schrift-hell: #14181d;
  --schrift-matt: #5f6873;
  --akzent: #1f6fb2;
  --akzent-warm: #96580a;
  --auswahl: #cfe2f4;

  --tafel: #fbfcfd;
  --tafel-rand: #c6ccd4;
  --tafel-hover: #e8edf3;
  --tafel-grund: rgba(250, 251, 253, .94);
  --anzeige-grund: rgba(250, 251, 253, .92);
  --leiste-schwebend: rgba(250, 251, 253, .88);

  --fenster: #f6f7f9;
  --dialog-grund: #f6f7f9;
  --dialog-kopf: #e3e6ea;
  --schleier: rgba(20, 22, 26, .28);

  --feld: #ffffff;
  --feld-tief: #ffffff;
  --feld-rand: #d5dae1;
  --gruppe: #e3e6ea;

  --flaeche-hover: #dde2e8;
  --zeile-hover: #e6eaef;
  --konto: #b9c0c9;
  --wpfeil-hover: rgba(190, 198, 208, .7);

  --schrift-klar: #14181d;
  --schrift-dialog: #232830;
  --schrift-gedaempft: #5f6873;
  --schrift-auf-akzent: #ffffff;
  --schrift-invers: #ffffff;

  --akzent-hover: #17588f;
  --akzent-warm-hell: #7a4408;
  --warnung: #b3261e;

  --marker-streifen-a: rgba(150, 88, 10, .14);
  --marker-streifen-b: rgba(150, 88, 10, .06);
  --marker-linie: rgba(150, 88, 10, .6);

  /* Auf hellem Grund traegt der Schatten weniger, sonst wirkt jede Tafel
     wie aufgeklebt. Dafuer ist er leicht blaustichig statt reinem Grau. */
  --schatten-weich: 0 4px 14px rgba(20, 26, 34, .18);
  --schatten-stark: 0 6px 22px rgba(20, 26, 34, .22);
  --schatten-dialog: 0 12px 36px rgba(20, 26, 34, .24);
  --schatten-rand: 0 0 0 1px rgba(20, 26, 34, .25);

  --vr-knopf-rand: #8d959f;
  --vr-knopf-grund: rgba(255, 255, 255, .55);
  --vr-knopf-schrift: #14181d;
}

/* ---------- Erscheinungsbild "neu dunkel" ----------
   Nicht reines Schwarz (#21252b): Schwarz laesst jede Kante glaenzen und
   ermuedet bei langer Konstruktionsarbeit. Dafuer durchweg mehr Kontrast
   als heute (Schrift 11,2:1 statt 8,3:1, matte Schrift 5,8:1 statt
   3,9:1). Nur Farbwerte, keine Groessen. */
:root[data-erscheinung="neu-dunkel"] {
  --grund: #21252b;
  --grund-hell: #2b3038;
  --leiste: #1c1f24;
  --leiste-tief: #16191d;
  --linie: #0f1113;
  --linie-hell: #3a4048;
  --schrift: #d7dce3;
  --schrift-hell: #ffffff;
  --schrift-matt: #98a0aa;
  --akzent: #4da3ff;
  --akzent-warm: #f0a04b;
  --auswahl: #1f4e7a;

  --tafel: #1a1d22;
  --tafel-rand: #333a43;
  --tafel-hover: #262b33;
  --tafel-grund: rgba(26, 29, 34, .94);
  --anzeige-grund: rgba(26, 29, 34, .9);
  --leiste-schwebend: rgba(26, 29, 34, .86);

  --fenster: #22262c;
  --dialog-grund: #1e2126;
  --dialog-kopf: #16181c;
  --schleier: rgba(8, 10, 13, .55);

  --feld: #14171b;
  --feld-tief: #101317;
  --feld-rand: #2b313a;
  --gruppe: #262b33;

  --flaeche-hover: #333a44;
  --zeile-hover: #2a3039;
  --konto: #3d444e;
  --wpfeil-hover: rgba(51, 58, 68, .75);

  --schrift-klar: #f2f5f8;
  --schrift-dialog: #e2e7ee;
  --schrift-gedaempft: #a3aab4;
  --schrift-auf-akzent: #08111b;
  /* Dunkle Schrift auf dem hellen Akzent: Weiss darauf kaeme nur auf
     2,6:1, mit dieser Wahl auf 7,2:1. */
  --schrift-invers: #08111b;

  --akzent-hover: #6cb6ff;
  --akzent-warm-hell: #ffb96a;
  --warnung: #ff7b6b;

  --marker-streifen-a: rgba(240, 160, 75, .15);
  --marker-streifen-b: rgba(240, 160, 75, .06);
  --marker-linie: rgba(240, 160, 75, .55);

  --schatten-weich: 0 4px 14px rgba(0, 0, 0, .55);
  --schatten-stark: 0 6px 22px rgba(0, 0, 0, .62);
  --schatten-dialog: 0 12px 36px rgba(0, 0, 0, .6);
  --schatten-rand: 0 0 0 1px rgba(0, 0, 0, .55);

  --vr-knopf-rand: #ffffff;
  --vr-knopf-grund: rgba(0, 0, 0, .25);
  --vr-knopf-schrift: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--grund);
  color: var(--schrift);
  font: 11px/1.4 "Segoe UI", "Noto Sans", system-ui, sans-serif;
  user-select: none;
}

#ansicht {
  position: fixed;
  inset: 0;
  z-index: 0;
}

#ansicht canvas { display: block; }

/* Werteingabe der Skizzenbemassung, erscheint an der Masszahl */
.mass-eingabe {
  position: absolute;
  z-index: 30;
  width: 74px;
  padding: 3px 6px;
  border: 1px solid var(--farbe-konstruktion, #e0a24a);
  border-radius: 3px;
  background: var(--tafel);
  color: var(--schrift-klar);
  font: 600 13px "Segoe UI", sans-serif;
  text-align: right;
  outline: none;
}

/* Tooltip am Beziehungsschild (beziehungssymbole.js), folgt der Maus */
.beziehung-tooltip {
  position: fixed;
  z-index: 40;
  padding: 2px 8px;
  background: var(--farbe-schild, var(--tafel));
  border: 1px solid var(--tafel-rand);
  border-radius: 3px;
  color: var(--schrift-klar);
  font: 12px "Segoe UI", sans-serif;
  pointer-events: none;
  white-space: nowrap;
}

.beziehung-tooltip[hidden] { display: none; }

/* ---------- Kopfleiste ---------- */

.kopf {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--hoehe-kopf);
  z-index: 20;
  display: flex;
  align-items: center;
  padding: 0 6px;
  background: var(--leiste);
  border-bottom: 1px solid var(--linie);
}

.kopf-links, .kopf-rechts {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.kopf-rechts { justify-content: flex-end; }

.kopf-mitte {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--schrift-hell);
  white-space: nowrap;
}

/* Der Punkt vor dem Dateinamen ist seit 2026-09-02 echt: er steht fuer
   den UNGESPEICHERTEN Stand, an derselben Stelle wie in Fusion. Kein
   zweiter Punkt am Speichern-Knopf: Fusion hat dort auch keinen, und
   zwei Marken fuer dieselbe Sache lernt man sich ab.
   visibility statt display, damit der Dateiname beim Speichern nicht um
   die Breite des Punktes springt. */
.punkt {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--akzent-warm);
  display: inline-block;
}

.punkt.gespeichert {
  visibility: hidden;
}

/* Das Feld TEST neben dem Dokumentnamen (Paket 82, Vertrag 6u). Es steht
   NUR auf der Stufe "test" da; auf "stabil" und am Arbeitsplatz erzeugt
   haupt.js es gar nicht erst. Orange und nicht rot: rot heisst in dieser
   Oberflaeche "kaputt", und die Teststufe ist nicht kaputt, sie ist nur
   nicht der Arbeitsstand. */
.kopf-stufe {
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--akzent-warm);
  color: var(--grund);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.konto {
  width: 20px; height: 20px;
  margin-left: 6px;
  border-radius: 3px;
  background: var(--konto);
  color: var(--schrift-hell);
  font-size: 10px;
  font-weight: 600;
  display: grid;
  place-items: center;
}

/* ---------- Reiter ---------- */

.reiter {
  position: fixed;
  top: var(--hoehe-kopf); left: 0; right: 0;
  height: var(--hoehe-reiter);
  z-index: 20;
  display: flex;
  align-items: stretch;
  padding-left: 108px;
  background: var(--leiste);
  border-bottom: 1px solid var(--linie);
}

.reiter button {
  appearance: none;
  border: 0;
  background: none;
  color: var(--schrift-matt);
  font: inherit;
  font-size: 10px;
  letter-spacing: .4px;
  padding: 0 11px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.reiter button:hover { color: var(--schrift); }

.reiter button.aktiv {
  color: var(--schrift-hell);
  border-bottom-color: var(--schrift-hell);
}

/* ---------- Multifunktionsleiste ---------- */

.band-zeile {
  position: fixed;
  top: calc(var(--hoehe-kopf) + var(--hoehe-reiter));
  left: 0; right: 0;
  height: var(--hoehe-band);
  z-index: 20;
  display: flex;
  background: var(--leiste);
  border-bottom: 1px solid var(--linie);
}

.bereich {
  flex: 0 0 96px;
  margin: 4px;
  border: 1px solid var(--linie-hell);
  border-radius: 2px;
  background: var(--leiste-tief);
  color: var(--schrift);
  font: inherit;
  font-size: 10px;
  letter-spacing: .3px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.bereich:hover { background: var(--zeile-hover); }
.pfeil { color: var(--schrift-matt); }

.band {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.gruppe {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3px 6px 1px;
  border-left: 1px solid var(--linie);
}

.gruppe:first-child { border-left: 0; }

.gruppe-knoepfe {
  display: flex;
  align-items: flex-start;
  gap: 1px;
}

.gruppe-name {
  text-align: center;
  color: var(--schrift-matt);
  font-size: 9px;
  letter-spacing: .5px;
  white-space: nowrap;
  padding-top: 2px;
}

.werkzeug {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  padding: 2px;
  cursor: pointer;
  color: var(--schrift);
  display: grid;
  place-items: center;
}

.werkzeug:hover {
  background: var(--flaeche-hover);
  border-color: var(--linie-hell);
}

.werkzeug svg { display: block; width: 26px; height: 26px; }

.werkzeug.aktiv {
  background: var(--flaeche-hover);
  border-color: var(--akzent);
}

/* Attrappen (Knoepfe ohne Funktion) sind ausgegraut sichtbar; der Klick
   bleibt moeglich und bringt die ehrliche Meldung. */
.attrappe {
  opacity: 0.35;
}
.attrappe svg {
  filter: grayscale(1);
}

/* ---------- Rueckgaengig mit Klappliste (SCHNITTSTELLE.md 6j) ----------
   Vorbild Fusion: der Pfeil geht einen Schritt, das Dreieck daneben
   klappt die Liste auf. Ein Klick auf einen EINTRAG geht so viele
   Schritte, wie darueber stehen. */

.verlauf-fach {
  position: relative;
  display: flex;
  align-items: center;
}

.verlauf-pfeil {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  color: var(--schrift-matt);
  font-size: 8px;
  line-height: 1;
  padding: 8px 1px;
  cursor: pointer;
}

.verlauf-pfeil:hover { background: var(--flaeche-hover); color: var(--schrift-hell); }
.verlauf-fach.offen .verlauf-pfeil { background: var(--flaeche-hover); color: var(--schrift-hell); }

/* Leere Knoepfe sind grau wie die Attrappen, aber aus einem anderen
   Grund: hier gibt es NICHTS zu tun, nicht "noch nicht gebaut". Der
   Tooltip sagt es. */
.verlauf-knopf[disabled], .verlauf-pfeil[disabled] {
  opacity: .3;
  cursor: default;
}
.verlauf-knopf[disabled]:hover, .verlauf-pfeil[disabled]:hover {
  background: none;
  border-color: transparent;
  color: var(--schrift-matt);
}

.verlauf-liste {
  position: absolute;
  z-index: 30;
  min-width: 180px;
  max-width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 3px;
  background: var(--tafel);
  border: 1px solid var(--tafel-rand);
  border-radius: 4px;
  box-shadow: var(--schatten-weich);
  font: 12px "Segoe UI", sans-serif;
  color: var(--schrift);
  scrollbar-width: thin;
}

.verlauf-liste[hidden] { display: none; }

.verlauf-eintrag {
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Beim Ueberfahren wird ALLES bis dorthin markiert: man sieht vorher,
   was der Klick wegwirft. */
.verlauf-eintrag.trifft { background: var(--auswahl); color: var(--schrift-hell); }

.verlauf-fuss {
  margin-top: 3px;
  padding: 4px 8px 2px;
  border-top: 1px solid var(--tafel-rand);
  color: var(--schrift-matt);
  font-size: 11px;
  white-space: normal;
}

/* Der Stapel ist gemessen 20 Schritte tief und headless nicht zu heben.
   Das wird gesagt, nicht verschwiegen. */
.verlauf-fuss.warnung { color: var(--akzent-warm); }

/* ---------- Feature-Dialog (Fusion-Vorbild: Runde Anordnung usw.) ---- */

#feature-dialog {
  position: absolute;
  top: 96px;
  right: 250px;
  width: 235px;
  background: var(--fenster);
  border: 1px solid var(--linie-hell);
  border-radius: 3px;
  padding: 8px 10px 10px;
  font-size: 12px;
  color: var(--schrift-dialog);
  z-index: 30;
  box-shadow: var(--schatten-weich);
}
#feature-dialog .fd-titel {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--linie-hell);
  padding-bottom: 5px;
  margin-bottom: 7px;
}
#feature-dialog .fd-zeile {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
}
/* Die Beschriftung eines Dialogfeldes. 82px sind die BREITE VON FRUEHER
   und bleiben die Untergrenze: damit steht jedes Feld der vorhandenen
   Dialoge (Extrusion, Verrundung, Verschieben) auf denselben Pixeln wie
   bisher, ihre laengste Beschriftung ist "Verjuengung" mit 61px.

   Neu ist nur, dass eine LAENGERE Beschriftung sich den Platz nehmen
   darf, statt abgeschnitten zu werden. Gebraucht hat das zuerst
   KOMBINIEREN: "Werkzeugkoerper" (87px), "Neue Komponente" (100px) und
   "Werkzeuge beibehalten" (125px) sind Fusions eigene Feldnamen, und
   "Werkzeugkoer..." im Dialog ist keine Beschriftung mehr, sondern ein
   Raetsel. Die Zeilen mit einem Haken haben den Platz ohnehin: dort
   steht rechts nur ein Kaestchen. Wo es doch eng wird, schrumpft das
   Eingabefeld (es hat flex: 1 und min-width: 0), nie die Zeile. */
#feature-dialog .fd-name {
  flex: 0 1 auto;
  min-width: 82px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#feature-dialog .fd-feld,
#feature-dialog .fd-auswahl {
  flex: 1;
  min-width: 0;
  background: var(--feld);
  border: 1px solid var(--linie-hell);
  border-radius: 2px;
  color: inherit;
  padding: 3px 6px;
  font: inherit;
  text-align: left;
}
#feature-dialog .fd-auswahl {
  cursor: pointer;
}
/* Die reine Anzeige-Zeile (Feldart "text"): sie nimmt denselben Platz wie
   ein Eingabefeld, hat aber weder Rahmen noch Grund. Nichts Ausgegrautes,
   nichts zum Anklicken, nur der Satz des Dienstes. */
#feature-dialog .fd-text {
  flex: 1;
  min-width: 0;
  padding: 3px 0;
  color: var(--text-schwach, inherit);
  overflow-wrap: anywhere;
}
#feature-dialog .fd-auswahl.aktiv {
  border-color: var(--akzent);
  box-shadow: 0 0 0 1px var(--akzent);
}
#feature-dialog .fd-x {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--schrift-gedaempft);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
}
#feature-dialog .fd-x:hover {
  color: var(--schrift-dialog);
}
#feature-dialog .fd-fuss {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 9px;
}
#feature-dialog .fd-fuss button {
  background: var(--flaeche-hover);
  border: 1px solid var(--linie-hell);
  border-radius: 2px;
  color: inherit;
  padding: 3px 12px;
  cursor: pointer;
}
#feature-dialog .fd-fuss .fd-ok {
  border-color: var(--akzent);
}

/* ---------- Parameter-Dialog (Fusion PARAMETER) ---------------------- */

#parameter-dialog {
  width: min(720px, 90vw);
  max-height: 80vh;
  overflow: auto;
  background: var(--dialog-grund);
  border: 1px solid var(--linie-hell);
  border-radius: 3px;
  color: var(--schrift-dialog);
  font-size: 12px;
  padding: 0 0 10px;
  box-shadow: var(--schatten-stark);
}
#parameter-dialog .pd-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--dialog-kopf);
  padding: 8px 12px;
}
#parameter-dialog .pd-titel {
  font-weight: 600;
  letter-spacing: 0.08em;
}
#parameter-dialog .pd-zu {
  background: none;
  border: none;
  color: var(--schrift-gedaempft);
  font-size: 16px;
  cursor: pointer;
}
#parameter-dialog .pd-filter {
  display: block;
  width: calc(100% - 24px);
  margin: 10px 12px;
  background: var(--feld);
  border: 1px solid var(--linie-hell);
  border-radius: 2px;
  color: inherit;
  padding: 5px 8px;
  font: inherit;
}
#parameter-dialog .pd-tabelle {
  width: calc(100% - 24px);
  margin: 0 12px;
  border-collapse: collapse;
}
#parameter-dialog .pd-tabelle th {
  text-align: left;
  border-bottom: 1px solid var(--linie-hell);
  padding: 4px 6px;
  font-weight: 600;
}
#parameter-dialog .pd-tabelle td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--feld-rand);
}
#parameter-dialog .pd-tabelle input {
  width: 100%;
  background: var(--feld);
  border: 1px solid transparent;
  border-radius: 2px;
  color: inherit;
  padding: 2px 5px;
  font: inherit;
}
#parameter-dialog .pd-tabelle input:focus {
  border-color: var(--akzent);
  outline: none;
}
/* Getriebene Masse: nur Anzeige (Wert in Klammern), wie in Fusion
   abgeblendet. Farbe aus der Token-Tabelle farben.js, die haupt.js als
   CSS-Variablen setzt; der Zweitwert deckt den Start vor dem Skript. */
#parameter-dialog tr.pd-getrieben td {
  color: var(--farbe-getrieben, var(--schrift-gedaempft));
}
#parameter-dialog .pd-gruppe td {
  background: var(--gruppe);
  font-weight: 600;
  padding: 5px 6px;
}
#parameter-dialog .pd-plus {
  margin-left: 10px;
  background: var(--flaeche-hover);
  border: 1px solid var(--linie-hell);
  border-radius: 2px;
  color: inherit;
  cursor: pointer;
  padding: 0 8px;
}
#parameter-dialog .pd-x {
  background: none;
  border: none;
  color: var(--schrift-gedaempft);
  cursor: pointer;
  font-size: 14px;
}
#parameter-dialog .pd-fuss {
  display: flex;
  justify-content: flex-end;
  padding: 10px 12px 0;
}
#parameter-dialog .pd-ok {
  background: var(--akzent);
  border: none;
  border-radius: 2px;
  color: var(--schrift-auf-akzent);
  font-weight: 600;
  padding: 5px 16px;
  cursor: pointer;
}

/* ---------- Ueberbestimmtes Mass (Vertrag 6s, Paket 79) ---------- */
/* Die Fusion-Frage "getriebenes Mass oder verwerfen". Gleicher Aufbau wie
   der Parameter-Dialog darueber, damit nicht ein zweites Aussehen fuer
   dieselbe Sache entsteht; alle Farben sind Token des Erscheinungsbildes,
   kein neuer Streuwert. */

#ueberbestimmt-dialog {
  width: min(460px, 92vw);
  background: var(--dialog-grund);
  border: 1px solid var(--linie-hell);
  border-radius: 3px;
  color: var(--schrift-dialog);
  font-size: 12px;
  box-shadow: var(--schatten-stark);
}
#ueberbestimmt-dialog .ub-kopf {
  background: var(--dialog-kopf);
  padding: 8px 12px;
}
#ueberbestimmt-dialog .ub-titel {
  font-weight: 600;
  letter-spacing: 0.08em;
}
#ueberbestimmt-dialog .ub-rumpf {
  padding: 12px 12px 4px;
}
#ueberbestimmt-dialog .ub-rumpf p {
  margin: 0 0 10px;
  line-height: 1.45;
}
#ueberbestimmt-dialog .ub-hinweis {
  color: var(--schrift-gedaempft);
}
#ueberbestimmt-dialog .ub-fuss {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 4px 12px 12px;
}
#ueberbestimmt-dialog .ub-zweit {
  background: var(--flaeche-hover);
  border: 1px solid var(--linie-hell);
  border-radius: 2px;
  color: inherit;
  padding: 5px 14px;
  cursor: pointer;
  font: inherit;
}
#ueberbestimmt-dialog .ub-haupt {
  background: var(--akzent);
  border: none;
  border-radius: 2px;
  color: var(--schrift-auf-akzent);
  font-weight: 600;
  font-size: inherit;
  font-family: inherit;
  padding: 5px 16px;
  cursor: pointer;
}

/* ---------- Ablage auf dem Server (Vertrag 6k-3) ---------- */
/* Gleicher Aufbau wie der Parameter-Dialog darueber, damit nicht ein
   zweites Aussehen fuer dieselbe Sache entsteht. Alle Farben sind Token
   aus dem Erscheinungsbild (Paket 50), kein neuer Streuwert. */

#ablage-dialog {
  width: min(620px, 92vw);
  max-height: 80vh;
  overflow: auto;
  background: var(--dialog-grund);
  border: 1px solid var(--linie-hell);
  border-radius: 3px;
  color: var(--schrift-dialog);
  font-size: 12px;
  padding: 0 0 10px;
  box-shadow: var(--schatten-stark);
}
#ablage-dialog .ab-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--dialog-kopf);
  padding: 8px 12px;
}
#ablage-dialog .ab-titel {
  font-weight: 600;
  letter-spacing: 0.08em;
}
#ablage-dialog .ab-zu {
  background: none;
  border: none;
  color: var(--schrift-gedaempft);
  font-size: 16px;
  cursor: pointer;
}
#ablage-dialog .ab-belegung {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 12px 6px;
  color: var(--schrift-gedaempft);
}
#ablage-dialog .ab-balken {
  flex: 1;
  height: 6px;
  background: var(--feld);
  border: 1px solid var(--feld-rand);
  border-radius: 3px;
  overflow: hidden;
}
#ablage-dialog .ab-fuellung {
  height: 100%;
  background: var(--akzent);
}
#ablage-dialog .ab-fuellung.ab-voll {
  background: var(--warnung);
}
#ablage-dialog .ab-tabelle {
  width: calc(100% - 24px);
  margin: 0 12px;
  border-collapse: collapse;
}
#ablage-dialog .ab-tabelle th {
  text-align: left;
  border-bottom: 1px solid var(--linie-hell);
  padding: 4px 6px;
  font-weight: 600;
}
#ablage-dialog .ab-tabelle td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--feld-rand);
  cursor: default;
}
#ablage-dialog .ab-tabelle tr:hover td {
  background: var(--flaeche-hover);
}
#ablage-dialog .ab-tabelle tr.ab-gewaehlt td {
  background: var(--auswahl);
}
#ablage-dialog .ab-zahl {
  white-space: nowrap;
  color: var(--schrift-gedaempft);
}
#ablage-dialog .ab-taten {
  white-space: nowrap;
  text-align: right;
  width: 1%;
}
#ablage-dialog .ab-tat {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0 3px;
  line-height: 1;
}
#ablage-dialog .ab-tat:hover {
  color: var(--akzent);
}
#ablage-dialog .ab-hinweis {
  margin-left: 8px;
  color: var(--schrift-gedaempft);
  font-size: 11px;
}
#ablage-dialog .ab-leer {
  color: var(--schrift-gedaempft);
  padding: 14px 6px;
}
#ablage-dialog .ab-name-feld,
#ablage-dialog .ab-feld {
  background: var(--feld);
  border: 1px solid var(--linie-hell);
  border-radius: 2px;
  color: inherit;
  padding: 3px 6px;
  font: inherit;
}
#ablage-dialog .ab-name-feld {
  width: 100%;
}
#ablage-dialog .ab-fuss {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px 0;
}
#ablage-dialog .ab-feld {
  flex: 1;
}
#ablage-dialog .ab-ok {
  background: var(--akzent);
  border: none;
  border-radius: 2px;
  color: var(--schrift-auf-akzent);
  font-weight: 600;
  padding: 5px 16px;
  cursor: pointer;
}

/* ---------- Wiederaufnahme-Dialog (Paket 82, Vertrag 6u) ----------

   Derselbe Schleier und derselbe Kasten wie beim Ablage-Dialog, nur
   schmaler: hier steht ein Satz und stehen zwei Knoepfe, keine Liste.
   Ein drittes Aussehen fuer dieselbe Sache waere derselbe Fehler wie
   zwei Dialoge fuer eine Frage. */
#wiederaufnahme-dialog {
  width: min(460px, 92vw);
  background: var(--dialog-grund);
  border: 1px solid var(--linie-hell);
  border-radius: 3px;
  color: var(--schrift-dialog);
  font-size: 12px;
  padding: 0 0 10px;
  box-shadow: var(--schatten-stark);
}
#wiederaufnahme-dialog .wa-kopf {
  display: flex;
  align-items: center;
  background: var(--dialog-kopf);
  padding: 8px 12px;
}
#wiederaufnahme-dialog .wa-titel {
  font-weight: 600;
  letter-spacing: 0.08em;
}
#wiederaufnahme-dialog .wa-satz {
  margin: 12px 12px 6px;
  line-height: 1.5;
}
#wiederaufnahme-dialog .wa-teile {
  margin: 0 12px 4px;
  color: var(--schrift-gedaempft);
  line-height: 1.5;
}
#wiederaufnahme-dialog .wa-fuss {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px 0;
}
#wiederaufnahme-dialog .wa-ok,
#wiederaufnahme-dialog .wa-weg {
  border-radius: 2px;
  font-weight: 600;
  padding: 5px 16px;
  cursor: pointer;
  font: inherit;
}
#wiederaufnahme-dialog .wa-ok {
  background: var(--akzent);
  border: none;
  color: var(--schrift-auf-akzent);
}
/* Verwerfen ist NICHT ausgegraut (Ansage Kostja 2026-09-03), nur
   zurueckhaltender: es ist die Antwort, die etwas liegen laesst. */
#wiederaufnahme-dialog .wa-weg {
  background: transparent;
  border: 1px solid var(--linie-hell);
  color: inherit;
}

/* ---------- Tafeln ---------- */

.tafel {
  position: absolute;
  z-index: 15;
  background: var(--tafel-grund);
  border: 1px solid var(--linie);
  border-radius: 2px;
}

.tafel-kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 18px;
  padding: 0 6px;
  background: var(--leiste-tief);
  border-bottom: 1px solid var(--linie);
  color: var(--schrift-matt);
  font-size: 9px;
  letter-spacing: .6px;
}

.tafel-titel { flex: 1; }
.griff, .tafel-schalter { cursor: pointer; }
.tafel-schalter:hover, .griff:hover { color: var(--schrift-hell); }

.tafel-browser {
  top: calc(var(--hoehe-kopf) + var(--hoehe-reiter) + var(--hoehe-band) + 4px);
  left: 4px;
  width: 236px;
  max-height: 42vh;
  display: flex;
  flex-direction: column;
}

.baum {
  overflow: auto;
  padding: 3px 0 5px;
  scrollbar-width: thin;
}

.zweig {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 19px;
  padding-right: 6px;
  white-space: nowrap;
  cursor: default;
}

.zweig:hover { background: var(--zeile-hover); }
.zweig.gewaehlt { background: var(--auswahl); color: var(--schrift-hell); }

.zweig .klapp {
  width: 12px;
  text-align: center;
  color: var(--schrift-matt);
  cursor: pointer;
  font-size: 9px;
}

/* Der RUNDKNOPF am Koerper (Paket 66, Vertrag 6m): er waehlt den aktiven
   Koerper. Ein echtes Radio, nur klein und in den Farben der Leiste. */
.zweig .rundknopf {
  appearance: none;
  width: 11px;
  height: 11px;
  margin: 0;
  flex: none;
  border: 1px solid var(--schrift-matt);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.zweig .rundknopf:hover { border-color: var(--schrift-hell); }

.zweig .rundknopf:checked {
  border-color: var(--akzent);
  /* Der Punkt in der Mitte, ohne zweites Element. */
  box-shadow: inset 0 0 0 2px var(--leiste), inset 0 0 0 6px var(--akzent);
}

.zweig .rundknopf:focus-visible { outline: 1px solid var(--akzent); outline-offset: 1px; }

.zweig .auge {
  width: 13px;
  opacity: .55;
  cursor: pointer;
}

.zweig .auge:hover { opacity: 1; }
/* Ausgeblendet: das Auge ist ZUGEKLAPPT (Symbol augeZu) und bleibt gut
   lesbar, denn es ist das Zeichen, an dem "ausgeblendet" von "hinter dem
   Marker" zu unterscheiden ist. Beides graut die Zeile aus, aber nur das
   Ausblenden knipst das Auge aus. */
.zweig.blind .auge { opacity: .35; }

.zweig .symbol { width: 14px; display: grid; place-items: center; }
.zweig .text { padding: 0 4px; border-radius: 2px; }
.zweig.blass .text { color: var(--schrift-matt); }

/* Ausgeblendeter Koerper: matt, aber AUFRECHT. Hinter dem Marker ist
   dieselbe Farbe plus kursiv, siehe weiter unten; die zwei Aussagen
   duerfen nicht gleich aussehen. */
.zweig.blind .text { color: var(--schrift-matt); }
.zweig.blind .symbol { opacity: .4; }

/* Der AKTIVE Koerper stand bis Paket 66 fett da. Jetzt sagt es der
   Rundknopf, und zwei Zeichen fuer dieselbe Aussage sind eines zu viel
   (Vertrag 6m). Die Regel ist damit weg. */

/* In einem Bool-Vorgang aufgegangen: er lebt nur noch im Ergebnis und
   wird darum nicht gezeichnet (stiller Fall 18). Durchgestrichen, damit
   es weder wie "ausgeblendet" noch wie "hinter dem Marker" aussieht. */
.zweig.verbraucht .text { color: var(--schrift-matt); text-decoration: line-through; }
.zweig.verbraucht .symbol { opacity: .4; }

.tafel-kommentare {
  left: 4px;
  bottom: calc(var(--hoehe-zeit) + 4px);
  width: 236px;
}

/* ---------- Feld PRUEFLISTE (Paket 84, Vertrag 6t) ---------- */

/* Sie steht UEBER den Kommentaren (deren Kopf ist 18px hoch plus zwei
   Raender, dazu 4px Luft) und haengt an "bottom" ohne "top": aufgeklappt
   waechst sie damit nach OBEN und schiebt nichts weg. */
.tafel-pruefliste {
  left: 4px;
  bottom: calc(var(--hoehe-zeit) + 28px);
  width: 236px;
  max-height: 52vh;
  display: flex;
  flex-direction: column;
}

.tafel-pruefliste.zu .pruef-rumpf { display: none; }
.tafel-pruefliste[hidden] { display: none; }

.pruef-rumpf {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Der Schalter mit zwei Stellungen. Kein select: zwei Stellungen sind
   zwei Knoepfe, und man sieht ohne Aufklappen, welche gilt. */
.pruef-modus {
  display: flex;
  gap: 2px;
  padding: 5px 6px;
  border-bottom: 1px solid var(--linie);
}

.pruef-modus-knopf {
  flex: 1;
  padding: 4px 2px;
  font: inherit;
  font-size: 10px;
  color: var(--schrift-matt);
  background: var(--leiste-tief);
  border: 1px solid var(--linie);
  border-radius: 2px;
  cursor: pointer;
}

.pruef-modus-knopf:hover { color: var(--schrift-hell); }

.pruef-modus-knopf.aktiv {
  color: var(--schrift-hell);
  background: var(--auswahl);
  border-color: var(--akzent);
}

.pruef-gruppen {
  overflow: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
}

.pruef-gruppe-kopf {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  cursor: pointer;
  font-size: 11px;
}

.pruef-gruppe-kopf:hover { background: var(--zeile-hover); }
.pruef-gruppe-kopf .klapp { width: 10px; color: var(--schrift-matt); font-size: 9px; }
.pruef-gruppe-titel { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pruef-gruppe-stand {
  flex: none;
  font-size: 10px;
  color: var(--schrift-matt);
}

.pruef-gruppe-stand.fehler { color: var(--warnung); }

.pruef-schritt {
  padding: 3px 6px 5px 20px;
  border-left: 2px solid transparent;
}

.pruef-schritt.ok { border-left-color: var(--farbe-symbolFertig, var(--akzent)); }
.pruef-schritt.fehler { border-left-color: var(--warnung); }

.pruef-schritt-kopf {
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.pruef-nr {
  flex: none;
  width: 13px;
  color: var(--schrift-matt);
  font-size: 10px;
  line-height: 15px;
}

.pruef-text { flex: 1; font-size: 11px; line-height: 15px; }

.pruef-knoepfe { flex: none; display: flex; gap: 2px; }

.pruef-haken,
.pruef-kreuz {
  width: 18px;
  height: 18px;
  padding: 0;
  font: inherit;
  font-size: 11px;
  line-height: 16px;
  color: var(--schrift-matt);
  background: none;
  border: 1px solid var(--linie);
  border-radius: 2px;
  cursor: pointer;
}

.pruef-haken:hover { color: var(--farbe-symbolFertig, var(--akzent)); border-color: currentColor; }
.pruef-kreuz:hover { color: var(--warnung); border-color: currentColor; }

.pruef-schritt.ok .pruef-haken {
  color: var(--farbe-symbolFertig, var(--akzent));
  border-color: currentColor;
}

.pruef-erwartet {
  padding-left: 18px;
  font-size: 10px;
  line-height: 14px;
  color: var(--schrift-matt);
}

.pruef-marke {
  padding-left: 18px;
  font-size: 10px;
  color: var(--warnung);
}

/* ---------- Ansichtswuerfel und Navigation ---------- */

.wuerfel {
  position: absolute;
  z-index: 15;
  top: calc(var(--hoehe-kopf) + var(--hoehe-reiter) + var(--hoehe-band) + 6px);
  right: 14px;
  width: 216px;
  height: 216px;
}

.wuerfel-kasten {
  position: absolute;
  inset: 26px;
}

.wpfeil {
  position: absolute;
  z-index: 2;
  appearance: none;
  border: 0;
  background: none;
  color: var(--schrift-matt);
  font-size: 13px;
  line-height: 1;
  width: 24px;
  height: 24px;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 2px;
}

.wpfeil:hover { color: var(--schrift-hell); background: var(--wpfeil-hover); }

.wpfeil svg { width: 17px; height: 17px; }

.w-hoch { top: 0; left: 50%; transform: translateX(-50%); }
.w-runter { bottom: 0; left: 50%; transform: translateX(-50%); }
.w-links { left: 0; top: 50%; transform: translateY(-50%); }
.w-rechts { right: 0; top: 50%; transform: translateY(-50%); }
.w-rollLinks { top: 0; left: 48px; }
.w-rollRechts { top: 0; right: 48px; }
.w-iso { bottom: 0; right: 0; }

.navileiste {
  position: absolute;
  z-index: 15;
  bottom: calc(var(--hoehe-zeit) + 6px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  background: var(--leiste-schwebend);
  border: 1px solid var(--linie);
  border-radius: 3px;
}

.navileiste button {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  color: var(--schrift);
  padding: 2px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.navileiste button:hover { background: var(--flaeche-hover); border-color: var(--linie-hell); }
.navileiste svg { display: block; width: 17px; height: 17px; }
.navileiste .teiler { width: 1px; height: 15px; background: var(--linie-hell); margin: 0 2px; }

/* ---------- Zeitleiste ---------- */

.zeitleiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--hoehe-zeit);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  background: var(--leiste);
  border-top: 1px solid var(--linie);
}

.zeit-knoepfe, .zeit-ende { display: flex; align-items: center; gap: 1px; }

.zeit-knoepfe button, .zeit-ende button {
  appearance: none;
  border: 0;
  background: none;
  color: var(--schrift-matt);
  cursor: pointer;
  padding: 2px 3px;
  display: grid;
  place-items: center;
}

.zeit-knoepfe button:hover, .zeit-ende button:hover { color: var(--schrift-hell); }
.zeit-knoepfe svg, .zeit-ende svg { display: block; width: 13px; height: 13px; }

.zeit-marken {
  position: relative; /* Bezug fuer Marker und Ueberzug (zeitreise.js) */
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 100%;
  border-left: 1px solid var(--linie-hell);
  padding-left: 8px;
}

.marke {
  position: relative;
  width: 26px; height: 22px;
  border: 1px solid var(--linie-hell);
  border-radius: 2px;
  background: var(--leiste-tief);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.marke:hover { border-color: var(--akzent); }
.marke.gewaehlt { border-color: var(--schrift-hell); background: var(--flaeche-hover); }
.marke svg { width: 15px; height: 15px; display: block; }

/* ---------- Fehlerhafte Objekte (Vertrag 6s, Paket 79) ----------
   Der Schritt bekommt ein Zeichen in der Ecke, wie in Fusion: ein
   Warndreieck an einer Skizze (die Arbeit steht noch, sie rechnet nur
   nicht) und ein Kreuz an einem Feature (der Koerper zeigt es nicht).
   Ausgegraut wird nichts, verschwinden tut nichts: der Schritt bleibt
   anklickbar, und ein Doppelklick oeffnet ihn zum Heilen. */

.marke.fehlerhaft { border-color: var(--warnung); }

.fehlerzeichen {
  position: absolute;
  right: -3px;
  top: -4px;
  min-width: 11px;
  height: 11px;
  padding: 0 1px;
  border-radius: 6px;
  background: var(--warnung);
  color: var(--schrift-auf-akzent);
  font-size: 9px;
  font-weight: 700;
  line-height: 11px;
  text-align: center;
  pointer-events: none;
}

/* Die Skizze bekommt den waermeren Ton: sie ist eine Warnung, kein
   Ausfall. Das Feature behaelt das Rot von --warnung. */
.fehlerzeichen.skizze { background: var(--akzent-warm); }

/* Im Baum sitzt das Zeichen hinter der Beschriftung und nicht als
   Eckabzeichen: dort gibt es keine quadratische Marke, an deren Ecke es
   haengen koennte. */
.zweig .fehlerzeichen {
  position: static;
  margin-left: 5px;
  flex: 0 0 auto;
  align-self: center;
}

.zweig.fehlerhaft .text { color: var(--warnung); }

/* ---------- Zeitleisten-Marker (SCHNITTSTELLE.md 6j) ----------
   Der Marker sitzt HINTER dem Feature, auf dem der Koerper steht. Alles
   dahinter wird ausgegraut und der Bereich eingefaerbt, aber NICHTS
   verschwindet: die Features stehen weiter im Dokument. Wer sie
   versteckt, macht aus einem Zurueckblaettern einen Datenverlust im Kopf
   des Nutzers (Messung 2026-09-02, Punkt 7). */

.marke { z-index: 1; } /* ueber dem Ueberzug, sonst waere sie nicht klickbar */

.marke.hinter-marker {
  opacity: .42;
  filter: grayscale(1);
  border-style: dashed;
}
.marke.hinter-marker:hover { opacity: .7; }

/* Der eingefaerbte Bereich hinter dem Marker. Das Ausgrauen allein
   reicht nicht: graue Bedienteile liest jeder als "geht nicht", die
   Faerbung sagt "hier ist gerade nichts, das ist ein Zustand". Fusion
   macht genau das. */
.zeit-hinten {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    var(--marker-streifen-a) 0 6px,
    var(--marker-streifen-b) 6px 12px
  );
  border-left: 1px solid var(--marker-linie);
}

.zeit-marker {
  position: absolute;
  top: 0; bottom: 0;
  width: 13px;
  margin-left: -6px;
  z-index: 3;
  display: grid;
  place-items: center;
  cursor: ew-resize;
  touch-action: none; /* sonst schluckt die Geste der Browser */
}

/* Wie beim Dialog-Schleier: display auf der Klasse schlaegt sonst das
   hidden-Attribut, der Marker stuende im leeren Dokument sichtbar da. */
.zeit-marker[hidden] { display: none; }

.zeit-marker::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--akzent-warm);
}

.zeit-marker-griff {
  position: relative;
  width: 9px;
  height: 13px;
  border-radius: 2px;
  background: var(--akzent-warm);
  box-shadow: var(--schatten-rand);
}

.zeit-marker:hover .zeit-marker-griff,
.zeit-marker.zieht .zeit-marker-griff { background: var(--akzent-warm-hell); }

/* Der ganze Balken sagt es mit: steht der Marker zurueck, traegt die
   Zeitleiste oben eine warme Linie. Das sieht man auch dann, wenn die
   Marken aus dem Blick gescrollt sind. */
.zeitleiste.marker-zurueck { border-top: 2px solid var(--akzent-warm); }

/* Der Schalter "alle Körper" (Paket 66, Vertrag 6m). Er sitzt links vom
   Zahnrad und ist ein Text, kein Symbol: er sagt, was er zeigt. */
.zeit-ende .zeit-schalter {
  font-size: 11px;
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--linie);
  color: var(--schrift-matt);
}

.zeit-ende .zeit-schalter:hover { color: var(--schrift-hell); border-color: var(--linie-hell); }

.zeit-ende .zeit-schalter.an {
  color: var(--schrift-hell);
  border-color: var(--akzent);
  background: var(--flaeche-hover);
}

.zeit-hinweis {
  color: var(--akzent-warm);
  font-size: 11px;
  white-space: nowrap;
  padding: 0 8px 0 2px;
  cursor: pointer;
}

/* Dasselbe Ausgrauen im Browser-Baum: dieselben Features, dieselbe
   Aussage. */
.zweig.hinter-marker .text { color: var(--schrift-matt); font-style: italic; }
.zweig.hinter-marker .symbol { opacity: .45; filter: grayscale(1); }

/* ---------- Einstellungen-Dialog ---------- */

.dialog-schleier {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--schleier);
  display: grid;
  place-items: center;
}

/* Wichtig: display auf der Klasse schlaegt sonst das hidden-Attribut,
   der Schleier laege unsichtbar-modal ueber allem und fraesse jeden Klick. */
.dialog-schleier[hidden] { display: none; }

.dialog {
  width: 620px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  background: var(--grund-hell);
  border: 1px solid var(--linie);
  border-radius: 3px;
  box-shadow: var(--schatten-dialog);
  display: flex;
  flex-direction: column;
}

.dialog-rumpf {
  display: flex;
  min-height: 300px;
}

.dialog-seite {
  flex: 0 0 150px;
  border-right: 1px solid var(--linie);
  background: var(--leiste-tief);
  padding: 6px 0;
}

.dialog-kategorie {
  padding: 5px 12px;
  color: var(--schrift-matt);
  cursor: pointer;
}

.dialog-kategorie:hover { color: var(--schrift); }

.dialog-kategorie.aktiv {
  color: var(--schrift-hell);
  background: var(--auswahl);
}

.dialog-fuss {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--linie);
}

.knopf {
  appearance: none;
  border: 1px solid var(--linie-hell);
  border-radius: 2px;
  background: var(--leiste-tief);
  color: var(--schrift);
  font: inherit;
  padding: 5px 18px;
  cursor: pointer;
}

.knopf:hover { background: var(--flaeche-hover); }

.knopf-primaer {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--schrift-invers);
}

.knopf-primaer:hover { background: var(--akzent-hover); }

.dialog-kopf {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 4px 0 10px;
  background: var(--leiste-tief);
  border-bottom: 1px solid var(--linie);
  color: var(--schrift-matt);
  font-size: 10px;
  letter-spacing: .6px;
}

.dialog-titel { flex: 1; }

.dialog-zu {
  appearance: none;
  border: 0;
  background: none;
  color: var(--schrift-matt);
  font-size: 15px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  border-radius: 2px;
}

.dialog-zu:hover { color: var(--schrift-hell); background: var(--flaeche-hover); }

.dialog-inhalt { flex: 1; padding: 12px 16px; }

.dialog-abschnitt {
  color: var(--schrift-hell);
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 8px;
}

.dialog-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.dialog-zeile select {
  flex: 0 0 170px;
  background: var(--leiste-tief);
  color: var(--schrift);
  border: 1px solid var(--linie-hell);
  border-radius: 2px;
  font: inherit;
  padding: 3px 4px;
}

.dialog-hinweis {
  color: var(--schrift-matt);
  font-size: 10px;
  line-height: 1.5;
}

/* ---------- Meldedialog (Paket 81, Vertrag 6t) ---------- */

/* Schmaler als die Einstellungen: er hat eine Spalte und keine
   Kategorienliste links. Alles andere ist Zeichen fuer Zeichen der
   Einstellungen-Dialog. */
.dialog-meldung { width: 460px; }

.meldung-herkunft {
  margin-bottom: 10px;
  padding: 6px 8px;
  background: var(--leiste-tief);
  border-left: 2px solid var(--warnung);
  border-radius: 2px;
}

.meldung-herkunft-titel {
  color: var(--schrift-hell);
  font-size: 11px;
  font-weight: 600;
}

.meldung-feld {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 6px 7px;
  font: inherit;
  font-size: 12px;
  line-height: 1.45;
  color: var(--schrift);
  background: var(--leiste-tief);
  border: 1px solid var(--linie-hell);
  border-radius: 2px;
  resize: vertical;
}

.meldung-feld:focus { outline: 1px solid var(--akzent); outline-offset: -1px; }

.meldung-liste {
  margin: 0 0 6px;
  padding-left: 16px;
  color: var(--schrift-matt);
  font-size: 11px;
  line-height: 1.6;
}

/* ---------- Statuszeile und VR ---------- */

/* Meldung links, daneben der Freiheitsgrad-Zaehler; der Behaelter
   traegt die Lage, die bisher .status selbst hatte. */
.status-zeile {
  position: absolute;
  z-index: 16;
  left: 246px;
  /* Rechts begrenzt, damit eine lange Meldung umbricht statt aus dem
     Fenster zu laufen. Die Absagen des Ausschnitts ("nichts abgetragen",
     "die Tasche wuerde den ganzen Koerper wegnehmen") tragen den einzigen
     Hinweis, was zu tun ist, und duerfen nirgends abgeschnitten werden. */
  right: 250px;
  bottom: calc(var(--hoehe-zeit) + 6px);
  display: flex;
  align-items: baseline;
  gap: 16px;
  pointer-events: none;
}

.status {
  color: var(--schrift-matt);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  /* Der Text nimmt den Platz und bricht um, der Zaehler daneben bleibt
     ganz (er schrumpft sonst als erster). */
  flex: 1 1 auto;
  min-width: 0;
}

.status.fehler { color: var(--warnung); }

/* Freiheitsgrad-Zaehler: klein und ruhig, dauerhaft rechts neben der
   Meldung. Voll bestimmt toent gruen (Token FARBEN.fixiert). */
.dof-zaehler {
  color: var(--schrift-matt);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
  opacity: .85;
}

.dof-zaehler.bestimmt { color: var(--farbe-fixiert); }

/* Massanzeige der freien Auswahl (koerperauswahl.js), Vorbild Fusion:
   ein kleines Schild unten rechts, das sagt, WAS gewaehlt ist und WIE
   GROSS es ist. Es sitzt ueber dem VR-Fach und nicht daneben, damit es
   nicht mit dessen wechselnder Breite (ENTER VR / VR NOT SUPPORTED)
   zusammenstoesst. pointer-events aus: es liegt ueber der 3D-Ansicht und
   darf keinen Klick abfangen. */
.massanzeige {
  position: fixed;
  z-index: 17;
  right: 14px;
  bottom: calc(var(--hoehe-zeit) + 38px);
  padding: 4px 8px;
  background: var(--anzeige-grund);
  border: 1px solid var(--linie);
  border-radius: 3px;
  color: var(--schrift);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  pointer-events: none;
}

.mass-zeile + .mass-zeile { margin-top: 2px; }

/* Fach unten rechts ueber der Zeitleiste: VR-Knopf und Vollbild-Knopf
   nebeneinander. Unten Mitte ginge nicht, dort deckte der VR-Knopf frueher
   die Navigationsleiste zu (Kostjas Testrunde, Paket 16 Punkt 6: darunter
   liegende Knoepfe waren nicht klickbar). Der VR-Knopf steht als letztes
   Kind ganz rechts und bleibt damit an seinem alten Platz, egal ob sein
   Text (ENTER VR/EXIT VR/VR NOT SUPPORTED/VR NOT ALLOWED) die Breite
   aendert; nur der Vollbild-Knopf links daneben rueckt mit. */
#unten-rechts {
  position: fixed;
  z-index: 18;
  right: 14px;
  bottom: calc(var(--hoehe-zeit) + 6px);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* VRButton.js (Vendor) setzt Lage und Aussehen als Inline-Style, darum
   ueberall !important. position:static gibt ihn an das Fach ab, sonst
   haengt er weiter absolut am Fenster. Das inline gesetzte z-index:999
   wirkt an einem statischen Element nicht mehr, die Stapelhoehe kommt
   damit vom Fach und ist dieselbe wie vorher. */
#VRButton {
  /* Farbe mit !important, weil VRButton.js sie als Inline-Stil setzt und
     bei jedem Zustandswechsel neu schreibt. Ohne das truege der Knopf im
     Helldesign weisse Schrift auf hellem Grund. Die Werte der Stufe
     "jetzt" sind genau die des Vendors, dort aendert sich nichts. */
  border-color: var(--vr-knopf-rand) !important;
  background: var(--vr-knopf-grund) !important;
  color: var(--vr-knopf-schrift) !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  border-radius: 3px !important;
  font-size: 11px !important;
  letter-spacing: .4px;
}

/* Gleiche Optik wie der VR-Knopf: die Werte sind aus dessen
   stylizeElement (vendor/three/addons/webxr/VRButton.js) uebernommen,
   damit der Vollbild-Knopf aussieht, als haette er immer dazugehoert.
   Wer den Vendor aktualisiert und dort andere Werte findet, zieht sie
   hier nach. */
#VollbildKnopf {
  width: 100px;
  padding: 12px 6px;
  border: 1px solid var(--vr-knopf-rand);
  border-radius: 3px;
  background: var(--vr-knopf-grund);
  color: var(--vr-knopf-schrift);
  font: normal 11px sans-serif;
  letter-spacing: .4px;
  text-align: center;
  opacity: .5;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

#VollbildKnopf:hover { opacity: 1; }

#VollbildKnopf svg { display: block; flex: 0 0 auto; }

/* ---------- Skizzenpalette ---------- */

/* Sie steht rechts unter dem Ansichtswuerfel und ist nur da, solange eine
   Skizze laeuft, deshalb schaltet sie ueber hidden. Wie beim Dialog-Schleier
   gilt: display auf der Klasse schlaegt sonst das hidden-Attribut, die
   Palette laege dann immer im Bild. */
.tafel-palette {
  top: calc(var(--hoehe-kopf) + var(--hoehe-reiter) + var(--hoehe-band) + 232px);
  right: 14px;
  width: 220px;
  /* 276px statt vormals 242px: das Fach unten rechts (Vollbild und VR)
     sitzt ueber der Zeitleiste und liegt mit z-index 18 VOR den Tafeln.
     Bei 242px ragte der untere Rand der Palette gemessen 20 Pixel unter
     das Fach, der Knopf "Skizze fertig stellen" war dort nicht klickbar,
     in einem 800x450 grossen Fenster sogar ganz verdeckt (Paket 31,
     Prueflauf 2026-09-03, Befund 2). Gleicher Wert wie bei der
     Messpalette (.tafel-messen weiter unten), aus demselben Grund.
     Bis zur Zeitleiste, der Rest scrollt innen (siehe .palette-rumpf):
     max() haelt sie auch in einem niedrigen Fenster bedienbar und den
     Knopf erreichbar, statt sie auf einen Streifen zu quetschen. */
  max-height: max(200px, calc(100vh - var(--hoehe-kopf) - var(--hoehe-reiter)
                   - var(--hoehe-band) - var(--hoehe-zeit) - 276px));
  display: flex;
  flex-direction: column;
}

.tafel-palette[hidden] { display: none; }

/* Eingeklappt bleibt nur die Kopfzeile stehen. */
.tafel-palette.palette-zu .palette-rumpf,
.tafel-palette.palette-zu .palette-fuss { display: none; }

.palette-rumpf { overflow: auto; scrollbar-width: thin; }

.palette-abschnitt { border-bottom: 1px solid var(--linie); }
.palette-abschnitt:last-child { border-bottom: 0; }

.palette-abschnitt-kopf {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 6px;
  color: var(--schrift-hell);
  cursor: pointer;
}

.palette-abschnitt-kopf:hover { background: var(--zeile-hover); }
.palette-pfeil { width: 10px; color: var(--schrift-matt); font-size: 10px; }

.palette-abschnitt-inhalt { padding: 3px 8px 7px 16px; }
.palette-abschnitt-inhalt[hidden] { display: none; }

.palette-werkzeug { color: var(--schrift-hell); padding: 2px 0 4px; }

.palette-hinweis {
  color: var(--schrift-matt);
  font-size: 10px;
  padding: 1px 0 3px;
}

.palette-zeile {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
}

.palette-beschriftung { flex: 1; color: var(--schrift-matt); }

/* Passen die Knoepfe neben der Beschriftung nicht mehr in die Palette
   (drei Text-Knoepfe wie beim Winkelabstand der runden Anordnung), rutscht
   die Knopfleiste unter die Beschriftung, statt aus der Tafel zu laufen. */
.palette-zeile { flex-wrap: wrap; }
.palette-knoepfe { display: flex; gap: 2px; }

.palette-knopf {
  appearance: none;
  border: 1px solid var(--linie-hell);
  border-radius: 2px;
  background: var(--leiste-tief);
  color: var(--schrift);
  font: inherit;
  padding: 2px 5px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.palette-knopf:hover { background: var(--flaeche-hover); }

.palette-knopf.aktiv {
  border-color: var(--akzent);
  background: var(--flaeche-hover);
  color: var(--schrift-hell);
}

.palette-knopf svg { display: block; width: 20px; height: 20px; }
.palette-knopf.text { font-size: 10px; }

.palette-haken {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  cursor: pointer;
}

.palette-haken input { margin: 0; accent-color: var(--akzent); }
.palette-haken.aus { color: var(--schrift-matt); opacity: .5; cursor: not-allowed; }

.palette-fuss { padding: 7px 8px; border-top: 1px solid var(--linie); }
.palette-fertig { width: 100%; padding: 5px 0; }

/* Oeffner der Beziehungs- und Massliste im Palettenkopf */
.palette-liste {
  border: 1px solid var(--linie-hell);
  border-radius: 2px;
  padding: 0 5px;
  background: var(--leiste-tief);
}

.palette-liste:hover { background: var(--flaeche-hover); }

/* ---------- Palette MESSEN (messen.js, SCHNITTSTELLE.md 6h) ----------

   Sie steht an derselben Stelle wie die Skizzenpalette und teilt sich
   deren Innereien (.palette-abschnitt, .palette-knopf, .palette-hinweis):
   beide sind Fusion-Paletten und sollen gleich aussehen. Gleichzeitig
   koennen sie nie dastehen, Skizze und Messen teilen sich die
   Szene-Klicks. Etwas breiter als die Skizzenpalette, weil hier ZAHLEN
   mit Einheit und Sekundaereinheit stehen ("40,00 mm (1,5748 in)"). */
.tafel-messen {
  top: calc(var(--hoehe-kopf) + var(--hoehe-reiter) + var(--hoehe-band) + 232px);
  right: 14px;
  width: 258px;
  /* 276px, gleicher Wert wie bei der Skizzenpalette (.tafel-palette
     weiter oben) und aus demselben Grund: das Fach unten rechts
     (Vollbild und VR) sitzt ueber der Zeitleiste und liegt mit z-index 18
     VOR den Tafeln. Mit weniger Abstand laege der Knopf "Schliessen"
     darunter und waere nicht klickbar. */
  max-height: max(200px, calc(100vh - var(--hoehe-kopf) - var(--hoehe-reiter)
                   - var(--hoehe-band) - var(--hoehe-zeit) - 276px));
  display: flex;
  flex-direction: column;
}

/* Wie bei den anderen Tafeln: display auf der Klasse schlaegt sonst das
   hidden-Attribut, die Palette laege dann immer im Bild. */
.tafel-messen[hidden] { display: none; }

/* Eine Ergebniszeile: links die Beschriftung, rechts der Wert. */
.mess-zeile {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 2px 0;
}

.mess-name { flex: 1; color: var(--schrift-matt); }

/* Der Wert ist ein KNOPF, weil er zwei Fusion-Tipps traegt: Zeiger
   darueber hebt die Messung in der Ansicht hervor, Klick kopiert ihn in
   die Zwischenablage. Er sieht trotzdem wie Text aus, damit die Palette
   nicht zur Knopfleiste wird. */
.mess-wert {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  color: var(--schrift-hell);
  font: inherit;
  font-variant-numeric: tabular-nums;
  padding: 0 3px;
  cursor: pointer;
  text-align: right;
}

.mess-wert:hover {
  border-color: var(--linie-hell);
  background: var(--leiste-tief);
}

/* Kein Wert vom Dienst: das Feld bleibt LEER (Vertrag 6h, Regel 1). Kein
   Platzhalterzeichen, das man fuer einen Wert halten koennte; die
   gestrichelte Linie zeigt nur, dass hier ein Feld ist, und der Tooltip
   nennt den Grund. Nicht anklickbar, denn es gibt nichts zu kopieren. */
.mess-wert.leer {
  min-width: 34px;
  border-bottom: 1px dashed var(--linie-hell);
  cursor: help;
}

.mess-wert.leer:hover { background: none; }

/* Kopfzeile je Auswahl im Abschnitt Eigenschaften. */
.mess-kopf {
  color: var(--schrift-hell);
  margin: 5px 0 2px;
}

.mess-kopf:first-child { margin-top: 0; }

/* Die gewaehlten Elemente im Abschnitt Auswahl. */
.mess-auswahl {
  padding: 1px 0;
  cursor: default;
}

.mess-auswahl:hover { color: var(--schrift-hell); }

/* Die Absage des Dienstes, ungekuerzt. Sie steht da, wo sonst das
   Ergebnis stuende, denn sie IST das Ergebnis. */
.mess-fehler {
  color: var(--farbe-abtrag);
  padding: 2px 0;
}

/* Genauigkeit und Sekundaereinheit. */
.mess-wahl {
  background: var(--leiste-tief);
  border: 1px solid var(--linie-hell);
  border-radius: 2px;
  color: var(--schrift);
  font: inherit;
  padding: 1px 2px;
}

/* ---------- Beziehungs- und Mass-Panel (beziehungs-panel.js) ---------- */

/* Links unten, oberhalb der Kommentare-Tafel; der Status beginnt erst
   bei 246px, darum bleibt die Breite bei den 236px der linken Tafeln. */
.tafel-beziehungen {
  left: 4px;
  bottom: calc(var(--hoehe-zeit) + 32px);
  width: 236px;
  max-height: 46vh;
  display: flex;
  flex-direction: column;
}

/* Wie bei den anderen Tafeln: display auf der Klasse schlaegt sonst das
   hidden-Attribut. */
.tafel-beziehungen[hidden] { display: none; }

.bezpanel-rumpf {
  overflow: auto;
  scrollbar-width: thin;
  padding: 4px 8px 7px;
}

.bezpanel-filter {
  display: block;
  width: 100%;
  margin: 2px 0 5px;
  background: var(--leiste-tief);
  border: 1px solid var(--linie-hell);
  border-radius: 2px;
  color: var(--schrift);
  padding: 3px 6px;
  font: inherit;
  outline: none;
}

.bezpanel-filter:focus { border-color: var(--akzent); }

.bezpanel-abschnitt-titel {
  color: var(--schrift-hell);
  font-weight: 600;
  padding: 5px 0 2px;
}

.bezpanel-zeile {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 1px 3px;
  border-radius: 2px;
  cursor: pointer;
}

.bezpanel-zeile:hover { background: var(--zeile-hover); }
.bezpanel-zeile.gewaehlt { background: var(--auswahl); color: var(--schrift-hell); }

.bezpanel-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bezpanel-info {
  flex: 1;
  text-align: right;
  color: var(--schrift-matt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.bezpanel-zeile.gewaehlt .bezpanel-info { color: var(--schrift-hell); }

/* intern (Beziehung) und getrieben (Mass) sind gedimmt, wie die Klammern
   in Fusion */
.bezpanel-zeile.gedimmt .bezpanel-name,
.bezpanel-zeile.gedimmt .bezpanel-info { color: var(--schrift-matt); }

.bezpanel-marke {
  color: var(--schrift-matt);
  font-size: 9px;
  letter-spacing: .3px;
}

.bezpanel-x {
  appearance: none;
  border: 0;
  background: none;
  color: var(--schrift-matt);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 2px;
}

.bezpanel-x:hover { color: var(--warnung); }

.bezpanel-leer {
  color: var(--schrift-matt);
  font-size: 10px;
  padding: 2px 3px 3px;
}

/* Werkzeugsymbol am Mauszeiger, siehe cursorsymbol.js (Fusion-Vorbild).
   [hidden] wie bei .dialog-schleier explizit ueberschrieben, sonst
   schlaegt display: grid das hidden-Attribut. */
.cursor-symbol {
  position: absolute;
  z-index: 25;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: var(--schrift-hell);
}

.cursor-symbol[hidden] { display: none; }

/* ---------- Marking Menu (Rechtsklick im Skizzen-Grundzustand) ----------
   Radiales Menue, siehe marking-menu.js: der Behaelter sitzt punktfoermig
   am Klickpunkt, die Knoepfe haengen als Kreis darum. */

.marking-menue {
  position: absolute;
  z-index: 30;
  width: 0;
  height: 0;
}

.marking-knopf {
  position: absolute;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tafel-rand);
  border-radius: 50%;
  background: var(--tafel);
  color: var(--schrift);
  cursor: pointer;
  box-shadow: var(--schatten-weich);
}

.marking-knopf:hover {
  border-color: var(--akzent);
  background: var(--tafel-hover);
  color: var(--schrift-hell);
}

.marking-knopf svg { display: block; }

/* Beschriftung des gehoverten Sektors, unter dem Ring (top setzt JS) */
.marking-beschriftung {
  position: absolute;
  transform: translate(-50%, 0);
  padding: 2px 8px;
  background: var(--tafel);
  border: 1px solid var(--tafel-rand);
  border-radius: 3px;
  color: var(--schrift-klar);
  font: 12px "Segoe UI", sans-serif;
  white-space: nowrap;
  pointer-events: none;
}

.marking-beschriftung[hidden] { display: none; }

/* ---------- Schnellbox (Taste S, durchsuchbare Befehlsliste) ----------
   Seit Paket 80 gilt sie ueberall, nicht nur in der Skizze. 260 statt
   220 Pixel, weil die laengsten Titel des Volumenmodus ("Exportieren
   (aktiver Körper)") sonst abgeschnitten wuerden. Die Breite steht nur
   noch HIER: schnellbox.js misst die Box nach dem Anhaengen und stellt
   sie danach, wie das Kontextmenue es auch macht. */

.schnellbox {
  position: absolute;
  z-index: 30;
  width: 260px;
  padding: 5px;
  background: var(--tafel);
  border: 1px solid var(--tafel-rand);
  border-radius: 4px;
  box-shadow: var(--schatten-weich);
}

.schnellbox input {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--tafel-rand);
  border-radius: 3px;
  background: var(--leiste-tief);
  color: var(--schrift-hell);
  font: 12px "Segoe UI", sans-serif;
  outline: none;
}

.schnellbox input:focus { border-color: var(--akzent); }

/* Die Liste ROLLT, statt abzuschneiden (Paket 80): der Volumenmodus
   bietet 32 Befehle an, und eine feste Trefferzahl im Skript liesse zwei
   Drittel davon weg. 12 Zeilen zu je 24 Pixel, die aktive Zeile rollt
   beim Wandern mit den Pfeiltasten mit. */
.schnellbox-liste {
  margin-top: 4px;
  max-height: 288px;
  overflow-y: auto;
}

.schnellbox-zeile {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 7px;
  border-radius: 3px;
  color: var(--schrift);
  font: 12px "Segoe UI", sans-serif;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}

.schnellbox-zeile svg { flex: none; display: block; }

.schnellbox-zeile.aktiv {
  background: var(--auswahl);
  color: var(--schrift-hell);
}

.schnellbox-leer {
  padding: 3px 7px;
  color: var(--schrift-matt);
  font: 12px "Segoe UI", sans-serif;
}

/* ---------- Anzeige-Menue (Knopf "Anzeige" in der Navigationsleiste) ----
   Aufklappmenue im Stil der uebrigen Aufsteller (siehe .schnellbox):
   Haupttafel oberhalb des Knopfes, Untertafel daneben. */

.anzeige-menue {
  position: absolute;
  z-index: 30;
  padding: 3px;
  background: var(--tafel);
  border: 1px solid var(--tafel-rand);
  border-radius: 4px;
  box-shadow: var(--schatten-weich);
  font: 12px "Segoe UI", sans-serif;
  color: var(--schrift);
  white-space: nowrap;
}

.anzeige-menue[hidden] { display: none; }

.anzeige-unter { max-width: 300px; }

.anzeige-zeile {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px 4px 4px;
  border-radius: 3px;
  cursor: pointer;
}

.anzeige-zeile:hover,
.anzeige-zeile.aufgeklappt { background: var(--zeile-hover); color: var(--schrift-hell); }

.anzeige-zeile.gewaehlt { color: var(--schrift-hell); }

.anzeige-haken {
  width: 12px;
  flex: none;
  text-align: center;
  color: var(--akzent);
}

.anzeige-text { flex: 1; }

.anzeige-wert {
  color: var(--schrift-matt);
  font-size: 11px;
  padding-left: 12px;
}

.anzeige-pfeil { width: 8px; color: var(--schrift-matt); }

/* Punkte ohne Funktion: ausgegraut, Klick meldet es ehrlich (.attrappe
   liefert die Deckkraft, hier kommt nur der Zeiger dazu). */
.anzeige-zeile.attrappe { cursor: default; }
.anzeige-zeile.attrappe:hover { background: none; color: var(--schrift); }

.anzeige-hinweis {
  padding: 5px 8px 3px 23px;
  margin-top: 2px;
  border-top: 1px solid var(--linie);
  color: var(--schrift-matt);
  font-size: 11px;
  white-space: normal;
  line-height: 1.35;
}

/* ---------- Kontextmenue (Rechtsklick auf einen Koerper im Baum) --------
   Optik wie die uebrigen Aufsteller (.anzeige-menue, .mass-menue): dunkle
   Tafel, ein Eintrag je Zeile, Symbol links. Ausgegraute Eintraege fehlen
   nicht, sie tragen ihren Grund im Tooltip. */

.kontextmenue {
  position: fixed;
  z-index: 40;
  min-width: 190px;
  padding: 3px;
  background: var(--tafel);
  border: 1px solid var(--tafel-rand);
  border-radius: 4px;
  box-shadow: var(--schatten-weich);
  font: 12px "Segoe UI", sans-serif;
  color: var(--schrift);
  white-space: nowrap;
}

.kontext-eintrag {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 5px 12px 5px 5px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.kontext-eintrag:hover { background: var(--zeile-hover); color: var(--schrift-hell); }

/* Ausgegraut: .attrappe bringt die Deckkraft mit, hier kommt nur dazu,
   dass der Zeiger nicht mehr "anklickbar" verspricht. */
.kontext-eintrag.attrappe { cursor: default; }
.kontext-eintrag.attrappe:hover { background: none; color: var(--schrift); }

.kontext-symbol {
  width: 14px;
  flex: none;
  display: grid;
  place-items: center;
}

.kontext-teiler {
  height: 1px;
  margin: 3px 4px;
  background: var(--linie-hell);
}

/* Umbenennen laeuft IM Baum, wie in Fusion, und nicht in einem eigenen
   Dialog: die Zeile wird fuer die Dauer der Eingabe zum Feld. */
.zweig-eingabe {
  flex: 1;
  min-width: 0;
  height: 16px;
  margin: 0 2px;
  padding: 0 3px;
  background: var(--feld-tief);
  border: 1px solid var(--akzent);
  border-radius: 2px;
  color: var(--schrift-hell);
  font: inherit;
}

.zweig-eingabe:focus { outline: none; }