/* =====================================================================
   css/zeichnung.css — der Zeichen-Editor (Paket 04a der Stufe 2,
   docs/ZEICHNUNG-2026-09-23.md).

   Zwei Welten in einem Kasten, wie im Schaltlabor:
   - Die LEISTE ist Portal und folgt dem Theme — nur --pp-Tokens,
     Schriftgrößen aus der Leiter, Abstände ab 16 px im 4-px-Raster
     (docs/SKALA-2026-09-05.md; test/verify-zeichnung.js misst dieselben
     Regeln wie verify-skala.js).
   - Die ZEICHENFLÄCHE ist Papier und bleibt in beiden Themes weiß
     („Zeichenflächen bleiben schwarz auf weiß“, CLAUDE.md 5). Die Tinten
     der Zeichnung sind für weißes Papier gewählt; ein dunkles Papier
     machte die schwarze Tinte unsichtbar. Was auf dem Papier liegt
     (Textfeld, seine zwei Knöpfe), trägt deshalb feste Papierfarben.

   touch-action: none steht GENAU EINMAL — an der Zeichenfläche. Die
   Leiste behält ihr Wischen und Tippen; das Textfeld auf dem Papier
   bekommt `auto` zurück, sonst ließe sich darin kein Text auswählen
   (Muster der Ausnahmeliste in sandbox.css).
   ===================================================================== */

.zg-editor {
  display: flex; flex-direction: column; gap: var(--pp-sp-2);
  min-width: 0; font-family: var(--pp-sans); color: var(--pp-text);
}

/* ---------- Leiste ---------- */
.zg-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  padding: 4px; min-width: 0;
  /* Die Leiste bestimmt die Breite des Editors NICHT mit: Sonst wüchse
     in einem Wirt, der sich an seinen Inhalt schmiegt (Flex-Zeile,
     Dialog), die Zeichenfläche beim Werkzeugwechsel mit — das Pfeil-
     werkzeug bringt zwei Knöpfe mehr (in WebKit gemessen: 800 → 832 px).
     Die Breite kommt aus dem Wirt oder dem Papier, die Leiste bricht um. */
  contain: inline-size;
  background: var(--pp-surface); border: 1px solid var(--pp-line); border-radius: 8px;
}
.zg-gruppe {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding-right: 6px; border-right: 1px solid var(--pp-line);
}
.zg-gruppe:last-child { padding-right: 0; border-right: 0; }
.zg-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin: 0; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--pp-text-2); cursor: pointer; font: inherit;
}
.zg-knopf:hover { background: var(--pp-surface-2); color: var(--pp-text); }
.zg-knopf:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 1px; }
/* Der EIN-Zustand ist eine FORM, keine bloße Farbe (Muster .sb-b.on):
   ein Balken an der Unterkante — lesbar auch ohne Farbe. */
.zg-knopf[aria-pressed="true"] {
  background: var(--pp-accent-tint); color: var(--pp-accent-2);
  border-color: var(--pp-accent-line); box-shadow: inset 0 -2px 0 var(--pp-accent);
}
.zg-knopf:disabled { opacity: .45; cursor: default; background: transparent; }
/* [hidden] verliert sonst gegen display:inline-flex/flex — dieselbe Falle
   wie .pp-inreq (13.08.2026). */
.zg-knopf[hidden], .zg-gruppe[hidden], .zg-textbox[hidden] { display: none; }
.zg-ico { display: block; width: 19px; height: 19px; }

/* Der Dickenregler (Tinte 2, 25.09.2026, docs/TINTE-2026-09-25.md; seit
   UI1015-U3 im Pop-up der gewählten Dicke, .zg-dickenpop): ein
   Bereichsregler, eigene Gestalt statt der
   Browser-Vorgabe (die trägt in WebKit eine helle Spur, auf der dunklen
   Leiste ein Fremdkörper). Der Griff trägt die Akzentfarbe, die Spur ist
   eine Linie; die Größen stehen fest, weil font-size auf einen Regler
   nicht wirkt. Der Regler ist KEIN Knopf: kein Balken, kein
   aria-pressed — sein Zustand ist seine Stellung. */
.zg-regler {
  width: 96px; height: 32px; margin: 0 2px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.zg-regler::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--pp-line-2); }
