/* Geruest der Oberflaeche.
   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;
  /* Jeder Knopf antwortet (Paket 432, Block 432 unten): ein Hauch beim
     Ueberfahren, beim Druck eine dunklere Flaeche und ein Schatten nach
     innen. Auf dunklem Grund wird das Ueberfahren heller, auf hellem
     dunkler; gedrueckt ist immer dunkler. */
  --knopf-ueber: rgba(255, 255, 255, .07);
  --knopf-druck: rgba(0, 0, 0, .3);
  --knopf-druck-schatten: rgba(0, 0, 0, .55);
  /* Die Pfeile der Ansichtstafel (Paket 210f). Ein gedecktes
     Grau-Blau aus der Familie der Wuerfelflaeche; "stark" ist die
     Fuellung beim Ueberfahren, hier heller, weil der Grund dunkel ist.
     Gleichklang mit tafelPfeil und tafelPfeilStark in js/farben.js. */
  --tafel-pfeil: #b9bec6;
  --tafel-pfeil-stark: #e4e8ee;

  /* Schriftabstufungen neben --schrift, --schrift-hell, --schrift-matt */
  --schrift-klar: #e8edf2;
  --schrift-dialog: #dfe4ea;
  --schrift-gedaempft: #9aa3ad;
  --schrift-auf-akzent: #10151b;
  --schrift-invers: #fff;
  /* Der runde Knopf im Schalter des Einstellungsblatts (Paket 249):
     immer hell, auf grauer und auf blauer Bahn. */
  --schalter-knopf: #eef1f4;

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

  /* Die ZEITLEISTE ist seit Paket 200 in der Hoehe ziehbar (Griff an der
     Oberkante, der Wert liegt am Konto), und ihre Kacheln zeigen das
     Schrittbild. js/zeitleiste-raum.js rechnet alle Zahlen hier aus der
     einen Hoehe und schreibt sie an die Wurzel. Die Werte hier sind die
     VORGABE fuer den Fall, dass noch nichts gezogen wurde oder das
     Skript ausfaellt: eine Kachel mit Bild (90 x 56) und Namen, darueber
     der Platz, in den sie wie im Dock hineinwaechst.
     ALLES, was ueber der Leiste steht (Statuszeile, Tafeln,
     Navigationsleiste, Massanzeige), haengt an --hoehe-zeit und geht
     damit von selbst mit nach oben; genau das war Kostjas Beschwerde vom
     2026-09-13, und sie ist darum keine Frage von z-index. */
  --hoehe-zeit: 104px;
  --kachel-platz: 90px;
  --kachel-hoehe: 72px;
  --kachel-breite: 94px;
  --kachel-bild-hoehe: 56px;
  --kachel-name-hoehe: 12px;
  --kachel-abstand: 4px;
  /* Der Platz, den die Leiste an JEDEM Ende freihaelt, damit das
     Ausweichen der gewachsenen Kacheln (Paket 200b) niemanden aus der
     Leiste schiebt. 36 ist der Wert zur Vorgabe: eine gewachsene Kachel
     greift 11,75 Bildpunkte je Seite ueber ihren Platz, und die Summe
     ueber die Welle des Docks ist 35,25. */
  --dock-rand: 36px;

  /* Hoehe des Fachs unten rechts (Vollbild- und VR-Knopf, Paket 139).
     Der Wert hier ist die grosszuegige VORGABE fuer den Fall, dass noch
     nichts gemessen ist oder das Skript ausfaellt; js/fenster.js misst
     das Fach und schreibt die echte Hoehe hierher. Sie ist grosszuegig,
     weil die Knopfhoehe an der SCHRIFT des Browsers haengt: gemessen
     rund 40px, in einem Browser mit anderer Zeilenhoehe mehr. */
  --hoehe-unten-rechts: 44px;

  /* Breite der linken Spalte (AUFBAU, PRUEFLISTE, KOMMENTARE teilen sie,
     Befund 30, Paket 93). Basis 236px wie bisher; js/tafelbreite.js setzt
     den Wert beim Ziehen und beim Laden neu, begrenzt auf die Basis bis
     zur Haelfte der Fensterbreite oder 640px. */
  --breite-tafel: 236px;

  /* Hoehe des Felds AUFBAU (Paket 183). Der Wert ist eine OBERGRENZE:
     das Feld schrumpft weiter auf seinen Inhalt, waechst aber nicht
     darueber hinaus. 42vh ist die Grenze, die hier bis Paket 183 fest
     stand; js/tafelhoehe.js setzt sie beim Ziehen und beim Laden in
     Bildpunkten neu, begrenzt auf 120px bis zum freien Platz ueber
     PRUEFLISTE, KOMMENTARE und Zeitleiste. */
  --hoehe-tafel: 42vh;

  /* Die Groesse der Bedienung (Paket 361): der Faktor der Stufe Normal.
     Klein und Gross setzen ihn im Abschnitt "Groesse der Bedienung"
     weiter unten; alle Werte oben sind die der Stufe Normal. */
  --groesse: 1;
}

/* ---------- 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;
  --knopf-ueber: rgba(20, 26, 34, .05);
  --knopf-druck: rgba(20, 26, 34, .15);
  --knopf-druck-schatten: rgba(20, 26, 34, .35);
  /* Auf hellem Grund ist die staerkere Aussage die dunklere: der
     Pfeil ist dunkles Grau-Blau und wird beim Ueberfahren noch
     dunkler (3,6 gegen den Grund der Tafel, 7,3 beim Ueberfahren). */
  --tafel-pfeil: #7c8694;
  --tafel-pfeil-stark: #454e5a;

  --schrift-klar: #14181d;
  --schrift-dialog: #232830;
  --schrift-gedaempft: #5f6873;
  --schrift-auf-akzent: #ffffff;
  --schrift-invers: #ffffff;
  --schalter-knopf: #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;
  --knopf-ueber: rgba(255, 255, 255, .07);
  --knopf-druck: rgba(0, 0, 0, .35);
  --knopf-druck-schatten: rgba(0, 0, 0, .6);
  --tafel-pfeil: #b9bec6;
  --tafel-pfeil-stark: #e4e8ee;

  --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;
  --schalter-knopf: #e2e7ee;

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

/* ---------- Die zwei Schemata der Verwaltung (Paket 298) ----------
   Kostja 2026-09-29: "Verwaltung-Design ist gut, bitte A und B mit
   Switch." Nur die Verwaltung (verwaltung.html) setzt data-schema am
   Wurzelelement; die Werkstatt und die anderen Seiten kennen es nicht.

     A "Werkstatt" (dunkel, Vorgabe): die Token aus :root oben, dazu die
       Token dieses Blocks. Die Verwaltung setzt kein data-erscheinung
       mehr, damit gilt dort genau der Stand von :root.
     B "Werkbank" (hell): :root[data-schema="hell"] darunter, dieselben
       Werte wie die Homepage (00_KCW, Farbschema "Werkbank"): Papier mit
       32-px-Raster, Karten mit harter Kante und hartem Schatten.

   Der Wechsel ist reine Farbe und Form ueber Token: die Ansicht wird
   dafuer nicht neu gebaut. Jedes Token, das A kennt (die Farbtoken von
   :root und alle dieses Blocks), hat in B einen Wert
   (tests/test_verwaltung_optik.py). Die Form (Rand, Radius, Schatten)
   steht mit Absicht auch hier: in B sind die Kanten hart. */
:root {
  --gruen: #4fa66f;
  --gruen-flaeche: rgba(79, 166, 111, .14);
  --gruen-rand: rgba(79, 166, 111, .45);
  --gruen-schrift: #8fd0a6;
  --warm-flaeche: rgba(224, 138, 60, .12);
  --warm-rand: rgba(224, 138, 60, .35);
  --warnung-flaeche: rgba(226, 114, 91, .12);
  --warnung-rand: rgba(226, 114, 91, .4);
  --abzeichen-flaeche: rgba(74, 144, 217, .16);
  --abzeichen-schrift: #7fb4ea;
  --trennlinie: #3a3f4a;
  --mess-rand: transparent;
  --balken-grund: #2e3340;
  --kasten-rand: #454b55;
  --knopf-rand: #454b55;
  --knopf-primaer-rand: #4a90d9;
  --chip-gewaehlt: transparent;
  --symbol-flaeche: #2e3340;
  --symbol-rand: transparent;
  --symbol-dunkel: #2e3340;
  --symbol-dunkel-schrift: #eef1f4;
  --menue-aktiv-rand: transparent;
  --menue-aktiv-schatten: inset 3px 0 0 #4a90d9;
  --menue-symbol-aktiv: #eef1f4;
  --kopf-leiste: #1d2127;
  --kopf-leiste-rand: #1d2026;
  --kopf-leiste-schrift: #eef1f4;
  --kopf-leiste-punkt: #c9ced5;
  --kopf-leiste-matt: #868d97;
  --kopf-leiste-akzent: #4a90d9;
  --papier-raster: none;
  --form-rand: 1px;
  --form-karte-radius: 12px;
  --form-kachel-radius: 10px;
  --form-klein-radius: 8px;
  --form-balken-radius: 3px;
  --form-karte-schatten: none;
  --form-kachel-schatten: none;
  --form-knopf-schatten: none;
  --form-warnknopf-schatten: none;
  --form-titel-schrift: inherit;
  --form-titel-wandlung: none;
  --form-chip-schrift: inherit;
  --form-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --form-pille-radius: 999px;
  --form-chip-radius: 6px;
  --warm-knopf: #f2a45c;
  --segment-flaeche: #4a90d9;
  --segment-schrift: #10151b;
}

:root[data-schema="hell"] {
  --grund: #f3efe6;
  --grund-hell: #fbf9f4;
  --leiste: #17201f;
  --leiste-tief: #0f1615;
  --linie: #c9c2b3;
  --linie-hell: #c9c2b3;
  --schrift: #2b3432;
  --schrift-hell: #17201f;
  --schrift-matt: #5c6663;
  --akzent: #1f5fa8;
  --akzent-warm: #b5651d;
  --auswahl: #d5e3f3;

  --tafel: #fbf9f4;
  --tafel-rand: #17201f;
  --tafel-hover: #fbf9f4;
  --tafel-grund: rgba(251, 249, 244, .94);
  --anzeige-grund: rgba(251, 249, 244, .92);
  --leiste-schwebend: rgba(251, 249, 244, .88);

  --fenster: #fbf9f4;
  --dialog-grund: #fbf9f4;
  --dialog-kopf: #17201f;
  --schleier: rgba(23, 32, 31, .35);

  --feld: #f3efe6;
  --feld-tief: #ffffff;
  --feld-rand: #17201f;
  --gruppe: #ece6d9;

  --flaeche-hover: #ece6d9;
  --zeile-hover: #f0ebe0;
  --konto: #c9c2b3;
  --knopf-ueber: rgba(23, 32, 31, .05);
  --knopf-druck: rgba(23, 32, 31, .14);
  --knopf-druck-schatten: rgba(23, 32, 31, .38);
  --tafel-pfeil: #5c6663;
  --tafel-pfeil-stark: #17201f;

  /* Kontrast (WCAG) auf dem Papier #f3efe6: Schrift #2b3432 11,6:1,
     matt #5c6663 5,3:1; matter wird es nicht (Auftrag 298). */
  --schrift-klar: #17201f;
  --schrift-dialog: #17201f;
  --schrift-gedaempft: #5c6663;
  --schrift-auf-akzent: #ffffff;
  --schrift-invers: #ffffff;
  --schalter-knopf: #fbf9f4;

  --akzent-hover: #164579;
  --akzent-warm-hell: #7a4210;
  --warnung: #b9412e;

  --marker-streifen-a: rgba(181, 101, 29, .14);
  --marker-streifen-b: rgba(181, 101, 29, .06);
  --marker-linie: rgba(181, 101, 29, .6);

  --schatten-weich: 3px 3px 0 #17201f;
  --schatten-stark: 4px 4px 0 #17201f;
  --schatten-dialog: 4px 4px 0 #17201f;
  --schatten-rand: 0 0 0 1.5px #17201f;

  --vr-knopf-rand: #17201f;
  --vr-knopf-grund: rgba(255, 255, 255, .55);
  --vr-knopf-schrift: #17201f;

  --gruen: #2f7d4f;
  --gruen-flaeche: #e6f1ea;
  --gruen-rand: #2f7d4f;
  --gruen-schrift: #1f5a37;
  --warm-flaeche: #fbf1e4;
  --warm-rand: #b5651d;
  --warnung-flaeche: #fbe7e2;
  --warnung-rand: #b9412e;
  --abzeichen-flaeche: #1f5fa8;
  --abzeichen-schrift: #ffffff;
  --trennlinie: #e2dccd;
  --mess-rand: #c9c2b3;
  --balken-grund: #e2dccd;
  --kasten-rand: #17201f;
  --knopf-rand: #17201f;
  --knopf-primaer-rand: #17201f;
  --chip-gewaehlt: #eaf1fa;
  --symbol-flaeche: #f3efe6;
  --symbol-rand: #17201f;
  --symbol-dunkel: #17201f;
  --symbol-dunkel-schrift: #f3efe6;
  --menue-aktiv-rand: #17201f;
  --menue-aktiv-schatten: 3px 3px 0 #17201f;
  --menue-symbol-aktiv: #1f5fa8;
  --kopf-leiste: #17201f;
  --kopf-leiste-rand: #17201f;
  --kopf-leiste-schrift: #f3efe6;
  --kopf-leiste-punkt: #d9dedb;
  --kopf-leiste-matt: #9aa6a2;
  --kopf-leiste-akzent: #6fb0ee;
  --papier-raster: linear-gradient(rgba(23, 32, 31, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 32, 31, .06) 1px, transparent 1px);
  --form-rand: 1.5px;
  --form-karte-radius: 4px;
  --form-kachel-radius: 4px;
  --form-klein-radius: 4px;
  --form-balken-radius: 0;
  --form-karte-schatten: 4px 4px 0 #17201f;
  --form-kachel-schatten: 3px 3px 0 #17201f;
  --form-knopf-schatten: 2px 2px 0 #17201f;
  --form-warnknopf-schatten: 2px 2px 0 #b9412e;
  --form-titel-schrift: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --form-titel-wandlung: uppercase;
  --form-chip-schrift: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --form-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --form-pille-radius: 4px;
  --form-chip-radius: 4px;
  --warm-knopf: #17201f;
  --segment-flaeche: #17201f;
  --segment-schrift: #f3efe6;
}

* { 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, #b5c25a);
  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;
  /* Paket 360b: derselbe Abstand wie zwischen den Angaben in der Mitte
     (.kopf-mitte). Beim Gast ist die rechte Seite so voll, dass sie auf
     ihre Mindestbreite schrumpft; ohne den Abstand stiessen "1 Körper" und
     "noch 14 min" ohne Luft aneinander. */
  gap: 6px;
  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; }

/* Das Wortzeichen ganz links (Pakete 105 und 245, regeln/gestaltung.md):
   der Schriftzug kriegerCAD aus js/wortzeichen.js, kein Bild. Wie er
   aussieht (Schrift, Gewichte, CAD in --akzent), steht in der EINEN
   Regel .wortzeichen in schrift/schrift.css; hier stehen nur Groesse
   und Textfarbe der Stelle: krieger nimmt --schrift-hell an und dreht
   damit mit hell und dunkel mit, in allen drei Erscheinungen.
   cursor: default, weil es kein Knopf ist: es fuehrt nirgendwohin und
   sagt im Tooltip nur, wo man ist. */
.kopf-marke {
  margin: 0 10px 0 6px;
  display: flex;
  align-items: center;
  font-size: 17px;
  color: var(--schrift-hell);
  cursor: default;
  user-select: none;
}

.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, direkt am Namen dessen, was ungespeichert
   ist. Seit Paket 275 traegt die Diskette denselben Punkt klein an ihrer
   Ecke (.datei-knopf.ungespeichert weiter unten): sie oeffnet jetzt das
   Menue mit allem, was speichert, und der Punkt sagt, dass es dort etwas
   zu tun gibt.
   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;
}

/* Der ungespeicherte Stand an der Diskette (Paket 275): dieselbe warme
   Farbe wie der Punkt am Namen, kleiner, oben rechts am Knopf. datei.js
   setzt die Klasse in _knoepfeAuffrischen, beim Gast nie. */
.datei-knopf.ungespeichert {
  position: relative;
}

.datei-knopf.ungespeichert::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--akzent-warm);
  pointer-events: none;
}

/* 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. */
/* Was auf der Stufe offen ist (Paket 100), neben dem Dokumentnamen.
   Gedaempft und ohne Rahmen: es ist eine Auskunft und keine Warnung, im
   Unterschied zum orangefarbenen TEST-Feld daneben. */
.kopf-offen {
  color: var(--schrift-gedaempft);
  font-size: 11px;
}

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

/* Der Mandant in der Kopfleiste (Paket 224, Stufe A): klein, neben dem
   Stufennamen, gedaempft wie das Offen-Feld. Eine Auskunft und keine
   Warnung. Steht nur auf einem Kunden-Container (CAD_MANDANT gesetzt). */
.kopf-mandant {
  color: var(--schrift-gedaempft);
  font-size: 11px;
}

/* Stufe lokal: der Aktivierungsstand in der Kopfleiste (Paket 226,
   Vertrag 6ae). Ruhiger als das Testfeld: eine Auskunft, keine Warnung.
   Der Loeschen-Knopf sitzt daneben. */
.kopf-lokal {
  padding: 1px 8px;
  border-radius: 2px;
  background: var(--flaeche-hover);
  color: var(--schrift-gedaempft);
  font-size: 11px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kopf-lokal-loeschen {
  margin-left: 4px;
  padding: 1px 6px;
  border: 1px solid var(--linie-hell);
  border-radius: 2px;
  background: none;
  color: var(--schrift-gedaempft);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.kopf-lokal-loeschen:hover {
  background: var(--flaeche-hover);
  color: var(--schrift-hell);
}

/* Stufe lokal: der Abgleich-Stand in der Kopfleiste (Paket 227,
   Vertrag 6ae). Ruhig wie das Aktivierungsfeld daneben: eine Auskunft,
   keine Warnung. Steht rechts vom Aktivierungsstand. */
.kopf-abgleich {
  padding: 1px 8px;
  border-radius: 2px;
  background: var(--flaeche-hover);
  color: var(--schrift-gedaempft);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}
.kopf-abgleich[hidden] { display: none; }

/* Der laufende Abgleich (Paket 244): Konflikte oder ein voller Deckel
   machen aus der Auskunft ein Band in der warmen Akzentfarbe, damit es
   auffaellt, ohne zu blinken. Der Knopf daneben oeffnet den Dialog. */
.kopf-abgleich-band {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--akzent-warm);
  color: var(--grund);
  font-weight: 600;
}
.kopf-abgleich-knopf {
  padding: 0 6px;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.kopf-abgleich-knopf:hover { background: rgba(0, 0, 0, 0.15); }
.abgleich-konflikt { flex-wrap: wrap; }
.abgleich-konflikt-name { font-weight: 600; }
.abgleich-konflikt-wahl { display: inline-flex; gap: 6px; }
.abgleich-konflikt-wahl .knopf { padding: 3px 10px; }

/* Der Arbeitsort der Sitzung (Paket 240a): "online" oder der Name des
   eigenen Rechners. Ruhig wie die Felder daneben, aber anklickbar, denn
   er ist ein Schalter und keine Auskunft: darum der Zeiger und der
   hellere Rand beim Ueberfahren. */
.kopf-ort {
  padding: 1px 8px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: var(--flaeche-hover);
  color: var(--schrift-gedaempft);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
}
.kopf-ort:hover {
  border-color: var(--linie-hell);
  color: var(--schrift-hell);
}
.kopf-ort[hidden] { display: none; }

/* Nur ansehen (Paket 240c): diese Sitzung sieht zu, weil eine andere
   desselben Kontos arbeitet. Warm wie das TEST-Feld, denn es ist ein
   Zustand, den man kennen muss, aber kein Fehler; der Knopf daneben holt
   die Arbeit hierher. */
.kopf-nur-ansehen {
  padding: 1px 4px 1px 8px;
  border-radius: 2px;
  background: var(--akzent-warm);
  color: var(--grund);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.kopf-nur-ansehen[hidden] { display: none; }
.kopf-nur-ansehen-knopf {
  padding: 1px 8px;
  border: 1px solid var(--grund);
  border-radius: 2px;
  background: var(--grund);
  color: var(--schrift-hell);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.kopf-nur-ansehen-knopf:hover { background: var(--flaeche-hover); }

/* Ein kurzer Satz statt einer Statuszeile (Paket 227): das Ergebnis des
   Uebernehmens und Bringens steht kurz auf, ohne die Statuszeile zu
   belegen. Kein Textblock, nur ein Satz auf Klick. */
.abgleich-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 3px;
  background: var(--grund);
  color: var(--schrift-hell);
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 50;
}
.abgleich-toast-sichtbar { opacity: 1; }
.abgleich-toast-fehler { background: var(--akzent-warm); color: var(--grund); }

/* Der eigene Stand, klein neben Fragezeichen und Warndreieck (Paket 107,
   Vertrag 7). Gedaempft wie das Feld "offen": eine Auskunft, keine
   Warnung. Ein Verweis und kein Knopf, darum die Unterstreichung weg und
   die Schriftfarbe von Hand.
   hidden braucht hier ein eigenes display: none, weil die Regel darueber
   die Vorgabe des Browsers schlaegt (dieselbe Falle wie bei .fortschritt
   in Paket 98). */
.kopf-version {
  display: inline-block;
  margin-left: 6px;
  color: var(--schrift-gedaempft);
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.kopf-version:hover {
  color: var(--schrift-hell);
}

.kopf-version[hidden] { display: none; }

/* Das Zahnrad fuer die Einstellungen, oben rechts (Paket 218).
   Kostja 2026-09-14, 17:45: "weil man es sonst uebersieht." Vorher sass
   es am rechten Ende der Statuszeile unter der Zeitleiste und war die
   kleinste Flaeche der Oberflaeche.
   Es steht unmittelbar links vom Kontofeld und nimmt darum DESSEN Mass:
   20 x 20 Bildpunkte, derselbe Abstand nach links, dieselbe Rundung.
   Das Symbol selbst bleibt klein (16 px), damit es neben dem Feld mit
   dem Stand nicht schreit; die Hervorhebung beim Ueberfahren ist die der
   anderen Knoepfe der Leiste (.werkzeug:hover). */
.kopf-einstellungen {
  appearance: none;
  width: 20px; height: 20px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  color: var(--schrift-gedaempft);
  cursor: pointer;
  display: grid;
  place-items: center;
}

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

.kopf-einstellungen svg { display: block; width: 16px; height: 16px; }

/* Der Schalter hell/dunkel (Paket 358): dieselbe Form wie auf der Homepage
   (Huelle als Pille, Sonne, Bahn mit Knopf, Mond), in der Groesse, die die
   Homepage auf schmalen Bildschirmen nimmt, damit er in die 28 Pixel der
   Kopfleiste passt. Farben aus den Token der Erscheinung; der Knopf steht
   rechts beim Mond (dunkel) und links bei der Sonne (neu-hell). */
.kopf-schema {
  display: flex;
  align-items: center;
  margin-left: 6px;
}

.kopf-schema .schema-schalter-huelle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 5px;
  border: 1px solid var(--linie-hell);
  border-radius: 9999px;
  background: var(--leiste-tief);
  user-select: none;
}

.kopf-schema .schema-symbol {
  display: block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.kopf-schema .schema-symbol-sonne { color: var(--schrift-matt); }
.kopf-schema .schema-symbol-mond { color: var(--akzent); }
:root[data-erscheinung="neu-hell"] .kopf-schema .schema-symbol-sonne { color: var(--schrift-hell); }
:root[data-erscheinung="neu-hell"] .kopf-schema .schema-symbol-mond { color: var(--schrift-matt); }

.kopf-schema .schema-schalter-taste {
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 32px;
  height: 18px;
  padding: 2px;
  border: 1.5px solid var(--linie-hell);
  border-radius: 9999px;
  background: var(--feld);
  cursor: pointer;
}

.kopf-schema .schema-schalter-taste:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

.kopf-schema .schema-schalter-gleiter {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--akzent);
  transform: translateX(14px);
  transition: transform .22s cubic-bezier(.16, 1, .3, 1);
}

.kopf-schema .schema-schalter-taste[aria-checked="true"] .schema-schalter-gleiter {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .kopf-schema .schema-schalter-gleiter { transition: none; }
}

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

/* Abmelden, rechts neben dem Kontofeld (Paket 114, Vertrag 6x). Es
   steht NUR da, wenn die Stufe eine Anmeldung verlangt und jemand
   angemeldet ist; haupt.js legt den Knopf sonst gar nicht erst an.
   Schrift statt Symbol: Abmelden ist selten und soll eindeutig sein. */
.kopf-abmelden {
  appearance: none;
  margin-left: 6px;
  padding: 2px 7px;
  border: 1px solid var(--linie-hell);
  border-radius: 3px;
  background: none;
  color: var(--schrift-gedaempft);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.kopf-abmelden:hover {
  background: var(--flaeche-hover);
  color: var(--schrift-hell);
}

/* Ohne Konto (Paket 128, Vertrag 6x): im Feld steht das Wort "Gast"
   statt zweier Buchstaben, und daneben steht der Weg zu einem Konto.
   Das Feld ist sonst 20 px breit; hier waechst es mit dem Wort. */
.konto.gast {
  width: auto;
  padding: 0 6px;
  font-size: 10px;
  letter-spacing: .04em;
}

.kopf-anlegen {
  margin-left: 6px;
  padding: 2px 7px;
  border: 1px solid var(--akzent);
  border-radius: 3px;
  color: var(--akzent);
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
}

.kopf-anlegen:hover {
  background: var(--akzent);
  color: var(--schrift-auf-akzent);
}

/* Die Restzeit einer Testsitzung (Paket 115, Vertrag 6y). Sie steht
   still da, solange genug Zeit ist, und wird erst in den letzten zwei
   Minuten warm: eine Warnung, die die ganze Zeit leuchtet, liest
   niemand mehr. */
.kopf-restzeit {
  margin-right: 8px;
  font-size: 11px;
  color: var(--schrift-matt);
  white-space: nowrap;
}

.kopf-restzeit.warnung {
  color: var(--warnung);
  font-weight: 600;
}

/* Testdatei laden (Paket 347): neben der Restzeit eines Gastes, in der
   Signalfarbe der Oberflaeche (das warme Akzent-Token, dieselbe Farbe wie
   die Markierung im Bild), damit sie oben auffaellt. Nur fuer Gaeste und
   nur, wenn es eine aktive Testdatei gibt (js/testdateien.js). */
.kopf-testdatei {
  margin-right: 8px;
  padding: 2px 8px;
  border: 1px solid var(--akzent-warm);
  border-radius: 3px;
  background: var(--akzent-warm);
  color: var(--schrift-auf-akzent);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.kopf-testdatei:hover {
  background: var(--akzent-warm-hell);
  border-color: var(--akzent-warm-hell);
}

/* Das kleine Fenster der Testdateien: je Datei eine Zeile als Knopf mit
   Name, Zusatz, Beschreibung und Groesse; eine gerade nicht verfuegbare
   steht gedaempft da. */
.testdatei-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.testdatei-eintrag {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--feld-rand);
  border-radius: 4px;
  background: var(--feld);
  color: var(--schrift);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.testdatei-eintrag:hover:not(:disabled) {
  border-color: var(--akzent-warm);
}

.testdatei-eintrag:disabled {
  cursor: default;
  opacity: .6;
}

.testdatei-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.testdatei-name {
  font-weight: 600;
  color: var(--schrift-hell);
}

.testdatei-marke {
  padding: 0 5px;
  border: 1px solid var(--linie-hell);
  border-radius: 3px;
  font-size: 10px;
  color: var(--schrift-gedaempft);
}

.testdatei-spaeter {
  border-color: var(--akzent-warm);
  color: var(--akzent-warm);
}

.testdatei-text,
.testdatei-mass {
  font-size: 11px;
  color: var(--schrift-gedaempft);
}

.testdatei-fortschritt {
  width: 100%;
  height: 8px;
  accent-color: var(--akzent-warm);
}

.testdatei-fortschritt[hidden] {
  display: none;
}

.testdatei-zeile {
  font-size: 11px;
  color: var(--schrift);
}

.testdatei-zeile.schlecht {
  color: var(--warnung);
}

/* ---------- 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: 96px;
  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-platz {
  flex: 0 0 96px;
  border-right: 1px solid var(--linie-hell);
}

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

/* ---------- Schmale Fenster (Paket 176) ----------
   Kostja 2026-09-28 mit einem Bild vom Handy hochkant (rund 390
   Bildpunkte): die Kopfleiste war rechts abgeschnitten, Stufenmarke,
   Hilfe, Meldung, Version, Zahnrad und Konto waren nicht zu erreichen, und
   das Band sah abgeschnitten aus. In schmalen Fenstern bleiben Kopfleiste,
   Reiter und Band darum in EINER Zeile und rollen waagerecht: mit dem
   Finger wischen, am Rechner Umschalt und Mausrad oder zwei Finger auf dem
   Touchpad. Keine zweite Zeile, kein Umbruch in den Gruppen, kein neues
   Layout: die Teile behalten ihre Regeln (flex 1 links und rechts, die
   Mitte dazwischen), und weil kein Teil unter seine eigene Breite
   schrumpft, laeuft der Rest in den Rollbereich statt ueber den Rand.
   Die Grenze liegt bei 800 und nicht bei 600 Bildpunkten: die Kopfleiste
   der Teststufe braucht rund 700 (gemessen am Testdienst), darunter waere
   sie sonst in einem schmalen Fenster am Rechner ebenso abgeschnitten.
   Die Rollleiste der Kopfleiste und der Reiter ist unsichtbar (sie laege
   in 28 bzw. 22 Bildpunkten Hoehe ueber den Knoepfen), die des Bandes
   bleibt duenn wie immer; das Band rollte schon vorher (overflow-x auto
   oben). overscroll-behavior haelt ein Wischen am Ende der Leiste davon
   ab, die Seite oder den Verlauf des Browsers mitzunehmen. Menues und
   Listen der Kopfleiste haengen am body (zeitreise.js, datei.js) und
   werden vom Rollen nicht beschnitten. Ab 800 Bildpunkten aendert sich
   nichts. */
@media (max-width: 800px) {
  .kopf,
  .reiter {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .kopf::-webkit-scrollbar,
  .reiter::-webkit-scrollbar { display: none; }
  .band { overscroll-behavior-x: contain; }
}

/* ---------- Die HAELFTEN eines Reiters (Paket 210) ----------
   Der Reiter FORM traegt zwei sichtbar getrennte Haelften: links die
   Formgeber, die Material entstehen lassen, rechts die Umformer, die
   vorhandenes aendern (befehle.js, Feld "abschnitt"). Das Schild steht
   UEBER den Knoepfen und nicht darunter, wo schon die Gruppennamen
   stehen: zwei Textzeilen am Fuss liefen ineinander.

   Die Zeile ist bewusst niedrig (9 Bildpunkte). Die Hoehe des Bandes ist
   eine Zahl, an der die halbe Oberflaeche haengt (--hoehe-band, dazu
   tests/test_tafelhoehe.py); sie bleibt, und das Schild passt in die
   Luft, die zwischen Knopfreihe und Gruppenname ohnehin frei war. */

.band-abschnitt {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--linie);
}

.band-abschnitt:first-child { border-left: 0; }

/* Eine benannte Haelfte trennt kraeftiger als zwei Gruppen voneinander:
   der Sprung von Formgeben zu Umformen ist der groessere. */
.band-abschnitt.benannt + .band-abschnitt,
.band-abschnitt + .band-abschnitt.benannt {
  border-left: 2px solid var(--linie-hell);
}

.abschnitt-gruppen {
  display: flex;
  align-items: stretch;
  flex: 1;
}

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

.abschnitt-name {
  /* Nicht schrumpfen: die Gruppen darunter fuellen die Leiste, und ein
     gestauchtes Schild schnitte seine eigene Schrift ab. */
  flex: 0 0 auto;
  height: 9px;
  line-height: 9px;
  font-size: 8px;
  letter-spacing: .8px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  color: var(--schrift-matt);
}

.band-abschnitt.benannt .abschnitt-name {
  color: var(--schrift);
  background: var(--leiste-tief);
}

/* ---------- SKIZZE ist ein modaler Raum (Paket 210) ----------
   Solange eine Skizze laeuft, steht in der Reiterleiste nur SKIZZE, und
   sie sagt es auch: die Leiste liegt tiefer, der Reitername ist warm
   (dieselbe Farbe wie der Marker der Zeitleiste, die im Raum gesperrt
   ist) und rechts steht der Ausweg. */

.reiter.nur-skizze { background: var(--leiste-tief); }

.reiter.nur-skizze button.aktiv {
  color: var(--akzent-warm);
  border-bottom-color: var(--akzent-warm);
}

.reiter-hinweis {
  align-self: center;
  margin-left: 12px;
  font-size: 10px;
  letter-spacing: .3px;
  color: var(--akzent-warm);
}

/* Der Weg HERAUS aus dem modalen Raum ist der deutlichste Knopf im Band:
   wer hineingeraten ist, soll ihn finden, ohne zu suchen. Er traegt darum
   den warmen Rand des Raumes, und zwar ueber den Befehlsnamen und nicht
   ueber die Gruppe: das Wort der Gruppe entscheidet Kostja, der Befehl
   bleibt "fertig". */
.werkzeug[data-befehl="fertig"] {
  border-color: var(--akzent-warm);
  background: var(--flaeche-hover);
}

.werkzeug[data-befehl="fertig"]:hover {
  border-color: var(--akzent-warm-hell);
}

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

/* Ein verborgener Knopf ist verborgen: "display: grid" oben schlug das
   [hidden] des Browsers, und so stand das rote Dreieck auch fuer Gaeste
   da (Paket 128 nimmt es ihnen) und waere die Einfuehrung (348) auch fuer
   Konten erschienen. */
.werkzeug[hidden] { display: none; }

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

/* Die leere ZWISCHENABLAGE (Paket 411b): der Knopf "Aus der Zwischenablage
   einfügen" steht blass da, wie ein gesperrter Wert im Dialog
   (dialog-sperren.js), mit einem kleinen "?" in der Ecke. Er bleibt
   klickbar und sagt den Satz; das "?" sagt, was die Zwischenablage ist. */
.werkzeug.za-leer {
  position: relative;
}
.werkzeug.za-leer svg {
  opacity: 0.45;
  filter: grayscale(1);
}
.werkzeug .za-frage {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 11px;
  height: 11px;
  border-radius: 6px;
  background: var(--dialog-kopf);
  border: 1px solid var(--linie-hell);
  color: var(--schrift-gedaempft);
  font-size: 8px;
  line-height: 11px;
  text-align: center;
  cursor: help;
}

/* ---------- Rueckgaengig mit Klappliste (SCHNITTSTELLE.md 6j) ----------
   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: calc(60vh / var(--groesse));
  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); }

/* Die GESTEN einer Skizze, eingerueckt unter ihrem Schritt (Paket 134).
   Sie sind Anzeige und kein Sprungziel: der Knopf geht den Weg Schritt
   fuer Schritt in die Skizze hinein, und ein Sprung mitten hinein waere
   eine zweite, schwer zu lesende Bedienung. Darum kein Zeiger und kein
   Hervorheben beim Ueberfahren. */
.verlauf-unterschritt {
  padding: 1px 8px 1px 22px;
  color: var(--schrift-matt);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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: das Blatt der Schritte (Paket 259) --------
   Dieselbe Form wie das Einstellungsblatt: runde Ecken, Titel in der
   Schrift der Marke und in normaler Schreibung, die Felder auf einer
   ruhigen Flaeche, eine Wahl mit wenigen Werten als Knopfreihe, OK und
   Abbrechen als runde Knoepfe. */

#feature-dialog {
  position: absolute;
  top: 96px;
  right: 250px;
  width: 290px;
  max-height: calc(100vh / var(--groesse) - 125px);
  overflow-y: auto;
  background: var(--dialog-grund);
  border: 1px solid var(--linie-hell);
  border-radius: 10px;
  padding: 10px 10px 10px;
  font-size: 12px;
  color: var(--schrift-dialog);
  z-index: 30;
  box-shadow: var(--schatten-dialog);
}
#feature-dialog.breit {
  width: 400px;
}
#feature-dialog.eingeklappt {
  width: 290px;
}
#feature-dialog .fd-titel {
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--schrift-hell);
  padding: 2px 4px 8px 6px;
}
#feature-dialog .fd-minimieren {
  float: right;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: var(--schrift-matt);
  font: inherit;
  font-size: 12px;
}
#feature-dialog .fd-felder {
  background: var(--gruppe);
  border-radius: 8px;
  padding: 4px 10px;
}
#feature-dialog .fd-zeile {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
}
#feature-dialog .fd-zeile-liste {
  align-items: stretch;
  flex-direction: column;
}
#feature-dialog .fd-zeile-liste .fd-name {
  min-width: 0;
}
#feature-dialog .fd-liste {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 230px;
  overflow-y: auto;
}
#feature-dialog .fd-listeneintrag {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  width: 100%;
  padding: 5px 7px;
  background: var(--feld);
  border: 1px solid var(--linie-hell);
  border-radius: 2px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#feature-dialog .fd-listeneintrag.aktiv {
  border-color: var(--akzent);
  box-shadow: inset 3px 0 0 var(--akzent);
}
#feature-dialog .fd-listeneintrag input {
  flex: 0 0 auto;
  margin-top: 2px;
}
#feature-dialog .fd-listeninhalt {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
#feature-dialog .fd-listeninhalt small {
  color: var(--text-schwach, inherit);
  overflow-wrap: anywhere;
}
/* Die Beschriftung eines Dialogfeldes. 82px sind die Untergrenze, damit
   die Felder untereinander buendig stehen. Eine LAENGERE Beschriftung
   darf sich den Platz nehmen, statt abgeschnitten zu werden ("Die anderen
   Koerper behalten" im Kombinieren); wo es 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: 6px;
  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,
#feature-dialog .fd-feld[aria-pressed="true"] {
  border-color: var(--akzent);
  box-shadow: 0 0 0 1px var(--akzent);
}
/* Der Satz hinter dem "?" einer Zeile (Paket 365) steht unter ihr; das
   "?" selbst hat die Form des Einstellungsblatts (.einst-frage). */
