/** * Flora & Flow – Basis-Layer * * Gestalterische Richtung: Editorial-Apotheke. Die Ruhe eines gut gesetzten * Fachjournals statt Wellness-Klischee. Die drei Logo-Elemente (Sprosse, * Schale, Welle) sind die durchgehende Formensprache, nicht nur ein Icon. * * Alle Werte kommen aus theme.json (--wp--preset--*, --wp--custom--*). * Hier stehen nur Dinge, die theme.json nicht ausdruecken kann. * * Struktur: * 1. Grundlage & Papier * 2. Typografischer Rhythmus * 3. Header * 4. Footer * 5. Buttons * 6. Karten * 7. Formulare * 8. Sektionen & Markenmotive * 9. FAQ / Akkordeon * 10. Slider-Basis * 11. Bewegung * 12. Barrierefreiheit & Fokus */ /* ========================================================================== * 1. Grundlage & Papier * ========================================================================== */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* Feines Papierkorn auf dem Hafermilch-Grund. Liegt als Hintergrundbild * hinter allem Inhalt — kein Overlay, keine z-index-Konflikte, keine * Einbusse an Textschaerfe. */ body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; } ::selection { background: var(--wp--preset--color--cta); color: var(--wp--preset--color--contrast); } /* Sprungziele duerfen nicht unter dem Sticky-Header landen. */ :target, [id] { scroll-margin-top: 7.5rem; } /* Zahlen in Tabellen und Preisen laufen auf gleicher Breite. */ .ff-tnum, table { font-variant-numeric: tabular-nums; } /* ========================================================================== * 2. Typografischer Rhythmus * * Der haeufigste Fehler bei Block-Themes: ein globaler blockGap fuer alles. * Absaetze brauchen weniger Luft als Sektionen, und eine Ueberschrift * gehoert enger an ihren Text als an den Absatz davor. * ========================================================================== */ /* Fliesstext-Bereiche: enge Absatzfolge, Ueberschriften mit Vorlauf. */ .ff-prose > * + * { margin-block-start: 1.15em; } .ff-prose > * + :is(h2, h3, h4) { margin-block-start: 2.2em; } .ff-prose > :is(h2, h3, h4) + * { margin-block-start: 0.7em; } .ff-prose :is(ul, ol) { padding-left: 1.35em; } .ff-prose li + li { margin-block-start: 0.45em; } /* Lead-Absatz direkt unter einer Ueberschrift. */ .ff-lead { font-size: var(--wp--preset--font-size--lg); line-height: var(--wp--custom--line-height--lead); color: var(--wp--preset--color--body); max-width: 34rem; } /* Auf dunkler Flaeche wuerde das fest gesetzte Salbei die geerbte * Schlagrahm-Farbe ueberschreiben — Ergebnis waere Gruen auf Gruen. */ .is-style-section-dark .ff-lead, .ff-cta .ff-lead { color: color-mix(in srgb, var(--wp--preset--color--base-2) 88%, transparent); } /* Zentrierte Sektionsintros bekommen ihre Begrenzung mittig — und mehr * Breite als die 34rem des Fliesstextmasses. * * 34rem = 544px liess den Intro-Absatz auf /fuer-fachpersonen/ schmaler * werden als die Ueberschrift direkt darueber (736px): vier Zeilen unter * einer zweizeiligen Headline, mittig, sichtbar zu eng. 34rem ist ein * Lesemass fuer laufenden Text in einer Spalte, kein Mass fuer einen * zentrierten Anreisser. * * 55rem = 880px kommt aus dem Entwurf selbst: Fuer-Fachpersonen.dc.html * setzt die zentrierte Intro-Spalte auf `max-width:880px`, und Eyebrow, * Ueberschrift, Lead und Leitsatz fuellen sie gemeinsam. Der Leitsatz stand * hier schon richtig auf 880px — der Lead hing daneben auf 544px. * * Zwischenschritt am 17.08.2026 waren 620px; das ist der Hero-Lead-Wert aus * Material/entwurf-sollwerte.md und fuer diese Spalte ebenfalls zu schmal. * Linksbuendige Leads behalten die 34rem des Fliesstextmasses. */ .has-text-align-center.ff-lead { margin-inline: auto; max-width: min(55rem, 100%); } /* Playfair setzt Ziffern als Mediaevalziffern — in Kennzahlen stoert das. */ .ff-stat__number, .ff-price { font-variant-numeric: lining-nums tabular-nums; } /* Kursive Zitate in Playfair brauchen minimal mehr Laufweite. */ em, i { letter-spacing: 0.01em; } /* Sehr lange Woerter (Fachbegriffe) duerfen umbrechen statt zu ueberlaufen. */ h1, h2, h3, h4 { overflow-wrap: break-word; text-wrap: balance; } p, li { text-wrap: pretty; } /* ========================================================================== * 3. Header * ========================================================================== */ /* Der Header liegt auf Seiten mit Foto-Hero transparent IM Bild — die * Mechanik dafuer steht vollstaendig in Abschnitt 8i * (`.ff-has-overlay-header`, Body-Klasse aus inc/setup.php): absolute * Position, eigener Schleier fuer die Navigation, Trennlinie darunter. * * Hier stand am 13.08. kurz eine zweite Fassung davon — transparenter Grund, * `.ist-geklebt` beim Scrollen, eine eigene Haarlinie, eine negative * Aussenkante am Hero. Alles doppelt, weil ich nicht nachgesehen hatte. * Entfernt; dieselbe Sorte Fehler wie die zweite Haekchenliste. * * Die Regel hier gilt fuer Seiten OHNE Overlay-Header: Blog, Archiv, 404. */ .ff-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); box-shadow: var(--wp--preset--shadow--header); } /* Offenes Handymenue: backdrop-filter macht die Kopfzeile zum Bezugsrahmen * fuer position:fixed, das Menue war dann nur so hoch wie die Kopfzeile * (Termin buchen, Blog … – gemeldet 01.10.2026). WordPress setzt beim * Oeffnen `has-modal-open` auf . */ html.has-modal-open .ff-header { backdrop-filter: none; -webkit-backdrop-filter: none; } .ff-header__bar { font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.01em; } .ff-header__bar-inner { display: flex; align-items: center; gap: var(--wp--preset--spacing--md); max-width: var(--wp--custom--grid--content); margin-inline: auto; padding: 0.4rem var(--wp--preset--spacing--gutter); } .ff-header__bar-info { gap: var(--wp--preset--spacing--md); align-items: center; } .ff-header__bar p { margin: 0; } .ff-header__bar a { color: inherit; text-decoration: none; } .ff-header__bar a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Vertrauenshinweis mit Haekchen — Trust-Signal, kein Button-Look. */ .ff-header__badge::before { content: "✓"; margin-right: 0.45em; color: var(--wp--preset--color--cta); font-weight: 700; } .ff-header__social { gap: 0.125rem !important; } /* --- 3b. Hauptzeile: Navigation | Logo mittig | Navigation + CTA --- */ .ff-header__inner { display: grid; /* minmax(0, 1fr), nicht 1fr: `1fr` heisst `minmax(auto, 1fr)` — die * Spalte darf also breiter werden als ihr Anteil, wenn der Inhalt nicht * hineinpasst. Genau das passierte zwischen 1080 und 1100 px: Die * rechte Haelfte dehnte sich, die linke blieb, und das angeblich * mittige Logo stand 18 px daneben. Mit einer harten Untergrenze von 0 * sind beide Spalten unter allen Umstaenden gleich breit. */ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--wp--preset--spacing--md); max-width: var(--wp--custom--grid--content); margin-inline: auto; /* SENKRECHT 18 OBEN, 14 UNTEN, direkt aus SiteNav.dc.html * (`padding:18px 40px 14px`). * * Hier standen 8px oben und unten. Die Bildmarke sass damit 8px unter * der Blattkante und wirkte oben eingeklemmt; gemeldet von Lucas am * 19.08.2026. Der Zustand ist aelter als dieser Tag, er steht auch auf * den Screens vom 17.08. * * Die Sorge des alten Kommentars, die klebende Leiste wuerde auf 141px * wachsen, traf auf die frueher groessere Bildmarke zu. Gerechnet mit * dem heutigen Stand: 18 + 89 (Marke 74 plus Wortmarke) + 14 = 121px, * unter den 135px, die der Entwurf fuer die SiteNav vorsieht. * * WAAGRECHT bleibt der Gutter (56px) statt der 40px des Entwurfs: Die * Sektionen darunter stehen ebenfalls auf 56px, und eine Kopfleiste, die * 16px weiter aussen beginnt als der Inhalt, sitzt sichtbar schief. */ padding: 1.125rem var(--wp--preset--spacing--gutter) 0.875rem; } /* 28 px links und rechts des Logos, wie im Entwurf. Der globale Abstand * waere 24 px und damit knapper, als die Sperrfassung Luft braucht. */ .ff-header__inner { column-gap: 28px; } /* WordPress setzt seinen Fliess-Blockabstand als margin-block-start auf jedes * zweite Kind der Gruppe. Im Raster addiert sich diese Margin zur Zeilenhoehe: * Die Leiste war dadurch 24 px hoeher, als ihr hoechstes Element verlangt — * ohne dass irgendwo ein Abstand gesetzt waere. Die Hoehe der Kopfzeile regelt * allein ihr Innenabstand. */ .ff-header__inner > * { margin-block: 0; } /* BEIDE HAELFTEN RUECKEN ANS LOGO, nicht an die Aussenkanten. * * Vorher stand hier `start` links und `end` rechts — beide Bloecke also an * den Rand gedrueckt. Das Raster ist damit zwar rechnerisch mittig (beide * 1fr-Spalten gleich breit), das Logo steht optisch aber schief: Die linke * Navigation ist rund 40 px schmaler als die rechte Haelfte mit dem * CTA-Knopf, und dieser Unterschied landet komplett als Luft zwischen * linker Navigation und Logo. Rechts klebt der Knopf am Logo, links klafft * eine Luecke — genau der schiefe Eindruck. * * Der Entwurf loest es andersherum (SiteNav.dc.html): `justify-content: * flex-end` auf der linken Gruppe, Standard auf der rechten. Beide Gruppen * fassen das Logo mit demselben Abstand ein; die ungleiche Breite landet * aussen, wo sie niemandem auffaellt. */ .ff-header__nav--left { justify-self: end; } .ff-header__end { justify-self: start; gap: var(--wp--preset--spacing--md); align-items: center; } /* Doppelter Klassen-Selektor: WordPress druckt seine Block-Styles * (.wp-block-navigation{display:flex}) nach dem Theme-Stylesheet aus und * wuerde ein einfaches .ff-header__nav--mobile{display:none} ueberschreiben. */ .ff-header .ff-header__nav--mobile { display: none; } /* Die Farbe gehoert an den CONTAINER, nicht an den Link. * * WordPress-Core liefert * .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content { color: inherit } * — mit doppelter Klasse und damit Spezifitaet (0,3,0). Jede Regel auf * `.ff-header__nav a` (0,2,1) verliert dagegen, egal wie spaet sie steht. * Da Core auf `inherit` setzt, ist der Container der richtige Ort: von dort * holt sich der Link die Farbe ohne Spezifitaetskampf. */ .ff-header__nav { color: var(--wp--preset--color--contrast); } /* 16.5px / Gewicht 400 — Entwurf (SiteNav.dc.html). Vorher lief die * Navigation auf der SM-Stufe mit, die inzwischen 15.5px misst. */ .ff-header__nav a { position: relative; color: var(--wp--preset--color--contrast); font-size: 16.5px; font-weight: 400; text-decoration: none; white-space: nowrap; padding-block: 0.35rem; } /* Aktiver und angesteuerter Punkt bekommen eine feine Unterstreichung, * die aus der Mitte waechst — Farbe allein reicht nicht als Signal. */ .ff-header__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transition: transform var(--wp--custom--transition--base); } .ff-header__nav a:hover::after, .ff-header__nav a[aria-current="page"]::after, .ff-header__nav .current-menu-item > a::after { transform: scaleX(1); } .ff-header__nav a[aria-current="page"] { color: var(--wp--preset--color--accent-dark); } /* --- 3c. Logo (Bildmarke + Wortmarke) --- */ /* SEIT 10.09.2026 EIN SVG FUER MARKE UND WORTMARKE (Canva-Export). * --ff-marke ist jetzt die Breite des ganzen Logos; die Wortmarke steht darin * 0,99 x so breit wie die Marke, die Versalhoehe betraegt 0,076 x. * * Header 84 px: Die Versalhoehe landet bei 6,4 px, knapp unter der * bisherigen Schrift (7,4 px) — mehr gibt das Logo bei dieser Breite nicht * her, ohne die Kopfleiste zu erhoehen. Footer 104 px, Versalhoehe 7,9 px. */ .ff-header__brand { --ff-marke: 84px; } .ff-footer__brand { --ff-marke: 104px; } .ff-header__brand { justify-self: center; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--wp--preset--color--contrast); line-height: 1; } /* Der Gruppen-Block bringt seinen globalen Blockabstand mit und setzt ihn als * margin-block-start auf jedes zweite Kind — hier also 24 px zusaetzlich zum * Flex-Abstand. Der Abstand der Sperrfassung gehoert an EINE Stelle. */ .ff-header__brand > *, .ff-footer__brand > * { margin-block: 0; } .ff-header__mark { display: block; width: var(--ff-marke); /* Der Container war 98 px hoch, obwohl die Grafik nur 59 px misst. Die * Differenz war kein Abstand, sondern ein Zeilenkasten: Zwischen * und steht im Markup ein Zeilenumbruch, und dieser Textknoten * spannt eine Zeile mit voller Schrifthoehe auf. Das SVG steht als Block * darueber, der Kasten bleibt trotzdem stehen — 23 px Luft, die niemand * gesetzt hat und die die Kopfleiste auf 138 px trieben. */ line-height: 0; transition: transform var(--wp--custom--transition--base); } .ff-header__brand:hover .ff-header__mark { transform: translateY(-2px); } .ff-header__mark svg, .ff-footer__mark svg { display: block; width: 100%; height: auto; } /* Die Bildmarke allein steht nur im Handy-Header (siehe Abschnitt 3e). */ .ff-header__zeichen { display: none; line-height: 0; } .ff-header__zeichen svg { display: block; width: 100%; height: auto; } /* --- 3d. Variante: Header transparent ueber einem Hero-Bild --- * Nicht per Default aktiv. Der Verlauf ist ein Scrim, damit heller * Navigationstext auch ueber hellen Bildpartien die AA-Schwelle haelt. */ .ff-header--over-hero { position: absolute; inset: 0 0 auto; background: linear-gradient( 180deg, color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent) 0%, transparent 100% ); backdrop-filter: none; box-shadow: none; } .ff-header--over-hero .ff-header__bar { background: transparent !important; } .ff-header--over-hero .ff-header__brand, .ff-header--over-hero .ff-header__nav a { color: var(--wp--preset--color--base-2); } /* --- 3e. Burger-Overlay --- */ .ff-header .wp-block-navigation__responsive-container-open, .ff-header .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--contrast); } .ff-header .wp-block-navigation__responsive-container.is-menu-open { padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--gutter); } .ff-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: var(--wp--preset--spacing--md); padding-top: var(--wp--preset--spacing--lg); } .ff-header .wp-block-navigation__responsive-container.is-menu-open a { font-family: var(--wp--preset--font-family--display); font-size: 1.625rem; letter-spacing: var(--wp--custom--letter-spacing--display); } .ff-header .wp-block-navigation__responsive-container.is-menu-open a:hover { color: var(--wp--preset--color--accent-dark); } .ff-header .wp-block-navigation__responsive-container.is-menu-open a::after { display: none; } /* --- 3f. Schmal: Burger | Logo | CTA --- * * Umschaltpunkt 1120 px, vorher 900 px. Rechnung: Die rechte Haelfte * (drei Menuepunkte plus CTA-Knopf) misst 412 px, die linke 370 px. Da * beide Rasterspalten gleich breit sein muessen, damit das Logo mittig * steht, braucht die Leiste 2 x 412 + 81 Logo + 2 x 28 Abstand + Seitenrand * — zusammen rund 1060 px. Darunter wurde der Knopf zweizeilig. * * 1120 statt der errechneten 1060: Bei 1080 und 1100 px war der Platz zwar * rechnerisch da, aber ohne Reserve — der Knopf stand dann direkt an der * Spaltenkante. Nachgemessen ueber alle Breiten von 360 bis 1920. * * Der Entwurf beschreibt ohnehin nur den Desktop (min-width:1100px). */ @media (max-width: 1119.98px) { .ff-header__bar { display: none; } /* `1fr auto 1fr` statt `auto 1fr auto`: Bei `auto 1fr auto` bestimmen * Burger (24 px) und CTA (rund 150 px) die Seitenspalten — und weil sie * verschieden breit sind, sitzt die mittlere Spalte nicht in der Mitte. * Das Logo stand dadurch rund 70 px zu weit links. Zwei gleich breite * 1fr-Spalten halten es unabhaengig vom Inhalt auf der Mittellinie. * minmax(0, …), damit die Spalten auch unter ihre Inhaltsbreite duerfen * und nichts ueberlaeuft. */ .ff-header__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--wp--preset--spacing--sm); } /* SEHR SCHMALE SCHIRME: Spalten nach Inhalt, nicht gleich breit. * * `minmax(0, 1fr)` erlaubt den Aussenspalten, unter ihre Inhaltsbreite * zu schrumpfen — das war fuer die Mittigkeit des Logos gedacht. Auf * 390px misst der Termin-Knopf aber 134px bei 100px Spaltenbreite und * lief 22px in die Wortmarke hinein. * * Ab hier zaehlt Nichtueberlappen mehr als die Mittellinie: Die Spalten * nehmen ihre Inhaltsbreite, der Rest verteilt sich dazwischen. Das * Logo steht dann nicht exakt mittig — bei 24px Burger links und 134px * Knopf rechts geht beides nicht gleichzeitig. */ @media (max-width: 30em) { .ff-header__inner { grid-template-columns: auto auto auto; justify-content: space-between; column-gap: 0.75rem; } .ff-header__brand { justify-self: center; } } /* Der CTA gehoert hier an die Aussenkante — anders als im Desktop-Raster, * wo beide Haelften das Logo einfassen. */ .ff-header__end { justify-self: end; } .ff-header .ff-header__nav--left, .ff-header .ff-header__nav--right { display: none; } .ff-header .ff-header__nav--mobile { display: flex; justify-self: start; } /* Das ganze Logo haette hier eine Wortmarke von 3 px Versalhoehe. * Also nur die Bildmarke; der Name steht im aria-label des Links. */ .ff-header__mark { display: none; } .ff-header__zeichen { display: block; width: 40px; } /* Kompakterer CTA, damit das mittige Logo nicht aus der Mitte rutscht. */ .ff-header__cta .wp-block-button__link { padding: 0.875rem 1.125rem; font-size: 0.6875rem; } } /* Der CTA bleibt einzeilig. Bricht er um, waechst die Leiste und das Logo * sitzt nicht mehr auf der Mittellinie der Menuepunkte. */ .ff-header__end .wp-block-button__link { white-space: nowrap; } /* ========================================================================== * 4. Footer * ========================================================================== */ /* Der globale Block-Gap setzt sonst helle Flaeche zwischen letzter Sektion * und Footer — der Footer soll buendig anschliessen. */ .wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; } /* HELLER FOOTER (Entwurf Footer.dc.html, 13.08.2026). Vorher eine dunkle * Rosmarin-Flaeche. Er liegt jetzt auf Surface Sand — eine Spur tiefer als * die Hafermilch der Seite — und grenzt sich zusaetzlich mit einer Haarlinie * ab. Gemessene Textkontraste auf Sand #EDE8DC: * Salbei #56624C 5,29:1 * Matcha dkl. #267369 4,98:1 * Rosmarin #24301E 11,79:1 */ /* Masse aus Footer.dc.html — 15.08.2026 nachgezogen. * Polster 90/56/36, Oberkante als Haarlinie in Leinsamen 25%. */ .ff-footer { /* Quer der Gutter-Token statt fester 3.5rem (21.08.2026). * * 56px stehen so im Entwurf — der ist `min-width:1100px`. Fest gesetzt * frassen sie auf einem 360px-Schirm 112 der 360 Pixel, also fast ein * Drittel: Der Footer stand deutlich schmaler als der Seitenkoerper * darueber, und der Einwilligungstext im Newsletter-Kasten quetschte * sich in eine 174px-Saeule ueber neun Zeilen. * * Der Token laeuft von 20px bis 56px — am oberen Ende also derselbe * Wert wie im Entwurf, auf dem Handy derselbe wie im uebrigen Layout. */ padding: 5.625rem var(--wp--preset--spacing--gutter) 2.25rem !important; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--muted) 25%, transparent); } /* Vier Spalten im Verhaeltnis 1.5 / 1 / 1 / 1.3, Abstand 64px — der * Entwurf gibt der Markenspalte mehr Raum und der Kontaktspalte etwas * mehr als den beiden Linklisten. Als Columns-Block lief alles gleich * breit mit 21.6px Abstand. */ @media (min-width: 48em) { .ff-footer__cols.ff-footer__cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 4rem; } .ff-footer__cols > * { flex-basis: auto !important; margin: 0; } } /* Links und Adresse 14.5px — vorher liefen sie auf Fliesstextgroesse mit. */ .ff-footer__cols :is(a, p, li, div) { font-size: 0.90625rem; } .ff-footer__cols .ff-footer__heading { font-size: 1.1875rem; /* 19px */ } .ff-footer a { color: inherit; text-decoration: none; transition: color var(--wp--custom--transition--base); } /* Minze als Hover-Farbe funktionierte auf der dunklen Flaeche. Auf Sand * liegt sie bei 1,6:1 — hier uebernimmt Rosmarin. */ .ff-footer a:hover { color: var(--wp--preset--color--contrast); } /* Dasselbe Logo-SVG wie im Header, nur groesser (siehe --ff-marke). */ .ff-footer__brand { display: inline-flex; flex-direction: column; align-items: flex-start; margin-bottom: var(--wp--preset--spacing--md); line-height: 1; } .ff-footer__mark { display: block; width: var(--ff-marke); line-height: 0; color: var(--wp--preset--color--contrast); } /* Spaltentitel in Playfair statt gesperrten Versalien — so der Entwurf. Die * kleinen Versalien lasen sich auf der dunklen Flaeche als Etikett; auf der * hellen Flaeche traegt die Display-Schrift den Rhythmus der Seite weiter. */ .ff-footer__heading { font-family: var(--wp--preset--font-family--display); font-weight: 400; color: var(--wp--preset--color--contrast); margin-bottom: 0.25rem; } .ff-footer__list { list-style: none; padding-left: 0; display: grid; gap: 0.55rem; } /* Social als Textreihe. Matcha Dunkel liegt auf Sand bei 4,98:1 und ist als * einzige farbige Stelle im Footer sofort als Link erkennbar. */ /* Runde Icon-Knoepfe statt Textlinks — Masse aus Footer.dc.html: * 40px, 1px Rand in Matcha 40%, Zeichen 19px, Hover fuellt mit Minze und * setzt das Zeichen auf Rosmarin. */ .ff-footer__social { display: flex; flex-wrap: wrap; gap: 0.875rem; /* 14px */ margin-top: var(--wp--preset--spacing--md); } .ff-footer__social a { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent); border-radius: 50%; color: var(--wp--preset--color--accent); transition: background var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base); } .ff-footer__social a:hover, .ff-footer__social a:focus-visible { background: var(--wp--preset--color--cta); border-color: var(--wp--preset--color--cta); color: var(--wp--preset--color--contrast); } .ff-footer__social svg { display: block; } /* --- Newsletter-Kasten --- * Schlagrahm-Karte auf der Sandflaeche, wie im Entwurf. Text links, Feld und * Knopf rechts; unter 48em stapeln beide. */ .ff-footer__news { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--lg); margin-top: var(--wp--preset--spacing--xl); /* 28/36 ab rund 800px, darunter enger — der Kasten steht sonst mit * 72px Polster auf einer 320px breiten Flaeche. */ padding: 1.75rem clamp(1.25rem, 5vw, 2.25rem); background: var(--wp--preset--color--base-2); border: 1px solid color-mix(in srgb, var(--wp--preset--color--muted) 25%, transparent); border-radius: 1.125rem; /* 18px */ } .ff-footer__news > * { margin-block: 0; } .ff-footer__news-text { flex: 1 1 17rem; } .ff-footer__news-text .ff-footer__heading { margin-bottom: 0.25rem; } .ff-footer__news-form { flex: 1 1 20rem; } .ff-footer__news-zeile { display: flex; flex-wrap: wrap; gap: 0.625rem; } .ff-footer__news-zeile input[type="email"] { flex: 1 1 12rem; min-width: 0; } .ff-footer__news-zeile button { flex: 0 0 auto; } /* Die Einwilligung steht klein unter dem Feld — sie muss lesbar sein, darf * den Kasten aber nicht dominieren. */ .ff-footer__news-check { margin-top: 0.75rem; font-size: var(--wp--preset--font-size--xs); line-height: 1.5; } .ff-footer__news-check a { text-decoration: underline; text-underline-offset: 2px; color: var(--wp--preset--color--accent-dark); } .ff-footer__sep { /* WP setzt Trenner ohne Stil-Variante auf feste 100px Breite. */ width: 100%; max-width: none; border-color: color-mix(in srgb, var(--wp--preset--color--muted) 40%, transparent) !important; margin-top: var(--wp--preset--spacing--xl); margin-bottom: var(--wp--preset--spacing--md); } /* Fusszeile: eigene Trennlinie und Abstaende nach dem Entwurf * (40px Abstand, 24px Polster, Haarlinie in Leinsamen 30%). */ .ff-footer__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--muted) 30%, transparent); } .ff-footer__legal p { margin: 0; font-size: 0.84375rem; /* 13.5px */ } /* Rechtslinks muessen als Links erkennbar sein — im Copyright-Absatz * unterscheiden sie sich sonst durch nichts vom Fliesstext. */ .ff-footer__legal-links a { text-decoration: underline; text-underline-offset: 3px; } .ff-footer__nav a { font-weight: 400; } /* Die Angebots-Spalte ist ein Navigations-Block, die Wissens-Spalte eine * Liste. Ohne diese Zeile stehen die beiden Spalten mit unterschiedlichem * Zeilenabstand nebeneinander — der Navigations-Block bringt den globalen * Block-Gap mit. */ .ff-footer__nav .wp-block-navigation__container { gap: 0.55rem; } /* ========================================================================== * 5. Buttons * ========================================================================== */ /* KEINE VERSALIEN, 16.08.2026. * * Hier stand `text-transform: uppercase` — jeder Knopf der Seite lief in * Grossbuchstaben. Der Entwurf setzt sie durchgehend normal: „Termin * buchen", „Nachricht senden", „Kostenloses Kennenlernen buchen". * * Versalien waren meine Zutat aus dem CI-Dokument, das sie fuer Labels * vorsieht — nicht fuer Knopfbeschriftungen. Bei laengeren Beschriftungen * („NACHRICHT SENDEN") wirkt der Knopf dadurch lauter und breiter als * gemeint. */ .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; text-transform: none; transition: background-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base), transform var(--wp--custom--transition--base); } .wp-block-button__link:hover { transform: translateY(-1px); } .wp-block-button__link:active { transform: translateY(0); } /* Secondary: Outline Rosmarin. */ .is-style-secondary .wp-block-button__link { background: transparent; color: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--contrast); padding-top: calc(1.0625rem - 1px); padding-bottom: calc(1.0625rem - 1px); } .is-style-secondary .wp-block-button__link:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base-2); } /* Auf dunklen Flaechen invertiert Secondary automatisch. */ .is-style-section-dark .is-style-secondary .wp-block-button__link, .ff-cta .is-style-secondary .wp-block-button__link { color: var(--wp--preset--color--base-2); border-color: color-mix(in srgb, var(--wp--preset--color--base-2) 45%, transparent); } .is-style-section-dark .is-style-secondary .wp-block-button__link:hover, .ff-cta .is-style-secondary .wp-block-button__link:hover { background: var(--wp--preset--color--base-2); color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--base-2); } /* Ghost: reiner Textlink mit Pfeil, fuer sekundaere Wege. */ .is-style-ghost .wp-block-button__link { background: transparent; color: var(--wp--preset--color--accent-dark); padding-inline: 0.25rem; padding-block: 0.5rem; text-decoration: none; border-bottom: 1px solid currentColor; border-radius: 0; } .is-style-ghost .wp-block-button__link:hover { background: transparent; color: var(--wp--preset--color--contrast); } .is-style-section-dark .is-style-ghost .wp-block-button__link, .ff-cta .is-style-ghost .wp-block-button__link { color: var(--wp--preset--color--cta); } .is-style-section-dark .is-style-ghost .wp-block-button__link:hover, .ff-cta .is-style-ghost .wp-block-button__link:hover { color: var(--wp--preset--color--base-2); } /* ========================================================================== * 6. Karten * ========================================================================== */ /* Karten tragen im Entwurf durchgehend DIESELBE Cremefarbe und einen zarten * Schatten. Verschiedene Kartenfarben in einem Set lassen gleichrangige * Inhalte ungleich aussehen; die Tiefe kommt vom Schatten, nicht von der * Farbe. */ /* Kartenmasse nach dem Entwurf (Home.dc.html, Angebotskarten): * radius 24px, padding 46px 42px, gap 18px, * Schatten 0 10px 34px rgba(36,48,30,0.07), Hover -6px auf 0 18px 44px /0.12. * Vorher lag hier ein doppelter, viel flacherer Schatten (1px/2px + 10px/28px) * und ein Hover von nur -3px — die Karten standen dadurch flach auf der * Flaeche, statt zu schweben. Das Padding traegt die Karte jetzt selbst; * Patterns duerfen es nicht mehr per Inline-Style setzen. */ /* Doppelte Klasse mit Absicht: Core setzt `.wp-block-group.has-background * { padding: 1.25em 2.375em }` (Spezifitaet 0,2,0). Ein einfaches .ff-card * (0,1,0) verliert dagegen — die Karten haetten nach dem Entfernen der * Inline-Styles 20/38px statt 46/42px bekommen. */ .ff-card.ff-card { position: relative; display: flex; flex-direction: column; gap: 1.125rem; /* 46/42 ab rund 840px, darunter mitwachsend (21.08.2026). * * Fest gesetzt frassen sie auf einer 320px-Karte ein Viertel der * Breite: Die Textspalte blieb bei 236px und der Satz brach in * Wortfetzen um. Die Entwuerfe sind `min-width:1100px` und sagen ueber * das Handy nichts, die Mobilwerte sind also unsere. * * Karten mit eigenem Polster aus dem Entwurf (ff-thema, ff-onlinekurs, * ff-mission__punkt, ff-wb-karte, ff-wb-info, ff-vortraege__karte, * ff-kursformat__eignung) haben ihre eigene Doppelklassen-Regel und * bleiben davon unberuehrt — ihre Werte sind ohnehin kleiner. */ padding: clamp(1.75rem, 5vw, 2.875rem) clamp(1.5rem, 5.5vw, 2.625rem); border-radius: var(--wp--custom--radius--card); box-shadow: var(--wp--preset--shadow--card); transition: var(--wp--custom--transition--lift); } .ff-card > * { margin-block: 0; } /* Kartenlink am Fuss — im Entwurf ein schlichter Textlink, kein Knopf. * `margin-top: auto` schiebt ihn an den unteren Kartenrand, damit alle * Karten des Rasters ihn auf derselben Hoehe tragen. */ .ff-kartenlink { margin-top: auto !important; margin-bottom: 0; font-size: 0.875rem; /* 14px */ font-weight: 500; } .ff-kartenlink a { color: var(--wp--preset--color--accent); text-decoration: none; white-space: nowrap; } .ff-kartenlink a:hover, .ff-kartenlink a:focus-visible { color: var(--wp--preset--color--cta-hover); text-decoration: underline; text-underline-offset: 3px; } /* Dritte Karte traegt zusaetzlich eine Minze-Pille (Entwurf: „Workshops * entdecken"). Kleiner als der Standardknopf, weil sie in einer Karte * steht und nicht auf einer Sektionsflaeche. */ .ff-kartenaktion { display: flex; flex-direction: column; gap: 1rem; margin-top: auto !important; } .ff-kartenaktion .ff-kartenlink { margin-top: 0 !important; } .ff-kartenknopf .wp-block-button__link { font-size: 0.90625rem; /* 14.5px */ padding: 0.6875rem 1.625rem; /* 11/26 */ } /* Karte mit Link: die ganze Flaeche ist klickbar (Overlay-Technik), der * Link bleibt aber ein echter Link fuer Tastatur und Screenreader. */ .ff-card--link:hover { transform: var(--wp--custom--lift--hover); box-shadow: var(--wp--preset--shadow--card-hover); } /* KARTENLINK — Masse aus den Entwuerfen, nicht aus dem Bauch. * * Home.dc.html „Zum Praxisangebot →" 14px/500, Wissen.dc.html * „Zu den Artikeln →" 13.5px/500, Fuer-Fachpersonen.dc.html * „Bisherige Vortraege →" 14px/500 — durchgehend Gewicht 500, 13.5 bis 14px * und NIE unterstrichen. Hier standen 600 und `sm` (15.5px) mit einer * Unterkante als Strich; deshalb sahen die Links auf /wissen/ anders aus als * ueberall sonst. */ .ff-card__more { margin-top: auto; padding-top: 0.5rem; font-weight: 500; /* `!important`, weil die Patterns `has-sm-font-size` mitgeben und * WordPress Schriftgroessen-Presets selbst mit `!important` ausgibt. * Ohne das kam 15.5px an statt 14px. */ font-size: 0.875rem !important; letter-spacing: 0.02em; } .ff-card__more a { /* `!important` wie bei .ff-ankernav a: die globale Linkunterstreichung * des Themes schlaegt sonst durch. Der Entwurf unterstreicht diese * Kartenlinks nirgends. */ text-decoration: none !important; } /* Der Pfeil traegt die Erkennbarkeit, die vorher der Strich uebernahm — so * loest es der Entwurf. Er steht bewusst im CSS und nicht im Text: kein * Pattern fuehrt ihn im Inhalt, also kann er sich auch nicht verdoppeln. */ .ff-card__more a::after { content: "\00a0→"; } .ff-card--link .ff-card__more a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; } .ff-card__more a:hover { color: var(--wp--preset--color--contrast); } /* Karte mit Bild oben. */ .ff-card__media { margin: 0 0 0.25rem; border-radius: var(--wp--custom--radius--card-small); overflow: hidden; } .ff-card__media img { display: block; width: 100%; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } /* Bildplatzhalter: WP-Core rendert core/image ohne src als LEEREN String — * die Spalte verschwaende dann komplett. Deshalb tragen alle Platzhalter * assets/images/platzhalter.svg als echtes src. Diese Regel gibt ihnen * zusaetzlich den gestrichelten Rahmen, damit im Abnahmestand sofort * erkennbar ist, wo noch ein Motiv fehlt. */ .wp-block-image img[src$="platzhalter.svg"] { border: 1px dashed var(--wp--preset--color--muted); border-radius: var(--wp--custom--radius--media); } .ff-card--link:hover .ff-card__media img { transform: scale(1.03); } /* Kartenraster stapeln. * Die Patterns setzen "columnCount":N mit "minimumColumnWidth":null. WP-Core * erzeugt daraus ein starres repeat(N, minmax(0, 1fr)) ohne auto-fit, das auf * kleinen Viewports nicht von selbst umbricht. Die Selektoren hier haben * Spezifitaet 0,2,0 und schlagen damit die generierte * .wp-container-core-group-is-layout-* Regel (0,1,0). */ @media (max-width: 63.99em) { .wp-block-group.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 39.99em) { .wp-block-group.is-layout-grid { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== * 7. Formulare * ========================================================================== */ .ff-form input[type="text"], .ff-form input[type="email"], .ff-form input[type="tel"], .ff-form input[type="date"], .ff-form select, .ff-form textarea, .wp-block-search__input { /* Ohne border-box rechnet der Browser die 2rem Innenabstand und die * beiden Rahmenlinien ZUSAETZLICH zu width:100% — jedes Feld war damit * 34 px breiter als seine Spalte. In breiten Formularen blieb das * unsichtbar, im zweispaltigen Newsletter-Stopper stand das E-Mail-Feld * ueber der Kartenkante. WordPress setzt border-box nur fuer Bloecke, * nicht fuer Formularfelder in core/html. */ box-sizing: border-box; width: 100%; /* Masse aus Kontakt.dc.html: Polster 13/16, Radius 12, Schrift 14.5px, * Grund Seitengrund (nicht Kartenweiss — die Felder liegen auf einer * weissen Karte und muessen sich davon absetzen). */ padding: 0.8125rem 1rem; font: inherit; font-size: 0.90625rem; line-height: 1.4; color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--base); /* Bedienelement-Rahmen braucht 3:1 — helles Leinsamen reicht dafuer nicht. */ border: 1px solid var(--wp--preset--color--muted-dark); border-radius: 0.75rem; transition: border-color var(--wp--custom--transition--base); } .ff-form textarea { min-height: 9rem; resize: vertical; } /* Sichtbarer Fokus: echter outline statt nur box-shadow — ein Schatten * verschwindet im Windows-Kontrastmodus ersatzlos. */ .ff-form input:focus-visible, .ff-form select:focus-visible, .ff-form textarea:focus-visible, .wp-block-search__input:focus-visible { outline: 2px solid var(--wp--preset--color--accent-dark); outline-offset: 2px; border-color: var(--wp--preset--color--accent-dark); } .ff-form input:focus, .ff-form select:focus, .ff-form textarea:focus, .wp-block-search__input:focus { border-color: var(--wp--preset--color--accent-dark); } .ff-form label { display: block; margin-bottom: 0.375rem; font-size: 0.84375rem; /* 13.5px, Entwurf */ font-weight: 500; color: var(--wp--preset--color--contrast); } .ff-form__field { margin-bottom: var(--wp--preset--spacing--md); } .ff-form__hint { /* 0.35rem waren zu wenig — der Hinweis klebte am Knopf darueber * (gemeldet 28.08.2026). */ margin-top: 0.9rem; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted-dark); } /* Spezifitaet muss .ff-form label (0-1-1) schlagen, sonst stapeln * Checkbox und Text und der Consent-Text laeuft fett. */ .ff-form .ff-form__check, label.ff-form__check { display: flex; align-items: flex-start; gap: 0.65rem; font-size: var(--wp--preset--font-size--sm); font-weight: 400; color: var(--wp--preset--color--body); } .ff-form__check input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; accent-color: var(--wp--preset--color--accent-dark); flex: 0 0 auto; } /* Honeypot-Feld (Spam-Falle) visuell und fuer Screenreader entfernen. */ .ff-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .ff-form__error { color: #9B2C2C; font-size: var(--wp--preset--font-size--sm); font-weight: 600; } .wp-block-search__button { border-radius: var(--wp--custom--radius--button); } /* ========================================================================== * 8. Sektionen & Markenmotive * ========================================================================== */ .ff-section { padding-block: var(--wp--preset--spacing--section); } /* KEIN Abstand zwischen den Sektionen einer Seite. * * WordPress setzt den globalen Blockabstand (24px) als `margin-block-start` * zwischen alle Geschwister im Inhaltsfluss — also auch zwischen zwei * Sektionen. Da benachbarte Sektionen verschiedene Flaechenfarben tragen, * blitzte dazwischen ueberall ein 24px breiter Streifen Seitengrund durch. * Im Entwurf stossen die Flaechen direkt aneinander. */ .entry-content > *, .wp-site-blocks > * { margin-block-start: 0; } .ff-section--tight { padding-block: var(--wp--preset--spacing--xl); } /* Flaechenvarianten als Block-Stile — damit die Kundin eine Sektion im * Editor umschalten kann, ohne Farben einzeln zu waehlen. * * KORRIGIERT 15.08.2026: `section-soft` zeigte auf `base-2` (#FEFDF8) — * das ist der KARTENton. Der Entwurf wechselt die Sektionsflaechen aber * zwischen Seitengrund #FBF9F2 und Sand #F5F2E9; #FEFDF8 kommt als Flaeche * gar nicht vor, nur auf Karten. Der Stil steckt in 14 Patterns, die * Sektionen waren dadurch site-weit einen Ton zu hell und hoben sich kaum * vom Seitengrund ab. */ .is-style-section-soft { background-color: var(--wp--preset--color--surface-sand); } .is-style-section-sand { background-color: var(--wp--preset--color--surface-sand); } .is-style-section-ice { background-color: var(--wp--preset--color--surface-ice); } .is-style-section-dark { background-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base-2); } .is-style-section-dark :is(h1, h2, h3, h4, h5) { color: var(--wp--preset--color--base-2); } /* Minze bleibt Buttons vorbehalten — auf dunkler Flaeche traegt das * Eyebrow deshalb gedaempftes Schlagrahm, nicht die Handlungsfarbe. */ .is-style-section-dark .ff-eyebrow { color: color-mix(in srgb, var(--wp--preset--color--base-2) 78%, transparent); } .is-style-section-dark .ff-eyebrow--rules::before, .is-style-section-dark .ff-eyebrow--rules::after { background: color-mix(in srgb, var(--wp--preset--color--base-2) 35%, transparent); } /* --- 8a. Eyebrow: kleine Versalienzeile ueber Ueberschriften --- */ /* NACH DEM ENTWURF (Home.dc.html u. a.), 15.08.2026. * * Vorher: 15px, fett, Versalien, 0.1em gesperrt, Matcha Dunkel — ein * Fachjournal-Marker aus meinem eigenen System. Der Entwurf setzt an dieser * Stelle durchgehend `color:#2E8C80; font-size:16px; font-weight:400` * ohne Versalien und ohne Sperrung. Das ist ein ruhiger Zwischentitel, * kein Label — und er steht auf JEDER Seite, deshalb faellt der * Unterschied ueberall auf. */ .ff-eyebrow { /* 16px steht so in JEDEM Entwurf — Home, Vision-Mission, Fuer-Fachpersonen. * `!important`, weil die Patterns den Eyebrows `has-sm-font-size` mitgeben * und WordPress Schriftgroessen-Presets selbst mit `!important` ausgibt. * Ohne das kam 15.5px an. */ font-size: 1rem !important; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--wp--preset--color--accent); margin-bottom: 1rem; } /* Editorial-Variante mit Haarlinien links und rechts — der Sektionsmarker * eines Fachjournals. Traegt den Rhythmus der ganzen Seite. */ .ff-eyebrow--rules { display: flex; align-items: center; justify-content: center; gap: 1.15rem; } .ff-eyebrow--rules::before, .ff-eyebrow--rules::after { content: ""; flex: 0 0 2.75rem; height: 1px; background: var(--wp--preset--color--muted); } /* --- 8b. Display-Ueberschrift mit Zierstrich --- */ .ff-display-heading { margin-bottom: 0; } /* Die Fliesstextbreite (39rem) ist fuer Sektionstitel zu schmal — sie * brechen dann mitten in der Wortgruppe um. Titel und Eyebrow duerfen * deshalb breiter laufen als die Textspalte, in der sie stehen. */ .is-layout-constrained > .ff-display-heading, .is-layout-constrained > .wp-block-heading, .is-layout-constrained > .ff-eyebrow { max-width: min(46rem, 100%); margin-inline: auto; } /* ENTFERNT 15.08.2026 — hier stand eine 48px-Haarlinie unter JEDEM * zentrierten Sektionstitel. Sie kommt in keiner der Entwurfsdateien vor * (Home, Praxis, Wissen, Kontakt geprueft); sie war meine Zutat und stand * damit auf fast jeder Sektion der Seite. */ /* Versalien geloest von h1: sonst laufen alle Blog- und Wissen-Titel in * Grossbuchstaben. Gilt nur im Hero und wo ausdruecklich gesetzt. */ .ff-hero h1, .ff-display-caps { text-transform: uppercase; letter-spacing: var(--wp--custom--letter-spacing--display-caps); } .ff-subline { color: var(--wp--preset--color--body); } /* --- 8c. Wellentrenner (Bildmarke als Sektionsgrenze) --- */ /* Als CSS-Maske statt Inline-SVG: so braucht kein Pattern einen * core/html-Block, den die Kundin im Editor gar nicht einfuegen darf. */ .ff-wave-divider { width: min(9rem, 34vw); aspect-ratio: 126 / 16; margin-inline: auto; background-color: currentColor; color: var(--wp--preset--color--muted); -webkit-mask: url("../logo/wave.svg") center / contain no-repeat; mask: url("../logo/wave.svg") center / contain no-repeat; } .ff-wave-divider--accent { color: var(--wp--preset--color--accent); } .is-style-section-dark .ff-wave-divider { color: color-mix(in srgb, var(--wp--preset--color--base-2) 45%, transparent); } /* Inline-Variante (PHP-Helfer floraflow_wave), falls doch mal gebraucht. */ .ff-wave { display: block; width: min(9rem, 34vw); margin-inline: auto; color: var(--wp--preset--color--muted); } .ff-wave svg { display: block; width: 100%; height: auto; } /* --- 8d. Punkt-Liste (Klassenname historisch: ff-list--sprout) --- * * KREIS STATT BLATT (11.09.2026, Jelina: „Ich bin mir bei diesem Icon nicht * sicher, vielleicht lieber der Kreis von Mind"). Das Blatt war eine * Ableitung aus der Sprosse im Logo, als eigenes Zeichen aber nirgends in * der CI. Der Kreis ist das Mind-Zeichen und zugleich der Kopf der * Bildmarke — damit kommt der Listenpunkt direkt aus dem Logo. * * 8 px statt 12: Eine gefuellte Scheibe traegt optisch mehr Gewicht als das * schmale Blatt; in 12 px stand sie neben 17,5-px-Text wie ein Knopf. * Senkrecht auf die Mitte der ersten Zeile (`lh` = Zeilenhoehe), damit der * Punkt bei mehrzeiligen Eintraegen oben bleibt. */ .ff-list--sprout { list-style: none; padding-left: 0; display: grid; gap: 0.7rem; } .ff-list--sprout li { position: relative; padding-left: 1.85rem; } .ff-list--sprout li::before { content: ""; position: absolute; left: 0.125rem; top: 0.8em; top: 0.5lh; width: 0.5rem; height: 0.5rem; transform: translateY(-50%); background: var(--wp--preset--color--accent); border-radius: 50%; } /* Haken-Liste fuer Eignungs- und Leistungsaufzaehlungen. */ .ff-list--check { list-style: none; padding-left: 0; display: grid; gap: 0.7rem; } .ff-list--check li { position: relative; padding-left: 1.85rem; } /* Selbst gezeichneter Haken statt eines ✓-Zeichens: Generierten Text lesen * NVDA und VoiceOver mit vor — bei einer Nutzenliste hoerte man dann vor * jedem Punkt „Haekchen". Zwei Rahmenkanten, um 45 Grad gedreht, sind fuer * Screenreader gar nicht vorhanden und skalieren sauber mit. */ .ff-list--check li::before { content: ""; position: absolute; left: 0.25rem; top: 0.35em; width: 0.75rem; height: 0.4rem; border-left: 2px solid var(--wp--preset--color--accent-dark); border-bottom: 2px solid var(--wp--preset--color--accent-dark); border-radius: 1px; transform: rotate(-45deg); } /* --- 8d2. Chips: Begriffsreihe mit zentriertem Umbruch --- * Bewusst Flex statt Grid: Bei sieben Begriffen bliebe die letzte * Rasterzeile linksbuendig stehen. */ .ff-chips > * { flex: 0 0 auto; min-width: 8.5rem; text-align: center; } /* --- 8e. Kennzahlen --- */ .ff-stat { text-align: center; } .ff-stat__number { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem); line-height: 1; color: var(--wp--preset--color--contrast); } .ff-stat__label { display: block; margin-top: 0.6rem; font-size: var(--wp--preset--font-size--xs); font-weight: 600; letter-spacing: var(--wp--custom--letter-spacing--caps); text-transform: uppercase; color: var(--wp--preset--color--muted-dark); } /* --- 8f. Trust-Zeile --- */ .ff-trust-row__label { font-size: var(--wp--preset--font-size--xs); letter-spacing: var(--wp--custom--letter-spacing--caps); text-transform: uppercase; color: var(--wp--preset--color--muted-dark); } .ff-trust-row__logos { opacity: 0.7; filter: grayscale(1); } /* --- 8g. Testimonial --- */ /* Das Anfuehrungszeichen ist reine Dekoration und wird deshalb per ::before * erzeugt — als Textknoten wuerde der Screenreader es mitlesen. */ .ff-testimonial__mark::before { content: "«"; display: block; font-family: var(--wp--preset--font-family--display); font-size: 2.75rem; font-style: normal; line-height: 0.75; color: var(--wp--preset--color--warm); margin-bottom: 0.35rem; } .ff-testimonial__quote { line-height: var(--wp--custom--line-height--lead); } .ff-testimonial__name { letter-spacing: 0.04em; color: var(--wp--preset--color--muted-dark); } /* --- 8g2. Foto-Sektionen mit stehendem Hintergrund --- * * Der Text wandert, das Bild bleibt stehen. Umgesetzt mit `position: sticky` * statt `background-attachment: fixed`: Letzteres ignoriert iOS Safari * komplett und ruckelt auf vielen Android-Geraeten. Ein sticky Medienelement * mit negativer Aussenkante nimmt keinen Platz im Fluss ein, bleibt am * Viewport haengen und wird vom Abschnitt sauber beschnitten. * * Anwendung: Stil-Variante „Fester Hintergrund" auf einem Cover-Block. */ /* WP-Core setzt auf .wp-block-cover ein display:flex. Ein sticky Medium * waere dort ein Flex-Item und wuerde den Inhalt zur Seite schieben — * deshalb hier Blockfluss. Die vertikale Zentrierung uebernimmt das * Innenabstands-Paar des Patterns. */ /* KORRIGIERT 15.08.2026 — der Hero ging nicht bis an den Rand. * * Der stehende Hintergrund ist hier ein Element IM FLUSS (`position: * sticky`), anders als Cores Hintergrundbild, das absolut liegt und * deshalb auch den Polsterbereich ueberdeckt. Ein Flusselement sitzt im * INHALTSKASTEN — es bekommt also das Polster des Covers vorgesetzt. * * Gemessen: Bild bei x=18, y=68 statt 0,0. Die 18px waren Cores * `.wp-block-cover { padding: 1em }` quer (mit 17.5px Grundschrift), die * 68px das Sektionspolster hoch. Sichtbar als heller Streifen links, * rechts und oben — genau das, was Lucas gemeldet hat. * * Loesung: Der Cover traegt kein Polster mehr, es wandert auf den * Innencontainer. Das `!important` schlaegt den Inline-Style des Patterns. */ .wp-block-cover.is-style-fixed-media { display: block; overflow: clip; padding: 0 !important; } /* ========================================================================== * STEHENDE HINTERGRUENDE — alle Fotoflaechen * * Der Entwurf setzt jede Fotoflaeche auf `background-attachment: fixed`: * Das Motiv bleibt stehen, der Inhalt scrollt darueber. Bisher galt das nur * fuer den Startseiten-Hero; alle uebrigen Baender scrollten mit. * * Technik: Das Hintergrundbild ist `position: sticky` mit negativer * Aussenkante — es nimmt keinen Platz im Fluss ein, bleibt aber am * Viewport haften. Das funktioniert auch dort, wo * `background-attachment: fixed` nicht greift (iOS). * * PREIS DER TECHNIK: Ein Flusselement sitzt im Inhaltskasten, bekommt also * das Polster des Covers vorgesetzt und waere nicht mehr randlos. Deshalb * tragen diese Cover KEIN eigenes Polster — es wandert auf den * Innencontainer. Wer hier ein Cover ergaenzt, muss beides mitnehmen. * ========================================================================== */ /* `display: block` ist hier ZWINGEND, nicht kosmetisch. * * Core setzt `.wp-block-cover { display: flex }`, um den Inhalt mittig zu * halten. Das Hintergrundbild liegt bei dieser Technik aber IM FLUSS — * als Flex-Element stellt es sich also NEBEN den Inhalt und teilt sich die * Breite mit ihm. Gemessen am Praxis-Hero: Bild 683px, Text daneben ab * x=683 statt beides ueber die vollen 1425px. * * Im Blockfluss liegt das Bild dagegen hinter dem Inhalt, so wie gemeint. */ .wp-block-cover.is-style-fixed-media, .wp-block-cover.ff-fotoband, .wp-block-cover.ff-quoteband, .wp-block-cover.ff-seitenkopf, .wp-block-cover.ff-hero-bokeh { display: block; padding: 0 !important; overflow: clip; } /* BORDER-BOX AUCH FUER DEN FOTO-HERO (21.08.2026). * * `is-style-fixed-media` fehlte in dieser Liste. Folge auf der Startseite * bei 375px: Core gibt dem Innencontainer `width:100%` (360px), Cores * `has-global-padding` legt 20px links und rechts DARAUF (content-box), * macht 400px — und `overflow: clip` am Cover schnitt die letzten 20px * jeder Zeile ab. Sichtbar stand dort „Ganzheitliche Gesundheit fuer * Koerper, Geis". Gemessen: h1 von 20 bis 380 bei sichtbaren 360. * * Eigene Regel statt Aufnahme in die Liste darunter: Die dortige Regel * setzt auch `padding-block` und `padding-inline`, und der Foto-Hero traegt * sein Polster aus dem Pattern (xxl oben und unten). Hier soll nur die * Rechenart wechseln. */ .wp-block-cover.is-style-fixed-media > .wp-block-cover__inner-container { box-sizing: border-box; } .wp-block-cover.ff-fotoband > .wp-block-cover__inner-container, .wp-block-cover.ff-quoteband > .wp-block-cover__inner-container, .wp-block-cover.ff-seitenkopf > .wp-block-cover__inner-container, .wp-block-cover.ff-hero-bokeh > .wp-block-cover__inner-container { box-sizing: border-box; padding-block: var(--ff-band-polster, 6.875rem); padding-inline: var(--wp--preset--spacing--gutter); margin-block: 0; } /* Polster je Bandtyp — Werte aus dem Entwurf. */ .ff-fotoband--sektion { --ff-band-polster: var(--wp--preset--spacing--section); } /* 120px */ .ff-quoteband { --ff-band-polster: var(--wp--preset--spacing--band); } /* 100px */ .ff-seitenkopf { --ff-band-polster: 8.125rem; } /* 130px */ /* Unterseiten-Hero: Der Entwurf setzt `130px 56px 150px` — gerechnet ab * UNTER der Navigation, die im Entwurf innerhalb der Sektion liegt. Bei uns * ueberlagert die Kopfzeile den Hero, ihre Hoehe kommt deshalb oben dazu. */ .ff-hero-bokeh > .wp-block-cover__inner-container { padding-block: 8.125rem 9.375rem; /* 130 / 150 */ } .ff-has-overlay-header .ff-hero-bokeh > .wp-block-cover__inner-container { padding-top: calc(8.125rem + 7rem); } .wp-block-cover.ff-fotoband > .wp-block-cover__image-background, .wp-block-cover.ff-quoteband > .wp-block-cover__image-background, .wp-block-cover.ff-seitenkopf > .wp-block-cover__image-background, .wp-block-cover.ff-hero-bokeh > .wp-block-cover__image-background, .wp-block-cover.is-style-fixed-media > .wp-block-cover__image-background, .wp-block-cover.is-style-fixed-media > .wp-block-cover__video-background { /* `block` ist hier NICHT kosmetisch: Als Inline-Element sitzt das Bild * auf der Grundlinie, und die Zeilenbox haengt ihre Unterlaenge darunter * — gemessen 29px (17.5px Grundschrift x 1.65 Zeilenhoehe). Genau diese * 29px machten den Hero 849 statt 820px hoch. */ display: block; position: sticky; top: 0; width: 100%; height: 100dvh; /* Nimmt keinen Platz im Fluss ein, bleibt aber am Viewport haften. */ margin-bottom: -100dvh; object-fit: cover; object-position: center; } /* BAENDER: FIXED HINTER EINEM CLIP (09.09.2026, Lucas: „nicht sticky * sondern fix? dass es auch schmal stehen bleibt, geht das so? Nicht * einfach hoeher machen.") * * Ja, so geht es. Sticky kann sich nur innerhalb seines Abschnitts bewegen * und steht auf einem 311px-Band deshalb nie. `position: fixed` haengt * am Viewport, egal wie flach das Band ist — und `clip-path: inset(0)` am * Band beschneidet auch fixierte Nachfahren, OHNE (anders als transform, * filter oder overflow) zum Bezugsrahmen zu werden. Der Browser * komposiert das auf der GPU; das Ruckeln von `background-attachment: * fixed` (Anlauf 2 vom 28.08.) entfaellt. * * Gemessen am 09.09. auf /praxis/ (Band 529px): Bildoberkante bleibt bei * 0, das Band faehrt 150px, ein Treffer 20px ueber dem Band landet in der * Sektion darueber, nicht im Bild — der Clip greift. * * Nur die Baender (`ff-fotoband`); Heroes sind hoeher als der Schirm und * bleiben sticky. Voraussetzung wie immer: kein Transform auf einem * Vorfahren — die Einblendung (theme.js) schiebt vollbreite Flaechen * deshalb nicht mehr. */ @media (min-width: 48em) { .wp-block-cover.ff-fotoband { clip-path: inset(0); } .wp-block-cover.ff-fotoband > .wp-block-cover__image-background, .wp-block-cover.ff-fotoband > .wp-block-cover__background, .wp-block-cover.ff-fotoband > .wp-block-cover__gradient-background { position: fixed; inset: 0; top: 0; height: 100vh; margin-bottom: 0; } /* Das Bild nimmt als fixed keinen Platz mehr ein; die negative * Randkorrektur der Sticky-Variante entfaellt, der Inhalt beginnt * am Bandanfang. */ .wp-block-cover.ff-fotoband > .wp-block-cover__inner-container { position: relative; } } /* DER SCHLEIER KLEBT MIT (20.08.2026, gemeldet von Lucas: „der dunkle * Overlay ueber den Bildern sollte auch sticky sein"). * * Core legt `.wp-block-cover__background` absolut ueber den ganzen * Abschnitt. Das Motiv haengt seit dem 15.08. dagegen am Viewport. Beide * bezogen sich also auf verschiedene Systeme, und beim Scrollen zog der * Schleier am stehenden Bild vorbei. * * `display: block` ist hier ZWINGEND, genau wie beim Bild darueber: Der * Schleier ist ein . Solange er absolut liegt, blockifiziert ihn der * Browser von selbst; mit `position: sticky` faellt er auf `inline` * zurueck, und eine Hoehe gilt fuer Inline-Elemente nicht. Ohne diese Zeile * ist er 0 Pixel hoch und der Schleier verschwindet ersatzlos. * * `inset: auto` hebt Cores `inset: 0` auf — sonst zerrt es das Element * wieder auf die volle Abschnittshoehe. */ /* ALLE FOTOFLAECHEN STEHEN, Heroes wie Baender. * * Am 28.08.2026 hatte ich die Baender kurz auf mitscrollend gestellt, weil * ich Lucas' Markierungen („static") als Wunsch gelesen hatte statt als * Befund. Er hat den Ist-Zustand beschrieben: Sie WAREN static, und das war * der Fehler. Zurueckgedreht. * * Dass sie static waren, lag an der Einblendung: `.ff-reveal` liess nach * dem Lauf ein Transform stehen, und das macht die Sektion zum Bezugsrahmen * fuer jedes sticky darin. Behoben in theme.js — seitdem greift die Technik * hier zum ersten Mal ueberhaupt. */ .wp-block-cover.ff-fotoband > .wp-block-cover__background, .wp-block-cover.ff-quoteband > .wp-block-cover__background, .wp-block-cover.ff-seitenkopf > .wp-block-cover__background, .wp-block-cover.ff-hero-bokeh > .wp-block-cover__background, .wp-block-cover.is-style-fixed-media > .wp-block-cover__background, .wp-block-cover.ff-fotoband > .wp-block-cover__gradient-background, .wp-block-cover.ff-quoteband > .wp-block-cover__gradient-background, .wp-block-cover.ff-seitenkopf > .wp-block-cover__gradient-background, .wp-block-cover.ff-hero-bokeh > .wp-block-cover__gradient-background, .wp-block-cover.is-style-fixed-media > .wp-block-cover__gradient-background { display: block; position: sticky; inset: auto; top: 0; width: 100%; height: 100dvh; margin-bottom: -100dvh; } /* AUF DEM HANDY KEIN STEHENDES MOTIV (21.08.2026). * * Die Technik haengt Bild und Schleier mit `height: 100dvh` am Viewport. * Auf einem 360x812-Schirm heisst das: ein querformatiges Band wie * `band-pastell` (768x216, also 3,56:1) muss einen 0,44:1-Kasten fuellen. * `object-fit: cover` skaliert es dafuer auf das 3,8-Fache und wirft * 88 Prozent der Bildbreite weg — vom Motiv bleibt ein Farbschleier. * * Darunter faellt das Motiv deshalb in Cores normales Verhalten zurueck: * absolut im Abschnitt, volle Hoehe des Abschnitts. Der Parallaxe-Effekt * entfaellt — auf dem Telefon ist er ohnehin der unwichtigste Teil, und * iOS ignoriert `background-attachment: fixed` seit jeher. * * Gemessen an `band-pastell` bei 375px: vorher 12,5 Prozent der Bildbreite * sichtbar, jetzt 25 Prozent. Der Rest ist ein Bildproblem, kein * CSS-Problem: Ein 3,56:1-Motiv passt nicht in einen hochkanten Kasten. * Wirklich loesen wuerde es ein eigener Hochkant-Zuschnitt der Baender. */ @media (max-width: 47.99em) { .wp-block-cover.ff-fotoband > .wp-block-cover__image-background, .wp-block-cover.ff-quoteband > .wp-block-cover__image-background, .wp-block-cover.ff-seitenkopf > .wp-block-cover__image-background, .wp-block-cover.ff-hero-bokeh > .wp-block-cover__image-background, .wp-block-cover.is-style-fixed-media > .wp-block-cover__image-background, .wp-block-cover.is-style-fixed-media > .wp-block-cover__video-background, .wp-block-cover.ff-fotoband > .wp-block-cover__background, .wp-block-cover.ff-quoteband > .wp-block-cover__background, .wp-block-cover.ff-seitenkopf > .wp-block-cover__background, .wp-block-cover.ff-hero-bokeh > .wp-block-cover__background, .wp-block-cover.is-style-fixed-media > .wp-block-cover__background { position: absolute; inset: 0; width: 100%; height: 100%; margin-bottom: 0; } } /* WEG DER PARALLAXE, ZURUECK AUF STICKY (28.08.2026, Ansage von Lucas). * * Drei Anlaeufe an derselben Stelle, der Reihe nach: * * 1. `position: sticky` am Bild — das Original. Haelt nur, solange der * Abschnitt mindestens so hoch ist wie das Motiv (100dvh). Beim Hero * (820px) geht das auf, beim Zitatband (311px) nicht. * 2. `background-attachment: fixed`, wie im Entwurf. Technisch richtig, * aber Chrome zeichnet solche Flaechen auf dem Hauptthread neu: * „hier springt der Hintergrund". * 3. Echte Parallaxe per `translate3d`. Lief ruhig, gefiel aber nicht: * „nee, das ist auch doof". * * Es bleibt bei 1. Konsequenz, damit sie hier steht und nicht wieder * gesucht werden muss: Auf Abschnitten, die niedriger sind als der * Bildschirm, verhaelt sich das Motiv wie ein normaler Hintergrund und * faehrt mit. Das ist keine Fehlkonfiguration, sondern die Grenze der * Technik — ein sticky Element kann sich nur innerhalb seines Containers * bewegen. Wer den Effekt auch dort will, braucht einen der beiden * anderen Wege samt ihrer Nachteile. */ /* DER SCHLEIER BRAUCHT SEINE DECKUNG AUS DEM THEME (28.08.2026). * * Gemeldet als „der Hintergrund ist weg" am Zitatband der Startseite: Statt * des Pastellbands stand dort eine satte dunkelgruene Flaeche. * * Ursache: WordPress laedt die Stilvorlage des Cover-Blocks auf dieser * Website nicht. Im ausgelieferten HTML stehen die Stilbloecke fuer button, * buttons, columns, group, heading, image, list, navigation-link und * paragraph — `wp-block-cover` fehlt, obwohl drei Cover im Inhalt stehen * und sauber als `core/cover` parsen. Damit fehlt auch die Regel, die * `has-background-dim-40` auf `opacity: 0.4` setzt: Der Schleier lief mit * voller Deckung und verdeckte das Motiv vollstaendig. * * Aufgefallen ist es nur an den Baendern OHNE Scrim-Variante. Die Heroes * sehen richtig aus, weil unsere eigenen Regeln (`ff-hero--scrim` und * Verwandte) ihre Flaeche mit einer durchscheinenden Farbe selbst malen und * `opacity: 1` setzen — sie brauchen Cores Leiter gar nicht. * * Hier steht sie deshalb selbst. Das Theme haengt damit nicht mehr davon * ab, ob WordPress die Cover-Stilvorlage ausliefert. Sollte sie eines Tages * wieder mitkommen, sind die Werte dieselben — es aendert sich nichts. */ .wp-block-cover > .wp-block-cover__background.has-background-dim-0 { opacity: 0; } .wp-block-cover > .wp-block-cover__background.has-background-dim-10 { opacity: 0.1; } .wp-block-cover > .wp-block-cover__background.has-background-dim-20 { opacity: 0.2; } .wp-block-cover > .wp-block-cover__background.has-background-dim-30 { opacity: 0.3; } .wp-block-cover > .wp-block-cover__background.has-background-dim-40 { opacity: 0.4; } .wp-block-cover > .wp-block-cover__background.has-background-dim-50 { opacity: 0.5; } .wp-block-cover > .wp-block-cover__background.has-background-dim-60 { opacity: 0.6; } .wp-block-cover > .wp-block-cover__background.has-background-dim-70 { opacity: 0.7; } .wp-block-cover > .wp-block-cover__background.has-background-dim-80 { opacity: 0.8; } .wp-block-cover > .wp-block-cover__background.has-background-dim-90 { opacity: 0.9; } .wp-block-cover > .wp-block-cover__background.has-background-dim-100 { opacity: 1; } /* --- 8g3. Foto-Sektionen: zwei Schleier-Varianten --- * * Welche Variante gilt, entscheidet die HELLIGKEIT des Motivs. Gemessen am * CI-Hintergrund (Pfingstrose, hellste Stelle Relativluminanz 0,91): * * Weisse Schrift + dunkler Scrim 70 % → 3,0:1 nur Grosstext * 80 % → 4,1:1 nur Grosstext * 86 % → 5,2:1 AA — erschlaegt aber das Motiv * Rosmarin-Schrift + heller Schleier 70 % → 10,5:1 AA mit grossem Puffer * * Bei den hellen, pastelligen CI-Motiven ist der helle Schleier deshalb die * richtige Wahl: normkonform UND naeher an der luftigen Anmutung der Marke. * Der dunkle Scrim bleibt fuer dunklere, kontrastreichere Motive. * * Nach jedem Motivwechsel neu messen — die Zahlen oben gelten fuer dieses Bild. */ /* Variante A — zartes Bokeh, Rosmarin-Schrift. * Gemessen auf lucidflowers27 mit den echten Textkaesten: schlechtester Wert * 4,66:1 bei nur 40 % Deckung links. Wenig Schleier heisst viel Motiv. */ .ff-hero--veil .wp-block-cover__background { background: linear-gradient( to right, color-mix(in srgb, var(--wp--preset--color--base) 40%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--base) 34%, transparent) 30%, color-mix(in srgb, var(--wp--preset--color--base) 20%, transparent) 60%, color-mix(in srgb, var(--wp--preset--color--base) 0%, transparent) 100% ) !important; opacity: 1 !important; } /* Variante B — Foto-Hero mit linksbuendigem Text, Schlagrahm-Schrift. * * SCHWARZ statt Rosmarin, dieselbe Begruendung wie bei der Ellipse (B2): * Rosmarin ueber dem rosa Motiv ergibt Oliv. Und DEUTLICH kraeftiger als * die erste Fassung (42 %): `hintergrund-home` ist die hellste Flaeche im * Projekt — der alte Verlauf kam am gerenderten Ergebnis auf 2,27:1 am * schlechtesten Punkt der Textzone. In der Zone stehen neben der H1 auch * Subline und Krankenkassen-Link, also Kleintext: Ziel ist 4,5:1. * Nach jedem Motivwechsel neu messen. */ /* NACH DEM ENTWURF (Home.dc.html), 15.08.2026 — vollstaendig ersetzt. * * Vorher stand hier ein schwarzer Verlauf quer nach rechts, der die linke * Bildhaelfte zu 62 % abdunkelte. Der Entwurf macht etwas anderes: ein * Schleier in Rosmarin, NUR von oben, 28 % am oberen Rand und bei 30 % * Hoehe bereits vollstaendig transparent. Er deckt die Navigation ab, * nicht den Text — die Schrift wird stattdessen mit einem weichen * Schlagschatten vom Motiv abgesetzt (siehe .ff-hero--scrim h1/p unten). * * Das Motiv bleibt damit sichtbar, statt zu 60 % zugedeckt zu sein. * Gemessene Folge: Der Text steht nicht mehr durchgehend ueber 4,5:1, * sondern traegt sich ueber Schattenkante und Motivhelligkeit. Der * Entwurf gibt das so vor. */ .ff-hero--scrim .wp-block-cover__background { background: linear-gradient( 180deg, rgba(36, 48, 30, 0.28) 0%, rgba(36, 48, 30, 0) 30% ) !important; opacity: 1 !important; } /* Schlagschatten wie im Entwurf — er, nicht der Schleier, traegt die * Lesbarkeit der Hero-Schrift. */ .ff-hero--scrim h1 { text-shadow: 0 2px 24px rgba(36, 48, 30, 0.25); } .ff-hero--scrim p { text-shadow: 0 1px 12px rgba(36, 48, 30, 0.25); } /* Variante C — heller Schleier, Rosmarin-Schrift. * * Fuer das im Briefing genannte Startseitenmotiv `lucidflowers7.jpg`: eine * sehr helle, fast weisse Pfingstrose. Gemessen am Bildausschnitt hinter der * Headline (mittlere Helligkeit L = 0,543): * * weisse Schrift braucht 65 % Rosmarin-Schleier fuer 4,7:1 * dunkle Schrift braucht 25 % Hafermilch-Schleier fuer 5,1:1 * * 65 % Rosmarin machen aus der zarten Bluete grauen Brei — und genau ihre * Leichtigkeit ist der Grund, warum das Motiv gewaehlt wurde. Deshalb hier * die Umkehrung, wie schon bei den vier Farbwelten: helle Flaeche, dunkle * Schrift. Der Schleier steht auf 32 % links und laeuft nach rechts aus, * damit Jelina und die Bluete frei stehen. * * Das weicht von Latifas Entwurf ab, der weisse Schrift vorsieht. Ihr * weiss-auf-hell war im Mockup der kritischste Kontrast ueberhaupt; mit dem * echten Motiv liegt er bei 1,08:1 ohne Schleier. */ .ff-hero--hell .wp-block-cover__background { background: linear-gradient( to right, color-mix(in srgb, var(--wp--preset--color--base) 32%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--base) 26%, transparent) 42%, color-mix(in srgb, var(--wp--preset--color--base) 12%, transparent) 62%, color-mix(in srgb, var(--wp--preset--color--base) 4%, transparent) 100% ) !important; opacity: 1 !important; } .ff-hero--hell, .ff-hero--hell :is(h1, h2, p) { color: var(--wp--preset--color--contrast); } .ff-hero--hell .ff-eyebrow { color: var(--wp--preset--color--accent-dark); } .ff-hero--hell .ff-lead { color: var(--wp--preset--color--body); } /* Variante B2 — derselbe Scrim, aber als weiche Ellipse unter zentriertem Text. * * ZWEI ENTSCHEIDUNGEN, beide gemessen statt geschaetzt. * * 1. ELLIPSE STATT FLAECHE. Der Verlauf von links (Variante B) setzt eine * gedeckte SEITE voraus. Bei einem mittig stehenden Zitat gibt es die * nicht: Der Text braucht in der Mitte Deckung, und genau dort ist der * Verlauf am schwaechsten. Die Ellipse legt die Deckung dorthin, wo der * Text steht, und laeuft nach aussen aus — das Motiv bleibt an den * Raendern hell. * * 2. SCHWARZ STATT ROSMARIN. Das ist die einzige Stelle im Theme, an der * eine Farbe nicht aus der Palette kommt, und zwar aus einem Grund: * Rosmarin ist ein dunkles GRUEN. Ueber der rosa Pfingstrose ergibt es * Oliv. Gemessen in der Textzone, jeweils bei der Deckung, die weisse * Schrift auf 4,5:1 bringt: * * Schleier Deckung Farbtondrift Saettigung * Rosmarin #24301E 61 % +22 Grad 0,17 * Schwarz #000000 50 % -4 Grad 0,22 * * Schwarz braucht weniger Deckung UND laesst der Bluete ihre Farbe. Ein * Scrim ist ein Schatten, keine Markenflaeche — er soll abdunkeln, nicht * einfaerben. Wer hier eine Palettenfarbe einsetzt, faerbt das Motiv. * * Weisse Schrift auf dem rohen Motiv beginnt bei 1,22:1; die im Entwurf * gesetzten 42 % kommen auf 2,85:1 und bleiben damit unter der Norm. * * Nach jedem Motivwechsel neu messen. */ /* AUS DER ELLIPSE WURDE EINE FLAECHE (20.08.2026). * * Die Ellipse war ein Denkfehler in Verbindung mit dem stehenden Motiv: * Sie sass in der Mitte des ABSCHNITTS, das Bild haengt am VIEWPORT. Beim * Scrollen wanderte also die dunkle Mitte ueber das stehende Bild, und der * untere Teil des Heros lief sichtbar hell aus. Genau das hat Lucas * gemeldet. Ein Verlauf laesst sich mit einem stehenden Motiv nicht * vereinbaren, solange er die Schrift decken soll: Die Schrift wandert, das * Bild nicht. * * Der Entwurf loest es anders und einfacher — Praxis-Bauchgefuehl.dc.html, * Hero und Spezialisierung, woertlich: * * background: url(...) center/cover no-repeat FIXED *
* * Also ein GLEICHMAESSIGER Schleier ueber dem festen Motiv. Eine Flaeche * sieht an jeder Scrollposition gleich aus, damit ist das Problem weg. * * ZWEI ABWEICHUNGEN VOM ENTWURF, beide gemessen (Textzone, 2. Perzentil, * Schrift #FEFDF8, gegen die sechs echten Motive): * * Entwurf rgba(45,62,50,0.42) 2,45 bis 3,12:1 — drei Motive unter AA * hier rgba(0,0,0,0.52) 4,61 bis 5,85:1 — AA auch fuer Kleintext * * SCHWARZ statt Rosmarin aus demselben Grund wie bisher: Rosmarin ist ein * dunkles Gruen und faerbt die rosa Motive oliv (+22 Grad Farbtondrift * gegen -4 Grad bei Schwarz). Ein Scrim ist ein Schatten, keine * Markenflaeche. * * 52 Prozent ist kein neuer Wert: Genau das stand bisher schon in der * Schmalansicht, wo die Ellipse keinen Rand zum Auslaufen hatte. Aus der * Ausnahme wird die Regel. * * Nach jedem Motivwechsel neu messen. */ .ff-hero--scrim.ff-hero--eben .wp-block-cover__background { /* 44 statt 52 Prozent (28.08.2026, „bg zu dunkel"). Nachgerechnet * gegen alle sechs Motive, Textzone, 2. Perzentil, Schrift #FEFDF8: * schlechtester Wert 3,53:1 bei hintergrund-home. Die Zitate sind * 24 bis 33px gross, dort fordert AA 3,0:1. Der Entwurf liegt bei 42 * Prozent und kaeme auf 3,3 — 44 haelt etwas Luft. */ /* 36 statt 44 Prozent (09.09.2026, Jelina: „Müssen die Hintergründe der * Header so dunkel sein?"). Gemessen nach dem Wechsel, siehe Kommentar * unten in Abschnitt 12: die Zitate bleiben ueber 3:1, Fliesstext im * Hero gibt es nicht. Ein weicher Textschatten faengt die hellsten * Stellen der Motive ab. */ background: rgba(0, 0, 0, 0.36) !important; opacity: 1 !important; } .ff-hero--scrim.ff-hero--eben :is(h1, h2, p) { text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35); } /* PRAXIS HELLER (11.09.2026, Lucas nach Jelinas Wunsch „koennte man hier * noch etwas erhellen?"). Nur diese Seite, ueber die Klasse ff-hero--hell * am Cover. Gemessen am Motiv hintergrund-praxis in der Textzone des * Zitats (40 px): 22 Prozent ergeben im Median 3,0:1, an den hellsten * 2 Prozent 1,9:1. Der dichtere Textschatten traegt die hellen Stellen. */ .ff-hero--scrim.ff-hero--eben.ff-hero--hell .wp-block-cover__background { background: rgba(0, 0, 0, 0.22) !important; } .ff-hero--scrim.ff-hero--eben.ff-hero--hell :is(h1, h2, p) { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 22px rgba(0, 0, 0, 0.45); } .ff-hero--scrim, .ff-hero--scrim :is(h1, h2, p) { color: var(--wp--preset--color--base-2); } .ff-hero--scrim .ff-eyebrow { color: color-mix(in srgb, var(--wp--preset--color--base-2) 82%, transparent); } .ff-hero--scrim .ff-eyebrow--rules::before, .ff-hero--scrim .ff-eyebrow--rules::after { background: color-mix(in srgb, var(--wp--preset--color--base-2) 45%, transparent); } .ff-hero--scrim .ff-lead { color: color-mix(in srgb, var(--wp--preset--color--base-2) 94%, transparent); } /* Der Ghost-Button traegt normalerweise Matcha Dunkel — auf dem Scrim waere * das Gruen auf Gruen (rund 1,5:1). Auf dunklem Grund gilt Schlagrahm. */ .ff-hero--scrim .wp-block-button.is-style-ghost .wp-block-button__link { color: var(--wp--preset--color--base-2); border-color: color-mix(in srgb, var(--wp--preset--color--base-2) 60%, transparent); } .ff-hero--scrim .wp-block-button.is-style-ghost .wp-block-button__link:hover, .ff-hero--scrim .wp-block-button.is-style-ghost .wp-block-button__link:focus-visible { background: color-mix(in srgb, var(--wp--preset--color--base-2) 14%, transparent); border-color: var(--wp--preset--color--base-2); } /* Linksbuendiger Textblock in der gedeckten Zone — wie im Entwurf. * Der Textkasten sitzt IM Inhaltsbereich, statt den Cover-Innencontainer * zu verschieben: So bleibt der Seitenrand mit allen anderen Sektionen * buendig und die Zentrierlogik von Core bleibt unangetastet. */ .ff-hero__text { display: grid; gap: 0; } /* Versalien-Headline wie im Entwurf. Playfair laeuft in Grossbuchstaben * eng — die Sperrung gleicht das aus. Zeilenabstand darf enger als der * Display-Standard sein, weil Versalien keine Unterlaengen haben. */ /* KURSIV — das ist das prägende Merkmal des Entwurfs, an H1 wie an H2. * Aufrecht gesetzt wirkt dieselbe Schrift wie ein anderes Design. Die * Sperrung gleicht die enge Laufweite der Playfair-Versalien aus. */ /* AUFRECHT, nicht mehr kursiv (14.08., nach dem Claude-Entwurf Home.dc.html). * Kursiv kam aus Latifas Mockup; der aktuelle Entwurf setzt die Hero-H1 * aufrecht in Versalien und laesst kursiv den Zitaten (ff-bokeh__zitat). * Damit haben H1 und Zitat wieder zwei unterscheidbare Register. */ .ff-hero__title { text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.08; text-wrap: balance; } /* Subline des Startseiten-Heros: 25 px, Schriftschnitt 300 (Home.dc.html). * Ueber .ff-lead allein waere sie 22 px und im Normalschnitt — der leichte * Schnitt ist hier Absicht, er setzt die Zeile deutlich von der massiven * Versalien-H1 darueber ab. */ .ff-hero__text .ff-lead { font-size: clamp(1.125rem, 0.86rem + 1.1vw, 1.5625rem); font-weight: 300; } /* Unterstrichener Textlink neben der Minze-Pille. Im Entwurf steht dort kein * zweiter Button — das hält die Blickführung auf einer einzigen Handlung. */ .ff-hero__hinweis { margin: 0; font-size: var(--wp--preset--font-size--sm); } .ff-hero__hinweis a { color: inherit; text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); } .ff-hero__hinweis a:hover, .ff-hero__hinweis a:focus-visible { text-decoration-color: currentColor; } .ff-hero__aktionen { align-items: center; } /* --- Freigestellte Person im Hero --- * * Bewusst UEBER die Hero-Hoehe hinaus (106 %) und unten buendig: Die * Rahmenkante schneidet die Figur an. Endet sie stattdessen frei im Bild, * wirkt sie aufgeklebt — genau das war einer der Kritikpunkte an Latifas * Entwurf, und ihn wollen wir nicht nachbauen. */ /* Text und Figur stehen als Flex-Paar nebeneinander — bewusst NICHT * absolut positioniert. Ein absolut gesetztes Element haengt am naechsten * positionierten Vorfahren, und das ist hier der Inner-Container von Core, * dessen Kasten breiter ausfaellt als der Cover selbst. Die Figur landete * dadurch neben dem Fenster. Flex bezieht sich auf den tatsaechlichen * Inhaltsfluss und ist gegen solche Ueberraschungen immun. */ .ff-hero__figur { margin: 0; /* Rein dekorativ — die Aussage steht vollstaendig im Text daneben. */ pointer-events: none; } /* Die Vertrauenszeile ist der laengste Kleintext im Hero. Ohne Begrenzung * laeuft sie bis an den Spaltenrand, wo der Scrim schon duenn ist — dort fiel * sie unter AA. Frueher umbrechen loest das ohne mehr Deckung. */ .ff-hero__trust { max-width: 29rem; } .ff-hero__figur img { display: block; width: 100%; height: auto; /* Weicher Schlagschatten statt harter Kante: sonst schwebt die * Freistellung sichtbar ueber dem Bokeh. */ filter: drop-shadow(0 1.5rem 2.5rem rgba(36, 48, 30, 0.22)); } /* GEOMETRIE AUS DEM ENTWURF (Home.dc.html), 15.08.2026. * * Der Entwurf legt den Textblock und die Freistellung nicht nebeneinander, * sondern uebereinander: Die Figur liegt absolut in der Sektion * (`right:4%; bottom:0; width:42%; height:86%`, `fit=contain`), der Text * steht davor und ist vertikal zentriert (`padding:0 56px`, * `max-width:860px`). * * Vorher stand hier ein Flex-Paar mit dem Vermerk, absolut positionieren * gehe nicht, weil der Innencontainer breiter sei als der Cover. Das lag * an `contentSize: 74rem` — der Container war constrained. Nimmt man ihm * die Begrenzung, ist er exakt so breit wie der Cover, und die * Prozentwerte des Entwurfs stimmen wieder. * * Messbare Folge der alten Fassung: Figur 437x640 bei x=906 statt 598x705 * bei x=770 — also deutlich zu klein und zu weit rechts. */ @media (min-width: 782px) { /* KEIN `position: relative` hier — sonst wird der Innencontainer zum * Bezugsrahmen der Figur, und die Prozentwerte des Entwurfs beziehen * sich auf den falschen Kasten. Die Figur soll am Cover haengen, der * ist `position: relative` und exakt so breit wie die Sektion. * * `box-sizing` ausdruecklich: Ohne das rechnete der Container * 100% + 2x56px Polster = 1537px bei 1425px Cover und lief 112px * ueber den rechten Rand hinaus; dieselbe Rechnung machte ihn 932 * statt 820px hoch und zog die Figur auf 802px Hoehe mit. */ .ff-hero--photo { --ff-hero-textbreite: 53.75rem; /* 860px, Entwurf */ } .ff-hero--photo .wp-block-cover__inner-container { box-sizing: border-box; display: flex; align-items: center; max-width: none; width: 100%; min-height: var(--ff-hero-hoehe); padding-inline: 3.5rem; /* Core gibt dem Innencontainer den globalen Blockabstand als * `margin-block-start` mit — das machte den Hero 29px hoeher als * die 820px des Entwurfs. */ margin-block: 0; } .ff-hero--photo .ff-hero__text.ff-hero__text { position: relative; z-index: 2; padding-bottom: 2.5rem; margin-left: 0 !important; margin-right: 0 !important; } /* Hinter dem Text (z-index 1), unten buendig, ueber die Hoehe skaliert. */ .ff-hero--photo .ff-hero__figur { position: absolute; right: 4%; bottom: 0; z-index: 1; width: 42%; height: 86%; margin: 0; } .ff-hero--photo .ff-hero__figur img { width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: bottom center; } } /* AUSSCHNITT WIE IM ENTWURF. * * `lucidflowers7.jpg` ist ein Hochformat von 1928x2560; im Hero ist davon nur * ein Band zu sehen. Mittig geschnitten — die Vorgabe von object-fit — landet * das Band auf der weissen Pfingstrose, und weisse Schrift wird unlesbar. * Latifa hat den UNTEREN Teil mit den gruenen Stielen genommen. * * Nachgerechnet ueber den Farbabstand zwischen ihrem Entwurf und elf * Ausschnitten: mittig 0,214 — unten 0,076. Die mittlere Helligkeit faellt * dabei von L=0,602 auf 0,455, und genau deshalb traegt ihr Entwurf weisse * Schrift. Nicht die Datei war falsch, der Ausschnitt war es. */ .ff-hero--photo > .wp-block-cover__image-background { object-position: center bottom; } /* Schmaler Schirm: nebeneinander geht nicht mehr auf. Die Figur rutscht * unter den Text und bleibt rechtsbuendig, der Hero waechst mit. */ @media (max-width: 781px) { .ff-hero__figur { width: 80%; max-width: 22rem; margin: var(--wp--preset--spacing--lg) 0 calc(var(--wp--preset--spacing--xxl) * -1) auto; } } /* WordPress gibt fuer den constrained-Layout-Container * `margin-left:auto !important` aus und zieht den Kasten damit mittig. * Nur ein eigenes !important kommt dagegen an. */ /* Breite ueber eine Variable, damit die Foto-Variante sie setzen kann, ohne * dass sich zwei gleich spezifische Regeln um `max-width` streiten — genau * das hatte den Hero-Text auf 34rem festgehalten, obwohl der Entwurf 860px * (53.75rem) vorgibt. Die spaetere Regel gewann, nicht die gemeinte. */ .ff-hero--left .ff-hero__text.ff-hero__text { max-width: var(--ff-hero-textbreite, 34rem); margin-left: 0 !important; margin-right: auto !important; text-align: left; } .ff-hero--left .ff-eyebrow--rules { justify-content: flex-start; } .ff-hero--left .ff-eyebrow--rules::before { display: none; } .ff-hero--left .ff-lead { margin-inline: 0; max-width: 30rem; } /* Mobil kippt der Verlauf von waagerecht auf senkrecht — und dreht dabei die * Richtung um: Der Text steht jetzt OBEN, die Figur darunter. Also deckt der * Schleier oben und laeuft nach unten aus, damit Jelina frei steht. */ @media (max-width: 781px) { .ff-hero--veil .wp-block-cover__background { background: linear-gradient( 180deg, color-mix(in srgb, var(--wp--preset--color--base) 46%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--base) 40%, transparent) 46%, color-mix(in srgb, var(--wp--preset--color--base) 12%, transparent) 100% ) !important; } .ff-hero--scrim .wp-block-cover__background { background: linear-gradient( 180deg, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.56) 46%, rgba(0, 0, 0, 0.2) 100% ) !important; } .ff-hero--left .wp-block-cover__inner-container { max-width: none; } .ff-hero--left .ff-lead { max-width: none; } } /* --- 8g4. Header über dem Foto-Hero --- * Auf Seiten, die mit einem Foto-Hero beginnen, liegt der Header * transparent darueber — wie im Entwurf. Body-Klasse kommt aus * inc/setup.php. Sticky entfaellt dort bewusst: Ein Header, der beim * Scrollen von hell auf dunkel umschlagen muesste, waere ohne JavaScript * nur mit Tricks zu haben, die im Zweifel unlesbar umschlagen. */ .ff-has-overlay-header .ff-header { position: absolute; inset: 0 0 auto; z-index: 50; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } /* Der Hero muss ganz oben ansetzen, sonst steht ueber ihm ein Cremestreifen * und der Header schwebt halb darueber. Die 24 px kommen aus dem blockGap * zwischen Header-Part und main — sinnvoll, wenn der Header eine eigene * Leiste ist, falsch, wenn er im Bild liegt. */ .ff-has-overlay-header .wp-site-blocks > main { margin-top: 0; } /* Eigener Schleier fuer die Kopfzeile. * * Der Hero-Scrim laeuft waagerecht aus, die Navigation aber quer ueber die * ganze Breite — auf der offenen rechten Seite stand sie damit auf hellen * Bildpartien und verschwand. Ein weicher Verlauf von oben loest das, ohne * den Hero-Verlauf anzufassen. * * z-index -1 ist hier zwingend: Ein absolut gesetztes Pseudoelement ohne * z-index wird NACH dem Text gemalt und wuerde ihn zudecken. */ /* ENTFERNT 15.08.2026 — der Header traegt keinen eigenen Schleier mehr. * * Hier lag ein zweiter, kraeftiger Verlauf (55 % Schwarz, auslaufend unter * die Kopfzeile). Zusammen mit dem Hero-Verlauf ergab das einen sichtbaren * grauen Balken ueber dem Motiv, der an seiner Unterkante hart abriss — * genau die Stufe, die er verhindern sollte. * * Der Entwurf loest es mit EINEM Verlauf: dem Hero-Schleier von oben * (28 %, transparent ab 30 % Hoehe). Die Kopfzeile selbst ist vollstaendig * transparent und traegt nur eine Haarlinie (siehe ::after unten). */ .ff-has-overlay-header.ff-overlay-header--hell .ff-header::before { content: none; } /* Feine Trennlinie unter der Kopfzeile — so steht sie im Entwurf und sie * setzt den Header sauber vom Motiv ab, ohne ihn zu beschweren. */ .ff-has-overlay-header.ff-overlay-header--hell .ff-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; /* 28 % — Entwurf: `border-bottom: 1px solid rgba(255,255,255,0.28)`. */ background: color-mix(in srgb, var(--wp--preset--color--base-2) 28%, transparent); pointer-events: none; } /* Der Platz fuer den ueberlagernden Header gehoert an den INHALT, nicht an * den Cover-Rahmen: Das sticky Hintergrundbild sitzt sonst erst hinter dem * Innenabstand und das Foto beginnt 180px zu tief. * .ff-hero-bokeh steht mit im Selektor, seit auch die Unterseiten-Heroes * (Praxis, Fachpersonen, Events) den Header im Bild tragen. */ .ff-has-overlay-header .ff-hero .wp-block-cover__inner-container, .ff-has-overlay-header .ff-hero-bokeh .wp-block-cover__inner-container { padding-top: 7rem; } /* UNTERSEITEN-HERO: KOPFZEILENHOEHE **PLUS** DEM POLSTER DES ENTWURFS. * * Die Regel weiter oben (Abschnitt „stehende Hintergruende") setzt dafuer * schon `padding-block: 130px 150px` — sie kam nur nie an: * * .wp-block-cover.ff-hero-bokeh > …__inner-container (0,3,0) 110px * .ff-hero-bokeh > …__inner-container (0,2,0) 130/150 * .ff-has-overlay-header .ff-hero-bokeh … (0,3,0) nur oben * * Die erste Regel ist spezifischer als die zweite, die dritte steht spaeter * und ueberschrieb den oberen Wert mit der blossen Kopfzeilenhoehe. * Gemessen auf /praxis/ bei 1440px: 112px oben, 110px unten statt 242/150 — * das Zitat klebte an der Navigation, genau wie zuvor auf dem Telefon. * * Deshalb stehen beide Werte jetzt hier, hinter allen konkurrierenden * Regeln. Die schmalen Ansichten weiter unten ueberschreiben sie danach. */ .ff-has-overlay-header .ff-hero-bokeh .wp-block-cover__inner-container { padding-top: calc(7rem + 8.125rem); /* Kopfzeile + 130 */ padding-bottom: 9.375rem; /* 150 */ } /* Gleicher Umschaltpunkt wie die Kopfleiste (3f): Ab hier ist sie deutlich * flacher und braucht weniger Platz im Bild. */ @media (max-width: 1119.98px) { .ff-has-overlay-header .ff-hero .wp-block-cover__inner-container, .ff-has-overlay-header .ff-hero-bokeh .wp-block-cover__inner-container { padding-top: 4.5rem; } .ff-has-overlay-header .ff-hero-bokeh .wp-block-cover__inner-container { padding-top: calc(4.5rem + 8.125rem); } } /* SCHMALE SCHIRME: Kopfzeilenhoehe PLUS Luft, nicht nur Kopfzeilenhoehe. * * Die 4.5rem oben waren so bemessen, dass sie die ueberlagernde Kopfzeile * gerade freihalten. Gemessen auf 390px: Kopfzeile endet bei 61px, die H1 * begann bei 72px — 11px Abstand. Der Titel klebte damit an der * Navigation, obwohl technisch nichts ueberlappte. * * Der Entwurf setzt den Hero-Text vertikal mittig in die Flaeche unter der * Navigation; auf dem Telefon steht er im Fluss ueber der Freistellung. * Beides braucht denselben Atem nach oben. */ @media (max-width: 781.98px) { .ff-has-overlay-header .ff-hero .wp-block-cover__inner-container, .ff-has-overlay-header .ff-hero-bokeh .wp-block-cover__inner-container { padding-top: calc(4.5rem + 3rem); } /* Unterseiten-Heroes tragen nur ein Zitat und keine Freistellung. * Dort ist die Flaeche hoeher als der Inhalt — das Zitat stand oben und * darunter blieb die halbe Bildflaeche leer. Es sitzt jetzt mittig in * dem Raum, der unter der Kopfzeile bleibt. * * `min-height` am Innencontainer statt am Cover: Der Cover ist bei der * Technik fuer stehende Hintergruende `display: block`, dort gaebe es * keinen Flex-Kontext zum Zentrieren. */ .ff-has-overlay-header .ff-hero-bokeh .wp-block-cover__inner-container { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; /* Fester Wert, keine Variable: `--ff-hero-hoehe` ist nur an * .ff-hero definiert, nicht an .ff-hero-bokeh. `min-height: * var(--ff-hero-hoehe)` fiel dort still auf 0 zurueck — die * Zentrierung hatte damit nichts, worin sie zentrieren konnte. */ min-height: 62dvh; padding-bottom: 4.5rem; } } /* Die Infozeile traegt aus dem Pattern die Preset-Klassen fuer Rosmarin- * Flaeche und Schlagrahm-Text — beide mit !important. Ueber dem hellen Foto * muss beides gekippt werden, sonst steht heller Text auf hellem Grund. */ .ff-has-overlay-header .ff-header__bar { background: transparent !important; border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent); } .ff-has-overlay-header .ff-header__bar, .ff-has-overlay-header .ff-header__bar p, .ff-has-overlay-header .ff-header__bar a { color: var(--wp--preset--color--contrast) !important; } .ff-overlay-header--hell .ff-header__bar, .ff-overlay-header--hell .ff-header__bar p, .ff-overlay-header--hell .ff-header__bar a { color: var(--wp--preset--color--base-2) !important; } /* Standard ist der helle Schleier — dort traegt der Header Rosmarin. * Bei dunklem Scrim kehrt die Klasse ff-overlay-header--hell das um. */ .ff-has-overlay-header .ff-header__brand, .ff-has-overlay-header .ff-header__nav a, .ff-has-overlay-header .ff-header__bar, .ff-has-overlay-header .ff-header .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--contrast); } .ff-has-overlay-header .ff-header__badge::before { color: var(--wp--preset--color--accent-dark); } .ff-has-overlay-header .ff-header__nav a[aria-current="page"] { color: var(--wp--preset--color--accent-dark); } .ff-overlay-header--hell .ff-header__brand, .ff-overlay-header--hell .ff-header__nav, .ff-overlay-header--hell .ff-header__nav a, .ff-overlay-header--hell .ff-header__bar, .ff-overlay-header--hell .ff-header .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--base-2); } .ff-overlay-header--hell .ff-header__bar { border-bottom-color: color-mix(in srgb, var(--wp--preset--color--base-2) 22%, transparent); } .ff-overlay-header--hell .ff-header__nav a[aria-current="page"] { color: var(--wp--preset--color--cta); } /* Das Overlay-Menue selbst bleibt hell — dort gilt wieder Rosmarin. */ .ff-has-overlay-header .ff-header .wp-block-navigation__responsive-container.is-menu-open a { color: var(--wp--preset--color--contrast); } /* --- 8h. Hero --- */ /* ACHTUNG, hier lag ein Fehler: An dieser Stelle stand ein pauschaler * Creme-Verlauf fuer .ff-hero mit !important. Er hat dieselbe Spezifitaet wie * .ff-hero--veil / .ff-hero--scrim in Abschnitt 8g3, steht aber SPAETER in * der Datei — und hat die beiden gemessenen Varianten damit stillschweigend * ueberschrieben. Der Hero rendert dann cremeweiss ueberwaschen, und weisse * Schrift steht auf hellem Grund. * * Die Deckung gehoert ausschliesslich zur jeweiligen Variante (8g3). Wer hier * wieder eine allgemeine Regel einzieht, hebelt sie erneut aus. */ /* Als Custom Property, weil der Innencontainer dieselbe Hoehe braucht (8g5) * — zwei Stellen liefen sonst irgendwann auseinander. * * 820px ist die Vorgabe des Entwurfs (`min-height:820px`). Vorher standen * hier 78dvh, auf einem 900px hohen Fenster also 702px — der Hero war * 118px zu flach. Der Entwurf ist auf `min-width:1100px` gebaut und rechnet * in festen Pixeln; die dvh-Fassung war meine Zutat. * * Unter 782px bleibt es bei einer Viewport-Hoehe, weil ein 820px hoher * Hero auf dem Telefon fast den ganzen Schirm fuellt. */ .ff-hero { --ff-hero-hoehe: 78dvh; min-height: var(--ff-hero-hoehe); } @media (min-width: 782px) { .ff-hero { --ff-hero-hoehe: 51.25rem; /* 820px */ } } /* WP-Core setzt .wp-block-cover{color:#fff}. Auf unseren hellen Hero- * Flaechen wuerde damit jeder spaeter eingefuegte Block weiss auf Creme * rendern. Textfarbe deshalb am Container zuruecksetzen. */ .ff-hero .wp-block-cover__inner-container, .ff-hero-quote .wp-block-cover__inner-container, .ff-fotoband .wp-block-cover__inner-container { color: var(--wp--preset--color--body); } /* Die Karte auf dem Fotoband traegt dunkle Schrift. Ohne diese Zeile erbt * die Ueberschrift Cores Cover-Weiss und steht praktisch unsichtbar auf * dem cremefarbenen Kartengrund — genau das ist beim Umbau des CTA-Bandes * am 15.08.2026 passiert, weil die Klasse `ff-bokeh` mit ihrem Reset wegfiel. */ .ff-fotoband .ff-kartenstopper__titel { color: var(--wp--preset--color--contrast); } /* --- 8h2. Bokeh-Flaechen (Unterseiten-Heroes und Stopper) --- * * Latifas Entwurf gibt weiche, HELLE Bokeh-Farbfelder vor — je Unterseite * eine eigene Welt (gruen-rosa, blau, pfirsich). Ihre Schrift steht darauf * weiss, was 1,1:1 ergibt und nicht lesbar ist. * * Erster Versuch war, die Felder in die Tiefe zu ziehen, bis Weiss traegt. * Das war normkonform, hat aber den Zweck zerstoert: Alle vier Welten sahen * gleich dunkelgruen aus, die Unterscheidbarkeit war weg. * * Jetzt umgekehrt: Die Felder bleiben HELL wie im Entwurf, die Schrift steht * in Rosmarin. Damit sind die Welten klar unterscheidbar UND deutlich besser * lesbar als vorher. Gemessen am dunkelsten Ueberlagerungspunkt: * * Praxis (gruen-rosa) #ACBEBC L=0,493 -> 7,17:1 * Wissen (blau-gruen) #BBE0D9 L=0,688 -> 9,74:1 * Kurse (pfirsich) #D7CCC2 L=0,618 -> 8,81:1 * Weiterbildung (salbei) #C3D1C6 L=0,614 -> 8,75:1 * * AUFTEILUNG: `.ff-bokeh` malt, die Style-Variante liefert nur die drei * Farben. So tragen Hero und Stopper dieselbe Mechanik, und eine neue * Farbwelt ist ein Vierzeiler statt eines Duplikats. */ .ff-bokeh { /* Grundton unter allen Bloems. Faellt ein Verlauf aus, bleibt Rosmarin * auf Schlagrahm bei 13,6:1. */ background-color: var(--wp--preset--color--base-2); /* Rueckfall, falls jemand .ff-bokeh ohne Farbwelt einsetzt. */ --ff-bokeh-a: #2E8C80; --ff-bokeh-a-mix: 30%; --ff-bokeh-b: #C15C74; --ff-bokeh-b-mix: 26%; --ff-bokeh-c: #5CCFC0; --ff-bokeh-c-mix: 20%; } /* Die :has()-Klausel macht die Bokeh-Module bildfaehig. Ohne sie uebermalt * der Verlauf mit !important jedes eingesetzte Foto — der Redaktion erscheint * "Ersetzen" dann als kaputte Funktion. Liegt ein Cover-Bild vor, tritt die * Regel zurueck und der Cover verhaelt sich wie ein normaler Core-Cover. */ .ff-bokeh:not(:has(.wp-block-cover__image-background)) .wp-block-cover__background { background: radial-gradient(58% 74% at 18% 24%, color-mix(in srgb, var(--ff-bokeh-a) var(--ff-bokeh-a-mix), transparent) 0%, transparent 62%), radial-gradient(48% 62% at 84% 30%, color-mix(in srgb, var(--ff-bokeh-b) var(--ff-bokeh-b-mix), transparent) 0%, transparent 66%), radial-gradient(72% 72% at 60% 92%, color-mix(in srgb, var(--ff-bokeh-c) var(--ff-bokeh-c-mix), transparent) 0%, transparent 70%), var(--wp--preset--color--base-2) !important; opacity: 1 !important; } /* Vier Farbwelten — als Block-Styles im Editor umschaltbar * (inc/block-styles.php). WordPress schreibt daraus `is-style-`. */ .is-style-welt-praxis { --ff-bokeh-a: #2E8C80; --ff-bokeh-a-mix: 30%; --ff-bokeh-b: #C15C74; --ff-bokeh-b-mix: 26%; --ff-bokeh-c: #5CCFC0; --ff-bokeh-c-mix: 20%; } .is-style-welt-wissen { --ff-bokeh-a: #5CCFC0; --ff-bokeh-a-mix: 38%; --ff-bokeh-b: #2E8C80; --ff-bokeh-b-mix: 24%; --ff-bokeh-c: #E7F1EE; --ff-bokeh-c-mix: 40%; } .is-style-welt-kurse { --ff-bokeh-a: #C15C74; --ff-bokeh-a-mix: 34%; --ff-bokeh-b: #F5D3B8; --ff-bokeh-b-mix: 45%; --ff-bokeh-c: #5CCFC0; --ff-bokeh-c-mix: 16%; } .is-style-welt-weiterbildung { --ff-bokeh-a: #56624C; --ff-bokeh-a-mix: 26%; --ff-bokeh-b: #2E8C80; --ff-bokeh-b-mix: 26%; --ff-bokeh-c: #EDE8DC; --ff-bokeh-c-mix: 40%; } /* KEINE MINDESTHOEHE FUER DEN UNTERSEITEN-HERO. * * Hier stand `min-height: 52dvh`. Die Entwuerfe geben den Unterseiten-Heroes * gar keine Mindesthoehe: Praxis, Wissen und Fachpersonen setzen * `padding:130px 56px 150px` um das Zitat, Vision und Kontakt * `110px ... 130px`. Die Hoehe kommt also aus Polster und Inhalt. * * `52dvh` band erst auf hohen Schirmen und wuchs dort ueber die Vorgabe * hinaus: bei 1343px Fensterhoehe wurden daraus 698px statt der rund 500px, * die Polster und Zitat ergeben. Auf einem 900px hohen Fenster waeren es * 468px gewesen und niemandem aufgefallen. Gemeldet von Lucas am 15.08.2026 * („Zu hoch?"), gemessen am 19.08. bei 1920x1343. * * Der Stopper behaelt seine Mindesthoehe: ein Zitatband ohne sie faellt bei * kurzem Zitat auf Textzeilenhoehe zusammen. */ .ff-stopper { min-height: 26dvh; } /* --- 8h2a. Kartenstopper (CTA, Newsletter) --- * Latifas viertes Grundmuster: eine cremefarbene Karte, die auf einem * Farbband liegt. Auf Seite 4 des Mockups steht sie auf Gruen-Rosa, auf * Seite 8 dieselbe Karte auf Petrol — ein Modul, zwei Farbwelten. * * Die Hoehe kommt hier aus dem Innenabstand, nicht aus min-height: Der * Inhalt der Karte schwankt zwischen drei Zeilen (CTA) und einem Formular * (Newsletter), eine feste dvh-Hoehe wuerde einen der beiden Faelle * quetschen oder leer laufen lassen. */ .ff-kartenband { min-height: 0; } /* Fotoband — vollbreites Motiv, Karte darauf (Entwurf: „CTA Kennenlernen", * 110px hoch, 56px quer). Doppelter Selektor, weil Cores Blockstile NACH * dem Theme-CSS laden und `.wp-block-cover { padding: 1em }` sonst gewinnt. */ .wp-block-cover.ff-fotoband { padding-block: 6.875rem; /* 110px */ padding-inline: var(--wp--preset--spacing--gutter); } /* Variante als ganze Inhaltssektion (Praxis, „Spezialisiert auf"): * 120px Polster statt 110px, und die Schrift steht hell auf dem Motiv. */ .wp-block-cover.ff-fotoband--sektion { padding-block: var(--wp--preset--spacing--section); } /* KEINE flaechige helle Schrift auf dem Innencontainer. * * Genau das stand hier zuerst — und die vier Karten auf dem Band erbten * sie: Schlagrahm auf Schlagrahm, Ueberschriften und Listen unsichtbar. * Derselbe Fehler wie beim CTA-Band eine Stunde vorher. * * Hell gehoert nur, was DIREKT auf dem Motiv steht. Die Sektionsueberschrift * traegt ihre Farbe als Blockattribut im Pattern (`textColor: base-2`); * alles in den Karten bleibt bei den normalen Textfarben. */ .ff-fotoband--sektion .ff-card :is(h1, h2, h3, h4) { color: var(--wp--preset--color--contrast); } /* Sterne ausgenommen: Sie tragen Minze und wurden von dieser Regel * sonst mit eingefaerbt (gleiche Spezifitaet, spaeter im Stylesheet). */ .ff-fotoband--sektion .ff-card, .ff-fotoband--sektion .ff-card :is(p, li):not(.ff-stimme__sterne) { color: var(--wp--preset--color--body); } /* Die Karten auf dem dunklen Band tragen einen kraeftigeren Schatten als * auf heller Flaeche — sonst verschwinden sie im Motiv. * Entwurf: 0 14px 40px /0.22, Hover 0 24px 56px /0.3, Polster 36/30, * Radius 20, Abstand 14. */ .ff-fotoband--sektion .ff-card.ff-card { padding: 2.25rem 1.875rem; gap: 0.875rem; border-radius: var(--wp--custom--radius--card-small); box-shadow: 0 14px 40px rgba(36, 48, 30, 0.22); } .ff-fotoband--sektion .ff-card.ff-card:hover { transform: var(--wp--custom--lift--hover); box-shadow: 0 24px 56px rgba(36, 48, 30, 0.3); } /* --- Bildslider „Ueber mich" (Entwurf: Ueber-mich.dc.html) --- * Ueberblendung 0.9s, Punkte 11px unten mittig, aktiv in Minze. * Ohne JavaScript bleibt die erste Folie sichtbar stehen — die uebrigen * sind dann nicht erreichbar, aber es fehlt kein Inhalt, der nicht auch * im Text daneben stuende. */ .ff-bildslider { position: relative; height: 37.5rem; /* 600px, Entwurf */ min-width: 0; } .ff-bildslider__buehne { position: absolute; inset: 0; border-radius: var(--wp--custom--radius--media); overflow: hidden; } .ff-bildslider__folie { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; transition: opacity 0.9s ease; } .ff-bildslider__folie.ist-aktiv { opacity: 1; pointer-events: auto; } .ff-bildslider__folie img { width: 100%; height: 100%; object-fit: cover; display: block; } .ff-bildslider__punkte { position: absolute; bottom: 0.875rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0; z-index: 5; } /* KLICKFLAECHE 24px (WCAG 2.5.8), sichtbar bleibt der 11px-Punkt aus dem * Entwurf — er sitzt als ::before in der Mitte. Vorher war der Button * selbst 11px gross, bei 21px Mittenabstand (18.09.2026, Pruefung). Der * Mittenabstand ist jetzt 24px, drei Pixel mehr als im Entwurf. */ .ff-bildslider__punkt, .ff-bildslider__pause { position: relative; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; } .ff-bildslider__punkt::before { content: ""; position: absolute; inset: 6.5px; border-radius: 50%; background: color-mix(in srgb, var(--wp--preset--color--base-2) 65%, transparent); transition: background 0.3s, transform 0.3s; } .ff-bildslider__punkt.ist-aktiv::before { background: var(--wp--preset--color--cta); transform: scale(1.25); } .ff-bildslider__punkt:focus-visible, .ff-bildslider__pause:focus-visible { outline: 2px solid var(--wp--preset--color--base-2); outline-offset: 0; } /* ANHALTEN (WCAG 2.2.2): theme.js setzt den Knopf unten rechts ins Bild, * wenn der Slider von selbst wechselt — nicht in die Punktreihe, die ist * eine tablist. Zwei Balken = anhalten, Dreieck = weiterlaufen lassen. */ .ff-bildslider__pause { position: absolute; right: 0.75rem; bottom: 0.875rem; z-index: 5; /* Dunkler Kreis, helles Zeichen: sichtbar auf weisser Studiowand wie * auf dunklem Saal (Vortragsfotos seit 18.09.2026). */ background: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent); } .ff-bildslider__pause::before, .ff-bildslider__pause::after { content: ""; position: absolute; top: 7px; width: 3px; height: 10px; border-radius: 1px; background: color-mix(in srgb, var(--wp--preset--color--base-2) 85%, transparent); } .ff-bildslider__pause::before { left: 8px; } .ff-bildslider__pause::after { left: 13px; } .ff-bildslider__pause[aria-pressed="true"]::before { left: 9px; width: 0; height: 0; border-radius: 0; background: none; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid color-mix(in srgb, var(--wp--preset--color--base-2) 85%, transparent); } .ff-bildslider__pause[aria-pressed="true"]::after { display: none; } @media (max-width: 63.99em) { .ff-bildslider { height: 24rem; } } /* Stimmenband: Die Karten liegen auf dem Motiv und brauchen mehr Radius * und Schatten als auf heller Flaeche (Entwurf: Radius 28, Polster * 38/36/34, Schatten 0 12px 34px /0.14). */ .ff-stimmenband .ff-card.ff-card { padding: 2.375rem 2.25rem 2.125rem; border-radius: 1.75rem; box-shadow: 0 12px 34px rgba(36, 48, 30, 0.14); text-align: center; align-items: center; } /* :not() ausdruecklich — sonst faerbt diese Regel auch die Sterne um. * Sie ist mit 0,3,1 spezifischer als `.ff-stimme__sterne` und hatte sie * von Minze auf Salbei gezogen. */ .ff-stimmenband .ff-card :is(p, blockquote, cite):not(.ff-stimme__sterne) { color: var(--wp--preset--color--body); } .ff-stimmenband .ff-stimme__zitat { font-size: 0.9375rem; /* 15px */ line-height: 1.7; } .ff-stimmenband cite { margin-top: auto; font-size: 0.875rem; /* 14px */ font-weight: 500; font-style: normal; color: var(--wp--preset--color--contrast); } /* Sterne ueber dem Zitat — Minze, 18px, 6px Sperrung (Entwurf). */ .ff-stimme__sterne { margin: 0; color: var(--wp--preset--color--cta); font-size: 1.125rem; letter-spacing: 6px; /* Sperrung schiebt optisch nach links — rechts ausgleichen. */ text-indent: 6px; line-height: 1; } /* Absendeknopf im Kontaktformular — Entwurf: 16px, Polster 15/42. * Er ist ein