.zg-regler::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
  background: var(--pp-accent); border: 2px solid var(--pp-surface); box-shadow: 0 0 0 1px var(--pp-line-2);
}
.zg-regler::-moz-range-track { height: 4px; border-radius: 2px; background: var(--pp-line-2); }
.zg-regler::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--pp-accent); border: 2px solid var(--pp-surface); box-shadow: 0 0 0 1px var(--pp-line-2);
}
.zg-regler:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 1px; }
/* Beim Textwerkzeug gibt es keine Strichbreite: [hidden] schlägt auch hier
   die display-Regel des Reglers. */
.zg-regler[hidden] { display: none; }

/* Farbknöpfe: die Tinte auf einem Stück Papier — schwarz auf der dunklen
   Leiste wäre sonst unsichtbar. */
.zg-farbpunkt {
  display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--pp-line-2);
}
.zg-farbpunkt > span { display: block; width: 12px; height: 12px; border-radius: 50%; }

/* ---------- Zeichenfläche (Papier) ---------- */
.zg-flaeche {
  position: relative; overflow: hidden; min-width: 0;
  background: #fff; border: 1px solid var(--pp-line); border-radius: 8px;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  outline: none;
}
.zg-flaeche:focus-visible { box-shadow: 0 0 0 2px var(--pp-accent); }
.zg-svg { display: block; width: 100%; height: auto; }
.zg-editor[data-werkzeug="stift"] .zg-flaeche,
.zg-editor[data-werkzeug="marker"] .zg-flaeche,
.zg-editor[data-werkzeug="linie"] .zg-flaeche,
.zg-editor[data-werkzeug="pfeil"] .zg-flaeche,
.zg-editor[data-werkzeug="rechteck"] .zg-flaeche,
.zg-editor[data-werkzeug="ellipse"] .zg-flaeche { cursor: crosshair; }
.zg-editor[data-werkzeug="text"] .zg-flaeche,
/* Formel (r2-01): getippt wird eine Stelle, wie beim Text. */
.zg-editor[data-werkzeug="formel"] .zg-flaeche { cursor: text; }
.zg-editor[data-werkzeug="radierer"] .zg-flaeche,
.zg-editor[data-werkzeug="lasso"] .zg-flaeche { cursor: default; }

/* Das Textfeld liegt AUF dem Papier, dort, wo der Text nachher steht. */
.zg-textbox {
  position: absolute; z-index: 2; display: flex; align-items: flex-start; gap: 2px;
  padding: 2px; background: #fff; border: 1px dashed #1d4ed8; border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  touch-action: auto; user-select: text; -webkit-user-select: text;
}
.zg-textfeld {
  margin: 0; padding: 0 2px; min-width: 4ch; overflow: hidden; resize: none;
  font-family: inherit; line-height: 1.25em; color: #1f2328;
  background: transparent; border: 0; outline: none;
}
.zg-tb-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: 4px; color: #57606a; cursor: pointer;
}
.zg-tb-knopf:hover { background: #eef2f6; color: #1f2328; }
.zg-tb-knopf .zg-ico { width: 16px; height: 16px; }

/* ---------- Meldungen ---------- */
.zg-status { font-size: var(--pp-fs-klein); line-height: var(--pp-lh-knapp); color: var(--pp-text-2); }
.zg-status:empty { display: none; }
.zg-kaputt {
  padding: var(--pp-sp-3); border: 1px dashed var(--pp-err); border-radius: 8px;
  font-size: var(--pp-fs-klein); line-height: var(--pp-lh-text); color: var(--pp-text);
}

/* Touch: jede Trefferfläche mindestens 44 px (R3). Der Regler wird 44 px
   hoch und breiter, sein Griff 28 px — ein 18-px-Griff unter dem Finger
   trifft daneben. */
@media (pointer: coarse) {
  .zg-knopf, .zg-tb-knopf { width: 44px; height: 44px; }
  .zg-regler { width: 128px; height: 44px; }
  .zg-regler::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12px; }
  .zg-regler::-moz-range-thumb { width: 24px; height: 24px; }
}

