/* =========================================================================== DAS ABSTANDSSYSTEM (2026-11-05, Mobil-Politur nach Dannys Feedback) Weisung Norman: „Die Abstände müssen systematisch sein — wir wollen die einzelnen Komponenten später dem Redakteur zur Verfügung stellen, und er soll sie einfach platzieren können, ohne die Abstände zu tweaken." DREI REGELN, AUS DENEN ALLES FOLGT 1. Eine Komponente hat KEINEN Aussenabstand. Sie bestimmt nur, was in ihr passiert (Polster, Lücken zwischen ihren eigenen Teilen). 2. Den Abstand zwischen zwei Komponenten setzt ihr Behälter — nach der BEZIEHUNG der beiden (Abschnitt → Abschnitt, Kopf → Inhalt, Absatz → Bild …), nie nach dem Seitentyp. Diese Datei ist der einzige Ort dafür. 3. Jeder Wert ist eine ROLLE (--hbl-raum-*), nie eine Zahl. Die Rollen kommen aus design-tokens.json → baue-tokens.py → tokens.css und haben je einen Wert für Telefon (≤599), Tablet (600–1024) und Desktop. Ränder laufen nur in eine Richtung: margin-top am FOLGENDEN Element („* + *"), unten ist alles 0. So kollabiert nichts, und das erste und letzte Kind eines Behälters tragen nie einen Aussenrand. DREI EBENEN A Seite .hbl-rumpf > inner > … Abschnitte untereinander B Abschnitt Gruppe, Spalte, Band innen Kopf → Inhalt, Text → Knopf C Lesefluss .entry-content > … Absatz, Zwischentitel, Bild, Baustein Lädt VOR style.css (inc/assets.php) und im Editor (inc/redaktion.php: add_editor_style). Im Editor heisst der Lesefluss `.is-root-container`. Prüfung: wordpress/bin/pruefe-abstaende.py misst jede Beziehung gegen ihre Rolle (390 · 768 · 1024 · 1440). =========================================================================== */ /* --------------------------------------------------------------------------- 0 Nullpunkt GeneratePress setzt p { margin-bottom: 1.5em }, der Browser Ränder an figure, blockquote, ul. Hier wird alles auf 0 gestellt, was in einem Behälter des Systems steht — gleiche Spezifität wie GP (Typselektor, 0,0,1), aber später geladen. Die Ränder entstehen danach nur noch aus A, B und C. DIE SPEZIFITÄTS-TREPPE, auf der alles ruht (nicht verwechseln — ein :is() nimmt die Spezifität seines STÄRKSTEN Glieds an; deshalb stehen in B nur Ein-Klassen-Behälter): GP p{…} 0,0,1 < Nullpunkt 0,0,1 (später) < B 0,1,0 < A 0,2,0 --------------------------------------------------------------------------- */ :where(.hbl-rumpf, .entry-content, .is-root-container, .wp-block-group, .wp-block-column, .wp-block-cover__inner-container, .wp-block-accordion-panel, .inside-article, .generate-columns-container, .hbl-404, .site-main) :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, figure, blockquote, pre, table, hr, form, details) { margin-block: 0; } :where(.hbl-rumpf, .entry-content, .is-root-container) :where(.wp-block-group, .wp-block-columns, .wp-block-buttons, .wp-block-query, .wp-block-post-title, .wp-block-post-excerpt, .wp-block-post-date, .wp-block-post-content, .wp-block-image, .wp-block-embed, .wp-block-video, .wp-block-accordion, .wp-block-quote, .wp-block-gallery, .wp-block-separator, nav, section) { margin-block: 0; } /* --------------------------------------------------------------------------- A SEITE — die Abschnitte im Rumpf --------------------------------------------------------------------------- */ /* Bühne → Rumpf: der Abstand gehört der Seite, nicht der Bühne. */ .hbl-hero.wp-block-cover { margin-block: 0; } .hbl-hero + .hbl-rumpf { margin-top: var(--hbl-raum-sektion); } /* Beginnt der Rumpf mit einem Seitenkopf (Datum, H1 — Seiten mit Bildband statt Bühne), steht er im Abschnittsabstand unter dem Band und im Kopf-Abstand über seinem Inhalt: der Titel gehört zu dem, was er überschreibt, nicht zum Bild (Sichtprüfung 2026-11-05 — mit kopf auf beiden Seiten schwebte er auf /preise und /ueber-uns genau in der Mitte). Ein Bildband OHNE Motiv blendet §13 aus. Ein Geschwister-Selektor sieht das nicht — dann steht der Titel unter dem Pfad (Rechtsseiten, AGB): Pfad → Titel = pfad. Unter 1025 ist der Pfad dort ein Rückweg-Link; dann Kopf-Abstand. Die Ränder von Pfad und Rumpf fallen zusammen. */ .hbl-breadcrumb + .hbl-hero.hbl-hero-band:not(.hbl-hero-wechsel):not(:has(.wp-block-cover__image-background)) + .hbl-rumpf { margin-top: var(--hbl-raum-pfad); } @media (max-width: 1024px) { .hbl-breadcrumb + .hbl-hero.hbl-hero-band:not(.hbl-hero-wechsel):not(:has(.wp-block-cover__image-background)) + .hbl-rumpf { margin-top: var(--hbl-raum-kopf); } } /* Seiten ohne Bühne (Rechtsseiten, Blog, Suche, 404): Kopfkante → erster Inhalt ist derselbe Kopf-Abstand. GP setzt hier sonst 30 + 64. */ .site-content .content-area, .one-container .site-content, .separate-containers .site-content { padding-top: 0; } .site-content:not(:has(.hbl-hero)) .site-main > :first-child, .site-content:not(:has(.hbl-hero)) .hbl-rumpf > .wp-block-group__inner-container > :first-child { margin-top: var(--hbl-raum-kopf); } .site-content:not(:has(.hbl-hero)) .site-main > .hbl-rumpf:first-child { margin-top: 0; } /* Abschnitt → Abschnitt */ .hbl-rumpf > .wp-block-group__inner-container > * { margin-block: 0; } .hbl-rumpf > .wp-block-group__inner-container > * + * { margin-top: var(--hbl-raum-sektion); } /* Fläche an Fläche: zwei randlose Bänder (oder ein randloses Bildpaar und ein Band) stossen aneinander — die Farbe trennt, nicht ein weisser Spalt. */ .hbl-rumpf > .wp-block-group__inner-container > :is(.hbl-band, .hbl-bewertungen, .hbl-bildpaar.alignfull, .hbl-bildpaar-start) + :is(.hbl-band, .hbl-bewertungen, .hbl-bildpaar.alignfull, .hbl-bildpaar-start) { margin-top: 0; } /* Kopf → Inhalt: Seitentitel, Abschnittsköpfe, Pfad, Datum. Wer einen Abschnittskopf als eigenen Block setzt, bekommt darunter den Kopf-Abstand. */ .hbl-rumpf > .wp-block-group__inner-container > :is(.wp-block-post-title, .hbl-abschnittskopf, .hbl-kopf2, .hbl-kopfzeile, h2, .hbl-filter, .hbl-aussage) + * { margin-top: var(--hbl-raum-kopf); } /* Kleine Hilfselemente zwischen den Abschnitten — die Einwilligungszeile der Landingpages — sind kein eigener Abschnitt: auf dem Rechner stünde sie allein in 340 px Weiss. Der Index A–Z war bis 2026-11-06 auch so eine Zeile; seit Entwurf D2 ist er ein Kasten mit Motiv und damit ein Abschnitt (sektion). */ .hbl-rumpf > .wp-block-group__inner-container > * + .hbl-einwilligung-zeile, .hbl-rumpf > .wp-block-group__inner-container > .hbl-einwilligung-zeile + * { margin-top: var(--hbl-raum-medium); } /* Der Index A–Z lief bis 2026-11-06 auf dem Telefon randlos und stiess hier „Fläche an Fläche" an das Band davor. Seit 07.11. ist er auf jeder Breite ein Kasten (style.css §29) und hat damit davor, danach und am Seitenende den Abschnittsabstand — keine Sonderregel mehr. */ /* Der Index-Kasten (Säulen) läuft bis 768 randlos — dann ist er eine Fläche wie ein Band, und Fläche stösst an Fläche (Longevity: zwei Creme-Flächen standen mit einem weissen Streifen dazwischen). */ @media (max-width: 768px) { .hbl-rumpf > .wp-block-group__inner-container > .hbl-index + :is(.hbl-band, .hbl-bewertungen), .hbl-rumpf > .wp-block-group__inner-container > :is(.hbl-band, .hbl-bewertungen) + .hbl-index { margin-top: 0; } } .hbl-hero + .hbl-rumpf:has(> .wp-block-group__inner-container > :is(.hbl-hero-datum, .wp-block-post-title):first-child) { margin-top: var(--hbl-raum-sektion); } .hbl-rumpf > .wp-block-group__inner-container > .hbl-breadcrumb + * { margin-top: var(--hbl-raum-pfad); } .hbl-rumpf > .wp-block-group__inner-container > .hbl-hero-datum + * { margin-top: var(--hbl-raum-dach); } /* Kopf → Knopf ist Text → Knopf (Terminaufruf, Abschnittskopf mit Knopf). */ .hbl-rumpf > .wp-block-group__inner-container > :is(.wp-block-post-title, .hbl-abschnittskopf, .hbl-kopf2, .hbl-kopfzeile, h2) + .wp-block-buttons { margin-top: var(--hbl-raum-aktion); } /* /behandlungen: filter.js setzt einen 1-px-Wächter vor die Filterleiste — der Wächter nimmt den Abstand, die Leiste dahinter keinen zweiten. Ist ein Bereich weggefiltert, steht der nächste sichtbare Kopf im Kopf-Abstand unter der Leiste statt im Abschnittsabstand. */ .hbl-rumpf > .wp-block-group__inner-container > .hbl-filter-waechter + * { margin-top: 0; } .hbl-rumpf > .wp-block-group__inner-container > .hbl-filter ~ .hbl-abschnittskopf { margin-top: var(--hbl-raum-kopf); } .hbl-rumpf > .wp-block-group__inner-container > .hbl-filter ~ :not([hidden], .hbl-filter-waechter) ~ .hbl-abschnittskopf { margin-top: var(--hbl-raum-sektion); } /* Ein leerer Seiteninhalt am Anfang erzeugt keinen zweiten Abstand. */ .hbl-rumpf > .wp-block-group__inner-container > .entry-content:empty:first-child + * { margin-top: 0; } /* Der Pfad vor einem Bildband (Seite, Beitrag, Über uns): Kopfkante → Pfad → Band. Die Bühne ist kein Kind des Rumpfs; der Pfad steht davor im Artikel. */ .hbl-breadcrumb:has(+ .hbl-hero) { margin: var(--hbl-raum-kopf) 0 var(--hbl-raum-pfad); } /* Seitenende: EIN Auslauf vor der Fusszeile (früher §4 in style.css). */ .one-container .site-content, .separate-containers .site-content { padding-bottom: var(--hbl-raum-sektion); } /* … ausser der Rumpf endet mit einem randlosen Band (Terminaufruf): dann schliesst das Band bündig an die Fusszeile. Die CTA-Zeile der Behandlungsseiten steht im Markup dahinter, ist aber fixiert. */ .one-container .site-content:has(.hbl-rumpf > .wp-block-group__inner-container > .hbl-band:last-child), .one-container .site-content:has(.hbl-rumpf > .wp-block-group__inner-container > .hbl-band + .hbl-cta-zeile-band:last-child), .separate-containers .site-content:has(.hbl-rumpf > .wp-block-group__inner-container > .hbl-band:last-child), .separate-containers .site-content:has(.hbl-rumpf > .wp-block-group__inner-container > .hbl-band + .hbl-cta-zeile-band:last-child) { padding-bottom: 0; } /* --------------------------------------------------------------------------- B ABSCHNITT — was in einer Gruppe, einer Spalte, einem Band steht --------------------------------------------------------------------------- */ /* Bänder: Polster oben = unten = Abschnitt, auf jeder Breite. Der Abstand zum Nachbarn kommt aus A. */ .hbl-band { margin-block: 0; padding-block: var(--hbl-raum-sektion); } /* Behälter: NUR Ein-Klassen-Selektoren (Spezifität 0,1,0 — unter A). Gruppen tragen bei GeneratePress immer einen __inner-container; der genügt. */ :is(.wp-block-group__inner-container, .wp-block-column, .wp-block-cover__inner-container) > * + * { margin-top: var(--hbl-raum-fluss); } :is(.wp-block-group__inner-container, .wp-block-column, .wp-block-cover__inner-container) > :is(h1, h2, h3, h4, h5, h6, .wp-block-post-title) + * { margin-top: var(--hbl-raum-nach-titel); } /* Kopf → Inhalt, auch innerhalb eines Bands oder einer Gruppe */ :is(.wp-block-group__inner-container, .wp-block-column) > :is(.hbl-abschnittskopf, .hbl-kopf2, .hbl-kopfzeile, h2.hbl-links) + * { margin-top: var(--hbl-raum-kopf); } /* Text → Knopfzeile (früher §6): eine Regel für jede Stelle der Site — auch nach einer Überschrift oder einem Kopf. Der Wegweiser „Zum Anliegen … →" ist dieselbe Beziehung. */ :is(.wp-block-group__inner-container, .wp-block-column, .wp-block-cover__inner-container) > * + :is(.wp-block-buttons, .hbl-wegweiser-alle) { margin-top: var(--hbl-raum-aktion); } :is(.wp-block-group__inner-container, .wp-block-column) > :is(.hbl-abschnittskopf, .hbl-kopf2, .hbl-kopfzeile, h2.hbl-links) + :is(.wp-block-buttons, .hbl-wegweiser-alle) { margin-top: var(--hbl-raum-aktion); } /* Bausteine, die frei platziert werden (Zitat, Video, Faktenkarte, Vorher- Nachher), stehen in jeder Gruppe im selben Abstand wie im Lesefluss (medium) — ein Zitat in einer Gruppe folgte sonst dem Text wie ein Absatz. Bilder bewusst NICHT: in Komponenten (Karte, Team, Schritt) gehört das Bild zum Text (bild-text), das regelt die Komponente. */ /* :where() für die Liste: die Regel bleibt bei 0,1,0 und damit unter Ebene A (sonst bekäme ein Zitat zwischen zwei Abschnitten des Rumpfs medium). */ :is(.wp-block-group__inner-container, .wp-block-column) > * + :where(.wp-block-quote, blockquote, .wp-block-video, .wp-block-embed, .hbl-fakten, .hbl-vorher-nachher), :is(.wp-block-group__inner-container, .wp-block-column) > :where(.wp-block-quote, blockquote, .wp-block-video, .wp-block-embed, .hbl-fakten, .hbl-vorher-nachher) + * { margin-top: var(--hbl-raum-medium); } /* Nach einer Knopfzeile: derselbe Abstand wie davor — der Knopf gehört zu seinem Text, nicht zum nächsten Absatz. */ :is(.wp-block-group__inner-container, .wp-block-column, .wp-block-cover__inner-container) > :is(.wp-block-buttons, .hbl-wegweiser-alle) + * { margin-top: var(--hbl-raum-aktion); } /* Innerhalb eines Kopfs: Dachzeile → Titel */ :is(.wp-block-group__inner-container, .wp-block-column, .wp-block-cover__inner-container) > :is(.hbl-eyebrow, .hbl-dachzeile, .hbl-bewertung-zeile, .wp-block-post-date) + * { margin-top: var(--hbl-raum-dach); } :is(.wp-block-group__inner-container, .wp-block-column, .wp-block-cover__inner-container) > .hbl-breadcrumb + * { margin-top: var(--hbl-raum-pfad); } /* Das Beitragsraster (Blog, Suche) ist kein Gruppenbehälter: Pfad → Kopf. */ .generate-columns-container > .hbl-breadcrumb + * { margin-top: var(--hbl-raum-pfad); } /* Mobil blendet §16 den Pfad aus, wo er nichts zurückführt (Säulen, Über uns, Blog) — dann darf er auch keinen Abstand mehr auslösen. */ @media (max-width: 1024px) { :is(.wp-block-group__inner-container, .wp-block-cover__inner-container, .generate-columns-container) > .hbl-breadcrumb:not(:has(.hbl-pfad-hier)):has(li:last-child > span) + * { margin-top: 0; } .hbl-rumpf > .wp-block-group__inner-container > .hbl-breadcrumb:not(:has(.hbl-pfad-hier)):has(li:last-child > span) + * { margin-top: 0; } } /* --------------------------------------------------------------------------- C LESEFLUSS — der Seiteninhalt (post-content) und der Editor Alle Regeln dieser Ebene tragen DIESELBE Behälterliste — ein :is() nimmt die Spezifität seines stärksten Glieds an; eine kürzere Liste wäre schwächer und verlöre gegen die Regel davor, gleich wo sie steht. Die Reihenfolge der Regeln ist Absicht: bei gleicher Spezifität gewinnt die spätere. Zuletzt steht „nach einer Überschrift" — eine Überschrift zieht ihren ersten Block immer an sich, gleich was er ist. --------------------------------------------------------------------------- */ :is(.entry-content, .is-root-container, .hbl-einschub > .wp-block-group__inner-container) > * { margin-block: 0; } :is(.entry-content, .is-root-container, .hbl-einschub > .wp-block-group__inner-container) > * + * { margin-top: var(--hbl-raum-fluss); } /* Bausteine im Text: Bild, Video, Faktenkarte, Akkordeon, Zitat, Gruppe … */ :is(.entry-content, .is-root-container, .hbl-einschub > .wp-block-group__inner-container) > * + :where(figure, .wp-block-image, .wp-block-embed, .wp-block-video, .wp-block-gallery, .wp-block-group, .wp-block-columns, .wp-block-accordion, .wp-block-quote, blockquote, .wp-block-table, .wp-block-separator, .hbl-fakten, .hbl-vorher-nachher, .hbl-angebot-bilder, .hbl-angebot-video, details), :is(.entry-content, .is-root-container, .hbl-einschub > .wp-block-group__inner-container) > :where(figure, .wp-block-image, .wp-block-embed, .wp-block-video, .wp-block-gallery, .wp-block-group, .wp-block-columns, .wp-block-accordion, .wp-block-quote, blockquote, .wp-block-table, .wp-block-separator, .hbl-fakten, .hbl-vorher-nachher, .hbl-angebot-bilder, .hbl-angebot-video, details) + * { margin-top: var(--hbl-raum-medium); } :is(.entry-content, .is-root-container, .hbl-einschub > .wp-block-group__inner-container) > * + :where(h3, h4, h5, h6) { margin-top: var(--hbl-raum-vor-h3); } :is(.entry-content, .is-root-container, .hbl-einschub > .wp-block-group__inner-container) > * + :where(h2) { margin-top: var(--hbl-raum-vor-h2); } :is(.entry-content, .is-root-container, .hbl-einschub > .wp-block-group__inner-container) > * + :where(.wp-block-buttons, .hbl-wegweiser-alle) { margin-top: var(--hbl-raum-aktion); } :is(.entry-content, .is-root-container, .hbl-einschub > .wp-block-group__inner-container) > :where(.wp-block-buttons, .hbl-wegweiser-alle) + * { margin-top: var(--hbl-raum-aktion); } /* Abschnitte im Text — randlose Fläche, breiter Baustein, die Abschnitte von /ueber-uns (der Generator baut sie in den Seiteninhalt): wie auf Ebene A. Steht NACH den Überschriftenregeln: Fläche → h2 ist Abschnitt → Abschnitt. */ :is(.entry-content, .is-root-container, .hbl-einschub > .wp-block-group__inner-container) > * + :where(.alignfull, .alignwide, .hbl-abschnitt, .hbl-ueber-intro, .hbl-ueber-bild, .hbl-team, .hbl-direktor, .hbl-leitzitat), :is(.entry-content, .is-root-container, .hbl-einschub > .wp-block-group__inner-container) > :where(.alignfull, .alignwide, .hbl-abschnitt, .hbl-ueber-intro, .hbl-ueber-bild, .hbl-team, .hbl-direktor, .hbl-leitzitat) + * { margin-top: var(--hbl-raum-sektion); } :is(.entry-content, .is-root-container, .hbl-einschub > .wp-block-group__inner-container) > :where(.alignfull) + :where(.alignfull) { margin-top: 0; } /* Das Band „So läuft die Behandlung ab" ist eine Fläche IM Lesefluss, kein Abschnitt der Seite: aussen und innen medium. Mit sektion auf beiden Seiten standen auf dem Rechner 256 px Weiss und Creme um drei Absätze. */ :is(.entry-content, .is-root-container, .hbl-einschub > .wp-block-group__inner-container) > * + :where(.hbl-einschub), :is(.entry-content, .is-root-container, .hbl-einschub > .wp-block-group__inner-container) > :where(.hbl-einschub) + * { margin-top: var(--hbl-raum-medium); } /* Knopfzeile am Ende des Bands (seit 06.11.): Text → Knopf ist aktion wie überall. Die Takt-Regel des Bands in style.css (§24.3, `* + *` = fluss) trägt drei Klassen; diese Zeile braucht dieselbe Tiefe plus eine, sonst stünden die Knöpfe 32 statt 48 unter dem letzten Absatz. */ .hbl-behandlung .hbl-einschub > .wp-block-group__inner-container > * + .wp-block-buttons { margin-top: var(--hbl-raum-aktion); } /* Knopfzeile in der Arzt-Zeile der Landingpages (seit 09.11., style.css §33 (5)): Text → Knopf ist aktion; die Takt-Regel der Zeile (fluss) trägt vier Klassen. */ .hbl-angebot-arzt .hbl-mz-text > .wp-block-group__inner-container > * + .wp-block-buttons { margin-top: var(--hbl-raum-aktion); } /* Zuletzt: eine Überschrift zieht ihren ersten Block an sich — ausser einer Knopfzeile (Titel → Knopf bleibt aktion). */ :is(.entry-content, .is-root-container, .hbl-einschub > .wp-block-group__inner-container) > :where(h2, h3, h4, h5, h6) + :where(:not(.wp-block-buttons)) { margin-top: var(--hbl-raum-nach-titel); } /* Listen: Punkt → Punkt */ :is(.entry-content, .is-root-container) :where(ul, ol) > li + li { margin-top: var(--hbl-raum-eng); } :is(.entry-content, .is-root-container) :where(li) > :where(ul, ol) { margin-top: var(--hbl-raum-eng); } /* Bildunterschrift */ :where(.wp-block-image, .wp-block-video, .wp-block-embed) > figcaption { margin-top: var(--hbl-raum-eng); margin-bottom: 0; }