#feature-dialog .fd-hilfe {
  margin: -2px 0 6px;
}
#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);
}
/* Eine Wahl mit wenigen Werten: Name oben, darunter die Knopfreihe, das
   gewaehlte Feld gefuellt (wie .einst-wahl im Einstellungsblatt). */
#feature-dialog .fd-zeile-reihe {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
#feature-dialog .fd-knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
#feature-dialog .fd-knopf {
  appearance: none;
  border: 1px solid var(--linie-hell);
  border-radius: 12px;
  background: none;
  color: var(--schrift);
  font: inherit;
  font-size: 11px;
  padding: 2px 10px;
  cursor: pointer;
}
#feature-dialog .fd-knopf:hover { border-color: var(--schrift-matt); color: var(--schrift-hell); }
#feature-dialog .fd-knopf[aria-pressed="true"] {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--schrift-auf-akzent);
}
#feature-dialog .fd-knopf:disabled { opacity: .45; cursor: default; }
#feature-dialog .fd-fuss {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
}
#feature-dialog .fd-fuss button {
  background: none;
  border: 1px solid var(--linie-hell);
  border-radius: 12px;
  color: inherit;
  padding: 3px 14px;
  cursor: pointer;
}
#feature-dialog .fd-fuss .fd-ok {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--schrift-auf-akzent);
}

/* ---------- Die Tabelle im Fenster (Paket 428b) -------------------------
   Die Punktpaare beim Scan ausrichten: Nr, Punkt am Modell, Punkt am Scan,
   Abweichung. Die Zellen der Punkte sind Knoepfe (Maus und Finger gleich),
   die Zeile, die der naechste Klick fuellt, traegt den Akzent links wie der
   gewaehlte Eintrag einer Liste, die gewaehlte Zelle den Rahmen wie ein
   gedrueckter Schalter. Die Farbe der Punkte (blau Modell, orange Scan)
   steht links an der Zelle, dieselbe wie an den Marken in der Szene. */
#feature-dialog .fd-tabellenrahmen {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#feature-dialog .fd-tabelle {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 2px;
  font-size: 11px;
}
#feature-dialog .fd-tabelle th {
  text-align: left;
  font-weight: 500;
  color: var(--schrift-matt);
  padding: 0 4px 2px;
}
#feature-dialog .fd-tabelle td {
  padding: 0 2px;
  vertical-align: middle;
}
#feature-dialog .fd-tabelle :is(th, td):first-child {
  width: 22px;
  text-align: right;
  padding-right: 6px;
  color: var(--schrift-matt);
}
#feature-dialog .fd-tabelle :is(th, td):last-child {
  width: 64px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#feature-dialog .fd-tabelle tr.aktiv td:first-child {
  color: var(--schrift-hell);
  box-shadow: inset 3px 0 0 var(--akzent);
}
#feature-dialog .fd-zelle {
  width: 100%;
  min-height: 24px;
  padding: 2px 6px;
  background: var(--feld);
  border: 1px solid var(--linie-hell);
  border-left: 3px solid var(--farbe-ausrichtenModell);
  border-radius: 6px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#feature-dialog .fd-tabelle td:nth-child(3) .fd-zelle {
  border-left-color: var(--farbe-ausrichtenScan);
}
#feature-dialog .fd-zelle:not(.gesetzt) {
  color: var(--schrift-matt);
}
#feature-dialog .fd-zelle.ziel {
  border-color: var(--akzent);
  color: var(--schrift-hell);
}
#feature-dialog .fd-zelle[aria-pressed="true"] {
  border-color: var(--akzent);
  box-shadow: 0 0 0 1px var(--akzent);
}
#feature-dialog .fd-tabelle-leer {
  color: var(--schrift-matt);
  padding: 4px;
}

/* Der Hinweis am Zeiger beim Scan ausrichten (Paket 428b): welche Nummer
   der naechste Punkt bekommt, links der Punkt in der Farbe seiner Seite. */
.ausrichten-zeiger {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  padding: 2px 7px 2px 5px;
  border-radius: 9px;
  background: var(--dialog-grund);
  border: 1px solid var(--linie-hell);
  color: var(--schrift-hell);
  font-size: 11px;
  white-space: nowrap;
  box-shadow: var(--schatten-dialog);
}
.ausrichten-zeiger::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--farbe-ausrichtenModell);
  vertical-align: -1px;
}
.ausrichten-zeiger[data-seite="scan"]::before {
  background: var(--farbe-ausrichtenScan);
}

/* ---------- Haken und Kreuz am Griff (Paket 409) -------------------------
   Im Modus "Griff setzen" des Fensters Bewegen stehen zwei kleine RUNDE
   Knoepfe neben dem Verschiebe-Kreuz, auf seiner freien Seite
   (volumen/griff.js, knoepfeOrt): der Haken in der Farbe von OK (Akzent),
   das Kreuz wie Abbrechen auf dem Grund des Fensters. Dieselben Farben,
   dieselbe runde Form und derselbe Schatten wie die Knoepfe des Fensters,
   keine eigene Farbe. Am Handy 44 Bildpunkte, damit der Daumen sie trifft. */
.griff-knoepfe {
  position: fixed;
  z-index: 31;
  display: flex;
  gap: 6px;
  pointer-events: none;
}
.griff-knoepfe[hidden] { display: none; }
.griff-knopf {
  pointer-events: auto;
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linie-hell);
  background: var(--dialog-grund);
  color: var(--schrift-dialog);
  box-shadow: var(--schatten-dialog);
  cursor: pointer;
}
.griff-knopf:hover { border-color: var(--schrift-matt); color: var(--schrift-hell); }
.griff-knopf.griff-haken {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--schrift-auf-akzent);
}
.griff-knopf.griff-haken:hover { filter: brightness(1.12); color: var(--schrift-auf-akzent); }
.griff-knopf:disabled { opacity: .45; cursor: default; filter: none; }
:root[data-aufbau="handy"] .griff-knoepfe { gap: 10px; }
:root[data-aufbau="handy"] .griff-knopf { width: 44px; height: 44px; }
:root[data-aufbau="handy"] .griff-knopf svg { width: 22px; height: 22px; }

/* ---------- Das Blatt PARAMETER (Paket 259) -----------------------------
   Dieselbe Form wie das Einstellungsblatt: rechts unter der Kopfleiste,
   durchsichtiger Schleier, zwei ruhige Gruppen, je Wert eine Zeile
   "Name = Ausdruck  Ergebnis". Kein OK: jede Aenderung gilt sofort. */

.dialog-schleier.pd-schleier { background: transparent; }

#parameter-dialog {
  position: absolute;
  top: calc(var(--hoehe-kopf) + 6px);
  right: 8px;
  width: 420px;
  max-width: calc(100vw / var(--groesse) - 16px);
  max-height: calc(100vh / var(--groesse) - var(--hoehe-kopf) - 18px);
  display: flex;
  flex-direction: column;
  background: var(--dialog-grund);
  border: 1px solid var(--linie-hell);
  border-radius: 10px;
  color: var(--schrift-dialog);
  font-size: 12px;
  box-shadow: var(--schatten-dialog);
}
#parameter-dialog .pd-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 8px 8px 16px;
}
#parameter-dialog .pd-titel {
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--schrift-hell);
}
#parameter-dialog .pd-zu {
  background: none;
  border: none;
  color: var(--schrift-gedaempft);
  font-size: 16px;
  cursor: pointer;
}
#parameter-dialog .pd-rumpf {
  overflow-y: auto;
  padding: 0 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#parameter-dialog .pd-filter {
  background: var(--feld);
  border: 1px solid var(--linie-hell);
  border-radius: 6px;
  color: inherit;
  padding: 4px 8px;
  font: inherit;
}
#parameter-dialog .pd-liste {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#parameter-dialog .pd-gruppe {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 12px 4px;
  background: var(--gruppe);
  border-radius: 8px 8px 0 0;
}
#parameter-dialog .pd-gruppe-titel {
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--akzent);
}
#parameter-dialog .pd-gruppe-satz {
  flex: 1;
  color: var(--schrift-gedaempft);
  font-size: 11px;
}
#parameter-dialog .pd-zeile {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  background: var(--gruppe);
}
#parameter-dialog .pd-name { flex: 0 0 120px; }
#parameter-dialog .pd-gleich { color: var(--schrift-matt); }
#parameter-dialog .pd-ausdruck { flex: 1; min-width: 0; }
#parameter-dialog .pd-wert {
  flex: 0 0 90px;
  text-align: right;
  color: var(--schrift-matt);
}
#parameter-dialog .pd-weg { flex: 0 0 16px; }
#parameter-dialog .pd-zeile input {
  width: 100%;
  background: var(--feld);
  border: 1px solid transparent;
  border-radius: 6px;
  color: inherit;
  padding: 2px 6px;
  font: inherit;
}
#parameter-dialog .pd-zeile input:focus {
  border-color: var(--akzent);
  outline: none;
}
/* Getriebene Masse: nur Anzeige (Wert in Klammern), 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 .pd-zeile.pd-getrieben {
  color: var(--farbe-getrieben, var(--schrift-gedaempft));
}
#parameter-dialog .pd-plus {
  appearance: none;
  border: 1px solid var(--linie-hell);
  border-radius: 12px;
  background: none;
  color: var(--schrift);
  font: inherit;
  font-size: 11px;
  padding: 1px 10px;
  cursor: pointer;
}
#parameter-dialog .pd-plus:hover { border-color: var(--schrift-matt); color: var(--schrift-hell); }
#parameter-dialog .pd-x {
  background: none;
  border: none;
  color: var(--schrift-gedaempft);
  cursor: pointer;
  font-size: 14px;
}

/* ---------- Ueberbestimmtes Mass (Vertrag 6s, Paket 79) ---------- */
/* Die 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 / var(--groesse));
  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) ----------
   Das Fenster der Ablage ist seit Paket 411a die Projektuebersicht
   (web/js/projekte.js); ihre Regeln stehen im Block 411a am Ende. */

/* ---------- Aus der Ablage einfügen (Paket 411b, Vertrag 6k-6) ----------

   Derselbe Schleier und derselbe Kasten wie beim Ablage-Dialog, nur in
   zwei Spalten: links die Dokumente, rechts was darin steht, mit Haken.
   Am Handy stehen die Spalten untereinander. Alle Farben sind Token. */
#zwischenablage-dialog {
  width: min(720px, 92vw / var(--groesse));
  max-height: calc(80vh / var(--groesse));
  display: flex;
  flex-direction: column;
  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);
}
#zwischenablage-dialog .za-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--dialog-kopf);
  padding: 8px 12px;
}
#zwischenablage-dialog .za-titel {
  flex: 1;
  font-weight: 600;
  letter-spacing: 0.08em;
}
#zwischenablage-dialog .za-zu,
#zwischenablage-dialog .za-hilfe {
  background: none;
  border: none;
  color: var(--schrift-gedaempft);
  font-size: 15px;
  cursor: pointer;
}
#zwischenablage-dialog .za-rumpf {
  display: flex;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
  margin: 10px 12px 0;
}
#zwischenablage-dialog .za-dokumente {
  flex: 0 0 38%;
  overflow: auto;
  max-height: calc(60vh / var(--groesse));
}
#zwischenablage-dialog .za-inhalt {
  flex: 1;
  overflow: auto;
  max-height: calc(60vh / var(--groesse));
}
#zwischenablage-dialog .za-abschnitt {
  font-weight: 600;
  padding: 4px 6px;
  border-bottom: 1px solid var(--linie-hell);
}
#zwischenablage-dialog :is(.za-dokument, .za-ordner) {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--feld-rand);
  color: inherit;
  font: inherit;
  padding: 4px 6px;
  cursor: pointer;
}
#zwischenablage-dialog :is(.za-dokument, .za-ordner):hover {
  background: var(--flaeche-hover);
}
/* Seit Paket 411c: die Ordner der Ablage als Baum (wie die Projektuebersicht,
   411a) und die Suche ueber alle Ordner darueber. */
#zwischenablage-dialog .za-ordner {
  font-weight: 600;
  color: var(--schrift-gedaempft);
}
#zwischenablage-dialog .za-pfeil {
  width: 10px;
  flex: 0 0 auto;
}
#zwischenablage-dialog .za-suche {
  display: block;
  box-sizing: border-box;
  width: calc(100% - 12px);
  margin: 6px;
  background: var(--feld);
  border: 1px solid var(--feld-rand);
  border-radius: 4px;
  color: inherit;
  font: inherit;
  padding: 4px 7px;
}
#zwischenablage-dialog .za-suche:focus {
  border-color: var(--akzent);
  outline: none;
}
#zwischenablage-dialog .za-dokument.za-gewaehlt {
  background: var(--auswahl);
}
#zwischenablage-dialog .za-zeile {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-bottom: 1px solid var(--feld-rand);
  cursor: pointer;
}
#zwischenablage-dialog .za-zusatz,
#zwischenablage-dialog .za-zahl,
#zwischenablage-dialog .za-leer {
  color: var(--schrift-gedaempft);
}
#zwischenablage-dialog .za-zusatz {
  margin-left: auto;
  font-size: 11px;
}
#zwischenablage-dialog .za-leer {
  padding: 14px 6px;
}
#zwischenablage-dialog .za-fuss {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 0;
}
#zwischenablage-dialog .za-zahl {
  flex: 1;
}
#zwischenablage-dialog .za-ok {
  background: var(--akzent);
  border: none;
  border-radius: 2px;
  color: var(--schrift-auf-akzent);
  font-weight: 600;
  padding: 5px 16px;
  cursor: pointer;
}
:root[data-aufbau="handy"] #zwischenablage-dialog .za-rumpf {
  flex-direction: column;
}
:root[data-aufbau="handy"] #zwischenablage-dialog .za-dokumente {
  flex-basis: auto;
}

/* ---------- 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 / var(--groesse));
  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;
}
/* Die Schrittfolge und die erwartete Dauer (Paket 100). Dieselbe
   zurueckhaltende Farbe wie die Zahlen darueber: der Satz ganz oben
   traegt die Nachricht, das hier ist die Auskunft dazu. */
#wiederaufnahme-dialog .wa-schritte,
#wiederaufnahme-dialog .wa-dauer {
  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: var(--breite-tafel);
  max-height: var(--hoehe-tafel);
  display: flex;
  flex-direction: column;
}

/* AUFBAU ist im modalen Skizzenraum nur ein lesbarer Wegweiser. Klicks
   gehen nicht hinein; aktive Skizze und ihr Koerper bleiben klar. Die
   Deckkraft liegt an den Zeilen statt am Elternkasten, sonst koennte ein
   Kind technisch nicht wieder volle Deckkraft erreichen. */
.tafel-browser.skizzenraum-gesperrt { pointer-events: none; }
.tafel-browser.skizzenraum-gesperrt .tafel-kopf,
.tafel-browser.skizzenraum-gesperrt .zweig { opacity: .45; }
.tafel-browser.skizzenraum-gesperrt .zweig.skizzenraum-lesbar { opacity: 1; }
/* Paket 433: das AUGE an Koerpern, STL-Netzen und Punktwolken wirkt auch
   beim Skizzieren (ein- und ausblenden als Referenz). Nur das Auge nimmt
   Klicks und steht in voller Staerke; der Rest der Zeile ruht, darum liegt
   die Deckkraft dann an den Kindern statt an der Zeile. */
.tafel-browser.skizzenraum-gesperrt .zweig.skizzenraum-auge { opacity: 1; }
.tafel-browser.skizzenraum-gesperrt .zweig.skizzenraum-auge:not(.skizzenraum-lesbar) > :not(.auge) { opacity: .45; }
.tafel-browser.skizzenraum-gesperrt .zweig.skizzenraum-auge .auge { pointer-events: auto; cursor: pointer; }

/* Griff am rechten Rand des Felds AUFBAU (Befund 30, Paket 93): ein
   schmaler Streifen, der erst beim Ueberfahren sichtbar wird. Ziehen
   aendert --breite-tafel (js/tafelbreite.js), Doppelklick stellt die
   Basisgroesse 236px wieder her. touch-action: none, damit ein Finger
   auf dem Touchscreen zieht statt die Seite zu verschieben. */
.tafel-griff-breite {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
  z-index: 2;
  background: transparent;
}

.tafel-griff-breite:hover,
.tafel-griff-breite.zieht {
  background: var(--akzent);
  opacity: .35;
}

/* Griff an der UNTERKANTE des Felds AUFBAU (Paket 183): derselbe
   Streifen wie der Breitengriff, nur quer, Zeiger row-resize. Ziehen
   aendert --hoehe-tafel (js/tafelhoehe.js), Doppelklick stellt die
   Vorgabe 42vh wieder her. Er sitzt AUF der Unterkante (bottom: -4px),
   damit er auch dann zu treffen ist, wenn der Baum bis an den Deckel
   reicht und einen Rollbalken zeigt. */
.tafel-griff-hoehe {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 8px;
  cursor: row-resize;
  touch-action: none;
  z-index: 2;
  background: transparent;
}

.tafel-griff-hoehe:hover,
.tafel-griff-hoehe.zieht {
  background: var(--akzent);
  opacity: .35;
}

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

/* ZIEHEN im Baum (Paket 182): der gezogene Koerper wird blass, das Ziel
   unter dem Zeiger bekommt eine Marke. Beides ist Ansicht und dauert nur
   so lange wie der Zug; ohne die Marke waere nicht zu sehen, WO etwas
   landet, und ein Zug ohne Rueckmeldung ist ein Ratespiel. */
.zweig.zieht { opacity: .5; }
.zweig.ziel-marke {
  outline: 1px dashed var(--akzent);
  outline-offset: -1px;
  background: var(--zeile-hover);
}

/* Der Doppelklick in der Ansicht hat diese Zeile hergeholt (Paket 98).
   Sie ist ohnehin gewaehlt; das kurze Aufleuchten sagt zusaetzlich, WO
   der Baum gerade hingesprungen ist. In einem Baum mit tausend Zeilen
   findet das Auge die neue Markierung sonst nicht wieder. Wer
   prefers-reduced-motion gesetzt hat, bekommt den Rahmen ohne Blinken. */
.zweig.gefunden {
  outline: 1px solid var(--akzent);
  outline-offset: -1px;
  animation: zweig-gefunden 1.2s ease-out 1;
}

@keyframes zweig-gefunden {
  0% { background: var(--akzent); }
  100% { background: var(--auswahl); }
}

@media (prefers-reduced-motion: reduce) {
  .zweig.gefunden { animation: none; }
}

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

/* Der AKTIVE KOERPER (Paket 259): eine hinterlegte Zeile mit einem
   Balken in der Akzentfarbe am linken Rand. Bis Paket 259 stand dafuer
   ein Rundknopf vor dem Namen. Die Wahl (.gewaehlt) faerbt die ganze
   Zeile staerker und bleibt davon unterscheidbar. */
.zweig.aktiver-koerper {
  background: color-mix(in srgb, var(--akzent) 14%, transparent);
  box-shadow: inset 3px 0 0 var(--akzent);
}

.zweig.aktiver-koerper.gewaehlt { background: var(--auswahl); }

.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; flex: none; }

/* Der TUPFER mit der Farbe des Koerpers (Paket 410): klein und dezent vor
   dem Namen, die Farbe kommt als Token aus farben.js (baum.js setzt
   var(--farbe-koerper...)). Ein Ring statt eines vollen Punkts sagt
   "durchsichtig". Ausgeblendet wird er matt wie das Symbol. */
.zweig .koerper-tupfer {
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: 3px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--linie-hell);
}
.zweig .koerper-tupfer.durchsichtig {
  opacity: .55;
  box-shadow: 0 0 0 1px var(--schrift-matt);
}
.zweig.blind .koerper-tupfer { opacity: .4; }
/* Kein Umbruch, Ellipse bei Ueberlaenge (Befund 30, Paket 93): der volle
   Name bleibt ueber den Tooltip erreichbar (title, gesetzt in baum.js).
   overflow: hidden macht die automatische Mindestbreite des Flex-Kindes
   0 (sonst wich der ganze Zweig aus, wie bei .pruef-gruppe-titel). */
.zweig .text {
  flex: 1;
  min-width: 0;
  padding: 0 4px;
  border-radius: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.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; }

/* Der ORDNER SKIZZEN je Koerper (Paket 372). Eine verbrauchte Skizze
   steht matt da wie ein Eintrag hinter dem Marker, aber aufrecht: kursiv
   bleibt dem Marker, durchgestrichen dem verbrauchten Koerper. Was sie
   verbraucht hat, steht klein dahinter (.zusatz, "in Extrusion"). */
.zweig.skizze-verbraucht .text { color: var(--schrift-matt); }
.zweig.skizze-verbraucht .symbol { opacity: .45; filter: grayscale(1); }

