"), * NICHT Header-/Footer-/Widget-Ueberschriften. "!important" noetig, da Blocksy selbst * bereits eine Textfarbe fuer Ueberschriften ausliefert. * * Nachtrag 2026-09-30, selber Tag: zunaechst zentriert, auf Kundenwunsch ("Der Hero * gefaellt mir noch nicht. Wir machen doch alle Ueberschriften linksbuendig.") wieder * auf linksbuendig zurueckgestellt. Gilt jetzt einheitlich fuer alle Ueberschriften * (H1-Seitentitel unten inklusive). */ .entry-content h2, .entry-content h3 { text-align: left !important; color: var(--color-primary) !important; } /* * Seitentitel (H1, Blocksy "page-title" im "entry-header"): linksbuendig + Markenblau, * wie die Inhaltsueberschriften oben (Kundenwunsch 2026-09-30, s. Kommentar oben). * Ground-Truth-Struktur per javascript_tool geprueft: * "

". / .entry-header .page-title { text-align: left !important; color: var(--color-primary) !important; } / * Kicker (Standortzeile ueber dem Einleitungstext, z. B. "Foehrenstrasse 15 · Nittendorf- * Undorf"): Markenfarbe Indigo statt des WordPress-Presets "vivid-purple" (#9B51E0), das * nicht zur Palette gehoert und auf Creme nur 4,03:1 erreicht (Design-Review 2026-10-22). * Im Editor als "Zusaetzliche CSS-Klasse(n)": kicker. / .entry-content .kicker { color: var(--color-primary); font-weight: 600; } / ---------- Card: Basis-Karte ---------- / .card { background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-md); } .card--alt { background: var(--color-surface-alt); } / * Pill-Photo (Stand 2026-09-30, ersetzt die fruehere Custom-HTML-Umsetzung * .gallery-card/.gallery-cardphoto/.caption-pill): Bild mit Pillen-Bildunterschrift, * OHNE eigenes HTML - zielt bewusst auf die Standard-Blockstruktur, die ein ganz normaler, * im wp-admin frei editierbarer "Bild"-Block (wp:image, auch als Kind eines wp:gallery) * von sich aus erzeugt: *
* *
Text
*
* Aktiviert wird das im Editor ganz normal ueber das Feld "Zusaetzliche CSS-Klasse(n)" * (Block-Einstellungen, Seitenleiste rechts) - Bild bleibt ueber die Mediathek * austauschbar, die Bildunterschrift bleibt ein normales, direkt antippbares Textfeld. * Kein Custom-HTML-Block mehr noetig, siehe CLAUDE.md Abschnitt 11 ("Gutenberg nativ"). * * Wichtig: Die Bildunterschrift (figcaption) haengt bewusst zur Haelfte UNTER den Bildrand * hinaus (translateY 50%) - deshalb duerfen "height" und "overflow: hidden" NICHT auf der * Figure selbst stehen (das wuerde die Pille am eigenen Rand abschneiden, da figcaption ein * Kind derselben Figure ist), sondern nur auf dem . Aus demselben Grund gehoert auch * der Scale-Hover aufs , nicht auf die Figure: skaliert man nur das Bild innerhalb * eines fest bleibenden, abgeschnittenen Rahmens, zoomt man in einen KLEINEREN * Bildausschnitt hinein - hier gibt es aber gar keinen zusaetzlichen Rahmen mehr, das * traegt Groesse/Rundung/Schatten direkt selbst, nichts schneidet es zusaetzlich ab. / .wp-block-image.pill-photo { position: relative; margin: 0 0 var(--space-lg); } .wp-block-image.pill-photo:hover { z-index: 2; } / * WordPress blendet fuer Galerie-Bilder MIT Bildunterschrift zusaetzlich ein eigenes, * unsichtbares ::before-Overlay ein (verschwommener, eckiger Verlaufsstreifen unten, * gedacht fuer die Standard-Bildunterschrift) - ohne eigene Rundung. Es sass ohne * Border-Radius hinter unserer runden Pille und liess sie dadurch eckig wirken. * Ground-Truth-Fund 2026-09-30, siehe CLAUDE.md Abschnitt 2. / .wp-block-image.pill-photo::before { content: none !important; } / * WordPress umschliesst das Bild mit einem Link (Klick oeffnet Vollbild) und setzt diesen * standardmaessig auf "display:inline-block" - dadurch wird der Link (und mit ihm das Bild, * trotz eigenem width:100%) nur so breit wie das Originalbild, nicht so breit wie die Spalte. * Ground-Truth-Fund 2026-09-30. * * Rundung + Schatten sitzen bewusst HIER auf dem Link-Wrapper (nicht mehr auf dem * selbst) und clippen per "overflow:hidden": Chromium/Edge rundet "border-radius" nicht * sauber, wenn dasselbe Element zusaetzlich eine eigene Compositing-Ebene bekommt (hier * noetig fuer den Hover-Zoom, siehe "transform" unten) - es blieb ein haarfeiner weisser * Riss an allen vier Ecken sichtbar (Kundenfeedback mit Screenshot, betraf alle * Galerie-Bilder, in Edge rund statt eckig sichtbar). Selbe Lehre wie beim Firefox- * Pillen-Fix weiter unten: Rundung/Clipping und Transform/Filter gehoeren auf zwei * getrennte Elemente. Das selbst bleibt rechteckig, der Wrapper rundet es ab. / .wp-block-image.pill-photo > a { display: block; width: 100%; overflow: hidden; border-radius: var(--radius-card); box-shadow: var(--shadow-soft); transition: box-shadow 0.25s ease-out; } .wp-block-image.pill-photo:hover > a { box-shadow: var(--shadow-card); } .wp-block-image.pill-photo img { display: block; width: 100%; height: 220px; object-fit: cover; transition: transform 0.25s ease-out; / ueberschreibt den site-weiten Bilder-Rahmen weiter unten - Pille braucht keinen / border: none; box-shadow: none; } .wp-block-image.pill-photo:hover img { / Stand 2026-09-30, Kundenwunsch: Zoom auf die Haelfte reduziert (war scale(1.06)) - bei zu starkem Zoom beruehrten sich benachbarte Galerie-Bilder beim Hover fast. / transform: scale(1.03); } / * Mehr Weissraum zwischen Galerie-Bildern (Stand 2026-09-30, Kundenwunsch: "zu eng, vor * allem beim Hover beruehren sie sich fast"). WordPress liefert hier per Core-Stylesheet * einen Standard-Gap von 24px (--space-md) - bewusst auf --space-lg angehoben, site-weit * fuer jede Galerie, nicht nur auf einzelnen Seiten. * * Wichtige Ground-Truth-Falle (Nachtrag, selber Tag): WordPress berechnet die Breite jeder * Galerie-Kachel NICHT aus der echten "gap"-Eigenschaft, sondern aus einer eigenen * CSS-Variable "--wp--style--unstable-gallery-gap" (Fallback 16px), z. B. * ".columns-3 figure { width: calc(33.333% - var(--wp--style--unstable-gallery-gap).667) }". Wird nur "gap" erhoeht, ohne diese Variable mitzuziehen, rechnet WordPress die * Kachelbreite weiterhin mit dem alten, zu schmalen Wert - in Summe (3 Kacheln + 2 echte, * breitere Gaps) passt dann nicht mehr in die Zeile, und die dritte Kachel rutscht runter * (genau das hat der Kunde als "nur noch 2 Bilder nebeneinander" gemeldet). Deshalb beide * zusammen setzen. / .wp-block-gallery { gap: var(--space-lg) !important; --wp--style--unstable-gallery-gap: var(--space-lg) !important; } / * Tablet/schmaleres Fenster (Stand 2026-09-30, Kundenwunsch: "wenn schmaler als so, nur * noch 2 Bilder nebeneinander"): Zwischenstufe zwischen der vollen Spaltenzahl (Desktop) * und der mobilen 1-Spalten-Regel weiter unten. Breakpoint 1000px = Blocksys eigener * Tablet-Breakpoint (siehe tokens.css-Kommentar zu Responsive-Regeln). Muss VOR der * 690px-Regel stehen, damit bei noch schmaleren Fenstern (<690px) die spaetere, * spezifischere 1-Spalten-Regel gewinnt (beide gleich wichtig/!important, bei * Gleichstand entscheidet die Reihenfolge im Stylesheet). / @media (max-width: 1000px) { .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2) !important; } } / * Mobil (Stand 2026-09-30, Kundenwunsch: "immer nur ein Bild, nicht zwei nebeneinander"): * WordPress' eigene Spalten-Breiten-Regeln (.columns-2/.columns-3/... figure { width: * calc(N% - gap) }) gelten unveraendert ueber alle Bildschirmbreiten - kein automatisches * Zusammenklappen auf 1 Spalte unterhalb des mobilen Breakpoints. Deshalb hier explizit * erzwungen, unabhaengig von der im Editor gewaehlten Spaltenzahl. Breakpoint 690px = * Blocksys eigener Mobil-Breakpoint (siehe tokens.css-Kommentar zu Responsive-Regeln). / @media (max-width: 690px) { .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: 100% !important; } } / * Variante fuer technische Plaene (z. B. Grundriss): nichts beschneiden, mehr Hoehe. * Zusaetzlich zu "pill-photo" ins Feld "Zusaetzliche CSS-Klasse(n)" eintragen. / .wp-block-image.pill-photo--contain img { height: 480px; object-fit: contain; } / * Variante fuer ein grosses Hero-Foto (z. B. Balkon-Foto neben dem Einleitungstext): * mehr Hoehe als die kompakten Galerie-Kacheln. Zusaetzlich zu "pill-photo" ins Feld * "Zusaetzliche CSS-Klasse(n)" eintragen. / .wp-block-image.pill-photo--tall img { height: 400px; } / * Bildunterschrift als Glas-Pille (bewusst mit echter Transluzenz, anders als beim Header): * Sie liegt immer auf einem bekannten, eigenen Foto (nicht auf wechselndem Seiteninhalt wie * der Header beim Scrollen) - Glas-Optik mit weisser Schrift funktioniert hier zuverlaessig. * * Firefox-Fix, 2. Anlauf (Stand 2026-09-30): "overflow: hidden" direkt auf demselben * Element wie "backdrop-filter" reicht in Firefox NICHT zuverlaessig - Firefox hat einen * bekannten Fehler, bei dem genau diese Kombination (overflow:hidden + backdrop-filter + * border-radius auf EINEM Element) den Weichzeichner trotzdem eckig ueber die runden Ecken * hinausbluten laesst. Robuster Fix: Der Weichzeichner wandert auf ein eigenes * "::before"-Pseudoelement (positioniert, inset:0, hinter dem Text via z-index:-1 + * isolation:isolate), die eigentliche Bildunterschrift traegt selbst KEINEN Filter mehr, * nur noch "overflow:hidden" + "border-radius" - und clippt damit ein simples, filterfreies * Pseudoelement, was in allen Browsern zuverlaessig funktioniert. * * Breite: standardmaessig per "left"+"right" auf die Bildbreite (minus kleinem Rand) * gestreckt - passt fuer die schmalen Galerie-Kacheln (Kundenfeedback 2026-09-30 * bestaetigt: dort soll es genau so bleiben). Fuer die breite Hero-Variante * (".pill-photo--tall") gibt es weiter unten eine gezielte Ausnahme auf ca. 70 % Breite. / .wp-block-image.pill-photo .wp-element-caption { position: absolute !important; left: var(--space-sm) !important; right: var(--space-sm) !important; bottom: 0 !important; top: auto !important; transform: translateY(50%) !important; overflow: hidden !important; isolation: isolate !important; background: none !important; border: none !important; border-radius: var(--radius-pill) !important; padding: 6px var(--space-sm) !important; margin: 0 !important; max-height: none !important; width: auto !important; text-align: center !important; color: var(--color-surface) !important; font-size: 13px !important; font-weight: 600 !important; text-shadow: none !important; box-shadow: var(--shadow-floating) !important; transition: transform 0.25s ease-out !important; } / * Traegt den eigentlichen Glaseffekt (Farbe, Glanz-Verlauf, Weichzeichner, Rahmen) - * getrennt von der Bildunterschrift selbst, damit "overflow:hidden" (oben) nicht mit * "backdrop-filter" auf demselben Element kollidiert (siehe Kommentar oben). Farbe und * Glanz-Verlauf bewusst als ZWEI getrennte Eigenschaften statt einer background-Liste - * manche Renderer verwerfen color-mix, wenn es mit einem Gradient in derselben Werteliste * steht. "z-index:-1" setzt den Glaseffekt hinter den Text (funktioniert nur zuverlaessig, * weil die Bildunterschrift oben "isolation:isolate" hat und damit einen eigenen * Stacking-Context aufmacht). / / * Deckkraft 80 % statt 55 % (Stand 2026-10-22, Design-Review): Weisse 13-px-Schrift auf * 55 % Indigo ueber einem hellen Foto kam nur auf 2,96:1 Kontrast; bei 80 % sind es * auch ueber Weiss noch 5,7:1 (Ziel 4,5:1). Glasoptik (Weichzeichner, Glanz) bleibt. / .wp-block-image.pill-photo .wp-element-caption::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; border-radius: inherit !important; background-color: color-mix(in srgb, var(--color-primary) 80%, transparent) !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 55%) !important; -webkit-backdrop-filter: blur(16px) saturate(160%) !important; backdrop-filter: blur(16px) saturate(160%) !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; } / * Hover: Pille schiebt sich weiter nach unten (nicht groesser), damit mehr vom Foto * sichtbar wird - Bildausschnitt bleibt gleich, nur das Foto selbst zoomt (siehe oben). * !important noetig: WordPress liefert fuer Galerie-Bilder ein eigenes, sehr spezifisches * Inline-Stylesheet (#wp-block-gallery-inline-css, * ".wp-block-gallery.has-nested-images figure.wp-block-image figcaption"), das rein nach * CSS-Spezifitaet ueber unserer Klasse gewinnen wuerde (0,3,2 schlaegt 0,3,0) - unabhaengig * von der Ladereihenfolge. Ground-Truth-Fund 2026-09-30, siehe CLAUDE.md Abschnitt 2. / .wp-block-image.pill-photo:hover .wp-element-caption { transform: translateY(70%) !important; } / * Ausnahme fuer die breite Hero-Variante (Stand 2026-09-30, Kundenwunsch): dort soll die * Pille nur ca. 70 % der Bildbreite einnehmen statt komplett gestreckt zu werden - * horizontal zentriert statt per left/right gestreckt. / .wp-block-image.pill-photo--tall .wp-element-caption { left: 50% !important; right: auto !important; width: 70% !important; transform: translate(-50%, 50%) !important; } .wp-block-image.pill-photo--tall:hover .wp-element-caption { transform: translate(-50%, 70%) !important; } / * Buttons: 2026-09-30 aus dem Customizer-"Zusaetzlichen CSS" hierher verlagert. Greift * bewusst generisch auf ".wp-block-buttonlink" (jeder Gutenberg-Button site-weit, auch * ".is-style-outline" fuer die Sekundaer-Variante) statt auf eigene ".button-primary"/ * "-secondary"-Klassen - genau das war schon die tatsaechlich lebende Optik auf allen * Seiten (Startseite, Aussicht, Garten), nur bisher im Customizer statt im Plugin. Die * fruehere eigene Klassenpaar-Variante war nie im echten Content verwendet und ist damit * entfallen (ein Verantwortlicher pro Aufgabe, siehe CLAUDE.md Abschnitt 11). * 2026-09-30, Nachtrag: volle Pillenform ergaenzt (--radius-pill), damit Buttons zur * selben Formsprache wie Header, Badges und Caption-Pillen gehoeren (Kundenfeedback: * Buttons wirkten neben den echten Pillen noch zu eckig). / .wp-block-buttonlink { position: relative; border-radius: var(--radius-pill) !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 55%); -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 20%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.08); transition: transform 0.15s ease, box-shadow 0.15s ease; } .wp-block-buttonlink:hover { transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--color-primary) 28%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.08); } / Bilder/Cover: dezenter heller Rand + Schatten, site-weit (aus Zusaetzlichem CSS verlagert) / .wp-block-image img, .wp-block-cover { border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 12px 32px color-mix(in srgb, var(--color-primary) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5); } / Footer: Trennlinie + Linkfarbe (aus Zusaetzlichem CSS verlagert) / #footer { border-top: 1px solid var(--color-primary); padding-top: 20px; padding-bottom: 20px; } #footer a { color: var(--color-primary); text-decoration: none; } #footer a:hover { text-decoration: underline; } / * Badge: Standardfarbe ist Bordeaux (--color-accent), wie schon in den Design-Tokens * dokumentiert ("Badges, Hervorhebungen", siehe tokens.css/CLAUDE.md) - Bordeaux bekommt * damit die im Farbkonzept vorgesehene Aufgabe. --badge--primary als neutrale Indigo- * Variante, wo Bordeaux nicht passt (z. B. neben einem Bordeaux-Akzent auf derselben Karte). */ .badge { display: inline-block; padding: 4px 14px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)); color: var(--color-accent); } .badge--primary { background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); color: var(--color-primary); }