/* Meldungen und Zustaende, einheitlich auf allen Seiten (Rolf 2026-10-06, "Layout mit der Farbpalette" Punkt 1, angenommen
   "1, 2, 3, 5 jetzt"): Hinweis in Sonnenblumengelb mit !, Erfolg in Wiesengruen mit ✓, Fehler in Rot mit × - wie die Bausteine
   meldung.hinweis, meldung.erfolg, meldung.fehler im Sietch (041), deren Farben gestaltung.js als --hinweis, --erfolg und
   --warn/--fehler setzt. Gelb und Wiesengruen sind als Schrift auf Creme zu hell: die Farbe steht am Rand und am Zeichen, der
   Text bleibt in der Schriftfarbe; nur der Fehler ist auch als Text rot. Ein Zustand nie nur ueber die Farbe: immer mit Zeichen
   (Olivgruen und Rot sind fast gleich hell, 1,18, bei Rot-Gruen-Schwaeche kaum zu trennen; Backlog #147).
   Jede Meldung traegt die Klasse meldung und ihre Art (hinweis, erfolg, fehler); ohne Art ist sie neutral. Werkstatt, CRM,
   Druck, Stammdaten, Willkommen und Zugang binden diese Datei ein. */
.meldung.hinweis, .meldung.erfolg, .meldung.fehler { border-left: 3px solid; padding-left: 8px; }
.meldung.hinweis { border-left-color: var(--hinweis); }
.meldung.erfolg { border-left-color: var(--erfolg); }
.meldung.fehler { border-left-color: var(--warn, var(--fehler)); color: var(--warn, var(--fehler)); }
.meldung.hinweis::before, .meldung.erfolg::before, .meldung.fehler::before { font-weight: 700; margin-right: .35em; }
.meldung.hinweis::before { content: "!"; color: var(--hinweis); }
.meldung.erfolg::before { content: "✓"; color: var(--erfolg); }
.meldung.fehler::before { content: "×"; }

/* Bausteine der Zeile auf jeder Seite (laufband.js, Rolf 2026-10-06: DAU). Die Erklaerung an Knoepfen mit Zeichen, beim
   Darueberfahren und beim Fokus; Farben aus der Palette (Werkstatt, CRM, Druck, Stammdaten: --ink/--ground; Willkommen: --fg/--bg). */