/* Der kleine ZUSATZ hinter dem Namen (Paket 372): an der Skizze das
   Feature, das sie traegt, am Feature seine Quelle ("aus Skizze"). Der
   Name nimmt dann nur seinen Platz, der Zusatz steht direkt dahinter. Wird
   es eng, gibt der Zusatz zuerst nach (flex-shrink 1000 gegen 1): im
   schmalen AUFBAU stand im ersten Bild sonst "Skizze..." neben "in
   Extrusion...", und der Name ist das Wichtigere. Der volle Text steht im
   Tooltip. */
.zweig.mit-zusatz .text { flex: 0 1 auto; }
.zweig .zusatz {
  flex: 0 1000 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 4px;
  font-size: 10px;
  color: var(--schrift-matt);
}
.zweig.gewaehlt .zusatz { color: inherit; opacity: .8; }
/* Am Feature springt ein Klick auf die Quelle zur Skizze im Ordner. */
.zweig .zusatz.sprung { cursor: pointer; }
.zweig .zusatz.sprung:hover { color: var(--akzent); text-decoration: underline; }

/* Das Symbol einer VERKNUEPFTEN Skizze (Paket 437): ein kleiner Knopf
   hinter dem Namen, das Original im Titel; ein Klick loest nach der
   Rueckfrage. Ueberfahren, Druck und Fokus kommen aus dem Block 432 (er
   ist ein button). Er nimmt nie Platz vom Namen weg. */
.zweig .skizze-folgt {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 16px;
  margin: 0 2px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--akzent);
}

.tafel-kommentare {
  left: 4px;
  bottom: calc(var(--hoehe-zeit) + 4px);
  /* Teilt die linke Spalte mit AUFBAU und PRUEFLISTE, folgt also
     derselben Breite (Befund 30, Paket 93). */
  width: var(--breite-tafel);
}

/* ---------- 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);
  /* Teilt die linke Spalte mit AUFBAU und KOMMENTARE, folgt also
     derselben Breite (Befund 30, Paket 93). */
  width: var(--breite-tafel);
  max-height: calc(52vh / var(--groesse));
  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);
}

/* Der Weg zur eigenen Seite (Paket 129). Ein flacher Knopf ueber der
   Liste: er ist kein Werkzeug, sondern eine Tuer, und soll darum neben
   dem Modus-Schalter nicht wie eine dritte Stellung aussehen. */
.pruef-seitenzeile {
  padding: 4px 6px;
  border-bottom: 1px solid var(--linie);
}

.pruef-seitenknopf {
  width: 100%;
  padding: 4px 2px;
  font: inherit;
  font-size: 10px;
  color: var(--schrift-matt);
  background: none;
  border: 1px dashed var(--linie-hell);
  border-radius: 2px;
  cursor: pointer;
}

.pruef-seitenknopf:hover {
  color: var(--schrift-hell);
  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; }

/* Werkzeug-Symbole vor dem Text (Befund 28, Paket 90): Kostja soll das
   Symbol aus dem Band wiedererkennen, statt das Werkzeug im Wortlaut zu
   suchen. In der Textfarbe, nicht in einer Akzentfarbe, damit sie sich in
   die Zeile einfuegen und nicht wie ein Status wirken. */
.pruef-werkzeuge { flex: none; display: flex; gap: 2px; padding-top: 1px; }
.pruef-werkzeug { display: block; color: var(--schrift); }
.pruef-werkzeug svg { display: block; width: 17px; height: 17px; }

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

/* ---------- Automatisch geprueft (Paket 165) ---------- */
/* Die Tafel zeigt von sich aus nur die menschlichen Schritte. Der Schalter
   hier blendet die anderen ein: grau, ohne Haken und ohne Kreuz, mit dem
   Namen des Tests darunter, der sie beweist. */

.pruef-automatischzeile { padding: 0 6px 6px; }

.pruef-automatischknopf {
  width: 100%;
  padding: 4px 2px;
  font: inherit;
  font-size: 10px;
  color: var(--schrift-matt);
  background: none;
  border: 1px dashed var(--linie-hell);
  border-radius: 2px;
  cursor: pointer;
}

.pruef-automatischknopf:hover {
  color: var(--schrift-hell);
  border-color: var(--akzent);
}

.pruef-automatischknopf.aktiv {
  color: var(--schrift);
  border-style: solid;
  border-color: var(--akzent);
}

.pruef-gruppe-stand.automatisch { font-style: italic; }
.pruef-gruppe.automatisch .pruef-gruppe-titel { color: var(--schrift-matt); }

.pruef-schritt.automatisch { opacity: .6; }
.pruef-schritt.automatisch .pruef-text { font-style: italic; }

.pruef-testname {
  padding-left: 18px;
  font-size: 9px;
  line-height: 13px;
  color: var(--schrift-matt);
  overflow-wrap: anywhere;
}

/* Der Satz an einem Schritt, den ein Test schon halb beweist: worauf ein
   Mensch trotzdem achten muss. */
.pruef-nurmensch {
  padding-left: 18px;
  font-size: 10px;
  line-height: 14px;
  color: var(--akzent);
}

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

/* Die Tafel ist mit Paket 210i von 300 x 330 auf 340 x 370 Bildpunkte
   gewachsen (216 x 264 bis 210e, 260 x 310 mit 210f, 300 x 330 mit 210g).
   Grund sind die VIER DIAGONALPFEILE und die GROESSERE Bahn der Rollboegen
   (Kostja 2026-09-14 22:05: "wir brauchen noch die Pfeile dazwischen; aber
   behalte es rund"). Es gibt seitdem ZWEI gedachte Bahnen um die Mitte des
   Kastens (170 / 170): die innere mit 126 Bildpunkten Radius traegt die acht
   Dreieckspfeile, die aeussere mit 150 die zwei Rollboegen. Gezeichnet wird
   keine von beiden. 126 ist der kleinste brauchbare Radius fuer die
   Dreiecke: die halbe Diagonale des 176 Bildpunkte grossen Kastens sind
   124,5, und erst jenseits davon liegt die Bahn AUSSERHALB des Kastens.
   Das ist noetig, weil die Leinwand der Ansichtshilfe (z-index 3) ueber den
   Boegen liegen muss, sonst fingen deren quadratische Klickflaechen die
   Klicks auf den Wuerfel ab. Die aeussersten Punkte des Rahmens (der Bogen
   samt halber Strichstaerke) stehen 154,5 Bildpunkte von der Mitte weg und
   bleiben damit innen. Die 40 Bildpunkte Mehrhoehe stehen in der Rechnung
   von den schwebenden Tafeln weiter unten mit drin. */
.wuerfel {
  position: absolute;
  z-index: 15;
  top: calc(var(--hoehe-kopf) + var(--hoehe-reiter) + var(--hoehe-band) + 6px);
  right: 14px;
  width: 340px;
  height: 370px;
  font-family: inherit;
  background: var(--tafel-grund);
  border: 1px solid var(--tafel-rand);
  border-radius: 5px;
  box-shadow: var(--schatten-weich);
}

/* Der Kasten der Ansichtshilfe sitzt mittig: 340 minus 176 sind zweimal
   82 Bildpunkte Rand. Seine Mitte (170 / 170) ist die Mitte BEIDER Bahnen;
   oben bleiben 82 Bildpunkte fuer die Dreiecke und die Boegen, unten fuehrt
   die Rechnung bis zur Knopfreihe (siehe .navileiste).

   z-index 3 ist Absicht und liegt UEBER den zwei Rollpfeil-Knoepfen (2):
   ihre Klickflaeche ist je ein Quadrat von 150 Bildpunkten ueber dem
   oberen Viertel, das zum Teil ueber dem Kasten liegt. Ohne diese
   Reihenfolge fingen sie die Klicks auf die Wuerfelflaechen ab. Die
   Boegen selbst verlieren dadurch nichts, denn sie liegen ausserhalb des
   Kastens.

   touch-action: none seit Paket 281a: am Wuerfel dreht ein Zug die
   Ansicht, auch mit dem Finger; ohne die Regel naehme der Browser den
   Finger fuer sein eigenes Wischen und braeche den Zug ab. */
.wuerfel-kasten {
  position: absolute;
  z-index: 3;
  top: 82px;
  left: 82px;
  width: 176px;
  height: 176px;
  touch-action: none;
}

/* Die zwei gedachten Kreise (Paket 210g, seit 210h ohne Linie, seit 210i
   zwei): die acht Dreiecke sitzen mit ihrer Mitte auf dem INNEREN Kreis von
   126 Bildpunkten Radius, die zwei Boegen laufen auf dem AEUSSEREN von 150,
   beide um die Mitte des Kastens (170 / 170). Gezeichnet wird keiner von
   beiden (Kostja 2026-09-14 20:55: "Hast du den Ring tatsaechlich
   gezeichnet?"), sie sind nur die Bahnen, auf denen die Zeichen stehen. */

/* Die zehn Zeichen des Rahmens: acht Dreiecke und zwei Rollpfeile (das
   ISO-Wuerfelchen ist seit Paket 398 weg, seine Zeichnung ist das Symbol
   des Knopfes "Ansichtstafel ein/aus" in der Reihe). Jedes traegt sein
   Mass selbst (viewcube.js zeichnet das SVG in genau diesem Mass), darum
   steht hier keine gemeinsame Groesse. Kein Rahmen und kein Kasten: die
   Hervorhebung beim Ueberfahren ist allein die kraeftigere Fuellung ueber
   currentColor. */
.wpfeil {
  position: absolute;
  z-index: 4;
  appearance: none;
  border: 0;
  background: none;
  color: var(--tafel-pfeil);
  line-height: 0;
  padding: 0;
  cursor: pointer;
  display: block;
}

.wpfeil:hover { color: var(--tafel-pfeil-stark); }

.wpfeil svg { display: block; }

/* Die vier GERADEN Dreiecke sitzen MIT IHRER MITTE AUF DER INNEREN BAHN
   (Radius 126 um 170 / 170), also bei 12, 3, 6 und 9 Uhr: 170 minus 126
   minus die halbe Hoehe ergibt oben 34, 170 plus 126 minus die halbe Hoehe
   unten 286, und waagerecht gilt dasselbe mit der halben Breite (34 und 34
   von rechts). Damit haben alle vier genau denselben Abstand zur Mitte; die
   Wache tests/test_tafelrahmen.py rechnet es nach. */
.w-hoch { top: 34px; left: 50%; transform: translateX(-50%); width: 26px; height: 20px; }
.w-runter { top: 286px; left: 50%; transform: translateX(-50%); width: 26px; height: 20px; }
.w-links { left: 34px; top: 157px; width: 20px; height: 26px; }
.w-rechts { right: 34px; top: 157px; width: 20px; height: 26px; }

/* Die vier DIAGONALEN Dreiecke (Paket 210i) sitzen auf DERSELBEN inneren
   Bahn bei 45, 135, 225 und 315 Grad. Aus dem Radius gerechnet: 126 mal
   0,7071 sind 89,1 Bildpunkte Versatz in beiden Richtungen von der Mitte
   des Kastens, also Mitten bei 170 plus/minus 89 gleich 81 und 259. Das
   Quadrat der Zeichnung ist 32 gross, seine halbe Kante 16: 81 minus 16
   sind 65, 259 minus 16 sind 243 (und 340 minus 243 minus 32 sind wieder
   65 von rechts). Die Spitze zeigt schraeg nach aussen, genau entlang der
   Diagonale. */
.w-hochLinks { top: 65px; left: 65px; width: 32px; height: 32px; }
.w-hochRechts { top: 65px; right: 65px; width: 32px; height: 32px; }
.w-runterLinks { top: 243px; left: 65px; width: 32px; height: 32px; }
.w-runterRechts { top: 243px; right: 65px; width: 32px; height: 32px; }

/* Die zwei Rollpfeile sind Boegen auf der AEUSSEREN Bahn (Paket 210i, bis
   210h lagen sie auf derselben Bahn wie die Dreiecke; die Diagonalpfeile
   brauchten den Platz). Jeder Knopf ist ein Quadrat von 150 Bildpunkten
   ueber seinem oberen Viertel, und zwar so gelegt, dass der
   Bogenmittelpunkt der Zeichnung (148 / 148 links, 2 / 148 rechts) genau
   auf der gemeinsamen Mitte 170 / 170 liegt: 170 minus 148 sind 22 von
   links und 170 minus 2 minus 150 sind 22 von rechts, oben beide 22.
   Das Quadrat ist die Klickflaeche; es liegt mit z-index 2 unter der
   Leinwand (3) und unter den Dreiecken (4), damit es keinen fremden Klick
   abfaengt. Das ist auch der Grund, warum die zwei Quadrate die
   Diagonalpfeile ueberlappen duerfen: die Dreiecke liegen hoeher und
   gewinnen jeden Klick. */
.w-rollLinks { z-index: 2; top: 22px; left: 22px; width: 150px; height: 150px; }
.w-rollRechts { z-index: 2; top: 22px; right: 22px; width: 150px; height: 150px; }

/* Auf dem Tablet ruecken die zwei Rollboegen nach aussen (Paket 277,
   Kostja 2026-09-28: "etwas weiter aussen, am Tablet zu nah"). Nur CSS:
   das Quadrat waechst um den Bogenmittelpunkt (148 / 148 links, 2 / 148
   rechts, also die Mitte des Kastens) auf das 1,12-fache. Der Bogen
   laeuft dann auf 168 statt 150 Bildpunkten Radius, der Strich ist 10
   statt 9 breit. Zwischen der Spitze der Diagonalpfeile (135) und der
   Innenkante des Bogens stehen damit 28 statt 10,5 Bildpunkte Luft, um
   die Mitte jedes Bogens ist ein Fingerziel von 44 mal 44 Bildpunkten
   frei, und der Bogen bleibt ganz in der Tafel. Am PC mit Maus bleibt
   alles, wie es war. tests/test_tablet_skizze.py rechnet es nach. */
@media (pointer: coarse) {
  .w-rollLinks { transform: scale(1.12); transform-origin: 148px 148px; }
  .w-rollRechts { transform: scale(1.12); transform-origin: 2px 148px; }
}

/* Die Knopfreihe steht unten in der Tafel, unter der Spitze des unteren
   Dreiecks. Bis Paket 398 stand rechts darueber das ISO-Wuerfelchen
   (290 / 10 von rechts, 30 x 30); seitdem ist die Ecke leer. */
.navileiste {
  position: absolute;
  z-index: 2;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  background: var(--tafel);
  border: 1px solid var(--tafel-rand);
  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; }

/* Die Knoepfe des Skizzenmodus (Pakete 276 und 277, skizzenansicht.js)
   stehen nur, solange eine Skizze ihre Ebene hat; ohne diese Regel
   gewaenne display: grid gegen das hidden-Attribut. */
.navileiste button[hidden] { display: none; }

/* "Drehen an" gedrueckt: gefuellt wie die gewaehlte Wahl im
   Einstellungsblatt (.einst-knopf[aria-pressed="true"]). Der blaue
   Akzent der Symbole (Satz 3, Paket 370: Nadel, Orbit) stuende
   sonst blau auf Blau und verschwaende; im gedrueckten Knopf nimmt er
   darum die Schrift auf dem Akzent. */
.navileiste button[aria-pressed="true"] {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--schrift-auf-akzent);
  --farbe-akzent: var(--schrift-auf-akzent);
}

/* Auf dem Tablet sind die Knoepfe der Reihe Fingerziele von 44 mal 44
   Bildpunkten (Paket 277). Die Reihe ist dann 50 statt 29 hoch und beginnt
   bei 313, unter der Spitze des unteren Dreiecks (306). Im Skizzenmodus
   stehen bis zu sieben Knoepfe darin (Drehen, Draufsicht, Einpassen,
   Anzeige, Raster, Nadel und seit Paket 398 "Ansichtstafel ein/aus"; bis
   Paket 394 kam das Mikrofon dazu): 338 breit, also die ganze Tafel. */
@media (pointer: coarse) {
  .navileiste button { width: 44px; height: 44px; }
  .navileiste svg { width: 22px; height: 22px; }
}

/* Die Nadel "Offen halten" (Paket 176) und der Knopf "Ansichtstafel
   ein/aus" (Paket 398, Kostja 2026-10-08: "quasi neben der Nadel, auf der
   rechten Seite"), beide aus wuerfelklappe.js, stehen immer am rechten
   Ende der Reihe, der Knopf ganz rechts, gleich wann die anderen Knoepfe
   dazukommen (haupt.js haengt spaeter an). */
.navileiste .navi-nadel { order: 1; }
.navileiste .navi-tafel { order: 2; }

/* ---------- Die zwei Lagen des Kastens (Paket 176) ----------
   Kostja 2026-09-28 nach einem Bild vom Handy hochkant: "Und wenn wir das
   Wuerfelmenue als Symbol verstecken, und wenn man drauf klickt, oeffnet
   es sich, und nach 1 min wieder weg?" In der ZU-LAGE (Klasse zu am
   Kasten, gesetzt von wuerfelklappe.js; Vorgabe beim Laden) bleibt nur
   die Knopfreihe, an DERSELBEN Stelle wie offen, darum springt beim
   Klappen nichts. Seit Paket 398 ist vom Wuerfel zu NICHTS mehr zu sehen
   (bis dahin stand das ISO-Wuerfelchen als Symbol mit Schild darueber);
   geoeffnet wird ueber den Knopf "Ansichtstafel ein/aus" ganz rechts in
   der Reihe. Der Kasten behaelt seine Masse nur als unsichtbarer Rahmen:
   er zeichnet nichts (kein Grund, kein Rand, kein Schatten) und faengt
   keinen Zeiger, die Szene dahinter bekommt ihn. Wuerfel, Dreiecke und
   Boegen sind unsichtbar UND ohne Zeiger: visibility nimmt ihnen beides,
   pointer-events am Kasten allein liesse die Kinder weiter fangen. Das
   Kreuz zum Zuklappen oben rechts gibt es seit 398 nicht mehr, der Knopf
   ist das Kreuz. */
.wuerfel.zu {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  pointer-events: none;
}

.wuerfel.zu > * { visibility: hidden; }

.wuerfel.zu > .navileiste {
  visibility: visible;
  pointer-events: auto;
}

/* Die Reihe rutscht nach oben (Paket 451). Kostja 2026-10-17 mit einem
   Bild der Reihe unter dem Wuerfel: "nach oben rutsche bei nicht
   gebrauch". Ist der Kasten zu und die Nadel nicht gesteckt, setzt
   wuerfelklappe.js nach derselben Uhr die Klasse gerutscht am Kasten. Die
   Reihe faehrt dann um 368 Bildpunkte nach oben: ihre Unterkante (362 im
   Kasten: 370 minus sein Rand 1 minus 7) kommt auf die Unterkante des
   Bandes, 6 ueber dem Kasten. Kopfleiste, Reiter und Band liegen mit
   z-index 20 ueber dem
   Kasten (15) und decken sie, sie ist aus dem Bild. Am Ende der Fahrt ist
   sie unsichtbar (visibility nach 0,3 s, damit kein Tab-Halt und kein
   Treffer unter dem Band bleibt). Stehen bleibt nur der Griff, der unter
   der Reihe haengt: 6 mm hoch, so breit wie die Reihe mit ihrem Rand, ein
   kleiner Pfeil nach unten; er liegt ueber der Szene und nimmt ihr keinen
   Platz. Steht die Skizzenleiste (22 unter dem Band, z-index 19), haengt
   er unter ihr: 22 weniger, also 346. Bewegung nur im transform, still
   bei prefers-reduced-motion. Lage und Mass der zu-Lage bleiben, wie sie
   sind; am Handy steht der Kasten gar nicht (Block 378). */
.wuerfel > .navileiste {
  transition: transform .3s ease, visibility 0s linear 0s;
}

.wuerfel.gerutscht > .navileiste {
  transform: translate(-50%, -368px);
  visibility: hidden;
  transition: transform .3s ease, visibility 0s linear .3s;
}

:root:has(#skizzenleiste:not([hidden])) .wuerfel.gerutscht > .navileiste {
  transform: translate(-50%, -346px);
}

.navileiste .navi-griff {
  position: absolute;
  top: calc(100% + 1px);
  left: -1px;
  right: -1px;
  width: auto;
  height: 6mm;
  padding: 0;
  display: grid;
  place-items: center;
  visibility: visible;
  background: var(--tafel);
  border: 1px solid var(--tafel-rand);
  border-top: 0;
  border-radius: 0 0 3px 3px;
  color: var(--schrift);
}

.navileiste .navi-griff svg { width: 14px; height: 8px; }

@media (prefers-reduced-motion: reduce) {
  .wuerfel > .navileiste,
  .wuerfel.gerutscht > .navileiste {
    transition: none;
  }
}

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

.zeitleiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--hoehe-zeit);
  z-index: 20;
  display: flex;
  /* UNTEN ausgerichtet (Paket 200): die Kacheln stehen am unteren Rand und
     wachsen nach oben in die Leiste hinein, wie die Symbole im Dock. Nach
     unten waere das Wachsen ausserhalb des Fensters. Die zwei
     Knopfgruppen stehen auf derselben Linie wie die Kacheln. */
  align-items: flex-end;
  gap: 8px;
  padding: 0 6px 8px;
  background: var(--leiste);
  border-top: 1px solid var(--linie);
}

/* Der Griff an der OBERKANTE (Paket 200), dasselbe Muster wie der Griff an
   der Tafel AUFBAU (183): ein schmaler Streifen, sichtbar erst beim
   Ueberfahren, Pointer Events, Doppelklick stellt die Vorgabe her. */
.zeit-griff-hoehe {
  position: absolute;
  left: 0;
  top: -3px;
  width: 100%;
  height: 7px;
  cursor: row-resize;
  touch-action: none;
  z-index: 10; /* die oberste Sprosse der Stapelordnung, siehe unten */
  background: transparent;
}

.zeit-griff-hoehe:hover,
.zeit-griff-hoehe.zieht {
  background: var(--akzent);
  opacity: .35;
}

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

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

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

.zeit-marken {
  position: relative; /* Bezug fuer Marker und Ueberzug (zeitreise.js) */
  flex: 1;
  display: flex;
  /* Kacheln unten, fester Abstand, die Hoehe kommt aus der Leistenhoehe
     (Paket 200). Sie ist genau der Platz, in den eine gewachsene Kachel
     passt; darum schneidet overflow-y nichts ab. */
  align-items: flex-end;
  gap: var(--kachel-abstand);
  height: var(--kachel-platz);
  border-left: 1px solid var(--linie-hell);
  /* An BEIDEN Enden haelt die Reihe genau den Platz frei, den das
     Ausweichen der gewachsenen Kacheln hoechstens braucht (Paket 200b,
     --dock-rand aus js/zeitleiste-raum.js). Als Polster und nicht als
     Rand: Polster gehoert zum Rollbereich, die erste Kachel kann also
     nach links ausweichen, ohne abgeschnitten zu werden, und die letzte
     nach rechts, ohne aus dem Inhalt zu fallen. */
  padding-left: var(--dock-rand);
  padding-right: var(--dock-rand);
  /* Mehr Schritte als Breite: die Leiste rollt waagerecht, und
     js/zeitleiste-raum.js haelt die gewaehlte Kachel im Blick. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.marke {
  position: relative;
  width: 26px; height: 22px;
  /* NIE schrumpfen (Paket 200): in einer Leiste, die rollt, ist eine
     Kachel, die sich zusammendruecken laesst, genau das "gequetscht", das
     Kostja am 2026-09-13 gemeldet hat. */
  flex: 0 0 auto;
  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; }

/* Der Schritt, der die angeklickte Flaeche gemacht hat (Vertrag 6j,
   Paket 135). Derselbe Ton wie die Farbe im Modell (--farbe-schritt aus
   farben.js), damit man Bild und Zeitstrahl ohne Nachdenken zusammen
   liest. Ein Rahmen und kein Hintergrund: die Wahl (.gewaehlt) faerbt
   den Hintergrund, und beides kann gleichzeitig gelten. */
.marke.aus-flaeche {
  border-color: var(--farbe-schritt);
  box-shadow: 0 0 0 1px var(--farbe-schritt);
}

/* ---------- Fehlerhafte Objekte (Vertrag 6s, Paket 79) ----------
   Der Schritt bekommt ein Zeichen in der Ecke: 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); }

/* ---------- Gelenke: Schieber und Stellung ausserhalb (Paket 204d) ----
   Der Schieber steht UNTER seinem Gelenk, in der Zeile des Baums: er ist
   die zweite Art, ein Gelenk zu stellen (die erste ist die Maus am
   Koerper). Die Zahl daneben ist schmal und tippbar; sie kennt den
   Bereich des Schiebers nicht (SCHNITTSTELLE, Bewegen). */
.zweig.gelenkschieber {
  gap: 6px;
  height: 22px;
}

.zweig.gelenkschieber input[type="range"] {
  flex: 1 1 auto;
  min-width: 40px;
  max-width: 130px;
  height: 12px;
  margin: 0;
  accent-color: var(--akzent);
  cursor: pointer;
}

.zweig.gelenkschieber .gelenkzahl {
  flex: 0 0 auto;
  width: 56px;
  height: 16px;
  padding: 0 3px;
  font: inherit;
  font-size: 11px;
  color: var(--schrift);
  background: var(--feld, transparent);
  border: 1px solid var(--feld-rand);
  border-radius: 3px;
}

/* Eine Stellung AUSSERHALB der Grenzen (Umschalt beim Ziehen): das Gelenk
   steht gelb, solange sie dort liegt. Nicht rot: rot heisst "laesst sich
   nicht loesen" (6s), und hier ist nichts kaputt, es ist nur jemand
   bewusst ueber den Anschlag hinausgegangen. */
.zweig.aussenBereich .text { color: var(--achtung, #d6a02b); }

/* ---------- 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). */

/* ---------- Die STAPELORDNUNG in der Leiste (Paket 200b) ----------
   Kostja am 2026-09-13, 10:50, nach dem Blick auf 200: "Zeitleistenmarkierer
   soll immer im Vordergrund sein, sonst wird er ueberdeckt und man kann ihn
   nicht mehr greifen." Vorher lag die GEWACHSENE Kachel (z-index 4) ueber
   dem Marker (3), und genau darum war er nicht mehr zu fassen.

   Die Ordnung steht HIER und an keiner anderen Stelle. Ein Modul, das
   z-index an ein Element schreibt, verteilt sie auf zwei Dateien, und dann
   entscheidet die Reihenfolge des Zeichnens darueber, wer oben liegt.
   Von unten nach oben, alles innerhalb der Leiste:

     0  der gestreifte Bereich hinter dem Marker (.zeit-hinten)
     1  die ruhende Kachel
     2  die gewachsene Kachel, plus ihre Stapelhoehe: die groesste (unter
        dem Zeiger) liegt vorn, die Nachbarn abfallend dahinter, also 3, 4
        und 5 bei einer Welle von drei Kacheln je Seite (--dock-stapel
        setzt js/schrittbilder.js, die Zahl kommt aus dem Ausweichen)
     8  das Schaufenster einer Kachel (kleines Bild, grosses Fenster)
     9  der MARKER: ueber jeder Kachel, auch der gewachsenen, und ueber dem
        Schaufenster
     10 der Griff der Leistenhoehe an der Oberkante */

.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", und das
   ist die richtige Aussage. */
.zeit-hinten {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  z-index: 0; /* die unterste Sprosse der Stapelordnung, siehe oben */
  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);
}

/* ---------- Die KLAMMER (Paket 210) ----------
   Bis Paket 210 war der Marker ein senkrechter Schiebestift mit Fuss, der
   zwischen zwei Kacheln stand. Er sagte damit "hier ist eine Grenze",
   obwohl die Aussage eine andere ist: DIESER SCHRITT ist der Stand des
   Koerpers. Seit 210 ueberspannt eine waagerecht rastende Klammer die
   Kachel dieses Schrittes, unten offen, mit dem Griff mitten auf dem
   Buegel: liegend zeigt er, dass waagerecht gezogen wird, und er liegt
   UEBER der Kachel, verdeckt also kein Bild.

   Lage, Breite, Hoehe und den Abstand nach unten setzt js/zeitreise.js aus
   der GEMESSENEN Kachel (markerFeld, seit Paket 287 am Bild der Kachel
   samt Dock und bei jeder Aenderung nachgezogen): eine niedrige Leiste
   zeigt kleinere Kacheln, ohne Schrittbilder sind sie niedriger, und eine
   Klammer aus dem Stilblatt passte dann nicht mehr. Die Werte hier sind
   nur die Vorgabe, bis das Skript gemessen hat. */

.zeit-marker {
  position: absolute;
  /* Links und unten ab dem Nullpunkt; zeitreise.js misst ihn an genau
     diesen zwei Werten (_nullpunkt), darum stehen sie immer in px da. */
  left: 0;
  bottom: 0;
  /* Vorgabe fuer den Fall, dass das Skript noch nichts gesetzt hat. */
  width: 90px;
  height: calc(var(--kachel-hoehe) + 5px);
  /* IMMER im Vordergrund (Paket 200b): ueber jeder Kachel, auch der
     gewachsenen, und ueber dem Schaufenster einer Kachel. Sonst deckt das
     Dock-Wachsen ihn zu und er ist nicht mehr zu greifen. */
  z-index: 9;
  cursor: grab;
  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.zieht { cursor: grabbing; }

/* Gesperrt (offene Skizze, Paket 210): kein Griff-Zeiger, matt. Der Satz
   dazu steht im Titel und in der Statuszeile. */
.zeit-marker.gesperrt { cursor: not-allowed; opacity: .5; }

.zeit-marker-klammer {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  border: 2px solid var(--akzent-warm);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  pointer-events: none;
}

.zeit-marker-griff {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 5px;
  border-radius: 3px;
  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); }

.zeit-marker:hover .zeit-marker-klammer,
.zeit-marker.zieht .zeit-marker-klammer { border-color: 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); }

