/* Weser Theme – Sektionsabstände ============================================================================ EINE Datei für den Abstand oberhalb und unterhalb JEDES Blocks. Vorher steckte dieser Abstand verteilt in 19 Block-CSS-Dateien; hier steht er jetzt gesammelt und ist zentral änderbar. Aufbau (die Reihenfolge der drei Abschnitte ist wichtig – sie entscheidet, dass die Redaktions-Auswahl die Vorgabe schlägt, ganz ohne !important): 1. SKALA Die fünf Stufen als Custom Properties, je Breakpoint. 2. VORGABEN Was ein Block mitbringt, wenn im Backend „Standard" steht. Das sind exakt die gegen Figma abgenommenen Werte. 3. AUSWAHL Die Klassen .sp-t-* / .sp-b-*, die das ACF-Feld setzt. Sie überschreiben nur die Variable, nicht die Eigenschaft. Jeder Block setzt also nur --sec-top / --sec-bottom; die Anwendung auf padding (bzw. margin bei den beiden Blöcken mit farbiger Vollfläche) passiert einmalig in Abschnitt 2c. Breakpoints im Projekt: Mobil < 768 · Tablet 768–1199 · Desktop ≥ 1200. Tablet nimmt den Mobil-Wert – Projektkonvention. Keine clamp()-Größen – feste Stufen je Breakpoint. ========================================================================== */ /* ══ 1. SKALA ═══════════════════════════════════════════════════════════════ Stufe Desktop Tablet/Mobil XL 80px 48px L 64px 40px M 48px 32px S 24px 16px Kein Abstand 0 0 Die Beschriftung im Backend nennt genau diese Zahlen – siehe weser_section_space_choices() in inc/acf-blocks.php. Wer hier etwas ändert, muss dort die Beschriftung mitziehen. */ :root { --sp-xl: 48px; --sp-l: 40px; --sp-m: 32px; --sp-s: 16px; } @media (min-width: 1200px) { :root { --sp-xl: 80px; --sp-l: 64px; --sp-m: 48px; --sp-s: 24px; } } /* ══ 2. VORGABEWERTE JE BLOCK ═══════════════════════════════════════════════ Das ist der Stand, der gegen die Figma-Screenshots abgenommen wurde. Hier wird beim gemeinsamen Durchgehen der Elemente nachjustiert. */ /* ── 2a. Der Regelfall: 80px Desktop · 48px Tablet/Mobil, oben wie unten ── Die Sprint-2-Blöcke. */ .block-page-intro, .block-related-links, .block-value-cards, .block-icon-cards, .block-check-columns, .block-cta-box, .block-logo-row, .block-timeline { --sec-top: 48px; --sec-bottom: 48px; } /* Die Sprint-1- und Sprint-3-Blöcke: 80px Desktop, 48px Tablet/Mobil – also die Stufe XL. ⚠️ Bis 2.8.0 standen sie auf festen 80px AUCH auf Mobil („bewusst so belassen, bis wir die Elemente gemeinsam durchgehen"). Zwei davon untereinander ergaben mobil 160px Weißraum – das war der Kern von Kundenfeedback 01, Mobil 17/24/31/34: „Bitte nochmal eigenständig auf allen Seiten die bereits genannten großen Abstände überall korrigieren." Desktop bleibt unverändert. */ .block-intro-features, .block-static-product-selector, .block-verlegeart, .block-inspiration-grid, .block-inspiration-slider, .block-inspiration-categories, .block-service-tiles, .block-text-cta, .block-feature-slider, .block-category-tiles, .block-product-highlights, .block-video-cards, .block-choice-cards, .block-shop-banner, .block-duo-columns, .block-brand-intro, .block-image-row { --sec-top: var(--sp-xl); --sec-bottom: var(--sp-xl); } /* Rechtstexte. Die Seiten haben keinen Hero – der Block sitzt direkt unter dem Header und braucht oben denselben Abstand wie unten. */ .block-legal-text { --sec-top: var(--sp-xl); --sec-bottom: var(--sp-xl); } /* Oben 48px auf ALLEN Breakpoints, unten der Regelfall. So im Figma gemessen: Die Überschrift dieser Blöcke sitzt näher am vorherigen Block als der Regelfall. */ .block-download-center, .block-faq-list, .block-job-list { --sec-top: 48px; --sec-bottom: 48px; } /* Stellenliste, Mobil: nur 24px nach unten (Figma: 26px bis zum nächsten Block). */ .block-job-list { --sec-bottom: 24px; } /* Mauersystem-Teaser: oben 48px auf allen Breakpoints, unten 80px Desktop bzw. 48px Tablet/Mobil (bis 2.8.0 auch mobil 80px, siehe oben). */ .block-wall-system-teaser { --sec-top: 48px; --sec-bottom: var(--sp-xl); } /* Händlersuche: oben 0, weil der Block seine eigene Oberkante mitbringt (1px-Linie über die volle Breite) und der Einleitungstext darüber bereits 80px liefert. Im Entwurf sind es von der letzten Textzeile bis zur Linie 86px – die 6px Rest holen wir uns nicht über einen zweiten Abstand. Unten der Regelfall. */ .block-dealer-search { --sec-top: 0px; --sec-bottom: 48px; } @media (min-width: 768px) { /* Ab Tablet fällt die Sonderregel der Stellenliste weg. */ .block-job-list { --sec-bottom: 48px; } } @media (min-width: 1200px) { .block-page-intro, .block-related-links, .block-value-cards, .block-icon-cards, .block-check-columns, .block-cta-box, .block-logo-row, .block-timeline { --sec-top: 80px; --sec-bottom: 80px; } .block-download-center, .block-faq-list, .block-job-list { --sec-top: 48px; --sec-bottom: 80px; } .block-dealer-search { --sec-bottom: 80px; } } /* ── 2a'. Mobil (< 768px): 24px oben und unten ────────────────────────── Figma-Wert vom User, 2026-09-16: „auf den Seiten ist es mobil immer eher so 24px oben und 24px unten". Gilt für jeden Block mit Vorgabe – Tablet behält seine Werte. Ausnahmen: die Händlersuche oben (bringt ihre eigene Kante mit) und die blaue Formularfläche (steht bündig, siehe 2b). Eine Auswahl im Backend (Abschnitt 3) schlägt auch diesen Wert. */ @media (max-width: 767.98px) { .block-page-intro, .block-related-links, .block-value-cards, .block-icon-cards, .block-check-columns, .block-cta-box, .block-logo-row, .block-timeline, .block-download-center, .block-faq-list, .block-job-list, .block-wall-system-teaser, .block-intro-features, .block-static-product-selector, .block-verlegeart, .block-inspiration-grid, .block-inspiration-slider, .block-inspiration-categories, .block-service-tiles, .block-text-cta, .block-feature-slider, .block-category-tiles, .block-product-highlights, .block-video-cards, .block-choice-cards, .block-shop-banner, .block-duo-columns, .block-brand-intro, .block-image-row, .block-legal-text { --sec-top: 24px; --sec-bottom: 24px; } .block-dealer-search { --sec-bottom: 24px; } /* Händlersuche: Einleitung → Suchbereich nur 16px (User 2026-09-16). Die Händlersuche selbst hat oben 0, der Abstand gehört also dem Block davor – aber nur, wenn die Suche direkt folgt. */ .block-page-intro:has(+ .block-dealer-search) { --sec-bottom: 16px; } } /* Verlegeart (2.21.0): Band → „Entdecke das passende Sortiment.“ 100px (User 19.10., Figma). Der Selektor darunter bringt oben seine 80 mit, also bleiben hier unten 20. Tablet/Mobil: Regelfall (kein Entwurf). */ @media (min-width: 1200px) { .block-verlegeart { --sec-bottom: 20px; } } /* ── 2b. Blöcke mit farbiger Vollfläche ────────────────────────────────── Bei diesen beiden sitzt die Hintergrundfarbe auf dem
selbst. Padding würde dort die FARBFLÄCHE vergrößern statt Weißraum zu schaffen – deshalb wirkt die Auswahl hier auf margin (siehe 2c). Vorgabe 0 = exakt wie bisher. Das Innen-Padding der blauen Formularfläche bleibt unberührt in blocks/form-section.css. */ .block-form-section { --sec-top: 0px; --sec-bottom: 0px; } /* Der Halbbild-Teaser bekommt Luft – Kundenfeedback 01 vom 2026-09-09: „Abstand zwischen letztem Teaser und Footer". Nachgemessen stand er auf der Startseite und /mauersysteme/ mit 0px direkt am Fuss; die uebrigen Seiten enden auf einem Block, der seine 80px schon mitbringt. Vom User am 2026-09-09 aus Figma: 80px unten, 80px oben. Eingetragen ist `--sp-xl` und nicht die feste Zahl – das IST 80px auf Desktop und faellt auf Tablet/Mobil auf 48px, wie bei jedem anderen Block der Skala. Wer hier hart 80px will, traegt sie direkt ein; dann steht der Teaser als einziger Block ausserhalb der Abstandsskala. ⚠️ Bewusst NICHT mit `.block-form-section` zusammen: Die beiden teilten sich die Regel, und die blaue Formularflaeche soll weiter buendig sitzen. */ .block-split-teaser { --sec-top: var(--sp-xl); --sec-bottom: var(--sp-xl); } /* Mobil wie alle anderen: 24px (siehe 2a'). */ @media (max-width: 767.98px) { .block-split-teaser { --sec-top: 24px; --sec-bottom: 24px; } } /* ── 2c. Anwendung ─────────────────────────────────────────────────────── Der Hero fehlt hier bewusst: Er sitzt immer ganz oben, bringt eine eigene Höhenlogik mit und bekommt deshalb auch kein Auswahlfeld. */ .block-page-intro, .block-related-links, .block-value-cards, .block-icon-cards, .block-check-columns, .block-cta-box, .block-logo-row, .block-timeline, .block-download-center, .block-faq-list, .block-job-list, .block-wall-system-teaser, .block-intro-features, .block-static-product-selector, .block-verlegeart, .block-inspiration-grid, .block-inspiration-slider, .block-inspiration-categories, .block-service-tiles, .block-text-cta, .block-dealer-search, .block-feature-slider, .block-category-tiles, .block-product-highlights, .block-video-cards, .block-choice-cards, .block-shop-banner, .block-duo-columns, .block-brand-intro, .block-image-row, .block-legal-text { padding-top: var(--sec-top, 0px); padding-bottom: var(--sec-bottom, 0px); } .block-form-section, .block-split-teaser { margin-top: var(--sec-top, 0px); margin-bottom: var(--sec-bottom, 0px); } /* ══ 3. AUSWAHL AUS DEM BACKEND ═════════════════════════════════════════════ Gesetzt von weser_space_classes() (inc/template-helpers.php). Steht im Feld „Standard", wird gar keine Klasse ausgegeben – dann gilt Abschnitt 2. Diese Regeln stehen absichtlich NACH den Vorgaben: gleiche Spezifität, spätere Quelle gewinnt. */ .sp-t-xl { --sec-top: var(--sp-xl); } .sp-t-l { --sec-top: var(--sp-l); } .sp-t-m { --sec-top: var(--sp-m); } .sp-t-s { --sec-top: var(--sp-s); } .sp-t-none { --sec-top: 0px; } .sp-b-xl { --sec-bottom: var(--sp-xl); } .sp-b-l { --sec-bottom: var(--sp-l); } .sp-b-m { --sec-bottom: var(--sp-m); } .sp-b-s { --sec-bottom: var(--sp-s); } .sp-b-none { --sec-bottom: 0px; }