.erklaerung {
  position: absolute; z-index: 80; max-width: min(280px, calc(100vw - 16px)); padding: 6px 9px; pointer-events: none;
  background: var(--ink, var(--fg)); color: var(--ground, var(--bg)); border-radius: 3px; font: 500 12.5px/1.3 var(--f-body);
}
.erklaerung[hidden] { display: none; }
/* Der Senden-Knopf: ein Pfeil nach oben im Kreis in der Akzentfarbe, 44 px; leer gesperrt (blass), waehrend Dune antwortet ■ */
button.senden {
  appearance: none; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0;
  margin: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--akzent);
}
button.senden svg { width: 36px; height: 36px; display: block; }
button.senden svg circle { fill: var(--ground, var(--bg)); stroke: var(--akzent); stroke-width: 1.5px; }
button.senden svg path { stroke: var(--ink, var(--fg)); }
button.senden svg rect { fill: var(--ink, var(--fg)); }
button.senden[aria-disabled="true"], button.senden:disabled { opacity: .4; cursor: default; }
button.senden:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
/* "Kenne ich" am Laufband (laufband.js, Backlog #164, #165): ein Wort an der Biene, leise neben "Ausprobieren"; 36 px hoch */
button.claude-laufband-kenne {
  appearance: none; flex: none; align-self: center; box-sizing: border-box; height: 36px; padding: 0 10px; border: 1px solid var(--line, currentColor); border-radius: 8px;
  background: none; color: var(--ink-2, var(--mute)); font: 500 13px/1 var(--f-body); cursor: pointer; white-space: nowrap;
}
button.claude-laufband-kenne[hidden] { display: none; }
button.claude-laufband-kenne:hover { color: var(--ink, var(--fg)); background: color-mix(in srgb, var(--ink, var(--fg)) 8%, transparent); }
button.claude-laufband-kenne:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* Die Bienen am Laufband (laufband.js, Backlog #165, Rolf 2026-10-06: "A und B, Knöpfe an der Biene"): sitzen vorn am Laufband,
   fliegen bei Neuem einmal herbei (.herbei), bei "weniger Bewegung" ohne Flug. Gelb und Anthrazit aus der Palette (--sel RAL 1023,
   --meldezeile-text), Augen in --papier; im Dunkeln ein heller Umriss. Reine Zierde (aria-hidden). */
.laufband-biene { --biene-gelb: var(--sel); --biene-streif: var(--meldezeile-text); --biene-fluegel: color-mix(in srgb, var(--papier) 80%, transparent);
  --biene-fluegelrand: var(--line); --biene-umriss: transparent; flex: none; align-self: center; width: 34px; height: 34px; cursor: pointer; }
.laufband-biene[hidden] { display: none; }
.laufband-biene svg { display: block; width: 100%; height: 100%; overflow: visible; }
.laufband-biene .biene-gelb { fill: var(--biene-gelb); }
.laufband-biene .biene-streif { fill: var(--biene-streif); }
.laufband-biene .biene-umriss { stroke: var(--biene-umriss); stroke-width: 2; }
.laufband-biene .biene-auge, .laufband-biene .biene-glanz { fill: var(--papier); }
.laufband-biene .biene-glanz { opacity: .85; }
.laufband-biene .biene-pupille { fill: var(--tinte); }
.laufband-biene .biene-linie { fill: none; stroke: var(--tinte); stroke-width: 3; stroke-linecap: round; }
.laufband-biene .biene-fuehler, .laufband-biene .biene-ring { fill: none; stroke: var(--biene-streif); stroke-width: 3; stroke-linecap: round; }
.laufband-biene .biene-ring { stroke-width: 6; stroke-linecap: butt; }
.laufband-biene .biene-fluegel ellipse { fill: var(--biene-fluegel); stroke: var(--biene-fluegelrand); stroke-width: 2; }
/* im Dunkeln: Streifen und Koerper der Arbeiterin dunkel wie der Grund, darum ein heller Umriss */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .laufband-biene { --biene-umriss: var(--ink-2); } }
:root[data-theme="dark"] .laufband-biene { --biene-umriss: var(--ink-2); }
/* herbei: von rechts heran, die Fluegel schwirren nur dabei (SCHAETZ: 0,7 s fuehlt sich wie Herbeieilen an, nicht wie Warten) */
.laufband-biene.herbei { animation: biene-herbei calc(.7s / var(--biene-tempo, 1)) cubic-bezier(.2, .8, .3, 1) both; }   /* Majas Tempo (Sietch 116) */
.laufband-biene.herbei .biene-fluegel { animation: biene-schwirr .1s linear 7 alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes biene-herbei { 0% { opacity: 0; transform: translate(60px, -14px) rotate(-8deg); } 70% { opacity: 1; transform: translate(-3px, 2px) rotate(3deg); }
  100% { opacity: 1; transform: none; } }
@keyframes biene-schwirr { to { transform: scaleY(.6); } }
@media (prefers-reduced-motion: reduce) { .laufband-biene.herbei, .laufband-biene.herbei .biene-fluegel { animation: none; } }
:root[data-biene="still"] .laufband-biene.herbei, :root[data-biene="still"] .laufband-biene.herbei .biene-fluegel { animation: none; }   /* Tempo 0: sie fliegt nicht */
/* der Knopf an der Biene: "Ausprobieren" beim Hinweis; das Sternchen davor macht jetzt die Biene */
.laufband-biene:not([hidden]) + .claude-laufband span::before { content: none; }
.claude-laufband:not(.ansteht):not([hidden]) { display: flex; align-items: center; gap: 8px; min-width: 0; }
.claude-laufband:not(.ansteht) span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.claude-laufband:not(.ansteht) b { flex: none; display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 8px;
  background: var(--akzent); color: var(--akzent-fg); font: 600 13px/1 var(--f-body); }
.claude-laufband:not(.ansteht):hover b, .claude-laufband:not(.ansteht):focus-visible b { text-decoration: underline; }
/* schmal (Handy, unter 600 px, SCHAETZ): die Biene mit ihren Knoepfen bekommt eine eigene Zeile, der Hinweis bricht bis zu
   drei Zeilen um - sonst bliebe neben "Ausprobieren" und "Kenne ich" kein Platz fuer den Text */
@media (max-width: 600px) {
  .claude-laufband-zeile { flex-wrap: wrap; }
  .claude-laufband-zeile .claude-laufband-text { flex: 1 1 100%; }
  .claude-laufband-zeile .zeile-lage { order: 2; }             /* die Lage schmal unten neben der Seitenwahl (#139) */
  .claude-laufband-zeile .claude-laufband:not(.ansteht) span, .eingang-laufband .claude-laufband:not(.ansteht) span {
    white-space: normal; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .claude-laufband:not(.ansteht) b { padding: 0 8px; }
  button.claude-laufband-kenne { padding: 0 8px; }
}
/* Wo die Zeile steht (laufband.js zeileLage, Backlog #139): oben angeheftet (klebt oben, schiebt den Inhalt), unten angeheftet
   (die Seite haelt unten frei, so hoch wie die Zeile) oder schwebend mit Griff, halb durchsichtig (Hintergrund 70 %, SCHAETZ aus
   #139), voll deckend bei Maus und Fokus. Chat und Laufband sind eine Einheit.
   Im Gespraech der linken Seite (Entwurf B, Rolf 2026-10-12; Werkstatt, spaeter jede Seite) kleben oben und unten an den Raendern
   der Spalte (sticky), nichts liegt mehr ueber dem Modell; nur schwebend bleibt frei ueber der Seite. */
.zeile-einheit[data-lage="oben"] { position: sticky; top: 0; z-index: 30; }
.zeile-einheit[data-lage="unten"] { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; border-radius: 0;
  border-top: 1px solid var(--line, var(--linie)); border-bottom: 0; }
.gespraech > .zeile-einheit[data-lage="oben"] { align-self: flex-start; z-index: 20; }
.gespraech > .zeile-einheit[data-lage="unten"] { position: sticky; left: auto; right: auto; z-index: 20; border-top: 0;
  background: var(--ground, var(--bg)); padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
.gespraech:has(> .zeile-einheit[data-lage="oben"]) { justify-content: flex-start; }
/* Hat die Person die Zeile in der Spalte hoeher gezogen (laufband.js "zeile-unten"/"zeile-oben", Max 2026-10-22), behaelt das Gespraech
   genau diese Hoehe, und der Baum gibt sie her (er rollt dann in sich, .baumrolle) - statt dass beide schrumpfen. */
.gespraech.mit-hoehe { flex: none; }
html[data-zeile="unten"] body { padding-bottom: var(--zeile-unten, 0px); }
html[data-zeile="unten"] { scroll-padding-bottom: var(--zeile-unten, 0px); }
.zeile-einheit[data-lage="schwebend"] { position: fixed; right: auto; bottom: auto; z-index: 40; width: min(760px, calc(100vw - 32px)); margin: 0;
  border: 1px solid var(--line, var(--linie)); border-radius: var(--rundung, 8px); box-shadow: var(--shadow, none);
  background: color-mix(in srgb, var(--ground, var(--bg)) 70%, transparent); backdrop-filter: blur(3px);
  opacity: .65;     /* stand bisher allein in app.css (zweite Regel derselben Lage, Backlog #265): jetzt hier, die Lage steht einmal */
  transition: background-color .15s; }
.zeile-einheit[data-lage="schwebend"]:hover, .zeile-einheit[data-lage="schwebend"]:focus-within { background: var(--ground, var(--bg)); opacity: 1; }
/* Rechts angeheftet (Max 2026-10-19: "der Gesprächsdialog soll sich auch rechts platzieren lassen", laufband.js zeileLage): eine Spalte
   aus Glas am rechten Rand, so hoch wie das Fenster, nur breit. Ihre Breite (--zeile-rechts, an der linken Kante zu ziehen; Vorgabe
   420 px, SCHAETZ) haelt die Seite frei, damit nichts darunter verschwindet; in der Werkstatt rueckt, was rechts ueber der Buehne
   steht (Ansichten, Mehrfachauswahl), um dieselbe Breite ein. */
.zeile-einheit[data-lage="rechts"] { position: fixed; top: var(--rand, 12px); right: var(--rand, 12px); bottom: var(--rand, 12px); left: auto; z-index: 40;
  width: var(--zeile-rechts, 420px); max-height: none; margin: 0; padding: 10px 12px;
  background: var(--glas-flaeche, var(--ground, var(--bg))); -webkit-backdrop-filter: blur(var(--glas-weichzeichnung, 3px)); backdrop-filter: blur(var(--glas-weichzeichnung, 3px));
  border: 0; border-radius: var(--glas-rundung, var(--rundung, 8px)); box-shadow: var(--glas-wurf, var(--shadow, none)); }
html[data-zeile="rechts"] .wrap, html[data-zeile="rechts"] .wrap:has(#stage) { padding-right: calc(var(--zeile-rechts, 420px) + 2 * var(--rand, 12px)); }
html[data-zeile="rechts"] .wrap:has(#stage) .views { right: calc(var(--zeile-rechts, 420px) + 2 * var(--rand, 12px)); }
html[data-zeile="rechts"] .wrap:has(#stage) .auswahlleiste { right: calc(var(--zeile-rechts, 420px) + 2 * var(--rand, 12px) + 10px); }
/* Die Zeile deckt nie den Schirm (Rolf 2026-10-07 vom iPhone: "Die Anzeige im iPhone hängt, ich kann weder nach oben noch nach
   unten" - nach einer Antwort mit Bild war die unten angeheftete Zeile 548 von 844 px hoch, darueber nur die Buehne, die die Gesten
   fuers Drehen nimmt): angeheftet oder schwebend hoechstens den ganzen Schirm, am Handy 62 % (SCHAETZ, tools/handy_probe.js);
   was nicht passt, rollt in der Zeile selbst. Am Handy ist sie der EINE Rollbereich - die Antwortkaesten darin rollen nicht noch
   einmal, denn verschachtelte Rollkaesten in einem angehefteten Element fangen auf iOS den Finger. */
/* Die Meldezeile mit Ja und Nein bleibt beim Rollen der Zeile sichtbar, oben oder unten, je nachdem, wo sie steht (Max 2026-10-23, Knopfleiste);
   schmal nicht: dort ist die Zeile zu niedrig fuer zwei haftende Leisten, und die Knopfleiste der Rueckfrage geht vor */
@media (min-width: 800px) {
  .zeile-einheit .claude-laufband-zeile { position: sticky; top: 0; bottom: 0; z-index: 2; background: var(--ground, var(--surface, var(--bg))); }
}
.zeile-einheit[data-lage] { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 799px) {
  .zeile-einheit[data-lage] { max-height: 62vh; max-height: 62dvh; }
  .zeile-einheit[data-lage] .claude-antwort, .zeile-einheit[data-lage] .claude-gefragt { max-height: none; overflow-y: visible; }
}
button.zeile-griff, button.zeile-lage {
  appearance: none; flex: none; align-self: center; display: inline-grid; place-items: center; width: 36px; height: 36px; box-sizing: border-box; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--ink-2, var(--mute)); cursor: pointer;
}
button.zeile-griff { cursor: grab; touch-action: none; }
button.zeile-griff:active { cursor: grabbing; }
button.zeile-griff[hidden] { display: none; }
button.zeile-griff svg, button.zeile-lage svg { width: 18px; height: 18px; }
button.zeile-griff:hover, button.zeile-lage:hover { color: var(--ink, var(--fg)); background: color-mix(in srgb, var(--ink, var(--fg)) 8%, transparent); }
button.zeile-griff:focus-visible, button.zeile-lage:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
/* Das Menue von Dune (kontext.js, Backlog #204): an der Maus, am Finger oder an der Biene; auf jeder Seite gleich, darum hier
   und nicht in app.css. Bis 600 px ein Blatt von unten (wie die Zeile), Gesperrtes leiser mit dem Grund daneben (Sitzungsregel 15). */
ul.kontext { position: fixed; z-index: 50; width: max-content; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow-y: auto;
  list-style: none; margin: 0; padding: 4px; background: var(--surface, var(--karte)); border: 1px solid var(--line, var(--linie));
  border-radius: 3px; box-shadow: var(--shadow, none); }
ul.kontext li { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 2px; cursor: pointer;
  font: 500 13px/1.3 var(--f-body); color: var(--ink, var(--fg)); }
ul.kontext li small { font: 400 13px/1.3 var(--f-body); color: var(--ink-2, var(--mute)); white-space: normal; }
/* Der ueberfahrene Punkt: Tinte ueber der Flaeche statt --surface-2 - im hellen Entwurf tragen --surface und --surface-2 denselben Wert
   (Sietch 041, @flaeche.farbe), Hover und Flaeche waren gleich (Backlog #264). Kein neuer Farbname, kein Literal; gemessen hell und dunkel
   (tools/kontext_probe.js). */
ul.kontext li[role^="menuitem"]:hover, ul.kontext li[role^="menuitem"]:focus { background: color-mix(in srgb, var(--ink, var(--fg)) 12%, var(--surface, var(--karte))); outline: 1px solid var(--akzent); }
ul.kontext li[aria-disabled="true"] { cursor: default; color: var(--ink-2, var(--mute)); }
ul.kontext li[role="menuitemradio"]::before { content: ""; flex: none; width: 1em; }
ul.kontext li[aria-checked="true"]::before { content: "✓"; }
ul.kontext li.leer { cursor: default; color: var(--ink-2, var(--mute)); }
ul.kontext li.menuekopf { padding: 6px 10px 4px; font: 600 14px/1.2 var(--f-body); }   /* der Kopf des Menues: der Ort oder Dune */
ul.kontext li.gruppe { padding: 6px 10px 2px; font: 600 11px/1.2 var(--f-body); letter-spacing: .04em; text-transform: uppercase; }
ul.kontext li.trenner { padding: 0; margin: 4px 0; border-top: 1px solid var(--line, var(--linie)); cursor: default; }
ul.kontext li.regler { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; cursor: default; }
ul.kontext li.regler input[type="range"] { grid-column: 1 / -1; width: 100%; min-width: 12em; margin: 2px 0 0; accent-color: var(--akzent); }
ul.kontext li.regler small.hinweis { grid-column: 1 / -1; }
ul.kontext li.regler button.vorgabe { grid-column: 1 / -1; justify-self: start; font: 500 12px/1 var(--f-body); padding: 4px 8px; min-height: 28px; border: 1px solid var(--line, var(--linie)); border-radius: 999px; background: none; color: var(--ink, var(--fg)); cursor: pointer; }
ul.kontext li.regler button.vorgabe[hidden] { display: none; }
ul.kontext li.regler button.vorgabe:hover, ul.kontext li.regler button.vorgabe:focus-visible { border-color: var(--akzent); outline: none; }
/* Das Menue als Kreis aus Glas (kontext.js api.kreis, Rolf 2026-10-13): die Biene in der Mitte, die Eintraege als Glasknoepfe auf bis zu drei Ringen
   (--x und --y je Knopf von der Mitte, --kb und --kh Breite und Hoehe, --aussen der Halbmesser); sie fliegen von der Biene an ihren Platz (--vx, --vy). Die Haut
   ist die des Glases (106): --glas-flaeche, --glas-weichzeichnung, --glas-schatten-farbe. */
.kreis { position: fixed; z-index: 50; pointer-events: none;   /* nur Knoepfe und Biene fangen den Klick (Backlog #355) */
  width: calc(var(--aussen) * 2); height: calc(var(--aussen) * 2); margin: calc(var(--aussen) * -1) 0 0 calc(var(--aussen) * -1); }   /* left und top: die Mitte */
.kreis-scheibe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; pointer-events: none;
  /* Die Scheibe ist der Grund der Seite, nicht das Glas: das Glas ist durchsichtig gewollt, die Scheibe soll den Text dahinter ruhig stellen
     (Max 2026-10-23, Bildschirmfoto "Einstellungen"; Deckung, Rand und Unschaerfe aus dem Sietch 240, ohne ihn durchsichtig wie seit #355) */
  background: color-mix(in srgb, var(--ground, var(--surface)) var(--kreis-scheibe-deckung, 0%), transparent);
  -webkit-backdrop-filter: blur(var(--kreis-scheibe-unschaerfe, 0px)); backdrop-filter: blur(var(--kreis-scheibe-unschaerfe, 0px));
  border: 1px solid color-mix(in srgb, var(--akzent) var(--kreis-rand-deckung, 0%), transparent);
  transform: scale(.25); opacity: 0; transition: transform .3s cubic-bezier(.2, .8, .3, 1), opacity .2s; }
.kreis.da .kreis-scheibe { transform: none; opacity: 1; }
/* Solange ein Kreis offen ist, treten die Objekte darunter zurueck (Max 2026-10-23 22:36 MESZ: "rechte Maustaste ab jetzt und Objekte dämpfen"):
   das 3D-Bild blasser und weich (Sietch 277, biene.daempfen-deckung und -unschaerfe; ohne Sietch ungedaempft). Klicks gehen weiter durch. */
#stage canvas { transition: opacity .2s, filter .2s; }
html.kreis-offen #stage canvas { opacity: var(--kreis-daempfen-deckung, 1); filter: blur(var(--kreis-daempfen-unschaerfe, 0px)); }
.kreis-mitte { pointer-events: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: calc(var(--kh) * 1.2); height: calc(var(--kh) * 1.2); border-radius: 50%; }
.kreis-mitte .laufband-biene { width: 46px; height: 46px; pointer-events: none; cursor: default; }
/* Die Mitte schliesst oder geht zurueck (Max 2026-10-19: "die Mitte bleibt Zurück/Schließen"): ein Kreuz oben, ein Pfeil in der zweiten Ebene */
.kreis-mitte { cursor: pointer; }
.kreis-mitte .kreis-zu { font-size: 1.6em; line-height: 1; color: var(--ink, var(--fg)); pointer-events: none; }
.kreis-mitte.regler .kreis-zu { display: none; }
/* Die Biene am Kreis (Kreis am Teil, Backlog #376; Max 2026-10-17: "Die Biene soll im Kreis fliegen", "Nur die Biene natürlich"): die Mitte gehoert
   dem Griff zum Verschieben, die Knoepfe stehen still, nur die Biene fliegt auf ihrer Bahn (--bahn, kontext.js) aussen um sie herum. Die Bahn dreht,
   der Knopf dreht gegenlaeufig und bleibt aufrecht; er beginnt oben. Eine Runde dauert acht Runden der Biene am Reiter (--biene-runde-dauer, Sietch
   101; der Faktor 8 SCHAETZ: langsam genug, dass man die Biene antippen kann), Majas Tempo (Sietch 116) teilt sie, Tempo 0 und weniger Bewegung: still oben. */
.kreis-bahn { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; transform: rotate(-90deg);
  animation: kreis-bahn calc(var(--biene-runde-dauer, 1.5s) * 8 / var(--biene-tempo, 1)) linear infinite; }
.kreis .kreis-bahn > .kreis-knoten.kreis-biene { left: var(--bahn); top: 0; width: var(--kh); height: var(--kh); margin: calc(var(--kh) / -2) 0 0 calc(var(--kh) / -2);
  transform: rotate(90deg); animation: kreis-bahn-knopf calc(var(--biene-runde-dauer, 1.5s) * 8 / var(--biene-tempo, 1)) linear infinite; }
/* Im Seitenmenue fliegt die Biene selbst auf der Bahn (Max 2026-10-19, auf der Karte: "aussen" um die Knoepfe): Zierde, kein Knopf, kein Klick */
.kreis .kreis-bahn > .kreis-flieger { position: absolute; left: var(--bahn); top: 0; width: var(--biene-groesse, 26px); height: var(--biene-groesse, 26px);
  margin: calc(var(--biene-groesse, 26px) / -2) 0 0 calc(var(--biene-groesse, 26px) / -2); pointer-events: none;
  transform: rotate(90deg); animation: kreis-bahn-knopf calc(var(--biene-runde-dauer, 1.5s) * 8 / var(--biene-tempo, 1)) linear infinite; }
:root[data-biene="still"] .kreis .kreis-bahn > .kreis-flieger { animation: none; }
/* Am Teil ist die Biene ein Knopf, aber ohne Glas drumherum (Max 2026-10-19: "Kann sie auch nur mit Ihrem eigenen Umriss fliegen ohne zusätzichen
   Kreis?"): nur ihr Umriss fliegt, ihr Name steht im aria-label; der Ring beim Fokus mit der Tastatur bleibt */
.kreis .kreis-knoten.kreis-biene { background: none; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.kreis .kreis-knoten.kreis-biene:hover { border-color: transparent; }
.kreis .kreis-knoten.kreis-biene > span:not(.laufband-biene) { display: none; }
.kreis .kreis-knoten.kreis-biene .laufband-biene { width: calc(var(--biene-groesse, 26px) * 1.4); height: calc(var(--biene-groesse, 26px) * 1.4); }
/* Sie schaut zur Mitte (kontext.js schaue): rotateY wendet sie in 3D um ihre Hochachse, die Drehung in der Ebene richtet den Kopf aus; im Flug
   schlagen die Fluegel (Tempo 0 und weniger Bewegung: still) */
.kreis-bahn { z-index: 2; }
.kreis .biene-dreh { display: block; width: 100%; height: 100%; transform-style: preserve-3d; }
.kreis-flieger, .kreis-knoten.kreis-biene { perspective: 120px; }
.kreis .biene-dreh svg { transform-origin: 50% 55%; }
.kreis .kreis-bahn .biene-fluegel { animation: biene-schwirr .08s linear infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
:root[data-biene="still"] .kreis .kreis-bahn .biene-fluegel { animation: none; }
@media (prefers-reduced-motion: reduce) { .kreis .kreis-bahn .biene-fluegel { animation: none; } }
/* Die Sprechblase der Biene (kontext.js sage): was hinter dem Knopf steckt, an dem sie vorbeifliegt */
.kreis-blase { position: fixed; z-index: 1; max-width: 240px; padding: 6px 10px; border-radius: 12px; pointer-events: none;
  background: color-mix(in srgb, var(--glas-flaeche, var(--surface)) 96%, transparent); border: 1px solid var(--line, var(--linie));
  color: var(--ink, var(--fg)); font: 500 12px/1.3 var(--f-body); box-shadow: 0 4px 12px color-mix(in srgb, var(--glas-schatten-farbe) 26%, transparent); }
.kreis-blase[hidden] { display: none; }
.kreis-blase b { font-weight: 600; }
@keyframes kreis-bahn { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@keyframes kreis-bahn-knopf { from { transform: rotate(90deg); } to { transform: rotate(-270deg); } }
:root[data-biene="still"] .kreis-bahn, :root[data-biene="still"] .kreis .kreis-bahn > .kreis-knoten.kreis-biene { animation: none; }
.kreis-knoten.kreis-biene .laufband-biene { width: var(--biene-groesse, 26px); height: var(--biene-groesse, 26px); margin-bottom: 1px; pointer-events: none; cursor: inherit; }
.kreis.schmal .kreis-knoten.kreis-biene .laufband-biene { width: 24px; height: 24px; margin-bottom: 0; }
.kreis-mitte.regler { z-index: 2; width: 152px; height: auto; min-height: 84px; border-radius: 22px; padding: 10px 12px; gap: 3px; text-align: center;
  background: color-mix(in srgb, var(--glas-flaeche, var(--surface)) 96%, transparent); border: 1px solid var(--line, var(--linie)); font: 600 12px/1.2 var(--f-body);
  color: var(--ink, var(--fg)); box-shadow: 0 6px 18px color-mix(in srgb, var(--glas-schatten-farbe) 30%, transparent); }
.kreis.schmal .kreis-mitte.regler { width: 132px; padding: 8px 10px; }
.kreis-mitte.regler small { font: 500 12px/1.2 var(--f-mono, var(--f-body)); color: var(--ink-2, var(--mute)); }
.kreis-mitte.regler input[type="range"] { width: 100%; margin: 2px 0; accent-color: var(--akzent); }
.kreis-mitte.regler button.vorgabe { font: 500 11px/1 var(--f-body); padding: 4px 8px; min-height: 26px; border: 1px solid var(--line, var(--linie)); border-radius: 999px; background: none; color: var(--ink, var(--fg)); cursor: pointer; }
.kreis-mitte.regler button.vorgabe[hidden] { display: none; }
.kreis-knoten { position: absolute; left: calc(var(--aussen) + var(--x)); top: calc(var(--aussen) + var(--y)); width: var(--kb); height: var(--kh); margin: calc(var(--kh) / -2) 0 0 calc(var(--kb) / -2); padding: 2px 1px;
  border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; overflow: hidden;
  background: color-mix(in srgb, var(--glas-flaeche, var(--surface)) 100%, transparent); color: var(--ink, var(--fg));
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); box-shadow: 0 4px 12px color-mix(in srgb, var(--glas-schatten-farbe) 26%, transparent);
  font: 600 9.5px/1.15 var(--f-body); letter-spacing: -.01em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transform: translate(calc(var(--vx) - var(--x)), calc(var(--vy) - var(--y))) scale(.3); opacity: 0;
  transition: transform .34s cubic-bezier(.2, .8, .3, 1) calc(var(--i) * 16ms), opacity .2s calc(var(--i) * 16ms), background .15s, border-color .15s; }
.kreis.da .kreis-knoten { transform: none; opacity: 1; }
/* Klicks: der Kreis und die Scheibe fangen nichts (oben), nur die Knoepfe und die Mitte; der Rest geht an die Zeichnung darunter */
.kreis-knoten { pointer-events: auto; }
/* Die Marken der farbigen Teile (wissen.symbolteil.marke) loesen sich aus der Palette der Werkstatt auf (werkstatt.css, hell und dunkel): der Wert
   steht dort einmal (Gebot 2), hier nur der Name, unter dem HC.symbol ihn sucht. Wo die Palette nicht geladen ist, faellt var() auf die Schriftfarbe. */
.kreis { --marke-rot: var(--rot); --marke-gruen: var(--gruen); --marke-blau: var(--blau); --marke-gelb: var(--gelb); --marke-orange: var(--orange);
  --marke-stahl: var(--stahl); --marke-oliv: var(--oliv); --marke-grau: var(--grau); --marke-schwarz: var(--schwarz); --marke-weiss: var(--weiss); }
/* Das Zeichen des Begriffs (Sietch 123): gefuellt, Schriftfarbe im Koerper, ein farbiger Teil die Marke (--marke-<name>, von HC.symbol gesetzt) */
.kreis-zeichen { width: 22px; height: 22px; flex: none; margin-bottom: 2px; pointer-events: none; }
.kreis-zeichen .zeichen-koerper { fill: currentColor; }
.kreis-knoten.mit-zeichen span { -webkit-line-clamp: 2; }
.kreis.schmal .kreis-zeichen { width: 14px; height: 14px; margin-bottom: 0; }
.kreis-knoten span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; overflow-wrap: break-word; }
.kreis-knoten small { font: 500 9.5px/1.1 var(--f-mono, var(--f-body)); color: var(--ink-2, var(--mute)); }
.kreis.schmal .kreis-knoten { font-size: 10px; line-height: 1.1; padding: 2px; }
.kreis.schmal .kreis-knoten span { -webkit-line-clamp: 2; }
.kreis-knoten:hover, .kreis-knoten:focus-visible, .kreis-knoten.offen { border-color: var(--akzent); outline: none; }
.kreis-knoten:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 45%, transparent), 0 4px 12px color-mix(in srgb, var(--glas-schatten-farbe) 26%, transparent); }
.kreis-knoten[aria-checked="true"] { background: var(--akzent); color: var(--akzent-fg); border-color: var(--akzent); }
.kreis-knoten[aria-checked="true"] small { color: inherit; }
.kreis-knoten[aria-disabled="true"] { cursor: default; opacity: .55 !important; }
@media (prefers-reduced-motion: reduce) {
  .kreis-scheibe, .kreis-knoten { transition: none; transform: none; opacity: 1; }
  .kreis-bahn, .kreis .kreis-bahn > .kreis-knoten.kreis-biene, .kreis .kreis-bahn > .kreis-flieger { animation: none; }
  .kreis .kreis-bahn > .kreis-knoten.kreis-biene, .kreis .kreis-bahn > .kreis-flieger { transform: rotate(90deg); }
}
ul.kontext.blatt { left: 16px; right: 16px; bottom: 16px; top: auto; width: auto; max-width: none; max-height: 70vh; }
ul.kontext.blatt li { flex-wrap: wrap; gap: 2px 10px; align-items: baseline; min-height: 44px; align-content: center; }
ul.kontext.blatt li small { flex-basis: 100%; }
ul.kontext.blatt li[role="menuitemradio"] small { padding-left: calc(1em + 10px); }
/* Rueckfrage als Auswahl (laufband.js HC.rueckwahl, Backlog #179, Rolf 2026-10-07: "wie hier mit entscheidungsvorschlag"): die Optionen
   untereinander, jede mit Beschriftung und einem Satz, die empfohlene zuerst mit Akzentrand; "Andere …" leiser darunter. 44 px
   Fingerziel (SCHAETZ wie der Senden-Knopf). */
.rueckfrage-wahl { margin: 10px 0 4px; max-width: 46rem; }
.rueckfrage-wahl .wahl-frage { margin: 0 0 8px; font: 600 15px/1.35 var(--f-body); color: var(--ink, var(--fg)); }
/* Die Knoepfe als Knopfleiste, die beim Rollen stehen bleibt (Max 2026-10-23: "im dialog muss man immer nach unten scrollen um die Knöpfe
   zu sehen. dafür sollte eine Knopfleiste da hin."): der Text darueber rollt, die Frage mit ihren Knoepfen haftet unten im Rollbereich (in der
   Zeile die .zeile-einheit, sonst das Fenster), die Knoepfe nebeneinander, solange der Platz reicht. Haften muss der ganze Block: ein
   Element haftet nur innerhalb seines Elternteils. In der Zeile steht die Leiste unter der Antwort (.claude-knopfleiste, claude.js), nicht
   in ihr - die geklappte Antwort (.geklappt, overflow hidden) schnitt sie sonst ab. tools/knopfleiste_probe.js */
.rueckfrage-wahl, .claude-knopfleiste { position: sticky; bottom: 0; z-index: 1; background: var(--ground, var(--surface, var(--bg))); }
.rueckfrage-wahl { padding: 6px 0; }
.claude-knopfleiste:empty { display: none; }
.rueckfrage-wahl .wahl-liste { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.rueckfrage-wahl .wahl-liste > button { margin: 0; }
.rueckfrage-wahl button.wahl-option { flex: 1 1 14rem; }
.rueckfrage-wahl button.wahl-uebernehmen, .rueckfrage-wahl button.wahl-andere { align-self: center; }
/* schmal in der Zeile nur die Beschriftungen: mit den Saetzen naehme die Leiste die ganze Zeile ein (gemessen 390 px: 158 von 220 px) */
@media (max-width: 799px) {
  .zeile-einheit .rueckfrage-wahl .wahl-satz { display: none; }
  .zeile-einheit .rueckfrage-wahl button.wahl-option { flex-basis: 8rem; }
}
.rueckfrage-wahl button.wahl-option { appearance: none; display: grid; gap: 2px; text-align: left; min-height: 44px; box-sizing: border-box;
  padding: 8px 12px; border: 1px solid var(--line, var(--linie)); border-radius: var(--rundung, 8px); background: var(--surface, var(--karte));
  color: var(--ink, var(--fg)); font: inherit; cursor: pointer;
  text-transform: none; letter-spacing: 0; }   /* Saetze, keine Beschriftung: in der Werkstatt sind Knoepfe sonst Grossbuchstaben (.werk button, .wfirmen button) */
.rueckfrage-wahl button.wahl-option.empfohlen { border-color: var(--akzent); box-shadow: inset 3px 0 0 var(--akzent); }
.rueckfrage-wahl[data-mehrfach="true"] button.wahl-option[aria-pressed="true"] {
  border-color: var(--akzent); box-shadow: inset 3px 0 0 var(--akzent); outline: 1px solid var(--akzent);
  background: color-mix(in srgb, var(--akzent) 12%, var(--surface, var(--karte)));
}
.rueckfrage-wahl .wahl-text { font: 600 14px/1.3 var(--f-body); }
.rueckfrage-wahl .wahl-satz { font: 400 13px/1.35 var(--f-body); color: var(--ink-2, var(--mute)); }
.rueckfrage-wahl button.wahl-uebernehmen { appearance: none; justify-self: start; min-height: 40px; box-sizing: border-box; padding: 0 12px;
  border: 1px solid var(--akzent); border-radius: var(--rundung, 8px); background: var(--akzent); color: var(--akzent-fg);
  font: 600 13px/1 var(--f-body); cursor: pointer; text-transform: none; letter-spacing: 0; }
.rueckfrage-wahl button.wahl-andere { appearance: none; justify-self: start; min-height: 36px; box-sizing: border-box; padding: 0 12px;
  border: 1px dashed var(--line, var(--linie)); border-radius: var(--rundung, 8px); background: none; color: var(--ink-2, var(--mute));
  font: 500 13px/1 var(--f-body); cursor: pointer; text-transform: none; letter-spacing: 0; }
.rueckfrage-wahl button:hover { border-color: var(--akzent); }
.rueckfrage-wahl button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.rueckfrage-wahl button:disabled { opacity: .6; cursor: default; }
/* in der Meldezeile: die weiteren Optionen neben dem Vorschlag */
.claude-laufband-wahlen { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.claude-laufband-wahlen[hidden] { display: none; }
.claude-laufband-wahlen .claude-laufband-nein.andere { border-style: dashed; }

/* Die Griffe zum Ziehen der Masse (fenstermass.js, Rolf 2026-10-14): feste Flaechen im Dokument, an der Kante ihres Kastens, unsichtbar bis
   zum Ueberfahren oder zum Fokus (Tastatur). Eine feine Linie in der Akzentfarbe zeigt die Kante; die Ecke traegt zwei schraege Striche. */
.mass-griff { position: fixed; z-index: 5; box-sizing: border-box; background-clip: content-box; touch-action: none; user-select: none; -webkit-user-select: none; }
.mass-griff[hidden] { display: none; }
.mass-griff.mass-r, .mass-griff.mass-l { cursor: ew-resize; padding: 0 7px; }
.mass-griff.mass-b, .mass-griff.mass-t { cursor: ns-resize; padding: 7px 0; }
.mass-griff.mass-rb, .mass-griff.mass-lt { cursor: nwse-resize; }
.mass-griff.mass-rt, .mass-griff.mass-lb { cursor: nesw-resize; }
.mass-griff:hover, .mass-griff:focus-visible, .mass-griff.zieht { background-color: color-mix(in srgb, var(--akzent) 70%, transparent); }
.mass-griff.mass-rb:hover, .mass-griff.mass-rb:focus-visible, .mass-griff.mass-rb.zieht { background-color: transparent; }
.mass-griff.mass-rb { background: linear-gradient(135deg, transparent 0 55%, color-mix(in srgb, var(--ink) 35%, transparent) 55% 63%, transparent 63% 77%, color-mix(in srgb, var(--ink) 35%, transparent) 77% 85%, transparent 85%); }
.mass-griff.mass-rb:hover, .mass-griff.mass-rb:focus-visible, .mass-griff.mass-rb.zieht { background: linear-gradient(135deg, transparent 0 55%, var(--akzent) 55% 63%, transparent 63% 77%, var(--akzent) 77% 85%, transparent 85%); }
.mass-griff:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
/* Der Trenner zwischen Baum und Zeile (laufband.js "zeile-unten", "zeile-oben") traegt immer einen Strich zum Anfassen: ohne ihn war die
   Kante nur zu finden, wenn die Maus zufaellig auf ihr stand (Max 2026-10-23: "ich kann mit der Maus ... die größen der Bereiche noch
   nicht verschieben"). */
.mass-griff[data-fenster="zeile-unten"], .mass-griff[data-fenster="zeile-oben"] { display: grid; place-items: center; }
.mass-griff[data-fenster="zeile-unten"][hidden], .mass-griff[data-fenster="zeile-oben"][hidden] { display: none; }
.mass-griff[data-fenster="zeile-unten"]::after, .mass-griff[data-fenster="zeile-oben"]::after { content: ""; width: 40px; height: 4px; border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 35%, transparent); }
.mass-griff[data-fenster="zeile-unten"]:hover::after, .mass-griff[data-fenster="zeile-oben"]:hover::after,
.mass-griff[data-fenster="zeile-unten"].zieht::after, .mass-griff[data-fenster="zeile-oben"].zieht::after { background: var(--akzent); }
/* Die Linie zwischen Baum und Zeile IST der Griff (Max 2026-10-23 auf devdune, mit Bild: "hier kann ich mit der Maus immer noch nicht die
   beiden Frames an der trennlinie hoch und runter ziehen"): er griff die Linie ueber "Mehr zum Modell" (.mehrmodell, app.css), der Griff lag
   aber unsichtbar rund 50 px tiefer an der Oberkante der Zeile. Jetzt zieht der Griff die Linie selbst (die Inhaltsflaeche, 2 px zwischen dem
   Polster), und die Linie ueber "Mehr zum Modell" faellt weg, solange die Zeile unter dem Baum steht - es gibt genau eine Trennlinie. */
.mass-griff[data-fenster="zeile-unten"], .mass-griff[data-fenster="zeile-oben"] { background-color: var(--line); }
.mass-griff[data-fenster="zeile-unten"]:hover, .mass-griff[data-fenster="zeile-oben"]:hover, .mass-griff[data-fenster="zeile-unten"]:focus-visible,
.mass-griff[data-fenster="zeile-oben"]:focus-visible, .mass-griff[data-fenster="zeile-unten"].zieht, .mass-griff[data-fenster="zeile-oben"].zieht { background-color: var(--akzent); }
.seite:has(.gespraech > .zeile-einheit[data-lage="unten"]) .mehrmodell, .seiteninhalt:has(.gespraech > .zeile-einheit[data-lage="unten"]) .mehrmodell { border-top: 0; }
@media (pointer: coarse) { .mass-griff.mass-r, .mass-griff.mass-l { padding: 0 10px; } .mass-griff.mass-b, .mass-griff.mass-t { padding: 10px 0; } }

/* Der eigene Platz des Vorschlags (laufband.js vorschlaege(), Rolf 2026-10-14: "ein Vorschlag darf die Meldezeile nicht belegen"): eine
   Zeile unter der Zeile des Laufbands, im Ton der Anregungen, nicht in der Farbe der Meldezeile - er verlangt keine Antwort. */
.claude-vorschlag-zeile { display: flex; gap: 6px; align-items: center; min-width: 0; flex: 1 1 100%; order: 20; }   /* eine Umbruchzeile in .claude-laufband-zeile */
.claude-vorschlag-zeile[hidden] { display: none; }
.claude-vorschlag { appearance: none; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 2px; border: 0;
  background: none; cursor: pointer; text-align: left; font: 400 13px/1.5 var(--f-body); color: var(--ink-2); }
.claude-vorschlag span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.claude-vorschlag span::before { content: "✦ "; color: var(--akzent); }
.claude-vorschlag b { flex: none; display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 8px;
  background: var(--akzent); color: var(--akzent-fg); font: 600 13px/1 var(--f-body); }
.claude-vorschlag:hover span, .claude-vorschlag:focus-visible span { color: var(--ink); text-decoration: underline; }
.claude-vorschlag:focus-visible, .claude-vorschlag-nein:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.claude-vorschlag-nein { appearance: none; cursor: pointer; flex: none; min-height: 30px; font: 500 12px/1 var(--f-mono); padding: 5px 10px; border-radius: 3px;
  background: none; color: var(--ink-2); border: 1px solid var(--line); }
.claude-vorschlag-nein[hidden] { display: none; }

/* Lage und Masse eines Teils (lagemass.js, Backlog #382, Max 2026-10-17): eine Tafel aus Glas an der Maus, wie die Mitte des Kreises;
   schmal (bis 600 px, wie kontext.js SCHMAL) ein Blatt von unten. Je Gruppe drei Felder nebeneinander, die Namen klein darueber. */
.lagemass { position: fixed; z-index: 51; width: 300px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; box-sizing: border-box;
  margin: 0; padding: 10px 12px 12px; border-radius: 16px; display: flex; flex-direction: column; gap: 8px;
  background: color-mix(in srgb, var(--glas-flaeche, var(--surface)) 96%, transparent); border: 1px solid var(--line, var(--linie));
  color: var(--ink, var(--fg)); font: 400 13px/1.3 var(--f-body); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--glas-schatten-farbe) 30%, transparent); }
.lagemass.schmal { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; max-height: 70vh; }
.lagemass-kopf { display: flex; align-items: center; gap: 8px; }
.lagemass-kopf strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/1.2 var(--f-body); }
.lagemass-zu { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--ink-2, var(--mute)); font: 400 20px/1 var(--f-body); cursor: pointer; }
.lagemass-gruppe { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.lagemass-gruppe legend { padding: 0; margin-bottom: 2px; font: 600 12px/1.2 var(--f-body); color: var(--ink-2, var(--mute)); }
.lagemass-gruppe label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lagemass-gruppe label span { font: 500 11px/1.2 var(--f-body); color: var(--ink-2, var(--mute)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lagemass-gruppe input { width: 100%; min-width: 0; box-sizing: border-box; min-height: 32px; padding: 4px 6px; border: 1px solid var(--line, var(--linie)); border-radius: 8px;
  background: var(--surface, transparent); color: var(--ink, var(--fg)); font: 500 13px/1.2 var(--f-mono, var(--f-body)); }
.lagemass-gruppe input:disabled { opacity: .7; }
.lagemass-halten { display: flex; align-items: center; gap: 6px; min-height: 28px; font: 400 12px/1.3 var(--f-body); color: var(--ink, var(--fg)); cursor: pointer; }
.lagemass-halten input { margin: 0; accent-color: var(--akzent); }
.lagemass-hinweis, .lagemass-befehl { font: 400 12px/1.3 var(--f-body); color: var(--ink-2, var(--mute)); }
.lagemass-befehl { font-family: var(--f-mono, var(--f-body)); overflow-wrap: anywhere; }
.lagemass-befehl:empty { display: none; }
.lagemass-fuss { display: flex; align-items: center; gap: 8px; }
.lagemass-meldung { flex: 1 1 auto; min-width: 0; font: 400 12px/1.3 var(--f-body); color: var(--ink-2, var(--mute)); }
.lagemass-ok { flex: none; min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--akzent); color: var(--akzent-fg); font: 600 13px/1 var(--f-body); cursor: pointer; }
.lagemass-ok:disabled { opacity: .5; cursor: default; }
.lagemass-zu:focus-visible, .lagemass-ok:focus-visible, .lagemass-gruppe input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* Maja, die fleissige Biene am Zeiger (maja.js, Sitzungsregel 29): Glas wie die Sprechblase des Kreises, hoechstens drei Aktionen in
   einer Reihe; sie selbst ist Zierde (aria-hidden), die Knoepfe sagen alles */
.maja { position: fixed; left: 0; top: 0; z-index: 60; display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--glas-flaeche, var(--surface)) 96%, transparent); border: 1px solid var(--line, var(--linie));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--glas-schatten-farbe) 28%, transparent); font: 500 12px/1.2 var(--f-body);
  color: var(--ink, var(--fg)); will-change: transform; max-width: min(520px, calc(100vw - 16px)); }