/* ---------- Die Zeitleiste ist eine BILDERGESCHICHTE (Paket 210) -------
   Die Kacheln mit Bild, Dock und Kommentaren sind unser eigenes Merkmal
   (185a, 185b, 200). Zwei kleine Zeichen machen daraus sichtbar EINE
   Geschichte statt einer Reihe Knoepfe:

   1. Die SCHIENE: eine feine Linie unter allen Kacheln, auf der sie
      stehen. Sie laeuft durch die Luecken hindurch und verbindet die
      Kacheln damit zu einem Streifen. Bewusst als inset-Schatten der
      Reihe und nicht als Strich je Luecke: eine Kachel hat overflow
      hidden (sie schnitte ihn ab), und beim Dock-Wachsen WEICHEN die
      Nachbarn per transform aus (Paket 200b), ein Strich zwischen zwei
      Kacheln wanderte also mit und stuende schief. Die Schiene liegt in
      der Reihe selbst und bleibt darum immer gerade.

   2. Die SCHRITTNUMMER klein in der Ecke der Kachel, aus einem
      CSS-Zaehler. Damit kann man ueber einen Schritt reden ("der
      Siebte") und die Reihenfolge lesen, auch wenn drei Kacheln
      dasselbe Bild tragen. */

.zeit-marken {
  counter-reset: schritt;
  box-shadow: inset 0 -1px 0 var(--linie);
}

.marke { counter-increment: schritt; }

.zeitleiste.kacheln .marke::after {
  content: counter(schritt);
  position: absolute;
  left: 2px;
  top: 2px;
  padding: 0 2px;
  border-radius: 2px;
  font-size: 8px;
  line-height: 10px;
  color: var(--schrift-matt);
  background: var(--leiste-tief);
  pointer-events: none;
}

/* ---------- Gesperrte Zeitreise (offene Skizze, Paket 210) ----------
   Der modale Raum SKIZZE nimmt der Zeitleiste die Bedienung. Das muss man
   SEHEN, sonst zieht man an der Klammer und bekommt eine Absage: die
   Reihe liegt matt, und Klammer wie Kacheln zeigen keinen Griff mehr. */
.zeitleiste.zeit-gesperrt .zeit-marken { opacity: .72; }
.zeitleiste.zeit-gesperrt .marke { cursor: default; }

/* Der Schalter "alle Körper" (Paket 66, Vertrag 6m). Er sitzt seit Paket
   218 allein am rechten Ende der Zeile 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); }

/* ---------- Schrittbilder am Zeitstrahl (Paket 185a, Vertrag 6j) ----------
   Kostja 2026-09-12 17:05: "Der Zeitstrahl bleibt klein, aber jeder Schritt
   bekommt ein Bild vom Moment seines Entstehens. Ueber dem Symbol waechst es
   wie im Dock." Gewachsen wird mit TRANSFORM und nicht mit Breite und Hoehe:
   transform sitzt im Bild und nicht im Fluss, der Strahl verschiebt sich
   dadurch also nicht um einen Bildpunkt. Der Ursprung liegt unten in der
   Mitte, damit das Symbol nach OBEN aus der Leiste waechst, wo Platz ist. */

.marke {
  transform-origin: bottom center;
  transition: transform .12s ease-out;
}

/* Die gewachsene Kachel und ihre Stapelhoehe (Paket 200b): die groesste
   Kachel, die unter dem Zeiger, liegt VOR ihren Nachbarn, und die Nachbarn
   fallen in der Reihe dahinter ab. --dock-stapel ist die Zahl aus dem
   Ausweichen (js/zeitleiste-raum.js); ohne sie bleibt es bei der 2, und
   der Marker (9) liegt in jedem Fall darueber. */
.marke.dock {
  z-index: calc(2 + var(--dock-stapel, 0));
  border-color: var(--akzent);
}

/* ---------- Die Kachel mit Bild und Namen (Paket 200) ----------
   Kostja am 2026-09-13, 08:58, mit einem Bild der Leiste: die Kacheln
   stehen gequetscht nebeneinander und die Bilder sind winzig. Seither
   zeigt jede Kachel ihr Schrittbild im Seitenverhaeltnis der Aufnahme
   (16:10), darunter den Namen des Schrittes; das SYMBOL bleibt und sitzt
   als Abzeichen in der Ecke. Alle Masse kommen aus der Hoehe der Leiste
   (js/zeitleiste-raum.js). Ist die Leiste zu niedrig fuer ein Bild,
   fehlt die Klasse "kacheln" und die Leiste sieht aus wie vorher. */

.zeitleiste.kacheln .marke {
  width: var(--kachel-breite);
  height: var(--kachel-hoehe);
  /* Nicht grid: Bild, Symbol und Name liegen ABSOLUT, damit ihre
     Reihenfolge im Baum keine Rolle spielt (das Symbol setzt haupt.js als
     erstes Kind, Bild und Name kommen spaeter dazu). */
  display: block;
  padding: 0;
  overflow: hidden;
}

.zeitleiste.kacheln .marke > svg {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 13px;
  height: 13px;
  filter: drop-shadow(0 0 2px var(--leiste-tief));
}

.zeitleiste.kacheln .marke-bild {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--kachel-bild-hoehe);
  display: block;
  /* Das Bild fuellt die Kachel. Die Aufnahme haelt das Verhaeltnis der
     ANSICHT (185a), und das ist nicht immer genau 16:10; "cover" nimmt
     dann einen Rand weg, statt das Bild zu stauchen oder Balken zu
     zeigen. */
  object-fit: cover;
  object-position: center;
  background: var(--leiste-tief);
}

.zeitleiste.kacheln .marke-bild[hidden] { display: none; }

.zeitleiste.kacheln .marke-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--kachel-name-hoehe);
  line-height: var(--kachel-name-hoehe);
  padding: 0 3px;
  font-size: 9px;
  text-align: center;
  color: var(--schrift-matt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Noch kein Bild (ein Schritt aus der Zeit davor, oder der Lauf ist noch
   nicht bei ihm): das Symbol steht gross in der Mitte, wie vor 200. Kein
   rotes Schild und kein Platzhaltertext: das Bild kommt von selbst. */
.zeitleiste.kacheln .marke.ohne-bild > svg {
  left: 50%;
  top: calc((var(--kachel-hoehe) - var(--kachel-name-hoehe)) / 2);
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  filter: none;
}

/* Ist die Leiste zu niedrig fuer Bilder, bleiben Bild und Name weg: die
   Marken der letzten Zeichnung tragen sie noch, bis der Strahl neu gebaut
   wird. */
.zeitleiste:not(.kacheln) .marke-bild,
.zeitleiste:not(.kacheln) .marke-name { display: none; }

/* ---------- Ohne Schrittbilder (Paket 287) ----------
   Vorgabe AUS (Schalter CAD_SCHRITTBILDER im Dienst, Feld schrittbilder in
   /api/zustand). Die Kachel zeigt Nummer, Symbol und Namen und nichts
   sonst: das Symbol steht in der Mitte (Regel .ohne-bild oben), ihre Masse
   setzt js/zeitleiste-raum.js (44 hoch statt der Bildkachel, die Leiste
   bekommt eine feste Hoehe). Der Griff an der Oberkante faellt weg: es
   gibt nichts mehr, das Hoehe braucht, und kein Bild waechst im Dock. */
.zeitleiste.ohne-bilder .zeit-griff-hoehe { display: none; }

/* In der Kachel sitzt das Fehlerzeichen INNEN: die Leiste schneidet
   senkrecht ab (sie rollt waagerecht), und ein Schild, das oben
   uebersteht, waere halb weg. Dasselbe gilt fuer die Zahl der
   Kommentare; die steht weiter unten, hinter ihrer eigenen Regel. */
.zeitleiste.kacheln .marke .fehlerzeichen {
  right: 2px;
  top: 2px;
}

/* Die drei Stufen: kleines Bild, grosses Fenster, Lichtkasten. Ein Aufbau,
   drei Groessen. */
.schrittbild {
  position: fixed;
  z-index: 45;
  box-sizing: border-box;
  padding: 4px;
  border: 1px solid var(--linie-hell);
  border-radius: 3px;
  background: var(--tafel-grund);
  box-shadow: var(--schatten-weich);
  color: var(--schrift);
  font-size: 11px;
}

.schrittbild[hidden] { display: none; }

/* Das Schaufenster EINER KACHEL (kleines Bild, grosses Fenster) steht seit
   Paket 200b im Baum der Zeitleiste, und damit in ihrer Stapelordnung: der
   Marker (9) liegt darueber und bleibt greifbar, die Kacheln (1 bis 5)
   darunter. Es bleibt trotzdem am Fenster ausgerichtet (position: fixed),
   die Leiste verschiebt es also nicht. Lichtkasten und Schleier haengen
   weiter am Rumpf und liegen ueber allem. */
.zeitleiste .schrittbild { z-index: 8; }

.schrittbild .sb-titel {
  color: var(--schrift-hell);
  padding: 0 2px 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schrittbild .sb-bild {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  background: var(--leiste-tief);
  cursor: zoom-in;
}

/* Ohne Bild ein ruhiger Platzhalter und keine Fehlermeldung: ein Schritt
   aus der Zeit vor diesem Paket hat eben noch keines. */
.schrittbild .sb-leer {
  display: grid;
  place-items: center;
  min-height: 60px;
  border: 1px dashed var(--linie-hell);
  border-radius: 2px;
  color: var(--schrift-matt);
  text-align: center;
  padding: 8px;
  cursor: zoom-in;
}

.schrittbild .sb-art {
  color: var(--schrift-matt);
  padding: 4px 2px 0;
}

/* Der Kommentarstreifen (Kostja 17:40). Seit Stufe 185b ECHT: Liste,
   Eingabefeld, der eigene Kommentar loeschbar. Die Liste bekommt eine
   Hoehe und rollt darin: ein Streifen, der mit jedem Kommentar waechst,
   schiebt die zwei Knoepfe aus dem Fenster. */
.schrittbild .sb-kommentar {
  margin: 5px 0 0;
  padding: 4px 6px;
  border-top: 1px solid var(--linie);
  color: var(--schrift-matt);
}

.schrittbild .sb-kommentar-liste {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 92px;
  overflow-y: auto;
}

.schrittbild .sb-kommentar-leer { font-style: italic; }

.schrittbild .sb-kommentar-zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 6px;
  align-items: start;
}

.schrittbild .sb-kommentar-kopf {
  grid-column: 1 / -1;
  color: var(--schrift-matt);
  font-size: 10px;
}

.schrittbild .sb-kommentar-text {
  color: var(--schrift);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Das Kreuz steht nur am EIGENEN Kommentar (und bei einem Verwalter an
   jedem): wer nichts loeschen darf, sieht keinen Knopf dafuer. */
.schrittbild .sb-kommentar-weg {
  appearance: none;
  font: inherit;
  line-height: 1;
  padding: 0 4px;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--schrift-matt);
  cursor: pointer;
}

.schrittbild .sb-kommentar-weg:hover {
  color: var(--warnung);
  background: var(--flaeche-hover);
}

.schrittbild .sb-kommentar-feld {
  box-sizing: border-box;
  width: 100%;
  margin-top: 4px;
  padding: 3px 5px;
  font: inherit;
  border: 1px solid var(--linie-hell);
  border-radius: 3px;
  background: var(--leiste-tief);
  color: var(--schrift);
}

.schrittbild .sb-kommentar-feld:focus {
  outline: none;
  border-color: var(--akzent);
}

.schrittbild .sb-kommentar-feld[hidden] { display: none; }

/* Die Zahl der Kommentare am Symbol des Zeitstrahls. Sie sitzt ABSOLUT in
   der Ecke der Marke: im Fluss verschoebe sie das Symbol, und der Strahl
   soll stehen, wo er steht (dieselbe Regel wie beim Dock-Wachsen). */
.marke .marke-kommentare {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 12px;
  padding: 0 2px;
  border-radius: 7px;
  background: var(--akzent);
  color: var(--leiste-tief);
  font-size: 9px;
  line-height: 12px;
  text-align: center;
  pointer-events: none;
}

/* In der KACHEL (Paket 200) sitzt die Ziffer INNEN unten rechts: die
   Leiste schneidet senkrecht ab (sie rollt waagerecht), und ein Schild,
   das oben uebersteht, waere halb weg. */
.zeitleiste.kacheln .marke .marke-kommentare {
  top: auto;
  right: 1px;
  bottom: 0;
}

.schrittbild .sb-knoepfe {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 6px 0 2px;
}

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

.schrittbild .sb-knopf:hover { border-color: var(--akzent); background: var(--flaeche-hover); }

.sb-klein { width: 160px; pointer-events: auto; }

.sb-gross {
  width: 480px;
  max-height: calc(100vh / var(--groesse) - 12px);
  overflow: auto;
}

/* Im LICHTKASTEN ist das Bild schon ganz gross: dort kopiert ein Druck
   darauf (Paket 200f), und der Zeiger sagt es. Dasselbe am grossen Bild des
   BETRACHTERS (186); seine Seite laedt dieses Stilblatt mit, und die eine
   Zeile steht darum hier neben ihrer Schwester statt allein dort. */
.sb-kasten .sb-bild,
.bt-bild { cursor: copy; }

/* Das ganz grosse Bild ueber der Szene, in der Mitte des Fensters. */
.sb-kasten {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, calc(100vw / var(--groesse) - 48px));
  max-height: calc(100vh / var(--groesse) - 48px);
  overflow: auto;
  z-index: 47;
  padding: 10px;
  font-size: 12px;
  box-shadow: var(--schatten-dialog);
}

/* Die PFEILKNOEPFE im Lichtkasten (Paket 200h, Kostja 2026-09-13 17:02 mit
   einem Bild: links und rechts ins grosse Bild gezeichnet). Sie haengen an
   der Huelle um Bild und Platzhalter, damit sie mittig AM BILD stehen und
   nicht mittig im Fenster, dessen Hoehe der Kommentarstreifen bestimmt. */
.sb-kasten .sb-buehne { position: relative; }

.sb-kasten .sb-pfeil {
  appearance: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 84px;
  border: 1px solid var(--linie-hell);
  border-radius: 4px;
  background: var(--tafel-grund);
  color: var(--schrift-hell);
  font: inherit;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  opacity: .4;
  transition: opacity .12s ease;
}

.sb-kasten .sb-pfeil.links { left: 8px; }
.sb-kasten .sb-pfeil.rechts { right: 8px; }

/* Beim Ueberfahren deutlicher. */
.sb-kasten .sb-pfeil:hover:not([disabled]) { opacity: .95; }

/* Am ersten und am letzten Schritt stumm und blass, aber nicht weg: ein
   Knopf, der verschwindet, laesst den Zeiger ins Leere fassen. */
.sb-kasten .sb-pfeil[disabled] { opacity: .12; cursor: default; }

/* Auf Handy und Tablet gibt es kein Ueberfahren: dort stehen beide Pfeile
   immer deutlich da. */
@media (hover: none) {
  .sb-kasten .sb-pfeil:not([disabled]) { opacity: .85; }
}

.sb-schleier {
  position: fixed;
  inset: 0;
  z-index: 46;
  background: var(--schleier);
}

.sb-schleier[hidden] { display: none; }

/* Der Knopf am Ende des Strahls, wenn Bilder fehlen. Er sieht aus wie der
   Schalter "alle Körper" daneben: derselbe Ort, dieselbe Sorte Knopf. */
.zeit-ende .sb-nachrechnen {
  font-size: 11px;
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--linie);
  color: var(--schrift-matt);
}

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

/* Der Knopf in den BETRACHTER (Paket 186). Er sieht aus wie
   "Bilder nachrechnen" daneben, ist aber ein Verweis und kein Knopf: er
   oeffnet eine eigene Seite in einem eigenen Fenster. */
.zeit-ende .sb-betrachter {
  font-size: 11px;
  white-space: nowrap;
  padding: 2px 6px;
  margin-left: 4px;
  border-radius: 3px;
  border: 1px solid var(--linie);
  color: var(--schrift-matt);
  text-decoration: none;
}

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

/* ---------- Dialoge: Schleier, Kopf, Rumpf, Fuss ----------
   Bis Paket 249 hiessen diese Regeln "Einstellungen-Dialog"; die
   Einstellungen haben seitdem ihr eigenes Blatt (weiter unten), die
   Regeln hier tragen den Meldedialog und die Fragen aus dialog.js. */

.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 / var(--groesse) - 24px);
  max-height: calc(100vh / var(--groesse) - 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-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); }

/* Der rote Knopf fuer das, was sich nicht rueckgaengig machen laesst
   (Paket 258: Konto loeschen). Rot aus dem Token --warnung. */
.knopf-gefahr {
  background: var(--warnung);
  border-color: var(--warnung);
  color: var(--schrift-invers);
}

.knopf-gefahr:hover { filter: brightness(1.1); }
.knopf-gefahr:disabled { opacity: .6; cursor: default; }

.konto-loeschen-passwort {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 5px 8px;
  border: 1px solid var(--feld-rand);
  border-radius: 2px;
  background: var(--feld);
  color: var(--schrift);
  font: inherit;
}

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

/* Der Rumpf schrumpft auf die max-height des Dialogs, der Inhalt nicht:
   ohne overflow-y liefe die unterste Zeile aus dem Dialog heraus und
   waere nicht mehr erreichbar. Gemessen mit Paket 89: bei 900 px
   Fensterhoehe stand der neue Haken unter dem Rand. */
.dialog-inhalt { flex: 1; padding: 12px 16px; overflow-y: auto; }

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

/* Die kleine FRAGE aus dialog.js (Paket 240c): Saetze untereinander statt
   nebeneinander in der Zeile des Rumpfes, lesbar gross, und lange
   Knopftexte ("Auf meinem PC ..., die Daten bleiben bei mir") brechen um. */
.dialog-frage { width: 480px; }
.dialog-frage .dialog-rumpf {
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 14px 16px 12px;
}
.dialog-frage .dialog-hinweis { font-size: 12px; color: var(--schrift); }
.dialog-frage a.dialog-hinweis { color: var(--akzent); }
.dialog-frage .dialog-fuss { flex-wrap: wrap; }
.dialog-frage .knopf { white-space: normal; text-align: left; max-width: 100%; }

/* Der QR-Code fuer das Tablet (Paket 278, qr_anmeldung.js): ein weisses
   Feld mit Rand, der Code darin in scharfen Bildpunkten, mindestens 220
   breit. Weiss auch im dunklen Erscheinungsbild: ein Leser braucht dunkle
   Module auf hellem Grund. Darunter die Sekunden in fester Breite, damit
   der Satz beim Herunterzaehlen nicht springt. */
.qr-feld {
  align-self: center;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--linie-hell);
  border-radius: 4px;
  line-height: 0;
}
.qr-feld[hidden] { display: none; }
.qr-bild { display: block; image-rendering: pixelated; }
.dialog-frage .qr-rest {
  align-self: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- Einstellungen: das Blatt am Zahnrad (Paket 249) ----------

   Eine eigene Form statt des Voreinstellungs-Dialogs mit Kategorienliste
   links, Formular rechts und OK unten: ein schmales Blatt, das rechts
   unter der Kopfleiste am Zahnrad haengt, drei Gruppen als ruhige
   Flaechen, jede Einstellung ein Satz mit Schalter, Knopfreihe oder
   Farbtupfern, sofort wirksam. Der Schleier ist durchsichtig: die Szene
   bleibt zu sehen, jede Aenderung ist sofort im Bild. Farben nur aus den
   Token, darum dreht alles mit hell und dunkel mit. */

.einst-schleier { background: transparent; }

.einst-blatt {
  position: absolute;
  top: calc(var(--hoehe-kopf) + 6px);
  right: 8px;
  width: 360px;
  max-width: calc(100vw / var(--groesse) - 16px);
  max-height: calc(100vh / var(--groesse) - var(--hoehe-kopf) - 18px);
  display: flex;
  flex-direction: column;
  background: var(--dialog-grund);
  color: var(--schrift-dialog);
  border: 1px solid var(--linie-hell);
  border-radius: 10px;
  box-shadow: var(--schatten-dialog);
  font-size: 12px;
  user-select: none;
}

.einst-kopf {
  display: flex;
  align-items: center;
  padding: 12px 8px 8px 16px;
}

/* Die Schrift der Marke fuer die Ueberschriften des Blatts; die Saetze
   bleiben in der Schrift der Oberflaeche. */
.einst-titel,
.einst-gruppe-titel {
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
}

.einst-titel {
  flex: 1;
  font-size: 17px;
  font-weight: 500;
  color: var(--schrift-hell);
}

.einst-rumpf {
  overflow-y: auto;
  padding: 0 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.einst-gruppe {
  background: var(--gruppe);
  border-radius: 8px;
  padding: 10px 12px 6px;
}

/* Eine Gruppe fuer eine bestimmte Lage (lokale Version, Tresor) steht nur,
   wenn ihr Modul einen Punkt darin zeigt. */
.einst-nur-wenn-da:not(:has(.einst-eintraege > :not([hidden]))) { display: none; }

.einst-gruppe-titel {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--akzent);
}

.einst-eintrag { padding: 3px 0; }
.einst-eintrag[hidden] { display: none; }

.einst-satz {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.einst-text { flex: 0 1 auto; line-height: 1.35; }

/* Paket 321: der Verweis "Mein Konto öffnen" in der Gruppe Dein Konto sieht
   aus wie ein Knopf (die Downloads, bis 319 hier mit "in Vorbereitung",
   stehen seitdem in Mein Konto). */
.einst-verweis { display: inline-block; text-decoration: none; }
/* Paket 388b: "Verträge hier kündigen" steht verborgen, bis die Kasse
   kommt (kopfzeile.KUENDIGEN_ZEIGEN); ohne diese Regel schluege das
   inline-block oben das hidden. */
.einst-verweis[hidden] { display: none; }

/* Das Fragezeichen folgt dem Satz, das Bedienelement steht rechts. */
.einst-schalter,
.einst-regler,
.einst-zahl { margin-left: auto; }

.einst-frage {
  appearance: none;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 1px solid var(--linie-hell);
  border-radius: 50%;
  background: none;
  color: var(--schrift-matt);
  font: 600 10px/15px "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}

.einst-frage:hover { color: var(--schrift-hell); border-color: var(--schrift-matt); }

.einst-frage[aria-expanded="true"] {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--schrift-auf-akzent);
}

.einst-hilfe {
  margin: 4px 0 2px;
  color: var(--schrift-gedaempft);
  font-size: 11px;
  line-height: 1.5;
}

.einst-hilfe[hidden] { display: none; }

/* Woher eine Wahl kommt, klein unter ihrer Knopfreihe (Paket 361:
   "Automatisch: Groß, nach deinem Bildschirm"). */
.einst-vermerk {
  margin-top: 4px;
  color: var(--schrift-gedaempft);
  font-size: 11px;
}

.einst-vermerk[hidden] { display: none; }

/* Der Schalter: eine Bahn mit rundem Knopf, rechts heisst an. */
.einst-schalter {
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: var(--linie-hell);
  cursor: pointer;
  transition: background .15s;
}

.einst-schalter::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--schalter-knopf);
  transition: left .15s;
}

.einst-schalter[aria-checked="true"] { background: var(--akzent); }
.einst-schalter[aria-checked="true"]::after { left: 17px; }

/* Die Knopfreihe einer Wahl: kleine runde Felder, das gewaehlte gefuellt. */
.einst-wahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 4px 0 2px;
}

.einst-knopf {
  appearance: none;
  border: 1px solid var(--linie-hell);
  border-radius: 12px;
  background: none;
  color: var(--schrift);
  font: inherit;
  font-size: 11px;
  padding: 2px 10px;
  cursor: pointer;
}

.einst-knopf:hover { border-color: var(--schrift-matt); color: var(--schrift-hell); }

.einst-knopf[aria-pressed="true"] {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--schrift-auf-akzent);
}

/* Die Farbtupfer der Hervorhebung. Die Farbe setzt einstellungen.js aus
   der Tabelle in farben.js; der Ring zeigt die Wahl. */
.einst-tupfer {
  appearance: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.einst-tupfer[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--gruppe), 0 0 0 4px var(--schrift-hell);
}

.einst-farbname {
  margin-left: 6px;
  color: var(--schrift-matt);
  font-size: 11px;
}

.einst-regler { flex: 0 0 96px; width: 96px; accent-color: var(--akzent); }

.einst-prozent {
  flex: 0 0 38px;
  text-align: right;
  color: var(--schrift-matt);
}

.einst-zahl {
  flex: 0 0 56px;
  width: 56px;
  background: var(--feld);
  color: var(--schrift);
  border: 1px solid var(--linie-hell);
  border-radius: 6px;
  font: inherit;
  padding: 2px 4px;
  text-align: right;
}

.einst-eintraege {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 2px 0 6px;
}

.einst-eintraege .knopf { border-radius: 12px; padding: 3px 12px; }

/* Paket 382: Saetze mit Zahl in einer Gruppe fuer eine Lage (Brille:
   Zeichen suchen) nehmen die ganze Breite, damit die Zahl rechts steht. */
.einst-eintraege > .einst-eintrag { align-self: stretch; }

.einst-mehr {
  align-self: flex-end;
  color: var(--akzent);
  font-size: 11px;
  text-decoration: none;
  padding: 2px 4px;
}

.einst-mehr:hover { text-decoration: underline; }

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

/* Schmal, eine Spalte. Schleier, Kopf, Inhalt und Fuss sind die
   gemeinsamen Dialogregeln darueber. */
.dialog-meldung { width: 460px; }

/* ---------- Bezugssystem: ein schwebender Kasten (Paket 192) ---------- */

/* Kein Schleier und kein Raster mit place-items: center, sondern ein
   Fenster wie #feature-dialog. Genau das war Kostjas Befund vom
   2026-09-12 (Hintergrund grau, nicht verschiebbar, Klicks kommen nicht
   durch): der Schleier lag ueber der Szene und hat jeden Klick gefressen.
   Die Lage merkt sich fenster.js, darum steht hier nur die Vorgabe. */
#bezugssystem-dialog {
  position: absolute;
  top: 96px;
  left: 270px;
  width: 340px;
  max-height: calc(100vh / var(--groesse) - 190px);
  display: flex;
  flex-direction: column;
  background: var(--grund-hell);
  border: 1px solid var(--linie);
  border-radius: 3px;
  box-shadow: var(--schatten-dialog);
  color: var(--schrift);
  font-size: 12px;
  z-index: 30;
}

#bezugssystem-dialog .bezug-rumpf {
  padding: 10px 12px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Eine getroffene Wahl: Name links, Wert rechts, Kreuz zum Leeren. Sie
   sieht aus wie eine Zeile des Feature-Dialogs, damit "gewaehlt" im
   ganzen Programm dasselbe Bild hat. */
.bezug-wahl {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
}

.bezug-wahl-name {
  flex: 0 1 auto;
  min-width: 118px;
  color: var(--schrift-matt);
}

.bezug-wahl-wert {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.bezug-x {
  flex: 0 0 auto;
  appearance: none;
  background: none;
  border: 0;
  color: var(--schrift-gedaempft, var(--schrift-matt));
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
}

.bezug-x:hover { color: var(--schrift-hell); }

.bezug-punkte { margin: 4px 0 8px; }

/* Die gerechnete Lage, bevor OK gedrueckt ist. Sie steht neben dem
   Achsenkreuz im Bild: das sagt WO, diese Zeile sagt es in Zahlen. */
.bezug-lage {
  margin: 10px 0 0;
  color: var(--schrift-matt);
}

.bezug-fehler {
  margin: 8px 0 0;
  color: var(--warnung, #d94a45);
}

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

/* Die Haken, was mitgeht (Paket 113, Vertrag 6t). Der Hinweis steht
   UNTER seiner Zeile und nicht daneben: er ist ein ganzer Satz, und
   daneben braeche er in zwei Zeilen um, die zum naechsten Haken
   gehoerten. */
.meldung-teile { margin-bottom: 10px; }

.meldung-teile .dialog-zeile { margin-bottom: 2px; cursor: pointer; }

.meldung-teil-hinweis { margin: 0 0 8px 2px; }

.meldung-groesse { color: var(--schrift-matt); }

/* Ein gesperrter Haken (Werkstueck zu gross) bleibt LESBAR und wird nur
   matt: er sagt weiter, was es gaebe, und der Satz darunter sagt, warum
   es nicht geht. */
.meldung-haken-aus { opacity: .55; cursor: default; }

.meldung-sparsam,
.meldung-zu-gross {
  margin-bottom: 8px;
  padding: 5px 7px;
  background: var(--leiste-tief);
  border-left: 2px solid var(--warnung);
  border-radius: 2px;
}

.meldung-aufbewahrung { margin: 4px 0; }

.meldung-meine { margin-top: 12px; }

.meldung-meine-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.meldung-meine-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--schrift-matt);
  font-size: 11px;
}

.knopf-schmal { padding: 2px 8px; font-size: 11px; }

