/* ============================================================================= WEBSEITEN-BAUKASTEN-MENUE.CSS — Optik des neuen linken Menues fuer den Webseiten-Baukasten, Modul ?modul=webseite (Bauauftrag P1, 07.08.2026). ZWECK: nur die Zeichnung (Masse/Farben/Handy-Schublade). Datenliste und Klick-Verteiler stehen in webseiten-baukasten-menue.js. Alle Regeln, die NEUE Elemente betreffen (.wbm-*), wirken unbedingt, weil diese Elemente nur dann im DOM stehen, wenn die Weiche (?menue=neu&modul=webseite) im JS bereits zugetroffen hat - keine zusaetzliche Bedingung noetig. Die AUSNAHMEN (K-8, Opus-Kontrolle 07.08.2026 - vorher stand hier faelschlich "die EINE Regel", der Kommentar war nach der spaeter ergaenzten Burger-Nachbesserung nicht nachgezogen worden) sind VIER Regeln gegen ZWEI VORHANDENE Elemente aus editor.html: 1x .we-top (Burger-Kollisions-Polster, weiter unten) sowie DREI Regeln fuer #we-layer im Abschnitt "Platz fuer #we-layer" ganz unten (linke Kante 230px ab 1001px, linke Kante 0 bis 1000px, PLUS die neue z-index:66-Regel aus K-1) - alle vier bewusst mit html.wbm-menue-neu abgesichert (die Klasse setzt ein frueh im laufendes 3-Zeilen-Skript, Flacker-Schutz, Muster linkinbio). TOKEN: ganz ueberwiegend var(--p-*), wie im Auftrag verlangt - mit GENAU EINER dokumentierten Ausnahme (--focus, s. u.). WICHTIGER, GEMESSENER BEFUND (Bestandsaufnahme + eigene Pruefung, editor.html:881-888 hell / 1495-1509 dunkel): editor.html definiert lokal NUR diese Teilmenge der Design-Gesetz-Token: --p-brand(-deep/-soft), --p-accent, --p-accent-soft, --p-bg, --p-fg, --p-muted, --p-line, --p-line-strong, --p-surface, --p-surface-2, --p-good, --p-display, --p-font. Insbesondere FEHLEN --p-accent-text und --focus (beide sind Teil des vollen Design-Gesetz- Wortlauts, aber in DIESER Datei lokal nicht definiert). Fuer BEIDE nutzt diese Datei dasselbe, bereits in editor.html etablierte Muster (10x vorhanden laut Bestandsaufnahme: var(--p-x,#hex)) MIT Fallback-Hex direkt aus MASCHINE.md §3: --p-accent-text UND (seit K-2, Opus-Kontrolle 07.08.2026) auch --focus. VORHER/NACHHER beim Fokusring: die urspruengliche Fassung nahm fuer --focus statt eines eigenen Fallback-Hex ersatzweise die schon lokal vorhandene, aber FALSCHE Alternative, die editor.html selbst fuer eigene Fokusringe verwendet (.az-row:focus-visible u. a., editor.html:1659: "box-shadow:0 0 0 3px var(--p-brand-soft)") - der Ring war damit in beiden Themes praktisch unsichtbar (Kontrast 1,15:1 hell / 1,23:1 dunkel, Pflicht laut §14 ist ≥3:1). Jetzt: var(--focus, #4b40e6) hell / var(--focus, #8b82ff) dunkel, Werte 1:1 aus MASCHINE.md §3 (nachgerechnet 6,6:1 bzw. 5,6:1). --focus bleibt trotz fehlendem "p-"-Praefix ein regulaerer Design-Gesetz-Token (s. o.), keine Neuerfindung - die Regel "NUR var(--p-*)-Token" gilt seither mit dieser EINEN dokumentierten, durch §14 begruendeten Ausnahme; --p-accent-text bleibt unveraendert ein --p-*-Token. Hell UND Dunkel: alle uebrigen Werte sind lokal in BEIDEN Themes definiert, kommen also "gratis" mit - nur fuer --p-accent-text steht unten eine eigene [data-theme="dark"]-Zeile, weil dieser Token in KEINEM der beiden lokalen Bloecke existiert (ohne die Zeile bliebe die Aktiv-Farbe im Dunkeln = die HELLE Fallback-Farbe). MASSE nach MASCHINE.md §5a (230px fix, Kante 1px --p-line, Menuepunkt-Polster .5rem .5rem .5rem 1.2rem, Radius 8px, Schrift .9rem/600, Icon 17x17 --p-muted, Hover --p-surface-2 + Icon orange, aktiv --p-accent-soft + --p-accent-text/700 + inset 3px orange) und §19 (Kopf-Etikett .58rem GROSSBUCHSTABEN, Wert 1.06rem/800) sowie der Bauauftrag-Vorgabe fuer die Hauptaktion (40px hoch, Radius 11px). Z-INDEX 65 — RICHTIGGESTELLT (Begruendung ausfuehrlich im Kopf von webseiten-baukasten-menue.js, K-1, Opus-Kontrolle 07.08.2026): ueber #we-layer/.dash-side (beide bleiben 60), aber NICHT unter dessen inneren Overlays (.colpick-ov/.tg-overlay/#we-pagemenu) - die zaehlten wegen des eigenen Stapelkontexts von #we-layer nach aussen nur mit dessen z-index (60), lagen also faktisch UNTER diesem Menue (Ueberdeckungsfehler, mit elementFromPoint nachgewiesen). Fix siehe Abschnitt "Platz fuer #we-layer" ganz unten: #we-layer selbst auf 66 angehoben, NUR ab 1001px. Echte App-Overlays AUSSERHALB von #we-layer (.pop 90, .pv-overlay 140, Toasts 9999/99999) waren nie betroffen und verdecken das Menue unveraendert. */ /* ============================================================================= P2-ERGAENZUNG (Bauauftrag P2, 07.08.2026, umbau-plan.html Paket P2). Neue Bausteine, alle nur wirksam hinter der bestehenden Weiche: .wbm-kontext (rechtes Kontext-Panel, 300px, Design-Gesetz §5c) - haengt am document.body (Geschwister von .wbm-side/.wbm-burger/.wbm-back), NICHT IN #we-layer - ausfuehrliche Begruendung mit Stapelkontext-Herleitung im Kopfkommentar von webseiten-baukasten-menue.js, Abschnitt 1. Am Desktop BEWUSST OHNE eigenes z-index (siehe dort); am Handy eigenes z-index in der eigenen Media-Query weiter unten. Die sechs hineingehaengten Bestandteile (.we-panel + .inspector, physisch umgezogen, s. JS) behalten ihre GESAMTE restliche Optik (Innenabstand, Farben, Karten) unangetastet - nur Hoehe/ Breite/Positionierung werden auf "fuellt das neue Panel" umgestellt. .we-top/#we-dockgrip/#dock-more werden per html.wbm-menue-neu unsichtbar (Paket-P2-Vorgabe "obere Leiste + unteres Dock aus") - bleiben im DOM, editor.html bedient sie weiterhin per echtem .click() (unveraendertes P1-Muster). #we-layer bekommt zusaetzlich zu seiner P1-Linksverschiebung (left:230px) eine RECHTS-Verschiebung (right:300px, gleiche 1001px-Schwelle) - Canvas-Zone liegt dadurch exakt zwischen Menue und Panel; .canvas-wrap/ .canvas selbst brauchen keine Aenderung (schon "flex:1 1 auto;overflow:auto" bzw. feste 1080px-Breite, reagiert von selbst auf die kleinere Flaeche). .wbm-kgriff (Handy-Griff des Panels) - Optik/Masse abgeschaut von .kp-griff aus assets/js/kontext-panel.js (NUR abgeschaut, keine Zeile uebernommen), Verhalten aber wie .wbm-burger (immer sichtbar/klickbar, kein Verblassen - Begruendung im JS-Kopf). .wbm-fuss/.wbm-seg (Hell/Dunkel-Segment im Menue-Fuss) - Optik 1:1 abgeschaut von .libm-seg aus assets/css/linkinbio-menue.css (dort fuer Handy/Desktop-Ansicht, hier fuer Hell/Dunkel neu befuellt). prefers-reduced-motion (§14-Pflicht): deckt die ZWEI neuen Uebergaenge dieser Ergaenzung (.wbm-kontext-Schublade, gleiche Technik wie die P1- Menueschublade) UND, als kleine Zusatzhaertung, die zwei bereits bestehenden P1-Uebergaenge (.wbm-side/.wbm-back) mit ab - die hatten noch keine eigene Ausnahme, obwohl das Gesetz (§4/§14) "JEDE Animation" verlangt; rein additiv, keine bestehende Regel wird veraendert. */ /* ---------------------------------------------------------------- Grundlage */ .wbm-side, .wbm-burger, .wbm-back, .wbm-kontext, .wbm-kgriff { box-sizing: border-box; } .wbm-side *, .wbm-burger * { box-sizing: border-box; } /* ============================================================ P6 (08.08.2026, Bauauftrag P6) Auflage K2 (Opus-Kontrolle P5): OHNE das frueher von kontext-panel.js injizierte html{scrollbar-gutter:stable;scrollbar-width:none} (laedt seit P6 nie mehr, s. editor.html, Dateiende) reserviert editor.html:973 weiterhin SEIN EIGENES html{scrollbar-gutter:stable} - ohne das GLEICHZEITIGE scrollbar-width:none bleibt dabei die Scrollbalken-Rinne trotzdem sichtbar (15px, Windows-Standard-Scrollbar), und das rechte Panel rutscht dadurch von x=1300 auf 1285. MASCHINE.md §4-Wortlaut ("Seiten-Scrollbalken UNSICHTBAR (scrollbar-width:none), aber scrollbar-gutter: stable - Seiten mit/ohne Scrollbalken sind gleich breit") hier 1:1 nachgezogen, mit demselben Klassen-Anker (html.wbm-menue-neu) wie der Rest dieser Datei - seit P6 IMMER gesetzt, wirkt also unbedingt, in BEIDEN Modulen. GEGENGEMESSEN in der P5-Kontrolle (k1b-probe.js, "panelXmitScrollbarWidthNone"): traegt man scrollbar-width:none zur Laufzeit nach, springt das Panel in beiden Modulen sofort auf 1300 - genau das leistet diese Regel jetzt dauerhaft. ::-webkit-scrollbar zusaetzlich als Chromium-Vorversions-/Cross-Browser- Haertung (allgemeine CSS-Technik, kein Byte aus kontext-panel.js uebernommen). */ html.wbm-menue-neu { scrollbar-width: none; scrollbar-gutter: stable; } html.wbm-menue-neu::-webkit-scrollbar { width: 0; height: 0; display: none; } /* ----------------------------------------------------------------- Seitenleiste */ .wbm-side { position: fixed; left: 0; top: 0; bottom: 0; width: 230px; z-index: 65; display: flex; flex-direction: column; background: var(--p-surface); color: var(--p-fg); border-right: 1px solid var(--p-line); font-family: var(--p-font); transition: left .22s ease; } /* ---- Rueckweg zur Plattform: gedaempft, als erstes Element vor .wbm-kopf, optisch wie ein Breadcrumb (Ausgang), kein weiterer Menuepunkt. ---- */ .wbm-rueckweg { display: flex; align-items: center; gap: .4rem; margin: .7rem .9rem 0; padding: .3rem 0; font: 600 .78rem/1.2 var(--p-font); color: var(--p-muted); text-decoration: none; } .wbm-rueckweg svg { width: 15px; height: 15px; flex: none; } .wbm-rueckweg:hover { color: var(--p-accent); } /* Fokusring auf var(--focus,#hex) statt var(--p-brand-soft) (K-2, Opus- Kontrolle 07.08.2026): der Ring war mit --p-brand-soft in beiden Themes praktisch unsichtbar (Kontrast hell 1,15:1, dunkel 1,23:1 - Pflicht laut §14 ist ≥3:1). Fallback-Hexe 1:1 aus MASCHINE.md §3, nachgerechnet: #4b40e6 auf #ffffff = 6,6:1, #8b82ff auf #1a1a1e = 5,6:1. Gleiches Muster an allen vier Stellen dieser Datei (.wbm-rueckweg/.wbm-pub/.wbm-it/ .wbm-burger), s. Kopfkommentar. */ .wbm-rueckweg:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus, #4b40e6); border-radius: 6px; } [data-theme="dark"] .wbm-rueckweg:focus-visible { box-shadow: 0 0 0 3px var(--focus, #8b82ff); } /* ---- Kopf: "Deine Website" + Website-Name (Design-Gesetz §19) ---- */ .wbm-kopf { padding: .85rem .9rem .3rem; } .wbm-kopf__lbl { font: 700 .58rem/1 var(--p-font); letter-spacing: .09em; text-transform: uppercase; color: var(--p-muted); } .wbm-kopf__val { display: block; margin-top: .16rem; font: 800 1.06rem/1.25 var(--p-display); color: var(--p-fg); overflow-wrap: break-word; } /* ---- "Speichern": die EINE Hauptaktion im Kopf (§19/§5a: Hoehe 40px, Radius 11px) - orange gefuellt, weisse Schrift. ---- */ .wbm-pub { display: flex; align-items: center; justify-content: center; gap: .45rem; width: calc(100% - 1.2rem); height: 40px; margin: .5rem .6rem .7rem; border: 0; border-radius: 11px; background: var(--p-accent); color: #fff; font: 700 .9rem/1 var(--p-font); cursor: pointer; box-shadow: 0 3px 10px rgba(239,115,39,.35); transition: filter .14s; } .wbm-pub:hover, .wbm-pub:focus-visible { filter: brightness(1.07); } .wbm-pub:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus, #4b40e6), 0 3px 10px rgba(239,115,39,.35); } [data-theme="dark"] .wbm-pub:focus-visible { box-shadow: 0 0 0 3px var(--focus, #8b82ff), 0 3px 10px rgba(239,115,39,.35); } .wbm-pub svg { width: 16px; height: 16px; flex: none; } /* ---- N3 (08.08.2026, Max' Entscheidung; Design-Gesetz §11e): kurze gruene Bestaetigung NACH dem Speichern, direkt an .wbm-pub selbst - Begruendung im Klick-Handler (webseiten-baukasten-menue.js, wbmSpeichernBestaetigen()/verdrahten()). --p-good ist einer der in editor.html lokal (hell UND dunkel) definierten Token (s. Kopfkommentar dieser Datei) - keine Ausnahme/kein Fallback-Hex noetig. Fixe rgba-Tonung im Schatten (nicht je Theme neu abgeleitet) - dasselbe, bereits etablierte Muster wie beim orangen Schatten oben (auch dort EIN fixer rgba-Ton fuer beide Themes). */ .wbm-pub.wbm-pub--ok { background: var(--p-good); box-shadow: 0 3px 10px rgba(24,160,106,.35); } /* ---- Rueckgaengig / Wiederholen (10.08.2026, Max' Auftrag; Vorbefund Pruefung Runde 2, B4) Direkt UNTER "Speichern", weil beide denselben Gegenstand haben: den Datensatz als Ganzes. Design-Gesetz §6: "Speichern" bleibt der EINE gefuellte orange Knopf dieser Flaeche, diese beiden sind darum UMRISS-Knoepfe nach .btn--ghost - Flaeche --p-surface, Schrift --p-fg, Kante 1px --p-line-strong, KEIN Schatten; Hover Kante+Schrift orange auf --p-surface-2. Hoehe 34px: kleiner als die 40px der Hauptaktion darueber (Rangfolge sichtbar), aber ueber der 31-33px-Standardhoehe aus §6, weil hier mit dem Finger getroffen wird. Wiederholen ist bewusst schmal (nur Zeichen): es gehoert dazu, soll aber nicht gleichrangig werben - "Rueckgaengig" ist das Bestellte. Fokusring wie an den drei anderen Stellen dieser Datei ueber var(--focus,#hex), NICHT ueber --p-brand-soft (K-2, s. Kopfkommentar). ---- */ .wbm-hist { display: flex; gap: .4rem; margin: -.3rem .6rem .7rem; } .wbm-hist__b { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 34px; padding: 0 .6rem; border: 1px solid var(--p-line-strong); border-radius: 10px; background: var(--p-surface); color: var(--p-fg); font: 700 .82rem/1 var(--p-font); cursor: pointer; transition: border-color .14s, color .14s, background .14s; } .wbm-hist__b--zurueck { flex: 1 1 auto; } .wbm-hist__b--vor { flex: 0 0 auto; width: 40px; padding: 0; } .wbm-hist__b svg { width: 16px; height: 16px; flex: none; } .wbm-hist__b:hover:not(:disabled), .wbm-hist__b:focus-visible:not(:disabled) { background: var(--p-surface-2); border-color: var(--p-accent); color: var(--p-accent-text); } .wbm-hist__b:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus, #4b40e6); } [data-theme="dark"] .wbm-hist__b:focus-visible { box-shadow: 0 0 0 3px var(--focus, #8b82ff); } /* Deaktiviert = sichtbar bleiben, nicht verschwinden: der Nutzer soll den Weg zurueck auch dann sehen, wenn es gerade nichts zurueckzunehmen gibt. */ .wbm-hist__b:disabled { opacity: .45; cursor: default; } /* Leise Bestaetigung nach einem Sprung (§11e "direkt am Knopf") - nur Kante und Schrift, kein Textwechsel: die Zeile ist schmal und soll nicht umbrechen. */ .wbm-hist__b--ok { border-color: var(--p-accent); color: var(--p-accent-text); } @media (prefers-reduced-motion: reduce){ .wbm-hist__b { transition: none; } } /* ---- Scroll-Bereich mit den Gruppen ---- */ .wbm-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 .6rem .6rem; } .wbm-grp { padding: .55rem .5rem .25rem; font: 700 .72rem/1 var(--p-font); letter-spacing: .05em; text-transform: uppercase; color: var(--p-muted); } .wbm-trenn { height: 1px; background: var(--p-line); margin: .5rem .35rem; } /* ---- Menuepunkt (§5a: Polster .5rem .5rem .5rem 1.2rem, Radius 8px, Schrift .9rem/600, Icon 17x17 --p-muted) ---- */ .wbm-it { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .5rem .5rem 1.2rem; border: 0; border-radius: 8px; background: transparent; color: var(--p-fg); font: 600 .9rem/1.2 var(--p-font); text-align: left; cursor: pointer; } .wbm-it svg { width: 17px; height: 17px; flex: none; color: var(--p-muted); } .wbm-it__txt { flex: 1; min-width: 0; overflow-wrap: break-word; } .wbm-it:hover { background: var(--p-surface-2); } .wbm-it:hover svg { color: var(--p-accent); } .wbm-it:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus, #4b40e6); } [data-theme="dark"] .wbm-it:focus-visible { box-shadow: 0 0 0 3px var(--focus, #8b82ff); } /* Aktiv (§5a: Flaeche --p-accent-soft, Schrift --p-accent-text/700, orange Innenkante links). --p-accent-text ist in editor.html NICHT lokal definiert (siehe Kopfkommentar) - Fallback-Hex 1:1 aus MASCHINE.md §3. */ .wbm-it[aria-current="page"] { background: var(--p-accent-soft); color: var(--p-accent-text, #964209); font-weight: 700; box-shadow: inset 3px 0 0 var(--p-accent); } .wbm-it[aria-current="page"] svg { color: var(--p-accent-text, #964209); } [data-theme="dark"] .wbm-it[aria-current="page"], [data-theme="dark"] .wbm-it[aria-current="page"] svg { color: var(--p-accent-text, #f3854a); } /* "Seiten verwalten…" / "Speichern und schließen": gedaempfter, leiser Ton - §19: "Speichern und schließen" bleibt bewusst KEIN zweiter gefuellter Knopf. */ .wbm-it--leise { color: var(--p-muted); font-weight: 600; } .wbm-it--leise:hover { color: var(--p-fg); } /* ---- P2: Fuss mit Hell/Dunkel-Segment (ausserhalb von .wbm-scroll, bleibt unten stehen - .wbm-side ist display:flex;flex-direction:column, .wbm-fuss folgt als flex:none-Geschwister von .wbm-scroll). Optik 1:1 abgeschaut von .libm-seg (assets/css/linkinbio-menue.css), dort fuer Handy/Desktop-Ansicht, hier mit Hell/Dunkel-Bedeutung neu befuellt. ---- */ .wbm-fuss { flex: none; padding: .5rem .6rem .8rem; border-top: 1px solid var(--p-line); } .wbm-seg { display: flex; gap: .25rem; padding: .25rem; background: var(--p-surface-2); border: 1px solid var(--p-line); border-radius: 10px; } .wbm-seg button { flex: 1; padding: .4rem .3rem; border: 0; border-radius: 7px; background: transparent; color: var(--p-muted); font: 600 .78rem/1 var(--p-font); cursor: pointer; } .wbm-seg button[aria-pressed="true"] { background: var(--p-surface); color: var(--p-fg); box-shadow: 0 1px 2px rgba(0,0,0,.08); } .wbm-seg button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus, #4b40e6); } [data-theme="dark"] .wbm-seg button:focus-visible { box-shadow: 0 0 0 3px var(--focus, #8b82ff); } /* ============================================================== Handy: Schublade 1:1 Bauart linkinbio-menue.js/dash-menu.js (Design-Gesetz §16): Burger fest oben links, Seitenleiste ausserhalb des Bildes (left:-260px), Rueckwand faengt Klick ab. Schwelle 1000/1001px wie linkinbio-menue.css/dash-menu.js. */ .wbm-burger { display: none; position: fixed; left: 12px; top: 12px; z-index: 70; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1.5px solid var(--p-line-strong); border-radius: 9px; background: var(--p-surface); color: var(--p-fg); cursor: pointer; box-shadow: 0 6px 18px -10px rgba(0,0,0,.35); } .wbm-burger svg { width: 19px; height: 19px; } .wbm-burger:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus, #4b40e6); } [data-theme="dark"] .wbm-burger:focus-visible { box-shadow: 0 0 0 3px var(--focus, #8b82ff); } .wbm-back { position: fixed; inset: 0; z-index: 64; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .2s; } .wbm-back.show { opacity: 1; pointer-events: auto; } @media (max-width: 1000px) { .wbm-side { left: -260px; box-shadow: 0 20px 60px rgba(0,0,0,.4); } .wbm-side.is-open { left: 0; } .wbm-burger { display: inline-flex; } /* SELBST GEFUNDENER UND BEHOBENER BEFUND (P6, 08.08.2026, beim Testbau von tests/test-wb-menue.js per ECHTEM Koordinaten-Klick entdeckt, nicht nur per .click() vermutet - genau die in umbau-plan.html dokumentierte Falle "synthetisches .click() loest pointerdown-Pfade nicht aus" haette diesen Fund verdeckt). #wbShopVermerk (der gruene Zugehoerigkeits-Banner, editor.html, z-index:99999, position:sticky) wird mit Auflage K4 jetzt auch auf der BLANKEN Standard-Adresse editor.html sichtbar (vorher nur bei ?modul=shop&menue=neu) - der Text bricht bei 375px auf drei Zeilen um (gemessene Banner-Hoehe 75px) und ueberdeckt damit vollstaendig den Burger (top:12px..52px, unter z-index:70 klar unter 99999). GEMESSEN (elementFromPoint auf dem Burger-Mittelpunkt): traf DIV#wbShopVermerk, nicht den Burger - ein echter Tap auf dem Handy haette den Burger nicht geoeffnet, die Menue-Schublade waere unerreichbar gewesen. Fix: der Burger bekommt NUR in dieser Media-Query eine hoehere Zahl als der Banner - er ist ein staendig erreichbares Bedienelement (kein Vermerk, keine Meldung), darf also ueber jedem Inhalt liegen. #wbShopVermerk selbst bleibt unveraendert (kein Tabu-Bruch, ausserhalb dieser Datei). P6-REST-FIX (K3, Opus-Kontrolle P6, 08.08.2026): der Panel-Griff (.wbm-kgriff) stand BIS HIERHIN mit in dieser Selektorliste, wirkte aber nie - seine eigene Grundregel (weiter unten in dieser Datei, ".wbm-kgriff{z-index:70}") kommt TEXTLICH SPAETER, hat dieselbe Spezifitaet (0,1,0) und gewinnt darum die Kaskade, egal ob die Media-Query hier oben zutrifft (Media-Queries erhoehen die Spezifitaet nicht). GEMESSEN (Opus-Kontrolle, m3-messwerte.json, 375px): .wbm-burger errechnete 100000, .wbm-kgriff weiterhin nur 70 - die CSS behauptete Schutz, den der Browser nicht rechnete (heute folgenlos: der Banner ueberlappt den Griff bei y 373..439 nicht). Fix: die Zeile steht jetzt HINTER der .wbm-kgriff-Grundregel (s. dort, eigene Media-Query direkt an der Grundregel) statt hier - dieselbe Reparatur wie am Burger, nur an der richtigen Stelle in der Kaskade. */ .wbm-burger { z-index: 100000; } } @media (min-width: 1001px) { .wbm-back { display: none; } } /* ============================================================== P2: Kontext-Panel rechts 300px, Design-Gesetz §5c ("Kante links 1px --p-line", --p-surface). Haengt an document.body (Architektur-Begruendung: Kopfkommentar dieser Datei + webseiten-baukasten-menue.js). Am Desktop bewusst OHNE eigenes z-index - ein Element mit z-index:auto verliert automatisch gegen jedes Geschwister mit EXPLIZITEM z-index (hier #we-layer, das die K-1-Reparatur ab 1001px auf 66 anhebt), die App-Overlays #colpick/#site-modal/#tpl-gallery (alle drei eigenes position:fixed;inset:0, decken unabhaengig von #we-layers Box immer den ganzen Bildschirm ab) decken dieses Panel dadurch automatisch ab, genau wie sie das Menue schon abdecken. Erst am Handy (eigene Media-Query unten) braucht das Panel eine eigene Zahl, um ueber die geteilte Rueckwand (.wbm-back, 64) zu kommen. */ .wbm-kontext { position: fixed; top: 0; right: 0; bottom: 0; width: 300px; background: var(--p-surface); border-left: 1px solid var(--p-line); font-family: var(--p-font); /* P6 (08.08.2026, K5): Flex-Spalte, damit der neue ORGANISATION-Block unten fest sitzt (§5c) UND der jeweils darueberliegende Inhalt (Editor: .wbm-kontext__body-Wrapper: Shop: .wbm-akt__kopf + .wbm-akt__body) den restlichen Platz bekommt - s. Abschnitt "P6: ORGANISATION-Block" weiter unten fuer die volle Begruendung beider Zweige. */ display: flex; flex-direction: column; } /* Die sechs umgezogenen Bestandteile (.we-panel ×5 + .inspector) fuellen jetzt das neue Panel statt die alte Dock-Hoehe (var(--dock-h)) - Position/Groesse umgestellt, ALLE uebrige Optik (Innenabstand, Farben, Karten-Layout) unangetastet. position:absolute wirkt hier zuverlaessig, weil .wbm-kontext selbst position:fixed ist und damit den Bezugsrahmen fuer seine Kinder bildet (unabhaengig davon, wo im DOM-Baum .wbm-kontext haengt). */ html.wbm-menue-neu .wbm-kontext .we-panel, html.wbm-menue-neu .wbm-kontext .inspector { position: absolute; inset: 0; height: auto; width: auto; border-top: 0; } /* P3 AUFLAGE A-4 (Opus-Kontrolle P2, K-2): #panel-menue klippte 2px Text (scrollWidth 301 vs. clientWidth 299 - "Ausgeblendet" / "Kein Menü – Einzelseite (One-Pager)"). URSACHE (selbst nachgemessen mit Puppeteer, a4-diagnose.js): editor.html:6350 baut je Menü-Options-Kachel (.we-menuopt, 2-spaltig ueber .dock-menugrid) einen NAMENLOSEN als Flex-Kind fuer Titel+Untertitel (.mt/.ms) - Flex-Kinder haben per Spezifikation min-width:auto (= die Breite ihres LAENGSTEN unteilbaren Worts), nicht 0. Im alten, breiten Dock (vor P2) blieb dafuer immer genug Platz; im neuen, 299px schmalen Kontext-Panel (2 Spalten a. ~104px) reicht der Platz beim laengsten Untertitel nicht mehr - der Text ragt 1,92px ueber die Kante und wird von editor.html:1251 (.we-panel{overflow-x:hidden}) abgeschnitten. FIX HIER (nicht in editor.html - der alte Ohne-Weiche-Dock ist breit genug und bewusst unangetastet): min-width:0 erlaubt dem Flex-Kind, unter seine Inhalts-Mindestbreite zu schrumpfen und regulaer umzubrechen - das loeste 2 der 3 gemessenen Ueberlauf-Stellen. Die DRITTE (".mt", das Wort "Ausgeblendet" allein auf der ersten umbrochenen Zeile) blieb: ein EINZELNES, nicht trennbares Wort ist in der 2-spaltigen Kachel (editor.html: 6348 .dock-menugrid, repeat(2,1fr)) bei 299px Panelbreite ca. 1,9px breiter als die verfuegbare Spalte (~104px) - das kann min-width:0 nicht mehr heilen, ein Wort selbst schrumpft nicht. Deshalb zusaetzlich: die Kachel- Spalten NUR in diesem schmalen Panel auf eine Spalte umstellen (die Options- Kacheln waren fuer den alten, breiten Dock als 2-spaltig gedacht - im 300px-Panel ist eine Spalte die passende Antwort, keine Struktur-, nur eine Breiten-Anpassung). Scope bewusst auf .wbm-kontext begrenzt; der alte Ohne-Weiche-Dock bleibt 2-spaltig. Nachgemessen: scrollWidth danach 299 = clientWidth 299, 0 Ueberlauf, kein Text abgeschnitten (s. Bau-Bericht O6). */ html.wbm-menue-neu .wbm-kontext .we-menuopt .mi + span { min-width: 0; } html.wbm-menue-neu .wbm-kontext .dock-menugrid { grid-template-columns: 1fr; } @media (max-width: 1000px) { .wbm-kontext { z-index: 65; right: -330px; box-shadow: -20px 0 60px -20px rgba(0,0,0,.4); transition: right .22s ease; } .wbm-kontext.is-open { right: 0; } } /* ---- P2: Griff der Panel-Schublade (Handy) - Masse/Optik abgeschaut von .kp-griff aus assets/js/kontext-panel.js (NUR angeschaut, keine Zeile uebernommen); Verhalten wie .wbm-burger (immer sichtbar/klickbar, siehe JS-Kopf). z-index 70 = dieselbe Stufe wie .wbm-burger, aus demselben Grund: Geschwister von document.body, muss ueber der geteilten Rueckwand (64) UND ueber #we-layer liegen, auch dort wo #we-layer am Handy bei 60 bleibt. */ .wbm-kgriff { display: none; position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 70; width: 30px; height: 66px; align-items: center; justify-content: center; border: 1.5px solid var(--p-line-strong); border-right: 0; border-radius: 13px 0 0 13px; background: var(--p-surface); color: var(--p-accent); cursor: pointer; box-shadow: -6px 0 18px -10px rgba(0,0,0,.35); } .wbm-kgriff svg { width: 18px; height: 18px; } .wbm-kgriff:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus, #4b40e6); } [data-theme="dark"] .wbm-kgriff:focus-visible { box-shadow: 0 0 0 3px var(--focus, #8b82ff); } @media (max-width: 1000px) { .wbm-kgriff { display: inline-flex; } /* P6-REST-FIX (K3, Opus-Kontrolle P6, 08.08.2026): dieselbe Anhebung wie beim Burger (@media max-width:1000px weiter oben, ".wbm-burger{z-index:100000}"), aber ERST HIER, HINTER der Grundregel oben (".wbm-kgriff{z-index:70}") platziert - nur an dieser Stelle gewinnt sie die Kaskade (gleiche Spezifitaet 0,1,0, spaeter im Quelltext siegt). Vorher stand dieselbe Zeile mit im Burger-Block weiter oben und wurde dort von der Grundregel ueberschrieben (P6-K3: .wbm-kgriff massen sich als 70 statt 100000). Kein Ueberlapp mit dem Banner heute (Griff bei y 373..439, Banner bei y 0..75), aber derselbe Rang wie der Burger schuetzt davor, dass ein wachsender Banner den Griff kuenftig unbemerkt verdeckt. */ .wbm-kgriff { z-index: 100000; } } /* ---- P2: obere Leiste + unteres Dock aus (Paket-P2-Vorgabe). Bleiben im DOM (editor.html bedient sie weiterhin per echtem .click(), P1-Muster) - nur unsichtbar. #dock-more BRAUCHT !important (SELBST GEFUNDENER UND BEHOBENER BEFUND, per Browser-Messung, nicht nur Quelltext-Lesen): activeDockScroller() (editor.html:5154) hat ZWEI Zweige - der ERSTE ("b.querySelector('.we-panel.on')", auf .we-body beschraenkt) liefert nach dem Umzug tatsaechlich nichts mehr, der ZWEITE aber ("document.getElementById('inspector')", UNBESCHRAENKT, findet #inspector unabhaengig von seinem neuen Ort in .wbm-kontext) greift weiterhin und liefert das jetzt sichtbare Inspektor-Element - dessen Scroll-Zustand setzt ".dock-scrollhint" auf .we-body, und die VORHANDENE Bestandsregel ".we-body.dock-scrollhint #dock-more{ display:flex }" (editor.html) hat hoehere Spezifitaet (1 ID + 2 Klassen) als ein einfaches "html.wbm-menue-neu #dock-more{ display:none }" (1 ID + 1 Klasse + 1 Typ-Selektor) - #dock-more blieb dadurch bei laengeren Panel-Inhalten wieder sichtbar. Gleiche Lage wie die BEREITS VORHANDENE Regel ".we-body.we-dock-zu #dock-more{ display:none !important }" im Bestand - dasselbe, dort schon etablierte Werkzeug (!important) uebernommen, keine neue Technik erfunden. */ html.wbm-menue-neu .we-top, html.wbm-menue-neu #we-dockgrip { display: none; } html.wbm-menue-neu #dock-more { display: none !important; } /* ---- P2: SELBST GEFUNDENER UND BEHOBENER BEFUND - das globale, generische Kontext-Panel der Plattform (assets/js/kontext-panel.js, #kontextPanel/ .kp-griff/.kp-backdrop) wird von dash-menu.js IMMER nachgeladen (dash-menu.js Z. 9-18, KEINE Modul-Pruefung), also auch hinter dieser Weiche - bisher folgenlos, weil P1 noch kein eigenes rechtes Panel hatte. Jetzt kollidiert es SPATIAL exakt mit dem neuen .wbm-kontext (beide right:0, 300px, gleiche Handy-Griff-Position rechts mittig) UND gewinnt die Stapel-Reihenfolge klar: .kp-griff traegt z-index:1180 (kontext-panel.js), weit ueber jeder Zahl dieser Datei. GEMESSEN (elementFromPoint/elementsFromPoint, 1600px UND 375px): ein echter Klick/Tap an der Panel-/Griff-Position traf bislang IMMER das fremde #kontextPanel bzw. #kpGriff, NIE das eigene - das eigene Panel war fuer echte Nutzer faktisch unbedienbar, obwohl es fehlerfrei im DOM/Datenfluss existierte (programmatische .click()-Aufrufe in einer ersten Selbstmessung hatten das verdeckt, weil sie die Ueberdeckung nicht pruefen - Lehre daraus: N-Messungen mit ECHTEN Koordinaten-Klicks/Taps nachgezogen). Fix: das fremde Geruest hinter DIESER Weiche vollstaendig unsichtbar UND unbedienbar machen (keine Nachbildung/Aenderung an kontext-panel.js/ dash-menu.js selbst - beide bleiben Tabu/geteilter Bestand, ihre Funktionen laufen im Hintergrund weiter, nur wirkungslos). display:none entfernt auch pointer-events vollstaendig (kein pointer-events:none noetig). !important zusaetzlich zur ohnehin hoeheren Selektor-Spezifitaet (0,2,1 gegen 0,1,0), weil kontext-panel.js sein