.maja[hidden] { display: none; }
.maja.frage { z-index: 75; }   /* mit einer Rueckfrage ueber dem kleinen Dialog (app.css .rueckfrage-huelle, 70) */
/* nur ihre Knoepfe nehmen Klicks; was dazwischen liegt (Biene, Rand, Titel), laesst sie durch - sie landet oft neben dem Griff, den man
   als Naechstes fasst (Freigabelauf 2026-10-20: der Zug am x-Pfeil traf "div.maja" statt des Griffs) */
.maja, .maja .maja-farbe, .maja .maja-reihe { pointer-events: none; }
.maja button { pointer-events: auto; }
.maja .maja-biene { flex: none; width: 26px; height: 26px; }
.maja.fliegt .maja-biene .biene-fluegel { animation: biene-schwirr .08s linear infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) { .maja.fliegt .maja-biene .biene-fluegel { animation: none; } }
:root[data-biene="still"] .maja .maja-biene .biene-fluegel { animation: none; }
.maja-reihe { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.maja-tat { display: inline-flex; align-items: baseline; gap: 6px; min-height: 28px; padding: 0 12px; border: 0; border-radius: 999px;
  background: var(--akzent); color: var(--akzent-fg); font: 600 12px/1 var(--f-body); cursor: pointer; white-space: nowrap; }
.maja-tat small { font-weight: 400; opacity: .85; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.maja-tat:focus-visible, .maja-zu:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.maja-farbe { display: flex; align-items: center; gap: 4px; }
.maja-titel { padding: 0 4px; white-space: nowrap; }
.maja-hinweis { padding: 0 10px 0 2px; font-weight: 600; white-space: nowrap; }   /* beim Ziehen im Baum: was das Loslassen tut (teile.js) */
.maja-tat.maja-punkt { width: 24px; min-height: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid var(--line, var(--linie)); }
.maja-tat.maja-mehr { background: none; color: var(--ink, var(--fg)); border: 1px solid var(--line, var(--linie)); font-weight: 500; }
.maja-zu { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2, var(--mute));
  font: 400 16px/1 var(--f-body); cursor: pointer; }

/* Der Grashuepfer (grashuepfer.js, Sitzungsregel 29): er springt zum naechsten Menuepunkt und zeigt ihn, die Person klickt, er hakt ab.
   Die Liste steht unten links aus Glas wie Maja; die Figur huepft im Bogen (weniger Bewegung: sie springt) */
.grashuepfer { position: fixed; left: 12px; bottom: 12px; z-index: 61; max-width: min(320px, calc(100vw - 24px)); padding: 8px 10px 10px;
  border-radius: 12px; border: 1px solid var(--line, var(--linie)); background: color-mix(in srgb, var(--glas-flaeche, var(--surface)) 88%, transparent);
  backdrop-filter: blur(10px); box-shadow: 0 6px 18px color-mix(in srgb, var(--glas-schatten-farbe) 28%, transparent); color: var(--ink, var(--fg)); font-size: 13px; }
.grashuepfer-kopf { display: flex; align-items: center; gap: 8px; }
.grashuepfer-kopf img { width: 22px; height: 22px; flex: none; }
.grashuepfer-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grashuepfer-zu { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2, var(--mute)); cursor: pointer; }
.grashuepfer-zu:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.grashuepfer-liste { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.grashuepfer-liste li { display: flex; align-items: baseline; gap: 6px; }
.grashuepfer-liste li.jetzt { font-weight: 600; }
.grashuepfer-liste li.fertig { color: var(--ink-2, var(--mute)); }
.grashuepfer-liste li small { color: var(--ink-2, var(--mute)); font-weight: 400; }
.grashuepfer-haken { flex: none; width: 1.1em; color: var(--akzent); }
.grashuepfer-ende { color: var(--akzent); font-weight: 600; }
.grashuepfer-figur { position: fixed; left: 0; top: 0; z-index: 76; pointer-events: none; display: flex; align-items: center; gap: 6px;
  transition: transform .35s ease-out; }
.grashuepfer-figur img { width: 32px; height: 32px; filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--glas-schatten-farbe) 35%, transparent)); }
.grashuepfer-figur.huepft img { animation: grashuepfer-sprung .35s ease-out; }
.grashuepfer-figur.fertig img { animation: grashuepfer-sprung .35s ease-out 2; }
.grashuepfer-hinweis { padding: 2px 8px; border-radius: 999px; background: var(--glas-flaeche, var(--surface)); color: var(--ink, var(--fg));
  border: 1px solid var(--line, var(--linie)); font-size: 12px; white-space: nowrap; box-shadow: 0 6px 18px color-mix(in srgb, var(--glas-schatten-farbe) 28%, transparent); }