/* Telefon (Paket 04b, offener Punkt 2 der 04a-Doku): EINE wischbare
   Reihe statt vier umbrochener Zeilen — mit 44-px-Knöpfen kostete die
   Leiste sonst rund 200 px Höhe, auf dem Blatt von unten also fast das
   ganze Blatt. Dasselbe Muster wie die Werkzeugreihe der Arbeitsfläche
   (css/sandbox.css, .sb-tools): nicht umbrechen, waagerecht wischen,
   und der Wisch bleibt IN der Leiste (sonst zöge er am Ende der Reihe
   die Seite mit, in Safari samt Zurück-Geste). Die Gruppen behalten
   ihre Trennlinien; was nicht passt, liegt einen Wisch weiter rechts. */
@media (max-width: 760px) {
  .zg-leiste {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  .zg-gruppe { flex: none; flex-wrap: nowrap; }
}

/* R8 (13.10.2026, docs/APP-R8-HEFT-AUSWAHL-2026-10-13.md): der Umschalter
   Lasso ↔ Rechteck hinter dem Auswahlwerkzeug. Zwei Hälften im Symbol, die
   GELTENDE voll, die andere blass — eine Form-Aussage, keine bloße Farbe
   (er hat zwei Zustände, kein an/aus, also kein aria-pressed-Balken). */
.zg-auswahlform .zg-af-lasso, .zg-auswahlform .zg-af-rechteck { opacity: .38; }
.zg-auswahlform[data-form="lasso"] .zg-af-lasso,
.zg-auswahlform[data-form="rechteck"] .zg-af-rechteck { opacity: 1; }

/* ---------- Die kompakte Leiste (QA1013-Q09, A2-08) ----------
   Wo die Leiste wischt (js/zeichnung.js kompaktPruefen → zg-kompakt), lagen
   in der 410-px-Spalte der Mitschrift Rückgängig/Wiederholen bei x 1511 und
   die sechs Farben bei x 1075–1305 einer 392 px breiten Leiste. Jetzt:
   Rückgängig/Wiederholen fest vorn (sticky — sie wischen nicht mit weg),
   dahinter der Stilknopf, dann die Werkzeuge; die Farben liegen im
   Klappfeld, die drei Dicken bleiben in der Reihe (UI1015-U3). Ohne zg-kompakt (Laptop, umbrechende Leiste) bleibt alles, wie
   es war: der Stilknopf ruht, Verlauf steht vor den übrigen Aktionen. */
.zg-leiste:not(.zg-kompakt) > [data-gruppe="stil"] { display: none; }
.zg-leiste.zg-kompakt > [data-gruppe="verlauf"] {
  order: -2; position: sticky; left: 0; z-index: 1; background: var(--pp-surface);
}
.zg-leiste.zg-kompakt > [data-gruppe="stil"] { order: -1; }
.zg-leiste.zg-kompakt > [data-gruppe="farbe"] { display: none; }
.zg-stilknopf[aria-expanded="true"] { background: var(--pp-accent-tint); border-color: var(--pp-accent-line); }
.zg-stilknopf .zg-farbpunkt { width: 22px; height: 22px; }
.zg-stilfeld {
  position: fixed; z-index: 160; display: flex; flex-direction: column; gap: 6px;
  padding: 6px; max-width: calc(100vw - 16px); box-sizing: border-box;
  background: var(--pp-surface); color: var(--pp-text);
  border: 1px solid var(--pp-line); border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
  font-family: var(--pp-sans);
}
.zg-stilfeld .zg-feldgruppe { flex-wrap: wrap; padding-right: 0; border-right: 0; }
.zg-stilfeld .zg-feldgruppe + .zg-feldgruppe { padding-top: 6px; border-top: 1px solid var(--pp-line); }

/* ---------- Die drei Dicken (UI1015-U3, docs/UI1015-U3-2026-10-15.md) ----------
   Wie GoodNotes: drei Striche in der Stärke ihrer Voreinstellung (js/
   zeichnung.js dickeSym), die gewählte trägt den Balken wie jedes andere
   Werkzeug. Ein zweiter Klick auf sie öffnet das Pop-up mit dem Regler
   genau dieser Voreinstellung — am <body>, wie das Klappfeld der Farben. */
.zg-dicke[aria-expanded="true"] { background: var(--pp-accent-tint); border-color: var(--pp-accent-line); }
.zg-dickenpop {
  position: fixed; z-index: 160; display: flex; flex-direction: column; gap: 6px;
  width: 232px; max-width: calc(100vw - 16px); padding: 10px 12px; box-sizing: border-box;
  background: var(--pp-surface); color: var(--pp-text);
  border: 1px solid var(--pp-line); border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
  font-family: var(--pp-sans); font-size: var(--pp-fs-klein); line-height: var(--pp-lh-knapp);
}
.zg-dp-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.zg-dp-name { font-weight: 600; }
.zg-dp-wert { font-family: var(--pp-mono); font-weight: 500; color: var(--pp-text-2); font-variant-numeric: tabular-nums; }
.zg-dickenpop .zg-regler { width: 100%; margin: 0; }
.zg-dp-probe { display: block; width: 100%; height: 24px; color: var(--pp-text); }

/* ---------- Die gefaltete Leiste (sim1016-R4, A3-03/A2-08) ----------
   js/zeichnung.js leisteFalten: Passt die wischende Reihe nicht (Heft-Insel
   am iPad, neben Mitdenken, 1100 px), tragen die selteneren Knöpfe
   zg-gefaltet und stehen als Kopien im Feld hinter „»" (.zg-faltfeld, am
   <body> wie das Klappfeld der Farben). Die Spezifität (0,2,0) schlägt
   .zg-knopf/.zg-gruppe und die order-Regeln der kompakten Leiste. */
.zg-leiste .zg-gefaltet { display: none; }
.zg-leiste > [data-gruppe="falt"] { order: 1; }
/* bf1022-H1 (docs/BF1022-H1.md): Passt die Reihe nicht, rücken ihre Gruppen
   zuerst enger — Trenner 3 + 3 + 1 statt 6 + 6 + 1 px. Bei fünf Gruppen
   sind das 24 px: in der 313-px-Reihe (iPad quer, zwei Spalten) stehen so
   Rückgängig, Wiederholen, Stift, Radierer, die Dicke und „»" zugleich.
   (0,3,0) schlägt .hf-insel .zg-gruppe und .zg-leiste:not(.zg-kompakt). */
.zg-leiste.zg-eng { column-gap: 3px; }
.zg-leiste.zg-eng > .zg-gruppe { padding-right: 3px; }
.zg-faltknopf[aria-expanded="true"] { background: var(--pp-accent-tint); border-color: var(--pp-accent-line); }
.zg-faltfeld .zg-feldgruppe { max-width: 280px; }
/* Die drei Dicken im Pop-up, wenn in der Reihe nur die gewählte steht. */
.zg-dp-wahl { flex-wrap: nowrap; justify-content: space-between; padding-right: 0; border-right: 0; }
.zg-dp-wahl[hidden] { display: none; }
/* Rollt die Reihe trotzdem (Telefon), sagt es ein sichtbarer Rand mit
   Winkel am rechten Ende — ein halber Knopf sagte es nicht (A3-03: „im Bild
   keine Kante zu erkennen"). Klebt am Rand der Rolle, nimmt keine Breite
   (negativer Rand), verschwindet am Ende der Reihe (zg-rollt fällt). */
/* Steht „»" da, klebt ER am rechten Rand (wie Rückgängig links) — die
   Reihe rollt unter ihm hindurch, sein Schatten ist der Hinweis. */
.zg-leiste.zg-rollt > [data-gruppe="falt"] {
  position: sticky; right: 0; z-index: 1; background: var(--pp-surface);
  box-shadow: -10px 0 8px -6px rgba(0, 0, 0, .35);
}
.zg-leiste.zg-rollt:not(:has(> [data-gruppe="falt"]:not([hidden])))::after {
  content: "›"; order: 2; position: sticky; right: 0; flex: none; align-self: stretch;
  display: flex; align-items: center; justify-content: flex-end;
  width: 28px; margin-left: -28px; padding-right: 2px; box-sizing: border-box; pointer-events: none;
  font-size: var(--pp-fs-text); font-weight: 600; line-height: var(--pp-lh-knapp); color: var(--pp-accent-2);
  background: linear-gradient(to right, transparent, var(--pp-surface) 55%);
}