/* --------------------------------------------------------------------- Hero-Feinschliff (14.09.2026) Sichtpruefung und Pixel-Kontrastmessung ueber 69 Seiten in zwei Breiten. Eigene Datei, geladen von mu-plugins/ds-hero-feinschliff.php nach der Child-style.css. Nicht in die style.css verschieben: dort arbeiten mehrere Sessions parallel. Details: ci/patches/2026-09-14-hero-feinschliff.md --------------------------------------------------------------------- */ /* 1. Das Customizer-CSS (Altbestand) rahmt jeden Link in Rich-Text-Modulen: #content .fl-rich-text p a { outline: auto !important; padding: 3px 7px; } Im Hero ergab das einen Kasten um die Autorenzeile (/bad/bad-mit-sauna/) und drueckte die Buttons auf /private-day-spa-konzepte/ auf 3px Innenabstand. Die Regel hat Spezifitaet (1,1,2), deshalb steht #content hier vorn. Der Fokusring fuer Tastaturnutzer bleibt ueber :focus-visible erhalten. */ #content .fl-row:has(.fl-col.ds-scrim) .fl-rich-text p a { outline: none !important; padding: 0; } #content .ds-hero-cta a.ds-btn { outline: none !important; padding: 14px 26px; } #content .fl-row:has(.fl-col.ds-scrim) .fl-rich-text p a:focus-visible, #content .ds-hero-cta a.ds-btn:focus-visible { outline: 2px solid #ffffff !important; outline-offset: 3px; } /* 2. Texte in der Hero-Row, aber ausserhalb der Verlaufsspalte. Die globale Autorenzeile (Modul 43695) setzt per Node-CSS color:#000000 und stand damit schwarz auf dunklem Holz (Kontrast 1,17). */ .fl-row:has(.fl-col.ds-scrim) .fl-col:not(.ds-scrim) .fl-module-rich-text .fl-rich-text, .fl-row:has(.fl-col.ds-scrim) .fl-col:not(.ds-scrim) .fl-module-rich-text .fl-rich-text * { color: #ffffff !important; text-shadow: 0 1px 3px rgba(0,0,0,.6); } .fl-row:has(.fl-col.ds-scrim) .fl-col:not(.ds-scrim) .fl-module-rich-text .fl-rich-text a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.45) !important; text-underline-offset: 3px; } /* 3. Lange Woerter in der H1 brachen mitten im Wort ohne Trennstrich ("VISUALISIERUN / G", "PLANUNGSREIHENF / OLGE"). Mit hyphens:auto trennt der Browser nach deutscher Silbentrennung (html lang="de"). Die Vorschau zeigte, dass ohne Grenze auch kurze Woerter getrennt werden ("SE-HEN", "TEU-ER"). Deshalb erst ab 14 Zeichen, mindestens 5 vor und nach dem Strich. */ .fl-row:has(.fl-col.ds-scrim) h1, .fl-row:has(.fl-col.ds-scrim) h1 .fl-heading-text { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 14 5 5; /* Safari kennt hyphenate-limit-chars nicht und trennte weiter "TEU-ER", "PLA-NEN", "DA-MIT". WebKit hat eigene Grenzen. Nach dem Strich 6 statt 5, weil WebKit einen nachgestellten Doppelpunkt mitzaehlt ("FRANK-FURT:"). Gemessen in WebKit auf 72 Seiten: Trennungen von Woertern unter 10 Buchstaben 103 auf 0, lange Komposita weiter mit Trennstrich. */ -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 6; } /* 4. Einheitliche Ausrichtung. Gemessen waren auf Mobil 34 von 55 Heroes gemischt (H1 zentriert, Eyebrow und Beweiszeile linksbuendig), auf Desktop standen Eyebrow und Beweiszeile teils zentriert unter linksbuendiger H1. Regel: Desktop alles linksbuendig, Mobil alles zentriert. */ @media screen and (min-width: 501px) { .fl-col.ds-scrim .ds-eyebrow, .fl-col.ds-scrim .ds-eyebrow *, .fl-col.ds-scrim .ds-beweis, .fl-col.ds-scrim .ds-beweis *, .fl-col.ds-scrim .fl-button-wrap { text-align: left !important; } } @media screen and (max-width: 500px) { .fl-col.ds-scrim h1, .fl-col.ds-scrim h1 .fl-heading-text, .fl-col.ds-scrim .ds-subline, .fl-col.ds-scrim .ds-subline .fl-heading, .fl-col.ds-scrim .ds-subline .fl-heading-text, .fl-col.ds-scrim .ds-eyebrow, .fl-col.ds-scrim .ds-eyebrow *, .fl-col.ds-scrim .ds-beweis, .fl-col.ds-scrim .ds-beweis *, .fl-col.ds-scrim .pp-breadcrumbs, .fl-col.ds-scrim .fl-button-wrap, .fl-col.ds-scrim .ds-hero-cta { text-align: center !important; } } /* 5. Kleine Schrift auf hellen Bildstellen: Eyebrow, Beweiszeile, Subline und Breadcrumb lagen auf 14 Seiten zwischen 2,1 und 4,46. Ein weicher Schatten direkt am Glyph hebt den Kontrast, ohne den Verlauf dunkler zu machen. */ .fl-col.ds-scrim h1, .fl-col.ds-scrim .ds-eyebrow, .fl-col.ds-scrim .ds-beweis, .fl-col.ds-scrim .ds-subline .fl-heading, .fl-col.ds-scrim .pp-breadcrumbs { text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 12px rgba(0,0,0,.45); } /* 6. Button-Paar CTA + Telefon: Auf 9 Seiten stand der Telefon-Button 52px hoeher als der CTA daneben, weil die beiden Module unterschiedliche Aussenabstaende tragen. Auf Desktop beide auf dieselbe Oberkante. */ @media screen and (min-width: 501px) { .fl-col.ds-scrim .fl-col-group .fl-col .fl-module-button > .fl-module-content { margin-top: 20px !important; margin-bottom: 10px !important; } } /* 7. Claim-Zeilen als h6 (/badplanung-koeln/, /badplanung-bonn/): Montserrat 200 und mobil 1,6 bis 1,8em. Auf 390px zerriss "PRODUKTAUSWAHL" in "PRODUKTAUSWA / HL", die duenne Strichstaerke war auf dem Foto kaum lesbar. */ .fl-col.ds-scrim h6.fl-heading, .fl-col.ds-scrim h6.fl-heading .fl-heading-text { font-weight: 400 !important; } @media screen and (max-width: 500px) { .fl-col.ds-scrim h6.fl-heading, .fl-col.ds-scrim h6.fl-heading .fl-heading-text { font-size: 17px !important; line-height: 1.5 !important; letter-spacing: 1px !important; -webkit-hyphens: auto; hyphens: auto; /* Grenzen wie bei der H1 in Abschnitt 3, auch fuer Safari */ hyphenate-limit-chars: 14 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 6; } } /* 8. Verlauf an den Raendern (Nachmessung nach dem Datenpatch, 14.09.2026) Die letzten Restbefunde lagen alle in den Ausblendzonen der Maske: die letzte Zeile einer Spalte in den unteren 40px (Blog Desktop 3,73, Kuechen mobil 2,67, Schlafzimmer mobil 2,98) und der Breadcrumb in den oberen 40px (Herrenzimmer 3,75). Unten: 32px Innenabstand, damit der Verlauf unter die letzte Zeile reicht. Mobil: unteres Ende 0,6 statt 0,42. Oben: siehe Abschnitt 10. Getestet und verworfen: Verlauf 120px weiter nach rechts, identische Messwerte. */ .fl-col.ds-scrim > .fl-col-content { padding-bottom: 32px; } @media screen and (max-width: 500px) { .fl-col.ds-scrim > .fl-col-content::before { background: linear-gradient(180deg, rgba(10,12,13,.74) 0%, rgba(10,12,13,.7) 70%, rgba(10,12,13,.6) 100%); } } /* 9. /regionen/badplanung-koeln/: Das Label "Direkt mit Torsten Mueller sprechen" steht ueber dem Telefon-Button und schob ihn 19px unter den CTA daneben. Beide Spalten dieser Button-Gruppe unten buendig. */ @media screen and (min-width: 941px) { .fl-col-group.fl-node-9r4fvmyzt0k2 { display: flex; align-items: flex-end; } } /* 10. Maske ab 941px: rechte Kante weich, Oberkante 40px (14.09.2026) Rechts: Der Verlauf laeuft unter 280deg, also 10 Grad geneigt. An seiner rechten Kante ist er dadurch oben noch 0,2 bis 0,35 deckend und endete als harte senkrechte Linie. Gemessen am Verlaufsende: Helligkeitssprung 17 bis 32 Stufen zwischen zwei Pixelspalten, ohne Verlauf 2 bis 5 (Anfrage, Beratungstermin, Partnerschaften). Eine zweite Maskenebene blendet die letzten 80px weich aus, die Deckkraft im Textbereich bleibt gleich. Oben: 40px wie im Child-Theme. Eine Verkuerzung auf 12px fuer alle Seiten war kurzzeitig live und erzeugte auf 34 Seiten eine harte Oberkante, weil die Textspalte dort 27 bis 300px unter der Row-Oberkante im Bild beginnt. 12px nur fuer die Verlaufsspalte der sechs Interior-Seiten (Node 5877552f62bed): Breadcrumb ganz oben, Spalte gemessen buendig unter der dunklen Trust-Bar (Abstand 0 bei 1024, 1280 und 1440). */ @media screen and (min-width: 941px) { .fl-col.ds-scrim > .fl-col-content::before, .fl-col.ds-scrim-light > .fl-col-content::before { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%), linear-gradient(to left, transparent 0, #000 80px); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%), linear-gradient(to left, transparent 0, #000 80px); mask-composite: intersect; } } @media screen and (min-width: 981px) { .fl-col.ds-scrim.fl-node-5877552f62bed > .fl-col-content::before { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 40px), transparent 100%), linear-gradient(to left, transparent 0, #000 80px); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 40px), transparent 100%), linear-gradient(to left, transparent 0, #000 80px); mask-composite: intersect; } } /* 11. Hero-Buttons einzeilig (14.09.2026) /3d-bad-visualisierung-luxus-private-spa/: Das Button-Modul traegt 48 Prozent Aussenabstand rechts. Seit einer Layoutaenderung am 14.09.2026 (Hero-Text 20px weiter innen) blieben ihm 197px, "Erstgespraech buchen" brach auf zwei Zeilen um (66 statt 48px hoch). Mit und ohne diese Datei gemessen identisch, also nicht durch sie verursacht. Ab 501px bleibt die Beschriftung einzeilig. */ @media screen and (min-width: 501px) { .fl-col.ds-scrim .fl-button-wrap a.fl-button { white-space: nowrap; } }