.grashuepfer-ziel { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 6px; }
@keyframes grashuepfer-sprung { 0% { transform: translateY(0); } 45% { transform: translateY(-18px) rotate(-8deg); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .grashuepfer-figur { transition: none; } .grashuepfer-figur.huepft img, .grashuepfer-figur.fertig img { animation: none; } }
:root[data-biene="still"] .grashuepfer-figur { transition: none; }
:root[data-biene="still"] .grashuepfer-figur img { animation: none; }

/* Die Druckhistorie (druckhistorie.js, Max 2026-10-20): dieselbe Tafel aus Glas wie Lage und Masse, breiter fuer die Zeilen der Drucke */
.druckhistorie { width: 380px; }
.druckhistorie-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.druckhistorie-zeile { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line, var(--linie)); }
.druckhistorie-zeile strong { font: 600 13px/1.2 var(--f-body); }
.druckhistorie-zeile span { font: 400 12px/1.3 var(--f-body); color: var(--ink-2, var(--mute)); overflow-wrap: anywhere; }
.druckhistorie-zeile .lagemass-fuss { justify-content: flex-end; flex-wrap: wrap; }
/* Das Fenster beim Ziehen eines Griffs (zugfenster.js; Max 2026-10-20): Glas wie Maja, darunter der Grashuepfer, der es traegt, und die
   Biene mit ihrem Satz. Es nimmt keine Klicks - die Maus zieht ja gerade; Abstand, Folgen und Sprung aus dem Sietch (154, app.css) */
