/* ======================================================================= * Leistungsübersicht-Redesign — Vergleichsversion (Design-Brief 2026-09-22, * Punkt 4/5, Mockup-PDF "Silvalue-Selected-Design-v3.pdf", Seite 2) * ======================================================================= * Nur auf der Leistungen-Übersichtsseite wirksam (is_page('leistungen') in * functions.php, silvalue_enqueue_assets()) — exakt dasselbe Isolationsmuster * wie home-redesign.css für is_front_page() (siehe dortiger Dateikopf). * Eigene, für sich lauffähige Datei statt einer Erweiterung von * home-redesign.css oder patterns.css, aus demselben Grund: der gesamte * Redesign-Umfang für diese Seite lässt sich mit einer einzigen Datei * entfernen, sollte der Betreiber sich dagegen entscheiden. Duplikate * gemeinsamer Werte (Gutter/Content-Breite, Eyebrow-Stil, Überschriftengewicht) * sind deshalb bewusst hier noch einmal deklariert statt aus home-redesign.css * importiert — beide Dateien bleiben unabhängig ladbar/entfernbar. * * Farbig/strukturell an die bereits umgesetzte Startseite angelehnt * ("shared layout grid" laut Brief): gleiche sv-r-*-Token, gleiches * Gutter-/Breitenmaß (--sv2-gutter/--sv2-content-max, identische Werte wie * home-redesign.css), gleiches Überschriftengewicht 500 statt des globalen * theme.json-Werts 600. * * Wortlaut/Struktur (Eyebrow, Überschrift, Einleitung, vier Leistungsgruppen * mit Kurztexten, Kontakt-Banner) direkt aus dem Betreiber-Brief vom * 2026-09-22 übernommen, keine eigene Ergänzung. Die vier Gruppen und ihre * elf Leistungen entsprechen inhaltlich exakt docs/entscheidungen/ * leistungsstruktur.md Abschnitt 14 (gleiche elf echten Leistungsseiten, * gleiche Vier-Gruppen-Zuordnung) — Reihenfolge der Leistungen innerhalb der * Gruppen und der Gruppenname "Bewertung & Planung" (statt dort "Planung & * Bewertung") folgen stattdessen dem Mockup-Wortlaut des Briefs; an den * Betreiber zurückgemeldet, nicht stillschweigend vereinheitlicht. * ===================================================================== */ /* NACHTRAG 2026-09-28 — Betreiberauftrag "Breiten-/Abstands-System vereinheitlichen" (Prompt 2): --sv2-gutter/--sv2-content-max (inkl. der 1920px-Fixierung) kamen hier bisher als lokale Kopie derselben Werte aus home-redesign.css/content-page-redesign.css. Beide Variablen jetzt zentral in assets/css/layout-tokens.css (geladen vor dieser Datei, siehe functions.php) — Werte unverändert, nur die Pflegestelle ist jetzt eine einzige. Da die Variablen auf :root gesetzt sind, werden sie wie zuvor an .sv-services-redesign/.sv-services-redesign-banner vererbt; kein Verhaltensunterschied. */ .sv-services-redesign h1, .sv-services-redesign h2, .sv-services-redesign h3, .sv-services-redesign-banner h2 { font-weight: 500; } /* ----------------------------------------------------------------------- * 1) Abschnittsrahmen — dieselbe Technik wie #leistungen/#kontakt auf der * Startseite (home-redesign.css): eigenes Gutter statt der globalen * Randabstände, Inhalt darunter auf --sv2-content-max geklammert. * -------------------------------------------------------------------- */ .sv-services-redesign { background: var(--wp--preset--color--sv-r-bg) !important; max-width: none; padding-inline: var(--sv2-gutter) !important; padding-block: var(--wp--preset--spacing--xl); } .sv-services-redesign > * { max-width: var(--sv2-content-max); margin-inline: auto; } /* ----------------------------------------------------------------------- * 2) Einleitung — Eyebrow, H1 (ersetzt den automatischen Seitentitel, siehe * templates/page-no-title.html), Einleitungssatz. * -------------------------------------------------------------------- */ .sv-services-redesign__intro { padding-bottom: var(--wp--preset--spacing--lg); } /* NACHTRAG 2026-09-24 — Betreiberwunsch: Eyebrow, H1 und Einleitungssatz sollen dieselbe (linksbündige) Ausrichtung bekommen wie die Startseite (body.home .sv-hero__copy, home-redesign.css) statt der bisherigen Zentrierung. Ursache der Zentrierung liegt nicht in diesem Musters eigenem CSS, sondern in WordPress' Core-Regel für "constrained"-Layouts: ".is-layout-constrained > :where(...) { max-width: ...; margin-left/ right: auto !important; }". WordPress vergibt die Klasse "is-layout-constrained" beim Rendern ungewöhnlicherweise an .sv-services-redesign__intro selbst (rohes
, direktes Kind der äußeren constrained-Gruppe .sv-services-redesign — bereits gegen die gerenderte Seite geprüft, kein Fehler in diesem Muster), wodurch jedes Kind (Eyebrow/H1/Absatz) einzeln als Block zentriert wird. Override statt Markup-Umbau, weil die Ursache in WP-Core-CSS liegt: */ .sv-services-redesign__intro > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } .sv-services-redesign__intro .sv-section-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-accent-text); margin-bottom: var(--wp--preset--spacing--sm); } /* NACHTRAG 2026-09-24 (2) — Betreiberwunsch: "Klarheit für Ihren Wald." bekommt dieselbe Größe wie die Hero-Hauptüberschrift der Startseite (body.home .sv-hero__copy h1, home-redesign.css). Nur die Größe wird übernommen — Schriftart (heading statt mono) und -stärke bleiben wie bisher, das war nicht Teil des Betreiberwunschs. NACHTRAG 2026-09-24 (2b) — Die Hero-Überschrift trägt seit demselben Tag einen festen Wert (71px, konkret vom Betreiber genannt) statt des vorherigen fluiden sv-r-hero-Clamps (siehe dortiger Kommentar, home-redesign.css) — hier aus Synchronitätsgründen ebenfalls auf 71px fest umgestellt statt weiter calc(sv-r-hero × 1,12) zu berechnen (das Ergebnis wäre sonst nicht mehr mit der Hero-Überschrift identisch). */ .sv-services-redesign__intro h1 { font-family: var(--wp--preset--font-family--heading); font-size: 71px; color: var(--wp--preset--color--sv-r-ink); margin: 0 0 var(--wp--preset--spacing--sm); } /* NACHTRAG 2026-09-28 — Betreiberwunsch: "Übertrage dieselbe responsive H1-Logik auf die Leistungsübersicht" (Header/Hero-Auftrag vom selben Tag). Diese Überschrift ist per NACHTRAG 2026-09-24 (2b) oben ausdrücklich mit der Hero-Überschrift der Startseite synchron gehalten (dort derselbe feste Wert 71px, aus demselben Grund) — die dortige responsive Korrektur (home-redesign.css, body.home .sv-hero__copy h1) wird deshalb hier unverändert übernommen, identische Breakpoints und Werte, damit beide Überschriften bei jeder Fensterbreite weiterhin dieselbe Größe zeigen. Volle Herleitung/Messung dort. */ @media (max-width: 600px) { .sv-services-redesign__intro h1 { font-size: clamp(42px, calc(2.86vw + 30.9px), 48px); line-height: 1.03; } } /* Untergrenze bewusst 600px statt 601px (überlappend statt lückenlos anschließend) — dieselbe, am gerenderten Ergebnis gefundene Zwischenwert-Lücke wie in home-redesign.css, volle Herleitung dort. */ @media (min-width: 600px) and (max-width: 781px) { .sv-services-redesign__intro h1 { font-size: clamp(48px, calc(12.78vw - 28.8px), 71px); line-height: 1.04; } } .sv-services-redesign__intro p { font-size: var(--wp--preset--font-size--sv-r-body); color: var(--wp--preset--color--sv-r-text-soft); max-width: 46em; margin: 0; } /* ----------------------------------------------------------------------- * 3) Vier Leistungsgruppen — Nummer + Gruppenüberschrift links (schmale * Spalte), Leistungszeilen rechts. Zweispaltiges Grid pro Gruppe statt * Flex, damit die linke Spalte bei jeder Zeilenzahl exakt an der ersten * Zeile ausgerichtet bleibt (align-items:start), nicht vertikal zentriert * über der ganzen Gruppe. * -------------------------------------------------------------------- */ /* NACHTRAG 2026-09-29 — Betreiberfeedback: "auf der Übersichtsseite Leistungen sind die Leistungen der Gruppen vertikal nicht gleichmäßig angeordnet. Alle Spalten der Gruppen sollten die selbe Weite haben. derzeit hängt dies anscheinend von der Länge des Gruppennamens ab". Zutreffend, und exakt vom vorherigen Verhalten so beabsichtigt (siehe NACHTRAG 2026-09-28 unten): jede .sv-services-group war ihr EIGENES, unabhängiges Grid — die linke Spalte wuchs deshalb pro Gruppe einzeln auf max-content ihrer eigenen Überschrift, live nachgemessen bei 1300px: "Infrastruktur & Sicherheit" 398,4px, "Daten & Technologie" dagegen nur 323,5px — die vier Leistungszeilen-Spalten begannen dadurch an vier verschiedenen x-Positionen (403–478px), statt bündig untereinander zu stehen. Fix: EIN gemeinsames Grid für alle vier Gruppen statt vier einzelner — .sv-services-redesign__groups selbst trägt jetzt grid-template-columns, .sv-services-group wird zu "display:contents" (erzeugt keine eigene Box mehr, gibt aber seine beiden Kinder .sv-services-group__head/ -rows direkt als Grid-Items an den gemeinsamen Grid-Container weiter — Standardverhalten von display:contents, in allen unterstützten Browsern dieses Projekts verfügbar). Dadurch berechnet der Browser die erste Spaltenbreite (weiterhin minmax(160px, max-content), siehe NACHTRAG 2026-09-28 unten für die Begründung dieser Formel) EINMAL über ALLE acht Grid-Items hinweg — sie richtet sich jetzt nach der LÄNGSTEN Überschrift aller vier Gruppen (weiterhin "Infrastruktur & Sicherheit"), und alle vier Leistungszeilen-Spalten beginnen dadurch an derselben x-Position. Live nachgeprüft bei 1300px: alle vier rowsLeft-Werte jetzt identisch bei 477,97px (vorher 403–478px). Innenabstand (padding-block:lg) und Trennlinie (border-top), vorher auf der jetzt kistenlosen .sv-services-group selbst, wandern dafür auf die beiden Kind-Elemente (padding-block) bzw. auf ein ::before-Pseudoelement von .sv-services-group (border-top, grid-column:1/-1 — auch das funktioniert an einem display:contents-Element: das Pseudoelement wird trotzdem als eigenes Grid-Item eingereiht, hier bewusst genutzt, um die Trennlinie über beide Spalten hinweg als EINE durchgehende Linie zu zeichnen statt zwei Linien-Fragmente mit Lücke am Spalten-Gap). Die erste Gruppe bekommt weiterhin keine Trennlinie (:not(:first-child) am ::before) und kein oberes Padding (eigene Regel unten) — unverändert zum bisherigen Verhalten. Die negative margin-top-Verschiebung auf .sv-services-group__rows (NACHTRAG 2026-09-24 (7) weiter unten) bleibt unverändert bestehen und funktioniert unverändert korrekt (relativ zum jetzt auf .sv-services-group__rows selbst sitzenden padding-block, live nachgeprüft: Zeilenabstand Kopf/erste Leistungszeile unverändert bei alle vier Gruppen). Mobil (≤781px, Punkt 6 weiter unten) gestapelt unverändert: grid-template-columns wandert dafür ebenfalls von .sv-services-group auf .sv-services-redesign__groups. */ .sv-services-redesign__groups { padding-top: var(--wp--preset--spacing--md); display: grid; grid-template-columns: minmax(160px, max-content) 1fr; column-gap: var(--wp--preset--spacing--lg); align-items: start; } /* NACHTRAG 2026-09-24 (5) — Betreiberwunsch: Gruppenüberschriften sollen nicht umbrechen, solange die Seitenbreite es zulässt; die Leistungszeilen rechts sollen dafür weiter nach rechts wandern. Bisheriger fester Maximalwert der linken Spalte (260px) war für die jetzt größere Gruppenüberschrift (Punkt 4 oben, sv-r-heading statt 2xl) zu schmal — selbst die kürzeste Überschrift ("Daten & Technologie") brach dadurch um. Neuer Maximalwert 420px per Messung ermittelt: die längste Kombination aus Nummer+Abstand+Überschrift ("Infrastruktur & Sicherheit", 30px Space Grotesk 500) braucht rechnerisch 398,4px — 420px lässt etwas Luft. Weiterhin minmax() statt eines festen Werts: Auf schmaleren Viewports (unterhalb des 781px-Umbruchpunkts weiter unten stapeln die Spalten ohnehin einspaltig; im Bereich dazwischen) darf die Spalte auf ihr bisheriges Minimum 160px zurückschrumpfen und die Überschrift wieder umbrechen, statt die Leistungszeilen-Spalte auf sehr schmalen Bildschirmen zu stark zusammenzudrücken. */ /* NACHTRAG 2026-09-24 (6) — Betreiberwunsch: Leistungszeilen-Spalte nochmals ca. 1–2cm weiter nach rechts (max. Breite der linken Spalte 420px -> 480px, +60px ≈ 1,6cm bei 96dpi-CSS-Referenzpixeln — die linke Spalte selbst braucht dafür weiterhin nur 398,4px, siehe Messung oben, der Rest ist bewusst freier Raum vor der zweiten Spalte). * * NACHTRAG 2026-09-28 — Betreiberauftrag "gestalterische Vereinheitlichung * und responsive Qualitätsprüfung" (Prompt 3), Punkt 1: der feste * 480px-Höchstwert verhielt sich bei üblichen Desktop-/Tablet-Breiten * (u. a. 1.024px) faktisch wie eine FESTE linke Spalte, nicht wie eine * flexible — CSS-Grid füllt bei `minmax(MIN, FIXED_MAX)` einer nicht-`fr`- * Spalte deren gesamten Wachstumsspielraum bis zum festen Maximalwert * zuerst auf ("Maximieren nicht-flexibler Spuren" vor der `1fr`-Spalte), * bevor die `1fr`-Spalte überhaupt Platz bekommt — bei 1.024px blieb die * linke Spalte dadurch bei vollen 480px stehen, obwohl die längste * Gruppenüberschrift ("Infrastruktur & Sicherheit") laut eigener Messung * oben nur 398,4px braucht. Der Rest (ca. 80px) ging der rechten * Leistungszeilen-Spalte verloren, exakt das gemeldete Symptom. * * Fester Maximalwert 480px ersetzt durch `max-content`: die Spalte wächst * jetzt nur noch so weit wie ihr tatsächlicher Inhalt (Nummer + Abstand + * Gruppenüberschrift, ungebrochen) es verlangt — nie mehr, nie weniger — * und gibt jeden Pixel darüber hinaus an die `1fr`-Leistungszeilen-Spalte * ab. Das bisherige Minimum 160px bleibt unverändert (schützt die rechte * Spalte auf schmaleren Zwischenbreiten weiterhin davor, zu stark * zusammengedrückt zu werden, bevor bei 781px ohnehin einspaltig gestapelt * wird). */ .sv-services-group { /* War vorher selbst ein eigenständiges Grid (display:grid), siehe NACHTRAG 2026-09-29 oben — jetzt "contents", damit seine beiden Kinder direkt im gemeinsamen Grid von .sv-services-redesign__groups landen und sich dessen Spaltenbreiten teilen statt jede Gruppe ihr eigenes max-content zu berechnen. */ display: contents; } .sv-services-group__head, .sv-services-group__rows { padding-block: var(--wp--preset--spacing--lg); } .sv-services-group:first-child .sv-services-group__head, .sv-services-group:first-child .sv-services-group__rows { padding-top: 0; } /* Dickerer, dunklerer Trenner zwischen den vier Gruppen (Brief: "thin darker dividers between groups"). sv-line-strong statt sv-line/ sv-line-soft, dieselbe Begründung wie bei Formularfeldrändern (CLAUDE.md Abschnitt 6): 3.51:1 auf sv-r-bg, klar über der 3:1-Schwelle für Bedienelemente/Trennlinien; sv-line/-soft (~1.3:1) wären hier nicht sicher sichtbar. Als ::before von .sv-services-group statt border-top auf einem der beiden Kinder, damit die Linie als EIN durchgehendes Grid-Item über beide Spalten (grid-column:1/-1) läuft, siehe NACHTRAG 2026-09-29 oben. */ .sv-services-group:not(:first-child)::before { content: ""; grid-column: 1 / -1; border-top: 1px solid var(--wp--preset--color--sv-line-strong); } /* NACHTRAG 2026-09-24 (3) — Betreiberwunsch: Nummer ("01" usw.) steht links neben der Gruppenüberschrift statt darüber gestapelt; die Größe der Nummer selbst bleibt unverändert (Betreiberwunsch ausdrücklich: "die Größe bleibt gleich"). Dafür neue Klasse "sv-services-group__head" auf dem bisher unbenannten Wrapper-
um Nummer+Überschrift ergänzt (patterns/services-index-redesign-de.php UND Live-Seite ID 59 synchron — rohes HTML außerhalb von Block-Kommentaren, siehe dortiger STRUKTUR-Kommentar, deshalb direkte Content-Bearbeitung statt Block-Editor). align-items:baseline statt center/start, damit die deutlich kleinere Nummer optisch auf derselben Schriftlinie wie die nun größere Überschrift sitzt statt mittig an ihrer vollen Zeilenhöhe. */ .sv-services-group__head { display: flex; align-items: baseline; gap: var(--wp--preset--spacing--xs); } .sv-services-group__number { display: block; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--sv-r-label); letter-spacing: 0.14em; color: var(--wp--preset--color--sv-r-accent-text); } /* NACHTRAG 2026-09-24 (4) — Betreiberwunsch: Gruppenüberschrift wird größer — Zielgröße ausdrücklich die BISHERIGE Größe der Seitenüberschrift "Klarheit für Ihren Wald" (Token sv-r-heading), bewusst UNABHÄNGIG von deren eigener Vergrößerung weiter oben (die trägt jetzt die größere Hero-Größe sv-r-hero×1.12) — beide Änderungen referenzieren deshalb unterschiedliche Tokens, keine Kopplung. Vorher: --wp--preset--font- size--2xl (deutlich kleiner, siehe Auftragsbericht für den Ist-Wert). */ .sv-services-group__title { 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); margin: 0; } /* NACHTRAG 2026-09-24 (7) — Betreiberwunsch: Der erste Leistungsname soll auf derselben Höhe stehen wie der Gruppenname. Jede Leistungszeile trägt ihr eigenes oberes Padding (padding-block: sv-r-spacing--sm weiter unten, .sv-service-row) — nötig für gleichmäßigen Abstand zwischen den Zeilen und eine ausreichend große Klickfläche je Zeile, verschiebt dadurch aber auch den TEXT der ersten Zeile um denselben Betrag nach unten, unabhängig von der Gruppenüberschrift links (deren eigener Text sitzt direkt am Zellenrand, ohne so ein Padding). Statt das Padding nur bei der ersten Zeile zu entfernen (hätte ihre Klickfläche gegenüber den übrigen Zeilen verkleinert), hier stattdessen die ganze Spalte um genau dieses Padding nach oben versetzt (negativer margin-top) — jede Zeile behält ihre volle, gleich große Klickfläche, nur die sichtbare Position der gesamten Liste rückt an den Zellenrand. */ .sv-services-group__rows { display: flex; flex-direction: column; margin-top: calc(var(--wp--preset--spacing--sm) * -1); } /* Leistungszeile — komplette Zeile ein einziger Link (größere Klickfläche), Fokusring kommt automatisch aus dem globalen a:focus-visible in base.css (kein eigenes Outline nötig, dort bereits gegen sv-r-bg/sv-white geprüft: sv-ink-Outline, 12.6:1 auf sv-r-bg). */ .sv-service-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--wp--preset--spacing--md); padding-block: var(--wp--preset--spacing--sm); text-decoration: none; color: inherit; /* Hellerer Trenner zwischen einzelnen Leistungen (Brief: "lighter dividers between individual services") — sv-line, rein dekorativ, kein Bedienelement-Rand im WCAG-1.4.11-Sinn (die klickbare Fläche ist die ganze Zeile, nicht die Linie selbst). */ border-bottom: 1px solid var(--wp--preset--color--sv-line); } .sv-services-group__rows .sv-service-row:last-child { border-bottom: none; } .sv-service-row__text { display: flex; flex-direction: column; gap: 0.2em; } .sv-service-row__title { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--lg); font-weight: 500; color: var(--wp--preset--color--sv-r-ink); } .sv-service-row__desc { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--sv-r-text-soft); } /* NACHTRAG 2026-09-24 (8) — Betreiberwunsch: Derselbe 45°-Pfeil wie auf der Startseite (body.home .sv-services-card__more, home-redesign.css) statt des bisherigen waagrechten "→" — identischer Mechanismus (dasselbe "→"- Zeichen per transform:rotate(-45deg) diagonal nach rechts oben gedreht) und dieselbe Zielgröße (--wp--preset--font-size--xl, 26px statt bisher 18px geerbt) — "alle Linkpfeile etwas größer", hier die einzigen Linkpfeile dieser Seite. line-height:1, damit die größere Schrift den Flex-Zeilenabstand der Leistungszeile nicht unnötig aufweitet. Hover/Fokus behält die bisherige kurze Verschiebeanimation (jetzt rotate(-45deg) + translateX(4px) statt nur translateX(4px)) — durch die vorangehende Drehung wirkt dieselbe translateX-Verschiebung im gedrehten Koordinatensystem des Elements automatisch als diagonale Bewegung nach rechts oben, also in Pfeilrichtung, statt seitwärts. */ .sv-service-row__arrow { flex-shrink: 0; display: inline-block; font-size: var(--wp--preset--font-size--xl); line-height: 1; color: var(--wp--preset--color--sv-r-accent-text); transition: transform 0.15s ease; transform: rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .sv-service-row__arrow { transition: none; } } .sv-service-row:hover .sv-service-row__arrow, .sv-service-row:focus-visible .sv-service-row__arrow { transform: rotate(-45deg) translateX(4px); } /* ----------------------------------------------------------------------- * 4) Dunkler Kontakt-Banner — eigener, alignfull Abschnitt nach der * Gruppenliste, sv-r-ink-Hintergrund. Die helle Textfarbe kommt * automatisch aus dem globalen Hell-auf-Dunkel-Automatismus in * base.css (":where(.has-sv-ink-background-color) h1/p/a"), sobald der * Block "sv-ink" als backgroundColor trägt — hier bewusst "sv-r-ink" * (Redesign-Token) verwendet, deshalb hier eigene Regeln statt Verlass * auf den globalen Automatismus, der nur auf den Original-Token "sv-ink" * reagiert. * -------------------------------------------------------------------- */ .sv-services-redesign-banner { background: var(--wp--preset--color--sv-r-ink) !important; max-width: none; padding-inline: var(--sv2-gutter) !important; padding-block: var(--wp--preset--spacing--xl); text-align: center; } .sv-services-redesign-banner > * { max-width: var(--sv2-content-max); margin-inline: auto; } .sv-services-redesign-banner h2 { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--sv-r-heading); color: var(--wp--preset--color--sv-r-bg); margin: 0 0 var(--wp--preset--spacing--xs); } .sv-services-redesign-banner p { font-size: var(--wp--preset--font-size--sv-r-body); /* C2 (2026-10-08): sv-r-text-soft (#5A6B63) hat auf sv-r-ink nur 3,02:1 Kontrast (gefordert 4,5:1); sv-line (#DCDAD3) kommt auf 12,19:1. */ color: var(--wp--preset--color--sv-line); margin: 0 0 var(--wp--preset--spacing--md); } .sv-services-redesign-banner .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; } .sv-services-redesign-banner .wp-block-button__link:hover { background-color: var(--wp--preset--color--sv-r-bg); } /* ----------------------------------------------------------------------- * 5) Schmaler heller Streifen vor dem Footer. * * NACHTRAG 2026-09-24 — Betreiberwunsch: dieser Streifen (der * WordPress-Standard-Blockabstand zwischen
und dem * Footer-Template-Teil — beide direkte Kinder von .wp-site-blocks, Core- * Regel ":where(.wp-site-blocks) > * { margin-block-start: * var(--wp--preset--spacing--md); }", bisher 32px, sichtbar hell, weil dort * der normale, helle Seitenhintergrund zwischen zwei dunklen Blöcken * (Kontakt-Banner oben, Footer unten) durchscheint) soll ca. 5cm hoch * werden. 5cm entspricht bei den in CSS fest definierten 96px/Zoll exakt * 189px (5cm × 96 ÷ 2,54) — als px statt nativer CSS-cm-Einheit angegeben, * damit sich der Wert wie jeder andere feste Abstand in diesem Projekt * liest (dieselbe Umrechnung wie bereits bei der Leistungszeilen-Spalte * oben, Punkt 6). * * ".wp-site-blocks > footer" statt einer Body-Klasse zur Seiteneingrenzung: * diese Datei lädt ohnehin nur auf is_page('leistungen') * (silvalue_enqueue_assets(), functions.php) — betrifft also automatisch * weder die Startseite noch jede andere Seite. Die Core-Regel selbst nutzt * ":where(...)" (Spezifität 0), ein einfacher Element+Klassen-Selektor * reicht deshalb zum Überschreiben, kein !important nötig. * -------------------------------------------------------------------- */ .wp-site-blocks > footer { margin-top: 189px; } /* ----------------------------------------------------------------------- * 6) Mobil — Gruppen einspaltig stapeln ("Columns stack logically on * mobile, without horizontal scrolling", Brief Punkt 5), Nummer über * Gruppenüberschrift bleibt wie am Desktop (schon im Markup so * angeordnet), nur die zweite Grid-Spalte entfällt. * * NACHTRAG 2026-09-29 — grid-template-columns wandert von * .sv-services-group auf .sv-services-redesign__groups (dort sitzt * seit der gemeinsamen-Grid-Korrektur oben die eigentliche * Spaltendefinition; .sv-services-group selbst ist jetzt * "display:contents" und hat keine eigenen Grid-Properties mehr, die * hier zu überschreiben wären). Bei einer einzigen Spalte stapeln * Kopf und Zeilen jeder Gruppe automatisch in Quellreihenfolge * untereinander — live bei 390px nachgeprüft: alle vier Gruppen * stapeln korrekt, Kopf jeweils über den zugehörigen Zeilen. */ @media (max-width: 781px) { .sv-services-redesign__groups { grid-template-columns: 1fr; } .sv-service-row { flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--2xs); } .sv-service-row__arrow { display: none; } }