/* ---------- 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 {
  /* Lesbar wie der Baum (Paket 261, Kostja 2026-09-24: "ganz klitzeklein
     geschrieben ... noch kleiner geht es nicht"): dieselbe Groesse wie
     AUFBAU und die Schriftfarbe statt der matten, in hell und dunkel aus
     den Token. Rot bleibt dem Fehler, warm dem Hinweis. */
  color: var(--schrift);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  /* Der Text nimmt den Platz und bricht um, der Zaehler daneben bleibt
     ganz (er schrumpft sonst als erster). Wachsen tut die Meldung seit
     Paket 95 nicht mehr: das tut die Luecke daneben, damit die drei
     rechten Felder an ihrem Platz bleiben. */
  flex: 0 1 auto;
  min-width: 0;
  /* Sie endet VOR der Navigationsleiste (Befund 32, Paket 95): 50 Prozent
     der Fensterbreite minus der halben Leiste minus 12px Abstand, davon ab
     die 246px, an denen die Zeile beginnt. --navi-breite meldet haupt.js;
     der Ersatzwert gilt nur, bis das geschehen ist. max() haelt die
     Meldung auf einem schmalen Fenster lesbar, statt sie auf 0 zu
     rechnen. */
  max-width: max(160px, calc(50vw / var(--groesse) - var(--navi-breite, 220px) / 2 - 258px));
  /* Hoechstens DREI Zeilen, danach Ellipse; der volle Text steht im
     Tooltip (haupt.js setzt ihn bei jeder Meldung). Eine Meldung, die
     ueber das halbe Bild waechst, ist keine Auskunft mehr. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Nur die GEKUERZTE Meldung nimmt den Zeiger an, damit ihr Tooltip
   erscheint (die Statuszeile ist sonst durchlaessig, damit die Szene
   darunter bedienbar bleibt). Steht der ganze Text da, gibt es nichts
   nachzulesen, und die Zeile bleibt durchlaessig wie bisher. */
.status.gekuerzt {
  pointer-events: auto;
  cursor: help;
}

/* Die Luecke zwischen Meldung und den drei rechten Feldern (Paket 95). */
.status-luecke {
  flex: 1 1 auto;
  min-width: 0;
}

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

/* Der dritte Ton (Paket 95, Befund 32): eine Warnung ist kein Fehler. Warm
   statt Rot, dieselbe Farbe wie das Warndreieck an einer Skizze in der
   Zeitleiste (6s) und der Marker der Zeitreise. Kein harter Kontrast,
   derselbe Befund wie bei den Kreisen vom 2026-09-07. */
.status.hinweis { color: var(--akzent-warm); }

/* ISOLIEREN (Paket 98, isolieren.js): "Isoliert: Solid008 (aufheben)".
   Warm wie jede andere Auskunft, die einen ZUSTAND meldet (die Ansicht
   zeigt gerade nicht alles); Rot bliebe der Absage vorbehalten. Es bricht
   nie um und schrumpft nie, wie Fortschritt und Koordinaten daneben. */
.isoliert {
  color: var(--akzent-warm);
  font-size: 10px;
  white-space: nowrap;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  /* Das EINZIGE Feld der Statuszeile, das Klicks annimmt: "(aufheben)"
     ist ein Knopf. Der Rest der Zeile bleibt durchlaessig, damit die
     Szene darunter bedienbar ist. */
  pointer-events: auto;
}

/* Ohne Isolierung traegt das Feld hidden. Die Regel muss dastehen, weil
   "display: inline-flex" oben die Vorgabe des Browsers fuer [hidden]
   schlaegt; dieselbe Stelle wie bei .dialog-schleier und .vorhang. */
.isoliert[hidden] { display: none; }

.isoliert-aufheben {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.isoliert-aufheben:hover { color: var(--schrift-hell); }
.isoliert-aufheben:focus-visible { outline: 1px solid var(--akzent); outline-offset: 1px; }

/* Fortschritt bei langen Auftraegen (Paket 92, fortschritt.js): steht
   zwischen der Meldung und den Koordinaten, bricht nie um und schrumpft
   nie. Er faerbt in der Akzentfarbe, nicht in der Warnfarbe: dass der
   Dienst rechnet, ist kein Fehler, sondern die Antwort auf die Frage, ob
   ueberhaupt etwas passiert. */
.fortschritt {
  color: var(--akzent);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Ohne laufenden Auftrag traegt das Feld hidden (Vertrag 7: "kostet im
   Flex-Behaelter weder Platz noch gap"). Ohne diese Zeile schlaegt das
   "display: inline-flex" darueber die Vorgabe des Browsers fuer [hidden],
   und die drei rechten Felder stuenden dauerhaft um zwei Luecken
   verschoben (gefunden beim Bau von Paket 98). */
.fortschritt[hidden] { display: none; }

/* Das LAUFZEICHEN: ein kleiner offener Ring, der sich dreht. Kein Balken
   von 0 auf 100, solange niemand den Anteil kennt, und nichts
   Ausgegrautes (bindende Entscheidung 2026-09-03). */
.fortschritt-ring {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border: 1.5px solid var(--akzent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: fortschritt-dreht .8s linear infinite;
}

@keyframes fortschritt-dreht {
  to { transform: rotate(360deg); }
}

/* Wer Bewegung abgestellt hat, bekommt einen ruhigen Punkt. Die Zahl der
   Sekunden laeuft ohnehin weiter und ist die eigentliche Auskunft. */
@media (prefers-reduced-motion: reduce) {
  .fortschritt-ring {
    animation: none;
    border-top-color: var(--akzent);
    background: var(--akzent);
  }
}

/* ---------- Der Vorhang bei langen Auftraegen (Paket 94) ---------------

   Derselbe Schleier wie bei den Dialogen (--schleier), aber HOEHER im
   Stapel als sie: waehrend eines Imports darf kein Dialog davor stehen,
   und ein Dialog, der darunter entsteht, wartet, bis der Vorhang faellt
   (Anforderung Punkt 3). Er faengt selbst jede Geste, darum
   pointer-events auto und touch-action none. */
.vorhang {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--schleier);
  display: grid;
  place-items: center;
  pointer-events: auto;
  touch-action: none;
  cursor: progress;
}

/* Wie beim Dialog-Schleier: display auf der Klasse schlaegt sonst das
   hidden-Attribut, und der Vorhang laege unsichtbar ueber allem. */
.vorhang[hidden] { display: none; }

/* Der Kasten im Ton der FEATURE-DIALOGE (--fenster), nicht in einem
   eigenen. Kein harter Kontrast: derselbe Befund wie bei den Kreisen
   vom 2026-09-07, eine Flaeche, die aus der Oberflaeche herausspringt,
   liest sich als Fehler. */
.vorhang-kasten {
  width: min(420px, 90vw / var(--groesse));
  background: var(--fenster);
  border: 1px solid var(--linie-hell);
  border-radius: 3px;
  box-shadow: var(--schatten-weich);
  color: var(--schrift-dialog);
  font-size: 12px;
  padding: 22px 24px 20px;
  text-align: center;
  outline: none;
}

/* Dasselbe Laufzeichen wie in der Statuszeile, nur groesser: ein offener
   Ring, der sich dreht. Kein Balken von 0 auf 100, auch nicht, wenn eine
   Etappe ihren Anteil kennt: der Anteil steht als Text daneben, und ein
   Balken, der bei jedem Etappenwechsel zurueckspringt, luegt. */
.vorhang-ring {
  width: 26px;
  height: 26px;
  margin: 0 auto 14px;
  border: 2px solid var(--akzent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: fortschritt-dreht .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .vorhang-ring {
    animation: none;
    border-top-color: var(--akzent);
  }
}

.vorhang-titel {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 10px;
}

/* Die Zeile aus Paket 92: Megabyte beim Hochladen, danach die Etappe des
   Rechenkerns. Sie traegt die Akzentfarbe wie das Feld in der
   Statuszeile, denn es ist dieselbe Auskunft. */
.vorhang-etappe {
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  margin-bottom: 6px;
}

/* "noch etwa 40 s", "bitte warten", oder ohne jede Etappe
   "Dauer nicht berechenbar, bitte warten" (Paket 121). */
.vorhang-dauer {
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.vorhang-uhr {
  color: var(--schrift-gedaempft);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* Der Satz, der sagt, warum nichts geht. Er steht immer da, damit
   niemand die Oberflaeche fuer haengend haelt. */
.vorhang-sperre {
  color: var(--schrift-gedaempft);
  font-size: 11px;
  line-height: 1.5;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--linie-hell);
}

.vorhang-abbruch {
  margin-top: 14px;
  border-color: var(--warnung);
  color: var(--warnung);
  cursor: pointer;
}

.vorhang-abbruch:disabled {
  border-color: var(--linie-hell);
  color: var(--schrift-gedaempft);
  cursor: not-allowed;
  opacity: .65;
}

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

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

/* Zeigerposition in Skizzenkoordinaten (Paket 89, koordinaten.js).
   Gleiche Groesse und gleiche Ziffernbreite wie der Zaehler daneben,
   nur etwas heller: waehrend des Zeichnens wird sie abgelesen, die
   Meldung links wird es nicht. Sie bricht nie um und schrumpft nie
   (flex 0 0 auto), sonst zerfiele die Zahl beim Zeichnen; Platz nimmt
   sich die Meldung, die dafuer umbrechen darf. */
.koordinaten-anzeige {
  color: var(--schrift);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Massanzeige der freien Auswahl (koerperauswahl.js):
   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. */
/* Das Schild der freien Auswahl ("1 Kante | Länge: 7,00 mm"). Es steht
   IMMER OBERHALB des Fachs unten rechts (Paket 139, Befund 58): bis dahin
   hing es an einer festen Zahl (Zeitleiste plus 38px), und die reichte
   gemessen nicht ueber die Knoepfe VR und Vollbild hinaus. In Firefox lag
   das Schild darum ueber ihnen. Jetzt rechnet die Lage aus der GEMESSENEN
   Hoehe des Fachs (--hoehe-unten-rechts, js/fenster.js) plus dessen
   eigenem Abstand zur Zeitleiste (6px) plus 8px Luft. Damit ist es von
   der Schrift des Browsers unabhaengig: wird der Knopf hoeher, rueckt das
   Schild mit. */
.massanzeige {
  position: fixed;
  z-index: 17;
  right: 14px;
  bottom: calc(var(--hoehe-zeit) + 6px + var(--hoehe-unten-rechts) + 8px);
  /* In einem schmalen Fenster (375px) darf das Schild nicht aus dem Bild
     laufen: es haengt rechts, waechst also nach links. */
  max-width: calc(100vw / var(--groesse) - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
  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; }

/* Paket 311: ohne das Recht brille steht statt des VR-Knopfs ein Satz mit
   dem Kauf-Link (js/brille_recht.js), in der Optik des Fachs. */
.brille-satz {
  max-width: 260px;
  padding: 6px 8px;
  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;
  line-height: 1.35;
}

.brille-satz a { color: inherit; font-weight: 600; }

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

/* Paket 367: AR mit Blatt (js/ar_blatt.js). Der Knopf steht im Fach
   zwischen VOLLBILD und BRILLE, in derselben Optik; sein Text ist laenger,
   darum waechst er mit und bricht nicht um. Seit Paket 388b heisst er
   ANSEHEN IN AR und steht nur am Tablet (Finger, Aufbau Rechner); am
   Handy ist das Fach weg, am Rechner mit Maus ist er verborgen. Seit
   Paket 376 traegt BRILLE AR (js/szene.js, nur wenn die Brille
   immersive-ar kann) dieselbe Optik, links neben BRILLE. */
#ArBlattKnopf, #BrilleArKnopf {
  min-width: 100px;
  padding: 12px 8px;
  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;
  white-space: nowrap;
  opacity: .5;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

#ArBlattKnopf:hover, #BrilleArKnopf:hover { opacity: 1; }
#ArBlattKnopf[hidden], #BrilleArKnopf[hidden] { display: none; }
#ArBlattKnopf svg { display: block; flex: 0 0 auto; }

/* Der Schleier: das Kamerabild ueber die ganze Flaeche (cover, wie die
   Rechnung in ar_zeichen.ansichtFuer), darueber die Ansicht mit dem
   Werkstueck, oben die Leiste. Er waechst mit der Groesse der Bedienung
   wie jeder Dialog-Schleier (die eine zoom-Regel unten); Video, Buehne
   und Ansicht liegen im selben Kasten und passen darum weiter
   aufeinander. Die Leiste ist dunkel und durchscheinend in jedem
   Erscheinungsbild: sie liegt auf dem Kamerabild, nicht auf der
   Oberflaeche. */
#blatt-ar.dialog-schleier {
  display: block;
  z-index: 45;
  background: #000;
  overflow: hidden;
}

#blatt-ar.dialog-schleier[hidden] { display: none; }

.blatt-ar-video,
.blatt-ar-buehne,
.blatt-ar-modell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.blatt-ar-video { object-fit: cover; }
.blatt-ar-buehne { pointer-events: none; }

#blatt-ar .blatt-ar-leiste {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  background: rgba(16, 18, 22, .72);
  color: #f2f4f7;
  font-size: 14px;
}

.blatt-ar-satz { flex: 1 1 100%; font-weight: 600; }
.blatt-ar-satz.fehler { color: #ffb4a8; }
.blatt-ar-erkannt { flex: 1 1 auto; }
.blatt-ar-messung { flex: 1 1 auto; color: #c3c9d1; font-size: 12px; }
.blatt-ar-zeile { display: inline-flex; align-items: center; gap: 6px; }
.blatt-ar-feld { width: 5.5em; font: inherit; padding: 3px 6px; }
.blatt-ar-zu { margin-left: auto; }
.blatt-ar-hinweis { flex: 1 1 100%; color: #c3c9d1; font-size: 12px; }

/* ---------- Skizzenleiste ---------- */

/* Ein schmaler Streifen direkt unter dem modalen Band. Seine Hoehe ist
   die einer einzeiligen Statusanzeige; hidden nimmt ihn ausserhalb des
   Skizzenraums vollstaendig aus dem Bild. */
.skizzenleiste {
  position: fixed;
  z-index: 19;
  top: calc(var(--hoehe-kopf) + var(--hoehe-reiter) + var(--hoehe-band));
  left: 0;
  right: 0;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 6px;
  box-sizing: border-box;
  background: var(--leiste-tief);
  border-bottom: 1px solid var(--linie);
  color: var(--schrift-matt);
}

.skizzenleiste[hidden] { display: none; }

.skizzenleisten-knopf {
  appearance: none;
  height: 18px;
  padding: 0 7px;
  border: 1px solid var(--linie-hell);
  border-radius: 2px;
  background: var(--leiste);
  color: var(--schrift-matt);
  font: inherit;
  font-size: 10px;
  white-space: nowrap;
  cursor: pointer;
}

.skizzenleisten-knopf:hover { background: var(--zeile-hover); color: var(--schrift); }

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

/* Links vor den sieben Schaltern (Paket 219b): die Varianten des aktiven
   Werkzeugs und der Wechsel Kontur/Hilfslinie, beide als Gruppe, danach
   ein schmaler Trennstrich. Die Leiste bleibt EINE Zeile, darum schrumpfen
   die Gruppen nicht (flex: none) und ihre Woerter brechen nicht um. */
.skizzenleisten-gruppe {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: none;
}

.skizzenleisten-gruppe[hidden] { display: none; }

.skizzenleisten-wort {
  white-space: nowrap;
  font-size: 10px;
  color: var(--schrift);
}

.skizzenleisten-wort.matt { color: var(--schrift-matt); }

/* Symbolknopf: dasselbe Blech wie ein Wortknopf, nur schmaler, damit das
   Bild und nicht der Rand den Platz bestimmt. */
.skizzenleisten-knopf.bild {
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.skizzenleisten-knopf.bild svg { display: block; width: 14px; height: 14px; }

.skizzenleisten-strich {
  flex: none;
  width: 1px;
  height: 14px;
  margin: 0 3px;
  background: var(--linie-hell);
}

/* Die folgenden Grundregeln gehoeren weiter der Messpalette. */

.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 bleibt an ihrer bisherigen Stelle an der Ansichtstafel. Die
   Grundregeln (.palette-abschnitt, .palette-knopf, .palette-hinweis)
   gehoeren ihr weiter. Etwas breiter als die fruehere Skizzenhilfe, 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) + 386px);
  right: 14px;
  width: 258px;
  /* 430px: 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. Auch hier sind es 40 Bildpunkte
     mehr als bis Paket 210h (346px und 390px), genau die Mehrhoehe der
     Ansichtstafel. */
  max-height: max(200px, calc(100vh / var(--groesse) - var(--hoehe-kopf) - var(--hoehe-reiter)
                   - var(--hoehe-band) - var(--hoehe-zeit) - 430px));
  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 Aufgaben 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: calc(46vh / var(--groesse));
  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); }

/* Die vom Dienst beanstandete Beziehung (Vertrag 8, Paket 123): rot
   umrandet und rot beschriftet, damit die Zeile ohne Suchen ins Auge
   faellt. Sie schlaegt "gewaehlt" und "gedimmt". */
.bezpanel-zeile.beanstandet,
.bezpanel-zeile.beanstandet.gewaehlt {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--warnung);
}

.bezpanel-zeile.beanstandet .bezpanel-name,
.bezpanel-zeile.beanstandet .bezpanel-info,
.bezpanel-zeile.beanstandet.gedimmt .bezpanel-name,
.bezpanel-zeile.beanstandet.gedimmt .bezpanel-info {
  color: var(--warnung);
}

/* intern (Beziehung) und getrieben (Mass) sind gedimmt: sie sind da,
   aber nicht vom Nutzer gesetzt */
.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.
   [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; }

/* Die Liste am Zeiger beim Rechtsklick in der Skizze (marking-menu.js)
   nimmt seit Paket 259 die Form des Kontextmenues (.kontextmenue unten);
   eigene Regeln braucht sie nicht. */

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

/* Die Zeile FARBE im Koerpermenue (Paket 410): Text wie ein Eintrag,
   darunter die Tupfer in Reihen zu acht, wie die Tupfer der Schrittfarbe
   im Blatt. Die Farben kommen als Token aus farben.js. Gewaehlt ist ein
   Ring in der Akzentfarbe. Der erste Tupfer ist Stahl und zugleich der
   Standard (Paket 410b), er traegt keine Beschriftung. */
.kontext-farben {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 7px;
  padding: 5px 12px 6px 5px;
}

.kontext-tupferreihe {
  display: grid;
  grid-template-columns: repeat(8, 16px);
  gap: 5px;
  flex-basis: 100%;
  padding-left: 21px;
}

.kontext-tupfer {
  appearance: none;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--linie-hell);
  cursor: pointer;
}

.kontext-tupfer:hover { box-shadow: 0 0 0 2px var(--schrift-hell); }
.kontext-tupfer[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--tafel), 0 0 0 4px var(--akzent); }

/* Die Liste unter dem Zeiger (Paket 108, Vertrag 7). Dieselbe Tafel wie
   das Kontextmenue, nur mit einer Ueberschrift und einer Restzeile: es
   ist derselbe Handgriff (etwas am Zeiger auswaehlen), und zwei
   verschiedene Tafeln dafuer waeren zwei Sachen zum Merken.
   max-width, weil eine Zeile den Koerpernamen traegt und der beliebig
   lang sein kann; die Ellipse steht dann in der Zeile. */
.auswahlliste {
  position: fixed;
  z-index: 41;
  min-width: 190px;
  max-width: 340px;
  /* Zwoelf Zeilen sind rund 370 px. Auf einem kleinen Bildschirm (dem
     Tablet) passt das nicht mehr neben den Zeiger, und eine Tafel, deren
     untere Haelfte ausserhalb steht, waere unbedienbar. */
  max-height: calc(100vh / var(--groesse) - 16px);
  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);
}

.auswahlliste-kopf {
  padding: 4px 8px 5px;
  color: var(--schrift-matt);
  font-size: 11px;
  white-space: nowrap;
}

.auswahlliste-zeile {
  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;
}

.auswahlliste-zeile > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

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

.auswahlliste-rest {
  padding: 4px 8px 5px;
  color: var(--schrift-matt);
  font-size: 11px;
  white-space: nowrap;
}

/* Umbenennen laeuft IM Baum, wo der Blick schon ist, 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; }

/* ---------- Groesse der Bedienung (Paket 361) ----------
   Kostja 2026-10-06: Symbole, Beschriftungen, AUFBAU, Fenster und Schrift
   zusammen in drei Stufen, die 3D-Ansicht bleibt scharf. js/groesse.js
   setzt data-groesse an der Wurzel (der Kopf von index.html schon vor dem
   ersten Zeichnen), HIER steht der Faktor, und nur hier.

   Der Weg ist `zoom` an den Behaeltern der Bedienung und nicht eine
   Variable an jeder Zahl: dieses Blatt traegt weit ueber tausend feste
   Pixelwerte, `zoom` nimmt sie alle mit, samt Rand, Abstand, Schrift und
   SVG, und die Behaelter rechnen ihre Lage weiter aus denselben Variablen
   (--hoehe-kopf, --hoehe-zeit ...), die mit ihnen wachsen. Was zoom nicht
   von selbst richtig macht, steht an zwei Stellen: vh und vw zaehlen in
   einem gezoomten Behaelter mit, darum steht dort `100vh / var(--groesse)`;
   und wer per Skript in einem Behaelter rechnet, fragt sein Element nach
   currentCSSZoom (fenster.js, tafelbreite.js, tafelhoehe.js,
   zeitleiste-raum.js, zeitreise.js, schrittbilder.js, viewcube.js).

   NIE in der Liste: #ansicht mit der Leinwand der Szene. Ihre Aufloesung
   bleibt devicePixelRatio, Klicks und Ziehen in der Szene rechnen mit
   ihrem eigenen Rechteck, und das bleibt das Fenster. Ebenso nicht, was
   in der Szene an einem Punkt haengt (Masszahlen, Eingabe am Mass,
   Schilder der Beziehungen, Zeigersymbol): es gehoert zum Bild.

   AUSGENOMMEN ist ein Behaelter, der gerade IN einem anderen steht
   (.in-tafel, Paket 438: das Fenster der Schritte in der Tafel der
   Bedienung B, die im Band liegt). Er waechst mit dem Band und wuerde
   sonst doppelt gezoomt. */
:root[data-groesse="klein"] {
  --groesse: .85;
}

:root[data-groesse="gross"] {
  --groesse: 1.2;
}

:is(.kopf, .reiter, .band-zeile, .tafel, .wuerfel, .zeitleiste,
    .status-zeile, .massanzeige, #unten-rechts, .skizzenleiste,
    #feature-dialog, #bezugssystem-dialog, .dialog-schleier, .vorhang,
    .sb-kasten, .abgleich-toast, .zifferntastatur, .projekte-knopf,
    .tablet-zeiger):not(.in-tafel) {
  zoom: var(--groesse);
}

/* Die Menues am Zeiger oder an ihrem Knopf stellt ihr Skript mit left und
   top auf einen Punkt des Fensters. Sie wachsen darum mit scale von genau
   diesem Punkt aus, statt mit zoom auch ihre Lage zu vergroessern; beim
   Einklemmen an den Rand messen die Skripte ihr Rechteck. */
:is(.kontextmenue, .anzeige-menue, .auswahlliste, .schnellbox, .verlauf-liste) {
  transform-origin: 0 0;
  scale: var(--groesse);
}

/* Gross in einem schmalen Fenster: Kopfleiste und Reiter rollen wie unter
   800 Bildpunkten (Paket 176), nur schon ab 960, denn 960 / 1,2 = 800. */
@media (max-width: 960px) {
  :root[data-groesse="gross"] :is(.kopf, .reiter) {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
}

/* ---------- Fenster verschieben und anheften (Paket 110) -------------

   Befund 40 (Kostja 2026-09-09): "Fehlermeldung kann nicht verschoben
   werden ... ich wollte die Meldung zur Seite schieben, um das Bild zu
   sehen." Die Lage rechnet js/fenster.js und setzt sie als
   transform: translate() am Fenster selbst; hier steht nur, wie Griff
   und Nadel aussehen.

   touch-action: none, damit ein Finger auf dem Touchscreen das Fenster
   zieht statt die Seite zu schieben (dieselbe Stelle wie beim Griff der
   Tafelbreite aus Paket 93). user-select: none, damit beim Ziehen kein
   Titeltext markiert wird; ein preventDefault waere der andere Weg und
   naehme Klick und Doppelklick der Titelzeile mit. */
.fenster-griff {
  cursor: move;
  touch-action: none;
  user-select: none;
}

/* Waehrend eines Zuges liegt der Zeiger oft neben dem Griff: ohne diese
   Zeile markiert er Text im Rest der Oberflaeche. */
body.fenster-zieht { user-select: none; }

/* Die Nadel steht als ERSTES in der Titelzeile, vor Titel und
   Schliesskreuz: dort ist in allen drei Titelzeilen (Tafel, Dialog,
   Feature-Dialog) Platz, ohne dass eine davon umgebaut werden muss. */
.fenster-nadel {
  appearance: none;
  border: 0;
  background: none;
  padding: 0 4px 0 0;
  margin: 0;
  color: var(--schrift-matt);
  cursor: pointer;
  line-height: 0;
  vertical-align: middle;
  opacity: .55;
}

.fenster-nadel:hover { color: var(--schrift-hell); opacity: 1; }

/* Angeheftet: dieselbe Akzentfarbe, die ueberall "das ist gerade aktiv"
   heisst (aktives Auswahlfeld, gewaehlte Zeile). */
.fenster-nadel.an { color: var(--akzent); opacity: 1; }

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

/* ---------- Neustart-Kasten (Paket 208, Vertrag 6u) ----------

   Derselbe Schleier, derselbe Rahmen und dieselben Knoepfe wie beim
   Kasten der Wiederaufnahme darueber: es ist dieselbe Frage, nur im
   OFFENEN Tab statt beim Neuladen der Seite. Ein zweites Aussehen waere
   derselbe Fehler wie zwei Dialoge fuer eine Sache. Nur schmaler, denn
   hier steht EIN Satz und stehen zwei Knoepfe, ohne Zahlenzeile. */
#neustart-dialog {
  width: min(420px, 92vw / var(--groesse));
  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);
}
#neustart-dialog .ns-kopf {
  display: flex;
  align-items: center;
  background: var(--dialog-kopf);
  padding: 8px 12px;
}
#neustart-dialog .ns-titel {
  font-weight: 600;
  letter-spacing: 0.08em;
}
#neustart-dialog .ns-satz {
  margin: 12px 12px 6px;
  line-height: 1.5;
}
#neustart-dialog .ns-fuss {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px 0;
}
#neustart-dialog .ns-ok,
#neustart-dialog .ns-weg {
  border-radius: 2px;
  font-weight: 600;
  padding: 5px 16px;
  cursor: pointer;
  font: inherit;
}
#neustart-dialog .ns-ok {
  background: var(--akzent);
  border: none;
  color: var(--schrift-auf-akzent);
}
/* "Neu laden" ist NICHT ausgegraut, nur zurueckhaltender: es ist die
   Antwort, die den gesicherten Stand liegen laesst, statt ihn zu holen. */
#neustart-dialog .ns-weg {
  background: transparent;
  border: 1px solid var(--linie-hell);
  color: inherit;
}

/* ---------- Diagramme (Paket 266b, js/diagramm.js) ----------
   Balken je Tag, waagerechte Balken und Kacheln, gezeichnet von EINEM
   Modul fuer Ueberblick, Herkunft und Besucher der Verwaltung und spaeter
   fuer die Werkstatt. Jede Farbe kommt aus einem Token, damit hell und
   dunkel von selbst stimmen; die Schrift ist die der Oberflaeche. Die
   Balken in Herkunft und Besucher behalten ihre Klassen (vh-f0 bis vh-f4
   in verwaltung.html), weil dort die Farbe je Land eine Aussage traegt. */