.zugfenster { position: fixed; left: 0; top: 0; z-index: 61; width: min(300px, calc(100vw - 16px)); pointer-events: none; will-change: transform;
  font: 500 12px/1.3 var(--f-body); color: var(--ink, var(--fg)); }
.zugfenster[hidden] { display: none; }
.zf-tafel { position: relative; z-index: 1; padding: 8px 10px 7px; border-radius: 12px; border: 1px solid var(--line, var(--linie));
  background: color-mix(in srgb, var(--glas-flaeche, var(--surface)) 96%, transparent);
  -webkit-backdrop-filter: blur(var(--glas-weichzeichnung)); backdrop-filter: blur(var(--glas-weichzeichnung));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--glas-schatten-farbe) 30%, transparent); }
.zf-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.zf-kopf b { font: 600 13px/1.2 var(--f-display); letter-spacing: .02em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zf-griff { color: var(--ink-2); font-size: 11px; white-space: nowrap; }
.zf-zeilen { display: grid; grid-template-columns: auto 1fr auto 18px; gap: 1px 8px; font: 500 12px/1.5 var(--f-mono); font-variant-numeric: tabular-nums; }
.zf-zeile { display: contents; }
.zf-zeile > span { opacity: .55; }
.zf-zeile.aktiv > span, .zf-zeile.bewegt > span { opacity: 1; }
.zf-achse { color: var(--ink-2); }
.zf-wert { text-align: right; }
.zf-delta { text-align: right; font-weight: 700; }
.zf-zeile.aktiv .zf-achse { font-weight: 700; color: var(--ink); }
.zf-zeile[data-achse="x"].aktiv .zf-achse, .zf-zeile[data-achse="x"] .zf-delta, .zf-zeile[data-achse="x"] .zf-pfeil { color: var(--warn); }
.zf-zeile[data-achse="y"].aktiv .zf-achse, .zf-zeile[data-achse="y"] .zf-delta, .zf-zeile[data-achse="y"] .zf-pfeil { color: color-mix(in srgb, var(--erfolg) 55%, var(--ink)); }
.zf-zeile[data-achse="z"] .zf-delta, .zf-zeile[data-achse="z"] .zf-pfeil, .zf-zeile[data-achse="c"] .zf-delta, .zf-zeile[data-achse="c"] .zf-pfeil { color: var(--akzent); }
.zf-pfeil { display: inline-block; text-align: center; font: 700 15px/1 var(--f-body); align-self: center; }
.zf-pfeil.leer { visibility: hidden; }
.zf-groesse, .zf-raster { margin-top: 3px; color: var(--ink-2); font: 400 11px/1.3 var(--f-mono); }
.zf-raster.neu { animation: zf-neu 0.6s ease-out; }    /* der Schritt hat sich geaendert (Rad oder + und -) */
@keyframes zf-neu { 0% { background: color-mix(in srgb, var(--sel) 70%, transparent); color: var(--ink); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .zf-raster.neu { animation: none; } }
.zf-groesse[hidden] { display: none; }
.zf-hinweis { margin-top: 3px; color: var(--warn); font: 600 11px/1.3 var(--f-sans, inherit); }   /* beim Strecken: Strg schneidet zu (Sietch 249) */
.zf-hinweis:empty { display: none; }
.zf-zeile[hidden] { display: none; }
/* Der Rahmen beim Markieren mit Umschalt + Ziehen im Bild (teile.js; Max 2026-10-23, Karte "AAA") */
.auswahlrahmen { position: fixed; z-index: 40; pointer-events: none; border: 1.5px dashed var(--sel); background: color-mix(in srgb, var(--sel) 12%, transparent); border-radius: 2px; }
.auswahlrahmen[hidden] { display: none; }
.zf-unten { display: flex; align-items: flex-start; gap: 6px; padding-left: 10px; }
/* der Grashuepfer steht unter der Tafel und haelt sie hoch: sein Kopf reicht an ihre Unterkante */
.zf-flip { flex: none; width: 44px; height: 44px; margin-top: -10px; position: relative; z-index: 2; transform-origin: 50% 100%; border-radius: 50%;
  filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--glas-schatten-farbe) 35%, transparent)); }
