/*
  themes.css — Token-Quelle (Schicht 2, UNIVERSAL §3).

  ROLLE: Die EINZIGE Stelle im Projekt, die Farben, Abstände, Radien,
  Schriftgrößen, Zeiten und Zeichenfarben als Zahl festlegt. style.css,
  der Dialog-Baustein und der SVG-Renderer LESEN diese Variablen — sie
  definieren keine eigenen.

  WAS DIESE DATEI AUSDRÜCKLICH NICHT TUT:
  - Sie enthält keine Selektoren für Bedienelemente. Layout ist style.css.
  - Sie lädt keine Schriftart aus dem Netz. Der Google-Fonts-Verweis der
    Parabolspiegel-App ist bewusst weggelassen (doc/GUIDELINES.md §25):
    die App muss ohne Internet starten. Stattdessen ein Systemstapel.

  HERKUNFT: css/themes.css der Parabolspiegel-App (Stand 2026-09-19).
  Ergänzt um --warn-*, die Abstands-/Schrift-Skala und die Zeichenfarben,
  weil die Vorlage Abstände und Linienfarben noch als Literale in
  style.css trug.

  AUFBAU:
    :root              — themenunabhängige Tokens (Skalen, Schriften, Zeiten)
    [data-theme="…"]   — je Thema derselbe Satz Farbvariablen
  Ein neues Thema kopiert den Block "blueprint" und setzt JEDE Variable neu.
  Eine fehlende Variable fällt still auf das Vorgängerthema zurück — das
  sieht man erst beim Umschalten.
*/