.diagramm {
  display: block;
  width: 100%;
  overflow: visible;
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
}
.diagramm-balken { fill: var(--akzent); }
.diagramm-tag:hover .diagramm-balken,
.diagramm-zeile:hover .diagramm-balken { fill: var(--akzent-hover); }
.diagramm-flaeche { fill: transparent; }
.diagramm-grundlinie { stroke: var(--linie-hell); stroke-width: 1; }
.diagramm-hilfslinie {
  stroke: var(--linie-hell);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.diagramm-zahl {
  fill: var(--schrift-hell);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.diagramm-achsenwort {
  fill: var(--schrift-gedaempft);
  font-size: 10px;
}
.diagramm-wort {
  fill: var(--schrift);
  font-size: 11.5px;
}
.diagramm-kachel {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 7px 9px 8px;
  border: 1px solid var(--linie-hell);
  border-radius: 6px;
  background: var(--grund-hell);
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
}
.diagramm-kachel-titel {
  font-size: 11px;
  color: var(--schrift-gedaempft);
}
.diagramm-kachel-zahl {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--schrift-hell);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Ein Zusatz aus mehreren Teilen steht Teil fuer Teil untereinander
   (Zeilenumbruch im Text), statt mitten im Teil umzubrechen. */
.diagramm-kachel-klein {
  font-size: 10.5px;
  line-height: 1.35;
  white-space: pre-line;
  color: var(--schrift-gedaempft);
}
.diagramm-kachel.warnt { border-color: var(--warnung); }
.diagramm-kachel.warnt .diagramm-kachel-zahl,
.diagramm-kachel.warnt .diagramm-kachel-klein { color: var(--warnung); }
.diagramm-kachel.matt { opacity: .55; }
/* Paket 350: der Trichter der Start-Statistik. Die Stufen nehmen die Farbe
   der Balken, der Anteil der vorigen steht klein und gedaempft darunter. */
.diagramm-trichter { overflow: visible; }
.diagramm-stufe { opacity: .9; }
.diagramm-zeile:hover .diagramm-stufe { opacity: 1; }
.diagramm-anteil { font-variant-numeric: tabular-nums; }

/* ---------- Zifferntastatur am Tablet (Paket 277, js/zifferntastatur.js)

   Erscheint nur bei Fingerbedienung, unten mittig ueber allem ausser dem
   Vorhang (Dialoge 40 bis 47, Meldungen 50, Vorhang 60). Die Form ist die
   des Einstellungsblatts: Grund des Dialogs, runde Ecken, die Tasten als
   ruhige Flaechen, Fertig in der Akzentfarbe wie die gewaehlte Wahl. Nur
   Text, kein Bild. Tasten 56 mal 46 Bildpunkte, also Fingerziele ueber
   44; vier Spalten mit 6 Luft ergeben 242, mit Rand 266. Farben nur aus
   den Token, hell und dunkel drehen mit. */

.zifferntastatur {
  position: fixed;
  z-index: 55;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: 266px;
  padding: 12px;
  background: var(--dialog-grund);
  color: var(--schrift-dialog);
  border: 1px solid var(--linie-hell);
  border-radius: 10px;
  box-shadow: var(--schatten-dialog);
  font-family: inherit;
  user-select: none;
  touch-action: none;
}

.zifferntastatur[hidden] { display: none; }

/* Die Anzeige: der Wert, wie er ins Feld geht, mit der Schreibmarke. */
.zt-anzeige {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 40px;
  margin-bottom: 8px;
  padding: 0 10px;
  background: var(--feld);
  border: 1px solid var(--linie-hell);
  border-radius: 8px;
  color: var(--schrift-hell);
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: pre;
  overflow: hidden;
}

.zt-marke {
  display: inline-block;
  width: 2px;
  height: 22px;
  margin: 0 1px;
  background: var(--akzent);
}

/* Ganz markiert: die erste Ziffer ersetzt den Wert. */
.zt-anzeige.zt-alles .zt-wert:not(:empty) {
  background: var(--auswahl);
  color: var(--schrift-invers);
  border-radius: 3px;
}

.zt-tasten {
  display: grid;
  grid-template-columns: repeat(4, 56px);
  gap: 6px;
}

.zt-taste {
  appearance: none;
  height: 46px;
  padding: 0;
  border: 1px solid var(--linie-hell);
  border-radius: 8px;
  background: var(--gruppe);
  color: var(--schrift-hell);
  font: inherit;
  font-size: 20px;
  cursor: pointer;
  touch-action: none;
}

.zt-taste:active { background: var(--flaeche-hover); }

.zt-taste.zt-breit { grid-column: span 2; font-size: 15px; }

.zt-taste.zt-fertig {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--schrift-auf-akzent);
  font-weight: 600;
}

/* Die Einheit des Feldes steht als Schild im Raster, sie ist keine Taste. */
.zt-einheit {
  display: grid;
  place-items: center;
  height: 46px;
  color: var(--schrift-matt);
  font-size: 15px;
}

/* Das Feld, in das gerade getippt wird. */
.zt-feld { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* Die EINFUEHRUNG zum Mitklicken fuer Gaeste (Paket 348, web/js/einfuehrung.js).
   Ein Kreis in der Akzentfarbe um das Ziel, eine Welle, die von ihm
   ausgeht, und ein Schild mit einem Satz daneben. Nichts davon faengt einen
   Klick ausser den zwei Knoepfen im Schild: die Werkstatt bleibt bedienbar.
   Ueber den Dialogen (bis 999), unter dem Kasten am Ende der Testzeit
   (9000). Wer weniger Bewegung will, bekommt den Kreis ohne Welle. */
.einfuehrung {
  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: none;
}

.einfuehrung[hidden],
.einf-ring[hidden],
.einf-knopf[hidden],
.einf-zahl[hidden],
.einf-schild[hidden] {
  display: none;
}

.einf-ring {
  position: absolute;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border: 3px solid var(--akzent);
  border-radius: 50%;
  box-shadow: var(--schatten-rand);
  transition: left .12s linear, top .12s linear, width .15s ease-out, height .15s ease-out;
}

.einf-ring::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 3px solid var(--akzent);
  border-radius: 50%;
  animation: einf-welle 1.6s ease-out infinite;
}

@keyframes einf-welle {
  0% { transform: scale(1); opacity: .85; }
  100% { transform: scale(1.75); opacity: 0; }
}

.einf-schild {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  max-width: calc(100vw - 16px);
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--akzent);
  border-radius: 6px;
  background: var(--dialog-grund);
  color: var(--schrift-hell);
  box-shadow: var(--schatten-weich);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: auto;
}

.einf-zahl {
  color: var(--akzent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.einf-satz {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.einf-knopf {
  flex: none;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  color: var(--schrift-gedaempft);
  font: inherit;
  cursor: pointer;
}

.einf-knopf:hover,
.einf-knopf:focus-visible {
  border-color: var(--linie-hell);
  color: var(--schrift-hell);
}

/* Paket 360: "Weiter" (nach Geschafft und im Rundgang) ist der Weg nach
   vorn und steht darum in der Akzentfarbe. */
.einf-weiter {
  border-color: var(--akzent);
  color: var(--schrift-hell);
}

/* Paket 360: ein grosses oder langes Ziel (AUFBAU, die ganze Zeitleiste)
   bekommt statt des Kreises einen Rahmen mit runden Ecken. Die Welle waechst
   dort um einen festen Saum statt um das Dreiviertelfache, sonst liefe sie
   ueber den halben Bildschirm. */
.einf-ring.einf-rahmen,
.einf-ring.einf-rahmen::after {
  border-radius: 12px;
}

.einf-ring.einf-rahmen::after {
  animation-name: einf-welle-rahmen;
}

@keyframes einf-welle-rahmen {
  0% { inset: -3px; opacity: .85; }
  100% { inset: -21px; opacity: 0; }
}

@media (max-width: 600px) {
  .einf-schild { gap: 6px; padding: 4px 4px 4px 8px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .einf-ring { transition: none; }
  .einf-ring::after,
  .einf-ring.einf-rahmen::after { animation: none; opacity: 0; }
}

/* 442 */
/* Das Banner des zweiten Kapitels (Scan-Rundgang): gross in der Mitte, ohne
   Schleier (nichts blockiert), dieselben Token wie das Schild. "Punkte neu
   setzen" im Schild steht wie "Weiter" in der Akzentfarbe. Solange das
   Banner steht, ruht das Schild (.einf-schild[hidden] im Block 348 oben). */
.einf-banner {
  --einf-rand-oben: 22px;
  --einf-rand-seite: 24px;
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  width: min(560px, calc(100vw / var(--groesse) - 32px));
  max-height: calc(100vh / var(--groesse) - 16px);
  overflow: auto;
  padding: var(--einf-rand-oben) var(--einf-rand-seite) 18px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--akzent);
  border-radius: 12px;
  background: var(--dialog-grund);
  color: var(--schrift-hell);
  box-shadow: var(--schatten-weich);
  pointer-events: auto;
}

/* 442b: Kostjas Bild oben ueber die ganze Breite, die Ecken nimmt es vom
   Banner (overflow). Bei wenig Hoehe wird es niedriger (object-fit: cover,
   die Mitte bleibt), damit Titel, Satz und Knoepfe im Bild bleiben. */
.einf-banner-bild {
  display: block;
  box-sizing: border-box;
  width: calc(100% + 2 * var(--einf-rand-seite));
  max-width: none;
  height: auto;
  max-height: max(0px, calc(100vh / var(--groesse) - 360px));
  margin: calc(-1 * var(--einf-rand-oben)) calc(-1 * var(--einf-rand-seite)) 16px;
  aspect-ratio: 1120 / 768;
  object-fit: cover;
  background: var(--grund);
}

.einf-banner-titel {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}

.einf-banner-text {
  margin: 10px 0 18px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--schrift-gedaempft);
}

.einf-banner-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.einf-banner-knopf {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--linie-hell);
  border-radius: 6px;
  background: none;
  color: var(--schrift-hell);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.einf-banner-ja {
  border-color: var(--akzent);
  background: var(--akzent);
  color: var(--schrift-auf-akzent);
  font-weight: 600;
}

.einf-banner-grundlagen {
  margin-left: auto;
  border-color: transparent;
  color: var(--schrift-gedaempft);
}

.einf-neu {
  border-color: var(--akzent);
  color: var(--schrift-hell);
}

@media (max-width: 600px) {
  .einf-banner { --einf-rand-oben: 16px; --einf-rand-seite: 16px; }
  .einf-banner-titel { font-size: 18px; }
  .einf-banner-grundlagen { margin-left: 0; }
}

/* 378 */
/* ---------- Der Aufbau am Handy: Antippen zuerst (Paket 378) -----------

   Kostja 2026-10-07 mit einem Bild der Werkstatt auf dem Handy: das Band
   passt nicht in 390 Bildpunkte, der AUFBAU deckt die Ansicht, die untere
   Leiste ueberlagert sich, der Knopf fuer AR ist klein und versteckt. Seine
   Entscheidung: "Antippen zuerst; alles bauen."

   Alles in diesem Block haengt am Attribut data-aufbau="handy" an der
   Wurzel (js/handy.js, Vertrag 6ad); ohne das Attribut gilt nur die erste
   Regel, die die Teile des Handys am Rechner, am Tablet und in der Brille
   wegnimmt. Nichts wird aus dem DOM entfernt: Band, Reiter, AUFBAU,
   Wuerfel, Zeitleiste und Statuszeile bleiben gebaut und rechnen weiter,
   sie stehen am Handy nur nicht im Bild. Die Groesse der Bedienung ist am
   Handy Normal (Faktor 1), darum steht hier kein zoom und kein scale.
   Fingerziele mindestens 44 mal 44 Bildpunkte. Farben nur aus den Token. */

:root:not([data-aufbau="handy"]) :is(.daumenleiste, .zeitstreifen, .handy-karte, .handy-blase,
    .kopf-ar) {
  display: none;
}

:root[data-aufbau="handy"] {
  --hoehe-kopf: 48px;
  --handy-leiste: 64px;
  --handy-streifen: 34px;
  --handy-unten: calc(var(--handy-leiste) + var(--handy-streifen));
}

/* Der Grundzustand: nur die Ansicht. */
:root[data-aufbau="handy"] :is(.reiter, .band-zeile, #tafel-browser, .wuerfel, .zeitleiste,
    .status-zeile, #unten-rechts, #tafel-pruefliste, #tafel-kommentare) {
  display: none;
}

/* Die Szene fuellt den Rest zwischen Kopfzeile und Streifen. */
:root[data-aufbau="handy"] #ansicht {
  top: var(--hoehe-kopf);
  bottom: var(--handy-unten);
}

/* Die schmale Kopfzeile ist die Kopfleiste selbst: ihre drei Gruppen
   werden aufgeloest, stehen bleiben Wortzeichen, Dokumentname,
   Rueckgaengig und Wiederholen, "Ansehen in AR" und das Zahnrad. */
:root[data-aufbau="handy"] .kopf {
  gap: 2px;
  padding: 0 4px 0 6px;
}

:root[data-aufbau="handy"] :is(.kopf-links, .kopf-mitte, .kopf-rechts) {
  display: contents;
}

:root[data-aufbau="handy"] .kopf-links > :not(.kopf-marke, .verlauf-fach),
:root[data-aufbau="handy"] .kopf-mitte > :not(.punkt, #dateiname, .kopf-stufe),
:root[data-aufbau="handy"] .kopf-rechts > :not(.kopf-ar, .kopf-einstellungen) {
  display: none !important;
}

:root[data-aufbau="handy"] .kopf-marke {
  order: 1;
  margin: 0 6px 0 2px;
  font-size: 14px;
}

:root[data-aufbau="handy"] .kopf-stufe { order: 2; }
:root[data-aufbau="handy"] .punkt { order: 3; flex: none; }

:root[data-aufbau="handy"] #dateiname {
  order: 4;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--schrift-hell);
  font-size: 14px;
}

:root[data-aufbau="handy"] .verlauf-fach { order: 5; }
:root[data-aufbau="handy"] .verlauf-pfeil { display: none; }

:root[data-aufbau="handy"] :is(.verlauf-knopf, .kopf-einstellungen) {
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 10px;
}

:root[data-aufbau="handy"] :is(.verlauf-knopf, .kopf-einstellungen) svg {
  width: 22px;
  height: 22px;
}

:root[data-aufbau="handy"] .kopf-ar {
  order: 6;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 44px;
  height: 36px;
  margin: 0 2px;
  padding: 0 10px;
  border: 1px solid var(--akzent);
  border-radius: 18px;
  background: none;
  color: var(--schrift-hell);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

:root[data-aufbau="handy"] .kopf-ar[hidden] { display: none; }
:root[data-aufbau="handy"] .kopf-ar svg { width: 20px; height: 20px; flex: none; }
:root[data-aufbau="handy"] .kopf-einstellungen { order: 7; }

/* Die Daumenleiste unten: drei Grundknoepfe oder die Handlungen am
   angetippten Element. Die Hoehe steht fest, beim Wechsel blendet nur die
   neue Reihe ein, nichts springt. */
:root[data-aufbau="handy"] .daumenleiste {
  position: fixed;
  z-index: 19;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--handy-leiste);
  display: block;
  box-sizing: border-box;
  background: var(--leiste);
  border-top: 1px solid var(--linie);
}

:root[data-aufbau="handy"] .daumenleiste:is([data-leiste="element"], [data-leiste="koerper"]) {
  border-top-color: var(--akzent);
}

:root[data-aufbau="handy"] .daumen-reihe {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 4px;
  height: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  animation: daumen-blende .16s ease-out;
}

@keyframes daumen-blende {
  from { opacity: 0; }
  to { opacity: 1; }
}

:root[data-aufbau="handy"] .daumen-knopf {
  appearance: none;
  flex: 1 1 0;
  max-width: 120px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px 2px;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--schrift);
  font: inherit;
  font-size: 11px;
  line-height: 1.15;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

:root[data-aufbau="handy"] .daumen-knopf:active,
:root[data-aufbau="handy"] .daumen-knopf[aria-pressed="true"] {
  background: var(--flaeche-hover);
  color: var(--schrift-hell);
}

:root[data-aufbau="handy"] .daumen-knopf svg {
  flex: none;
  width: 24px;
  height: 24px;
}

:root[data-aufbau="handy"] .daumen-wort {
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Die Zeitleiste als Punktestreifen ueber der Daumenleiste: ein Punkt je
   Schritt (Skizzen eckig), hinter dem Marker hohl, der Marker ziehbar.
   Viele Schritte rollen waagerecht. */
:root[data-aufbau="handy"] .zeitstreifen {
  position: fixed;
  z-index: 19;
  left: 0;
  right: 0;
  bottom: var(--handy-leiste);
  height: var(--handy-streifen);
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  background: var(--leiste-tief);
  border-top: 1px solid var(--linie);
}

:root[data-aufbau="handy"] .zeitstreifen[data-schritte="0"] { visibility: hidden; }

:root[data-aufbau="handy"] .streifen-bahn {
  display: flex;
  align-items: stretch;
  height: 100%;
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}

:root[data-aufbau="handy"] .streifen-punkt {
  appearance: none;
  flex: none;
  width: 26px;
  padding: 0;
  border: none;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

:root[data-aufbau="handy"] .streifen-punkt::before {
  content: "";
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--akzent);
}

:root[data-aufbau="handy"] .streifen-punkt.skizze::before {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

:root[data-aufbau="handy"] .streifen-punkt.hinten::before {
  background: none;
  border: 2px solid var(--schrift-matt);
}

:root[data-aufbau="handy"] .streifen-marker {
  flex: none;
  width: 24px;
  display: grid;
  place-items: center;
  touch-action: none;
  cursor: grab;
}

:root[data-aufbau="handy"] .streifen-marker[hidden] { display: none; }

:root[data-aufbau="handy"] .streifen-marker::before {
  content: "";
  width: 4px;
  height: 24px;
  border-radius: 2px;
  background: var(--akzent-warm);
}

/* Die Sprechblase: Hinweise und Fehler der Statuszeile, die Antwort auf
   einen Knopf der Leiste und der Name eines Schritts (Langdruck auf einen
   Punkt). Sie steht oben unter der Kopfzeile, wo keine Karte von unten sie
   verdeckt; der Name eines Schritts steht ueber seinem Punkt. Ein Tipp
   oder ein paar Sekunden schliessen sie. */
:root[data-aufbau="handy"] .handy-blase {
  position: fixed;
  z-index: 45;
  left: 50%;
  top: calc(var(--hoehe-kopf) + 8px);
  transform: translateX(-50%);
  display: block;
  width: max-content;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--linie-hell);
  border-radius: 12px;
  background: var(--dialog-grund);
  color: var(--schrift-hell);
  box-shadow: var(--schatten-weich);
  font-size: 13px;
  line-height: 1.35;
}

:root[data-aufbau="handy"] .handy-blase.am-streifen {
  top: auto;
  bottom: calc(var(--handy-unten) + 8px);
}

:root[data-aufbau="handy"] .handy-blase.fehler { border-color: var(--warnung); }
:root[data-aufbau="handy"] .handy-blase[hidden] { display: none; }

/* Das Mass der freien Auswahl steht ueber dem Streifen. */
:root[data-aufbau="handy"] .massanzeige {
  right: 8px;
  bottom: calc(var(--handy-unten) + 8px);
  font-size: 12px;
}

/* Waehrend ein Feature-Dialog offen ist, gehoert ihm der untere Rand. */
:root[data-aufbau="handy"]:has(#feature-dialog:not([hidden])) :is(.daumenleiste, .zeitstreifen) {
  display: none;
}

/* Eine offene Skizze am Handy (Klasse handy-skizze, gesetzt von
   js/handy-bedienung.js beim Ereignis cad-skizzenmodus): Daumenleiste,
   Streifen und Sprechblase gehen weg, die Szene reicht bis unten. Dort
   zeichnet Paket 379 seine eigene Leiste. */
:root[data-aufbau="handy"].handy-skizze :is(.daumenleiste, .zeitstreifen, .handy-blase) {
  display: none;
}

:root[data-aufbau="handy"].handy-skizze #ansicht { bottom: 0; }

/* Die Schublade AUFBAU: dieselbe Tafel mit denselben Zeilen (baum.js), am
   Handy ueber der Daumenleiste, halb oder ganz hoch (data-schublade an der
   Wurzel, js/handy-bedienung.js), beim Ziehen am Griff so hoch wie der
   Finger. Zeilen 44 Bildpunkte hoch. Lage, Breite und Hoehe vom Rechner
   (fenster.js, tafelbreite.js, tafelhoehe.js) gelten hier nicht. */
:root[data-aufbau="handy"][data-schublade] #tafel-browser {
  position: fixed;
  z-index: 21;
  top: auto;
  left: 0;
  right: 0;
  bottom: var(--handy-leiste);
  width: auto;
  height: 50%;
  max-height: none;
  display: flex;
  transform: none !important;
  border: none;
  border-top: 1px solid var(--linie-hell);
  border-radius: 16px 16px 0 0;
  background: var(--dialog-grund);
  box-shadow: var(--schatten-dialog);
  animation: handy-von-unten .18s ease-out;
}

:root[data-aufbau="handy"][data-schublade="voll"] #tafel-browser {
  height: calc(100% - var(--hoehe-kopf) - var(--handy-leiste));
}

:root[data-aufbau="handy"][data-schublade="zug"] #tafel-browser {
  height: var(--schublade-zug);
  animation: none;
}

@keyframes handy-von-unten {
  from { translate: 0 30%; opacity: .4; }
  to { translate: 0 0; opacity: 1; }
}

:root[data-aufbau="handy"] #tafel-browser .tafel-kopf {
  position: relative;
  flex: none;
  height: 44px;
  padding: 10px 16px 0;
  justify-content: center;
  border-bottom: 1px solid var(--linie);
  border-radius: 16px 16px 0 0;
  background: none;
  font-size: 11px;
  touch-action: none;
  cursor: grab;
}

:root[data-aufbau="handy"] #tafel-browser .tafel-kopf::before,
:root[data-aufbau="handy"] :is(#feature-dialog, .kontextmenue.als-karte, .dialog, .handy-karte)::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 2px;
  background: var(--linie-hell);
}

:root[data-aufbau="handy"] #tafel-browser .tafel-titel { flex: none; }

:root[data-aufbau="handy"] #tafel-browser :is(.griff, .tafel-schalter, .tafel-griff-breite,
    .tafel-griff-hoehe, .fenster-nadel) {
  display: none;
}

:root[data-aufbau="handy"] #tafel-browser .baum {
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 12px;
  overscroll-behavior: contain;
}

:root[data-aufbau="handy"] #tafel-browser .zweig {
  height: 44px;
  font-size: 15px;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

:root[data-aufbau="handy"] #tafel-browser .zweig :is(.klapp, .auge) {
  flex: none;
  min-width: 28px;
  height: 44px;
  display: grid;
  place-items: center;
}

:root[data-aufbau="handy"] #tafel-browser .zweig svg {
  width: 18px;
  height: 18px;
}

/* Die Karte Mehr: ueber der Daumenleiste, damit der Knopf Mehr sie wieder
   schliesst; je Reiter seine Gruppen, je Befehl Symbol und Wort. */
:root[data-aufbau="handy"] .handy-karte {
  position: fixed;
  z-index: 35;
  left: 0;
  right: 0;
  bottom: var(--handy-leiste);
  max-height: calc(100% - var(--hoehe-kopf) - var(--handy-leiste) - 24px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: 18px;
  border-top: 1px solid var(--linie-hell);
  border-radius: 16px 16px 0 0;
  background: var(--dialog-grund);
  color: var(--schrift-dialog);
  box-shadow: var(--schatten-dialog);
  animation: handy-von-unten .18s ease-out;
}

:root[data-aufbau="handy"] .handy-karte[hidden] { display: none; }

:root[data-aufbau="handy"] .karte-griff {
  position: absolute;
  top: 0;
  left: 50%;
  width: 88px;
  height: 18px;
  margin-left: -44px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

:root[data-aufbau="handy"] .mehr-rumpf {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 10px 8px;
}

:root[data-aufbau="handy"] .mehr-reiter-name {
  margin: 8px 4px 0;
  color: var(--schrift-matt);
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
}

:root[data-aufbau="handy"] .mehr-gruppe-name {
  margin: 6px 4px 2px;
  color: var(--schrift);
  font-size: 12px;
  font-weight: 500;
}

:root[data-aufbau="handy"] .mehr-knoepfe {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

:root[data-aufbau="handy"] .mehr-knopf {
  max-width: none;
  min-height: 56px;
  text-decoration: none;
}

:root[data-aufbau="handy"] .mehr-fuss {
  flex: none;
  display: grid;
  /* Eine Reihe, gleich breit: drei Knoepfe, fuer Gaeste vier (Einfuehrung, 380). */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 6px 10px 8px;
  border-top: 1px solid var(--linie);
}

/* Die Dialoge als Karte von unten: der Feature-Dialog (das Blatt der
   Schritte) und das Koerpermenue ohne Schleier, die Szene darueber bleibt
   zu sehen und nimmt Tipps (ein Auswahlfeld des Dialogs waehlt in der
   Szene wie am Rechner); die kleinen Dialoge (dialog.js) mit ihrem
   Schleier. Volle Breite, hoechstens halbe Hoehe, oben ein Griff. Lage aus
   fenster.js und dem Zeiger gilt hier nicht. */
:root[data-aufbau="handy"] #feature-dialog {
  position: fixed;
  z-index: 30;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-height: 50%;
  box-sizing: border-box;
  padding: 18px 12px 0;
  transform: none !important;
  border-width: 1px 0 0;
  border-radius: 16px 16px 0 0;
  font-size: 15px;
  animation: handy-von-unten .18s ease-out;
}

/* Steht die Zifferntastatur (277, z-index 55, unten mittig), rueckt die
   Karte ueber sie; die Hoehe misst js/handy-bedienung.js. */
:root[data-aufbau="handy"][data-tastatur] #feature-dialog {
  bottom: var(--handy-tastatur);
  max-height: calc(100% - var(--handy-tastatur) - var(--hoehe-kopf) - 4px);
  border-radius: 16px;
  border-width: 1px;
}

:root[data-aufbau="handy"] #feature-dialog .fenster-nadel { display: none; }

:root[data-aufbau="handy"] #feature-dialog .fd-titel {
  font-size: 17px;
  padding: 2px 4px 10px;
}

:root[data-aufbau="handy"] #feature-dialog .fd-minimieren {
  min-width: 44px;
  min-height: 32px;
  font-size: 15px;
}

:root[data-aufbau="handy"] #feature-dialog .fd-zeile {
  flex-wrap: wrap;
  min-height: 44px;
  margin: 4px 0;
}

:root[data-aufbau="handy"] #feature-dialog .fd-name {
  min-width: 96px;
  white-space: normal;
}

:root[data-aufbau="handy"] #feature-dialog :is(.fd-feld, .fd-auswahl) {
  min-height: 40px;
  box-sizing: border-box;
  padding: 6px 10px;
  font-size: 16px;
}

:root[data-aufbau="handy"] #feature-dialog .fd-x {
  min-width: 40px;
  min-height: 40px;
  font-size: 20px;
}

:root[data-aufbau="handy"] #feature-dialog .fd-knopfreihe { flex-wrap: wrap; gap: 6px; }

:root[data-aufbau="handy"] #feature-dialog .fd-knopf {
  min-height: 36px;
  padding: 4px 14px;
  border-radius: 18px;
  font-size: 14px;
}

/* Die Zellen der Paare (428b) gross genug fuer den Daumen. */
:root[data-aufbau="handy"] #feature-dialog .fd-tabelle { font-size: 14px; }
:root[data-aufbau="handy"] #feature-dialog .fd-zelle { min-height: 40px; }

:root[data-aufbau="handy"] #feature-dialog .fd-fuss {
  position: sticky;
  bottom: 0;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 8px;
  margin: 10px -12px 0;
  padding: 8px 12px 10px;
  background: var(--dialog-grund);
  border-top: 1px solid var(--linie);
}

:root[data-aufbau="handy"] #feature-dialog .fd-fuss button {
  flex: 1 1 0;
  min-height: 48px;
  border-radius: 24px;
  font-size: 16px;
}

:root[data-aufbau="handy"] .kontextmenue.als-karte {
  left: 0 !important;
  right: 0;
  top: auto !important;
  bottom: 0;
  min-width: 0;
  max-height: 50%;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: 18px 8px 10px;
  border-width: 1px 0 0;
  border-radius: 16px 16px 0 0;
  background: var(--dialog-grund);
  box-shadow: var(--schatten-dialog);
  font-size: 15px;
  white-space: normal;
  animation: handy-von-unten .18s ease-out;
}

:root[data-aufbau="handy"] .kontextmenue.als-karte .kontext-eintrag {
  min-height: 44px;
  gap: 12px;
  padding: 6px 12px;
  border-radius: 8px;
}

/* Am Handy (378) die Tupfer gross genug fuer den Daumen. */
:root[data-aufbau="handy"] .kontextmenue.als-karte .kontext-tupferreihe {
  grid-template-columns: repeat(8, 28px);
  gap: 8px;
  padding-left: 0;
}
:root[data-aufbau="handy"] .kontextmenue.als-karte .kontext-tupfer {
  width: 28px;
  height: 28px;
  line-height: 28px;
}

:root[data-aufbau="handy"] .kontextmenue.als-karte .kontext-symbol,
:root[data-aufbau="handy"] .kontextmenue.als-karte .kontext-symbol svg {
  width: 20px;
  height: 20px;
}

:root[data-aufbau="handy"] .dialog-schleier:has(> .dialog) {
  place-items: end stretch;
}

:root[data-aufbau="handy"] .dialog {
  position: relative;
  width: auto;
  max-width: none;
  max-height: 50%;
  box-sizing: border-box;
  padding-top: 14px;
  transform: none !important;
  border-width: 1px 0 0;
  border-radius: 16px 16px 0 0;
  background: var(--dialog-grund);
  animation: handy-von-unten .18s ease-out;
}

:root[data-aufbau="handy"] .dialog .dialog-rumpf {
  min-height: 0;
  overflow-y: auto;
}

:root[data-aufbau="handy"] .dialog .dialog-fuss {
  flex-wrap: wrap;
  flex-direction: row-reverse;
  justify-content: flex-start;
}

:root[data-aufbau="handy"] .dialog .dialog-fuss .knopf {
  flex: 1 1 auto;
  min-height: 48px;
  border-radius: 24px;
}

:root[data-aufbau="handy"] .dialog .dialog-zu {
  min-width: 44px;
  min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-aufbau="handy"] :is(.daumen-reihe, .handy-karte, #feature-dialog, .dialog,
      .kontextmenue.als-karte, #tafel-browser) {
    animation: none;
  }
}

/* 379 */
/* ---------- Die Skizze am Handy (Paket 379, js/handy-skizze.js)

   Nur mit dem Aufbau Handy (Paket 378: data-aufbau="handy" an html); jede
   Regel dieses Blocks haengt daran, am Rechner, am Tablet und in der Brille
   aendert sich nichts. Die Szene bleibt der ganze Bildschirm (#ansicht liegt
   fest ueber der Seite), die Zeilen liegen darueber: ueber Kopf, Band und
   Leisten (bis 20), unter den Dialogen (30 und mehr), der Zifferntastatur
   (55) und dem Vorhang (60). Jedes Fingerziel ist mindestens 44 mal 44
   Bildpunkte, Fertig und Abbrechen 48 hoch. Farben nur aus den Token; der
   gruene Knopf nimmt das Gruen der Symbole (--farbe-symbolFertig) und die
   Schrift auf dem Akzent, die in allen drei Paletten dazu passt. */

/* Die schmale Skizzenleiste unter dem Band (219) traegt am Handy nichts:
   ihre Varianten kommen per Langdruck, ihre Schalter unter "Mehr". Das
   Werkzeugsymbol am Zeiger (cursorsymbol.js) ist fuer die Maus gedacht; am
   Handy bliebe es an der letzten Beruehrung stehen, ueber der Leiste. */
