/* Decision-ID: gadget-palette-consolidation-staging-20260820 */ /* Erweitert: gadget-typo-rollen-geltungsbereich-20260822 */ /* Erweitert: gadget-umbruch-schmale-geraete-20260822 */ /* Gemeinsame Palette der Startseiten-Gadgets. */ :root { --ap-g-ink: #0F1A2E; --ap-g-muted: #3B4761; --ap-g-gold: #8A6D28; --ap-g-gold-soft: #E1CC98; --ap-g-surface: #FFFFFF; --ap-g-panel: #FAF7EF; --ap-g-border: #E0E8F5; --ap-g-border-einstiegsweg: #DCE4EF; /* Typo-Rollen der Gadgets. WARUM HIER: die Gadget-Stylesheets referenzieren sie als var(--small, 0.875rem) bzw. var(--eyebrow, 0.787rem), definiert waren sie aber nur in ap-card.css unter `body.page-id-539`. Auf jeder anderen Seite griff still der FESTE Fallback — gemessen am 22.08. auf Seite 486: 34 Verwendungen von --small, 25 von --eyebrow, alle fest bei 14px bzw. 12,59px ueber 320px und 1440px hinweg. Kurven uebernommen aus dem page-539-Block, damit beide Seiten dieselbe Skala fahren (Endpunkte der Divi-Light-Presets: Small 14->16px, Eyebrow 11,2->12,6px). rem-Anteil im Mittelwert ist Absicht: ohne ihn wirkt die Schriftgroessen- Einstellung des Browsers nicht (WCAG 1.4.4). */ --small: clamp(0.875rem, calc(0.8393rem + 0.1786vw), 1rem); --eyebrow: clamp(0.7rem, calc(0.675rem + 0.125vw), 0.7875rem); /* wertgleich zu den bisherigen Fallbacks: schliesst die Luecke, ohne das Bild zu aendern */ --s-2xs: 0.382rem; --s-3xs: 0.236rem; } /* Wortumbruch in den Gadgets — Ergaenzung zur nativen Divi-Loesung. WARUM UEBERHAUPT CSS: Divi-Module bekommen die Trennung nativ ueber ihre Presets (Attribut `hyphens` je Breakpoint, siehe Font.php:606). Die Gadgets sind KEINE Divi-Module, dort greift kein Preset — das ist die einzige verbleibende Ebene. BELEG: 22.08., 320px CSS-Breite bei 200% Schriftgroesse. Fuenf Gadget-Elemente wurden von einem Vorfahren mit overflow-x:hidden abgeschnitten, bis zu 110px: STRONG "Digitalisierung" endete bei 375, sein Container bei 265. Das ist Inhaltsverlust, WCAG 2.2 SC 1.4.10 — kein Schoenheitsfehler. WARUM NUR BIS 767px: auf breiten Fenstern trennt der Browser auch bei reichlich Platz; gemessen wurde daraus "Was Auf-traege bremst" in einer Ueberschrift. 767px ist Divis eigener Phone-Breakpoint, damit Gadgets und Module gleich schalten. WARUM [id^="tm-"]: gemessen am lebenden DOM — dieser Selektor erreicht alle fuenf betroffenen Elemente (tm-leistungskatalog, tm-kontakt). */ /* Buttons nie breiter als ihr Platz. Divi setzt inline `.et_pb_module.et_pb_button:not(.et_block_module)` auf `max-width: max-content` — der Button wird damit so breit wie sein ungebrochener Text, unabhaengig vom Container. Bei 200 % Schrift gemessen: Elterncontainer 200px, Button 282px, 22-31px ueber den Rand auf drei Seiten (WCAG 2.2 SC 1.4.10). `max-width: 100%` aendert nichts, wo der Platz reicht: der Button ist ohnehin shrink-to-fit, die Obergrenze greift erst im Engpass — dann deckelt sie, und `white-space: normal` laesst den Text umbrechen. Bewusst ohne Media-Query: der Engpass haengt an der Schriftgroesse, nicht an der Viewport-Breite. Eine Klasse mehr als die Divi-Regel (0,4,0). NICHT `min(max-content, 100%)` — gemessen: `min()` akzeptiert nur Laengen, `max-content` ist ein Keyword. Die Deklaration ist ungueltig und faellt still weg; im ausgelieferten CSS steht sie, im Browser wirkt sie nicht. */ .et_pb_module.et_pb_button.et_pb_button:not(.et_block_module) { max-width: 100%; } @media (max-width: 767px) { /* Ueberschriften ausgenommen (Operator-Entscheidung Arnold 2026-08-22): sie sind kurz genug zum Umbrechen, und ein Bruch mitten im Wort faellt in grosser Schrift sofort auf. Gemessen an der LIVE-Startseite bei 390 px, gerenderte Zeilen: "nachvollziehbar|en Abnahme." · "beweis|en, bevor die naechste beginnt." · "Der teuerste Interess|ent ... Verkaufsproz|ess wieder verliert." */ [id^="tm-"] :is(p, li, dt, dd, strong, em, span, a, button) { overflow-wrap: break-word; hyphens: auto; /* Mindestlaengen, sonst trennt es nach zwei Zeichen — gemessen: "be-vor". 6 3 3 = Wort ab 6 Zeichen, mindestens 3 davor, mindestens 3 danach. Firefox kennt das erst ab 137; aeltere Versionen trennen wie bisher. */ -webkit-hyphenate-limit-chars: 6 3 3; hyphenate-limit-chars: 6 3 3; } [id^="tm-"] :is(h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; /* ueberlange Woerter brechen weiter — nur ohne Strich */ hyphens: none; } /* Adressen und Code nie mit Trennstrich brechen — der Strich wird mitgelesen. Gemessen: hyphens:auto machte aus info@… ein "in-fo@…". */ [id^="tm-"] a[href^="mailto:"], [id^="tm-"] code, [id^="tm-"] kbd, [id^="tm-"] samp { hyphens: none; overflow-wrap: anywhere; } /* Rufnummern brechen an ihren eigenen Leerzeichen. "anywhere" hatte die letzte Ziffer allein in die naechste Zeile geschoben. */ [id^="tm-"] a[href^="tel:"] { hyphens: none; } /* Spaltenpolster in px deckeln. Das Polster ist rem-basiert und verdoppelt sich bei 200 % Schriftgroesse von 24 auf 48 px je Seite. Auf 320 px blieben dem Text dadurch 211 statt 259 px — Zeilen mit ein bis zwei Woertern. Kein Ueberlauf, keine Kennzahl schlug an; sichtbar war es nur am Bild. 24px ist exakt der bisherige Wert bei normaler Schrift, hier also KEINE Designaenderung — die Regel verhindert nur das Mitwachsen. Divi erzeugt dafuer `.et_pb_column_17, ...` mit clamp(1.5rem, 1rem + 1.5vw, 2.5rem) — gleiche Spezifitaet wie `.et_pb_column`, aber spaeter in der Kaskade, also gewinnt es. Deshalb eine Klasse mehr (0,2,0) statt !important. Der Wert ist das px-Aequivalent derselben Kurve bei 16px Wurzel: bei 320px ergeben beide 24px, bei 767px beide 27,5px. Bei normaler Schrift also rechnerisch identisch — nur das Mitwachsen auf 48px entfaellt. */ .et_pb_column.et_pb_column { padding-left: clamp(24px, 16px + 1.5vw, 40px); padding-right: clamp(24px, 16px + 1.5vw, 40px); } /* Tab-Leiste des Gadgets ap-alltagsnutzen umbrechen lassen. Original: `repeat(4, minmax(0px, 1fr))` — die Spalten duerfen auf 0 schrumpfen. Bei 200 % Schrift blieben je 50px, und "01 Angebot / 02 Anfragen / 03 Wissen / 04 Ueberblick" standen als senkrechte Buchstabenreihen. Messbar war nur die Kartenhoehe: 48px normal gegen 250px bei 200 %; Ueberlauf war 0. `auto-fit` mit einer Untergrenze in rem bricht genau dann um, wenn die Schrift waechst — bei normaler Schrift bleiben die vier Spalten unangetastet. Steht hier statt in alltagsnutzen.css, weil diese Datei uncommittete Aenderungen einer anderen Sitzung traegt (Single-Writer). Gehoert bei Gelegenheit dorthin. */ /* Umbruchschutz fuer Ueberschriften. Divi setzt `word-wrap: break-word` NUR bei hyphens="on" (Font.php:602-615). Seit die Ueberschriften-Presets auf "off" stehen, faellt der Schutz weg — gemessen: 282px Ueberlauf bei 320px/200% an einer H2 ausserhalb der tm-Anker. Steht bewusst ohne Anker-Einschraenkung, weil Presets global wirken. */ h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } .ap-alltagsnutzen .an-tabs.an-tabs { grid-template-columns: repeat(auto-fit, minmax(min(3.25rem, 100%), 1fr)); } }