/* Theme Name: LotzApp B2B Theme Theme URI: https://somesunnymind.com/ Update URI: https://github.com/somesunnymind/lotzwoo-theme-base Author: LotzApp Solutions Description: Minimales Block-Theme für B2B-Großhandelsshops auf WooCommerce. Trägt das Design-System in theme.json und sonst so wenig wie möglich — Kopfbereich, Fußbereich, zwei zuweisbare Seitenvorlagen. Alles Kundenspezifische gehört in ein Kindtheme. Version: 0.4.0 Requires at least: 6.6 Tested up to: 7.0 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: lotzwoo-theme-base Tags: block-theme, full-site-editing, e-commerce */ /* ================================================================== Die Brücke zwischen theme.json und den B2B-Oberflächen. Das Plugin bringt sein eigenes Design-System mit (`b2b-tokens.css`, 54 Custom Properties, auf die acht Wurzeln unten gescopet — bis zum 2026-08-13 stand hier „`.lotzwoo-b2b-shop` und `.lotzwoo-reorder`", und genau diese verkürzte Liste war der Fehler). Das ist richtig so: das Plugin muss in jedem Theme funktionieren, auch in einem, das nichts von ihm weiß. Dieses Theme weiß von ihm. Also übersetzt es hier die theme.json-Presets in die Token des Plugins — genau an der Stelle, die der Kommentar in `b2b-tokens.css` dafür vorsieht: "Wo eine Site übernehmen soll, genügt es, den Token auf einer der Wurzeln zu überschreiben." Die Richtung ist Absicht. Stünde die Abhängigkeit im Plugin, hinge das Plugin am Theme. So hängt das Theme am Plugin, und wer das Theme wechselt, bekommt wieder die Standardwerte statt einer kaputten Oberfläche. Der Fallback hinter jedem `var()` ist derselbe Wert, den das Plugin ohnehin mitbringt. Ein Kindtheme ändert nur theme.json. Diese Datei bleibt unberührt. `.lotzwoo-heldback` ist seit Ticket 15 dabei. Die Sektion der zurückgehaltenen Positionen wird vom Plugin **clientseitig** in den Warenkorb-Slot gezeichnet und liegt damit außerhalb von `.lotzwoo-b2b-shop` — ohne eigene Wurzel erreichte sie keine der Token, und sie ist die einzige Plugin-Fläche im Kaufweg, die das Plugin selbst noch nicht gestaltet (`grep heldback` über seine Stylesheets findet nichts). Deshalb stehen ihre Regeln weiter unten in dieser Datei; sobald das Plugin eigene mitbringt, findet es hier die Token des Kundenthemes bereits vor. ================================================================== */ /* ------------------------------------------------------------------ Die acht Wurzeln sind ein Vertrag zwischen zwei Repos. (`.lotzwoo-standing-orders` kam mit AP-58, `.lotzwoo-contextcard` mit AP-60.) Dieselbe Liste steht in `lotzapp-for-woocommerce/assets/css/b2b-tokens.css`, und sie muss dort dieselbe sein. Wer hier eine Fläche hinzufügt und dort nicht, baut genau den Fehler, der am 2026-08-13 gefunden wurde: das Plugin führte fünf Wurzeln, dieses Theme drei, die Schnittmenge war zwei — und auf `.lotzwoo-favorites`, `.lotzwoo-locations` und `.lotzwoo-ordercontext` galt deshalb **kein einziges** Token dieser Datei. Die drei Konto-Flächen trugen die Marke des Kunden nicht: die Grundfläche stand dort auch auf Bersta bei #ffffff statt bei #fbf7f0, mitten in einem cremefarbenen Shop. Eine Fläche steht auch dann in beiden Listen, wenn eine der beiden Seiten sie noch nicht gestaltet. Token kosten nichts; die Lücke ist das Teure, und sie wird nirgends rot — dasselbe Muster wie AD-11, nur andersherum. Die Reihenfolge im Dokument ist seit dem 2026-08-13 zugesagt: `functions.php` hängt diese Datei an das Token-Stylesheet des Plugins, wo es geladen ist. Beide Seiten definieren dieselben Token auf derselben Spezifität — es gewinnt, was später steht, und das muss diese Datei sein, sonst trägt keine Fläche die Marke. ------------------------------------------------------------------ */ .lotzwoo-b2b-shop, .lotzwoo-reorder, .lotzwoo-favorites, .lotzwoo-locations, .lotzwoo-standing-orders, .lotzwoo-ordercontext, .lotzwoo-contextcard, /* AP-70 (C1/C5): die zwei fremden Wurzeln. `b2b-tokens.css` traegt sie ebenfalls — beide Seiten definieren dieselben Token auf derselben Spezifitaet, und es gewinnt, was spaeter steht. Fehlt eine Zeile hier, traegt die Flaeche die Vorgabefarben des Plugins statt der Marke, und nichts wird davon rot. */ .lotzwoo-overview, .lotzwoo-heldback, .woocommerce-MyAccount-content, .woocommerce-MyAccount-navigation { --lwb-brand-50: var(--wp--preset--color--brand-50, #eaf6f1); --lwb-brand-100: var(--wp--preset--color--brand-100, #cfe9de); --lwb-brand-200: var(--wp--preset--color--brand-200, #a3d5c2); --lwb-brand-300: var(--wp--preset--color--brand-300, #6bbb9f); --lwb-brand-400: var(--wp--preset--color--brand-400, #349a7a); --lwb-brand-500: var(--wp--preset--color--brand-500, #157d5f); --lwb-brand-600: var(--wp--preset--color--brand-600, #0f6b51); --lwb-brand-700: var(--wp--preset--color--brand-700, #0b5641); --lwb-brand-800: var(--wp--preset--color--brand-800, #084132); --lwb-brand-900: var(--wp--preset--color--brand-900, #062f25); --lwb-ink-900: var(--wp--preset--color--ink-900, #0d1520); --lwb-ink-700: var(--wp--preset--color--ink-700, #263243); --lwb-ink-600: var(--wp--preset--color--ink-600, #3a4759); --lwb-ink-500: var(--wp--preset--color--ink-500, #5a6879); --lwb-ink-400: var(--wp--preset--color--ink-400, #8592a3); --lwb-ink-300: var(--wp--preset--color--ink-300, #b9c2cd); --lwb-ink-200: var(--wp--preset--color--ink-200, #dbe1e8); --lwb-ink-100: var(--wp--preset--color--ink-100, #f1f4f7); --lwb-ink-50: var(--wp--preset--color--ink-50, #f7f9fb); /* Die größte Fläche der Oberfläche: die Rolle „Karte, Tabelle, Eingabefeld" — 32 Regeln. Ein Kundentheme auf Creme würde sonst weiße Kästen auf getöntem Grund zeigen. Sie hängt deshalb am Preset `surface` und nicht an `white`: Weiß muss Weiß bleiben können, dort wo es wörtlich gemeint ist (der Rand am Warenkorb-Zähler weiter unten ist so eine Stelle). Der Token hieß bis zum 2026-08-13 `--lwb-white` — auf beiden Seiten, und der Name war der Fehler: er hat drei Sitzungen gegen ein Symptom bauen lassen. Jetzt heißt er wie die Rolle und wie das Preset, an dem er hängt. */ --lwb-surface: var(--wp--preset--color--surface, #fff); /* Und hier die zweite Rolle, die dem Satz oben bisher gefehlt hat: die Fläche, die sich vom Grund abheben *soll*. Sie ist wörtlich Weiß und hängt deshalb am Preset `white`, das beide theme.json führen — nicht an `surface`. Die zwei müssen auf einem Kundentheme verschieden aussehen, sonst gibt es nichts, wovon sich der Vordergrund abhebt: auf Bersta #ffffff gegen #fbf7f0. Nur die Farbe steht hier. Kontur und Schatten der Rolle (`--lwb-front`, `--lwb-front-border`, `--lwb-front-shadow`) bleiben beim Plugin — sie sind aus Token gerührt, die dieses Theme ohnehin schon setzt, und eine zweite Fassung davon wäre wieder die doppelte Wahrheit. */ --lwb-white-pure: var(--wp--preset--color--white, #ffffff); --lwb-ok-50: var(--wp--preset--color--ok-50, #e8f6ee); --lwb-ok-500: var(--wp--preset--color--ok-500, #17794a); --lwb-warn-50: var(--wp--preset--color--warn-50, #fdf3e3); --lwb-warn-500: var(--wp--preset--color--warn-500, #a86a08); --lwb-err-50: var(--wp--preset--color--err-50, #fdecec); --lwb-err-500: var(--wp--preset--color--err-500, #b42318); --lwb-err-700: var(--wp--preset--color--err-700, #8a1a12); --lwb-info-50: var(--wp--preset--color--info-50, #eaf1fc); --lwb-info-500: var(--wp--preset--color--info-500, #1e5eb8); /* Der Fokusring ist eine Zustandsanzeige und trägt die Marke. Im Plugin steht er als fertiger Schatten mit eingebautem Grün; ohne diese Zeile leuchtete er auf einer roten Seite grün — von allen Lücken der Brücke die, die am stärksten nach Fehler aussieht. Zusammengesetzter Wert, also keine bloße Weiterreichung: `color-mix` rührt ihn aus der Markenfarbe selbst an. Damit folgt der Ring jedem Kundentheme, ohne dass hier eine zweite Farbe stünde. Zwei Ringe, nicht einer. Die Fassung des Plugins ist eine einzelne durchscheinende Fläche mit 28 % Deckung; nachgerechnet sind das gegen Creme 1.53:1, gegen Weiß kaum mehr. WCAG 2.1 verlangt für die Fokusanzeige 3:1 gegen die Umgebung (1.4.11), und mit einer Deckung erreicht man das nicht — selbst 55 % kommen nur auf 2.45:1. Innen liegt deshalb ein deckender Ring von 2px, der die 3:1 trägt (gegen Creme 5.53:1); der weiche Saum außen bleibt, weil er den Ring auf getönten und dunklen Flächen ablöst. */ --lwb-focus: 0 0 0 2px var(--wp--preset--color--brand-500, #157d5f), 0 0 0 5px color-mix(in srgb, var(--wp--preset--color--brand-500, #157d5f) 25%, transparent); /* Nicht überschrieben: --lwb-sh-sm/md/lg. Die drei Schatten sind zusammengesetzte Werte auf rgba(13,21,32,…) — neutral genug, um sie dem Plugin zu lassen. Ein Schatten, der die Marke trägt, ist eine eigene Entscheidung und keine Lücke. */ } /* Die Schrift der B2B-Oberflächen. Hier stand einmal die Brücke `--lwb-font-sans`/`--lwb-font-num` auf die Presets `sans` und `mono`. Die Presets gibt es, die Token liest das Plugin aber nirgends — es erbt seine Schrift schlicht von ``. Zwei Zeilen, die eine Verbindung behaupteten, die es nicht gab. Ersetzt durch die Fassung, die wirklich wirkt: die Familie steht auf den Wurzeln. Der Grund, das überhaupt zu sagen statt weiter zu erben, ist das Kindtheme — sobald eines eine Serife für Überschriften setzt, holt sich `styles.elements.heading` aus theme.json auch die Überschriften des Shops. **Auf allen sechs Wurzeln, seit dem 2026-08-13.** Bis dahin standen hier drei, und die Lücke war dieselbe wie eine Etage höher bei den Token, nur eine Ebene tiefer: `.lotzwoo-favorites`, `.lotzwoo-locations` und `.lotzwoo-ordercontext` bekamen die Token von AP-25, aber keine der Regeln, die sie benutzen. Auf Bersta gemessen kamen die Überschriften der drei Konto-Flächen in **Bitter** statt in **Inter** — die Serife des Kundenthemes mitten in der Bedienoberfläche. Auf dem Basistheme war nichts zu sehen, weil dort beide Rollen dieselbe Grotesk tragen; deshalb hat es niemand bemerkt, und deshalb wird auch hier nichts rot. Die Regel gilt für die Wurzel und nicht nur für die Überschrift, obwohl auf Bersta heute nur die Überschrift abweicht: `` trägt dort zufällig dieselbe Grotesk. Ein Kundentheme mit einer eigenen Fließtextschrift verschöbe sonst die ganze Fläche, und der Befund käme ein drittes Mal. Ab `h2` ist das nicht gemeint. Was der Shop unterhalb der Seitenüberschrift an Überschriften setzt, sind Bedienbeschriftungen — Filtergruppen, der Kopf der Schnellerfassung, die Kontextschritte, der Kopf der Nachbestellseite. Sie gehören zur Oberfläche und nicht zur Drucksache, und sie erben deshalb die Schrift der Wurzel. Die `h1` ist die Ausnahme, und zwar bewusst: es gibt genau eine (`.lwb-head__title h1`, die Sortimentsüberschrift), sie ist der Titel der Seite und nicht Teil des Bedienwerks. Sie ist zugleich die Stelle, an der Website und Shop sich berühren — und der bruchfreie Übergang zwischen beiden war die Begründung von ADR 004. Sie trägt deshalb die Serife des Kundenthemes, so wie jeder andere Seitentitel auch. Die Ziffernschrift der Matrix (tabellarische Ziffern auf Preis-, Mengen- und Artikelnummernspalten) bleibt offen und gehört ins Plugin-Repo — sie braucht die Zellen, nicht die Wurzel. */ .lotzwoo-b2b-shop, .lotzwoo-reorder, .lotzwoo-favorites, .lotzwoo-locations, .lotzwoo-standing-orders, .lotzwoo-ordercontext, .lotzwoo-contextcard, .lotzwoo-overview, .lotzwoo-heldback, .woocommerce-MyAccount-content, .woocommerce-MyAccount-navigation { font-family: var(--wp--preset--font-family--sans, "Inter", "Segoe UI", system-ui, sans-serif); } /* `.lotzwoo-heldback` steht hier aus genau dem Grund, den der Absatz oben nennt, und er ist am 2026-08-12 im Browser sichtbar geworden: die Überschrift der Sektion kam in der Serife des Kundenthemes: Bersta setzt `styles.elements.heading`, und die Sektion ist keine Drucksache, sondern eine Bedienbeschriftung im Warenkorb. Genau derselbe Befund stand am 2026-08-13 auf den drei Konto-Flächen — dort ist es die einzige Stelle, an der die fehlende Wurzel überhaupt sichtbar wurde. */ .lotzwoo-b2b-shop :is(h2, h3, h4, h5, h6), .lotzwoo-reorder :is(h2, h3, h4, h5, h6), .lotzwoo-favorites :is(h2, h3, h4, h5, h6), .lotzwoo-locations :is(h2, h3, h4, h5, h6), .lotzwoo-ordercontext :is(h2, h3, h4, h5, h6), .lotzwoo-contextcard :is(h2, h3, h4, h5, h6), .lotzwoo-overview :is(h2, h3, h4, h5, h6), .lotzwoo-heldback :is(h2, h3, h4, h5, h6), /* **Zwei Wurzeln fehlten, und der Absatz darueber sagt schon warum** (2026-08-26). Gemeldet als „diese h2 sind nicht Inter wie die anderen": „Rechnungsadresse", „Lieferadresse", „Darstellung" und „Daueraufträge" standen in Bitter, „Nachbestellen" daneben in Inter. Gemessen — an allen vier gewinnt `h1, h2, h3, h4, h5, h6 { font-family: serif }` aus `theme.json`, weil keine Wurzel darueber diese Regel zurueckholt. Die Liste eine Ebene hoeher (Zeile 226 ff.) fuehrt `.woocommerce-MyAccount-content` laengst; nur hier fehlte sie. Das ist dieselbe Luecke, die der Absatz darueber fuer `.lotzwoo-heldback` beschreibt — eine Wurzel, die in einer der zwei Listen steht und in der anderen nicht, faellt erst an einer Ueberschrift auf. */ .lotzwoo-standing-orders :is(h2, h3, h4, h5, h6), .woocommerce-MyAccount-content :is(h2, h3, h4, h5, h6) { font-family: inherit; } /* Die Rahmen der Bedienelemente — ein Provisorium mit Verfallsdatum. WCAG 1.4.11 verlangt 3:1 für das, was ein Bedienelement als Bedienelement kenntlich macht. Das Plugin zieht diese Rahmen aus `--lwb-ink-200` — und aus derselben Variable auch die Kanten von Karten, Tabellen und Panels. Für eine Trennlinie ist ein zarter Strich richtig und ausdrücklich ausgenommen; für ein Auswahlfeld ist er es nicht. Ein Token, zwei Rollen: über die Token-Brücke ist das nicht zu trennen, egal welchen Wert man einsetzt. Zarte Linie heißt unsichtbare Felder, sichtbare Felder heißt eine Oberfläche aus lauter Kästen. Deshalb hier, ausnahmsweise, über Klassennamen des Plugins statt über Token. Es ist die dritte Kopplung zwischen den Repos und die einzige, die nicht bleiben soll: sobald `b2b-tokens.css` eine eigene Rolle für den Rahmen eines Bedienelements hat, ist dieser Block ersatzlos zu löschen. Bis dahin ist die Alternative, eine bekannte Barriere auszuliefern. Es ist kein Nachbau: keine dieser Regeln bringt eine Gestalt mit, jede ändert genau eine Farbe an einem Element, das es schon gibt. Der Befund ist älter als die Umfärbung — `#dbe1e8` auf Weiß sind 1.32:1 — und überlebt sie, weil auch die warme Linie bei 1.30:1 liegt. Favoriten und Orte stehen seit dem 2026-08-13 mit drin. Sie hatten dieselben Felder aus derselben Variable und standen nur deshalb nicht hier, weil die Liste beim Schreiben dieses Blocks zwei Wurzeln kannte. Eine Barriere hört nicht am Endpunkt auf. Zwei Dinge, die die Liste bewusst *nicht* enthält: * `.lotzwoo-locations__set--active`. Es sieht aus wie ein Bedienelement mit zarter Kante, hat aber als einziges hier eine eigene Rahmenfarbe im Überfahren (`.lotzwoo-locations__set:hover` → `brand-600`, gleiche Spezifität wie diese Regel). Aufgenommen bekäme der Knopf beim Überfahren einen grauen Ring um eine markenfarbene Fläche. Der Zustand ist selten und der Schaden sichtbar; der Rahmen bleibt, wie er ist. * `.lotzwoo-ordercontext`. Diese Fläche hat keine Bedienelemente — sie ist eine Tabelle mit Abzeichen in Woos eigener Bestellansicht. Ihre Kanten sind Trennlinien, und für die ist der zarte Strich ausdrücklich richtig. Eine Eigenschaft dieser Regelform, die schon für `.lotzwoo-reorder__termin` galt und jetzt auch für `.lotzwoo-locations__select` gilt: sie schlägt das `:focus-visible` des Plugins, weil beide auf (0,2,0) liegen und diese Datei später kommt. Der Fokus bleibt trotzdem angezeigt — er hängt am `box-shadow` aus `--lwb-focus`, nicht am Rahmen —, aber er wechselt die Rahmenfarbe nicht mehr. Am 2026-08-13 auf beiden Themes nachgemessen. */ .lotzwoo-b2b-shop :is(.lwb-input, .lwb-select, .lwb-qty, .lwb-viewswitch, .lwb-pill, .lwb-scantoggle, .lwb-btn--secondary), .lotzwoo-reorder :is(.lotzwoo-reorder__all, .lotzwoo-reorder__termin), .lotzwoo-reorder__pager .button, .lotzwoo-favorites :is(.lotzwoo-favorites__pill, .lotzwoo-favorites__qty, .lotzwoo-favorites__remove), .lotzwoo-favorites__more .button, .lotzwoo-locations .lotzwoo-locations__select { border-color: var(--wp--preset--color--ink-350, #808d9d); } /* ================================================================== Der Warenkorb-Slot und die Sektion, die das Plugin hineinzeichnet. Ticket 15. Das Theme liefert den Ort (`
` aus dem `render_callback` von `lotzwoo/cart-slot`), das Plugin füllt ihn aus der Store-API-Cart: den Versand-Hinweis und die Sektion der zurückgehaltenen Positionen. Beides hatte bis hierher **null** CSS-Regeln — Posten 6 der Nachbarkarte hat am 2026-08-11 mit echtem Browser gemessen, dass die Sektion ungestaltet unter dem Bestellknopf landete. Für FR-CTX-06b ist das dasselbe wie „nicht da". ## Der Anker im Flex-Container, und warum `order: -1` `.wp-block-woocommerce-filled-cart-block` ist `display:flex; flex-wrap:wrap` mit zwei Kindern: Positionen 65 %, Summen 35 % (gemessen in Woos `cart.css`). Der Anker steht im Markup **zwischen** beiden — das ist die Entscheidung aus Ticket 15, Frage 3, und sie gilt für Vorlesereihenfolge und Tastatur. Sichtbar wäre er dort aber der Bruch der zwei Spalten: ein drittes Kind mit 100 % Breite umbricht und schiebt die Summen in eine dritte Zeile — aus dem Warenkorb würde ein Stapel. Ein Kind, das nur so breit ist wie die linke Spalte, hat dasselbe Problem eine Stufe milder. Deshalb `order: -1`: die Sektion wird als Band über **beide** Spalten gezeichnet, die Spalten bleiben, wie sie sind. Der Zweck der Übung ist damit erfüllt und mehr als das — der Kunde sieht die zurückgehaltenen Positionen, bevor sein Blick überhaupt in die rechte Spalte fällt. Ein Grid aus dem Flex-Container zu machen (Sektion unter den Positionen, Summen rechts oben) wäre die schönere Anordnung und ist verworfen: es hieße, Woos Breiten an den inneren Klassen zu überschreiben, und bricht beim nächsten Umbau dieser Klassen an einer Stelle, die niemand mit dieser Datei in Verbindung bringt. ## `:empty` und der Zwischenzustand Ohne Plugin — und heute auch **mit** ihm, solange `MOUNT_ID` in `b2b-cart.js` noch `lotzwoo-heldback-blocks` heißt — bleibt das Div leer. `display:none` nimmt es dann ganz aus dem Flex-Container: kein Kind, keine `blockGap`-Lücke, Höhe 0. Genau die Sorge, die beim Kopf-Slot zur leeren Zeichenkette geführt hat, hier aber ohne Verzicht auf den Anker lösbar. ================================================================== */ #lotzwoo-cart-slot { flex: 0 0 100%; order: -1; } #lotzwoo-cart-slot:empty { display: none; } /* ================================================================== Die leere Huelle eines Template-Parts. `parts/navigation.html` und `parts/footer-links.html` sind in der Basis leer — die Seitenstruktur eines Kunden gehoert ins Kindtheme (AD-11). Der Block `core/template-part` rendert trotzdem seinen Rahmen: ein `
` ohne Inhalt. Gemessen am 2026-08-12, Basis-Theme allein, 1440px: der Knopf „Zum Sortiment" ruecken damit 24px nach rechts, und ueber der Copyright-Zeile stehen 24px zu viel — zwei `blockGap`-Luecken um nichts. Zwei Regeln, weil zwei Layouts betroffen sind. `display:none` nimmt die Huelle aus dem Flex-Container des Kopfes. Im Fuss genuegt das **nicht**: die `constrained`-Anordnung setzt den Abstand ueber `* + *`, und ein ausgeblendetes Element bleibt ein Geschwister. Deshalb die zweite Regel. `:empty` und nicht „Datei weglassen": ohne Datei zeigte der Website-Editor den Part als geloescht an, und ein Kindtheme haette keine Vorlage zum Aufmachen. ================================================================== */ .wp-block-template-part:empty { display: none; } .wp-block-template-part:empty + * { margin-block-start: 0; } /* Der Versand-Hinweis. Er trägt Woos `woocommerce-info` und bekommt von dort eine Grundgestalt; hier steht nur, was ihn in diesen Entwurf einpasst. Bewusst über Presets statt über die Token-Brücke: er liegt als Geschwister **neben** `.lotzwoo-heldback` im Slot und damit außerhalb jeder Token-Wurzel. Eine vierte Wurzel für eine Regel wäre der teurere Weg. */ #lotzwoo-cart-slot .lotzwoo-shipping-blocked { margin: 0 0 var(--wp--preset--spacing--40); border-left: 3px solid var(--wp--preset--color--info-500); background: var(--wp--preset--color--info-50); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); color: var(--wp--preset--color--ink-700); font-size: var(--wp--preset--font-size--md); } /* Die Sektion selbst. Sie ist ein Ausnahmezustand und keine Fläche wie jede andere: hier steht, was der Kunde bestellt hat und **nicht** bekommt. Deshalb der warme Ton der Warnrolle und eine sichtbare Kante — kein Rot, denn es ist kein Fehler, sondern eine Auskunft über die Freigaben seines Kontos. Die Farben kommen aus `--lwb-*`; die Wurzel oben in dieser Datei übersetzt sie aus theme.json. Ein Kundentheme mit anderer Warnfarbe färbt die Sektion damit mit, ohne diese Regeln anzufassen. */ .lotzwoo-heldback { margin: 0 0 var(--wp--preset--spacing--50); border: 1px solid var(--lwb-warn-500); border-radius: 8px; background: var(--lwb-warn-50); padding: var(--wp--preset--spacing--40); color: var(--lwb-ink-900); } .lotzwoo-heldback__title { margin: 0; font-size: var(--wp--preset--font-size--lg); font-weight: 600; line-height: 1.2; } .lotzwoo-heldback__hint { margin: var(--wp--preset--spacing--10) 0 0; color: var(--lwb-ink-600); font-size: var(--wp--preset--font-size--md); } .lotzwoo-heldback__list { margin: var(--wp--preset--spacing--40) 0 0; padding: 0; list-style: none; } /* Eine Zeile je Position: Bezeichnung und Menge links, Grund und die Knöpfe rechts. `flex-wrap`, weil die Bezeichnung eines Großhandelsartikels lang ist und drei Knöpfe daneben auf einem Telefon keine Zeile mehr ergeben. Die Linie steht **über** jeder Zeile und nicht unter ihr: so trägt die erste Zeile die Trennung zur Überschrift, und unter der letzten bleibt keine Linie ohne Gegenüber. */ .lotzwoo-heldback__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); border-top: 1px solid var(--lwb-warn-500); padding: var(--wp--preset--spacing--30) 0; } .lotzwoo-heldback__label { flex: 1 1 16rem; font-weight: 600; } /* Tabellarische Ziffern: Mengen stehen untereinander und sollen sich vergleichen lassen. Dieselbe Rolle, die die Matrix des Shops der Ziffernschrift gibt. */ .lotzwoo-heldback__qty { font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums; color: var(--lwb-ink-700); } /* Der Grund ist die Antwort auf die Frage „warum fehlt das?" und damit das Wichtigste an der Zeile nach der Bezeichnung. Er steht als Plakette, damit er nicht als Fließtext neben den Knöpfen untergeht. */ .lotzwoo-heldback__reason { flex: 0 1 auto; max-width: 100%; border-radius: 999px; background: var(--lwb-surface); padding: 2px 10px; color: var(--lwb-ink-700); font-size: var(--wp--preset--font-size--sm); } /* Die vier Knöpfe der Sektion tragen Woos `button`-Klasse. Auf einer Block-Seite ist die ungestaltet — Woos klassisches CSS greift nur unter `.woocommerce` —, sie kämen also als Systemknöpfe des Browsers. Zweitrangige Form für die drei Zeilenknöpfe: sie sind Korrekturen an einer Auskunft, nicht der Weg nach vorn. Der Rahmen kommt aus der Rolle „Rahmen Bedienelement" (`--wp--preset--color--ink-350`), die WCAG 1.4.11 trägt — dieselbe Begründung wie beim Provisorium weiter oben. */ .lotzwoo-heldback .button { border: 1px solid var(--wp--preset--color--ink-350, #808d9d); border-radius: 8px; background: var(--lwb-surface); padding: 6px 12px; color: var(--lwb-ink-900); font-size: var(--wp--preset--font-size--sm); font-weight: 600; line-height: 1.2; cursor: pointer; } .lotzwoo-heldback .button:hover { background: var(--lwb-ink-100); } .lotzwoo-heldback .button:focus-visible { outline: none; box-shadow: var(--lwb-focus); } /* „Alles wieder aufnehmen" ist der einzige Knopf, der etwas voranbringt, und steht deshalb allein und in der Markenfarbe. */ .lotzwoo-heldback__reactivate-all { margin-top: var(--wp--preset--spacing--40); } .lotzwoo-heldback .lotzwoo-heldback__reactivate-all { border-color: var(--lwb-brand-500); background: var(--lwb-brand-500); color: var(--lwb-surface); } .lotzwoo-heldback .lotzwoo-heldback__reactivate-all:hover { border-color: var(--lwb-brand-600); background: var(--lwb-brand-600); } /* ================================================================== Systemregeln des Entwurfs. Was hier steht, gilt für jedes Kundentheme. Eine Regel, die nur für einen Kunden gilt, gehört ins Kindtheme — die Frage ist bei jeder neuen Zeile zuerst zu stellen. ================================================================== */ /* Zurückhaltung beim Rot: Fließtext-Links tragen Tinte mit farbigem Unterstrich und nehmen die Markenfarbe erst beim Überfahren an. Der Grund, warum die Regel hier steht und nicht in theme.json: `elements.link` kennt `color.text` und `typography.textDecoration`, aber kein `text-decoration-color` — in keiner Schemaversion. Die Regel ist dort nicht formulierbar. Der Grund, warum sie ins Basistheme gehört und nicht ins Kindtheme: sie ist eine Eigenschaft des Entwurfssystems, nicht einer Marke. Jeder Kunde mit einer kräftigen Markenfarbe will sie — ein Fließtext, in dem jeder Link farbig leuchtet, ist unruhig, und bei den meisten Markenfarben ist er zugleich der Kontrastfehler. Bewusst schwach gehalten: kein `!important`, keine ID. Wer sie nicht will, überschreibt `elements.link` im eigenen theme.json und gewinnt. Nur in `main`: Kopf- und Fußbereich haben ihre eigenen Zustände. Und ausdrücklich nicht in den B2B-Oberflächen. Sie liegen mit im `
`, sind aber keine Drucksache: dort sind Links Knöpfe, Reiter und Zeilen mit eigenen Zuständen aus `b2b-shop.css`. Die Ausnahmen stehen in `:where()` und wiegen deshalb nichts — das hält die Regel bei einer Klasse Gewicht: schwer genug, um `elements.link` aus theme.json zu schlagen (das braucht sie, sonst bliebe der Link farbig), leicht genug, damit jede Plugin-Regel mit zwei Klassen sie schlägt. **Alle sechs Wurzeln, seit dem 2026-08-13.** Die Ausnahmeliste stand auf denselben zwei wie die Schrift darüber, und das ist derselbe Fehler in umgekehrter Richtung: statt einer fehlenden Regel eine Regel, die zu weit greift. Am 2026-08-13 mit einer Sonde je Wurzel gemessen — auf `.lotzwoo-favorites`, `.lotzwoo-locations`, `.lotzwoo-ordercontext` und `.lotzwoo-heldback` kam der Fließtext-Ton der Website (`ink-900` mit Markenunterstrich) statt der Bedienfarbe der Fläche. Sichtbar wurde davon bis heute wenig, und das ist kein Gegenargument, sondern die Beschreibung des Musters: die Plugin-Regeln mit zwei Klassen schlagen diese hier, wie der Absatz oben es vorsieht. Es traf genau die Links mit *einer* Klasse — `.lotzwoo-locations__empty-link` (Leerzustand) und `.lotzwoo-favorites__status a`. Beide sind Zustände, die man selten sieht, und beide standen falsch, sobald man sie sah. */ main a:not(.wp-element-button):not(:where(.wp-block-navigation-item__content, .wc-block-components-button, .lotzwoo-b2b-shop a, .lotzwoo-reorder a, .lotzwoo-favorites a, .lotzwoo-locations a, .lotzwoo-ordercontext a, .lotzwoo-heldback a)) { color: var(--wp--preset--color--ink-900); text-decoration-color: var(--wp--preset--color--brand-500); text-decoration-thickness: 1.5px; text-underline-offset: .18em; } main a:not(.wp-element-button):not(:where(.wp-block-navigation-item__content, .wc-block-components-button, .lotzwoo-b2b-shop a, .lotzwoo-reorder a, .lotzwoo-favorites a, .lotzwoo-locations a, .lotzwoo-ordercontext a, .lotzwoo-heldback a)):hover, main a:not(.wp-element-button):not(:where(.wp-block-navigation-item__content, .wc-block-components-button, .lotzwoo-b2b-shop a, .lotzwoo-reorder a, .lotzwoo-favorites a, .lotzwoo-locations a, .lotzwoo-ordercontext a, .lotzwoo-heldback a)):focus-visible { color: var(--wp--preset--color--brand-500); } /* Ueberschriften brechen. Deutsch tut das von selbst nicht. Der Befund, am 2026-08-12 gemessen: `/datenschutz/` lief bei 390px um 50px waagrecht ueber — `.entry-content` 409px in 343px verfuegbarer Breite. Nicht der Inhalt war es, sondern die Ueberschrift: „Datenschutzerklaerung" mit `has-6-xl-font-size` bei 38,4px, **ein Wort**, das laenger ist als der Kasten. Ein Wort ist fuer den Umbruch eine unteilbare Einheit; der Kasten gibt nach, nicht das Wort. Die Regel steht deshalb hier und nicht an dieser Seite. Es ist keine Eigenheit der Datenschutzerklaerung, es ist die Sprache: „Lieferbedingungen", „Mindestbestellwert", „Bestellannahmezeiten", „Verbraucherstreitbeilegung" — jede kuenftige Ueberschrift jedes Kunden kann es ausloesen, und je groesser der Schriftgrad, desto frueher. Am Titel repariert waere es einmal repariert. ## Warum zwei Eigenschaften, und welche die Zusage traegt `overflow-wrap: break-word` **traegt sie**: es bricht ein Wort, das allein auf seiner Zeile nicht passt, und nur dann. Gemessen: 409/343 -> 343/343, der Ueberlauf der Seite faellt von 50px auf 0. `hyphens: auto` ist die typografisch bessere Antwort auf ein Kompositum — „Datenschutz-erklaerung" statt eines Schnitts mitten im Wort — und steht deshalb zuerst: wo der Browser trennen kann, trennt er, und `break-word` kommt gar nicht erst zum Zug. Es traegt die Zusage aber **nicht**, und das ist gemessen und nicht vermutet: der Messrechner (Chrome 151, Linux) bringt keine Trenn-Woerterbuecher mit. Dort ist `hyphens: auto` wirkungslos — „120px breiter Kasten, `Datenschutzerklaerung`, `hyphens:auto` gegen `hyphens:none`: beide 140px, beide einzeilig". Auf den Browsern der Besucher (Windows, macOS, Firefox) greift es, hier ist es nicht nachweisbar. Eine Regel, deren Wirkung man auf der eigenen Werkbank nicht sehen kann, darf nicht die einzige sein. ## Nicht `overflow-wrap: anywhere`, und das ist dieselbe Entscheidung wie bei der Tabelle Bei `.wp-block-table` (siehe unten) wurde `anywhere` verworfen. Der Grund gilt hier fort, nur an anderer Stelle: `anywhere` zaehlt beim Ermitteln der kleinstmoeglichen Breite mit und laesst damit Kaesten schrumpfen, die gar nicht ueberlaufen. `break-word` tut das nicht — es greift erst, wenn wirklich kein Platz mehr ist. Beide erreichen hier dasselbe (gemessen: `anywhere` und `break-word` liefern auf `/datenschutz/` identisch 343/343, zwei Zeilen, 92,2px Hoehe); `break-word` erreicht es ohne die Nebenwirkung. Es ist ausserdem das, was der Kern selbst auf `.wp-block-column` setzt. Kein `!important`, kein Klassengewicht: ein Kindtheme, das fuer eine bestimmte Ueberschrift etwas anderes will, ueberschreibt das mit einer einzigen Zeile. Bei 1440px aendert die Regel nichts — dort passt jedes dieser Woerter, und eine Umbruchregel, die auf dem Schreibtisch etwas verschiebt, waere zu breit geraten. Nachgemessen an sechs Seiten. */ main :is(h1, h2, h3, h4, h5, h6) { hyphens: auto; overflow-wrap: break-word; } /* Die Trennlinie — das meistwiederholte Element der Website. Fuenf bis acht pro Seite, und bis zum 2026-08-11 das einzige, das nicht nach der Marke aussah: gemessen 100px breit, `border-bottom: 2px solid rgb(128, 128, 128)`. Das ist WordPress' Werkseinstellung, unveraendert ausgeliefert — ein grauer Strich von Daumenlaenge mitten in einer Seite, die sonst durchgehend in `ink-200` gehalten ist. ADR 004 verlangt an dieser Stelle das Gegenteil: „feine Linien statt Kaesten", und `--linie` = `#E4DACA`, im Theme das Preset `ink-200`. Der Entwurf setzt sie ueberall gleich — Kopfunterkante, Fusskante, Datenzeilen —, immer `1px solid var(--linie)` und immer ueber die volle Breite. Deshalb hier: volle Inhaltsbreite, 1px, Preset-Farbe. Drei Werte, drei Messungen dagegen. `currentColor` statt der Variable direkt im Rahmen: waehlt jemand im Editor eine Farbe, setzt WordPress `.has-…-color` mit `!important` auf `color` — der Rahmen folgt dann von selbst. Stuende das Preset im `border-top`, gaebe es eine Farbwahl, die sichtbar nichts tut. `is-style-dots` bleibt ausgenommen. Die Punktvariante des Kerns zeichnet ihr Muster als `::before` und schaltet dafuer `border` und `background` per `!important` ab; eine Randregel darauf waere eine Regel, die aussieht, als griffe sie. Wer Punkte waehlt, hat etwas anderes gemeint als eine Linie. `opacity: 1` ist kein Zierrat: der Kern vergibt auf jeder Trennlinie die Klasse `has-alpha-channel-opacity` (an allen 21 Linien der sechs Seiten nachgesehen), und daran haengt in aelteren Kernfassungen eine Deckung von 0.4. Eine Linie, die schon zart ist, darf nicht auch noch halb da sein. */ .wp-block-separator:not(.is-style-dots) { border: 0; border-top: 1px solid currentColor; color: var(--wp--preset--color--ink-200); opacity: 1; } /* Die Breite braucht einen eigenen, schwereren Selektor — nachgemessen, nicht vorsorglich. Die 100px stehen nicht im Blockstylesheet, sondern in `blocks/separator/theme.min.css`, das erst durch `add_theme_support('wp-block-styles')` geladen wird: .wp-block-separator:not(.is-style-wide):not(.is-style-dots){width:100px} Das sind drei Klassen Gewicht. Die Regel darueber wiegt zwei, und die erste Fassung dieser Datei hat deshalb Farbe und Staerke gesetzt, die Breite aber nicht — im Browser gemessen: `1px solid rgb(228, 218, 202)` bei weiterhin 100px. Ein `hr` davor bringt ein Element mehr und gewinnt, ohne dass hier ein `!important` stuende. Der Block rendert immer ein `hr`. `is-style-wide` bleibt ausgenommen wie beim Kern — diese Variante ist ohnehin schon voll breit, und der Selektor bliebe sonst hinter dem des Kerns. */ hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { width: 100%; } /* Die Tabelle — und die Spalte, deren Verschwinden eine Rechtsfolge hat. `grep wp-block-table style.css` gab bis zum 2026-08-11 null Treffer: die Tabellen der Website standen unveraendert auf WordPress' Werkseinstellung. Die ist ein Gitter — `td, th { border: 1px solid }` plus `thead { border-bottom: 3px solid }` —, also genau das Gegenteil dessen, was ADR 004 verlangt. Der Entwurf kennt ueberhaupt keine ``; sein Tabellenbild ist `dl.daten`: Versalien-Label in `.8rem` ueber dem Wert, je Zeile eine Linie in `--linie`, keine senkrechte Kante, keine Fuellung. Das ist hier nachgebaut. ## Der eigentliche Befund Drei Tabellen sind breiter als ihr Kasten. Die Empfaenger-Tabelle der Datenschutzerklaerung misst 538px in 358px verfuegbarer Breite — die dritte Spalte „Grundlage", die Rechtsgrundlagen, liegt ausserhalb des Sichtfelds. Impressum 408px in 391px und 391px in 358px, mitten im Wort abgeschnitten. Der Kern legt auf `figure.wp-block-table` bereits `overflow-x: auto` (an allen fuenf erreichbaren Tabellen nachgemessen). Der Inhalt ist also nicht weg, er ist nur nicht auffindbar: nichts am Bild sagt, dass rechts noch etwas steht. Das ist der Befund — nicht „abgeschnitten", sondern „lautlos". ## Zwei Griffe, in dieser Reihenfolge **Erstens weniger Ueberlauf.** `hyphens: auto` greift dort, wo der Browser deutsche Trennstellen kennt — die Seite traegt `lang="de"`. Zwei der drei Faelle liegen nur 17px bzw. 33px ueber ihrem Kasten; ein Trennstrich in „Bezirkshauptmannschaft" loest sie ganz auf. Nicht `overflow-wrap: anywhere`: das schrumpfte die Tabelle zuverlaessig, indem es mitten in Woertern bricht — auf einer Seite mit Firmenbuchnummern und Paragraphen ist das schlechter lesbar als ein Bildlauf. **Zweitens ein sichtbarer Rand am Schnitt.** Vier Ebenen: zwei Deckel, die mit dem Inhalt wandern (`local`), und darunter zwei Schatten, die an der Kapsel kleben (`scroll`). Am Anfang liegt der linke Deckel ueber dem linken Schatten und loescht ihn; sobald gescrollt wird, wandert er weg und der Schatten erscheint. Das Ergebnis ist ein Hinweis, der sich selbst zurueckzieht: er steht genau dann, wenn dort wirklich noch etwas ist, und erscheint auf keiner der fuenf Tabellen, die ohnehin passen. Kein JavaScript. Die Deckelfarbe ist `surface`. Auf dem aktiven Kindtheme ist das die Seitenflaeche selbst (Creme `#fbf7f0`), also exakt richtig; im blanken Basistheme steht `#ffffff` gegen einen Grund von `#f7f9fb` — 1.02:1, an einem weich auslaufenden 32px-Streifen nicht zu sehen. Der Schatten wird per `color-mix` aus `ink-900` angeruehrt und folgt damit dem Kundentheme, ohne dass hier ein zweiter Farbwert stuende. ## Was bewusst NICHT hier steht **Kein `tabindex="0"` auf der Kapsel.** Der uebliche Rat setzt es unbedingt — und damit auf jede Tabelle, auch auf die, die passt. Gemessen an Chrome 151: eine Kapsel, die ueberlaeuft, bekommt von selbst einen Tabulator-Halt, eine passende nicht. Der Browser tut also bereits genau das Bedingte, das eine feste Auszeichnung nur unbedingt koennte. Fuenf der acht Tabellen dieser Website passen; sie bekaemen einen Halt, an dem nichts zu tun ist. **Kein Umbau auf Kartenstapel je Zeile.** Die Form waere besser — nichts muesste sich mehr bewegen —, aber sie braucht je Zelle die Beschriftung ihrer Spalte aus der Kopfzeile. Fuenf Tabellen dieser Website haben heute eine **leere** Kopfzeile (Befund S6, ein Fehler des Importskripts): jeder Wert bekaeme eine leere Beschriftung. Die Form ist erst zu haben, wenn die Kopfzeilen stimmen — dann ist sie es wert. Schirmleseprogramme sind von alldem nicht betroffen: `overflow` verbirgt nichts vor ihnen, die dritte Spalte wurde immer vorgelesen. Der Befund war ein sehender Befund, und die Loesung ist es auch. ## Nachtrag 2026-08-12: die Ueberschriftenregel entscheidet dasselbe ## scheinbar andersherum Weiter oben steht seit heute „Ueberschriften brechen. Deutsch tut das von selbst nicht." — eine Regel, die Woerter **bricht**, waehrend diese hier das ausdruecklich nicht will. Beide Begruendungen sollen voneinander wissen, deshalb dieser Absatz. Es ist kein Widerspruch, sondern zwei Faelle: eine ueberlaufende Zelle liegt in einer Kapsel mit Bildlauf und sichtbarem Rand und ist damit **erreichbar** — eine ueberlaufende Ueberschrift schiebt die ganze Seite auf und nimmt jede andere Zeile mit. Die Zelle hat ein Auffangnetz, die Ueberschrift hat keines. Und was dort gewaehlt wurde, ist nicht das hier verworfene `anywhere`, sondern `break-word`: der Einwand oben („schrumpfte die Tabelle") trifft es nicht, weil `break-word` bei der kleinstmoeglichen Breite nicht mitzaehlt und deshalb keinen Kasten schrumpft. Zwei Zahlen dazu, damit hier niemand aus dem Text auf eine Wirkung schliesst, die nie jemand gesehen hat: die beiden Impressum-Tabellen messen am 2026-08-12 bei 390px **407/343** und **384/343** — sie laufen weiterhin ueber und leben von der Kapsel, nicht vom Trennstrich. Der Messrechner (Chrome 151, Linux) bringt keine Trenn-Woerterbuecher mit; nachgeprueft an einem 120px breiten Kasten mit „Datenschutzerklaerung": `hyphens:auto` und `hyphens:none` ergeben beide 140px und eine Zeile. `hyphens: auto` ist auf dieser Werkbank also **nicht pruefbar**. Die Zeile bleibt, weil sie auf den Browsern der Besucher greift — sie ist eine Verbesserung, keine Zusage. Die Zusage traegt hier die Kapsel und bei den Ueberschriften `break-word`. */ .wp-block-table { overflow-x: auto; /* Reihenfolge: die zuerst genannte Ebene liegt oben. Die Deckel muessen ueber den Schatten liegen, sonst loeschen sie nichts. */ background-image: linear-gradient(to right, var(--wp--preset--color--surface, #fff), transparent), linear-gradient(to left, var(--wp--preset--color--surface, #fff), transparent), linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--ink-900, #0d1520) 16%, transparent), transparent), linear-gradient(to left, color-mix(in srgb, var(--wp--preset--color--ink-900, #0d1520) 16%, transparent), transparent); background-position: 0 0, 100% 0, 0 0, 100% 0; background-repeat: no-repeat; background-size: 32px 100%, 32px 100%, 16px 100%, 16px 100%; background-attachment: local, local, scroll, scroll; } .wp-block-table table { width: 100%; border-collapse: collapse; } /* `:is(th, td)` wiegt zwei Klassen und schlaegt damit das `.wp-block-table td` des Kerns, ohne `!important` zu brauchen. */ .wp-block-table :is(th, td) { border: 0; border-bottom: 1px solid var(--wp--preset--color--ink-200); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); text-align: left; vertical-align: top; hyphens: auto; } /* Aussen buendig: die Linie soll die Spalte tragen, nicht einen Kasten andeuten. Dasselbe tut der Entwurf mit `dl.daten`. */ .wp-block-table :is(th, td):first-child { padding-left: 0; } .wp-block-table :is(th, td):last-child { padding-right: 0; } /* Die 3px-Kante des Kerns unter dem Tabellenkopf. Sie ist der Grund, warum die fuenf leeren Kopfzeilen aus S6 als „schmales Band mit dicker Unterkante" auffallen — der Selektor wiegt hier ein Element mehr und gewinnt. */ .wp-block-table table thead { border-bottom: 0; } .wp-block-table thead th { color: var(--wp--preset--color--ink-500); font-size: var(--wp--preset--font-size--xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } /* ================================================================== Was ein B2B-Portal vom Theme braucht und was ein Blog-Theme nicht mitbringt. ================================================================== */ /* Der Katalog ist eine dichte Tabelle. Ein Inhaltsbereich von 960px quetscht sie unlesbar zusammen — dokumentiert im Deploy-Runbook als die Falle, in die jede neue Installation einmal tritt. Die Seite mit dem Shortcode nimmt deshalb das Full-Width-Template, und dort hebt das Theme die 960px auf. Freigegeben ist die Breite trotzdem nicht: ohne Obergrenze zieht die Matrix auf einem 34-Zoll-Schirm über die volle Fensterbreite, und der Weg von der Artikelnummer links zur Menge rechts wird länger als ein Blick. Es ist dieselbe Schale, in der auch der Kopfbereich steht — und deshalb steht die Zahl hier nicht. Sie steht als `settings.layout.wideSize` in `theme.json`, WordPress veröffentlicht sie als `--wp--style--global--wide-size`, und Kopf wie Deckel lesen von dort. Wer die Breite ändert, ändert genau eine Zahl an genau einer Stelle. Der Kopfbereich holt sie sich über `alignwide` auf `.lotzwoo-header-row`, nicht über eine eigene `wideSize` im Blockmarkup. Das ist kein Geschmack: ein Block, der nur `wideSize` und kein `contentSize` deklariert, bekommt von WordPress die Regel `> :where(:not(.alignleft):not(.alignright):not(.alignfull))` mit genau diesem Wert — die Inline-Angabe wirkt dann als *Inhalts*breite. Ersatzlos entfernt, fiele der Kopf auf 960px zusammen. Der Ausrichtungsweg erbt dagegen sauber aus `theme.json`. `margin-inline: auto` ist der Teil, der überhaupt zentriert; die Obergrenze allein ließe alles links kleben. Im Kopf erledigt das die Layout-Regel des Kerns, deren `:where(:not(…))` auch `.alignwide` trifft. Warum der Deckel auf der Plugin-Wurzel sitzt und nicht auf dem Block darüber: der Block trägt seine 16px als *Innen*abstand. Ein `max-width` dort rechnet sie mit ein und lässt 32px weniger Inhalt übrig — während die Kopfzeile ihr Maß voll ausnutzt, weil ihre 16px außen am `
` hängen. Unterhalb der Grenze fällt das nicht auf: dort greift kein Deckel und beide laufen auf `vw − 32`. Erst auf einem Ultrawide standen Navigation und Tabelle 16px versetzt. Eine Ebene tiefer gedeckelt, ist der Aufbau auf beiden Seiten derselbe — dasselbe Maß ohne Innenabstand in einem Elternteil mit 16px — und die Flucht stimmt in jeder Breite. Der Selektor greift zwei Wurzeln des Plugins, nicht `> *`: die Blockstruktur der Seite kann sich ändern, `.lotzwoo-b2b-shop` und `.lotzwoo-reorder` nicht. Und hier bleibt es bei zweien, obwohl die Token-Brücke oben seit dem 2026-08-13 sechs Wurzeln führt — das ist die „eigene Begründung", die der Vertrag für eine kürzere Liste verlangt: `.lotzwoo-page-full-width` ist eine *Seitenvorlage*, die von Hand zugewiesen wird, und zugewiesen ist sie der Sortiments- und der Nachbestellseite. Die drei Konto-Flächen liegen im Konto-Template von WooCommerce und bekommen diese Klasse nie; eine Zeile für sie wäre eine Regel, die nirgends greift. Wer die Vorlage später einer Konto-Seite zuweist, trägt sie hier nach. */ .lotzwoo-page-full-width .wp-block-post-content > * { max-width: none; } /* Der Nulldurchgang gegen den Blockabstand — seit AP-83 gemessen und angefordert. Setzt der Betreiber `[lotzwoo_b2b_login]` in sein Muster, ist die Plugin-Wurzel dort ein Geschwisterblock unter anderen, und WordPress' eigene Layout-Regel :where(.is-layout-constrained) > :where(:not(.alignleft)…) { margin-block-start: 24px } gibt ihr denselben Abstand wie jedem Absatz. An der Bank gemessen (2026-08-25, 1440 px): `margin-block-start: 24px`. Die Regel steht in `:where()` und hat damit Spezifitaet 0 — dieser Selektor (0,2,0) ueberschreibt sie, ohne dass irgendwo ein `!important` noetig waere. Der Abstand ueber der Flaeche kommt damit aus dem Muster des Betreibers und nicht aus einer Layout-Vorgabe, die ihn nicht kennt. **`margin-inline` ist wieder `auto`** (2026-08-26, angefordert). AP-83 hat es am 2026-08-25 zusammen mit dem Blockabstand auf `0` gesetzt — die zwei gehoerten aber nie zusammen. `margin-block-start: 0` behebt einen Abstand, den WordPress oben anlegt; `margin-inline` entscheidet, wo die gedeckelte Flaeche im Elternteil steht, und der ist `alignfull`, also so breit wie das Fenster. Am 2026-08-26 am Klon gemessen, Rest links/rechts neben der Flaeche: Fenster mit `0` mit `auto` 2560 16 / **624** 320 / 320 2100 16 / **164** 90 / 90 1952 16 / 16 16 / 16 1440 16 / 16 16 / 16 Unterhalb von rund 1952 px aendert `auto` **nichts**: dort greift der Deckel (`wide-size`, 1920) gar nicht, die Flaeche fuellt ihren Elternteil und die 16 px links wie rechts sind dessen Polster. Erst darueber steht sie mit `0` am linken Rand und laesst rechts ein wachsendes Loch. Angefragt war `.lotzwoo-b2b-shop { margin: auto !important }`. Beides steht hier bewusst anders: **kein `!important`**, weil dieser Selektor (0,2,0) die Kern-Regel in `:where()` (Spezifitaet 0) ohnehin schlaegt — es gibt nichts zu ueberstimmen. Und **`margin-inline` statt `margin`**, damit `margin-block-end` unberuehrt bleibt: die Kurzform setzte ihn auf `auto`, und das ist im Fluss zwar auch Null, aber eine Null, die niemand entschieden hat. Beide Wurzeln, weil es eine Regel ist und die Nachbestellseite dieselbe Vorlage traegt. */ .lotzwoo-page-full-width .lotzwoo-b2b-shop, .lotzwoo-page-full-width .lotzwoo-reorder { max-width: var(--wp--style--global--wide-size); margin-block-start: 0; margin-inline: auto; } /* Die Kontextleiste des Shops klebt oben, und die WordPress-Admin-Bar liegt fest darüber. Ohne Versatz verschwindet die Leiste unter ihr — und mit ihr der Matrix-Spaltenkopf, der sich an ihrer Unterkante ausrichtet. Der Name ist der des Plugins. Die erste Fassung dieser Datei erfand `--lotzapp-offset-top`, das nichts liest; das Plugin rechnet mit `--lwb-sticky-top`, deklariert auf seinen beiden Wurzeln. Ein Token umzubenennen heißt hier, ihn abzuschalten. Die drei Stufen sind die der Admin-Bar selbst: 32px im Normalfall, 46px darunter — und unter 600px gar keiner, weil sie dort `position: absolute` wird und mitscrollt. Ein Versatz für eine Leiste, die nicht mehr steht, wäre ein Loch über der Tabelle. **Die Leiste steht in der Liste, seit dem 2026-08-26.** Hier standen zwei Wurzeln, mit der Begründung, `--lwb-sticky-top` lese „genau eine Sache, die klebende Kontextleiste des Shops" — und die drei Konto-Flächen hätten nichts Klebendes. Der zweite Halbsatz stimmt nicht: seit AP-32 steht dieselbe klebende Leiste auf allen vier Flächen, und auf Warenkorb und Konto liegt sie **außerhalb** jeder Plugin-Wurzel. Dort war der Token gar nicht deklariert, und die Leiste parkte hinter der Admin-Bar. `.lotzwoo-contextbar` steht deshalb selbst in der Liste. Innerhalb des Sortiments ist das keine zweite Quelle, sondern dieselbe Zahl eine Ebene tiefer: die Leiste erbte sie ohnehin von `.lotzwoo-b2b-shop`. Nötig ist die eigene Zeile für die drei Flächen, die keine Plugin-Wurzel haben — und der Plugin-Token `--lwb-sticky-top: 0px` auf `.lotzwoo-b2b-shop` (Spezifität 0,1,0) schlägt einen geerbten Wert von `body.admin-bar` sonst zurück, bevor die Leiste ihn sieht. */ body.admin-bar .lotzwoo-b2b-shop, body.admin-bar .lotzwoo-reorder, body.admin-bar .lotzwoo-contextbar { --lwb-sticky-top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .lotzwoo-b2b-shop, body.admin-bar .lotzwoo-reorder, body.admin-bar .lotzwoo-contextbar { --lwb-sticky-top: 46px; } } @media screen and (max-width: 600px) { body.admin-bar .lotzwoo-b2b-shop, body.admin-bar .lotzwoo-reorder, body.admin-bar .lotzwoo-contextbar { --lwb-sticky-top: 0px; } } /* Die klebende Leiste sitzt ganz oben im Inhalt. Das Seiten-Template gibt `
` einen Innenabstand nach oben — richtig für Fließtext, falsch hier: der Abstand liegt zwischen Kopfbereich und Leiste und sieht aus wie ein Loch, das beim Scrollen zuklappt. Die Bedingung ist die Leiste selbst, nicht das Template und nicht die Seiten-ID: `:has()` fragt genau das, was gemeint ist — hat dieser Inhaltsbereich eine klebende Kontextleiste? Abgemeldet rendert der Shortcode nur seinen Login-Hinweis und gar keine Leiste, und dann bleibt der Abstand, wo er hingehört. `!important` ist hier nicht Bequemlichkeit: Block-Templates schreiben ihre Abstände als Inline-Style an das Element, und den schlägt eine externe Regel sonst nicht. */ main#wp--skip-link--target:has(.lwb-contextbar) { margin-top: 0 !important; padding-top: 0 !important; } /* ================================================================== Kopfbereich. Gegen `docs/mockups/prototype/` im Plugin-Repo gelegt: dort trägt der Kopf links Logo und Navigation, rechts eine Reihe Icon-Schaltflächen. Die Struktur steht in `parts/header.html`; hier stehen nur die Zustände, die ein Block-Theme nicht aus theme.json bekommt. Die Klassennamen der beiden WooCommerce-Blöcke sind abgelesen, nicht geraten — `do_blocks()` über die Template-Datei, dann die Klassen aus der Ausgabe. Ein Selektor auf einen Namen, den Woo nicht vergibt, wäre eine Regel, die aussieht, als griffe sie. ================================================================== */ /* Der Kopf hält die Höhe des Prototyps: --header-h ist dort 60px. 36px, nicht 60: der
legt oben und unten je 12px Innenabstand dazu, macht 60 plus die Trennlinie. Die erste Fassung setzte hier 60 und ergab damit einen 84px hohen Kopf — die Innenabstände waren mitgezählt, ohne dass sie in der Rechnung standen. Die Höhe hängt an der inneren Reihe, nicht am
. Der Header ist ein Constrained-Layout: gäbe man ihm display: flex, würden seine Kinder zu Flex-Elementen und verlören die Auto-Margins, mit denen dieses Layout zentriert und begrenzt — die Breitenbegrenzung wäre weg. Die innere Reihe ist ohnehin schon flex und zentriert dort auch vertikal. min-height, nicht height: sobald die Reihe auf schmalen Fenstern umbricht, müsste eine feste Höhe den Inhalt abschneiden. */ .lotzwoo-header-row { min-height: 36px; } /* Das Logo muss sich der Zeile fügen, nicht umgekehrt. Der Block schreibt Breite und Höhe als Attribute ans — bersta.png ist fast quadratisch, bei den 140px des Blocks also 126px hoch und damit doppelt so hoch wie der ganze Kopf. Begrenzt wird die Höhe, nicht die Breite: ein breiter Schriftzug als Logo bliebe so lesbar, während eine feste Breite ihn auf Briefmarkengröße brächte. */ .wp-block-site-logo img { max-height: 36px; width: auto; height: auto; } header .wp-block-site-title a { letter-spacing: -.02em; text-decoration: none; } /* Die Kachel steht nur, solange kein Logo hochgeladen ist — siehe den Filter in functions.php. Maße sind die des Prototyps. Der Verlauf lief von `brand-400` nach `brand-700`; der Buchstabe stand am hellen Ende bei 4.15:1 gegen Weiß und verfehlte die 4.5. Bersta hat ein Logo hochgeladen, die Kachel greift dort nicht — beim nächsten Kunden ohne Logo greift sie wieder. Eine Stufe tiefer angesetzt (`brand-500`) trägt denselben Verlauf und hält die Schwelle in jeder Palette, weil `500` die Stufe ist, auf der ohnehin der Primärknopf mit weißer Schrift steht. */ .lotzwoo-logomark { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(140deg, var(--wp--preset--color--brand-500), var(--wp--preset--color--brand-800)); color: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--md); font-weight: 700; line-height: 1; } /* Navigationslinks: der Prototyp gibt ihnen eine Fläche, keinen Unterstrich, und markiert die aktuelle Seite farbig statt fett. */ header .wp-block-navigation-item__content { padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); border-radius: 6px; color: var(--wp--preset--color--ink-500); font-weight: 500; text-decoration: none; } /* Die Flaeche ist beiden Zustaenden gemeinsam und bleibt es. Was den Fokus *anzeigt*, ist der Ring weiter unten — siehe den Block bei „Fokus im Kopfbereich“. */ header .wp-block-navigation-item__content:hover, header .wp-block-navigation-item__content:focus-visible { background: var(--wp--preset--color--ink-100); color: var(--wp--preset--color--ink-900); text-decoration: none; } header .current-menu-item > .wp-block-navigation-item__content { background: var(--wp--preset--color--brand-50); color: var(--wp--preset--color--brand-600); } /* Konto und Warenkorb sind im Prototyp Schaltflächen mit einer Fläche beim Überfahren. Beide Woo-Blöcke bringen ihr eigenes Icon mit — das ist der Grund, sie zu nehmen statt Icons von Hand zu setzen: die Zahl am Warenkorb ist dann echt und nicht gemalt. */ .lotzwoo-header-actions { align-items: center; } /* Rechts bleiben, auch wenn die Zeile umbricht. `space-between` gibt der Gruppe auf einer eigenen Zeile keinen Partner mehr, gegen den sie sich abstoessen koennte — sie stand dann links unter dem Logo. Gemessen am 2026-08-14: abgemeldet ab 1200px, angemeldet mit den drei Plugin-Flaechen ab 1440px. Das automatische Aussenmass nimmt den freien Platz vor `justify-content` auf und wirkt in beiden Faellen. Mit dem Elternteil davor, und das ist gemessen und nicht vorsorglich: als blosses `.lotzwoo-header-actions` rechnete der Browser weiter mit `margin-left: 0`. WordPress' eigene Layout-Regeln setzen das physische `margin` spaeter im Stapel und bei gleicher Spezifitaet — eine logische Eigenschaft verliert dagegen, obwohl sie auf dieselbe Kante zeigt. */ .lotzwoo-header-row > .lotzwoo-header-actions { margin-inline-start: auto; } /* Zwei Formen, nicht eine — so trennt der Prototyp sie auch. Der Warenkorb ist eine quadratische Schaltfläche von 36px, weil er nur ein Icon trägt; das Konto ist ein Chip mit Text daneben. Beide dieselbe Fläche beim Überfahren, damit sie als eine Reihe lesbar bleiben. */ .lotzwoo-header-actions .wc-block-customer-account__link, .lotzwoo-header-actions .wc-block-mini-cart__button { display: flex; align-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--wp--preset--color--ink-500); cursor: pointer; text-decoration: none; } .lotzwoo-header-actions .wc-block-mini-cart__button { justify-content: center; width: 36px; height: 36px; padding: 0; } /* Die Beschriftung trägt die Schrift der Menüpunkte daneben, nicht die des Fließtexts. Woo liefert den Link mit `font: inherit` aus, er erbte also die 0.9375rem des Bodys und dessen Normalgewicht und stand damit neben „Über uns" sichtbar größer und dünner in derselben Zeile. `color: inherit` statt eines Tokens, und zwar mit Absicht: die Navigationslinks *sind* geerbt gefärbt. Ihre eigene Regel weiter oben setzt zwar `ink-500`, kommt damit aber nicht durch — WordPress' eigenes Navigations-Stylesheet trägt .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content mit doppelter Klasse und `color: inherit`, und (0,3,0) schlägt das (0,1,1) von `header .wp-block-navigation-item__content`. Der Menüpunkt steht deshalb in `ink-900`, nicht in `ink-500`. Wer hier ein Token einträgt, trifft die gerenderte Kopfzeile also gerade nicht. Nur der Konto-Link, nicht der Warenkorb daneben: der trägt kein Wort, und sein Icon soll leiser bleiben als die Beschriftung. */ .lotzwoo-header-actions .wc-block-customer-account__link { gap: var(--wp--preset--spacing--20); padding: 5px 10px; min-height: 36px; color: inherit; font-size: var(--wp--preset--font-size--md); font-weight: 500; } .lotzwoo-header-actions .wc-block-customer-account__link:hover, .lotzwoo-header-actions .wc-block-customer-account__link:focus-visible, .lotzwoo-header-actions .wc-block-mini-cart__button:hover, .lotzwoo-header-actions .wc-block-mini-cart__button:focus-visible { background: var(--wp--preset--color--ink-100); color: var(--wp--preset--color--ink-900); text-decoration: none; } /* Fokus im Kopfbereich — Navigationslinks, Konto, Warenkorb. Dieselbe Regel, die die zwei Overlay-Knoepfe weiter unten schon tragen, eine Ebene weiter gezogen. Bis hierher hatten die drei nur die Flaeche aus `ink-100`, und die zwei Zeilen darueber geben sie bei `:hover` UND bei `:focus-visible` — mit zwei Folgen: * Die Flaeche traegt die Fokusanzeige nicht. `ink-100` kommt gegen `surface` auf 1.17:1 und gegen das weisse Overlay auf 1.25:1; WCAG 2.1 verlangt in 1.4.11 fuer die Fokusanzeige 3:1. Was man sah, war Chromes Vorgabering (`outline: auto 1px rgb(16,16,16)`, am 2026-08-11 an allen drei gemessen) — sichtbar, aber ohne Marke, ohne verlaessliche Staerke und je Browser anders. * Fokus und Mauszeiger sahen identisch aus. Wer tastet, konnte nicht sehen, wo er steht. Die Trennung liegt deshalb nicht in der Flaeche, sondern im Ring: die Flaeche bleibt beiden Zustaenden gemeinsam (eine Stelle, kein Auseinander- laufen), den Fokus zeigt allein der Ring. `outline` und nicht `box-shadow`, weil es kein Layout kostet, und `brand-500` aus dem Preset, damit der Ring dem Kindtheme folgt, ohne dass hier ein zweiter Farbwert stuende. `outline-offset: -2px`, der Ring also INNERHALB der Randbox — und das ist gemessen, nicht Geschmack. Im offenen Overlay setzt der Kern die Navigationslinks buendig an den linken Bildschirmrand (x=0, ohne Polsterung) und legt darum einen Vorfahren mit `overflow: auto`. Mit `+2px` reicht der Ring bis -4px und wird links beschnitten: aus dem Rechteck wird ein C, auf jedem der sechs Links. Dieselbe Falle wie beim Schliessen-Knopf, nur sechs Mal. Nach innen gezeichnet kann ihn nichts beschneiden — bei 390px und bei 1280px nachgesehen, Ueberstand ueberall 0. Nach innen liegt der Ring auf der eigenen Fuellung. Das sind zwei Flaechen, denn auf der aktuellen Seite gewinnt `brand-50` aus der Regel darunter (gleiche Spezifitaet, spaeter notiert — im Browser bestaetigt): Ring Flaeche darunter Kontrast brand-500 #b33a2b Fuellung ink-100 #ede5d8 4.72:1 brand-500 #b33a2b aktuelle Seite brand-50 #faefed 5.24:1 brand-500 #157d5f Fuellung ink-100 #f1f4f7 4.61:1 brand-500 #157d5f aktuelle Seite brand-50 #eaf6f1 4.59:1 Die ersten zwei Zeilen sind das aktive Kindtheme lotzwoo-theme-bersta, die letzten zwei das Basistheme. Die Aussenkante des Rings grenzt weiterhin an die Flaeche daneben — #b33a2b auf Creme #fbf7f0 5.53:1 und auf dem weissen Overlay 5.90:1, #157d5f auf Weiss 5.08:1. Alle sieben Werte tragen die 3:1, der niedrigste mit 4.59:1. Der Oeffnen-Knopf behaelt seinen Ring aussen (`+2px`, weiter unten): er steht frei in der Kopfzeile, dort schneidet nichts, und 24px Kantenlaenge sind zu wenig, um einen Ring noch nach innen zu nehmen. */ header .wp-block-navigation-item__content:focus-visible, .lotzwoo-header-actions .wc-block-customer-account__link:focus-visible, .lotzwoo-header-actions .wc-block-mini-cart__button:focus-visible { outline: 2px solid var(--wp--preset--color--brand-500); outline-offset: -2px; } /* Logo-Link und Website-Titel — derselbe Ring, aber nach AUSSEN. Die letzten zwei Kopfbedienelemente ohne eigene Fokusanzeige; bis hierher trugen sie Chromes Vorgabering (`outline: auto 1px rgb(16,16,16)`, am 2026-08-11 an beiden gemessen). Die Richtung ist hier die andere als eine Regel weiter oben, und das ist gemessen. Zwei Gruende, jeder fuer sich ausreichend: * **Es schneidet nichts.** Der Ring nach innen war oben eine Notwehr gegen den `overflow: auto` des offenen Overlays. Diese zwei stehen gar nicht darin: bei offenem Overlay faengt der Kern den Fokus im Modal, beide sind mit der Tabulatortaste nicht mehr erreichbar (nachgesehen — der Fokus kommt dort nie an). Bei geschlossenem Overlay hat keiner von beiden einen clippenden Vorfahren, bei 390px so wenig wie bei 1280px. * **Nach innen laege der Ring im Bild bzw. in der Schrift.** Die Randbox des Logo-Links ist die des ``; ein Ring mit `-2px` zeichnete sich auf die aeusseren 2px der Kundengrafik, deren Farben das Theme nicht kennt. Der Titel wiederum hat keine Polsterung (anders als die Navigationslinks, die ihre `ink-100`-Flaeche haben) — dort schnitte der Ring durch die Versalien. Mit `+2px` liegt zwischen Ring und Element ein 2px breiter Streifen der Kopfflaeche. Beide Kanten des Rings grenzen damit an dieselbe Flaeche, und die Logo-Grafik beruehrt er ueberhaupt nicht: brand-500 #b33a2b auf Kopfflaeche #fbf7f0 (bersta) 5.53:1 brand-500 #157d5f auf Kopfflaeche #ffffff (Basis) 5.08:1 */ header .wp-block-site-logo a:focus-visible, header .wp-block-site-title a:focus-visible { outline: 2px solid var(--wp--preset--color--brand-500); outline-offset: 2px; } /* Der Fokusring auf einer GEFUELLTEN Markenflaeche — hier "Zum Sortiment". Der Sonderfall des Kopfbereichs, und keine Wiederholung: die Fuellung dieses Knopfes IST `brand-500`. Der Ring, den die uebrigen sechs Bedienelemente tragen, kaeme darauf auf 1:1 und waere schlicht nicht da. DIE REGEL, und sie gilt nicht nur fuer diesen Knopf: Auf einer gefuellten Markenflaeche ist die Ringfarbe die Schriftfarbe dieser Flaeche — hier `white`. Weil die Flaeche gefuellt ist, kann sich der Ring von ihrer Umgebung nicht mehr selbst abgrenzen; deshalb bleibt aussen zusaetzlich der `brand-500`-Ring, den der Kopfbereich ohnehin fuehrt. Der erste Satz ist der tragende, denn er borgt sich eine Garantie, die schon besteht, statt eine zweite aufzumachen: `theme.json` setzt fuer `elements.button` `white` auf `brand-500`. Eine Fuellung, die als gefuellter Knopf durchgeht, hat ihren Kontrast gegen Weiss also bereits als Schrift beweisen muessen — und 4.5:1 fuer Text ist strenger als die 3:1, die 1.4.11 vom Ring verlangt. Das traegt in die Zukunft: wuerde eine kuenftige Fuellung je so hell, dass ein weisser Ring die 3:1 verfehlt, haette ihre eigene weisse Beschriftung die 4.5:1 schon vorher verfehlt. Der Fehler faellt dann an der Schrift auf, nicht erst an der Fokusanzeige. Gerechnet gegen beide Paletten und gegen die Toene, auf denen der Ring wirklich liegt — die Fuellung im Ruhezustand und die `brand-600` des `:hover`, denn beide Zustaende koennen zusammenfallen: Kante bersta Basis Kern white gegen Fuellung brand-500 5.90:1 5.08:1 Kern white gegen Fuellung brand-600 (hover) 7.75:1 6.48:1 Kern white gegen Saum brand-500 5.90:1 5.08:1 Saum brand-500 gegen Kopfflaeche 5.53:1 5.08:1 Acht Werte, alle ueber 3:1, der niedrigste 5.08:1. Jede Kante des Rings traegt einzeln — die Anzeige haengt an keiner einzelnen Nachbarfarbe. Die zwei anderen Kandidaten sind gerechnet und im Browser angesehen worden, nicht geraten: * **Nur ein weisser Ring innen (invertiert).** Gegen die Fuellung 5.90/5.08, das traegt. Seine Aussenkante grenzt aber an die Kopfflaeche: 1.07:1 in bersta, 1.00:1 im Basistheme. Im Bild sieht der Knopf dann aus, als haette er 2px seines Randes verloren — die Anzeige verschwindet nach aussen. * **`ink-900` als Ringfarbe.** Faellt an der Rechnung durch, und zwar zuerst in der aktiven Palette: 2.97:1 auf `brand-500` in bersta, 3.61:1 im Basistheme — und auf dem `brand-600` des Hover-Zustands 2.26:1 bzw. 2.83:1. Der Wert wird schlechter, je dunkler die Fuellung, also genau in die Richtung, in die die Marken-Rampe von 500 nach 900 laeuft. Als Regel fuer den naechsten gefuellten Knopf waere er damit schon widerlegt, bevor es ihn gibt. `outline-offset: 0`, damit die zwei Ringe einander beruehren: ein Spalt dazwischen zeigte die Kopfflaeche, und deren Kante gegen den weissen Kern traegt nichts (1.07:1). Der Saum bleibt wortgleich die Regel der uebrigen sechs; der `inset`-Schatten ist die einzige Zutat, und er liegt innerhalb der eigenen Randbox, kann also von nichts beschnitten werden, was nicht schon den Knopf selbst beschneidet. Ueberstand bei 390px und 1280px nachgemessen, ueberall 0. `header` vor dem Selektor mit Absicht: im Kopfbereich traegt genau ein Element `.wp-element-button` (nachgesehen — Konto und Warenkorb tun es nicht), auf der Seite sind es fuenf. Die anderen vier stehen auf den Plugin-Flaechen und haben dort mit `--lwb-focus` ihre eigene Regel; diese hier greift bewusst nicht dorthin. Der naechste gefuellte Knopf IM KOPF bekommt den Ring dagegen ohne eine weitere Zeile. */ header .wp-element-button:focus-visible { outline: 2px solid var(--wp--preset--color--brand-500); outline-offset: 0; box-shadow: inset 0 0 0 2px var(--wp--preset--color--white); } /* Die zwei Knoepfe des Overlay-Menues — "Menü öffnen" und "Menü schließen". Sie waren die einzigen fokussierbaren Stellen des Kopfbereichs ohne eigene Fokusgestaltung: Navigationslinks, Konto und Warenkorb bekommen oben je eine Flaeche aus `ink-100`, die zwei Knoepfe bekamen nichts. Am 2026-08-11 im Browser nachgemessen — beide zeigten allein Chromes Vorgabering (`outline: auto 1px`), also weder die Marke noch eine verlaessliche Staerke. Zwei Teile, und der zweite ist der, auf den es ankommt: * Die **Flaeche** ist dieselbe Regel wie eine Zeile hoeher. Sie macht die zwei Knoepfe zu Geschwistern der uebrigen Kopfbedienung, nicht zu einem Sonderfall. * Der **deckende Ring** von 2px traegt die Fokusanzeige. Die Flaeche allein tut das nicht, und zwar nicht knapp: `ink-100` kommt gegen `surface` auf 1.17:1 und gegen das weisse Overlay auf 1.25:1, wo WCAG 2.1 in 1.4.11 fuer die Fokusanzeige 3:1 verlangt. Das ist dieselbe Rechnung, die weiter oben schon fuer `--lwb-focus` steht. Warum hier `outline` statt `var(--lwb-focus)`: dieser Schatten lebt auf den Wurzeln des Plugins — seit dem 2026-08-13 sechs, damals zwei — und ist im Kopfbereich gar nicht in Reichweite (im Browser geprueft: leer). An der Zahl haengt das Argument nicht: der Kopfbereich liegt ausserhalb jeder von ihnen. Ein `outline` kostet ausserdem kein Layout — beim Schliessen-Knopf, der im Overlay oben rechts klebt, ist das kein Detail. ACHTUNG, hier stand bis zum 2026-08-11 das Gegenteil der Wahrheit: ein `outline` werde „von `overflow` nicht abgeschnitten". Er wird es sehr wohl. Drei Sitzungen haben es unabhaengig gemessen — der Overlay-Container (`.wp-block-navigation__responsive-container.has-modal-open`) traegt `overflow: auto` und clippt, und zweimal musste der Versatz deshalb nach innen gedreht werden (`118da8e`, `96db4e0`). Wer hier einen Ring nach aussen setzt, misst vorher den Ueberstand gegen jeden clippenden Vorfahren. `brand-500` und nicht `ink-900`, weil der Ring die Marke traegt; die Farbe kommt aus dem Preset, folgt also dem Kindtheme, ohne dass hier ein zweiter Farbwert stuende. Gemessen gegen die Flaechen, auf denen er wirklich liegt: Ring Flaeche Kontrast brand-500 #b33a2b Kopf/Creme #fbf7f0 (oeffnen) 5.53:1 brand-500 #b33a2b Overlay #ffffff (schliessen) 5.90:1 brand-500 #b33a2b Fuellung #ede5d8 (daneben) 4.72:1 brand-500 #157d5f Kopf/`surface` #ffffff 5.08:1 brand-500 #157d5f Fuellung #f1f4f7 (daneben) 4.61:1 Die ersten drei Zeilen sind die Farbe des aktiven Kindthemes, die letzten zwei der Rueckfall des Basisthemes. Alle fuenf tragen die 3:1. Bis zum 2026-08-11 stand in der Basistheme-Zeile „dieselben drei" und „4.76 / 5.08 / 4.07". Die 4.76 ist `#157d5f` auf Creme `#fbf7f0` — eine Kombination, die nie rendert: die Creme gehoert dem Kindtheme, im Basistheme ist `surface` weiss. Die Zahl war richtig gerechnet und beschrieb eine Flaeche, die es an dieser Stelle nicht gibt. Nur `:focus-visible`, kein `:hover`: der Ruhe- und Mauszustand der zwei Knoepfe ist Gestaltung und laeuft als Stream F. */ header .wp-block-navigation__responsive-container-open:focus-visible, header .wp-block-navigation__responsive-container-close:focus-visible { background: var(--wp--preset--color--ink-100); color: var(--wp--preset--color--ink-900); border-radius: 6px; outline: 2px solid var(--wp--preset--color--brand-500); outline-offset: 2px; } /* Der Schliessen-Knopf braucht den Ring nach innen, und das ist kein Schoenheitsgriff. Der Kern heftet ihn im offenen Overlay in die obere rechte Ecke — gemessen auf 390px Breite sitzt er auf [366, 0, 24, 24], also buendig an zwei Bildschirmkanten. Ein Ring mit `outline-offset: 2px` liegt damit von -4px bis 394px, und weil die Seite waagerecht nicht scrollt, werden oben und rechts je 4px abgeschnitten: der Ring wird zum C statt zum Rechteck. Nachgesehen, nicht vermutet — der Screenshot zeigt es. Das ist kein Einzelfall dieser Breite. Der Kern setzt den Knopf auf jeder Fenstergroesse in dieselbe Ecke, also schneidet es immer. Mit `-2px` wird der Ring innerhalb der Randbox gezeichnet und kann nicht mehr beschnitten werden. Er liegt dann auf der Fuellung statt auf dem Overlay: `brand-500` gegen `ink-100` sind 4.72:1, weiterhin ueber den 3:1 aus 1.4.11, und seine Aussenkante grenzt an das weisse Overlay mit 5.90:1. */ header .wp-block-navigation__responsive-container-close:focus-visible { outline-offset: -2px; } /* Icon und Text stehen zueinander zentriert, nicht auf der Schriftlinie. Gilt fuer beide Schaltflaechen und fuer das getauschte Lucide-Konto-Icon. */ .lotzwoo-header-actions svg { display: block; flex: none; } .lotzwoo-header-actions .label, .lotzwoo-header-actions .wc-block-mini-cart__quantity-badge { display: flex; align-items: center; } /* Die Zahl am Warenkorb: Markenfarbe statt Themefarbe, und ein weißer Rand, damit sie sich vom Icon abhebt, über dem sie sitzt. */ .lotzwoo-header-actions .wc-block-mini-cart__badge { border: 2px solid var(--wp--preset--color--white); background: var(--wp--preset--color--brand-500); color: var(--wp--preset--color--white); font-weight: 700; } /* Screenreader-Text: das Skip-Link im Kopfbereich braucht ihn und Block-Themes bringen ihn nicht von sich aus mit. */ .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } .screen-reader-text:focus { background-color: var(--wp--preset--color--white, #fff); clip-path: none; color: var(--wp--preset--color--ink-900, #0d1520); display: block; height: auto; left: 8px; padding: 12px 20px; top: 8px; width: auto; z-index: 100000; } /* ================================================================== Die fünf wiederkehrenden Bausteine. Ticket 17, Gegenstück zu den `register_block_style()`-Aufrufen in `functions.php`. Bis hierher baute `import-pages.py` diese fünf an 45 Aufrufstellen aus Block-Attributen zusammen — jede Palettenänderung hätte 45 Stellen gehabt, und keine davon im Theme. Jeder Wert ist der, den das Skript heute schreibt, nur an einer Stelle statt an fünfzehn. Der Umbau soll nichts verschieben, sondern den Ort wechseln; deshalb steht hier kein „schöner" Wert und kein neuer Hexwert, sondern ausschließlich Token aus theme.json. Systemregeln, nicht Kundengestaltung: die Bausteine sind Rollen (ein Label, eine Karte, ein abgesetzter Abschnitt), ihre Farben kommen aus der Palette des jeweiligen Kindthemes. Deshalb gehören sie hierher und nicht nach Bersta. Die Klassennamen sind eine Kopplung zum Website-Repo. `import-pages.py` schreibt genau diese Zeichenketten; wer hier umbenennt, muss dort nachziehen. ================================================================== */ /* Versalien-Label über einer Überschrift. Der Buchstabenabstand ist kein Token — er stand so im Skript und wandert unverändert mit; eine eigene Skala für einen einzigen Wert wäre mehr Zusage als Nutzen. */ p.is-style-label { color: var(--wp--preset--color--brand-500); font-size: var(--wp--preset--font-size--sm); font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; } /* Die grosse Zahl. `serif` steht seit dem 2026-08-12 in der theme.json der Basis — als generischer Stapel mit Georgia voran, ohne mitgelieferte Schriftdatei. Bis dahin kannte den Slug nur das Kindtheme, und dieser Block-Style zeigte in der Basis auf ein Token, das es dort nicht gab: ein Vertrag, den das Design-System mit sich selbst bricht, und zwar lautlos — der Rueckfall auf die Grundschrift sah aus wie eine Absicht. Welche Serife es ist, bleibt Kundensache: Bersta ueberschreibt denselben Slug mit Bitter (ADR 004), die Kaskade der theme.json erledigt das ueber den gleichen Slugnamen von selbst. Der Fallback auf `sans` bleibt stehen. Er greift jetzt nur noch, wenn ein Kindtheme das `fontFamilies`-Array ersetzt und `serif` dabei weglaesst — WordPress ersetzt dieses Array als Ganzes. `5-xl`, nicht `5xl`: WordPress setzt zwischen Ziffer und Buchstabe einen Bindestrich, wenn es aus dem Slug den Custom-Property-Namen bildet. Am erzeugten Stylesheet abgelesen, nicht geraten — `--wp--preset--font-size--5xl` existiert nicht und wäre stillschweigend wirkungslos geblieben. */ p.is-style-kennzahl { font-family: var(--wp--preset--font-family--serif, var(--wp--preset--font-family--sans)); font-size: var(--wp--preset--font-size--5-xl); font-weight: 500; } /* Textkarte mit Rahmen. Innen `h3` + `p` — der Aufbau bleibt im Skript, ein Block-Style trägt Aussehen und keine Zusammensetzung. */ .wp-block-group.is-style-karte { border: 1px solid var(--wp--preset--color--ink-200); padding: var(--wp--preset--spacing--50); } /* Abgesetzter Abschnitt. Nur Polsterung und Vertikalabstand: der Hintergrund bleibt Attribut, weil er je Aufrufer zwischen `surface-2` und keinem Hintergrund wechselt und damit Inhalt der Seite ist, nicht des Bausteins. */ .wp-block-group.is-style-abgesetzt { padding-block: var(--wp--preset--spacing--70); padding-inline: var(--wp--preset--spacing--50); } /* Ein Empfänger der Datenschutz-Auskunft, als Block statt als Tabellenzeile (T5: die dritte Spalte lag auf 390px ausserhalb des Sichtfelds). Logische Eigenschaften statt `border-left`/`padding-left`, weil die Kante an den Textanfang gehört und nicht an die linke Bildschirmseite; in dieser Leserichtung ist das derselbe Ort. */ .wp-block-group.is-style-empfaenger { border-inline-start: 3px solid var(--wp--preset--color--ink-200); padding-block: var(--wp--preset--spacing--40); padding-inline: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); } /* Eine Liste kurzer, gleichrangiger Stichworte auf zwei Spalten. Acht einzeilige Eintraege untereinander laufen lang und lassen daneben die halbe Rasterbreite leer. Zwei Spalten halbieren den Lauf. `columns: 2 16em` und nicht `column-count: 2`, und das ist der ganze Punkt dieser Regel. Mit beiden Werten nimmt der Browser die *kleinere* der beiden Vorgaben: zwei Spalten, solange je 16em Platz sind, sonst eine. Auf einem Telefon faellt die Liste damit von selbst einspaltig zurueck, ohne Umbruchpunkt und ohne dass jemand einen pflegen muss. Ein blosses `column-count: 2` haette bei 360px zwei Spalten zu je 160px erzwungen, in denen „Frischfleisch, auch von alten Nutztierrassen" vierzeilig steht. Warum das ueberhaupt ein Block-Style ist: WordPress' Block-Attribut `textColumns` schreibt ausschliesslich `column-count` und kennt die Mindestbreite nicht. Ueber das Attribut ist dieses Verhalten nicht erreichbar. */ .wp-block-list.is-style-zweispaltig { columns: 2 16em; gap: var(--wp--preset--spacing--60); } /* Ein Eintrag darf nicht ueber die Spaltengrenze zerrissen werden. */ .wp-block-list.is-style-zweispaltig > li { break-inside: avoid; } /* Laufender Text auf lesbarer Zeilenlaenge. Gemessen an der Ueber-uns-Seite vor dem Umbau: 119 Zeichen je Zeile. Das Raster steht auf 960px, und fuer eine Tabelle oder ein Kartenraster ist das richtig — fuer laufenden Text nicht. Die Spanne, in der das Auge den Zeilenanfang ohne Suchen zurueckfindet, liegt bei 50 bis 75 Zeichen. `ch` und nicht Pixel: die Breite soll an der Schrift haengen, nicht an einer Zahl. Aendert ein Kundentheme den Grundschriftgrad, wandert die Zeilenlaenge mit, statt still falsch zu werden. `margin-inline: 0 auto` ist der eigentliche Punkt dieser Regel. Ein Kind eines `is-layout-constrained`-Blocks bekommt von WordPress `margin-inline: auto` und stuende damit *mittig* im 960er-Raster — also eingerueckt gegenueber der Ueberschrift darueber, die die volle Breite nutzt. Das liest als Versehen. Der Text beginnt an derselben Kante wie seine Ueberschrift. Der doppelte Klassenname und das `!important` sind kein Tippfehler und auch keine Bequemlichkeit. WordPress' Layoutregel fuer constrained-Kinder lautet .is-layout-constrained > :where(:not(.alignleft):not(.alignright)…) { margin-left: auto !important; margin-right: auto !important; } Gegen ein `!important` hilft keine Spezifitaet, sondern nur ein zweites. Und weil `:where()` die Spezifitaet der Kernregel auf eine Klasse drueckt, muss die eigene Regel bei gleichem Gewicht auch noch hoeher liegen — daher der wiederholte Klassenname. Zuerst stand hier die Vermutung, es gehe um die Reihenfolge im `head`. Das war falsch, und der erste Versuch (nur doppelter Klassenname, ohne `!important`) blieb folgerichtig wirkungslos: gemessen stand die Spalte weiter bei 1006px statt bei 792px. Erst beides zusammen dreht es. */ .wp-block-group.is-style-lesebreite.is-style-lesebreite { max-inline-size: 70ch; margin-inline: 0 auto !important; } /* Ein Schritt einer Zeitleiste: Knoten, Verbindung zum naechsten, Inhalt daneben. Warum das hier steht und nicht als Inline-Style im Website-Repo: Knoten und Verbindung sind Pseudoelemente, und ein Block-Attribut kann keines erzeugen. Alles andere an diesem Baustein waere inline moeglich gewesen — die beiden sind der Grund, aus dem er ueberhaupt ein Block-Style ist. Warum ueberhaupt eine Zeitleiste im Basis-Theme: „ein Schritt in einer zeitlichen Folge" ist eine Rolle, keine Kundengestaltung — dieselbe Begruendung wie bei Karte und Empfaenger. Die Farben kommen aus der Palette des jeweiligen Kindthemes. Der Punkt wird *nicht* die Markenfarbe. ADR 004 haelt das Rot fuer Labels, den Primaerknopf und Zustaende frei; eine Zeitmarke ist keines davon. Die Jahreszahl darueber traegt ohnehin `is-style-label` und damit das Rot — zwei rote Elemente uebereinander waeren genau die Unruhe, die ADR 004 abstellen wollte. Linie `ink-300` und Punkt `ink-400`, und nicht `ink-200` fuer die Linie, wie der Rollenname „Linie" es nahelegt. Grund ist gemessen, nicht empfunden: die Zeitleiste steht auf `surface-2` (#f4ede1), und `ink-200` (#e4daca) liegt davor bei rund 1,1:1 — die Linie war schlicht nicht da. `ink-200` ist gegen `surface` kalibriert, nicht gegen `surface-2`. Das ist ein Befund ueber die Palette und nicht ueber diesen Baustein: er trifft jede Haarlinie in einem abgesetzten Abschnitt, `is-style-karte` eingeschlossen. Hier steht bewusst nur die lokale Abhilfe — eine Rolle der Palette umzudeuten, ist keine Entscheidung, die nebenbei in einem Block-Style faellt. Logische Eigenschaften wie beim Empfaenger: die Kante gehoert an den Textanfang, nicht an die linke Bildschirmseite. Beim letzten Schritt laeuft die Linie nicht weiter — sonst zeigte sie ins Leere und behauptete einen vierten Eintrag. Der Punkt bleibt, weil er absolut liegt. */ .wp-block-group.is-style-zeitleiste-schritt { position: relative; padding-inline-start: var(--wp--preset--spacing--60); padding-block-end: var(--wp--preset--spacing--60); } /* Kein Abstand zwischen den Schritten. WordPress gibt jedem Kind eines Layout-Blocks ein `margin-block-start`, und genau dort zeichnete die Verbindung nicht — die Linie hatte Luecken zwischen den Punkten. Der Zwischenraum kommt jetzt aus dem `padding-block-end` oben, und das gehoert zum Kasten, ueber den die Verbindung laufen kann. */ .wp-block-group.is-style-zeitleiste-schritt { margin-block-start: 0; } .wp-block-group.is-style-zeitleiste-schritt > :first-child { margin-block-start: 0; } /* Der Knoten. `0.4em` von oben setzt ihn auf die Grundlinie der Jahresmarke daneben, nicht auf die Oberkante des Kastens. */ .wp-block-group.is-style-zeitleiste-schritt::before { content: ""; position: absolute; inset-inline-start: -4.5px; inset-block-start: 0.4em; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--wp--preset--color--ink-400); } /* Die Verbindung von diesem Knoten zum naechsten. Frueher war das die `border-inline-start` des Kastens. Das war der Fehler: eine Kante beginnt an der Oberkante und endet an der Unterkante, der Knoten sitzt aber 0.4em tiefer — und ueber den Aussenabstand zum naechsten Schritt kam sie ohnehin nicht hinueber. Ergebnis waren Striche, die weder am einen noch am anderen Punkt ankamen. Als eigenes Element laesst sich beides sagen: beginne unter diesem Knoten (`0.4em` Versatz plus die 9px des Knotens), und laufe bis 0.4em *unter* die Unterkante — dort faengt der naechste Knoten an. Der negative Wert ist der Punkt der ganzen Regel; ohne ihn bliebe wieder eine Luecke von der Hoehe des Versatzes. `-0.5px` bei 1px Breite setzt die Linie mittig unter die Knoten, die bei -4.5px mit 9px Breite ebenfalls auf 0 zentriert sind. */ .wp-block-group.is-style-zeitleiste-schritt::after { content: ""; position: absolute; inset-inline-start: -0.5px; inset-block-start: calc(0.4em + 9px); inset-block-end: -0.4em; inline-size: 1px; background: var(--wp--preset--color--ink-300); } /* Beim letzten Schritt keine Verbindung — sie zeigte ins Leere und behauptete einen vierten Eintrag. */ .wp-block-group.is-style-zeitleiste-schritt:last-child { padding-block-end: 0; } .wp-block-group.is-style-zeitleiste-schritt:last-child::after { content: none; } .wp-block-group.is-style-zeitleiste-schritt .wp-block-quote { border-inline-start: none; padding-inline-start: 0; margin-block-start: var(--wp--preset--spacing--40); } /* ================================================================== Akkordeon — eine Wahl, bei der nur eine Antwort offen steht ================================================================== */ /* Warum `
` und kein Skript. Ein Akkordeon ist eine der wenigen Oberflaechen, die der Browser fertig mitbringt: Tastatur, Screenreader, Aufklappzustand und die Suche im Dokument sind bereits richtig. Jede Nachbildung mit `aria-expanded` und Klick-Zuhoerern muss das alles noch einmal bauen, und die meisten bauen es halb. Dazu kommt der Fall, der diese Entscheidung traegt: faellt das Skript aus, ist eine nachgebaute Loesung ein Stapel unerreichbarer Absaetze — ein `
` ist dann schlicht aufgeklappt. Das `name`-Attribut macht die Gruppe wechselseitig: oeffnet man eines, schliesst der Browser das andere, ohne eine Zeile JavaScript. Browser, die das noch nicht kennen, lassen beide offen — das ist die richtige Richtung zu scheitern, denn beide Formulare sind dann sichtbar statt keines. Warum keine Karte. ADR 004 sagt „feine Linien statt Kaesten", und ein Akkordeon ist die Stelle, an der die Versuchung am groessten ist: Rahmen, Ecken, Schatten, damit „man sieht, dass es klickbar ist". Sichtbar macht es der Zeiger, der Marker und die Flaeche, die auf Hover reagiert — nicht ein Kasten. Die Trennung uebernimmt dieselbe 1px-Linie in `ink-200`, die auf dieser Website ohnehin ueberall die Trennung uebernimmt. */ .lotzwoo-accordion > details { border-top: 1px solid var(--wp--preset--color--ink-200); } .lotzwoo-accordion > details:last-of-type { border-bottom: 1px solid var(--wp--preset--color--ink-200); } /* Der Kopf. `list-style: none` und der WebKit-Zwilling entfernen den Standard-Pfeil; er sitzt je nach Browser woanders und laesst sich nicht ausrichten. Der eigene Marker steht rechts, wo ihn eine Liste von Auswahlmoeglichkeiten erwarten laesst. */ .lotzwoo-accordion > details > summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--30) 0; cursor: pointer; list-style: none; font-size: var(--wp--preset--font-size--md); font-weight: 600; color: var(--wp--preset--color--ink-900); } .lotzwoo-accordion > details > summary::-webkit-details-marker { display: none; } /* Die Flaeche reagiert, der Kasten bleibt weg: derselbe Griff wie in der Kopfnavigation, damit „hier kann man klicken" auf der ganzen Website dieselbe Geste ist. */ .lotzwoo-accordion > details > summary:hover, .lotzwoo-accordion > details > summary:focus-visible { background: var(--wp--preset--color--ink-100); } /* Die Zusatzzeile im Kopf sagt, fuer wen die Klappe gedacht ist. Sie steht im selben Element, damit der Screenreader sie beim Aufklappen mitliest statt sie hinter der Klappe zu verstecken. */ .lotzwoo-accordion__hint { font-size: var(--wp--preset--font-size--sm); font-weight: 400; color: var(--wp--preset--color--ink-500); } /* Der Marker: zwei Striche zu einem Winkel gedreht — dieselbe Haarlinie wie die Trennung, kein Zeichensatz-Glyph und kein Bild. */ .lotzwoo-accordion > details > summary::after { content: ""; flex: none; width: 0.5em; height: 0.5em; margin-inline-start: auto; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translate(-0.15em, -0.15em); transition: transform 150ms ease; } .lotzwoo-accordion > details[open] > summary::after { transform: rotate(225deg) translate(-0.15em, -0.15em); } /* Der Inhalt. Der Abstand sitzt unten am Panel und nicht oben am ersten Kind, sonst summiert er sich mit dem Aussenabstand des Formulars. */ .lotzwoo-accordion__panel { padding-bottom: var(--wp--preset--spacing--40); } /* Wer Bewegung abbestellt hat, bekommt den Winkel ohne Drehung. Das Akkordeon selbst klappt weiterhin — das ist ein Zustandswechsel, keine Animation. */ @media (prefers-reduced-motion: reduce) { .lotzwoo-accordion > details > summary::after { transition: none; } /* Derselbe Satz fuer den Winkel am „mehr" (AP-53): das Untermenue klappt weiterhin auf — das ist ein Zustandswechsel, keine Animation. Nur die Drehung entfaellt. */ .lotzwoo-mehr__winkel { transition: none; } } /* Die Klappe reagiert auf den Zeiger mit Raum, nicht nur mit Flaeche. Der Innenabstand waechst zur Seite hin, damit die Schrift beim Ueberfahren vom Rand wegrueckt — eine Geste, die auf einer Auswahl aus zwei Tueren deutlicher ist als eine blosse Faerbung. Vom Auftraggeber so gesetzt. */ .lotzwoo-accordion > details > summary { padding-right: 4px; transition: 0.3s; } .lotzwoo-accordion > details > summary:hover { padding: 12px 12px 12px 8px !important; transition: 0.3s; } /* Woos zweispaltiges Raster gibt jeder Spalte die halbe Breite. Untereinander liegende Klappen brauchen die ganze. */ #customer_login .lotzwoo-accordion { width: 100%; } /* ================================================================== Kontextleiste — Lieferort und Liefertermin, ueber dem Inhalt ================================================================== */ /* Warum hier und nicht im Plugin. Dieselbe Antwort wie bei `.lotzwoo-heldback` und den Kopfflaechen: das Plugin entscheidet, *was* dasteht, dieses Theme, *wie* es aussieht. Hier kommt eine zweite Haelfte dazu, und sie wiegt schwerer. Die Leiste steht seit AP-32 auf **vier** Flaechen — Sortiment, Warenkorb, Kontouebersicht und jedem Konto-Endpunkt — und drei davon laden `b2b-shop.css` ausdruecklich **nicht** (177.602 Bytes Katalog-Renderer, die auf einer Kontoseite nichts zu suchen haben). Eine Gestaltung im Plugin-Stylesheet erreichte drei der vier nicht. Der Preis ist benannt: ohne dieses Theme kommt die Leiste ungestaltet. Fuer eine Zeile aus zwei Beschriftungen, zwei Werten und einem Knopf ist das lesbar und nicht kaputt. --------------------------------------------------------------- AUSNAHME VON ADR 004 — bewusst, nicht uebersehen. ADR 004 verlangt „feine Linien statt Kaesten", und dieses Stylesheet folgt dem an drei weiteren Stellen (Akkordeon, Kopfflaechen, zurueckgehaltene Positionen). Die Kontextleiste folgt dem **nicht**: sie ist eine dunkle Vollflaeche mit Symbolen, Abzeichen und einem roten Zustand. **Entschieden vom Auftraggeber am 2026-08-14**, ausdruecklich gegen die Empfehlung der Mastersession, der die feine Fassung vorlag. Der Grund: die Leiste ist die tragende Auskunft des Kaufwegs — fuer welchen Ort und welchen Termin die Preise darunter gelten — und sie soll auf allen Seiten gleich aussehen. Bis dahin gab es sie zweimal: dunkel im Sortiment, als Haarlinie im Kopfbereich. **Wer das „repariert", dreht eine Entscheidung des Auftraggebers zurueck.** Sie gilt fuer diese eine Flaeche und fuer keine andere. --------------------------------------------------------------- */ /* Die Flaeche laeuft ueber die ganze Fensterbreite, ohne aus ihrem Container genommen zu werden: ein Schlagschatten ohne Weichzeichnung malt sie nach links und rechts weiter, `clip-path` schneidet ihn oben und unten wieder zurueck. Uebernommen aus der Sortimentsfassung, wo der Umweg seit AD-3 steht, und aus denselben drei Gruenden — ein Schatten zaehlt nicht zum Scrollbereich (kein waagerechter Scrollbalken, den `100vw` mit negativen Margins auf jedem Schirm mit sichtbarer Scrollleiste erzeugte), die Leiste bleibt im Fluss (`position: sticky` also unangetastet), und der Inhalt behaelt die Breite seiner Spalte. `position: sticky` und nicht der ganze Kopf: bei 1440 px ist der Kopfbereich angemeldet 189 px hoch, auf 390 px 341 px — ein Drittel des Bildes, dauerhaft belegt von Logo und Navigation. Die Leiste allein kostet 44 px. Vom Auftraggeber am 2026-08-14 so entschieden. Damit sie kleben *kann*, steht der Block `lotzwoo/context-slot` seit AP-32 in den Vorlagen und nicht mehr in `parts/header.html`: ein sticky-Element klebt nur innerhalb seines Containers, und der Container waere sonst das `
` gewesen, das WordPress um jeden Template-Part legt — also genau so hoch wie der Kopf und keinen Pixel mehr. */ .lotzwoo-contextbar { --kontextleiste-grund: var(--wp--preset--color--ink-900); /* **Die Hoehe der drei Bedienelemente der Leiste, an einer Stelle.** Bis hierher war sie zweimal gerechnet und einmal geerbt: Stern und Warenkorb standen auf gesetzten 40 px, der Wechsler auf 33,5 px aus Polster plus Zeilenhoehe — am 2026-08-25 gemessen. Drei Knoepfe in einer Reihe, zwei davon einen Kopf groesser. Sie steht auf der Leiste und nicht auf `__actions`, weil der Wechsler seit AP-70 (B3) **neben** der Aktionsgruppe steht und nicht darin: unter 700 px muss er ein Rasterelement von `__inner` sein. Eine Eigenschaft auf `__actions` erreichte ihn nicht. */ --lotzwoo-contextbar-control-h: 34px; position: sticky; /* **Der Versatz ist ein Token, keine Null** (2026-08-26). Hier stand `top: 0`, und damit parkte die Leiste hinter der WordPress-Admin-Bar: von ihren 44 px verschwanden 32 unter ihr, und weil die Werkzeugleiste des Sortiments mit `calc(var(--lwb-sticky-top) + var(--lwb-ctx-h))` = 76 px rechnet, lief die Artikelliste durch einen 32-px-Schlitz dazwischen. Am 2026-08-26 am Klon gemessen, 1440 px, angemeldet. Die Null ist beim Umzug der Gestaltung aus dem Plugin hierher entstanden (`f030c61`, AP-32): die abgelöste Regel `.lotzwoo-b2b-shop .lwb-contextbar` las `top: var(--lwb-sticky-top)`, die Portierung hat die Hälfte verloren. Der Kommentar zum Token weiter oben beschreibt genau diesen Fehler — er hatte nur keinen Leser. Der Rückfall auf `0px` ist der Normalfall: ohne Admin-Bar deklariert niemand den Token, und dann klebt die Leiste am Fensterrand. */ top: var(--lwb-sticky-top, 0px); z-index: 20; background: var(--kontextleiste-grund); box-shadow: 0 0 0 100vmax var(--kontextleiste-grund); clip-path: inset(0 -100vmax); color: var(--wp--preset--color--surface); font-size: var(--wp--preset--font-size--md); } /* Ohne aufloesbaren Kontext ist die Leiste rot. Der Zustand steht zusaetzlich im Wort („Kontext fehlt") und in `data-state` — Farbe allein ist keine Information. */ .lotzwoo-contextbar.is-unset { --kontextleiste-grund: var(--wp--preset--color--err-700); } /* Steht die Leiste als eigene Bahn zwischen Kopf und Inhalt, hat sie keinen Container, der ihr eine Rinne gaebe — sie liegt direkt in `.wp-site-blocks`. Dann nimmt sie sich dieselbe wie der Kopf darueber, damit Ortsname und Logo auf einer Kante stehen. Im Sortiment entfaellt die Regel: dort steckt die Leiste in der Inhaltsspalte des Kurzcodes und haette sonst eine Rinne zu viel. */ .wp-site-blocks > .lotzwoo-contextbar { padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right); /* Buendig unter dem Kopf, Fall A: als eigene Bahn ist die Leiste ein Geschwister im Fluss von `wp-site-blocks` und bekommt dessen Block-Abstand als `margin-block-start` — gemessen 24 px am Warenkorb. Eine klebende Leiste, die im Ruhezustand 24 px unter dem Kopf schwebt, sieht aus wie ein Element, das noch nicht angekommen ist. */ margin-block-start: 0; } /* Buendig unter dem Kopf, Fall B: im Sortiment steckt die Leiste in der Inhaltsspalte des Kurzcodes, und `main` legt 24 px Rand plus 16 px Polster darueber — gemessen 40 px zwischen Kopf-Unterkante (95) und Leisten-Oberkante (135). Genommen wird das Polster von `main` und nicht per negativem Rand von der Leiste: ein negativer Rand von 40 px waere eine Zahl, die stillschweigend falsch wird, sobald jemand am Abstandsraster dreht. `:has()` fragt stattdessen nach der Tatsache — traegt diese Seite die Leiste, faengt sie oben ohne Abstand an. Der Inhalt **unter** der Leiste behaelt seinen eigenen; ihn traegt die Leiste selbst, nicht `main`. */ main:has(> * .lotzwoo-contextbar), main:has(> .lotzwoo-contextbar) { margin-block-start: 0; } /* Die Zeile. `flex-wrap`, weil die Werte Kundendaten sind und jede Laenge haben koennen — „Wien 1100 — Hauptfiliale" steht neben „Abholmarkt". Die Hoehe haelt `min-height`: solange die Leiste eine Zeile bleibt, zentriert `align-items` den Inhalt darin. */ /* **`nowrap`, und zwar ohne Medienbedingung.** Der Entwurf, auf den sich der Auftraggeber festgelegt hat, sagt einen Satz, der keine Ausnahme kennt: „sechs Verdichtungsstufen, **keine einzige davon ein Umbruch**." Seine Buehne kennt deshalb gar kein `flex-wrap` — Flex ist von sich aus `nowrap`. Hier stand `wrap`, und der Umbruch war messbar: bei 900 px war die Leiste **92 px** hoch und bei 800 px **118 px**, weil erst die Bedienelemente und dann die Angaben selbst in die naechste Zeile rutschten (gemessen am 2026-08-17). Zwei Stufen weiter unten wurde das mit `nowrap` in einer Medienbedingung repariert — und damit nur unterhalb 700 px. Nachgeben duerfen die Angaben, nicht die Zeile: `min-width: 0` an den Faechern, Auslassungspunkte am Wert, feste Groesse an den Bedienelementen. Das steht gleich darunter und gilt jetzt ebenfalls auf jeder Breite. */ .lotzwoo-contextbar__inner { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--wp--preset--spacing--40); /* 50 statt 44 — vom Auftraggeber am 2026-08-26 angefordert. Es ist die einzige Stelle: die drei Medienstufen weiter unten regeln nur Rinne und Polster, keine Hoehe. **Was daran haengt, haengt gemessen daran.** Der Klebestapel des Sortiments rechnet mit `--lwb-ctx-h`, und die Zahl kommt aus einem ResizeObserver auf dieser Leiste (`b2b-ctxheight.js`) — Werkzeugleiste, Filterspalte und Matrix-Spaltenkopf ruecken von selbst 6 px nach. Der Vorgabewert `52px` in `b2b-shop.css` ist der Ausfallwert fuer den Fall, dass das Skript nicht laeuft, und bleibt, wie er ist. */ min-height: 50px; } /* **Die Auskunft fluchtet mit der Kopfzeile, die Flaeche laeuft durch.** Die Leiste steht auf zwei verschiedenen Arten im Dokument: im Sortiment zeichnet der Kurzcode sie **in** seinem eigenen Behaelter, auf Warenkorb, Konto und Favoriten haengt sie als Block `lotzwoo/context-slot` direkt in `.wp-site-blocks` — ausserhalb jeder Inhaltsspalte. Dort begann ihre Auskunft bei x = 16, waehrend der Seitenrahmen darum ganz woanders sass. **Ausgerichtet wird an der Kopfzeile, nicht am Seiteninhalt.** Die Leiste gehoert zum Kopf: sie klebt unter ihm, traegt seine Farbe und beantwortet dieselbe Frage wie er — *fuer wen und fuer wann gilt, was hier steht*. Ein erster Anlauf nahm die Inhaltsbreite (960 px) und liess sie auf 480 px beginnen; der Auftraggeber hat das am 2026-08-17 als „schmal" gemeldet und die Kopfzeile als Mass genannt. Gemessen ist die jetzt **x = 16, w = 1888** auf 1920 px, und die Leiste steht genau so. Die dunkle Flaeche laeuft weiterhin bis zum Fensterrand — das traegt der Schlagschatten mit `100vmax`, und daran aendert sich nichts. Begrenzt wird nur, wo der Inhalt steht. Im Sortiment greift die Regel nicht: dort liegt die Leiste im Kurzcode-Behaelter und fluchtet schon. */ .wp-site-blocks > .lotzwoo-contextbar .lotzwoo-contextbar__inner { box-sizing: border-box; max-width: var(--wp--style--global--wide-size); margin-inline: auto; padding-inline: var(--wp--preset--spacing--40); } /* `overflow: hidden` haelt die Angaben in der Leiste — waagrecht, und dafuer ist es da. Es klammert aber **in beiden Achsen**, und die untere Kante der Klammer ist die Unterkante des Kastens: eine Unterlaenge, die darueber hinausragt (das `g` in „Dienstag"), waere abgeschnitten. Das Paar Polster/negatives Aussenmass schiebt **nur die Klammerkante** um 3 px nach unten. Der Kasten wird innen groesser, sein Aussenmass bleibt gleich, also bewegt sich im Aufbau nichts — auch nicht die senkrechte Zentrierung, die am Aussenmass haengt. Nicht `overflow: clip` mit `overflow-clip-margin`: das lockert die Klammer in **allen** Richtungen, also auch waagrecht, und genau waagrecht soll sie halten. Nicht `overflow-y: visible`: eine Achse auf `hidden` rechnet die andere zu `auto` um, und `auto` macht den Kasten zum Scroll-Container — dieselbe Regel, an der `overflow-x: auto` weiter unten die Matrix-Kopfzeile gekostet hat. **Am 2026-08-27 gemessen und nicht reproduziert:** auf 14 Breiten von 1920 bis 360 px und auf Sortiment, Warenkorb und Konto ist das Bild mit und ohne diese Klammer byteweise gleich — hier schneidet sie heute nichts ab. Die drei Pixel sind die Zusicherung, dass sie es auch nicht kann. */ .lotzwoo-contextbar__facts { flex: 1 1 auto; min-width: 0; overflow: hidden; padding-bottom: 3px; margin-bottom: -3px; } .lotzwoo-contextbar__fact { min-width: 0; } .lotzwoo-contextbar__fact dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lotzwoo-contextbar__actions { flex: 0 0 auto; } /* Die Tatsachen als Beschreibungsliste: „Lieferort" ist der Begriff, der Ortsname die Beschreibung. Ein Screenreader liest das Paar zusammen, waehrend zwei nebeneinandergestellte `span` nur zwei Woerter waeren. Das ist der Teil, der aus der Kopf-Fassung gewonnen hat — das Aussehen kommt aus der Sortimentsfassung, der Aufbau von hier. */ .lotzwoo-contextbar__facts { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--wp--preset--spacing--40); margin: 0; } .lotzwoo-contextbar__fact, .lotzwoo-contextbar__unset { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); margin: 0; line-height: 1.25; } /* Der Hinweis ist ein `

`, und ein `

` bekommt in einer Block-Seite von ausserhalb dieser Datei Abstaende. Die Gruppenregel darueber setzt sie schon zurueck; diese Zeile sagt es fuer den einen Fall noch einmal, in dem die Leiste nur den Hinweis traegt und nichts daneben steht, was den Umbruch sichtbar machen wuerde. */ .lotzwoo-contextbar__unset { margin: 0; /* Darf schrumpfen: sonst drueckt eine lange Ueberschrift die Leiste auf 390 px ueber den Rand (Sammellauf 2026-09-23, `kontextleiste` Favoriten 378/464/492 px). */ min-width: 0; } /* Beschriftung ueber dem Wert, nicht daneben: so bleibt die Leiste eine Zeile hoch, auch wenn beide Werte lang sind. */ .lotzwoo-contextbar__pair { display: flex; flex-direction: column; min-width: 0; } .lotzwoo-contextbar__fact dt, .lotzwoo-contextbar__unset-title { font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--ink-300); white-space: nowrap; } /* Wie `__fact dd`: eine Zeile, und was nicht passt, endet in Auslassungspunkten statt im Ueberlauf. */ .lotzwoo-contextbar__unset-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .lotzwoo-contextbar__fact dd, .lotzwoo-contextbar__unset-body { margin: 0; font-size: var(--wp--preset--font-size--md); font-weight: 600; } .lotzwoo-contextbar.is-unset .lotzwoo-contextbar__unset-title { color: rgba(255, 255, 255, 0.75); } /* Ein Symbol steht nie allein: jedes sitzt neben seiner eigenen Beschriftung, ist deshalb `aria-hidden` und traegt keine Bedeutung, die der Text nicht schon traegt. `flex: none`, damit es bei knappem Platz nicht schmaler wird als sein viewBox — ein gequetschtes Symbol liest sich wie ein Fehler. Strichbreite und Fuellung stehen am Element (`Shop_Icons::inline()`), die Farbe hier. */ .lotzwoo-contextbar__icon { flex: none; color: var(--wp--preset--color--ink-300); } .lotzwoo-contextbar.is-unset .lotzwoo-contextbar__icon { color: rgba(255, 255, 255, 0.85); } .lotzwoo-contextbar__sep { width: 1px; align-self: stretch; min-height: 1.8em; background: rgba(255, 255, 255, 0.18); } /* Der Bestellschluss — das einzige Abzeichen der Leiste, und der einzige Wert mit eigener Farbe. Er steht **in** der Terminangabe und traegt keine eigene Beschriftung: „Bestellschluss 19.08.2026, 16:03" benennt sich selbst, ein `dt` daneben ergaebe das Wort zweimal. Am 2026-08-14 auf der Kontoseite so gemessen. Ein verstrichener sagt es im Wort („Bestellschluss vorbei") und nicht nur im Rot. */ .lotzwoo-contextbar__cutoff { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 0.5em; padding: 2px 8px; border-radius: 999px; background: var(--wp--preset--color--ok-50); color: var(--wp--preset--color--ok-500); font-size: var(--wp--preset--font-size--xs); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .lotzwoo-contextbar__cutoff--closed { background: var(--wp--preset--color--err-50); color: var(--wp--preset--color--err-500); } /* Der laufende Bestellschluss (2026-09-08, Plugin-Seite: `assets/js/b2b-cutoff.js`). Bis dahin kannte diese Leiste zwei Zustaende, offen und vorbei — ein Termin, der in zwanzig Minuten schliesst, sah aus wie einer in fuenf Tagen. Genau dieser Kunde ruft danach an und fragt, ob er noch bestellen darf. Gefaerbt wird ueber `data-lwb-cutoff-stage`, das Attribut, das das Skript fortschreibt. **Nicht ueber eine Klasse**: dasselbe Skript bedient die Warenkorbflaeche des Plugins, und deren Stylesheet benennt seine Klassen anders. Ein Attributselektor faerbt beide, ohne dass eines von beiden das andere kennen muss. Rot ab der letzten halben Stunde, und zwar dasselbe Rot wie „vorbei": was in zwanzig Minuten schliesst, verlangt dieselbe Aufmerksamkeit wie das, was gerade geschlossen hat. Eine dritte Farbe dafuer waere eine, die niemand gelernt hat. */ .lotzwoo-contextbar__cutoff[data-lwb-cutoff-stage="warn"] { background: var(--wp--preset--color--warn-50, #fdf3e3); color: var(--wp--preset--color--warn-500, #9a6107); } .lotzwoo-contextbar__cutoff[data-lwb-cutoff-stage="urgent"], .lotzwoo-contextbar__cutoff[data-lwb-cutoff-stage="late"] { background: var(--wp--preset--color--err-50); color: var(--wp--preset--color--err-500); } /* Die Restzeit steht hinter dem Zeitpunkt und traegt ihr Trennzeichen selbst — als `::before`, damit es mit ihr verschwindet. Ausserhalb des Warnfensters ist der Knoten leer (das Skript leert ihn), und ein Mittepunkt, der dann allein stehenbliebe, waere die Sorte Rest, die man erst auf einem Schirm sieht. */ .lotzwoo-contextbar__cutoff-rest:not(:empty)::before { content: " \00b7 "; } .lotzwoo-contextbar__cutoff .lotzwoo-contextbar__icon { color: currentColor; } /* Rechts steht, was man tun kann. `margin-inline-start: auto` haelt die Gruppe am rechten Rand, solange die Zeile nicht umbricht; darin steht zuerst, was die Seite selbst beisteuert (das Sortiment seinen Netto/Brutto-Umschalter), dann der Wechsler. */ .lotzwoo-contextbar__actions { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); margin-inline-start: auto; } /* Der Wechsler. Auf dunklem Grund ist ein Textknopf mit rotem Unterstrich nicht lesbar — die Geste des Fliesstext-Links, die ADR 004 sonst vorgibt, traegt hier nicht. Stattdessen dieselbe helle Umrandung, die die Sortimentsfassung seit AD-3 benutzt. */ .lotzwoo-contextbar__switch { box-sizing: border-box; display: inline-flex; align-items: center; height: var(--lotzwoo-contextbar-control-h, 34px); padding: 0 11px; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 6px; background: rgba(255, 255, 255, 0.16); font: inherit; font-size: var(--wp--preset--font-size--sm); font-weight: 600; color: var(--wp--preset--color--surface); cursor: pointer; } .lotzwoo-contextbar__switch:hover, .lotzwoo-contextbar__switch:focus-visible { background: rgba(255, 255, 255, 0.26); } /* **Der Knopf nimmt die Hoehe der Zeile, nicht seine eigene.** Die feste `height` darueber laesst ihn neben zweizeiligen Angaben mittig schweben; mit `height: 100%` steht seine Umrandung so hoch wie das, wozu sie gehoert. `min-height` haelt die 34 px als Untergrenze — sie ist die Trefferflaeche, nicht die Optik, und in einer einzeiligen Leiste ist `100%` kleiner. Der Elementname erhoeht die Spezifitaet gerade so weit, dass diese Regel die `height` oben schlaegt; alles andere am Knopf bleibt, wie es dort steht. */ button.lotzwoo-contextbar__switch { height: 100%; min-height: 34px; } /* ================================================================= Der Wechsler ist ein Winkel direkt hinter den Angaben — auf jeder Breite Entscheidung des Auftraggebers vom 2026-09-24. Bis dahin stand ueber 700 px ein Knopf „Wechseln" rechts aussen neben Stern und Warenkorb, und nur darunter galt, was AP-70 (B3) gebaut hatte: kein Kasten, ein Winkel, und ein Klick irgendwo auf Ort und Termin oeffnet den Waehler. Die schmale Fassung war die verstaendlichere — der Winkel steht bei dem, was er aendert, und nicht bei dem, was man sonst noch tun kann. Sie gilt jetzt ueberall. **Gebaut als Ueberlagerung, nicht als zweiter Ausloeser.** Die Zeile ist ein Raster mit drei Spalten: Angaben, Leerraum, Aktionen. Angabengruppe und Knopf liegen in **derselben** Zelle, der Knopf darueber und durchsichtig — die ganze Gruppe ist seine Flaeche, ohne dass etwas verschachtelt wird. Die Angaben sind eine `

`, und ein `