.zf-flip.huepft { animation: zf-huepfen var(--zugfenster-sprung) ease-out; }
@keyframes zf-huepfen { 0% { transform: translateY(0) scale(1, 1); } 25% { transform: translateY(-9px) scale(.96, 1.05); }
  70% { transform: translateY(0) scale(1.06, .94); } 100% { transform: none; } }
.zf-rechts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; margin-top: 5px; }
/* das Lineal, das der Grashuepfer haelt (Max 2026-10-20): Nadel in der Mitte = Lage jetzt, lange Striche = wo es einrastet, Dreieck = Anfang */
.zf-lineale { display: flex; flex-direction: column; gap: 3px; }
.zf-lineal { display: flex; align-items: flex-start; gap: 4px; padding: 3px 6px 2px 4px; border-radius: 6px; border: 1px solid var(--line, var(--linie));
  background: color-mix(in srgb, var(--sel) 20%, var(--ground)); color: var(--ink, var(--fg)); }   /* deckend: ein Lineal liest man auf Papier */
.zf-lineal[hidden] { display: none; }
.zf-lineal svg { display: block; width: 100%; max-width: 200px; height: auto; overflow: visible; }
.zf-l-achse { flex: none; width: 10px; font: 700 11px/30px var(--f-mono); text-align: center; }
.zf-lineal[data-achse="x"] .zf-l-achse, .zf-lineal[data-achse="x"] .zf-l-nadel { color: var(--warn); }
.zf-lineal[data-achse="y"] .zf-l-achse, .zf-lineal[data-achse="y"] .zf-l-nadel { color: color-mix(in srgb, var(--erfolg) 55%, var(--ink)); }
.zf-lineal[data-achse="z"] .zf-l-achse, .zf-lineal[data-achse="z"] .zf-l-nadel,
.zf-lineal[data-achse="c"] .zf-l-achse, .zf-lineal[data-achse="c"] .zf-l-nadel { color: var(--akzent); }
.zf-l-kante, .zf-l-kurz, .zf-l-lang { stroke: currentColor; stroke-width: 1; }
.zf-l-kurz { opacity: .6; }
.zf-l-lang { stroke-width: 1.5; }
.zf-l-zahl { fill: currentColor; font: 500 9px var(--f-mono); text-anchor: middle; }
.zf-l-nadel { fill: currentColor; }
.zf-l-nadel-strich { stroke: currentColor; stroke-width: 1.5; color: inherit; }
.zf-lineal[data-achse="x"] .zf-l-nadel-strich { stroke: var(--warn); }
.zf-lineal[data-achse="y"] .zf-l-nadel-strich { stroke: color-mix(in srgb, var(--erfolg) 55%, var(--ink)); }
.zf-lineal[data-achse="z"] .zf-l-nadel-strich, .zf-lineal[data-achse="c"] .zf-l-nadel-strich { stroke: var(--akzent); }
.zf-l-start { fill: var(--ink-2); opacity: .7; }
.zf-biene { min-width: 0; display: flex; align-items: flex-start; gap: 5px;
  padding: 5px 8px 5px 5px; border-radius: 12px; border: 1px solid var(--line, var(--linie));
  background: color-mix(in srgb, var(--ground) 94%, transparent); -webkit-backdrop-filter: blur(var(--glas-weichzeichnung)); backdrop-filter: blur(var(--glas-weichzeichnung)); font: 400 12px/1.35 var(--f-body); }