/* ---------- themenunabhängig ---------------------------------------- */
:root {
  /* Schriften — nur Systemschriften, kein Netz */
  --font-ui: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-mono: Consolas, "DejaVu Sans Mono", "Courier New", monospace;

  /* Schriftgrößen */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-h2: 15px;
  --fs-h1: 21px;

  /* Abstände */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 28px;

  /* Bedienelemente */
  --radius: 2px;
  --control-h: 40px;
  --control-h-sm: 34px;
  --help-btn-size: 20px;
  --check-size: 16px;
  --corner-mark: 9px;
  --sidebar-w: 320px;
  --sidebar-w-narrow: 260px;
  --tab-min-w: 150px;
  --tab-min-h: 38px;
  --sheet-min-h: 420px;
  /* PD Dreifeld-Ansicht (Mockup doc/mockup-dreifeld-ansicht.html): Breite
     der Druckvorschau-Spalte, Höhe der KLEINEN Zeichnung im Reiter „Punkte
     übertragen“ (groß misst app.js), Breite der Vorschau-Seite im großen Feld. */
  --preview-col-w: 360px;
  --sheet-small-h: 540px;
  --preview-page-big-w: 620px;
  --preview-gap: 14px;
  --sheet-h-fallback: 62vh;   /* NUR bis app.js die Höhe gemessen hat ([1/6]
                                 der PD Platz-Kontrollviereck-Masslinien).
                                 Die geltende Höhe wird GEMESSEN, nicht
                                 geschätzt: ein Bildschirmanteil weiß nichts
                                 von Kopfzeile, Reitern und Werkzeugleisten. */
  --field-min-w: 124px;       /* schmaler darf ein Feldpaar nicht werden, sonst
                                 wird die Beschriftung abgeschnitten ([5/6]) */
  --toolbtn-h: 30px;
  --bar-pop-min-w: 240px;     /* Klappmenü der Leiste (PD Leiste-Anordnung-Winkel) */
  /* EIN KLAPPFENSTER WIRD NIE HÖHER ALS DAS BILD ([5/14]+, gemeldet vom
     User am 2026-09-25: „Ich kann in dem Fenster nicht nach unten
     scrollen."). Das Stil-Fenster hat 13 Zeilen und zwei Knöpfe; auf
     einem kleinen Bildschirm ragte es unten hinaus, und weil das
     Fenster absolut liegt, scrollt die Seite dafür nicht mit. Die
     Grenze gilt für ALLE Klappfenster der Leiste — „Blatt" mit acht
     Feldern ist der nächste Anwärter. */
  --bar-pop-max-h: 70vh;
  --angle-input-w: 72px;      /* Zahlenfeld „Ansatzwinkel“ */
  --mark-input-w: 78px;       /* Zahlenfelder „Platz“ und „Größe“ einer Marke ([8/11]) */
  /* DAS FENSTER DER SCHNITTKANTE ([7+5/9] der PD Schnittkante-Punktfang-
     Winkel-Hover, Maße aus doc/mockup-schnittkante-fenster-kompakt.html). */
  --cut-panel-w: 300px;       /* schwebend und in der Seitenleiste */
  --cut-label-w: 4.5em;       /* JEDE Beschriftung im Raster gleich breit */
  --cut-field-w: 5.5em;       /* JEDES Zahlenfeld gleich breit */
  --cut-unit-w: 2em;          /* Spalte der Einheit */
  --cut-end-w: 4em;           /* „Ende A" in der Winkel-Tabelle */
  --cut-input-h: 26px;        /* Höhe der Felder im Fenster (sonst --control-h) */
  /* KEIN ZUCKEN (2026-09-27): wechselnde Texte bekommen feste Plätze,
     damit das Fenster beim Ziehen seine Größe nicht ändert. */
  --cut-text-lines: 2;        /* Prüfzeile und Grund: so viele Zeilen, immer */
  --cut-text-lh: 1.3;         /* ihre Zeilenhöhe (Faktor der Schriftgröße) */
  --cut-peek-w: 9em;          /* Stand in der Überschrift, angedockt */
  --cut-sug-w: 9em;           /* „Vorschlag n von m“ */
  --cut-why-w: 16em;          /* Grund eines Vorschlags, angedockt */
  --cut-go-w: 8em;            /* Knopf „Schneiden“, in beiden Namen gleich breit */
  /* LEISTE VERSION 2 (PD Leiste-V2, Maße 1:1 aus doc/mockup-leiste-v2.html) */
  --ib-size: 30px;            /* Symbolknopf */
  --ib-icon: 18px;            /* Symbol darin */
  --ib-radius: 4px;
  --ib-stroke: 1.6;           /* Strichstärke der Symbole */
  --ib-lvl-fs: 9px;           /* Stufenzahl im Raster-Knopf */
  /* TOOLTIP: GELB statt Dunkelblau (Ansage des Users am 2026-09-26: „die
     gelben Felder gefielen mir besser als die blauen" — gemeint ist das
     Blassgelb des Betriebssystem-Tooltips). Gilt in allen Themen. */
  --tip-bg: #ffffe1;          /* Tooltip */
  --tip-ink: #1b1b1b;
  --tip-line: #8c8c6e;        /* Rand des Tooltips */
  --tip-kbd-line: #a8a888;
  --tip-max-w: 260px;
  --tip-lab-ink: #6b6b52;     /* Kennwort „Was:" / „So geht's:" im Tooltip */
  --tip-lab-gap: 3px;
  --tip-part-gap: 3px;        /* Abstand zwischen B und C */
  /* Gruppe „Projekt" und Lade-Dialog (PD Stil-Speichern-Laden-Projektname). */
  --project-name-w: 11rem;      /* Namensfeld vorn in der Leiste */
  --load-drop-min-h: 150px;     /* das gestrichelte Ablagefeld */
  --load-drop-icon: 2rem;       /* das Zeichen ⤓ darin */
  --tip-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  /* --zoom-island-bg steht seit 2026-09-27 JE THEMA (unten): die Schrift
     der Inseln folgt dem Thema (--ink), also muss ihr Grund es auch tun.
     Vorher stand hier ein festes Weiß — in „Sonnenglut“ und „Werkstatt“
     helle Schrift auf Weiß (Meldung des Users, gemessen Kontrast 1,1–2,2). */
  --zoom-island-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  --zoom-island-radius: 6px;
  --zoom-island-inset: 10px;  /* Abstand zur Ecke der Zeichnung */
  --zoom-island-pad: 3px;
  /* PD Grenzen-Raster-Kalibrierung (Mockup freigegeben 2026-09-21) */
  --zoom-scale-h: 8px;          /* Höhe des Maßstab-Balkens an der Lupe */
  --zoom-scale-w: 1.5px;        /* Strich des Balkens */
  --calib-outline: 2px;         /* Rand des 10-cm-Quadrats — liegt AUSSEN */
  --dialog-wide-max-w: 760px;   /* breiter Dialog (Bildschirm messen) */
  --grid-caret-w: 16px;         /* Pfeil ▾ neben dem Rasterknopf */
  --caret-size: 6px;            /* der gezeichnete Winkel des ▾ */
  --caret-stroke: 2px;
  --unnatural: #d9780f;         /* Warnung „unnatürlich“ (Griff, Feld, Knopf) */
  --unnatural-bg: #fff1de;
  --ib-gap: 2px;              /* zwischen Knöpfen einer Gruppe */
  --bar-cap-fs: 9px;          /* Gruppenname unter der Leiste (W19) */
  --bar-cap-h: 11px;          /* seine Zeile */
  --bar-more-max-w: 260px;    /* Fenster „▾ mehr" */
  --ib-group-gap: 6px;        /* zwischen Gruppen */
  --ib-select-h: 26px;        /* Auswahlfelder in Leiste V2 und Zoom-Insel */
  --ib-cnt-fs: 10px;          /* Zahl neben ↶ ↷ */
  --ib-cnt-w: 12px;
  --tip-pad-y: 6px;
  --tiling-map-max-w: 320px;  /* Kachelkarte im Druck-Reiter */
  --print-foot-h: 7mm;        /* Fußzeilenstreifen auf der Druckseite */
  --table-max-h: 640px;
  --grid-cell: 28px;
  --legend-sw: 22px;
  --dialog-max-w: 440px;
  --dialog-details-max-h: 160px;
  --dialog-btn-h: 36px;

  /* Zeiten */
  --t-fast: .15s;

  /* Zeichenfarben — themenunabhängig, weil sie auch gedruckt werden und
     auf Papier immer gleich aussehen müssen. Der SVG-Renderer liest sie. */
  --draw-cut: #16283a;
  --draw-seam: #c1552c;
  --draw-constr: #8b95a5;
  --draw-grain: #2457d6;
  --draw-point: #16283a;
  --draw-handle: #2457d6;
  --draw-grid: #bccbd8;         /* dunkler seit PD Grenzen-Raster-Kalibrierung [2/9] (vorher #d5dfe8) */
  --draw-paper: #ffffff;
  /* Körperschablone ([6/10] der PD Vorschau-Koerper-Punktlisten, §57):
     KEIN --draw-measure-Ersatz für die Marken — die sind rot wie die
     Maßgriffe (W8), css/style.css liest dafür --draw-measure direkt. Nur
     Umriss und Füllung der Figur brauchen eigene Tokens, weil es sie
     noch nicht gab. Themenunabhängig aus demselben Grund wie oben: die
     Farbe eines Körpers ändert sich nicht mit dem Thema der Oberfläche. */
  --draw-body-fill: #f3e6da;
  --draw-body-stroke: #8a6a52;
  /* Die gelegten Schnittteile in der Ansicht „Zusammengesetzt" (§60):
     EINE Stofffarbe für alle Teile ist die Vorgabe — das Kleidungsstück
     soll wie ein Stück Stoff aussehen und nicht wie ein Flickenteppich.
     Wer die Teile auseinanderhalten will, schaltet auf „je Teil eine
     Farbe" um; die Farbtöne dafür stehen in js/render/body-renderer.js,
     weil sie je Teil und nicht je Thema gelten. Themenunabhängig wie die
     übrigen Zeichenfarben, obwohl diese Ansicht nie gedruckt wird —
     zwei Regeln für Zeichenfarben wären eine zu viel. */
  --draw-fabric-fill: rgba(47, 110, 168, .20);
  --draw-fabric-line: #2a5f90;
  /* Zeichnung und Fläche dahinter am Bildschirm (PD Pfeile-Grenzen-Farben
     [5/7]). Vorgabe = heutiges Aussehen (beide Papier). js/app.js setzt sie
     zur Laufzeit, wenn der Nutzer eine Farbe wählt. */
  --sheet-canvas-bg: var(--draw-paper);
  --sheet-behind: var(--draw-paper);
  --draw-w-cut: 0.5;      /* SVG-Einheiten = mm */
  --draw-w-seam: 0.35;
  --draw-w-constr: 0.25;
  --draw-w-grid: 0.3;     /* doppelt so kräftig seit PD Grenzen-Raster-Kalibrierung [2/9] (vorher 0.15) */
  --draw-w-grain: 0.4;
  /* DIE ZWEITE SORTE STRICHDICKE (E-S1 der PD Projektor-Stil, [4/14]):
     dieselben fünf Linien in BILDPUNKTEN. In Millimetern gehört der Strich
     zur Zeichnung und wächst beim Hineinzoomen mit; in Bildpunkten gehört
     er zum Bildschirm und bleibt gleich dick. 0 heißt „nicht in Gebrauch“,
     dann gilt die Millimeter-Zahl darüber — die Zahl sagt selbst, welche
     Sorte zählt, und der Zeichner braucht keine zweite Abfrage.
     VORGABE 0 IST ABSICHT: ohne Eingriff zeichnet die App wie bisher. */
  --draw-w-cut-px: 0;
  --draw-w-seam-px: 0;
  --draw-w-constr-px: 0;
  --draw-w-grid-px: 0;
  --draw-w-grain-px: 0;
  --draw-control: #8a2f1f;    /* Kontrollquadrat — muss auch auf Papier auffallen */
  --draw-font: sans-serif;     /* Schriftart im SVG; Vorgabe = bisheriger Stand (PD Projektor-Stil [3/14]) */
  --draw-font-mono: monospace;
  --draw-fs-title: 5;         /* Schriftgrößen im SVG, in mm — nicht --fs-*, die sind px für die Oberfläche */
  --draw-fs-label: 3;
  --draw-fs-note: 2.6;
  --draw-point-r: 0.8;        /* Radius Konstruktionspunkt, mm */
  --draw-notch-len: 6;        /* Länge eines Knips, mm */
  --draw-arrow: 3;            /* Pfeilspitze am Fadenlauf, mm */
  /* GRIFFE WERDEN IN BILDSCHIRM-PUNKTEN GEMESSEN, nicht in Millimetern.
     Ein Griff ist ein Bedienelement: er muss bei jeder Zoomstufe gleich
     groß und gleich gut zu treffen sein. In Millimetern gerechnet war er
     bei eingepasster Ansicht rund einen Bildpunkt breit und damit
     unsichtbar (Befund des Users am 2026-09-21). */
  /* GRÖSSE DER GRIFFE (PD Pfeile-Snap-Groesse-Hinweise [3/7]): EIN Faktor,
     mit dem der Renderer alle Punkt- und Pfeil-Maße liest — Radien,
     Laschenabstand und -größe, Hebel, Ringe UND die Trefferradien
     (readTokenTable, DOT_SCALED). Bild und Treffer wachsen gemeinsam.
     Striche und Schrift wachsen NICHT (F1 der PD). 1 = normal; js/app.js
     setzt ihn zur Laufzeit aus der Stufe des Knopfes „Griffe größer“. */
  --draw-dot-scale: 1;
  --draw-handle-r-px: 7;        /* Radius des Griffs, Bildpunkte */
  --draw-handle-w-px: 2;        /* Rand des Griffs, Bildpunkte */
  --draw-handle-line-px: 1.2;   /* Hilfslinie und Rahmen, Bildpunkte */
  --draw-dash-handle-px: 5 4;   /* Strichmuster des Rahmens, Bildpunkte */
  /* ÜBERFAHREN ([2/10] der PD Zusatzpunkte-Richtungen): der Griff unter
     der Maus (und der, der gerade gezogen wird) wird größer, bekommt einen
     dickeren Rand und einen Hof in seiner eigenen Farbe. Gilt für blaue
     und rote Griffe gleich. Bildpunkte wie oben. */
  --draw-handle-hover-r-px: 8.5;    /* Radius beim Überfahren */
  --draw-handle-hover-w-px: 3;      /* Rand beim Überfahren */
  --draw-handle-halo-r-px: 16;      /* Radius des Hofs */
  --draw-handle-halo-opacity: 0.2;  /* Deckkraft des Hofs (0–1) */
  /* RICHTUNGSPFEILE ([3/10] der PD Zusatzpunkte-Richtungen): je Achse, die
     ein Griff WIRKLICH hat, zwei kleine Dreiecke („Laschen“) außen am
     Kreis. Ziehen an einer Lasche sperrt die Bewegung auf diese Achse.
     Bildpunkte wie oben — eine Lasche ist Bedienung, kein Bauteil. */
  --draw-handle-tab-d-px: 21;        /* Abstand Kreismitte -> Laschenmitte */
  --draw-handle-tab-size-px: 6;      /* halbe Länge einer Lasche */
  --draw-handle-tab-hot-px: 8.5;     /* halbe Länge beim Überfahren */
  --draw-handle-tab-hit-px: 9;       /* Trefferradius um die Laschenmitte */
  --draw-handle-tab-opacity: 0.6;    /* Deckkraft in Ruhe (0–1) */
  --draw-handle-guide-px: 900;       /* halbe Länge der Führungslinie beim gesperrten Zug */
  /* DREH-BOGEN ([4/8] der PD Blaue-Punkte-drehen): ein gestrichelter Bogen
     um den Bezugspunkt eines drehbaren Griffs — von seiner Achse bis zur
     Richtung, in der er jetzt steht. Er zeigt die SCHWENKUNG, nicht die
     Bahn: der Punkt läuft quer auf einer Geraden, nicht auf dem Kreis.
     Der Radius ist ein Anteil der Strecke Bezugspunkt -> Punkt, also ein
     Zeichnungsmaß (mm) und kein Bildpunktmaß — der Bogen gehört zum
     Rahmen und wächst mit ihm. Strich und Strichmuster kommen von der
     Hilfslinie (--draw-handle-line-px, --draw-dash-handle-px). */
  --draw-handle-arc-frac: 0.55;      /* Radius des Bogens, Anteil der Strecke */
  --draw-handle-arc-min-deg: 1.5;    /* darunter ist nichts zu zeigen */
  --draw-handle-arc-min-px: 26;      /* Mindestradius in Bildpunkten, damit er eingepasst sichtbar bleibt */
  /* MASSGRIFFE (rote Punkte, PD Massgriffe-Reset-Seitenleiste): ziehen ein
     Körpermaß statt eines Formwerts. Gleiche Größe wie die blauen Griffe
     (--draw-handle-*-px), eigene Farbe, dazu ein Richtungsstrich je Achse. */
  --draw-measure: #c8262b;      /* Farbe des Maßgriffs */
  --draw-measure-axis-px: 14;   /* Länge des Richtungsstrichs je Seite, Bildpunkte */
  /* ANGEWÄHLTE LINIE ([7/10] der PD Zusatzpunkte-Richtungen): die
     angeklickte Nahtkante wird gelb unterlegt — ein breiter, halb
     durchsichtiger Strich UNTER der Nahtlinie, in Bildpunkten, nur am
     Bildschirm. Gelb, weil die Zusatzpunkte auf ihr gelb werden. Der
     Trefferabstand ist der Abstand Maus -> Linie, ab dem sie zählt. */
  --draw-select: #e3b000;         /* Farbe der Unterlegung */
  --draw-select-w-px: 9;          /* Breite der Unterlegung, Bildpunkte */
  --draw-select-opacity: 0.45;    /* Deckkraft der Unterlegung (0–1) */
  --draw-select-hit-px: 6;        /* Trefferabstand Maus -> Nahtlinie, Bildpunkte */
  /* NAHTPAARE EINES EIGENEN TEILS ([14/17], §71.8): zwei vernähte Kanten
     tragen DIESELBE Farbe und DIESELBE Zahl. Bildschirm-Hilfe in
     Bildpunkten — ein Plotter schneidet keine Nummer (§40).
     SECHS FARBEN, DANN WIEDER VON VORN: mehr als sechs Nahtpaare
     gleichzeitig im Blick zu behalten geht ohnehin über die Zahl; ab da
     trägt die Zahl allein, und sie ist eindeutig. Gewählt sind kräftige,
     gut unterscheidbare Töne, die weder die gelbe Anwahl noch das orange
     Überfahren noch das grüne „gerade“ nachahmen. */
  --draw-seam-pair-1: #0a7cc2;
  --draw-seam-pair-2: #b5179e;
  --draw-seam-pair-3: #2a9d3a;
  --draw-seam-pair-4: #d4541e;
  --draw-seam-pair-5: #6a4bd0;
  --draw-seam-pair-6: #00897b;
  --draw-seam-pair-w-px: 4;         /* Strich über der Nahtlinie, Bildpunkte */
  --draw-seam-pair-opacity: 0.85;   /* Deckkraft (0–1) */
  --draw-seam-pair-font-px: 12;     /* Die Zahl an der Kante, Bildpunkte */
  /* LINIE UNTER DER MAUS (PD Leiste-Anordnung-Winkel, L6): orange, damit
     sie sich von der gelb ANGEWÄHLTEN Linie unterscheidet. Bildschirm-Hilfe
     in Bildpunkten. */
  --draw-edge-hover: #ff8a00;       /* Farbe der Hervorhebung */
  --draw-edge-hover-w-px: 6;        /* Breite, Bildpunkte */
  --draw-edge-hover-opacity: 0.7;   /* Deckkraft (0–1) */
  /* ANGEWÄHLT UND ÜBERFAHREN (PD Pfeile-Snap-Groesse-Hinweise [5/7]): ein
     hellgelber Streifen AUSSEN an der Linie, jenseits der gelben
     Unterlegung. Bildpunkte wie oben. */
  --draw-edge-sel-hover: #fff176;       /* Farbe des Streifens (helles Gelb) */
  --draw-edge-sel-hover-w-px: 6;        /* Breite außerhalb der Unterlegung, Bildpunkte */
  --draw-edge-sel-hover-opacity: 0.95;  /* Deckkraft (0–1) */
  /* ROTER GREIFPUNKT bei Anordnung „frei“ (L4).
     SEIT [6/14] DER PD PROJEKTOR-STIL IST ER EIN RING MIT KREUZ und kein
     gefüllter Punkt mehr (Bestellung des Users): er soll zeigen, dass HIER
     das Teil hängt, ohne die Zeichnung darunter zu verdecken. Radius und
     Kreuzarm wachsen mit „Griffe größer“ (DOT_SCALED), Strich und Schrift
     nicht (§51.2). */
  --draw-piece-grab: #c8262b;       /* Farbe */
  /* WENIGER AUFDRINGLICH (Ansage des Users 2026-09-27: „Das Kreuz für freies
     Verschieben weniger aufdringlich machen"): kleiner, dünner, das Kreuz
     bleibt IM Ring (vorher ragte es mit 11 px über den Ring von 8 px hinaus),
     und in Ruhe halb durchsichtig — voll erst beim Überfahren und Ziehen
     (css/style.css). Die TREFFERFLÄCHE bleibt so groß wie vorher
     (--draw-piece-grab-hit-r-px): ruhiger aussehen heißt nicht schwerer
     greifen. Vorher: r 8, Strich 2, Kreuz 11, Marke 16, Schrift 10. */
  --draw-piece-grab-r-px: 6;        /* Radius, Bildpunkte */
  --draw-piece-grab-w-px: 1.4;      /* Strich des Rings und des Kreuzes */
  --draw-piece-grab-cross-px: 4;    /* halbe Länge eines Kreuzarms (im Ring) */
  --draw-piece-grab-hit-r-px: 8;    /* Trefferradius vor dem Spielraum — wie vorher */
  --draw-piece-grab-rest-opacity: 0.45; /* in Ruhe; beim Überfahren/Ziehen 1 */
  --draw-piece-grab-font-px: 8;     /* Schrift in der Marke neben dem Ring */
  --draw-piece-grab-mark-px: 12;    /* Kantenlänge der Marke (Kästchen) */
  --draw-piece-grab-mark-r-px: 3.5; /* seine Ecken */
  --draw-piece-grab-mark-bg: #4d6373;  /* Grund der Marke; die Schrift darin ist Papier */
  /* ABSTAND DES RINGS VON DER ECKE, schräg nach außen, in Bildpunkten
     (Meldung des Users am 2026-09-25: „der frei bewegen Punkt darf nicht
     auf den Schnittlinien liegen"). Der Ring saß genau auf der Ecke des
     Hüllrechtecks — und die liegt AUF der Schnittlinie. */
  --draw-piece-grab-off-px: 13;
  /* GELBE ZUSATZPUNKTE ([8/10] der PD Zusatzpunkte-Richtungen): eigene
     Punkte des Nutzers auf einer Nahtlinie. Gleiche Größe wie die anderen
     Griffe (--draw-handle-*-px), gelbe Füllung, dunkler Rand. Die Laschen
     „entlang der Linie“ sind braun und sitzen weiter außen als die
     waagrechten/senkrechten, damit man sie auseinanderhält. Der gewählte
     Punkt (Entf löscht ihn) trägt einen gestrichelten Ring. */
  --draw-extra: #7a5a00;            /* Rand des gelben Punkts */
  --draw-extra-fill: #ffd21f;       /* Füllung des gelben Punkts */
  --draw-extra-tab: #b07d00;        /* Farbe der Laschen „entlang der Linie“ */
  --draw-extra-along-d-px: 34;      /* Abstand Kreismitte -> Laschenmitte „entlang“, Bildpunkte */
  --draw-extra-sel-r-px: 12;        /* Radius des Wahl-Rings, Bildpunkte */
  --draw-extra-sel-w-px: 1.5;       /* Strich des Wahl-Rings, Bildpunkte */
  --draw-extra-sel-dash-px: 3 2;    /* Strichmuster des Wahl-Rings, Bildpunkte */
  /* GRIFFE DER MARKEN VON HAND ([6/11] der PD Knoepfe-von-Hand, §74):
     ein Ring um Knopf, Knopfloch oder Druckknopf der ANGEWÄHLTEN
     Verschlusskante. AUSDRÜCKLICH NICHT GELB: ein gelber Punkt ist
     Konstruktion und wirkt im Bau (§42), ein Knopf ändert an der
     Geometrie nichts — dieselbe Farbe hätte dasselbe Versprechen
     gegeben. Blaugrün, weil damit noch nichts belegt ist: blau sind die
     Formgriffe, rot die Maßgriffe, gelb die Zusatzpunkte, grün die
     Maßlinien. Die Füllung ist durchsichtig, damit das Zeichen unter dem
     Ring sichtbar bleibt — der Ring sagt „greifbar“, er ersetzt den
     Knopf nicht. Der Trefferradius steht eigens da, weil er größer ist
     als der Ring; beide wachsen mit „Griffe größer“ (§51.2). */
  --draw-mark-handle: #0f766e;      /* Farbe des Rings */
  --draw-mark-handle-fill: rgba(15, 118, 110, 0.10);  /* Füllung, fast durchsichtig */
  --draw-mark-handle-r-px: 11;      /* Radius des Rings, Bildpunkte */
  --draw-mark-handle-w-px: 1.8;     /* Strich des Rings, Bildpunkte */
  --draw-mark-handle-hit-px: 14;    /* Trefferradius, Bildpunkte */
  /* SICHTBARKEIT DES RINGS ([7+1/11], Befund des Users vom 2026-09-25:
     „der Benutzer entdeckt diese Option sonst nicht“). Der Ring steht
     immer in der Zeichnung; wie laut er ist, sagen diese drei Werte:
       • angewählte Kante oder Maus auf dem Ring .... voll
       • Kante nur überfahren (die ganze Leiste) .... halblaut
       • sonst ..................................... unsichtbar
     Halblaut statt voll, damit das Überfahren einer Linie nicht wie eine
     Anwahl aussieht — sonst hieße derselbe Ring zweierlei. */
  --draw-mark-handle-near-o: 0.55;  /* Ring an der ÜBERFAHRENEN Kante */
  /* DIE ANGEWÄHLTE MARKE ([8/11]): gestrichelt und etwas kräftiger. Die
     Werte stehen im selben Maß wie Radius und Strich des Rings — in
     BILDSCHIRM-PUNKTEN, weil die ganze Ebene so gezeichnet wird (§51.2).
     Eine eigene Farbe gibt es nicht: gewählt ist eine Form, keine neue
     Bedeutung. */
  --draw-mark-handle-sel-dash: 3.2 2.6;
  --draw-mark-handle-sel-w-px: 2.4;
  /* DIE MASSKETTE AN EINER KNOPFREIHE ([3/6] der PD Knopfabstaende-
     anzeigen, §75): oben · Knopf zu Knopf · unten, je mit der Zahl.
     FARBE: dieselbe wie der Ring der Marke — es ist dieselbe Reihe, und
     eine zweite Farbe für dasselbe Ding hieße, es sei ein anderes.
     ORANGE NUR, WO ES EINE ABWEICHUNG GIBT (E-A1): rot sind in dieser
     App Maßgriffe, die ein Körpermaß ziehen; ein roter Pfeil an der
     Leiste verspräche, dass man ihn anfassen kann. Orange heißt hier
     schon „unüblicher Wert“ (§46) — derselbe Farbwert wie
     --draw-unnatural, damit „das stimmt so nicht“ EINE Farbe hat.
     WAS IN BILDPUNKTEN STEHT und was nicht (§40): Strich, Pfeilspitze,
     Schrift und der Abstand der Zahl von der Kette sind Bildpunkte — in
     Millimetern waren sie bei eingepasster Ansicht Haarlinien. Der
     ABSTAND DER KETTE von der Knopflinie bleibt Millimeter: er ist ein
     ORT, genau wie --draw-dim-offset. */
  --draw-mark-spacing: #0f766e;        /* Kette, Zahl: wie der Ring der Marke */
  --draw-mark-spacing-off: #d9780f;    /* weicht ab: orange (E-A1, derselbe Wert wie --draw-unnatural) */
  --draw-mark-spacing-w-px: 1.2;       /* Strich der Maßlinie, Bildpunkte */
  --draw-mark-spacing-ext-px: 0.8;     /* Hilfslinie Marke -> Kette, Bildpunkte */
  --draw-mark-spacing-arrow-px: 8;     /* Pfeilspitze, Bildpunkte (wächst mit „Griffe größer“) */
  --draw-mark-spacing-font-px: 11.5;   /* Schrift der Zahl, Bildpunkte */
  --draw-mark-spacing-text-d-px: 8;    /* Abstand der Zahl von der Kette, Bildpunkte */
  --draw-mark-spacing-offset: 12;      /* Abstand der Kette von der Knopflinie, mm */
  --draw-mark-spacing-near-o: 0.75;    /* Kette an der ÜBERFAHRENEN Kante */
  /* Maßlinien und verschiebbares Kontrollviereck ([3/6]/[4/6] der PD
     Platz-Kontrollviereck-Masslinien). Beides sind BILDSCHIRM-Hilfen:
     sie stehen nicht in der Exportdatei und nicht auf dem Ausdruck.
     Strichstärken, Pfeile und Schrift in BILDSCHIRM-PUNKTEN (wie die
     Griffe, §38/§40) — in Millimetern waren sie bei eingepasster Ansicht
     Haarlinien (Befund im echten Browser, 2026-09-21 16:00). Nur der
     ABSTAND der Maßlinie vom Teil bleibt Millimeter: er ist ein Ort. */
  --draw-dim: #1d7a5f;          /* Farbe der Maßlinien */
  --draw-dim-w-px: 1.2;         /* Strichstärke, Bildpunkte */
  --draw-dim-arrow-px: 9;       /* Pfeilspitze, Bildpunkte */
  --draw-dim-font-px: 12;       /* Schrift der Maßzahl, Bildpunkte */
  --draw-dim-ink: #1d7a5f;      /* FARBE DER MASSZAHL, eigen von der Linie ([8+7/14]) */
  --draw-dim-offset: 12;        /* Abstand der Maßlinie vom Teil, mm */
  /* Winkelanzeige ([4+1/10] der PD Zusatzpunkte-Richtungen): Bogen und
     Innenwinkel an jeder Ecke der Nahtlinie. Bildschirm-Hilfe, alles in
     Bildpunkten. Genau 90° bekommt eine eigene Farbe (Stoffbruch!). */
  --draw-angle: #7a3fb0;        /* Bogen und Zahl */
  --draw-angle-right: #178a3e;  /* genau 90° */
  --draw-angle-r-px: 16;        /* Radius des Bogens */
  --draw-angle-w-px: 1.2;       /* Strich des Bogens */
  --draw-angle-font-px: 11;     /* Schrift der Zahl */
  --draw-angle-ink: #7a3fb0;    /* FARBE DER ZAHL, eigen vom Bogen ([8+7/14]) */
  --draw-angle-text-d-px: 32;   /* Abstand Ecke -> Mitte der Zahl, auf der Halbierenden */
  /* WINKEL ZUR ACHSE ([3/9] der PD Winkel-Achsen-Einrasten, K1): je Linie
     an einer Ecke ein gelber Bogen von der Achse bis zur Linie, AUSSEN um
     den lila Innenwinkel. Dunkles Goldgelb, kein gefüllter Kreis — Gelb
     ist hier sonst die Farbe der gelben Punkte (PD B5). Farben aus dem
     freigegebenen Mockup. Bildschirm-Hilfe, alles in Bildpunkten. Die
     Zeichnung liegt in jedem Thema auf weißem Papier (--draw-paper), die
     Farben gelten deshalb für Hell und Dunkel gleich. */
  --draw-axis-angle: #d4a300;         /* Bogen und Bezugsstrich */
  --draw-axis-angle-ink: #7a5c00;     /* Zahl (auf Weiß lesbar) */
  --draw-axis-angle-gap-px: 22;       /* lila Radius -> erster gelber Bogen (auslaufende Linie) */
  --draw-axis-angle-step-px: 14;      /* erster -> zweiter gelber Bogen (ankommende Linie) */
  --draw-axis-angle-w-px: 1.6;        /* Strich des Bogens */
  --draw-axis-angle-font-px: 11;      /* Schrift der Zahl */
  --draw-axis-angle-text-d-px: 12;    /* Bogen -> Mitte der Zahl, auf der Bogenmitte */
  --draw-axis-angle-ref-dash-px: 2 2; /* Bezugsstrich entlang der Achse */
  --draw-axis-angle-halo-px: 3;       /* weißer Rand um die Zahl */
  /* ANSATZWINKEL (PD Leiste-Anordnung-Winkel, L7): Punkte an den Enden der
     angewählten Linie, Hebel am gewählten Ende. Bildpunkte. */
  --draw-angle-dot-r-px: 6;     /* Ring am Linienende */
  --draw-angle-lever-px: 56;    /* Länge des Hebels */
  --draw-angle-knob-r-px: 7;    /* Knopf am Hebelende */
  --draw-angle-locked: #8b95a5; /* gesperrtes Ende (keine Kurve) */
  --draw-hit-slop-px: 3;        /* Trefferzugabe um Winkelpunkt, Hebel, Greifpunkt */
  /* Achsenabstände ([4+2/10] der PD Zusatzpunkte-Richtungen): Achsenkreuz
     je Teil, Lote beim Ziehen, Kästchen „↔ x ↕ y“. Bildschirm-Hilfe,
     alles in Bildpunkten (Farbe und Strichmuster aus dem Mockup). */
  --draw-axis: #0b6e8a;         /* Achsen, Lote, Kästchen */
  --draw-axis-w-px: 1;          /* Strich der Achsen */
  --draw-axis-dash-px: 8 3 2 3; /* Strichpunkt der Achsen */
  --draw-axis-lot-dash-px: 2 3; /* gepunktete Lote beim Ziehen */
  --draw-axis-font-px: 11;      /* Schrift der Kästchen und Achsennamen */
  --draw-axis-origin-r-px: 3.5; /* Punkt im Nullpunkt */
  --draw-axis-bg-opacity: 0.9;  /* Hintergrund der Kästchen, deckt Linien ab */
  --draw-axis-leader-min-px: 20; /* ab diesem Abstand bekommt ein Kästchen eine Zeigerlinie */
  /* ACHSENKREUZ AN PUNKTEN ([4/9] der PD Winkel-Achsen-Einrasten, K2):
     durch jeden Punkt eine gestrichelte waagrechte und senkrechte Linie
     bis an den Rand der Zeichenfläche — dünn, blass, kein Konflikt mit
     dem kräftigeren --draw-axis (das ist die EINE Achse je Teil, §40). */
  --draw-point-crosshair: #9fb0be;      /* dünn, blass */
  --draw-point-crosshair-w-px: 0.75;    /* Strich der Kreuzlinien */
  --draw-point-crosshair-dash-px: 3 3;  /* Strichelung */
  /* EINRASTEN ([6/9] der PD Winkel-Achsen-Einrasten, K3): Hilfslinie und
     Schild, die während eines Zugs sagen, WORAN der Punkt hängt (R6).
     Kräftiges Rot-Violett wie die Führungslinien in Figma — es gehört
     keiner anderen Hilfe und ist nur solange da, wie die Maus gedrückt
     ist. Bildschirm-Hilfe, alles in Bildpunkten (§40). */
  --draw-snap: #d6136b;                 /* Hilfslinie, Rand des Schildes */
  --draw-snap-w-px: 1.2;                /* Strich der Hilfslinie */
  --draw-snap-dash-px: 5 3;             /* Strichelung der Hilfslinie */
  --draw-snap-font-px: 11;              /* Schrift des Schildes */
  --draw-snap-pad-px: 4;                /* Luft im Schild */
  --draw-snap-d-px: 16;                 /* Punkt -> linke untere Ecke des Schildes */
  --draw-snap-r-px: 4;                  /* Ring um den eingerasteten Punkt */
  --draw-snap-bg-opacity: 0.92;         /* Hintergrund des Schildes deckt Linien ab */
  /* „JETZT IST SIE GERADE“ (PD Pfeile-Snap-Groesse-Hinweise [6/7]): nur
     während eines Zugs, eine vorher gekrümmte Linie des gezogenen Teils,
     die gerade geworden ist. Dasselbe Grün wie der rechte Winkel (F3 der
     PD), damit die Zeichnung nicht bunter wird. */
  --draw-straight: var(--draw-angle-right);
  --draw-straight-w-px: 3;              /* Strich über der Nahtlinie, Bildpunkte */
  --draw-straight-font-px: 11;          /* Wort „gerade“, Bildpunkte */
  --draw-straight-eps-mm: 0.5;          /* Toleranz mindestens: Abstand der Punkte zur Sehne, mm */
  /* DIE SCHNITTKANTE ([8/14] der PD Teil-trennen, Mockup
     doc/mockup-schnittkante-werkzeug.html): eine VORSCHAU, keine Naht —
     rotbraun wie die Trennnaht im Mockup, gestrichelt solange sie nicht
     ganz durchgeht. Bildschirm-Hilfe, nie in Datei oder Druck (§40). */
  --draw-cut-tool: #b5452f;
  --draw-cut-tool-w-px: 2.2;            /* Strich der Kante */
  --draw-cut-tool-dash-px: 7 4;         /* Strichelung, solange ein Ende im Teil liegt */
  --draw-cut-tool-ghost-w-px: 1;        /* der ganze Abschnitt hinter einer kurzen Kante */
  --draw-cut-tool-ghost-dash-px: 2 4;
  --draw-cut-tool-grip-r-px: 6;         /* Endgriff */
  --draw-cut-tool-mid-r-px: 5;          /* Mittelgriff (verschieben) */
  --draw-cut-tool-hit-px: 11;           /* Trefferradius der Griffe */
  --draw-cut-tool-font-px: 11;          /* „26,1 cm · 25°“ an der Mitte */
  --draw-cut-angle-grip-px: 5;          /* Winkel-Ziehpunkt: halbe Diagonale der Raute */
  --draw-cut-angle-hit-px: 8;           /* Trefferradius der Raute */
  /* ORANGE PUNKTE AUF DER SCHNEIDELINIE und die ZUGEHÖRIGE KANTE (PD
     Schneidelinie-90-Orange-Violett, Mockup freigegeben 2026-09-27). */
  --draw-orange-point: #e07a10;
  --draw-orange-point-r-px: 6;
  --draw-edge-partner: #7b3fc4;         /* violett: die Kante der anderen Hälfte */
  /* NATIVE NAHTPARTNER (W20 [7/14], Mockup M2): beim Überfahren einer Kante
     leuchten die Kanten blau, mit denen sie laut Nahtpaar-Register vernäht
     wird. Ein breiter, halb durchsichtiger Streifen (E4) — kein Kreis, damit
     er nicht mit den blauen Punkten verwechselt wird. */
  --draw-edge-native: #1f7ae0;
  --draw-edge-native-w-px: 9;
  --draw-edge-native-opacity: 0.55;
  /* Das Stück eines Partners, das NICHT an der überfahrenen Kante anliegt,
     ist gestrichelt (W20 [7+2/14]): Strich und Lücke in Bildpunkten. */
  --draw-edge-native-dash-px: 10;
  --draw-edge-native-gap-px: 7;
  /* QUADRATE AM BLATTRAND (PD Blattgroesse-Raender [6/8]): ziehen die
     Blattgröße. Schwarz (Wortlaut des Users), Bildschirm-Punkte, wachsen mit
     „Griffe größer“ (DOT_SCALED). */
  --draw-sheet-square: #000000;
  --draw-sheet-square-px: 9;            /* Kantenlänge */
  --draw-sheet-square-hit-px: 10;       /* Trefferradius um die Mitte */
  --draw-straight-tol-px: 1.5;          /* Toleranz beim aktuellen Maßstab: Bildschirm-Punkte ([6+1/7]) */
  --draw-handle-tab-snap-d-px: 13;      /* gewöhnlicher Pfeil -> Snap-Pfeil dahinter ([6+1/9]) */
  --draw-box: #b8500f;          /* Kontrollviereck auf dem Bildschirm */
  --draw-box-w-px: 1.5;         /* Rand des Kontrollvierecks, Bildpunkte */
  --draw-box-font-px: 11;       /* Beschriftung, Bildpunkte */
  --draw-dash-seam: 3 1.5;    /* Strichmuster, mm */
  --draw-dash-constr: 2 1.5;
  --draw-grid-step: 10;       /* Rasterabstand 1 cm, mm */
  /* RASTER „KRÄFTIG“ (PD Leiste-V2, Raster-Dreier): Farben wie das Raster
     im Mockup Leiste-Anordnung-Winkel — 1-cm-Linien und jede 5. Linie dunkler. */
  --draw-grid-strong: #9db3c4;       /* vorher #b7cbd8 — [2/9] kräftiger */
  --draw-grid-strong-major: #5d7b92; /* vorher #7f9bb0 */
  --draw-grid-strong-major-every: 5;
  --draw-margin: 15;          /* Rand ums Blatt, mm */
  --draw-gap: 30;             /* Abstand zwischen Schnittteilen, mm */
  --draw-unnatural: #d9780f;          /* Ring am Griff jenseits des üblichen Bereichs (nur Bildschirm) */
  --draw-unnatural-r-px: 12;          /* Radius des Rings, Bildpunkte */
  --draw-unnatural-w-px: 2.5;         /* Strich des Rings */
  --draw-unnatural-dash-px: 4 3;
  --draw-clear: 30;           /* Mindestabstand beim Auseinanderrücken (festgehaltene/freie Lage), mm — seit PD Grenzen-Raster-Kalibrierung [2/9] wie --draw-gap (vorher 10) */
  /* PUNKTE ZUM ÜBERTRAGEN ([3/10] der PD Vorschau-Koerper-Punktlisten,
     Mockup freigegeben 2026-09-21): grüne nummerierte Punkte, roter
     Nullpunkt „0|0“. Bildschirm-Hilfe in Bildpunkten. */
  --draw-transfer: #0f7a4a;           /* Punkt und Nummer */
  --draw-transfer-r-px: 3;            /* Radius des Punkts */
  --draw-transfer-font-px: 10;        /* Schrift der Nummer */
  --draw-transfer-origin: #c8262b;    /* Nullpunkt-Kreuz */
  --draw-transfer-origin-px: 22;      /* Armlänge des Kreuzes */
  --draw-transfer-origin-w-px: 1.5;   /* Strich des Kreuzes */
}