:root[data-aufbau="handy"] .skizzenleiste,
:root[data-aufbau="handy"] .cursor-symbol { display: none; }

:root[data-aufbau="handy"] .hs-kopf {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 23;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 60px;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 6px;
  background: var(--tafel);
  color: var(--schrift-hell);
  border-bottom: 1px solid var(--linie-hell);
  font-family: inherit;
  user-select: none;
}

:root[data-aufbau="handy"] .hs-kopf[hidden],
:root[data-aufbau="handy"] .hs-ansicht[hidden] { display: none; }

:root[data-aufbau="handy"] .hs-abbrechen,
:root[data-aufbau="handy"] .hs-fertig {
  appearance: none;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: 48px;
  min-width: 48px;
  padding: 0 14px;
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

:root[data-aufbau="handy"] .hs-abbrechen {
  background: var(--gruppe);
  border: 1px solid var(--linie-hell);
  color: var(--schrift-hell);
}

:root[data-aufbau="handy"] .hs-fertig {
  background: var(--farbe-symbolFertig);
  border: 1px solid var(--farbe-symbolFertig);
  color: var(--schrift-auf-akzent);
}

/* Das Haekchen im gruenen Knopf: sein Gruen wird die Schrift, sonst stuende
   Gruen auf Gruen (dieselbe Regel wie am gedrueckten Knopf der
   Wuerfelreihe, 370). */
:root[data-aufbau="handy"] .hs-fertig svg { --farbe-symbolFertig: var(--schrift-auf-akzent); }

:root[data-aufbau="handy"] .hs-mitte {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

:root[data-aufbau="handy"] .hs-titel {
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Die letzte Meldung der Statuszeile, hoechstens zwei Zeilen. */
:root[data-aufbau="handy"] .hs-hinweis {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--schrift-matt);
  font-size: 11px;
  line-height: 1.3;
}

/* Unter Fertig: Drehen an/aus und Draufsicht (276, 277). */
:root[data-aufbau="handy"] .hs-ansicht {
  position: fixed;
  top: calc(68px + env(safe-area-inset-top, 0px));
  right: 8px;
  z-index: 23;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:root[data-aufbau="handy"] .hs-klein {
  appearance: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--linie-hell);
  border-radius: 22px;
  background: var(--tafel);
  color: var(--schrift-hell);
  box-shadow: var(--schatten-weich);
  cursor: pointer;
  touch-action: manipulation;
}

:root[data-aufbau="handy"] .hs-klein.aktiv {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--schrift-auf-akzent);
}

:root[data-aufbau="handy"] .hs-klein.aktiv svg { --farbe-akzent: var(--schrift-auf-akzent); }

/* Die Leiste unten: Linie, Rechteck, Kreis, Mass und Mehr, je Symbol und
   Wort. Das aktive Werkzeug leuchtet wie im Band (.werkzeug.aktiv). */
:root[data-aufbau="handy"] .hs-leiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 23;
  display: flex;
  gap: 4px;
  box-sizing: border-box;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--tafel);
  border-top: 1px solid var(--linie-hell);
  user-select: none;
}

:root[data-aufbau="handy"] .hs-leiste[hidden],
:root[data-aufbau="handy"] .hs-werkzeug[hidden],
:root[data-aufbau="handy"] .hs-varianten[hidden],
:root[data-aufbau="handy"] .hs-karte[hidden],
:root[data-aufbau="handy"] .hs-schleier[hidden] { display: none; }

:root[data-aufbau="handy"] .hs-werkzeug {
  appearance: none;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 56px;
  padding: 4px 2px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  color: var(--schrift-hell);
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

:root[data-aufbau="handy"] .hs-werkzeug.aktiv {
  background: var(--flaeche-hover);
  border-color: var(--akzent);
}

:root[data-aufbau="handy"] .hs-werkzeug .hs-wort {
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
}

/* Die Reihe der Varianten ueber der Leiste (Langdruck, 500 ms). Wird sie
   breiter als das Handy, bricht sie um und waechst nach oben. */
:root[data-aufbau="handy"] .hs-varianten {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: calc(77px + env(safe-area-inset-bottom, 0px));
  z-index: 24;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  box-sizing: border-box;
  padding: 6px;
  background: var(--dialog-grund);
  color: var(--schrift-dialog);
  border: 1px solid var(--linie-hell);
  border-radius: 12px;
  box-shadow: var(--schatten-dialog);
  user-select: none;
}

:root[data-aufbau="handy"] .hs-reihen-wort {
  flex: none;
  padding: 0 4px;
  color: var(--schrift-matt);
  font-size: 11px;
}

:root[data-aufbau="handy"] .hs-strich {
  flex: none;
  align-self: stretch;
  width: 1px;
  margin: 4px 2px;
  background: var(--linie-hell);
}

:root[data-aufbau="handy"] .hs-option {
  appearance: none;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-sizing: border-box;
  min-width: 56px;
  max-width: 84px;
  min-height: 52px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 10.5px;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}

:root[data-aufbau="handy"] .hs-option.aktiv {
  background: var(--flaeche-hover);
  border-color: var(--akzent);
}

/* Der Schleier hinter Reihe und Karte: ein Tipp daneben schliesst sie.
   Ueber der Reihe ist er durchsichtig, unter der Karte dunkel. */
:root[data-aufbau="handy"] .hs-schleier {
  position: fixed;
  inset: 0;
  z-index: 22;
  background: transparent;
}

:root[data-aufbau="handy"] .hs-schleier.dunkel { background: var(--schleier); }

/* Die Karte "Mehr" von unten, ueber der Leiste: die uebrigen Befehle des
   Reiters SKIZZE (Stufe 279, Reihenfolge des Bandes) und am Ende die
   sieben Schalter. Sie rollt in sich. */
:root[data-aufbau="handy"] .hs-karte {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(69px + env(safe-area-inset-bottom, 0px));
  z-index: 24;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-height: calc(100% - 69px - 69px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  background: var(--dialog-grund);
  color: var(--schrift-dialog);
  border-top: 1px solid var(--linie-hell);
  border-radius: 14px 14px 0 0;
  box-shadow: var(--schatten-dialog);
  user-select: none;
}

:root[data-aufbau="handy"] .hs-karte-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 0 16px;
}

:root[data-aufbau="handy"] .hs-karte-titel {
  font-size: 15px;
  font-weight: 600;
}

:root[data-aufbau="handy"] .hs-zu { box-shadow: none; }

:root[data-aufbau="handy"] .hs-karte-rumpf {
  overflow-y: auto;
  padding: 0 8px 12px;
}

:root[data-aufbau="handy"] .hs-gruppe {
  margin: 10px 8px 4px;
  color: var(--schrift-matt);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}

:root[data-aufbau="handy"] .hs-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 4px;
}

:root[data-aufbau="handy"] .hs-eintrag {
  min-height: 60px;
  color: var(--schrift-dialog);
}

:root[data-aufbau="handy"] .hs-eintrag .hs-wort {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  white-space: normal;
}

:root[data-aufbau="handy"] .hs-schalterzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 4px;
}

:root[data-aufbau="handy"] .hs-schalter {
  appearance: none;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--linie-hell);
  border-radius: 22px;
  background: var(--gruppe);
  color: var(--schrift-hell);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  touch-action: manipulation;
}

:root[data-aufbau="handy"] .hs-schalter.aktiv {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--schrift-auf-akzent);
}

/* Steht die Zifferntastatur (277, z-index 55), rueckt die Leiste nicht: sie
   bleibt an ihrem Platz, verdeckt und ohne Tipp, bis die Tastatur geht. */
:root[data-aufbau="handy"] .hs-leiste.hs-unter-tastatur {
  visibility: hidden;
  pointer-events: none;
}

/* 380 */
/* ---------- Die kurze Einfuehrung am Handy (Paket 380, js/einfuehrung.js)

   Dieselbe Einfuehrung, dasselbe Schild (Paket 348). Am Handy laeuft die
   kurze Fassung (Klasse einf-handy an ihrer Wurzel), und das Schild steht
   als Sprechblase fest ueber der Daumenleiste und dem Punktestreifen, in
   der Breite des Bildes: oben der Satz in hoechstens zwei Zeilen, darunter
   die Zahl, Ueberspringen und Weiter, beide mindestens 44 mal 44. Der
   Rahmen um das Ziel ist der aus Paket 360. Jede Regel haengt am Aufbau
   Handy (378); am Rechner, am Tablet und in der Brille aendert sich
   nichts. Farben nur aus den Token. */

:root[data-aufbau="handy"] .einfuehrung.einf-handy .einf-schild {
  left: 8px;
  right: 8px;
  top: auto;
  bottom: calc(var(--handy-unten) + 8px);
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "satz satz satz" "zahl weg weiter";
  align-items: center;
  gap: 6px 8px;
  padding: 10px 10px 8px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.35;
  white-space: normal;
}

:root[data-aufbau="handy"] .einf-handy .einf-satz {
  grid-area: satz;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

:root[data-aufbau="handy"] .einf-handy .einf-zahl { grid-area: zahl; }
:root[data-aufbau="handy"] .einf-handy .einf-weg { grid-area: weg; }

:root[data-aufbau="handy"] .einf-handy .einf-knopf {
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  font-size: 15px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:root[data-aufbau="handy"] .einf-handy .einf-weiter {
  grid-area: weiter;
  border-color: var(--akzent);
  background: var(--akzent);
  color: var(--schrift-auf-akzent);
  font-weight: 600;
}

/* 411a */
/* ---------- Die Projektuebersicht (Paket 411a, Vertrag 6k-3 "Ordner (411a)") ----------
   Das Fenster der Ablage (web/js/projekte.js): links der Ordnerbaum, rechts
   Pfadzeile, Knopfleiste und die Kacheln in drei Ansichten (Liste, Kacheln,
   grosse Bilder). Es ersetzt den Ablage-Dialog von Paket 68. Alle Farben
   sind Token des Erscheinungsbilds (Paket 50): hell und dunkel ohne eine
   Regel mehr. Am Handy (Aufbau aus 378) fuellt es den Bildschirm, der Baum
   wird eine Klappleiste, die Kacheln eine Spalte, die Knoepfe fingergross. */

.kopf-ordner {
  color: var(--schrift-matt);
  margin-right: -3px;
}

#projekte {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1120px, 94vw / var(--groesse));
  height: min(720px, 88vh / var(--groesse));
  background: var(--dialog-grund);
  border: 1px solid var(--linie-hell);
  border-radius: 6px;
  color: var(--schrift-dialog);
  font-size: 12px;
  box-shadow: var(--schatten-dialog);
  overflow: hidden;
  outline: none;
}

#projekte button,
#projekte input,
#projekte select {
  font: inherit;
  color: inherit;
}

#projekte .pj-nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Der Kopf: Titel, Suche, Sortierung, die drei Ansichten. */
#projekte .pj-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--dialog-kopf);
  border-bottom: 1px solid var(--linie);
}

#projekte .pj-titel {
  font-weight: 600;
  font-size: 13px;
  margin-right: auto;
}

#projekte .pj-klappe {
  display: none;
}

#projekte :is(.pj-suche, .pj-sortierung, .pj-feld, .pj-namefeld) {
  background: var(--feld);
  border: 1px solid var(--feld-rand);
  border-radius: 4px;
  padding: 4px 7px;
}

#projekte .pj-suche {
  width: 220px;
}

#projekte :is(.pj-suche, .pj-feld, .pj-namefeld):focus {
  border-color: var(--akzent);
  outline: none;
}

#projekte .pj-ansichten {
  display: inline-flex;
  border: 1px solid var(--feld-rand);
  border-radius: 4px;
  overflow: hidden;
}

#projekte .pj-ansicht {
  display: grid;
  place-items: center;
  background: none;
  border: none;
  padding: 4px 7px;
  color: var(--schrift-gedaempft);
  cursor: pointer;
}

#projekte .pj-ansicht:hover {
  color: var(--schrift-dialog);
}

#projekte .pj-ansicht[aria-pressed="true"] {
  background: var(--auswahl);
  color: var(--schrift-hell);
}

#projekte .pj-zu {
  background: none;
  border: none;
  color: var(--schrift-gedaempft);
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

#projekte .pj-zu:hover {
  color: var(--schrift-dialog);
}

/* Der Rumpf: Baum links, die Ansicht rechts. */
#projekte .pj-rumpf {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
}

#projekte .pj-baum {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--tafel);
  border-right: 1px solid var(--linie);
}

#projekte .pj-baum-liste,
#projekte .pj-baum-liste ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#projekte .pj-baum-liste {
  flex: 1;
  overflow: auto;
  padding: 6px 0;
}

#projekte .pj-knoten {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 1px 4px;
  padding: 3px 8px 3px calc(4px + var(--tiefe, 0) * 14px);
  border-radius: 4px;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
}

#projekte .pj-knoten:hover {
  background: var(--zeile-hover);
}

#projekte .pj-knoten:focus-visible {
  box-shadow: inset 0 0 0 1px var(--akzent);
}

#projekte .pj-knoten.pj-hier {
  background: var(--auswahl);
  color: var(--schrift-hell);
  font-weight: 600;
}

#projekte .pj-pfeil {
  flex: none;
  width: 14px;
  padding: 0;
  background: none;
  border: none;
  color: var(--schrift-gedaempft);
  font-size: 10px;
  cursor: pointer;
}

#projekte .pj-knoten-symbol {
  display: grid;
  color: var(--akzent);
}

#projekte .pj-knoten.pj-hier .pj-knoten-symbol {
  color: inherit;
}

#projekte .pj-knoten-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Wohin eine gezogene Kachel fallen darf. */
#projekte .pj-ziel {
  outline: 2px dashed var(--akzent);
  outline-offset: -2px;
}

#projekte .pj-belegung {
  display: grid;
  gap: 5px;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--linie);
  color: var(--schrift-gedaempft);
}

#projekte .pj-balken {
  height: 6px;
  background: var(--feld);
  border: 1px solid var(--feld-rand);
  border-radius: 3px;
  overflow: hidden;
}

#projekte .pj-fuellung {
  height: 100%;
  background: var(--akzent);
}

#projekte .pj-fuellung.pj-voll {
  background: var(--warnung);
}

/* Die rechte Seite: Pfadzeile, Knopfleiste, Inhalt. */
#projekte .pj-haupt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

#projekte .pj-pfadzeile {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 4px;
}

#projekte .pj-hoch {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 24px;
  background: var(--flaeche-hover);
  border: 1px solid var(--linie-hell);
  border-radius: 4px;
  cursor: pointer;
}

#projekte .pj-hoch:hover {
  border-color: var(--akzent);
}

#projekte .pj-stufen {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  font-size: 14px;
}

#projekte .pj-stufe {
  background: none;
  border: none;
  border-radius: 3px;
  padding: 2px 4px;
  cursor: pointer;
}

#projekte .pj-stufe:hover {
  background: var(--zeile-hover);
}

#projekte .pj-stufe[aria-current] {
  font-weight: 600;
}

#projekte :is(.pj-trenner, .pj-zahl, .pj-stufe-text) {
  color: var(--schrift-gedaempft);
}

#projekte .pj-zahl {
  white-space: nowrap;
}

#projekte .pj-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 12px 8px;
  border-bottom: 1px solid var(--linie);
}

#projekte .pj-tat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--flaeche-hover);
  border: 1px solid var(--linie-hell);
  border-radius: 4px;
  cursor: pointer;
}

#projekte .pj-tat:hover {
  border-color: var(--akzent);
}

#projekte .pj-tat svg {
  color: var(--akzent);
}

#projekte .pj-inhalt {
  flex: 1;
  min-height: 0;
  overflow: auto;
  align-content: start;
  padding: 10px 12px 14px;
}

#projekte .pj-leer {
  grid-column: 1 / -1;
  padding: 28px 8px;
  color: var(--schrift-gedaempft);
  text-align: center;
}

/* Die Kachel, wie sie in allen drei Ansichten heisst. */
#projekte .pj-kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--feld);
  border: 1px solid var(--feld-rand);
  border-radius: 6px;
  overflow: hidden;
  cursor: default;
  outline: none;
}

#projekte .pj-kachel:hover {
  background: var(--zeile-hover);
  border-color: var(--linie-hell);
}

#projekte .pj-kachel:focus-visible {
  box-shadow: 0 0 0 2px var(--akzent);
}

#projekte .pj-kachel.pj-gewaehlt {
  border-color: var(--akzent);
  box-shadow: inset 0 0 0 1px var(--akzent);
}

#projekte .pj-kachel.pj-gezogen {
  opacity: 0.5;
}

#projekte .pj-bild {
  position: relative;
  display: grid;
  place-items: center;
  height: 92px;
  background: var(--grund);
  color: var(--schrift-gedaempft);
}

#projekte .pj-kachel[data-art="ordner"] .pj-bild {
  color: var(--akzent);
}

#projekte .pj-vorschau {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

#projekte .pj-mit-bild .pj-vorschau {
  opacity: 1;
}

#projekte .pj-mit-bild > svg {
  visibility: hidden;
}

#projekte .pj-text {
  min-width: 0;
  padding: 6px 30px 7px 8px;
}

#projekte .pj-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

#projekte .pj-endung {
  font-weight: 400;
  color: var(--schrift-gedaempft);
}

#projekte :is(.pj-ort, .pj-angaben) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--schrift-gedaempft);
  font-size: 11px;
}

#projekte .pj-angaben {
  display: flex;
  gap: 8px;
}

#projekte .pj-kacheln :is(.pj-groesse, .pj-staende),
#projekte .pj-bilder .pj-staende {
  display: none;
}

#projekte .pj-hinweis {
  color: var(--akzent-warm);
  font-weight: 400;
}

#projekte .pj-punkte {
  position: absolute;
  right: 4px;
  bottom: 5px;
  width: 24px;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--schrift-gedaempft);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

#projekte .pj-punkte:hover {
  background: var(--flaeche-hover);
  color: var(--schrift-dialog);
}

#projekte .pj-namefeld {
  width: 100%;
  font-weight: 400;
}

/* Kacheln: ein Raster mit kleinem Vorschaubild. */
#projekte .pj-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

/* Grosse Bilder: dasselbe Raster mit groesserem Bild. */
#projekte .pj-bilder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

#projekte .pj-bilder .pj-bild {
  height: 176px;
}

/* Liste: eine Zeile je Eintrag, jede Angabe eine Spalte. */
#projekte .pj-liste {
  display: flex;
  flex-direction: column;
}

#projekte :is(.pj-listenkopf, .pj-liste .pj-kachel) {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 128px 116px 70px 30px;
  align-items: center;
  column-gap: 8px;
}

#projekte .pj-listenkopf {
  padding: 0 0 5px;
  border-bottom: 1px solid var(--linie-hell);
  color: var(--schrift-gedaempft);
  font-weight: 600;
}

#projekte .pj-liste .pj-kachel {
  min-height: 30px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--feld-rand);
  border-radius: 0;
}

#projekte .pj-liste .pj-kachel:hover {
  background: var(--zeile-hover);
}

#projekte .pj-liste .pj-bild {
  height: auto;
  background: none;
}

#projekte .pj-liste :is(.pj-text, .pj-angaben) {
  display: contents;
}

#projekte .pj-liste .pj-name {
  padding: 5px 0;
}

#projekte .pj-liste .pj-ort,
#projekte .pj-liste .pj-hinweis {
  margin-left: 8px;
  font-size: 11px;
}

#projekte .pj-liste :is(.pj-zeit, .pj-groesse, .pj-staende) {
  font-size: 12px;
}

#projekte .pj-liste .pj-punkte {
  position: static;
  justify-self: end;
}

/* Der Fuss: Oeffnen, oder der Name fuer Speichern unter. */
#projekte .pj-fuss {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--dialog-kopf);
  border-top: 1px solid var(--linie);
}

#projekte .pj-fuss-ort {
  color: var(--schrift-gedaempft);
  white-space: nowrap;
}

#projekte[data-modus="oeffnen"] .pj-fuss-ort {
  margin-right: auto;
}

#projekte .pj-feld {
  flex: 1;
  min-width: 0;
}

#projekte .pj-ok {
  padding: 6px 18px;
  background: var(--akzent);
  border: none;
  border-radius: 4px;
  color: var(--schrift-auf-akzent);
  font-weight: 600;
  cursor: pointer;
}

#projekte .pj-ok:hover {
  background: var(--akzent-hover);
}

/* Die Tafeln im Fenster: Export, Verschieben, Verlauf. */
#projekte .pj-decke {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: var(--schleier);
}

#projekte .pj-tafel {
  display: flex;
  flex-direction: column;
  width: min(460px, 92%);
  max-height: 84%;
  background: var(--dialog-grund);
  border: 1px solid var(--linie-hell);
  border-radius: 6px;
  box-shadow: var(--schatten-stark);
  overflow: hidden;
}

#projekte .pj-tafel-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--dialog-kopf);
  font-weight: 600;
}

#projekte .pj-tafel-rumpf {
  display: grid;
  gap: 8px;
  padding: 10px 12px 12px;
  overflow: auto;
}

#projekte .pj-satz {
  margin: 0;
  color: var(--schrift-gedaempft);
}

#projekte .pj-form {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--feld-rand);
  border-radius: 5px;
  cursor: pointer;
}

#projekte .pj-form:has(input:checked) {
  border-color: var(--akzent);
  background: var(--feld);
}

#projekte .pj-form input {
  margin-top: 2px;
  accent-color: var(--akzent);
}

#projekte .pj-form-text {
  display: grid;
  gap: 2px;
}

#projekte .pj-form-satz {
  color: var(--schrift-gedaempft);
}

#projekte .pj-tafel-fuss {
  display: flex;
  justify-content: flex-end;
}

#projekte .pj-ziele {
  display: grid;
  gap: 1px;
  max-height: 320px;
  overflow: auto;
}

#projekte .pj-ziel-knopf {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px calc(8px + var(--tiefe, 0) * 14px);
  background: none;
  border: none;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
}

#projekte .pj-ziel-knopf:hover {
  background: var(--zeile-hover);
}

#projekte .pj-ziel-knopf svg {
  color: var(--akzent);
}

#projekte .pj-ziel-knopf.pj-hier {
  color: var(--schrift-gedaempft);
  cursor: default;
}

#projekte .pj-ziel-hier {
  margin-left: 6px;
  font-size: 11px;
}

#projekte .pj-stand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--feld-rand);
}

#projekte :is(.pj-stand-schritte, .pj-stand-groesse) {
  color: var(--schrift-gedaempft);
}

#projekte .pj-stand-tat {
  background: none;
  border: none;
  color: var(--akzent);
  text-decoration: underline;
  cursor: pointer;
}

/* Am Handy: der ganze Bildschirm, der Baum als Klappleiste, eine Spalte,
   Knoepfe in Fingergroesse (Muster aus 378). */
:root[data-aufbau="handy"] #projekte {
  width: calc(100vw / var(--groesse));
  height: 100dvh;
  border: none;
  border-radius: 0;
  font-size: 14px;
}

:root[data-aufbau="handy"] #projekte .pj-kopf {
  flex-wrap: wrap;
  row-gap: 6px;
}

:root[data-aufbau="handy"] #projekte .pj-klappe {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: var(--flaeche-hover);
  border: 1px solid var(--linie-hell);
  border-radius: 6px;
}

:root[data-aufbau="handy"] #projekte .pj-titel {
  display: none;
}

:root[data-aufbau="handy"] #projekte .pj-zu {
  order: 4;
  margin-left: auto;
}

:root[data-aufbau="handy"] #projekte .pj-suche {
  order: 5;
  flex: 1 1 200px;
  width: auto;
  min-width: 0;
}

:root[data-aufbau="handy"] #projekte .pj-sortierung {
  order: 6;
}

:root[data-aufbau="handy"] #projekte .pj-bild {
  height: 76px;
}

:root[data-aufbau="handy"] #projekte .pj-bilder .pj-bild {
  height: 150px;
}

:root[data-aufbau="handy"] #projekte .pj-rumpf {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
}

:root[data-aufbau="handy"] #projekte .pj-baum {
  display: none;
}

:root[data-aufbau="handy"] #projekte.pj-baum-offen .pj-baum {
  display: flex;
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  max-height: 72%;
  border-right: none;
  border-bottom: 1px solid var(--linie-hell);
  box-shadow: var(--schatten-stark);
}

:root[data-aufbau="handy"] #projekte :is(.pj-kacheln, .pj-bilder) {
  grid-template-columns: minmax(0, 1fr);
}

:root[data-aufbau="handy"] #projekte :is(.pj-tat, .pj-ok, .pj-klappe, .pj-zu, .pj-ansicht,
  .pj-hoch, .pj-punkte, .pj-stufe, .pj-sortierung, .pj-suche, .pj-feld, .pj-namefeld,
  .pj-knoten, .pj-ziel-knopf, .pj-stand-tat) {
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:root[data-aufbau="handy"] #projekte .pj-punkte {
  width: 44px;
  height: 44px;
  right: 2px;
  bottom: 2px;
}

:root[data-aufbau="handy"] #projekte .pj-text {
  padding-right: 52px;
}

:root[data-aufbau="handy"] #projekte .pj-listenkopf {
  display: none;
}

:root[data-aufbau="handy"] #projekte .pj-liste .pj-kachel {
  grid-template-columns: 26px minmax(0, 1fr) auto 44px;
}

:root[data-aufbau="handy"] #projekte .pj-liste :is(.pj-groesse, .pj-staende) {
  display: none;
}

:root[data-aufbau="handy"] #projekte[data-modus="oeffnen"] .pj-fuss-ort {
  display: none;
}

:root[data-aufbau="handy"] #projekte .pj-ok {
  margin-left: auto;
}

/* 414: die 3D-Vorschau einer Kachel (web/js/vorschau3d.js). Der Wuerfel
   oben rechts im Bild holt das grobe Netz; die Kachel waechst dann ueber
   die ganze Zeile, und der Zeichner liegt ueber ihrem Bild. Nur Token des
   Erscheinungsbilds, hell und dunkel ohne eine Regel mehr. */
#projekte .pj-3d-knopf {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 28px;
  height: 26px;
  padding: 0;
  background: var(--feld);
  border: 1px solid var(--feld-rand);
  border-radius: 4px;
  color: var(--schrift-gedaempft);
  cursor: pointer;
}

#projekte .pj-3d-knopf:hover,
#projekte .pj-3d-offen .pj-3d-knopf {
  border-color: var(--akzent);
  color: var(--akzent);
}

/* Die offene Kachel nimmt die ganze Zeile. Die Zeilen des Rasters sind so
   hoch wie ihr Inhalt: das Raster hat eine feste Hoehe, und ohne diese
   Regel drueckte es seine Zeilen zusammen, sobald mehr Kacheln da sind,
   als in das Fenster passen (gemessen am Handy mit vier Kacheln: Bild 64
   statt 76 Bildpunkte, die offene Kachel 64 statt 300); dann rollt die
   Liste, wie sie soll. */
#projekte :is(.pj-kacheln, .pj-bilder) {
  grid-auto-rows: max-content;
}

#projekte .pj-kachel.pj-3d-offen {
  grid-column: 1 / -1;
}

#projekte .pj-kachel.pj-3d-offen .pj-bild {
  flex-shrink: 0;
  height: 300px;
}

#projekte .pj-bilder .pj-kachel.pj-3d-offen .pj-bild {
  height: 420px;
}

#projekte .pj-3d {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--grund);
}

#projekte .pj-3d-buehne {
  position: absolute;
  inset: 0;
}

#projekte .pj-3d-leinwand {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

#projekte .pj-3d-leinwand:active {
  cursor: grabbing;
}

#projekte .pj-3d-satz {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 12px 40px;
  color: var(--schrift-gedaempft);
  font-size: 12px;
  text-align: center;
}

#projekte .pj-3d-satz[hidden] {
  display: none;
}

#projekte .pj-3d-fehler {
  color: var(--akzent-warm);
}

#projekte .pj-3d-knoepfe {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 1;
  display: flex;
  gap: 6px;
}

#projekte .pj-3d-knoepfe button {
  padding: 4px 12px;
  background: var(--feld);
  border: 1px solid var(--feld-rand);
  border-radius: 4px;
  color: var(--schrift-dialog);
  cursor: pointer;
}

#projekte .pj-3d-knoepfe .pj-3d-oeffnen {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--schrift-auf-akzent);
  font-weight: 600;
}

#projekte .pj-3d-knoepfe button:hover {
  border-color: var(--akzent);
}

#projekte .pj-3d-knoepfe .pj-3d-oeffnen:hover {
  background: var(--akzent-hover);
}

:root[data-aufbau="handy"] #projekte :is(.pj-3d-knopf, .pj-3d-knoepfe button) {
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:root[data-aufbau="handy"] #projekte .pj-kachel.pj-3d-offen .pj-bild {
  height: 300px;
}

/* 415 */
/* ---------- Der Knopf Projekte links vom Band (Paket 415, Vertrag 6ac) ----------
   Kostja 2026-10-11 mit einem Bild des Bandes: der leere Platz links vom
   Band (vor FORMGEBEN, ueber dem AUFBAU) wird der Hauptknopf "Projekte",
   "richtig ein bisschen groesser". Er fuellt die Ecke aus der Breite des
   Platzes (.bereich-platz, 96 Bildpunkte, und derselbe Einzug der
   Reiterleiste) und der Hoehe von Reitern und Band zusammen, steht damit
   auf jedem Reiter, und der Ordner mit dem Wort darunter ist groesser als
   jeder Bandknopf (30 statt 26 Bildpunkte). Gebaut von js/projekte-knopf.js
   am body, darum fest an seinem Platz und mit eigener Stapelung: ueber
   Reitern und Band (z-index 20), bei offener Uebersicht ueber ihrem
   Schleier (40), damit der zweite Klick ihn trifft. Gesperrt (Gast, Raum
   SKIZZE) blass wie ein gesperrter Wert im Dialog, klickbar mit dem Satz.
   Nur Token des Erscheinungsbilds; die Groesse der Bedienung (361) nimmt
   ihn ueber die Liste mit zoom mit. Am Handy (378) steht er nicht im Bild:
   dort ist "Projekte" der erste Knopf der Karte Mehr. */