.zf-biene-bild { flex: none; width: 22px; height: 22px; }
.zf-biene-bild svg { width: 100%; height: 100%; }
.zf-satz { margin: 0; }
@media (prefers-reduced-motion: reduce) { .zf-flip.huepft { animation: none; } }
:root[data-biene="still"] .zf-flip.huepft { animation: none; }
/* Willis Sprechblase in der Spulenwahl (druck.js williBlase; Max 2026-10-22: "als sprechblase von wille"): was der Sietch ueber die Spule weiss */
.willi-blase { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; max-width: 520px; }
.willi-blase[hidden] { display: none; }
.willi-blase .laufband-biene { flex: 0 0 auto; width: 28px; height: 28px; }
.willi-text { position: relative; padding: 6px 10px; border-radius: 12px; background: color-mix(in srgb, var(--glas-flaeche, var(--surface)) 96%, transparent);
  border: 1px solid var(--line, var(--linie)); color: var(--ink, var(--fg)); font: 500 13px/1.35 var(--f-body); }

/* Die Biene zeigt den Drehgriff (teile.js vorfuehren; Max 2026-10-21): sie fliegt von Griff zu Griff, ihr Satz steht daneben */
.dg-biene { position: fixed; left: 0; top: 0; z-index: 60; display: flex; align-items: flex-start; gap: 6px; max-width: min(300px, calc(100vw - 32px));
  padding: 6px 10px 6px 6px; border-radius: 14px; border: 1px solid var(--line, var(--linie));
  background: color-mix(in srgb, var(--ground) 94%, transparent); -webkit-backdrop-filter: blur(var(--glas-weichzeichnung)); backdrop-filter: blur(var(--glas-weichzeichnung));
  font: 400 13px/1.35 var(--f-body); color: var(--ink); pointer-events: none; opacity: 0;
  transition: transform 0.45s cubic-bezier(.2, 1.4, .4, 1), opacity 0.3s; }
.dg-biene.da { opacity: 1; }
.dg-biene-bild { flex: none; width: 28px; height: 28px; animation: dg-summen 0.6s ease-in-out infinite alternate; }
.dg-biene-bild svg { width: 100%; height: 100%; }
.dg-biene-satz { margin: 0; }
@keyframes dg-summen { from { transform: translateY(-2px) rotate(-6deg); } to { transform: translateY(2px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .dg-biene { transition: opacity 0.2s; } .dg-biene-bild { animation: none; } }
:root[data-biene="still"] .dg-biene-bild { animation: none; }