/* ======================================================================= * Startseiten-Redesign — Vergleichsversion (Design-Brief 2026-09-22) * ======================================================================= * Nur auf `body.home` wirksam (WordPress core setzt diese Klasse immer, * wenn is_front_page() true ist — auch bei statischer Startseite, nicht * nur beim Blog-Modus, per WP-Kernquelle wp-includes/post-template.php * get_body_class()). Datei bewusst getrennt von assets/css/patterns.css * und eigens verzeichnet in functions.php (silvalue_enqueue_assets()), * NUR auf is_front_page() geladen — gilt also ausschließlich für die * Startseite dieser Redesign-Kopie, keine andere Seite dieser Installation * ist betroffen. Grund: der Betreiber möchte laut eigener Aussage * zunächst nur die Startseite in eine neue Richtung testen ("wir starten * mit der Startseite"), Header/Footer/übrige Seiten bleiben im * bestehenden Design — exakt wie bei der bereits laufenden * Leistungen-Seiten-Vergleichsübung ("nur zum Vergleich testen"). * * Verwendet ausschließlich die neuen "sv-r-*"-Farb-/Schriftgrößen-Token * aus theme.json (nicht die bestehenden sv-*-Token) — siehe die * Begründung dort. * * NACHTRAG 2026-09-22 (spät) — Slugs ursprünglich "sv2-*" genannt, dann * auf "sv-r-*" umbenannt: WordPress wandelt Preset-Slugs beim Erzeugen * der CSS-Variablennamen intern per _wp_to_kebab_case() um und trennt * dabei einen Buchstaben von einer direkt folgenden Ziffer — aus dem * Slug "sv2-bg" wurde so lautlos die Variable * --wp--preset--color--sv-2-bg statt der erwarteten * --wp--preset--color--sv2-bg. Die Variablen waren die ganze Zeit im * kompilierten Stylesheet vorhanden, nur unter anderem Namen — deshalb * griffen weder Cache-Leerung noch Theme-Neustart noch Local-Neustart. * Um diese Falle dauerhaft zu vermeiden, keine Slugs mehr verwenden, bei * denen eine Ziffer direkt auf einen Buchstaben folgt. * * Quelle der Zahlenwerte: Design-Brief des Betreibers, 2026-09-22 * (Farben/Typografie/Layout, alle mit exaktem Hex-/px-Wert angegeben, * bis auf die Sekundärtextfarbe und die Schriftnamen, die der Betreiber * im selben Nachtrag bestätigt hat) sowie die zugehörige Mockup-PDF * "Silvalue-Selected-Design-v3.pdf" für den tatsächlichen deutschen * Wortlaut der Startseite (Hero, Kennzahlen, Leistungen, Über Silvalue, * Kontakt) — der Wortlaut ist bereits Deutsch, keine Übersetzung nötig. * ===================================================================== */ /* ----------------------------------------------------------------------- * 1) Layout-Grundmaß: volle Sektionsbreite, ~64px Randabstand bei 1440px, * Inhaltsraster bis ~1600–1680px auf großen Monitoren, mobil 20–24px. * * Eigene Custom Properties statt eine Änderung an theme.json * settings.layout.contentSize/wideSize — jene Werte sind global und * würden jede andere Seite/jedes andere Muster mit verschieben. Diese * Datei ist bewusst nur auf body.home aktiv, siehe Dateikopf. * -------------------------------------------------------------------- */ /* NACHTRAG 2026-09-28 — Betreiberauftrag "Breiten-/Abstands-System vereinheitlichen" (Prompt 2): --sv2-gutter/--sv2-content-max wurden hier bisher lokal für body.home dupliziert (identische Werte auch in services-redesign.css und content-page-redesign.css). Beide Variablen kommen jetzt zentral aus assets/css/layout-tokens.css (geladen vor dieser Datei, siehe functions.php) — Werte unverändert (1680px / clamp(20px, 1.2vw + 16px, 64px) inkl. der 64px-Fixierung ab 1920px weiter unten), nur die Pflegestelle ist jetzt eine einzige. Diese Regel hier ersatzlos entfernt, kein body.home-spezifisches Verhalten geht dadurch verloren (die Variablen sind global auf :root gesetzt und werden wie zuvor vererbt). */ /* Brief: Überschriften "primarily regular or medium weight", ausdrücklich NICHT fett — Gegensatz zum globalen theme.json-Wert (fontWeight 600, styles.elements.heading), der auf jeder anderen Seite/Installation unverändert bleibt. Einzelne Abschnitte oben setzen zusätzlich noch ihre eigene, redesign-spezifische Schriftgröße; diese Regel deckt nur das Gewicht flächendeckend ab. */ body.home h1, body.home h2, body.home h3 { font-weight: 500; } /* Die frühere 1920px-Fixierung auf 64px steht jetzt ebenfalls zentral in layout-tokens.css (dort für :root, wirkt also unverändert auch hier). */ /* Alle "constrained"/"wide" Gruppen innerhalb der Startseite auf das neue, breitere Maß heben, ohne settings.layout in theme.json anzufassen — wirkt über dieselbe CSS-Custom-Property, die core für "alignwide"/ "constrained" ohnehin je Block auswertet. NACHTRAG 2026-09-24: Diese Regel trifft strukturbedingt auch den Header (dessen .sv-header-row ist ebenfalls ".alignwide" in einem "constrained"- Container) — war lange Zeit der einzige Grund, warum der Header nur auf der Startseite breiter war als auf jeder anderen Seite. Seit demselben Datum gibt es dafür eine eigene, sitewide geltende Regel (".sv-header > .alignwide", header.css) mit demselben Wert (1680px), die den Header jetzt auf jeder Seite einheitlich breit hält — diese Regel hier bleibt trotzdem unverändert (wirkt weiterhin auf alle ÜBRIGEN Startseiten-Inhaltsabschnitte), beide Regeln kommen für den Header lediglich zum selben Ergebnis. */ body.home .is-layout-constrained > .alignwide, body.home .is-layout-flow > .alignwide { max-width: var(--sv2-content-max); } /* ----------------------------------------------------------------------- * 2) Header — nur auf der Startseite transparent/dunkel über dem Hero-Foto. * * `position:absolute` entfernt den Header aus dem Dokumentfluss, wodurch *
automatisch bei y=0 beginnt (kein manueller negativer Margin * nötig) — der Hero rutscht dadurch unter den Header, der Header liegt * frei schwebend über dessen oberem Rand. * * Logo (behoben 2026-09-22, Betreiberrückmeldung): Der ursprüngliche * Verdacht — das Customizer-Logo könnte auf dem jetzt dunklen Header * schlecht lesbar sein — wird nicht mehr über eine Textfarbe/Filter * gelöst, sondern durch die vom Betreiber benannte, bereits als * "Forst Consulting"-Wortmarke freigegebene Weiß-Variante * (brand/logo/SILVALUE_Forst_Consulting_Logo_White_Vector.svg). Eigene * zweite Logo-Ausgabe (`[silvalue_header_logo_white]`, * `.sv-logo-desktop-white-variant`), nur hier auf der Startseite * eingeblendet — die Customizer-Version bleibt für jede andere Seite * unverändert. Volle Begründung: silvalue_header_logo_white_shortcode() * in functions.php. * -------------------------------------------------------------------- */ /* KORREKTUR 2026-09-22 (spät), Betreiberfeedback am gerenderten Stand: Der ursprüngliche dreistufige Verlauf (dunkel oben, gegen 0 ausblendend nach unten) wirkte als "rauschender", unscharfer Übergang ohne erkennbare Kante zum Hero-Foto darunter — der Header sollte stattdessen als klar umrissener, gleichmäßig getönter Block erkennbar sein (weiterhin durchsichtig/leicht abgedunkelt, kein Vollton). Deshalb: eine einzige flache Deckkraft über die gesamte Header-Höhe statt eines Verlaufs, dazu (ursprünglich) backdrop-filter für einen "Glas"-Effekt (echte optische Trennung vom Hintergrund statt reiner Halbtransparenz) und eine hauchdünne, kaum sichtbare Unterkante (box-shadow, kein zusätzlicher Border, der die bestehende border-bottom-width:0-Regel wieder aufheben würde) als klare untere Blockgrenze. NACHTRAG 2026-09-24 — Betreiberwunsch: Header „ein wenig durchsichtiger", Hintergrund (Hero-Foto) soll „identifizierbar" sein. Anschließend Betreiberfeedback zum ersten Testwert (0.45 Deckkraft, Blur unverändert): der Blur-„Glas"-Effekt wirkt „verwaschen" — deshalb backdrop-filter hier ganz entfernt statt nur reduziert (kein Kompromiss aus weniger Blur, sondern gar keiner: scharfe Fotokante statt Weichzeichnung). Deckkraft von 0.55 auf 0.35 gesenkt — deutlich transparenter, Wald/Berg- Silhouette klar erkennbar (per Screenshot geprüft), UND per Canvas-Pixel-Sampling der tatsächlichen Hero-Foto-Datei quantitativ gegengeprüft: an der hellsten Stelle im Header-Bereich (Himmel/Fels hinter dem Nav-Link „Leistungen", gemessen ⌀RGB 147/151/139 vor Überlagerung) ergibt 0.35 Deckkraft einen WCAG-Kontrast von 4.82:1 gegen die helle Nav-/Logo-Textfarbe (#F4F3EE) — über der AA-Schwelle 4.5:1 für Fließtext (0.30 wäre mit 4.41:1 bereits knapp darunter gefallen). Damit bleibt die Lesbarkeit auch am ungünstigsten (hellsten) Bildausschnitt gesichert, nicht nur im flächigen Durchschnitt. Die Unterkante (box-shadow) bleibt unverändert als einzige verbleibende visuelle Trennung, jetzt ohne Blur umso wichtiger. */ body.home .sv-header { position: absolute; inset-inline: 0; top: 0; z-index: 20; background: rgba(16, 30, 35, 0.35) !important; border-bottom-width: 0 !important; box-shadow: 0 1px 0 rgba(244, 243, 238, 0.12); } /* NACHTRAG 2026-09-28 — Betreiberfeedback: mobiler Header zeigt eine "zusätzlich oder doppelt wirkende Zeile 'Forst Consulting'", Gesamthöhe weit über dem gewünschten Rahmen. Ursache gefunden und am gerenderten 390px-Viewport nachgemessen: Diese beiden Regeln liefen bisher OHNE Breakpoint, galten also auch unterhalb 782px. Dadurch erschien auf der Startseite zusätzlich zur eigens für Mobilgeräte gebauten kompakten Bildmarke (.sv-logo-mobile, reines Symbol ohne Text) und der zugehörigen Positionszeile (.sv-tagline, Shortcode-Text "Forst Consulting", siehe header.css/functions.php) noch die komplette Desktop-Wortmarke (.sv-logo-desktop-white-variant, gemessen 252x111px, "Forst Consulting" bereits in die Grafik eingebacken) — drei konkurrierende Markenelemente in einer nur 343px breiten Zeile. Diese brachen dadurch über mehrere Zeilen um (gemessen: Headerhöhe 202px statt der vorgesehenen ~104px, .sv-header{min-height}, weiter unten in dieser Datei/header.css) und die Desktop-Bildmarke erschien sichtbar zusätzlich zur separaten Positionszeile "Forst Consulting" — exakt die gemeldete "doppelt wirkende Zeile". Die daraus resultierende Headerhöhe übertraf zudem den für die Hero-Textspalte reservierten Abstand (padding-top: calc(--sv-header-height + Abstand), weiter unten), sodass der Header sichtbar in die Eyebrow-Zeile "Unabhängige Forstberatung · Österreich" hineinragte. header.css blendet die Desktop-Wortmarke unterhalb 782px zwar bereits eigens aus (".sv-brand .sv-logo-desktop{display:none}"), verliert dort aber gegen die höhere Selektor-Spezifität dieser beiden Startseiten-Regeln (".body.home .sv-logo-desktop-white-variant" zählt zusätzlich das Element "body" mit — dieselbe Spezifitäts-Falle, die header.css an anderer Stelle bereits für ".sv-mobile-market-link" dokumentiert). Behoben durch denselben Breakpoint (782px), den header.css für den allgemeinen Logo-Wechsel bereits verwendet — unterhalb davon bleibt auf der Startseite jetzt ausschließlich die kompakte mobile Bildmarke sichtbar, wie auf jeder Nicht-Startseite auch; Desktopdarstellung (≥782px) bleibt unverändert. */ /* NACHTRAG 2026-09-29 — Betreiberauftrag: Das volle Logo gilt jetzt durchgehend bis 390px (siehe die ausführliche Rechnung/Begründung im .sv-tagline-Kommentar, header.css) — auf der Startseite folglich auch die WEISSE Logo-Variante, bisher an dieselbe 782px-Grenze gekoppelt wie der allgemeine Umschalt-Mechanismus (siehe Kommentar direkt oberhalb dieser Regel zur Historie des "doppelten Logos"-Bugs vom 2026-09-28). Die frühere @media(min-width:782px)-Einschränkung ist deshalb entfernt — diese Regel gilt jetzt unbedingt für body.home, auf jeder Breite. Kein Rückfall auf den früheren Doppel-Logo-Fehler zu erwarten: header.css schaltet .sv-logo-mobile inzwischen an keiner Stelle mehr ein (die damalige @media(max-width:781px)-Umschaltung dort ist deaktiviert, siehe dortiger Kommentar) — auf der Startseite bleibt somit durchgehend ausschließlich die hier eingeblendete weiße Desktop-Wortmarke sichtbar, nichts Drittes kann mehr danebentreten. */ body.home .sv-logo-desktop-white-variant { display: inline-flex; } body.home .sv-logo-desktop:not(.sv-logo-desktop-white-variant) { display: none; } /* PRÜFVERMERK 2026-09-28 (Nachbesserung, ohne Codeänderung) — Betreiberauftrag: "Untersuche den Bereich zwischen 960 und 1.100 px … Prüfe, wodurch die gemessene Headerhöhe von 114,7 px entsteht." Ursache gefunden und live nachgemessen (980–1080px, Startseite, ".sv-logo-desktop-white-variant" oben sichtbar): Der Shortcode [silvalue_header_logo_white] gibt nur ein zurück (silvalue_header_logo_white_shortcode(), functions.php), WordPress umschließt dieses Bild beim Rendern des wp:shortcode-Blocks jedoch automatisch mit einem

— bei diesem einen Logo-Anker bleibt dessen UA-Standardabstand (gemessen 17,4px oben/unten) unverändert bestehen, macht den Anker 114,7px statt 72px hoch und zieht Kopfzeile/Zeile damit auf dieselbe Höhe (align-items:center zentriert Navigation/CTA unverändert korrekt darin, siehe Messung). Der optisch identische, nicht-weiße Zwilling (".sv-logo-desktop:not(.sv-logo-desktop-white- variant)", Leistungen-Seite u. a., Headerhöhe dort unverändert 104px) hat denselben

-Wrapper, dort aber folgenlos: WordPress vergibt sein generiertes "is-layout-flex"/"wp-container-core-group-is-layout-…"- Klassenpaar laut Markup-Reihenfolge an den ERSTEN Anker im Block (dieselbe, bereits weiter oben in dieser Datei dokumentierte Eigenheit) — nur DIESER trägt die Klasse, über die WordPress-Kern den

-Standardabstand seiner Kinder auf 0 setzt; der zweite (weiße) Anker, obwohl strukturell identisch, bekommt diese Klasse nicht und behält den ungewollten Rand. Keine Überlagerung, kein Umbruch, keine schlechte Ausrichtung: Logo, Navigation und CTA bleiben bei jeder geprüften Breite (960–1100px) sauber zueinander zentriert, der Abstand zur darunterliegenden Eyebrow-Zeile bleibt bei 1024px komfortable 54,5px (keine Überlappung). Der einzige Effekt ist eine rein rechnerisch um rund 10,7px höhere Kopfzeile auf der Startseite ab 782px gegenüber jeder anderen Seite — unbeabsichtigt in der Ursache, aber visuell unauffällig und ohne Fehlausrichtung. Gemäß Auftrag ("Greife nur ein, wenn … unbeabsichtigt umbrechen, schlecht ausgerichtet sind oder zu wenig Abstand besitzen … Die Höhe muss nicht künstlich auf einen bestimmten Pixelwert gebracht werden") deshalb bewusst NICHT behoben — nur dokumentiert. Ein Ein-Zeiler-Fix läge bereit (z. B. ".sv-logo-desktop-white-variant p{ margin:0}", angelehnt an die vom Kern selbst gesetzte Regel für den anderen Anker), falls der Betreiber die zusätzliche Höhe künftig doch entfernt haben möchte. */ body.home .sv-header .sv-tagline, body.home .sv-header .wp-block-navigation-item > a, body.home .sv-header .sv-lang-switch-wrap, body.home .sv-header .sv-lang-switch-wrap a, body.home .sv-header .wp-block-navigation__responsive-container-open svg { color: var(--wp--preset--color--sv-r-bg) !important; } body.home .sv-header .wp-block-button__link { background-color: var(--wp--preset--color--sv-r-accent); color: var(--wp--preset--color--sv-r-ink); } body.home .sv-header .wp-block-button__link:hover { background-color: var(--wp--preset--color--sv-r-bg); } /* ----------------------------------------------------------------------- * 3) Hero * -------------------------------------------------------------------- */ /* NACHTRAG 2026-09-29 — Betreiberfeedback: "auf dem 27 Zoll Monitor wird [das Hero-Bild] oben abgeschnitten" (auf einem 17-Zoll-Gerät dagegen vollständig sichtbar). Ursache: .sv-hero__photo (patterns.css) nutzt background-size:cover + background-position:center bottom — der Bildüberschuss wird also ausschließlich OBEN weggeschnitten, und zwar umso mehr, je breiter die Box im Verhältnis zu ihrer Höhe ist. Das echte Hero-Foto (hero-original-at-2400x1058-v8.webp) hat ein Seitenverhältnis von 2400/1058 ≈ 2,268:1. Bei einer Bandhöhe von 900px (bisheriger Ceiling-Wert) liegt der beschnittfreie Punkt bei 900 × 2,268 ≈ 2042px Breite — jeder breitere Viewport schneidet oben etwas ab, live nachgemessen bei 2560px (übliche 27-Zoll-QHD-Auflösung) ergab das rund 20 % der Bildhöhe, bei den 3072px dieser Testumgebung sogar rund 33 %, klar zu viel ("Beschnitt ist zu stark"). Ceiling von 900px auf 1080px angehoben: beschnittfreier Punkt liegt jetzt bei 1080 × 2,268 ≈ 2450px — bei 2560px Breite bleiben nur noch rund 4 % Beschnitt übrig, bei 1920px (üblich auf vielen 17-Zoll-Geräten, dort ohnehin schon unterhalb des alten UND neuen beschnittfreien Punkts) bleibt es unverändert bei 0 %. Trade-off bewusst in Kauf genommen: der Hero wird auf breiten Monitoren dadurch bis zu 180px höher (900→1080px, +20 %) als zuvor — als klar kleineres Übel gegen den gemeldeten, deutlich sichtbaren Bildbeschnitt abgewogen. Bei sehr breiten/ultrabreiten Monitoren (>2560px) bleibt ein Rest-Beschnitt bestehen; ein vollständig beschnittfreies Ergebnis bis in den Ultrawide-Bereich hätte eine deutlich höhere, für normale Breiten unangemessen hohe Bandhöhe erfordert. */ body.home .sv-hero { min-height: clamp(560px, 92vh, 1080px); } /* Höhenlinien-Overlay: dieselbe Datei/derselbe Rendering-Mechanismus wie im bestehenden Design (silvalue_render_contour_overlay(), CSS-Farbe über currentColor) — nur die Farbe wird hier auf der Startseite auf das warme Off-White des Redesigns umgestellt statt Türkis, exakt wie im Brief verlangt ("without green or turquoise glow"). Keine neue SVG-Datei nötig: die Linienfarbe steckt nicht in der Datei selbst. */ body.home .sv-contour-overlay { color: var(--wp--preset--color--sv-r-bg); } /* NACHTRAG 2026-09-22 (spät) — Bestandesanalyse-Marker (Kreis + Zeigerlinie + Beschriftung "BESTANDESANALYSE") kam mit der v9-Überarbeitung der Bestandeslinien-SVG neu hinzu (assets/img/contour-at.svg), eigene Gruppe mit Klasse `sv-contour-marker`, vom Betreiber in Inkscape ergänzt und ausdrücklich mit "doppelt so starker Linienstärke wie die Bestandesgrenzen" angefordert. Rechnet bewusst relativ zur bestehenden `--sv-contour-stroke-width`-Variable (base.css) statt einer zweiten, unabhängig gepflegten Zahl — bleibt automatisch im Verhältnis 2:1 korrekt, falls die Basis-Strichstärke dort je angepasst wird. Höhere Selektor-Spezifität als `.sv-contour-overlay path` (base.css) gewinnt hier unabhängig von der Ladereihenfolge der beiden Dateien. Kreis/Linie: wie die Bestandesgrenzen ungefüllt, nur stroke sichtbar. Text: bewusst NUR die Füllfarbe zentral gesetzt (dieselbe currentColor wie der Rest des Overlays) — Schriftart/-größe absichtlich nicht angetastet, das ist eine eigene Gestaltungsentscheidung, die noch nicht angefordert wurde (siehe Rückmeldung an den Betreiber). KORREKTUR 2026-09-23, Betreiberwunsch: Marker (Kreis, Zeigerlinie, Beschriftung) jetzt in reinem Weiß (sv-white) statt im ererbten Off-White der Bestandeslinien (sv-r-bg) — heben sich dadurch bewusst leicht von den Bestandeslinien ab, statt optisch mit ihnen zu verschmelzen. Eine einzige `color`-Zeile auf der Marker-Gruppe selbst reicht für alle drei Kindelemente, da Kreis/Linie ihren stroke und der Text seine Füllung weiterhin über currentColor beziehen. */ body.home .sv-contour-overlay .sv-contour-marker { color: var(--wp--preset--color--sv-white); } /* KORREKTUR 2026-09-23, Betreiberfeedback: reines Weiß gegen das Off-White der Bestandeslinien reichte als Unterscheidung nicht aus — auf dem Foto kaum wahrnehmbar, da beide Töne sehr nah beieinander liegen (Helligkeits-/Farbabstand, kein Kontrastthema). Zwei CSS-filter-Ansätze (weicher gestapelter Halo, dann eine randscharfe 8-Richtungen drop-shadow-Kontur) wurden wieder verworfen: der filter zwang den Browser, den kompletten Marker als Raster zu kompositieren, was Kreis/Linie/Schrift spürbar unscharf machte, und führte bei Kreis+Zeigerlinie zusätzlich zu einem sichtbaren Rendering-Defekt (Kreis wirkte an der Stelle, wo die Linie ansetzt, wie geöffnet statt geschlossen). Stattdessen jetzt eine echte, doppelt vorhandene Vektor-Kontur ganz ohne filter (weiterhin ohne neue Akzentfarbe, wie vom Brief "without green or turquoise glow" gefordert): - Schrift: SVG-Textkontur über paint-order/stroke. - Kreis/Zeigerlinie: in der SVG-Quelle (assets/img/contour-at.svg) liegt jetzt eine zweite, identische Kopie von Kreis+Linie als eigene Gruppe `sv-contour-marker-outline` VOR der eigentlichen (jetzt `sv-contour-marker-fg`) Gruppe im Dokument — zeichnet dadurch als dickere, dunkle Kontur direkt hinter dem schmalen weißen Strich, ganz normales Vektor-Rendering, daher randscharf und performant. Beide Gruppen brauchen eigene, sich gegenseitig ausschließende Klassen (statt einer generischen `.sv-contour-marker circle`-Regel für die Vordergrund-Kopie) — sonst träfen beide Regeln (gleiche Spezifität) auch auf die Outline-Kopie selbst, und die spätere Regel würde die dunkle Kontur wieder mit der weißen Vordergrundfarbe überschreiben. */ body.home .sv-contour-overlay .sv-contour-marker-outline circle, body.home .sv-contour-overlay .sv-contour-marker-outline path { stroke: rgba(0, 0, 0, 0.85) !important; stroke-width: calc((var(--sv-contour-stroke-width) * 2) + 5px) !important; fill: none !important; vector-effect: non-scaling-stroke; } body.home .sv-contour-overlay .sv-contour-marker-fg circle, body.home .sv-contour-overlay .sv-contour-marker-fg path { stroke: currentColor !important; stroke-width: calc(var(--sv-contour-stroke-width) * 2) !important; fill: none !important; vector-effect: non-scaling-stroke; } body.home .sv-contour-overlay .sv-contour-marker-fg text { fill: currentColor; paint-order: stroke fill; stroke: rgba(0, 0, 0, 0.9); stroke-width: 6px; stroke-linejoin: round; } /* KORREKTUR 2026-09-22 (spät), Betreiberfeedback: Eyebrow nicht mehr in Türkis (sv-r-accent) — dieselbe helle Off-White-Farbe wie die Kartenbeschriftungen (.sv-hero__map-label, .sv-hero__corner-caption weiter unten) statt einer eigenen Akzentfarbe, mit reduzierter Deckkraft als eigene, etwas zurückhaltendere Stufe unterhalb der H1 (100%) und der Subline (86%) — dieselbe abgestufte Hierarchie wie bei den beiden dekorativen Randbeschriftungen. */ body.home .sv-hero__eyebrow { display: block; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--sv-r-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--sv-r-bg); opacity: 0.7; margin-bottom: var(--wp--preset--spacing--sm); } /* Gemeinsamer Eyebrow-Stil für alle nummerierten Abschnittstitel ("01 / Leistungen", "02 / Über Silvalue", "Kontakt") — ein Selektor statt je Muster eigenes CSS, `sv-section-eyebrow` wird in den jeweiligen Musterdateien gesetzt. */ body.home .sv-section-eyebrow { display: block; font-family: var(--wp--preset--font-family--mono) !important; font-size: var(--wp--preset--font-size--sv-r-label) !important; letter-spacing: 0.14em !important; text-transform: uppercase; margin-bottom: var(--wp--preset--spacing--2xs); } /* NACHTRAG 2026-09-22 (spät) — Betreiberentscheidung: Türkis darf auf hellen Flächen als Text verwendet werden (löst die bisherige CLAUDE.md- Regel "Türkis nie als Text auf hellen Flächen" auf, siehe dortiger Nachtrag). Trotzdem WCAG-AA-pflichtig (4.5:1 für Fließtext) — die normale sv-r-accent-deep (#087E7D) erreicht auf dem tatsächlichen Abschnittshintergrund sv-r-bg (#F4F3EE, siehe #leistungen/#kontakt background weiter unten in dieser Datei) nur 4.41:1. Deshalb eigener, geringfügig dunklerer Text-Token sv-r-accent-text (#087776, 4.83:1 auf sv-r-bg) statt sv-r-accent-deep — visuell kaum unterscheidbar, aber AA-sicher. sv-r-accent-deep selbst bleibt unverändert für Ränder/ Fokuszustände (dort gilt nur die 3:1-Schranke für Bedienelemente). */ #leistungen .sv-section-eyebrow,#services .sv-section-eyebrow, #kontakt .sv-section-eyebrow , #contact .sv-section-eyebrow { color: var(--wp--preset--color--sv-r-accent-text) !important; } /* NACHTRAG 2026-09-22 (sechste Korrektur) — Betreiberfeedback: "der Hero ist nach wie vor nicht gleich ausgerichtet wie der Rest der Seite". Die fünfte Korrektur oben hatte nur die Randbeschriftung intern auf die Hero-Textspalte ausgerichtet — beide saßen aber gemeinsam auf dem FALSCHEN, alten Zentrierungssystem (patterns.css: max-width: var(--wp--style--global--content-size, 1280px) + margin-inline:auto + padding-inline:spacing--sm), während #leistungen/.sv-approach-inner bereits auf dem neuen --sv2-content-max(1680px)/--sv2-gutter-System laufen. Nachgemessen am gerenderten Bild: bei vw 2400 startete die Hero-Textspalte bei 570.6px, Leistungen/Über-Silvalue-Spalte dagegen bei 350.6px — 220px Versatz, nicht nur eine Kleinigkeit. Reines Umstellen der beiden Custom-Property-Namen hätte NICHT exakt gepasst: #leistungen erreicht sein Maß zweistufig (äußere Sektion randlos + padding-inline:gutter, innerer Kindselektor erst max-width:content-max + margin-inline:auto — der Gutter kürzt sich bei breiten Viewports rechnerisch heraus, siehe Herleitung im Änderungsverlauf dieser Datei). .sv-hero__inner ist dagegen einstufig (Zentrierung UND Innenabstand auf demselben Element) — ein einfacher Werte-Tausch hätte einen zusätzlichen, nicht vorhandenen Gutter-Versatz von ~64px auf breiten Bildschirmen erzeugt. Stattdessen bildet margin-inline-start hier direkt dieselbe max(gutter, (100%-content-max) /2)-Formel nach, die sich aus #leistungens zweistufigem Aufbau ergibt — dieselbe "100%"-Bezugsgröße bleibt gültig, weil .sv-hero__inner direkt in der randlosen .sv-hero-Sektion sitzt, exakt wie #leistungen direkt im Seitenfluss. Rechnerisch nachgeprüft: ergibt bei vw 2400 exakt 350.625px, 0px Differenz zu #leistungen/.sv-approach-inner. Randbeschriftung (.sv-hero__corner-caption, weiter unten) folgt derselben, jetzt vereinfachten Formel — kein separater Gutter-Zuschlag mehr nötig, da .sv-hero__inner das Innenabstand-Padding auf der linken Seite selbst abgegeben hat. NICHT mit angefasst: #kontakt hat denselben Versatz (misst ebenfalls 570.6px statt 350.6px bei vw 2400) — dort bisher nur Farb-/Formular- Anpassungen (Abschnitt 7 unten), keine Breiten-Korrektur. Dem Betreiber separat gemeldet statt hier automatisch mit gelöst. */ body.home .sv-hero__inner { max-width: none; /* 2026-10-09: + Root-Padding. .sv-hero ist alignfull und wird von WordPress um das Root-Padding nach links gezogen; das muss hier wieder addiert werden, sonst sitzt der Hero-Text um genau diesen Betrag links von den Abschnitten (am Live-Stand bei 1440px: 20px statt 120px, Handy 26px statt 42px; nachgemessen). Breite Bildschirme (zweiter max()-Zweig) unverändert. */ margin-inline: max(calc(var(--sv2-gutter) + var(--wp--style--root--padding-left, 0px)), calc((100% - var(--sv2-content-max)) / 2)) 0; padding-inline: 0 var(--sv2-gutter); } body.home .sv-hero__copy { max-width: 640px; padding-top: var(--sv-header-height); } /* NACHTRAG 2026-09-22 (vierte Korrektur) — Betreiberwunsch: H1 in JetBrains Mono statt Space Grotesk (derselbe Mono-Token, der bereits für Eyebrow/Sektionstitel/Randbeschriftungen läuft — kein neuer Font nötig, theme.json führt ihn bereits selbst gehostet). Da JetBrains Mono bei gleicher rem-Größe optisch kleiner/leichter wirkt als die bisherige geometrische Sans (schmalere Versalhöhe), zusätzlich auf Betreiberwunsch ("etwas vergrößern") um 12% angehoben — ursprünglich per calc() auf dem fluiden sv-r-hero-Clamp (siehe NACHTRAG unten, seither ersetzt). NACHTRAG 2026-09-24 — Betreiberwunsch: H1 größer, konkret Schriftgröße 71 (px) genannt statt einer weiteren Anpassung des fluiden Clamps — deshalb hier als fester Wert statt calc(sv-r-hero × 1,12) gesetzt (zuvor 40,32px bei diesem Breakpoint). Die Leistungen-Übersichtsseite übernimmt laut Betreiberwunsch vom selben Tag ausdrücklich dieselbe Größe wie diese Hero-Überschrift (services-redesign.css, .sv-services-redesign__intro h1) — dort aus demselben Grund ebenfalls auf denselben festen Wert 71px umgestellt, mit Verweis hierher, damit beide weiterhin synchron bleiben. sv-r-hero selbst bleibt unverändert (theme.json) und wird, seit dieser Änderung, nirgends mehr referenziert. */ body.home .sv-hero__copy h1 { font-family: var(--wp--preset--font-family--mono); font-size: 71px; font-weight: 500; line-height: 1.05; color: var(--wp--preset--color--sv-r-bg); } /* NACHTRAG 2026-09-28 — Betreiberwunsch: Hero-H1 darf auf kleinen Smartphones (390–600px) nicht länger die feste Desktop-Größe 71px behalten. Live nachgemessen (390px-Viewport, .sv-hero__copy 100% Breite, Betreiber-Angabe bestätigt): bei 71px umbricht "Den Wert Ihres Waldes erkennen und erhalten." in einer nur 333,85px schmalen Spalte auf 5 Zeilen und beansprucht dabei 521,85px Höhe (Betreiber: "522 px") — fast die halbe Bildschirmhöhe vor dem ersten Scroll. Zielgröße laut Betreiberwunsch ca. 42–48px, Zeilenhöhe 1.0–1.05, linear zwischen 390px (42px) und 600px (48px) interpoliert: 42px + (Breite - 390px) x 6px/210px, als vw-Formel geschrieben (42 = 30,9 + 2,86x3,9; 48 = 30,9 + 2,86x6,0) — dieselbe clamp()-Bauweise wie die theme.json-Preset-Schriftgrößen (dort rem-basiert), hier bewusst mit fester px-Basis, weil auch die Desktop-Größe oben als fester px-Wert geführt wird (siehe NACHTRAG 2026-09-24 dort). Zweite Stufe 601–781px (obere Grenze der bestehenden @media(max-width:781px)-Anpassung von .sv-hero__copy weiter unten in dieser Datei): führt stetig von 48px auf die Desktop-Größe 71px heran, damit zwischen den drei Stufen kein sichtbarer Sprung entsteht. Ab 782px bleibt die Desktop-Regel oben unverändert wirksam — Desktopdarstellung nicht betroffen. Dieselbe Logik auf die Leistungsübersicht übertragen, siehe services-redesign.css, .sv-services-redesign__intro h1 (dort bisher ebenfalls fest auf 71px synchronisiert). */ @media (max-width: 600px) { body.home .sv-hero__copy h1 { font-size: clamp(42px, calc(2.86vw + 30.9px), 48px); line-height: 1.03; } } /* Untergrenze bewusst 600px statt 601px (überlappend mit der oberen Grenze der Stufe darüber statt lückenlos daran anschließend): An genau dieser Fensterbreite am gerenderten Ergebnis geprüft — bei 600/601px als exakt aneinandergrenzenden Werten fiel die H1 auf die ungeschützte Basisregel (71px, ohne @media) zurück, weder max-width:600px noch min-width:601px griff. Ursache: window.devicePixelRatio (hier 1.25) rundet die tatsächliche CSS-Breite bei ganzzahligen Zielwerten auf einen gebrochenen Zwischenwert (z. B. 600,4px) — größer als 600, aber kleiner als 601, sodass beide exklusiven Grenzen ins Leere liefen. Mit der Überlappung bei 600px gewinnt an dieser Stelle dank Quellreihenfolge automatisch diese (zweite) Regel — beide Formeln ergeben bei 600px ohnehin denselben Wert (48px), also kein sichtbarer Sprung, nur kein ungeschützter Lückenbereich mehr dazwischen. */ @media (min-width: 600px) and (max-width: 781px) { body.home .sv-hero__copy h1 { font-size: clamp(48px, calc(12.78vw - 28.8px), 71px); line-height: 1.04; } } /* NACHTRAG 2026-09-24 — Betreiberwunsch: Abdunkelung im Hero rechts auf 10 (= 0.10 Deckkraft) herunter. Override statt Änderung an patterns.css (dort geschützt, Projektkonvention) — die ursprüngliche Regel (.sv-hero__scrim, patterns.css) ist der links-nach-rechts-Verlauf rgba(0,0,0,0.86) -> rgba(0,0,0,0.32), rechter Wert hier auf 0.10 gesenkt, linker Wert (0.86, deckt die Textspalte links ab) unverändert. Vor dem Ändern gegengeprüft, weil patterns.css für genau diesen Verlauf einen Mindestwert dokumentiert (Kommentar dort: Kontrast bricht laut damaliger Rechnung unter ~53,5%/~41,6% Deckkraft an der Textstelle ein) — echte Messung an diesem Foto per Canvas-Pixel-Sampling an der rechten Kante der H1-Überschrift (bei ca. 48% der Verlaufsbreite) ergibt selbst mit dem neuen Wert noch 13,27:1 Kontrast gegen die helle Textfarbe (zuvor 14,73:1) — beide weit über der AA-Schwelle 4,5:1, der dokumentierte Mindestwert war für den ungünstigsten denkbaren Fall gerechnet, nicht für dieses (durchgehend dunkle Wald-)Foto. Nur die 90°-Desktop-Variante geändert — die schmale, vertikale Verlaufsvariante unterhalb 781px (patterns.css) hat kein "rechts" (180°, oben-unten) und bleibt unangetastet. */ body.home .sv-hero__scrim { background: linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.1) 100%); } body.home .sv-hero__copy p.has-lg-font-size { font-size: var(--wp--preset--font-size--sv-r-body); color: var(--wp--preset--color--sv-r-bg); opacity: 0.86; max-width: 46ch; } /* KORREKTUR 2026-09-22 (spät), Betreiberfeedback: "Projekt besprechen" und "Leistungen entdecken" sollen in derselben Zeile stehen, nur bei zu schmalem Platz umbrechen. Beide saßen bisher in getrennten Geschwister- Blöcken (wp:buttons, danach ein eigener wp:paragraph) und standen dadurch immer untereinander. Gemeinsame wp:group-Hülle mit "layout":{"type": "flex","flexWrap":"wrap"} statt eines eigenen Flex-Containers hier — dieselbe, bereits im Theme mehrfach verwendete Technik (parts/header-de.html, sv-header-row/sv-header-actions/sv-brand), kein neues Muster. */ body.home .sv-hero__actions { align-items: center; } body.home .sv-hero__actions p { margin: 0; } body.home .sv-hero__copy .wp-block-button__link { background-color: var(--wp--preset--color--sv-r-accent); color: var(--wp--preset--color--sv-r-ink); border-radius: 2px; font-weight: 600; } body.home .sv-hero__copy .wp-block-button__link:hover { background-color: var(--wp--preset--color--sv-r-bg); } /* Zweiter, leichter Textlink neben der Schaltfläche ("Leistungen entdecken →") — eigene Klasse, kein wp:button, damit er optisch deutlich leichter wirkt als die primäre Schaltfläche (Mockup S.1). */ body.home .sv-hero__secondary-link { color: var(--wp--preset--color--sv-r-bg); font-size: var(--wp--preset--font-size--sv-r-body); text-decoration: underline; text-underline-offset: 0.2em; } body.home .sv-hero__secondary-link:hover { color: var(--wp--preset--color--sv-r-accent); } /* C3 (2026-10-08): Tippfläche des Textlinks auf dem Handy mindestens 24 px hoch (gemessen: 21 px). */ @media (max-width: 782px) { body.home .sv-hero__secondary-link { display: inline-block; padding-block: 0.5em; } } /* Dekorative Randbeschriftungen aus dem Mockup ("NATÜRLICH WERTVOLL FÜR GENERATIONEN", "GIS · GELÄNDEANALYSE") — rein atmosphärisch, ohne Aussagewert, daher aria-hidden im Muster selbst (nicht hier). Nur auf breiten Bildschirmen, da auf schmalen Viewports kein Platz neben der Textspalte bleibt und der Kontrast über dem dann vollflächig abgedunkelten Foto (.sv-hero__scrim mobile-Regel) ohnehin nicht mehr gesichert ist. KORREKTUR 2026-09-22 (spät), Betreiberfeedback: "Natürlich wertvoll für Generationen" stand zuvor als eine einzige, um 90° gedrehte Zeile (writing-mode:vertical-rl) am rechten Rand. Jetzt stattdessen normale, waagrechte Schrift, per
im Muster fest auf drei Zeilen aufgeteilt (Betreiberwunsch: "ein Dreizeiler"), unten am Hero verankert — bottom von spacing--xl auf spacing--lg verringert, damit der Block sichtbar näher an der unteren Hero-Kante sitzt ("ab unterem Ende des Heros"). Klasse umbenannt (vertical-caption -> corner-caption), da "vertical" nach der Drehung nicht mehr zutrifft — in Muster und CSS gleichermaßen geändert. NACHTRAG 2026-09-22 (vierte Korrektur) — Betreiberfeedback am gerenderten Stand: "der Text NATÜRLICH WERTVOLL FÜR GENERATIONEN muss links mit einem Unterstrich stehen und nicht rechts". Zwei Änderungen: right->left (und text-align right->left), und ein neuer kurzer horizontaler Strich unter dem Text per ::after — beides entspricht exakt der Mockup-PDF (Silvalue-Selected-Design-v3.pdf, Seite 1, unterer linker Hero-Rand): dort steht dieselbe Randbeschriftung linksbündig mit einer kurzen Trennlinie darunter, nicht rechtsbündig ohne Linie. .sv-hero__map-label ("GIS · Geländeanalyse") bleibt bewusst unverändert rechts oben, wie im Mockup — nur die untere linke Randbeschriftung war betroffen. KORREKTUR 2026-09-22 (fünfte Korrektur) — Betreiberfeedback: "die vertikale Ausrichtung sämtlicher Blöcke und des Textes NATÜRLICH WERTVOLL FÜR GENERATIONEN ist nicht mehr in einer Linie" (gemeint ist die horizontale/linke Fluchtlinie, nicht "vertikal" im Sinne von senkrecht — geprüft am gerenderten Bild: Eyebrow/H1/Subline/Buttons und die Randbeschriftung standen sichtbar versetzt). Ursache: `left: var(--sv2-gutter)` verwendete das GUTTER-/BREITENSYSTEM der übrigen Redesign-Abschnitte (#leistungen/#kontakt/.sv-approach-inner, feste Distanz von der Bildschirmkante), während die Hero-Textspalte (.sv-hero__inner/.sv-hero__copy, patterns.css) einem ANDEREN, unveränderten System aus der Vor-Redesign-Zeit folgt: zentriert per max-width:var(--wp--style--global--content-size) + margin-inline:auto + padding-inline:var(--wp--preset--spacing--sm). Bei den auf dieser Vergleichsseite ungewöhnlich breiten Viewports (>1280px + content-size) ergeben beide Systeme spürbar unterschiedliche Abstände von der Kante — am gerenderten Bild nachgemessen: Textspalte 570.6px, Randbeschriftung 64px bei vw 2400. Statt eines zweiten, erfundenen Zahlenwerts bildet die Randbeschriftung jetzt exakt dieselbe Zentrierungs-Formel wie .sv-hero__inner in patterns.css nach (dort nicht angefasst, um kein zweites System zu vermischen) — dadurch bleiben beide bei jeder Viewport-Breite exakt auf einer Linie, nachgemessen auf 0px Differenz. NACHTRAG 2026-09-22 (sechste Korrektur) — .sv-hero__inner selbst läuft jetzt (siehe dessen Regel oben, "sechste Korrektur") auf dem --sv2-content-max/--sv2-gutter-System statt auf patterns.css' altem content-size-System, und hat sein linkes padding-inline dabei an margin-inline-start abgegeben. Die Formel hier vereinfacht sich dadurch auf dieselbe max(gutter, (100%-content-max)/2)-Rechnung wie dort — kein separater Zuschlag mehr nötig, da kein Padding auf .sv-hero__inner mehr existiert, das addiert werden müsste. */ body.home .sv-hero__corner-caption { display: none; } @media (min-width: 1100px) { body.home .sv-hero__corner-caption { display: block; position: absolute; /* 2026-10-09: + Root-Padding, wie bei .sv-hero__inner (der Hero ist alignfull und um das Root-Padding nach links gezogen). */ left: max(calc(var(--sv2-gutter) + var(--wp--style--root--padding-left, 0px)), calc((100% - var(--sv2-content-max)) / 2)); bottom: var(--wp--preset--spacing--lg); z-index: 1; text-align: left; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--sv-r-label); letter-spacing: 0.16em; line-height: 1.7; color: var(--wp--preset--color--sv-r-bg); opacity: 0.55; } /* Kurze Trennlinie unter der Randbeschriftung, wie im Mockup — per ::after statt eines eigenen Markup-Elements, da der Text weiterhin als einzelner

mit
im Muster steht (home-hero-de.php). */ body.home .sv-hero__corner-caption::after { content: ""; display: block; width: 32px; height: 2px; margin-top: var(--wp--preset--spacing--2xs); background: currentColor; } body.home .sv-hero__map-label { display: block; position: absolute; right: var(--sv2-gutter); top: calc(var(--sv-header-height) + var(--wp--preset--spacing--lg)); z-index: 1; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--sv-r-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--sv-r-bg); opacity: 0.7; } } body.home .sv-hero__map-label { display: none; } /* ----------------------------------------------------------------------- * 4) Kennzahlen-Leiste (proof-bar) — heller, randloser Streifen mit * dünnen vertikalen Trennlinien statt der bisherigen umrandeten, * nach oben überlappenden Box. Sitzt im Redesign im normalen * Lesefluss direkt unter dem Hero, kein negativer Top-Margin. * -------------------------------------------------------------------- */ body.home .sv-proof-bar { margin-top: 0 !important; border: none !important; background: var(--wp--preset--color--sv-r-bg) !important; max-width: var(--sv2-content-max); margin-inline: auto; padding: var(--wp--preset--spacing--lg) var(--sv2-gutter) !important; /* NACHTRAG 2026-09-23, Betreiberwunsch: eine Trennlinie unterhalb der Kennzahlen, wie im Designvorschlag (design/silvalue-at-design-v3.html verwendet dort eine vergleichbare Rahmenlinie um die ganze Leiste). Auf dem gemeinsamen `.sv-proof-bar`-Container statt auf den einzelnen `.sv-proof-bar__item`s gesetzt, damit die Linie durchgehend über alle drei Kennzahlen reicht statt in drei einzelne Segmente zu zerfallen (jedes Item ist nur ein Drittel der Breite). Selbe Linienfarbe/-stärke wie die bestehenden vertikalen Trennstriche zwischen den Kennzahlen (.sv-proof-bar__item, border-color: sv-line), für ein einheitliches Erscheinungsbild. */ border-bottom: 1.25px solid var(--wp--preset--color--sv-line) !important; } body.home .sv-proof-bar__item { border-color: var(--wp--preset--color--sv-line) !important; } body.home .sv-proof-bar__item p:first-child { color: var(--wp--preset--color--sv-r-ink) !important; font-family: var(--wp--preset--font-family--heading); } body.home .sv-proof-bar__context { color: var(--wp--preset--color--sv-r-text-soft) !important; } /* ----------------------------------------------------------------------- * 5) Leistungen — drei Karten ohne Rahmen/Schatten, nummeriert (01/02/03) * statt Eyebrow-Text "Leistung", direkt auf hellem Hintergrund. * * Nummerierung per CSS-Zähler (`counter-increment`), keine PHP-Änderung * am Query-Loop nötig und keine erfundene Kennzahl — reine * Darstellungsreihenfolge der drei bereits kuratierten Leistungen. * -------------------------------------------------------------------- */ body.home #leistungen ,body.home #services { background: var(--wp--preset--color--sv-r-bg) !important; max-width: none; padding-inline: var(--sv2-gutter) !important; } body.home #leistungen > * ,body.home #services > * { max-width: var(--sv2-content-max); margin-inline: auto; } body.home #leistungen h2 ,body.home #services h2 { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--sv-r-heading); font-weight: 500; color: var(--wp--preset--color--sv-r-ink); } body.home .sv-services-query { counter-reset: sv2-card; } body.home .sv-services-card { background: transparent !important; border: none !important; padding: 0 !important; counter-increment: sv2-card; position: relative; } /* NACHTRAG 2026-09-23, Betreiberfeedback (drei zusammenhängende Korrekturen an dieser Karte): (1) Die Kartennummer (´::before`, Zahl 01/02/03) stand bisher VOR dem Bild — als generierter Inhalt ist sie immer das erste gerenderte Element der Karte, unabhängig von ihrer Position im Muster-Markup. Gewünscht: zwischen Bild und Titel. Da `.sv-services-card` bereits eine Flex-Spalte ist (patterns.css, "Gleichrangigkeits"-Regel), lässt sich das ohne Strukturänderung rein über `order` lösen — Bild, Zahl, Titel, Auszug und der neue Pfeil-Link (siehe unten) bekommen aufsteigende `order`-Werte, unabhängig von ihrer tatsächlichen Reihenfolge im DOM/Muster. (2) Titel (und potenziell Auszug) standen horizontal zentriert statt linksbündig — nicht durch `text-align` (das war bereits "start" an beiden Elementen), sondern durch das automatische `margin-inline:auto` der WordPress-"constrained"-Layout-Vorgabe (`.sv-services-card` nutzt `"layout":{"type":"constrained"}` im Muster), die jedem Kind ohne "alignwide/-full" eine an seine intrinsische Breite gebundene Zentrierung verpasst — beim Titel sichtbar, weil sein `` nur so breit wie der Text ist; beim Auszug unsichtbar, weil dessen Text ohnehin die volle Breite ausfüllt. Pauschal für alle Kind-Elemente der Karte zurückgesetzt statt nur für den Titel, damit derselbe Effekt nicht an anderer Stelle erneut auftritt. (3) Der bisherige, direkt an den Titel angehängte Pfeil ("→" per `::after` auf dem Titel-Link) entfällt zugunsten eines eigenen, eigenständigen 45°-Pfeil-Links unterhalb des Leistungstexts, der auf die jeweilige Leistungsseite verweist — technisch ein natives `core/read-more`-Block (verlinkt WordPress-seitig automatisch auf den Permalink des aktuellen Beitrags in der Query-Loop, kein hartkodiertes href nötig), ohne Linktext (nur das Pfeilzeichen, Betreiberwunsch: "nur der Pfeil-Link selbst"), eingefügt als zusätzlicher Block direkt auf der Startseite (das Editor-Sperren dieser Karten-Gruppe — "Block Editing Mode: disabled" — musste dafür einmalig zur Laufzeit gelockert werden, siehe Versionsverlauf der Seite "Startseite", ID 8; die Musterdatei home-services-de.php wurde zum Vergleich ebenfalls ergänzt). */ body.home .sv-services-card > * { margin-inline: 0 !important; max-width: none !important; } body.home .sv-services-card .wp-block-post-featured-image { order: 1; } body.home .sv-services-card::before { content: counter(sv2-card, decimal-leading-zero); display: block; order: 2; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--sv-r-label); letter-spacing: 0.08em; /* sv-r-accent-text statt sv-r-accent: dieselbe AA-Kontrast-Ausnahme wie bei der Eyebrow "01 / Leistungen" weiter oben in diesem Abschnitt (#leistungen .sv-section-eyebrow) — reines Türkis (sv-r-accent, #00ADB5) unterschreitet auf dem hellen Kartenhintergrund die 4.5:1-Textkontrastgrenze, der dunklere Text-Token sv-r-accent-text (#087776) besteht sie (4.83:1 auf sv-r-bg). Gleiche Regel, gleicher Hintergrund, daher derselbe Token — nicht sv-r-accent-deep, das ist für Ränder/Fokuszustände reserviert (nur 3:1-Schranke), nicht für Fließtext. */ color: var(--wp--preset--color--sv-r-accent-text); margin-bottom: var(--wp--preset--spacing--2xs); } /* Die bisherige Eyebrow-Zeile "Leistung" (Muster: erstes wp:paragraph direkt nach dem Bild) wird auf der Startseite durch die Zahl oben ersetzt — ausgeblendet statt entfernt, damit dieselbe Musterdatei ohne strukturelle Änderung sowohl das alte als auch das neue Erscheinungsbild tragen kann. */ body.home .sv-services-card > p:first-of-type { display: none; } body.home .sv-services-card__title { order: 3; font-family: var(--wp--preset--font-family--heading); font-weight: 500; color: var(--wp--preset--color--sv-r-ink); } body.home .sv-services-card__title a::after { content: none; } body.home .sv-services-card__excerpt { order: 4; color: var(--wp--preset--color--sv-r-text-soft); } body.home .sv-services-card__more { order: 5; display: inline-block; margin-top: var(--wp--preset--spacing--xs); font-size: var(--wp--preset--font-size--xl); line-height: 1; color: var(--wp--preset--color--sv-r-accent-text); text-decoration: none; /* "→" um 45° gedreht zeigt diagonal nach rechts oben ("45 Grad Pfeil", Betreiberwunsch) statt waagrecht nach rechts. Das `core/read-more`- Element ist selbst schon der Link (``), kein zusätzlicher Kind-Container für Text/Icon — daher Schrift/Drehung direkt hier. */ transform: rotate(-45deg); } body.home .sv-services-card__more:hover { color: var(--wp--preset--color--sv-r-accent-deep); } /* ----------------------------------------------------------------------- * 6) Über Silvalue — NACHTRAG 2026-09-22 (später), Betreiber-Mockup für * genau diesen Abschnitt: komplett neu aufgebaut statt nur umgefärbt * (volle Begründung im Musterkommentar, home-approach-de.php). * * Bisher: wp:columns (Bild 45% links, Text 55% rechts), ohne "align" * — dadurch eine an den Inhaltsraster gebundene "Insel" mit sichtbarem * Rand links/rechts zum hellen Seitenhintergrund. * * NACHTRAG 2026-09-22 (dritte Korrektur, aktueller Stand) — * Betreiberfeedback: "der dunkle Hintergrund links und rechts über den * eigentlichen Schrift- und Bildblock sollte über die ganze Seite * gehen" + "der Block sollte weniger hoch sein". Die zweite Korrektur * (siehe Git-Historie) hatte fälschlich die ganze Sektion inkl. * Flächenfarbe auf --sv2-content-max eingerahmt statt nur den Inhalt — * jetzt richtig getrennt, exakt wie bei #leistungen/#kontakt weiter * unten in dieser Datei: äußere Sektion (.sv-approach) randlos * ("align":"full", nur für die Flächenfarbe), eine NEUE innere Gruppe * (.sv-approach-inner, trägt jetzt das Flex-Layout Text:Bild = 2:1) * wird per max-width + margin-inline:auto auf --sv2-content-max * zentriert — dieselbe Breite wie die Leistungen-Karten darüber, aber * die dunkle Fläche bleibt randlos. Bandhöhe zusätzlich reduziert * (vorher bis zu 520px, jetzt bis zu 360px). * -------------------------------------------------------------------- */ /* KORREKTUR (Verifikation am gerenderten Stand, gilt weiterhin): mit nur min-height wurde die Sektion zunächst deutlich zu hoch — Ursache: die Bildspalte (figure) bekam über align-items:stretch selbst zunächst keine definierte Höhe (nur min-height auf dem Flex-Container, keine echte Höhe), wodurch die Prozenthöhe des ("height:100%") ins Leere lief und auf "auto" zurückfiel — das Bild wurde dann in voller, durch seine Breite bestimmter Intrinsic-Höhe gerendert (Breite ÷ Seitenverhältnis), und diese Höhe zog Sektion und Textspalte über die Stretch-Ausrichtung mit. Feste "height" statt nur "min-height" macht die Zeilenhöhe verbindlich, wodurch die Prozenthöhe des korrekt dagegen auflöst — gilt jetzt auf .sv-approach-inner statt auf der äußeren, randlosen Sektion. */ body.home .sv-approach { height: auto; min-height: 0; } body.home .sv-approach.has-sv-ink-background-color { background-color: var(--wp--preset--color--sv-r-ink) !important; } /* Neue innere Gruppe: trägt das Flex-Layout (vorher direkt auf der äußeren Sektion) und wird auf dieselbe Breite wie die Leistungen-Karten darüber zentriert — die äußere Sektion bleibt randlos für die Flächenfarbe. Bandhöhe von vorher bis zu 520px auf jetzt bis zu 360px reduziert (Betreiberwunsch "weniger hoch"). NACHTRAG 2026-09-29 — Betreiberfeedback: "in manchen Ansichten ist der Text im Block 02 Über Silvalue vertikal nicht in einer Linie mit den restlichen Blöcken". Live an mehreren Breiten nachgemessen (Iframe- Testharness): bei 1000/1400/1750px lag die linke Kante von .sv-approach-inner 19–30px WEITER LINKS als bei #leistungen/#kontakt/ .sv-hero__inner (z. B. 1750px: 27,5px statt 57px) — erst ab etwa 1850–1900px Breite trafen sich beide zufällig exakt (deshalb hatte die Prüfung der fünften Korrektur oben, allein bei vw 2400 gemessen, das Problem nicht gefunden). Ursache: reines "margin-inline:auto" zentriert die Spalte symmetrisch innerhalb von --sv2-content-max, während #leistungen/#kontakt (zweistufiger Aufbau: äußere Sektion padding-inline:gutter + innerer max-width, kein margin:auto) und .sv-hero__inner (bereits in der sechsten Korrektur oben auf dieselbe Formel umgestellt) beide der Formel "max(gutter, (100%-content-max)/2)" folgen — bei mittleren Breiten liefert reines Zentrieren einen KLEINEREN Wert als diese Formel, das ist exakt der gemeldete Versatz. Behoben: dieselbe Formel wie bei .sv-hero__inner übernommen (margin-inline-end bewusst 0 statt eines zweiten auto/max-Werts — identischer Mechanismus, dieselbe Begründung wie dort: die äußere Sektion ist randlos, WordPress' eigenes Root-Padding sorgt weiterhin für sichtbaren Restabstand rechts). Nachgeprüft bei 1000/1400/1750/ 1920/2400px: linke Kante jetzt bei jeder Breite exakt identisch mit #leistungen/#kontakt/.sv-hero__inner, Bildspalte bleibt dabei überall sichtbar innerhalb des Viewports (kein Anschlagen an die rechte Kante). KORREKTUR (noch am selben Tag, vor Live-Übernahme, bei der lokalen Sichtprüfung entdeckt): Die Formel allein hatte zunächst KEINE Wirkung — Ursache per CSSOM-Abgleich aller tatsächlich greifenden Regeln gefunden: .sv-approach-inner ist ein direktes Kind von .sv-approach, und .sv-approach trägt (als WordPress-Gruppenblock mit Layout "constrained") die Klasse "is-layout-constrained". WordPress' eigene Block-Support-CSS setzt dafür sitewide ".is-layout-constrained > :where(...) { margin-left: auto !important; margin-right: auto !important; }" — MIT !important, das schlägt eine nicht als !important markierte Regel unabhängig von deren Selektor-Spezifität. .sv-hero__inner traf dieselbe Regel nicht (dessen äußere Sektion .sv-hero nutzt keinen "constrained"-Layout-Typ), deshalb hatte die identische Formel dort schon ohne !important funktioniert — hier zusätzliches !important nötig. */ body.home .sv-approach-inner { max-width: var(--sv2-content-max); margin-inline: max(var(--sv2-gutter), calc((100% - var(--sv2-content-max)) / 2)) 0 !important; height: clamp(260px, 20vw, 360px); box-sizing: border-box; /* Kein "verticalAlignment" im Blockattribut gesetzt (dessen erlaubte Werte in dieser WP-Version unsicher sind) — align-items:stretch hier explizit erzwungen, damit sich Text- und Bildspalte zuverlässig auf die volle Zeilenhöhe strecken. */ align-items: stretch !important; } /* Text:Bild fest 2:1 über flex-grow-Verhältnisse statt Prozentbreite, damit exakt ein Drittel/zwei Drittel gilt, unabhängig von der tatsächlichen Breite von .sv-approach-inner. */ body.home .sv-approach-text-col { display: flex; flex-direction: column; justify-content: center; flex: 2 1 0%; min-width: 280px; /* NACHTRAG 2026-09-26 — Betreiberfeedback: "02/über silvalue vertikal immer noch nicht gleich ausgerichtet wie der rest der seite" (mit "vertikal" ist hier die gemeinsame linke Kante/vertikale Linie gemeint, nicht die Höhe). Ursache: padding-inline-start war bisher var(--wp--preset--spacing--xl) (72px) zusätzlich zum bereits auf --sv2-content-max zentrierten .sv-approach-inner — dadurch begann "02 / Über Silvalue" 72px weiter rechts als "01 / Leistungen", "Kontakt" und die Hero-Eyebrow (alle bei identischem x, live nachgeprüft). Behoben: padding-inline-start entfernt, Textspalte beginnt jetzt bündig mit der linken Kante von .sv-approach-inner — exakt dieselbe x-Position wie bei jeder anderen Section-Überschrift auf der Seite (live nachgemessen: 350,6px bei 2381px-Viewport, identisch). padding-inline-end (Abstand zur Bildspalte) unverändert erhalten. */ padding-inline-end: var(--wp--preset--spacing--lg); padding-block: var(--wp--preset--spacing--lg); box-sizing: border-box; } body.home .sv-approach-text-col .sv-section-eyebrow { color: var(--wp--preset--color--sv-r-accent) !important; } body.home .sv-approach-text-col h2, body.home .sv-approach-text-col p { color: var(--wp--preset--color--sv-r-bg) !important; } body.home .sv-approach-text-col h2 { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--sv-r-heading); font-weight: 500; line-height: 1.1; } body.home .sv-approach-text-col p { font-size: var(--wp--preset--font-size--sv-r-body); opacity: 0.86; } body.home .sv-approach-text-col a { color: var(--wp--preset--color--sv-r-accent) !important; } /* Bildspalte: kein Rand, beansprucht die volle Höhe von .sv-approach-inner als Platz, zentriert das Bild aber nur noch darin statt es zu füllen (siehe NACHTRAG 2026-09-27, zweite Korrektur, direkt unten) — bleibt innerhalb der auf --sv2-content-max zentrierten inneren Gruppe, die randlose dunkle Fläche der äußeren Sektion setzt sich links/rechts davon fort. flex:1 gegen flex:2 der Textspalte = genau ein Drittel Platzanspruch (nicht mehr Bildgröße, siehe unten). */ body.home .sv-approach-media-col { flex: 1 1 0%; min-width: 200px; margin: 0; align-self: stretch; overflow: visible; display: flex; align-items: center; justify-content: center; } /* NACHTRAG 2026-09-27 (zweite Korrektur) — Betreiberrückmeldung zum neuen Porträtfoto: "sollte es nicht vielleicht doch kleiner und mehr hochformat sein?" Bisher (erste Fassung dieses NACHTRAGs) füllte das Bild randlos die ganze Spalte per object-fit:cover, genau wie zuvor das Waldfoto — für ein Waldmotiv passend (beliebiger Ausschnitt aus einer Fläche), für ein Porträt einer echten Person wirkt dieselbe Behandlung dagegen zu groß/zu nah, fast wie ein übergroßes Passfoto. Umgestellt auf ein kleineres, hochformatiges "gerahmtes" Porträt statt eines Bild-Banners: kein object-fit:cover mehr, das Bild behält sein eigenes Seitenverhältnis (hier 4:5, Medien-ID 307, eigens auf dieses Format zugeschnitten statt des vorherigen 1,5:1-Querformat-Zuschnitts für Medien-ID 305 — die ID 305 bleibt ungenutzt in der Mediathek, nicht gelöscht, da sie über die REST-API hochgeladen wurde und daher jederzeit im Mediathek-Raster auffindbar und einzeln löschbar ist, anders als eine lose Datei im Dateisystem). Die Spalte zentriert das Bild statt es zu strecken; die dunkle sv-ink-Fläche bleibt sichtbar rundherum. max-height knapp unter der Bandhöhe (clamp bis 360px), damit auch bei kleinstmöglicher Bandhöhe (260px) noch sichtbarer dunkler Rand oben/unten bleibt. */ body.home .sv-approach-media-col img { display: block; width: auto; height: auto; max-width: min(100%, 240px); max-height: min(100%, 300px); object-fit: contain; border-radius: 2px; } /* NACHTRAG 2026-09-27 — Betreiberwunsch: Link zur Seite "Über Silvalue" im Textblock ergänzen (zuvor an dieser Stelle bewusst entfernt, siehe NACHTRAG 2026-09-22 in home-approach-de.php — bewusste Umkehrung dieser früheren Entscheidung, auf ausdrücklichen Betreiberwunsch). Die Linkfarbe kommt bereits von der bestehenden Regel ".sv-approach-text-col a" oben (Zeile ~874) — hier nur Unterstreichung, volle Deckkraft (statt der 0.86-Absatz-Deckkraft von ".sv-approach-text-col p") und ein dezenter Hover-Zustand ergänzt, angelehnt an .sv-hero__secondary-link (selbe sv-ink-Fläche, gleiche Sektion der Startseite), aber mit umgekehrten Farben (hier Standard = Akzent, Hover = helles sv-r-bg, da die Grundfarbe hier bereits Akzent ist statt bg wie im Hero). */ body.home .sv-approach-link { margin-top: var(--wp--preset--spacing--sm); opacity: 1; } body.home .sv-approach-link a { text-decoration: underline; text-underline-offset: 0.2em; } body.home .sv-approach-link a:hover { color: var(--wp--preset--color--sv-r-bg) !important; } /* Pfeil-Span von [silvalue_about_link ... arrow="→"] (functions.php) — eigener Klassenname statt Wiederverwendung von .sv-service-closing__arrow, da dieser Link nicht im .sv-service-closing-Muster sitzt, sondern in .sv-approach-text-col. */ body.home .sv-approach-link__arrow { margin-inline-start: 0.15em; } /* ----------------------------------------------------------------------- * 7) Kontakt — Formularfelder im Unterstrich-Stil statt Kästchen, mit * sichtbarem Fokus- sowie Fehler-/Erfolgszustand. Wirkt über dieselben * Klassen-Hooks, die contact-cta-de.php bereits für die * Rahmenfarben-Korrektur dokumentiert (.sow-text-field usw.). * * NACHTRAG 2026-09-22 (siebte Korrektur) — Betreiberwunsch: Kontakt- * Bereich komplett nach beigefügtem Referenzbild umbauen, "und natürlich * mit der passenden Weite" (derselbe Versatz wie zuvor bei Hero, siehe * sechste Korrektur oben — hier identisch gelöst: max-width:none + * padding-inline:gutter auf der äußeren Sektion, max-width:content-max + * margin-inline:auto auf den direkten Kindern, exakt wie bei #leistungen). * * Strukturell (Live-Seiteninhalt direkt bearbeitet, NICHT das Muster — * das reale SiteOrigin-Widget mit seiner installationsspezifisch * signierten Instanz existiert nur dort, siehe contact-cta-de.php- * Kopfkommentar): Eyebrow/Überschrift/Einleitung stehen jetzt INNERHALB * der linken Spalte, direkt über E-Mail/Telefon/Anschrift, statt als * volle Zeile über beiden Spalten — genau wie im Referenzbild, wo beide * Spalten auf gleicher Höhe beginnen. Spaltenreihenfolge getauscht * (Kontaktwege links, Formular rechts, vorher umgekehrt) — Breiten * unverändert (40%/60%), nur welcher Inhalt welche Breite bekommt, ist * jetzt vertauscht. Neue Klassen zur gezielten Ansteuerung ergänzt: * sv-contact-info (linke Spalte), sv-contact-form-col (rechte Spalte), * sv-contact-detail (je einer der drei E-Mail/Telefon/Anschrift-Absätze) * — Inhalt/Text selbst unverändert, insbesondere der E-Mail-Shortcode * ([silvalue_contact_email], erzeugt die Verschleierungs-Spans erst beim * Rendern) und das komplette Widget-Markup blieben Zeichen für Zeichen * unangetastet. */ body.home #kontakt ,body.home #contact { background: var(--wp--preset--color--sv-r-bg) !important; border-top-color: var(--wp--preset--color--sv-line) !important; max-width: none !important; padding-inline: var(--sv2-gutter) !important; } /* Zweistufiges Raster wie #leistungen/.sv-approach-inner: äußere Sektion randlos + Gutter-Innenabstand (oben), innere direkte Kinder (Eyebrow, Überschrift, Einleitung — hier nicht mehr vorhanden, jetzt Teil der linken Spalte, siehe Strukturkommentar oben — sowie die wp:columns- Zeile selbst) auf --sv2-content-max zentriert. Ergebnis: identischer linker Rand wie Hero/Leistungen/Über Silvalue bei jeder Viewport-Breite, nachgeprüft auf 0px Differenz (vorher 220px Versatz). */ body.home #kontakt > * ,body.home #contact > * { max-width: var(--sv2-content-max); margin-inline: auto; } /* Senkrechte Trennlinie zwischen den beiden Spalten, wie im Referenzbild — über nth-child statt einer weiteren neuen Klasse, weil die Position (zweite Spalte) eindeutig und stabil ist, unabhängig vom Inhaltstyp. padding-left gleich dem bestehenden Spalten-Zwischenraum (blockGap:lg, contact-cta-de.php), damit die Linie optisch mittig im Zwischenraum sitzt statt einseitig am Formular zu kleben. */ body.home #kontakt .wp-block-columns > .wp-block-column:nth-child(2) ,body.home #contact .wp-block-columns > .wp-block-column:nth-child(2) { border-left: 1px solid var(--wp--preset--color--sv-line); padding-left: var(--wp--preset--spacing--lg); } /* Trennlinien zwischen E-Mail/Telefon/Anschrift (und vor E-Mail, zur Einleitung darüber) — je eine border-top auf jedem der drei .sv-contact-detail-Absätze, kein :first-child-Ausnahmefall nötig, da das Referenzbild auch vor dem ersten Eintrag (E-Mail) eine Linie zeigt. */ body.home #kontakt .sv-contact-detail ,body.home #contact .sv-contact-detail { border-top: 1px solid var(--wp--preset--color--sv-line); padding-top: var(--wp--preset--spacing--sm); margin-top: var(--wp--preset--spacing--sm); } body.home #kontakt .sv-contact-detail strong ,body.home #contact .sv-contact-detail strong { display: block; margin-bottom: 2px; } /* Formularfeld-Labels: mono/Versalien/Sperrung wie die übrigen Redesign-Label (.sv-section-eyebrow, .sv-hero__eyebrow), gedeckter Ton statt vollem Schwarz — exakt wie "NAME *"/"E-MAIL *" im Referenzbild. .sow-form-field-required (der Stern) erbt die Farbe bewusst mit (kein eigener Akzent), im Referenzbild optisch gleich gewichtet wie das Label selbst. */ body.home #kontakt label.sow-form-field-label-above ,body.home #contact label.sow-form-field-label-above { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--sv-r-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--sv-r-text-soft); } body.home #kontakt label.sow-form-field-label-above strong ,body.home #contact label.sow-form-field-label-above strong { font-weight: 400; } /* Absende-Schaltfläche: bewusste Abweichung von der bisherigen Vorgabe "wie die primäre Schaltfläche im Hero" (patterns.css .sow-submit- Kommentar, 2026-08-29/-30) — das Referenzbild zeigt für DIESE Schaltfläche einen eigenen, deutlich größeren Mono-Versalien-Stil mit Pfeil, klar abweichend vom Hero-Button (dort Space Grotesk, Normalschrift). Dem Betreiber gemeldet statt still gelöst. Pfeil per ::after statt im Text: die Beschriftung selbst ("Anfrage Senden") stammt aus der Widget-Instanz (installationsspezifisch, siehe contact-cta-de.php-Kopfkommentar) und wird hier nicht angefasst — ::after funktioniert zuverlässig, weil das Widget ein echtes