.projekte-knopf {
  position: fixed;
  top: var(--hoehe-kopf);
  left: 0;
  z-index: 21;
  box-sizing: border-box;
  width: 96px;
  height: calc(var(--hoehe-reiter) + var(--hoehe-band));
  margin: 0;
  padding: 6px 4px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  appearance: none;
  background: var(--leiste);
  border: 0;
  border-right: 1px solid var(--linie-hell);
  border-bottom: 1px solid var(--linie);
  color: var(--schrift-hell);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  cursor: pointer;
}

.projekte-knopf svg {
  display: block;
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--akzent);
}

.projekte-knopf .projekte-wort {
  line-height: 1;
  white-space: nowrap;
}

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

.projekte-knopf:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: -3px;
}

/* Offen: die Uebersicht steht, der Knopf darueber und gedrueckt, mit dem
   Strich in der Akzentfarbe wie der offene Reiter. */
.projekte-knopf.offen {
  z-index: 41;
  background: var(--flaeche-hover);
  box-shadow: inset 0 -2px 0 var(--akzent);
}

/* Gesperrt: blass, ohne Hand, der Grund im Tooltip (Muster
   dialog-sperren.js); der Klick sagt den Satz. */
.projekte-knopf.gesperrt {
  cursor: default;
}

.projekte-knopf.gesperrt :is(svg, .projekte-wort) {
  opacity: .45;
  filter: grayscale(1);
}

.projekte-knopf.gesperrt:hover {
  background: var(--leiste);
}

:root[data-aufbau="handy"] .projekte-knopf {
  display: none;
}

/* Am Handy: "Projekte" gross und zuerst in der Karte Mehr
   (handy-bedienung.js, mehrKopf), eine Zeile ueber die ganze Breite. */
:root[data-aufbau="handy"] .mehr-kopf {
  flex: none;
  padding: 2px 10px 6px;
  border-bottom: 1px solid var(--linie);
}

:root[data-aufbau="handy"] .daumen-knopf.mehr-projekte {
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  max-width: none;
  min-height: 56px;
  padding: 6px 14px;
  background: var(--flaeche-hover);
  color: var(--schrift-hell);
  font-size: 15px;
  font-weight: 600;
}

:root[data-aufbau="handy"] .daumen-knopf.mehr-projekte svg {
  width: 30px;
  height: 30px;
  color: var(--akzent);
}

:root[data-aufbau="handy"] .daumen-knopf.mehr-projekte.gesperrt :is(svg, .daumen-wort) {
  opacity: .45;
  filter: grayscale(1);
}

/* 414b: das Vorschaubild einer Kachel wird gemalt (web/js/vorschaubild.js):
   ein schmaler Balken am unteren Rand des Bildes, der hin und her laeuft. */
#projekte .pj-bild-fortschritt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  overflow: hidden;
  background: var(--feld-rand);
}

#projekte .pj-bild-fortschritt::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  background: var(--akzent);
  animation: pj-bild-malt 1.1s ease-in-out infinite alternate;
}

@keyframes pj-bild-malt {
  from { left: 0; }
  to { left: 70%; }
}

@media (prefers-reduced-motion: reduce) {
  #projekte .pj-bild-fortschritt::after {
    animation: none;
    width: 100%;
    opacity: 0.6;
  }
}

/* 429 */
/* ---------- Die Toene der Gruppen und die Bedienung B (Paket 429) ----------
   Kostja 2026-10-15: "Zeichnen, Bearbeiten und Beziehung, also all diese
   unterschiedlichen Kategorien einmal leicht in der Farbe wechseln, dass man
   farblich sofort erkennt, was wozu gehoert", dazu die Bedienung B: "Was ist,
   wenn wir Zeichnen, Bearbeiten, Beziehungen quasi als drei Button machen?"

   DER TON. data-ton an einer Gruppe (band.js, handy-bedienung.js,
   handy-skizze.js) nennt ihren Ton aus der einen Zuordnung (befehle.js,
   GRUPPEN_TON); hier wird er zu --ton, dem Token aus farben.js (TOENE, je
   Erscheinungsbild). Vor dem ersten Anwenden der Farben gilt die Schrift.
   Leicht und nicht bunt: im Ton stehen nur die Striche der Symbole (ihre
   Schriftfarbe; Blau, Warm, Rot und Gruen der Symbole bleiben) und eine
   feine Kante. Gewaehlt und aktiv bleibt das Blau der Akzentfarbe.

   BEDIENUNG B (#band.band-b, nur auf der Teststufe): je Gruppe ein Knopf
   .b-knopf mit Bild, Namen und dem gewaehlten Werkzeug klein darunter; die
   Karte .b-karte darunter mit den Kacheln (dieselbe Gestalt wie die Karte
   Mehr am Handy, 378: Bild und Wort, 56 Bildpunkte hoch). Die Karte liegt
   fest am Fenster und traegt den Zoom der Groesse der Bedienung (361) mit
   dem Band; ihre Lage setzt band.js (karteLegen). Der Schalter A/B
   (.kopf-ab) hat die Huelle und die Taste des Schalters hell/dunkel. */

[data-ton="zeichnen"] { --ton: var(--farbe-tonZeichnen, var(--schrift)); }
[data-ton="bearbeiten"] { --ton: var(--farbe-tonBearbeiten, var(--schrift)); }
[data-ton="beziehen"] { --ton: var(--farbe-tonBeziehen, var(--schrift)); }
[data-ton="werte"] { --ton: var(--farbe-tonWerte, var(--schrift)); }
[data-ton="datei"] { --ton: var(--farbe-tonDatei, var(--schrift)); }
[data-ton="neutral"] { --ton: var(--farbe-tonNeutral, var(--schrift)); }

/* Bedienung A: die Striche der Symbole im Ton der Gruppe, die Gruppe leicht
   unterlegt und zwischen Knoepfen und Gruppenname eine feine Kante in ihrem
   Ton (ohne Platz zu nehmen; die Unterkante der Gruppe schneidet das Band
   ab). Neutral bleibt ohne beides, wie vor 429. */
.gruppe[data-ton] .werkzeug {
  color: var(--ton);
}

.gruppe[data-ton]:not([data-ton="neutral"]) {
  background: color-mix(in srgb, var(--ton) 7%, transparent);
}

.gruppe[data-ton]:not([data-ton="neutral"]) .gruppe-name {
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--ton) 60%, transparent);
}

/* Bedienung B: die Gruppen-Knoepfe im Band. */
.band.band-b {
  align-items: center;
  gap: 6px;
  padding: 0 8px;
}

.band-b .b-gruppe {
  flex: none;
  display: flex;
  align-items: center;
}

/* Wo der Reiter FORM von FORMGEBEN zu UMFORMEN wechselt. */
.band-b .b-gruppe.b-neuer-abschnitt {
  margin-left: 6px;
  padding-left: 12px;
  border-left: 2px solid var(--linie-hell);
}

.band-b .b-knopf {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-width: 44px;
  height: 48px;
  padding: 4px 10px 4px 8px;
  border: 1px solid color-mix(in srgb, var(--ton) 45%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ton) 10%, transparent);
  color: var(--ton);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.band-b .b-knopf:hover {
  background: color-mix(in srgb, var(--ton) 16%, var(--flaeche-hover));
}

.band-b .b-knopf svg {
  flex: none;
  width: 26px;
  height: 26px;
}

.band-b .b-worte {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.band-b .b-name {
  color: var(--schrift-hell);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.band-b .b-wahl {
  max-width: 130px;
  overflow: hidden;
  color: var(--akzent);
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.band-b .b-wahl:empty { display: none; }

/* Ein Knopf mit Karte zeigt es mit einem kleinen Dreieck. */
.band-b .b-knopf:not(.b-direkt)::after {
  content: "";
  flex: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--schrift-matt);
}

.band-b .b-knopf[aria-expanded="true"] {
  background: color-mix(in srgb, var(--ton) 18%, var(--flaeche-hover));
}

.band-b .b-knopf[aria-expanded="true"]::after {
  border-top: 0;
  border-bottom: 5px solid var(--schrift-matt);
}

/* Gewaehlt: ein Werkzeug der Gruppe ist an, oder der direkte Knopf. */
.band-b .b-knopf.hat-wahl,
.band-b .b-direkt.aktiv {
  border-color: var(--akzent);
  box-shadow: inset 0 0 0 1px var(--akzent);
}

/* Der Weg aus der Skizze behaelt seinen warmen Rand. */
.band-b .b-direkt[data-befehl="fertig"] {
  border-color: var(--akzent-warm);
  background: var(--flaeche-hover);
}

/* Die Karte einer Gruppe. */
.band-b .b-karte {
  position: fixed;
  z-index: 30;
  box-sizing: border-box;
  max-width: calc(100vw / var(--groesse) - 16px);
  padding: 8px 10px 10px;
  border: 1px solid var(--linie-hell);
  border-top: 3px solid var(--ton);
  border-radius: 12px;
  background: var(--dialog-grund);
  color: var(--schrift-dialog);
  box-shadow: var(--schatten-dialog);
}

.band-b .b-karte[hidden] { display: none; }

.band-b .b-karte-kopf {
  margin: 0 4px 6px;
  color: var(--schrift);
  font-size: 12px;
  font-weight: 600;
}

.band-b .b-kacheln {
  display: grid;
  grid-template-columns: repeat(4, 84px);
  gap: 4px;
}

.band-b .b-kacheln[data-spalten="1"] { grid-template-columns: 84px; }
.band-b .b-kacheln[data-spalten="2"] { grid-template-columns: repeat(2, 84px); }
.band-b .b-kacheln[data-spalten="3"] { grid-template-columns: repeat(3, 84px); }

.band-b .b-kachel {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 56px;
  padding: 4px 2px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  color: var(--ton);
  font: inherit;
  font-size: 11px;
  line-height: 1.15;
  cursor: pointer;
}

.band-b .b-kachel svg {
  flex: none;
  width: 24px;
  height: 24px;
}

.band-b .b-kachel .daumen-wort {
  max-width: 100%;
  color: var(--schrift);
  text-align: center;
  overflow-wrap: anywhere;
}

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

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

/* Die Karte Mehr am Handy (378) und die Karte der Skizze am Handy (379):
   dieselben Gruppen, derselbe Ton, als Bild der Knoepfe und Kante am
   Gruppennamen. */
:root[data-aufbau="handy"] .mehr-knoepfe[data-ton] .daumen-knopf svg,
:root[data-aufbau="handy"] .hs-gitter[data-ton] button svg {
  color: var(--ton);
}

:root[data-aufbau="handy"] :is(.mehr-gruppe-name, .hs-gruppe)[data-ton]:not([data-ton="neutral"]) {
  box-shadow: inset 3px 0 0 var(--ton);
  padding-left: 7px;
}

/* Der Schalter A/B in der Kopfleiste: Huelle und Taste wie hell/dunkel
   (.kopf-schema), statt Sonne und Mond die Buchstaben; der Gleiter steht
   bei A links, bei B rechts. */
.kopf-ab[hidden] { display: none; }

:root[data-aufbau="handy"] .kopf-ab { display: none; }

.kopf-ab .ab-buchstabe {
  flex: none;
  width: 12px;
  color: var(--schrift-matt);
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
}

.kopf-ab[data-wahl="a"] .ab-a,
.kopf-ab[data-wahl="b"] .ab-b {
  color: var(--akzent);
}

.kopf-ab .schema-schalter-gleiter {
  transform: translateX(0);
}

.kopf-ab .schema-schalter-taste[aria-checked="true"] .schema-schalter-gleiter {
  transform: translateX(14px);
}

.kopf-ab .verwaltung-hilfe-knopf {
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--linie-hell);
  border-radius: 50%;
  background: var(--leiste-tief);
  color: var(--schrift-matt);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.kopf-ab .verwaltung-hilfe-knopf[aria-expanded="true"] {
  border-color: var(--akzent);
  color: var(--akzent);
}

.kopf-ab-erklaerung {
  position: fixed;
  z-index: 50;
  top: 34px;
  right: 8px;
  box-sizing: border-box;
  max-width: min(360px, calc(100vw / var(--groesse) - 16px));
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--linie-hell);
  border-radius: 8px;
  background: var(--dialog-grund);
  color: var(--schrift-dialog);
  font-size: 12px;
  line-height: 1.45;
  box-shadow: var(--schatten-stark);
}

.kopf-ab-erklaerung:not(:has(.verwaltung-hilfe-rest:not([hidden]))) { display: none; }

/* 432 */
/* ---------- Jeder Knopf antwortet (Paket 432) ----------
   Kostja 2026-10-15: "Ich habe oft das Problem, wenn ich eine Taste
   druecke, habe ich kein Feedback, dass sie gedrueckt worden ist." Bis
   hier kannte dieses Blatt nur drei Regeln fuer :active (Zeitleiste,
   Daumenleiste am Handy, 3D-Leinwand der Projekte), und OK und Abbrechen
   im Dialog der Schritte hatten nicht einmal ein Ueberfahren.

   Vier Zustaende an EINER Stelle fuer jede Seite (jede laedt dieses
   Blatt), fuer Band, Kopfleiste, Dialoge, Menues, Verwaltung und
   Nebenseiten:

     Ueberfahren  ein Hauch ueber der Flaeche (--knopf-ueber), dazu die
                  Hand. Ohne Gewicht (:where): wer schon eine eigene
                  Regel oder einen eigenen Schatten hat, behaelt sie. Nur
                  wo es ein Ueberfahren gibt (hover: hover); am Tablet
                  bliebe der Hauch sonst nach dem Tippen stehen.
     Gedrueckt    eine dunklere Flaeche und ein Schatten nach innen
                  (--knopf-druck, --knopf-druck-schatten), solange
                  gedrueckt wird. js/knopfdruck.js setzt .knopf-gedrueckt
                  beim Druck mit Maus, Finger oder Stift und bei Enter und
                  Leertaste. Mit !important: der Druck gewinnt immer, auch
                  ueber gewaehlt und ueber einen eigenen Schatten, kommt
                  ohne Uebergang und dauert nur den Augenblick. Seiten ohne das Skript
                  (data-knopfdruck fehlt an der Wurzel) nehmen :active.
     Fokus        der Rahmen in der Akzentfarbe mit Abstand, wie ihn die
                  Verwaltung, die Formulare und der Schalter hell/dunkel
                  schon tragen, nur bei der Tastatur (:focus-visible).
     Laeuft       [data-laeuft] (js/knopfdruck.js): der Zeiger "progress"
                  und der Kreisel rechts neben dem Text, ohne Platz zu
                  nehmen; ein zweiter Klick kommt nicht durch.

   Gewaehlt und aktiv bleibt das Blau (Rand oder Flaeche, dauerhaft). Der
   Druck ist dunkel, nach innen und voruebergehend: beides ist nie zu
   verwechseln. Die Toene der Gruppen (429) bleiben, wie sie sind; Hauch
   und Druck legen sich nur darueber. Bewegung gibt es nur am Kreisel, und
   der steht bei prefers-reduced-motion still. Groessen (361): alle Werte
   sind Bildpunkte in gezoomten Behaeltern und wachsen mit.

   DIE LISTE DER KNOEPFE steht wortgleich in js/knopfdruck.js (KNOEPFE);
   tests/test_druck_rueckmeldung.py haelt beide gleich. */

:where(:is(button, [role="button"], [role="menuitem"], [role="menuitemcheckbox"],
    [role="menuitemradio"], [role="option"], [role="tab"], [role="switch"],
    summary, input[type="button"], input[type="submit"], input[type="reset"],
    a.knopf, a.verwaltung-knopf, .verwaltung-menue-punkt, .kb-menue-punkt,
    .anmelde-knopf, .bt-knopf, .seitenkopf-punkt-cta, .zweig, .marke,
    .anzeige-zeile, .bezpanel-zeile, .palette-abschnitt-kopf,
    .pruef-gruppe-kopf, .pj-kachel, .pj-knoten):not(:disabled, [aria-disabled="true"])) {
  cursor: pointer;
}

@media (hover: hover) {
  :where(:is(button, [role="button"], [role="menuitem"], [role="menuitemcheckbox"],
      [role="menuitemradio"], [role="option"], [role="tab"], [role="switch"],
      summary, input[type="button"], input[type="submit"],
      input[type="reset"], a.knopf, a.verwaltung-knopf,
      .verwaltung-menue-punkt, .kb-menue-punkt, .anmelde-knopf, .bt-knopf,
      .seitenkopf-punkt-cta, .zweig, .marke, .anzeige-zeile, .bezpanel-zeile,
      .palette-abschnitt-kopf, .pruef-gruppe-kopf, .pj-kachel, .pj-knoten):not(:disabled, [aria-disabled="true"], [data-laeuft]):hover) {
    box-shadow: inset 0 0 0 999px var(--knopf-ueber);
  }
}

.knopf-gedrueckt,
:root:not([data-knopfdruck]) :is(button, [role="button"], [role="menuitem"], [role="menuitemcheckbox"],
    [role="menuitemradio"], [role="option"], [role="tab"], [role="switch"],
    summary, input[type="button"], input[type="submit"], input[type="reset"],
    a.knopf, a.verwaltung-knopf, .verwaltung-menue-punkt, .kb-menue-punkt,
    .anmelde-knopf, .bt-knopf, .seitenkopf-punkt-cta, .zweig, .marke,
    .anzeige-zeile, .bezpanel-zeile, .palette-abschnitt-kopf,
    .pruef-gruppe-kopf, .pj-kachel, .pj-knoten):not(:disabled, [aria-disabled="true"]):active {
  box-shadow: inset 0 1px 3px var(--knopf-druck-schatten),
    inset 0 0 0 999px var(--knopf-druck) !important;
  /* Sofort: ein Knopf mit eigenem Uebergang (der Schalter hell/dunkel der
     Kopfzeile) zeigte den Druck sonst erst nach dessen Dauer. Beim
     Loslassen gilt sein Uebergang wieder. */
  transition: none !important;
}

:where(:is(button, [role="button"], [role="menuitem"], [role="menuitemcheckbox"],
    [role="menuitemradio"], [role="option"], [role="tab"], [role="switch"],
    summary, input[type="button"], input[type="submit"], input[type="reset"],
    a.knopf, a.verwaltung-knopf, .verwaltung-menue-punkt, .kb-menue-punkt,
    .anmelde-knopf, .bt-knopf, .seitenkopf-punkt-cta, .zweig, .marke,
    .anzeige-zeile, .bezpanel-zeile, .palette-abschnitt-kopf,
    .pruef-gruppe-kopf, .pj-kachel, .pj-knoten):focus-visible) {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

[data-laeuft],
[data-laeuft] * {
  cursor: progress !important;
}

.knopf-kreisel {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 4px;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  margin: -5px 0 0;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  pointer-events: none;
  animation: knopf-kreisel .8s linear infinite;
}

/* Ein Knopf nur mit Symbol: der Kreisel in der Ecke, das Symbol bleibt
   zu sehen. */
.knopf-kreisel.ecke {
  top: 1px;
  right: 1px;
  width: 9px;
  height: 9px;
  margin: 0;
}

@keyframes knopf-kreisel {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .knopf-kreisel {
    animation: none;
    border-right-color: currentColor;
    opacity: .55;
  }
}

/* 438 */
/* ---------- Bedienung B: die Tafel, Funktion oben und ihr Fenster darunter (Paket 438) ----------
   Kostja 2026-10-15: "dass man dann da drauf drueckt, dass dann halt oben
   die Funktion erscheint und darunter dann halt das entsprechend passende
   Menue."

   Ein Tipp auf eine Kachel laesst die Karte der Gruppe stehen: sie wird zur
   TAFEL (.b-karte.b-tafel, js/band.js), oben die Reihe der Gruppe wie in
   der Karte (die gewaehlte Kachel hervorgehoben, .aktiv oder .gewaehlt),
   darunter das Fach .b-fach. Ins Fach ziehen das Fenster der Schritte
   (#feature-dialog.in-tafel) und in der Skizze die Varianten und
   Kontur/Hilfslinie der Skizzenleiste. Ein direkter Knopf bekommt fuer
   sein Fenster eine Tafel ohne Reihe (.b-nur-fach), nur mit dem Namen der
   Gruppe als Kopf. Seit 438b (Kostja: "Aber es soll geloest sein") steht
   die Tafel frei: die Karte klappt zur Wahl unter ihrem Knopf auf, die
   Tafel steht danach wie in A das Fenster der Schritte (top 96, right 250
   in ihren Bildpunkten), endet ueber der Zeitleiste, laesst sich am Kopf
   ziehen und anheften (js/fenster.js, eigener Name, je Browser gemerkt).
   Was nicht passt, rollt im Fach, OK und Abbrechen bleiben unten im Bild.

   Das Fenster in der Tafel verliert nur, was ein eigenes Fenster braucht:
   Lage, Rahmen, Schatten, Nadel und den eigenen Zoom (die Tafel liegt im
   Band und ist schon gezoomt; die Ausnahme steht bei der Groesse der
   Bedienung, 361). Felder, Knoepfe, Hell und Dunkel bleiben die des
   Fensters, der Ton der Gruppe (429) bleibt an der oberen Kante der Tafel,
   der Druck (432) an jedem Knopf. */

.band-b .b-karte.b-tafel {
  display: flex;
  flex-direction: column;
  top: 96px;
  right: 250px;
  left: auto;
  min-width: 310px;
  max-height: calc(100vh / var(--groesse) - 96px - var(--hoehe-zeit) - 12px);
}

/* Der Kopf ist der Griff des freien Fensters, die Nadel steht vorn. */
.band-b .b-tafel > .b-karte-kopf {
  display: flex;
  align-items: center;
  min-height: 18px;
}

/* Ein breites Fenster (Scan ausrichten, 428b) macht die Tafel breit. */
.band-b .b-karte.b-tafel:has(> .b-fach > #feature-dialog.breit:not([hidden])) {
  min-width: 420px;
}

.band-b .b-tafel > :is(.b-karte-kopf, .b-kacheln) { flex: none; }

/* Die gewaehlte Funktion, auch wenn ihr Werkzeug nicht leuchtet. */
.band-b .b-tafel .b-kachel.gewaehlt {
  background: var(--flaeche-hover);
  border-color: var(--akzent);
}

/* Das Fach nimmt die Breite der Tafel, ohne sie selbst zu bestimmen (lange
   Saetze im Fenster brechen um, statt die Tafel zu weiten), und rollt, wenn
   die Tafel an die Zeitleiste stoesst. Leer nimmt es keinen Platz. */
.band-b .b-fach {
  flex: 0 1 auto;
  min-height: 0;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--linie-hell);
  overflow-y: auto;
  contain: inline-size;
  scrollbar-width: thin;
}

.band-b .b-fach:not(:has(> :not([hidden]))) { display: none; }

/* Das Fenster der Schritte in der Tafel. */
.b-fach > #feature-dialog.in-tafel {
  position: static;
  width: auto;
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
}

.b-fach > #feature-dialog.in-tafel .fenster-nadel { display: none; }

.b-fach > #feature-dialog.in-tafel .fd-titel {
  padding-top: 0;
  cursor: default;
}

.b-fach > #feature-dialog.in-tafel .fd-fuss {
  position: sticky;
  bottom: 0;
  margin-top: 8px;
  padding: 6px 0 2px;
  background: var(--dialog-grund);
}

/* Die Einstellungen eines Skizzenwerkzeugs in der Tafel: dieselben Knoepfe
   wie unten in der Leiste, hier mit Bild und Wort und in Daumengroesse am
   Tablet; die Woerter stehen je in einer eigenen Zeile. */
.b-fach > .skizzenleisten-gruppe {
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 8px;
}

.b-fach > .skizzenleisten-gruppe .skizzenleisten-wort {
  flex: 1 0 100%;
  font-size: 12px;
  font-weight: 600;
}

.b-fach > .skizzenleisten-gruppe .skizzenleisten-wort.matt {
  font-size: 11px;
  font-weight: 400;
}

.b-fach .skizzenleisten-knopf {
  height: auto;
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  white-space: normal;
}

.b-fach .skizzenleisten-knopf.bild {
  gap: 6px;
  padding: 4px 10px 4px 8px;
}

.b-fach .skizzenleisten-knopf.bild svg { width: 20px; height: 20px; }

/* Bild und Wort: das Wort ist der Titel des Knopfes, kein zweiter Text. */
.b-fach .skizzenleisten-knopf.bild::after { content: attr(title); }

@media (pointer: coarse) {
  .b-fach .skizzenleisten-knopf { min-height: 44px; }
}

/* Am Gruppen-Knopf, nachdem die Tafel zu ist: das zuletzt gewaehlte
   Werkzeug matt, solange keines leuchtet (leuchtend steht es blau). */
.band-b .b-wahl.zuletzt { color: var(--schrift-matt); }

/* 440 */
/* ---------- Der Zeiger am Tablet (Paket 440, js/handy-skizze.js) ----------
   Kostja 2026-10-16: "Ich bin in einem Modus drin und komme dann nicht mehr
   auf einem Tablet raus, es gibt ja keine Tastatur". Ein fester Knopf mit
   dem Mauszeiger und dem Wort darunter, in Skizze und Volumen; ein Tipp ist
   die Taste Escape. Er steht immer an derselben Stelle UNTEN LINKS UEBER
   DER ZEITLEISTE, wo im Querformat der linke Daumen liegt, waehrend die
   rechte Hand mit Finger oder Stift zeichnet; gespiegelt zum Fach unten
   rechts (#unten-rechts, 14 vom Rand, 6 ueber der Zeitleiste, dieselbe
   Stufe 18). Die Statuszeile beginnt erst bei 246, die Tafeln links (15)
   liegen darunter, Zeitleiste (20), Dialoge (30), Zifferntastatur (55) und
   Vorhang (60) darueber. Fingerziel 60 mal 60, waechst mit der Groesse der
   Bedienung (361) wie die Zeitleiste, unter der er steht. Er leuchtet blau
   wie ein aktives Werkzeug, solange das Band eines markiert; den Druck
   zeichnet der Block 432. Wann er steht, entscheidet das Skript (hidden);
   am Handy nie. Farben nur aus den Token. */

.tablet-zeiger {
  position: fixed;
  left: 14px;
  bottom: calc(var(--hoehe-zeit) + 6px);
  z-index: 18;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  padding: 6px 4px 5px;
  border: 1px solid var(--tafel-rand);
  border-radius: 12px;
  background: var(--tafel);
  color: var(--schrift-hell);
  box-shadow: var(--schatten-weich);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.tablet-zeiger[hidden],
:root[data-aufbau="handy"] .tablet-zeiger { display: none; }

.tablet-zeiger svg {
  display: block;
  flex: none;
  width: 26px;
  height: 26px;
}

.tablet-zeiger .tz-wort { white-space: nowrap; }

/* Ein Werkzeug ist aktiv: der Knopf leuchtet wie im Band. Das Blau im
   Symbol nimmt die Schrift auf dem Akzent, sonst stuende Blau auf Blau
   (dieselbe Regel wie am gedrueckten Knopf der Wuerfelreihe). */
.tablet-zeiger.aktiv {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--schrift-auf-akzent);
}

.tablet-zeiger.aktiv svg { --farbe-akzent: var(--schrift-auf-akzent); }

/* 450 */
/* ---------- Nachrechnen im Browser (Paket 450, js/nachrechnen.js) ---------
   Der zweite Rechenort als Probe: ein kleines Feld in der Statuszeile,
   "Browser: gleich (3 Körper, 0,8 s)", ein Klick oeffnet das Blatt mit
   der Vergleichstabelle. Wie Isoliert und Fortschritt: kein Platzbedarf
   ohne Inhalt, und die Zeile bleibt darunter bedienbar. Farben nur aus
   Token; der Knopf ist ein echter button und hat seinen Druck aus dem
   Block 432. */
.nachrechnen {
  color: var(--schrift-matt);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  pointer-events: auto;
}

/* Ohne Ergebnis traegt das Feld hidden; die Regel muss dastehen, weil
   "display: inline-flex" oben die Vorgabe des Browsers fuer [hidden]
   schlaegt (dieselbe Stelle wie bei .isoliert). */
.nachrechnen[hidden] { display: none; }

.nachrechnen-knopf {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.nachrechnen-knopf:hover { color: var(--schrift-hell); }
.nachrechnen-knopf:focus-visible { outline: 1px solid var(--akzent); outline-offset: 1px; }

/* Eine Abweichung oder eine Absage steht in der Warnfarbe: das ist der
   Satz, der einen Blick verlangt, kein Fehler der Bedienung. */
.nachrechnen.abweichung .nachrechnen-knopf,
.nachrechnen.absage .nachrechnen-knopf { color: var(--warnung); }

/* Die Vergleichstabelle im Blatt, so schmal wie der Platz es erlaubt. */
.nachrechnen-tafel {
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  margin-top: 8px;
}

.nachrechnen-tafel th {
  text-align: left;
  font-weight: 500;
  color: var(--schrift-matt);
  padding: 2px 8px 2px 0;
  border-bottom: 1px solid var(--linie);
}

.nachrechnen-tafel td {
  padding: 2px 8px 2px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}

.nachrechnen-tafel td:last-child { white-space: normal; }