/* ---------- Thema: Blaupause (Vorgabe) ------------------------------ */
:root,
[data-theme="blueprint"] {
  --bg: #e9f0f5;
  --bg-grid: rgba(46, 84, 115, 0.09);
  --surface: #ffffff;
  --zoom-island-bg: rgba(255, 255, 255, .95);  /* = --surface, leicht durchscheinend */
  --ink: #16283a;
  --ink-soft: #4d6373;
  --line: #b7cbd8;
  --line-strong: #2e5473;
  --accent: #c1552c;
  --accent-ink: #ffffff;
  --accent-soft: rgba(193, 85, 44, 0.12);
  --success-bg: #e4f1e9;
  --success-ink: #205a3c;
  --warn-bg: #fdf3dd;
  --warn-ink: #7a5410;
  --danger-bg: #fbe7e3;
  --danger-ink: #8a2f1f;
  --focus-ring: #2e5473;
  --backdrop: rgba(0, 0, 0, 0.45);
  --card-shadow: none;
}

/* ---------- Thema: Sonnenglut --------------------------------------- */
[data-theme="sunglow"] {
  --bg: #241c15;
  --bg-grid: rgba(242, 160, 61, 0.05);
  --surface: #322619;
  --zoom-island-bg: rgba(50, 38, 25, .95);    /* = --surface */
  --ink: #f5e9d8;
  --ink-soft: #c7b6a0;
  --line: #5c4630;
  --line-strong: #f2a03d;
  --accent: #f2a03d;
  --accent-ink: #241c15;
  --accent-soft: rgba(242, 160, 61, 0.16);
  --success-bg: #2c3a26;
  --success-ink: #b7d99a;
  --warn-bg: #3d3018;
  --unnatural-bg: #3d2a12;
  --warn-ink: #f0d08a;
  --danger-bg: #402521;
  --danger-ink: #f0a08f;
  --focus-ring: #f2a03d;
  --backdrop: rgba(0, 0, 0, 0.6);
  --card-shadow: none;
}

/* ---------- Thema: Werkstatt ---------------------------------------- */
[data-theme="werkstatt"] {
  --bg: #1a1a1a;
  --bg-grid: rgba(255, 255, 255, 0.04);
  --surface: #242424;
  --zoom-island-bg: rgba(36, 36, 36, .95);    /* = --surface */
  --ink: #f2f2f2;
  --ink-soft: #b0b0b0;
  --line: #4a4a4a;
  --line-strong: #ff6b1a;
  --accent: #ff6b1a;
  --accent-ink: #1a1a1a;
  --accent-soft: rgba(255, 107, 26, 0.14);
  --success-bg: #23331f;
  --success-ink: #a8d68e;
  --warn-bg: #383018;
  --unnatural-bg: #3a2a14;
  --warn-ink: #f0d08a;
  --danger-bg: #3a201c;
  --danger-ink: #f0a08f;
  --focus-ring: #ff6b1a;
  --backdrop: rgba(0, 0, 0, 0.6);
  --card-shadow: none;
}