/* ===================================================================== Sandbox — Look der Editorfläche (docs/AUFTRAG-SANDBOX.md, Auftrag B). Nutzt die --pp-Tokens, die auf body liegen (Muster lab.css) — die Fläche sieht damit in hell und dunkel richtig aus. ===================================================================== */ .sb-page { display: flex; flex-direction: column; min-height: 0; } /* ---------------- Vollfläche (Auftrag E, 11.08.2026) ---------------- Die Detailseite füllt den Inhaltsbereich randlos: kein Karten-/ Kastenrahmen mehr um die Fläche, das Raster läuft bis an die Kanten (volle Höhe bis zum Fensterrand unter der 54-px-Portal-Kopfzeile, volle Breite neben der Seitenleiste). Die Kopfzeile der Sandbox schwebt als schmale Leiste darüber, statt die Fläche einzurücken. Seitenleiste und Portal-Kopfzeile bleiben — es geht um den Eindruck „Fläche statt Fenster", nicht um ein Overlay über der ganzen App. */ .pp-page.sb-page.sb-randlos { max-width: none; margin: 0; padding: 0; height: calc(100vh - 54px); } .sb-randlos .sb-kopf { margin: 0; padding: 6px 14px 3px; flex: none; border-bottom: 1px solid var(--pp-line); background: var(--pp-surface); } .sb-randlos .sb-ki { margin: 10px 14px 0; } .sb-randlos .sb-canvas { height: auto; flex: 1; min-height: 0; border: 0; border-radius: 0; } /* ---------------- Kopfzeile ---------------- */ /* DREI ZEILEN nach Jonas' Entwurfsvorlage (W5, 23.08.2026), wörtlich das Muster des Schaltlabors (.lab-top + .lab-ribbon in css/lab.css): 1. .sb-top — „‹ Meine Inhalte", Flächenname, Speicherpunkt, Marke 2. .sb-tabs — Start · Einfügen · Anordnen · Ansicht · KI 3. .sb-panel — das Band des aktiven Reiters in benannten Gruppen Bis dahin war es EINE Zeile, in der die Reiter rechts neben dem Namen klebten und die Gruppennamen nur als aria-label existierten: Für eine sichtbare Beschriftungsebene unter den Knöpfen war schlicht kein Platz. Die Regeln unten setzen deshalb ausdrücklich flex-direction: column — `.sb-kopf` erbt sonst das `align-items: center` von früher, und das staucht jede Zeile auf ihre Inhaltsbreite. */ .sb-kopf { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-bottom: 12px; } /* Zeile 1. Der Speicherpunkt steht MITTIG: zwei `margin-left: auto` (an ihm und an der Marke) teilen den freien Platz zu gleichen Teilen — ohne feste Breiten, die bei langem Flächennamen brächen. */ .sb-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sb-top .sb-status { margin-left: auto; } /* --pp-text-2, NICHT --pp-text-3 (WebKit-Abnahme 23.08.2026): Die Marke ist 11 px klein und gesperrt gesetzt, und mit --pp-text-3 stand sie bei 3,04 : 1 im hellen und 3,99 : 1 im dunklen Theme — beides unter den 4,5 : 1, die WCAG AA für Text dieser Größe verlangt. Sie sagt, WO man ist; das ist keine Zierde. Mit --pp-text-2: 6,11 bzw. 7,04 : 1. */ .sb-marke { margin-left: auto; font-size: var(--pp-fs-mini); font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pp-text-2); white-space: nowrap; } .sb-name { font: inherit; font-weight: 600; font-size: var(--pp-fs-gross); color: var(--pp-text); background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 6px 8px; min-width: 140px; flex: 0 1 260px; } .sb-name:hover, .sb-name:focus { border-color: var(--pp-line-2); background: var(--pp-surface); } /* Die Kurswahl im Kopf der Fläche (Plan 10 F): darf schrumpfen. */ .sb-kurs { flex: 0 1 auto; max-width: 200px; min-width: 0; border: 1px solid var(--pp-line-feld); background: var(--pp-surface); color: var(--pp-text); border-radius: 6px; padding: 6px 28px 6px 8px; font-size: var(--pp-fs-klein); font-family: inherit; min-height: 32px; /* WebKit malt ein natives Auswahlfeld in fester Höhe (21 px) und ohne Theme; ohne appearance greifen Höhe und Farben. Der Pfeil sind zwei Verläufe in der Textfarbe. */ -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--pp-text-2) 50%), linear-gradient(135deg, var(--pp-text-2) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .sb-kurs:focus-visible { border-color: var(--pp-accent); } .sb-status { font-size: var(--pp-fs-klein); white-space: nowrap; } .sb-status.ok { color: var(--pp-ok); } .sb-status.lauft { color: var(--pp-text-2); } .sb-status.fehler { color: var(--pp-err); } /* Zeile 3: das Band des aktiven Reiters. Gruppen NEBENEINANDER, jede eine Spalte aus Knopfreihe und Name darunter (Entwurfsvorlage W5). */ .sb-tools { display: flex; flex-direction: row; align-items: stretch; /* DAS BAND WISCHT WAAGERECHT, ES BRICHT NICHT UM (26.09.2026, Jonas: „die Menüleiste soll waagerecht scrollbar sein, damit die Symbole nicht ungeordnet untereinander stehen"). Bis dahin stand hier `flex-wrap: wrap` — auf der ganzen Seite ab 1100 px zwei Zeilen, in der 560-px-Spalte des Arbeitsfensters drei bis vier, und die Gruppen lagen dann als Treppe untereinander. Jetzt gilt ÜBERALL, was die Telefonregel unten seit dem 24.08.2026 für 860 px vorsah: eine Reihe, Bildlauf in der Leiste, der Wisch bleibt in ihr (overscroll-behavior). Die Aufklapper des Reiters „Einfügen" müssen deshalb auch am Laptop aus dem Kasten heraus — die Regel dafür steht bei .sb-add-wrap. Das Zeilenraster darunter bleibt: Es bemisst die HÖHE einer Spalte, nicht die Breite des Bandes. */ flex-wrap: nowrap; gap: 0; padding-top: 5px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; /* ---- Das ZEILENRASTER des Bandes (24.08.2026) ---- Jonas' Befund: „Bandhöhe angleichen" — beim Reiterwechsel sprang die Zeichenfläche um 26 px (WebKit gemessen: Start/Einfügen/Anordnen 99 px, KI 83, Ansicht 73). Gemessen, BEVOR etwas geändert wurde, und die naheliegende Erklärung war falsch: „Ansicht" ist nicht niedriger, weil ihm große Knöpfe fehlten — es hat zwei (je 48 px). Die Bandhöhe ist `5 px Innenabstand + höchste .sb-items + 18 px Gruppenname`, und die höchste .sb-items entscheidet die SPALTE der kleinen Einträge: drei Einträge = 76 px (Start, Einfügen, Anordnen), zwei = 50 px (Ansicht), ein großer zweizeiliger Knopf = 60 px (KI). Es hängt also daran, wie viele kleine Einträge ein Reiter zufällig hat. Deshalb steht hier ein RASTER, kein Sockel aus einer gegriffenen Zahl: Ein Menüband ist nach KLEIN_PRO_SPALTE Zeilen gebaut (Muster jeder Textverarbeitung), und sbGrp in js/sandbox.js schneidet nach genau so vielen eine zweite Spalte. --sb-raster ist damit die RECHNERISCHE OBERGRENZE dessen, was eine Spalte werden kann — nicht ein Wunschmaß. Die drei Zahlen stehen je EINMAL und werden unten von .sb-b.klein und .sb-kl mitbenutzt; wer eine ändert, ändert das Raster mit, statt zwei Werte auseinanderlaufen zu lassen. --sb-zeilen MUSS gleich KLEIN_PRO_SPALTE in js/sandbox.js sein; verify-sandbox-bandhoehe.js liest beide Dateien und vergleicht. Warum das NICHT die Falle des Einstellungsfensters ist (CLAUDE.md Abschnitt 5, 17.08.2026 — „ein min-height in Pixeln schlägt jedes max-height"): Dort kämpfte der Sockel gegen ein max-height und drückte das Raster über den Fensterrand. Hier gibt es in der ganzen Kette .sb-page > .sb-kopf > .sb-tools > .sb-grp > .sb-items KEIN max-height und keine Höhe, die sich am Fenster misst — die Seite ist `height: calc(100vh - 54px)`, die Fläche darunter `flex: 1; min-height: 0` und gibt nach. Ein Boden kann hier also nichts abschneiden und nichts über den Fensterrand drücken; er nimmt ausschließlich der Zeichenfläche Platz weg, und die gibt nach. WAS ER KOSTET, in WebKit A/B gemessen (dieselbe Sitzung, Raster zur Laufzeit aus- und eingeschaltet): 1440 px 99/99/99/99/99 — Sprung 26 px -> 0, drei Reiter pixelgleich wie vorher 1100 px 193/193/99/99/99 — die drei einzeiligen Reiter stimmen überein; Start und Einfügen brechen dort in ZWEI Zeilen um, und die zweite wird ebenfalls eine Rasterzeile: +28 bzw. +26 px, die Fläche verliert 576 -> 548 px 390 px unverändert — dort greift der Boden nicht (siehe die Telefonregel unten) Der Preis steht also bei EINER Fensterbreite und bei zwei Reitern, und er kauft dort, dass beide Bandzeilen gleich hoch sind statt um zwei Pixel verschieden (vorher 165 gegen 167). Wo das Band umbricht, macht KEINE Höhenregel die Reiter gleich hoch — sie haben dann verschieden viele Zeilen. Das ist die ehrliche Grenze dieses Auftrags, nicht ein übersehener Fall. */ --sb-zeile: 24px; /* Höhe einer kleinen Knopfzeile (.sb-b.klein) */ --sb-lueft: 2px; /* Abstand zwischen zwei kleinen Knöpfen (.sb-kl) */ --sb-zeilen: 3; /* = KLEIN_PRO_SPALTE in js/sandbox.js */ /* Die Fallbacks stehen auch HIER, obwohl die drei Zeilen darüber stehen: Ein `var()` ohne Fallback wird ungültig, sobald jemand die Rechnung einmal auf einen anderen Knoten kopiert — und dann fiele min-height wortlos auf 0. Dieselbe Regel wie unten an den Knöpfen. */ --sb-raster: calc(var(--sb-zeilen, 3) * var(--sb-zeile, 24px) + (var(--sb-zeilen, 3) - 1) * var(--sb-lueft, 2px)); } /* Der Fallback für alles, was NICHT über sbBtn() gebaut ist (die Einträge der Aufklapp-Menüs). Die Bandknöpfe selbst regelt .sb-b weiter unten. `:not(.sb-b)` ist kein Beiwerk, sondern die Reparatur eines Spezifitätsfehlers (WebKit-Abnahme 23.08.2026): `.sb-tools button` ist eine Klasse PLUS ein Elementname und schlug damit jede Ein-Klassen-Regel von `.sb-b`. Der Kommentar darüber sagte „die Bandknöpfe regelt .sb-b" — sie taten es nicht. Gemessen am gerenderten Knopf: 13 px statt 11,5 px Schrift, 7/10 px statt 5/8/4 px Innenabstand, 7 px statt 6 px Ecken, --pp-text statt --pp-text-2 und beim aktiven Werkzeug --pp-accent statt --pp-accent-2. Sichtbar wurde es nicht als „falsche Farbe", sondern als BREITE: Das Band brauchte im Reiter „Start" 1390 px und brach bei 1440 px in zwei Zeilen um. `.gross`/`.klein` (zwei Klassen) kamen durch, alles an `.sb-b` allein nicht — ein Stylesheet, das zur Hälfte gilt, sieht aus wie ein Entwurfsfehler und ist keiner. */ .sb-tools button:not(.sb-b) { font: inherit; font-size: var(--pp-fs-klein); padding: 7px 10px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--pp-text); cursor: pointer; white-space: nowrap; } .sb-tools button:not(.sb-b):hover { border-color: var(--pp-accent-line); color: var(--pp-accent-2); } .sb-tools button:not(.sb-b).on { border-color: var(--pp-accent); color: var(--pp-accent-2); background: var(--pp-accent-tint); } /* ---- Bandknöpfe (W5) ---- Groß: Symbol ÜBER dem Text, der Text darf zweizeilig werden. Klein: Symbol LINKS neben einer Zeile Text. Beide Formen sind randlos — die Fläche unter dem Zeiger ist die Rückmeldung, nicht ein Kasten um jeden Knopf (Muster button.rb im Labor). Ein aktives Werkzeug trägt die Akzentfläche. */ .sb-b { display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--pp-text-2); font: inherit; font-size: var(--pp-fs-mini); line-height: var(--pp-lh-eng); cursor: pointer; padding: 3px 8px 3px 6px; text-align: left; } /* Die Vorlage stellt große Einträge auf ein festes Rastermaß von 60 px. Gemessen passen zwei deutsche Beschriftungen dort nicht: „Funktions- plot" braucht 62 px und „Drucken/PDF" 60 px — beide liefen bei `width: 60px` über ihren Knopf hinaus in den Nachbarn. Deshalb 60 px als MINDESTmaß (das Raster bleibt sichtbar) und 76 px als Deckel: Was länger ist, bricht um, statt auszubrechen. */ .sb-b.gross { flex-direction: column; justify-content: flex-start; text-align: center; gap: 4px; min-width: 60px; max-width: 76px; white-space: normal; font-size: var(--pp-fs-mini); line-height: var(--pp-lh-knapp); padding: 6px 4px 5px; border-radius: 6px; } /* `min-height` bleibt: Die Vorlage kommt mit 3 px Innenabstand auf rund 20 px Knopfhöhe, und das ist auf dem Telefon ein zu kleines Ziel — das Band IST dort die Werkzeugleiste. 24 px kosten in der Spalte 4 px je Zeile und sonst nichts (align-items: center zentriert den Inhalt). */ /* Der Wert steht als --sb-zeile oben: Aus ihm rechnet sich das Raster des Bandes, und zwei Zahlen für dieselbe Zeilenhöhe liefen beim ersten Nachbessern auseinander. Fallback 24px, weil ein `var()` ohne ihn ungültig wird, sobald ein Knopf einmal außerhalb von .sb-tools steht (CLAUDE.md: nie ein Token ohne Definition und ohne Fallback). */ .sb-b.klein { white-space: nowrap; min-height: var(--sb-zeile, 24px); } /* Hover auf --pp-surface-2, NICHT --pp-surface: Die Kopfzeile steht selbst auf --pp-surface, und --pp-bg-2 ist byteweise dieselbe Farbe (Notiz bei .ki-msg.ki in prepp.css) — der Knopf hätte sich beim Überfahren nur über seinen Rand abgehoben. */ .sb-b:hover { background: var(--pp-surface-2, var(--pp-surface)); color: var(--pp-text); border-color: var(--pp-line); } /* Die Beschriftung des AKTIVEN Knopfes steht auf --pp-accent-2, nicht auf --pp-accent (WebKit-Abnahme 23.08.2026): Der Akzent liegt hier auf der Akzentfläche und nicht auf --pp-surface, und dort kam er im hellen Theme nur auf 4,03 : 1 — bei 11,5 px verlangt WCAG AA 4,5. Ausgerechnet das Werkzeug, das GERADE GILT, war damit der einzige Text des Bandes unter der Grenze. --pp-accent-2 ist der dunklere Zwilling desselben Blaus (hell #175bc7, dunkel #7db1fa): 5,44 : 1 hell und 7,86 : 1 dunkel, Fläche und Rand bleiben unangetastet. */ /* Der eingesetzte Balken ist KEINE Zierde, sondern der Ersatz für das „✓ ", das mit den Zeichen weggefallen ist (WebKit-Abnahme 24.08.2026, Befund B1). Vorher trug „Aufräumen andersherum" seinen Zustand als Haken IM Text; seit die Symbole Grafiken sind, geht das nicht mehr, und übrig blieb allein die Farbe. Gemessen war das zu wenig: In Graustufen unterscheiden sich EIN und AUS nur um Fläche 1,15 : 1, Rand 1,53 : 1 und Textfarbe 1,02 : 1 — WCAG 1.4.11 verlangt 3 : 1 für eine Zustandsanzeige, und 1.4.1 verlangt, dass Farbe nicht das einzige Mittel ist. Wer nur Helligkeit sieht, sah nichts. Ein Balken statt eines Hakens, aus drei Gründen: Er ist eine FORM (vorhanden gegen nicht vorhanden, also auch ohne Farbe lesbar), er verschiebt NICHTS (inset box-shadow liegt außerhalb des Layouts — ein Häkchen in der Ecke stieße bei den kleinen Knöpfen in den Text, die stehen auf `white-space: nowrap`), und er trägt currentColor, also dieselbe Farbe wie Text und Symbol: --pp-accent-2 auf --pp-accent-tint sind 5,44 : 1 (hell) und 7,86 : 1 (dunkel), beide klar über den geforderten 3 : 1. Er gilt für JEDEN gedrückten Knopf, nicht nur für den Umschalter: Die drei Werkzeuge hatten dieselbe Lücke schon vorher (nur fiel sie nicht auf, weil sie nie einen Haken hatten). */ .sb-b.on { background: var(--pp-accent-tint); border-color: var(--pp-accent-line); color: var(--pp-accent-2); box-shadow: inset 3px 0 0 currentColor; } /* Das Symbolfeld hat eine feste BOX, keine Schriftgröße mehr (24.08.2026). Solange die Symbole Zeichen waren, steuerte `font-size` ihre Größe — auf ein wirkt das nicht, und ohne feste Maße wären die Bandzeilen ungleich hoch. `flex: none`, damit ein langer Text den Kasten nicht zusammendrückt. */ .sb-b .sb-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; } .sb-b.gross .sb-ico { width: 19px; height: 19px; } .sb-b.klein .sb-ico { width: 14px; height: 14px; } /* Die gezeichneten Symbole (SB_SYM in js/sandbox.js): currentColor erbt Ruhe-, Hover- und Aktivfarbe des Knopfes — deshalb steht hier keine Farbe. Sie füllen ihre Box; das 24er-Raster der viewBox rechnet der Browser darauf um. Das frühere `vertical-align: -2px` ist entfallen: Es war der Notnagel, mit dem die zwei damals schon gezeichneten SVGs auf die Grundlinie der ZEICHEN daneben gezwungen wurden — Zeichen stehen jetzt keine mehr da, und die Box zentriert von allein. */ .sb-tico { display: block; width: 100%; height: 100%; } /* Der Aufklapper hängt NICHT im wischenden Band (26.09.2026 — vorher nur auf dem Telefon, siehe die 860-px-Regel unten): Ein Kasten mit `overflow-x: auto` schneidet auch senkrecht ab, ein Menü nach unten wäre weg. Ohne `position: relative` am Wrap ist der nächste positionierte Vorfahr die Kopfzeile, und die scrollt nicht; das Menü steht dann unter dem Band, linksbündig zum Kopf (left statt right — am rechten Rand des Kopfes stünde es sonst neben dem Knopf im Leeren). */ .sb-kopf { position: relative; } .sb-add-wrap { position: static; display: inline-flex; } .sb-add-menu { position: absolute; top: 100%; left: 8px; z-index: 60; display: flex; flex-direction: column; min-width: 170px; border: 1px solid var(--pp-line); border-radius: 10px; background: var(--pp-surface); box-shadow: 0 10px 28px rgba(0, 0, 0, .18); padding: 6px; gap: 2px; } .sb-add-menu button { border: 0; background: none; text-align: left; } /* DAS war „lässt sich nicht ein- und ausblenden" (Auftrag E, 11.08.2026). Das JavaScript setzte hidden völlig richtig — nur nützt das nichts: [hidden] { display: none } ist eine Regel des BROWSERS, und jede Klassenregel mit display aus einem Autoren-Stylesheet schlägt sie. Das Menü trug also das Attribut und stand trotzdem da. Zwei Lehren, die über diese Zeile hinausgehen: - Wer ein Element per hidden umschaltet UND ihm per Klasse ein display gibt, braucht IMMER die Gegenregel. Deshalb steht sie unten auch für .sbd-gruppe, die denselben Fehler hatte. - jsdom rechnet kein Layout: Der bestehende Test sah hidden === true und war zufrieden, während im Browser nichts verschwand. Ein Test, der „das Attribut steht" prüft, prüft nicht „man sieht es nicht mehr". */ .sb-add-menu[hidden] { display: none; } /* ---------------- Reiterband der Kopfzeile (W-C/W4, 22.08.2026) ---------------- Fünf Reiter (Start · Einfügen · Anordnen · Ansicht · KI), je ein Panel. EIGENE Klassen statt rb-tabs aus lab.css: Das Labor-Stylesheet gilt nur im Labor. Seit W5 (23.08.2026) steht die Reiterzeile in einer EIGENEN Zeile über dem Band statt rechts neben dem Flächennamen — erst damit passen die sichtbaren Gruppennamen des Entwurfs darunter. */ /* Die Reiterregeln haengen an `.sb-tabs .sb-tab`, nicht am blanken `.sb-tab`: Der Name war seit dem Stresstest (Z24, 12.08.2026) schon an die Wahrheitstabelle der Tabellenkarte vergeben (``, weiter unten). Gleiche Spezifitaet, spaetere Regel gewinnt — im echten WebKit gemessen trug die TABELLE danach `cursor: pointer`, `padding: 6px 12px`, einen 2-px-Unterstrich, 6 px Eckenradius und `--pp-text-2` statt der Textfarbe, und bei Hover haette sie sich accent-blau eingefaerbt; die Reiterknoepfe bekamen umgekehrt die 12,5 px der Tabelle statt ihrer 13 px. Umbenennen waere Markup-Arbeit in js/sandbox.js — die Eingrenzung loest es an EINER Stelle und laesst beide Namen stehen. */ .sb-tabs { display: flex; gap: 14px; align-items: flex-end; padding: 4px 4px 0; border-bottom: 1px solid var(--pp-line); } .sb-tabs .sb-tab { /* 13 px bleiben (nicht die 12 des Labors): Die Sandbox sitzt im Portal, nicht in einem Overlay — und verify-sandbox-tabname.js hält den Wert als Anker dagegen, dass die Tabellenregel ihn wieder überschreibt. */ font: inherit; font-size: var(--pp-fs-klein); font-weight: 500; line-height: var(--pp-lh-knapp); padding: 5px 2px 6px; cursor: pointer; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--pp-text-2); border-radius: 0; margin-bottom: -1px; } .sb-tabs .sb-tab:hover { color: var(--pp-text); background: none; } .sb-tabs .sb-tab.on { color: var(--pp-accent-2); border-bottom-color: var(--pp-accent); font-weight: 600; } /* Die Panels wechseln über hidden — .sb-tools bringt ein eigenes display mit, also braucht es die Gegenregel (die dokumentierte Falle von .sb-add-menu oben gilt hier wörtlich). */ .sb-kopf .sb-panel[hidden] { display: none; } /* Gruppen im Band (W5): der Entwurf zeichnet benannte Gruppen (WERKZEUG, BEARBEITEN …) — Knopfreihe oben, Name darunter in kleiner grauer Sperrschrift, dazwischen ein senkrechter Trennstrich. Der Name steht im Markup gewöhnlich geschrieben und wird HIER großgestellt: So bleibt er für Vorleseprogramme und Tests lesbar. */ .sb-grp { display: flex; flex-direction: column; align-items: center; padding: 0 12px; border-right: 1px solid var(--pp-line); flex: 0 0 auto; /* max-width ist kein Beiwerk: `flex: 0 0 auto` misst die Gruppe an ihrem Inhalt, und `.sb-items` misst sich an max-content — bei 390 px war die Gruppe KARTEN 610 px breit und schob die GANZE SEITE 234 px in den waagerechten Bildlauf (WebKit gemessen, 23.08.2026; auf „Start" 113 px). Die Knöpfe brechen längst um, es fehlte nur die Erlaubnis, schmaler zu werden als der eigene Inhalt. Dieselbe Klasse Fehler wie beim Menüband des Labors — dort schnitt es ab, hier schob es. */ /* Seit das Band selbst wischt (26.09.2026) bleibt die Gruppe so breit wie ihr Inhalt: Der Bildlauf liegt in der Leiste, die Seite schiebt er nicht mehr — und eine gedeckelte Gruppe würde gestaucht (die Telefonregel unten sagt dasselbe seit dem 24.08.2026). */ max-width: none; } .sb-grp:last-child { border-right: none; } /* Die Reihe der Gruppe: links die großen Einträge nebeneinander (.sb-gr), rechts daneben die kleinen untereinander (.sb-kl) — die Gestalt der Entwurfsvorlage, seit dem 24.08.2026 auch im Markup (sbGrp in js/sandbox.js). Bis dahin lagen große und kleine Einträge in EINER Reihe. Das war nicht nur eine andere Optik, sondern zu breit: Der Reiter „Einfügen" brauchte gemessen 1373 px und „Start" 1254 px, während bei 1440 px Fenster und ausgeklappter Seitenleiste 1176 px zur Verfügung stehen — das Band brach also im Regelfall in zwei Zeilen um. Mit der Spalte sind es 1055 bzw. 906 px. Bewusst KEIN `flex-flow: column wrap` mit fester Höhe für die Spalte: Solche Container rechnen in WebKit ihre Breite nicht zuverlässig aus den umbrochenen Spalten. Wo mehr als KLEIN_PRO_SPALTE Einträge anfallen, schneidet sbGrp im Markup eine zweite .sb-kl. `align-items: flex-start`, nicht `center` (WebKit-Abnahme 24.08.2026): Zentriert man die Reihe gegen die Spalte, sitzt der große Eintrag einer Gruppe mit drei kleinen Nachbarn tiefer als der große Eintrag der Gruppe daneben — gemessen 15 px zwischen „Text" (Gruppe KARTE) und „Auswahl" (Gruppe WERKZEUG). Oben liegen die großen Symbole ALLER Gruppen auf einer Linie, und genau das lässt ein Menüband wie ein Menüband aussehen (nachgemessen: alle bei 142 px). */ /* `min-height` ist das Zeilenraster von oben und damit der Grund, warum die Bandhöhe beim Reiterwechsel steht: Die Reihe jeder Gruppe ist mindestens so hoch wie eine volle Spalte kleiner Einträge, also genau so hoch, wie das Band in Start, Einfügen und Anordnen ohnehin ist. Ein Boden, kein Deckel — was höher werden WILL (ein dreizeiliger großer Knopf in einer anderen Sprache), wird höher; abgeschnitten werden kann hier nichts. */ .sb-items { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; min-height: var(--sb-raster, 76px); } .sb-gr { display: flex; align-items: flex-start; gap: 3px; flex-wrap: wrap; } .sb-kl { display: flex; flex-direction: column; align-items: stretch; gap: var(--sb-lueft, 2px); } /* Die eine Ausnahme davon: Eine Gruppe OHNE großen Eintrag (REIHENFOLGE und FLÄCHE im Reiter „Anordnen") hat gar keine Symbolreihe, an der sich etwas ausrichten müsste. Sie steht senkrecht mittig, statt oben zu kleben — bei EINEM kleinen Eintrag in einer 99 px hohen Zeile sähe „oben" nach einem Layoutfehler aus. */ /* `align-items: center` gehört zum Zeilenraster und ist keine Zutat: Die Mitte kam bisher daher, dass ZWEI `margin-top: auto` (hier und am Gruppennamen) sich den freien Platz zu gleichen Teilen teilten — bei einem kleinen Eintrag 26 px oben und 26 px unten. Seit .sb-items einen Boden hat, ist kein freier Platz mehr übrig, den sie teilen könnten, und ohne diese Zeile klebte der Eintrag oben: genau die Stellung, die der Absatz darüber als Layoutfehler beschreibt. `center` ist dabei nicht ungefähr dasselbe, sondern zeichengleich — die halbe Restlücke im 76-px-Raster ist dieselbe Zahl wie die halbe Restlücke in der Gruppe. In WebKit nachgemessen (Reiter „Anordnen", Gruppe FLÄCHE): vorher wie nachher 26 px unter der Gruppenoberkante. `margin-top: auto` bleibt trotzdem stehen — es greift weiter, wo eine Gruppe in einer umbrochenen Zeile höher gestreckt wird als ihr Raster. */ .sb-grp.nur-klein .sb-items { margin-top: auto; align-items: center; } /* Der Gruppenname steht auf der GRUNDLINIE DER ZEILE, nicht dicht unter seinen eigenen Knöpfen (WebKit-Abnahme 23.08.2026). `.sb-tools` streckt alle Gruppen einer Zeile auf dieselbe Höhe (align-items: stretch), der Inhalt der Spalte blieb aber oben — im Reiter „Anordnen" saß der Name von AUSWAHL (ein großer Knopf) 43 px tiefer als die Namen von REIHENFOLGE und FLÄCHE daneben, und der senkrechte Trennstrich lief dieselben 43 px unter der Beschriftung ins Leere. Bei 1100 px waren es im Reiter „Einfügen" 19 px. `margin-top: auto` schiebt den Namen ans untere Ende seiner Spalte: Alle Namen einer Zeile stehen damit auf derselben Höhe, und der Trennstrich endet mit ihnen. --pp-text-2 statt --pp-text-3 aus demselben Anlass: 10,5 px in Sperrschrift lagen bei 3,04 : 1 (hell) bzw. 3,99 : 1 (dunkel) unter den 4,5 : 1 von WCAG AA. Der Gruppenname ist die Beschriftung, an der man ein Werkzeug SUCHT — er darf nicht der blasseste Text der Seite sein. */ /* Schrift und Sperrung nach der Entwurfsvorlage (24.08.2026): IBM Plex Mono, gesperrt, großgestellt — das Band bekommt damit die Anmutung einer Werkbank-Beschriftung statt einer zweiten Textzeile. Die Vorlage nennt 9 px; hier stehen 10, weil css/lab.css für den Zwilling im Labor ausdrücklich festhält, dass unter 10,5 px eine Beschriftung „im Vorbeigehen" nicht mehr gelesen wird — und Sperrsatz in Versalien frisst zusätzlich Lesbarkeit. Kontrast rettet Größe nicht. */ .sb-gname { font-family: var(--pp-mono, ui-monospace, monospace); font-size: var(--pp-fs-mini); font-weight: 500; color: var(--pp-text-2); letter-spacing: 1.2px; /* Die letzten zwei Angaben der nächsten Zeile bleiben WÖRTLICH so stehen (Reihenfolge und Wert): verify-sandbox-band-spezifitaet.js baut seine Gegenprobe aus genau dieser Zeichenfolge — und ein Kommentar, der sie zitiert, hätte sie ihm weggenommen (die Regex ist faul und träfe das Zitat zuerst; genau so passiert). */ text-transform: uppercase; margin-top: auto; padding-top: 3px; white-space: nowrap; } /* ---------------- Statusleiste (W-B, EN19, 22.08.2026) ---------------- Ganz unten, über die volle Breite: Werkzeug · Karten · Verbindungen · Auswahl · Raster · Zoom. Reine Anzeige aus vorhandenem Zustand (js/sandbox.js, statusNeu) — Zwilling der .lab-statusbar, bis auf das Feld „Verbindungen", das es im Labor nicht gibt. Mono wie dort; KEIN min-height in Pixeln (Lehre vom 17.08.2026 — das Minimum gewinnt). --pp-text-2, und im Labor genauso (WebKit-Abnahme 23.08.2026): Beide Leisten standen mit --pp-text-3 bei 3,04 : 1 (hell) und 3,99 : 1 (dunkel) — 11 px Mono, also klar unter WCAG AA. Die Zahlen dort sind die EINZIGE Auskunft über Kartenzahl, Auswahl, Raster und Zoom; sie sind keine Zierde. Nachgezogen wurde die Zwillingsregel in css/lab.css im selben Zug — eine der beiden Leisten heller zu machen als die andere hieße, den Zwilling aufzugeben. Die Trennpunkte bleiben auf --pp-line-2: Sie sind pure Dekoration (die Felder stehen ohnehin getrennt) und dürfen nicht so laut werden wie die Zahlen. */ .sb-statusbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 4px 14px; border-top: 1px solid var(--pp-line); background: var(--pp-bg-2); color: var(--pp-text-2); font-family: var(--pp-mono); font-size: var(--pp-fs-mini); letter-spacing: .2px; white-space: nowrap; overflow: hidden; } .sb-statusbar .sbs-sep { color: var(--pp-line-2); } /* Das aktive Werkzeug hebt sich weiterhin um EINE Stufe ab — als die Leiste auf --pp-text-2 stieg, wäre es sonst farbgleich mit dem Rest geworden und die Rangfolge (was gilt gerade? / was steht da sonst?) hinge allein am Fettdruck. */ .sb-statusbar [data-sbs="werkzeug"] { color: var(--pp-text); font-weight: 600; } /* ---------------- Fläche ---------------- */ /* `touch-action: none` (17.09.2026): Ohne die Zeile nimmt der Browser jeden Wisch für sich — er scrollt die Seite, zoomt sie bei zwei Fingern und meldet PrepPs Geste als abgebrochen (pointercancel). Karten verschieben, verbinden, einrahmen, schieben und die Zange wären auf dem Telefon damit nicht bedienbar, sondern zufällig. */ .sb-canvas { position: relative; flex: 1; min-height: 420px; height: calc(100vh - 190px); border: 1px solid var(--pp-line); border-radius: 12px; background: var(--pp-bg-2); overflow: hidden; touch-action: none; /* Punktraster wie ein Arbeitsblatt — rein dekorativ. */ background-image: radial-gradient(var(--pp-line) 1px, transparent 1px); background-size: 24px 24px; } /* … UND DIE AUSNAHMEN, die dazugehören. `touch-action` vererbt sich zwar nicht, wirkt aber über die Vorfahren: Ein Finger auf einem Bildlaufkasten IN einer Karte schlüge ohne diese Regel gegen das `none` der Fläche, und der Kasten ließe sich nicht mehr rollen. Aufgezählt ist, was in einer Karte wirklich rollt oder gezogen wird — die Formularkästen, der Quelltext einer Textkarte, die Geo-Listen, das Mini-Labor im iframe, die Regler und Felder (dieselbe Menge, die sbIstBedien in js/sandbox.js vom Flächenzug abzweigt) sowie das Rechtsklickmenü, das ebenfalls in der Fläche hängt. Wer einen weiteren Bildlaufkasten in eine Karte baut, trägt ihn hier ein — sonst ist er auf dem Telefon tot. */ .sb-canvas input, .sb-canvas textarea, .sb-canvas select, .sb-canvas [contenteditable], .sb-canvas iframe, .sb-canvas [data-sb-bedien], .sb-canvas .sb-tabwrap, .sb-canvas .sb-form, .sb-canvas .sb-rasterwrap, .sb-canvas .sb-wahl-liste, .sb-canvas .sb-geo-def, .sb-canvas .sb-live, .sb-canvas .sb-ctx { touch-action: auto; } /* Die freie Fläche ist zum Schieben da (Auftrag C, 12.08.2026) — der Zeiger sagt es, bevor man es probiert. Während des Zugs gilt die geschlossene Hand für ALLES darunter: Sonst wechselte der Cursor, sobald man beim Schieben über eine Karte fährt. */ /* Der Zeiger sagt, was der Linkszug taete. „grab" lag bis zum 13.08.2026 pauschal auf der Flaeche — seit „Auswahl" einrahmt statt zu schieben, waere das eine Falschaussage; die offene Hand gibt es jetzt nur beim Werkzeug „Bewegen" und bei gehaltener Leertaste (Klasse „hand", gesetzt in zeigerNeu). */ .sb-canvas.hand { cursor: grab; } .sb-canvas.schiebt, .sb-canvas.schiebt * { cursor: grabbing; } /* ---------------- Die Ebenen der Fläche (Auftrag A, 12.08.2026) ---------------- Unten die Kanten als SVG (#sb-svg), darüber die Karten als gewöhnliches HTML (#sb-welt), ganz oben das flüchtige Overlay der Gesten (#sb-ovl). Alle drei tragen dieselbe Transformation aus buehneTransform() — EINE Rechnung. Bis dahin lagen die Karten als foreignObject IM SVG; das ist der Fall, in dem WebKit HTML in einer eigenen Schicht malt — Formeln, iframes und Regler landeten am SVG-Ursprung, also in der Ecke oben links (docs/SANDBOX.md Abschnitt 2a). Kein will-change, keine 3D-Transformation: Ein eigener Kompositionslayer brächte Unschärfe und Tastaturprobleme zurück. transform-origin: 0 0 genügt. Die Regel gilt NUR den beiden Flächen-SVGs, nicht jedem SVG darin: Seit die Karten HTML sind, liegen Plot- und Schaltbild-SVGs ebenfalls unter .sb-canvas — ein Sammelselektor (.sb-canvas svg) würde sie absolut positionieren und aus ihrer Karte heben. */ #sb-svg, #sb-ovl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; /* Im SVG hört nur der Kanten-Fühler zu (pointer-events: stroke weiter unten) — sonst läge eine unsichtbare Scheibe über der Fläche und schluckte den Rahmenzug; das Overlay hört nie zu, sonst schluckte es die eigene Geste. */ pointer-events: none; } #sb-welt { position: absolute; inset: 0; transform-origin: 0 0; /* Die freie Fläche bleibt frei: nur die Karten und die Kantenbeschriftungen holen sich den Zeiger einzeln zurück. */ pointer-events: none; } /* Die beiden Behälter der Kartenebene: Beschriftungen unter Karten. Sie liegen deckungsgleich über der Fläche, damit left/top ihrer Kinder dieselbe Weltecke meinen. */ #sb-kantenlabel, #sb-karten { position: absolute; inset: 0; } /* ---------------- Karten ---------------- */ .sb-node { position: absolute; pointer-events: auto; box-sizing: border-box; background: var(--pp-surface); border: 1.5px solid var(--pp-line); border-radius: 10px; } .sb-node.sel { border-color: var(--pp-accent); border-width: 2px; } .sb-griff { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; border-bottom-right-radius: 8px; } .sb-node.sel .sb-griff { background: var(--pp-accent-tint); border: 1px solid var(--pp-accent-line); } .sb-karte { width: 100%; height: 100%; box-sizing: border-box; padding: 10px 12px; overflow: hidden; color: var(--pp-text); font-size: var(--pp-fs-text); line-height: var(--pp-lh-text); cursor: grab; } /* display: flow-root ist die REPARATUR von A3 (03.09.2026, Jonas: „bei dem Textfeld ohne Rand erweitert sich die Box bei jeder Eingabe um eine Zeile"). .sb-md hat weder Rand noch Polster; die Margin ihres ersten Blockkindes (.ki-h1 8 px, .ki-liste 3 px — css/prepp.css) kollabierte deshalb nach AUSSEN und schob die ganze Box nach unten. In Bearbeitung trägt .sb-md zusätzlich min-height: 100% und wächst damit MIT der Karte — der Überhang blieb also bei jeder neuen Höhe genau so groß, und karteWachsen legte bei jedem Tastendruck eine Rasterzeile drauf. In WebKit gemessen (Karte 260x180, Text „# Titel …"): scrollHeight 205 gegen clientHeight 197, zehn Tastendrücke 180 -> 380 px; mit flow-root 180 -> 180. docs/abnahme/sandbox-tabellenformular/BERICHT.md. Ein eigener Block-Formatierungskontext fängt JEDES Blockkind ab, auch eine sechste Form, die mdBloecke später bekommt — die zwei Regeln darunter sind nur noch Kosmetik (dieselbe Konvention wie .ki-msg > .ki-h1:first-child in prepp.css) und kein Verlass. */ .sb-karte .sb-md { white-space: pre-wrap; word-break: break-word; display: flow-root; } .sb-karte .sb-md > :first-child { margin-top: 0; } .sb-karte .sb-md > :last-child { margin-bottom: 0; } /* ---------------- Text ohne Kasten (Auftrag F, 12.08.2026) ---------------- DIESELBE Karte wie „Text" — der ganze Unterschied steht hier: kein Rahmen, keine Fläche, kein Schatten. Die Fläche scheint durch, das ist der Sinn der Sache. Sichtbar wird der Kasten trotzdem, wenn man ihn braucht: beim Überfahren und bei Auswahl ein zurückhaltender gestrichelter Rand. Ohne das könnte man eine LEERE Notiz nicht mehr treffen — und eine Karte, die man nicht anfassen kann, lässt sich auch nicht löschen. */ /* „Text ohne Kasten" (Auftrag F): Der Rahmen wird im STYLESHEET weggenommen, nicht im Markup — der Knoten bleibt als Trefferfläche stehen (sonst gäbe es an einer leeren Notiz nichts zum Anfassen) und zeigt beim Überfahren und bei Auswahl eine gestrichelte Kante. Seit Auftrag A trägt den Rahmen der KNOTEN selbst statt eines daneben — deshalb greifen die drei Regeln hier direkt an .sb-node, nicht mehr an .sb-rahmen. */ .sb-node.sb-typ-note { background: none; border-color: transparent; } .sb-node.sb-typ-note:hover { border-color: var(--pp-line-2); border-style: dashed; border-width: 1px; } .sb-node.sb-typ-note.sel { border-color: var(--pp-accent); border-style: dashed; border-width: 1.5px; } .sb-karte.sb-typ-note { padding: 4px 6px; } /* ---------------- Form-Karte (W-C): Standardformen ohne Kasten ---------------- Dieselben drei Regeln wie bei „Text ohne Kasten": kein Rahmen, beim Überfahren und bei Auswahl eine gestrichelte Kante als Trefferhilfe. Das SVG füllt die Karte und streckt sich mit dem Größen-Griff (preserveAspectRatio="none" steht im Markup). */ .sb-node.sb-typ-form { background: none; border-color: transparent; } .sb-node.sb-typ-form:hover { border-color: var(--pp-line-2); border-style: dashed; border-width: 1px; } .sb-node.sb-typ-form.sel { border-color: var(--pp-accent); border-style: dashed; border-width: 1.5px; } .sb-karte.sb-typ-form { padding: 0; } .sb-form-karte { width: 100%; height: 100%; } .sb-form-karte svg { width: 100%; height: 100%; display: block; } /* ---------------- Gruppe (N4, 13.10.2026) ---------------- Ein Rahmen HINTER den Karten (zeichne() setzt ihn an den Anfang der Kartenebene). Der Knoten selbst nimmt KEINEN Zeiger — ein Zug in seinem Inneren ist ein Zug auf der freien Fläche (Auswahlrahmen) und trifft die Kanten darunter; gefasst wird er am Kopf, gezogen am Größengriff. Der Grund ist zart (8 %), damit Kanten und Karten lesbar bleiben; ohne Farbe trägt er die Linienfarbe des Portals (hell/dunkel). */ .sb-node.sb-typ-gruppe { pointer-events: none; background: none; border: 0; border-radius: 12px; } .sb-karte.sb-typ-gruppe { padding: 0; overflow: visible; cursor: default; } .sb-gruppe { position: absolute; inset: 0; box-sizing: border-box; border-radius: 12px; border: 2px solid var(--sb-gruppe-farbe, var(--pp-line-2)); background: var(--sb-gruppe-grund, color-mix(in srgb, var(--pp-text) 4%, transparent)); } .sb-node.sb-typ-gruppe.sel .sb-gruppe { box-shadow: 0 0 0 2px var(--pp-accent); } .sb-gruppe-kopf { pointer-events: auto; cursor: grab; position: absolute; left: 10px; top: -1px; transform: translateY(-100%); max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 10px; border-radius: 8px 8px 0 0; border: 1.5px solid var(--sb-gruppe-farbe, var(--pp-line-2)); border-bottom: 0; background: var(--sb-gruppe-farbe, var(--pp-surface-2)); color: var(--sb-gruppe-schrift, var(--pp-text)); font-size: var(--pp-fs-klein); font-weight: 600; line-height: var(--pp-lh-knapp); } .sb-gruppe-leer { font-weight: 400; opacity: .85; font-style: italic; } .sb-node.sb-typ-gruppe .sb-griff { pointer-events: auto; } .sbp-gruppe { font-weight: 600; font-size: 1.05em; border-bottom: 1px solid currentColor; padding-bottom: 2px; } /* ---------------- Formelkarte (M5/EN18, 22.08.2026) ---------------- Ein VERWEIS auf eine Formel des Formelraums, kein zweiter Formelraum. Die Sorte trägt derselbe 3-px-Farbstrich wie die Formelzeile im Material (css/material.css .mt-strich): blau „auf dem Blatt", rot „in den Kopf" — eine Farbsprache, an zwei Orten dieselbe. Der Wortlaut steht als title an der Karte, nie nur die Farbe (M4, Barrierefreiheit). Die Formel darf waagerecht scrollen (overflow-x), statt über die Karte hinauszulaufen: Eine lange Formel ist der Normalfall, und .sb-karte hat overflow:hidden — ohne min-width:0 schnitte sie stumm ab (dieselbe Kette wie .mt-blind-aufgedeckt .mt-tex in M3). */ .sb-formel { display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%; min-width: 0; box-sizing: border-box; border-left: 3px solid var(--pp-line-2); padding-left: 9px; } .sb-formel.blatt { border-left-color: var(--pp-accent); } .sb-formel.kopf { border-left-color: var(--pp-err); } .sb-formel.leer, .sb-formel.fehlt { justify-content: center; border-left-style: dashed; } .sb-formel-kopf { font: 500 10.5px/1.2 var(--pp-mono, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--pp-text-3); } .sb-formel-tex { min-width: 0; overflow-x: auto; overflow-y: hidden; } .sb-formel-zeichen, .sb-formel-notiz { font-size: var(--pp-fs-klein); color: var(--pp-text-2); min-width: 0; } .sb-formel-notiz { font-style: italic; } .sb-formel-fund { font-size: var(--pp-fs-mini); color: var(--pp-text-3); margin-top: auto; } /* Das Auswahlfeld des Formulars (Formfeld-Art „wahl"): dieselbe Optik wie die Textfelder daneben — sonst sähe eine Gruppe aus zwei Bauteilen aus. */ .sb-form select { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--pp-line-feld); border-radius: 6px; background: var(--pp-bg); color: var(--pp-text); font: inherit; font-size: var(--pp-fs-klein); } /* ---------------- Flüchtige Flächenmeldung (Z1/Z2) ---------------- Unten mittig auf der Fläche, verschwindet von selbst (sbMeldung). --pp-Tokens, damit sie in hell und dunkel lesbar ist. */ .sb-meldung { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: min(680px, 92%); z-index: 70; background: var(--pp-surface); color: var(--pp-text); border: 1px solid var(--pp-line); border-radius: 10px; padding: 8px 14px; font-size: var(--pp-fs-klein); line-height: var(--pp-lh-text); box-shadow: 0 10px 28px rgba(0, 0, 0, .18); } /* Obsidian-Canvas (Paket R1): „In Obsidian geändert — neu laden?" bzw. die Hinweise eines Ladens. Oben statt unten — unten steht die flüchtige .sb-meldung, und beide können zugleich da sein. Bleibt, bis man klickt. */ .sb-cv-hinweis { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); max-width: min(680px, calc(100% - 32px)); z-index: 70; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--pp-surface); color: var(--pp-text); border: 1px solid var(--pp-warn, var(--pp-line)); border-radius: 10px; padding: 8px 12px; font-size: var(--pp-fs-klein); line-height: var(--pp-lh-text); box-shadow: 0 10px 28px rgba(0, 0, 0, .18); } .sb-cv-hinweis ul { margin: 0; padding-left: 20px; flex-basis: 100%; } .sb-cv-hinweis .pp-btn { padding: 3px 10px; } .sb-leer { color: var(--pp-text-2); font-style: italic; } .sb-tot { color: var(--pp-text-2); } .sb-karte textarea { width: 100%; height: 100%; box-sizing: border-box; resize: none; font: inherit; color: inherit; background: var(--pp-bg); border: 1px solid var(--pp-accent-line); border-radius: 6px; padding: 6px; } /* ---------------- Bedienbox (Auftrag B, 12.08.2026) ---------------- Die Box IST die Karte: Sie füllt sie aus und wächst NIE darüber hinaus — zu langer Inhalt bekommt eine Bildlaufleiste, keine neue Größe. Damit springt die Karte beim Öffnen und Schließen nicht. */ .sb-box { display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%; box-sizing: border-box; min-height: 0; } .sb-box > textarea { flex: 1 1 auto; min-height: 0; height: auto; overflow: auto; } .sb-box > input, .sb-box > .sb-fehler { flex: none; } .sb-box > .sb-html-name { margin-bottom: 0; } /* ---------------- Live-Vorschau der Textkarte (Auftrag B, 11.08.2026) ---------------- Der Bearbeitungszustand darf NICHTS verschieben: Der Text steht danach an derselben Stelle und in derselben Größe wie die Anzeige. Deshalb keine eigene Schrift, kein Kasten um das Feld, nur ein zurückhaltender Rahmen an der Karte — sichtbar bleibt der Zustand über den Cursor. */ .sb-live { outline: none; min-height: 100%; border-radius: 6px; box-shadow: 0 0 0 1px var(--pp-accent-line) inset; padding: 2px 4px; margin: -2px -4px; box-sizing: border-box; cursor: text; } /* Eine leere Zeile bleibt anklickbar — ohne Mindesthöhe fiele sie auf null zusammen und wäre mit der Maus nicht mehr zu treffen. */ .sb-zeile { min-height: 1.5em; } /* Die aktive Zeile ist Quelltext — OHNE eigene Optik (24.08.2026, Jonas: „Das die Leiste blau markiert wird und der Text anders wird … kann entfernt werden"): kein Farbbalken, kein Schriftwechsel mehr, der Text bleibt beim Umschalten an Ort und Stelle. Nur pre-wrap ist FUNKTION, keine Optik: Ein Block-Mathe-Stück trägt seine Umbrüche im Innern (Plan 3 B4), und pre-wrap zeigt sie, statt sie zu einem Leerzeichen zu verschlucken. */ .sb-zeile.roh { white-space: pre-wrap; } /* Warnbox-Zeile „> [!warn] …" (Plan 3 B4, für die Poster-Vorlagen): ein Kasten an Ort und Stelle — das Muster der A3-Übersichten. Das ⚠ steht im Inhalt, nicht hier (Druck und Vorleseprogramm). */ .sb-warnbox { border: 1px solid var(--pp-warn); border-left-width: 4px; background: var(--pp-warn-tint); border-radius: 6px; padding: 3px 8px; margin: 2px 0; white-space: normal; } /* Der ziehbare Anfangspunkt des Richtungsfelds (Plan 3 B3). */ .sb-plot-bild [data-anf] { cursor: move; } /* Die Widget-Bibliothek in der leeren html-Karte (Plan 3 C5). */ .sb-widget-liste { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; } .sb-widget-wahl { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; text-align: left; padding: 6px 10px; cursor: pointer; background: var(--pp-bg); color: var(--pp-text); border: 1px solid var(--pp-line); border-radius: 8px; font: inherit; font-size: var(--pp-fs-klein); } .sb-widget-wahl:hover { border-color: var(--pp-accent-line); background: var(--pp-accent-tint); } .sb-widget-wahl span { font-size: var(--pp-fs-mini); color: var(--pp-text-2); } /* Gesetzte Fragmente nehmen keine Eingaben an (sonst liefe der Cursor in ein KaTeX-Fragment); der Klick daneben trifft trotzdem die Zeile. */ .sb-gesetzt { display: block; } .sb-live .ki-liste { margin: 0; padding-left: 1.2em; } /* ---------------- Dieselbe Vorschau als freistehendes Feld (23.08.2026) ---------------- PreppSandbox.liveFeld baut sie in einen fremden Knoten (heute: das Notizfenster in js/app.js). Auf der Karte trägt .sb-live absichtlich KEINEN Kasten — dort ist die Karte der Kasten. Ein freistehendes Feld braucht einen: Ohne Rahmen sähe man nicht, wo man hineinschreiben kann. Deshalb hier eine eigene Klasse statt einer Änderung an .sb-live — sonst bekäme die Karte den Kasten mit, und der Bearbeitungszustand verschöbe den Text (die Regel, aus der .sb-live entstanden ist). */ .sb-live.sb-feld { min-height: 4.5em; max-height: 40vh; overflow-y: auto; padding: 7px 9px; margin: 0; border: 1px solid var(--pp-line-2); box-shadow: none; background: var(--pp-bg); color: var(--pp-text); white-space: pre-wrap; word-break: break-word; font-size: var(--pp-fs-text); line-height: var(--pp-lh-text); } .sb-live.sb-feld:focus-within { border-color: var(--pp-accent-line); } .sb-live.sb-feld.dunkel { background: var(--pp-surface); } /* Der Platzhalter liegt als Attribut am Knoten, nicht als Text im Feld: Im Feld wäre er nach dem ersten Tippen Teil der Notiz. Er kommt weg, sobald ein Zeichen dasteht (js/sandbox.js, phPflegen) — nicht schon beim Fokus, sonst stünde ein leeres Feld ohne jede Auskunft da. */ .sb-live.sb-feld[data-leer]::before { content: attr(data-ph); color: var(--pp-text-3); pointer-events: none; display: block; margin-bottom: -1.5em; } /* ---------------- Das Textfenster der Textkarte (24.08.2026) ---------------- Der Doppelklick auf eine text-/note-Karte öffnet dieses Fenster am rechten Rand der Fläche (docs/SANDBOX-TEXTKARTE-2026-08-24.md); die Karte darunter bleibt die gesetzte Anzeige und rendert bei jedem Tastendruck neu — SIE ist die Live-Vorschau. Die Größe ist Jonas' Vorgabe: „immer genauso groß … wie die Box der Notiz im Training, wenn man sie nach links oder rechts anheftet, vergrößert" — also 380 px breit (der tutorKlemmW-Standard der Trainingsfenster in js/app.js) und die volle Höhe der Fläche, so wie das angedockte Fenster seine Spalte füllt. Zu langer Quelltext scrollt im Feld (Bildlauf statt Wachsen, dieselbe Regel wie die Bedienboxen); die Schrift bleibt die der Karte — kein Schriftwechsel beim Bearbeiten, das war Teil des Befunds. z-index ÜBER Karten und Gesten-Overlay, aber UNTER dem Rechtsklickmenü (.sb-ctx, 60) und der Flächenmeldung (.sb-meldung, 70): Ein Menü oder eine Meldung, die unter dem Fenster verschwände, wäre für den Nutzer einfach weg. */ /* Die Breite steht als Custom Property, damit ein Kartentyp sie über `breite` weiten kann (A4) — width-Inline schlüge die 85-%-Klemme, die das Fenster auf schmalen Flächen davon abhält, die ganze Fläche zu belegen (Muster --ein-task-w). */ .sb-editfenster { position: absolute; top: 0; right: 0; bottom: 0; width: min(var(--sb-sf-w, 380px), 85%); display: flex; flex-direction: column; min-height: 0; background: var(--pp-surface); border-left: 1px solid var(--pp-line); box-shadow: -10px 0 26px rgba(0, 0, 0, .12); z-index: 59; } /* Das Fenster nimmt beim Öffnen selbst den Fokus, damit Escape sofort wirkt (C31, tabindex -1). Einen Rahmen bekommt es dafür nicht: Es ist kein Bedienelement, und über die Tastatur ist es gar nicht erreichbar — der Ring stünde also nur da, wenn ihn niemand gesucht hat. Die FELDER darin behalten ihren (sie sind tabbar). */ .sb-editfenster:focus { outline: none; } .sb-editfenster-kopf { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--pp-line); } .sb-editfenster-titel { font: 600 10.5px/1.2 var(--pp-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--pp-text-2); margin-right: auto; } .sb-editfenster-x { border: none; background: none; cursor: pointer; color: var(--pp-text-2); font-size: var(--pp-fs-text); line-height: var(--pp-lh-eng); padding: 3px 7px; border-radius: 6px; } .sb-editfenster-x:hover { color: var(--pp-text); background: var(--pp-bg-2); } /* (.sb-editfeld — das Quelltextfeld der Textkarte im Fenster — ist am 27.09.2026 entfallen: Text und Notiz schreiben seitdem IM Block, .sb-blockfeld unten.) */ /* Die Heft-Karte: Verweis plus Knopf (der Doppelklick fehlt dem Finger). */ .sb-heft-fuss { margin-top: 8px; } .sb-md.sb-bind-heft { cursor: pointer; } .sb-editfenster-fuss { padding: 6px 12px; border-top: 1px solid var(--pp-line); font-size: var(--pp-fs-mini); color: var(--pp-text-3); } /* Die Karte, deren Text gerade im Fenster steht: ein dünner Akzentrahmen sagt, WOHIN getippt wird — mehr Marke braucht es nicht, die Karte selbst bleibt die gewöhnliche Anzeige. */ /* Die Karte, die gerade im Seitenfenster bearbeitet wird (A4): derselbe duenne Akzentrahmen wie an der Textkarte, nur am KNOTEN — er traegt den Rahmen seit Auftrag A. Mehr Marke braucht es nicht, die Karte bleibt die gewoehnliche Anzeige. */ .sb-node.sb-in-arbeit { border-color: var(--pp-accent-line); } .sb-md.sb-in-arbeit { box-shadow: 0 0 0 1px var(--pp-accent-line) inset; border-radius: 6px; min-height: 100%; box-sizing: border-box; } /* ---------------- Schreiben IM Block (27.09.2026) ---------------- Jonas: „wirklich alles mit in dem Block schreiben". Die Text- und Notizkarte zeigt im Schreibzustand an Stelle ihrer gesetzten Anzeige ein