:root { --c-green: #009959; /* Marke Grün */ --c-green-hover: #007a45; /*Marke Grün Hover */ --c-green-light: #7FD3A9; /* Helles leuchtendes Grün, eher für Akzent auf dunklem Hintergrund */ --c-green-pastell: #f4f7f5; /* Sehr helles Grün, eher für hellen Hintergrund */ --c-green-dark: #1a201a; /* dunkles Grün */ --c-bg-gradient: linear-gradient(100deg, rgba(20, 28, 22, 0.86) 0%, rgba(20, 28, 22, 0.55) 52%, rgba(20, 28, 22, 0.2) 100%); /* eher für Hintergrund Verlauf */ --c-font: #333; --c-font-muted: #555; --c-font-inverted: #fff; --c-font-muted-inverted: #eee; --c-border-color: #dce3df; /* Hairline auf hellem Grund – ersetzt #e6ebe8 UND #dce3df */ --c-border-color-inverted: rgba(255,255,255,.25); /* Hairline auf dunklem Grund – Wert steckt bereits 3× im Trust-Band (Z. 789/805/809) */ --c-border-radius: 8px; /* Eckrundung – global für alle Elemente (Ausnahme: 999px Pille, 2px Hamburger) */ --c-transition: .15s; /* eine Dauer für alle Hover-/Fokus-Wechsel */ --c-red: #c0392b; /* Fehler – Signalfarbe, nicht aus dem Grün ableitbar */ --c-red-bg: #fdf3f2; --c-amber: #b7791f; /* Warnung */ --c-amber-bg: #fdf8ef; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 8px; top: 8px; /* … */ } /* ============================================================ SYSTEMMELDUNGEN – Joomla rendert mit .alert-heading (Icon + visually-hidden-Label), .alert-wrapper > .alert-message und einem JS-erzeugten .joomla-alert--close. Kein Bootstrap geladen → alles von hier. Farbstreifen links = Typ-Signal (nicht nur Farbe: der Meldungstext benennt den Zustand ohnehin). ============================================================ */ .hg_system-message-container joomla-alert { position: relative; display: block; /* Custom Element ist sonst inline */ margin: 0 0 16px; padding: 14px 48px 14px 18px; /* rechts Platz für den Schließen-Button */ border: 1px solid var(--c-border-color); border-left: 4px solid var(--c-green); border-radius: var(--c-border-radius); background: var(--c-green-pastell); } .hg_system-message-container joomla-alert[type="warning"] { border-left-color: var(--c-amber); background: var(--c-amber-bg); } .hg_system-message-container joomla-alert[type="danger"] { border-left-color: var(--c-red); background: var(--c-red-bg); } /* Icon-Span bleibt leer (keine Icon-Font geladen) – der Kasten muss weg, die visually-hidden-Beschriftung für Screenreader aber bleiben */ .hg_system-message-container .alert-heading { display: contents; } .hg_system-message-container .joomla-alert--close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--c-border-radius); background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; transition: background var(--c-transition); } .hg_system-message-container .joomla-alert--close:hover, .hg_system-message-container .joomla-alert--close:focus-visible { background: rgba(0,0,0,.08); } /* Schriften */ /* source-sans-3-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; src: url('../fonts/source-sans-3-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* source-sans-3-italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Source Sans 3'; font-style: italic; font-weight: 400; src: url('../fonts/source-sans-3-v19-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* source-sans-3-600 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; src: url('../fonts/source-sans-3-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* source-sans-3-600italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Source Sans 3'; font-style: italic; font-weight: 600; src: url('../fonts/source-sans-3-v19-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* source-sans-3-800 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Source Sans 3'; font-style: normal; font-weight: 800; src: url('../fonts/source-sans-3-v19-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* source-sans-3-800italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Source Sans 3'; font-style: italic; font-weight: 800; src: url('../fonts/source-sans-3-v19-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } body { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; margin: 0; scroll-behavior: smooth; color: var(--c-font); } /* ============================================================ TYPOGRAFIE-BASIS Einmal festlegen, überall vererben. Abweichungen leben kontextuell in den Sektionen und sind dort mit "Override: " markiert. ============================================================ */ h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--c-font); font-weight: 800; line-height: 1.15; } h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; } h2 { font-size: clamp(1.8rem, 3.5vw, 2rem); } /* Sektions-Überschrift */ h3 { font-size: 1.25rem; } p { margin: 0 0 1rem; line-height: 1.6; } a { color: var(--c-green); transition: color var(--c-transition), background-color var(--c-transition); } a:hover, a:focus-visible { color: var(--c-green-hover); } hr { border: 0; border-top: 1px solid var(--c-border-color); margin: 1rem 0; } img { max-width: 100%; height: auto; } ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; } /* ============================================================ EYEBROW – global. Ein

, dessen EINZIGES Element ein ist UND das direkt vor einer Überschrift (h1/h2/h3) steht = Kicker über einer Headline. Bedingungen (alle nötig): · p:has(> strong:only-child) → p enthält nur ein · :has(+ :is(h1,h2,h3)) → direkt danach folgt eine Überschrift Greift dadurch automatisch in JEDEM Band (Hero, Benefit, Karten, Kontakt …) – neue Bänder erben ohne Zutun. Bewusst NICHT getroffen: ·

gefolgt von

(z. B. Karten-Titel) · mitten im Fließtext Redaktion: muss im Editor gesetzt sein; ohne keine Eyebrow-Optik. Abstand bleibt LOKAL pro Band (Container nutzen mal gap, mal Fluss), deshalb steht hier nur die Optik. ============================================================ */ p:has(> strong:only-child):has(+ :is(h1, h2, h3)) strong, .hg_footer .footer_items .mod-custom > p:first-child > strong { /* ← Footer-Spaltentitel: gleiche Optik, kein Heading dahinter */ color: var(--c-green); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; } /* dunkles Band: heller Akzent */ #startseite .hg_hero p:has(> strong:only-child):has(+ :is(h1, h2, h3)) strong, .hg_cta p:has(> strong:only-child):has(+ :is(h1, h2, h3)) strong, .hg_promo p:has(> strong:only-child):has(+ :is(h1, h2, h3)) strong { color: var(--c-green-light); } /* ============================================================ LAYOUT-BASIS ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* Bänder (.hg_*) sind volle Breite, .container zentriert den Inhalt und liefert den responsiven Seitenrand */ .container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 5vw, 40px); /* Rand: 16px mobil → 40px Desktop */ } /* Band-Rhythmus – EIN vertikaler Innenabstand für alle Band-Inhalte. Ersetzt 7 identische Einzeldeklarationen (ex Z. 890/1091/1199/1385/1410/1453/1534). Kein Token: der Wert steht jetzt genau einmal, eine Variable wäre ein Umweg. */ .hg_main .main, .hg_benefit .benefit, .hg_infos .infos, .hg_promo .promo, .hg_cta .cta, .hg_footer .footer-main { padding: 32px 0; } /* ============================================================ KARTEN-SKIN – globale Struktur-Regel, wie der Eyebrow. Weiße Karte auf hellem Band: Icon + Titel + Text. EINE Optik, mehrere Selektoren – nicht pro Band neu deklariert. Das LAYOUT innerhalb der Karte bleibt beim jeweiligen Band (Benefit = gestapelt, Infos = Icon links / Text rechts). ============================================================ */ .hg_benefit .benefit_right .mod-custom, .hg_infos .tile, .haus_facts, .haus_aside .mod-custom { background: var(--c-font-inverted); border: 1px solid var(--c-border-color); border-radius: var(--c-border-radius); padding: 26px; box-shadow: 0 1px 3px rgba(0,0,0,.06); /* FREIGABE 15.07.: Ruhe-Schatten – Zeile raus = nur Border */ } /* ============================================================ HEADER ============================================================ */ /* --- Top-Band (dunkel) --- */ .hg_top { background: var(--c-green-dark); color: var(--c-font-inverted); font-size: 14px; } .hg_top .top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 24px; padding: 8px 0; } .top_kontakt_left, .top_kontakt_right { display: flex; align-items: center; gap: 24px; } /* Icon + Label je Modul – nur zwei Items (Icon + Link), kein Fließtext */ .hg_top .mod-custom p { margin: 0; display: flex; align-items: center; gap: 8px; line-height: 1; } .hg_top img { flex: none; } /* Icon behält seine Maße */ .hg_top a { color: var(--c-font-inverted); text-decoration: none; } .hg_top a:hover, .hg_top a:focus-visible { color: var(--c-green-light); } /* --- Haupt-Navigation (weiß) --- */ .hg_main_navigation { background: var(--c-font-inverted); } .main_navigation { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 12px 0; } .header-logo p { margin: 0; } .header-logo img { display: block; height: auto; max-width: 150px; } /* Menü-Liste */ .nav_main .mod-menu { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .nav_main .nav-item { position: relative; display: flex; align-items: center; /* hält Link + Joomla-Chevron auf einer Linie */ } .nav_main .nav-item > a { display: block; padding: 10px 14px; color: var(--c-green-dark); text-decoration: none; font-weight: 600; border-radius: var(--c-border-radius); } .nav_main .nav-item > a:hover, .nav_main .nav-item > a:focus-visible, .nav_main .nav-item.active > a { background: var(--c-green-pastell); } /* Kontakt im Menü bzw. alle Menüpunkte mit Zusatz "green" */ .nav_main .nav-item > a.green { background: var(--c-green); color: var(--c-font-inverted); } .nav_main .nav-item > a.green:hover, .nav_main .nav-item > a.green:focus-visible, .nav_main .nav-item.active > a.green { background: var(--c-green-hover); } /* Joomlas Submenü-Button: dezent, Chevron neben dem Link */ .nav_main .mod-menu__toggle-sub { background: none; border: 0; padding: 0 0 0 4px; color: inherit; cursor: pointer; font-size: 12px; } /* Untermenü als Dropdown (Hover + Tastatur via :focus-within) */ .nav_main .mod-menu__sub { display: block; /* Basis – sichtbar geschaltet wird über opacity/visibility */ position: absolute; top: 100%; left: 0; min-width: 240px; margin: 0; padding: 8px; /* Rahmen um die Pillen */ list-style: none; background: var(--c-font-inverted); border: 1px solid var(--c-green-pastell); border-top: 3px solid var(--c-green); /* grüne Kante = Markenanker */ border-radius: var(--c-border-radius); box-shadow: 0 12px 28px rgba(0,0,0,.14); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 100; } .nav_main .nav-item:hover > .mod-menu__sub, .nav_main .nav-item:focus-within > .mod-menu__sub { display: block; /* schlägt Joomlas :where(...) aria-hidden-Regel */ opacity: 1; visibility: visible; transform: translateY(0); } .nav_main .mod-menu__sub a { display: block; padding: 10px 14px; border-radius: var(--c-border-radius); /* eingerückte Hover-Pille wie oben im Hauptmenü */ color: var(--c-green-dark); text-decoration: none; font-weight: 500; font-size: 15px; transition: background .12s, color .12s; width: 100%; } .nav_main .mod-menu__sub a:hover, .nav_main .mod-menu__sub a:focus-visible { background: var(--c-green-pastell); color: var(--c-green); } /* Chevron selbst zeichnen – .icon-chevron-down ist ein Icon-Font-Glyph, und dieses Eigen-Template lädt kein Icon-Font → der Pfeil war leer. Als CSS-Pfeil ist er unabhängig davon da (currentColor, skaliert mit font-size). */ .nav_main .mod-menu__toggle-sub .icon-chevron-down { display: inline-block; width: 1em; height: 1em; position: relative; transition: transform .15s; } .nav_main .mod-menu__toggle-sub .icon-chevron-down::before { content: ""; position: absolute; top: 40%; left: 50%; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translate(-50%, -50%) rotate(45deg); } /* dreht sich beim Öffnen: Desktop über Hover/Fokus, Mobil über aria-expanded */ /*.nav_main .nav-item:hover .mod-menu__toggle-sub .icon-chevron-down, .nav_main .nav-item:focus-within .mod-menu__toggle-sub .icon-chevron-down,*/ .nav_main .mod-menu__toggle-sub[aria-expanded="true"] .icon-chevron-down { transform: rotate(180deg); } @media (min-width: 992px) { .nav_main .mod-menu__toggle-sub { display: none; } } /* Hamburger nur mobil */ .menu-toggle { display: none; } /* --- Mobil --- */ @media (max-width: 991px) { /* Hamburger bleibt oben rechts neben dem Logo – auch wenn die Nav offen ist. DOM-Reihenfolge ist Logo → Nav → Button, per order ziehen wir den Button auf Zeile 1 und lassen die Nav als Zeile 2 darunter aufklappen. */ .main_navigation { flex-wrap: wrap; } .header-logo { order: 0; } .menu-toggle { order: 1; margin-left: auto; } .nav_main { order: 2; } .menu-toggle { display: flex; flex-direction: column; gap: 5px; width: 32px; height: 28px; justify-content: center; background: none; border: 0; cursor: pointer; padding: 0; } .menu-toggle span { display: block; height: 3px; width: 100%; background: var(--c-green-dark); border-radius: 2px; transition: transform .25s, opacity .2s; transform-origin: center; } /* Hamburger → X, wenn offen (nutzt aria-expanded, das dein JS schon setzt) */ .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Nav als volle Zeile, standardmäßig zu */ .nav_main { display: none; width: 100%; } .main_navigation:has(.menu-toggle[aria-expanded="true"]) .nav_main { display: block; } /* Menü vertikal gestapelt */ .nav_main .mod-menu { flex-direction: column; align-items: stretch; gap: 0; } /* Elternpunkt: Link + Chevron auf einer Zeile, Submenü bricht darunter um */ .nav_main .nav-item { position: static; flex-wrap: wrap; } .nav_main .nav-item > a { flex: 1 1 auto; } /* Link füllt, Chevron rechts */ .nav_main .mod-menu__toggle-sub { padding: 10px 12px; font-size: 14px; } /* ordentliches Tap-Ziel */ /* Submenü = Inline-Akkordeon, KEINE schwebende Karte */ .nav_main .mod-menu__sub { flex-basis: 100%; /* volle Breite, unter dem Elternlink */ position: static; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 6px 16px; transform: none; opacity: 1; visibility: visible; /* Sichtbarkeit läuft mobil rein über display */ display: none; /* zu im Grundzustand */ } /* Hover/Fokus dürfen mobil NICHT öffnen – sonst zappelt es beim Antippen. Öffnen macht ausschließlich Joomlas Chevron (aria-expanded="true"). */ .nav_main .nav-item:hover > .mod-menu__sub, .nav_main .nav-item:focus-within > .mod-menu__sub { display: none; } .nav_main .nav-item:has(.mod-menu__toggle-sub[aria-expanded="true"]) > .mod-menu__sub { display: block; } } /* ============================================================ HERO – allgemeingültig; Startseiten-Sonderfall nur wo nötig ============================================================ */ .hg_hero { background: var(--c-green-pastell); } .hg_hero p { margin: 0; } .hg_hero .hero { display: flex; flex-direction: column; justify-content: center; /*min-height: 340px;*/ /* es soll niedrig bleiben, also nur so hoch wie nötig */ padding: 8px 0; } #startseite .hg_hero .hero { padding: 100px 0; /* Mehr Platz */ } /* Eyebrow: Optik global (s. EYEBROW-Block); hier nur der lokale Abstand */ .hg_hero .hero .mod-custom > p:first-child { margin: 0 0 14px; } /* Headline – Größe/Gewicht/Farbe aus der Basis */ .hg_hero .hero h1 { margin: 0; } /* Override: Hero ohne Abstand nach unten */ /* h1 nur in modulen (nicht in kategorie) )*/ .hg_hero .hero .custom h1 { margin: 32px 0 0; } /* Beschreibung =

direkt nach der H1 */ .hg_hero .hero h1 + p { /* Override: Lead-Text, größer + Breite begrenzt */ margin: 0 0 28px; max-width: 80ch; font-size: 1.125rem; } /* Button-Zeile = das

, das Buttons enthält */ /*.hg_hero .hero p:has(.btn) { margin: 0; }*/ /* --- Startseiten-Sonderfall: dunkles Hero mit Foto rechts --- */ #startseite .hg_hero { background: var(--c-bg-gradient), url("/images/einfamilienhaus-klinker-schluesselfertig-hero.webp") center / cover no-repeat, var(--c-green-dark); color: var(--c-font-inverted); } #startseite .hg_hero .hero h1 { color: var(--c-font-inverted); } #startseite .hg_hero .hero h1 + p { color: var(--c-font-muted-inverted); } /* KI-Kennzeichnung des Hero-Fotos. Bewusst als Overlay statt eingebrannt: das Foto ist ein background mit cover und wird je nach Viewport stark beschnitten – ein eingebranntes Label wäre nicht zuverlässig sichtbar. */ #startseite .hg_hero { position: relative; } #startseite .hg_hero::after { content: ""; position: absolute; right: 20px; bottom: 20px; width: 140px; aspect-ratio: 1231 / 267; background: url("/images/icons/label-ai-modified.svg") center / contain no-repeat; pointer-events: none; } /* ============================================================ BUTTONS – global, wiederverwendbar. Drei Varianten, vom Redakteur per Klasse im Editor gesetzt (kuratierte Ausnahme): .btn → grün gefüllt, weiße Schrift .btn_inverted → grüner Rand, grüne Schrift (heller Grund) .btn_inverted_light → heller Rand, weiße Schrift (dunkler Grund) Kein Kontext-CSS: die Klasse reist mit dem Modul/Beitrag mit. ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border: 1px solid var(--c-green); border-radius: var(--c-border-radius); background: var(--c-green); color: var(--c-font-inverted); font-weight: 700; text-decoration: none; transition: background .15s, border-color .15s, color .15s; } .btn:hover, .btn:focus-visible { background: var(--c-green-hover); border-color: var(--c-green-hover); color: var(--c-font-inverted); } .btn img { width: 20px; height: 20px; flex: none; } /* --- Outline auf hellem Grund --- */ .btn.btn_inverted { background: transparent; border-color: var(--c-green); color: var(--c-green); } .btn.btn_inverted:hover, .btn.btn_inverted:focus-visible { background: var(--c-green); border-color: var(--c-green); color: var(--c-font-inverted); } /* --- Outline auf dunklem Grund --- */ .btn.btn_inverted_light { background: transparent; border-color: rgba(255,255,255,.6); /* abgeleitet aus --c-font-inverted, Rand darf zurücktreten */ color: var(--c-font-inverted); } .btn.btn_inverted_light:hover, .btn.btn_inverted_light:focus-visible { background: rgba(255,255,255,.12); border-color: currentColor; /* Rand geht auf volles Weiß */ } /* Button-Zeile = das

, das Buttons enthält – global, gilt in jedem Band. Abstand bleibt lokal (Bänder setzen margin selbst). */ p:has(.btn) { display: flex; flex-wrap: wrap; gap: 14px; } /* Mobil */ @media (max-width: 991px) { #startseite .hg_hero .hero { min-height: 420px; } .hg_hero .hero h1 { font-size: clamp(2rem, 8vw, 2.8rem); } /* Override: mobil kleiner */ } /* ============================================================ BREADCRUMBS – global ============================================================ */ .mod-breadcrumbs__wrapper { /*margin-bottom: 18px;*/ } .mod-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; /* killt die „1. 2. 3."-Nummerierung */ font-size: 14px; } /* führendes Location-Icon ist ein leerer Icon-Font-Glyph → ausblenden */ .mod-breadcrumbs .mod-breadcrumbs__divider { display: none; } .mod-breadcrumbs__item { display: flex; align-items: center; gap: 8px; } /* › nur zwischen echten Einträgen (nicht führend) */ .mod-breadcrumbs__item + .mod-breadcrumbs__item::before { content: "›"; color: #9aa5a0; } .mod-breadcrumbs__item a { color: var(--c-green-dark); text-decoration: none; opacity: .7; transition: opacity .12s, color .12s; } .mod-breadcrumbs__item a:hover, .mod-breadcrumbs__item a:focus-visible { opacity: 1; color: var(--c-green); } .mod-breadcrumbs__item.active { font-weight: 700; } /* aktueller Punkt betont */ /* ============================================================ FILTER-PILLEN – einmal definiert, in zwei Kontexten genutzt: Hero-Modul UND Kategoriebeschreibung der Häuser-Seite. Konvention: der fett () gesetzte Eintrag = aktive Pille. Greift auf jeden Absatz mit Links, der KEINE .btn-Buttons ist. ============================================================ */ .hg_hero .hero .mod-custom p:has(> a:not(.btn)), #haeuser .category-desc p:has(> a:not(.btn)) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; /*margin: 14px 0 0;*/ } .hg_hero .hero .mod-custom p:has(> a:not(.btn)) > a, .hg_hero .hero .mod-custom p:has(> a:not(.btn)) > strong, #haeuser .category-desc p:has(> a:not(.btn)) > a, #haeuser .category-desc p:has(> a:not(.btn)) > strong { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 999px; /* volle Pille */ font-size: 15px; line-height: 1; text-decoration: none; transition: background .15s, color .15s, border-color .15s; } /* inaktiv = weiße, umrandete Pille */ .hg_hero .hero .mod-custom p:has(> a:not(.btn)) > a, #haeuser .category-desc p:has(> a:not(.btn)) > a { background: var(--c-font-inverted); color: var(--c-font); border: 1px solid var(--c-border-color); font-weight: 600; } .hg_hero .hero .mod-custom p:has(> a:not(.btn)) > a:hover, .hg_hero .hero .mod-custom p:has(> a:not(.btn)) > a:focus-visible, #haeuser .category-desc p:has(> a:not(.btn)) > a:hover, #haeuser .category-desc p:has(> a:not(.btn)) > a:focus-visible { background: var(--c-green-pastell); border-color: var(--c-green); color: var(--c-green); } /* aktiv = gefüllte grüne Pille (der fett gesetzte Eintrag) */ .hg_hero .hero .mod-custom p:has(> a:not(.btn)) > strong, #haeuser .category-desc p:has(> a:not(.btn)) > strong { background: var(--c-green); color: var(--c-font-inverted); border: 1px solid var(--c-green); font-weight: 700; } /* ============================================================ TRUST-BAND – global (vier Merkmale auf Grün) ============================================================ */ .hg_trust { background: var(--c-green); } .hg_trust .trust { display: flex; flex-wrap: wrap; } .hg_trust .mod-custom { flex: 1 1 200px; /* vier gleich breite Spalten */ display: flex; justify-content: center; } .hg_trust .mod-custom p { margin: 0; display: flex; align-items: center; gap: 10px; padding: 20px 16px; color: var(--c-font-inverted); font-weight: 600; line-height: 1; } /* Icons weiß auf Grün – unabhängig von der Originalfarbe der WebPs */ .hg_trust .mod-custom img { flex: none; filter: brightness(0) invert(1); } /* senkrechte Trenner zwischen den Merkmalen */ .hg_trust .mod-custom + .mod-custom { border-left: 1px solid var(--c-border-color-inverted); } /* Tablet/Handy quer: 2×2-Raster */ @media (max-width: 991px) { .hg_trust .mod-custom { flex: 1 1 50%; justify-content: flex-start; } /* alte senkrechte Kette auflösen … */ .hg_trust .mod-custom + .mod-custom { border-left: 0; } /* … und als 2-Spalten-Gitter neu ziehen: Trenner rechts nur für die jeweils linke Spalte (1. und 3. Modul) */ .hg_trust .mod-custom:nth-child(odd) { border-right: 1px solid var(--c-border-color-inverted); } /* waagerechter Trenner unter der oberen Reihe (3. und 4. Modul) */ .hg_trust .mod-custom:nth-child(n+3) { border-top: 1px solid var(--c-border-color-inverted); } .hg_trust .mod-custom p { padding: 16px; } } /* ============================================================ KATEGORIE-KOPF – global. Titel erbt die h1-Basis (kein eigenes CSS). Gestylt wird nur die Beschreibung. ============================================================ */ .category-desc { margin: 0 0 32px; /* KEIN max-width mehr hier – sonst brechen die Pillen um */ border-bottom: 5px solid var(--c-green-pastell); /*padding-bottom: 28px;*/ } /* Fließtext = Lesespalte; die Pillen-Zeile (Absatz mit Links) bleibt voll breit */ .category-desc > p:not(:has(> a:not(.btn))) { max-width: 80ch; } .category-desc > p:first-of-type { font-size: 1.125rem; /* Lead-Absatz, wie im Hero */ } /************************************************** main bereich ***************************************************************/ /* ============================================================ HAUSTYP-KARTEN – Beitrags-/Kategorieblog auf Start + Häuser Gilt nur unter #startseite und #haeuser; andere Blogs bleiben Standard. ============================================================ */ /* ============================================================ INTRO über den Karten (leading-Beitrag) – volle Breite, zentriert ============================================================ */ #startseite .blog-featured .items-leading, #haeuser .blog-featured .items-leading { display: block; /* raus aus dem Karten-Grid */ margin: 0 auto 48px; max-width: 640px; text-align: center; } /* der leading-Beitrag ist ein .blog-item – Karten-Styling hier zurücknehmen */ #startseite .items-leading .blog-item, #haeuser .items-leading .blog-item { border: 0; border-radius: 0; background: none; overflow: visible; } #startseite .items-leading .blog-item:hover, #haeuser .items-leading .blog-item:hover { box-shadow: none; transform: none; /* kein Karten-Hover */ } #startseite .items-leading .item-content, #haeuser .items-leading .item-content { padding: 0; } /* Eyebrow des Intro-Beitrags. ⚠ data-dc-tpl-REST: Dieser Eyebrow steckt noch in

. Sobald du ihn im Editor zu

Unsere Haustypen

machst, greift die Karten-Eyebrow-Regel automatisch und dieser Block kann weg. */ #startseite .items-leading .item-content > div:first-child, #haeuser .items-leading .item-content > div:first-child { color: var(--c-green); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; } /* Überschrift erbt Größe aus der Basis-H2 – kein Override nötig. */ /* Fließtext nur dämpfen */ #startseite .items-leading p, #haeuser .items-leading p { color: var(--c-font-muted); } /* Override: gedämpfter Fließtext */ /* --- Karten-Raster --- */ #startseite .blog-items, #haeuser .blog-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } /* --- Einzelne Karte --- */ #startseite .blog-item, #haeuser .blog-item { position: relative; /* Anker für stretched-link */ display: flex; flex-direction: column; background: var(--c-font-inverted); border: 1px solid var(--c-border-color); border-radius: var(--c-border-radius); overflow: hidden; transition: box-shadow .18s, transform .18s; } #startseite .blog-item:hover, #haeuser .blog-item:hover { box-shadow: 0 14px 32px rgba(0,0,0,.10); transform: translateY(-2px); } /* Bild oben */ #startseite .blog-item .item-image, #haeuser .blog-item .item-image { margin: 0; } #startseite .blog-item .item-image img, #haeuser .blog-item .item-image img { display: block; width: 100%; aspect-ratio: 5 / 3; /* passt exakt zu 1200×720 – kein Zuschnitt, Label bleibt sichtbar */ object-fit: cover; } /* Inhaltsbereich */ #startseite .blog-item .item-content, #haeuser .blog-item .item-content { display: flex; flex-direction: column; gap: 6px; padding: 22px; flex: 1; } /* Eyebrow: Optik global; hier nur Abstand zurücknehmen (item-content nutzt gap) */ #startseite .blog-item .item-content > p:first-of-type, #haeuser .blog-item .item-content > p:first-of-type { margin: 0; } /* Kartentitel – kleiner als Sektions-H2, Farbe aus Basis */ #startseite .blog-item .item-content h2, #haeuser .blog-item .item-content h2 { margin: 2px 0 4px; font-size: 1.5rem; /* Override: Kartentitel */ } /* NEU: falls doch mal ein .item-title auftaucht (z. B. leading-Intro), platzsparend weg */ #startseite .blog-item .item-title, #haeuser .blog-item .item-title { display: none; } /* Stretch-Link liegt jetzt auf dem Details-Link → ganze Karte klickbar, ohne JS */ #startseite .blog-item .item-content > p:last-child a::after, #haeuser .blog-item .item-content > p:last-child a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* Beschreibung */ #startseite .blog-item .item-content > p:nth-of-type(2), #haeuser .blog-item .item-content > p:nth-of-type(2) { margin: 0; color: var(--c-font-muted); /* Override: gedämpft */ } /* Trennlinie vor der Fußzeile – Linie/Farbe aus Basis */ #startseite .blog-item .item-content hr, #haeuser .blog-item .item-content hr { margin: 16px 0 0; /* Override: nur oberer Abstand */ } /* Fußzeile = letztes

: „ab X m²“ links, „Details“ rechts */ #startseite .blog-item .item-content > p:last-child, #haeuser .blog-item .item-content > p:last-child { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 0; color: var(--c-font-muted); font-size: 15px; } #startseite .blog-item .item-content > p:last-child a, #haeuser .blog-item .item-content > p:last-child a { display: inline-flex; align-items: center; gap: 8px; color: var(--c-green); font-weight: 700; text-decoration: none; } #startseite .blog-item .item-content > p:last-child a img, #haeuser .blog-item .item-content > p:last-child a img { width: 20px; height: 20px; } /* #haeuser Unterkategorie-Karten: Eckdaten-Zeile (m²/Zimmer) dezent abtrennen. Trifft nur Karten mit Highlights-

    davor; Übersichtskarten bleiben unberührt. Abstand über padding, weil p:first-of-type oben margin:0 setzt (höhere Spezifität). */ #haeuser .blog-item .item-content ul + p { padding-top: 14px; border-top: 1px solid var(--c-border-color); } /* Platzhalter-Bild dezent grau überschreiben, bis echte Fotos da sind */ /* --- Responsive --- */ @media (max-width: 991px) { #startseite .blog-items, #haeuser .blog-items { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { #startseite .blog-items, #haeuser .blog-items { grid-template-columns: 1fr; } } /********************************************************* main bereich ENDE ***************************************************************/ /* ============================================================ BENEFIT-BAND (#startseite) – Intro links, 2×2-Karten rechts Layout gescoped unter .hg_benefit; .mod-custom nur innerhalb .benefit_left / .benefit_right angefasst, damit keine anderen Custom-Module getroffen werden. ============================================================ */ .hg_benefit { background: var(--c-green-pastell); } .hg_benefit .benefit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 64px); align-items: center; } /* --- Linke Spalte: Intro --- */ /* Eyebrow: Optik global; hier nur der lokale Abstand */ .hg_benefit .benefit_left .mod-custom > p:first-child { margin: 0 0 14px; } /* H2 erbt aus der Basis – kein Override */ .hg_benefit .benefit_left .mod-custom > p:not(:first-child) { color: var(--c-font-muted); /* Override: gedämpfter Fließtext */ } /*.hg_benefit .benefit_left .mod-custom p:has(.btn) { margin: 1.5rem 0 0; }*/ /* --- Rechte Spalte: 2×2-Karten --- */ .hg_benefit .benefit_right { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } /* Optik (Grund, Rahmen, Radius, Padding, Schatten) kommt aus dem globalen KARTEN-SKIN oben – hier nur noch das Layout. */ .hg_benefit .benefit_right .mod-custom { display: flex; flex-direction: column; gap: 10px; } .hg_benefit .benefit_right .mod-custom p { margin: 0; } /* Icon-Kachel = p:first-child (nur ein drin → flex unkritisch) */ .hg_benefit .benefit_right .mod-custom > p:first-child { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--c-border-radius); background: rgba(0,153,89,.10); /* FREIGABE: Kachel-Tint aus --c-green (Token --c-green-pastell wäre blasser) */ } /* Kartentitel = p:nth-child(2) (nach der Icon-Kachel) – dunkel, NICHT Eyebrow */ .hg_benefit .benefit_right .mod-custom > p:nth-child(2) { font-size: 1.15rem; /* Farbe/Gewicht aus + Basis */ } /* Kartentext */ .hg_benefit .benefit_right .mod-custom > p:last-child { color: var(--c-font-muted); /* Override: gedämpft */ } /* --- Responsive --- */ @media (max-width: 991px) { .hg_benefit .benefit { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 575px) { .hg_benefit .benefit_right { grid-template-columns: 1fr; } } /* Zusätzliche Elemente */ /* kleiner pastellgrüner tag (ohne Joomla Funktion) */ .tag_green_pastell { padding: 5px; border-radius: var(--c-border-radius); background: var(--c-green-pastell); } .nav_main .nav-cta > a { background: var(--c-green); color: var(--c-font-inverted); padding: 10px 22px; border-radius: var(--c-border-radius); } .nav_main .nav-cta > a:hover, .nav_main .nav-cta > a:focus-visible { background: var(--c-green-hover); color: var(--c-font-inverted); } /* ============================================================ KONTAKTSEITE (#kontaktseite) miscinfo links (Intro/Telefon/E-Mail) · Formular rechts als Karte. Layout gescoped; com_contact-Markup unangetastet (kein Override). ============================================================ */ /* Zweispalter – Reihenfolge im DOM egal, wird per order gedreht */ #kontaktseite .com-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 56px); align-items: start; } /* die zwei automatischen Labels „Kontaktformular“ / „Weitere Informationen“ raus (nur direkte Kinder – die Headline im Intro steckt verschachtelt und bleibt) */ #kontaktseite .com-contact > h2 { display: none; } /* Seitentitel-

    „Kontakt“ ist direktes Grid-Kind → belegte sonst eine Zelle. Optisch ausblenden (bleibt als einzige, SEO-relevante h1 im DOM), aus dem Grid-Fluss genommen via position:absolute. */ #kontaktseite .com-contact > h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } #kontaktseite .com-contact__miscinfo { order: -1; } /* linke Spalte */ #kontaktseite .com-contact__form { order: 0; } /* rechte Spalte */ /* --- Linke Spalte: Intro --- */ /* dl/dd-Ballast des miscinfo-Wrappers neutralisieren (dd hat 40px Default-Einzug) */ #kontaktseite .contact-miscinfo dl, #kontaktseite .contact-miscinfo dd { margin: 0; } #kontaktseite .contact-misc { display: block; } /* Eyebrow: Optik global; hier nur der lokale Abstand */ #kontaktseite .contact-misc > p:first-child { margin: 0 0 12px; } /* Headline – funktioniert egal ob h1 oder h2 (s. Redaktions-Notiz) */ #kontaktseite .contact-misc :is(h1, h2) { font-size: clamp(1.9rem, 3.5vw, 2.5rem); /* Override: Kontakt-Headline */ margin: 0 0 16px; } /* Lead = das

    direkt nach der Headline */ #kontaktseite .contact-misc :is(h1, h2) + p { margin: 0 0 24px; color: var(--c-font-muted); /* Override: gedämpfter Lead */ font-size: 1.05rem; } /* Telefon-/E-Mail-Zeilen (Icon + Link) – nur diese haben ein */ #kontaktseite .contact-misc > p:has(img) { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; } #kontaktseite .contact-misc > p:has(img) img { flex: none; } #kontaktseite .contact-misc > p:has(img) a { color: var(--c-font); /* Override: dunkel statt globalem grünen Link */ text-decoration: none; font-weight: 600; } #kontaktseite .contact-misc > p:has(img) a:hover, #kontaktseite .contact-misc > p:has(img) a:focus-visible { color: var(--c-green); } /* --- Rechte Spalte: Formular als Karte (gleiche Sprache wie Benefit-Karten) --- */ #kontaktseite .com-contact__form { background: var(--c-font-inverted); border: 1px solid var(--c-border-color); border-radius: var(--c-border-radius); box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: clamp(22px, 4vw, 34px); } /* nativer Fieldset-Rahmen weg; Legend a11y-erhaltend optisch ausblenden */ #kontaktseite .com-contact__form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } #kontaktseite .com-contact__form legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } #kontaktseite .com-contact__form .field-spacer { margin-bottom: 12px; } #kontaktseite .com-contact__form .field-spacer label { font-weight: 400; font-size: 14px; color: var(--c-font-muted); } #kontaktseite .com-contact__form .control-group { margin-bottom: 16px; } #kontaktseite .com-contact__form .control-label label { display: inline-block; margin-bottom: 6px; font-weight: 600; color: var(--c-font); } #kontaktseite .com-contact__form .control-label .star { color: var(--c-font-muted); font-weight: 400; } /* Eingabefelder */ #kontaktseite .com-contact__form .form-control { width: 100%; padding: 12px 14px; font: inherit; color: var(--c-font); background: var(--c-font-inverted); border: 1px solid var(--c-border-color); /* bestehender Hairline (Pillen-Rand) */ border-radius: var(--c-border-radius); /* wie Buttons */ } #kontaktseite .com-contact__form .form-control:focus-visible { outline: 2px solid var(--c-green); outline-offset: 2px; border-color: var(--c-green); } #kontaktseite .com-contact__form textarea.form-control { min-height: 140px; resize: vertical; } /* Submit – erbt globales .btn, hier vollbreit */ #kontaktseite .com-contact__form .control-group:last-of-type { margin-bottom: 0; } #kontaktseite .com-contact__form button[type="submit"] { width: 100%; justify-content: center; margin-top: 6px; } /* --- Responsive --- */ @media (max-width: 991px) { #kontaktseite .com-contact { grid-template-columns: 1fr; } #kontaktseite .hg_main .main { padding: 40px 0; } } /* ============================================================ CTA-BAND (global) – dunkelgrün, zentriert, Abschluss-CTA → /kontakt Bewusst NICHT gescoped: das Modul kann per Menüzuweisung an jeder Seite hängen (wie .hg_promo / .hg_infos). ============================================================ */ .hg_cta { background: var(--c-green-hover); } .hg_cta .cta { max-width: 640px; margin-inline: auto; text-align: center; } .hg_cta .mod-custom > p:first-child { margin: 0 0 12px; } /* Eyebrow-Abstand */ .hg_cta .mod-custom h2 + p { margin: 0 0 28px; } /* Lead → Button */ /* Aufhellung auf dunklem Band */ .hg_cta :is(h1, h2) { color: var(--c-font-inverted); } /* Headline weiß */ .hg_cta .mod-custom h2 + p { color: var(--c-font-muted-inverted); } /* Lead gedämpft-weiß */ .hg_cta .mod-custom p:has(.btn) { justify-content: center; /* Override: Band ist zentriert, flex ignoriert text-align */ margin: 0; } /************************ Readmore-Button (global) *****************************/ /* Der Link liegt in #startseite/#haeuser .blog-item .item-content > p:last-child a (Spezifität 1,3,2). Global (ohne ID) nur mit !important zu überstimmen – deshalb !important ausschließlich auf color:hover, wo die scoped Regel konkurriert. Normal-Grün liefert dieselbe scoped Regel mit (kein !important nötig). */ .readmore a { padding: 6px 14px; border-radius: var(--c-border-radius); background: var(--c-green-pastell); color: var(--c-green); font-weight: 700; text-decoration: none; transition: background var(--c-transition), color var(--c-transition); } .readmore a:hover, .readmore a:focus-visible { background: var(--c-green); color: var(--c-green-pastell) !important; } /* ============================================================ BAUTAGEBUCH-BAND (.hg_promo) – dunkle Karte mit Foto Bewusst NICHT auf #startseite gescoped: das Modul liegt auf einer eigenen Position und kann per Joomla an jedes Menü. Gestaltung = Hero-Muster (Foto + --c-bg-gradient, Text links). Karte = das Modul selbst, weil das Hintergrundbild als Inline- Style aus der Modul-Option an #mod-custom* hängt. ============================================================ */ .hg_promo .mod-custom { position: relative; overflow: hidden; /* schneidet Bild + Overlay auf den Radius */ border-radius: var(--c-border-radius); background-color: var(--c-green-dark); /* Basis unter dem Bild + Fallback ohne Bild */ background-position: center; background-size: cover; background-repeat: no-repeat; padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 72px); color: var(--c-font-inverted); } /* Verlauf als Overlay statt im background-Shorthand (anders als im Hero): die Modul-Option „Hintergrundbild" setzt background-image inline und würde ein Shorthand aus dem Stylesheet überschreiben. */ .hg_promo .mod-custom::before { content: ""; position: absolute; inset: 0; background: var(--c-bg-gradient); } /* Inhalt über das Overlay – DOM-Reihenfolge reicht, kein z-index nötig */ .hg_promo .mod-custom > * { position: relative; max-width: 62ch; /* Lesespalte, gibt rechts das Foto frei */ } /* Aufhellung auf dunklem Grund */ .hg_promo :is(h1, h2) { color: var(--c-font-inverted); } /* Override: Basis-Typo pinnt h1–h4 auf dunkel */ .hg_promo .mod-custom h2 + p { color: var(--c-font-muted-inverted); } /* Override: Lead gedämpft-weiß */ /* ============================================================ INFOS-BAND (.hg_infos) – Kachelraster, Icon + Titel + Text. Bewusst NICHT auf eine Seite gescoped: das Modul kann per Menüzuweisung an jede Seite (wie .hg_promo). Karten-Optik kommt aus dem globalen KARTEN-SKIN. ============================================================ */ .hg_infos { background: var(--c-green-pastell); } /* --- Kopf: Eyebrow + Headline, zentriert --- */ .hg_infos .mod-custom > p:first-child, .hg_infos .mod-custom > h2, .hg_infos .mod-custom > h2 + p { text-align: center; } /* Eyebrow-Abstand wie im Benefit-Band – gleicher Wert, kein neuer */ .hg_infos .mod-custom > p:first-child { margin: 0 0 14px; } /* Intro: Lesespalte, sonst läuft der Satz über die volle Bandbreite */ .hg_infos .mod-custom > h2 + p { max-width: 62ch; /* bestehender Wert aus .hg_promo, kein neuer */ margin-inline: auto; } /* --- Raster --- */ .hg_infos .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); /* 20.07. 3 → 4 Spalten (Freigabe 22.07.) */ gap: 24px; /* wie .benefit_right */ } /* --- Kachel-Layout: Grafik oben, darunter Titel und Text --- */ .hg_infos .tile { display: flex; flex-direction: column; align-items: start; gap: 12px; /* ersetzt alle margins in der Kachel */ } .hg_infos .tile img { width: 64px; /* height:auto aus der Basis → quadratisch */ } .hg_infos .tile h3, .hg_infos .tile p { margin: 0; /* Override: Abstand macht der gap */ } .hg_infos .tile p { color: var(--c-font-muted); /* Override: gedämpfter Fließtext, wie Benefit-Karte */ } /* --- Responsive: Breakpoints wie bei den Haustyp-Karten --- */ @media (max-width: 1199px) { .hg_infos .tiles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .hg_infos .tiles { grid-template-columns: 1fr; } } /* ============================================================ ZICKZACK-BLOG (#zickzack) – Kategorieblog, Bild und Text im Wechsel. Seitenklasse am Menüpunkt, KEIN Override nötig:

    steht als Geschwister VOR .item-content → CSS tauscht die Spalten, die DOM-Lese- reihenfolge bleibt für Screenreader sinnvoll. ============================================================ */ /* Abstand zwischen den Beiträgen – Container-gap, kein Element-margin */ #zickzack .blog-items:not(.items-leading) { display: grid; gap: clamp(48px, 6vw, 96px); } /* Nur Beiträge MIT Bild werden zweispaltig – Beiträge ohne bleiben voll breit */ #zickzack .blog-items:not(.items-leading) .blog-item:has(.item-image) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; } /* Wechsel: ungerade = Bild links (DOM-Reihenfolge), gerade = Bild rechts. Zum Umdrehen genügt even ↔ odd. */ #zickzack .blog-items:not(.items-leading) .blog-item:nth-child(even) .item-image { order: 2; } #zickzack .item-image { margin: 0; /* Override: UA-Default für
    ist 1em 40px */ } #zickzack .item-image img { width: 100%; aspect-ratio: 4 / 3; /* einheitliche Kacheln trotz gemischter Bildmaße */ object-fit: cover; border-radius: var(--c-border-radius); } /* --- Responsive --- */ @media (max-width: 991px) { #zickzack .blog-items:not(.items-leading) .blog-item:has(.item-image) { grid-template-columns: 1fr; } #zickzack .blog-items:not(.items-leading) .blog-item:nth-child(even) .item-image { order: 0; /* Bild mobil immer oben */ } } /* ============================================================ FOOTER – dunkles Band, Marke links, 3 Link-Spalten rechts. Hintergrund + Linkfarbe sitzen auf