/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* Test SFTP veze - 18.05.2026 Marko */

/* ==========================================================================
   wbg Nürnberg - Design Tokens (aus Figma "WBG-Redesign" übernommen)
   --------------------------------------------------------------------------
   Quelle: Figma-File "WBG-Redesign", Frame "HOME - Desktop - 21.04.2026"
   Diese Custom Properties werden in den Folgeklassen verwendet, damit
   Farbwerte zentral angepasst werden können.
   ========================================================================== */
:root {
    /* Markenfarben */
    --wbg-gruen: #009450;              /* wbg Grün - Primärfarbe (Buttons, CTAs) */
    --wbg-gruen-dunkel: #19502F;       /* Dunkelgrün - Hero-Overlay, Akzente */
    --wbg-gruen-akzent: #BCE037;       /* Akzentgrün (Lime) - Icon-Badges */
    --wbg-gruen-section: #00965e;      /* Section-Gradient Start */
    --wbg-gruen-section-2: #2db400;    /* Section-Gradient Ende */
    --wbg-neutral-50: #FDFCFB;         /* Off-White - Text auf Grün */
    --wbg-norima: #EAB90C;             /* Norima-Gelb – Eigentümer:innen-Service */
    --wbg-text: #4A4949;               /* Fließtext auf weißen Eigentümer-Sektionen */

    /* Bestehende Helle-/Tailwind-Greens (aus den Slanted-Klassen) */
    --wbg-gruen-light: #86efac;
    --wbg-gruen-500: #22c55e;
    --wbg-gruen-600: #16a34a;
    --wbg-gruen-700: #15803d;

    /* Neutrale Töne */
    --wbg-text-light: #ffffff;
    --wbg-text-on-dark: rgba(255, 255, 255, 0.92);
    --wbg-neutral-200: #F0EEE9;                  /* Off-White (Karten-Titel) */
    --wbg-overlay-dark: rgba(25, 80, 47, 0.8);   /* Hero-Schräge: Dunkelgrün 80 % */

    /* Geometrie */
    --wbg-skew: -17.53deg;             /* Markenwinkel "Schräge Kante" */
    --wbg-radius: 10px;                /* Default Border-Radius im Design */

    /* ----- Typography Scale --------------------------------------------- */
    /* Mobile-first (+1–2 px). Ab 1024 px Desktop-Caps per Media Query.    */
    /* ------------------------------------------------------------------- */
    --wbg-fs-xs:            clamp(1rem,       0.95rem  + 0.1vw,   1.0625rem); /* 16-17 px */
    --wbg-fs-sm:            clamp(1.1875rem,  1.1rem   + 0.25vw,  1.3125rem); /* 19-21 px */
    --wbg-fs-body:          clamp(1.4375rem,  1.35rem  + 0.35vw,  1.5rem);    /* 23-24 px */
    --wbg-fs-lead:          clamp(1.4375rem,  1.3rem   + 0.45vw,  1.5625rem); /* 23-25 px */
    --wbg-fs-link:          clamp(1.3125rem,  1.2rem   + 0.35vw,  1.4375rem); /* 21-23 px */
    --wbg-fs-cta:           clamp(1.4375rem,  1.35rem  + 0.35vw,  1.5rem);    /* 23-24 px */
    --wbg-fs-hero-cta:      clamp(1.4375rem,  1.38rem  + 0.2vw,   1.5rem);    /* 23-24 px */
    --wbg-fs-card-title:    clamp(1.9375rem,  1.75rem  + 0.55vw,  2.0625rem); /* 31-33 px */
    --wbg-fs-card-body:     var(--wbg-fs-body);
    --wbg-fs-h3:            clamp(1.6875rem,  1.55rem  + 0.45vw,  1.875rem); /* 27-30 px */
    --wbg-fs-hero-title:    clamp(2.5625rem,  2.05rem  + 2.4vw,   3.75rem);  /* 41-60 px */
    --wbg-fs-section-title: clamp(2.5625rem,  2rem     + 2vw,     3.125rem); /* 41-50 px */
    --wbg-fs-nav:           clamp(1.4375rem,  1.3rem   + 0.5vw,   1.5625rem); /* 23-25 px */
    --wbg-fs-header-ui:     clamp(1.0625rem,  1rem     + 0.15vw,  1.1875rem); /* 17-19 px */
    --wbg-fs-footer-link:   clamp(1.3125rem,  1.15rem  + 0.75vw,  1.5625rem); /* 21-25 px */
    --wbg-fs-footer-legal:  clamp(1.1875rem,  1.05rem  + 0.35vw,  1.375rem); /* 19-22 px */
    --wbg-fs-info-tile:     clamp(0.875rem,   0.84rem  + 0.2vw,   0.9375rem); /* 14-15 px – Förderhäuser-Kachel */

    /* Alias für bestehende Referenzen (Section-Headlines) */
    --wbg-fs-h2: var(--wbg-fs-section-title);
}

@media (min-width: 1024px) {
    :root {
        --wbg-fs-xs:            0.875rem;   /* 14 px */
        --wbg-fs-sm:            1rem;       /* 16 px */
        --wbg-fs-body:          1.25rem;    /* 20 px */
        --wbg-fs-lead:          1.25rem;    /* 20 px */
        --wbg-fs-link:          1.125rem;   /* 18 px */
        --wbg-fs-cta:           1.25rem;    /* 20 px */
        --wbg-fs-hero-cta:      1.375rem;   /* 22 px – Hero CTAs unverändert */
        --wbg-fs-card-title:    1.625rem;   /* 26 px */
        --wbg-fs-h3:            1.375rem;   /* 22 px */
        --wbg-fs-hero-title:    clamp(2.75rem, 2.2rem + 2.5vw, 3.75rem); /* 60 px max */
        --wbg-fs-section-title: 3.125rem;   /* 50 px */
        --wbg-fs-nav:           1rem;       /* 16 px */
        --wbg-fs-header-ui:     1rem;       /* 16 px */
        --wbg-fs-footer-link:   1.125rem;   /* 18 px */
        --wbg-fs-footer-legal:  0.9375rem;  /* 15 px */
        --wbg-fs-info-tile:     1rem;       /* 16 px – Förderhäuser-Kachel */
        --wbg-fs-h2: var(--wbg-fs-section-title);
    }
}

/* Tablet (641–1024 px): Zwischenstufe zwischen Mobile und Desktop */
@media (min-width: 641px) and (max-width: 1024px) {
    :root {
        --wbg-fs-xs:            0.8125rem;   /* 13 px */
        --wbg-fs-sm:            0.9375rem;   /* 15 px */
        --wbg-fs-body:          1.125rem;    /* 18 px */
        --wbg-fs-lead:          1.125rem;    /* 18 px */
        --wbg-fs-link:          1rem;        /* 16 px */
        --wbg-fs-cta:           1.125rem;    /* 18 px */
        --wbg-fs-hero-cta:      1.25rem;     /* 20 px */
        --wbg-fs-card-title:    1.5rem;      /* 24 px */
        --wbg-fs-h3:            1.25rem;     /* 20 px */
        --wbg-fs-hero-title:    clamp(2.375rem, 4.5vw, 3rem); /* 38–48 px */
        --wbg-fs-section-title: 2.5rem;      /* 40 px */
        --wbg-fs-nav:           0.9375rem;   /* 15 px */
        --wbg-fs-header-ui:     0.9375rem;   /* 15 px */
        --wbg-fs-footer-link:   1rem;        /* 16 px */
        --wbg-fs-footer-legal:  0.875rem;    /* 14 px */
        --wbg-fs-info-tile:     0.9375rem;   /* 15 px – Förderhäuser-Kachel */
        --wbg-fs-h2: var(--wbg-fs-section-title);
    }
}

/* Mobile (≤768 px): Fließtext −2 px, übrige Headlines kleiner – Hero-Titel unverändert */
@media (max-width: 768px) {
    :root {
        --wbg-fs-xs:            clamp(0.875rem,  0.825rem  + 0.1vw,   0.9375rem);  /* 14–15 px */
        --wbg-fs-sm:            clamp(1.0625rem, 0.9875rem + 0.25vw,  1.1875rem); /* 17–19 px */
        --wbg-fs-body:          clamp(1.3125rem, 1.225rem  + 0.35vw,  1.375rem);  /* 21–22 px */
        --wbg-fs-lead:          clamp(1.3125rem, 1.175rem  + 0.45vw,  1.4375rem); /* 21–23 px */
        --wbg-fs-link:          clamp(1.1875rem, 1.0875rem + 0.35vw,  1.3125rem); /* 19–21 px */
        --wbg-fs-card-title:    clamp(1.5rem,     1.4rem     + 0.45vw,  1.625rem);  /* 24–26 px */
        --wbg-fs-card-body:     clamp(1.1875rem,  1.1rem     + 0.3vw,   1.25rem);   /* 19–20 px */
        --wbg-fs-h3:            clamp(1.4375rem, 1.375rem  + 0.45vw,  1.625rem);  /* 23–26 px */
        --wbg-fs-section-title: clamp(2.3125rem, 1.8125rem + 2vw,     2.875rem);  /* 37–46 px */
        --wbg-fs-footer-link:   clamp(1.1875rem, 1.025rem  + 0.75vw,  1.4375rem); /* 19–23 px */
        --wbg-fs-footer-legal:  clamp(1.0625rem, 0.925rem  + 0.35vw,  1.25rem);   /* 17–20 px */
        --wbg-fs-info-tile:     clamp(0.875rem,  0.84rem   + 0.15vw, 0.9375rem); /* 14–15 px – Förderhäuser-Kachel */
        --wbg-fs-h2: var(--wbg-fs-section-title);
    }
}

html {
    font-size: 100%;
}

/* ==========================================================================
   Typografie – zentral durchsetzen (überschreibt Bricks Element-Styles)
   --------------------------------------------------------------------------
   Bricks setzt auf Headings/Text oft Inline-font-size. Diese Regeln
   erzwingen die Token-Skala siteweit konsistent.
   ========================================================================== */
.wbg-hero__title {
    font-size: var(--wbg-fs-hero-title) !important;
    line-height: 1.1 !important;
}

.wbg-buyers__title,
.wbg-tenants__title,
.wbg-owners__title,
.wbg-news__title,
.wbg-about__title,
.brxe-heading.wbg-buyers__title,
.brxe-heading.wbg-tenants__title,
.brxe-heading.wbg-owners__title,
.brxe-heading.wbg-news__title,
.brxe-heading.wbg-about__title,
.wbg-wbs__title,
.brxe-heading.wbg-wbs__title,
.brxe-heading.wbg-wbs__header,
.brxe-heading.wbg-wbs_header,
.wbg-wbs__header .brxe-heading,
.wbg-wbs__header :is(h1, h2, h3, h4),
.wbg-wbs__inner > .brxe-heading,
.brxe-section.wbg-wbs .wbg-wbs__inner > .brxe-heading,
.brxe-section:has(.wbg-wbs__layout) .wbg-wbs__header :is(.brxe-heading, h1, h2, h3, h4),
.wbg-kaufberatung__title,
.brxe-heading.wbg-kaufberatung__title,
.wbg-kaufberatung__header .brxe-heading,
.wbg-kaufberatung__header :is(h1, h2, h3, h4),
.wbg-mieter-portal__title,
.brxe-heading.wbg-mieter-portal__title,
.wbg-mieter-portal__header .brxe-heading,
.wbg-mieter-portal__header :is(h1, h2, h3, h4),
.wbg-umzug-plus__title,
.brxe-heading.wbg-umzug-plus__title,
.wbg-umzug-plus__header .brxe-heading,
.wbg-umzug-plus__header :is(h1, h2, h3, h4),
.wbg-kundencenter__title,
.brxe-heading.wbg-kundencenter__title,
.wbg-kundencenter__header .brxe-heading,
.wbg-kundencenter__header :is(h1, h2, h3, h4),
.wbg-faq__title,
.brxe-heading.wbg-faq__title,
.wbg-faq__header .brxe-heading,
.wbg-faq__header :is(h1, h2, h3, h4),
.wbg-foerderhaeuser__title,
.brxe-heading.wbg-foerderhaeuser__title,
.wbg-foerderhaeuser__header .brxe-heading,
.wbg-foerderhaeuser__header :is(h1, h2, h3, h4),
.wbg-ueber-uns__title,
.brxe-heading.wbg-ueber-uns__title,
.wbg-ueber-uns__header .brxe-heading,
.wbg-ueber-uns__header :is(h1, h2, h3, h4),
.wbg-karriere__title,
.brxe-heading.wbg-karriere__title,
.wbg-karriere__header .brxe-heading,
.wbg-karriere__header :is(h1, h2, h3, h4),
.wbg-nachhaltigkeit__title,
.brxe-heading.wbg-nachhaltigkeit__title,
.wbg-nachhaltigkeit__header .brxe-heading,
.wbg-nachhaltigkeit__header :is(h1, h2, h3, h4),
.wbg-quartiersentwicklung__title,
.brxe-heading.wbg-quartiersentwicklung__title,
.wbg-quartiersentwicklung__header .brxe-heading,
.wbg-quartiersentwicklung__header :is(h1, h2, h3, h4),
.wbg-abgeschlossene-projekte__title,
.brxe-heading.wbg-abgeschlossene-projekte__title,
.wbg-abgeschlossene-projekte__header .brxe-heading,
.wbg-abgeschlossene-projekte__header :is(h1, h2, h3, h4) {
    font-size: var(--wbg-fs-section-title) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

.wbg-hero__intro,
.wbg-buyers__intro,
.wbg-tenants__intro,
.wbg-owners__intro,
.wbg-owners__footer-text,
.wbg-buyers__footer-text,
.wbg-news__intro,
.wbg-about__lead,
.wbg-about__body,
.wbg-about__body p,
.wbg-wbs__body,
.wbg-wbs__body p,
.wbg-kaufberatung__intro,
.wbg-kaufberatung__intro p,
.wbg-kaufberatung__body,
.wbg-kaufberatung__body p,
.wbg-kaufberatung__body li,
.wbg-kaufberatung__note,
.wbg-kaufberatung__note p,
.wbg-mieter-portal__intro,
.wbg-mieter-portal__intro p,
.wbg-mieter-portal__body,
.wbg-mieter-portal__body p,
.wbg-umzug-plus__intro,
.wbg-umzug-plus__intro p,
.wbg-umzug-plus__body,
.wbg-umzug-plus__body p,
.wbg-kundencenter__intro,
.wbg-kundencenter__intro p,
.wbg-kundencenter__body,
.wbg-kundencenter__body p,
.wbg-faq__intro,
.wbg-faq__intro p,
.wbg-weg__intro,
.wbg-weg__intro p,
.wbg-weg__body,
.wbg-weg__body p,
.wbg-versicherungsschutz__intro,
.wbg-versicherungsschutz__intro p,
.wbg-allein-eigentuemer__intro,
.wbg-allein-eigentuemer__intro p,
.wbg-allein-eigentuemer__body,
.wbg-allein-eigentuemer__body p,
.wbg-allein-eigentuemer__body li,
.wbg-foerderhaeuser__intro,
.wbg-foerderhaeuser__intro p,
.wbg-foerderhaeuser__body,
.wbg-foerderhaeuser__body p,
.wbg-ueber-uns__intro,
.wbg-ueber-uns__intro p,
.wbg-ueber-uns__body,
.wbg-ueber-uns__body p,
.wbg-ueber-uns__stat-label,
.wbg-ueber-uns__stat-label p,
.wbg-karriere__intro,
.wbg-karriere__intro p,
.wbg-karriere__body,
.wbg-karriere__body p,
.wbg-karriere__list,
.wbg-karriere__list li,
.wbg-karriere__job-desc,
.wbg-karriere__job-desc p,
.wbg-nachhaltigkeit__footer-text,
.wbg-nachhaltigkeit__footer-text p,
.wbg-abgeschlossene-projekte__intro,
.wbg-abgeschlossene-projekte__intro p,
.wbg-soziales-engagement__body,
.wbg-soziales-engagement__body p,
.wbg-buyers-card__desc,
.wbg-tenants-card__desc,
.wbg-owners-card__desc,
.wbg-news-card__excerpt {
    font-size: var(--wbg-fs-card-body) !important;
}
.wbg-tenants-card__title,
.wbg-buyers-card__title,
.wbg-owners-card__title,
.wbg-news-card__title,
.wbg-news-card__title a,
.wbg-soziales-engagement__title,
.brxe-heading.wbg-soziales-engagement__title,
.wbg-soziales-engagement__copy .brxe-heading,
.wbg-soziales-engagement__copy :is(h1, h2, h3, h4) {
    font-size: var(--wbg-fs-card-title) !important;
}

.wbg-karriere__list-title,
.brxe-heading.wbg-karriere__list-title,
.wbg-karriere__jobs-title,
.brxe-heading.wbg-karriere__jobs-title,
.wbg-faq__group-title,
.brxe-heading.wbg-faq__group-title,
.wbg-faq__group .brxe-heading.wbg-faq__group-title {
    font-size: var(--wbg-fs-h3) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.wbg-karriere__job-title,
.wbg-karriere__job-title .brxe-text-basic,
.wbg-karriere__job-title .brxe-text {
    font-size: var(--wbg-fs-link) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

.wbg-soziales-engagement__link,
.wbg-kundencenter__link,
.wbg-kundencenter__link a {
    font-size: var(--wbg-fs-link) !important;
}

.wbg-faq__group-link,
.wbg-faq__group-link.brxe-text-link,
.wbg-faq__group-link a {
    font-size: var(--wbg-fs-link) !important;
}

.wbg-buyers-card__link,
.wbg-quartiersentwicklung-card__link,
.wbg-abgeschlossene-projekte__link,
.wbg-versicherungsschutz__link,
.wbg-tenants-card__link,
.wbg-owners-card__link,
.wbg-news-card__link {
    font-size: var(--wbg-fs-link) !important;
}

.wbg-hero-cta {
    font-size: var(--wbg-fs-hero-cta) !important;
}

.wbg-about__cta,
.wbg-news__cta,
.wbg-wbs__cta,
.wbg-kaufberatung__cta,
.wbg-mieter-portal__cta,
.wbg-ueber-uns__cta,
.wbg-foerderhaeuser__cta,
.wbg-buyers__cta,
.wbg-nachhaltigkeit__cta,
.wbg-quartiersentwicklung__cta,
.wbg-immobilienverwaltung__cta,
.wbg-abgeschlossene-projekte__cta,
.wbg-buyers-card__cta,
.wbg-owners-card__cta,
.wbg-header-cta,
.wbg-footer__app-cta {
    font-size: var(--wbg-fs-cta) !important;
}

.wbg-news-card__date {
    font-size: var(--wbg-fs-xs) !important;
}


/* ==========================================================================
   wbg Nürnberg - Signature Schräge / Diagonale Formen
   --------------------------------------------------------------------------
   Wiederverwendbare CSS-Klassen für das Markenelement "schräge Kante".
   Werden in Bricks Builder über das Feld "CSS-Klassen" (Settings-Panel)
   am jeweiligen Element zugewiesen.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) .wbg-card-image-slanted
   --------------------------------------------------------------------------
   Bild innerhalb einer Karte mit diagonalem Schnitt am linken Rand.
   Das Bild füllt die volle Höhe des Containers und wird beschnitten.

   Anwendung in Bricks:
   - Element: Image (oder Bild im Container)
   - Settings-Panel → "CSS-Klassen": wbg-card-image-slanted
   - Übergeordneter Container sollte position: relative haben,
     damit .wbg-tag-slanted korrekt positioniert werden kann.
   -------------------------------------------------------------------------- */
.wbg-card-image-slanted {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
}


/* --------------------------------------------------------------------------
   2) .wbg-tag-slanted
   --------------------------------------------------------------------------
   Kleines Etikett / Badge (z. B. "Projekt", "Service"), das absolut
   in der oberen linken Ecke des Bildes platziert wird.

   Anwendung in Bricks:
   - Element: Text / Basic Text (kurzer Label-Text)
   - Settings-Panel → "CSS-Klassen": wbg-tag-slanted
   - Der Eltern-Container (Karte) braucht position: relative.
   -------------------------------------------------------------------------- */
.wbg-tag-slanted {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    background-color: #16a34a;
    color: #ffffff;
    font-size: var(--wbg-fs-xs);
    font-weight: 500;
    line-height: 1;
    padding: 6px 24px 6px 16px;
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
    text-transform: none;
    letter-spacing: 0.2px;
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   3) .wbg-button-slanted
   --------------------------------------------------------------------------
   Großer CTA-Button (z. B. "Alle Meldungen ansehen") mit beidseitig
   schrägen Kanten und grünem Verlauf.

   Anwendung in Bricks:
   - Element: Button
   - Settings-Panel → Style → Border: alle Werte / Radius auf 0 setzen
   - Settings-Panel → "CSS-Klassen": wbg-button-slanted
   - Background und Border in Bricks leer lassen, damit der Verlauf greift.
   -------------------------------------------------------------------------- */
.wbg-button-slanted {
    display: inline-block;
    padding: 16px 48px;
    color: #ffffff !important;
    font-weight: 500;
    text-decoration: none;
    border: none;
    border-radius: 0;
    background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
    clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
    -webkit-clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
    cursor: pointer;
    transition: transform 0.25s ease, filter 0.25s ease;
    will-change: transform;
}

.wbg-button-slanted:hover,
.wbg-button-slanted:focus-visible {
    transform: scale(1.02);
    filter: brightness(1.05);
}


/* --------------------------------------------------------------------------
   4) .wbg-icon-badge-slanted
   --------------------------------------------------------------------------
   Kleiner diagonaler Hintergrund hinter einem Icon (z. B. in der
   "Käufer"-Sektion). Wird typischerweise als Wrapper um ein Icon gelegt.

   Anwendung in Bricks:
   - Element: Block / Div, darin verschachtelt ein Icon-Element
   - Settings-Panel → "CSS-Klassen" am Wrapper: wbg-icon-badge-slanted
   - Icon-Größe ca. 20-24px für gute Optik im 48x48 Badge.
   -------------------------------------------------------------------------- */
.wbg-icon-badge-slanted {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #86efac;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
    -webkit-clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
    color: #15803d;
    flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   5) .bild-angewinkelt
   --------------------------------------------------------------------------
   Parallelogramm-Bild mit abgerundeten Ecken (wie wbg-ueber-uns__media).

   In Bricks – Klasse vergeben an:
   - Image-Element (empfohlen), oder
   - Block/Div, wenn das Image direktes Kind ist (.brxe-block > .brxe-image)

   Nicht an Section/Header/Container mit vielen Kindern.

   Image-Element: Object Fit → Cover, Border-Radius → 0, HTML-Tag → div.
   Custom CSS in der Global Class leer lassen.
   -------------------------------------------------------------------------- */

/* Skew-Container */
:is(
    .brxe-image.bild-angewinkelt:not(.wbg-immo__hero-image):not(img),
    figure.brxe-image.bild-angewinkelt,
    .brxe-block.bild-angewinkelt:not(img) > .brxe-image:not(img),
    .brxe-div.bild-angewinkelt:not(img) > .brxe-image:not(img),
    .brxe-container.bild-angewinkelt:not(img) > .brxe-image:not(img),
    .brxe-image:not(.bild-angewinkelt):not(img):has(> img.bild-angewinkelt),
    .wbg-bild-angewinkelt-wrap.bild-angewinkelt:not(img)
) {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 534 / 305;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: var(--wbg-radius, 10px) !important;
    transform: skewX(-17.5deg) !important;
    transform-origin: center center !important;
    isolation: isolate;
    line-height: 0;
}

/* Zwischen-Wrapper – nur Position, kein Transform */
:is(
    .brxe-image.bild-angewinkelt:not(.wbg-immo__hero-image):not(img),
    figure.brxe-image.bild-angewinkelt,
    .brxe-block.bild-angewinkelt:not(img) > .brxe-image:not(img),
    .brxe-div.bild-angewinkelt:not(img) > .brxe-image:not(img),
    .brxe-container.bild-angewinkelt:not(img) > .brxe-image:not(img),
    .brxe-image:not(.bild-angewinkelt):not(img):has(> img.bild-angewinkelt)
) > :is(picture, figure, a) {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Bild – Gegenskew → Motiv bleibt gerade */
:is(
    .brxe-image.bild-angewinkelt:not(.wbg-immo__hero-image):not(img),
    figure.brxe-image.bild-angewinkelt,
    .brxe-block.bild-angewinkelt:not(img) > .brxe-image:not(img),
    .brxe-div.bild-angewinkelt:not(img) > .brxe-image:not(img),
    .brxe-container.bild-angewinkelt:not(img) > .brxe-image:not(img),
    .brxe-image:not(.bild-angewinkelt):not(img):has(> img.bild-angewinkelt)
) > img,
:is(
    .brxe-image.bild-angewinkelt:not(.wbg-immo__hero-image):not(img),
    figure.brxe-image.bild-angewinkelt,
    .brxe-block.bild-angewinkelt:not(img) > .brxe-image:not(img),
    .brxe-div.bild-angewinkelt:not(img) > .brxe-image:not(img),
    .brxe-container.bild-angewinkelt:not(img) > .brxe-image:not(img),
    .brxe-image:not(.bild-angewinkelt):not(img):has(> img.bild-angewinkelt)
) > a > img,
:is(
    .brxe-image.bild-angewinkelt:not(.wbg-immo__hero-image):not(img),
    figure.brxe-image.bild-angewinkelt,
    .brxe-block.bild-angewinkelt:not(img) > .brxe-image:not(img),
    .brxe-div.bild-angewinkelt:not(img) > .brxe-image:not(img),
    .brxe-container.bild-angewinkelt:not(img) > .brxe-image:not(img),
    .brxe-image:not(.bild-angewinkelt):not(img):has(> img.bild-angewinkelt)
) > figure > img,
:is(
    .brxe-image.bild-angewinkelt:not(.wbg-immo__hero-image):not(img),
    figure.brxe-image.bild-angewinkelt,
    .brxe-block.bild-angewinkelt:not(img) > .brxe-image:not(img),
    .brxe-div.bild-angewinkelt:not(img) > .brxe-image:not(img),
    .brxe-container.bild-angewinkelt:not(img) > .brxe-image:not(img),
    .brxe-image:not(.bild-angewinkelt):not(img):has(> img.bild-angewinkelt)
) > picture > img,
.brxe-image:not(.bild-angewinkelt):not(img):has(> img.bild-angewinkelt) > img.bild-angewinkelt {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 130% !important;
    height: 100% !important;
    max-width: none !important;
    left: -15% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: skewX(17.5deg) scale(1.05) !important;
    transform-origin: center center !important;
}

/* PHP-Wrapper (nur mit .bild-angewinkelt; Hero nutzt .wbg-immo__hero-image) */
.wbg-bild-angewinkelt-wrap.bild-angewinkelt:not(img) > img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 130% !important;
    height: 100% !important;
    max-width: none !important;
    left: -15% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: skewX(17.5deg) scale(1.05) !important;
    transform-origin: center center !important;
}

/* Bricks rendert das Image-Element teils als <img> – wird per PHP in .wbg-bild-angewinkelt-wrap gehüllt */


/* ==========================================================================
   Immobilien – Single Template (CPT: immobilien)
   --------------------------------------------------------------------------
   Figma: ETW 1241:757, Haus 1241:1634 (WBG-Redesign)
   Bricks Single – BEM-Klassen. Kontaktformular später (JetFormBuilder).
   ========================================================================== */

.wbg-immo,
.wbg-immo.wbg-immo,
section.wbg-immo,
.brxe-section.wbg-immo {
    --wbg-immo-fs-title: clamp(2rem, 1.35rem + 2.2vw, 3rem);       /* 48 px */
    --wbg-immo-fs-price: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem); /* 30 px */
    --wbg-immo-fs-body: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem); /* 20 px */
    --wbg-immo-fs-small: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); /* 14 px */
    --wbg-immo-inner: min(1230px, 100%);
    --wbg-immo-pad-x: clamp(20px, 5.5vw, 104px);
    --wbg-immo-gap-lg: clamp(40px, 5vw, 72px);
    --wbg-immo-gap-md: clamp(28px, 3.5vw, 48px);
    --wbg-immo-gap-sm: clamp(20px, 2.5vw, 32px);
    --wbg-immo-col-left: minmax(0, 46%);
    --wbg-immo-col-right: minmax(0, 1fr);
    --wbg-immo-col-gap: clamp(32px, 4vw, 72px);
    --wbg-immo-facts-row-gap: 20px;
    --wbg-immo-slider-gap: 80px;
    --wbg-immo-grundriss-gap-top: 30px;
    --wbg-immo-grundriss-gap-bottom: 50px;
    --wbg-immo-hero-image-w: 534px;
    --wbg-immo-hero-image-h: 305px;
    /* Gerundetes Parallelogramm, border-radius 10 px (534×305, 14 % / 86 % Schräge) */
    --wbg-immo-hero-mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 534 305' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><path d='M71.73 12.38 Q74.76 0 87.51 0 L526.16 0 Q534 0 532.13 7.62 L462.27 292.62 Q459.24 305 446.49 305 L7.84 305 Q0 305 1.87 297.38 Z' fill='white'/></svg>");

    padding: clamp(40px, 5vw, 72px) var(--wbg-immo-pad-x) clamp(56px, 7vw, 96px) !important;
    background-color: #ffffff !important;
    color: var(--wbg-gruen-dunkel, #19502f);
    overflow-x: clip;
}

/* Optionaler innerer Wrapper (max. 1214 px wie Figma) */
.wbg-immo__inner,
.wbg-immo > .brxe-container.wbg-immo__inner,
.wbg-immo > .brxe-block.wbg-immo__inner,
.wbg-immo > .brxe-div.wbg-immo__inner {
    width: 100%;
    max-width: var(--wbg-immo-inner);
    margin: 0 auto;
}

body.wbg-immo-single .brxe-section.wbg-immo,
body.wbg-immo-single section.wbg-immo {
    max-width: none !important;
    width: 100% !important;
}

/* --- Hero (Figma – Spalten wie Facts/Ausstattung) ------------------------- */
.wbg-immo__hero,
.brxe-block.wbg-immo__hero,
.brxe-div.wbg-immo__hero {
    display: grid !important;
    grid-template-columns: var(--wbg-immo-col-left) var(--wbg-immo-col-right);
    grid-template-areas:
        "title image"
        "title address";
    column-gap: var(--wbg-immo-col-gap);
    row-gap: 0;
    align-items: start;
    justify-content: start;
    margin: 0 0 var(--wbg-immo-gap-lg);
    overflow: visible;
}

.wbg-immo__hero > .wbg-immo__title,
.wbg-immo__hero > .brxe-heading.wbg-immo__title,
.wbg-immo__hero > .brxe-heading:first-child {
    grid-area: title;
    grid-column: 1;
    align-self: start;
    max-width: 566px;
}

.wbg-immo__hero > .wbg-immo__address,
.wbg-immo__hero > .brxe-text-basic.wbg-immo__address {
    grid-area: address;
    grid-column: 2;
    justify-self: start;
    align-self: start;
    width: 100%;
    max-width: 534px;
    margin: 20px 0 0 !important;
    padding: 0 !important;
    text-align: left;
}

.wbg-immo__hero > .wbg-immo__hero-media,
.wbg-immo__hero > .wbg-bild-angewinkelt-wrap,
.wbg-immo__hero > .wbg-immo__hero-image,
.wbg-immo__hero > img,
.wbg-immo__hero > img.brxe-image,
.wbg-immo__hero > .brxe-image:not(img),
.wbg-immo__hero > figure {
    grid-area: image;
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    align-self: start;
    width: var(--wbg-immo-hero-image-w) !important;
    max-width: 100% !important;
    height: var(--wbg-immo-hero-image-h) !important;
    max-height: none !important;
}

/*
 * Hero-Bild: SVG-Maske (gerundetes Parallelogramm, 10 px Radius) – kein skew am Bild.
 */
body.wbg-immo-single .wbg-immo__hero > .wbg-immo__hero-image,
body.wbg-immo-single .wbg-immo__hero > .wbg-bild-angewinkelt-wrap,
body.wbg-immo-single .wbg-immo__hero > .wbg-immo__hero-media:not(img),
body.wbg-immo-single .wbg-immo__hero > .brxe-image.bild-angewinkelt:not(img) {
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
    width: var(--wbg-immo-hero-image-w) !important;
    max-width: 100% !important;
    height: var(--wbg-immo-hero-image-h) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: none !important;
    border-radius: 0 !important;
    transform: none !important;
    isolation: isolate;
    line-height: 0;
    flex-shrink: 0;
}

body.wbg-immo-single .wbg-immo__hero .wbg-immo__hero-image-skew,
body.wbg-immo-single .wbg-immo__hero .wbg-immo__hero-image-clip {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: 0 !important;
    transform: none !important;
    -webkit-mask-image: var(--wbg-immo-hero-mask);
            mask-image: var(--wbg-immo-hero-mask);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    isolation: isolate;
    line-height: 0;
}

body.wbg-immo-single .wbg-immo__hero .wbg-immo__hero-image-skew > :is(picture, figure, a),
body.wbg-immo-single .wbg-immo__hero .wbg-immo__hero-image-clip > :is(picture, figure, a) {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body.wbg-immo-single .wbg-immo__hero .wbg-immo__hero-image-skew > img,
body.wbg-immo-single .wbg-immo__hero .wbg-immo__hero-image-skew picture img,
body.wbg-immo-single .wbg-immo__hero .wbg-immo__hero-image-skew figure img,
body.wbg-immo-single .wbg-immo__hero .wbg-immo__hero-image-skew > a > img,
body.wbg-immo-single .wbg-immo__hero .wbg-immo__hero-image-clip > img,
body.wbg-immo-single .wbg-immo__hero .wbg-immo__hero-image-clip picture img,
body.wbg-immo-single .wbg-immo__hero .wbg-immo__hero-image-clip figure img,
body.wbg-immo-single .wbg-immo__hero .wbg-immo__hero-image-clip > a > img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    left: 0 !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

/* Fallback: kein innerer Wrapper – Maske direkt am äußeren Container */
body.wbg-immo-single .wbg-immo__hero > .wbg-immo__hero-image:not(:has(.wbg-immo__hero-image-skew)):not(:has(.wbg-immo__hero-image-clip)),
body.wbg-immo-single .wbg-immo__hero > .brxe-image.bild-angewinkelt:not(:has(.wbg-immo__hero-image-skew)):not(:has(.wbg-immo__hero-image-clip)) {
    overflow: hidden !important;
    transform: none !important;
    -webkit-mask-image: var(--wbg-immo-hero-mask);
            mask-image: var(--wbg-immo-hero-mask);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}

body.wbg-immo-single .wbg-immo__hero > .wbg-immo__hero-image:not(:has(.wbg-immo__hero-image-skew)):not(:has(.wbg-immo__hero-image-clip)) > img,
body.wbg-immo-single .wbg-immo__hero > .brxe-image.bild-angewinkelt:not(:has(.wbg-immo__hero-image-skew)):not(:has(.wbg-immo__hero-image-clip)) > img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    left: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
}

/* Bricks rendert das Image-Element als <div> – globale bild-angewinkelt-Breite neutralisieren */
body.wbg-immo-single .wbg-immo__hero > .wbg-immo__hero-image.brxe-image.bild-angewinkelt:not(img),
body.wbg-immo-single .wbg-immo__hero > .brxe-image.bild-angewinkelt.wbg-immo__hero-image:not(img) {
    width: var(--wbg-immo-hero-image-w) !important;
    max-width: 100% !important;
    height: var(--wbg-immo-hero-image-h) !important;
}

.wbg-immo__title,
.brxe-heading.wbg-immo__title,
.wbg-immo__hero .wbg-immo__title,
.wbg-immo__hero .brxe-heading.wbg-immo__title,
.wbg-immo__hero .heading-wbg.wbg-immo__title {
    margin: 0 !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-immo-fs-title) !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: normal !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-transform: none !important;
}

.wbg-immo__address,
.brxe-text-basic.wbg-immo__address,
.brxe-text.wbg-immo__address,
.wbg-immo__address.text-wbg {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-immo-fs-small) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

.wbg-immo__hero .bild-angewinkelt,
.wbg-immo__hero .brxe-image.bild-angewinkelt,
.wbg-immo__hero-media,
.wbg-immo__hero > .wbg-immo__hero-media,
.wbg-immo__hero > .wbg-immo__hero-image,
.wbg-immo__hero > .wbg-bild-angewinkelt-wrap {
    justify-self: start;
    align-self: start;
    width: var(--wbg-immo-hero-image-w) !important;
    max-width: 100% !important;
    height: var(--wbg-immo-hero-image-h) !important;
}

/* --- Facts + Ausstattung + CTA ------------------------------------------ */
.wbg-immo__facts,
.brxe-block.wbg-immo__facts,
.brxe-div.wbg-immo__facts {
    display: grid !important;
    grid-template-columns: var(--wbg-immo-col-left) var(--wbg-immo-col-right);
    column-gap: var(--wbg-immo-col-gap);
    row-gap: clamp(20px, 2.5vw, 32px);
    align-items: start;
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.wbg-immo__facts-grid,
.brxe-block.wbg-immo__facts-grid,
.brxe-div.wbg-immo__facts-grid {
    display: grid !important;
    grid-template-columns: minmax(140px, 1fr) minmax(0, 1.15fr);
    gap: var(--wbg-immo-facts-row-gap) 24px;
    align-content: start;
}

.wbg-immo__facts-label,
.brxe-text-basic.wbg-immo__facts-label,
.wbg-immo__facts-grid .wbg-immo__facts-label {
    margin: 0 !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-immo-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

.wbg-immo__facts-label--head,
.brxe-text-basic.wbg-immo__facts-label--head {
    font-weight: 900 !important;
}

.wbg-immo__facts-value,
.brxe-text-basic.wbg-immo__facts-value,
.wbg-immo__facts-grid .wbg-immo__facts-value {
    margin: 0 !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-immo-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-align: right !important;
    justify-self: stretch;
}

.wbg-immo__facts-value--head,
.brxe-text-basic.wbg-immo__facts-value--head {
    font-weight: 900 !important;
}

.wbg-immo__facts-value--price,
.brxe-text-basic.wbg-immo__facts-value--price {
    font-size: var(--wbg-immo-fs-price) !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
}

.wbg-immo__facts-label--price,
.brxe-text-basic.wbg-immo__facts-label--price {
    font-size: var(--wbg-immo-fs-price) !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
}

.wbg-immo__facts-divider,
hr.wbg-immo__facts-divider,
.wbg-immo__facts-grid > hr.wbg-immo__facts-divider {
    grid-column: 1 / -1;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--wbg-gruengrau, #98967b);
    background: transparent;
}

.wbg-immo__facts-grid > .wbg-immo__facts-label--price,
.wbg-immo__facts-grid > .wbg-immo__facts-label.wbg-immo__facts-value--price {
    margin-top: 6px !important;
}

.wbg-immo__facts-ausstattung,
.brxe-block.wbg-immo__facts-ausstattung,
.brxe-div.wbg-immo__facts-ausstattung,
.wbg-immo__facts > .brxe-block:not(.wbg-immo__facts-grid):not(.wbg-immo__facts-cta),
.wbg-immo__facts > .brxe-div:not(.wbg-immo__facts-grid):not(.wbg-immo__facts-cta) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    gap: 10px;
    min-height: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--wbg-gruengrau, #98967b);
}

.wbg-immo__facts-ausstattung .heading-wbg,
.wbg-immo__facts-ausstattung .heading-wbg--h3,
.wbg-immo__facts-ausstattung .brxe-heading {
    margin: 0 0 8px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-immo-fs-body) !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

.wbg-immo__facts-grid,
.brxe-block.wbg-immo__facts-grid,
.brxe-div.wbg-immo__facts-grid {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.wbg-immo__facts > .brxe-block:not(.wbg-immo__facts-grid),
.wbg-immo__facts > .brxe-div:not(.wbg-immo__facts-grid) {
    grid-column: 2;
    grid-row: 1;
}

.wbg-immo__facts-cta,
.brxe-block.wbg-immo__facts-cta,
.brxe-div.wbg-immo__facts-cta,
.wbg-immo__facts > .brxe-text-link,
.wbg-immo__facts > .brxe-button {
    grid-column: 2;
    grid-row: 2;
    justify-self: start !important;
    align-self: start !important;
    width: auto !important;
    max-width: 100%;
    margin: 0 !important;
    padding-top: 20px;
    border-top: none !important;
    text-align: left;
}

.wbg-immo__facts > .brxe-button.wbg-cta-primary,
.wbg-immo__facts > .brxe-button,
.wbg-immo__facts > .brxe-button.bricks-button,
.wbg-immo__facts > .brxe-button.bricks-background-primary {
    display: inline-flex !important;
    flex: 0 0 auto !important;
}

.wbg-immo__ausstattung-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wbg-immo__facts-ausstattung ul,
.wbg-immo__facts-ausstattung ol {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wbg-immo__facts-ausstattung ul li,
.wbg-immo__facts-ausstattung ol li {
    margin: 0;
}

.wbg-immo__ausstattung-item {
    position: relative;
    margin: 0;
    padding-left: 28px;
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-immo-fs-body);
    font-weight: 400;
    line-height: 1.35;
    color: var(--wbg-gruen-dunkel, #19502f);
}

.wbg-immo__ausstattung-item::before {
    content: "";
    position: absolute;
    top: 0.35em;
    left: 0;
    width: 19px;
    height: 15px;
    background: var(--wbg-gruen, #009450);
    border-radius: 2px;
    transform: skewX(-17.5deg);
}

/* --- Galerie / Slider (Figma: 1018 × 569 px, Chevron-Pfeile außen) --- */
.wbg-immo__slider,
.brxe-block.wbg-immo__slider,
.brxe-div.wbg-immo__slider {
    position: relative;
    width: 100%;
    max-width: min(1018px, 100%);
    margin: var(--wbg-immo-slider-gap) auto 0;
    padding: 0 clamp(48px, 5vw, 64px);
    overflow: visible;
}

.wbg-immo__slider-viewport {
    overflow: hidden;
    border-radius: var(--wbg-radius, 10px);
}

.wbg-immo__slider--active .brxe-image-gallery,
.wbg-immo__slider--active .bricks-layout-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.wbg-immo__slider--active .brxe-image-gallery::-webkit-scrollbar,
.wbg-immo__slider--active .bricks-layout-wrapper::-webkit-scrollbar {
    display: none;
}

.wbg-immo__slider--active .bricks-layout-item {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    margin: 0 !important;
}

.wbg-immo__slider--active .bricks-layout-item figure,
.wbg-immo__slider--active .bricks-layout-item img {
    display: block;
    width: 100%;
    height: clamp(280px, 39.5vw, 569px);
    object-fit: cover;
    border-radius: var(--wbg-radius, 10px);
}

.wbg-immo__slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 40px;
    margin: 0;
    padding: 0;
    color: var(--wbg-gruen-dunkel, #19502f);
    background: transparent;
    border: none;
    border-radius: 0;
    transform: translateY(-50%);
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.wbg-immo__slider-arrow svg {
    display: block;
    transform: none;
}

.wbg-immo__slider-arrow--prev {
    left: 0;
}

.wbg-immo__slider-arrow--next {
    right: 0;
}

.wbg-immo__slider-arrow:hover,
.wbg-immo__slider-arrow:focus-visible {
    color: var(--wbg-gruen, #009450);
}

.wbg-immo__slider-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

/* --- Grundriss ------------------------------------------------------------ */
.wbg-immo__grundriss,
.brxe-block.wbg-immo__grundriss,
.brxe-div.wbg-immo__grundriss,
.brxe-shortcode.wbg-immo__grundriss,
.brxe-code.wbg-immo__grundriss,
.brxe-shortcode:has(> .wbg-immo__grundriss-link),
.brxe-code:has(> .wbg-immo__grundriss-link),
.wbg-immo__slider + .wbg-immo__grundriss,
.wbg-immo__slider + .brxe-shortcode:has(.wbg-immo__grundriss-link),
.wbg-immo__slider + .brxe-code:has(.wbg-immo__grundriss-link),
.wbg-immo__slider + .brxe-text-link.wbg-cta-primary,
.wbg-immo__slider + .brxe-button.wbg-cta-primary,
.wbg-immo > .brxe-text-link.wbg-immo__grundriss,
.wbg-immo > .brxe-button.wbg-immo__grundriss {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    max-width: min(1018px, 100%);
    margin: var(--wbg-immo-grundriss-gap-top) auto var(--wbg-immo-grundriss-gap-bottom) !important;
    padding: 0;
    text-align: center;
}

.wbg-immo__grundriss-link,
a.wbg-immo__grundriss-link.wbg-cta-primary {
    margin: 0 !important;
    align-self: center;
}

.brxe-button.wbg-immo__grundriss,
.brxe-text-link.wbg-immo__grundriss {
    display: flex !important;
    justify-content: center !important;
}

/* Slider ohne Grundriss: Abstand zur folgenden Sektion */
.wbg-immo__slider + .wbg-immo__energy,
.wbg-immo__slider + .brxe-block.wbg-immo__energy,
.wbg-immo__slider + .brxe-div.wbg-immo__energy {
    margin-top: var(--wbg-immo-slider-gap);
}

/* --- Energie -------------------------------------------------------------- */
.wbg-immo__energy,
.brxe-block.wbg-immo__energy,
.brxe-div.wbg-immo__energy {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px clamp(32px, 5vw, 80px);
    align-items: start;
    margin: 0 0 var(--wbg-immo-gap-lg);
}

.wbg-immo__energy-title,
.wbg-immo__energy > .brxe-heading,
.wbg-immo__energy > .heading-wbg,
.wbg-immo__energy .wbg-immo__energy-title {
    grid-column: 1 / -1;
    margin: 0 0 24px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-immo-fs-body) !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-transform: none !important;
}

.wbg-immo__energy-col,
.brxe-block.wbg-immo__energy-col,
.brxe-div.wbg-immo__energy-col {
    display: grid !important;
    grid-template-columns: minmax(120px, 1fr) minmax(0, 1.15fr);
    gap: 10px 24px;
    align-content: start;
}

.wbg-immo__energy .wbg-immo__facts-label,
.wbg-immo__energy .wbg-immo__facts-value {
    font-size: var(--wbg-immo-fs-body) !important;
}

.wbg-immo__energy .wbg-immo__facts-value,
.wbg-immo__energy-col .wbg-immo__facts-value {
    text-align: right !important;
    justify-self: stretch;
}

/* --- Inhalts-Sektionen (Shortcode) ---------------------------------------- */
.wbg-immo__sektionen,
.brxe-shortcode.wbg-immo__sektionen,
.brxe-code.wbg-immo__sektionen,
.brxe-shortcode:has(> .wbg-immo__sektionen) {
    display: block;
    width: 100%;
    max-width: 80%;
    margin: 0 0 var(--wbg-immo-gap-lg) !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

.wbg-immo__section {
    margin: 0 0 clamp(28px, 3.5vw, 40px);
}

.wbg-immo__section-title,
.wbg-immo__section .wbg-immo__section-title {
    margin: 0 0 12px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-immo-fs-body) !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-transform: none !important;
}

.wbg-immo__section-body,
.wbg-immo__section-body.text-wbg,
.wbg-immo__section .wbg-immo__section-body {
    margin: 0 !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-immo-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

.wbg-immo__section-body p {
    margin: 0 0 1em;
}

.wbg-immo__section-body p:last-child {
    margin-bottom: 0;
}

/* --- Karte ---------------------------------------------------------------- */
.wbg-immo__map-title,
.wbg-immo__map-heading,
.wbg-immo > .brxe-heading.wbg-immo__map-title {
    margin: 0 0 20px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-immo-fs-body) !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

.wbg-immo__map-wrap,
.brxe-shortcode.wbg-immo__map-wrap,
.brxe-code.wbg-immo__map-wrap {
    margin: 0 0 var(--wbg-immo-gap-lg);
}

.wbg-immo__map {
    width: 100%;
    min-height: clamp(280px, 30vw, 432px);
    border-radius: var(--wbg-radius, 10px);
    overflow: hidden;
    background: #e8ece9;
}

.wbg-immo__marker {
    background: transparent;
    border: none;
}

.wbg-immo__marker-svg {
    display: block;
    width: 28px;
    height: 40px;
    filter: drop-shadow(0 3px 6px rgba(25, 80, 47, 0.28));
}

.wbg-immo__map-popup-wrap .leaflet-popup-content-wrapper {
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(25, 80, 47, 0.18);
}

.wbg-immo__map-popup-wrap .leaflet-popup-content {
    margin: 16px 18px;
    min-width: 220px;
}

.wbg-immo__map-popup-title {
    margin: 0 0 12px;
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-immo-fs-body);
    font-weight: 700;
    line-height: 1.25;
    color: var(--wbg-gruen-dunkel, #19502f);
}

.wbg-immo__map-popup-link {
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-immo-fs-small);
    font-weight: 400;
    color: var(--wbg-gruengrau, #98967b) !important;
    text-decoration: underline;
}

.wbg-immo__map-popup-link:hover,
.wbg-immo__map-popup-link:focus-visible {
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

/* --- Bricks-Struktur: Overrides (höhere Spezifität) ----------------------- */
body.wbg-immo-single .wbg-immo .heading-wbg:not(.wbg-immo__title),
body.wbg-immo-single .wbg-immo .brxe-heading.heading-wbg:not(.wbg-immo__title) {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-immo-fs-body) !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    letter-spacing: normal !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-transform: none !important;
}

body.wbg-immo-single .wbg-immo .wbg-immo__section-title,
body.wbg-immo-single .wbg-immo .wbg-immo__section-title.heading-wbg,
body.wbg-immo-single .wbg-immo h2.wbg-immo__section-title {
    font-size: var(--wbg-immo-fs-body) !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    margin: 0 0 12px !important;
}

body.wbg-immo-single .wbg-immo .wbg-immo__section-body,
body.wbg-immo-single .wbg-immo .wbg-immo__section-body.text-wbg,
body.wbg-immo-single .wbg-immo .wbg-immo__section-body p {
    font-size: var(--wbg-immo-fs-body) !important;
    line-height: 1.2 !important;
}

body.wbg-immo-single .wbg-immo .wbg-immo__facts > .brxe-block:not(.wbg-immo__facts-grid) .brxe-heading,
body.wbg-immo-single .wbg-immo .wbg-immo__facts > .brxe-div:not(.wbg-immo__facts-grid) .brxe-heading {
    margin: 0 0 8px !important;
    font-size: var(--wbg-immo-fs-body) !important;
    font-weight: 900 !important;
}

body.wbg-immo-single .wbg-immo .wbg-immo__facts-value:empty {
    display: none;
}

body.wbg-immo-single .wbg-immo .wbg-immo__facts-label:has(+ .wbg-immo__facts-value:empty) {
    display: none;
}

body.wbg-immo-single .wbg-immo .wbg-immo__sektionen,
body.wbg-immo-single .wbg-immo .brxe-shortcode:has(> .wbg-immo__sektionen) {
    max-width: 80%;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Standort-Überschrift (letztes Heading vor Karte) */
body.wbg-immo-single .wbg-immo > .brxe-heading:last-of-type,
body.wbg-immo-single .wbg-immo .wbg-immo__map-title {
    margin: 0 0 20px !important;
    font-size: var(--wbg-immo-fs-body) !important;
    font-weight: 900 !important;
}

/* --- Tablet --------------------------------------------------------------- */
@media (max-width: 1024px) {
    .wbg-immo__hero,
    .brxe-block.wbg-immo__hero,
    .brxe-div.wbg-immo__hero {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "title"
            "image"
            "address" !important;
        gap: 16px 0 !important;
    }

    .wbg-immo__hero > .wbg-immo__title,
    .wbg-immo__hero > .brxe-heading.wbg-immo__title,
    .wbg-immo__hero > .wbg-immo__address,
    .wbg-immo__hero > .brxe-text-basic.wbg-immo__address,
    .wbg-immo__hero > img,
    .wbg-immo__hero > .brxe-image,
    .wbg-immo__hero > .wbg-bild-angewinkelt-wrap,
    .wbg-immo__hero > .wbg-immo__hero-image,
    .wbg-immo__hero > .wbg-immo__hero-media,
    .wbg-immo__hero .bild-angewinkelt,
    .wbg-immo__hero .brxe-image.bild-angewinkelt,
    .wbg-immo__hero > figure {
        grid-column: 1 !important;
        justify-self: stretch;
        max-width: 100% !important;
    }

    .wbg-immo__hero > .wbg-immo__title,
    .wbg-immo__hero > .brxe-heading.wbg-immo__title {
        grid-area: title;
        grid-row: 1;
        max-width: 100%;
    }

    .wbg-immo__hero > img,
    .wbg-immo__hero > .brxe-image,
    .wbg-immo__hero > .wbg-bild-angewinkelt-wrap,
    .wbg-immo__hero > .wbg-immo__hero-image,
    .wbg-immo__hero > .wbg-immo__hero-media,
    .wbg-immo__hero .bild-angewinkelt,
    .wbg-immo__hero .brxe-image.bild-angewinkelt,
    .wbg-immo__hero > figure {
        grid-area: image;
        grid-row: 2;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 534 / 305 !important;
    }

    body.wbg-immo-single .wbg-immo__hero > .wbg-immo__hero-image,
    body.wbg-immo-single .wbg-immo__hero > .wbg-bild-angewinkelt-wrap,
    body.wbg-immo-single .wbg-immo__hero > .wbg-immo__hero-media:not(img),
    body.wbg-immo-single .wbg-immo__hero > .brxe-image.bild-angewinkelt:not(img) {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 534 / 305 !important;
    }

    .wbg-immo__hero > .wbg-immo__address,
    .wbg-immo__hero > .brxe-text-basic.wbg-immo__address {
        grid-area: address;
        grid-row: 3;
        max-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .wbg-immo__facts,
    .brxe-block.wbg-immo__facts,
    .brxe-div.wbg-immo__facts {
        grid-template-columns: 1fr !important;
    }

    .wbg-immo__facts-grid,
    .wbg-immo__facts > .brxe-block:not(.wbg-immo__facts-grid),
    .wbg-immo__facts > .brxe-div:not(.wbg-immo__facts-grid),
    .wbg-immo__facts > .brxe-button,
    .wbg-immo__facts > .brxe-text-link {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .wbg-immo__facts-grid,
    .brxe-block.wbg-immo__facts-grid,
    .brxe-div.wbg-immo__facts-grid {
        grid-row: auto !important;
    }

    .wbg-immo__facts > .brxe-button,
    .wbg-immo__facts > .brxe-text-link {
        padding-top: 16px;
    }

    .wbg-immo__facts-ausstattung {
        border-bottom: none;
        padding-bottom: 0;
    }

    .wbg-immo__facts-cta {
        justify-content: flex-start;
        align-items: flex-start;
    }

    .wbg-immo__energy,
    .wbg-immo__energy.brxe-block,
    .wbg-immo__energy.brxe-div {
        grid-template-columns: 1fr !important;
    }

    .wbg-immo__facts-grid,
    .wbg-immo__energy-col {
        grid-template-columns: minmax(120px, 1fr) minmax(0, 1.2fr) !important;
        gap: var(--wbg-immo-facts-row-gap) 16px;
    }

    .wbg-immo__slider {
        padding: 0 36px;
    }

    body.wbg-immo-single .wbg-immo .wbg-immo__sektionen,
    body.wbg-immo-single .wbg-immo .brxe-shortcode:has(> .wbg-immo__sektionen) {
        max-width: 100%;
    }

    .wbg-immo__slider--active .bricks-layout-item figure,
    .wbg-immo__slider--active .bricks-layout-item img {
        height: clamp(220px, 62vw, 320px);
    }
}

/* --- Mobile --------------------------------------------------------------- */
@media (max-width: 640px) {
    .wbg-immo,
    .wbg-immo.wbg-immo,
    section.wbg-immo {
        --wbg-immo-hero-image-w: 100%;
        padding-top: 32px !important;
        padding-bottom: 48px !important;
    }

    .wbg-immo__hero,
    .brxe-block.wbg-immo__hero,
    .brxe-div.wbg-immo__hero {
        gap: 12px 0 !important;
        overflow-x: clip;
    }

    .wbg-immo__hero > .wbg-immo__title,
    .wbg-immo__hero > .brxe-heading.wbg-immo__title {
        margin-bottom: 12px !important;
    }

    .wbg-immo__hero > img,
    .wbg-immo__hero > .brxe-image,
    .wbg-immo__hero > .wbg-bild-angewinkelt-wrap,
    .wbg-immo__hero > .wbg-immo__hero-image,
    .wbg-immo__hero > .wbg-immo__hero-media,
    .wbg-immo__hero .bild-angewinkelt,
    .wbg-immo__hero .brxe-image.bild-angewinkelt,
    .wbg-immo__hero > figure,
    .wbg-immo__hero .bild-angewinkelt,
    .wbg-immo__hero .brxe-image.bild-angewinkelt,
    .wbg-immo__hero-media,
    .wbg-immo__hero > .wbg-immo__hero-media,
    .wbg-immo__hero > .wbg-immo__hero-image,
    .wbg-immo__hero > .wbg-bild-angewinkelt-wrap {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 534 / 305 !important;
        justify-self: stretch !important;
        margin-inline: 0;
        overflow: hidden !important;
    }

    body.wbg-immo-single .wbg-immo__hero > .wbg-immo__hero-image,
    body.wbg-immo-single .wbg-immo__hero > .wbg-bild-angewinkelt-wrap,
    body.wbg-immo-single .wbg-immo__hero > .wbg-immo__hero-media:not(img),
    body.wbg-immo-single .wbg-immo__hero > .brxe-image.bild-angewinkelt:not(img),
    body.wbg-immo-single .wbg-immo__hero > .wbg-immo__hero-image.brxe-image.bild-angewinkelt:not(img),
    body.wbg-immo-single .wbg-immo__hero > .brxe-image.bild-angewinkelt.wbg-immo__hero-image:not(img) {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        aspect-ratio: 534 / 305 !important;
        justify-self: stretch !important;
        margin-inline: 0 !important;
        overflow: hidden !important;
    }

    .wbg-immo__hero > .wbg-immo__address,
    .wbg-immo__hero > .brxe-text-basic.wbg-immo__address {
        width: 100% !important;
        max-width: 100% !important;
        justify-self: stretch !important;
        margin: 0 !important;
        margin-inline: 0;
        text-align: left;
    }

    .wbg-immo__facts-grid,
    .brxe-block.wbg-immo__facts-grid,
    .brxe-div.wbg-immo__facts-grid,
    .wbg-immo__energy-col,
    .brxe-block.wbg-immo__energy-col,
    .brxe-div.wbg-immo__energy-col {
        grid-template-columns: minmax(110px, 42%) minmax(0, 1fr) !important;
        column-gap: 12px;
        row-gap: var(--wbg-immo-facts-row-gap);
    }

    .wbg-immo__facts-label,
    .wbg-immo__facts-grid .wbg-immo__facts-label,
    .wbg-immo__energy .wbg-immo__facts-label {
        padding-top: 0;
    }

    .wbg-immo__facts-value,
    .wbg-immo__facts-grid .wbg-immo__facts-value,
    .wbg-immo__energy .wbg-immo__facts-value {
        padding-bottom: 0;
    }

    .wbg-immo__slider {
        padding: 0 28px;
    }
}


/* ==========================================================================
   Immobilien – Übersicht / Listing (Figma 1241:1761 – Häuser Overview)
   --------------------------------------------------------------------------
   Bricks-Seite (z. B. „Aktuelle Neubauprojekte“):

   Section                              → wbg-immo-list
     Block „Header“                     → wbg-immo-list__header
       Heading h1                       → wbg-immo-list__title  (+ heading-wbg)
       Basic Text                       → wbg-immo-list__intro   (+ intro-wbg)
     Block „Filter-Leiste“            → wbg-immo-list__filter-bar  (optional)
       Basic Text (optional)          → wbg-immo-list__sort-label  „Sortieren:“
       Filter – Auswählen             → wbg-immo-list__sort-filter
         Aktion: Sortieren | Ziel: Query Loop der Karte | Apply: Input
     Block / Grid                       → wbg-immo-list__grid
       Komponente/Block mit Query Loop  → wbg-immo-card
         CSS-Klassen an der Karte:      → wbg-immo-list__query wbg-immo-list__query--neubau
         Query: Post type immobilien
         (Kein separates „Query Loop Item“ nötig – Abfrageschleife
          direkt an der Karte aktivieren, ∞-Symbol im Structure-Panel)
         Block „Media“                  → wbg-immo-card__media
           Featured Image
           Code/Shortcode Badge         → [wbg_immo_card_badge]  (optional)
         Block „Body“                   → wbg-immo-card__body
           Heading / Post Title         → wbg-immo-card__title
           Block „Facts“                → wbg-immo-card__facts
             Block (Zeile)              → wbg-immo-card__facts-row
               Label                    → wbg-immo-card__facts-label
               Wert                     → wbg-immo-card__facts-value
             (3× wiederholen: Preis, Fläche, Zimmer)
           Text Link (Post URL)         → wbg-immo-card__link wbg-link--on-dark
             Text: Mehr erfahren →

   Scope-Klassen an der Karte mit Query Loop (∞) – immer mit wbg-immo-list__query kombinieren:
   - wbg-immo-list__query--neubau            alle Immobilien (ohne Typ-Filter)
   - wbg-immo-list__query--eigentumswohnung  nur Typ „Eigentumswohnung“
   - wbg-immo-list__query--haeuser           Haus, Townhaus, Doppelhaushälfte, Reihenhaus
   ========================================================================== */

.wbg-immo-list,
.wbg-immo-list.wbg-immo-list,
section.wbg-immo-list,
body.wbg-immo-list-page .wbg-immo-list {
    --wbg-immo-list-inner: min(1230px, 100%);
    --wbg-immo-list-pad-x: clamp(20px, 5.5vw, 104px);
    --wbg-immo-list-card-w: min(348px, 100%);
    --wbg-immo-list-gap: clamp(24px, 3vw, 32px);
    --wbg-immo-list-grid-gap: clamp(24px, 4vw, 75px);

    padding: clamp(48px, 6vw, 80px) var(--wbg-immo-list-pad-x) clamp(64px, 8vw, 96px);
    background-color: #ffffff;
    color: var(--wbg-gruen-dunkel, #19502f);
    overflow-x: clip;
    text-align: left !important;
}

/* Bricks-Sections sind Flex-Container – stretch, damit margin:auto die Innenbreite zentriert */
section.wbg-immo-list.brxe-section,
.brxe-section.wbg-immo-list {
    align-items: stretch !important;
}

.wbg-immo-list__header,
.brxe-block.wbg-immo-list__header,
.brxe-div.wbg-immo-list__header {
    max-width: var(--wbg-immo-list-inner);
    margin: 0 auto clamp(32px, 4vw, 48px);
}

.wbg-immo-list__title,
.brxe-heading.wbg-immo-list__title,
.wbg-immo-list .heading-wbg.wbg-immo-list__title {
    max-width: 806px;
    margin: 0 0 20px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-section-title) !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-align: left;
}

.wbg-immo-list__intro,
.brxe-text-basic.wbg-immo-list__intro,
.brxe-text.wbg-immo-list__intro,
.wbg-immo-list .intro-wbg.wbg-immo-list__intro {
    max-width: 806px;
    margin: 0 !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-align: left;
}

.wbg-immo-list__toolbar,
.wbg-immo-list__filter-bar,
.brxe-shortcode:has(> .wbg-immo-list__toolbar),
.brxe-code:has(> .wbg-immo-list__toolbar) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px 16px;
    width: 100%;
    max-width: var(--wbg-immo-list-inner);
    margin: 0 auto 30px !important;
    padding: 0 !important;
    text-align: left !important;
}

body.wbg-immo-list-page .brxe-filter-select:not(select),
body.wbg-immo-list-page select.brxe-filter-select {
    display: block !important;
    width: min(285px, 100%) !important;
    max-width: 285px !important;
    margin: 0 auto 30px max(0px, calc((100% - var(--wbg-immo-list-inner)) / 2)) !important;
    float: none !important;
}

body.wbg-immo-list-page .brxe-block:has(.brxe-filter-select),
body.wbg-immo-list-page .brxe-div:has(.brxe-filter-select) {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: var(--wbg-immo-list-inner) !important;
    margin: 0 auto 30px !important;
    text-align: left !important;
}

.wbg-immo-list__filter-bar > .brxe-text-basic,
.wbg-immo-list__filter-bar > .brxe-text,
.wbg-immo-list__filter-bar > .brxe-filter-select,
.wbg-immo-list__filter-bar > .brxe-div,
.wbg-immo-list__filter-bar > .brxe-block {
    margin: 0 !important;
}

/* Bricks Filter direkt in der Section (ohne filter-bar-Wrapper) */
.wbg-immo-list > .brxe-filter-select:not(select) {
    display: block !important;
    width: min(285px, 100%) !important;
    max-width: 285px !important;
    margin: 0 auto 30px max(0px, calc((100% - var(--wbg-immo-list-inner)) / 2)) !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.wbg-immo-list > select.brxe-filter-select,
section.wbg-immo-list > select.brxe-filter-select.wbg-immo-list__sort-filter {
    display: block !important;
    width: min(285px, 100%) !important;
    max-width: 285px !important;
    margin: 0 auto 30px max(0px, calc((100% - var(--wbg-immo-list-inner)) / 2)) !important;
    align-self: auto !important;
}

/* Wrapper-Div um das Select – transparent, bündig mit Header-Innenbreite */
.wbg-immo-list .brxe-filter-select:not(select),
.wbg-immo-list__sort-control {
    position: relative;
    display: block !important;
    width: min(285px, 100%) !important;
    max-width: 285px !important;
    flex: 0 0 auto;
    margin: 0 auto 30px max(0px, calc((100% - var(--wbg-immo-list-inner)) / 2)) !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    float: none !important;
}

.wbg-immo-list .brxe-block:has(> .brxe-filter-select),
.wbg-immo-list .brxe-div:has(> .brxe-filter-select),
.wbg-immo-list .brxe-block:has(> select.brxe-filter-select),
.wbg-immo-list .brxe-div:has(> select.brxe-filter-select) {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center;
    gap: 12px 16px;
    width: 100% !important;
    max-width: var(--wbg-immo-list-inner) !important;
    margin: 0 auto 30px !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Select: identisch zu .wbg-immo-list__sort-select */
.wbg-immo-list select.brxe-filter-select,
.wbg-immo-list .brxe-filter-select select,
.wbg-immo-list__sort-filter select,
.wbg-immo-list__sort-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: block !important;
    width: 100% !important;
    min-height: 37px;
    margin: 0 !important;
    padding: 8px 40px 8px 16px !important;
    font-family: "Lato", sans-serif !important;
    font-size: clamp(0.875rem, 0.84rem + 0.12vw, 1rem) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
    background-color: var(--wbg-gruen-dunkel, #19502f) !important;
    border: none !important;
    border-radius: var(--wbg-radius, 10px) !important;
    box-shadow: none !important;
    cursor: pointer;
}

/* Select ist selbst das Bricks-Element (ohne Wrapper-Div) */
.wbg-immo-list > select.brxe-filter-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' d='M1 3l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 10px 10px !important;
}

.wbg-immo-list .brxe-filter-select:not(select)::after,
.wbg-immo-list__sort-control::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
    z-index: 1;
}

.wbg-immo-list__sort-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px 16px;
    margin: 0;
}

.wbg-immo-list__sort-label,
.brxe-text-basic.wbg-immo-list__sort-label,
.brxe-text.wbg-immo-list__sort-label {
    margin: 0;
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-fs-body);
    font-weight: 600;
    line-height: 1.35;
    color: var(--wbg-gruen-dunkel, #19502f);
    white-space: nowrap;
}

.wbg-immo-list__sort-control {
    position: relative;
    min-width: min(100%, 285px);
}

.wbg-immo-list__sort-select {
    appearance: none;
    width: 100%;
    min-height: 37px;
    margin: 0;
    padding: 8px 40px 8px 16px;
    font-family: "Lato", sans-serif;
    font-size: clamp(0.875rem, 0.84rem + 0.12vw, 1rem);
    font-weight: 600;
    line-height: 1.25;
    color: #ffffff;
    background-color: var(--wbg-gruen-dunkel, #19502f);
    border: none;
    border-radius: var(--wbg-radius, 10px);
    cursor: pointer;
}

.wbg-immo-list__sort-control::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

.wbg-immo-list__grid,
.brxe-block.wbg-immo-list__grid,
.brxe-div.wbg-immo-list__grid,
.wbg-immo-list > .brxe-container:has(.wbg-immo-card),
.wbg-immo-list .brxe-block:has(> .wbg-immo-card),
section.wbg-immo-list > .wbg-immo-list__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, var(--wbg-immo-list-card-w)));
    justify-content: start;
    align-items: stretch;
    gap: var(--wbg-immo-list-grid-gap);
    width: 100%;
    max-width: var(--wbg-immo-list-inner);
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

.wbg-immo-list__grid > .brx-query-trail {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.wbg-immo-list__grid > .wbg-immo-card,
.wbg-immo-list__grid > .brxe-block.wbg-immo-card,
.wbg-immo-list__grid > .brxe-div.wbg-immo-card,
.wbg-immo-list__grid > .brx-query-trail + .wbg-immo-card,
.wbg-immo-list__grid .brx-query-loop-item {
    width: 100%;
    max-width: var(--wbg-immo-list-card-w);
    justify-self: center;
}

/* --- Karte --------------------------------------------------------------- */
.wbg-immo-card,
.brxe-block.wbg-immo-card,
.brxe-div.wbg-immo-card,
.wbg-immo-list__grid .brx-query-loop-item > .wbg-immo-card,
.wbg-immo-list__grid .brx-query-loop-item > .brxe-block.wbg-immo-card,
.wbg-immo-list__grid > .wbg-immo-card,
.wbg-immo-list__grid > .brxe-block.wbg-immo-card,
.wbg-immo-list__grid > .brxe-div.wbg-immo-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    height: 100%;
    min-height: 543px;
    margin: 0;
    background-color: var(--wbg-gruen-dunkel, #19502f);
    border-radius: var(--wbg-radius, 10px);
    overflow: hidden;
    color: var(--wbg-neutral-50, #fdfcfb);
}

.wbg-immo-card__media,
.brxe-block.wbg-immo-card__media,
.brxe-div.wbg-immo-card__media,
.wbg-immo-card .wbg-immo-card__media {
    position: relative;
    display: block !important;
    width: 100%;
    flex: 0 0 auto;
    overflow: hidden !important;
    aspect-ratio: 348 / 192;
    isolation: isolate;
}

.wbg-immo-card__media::before {
    content: none;
    display: none;
}

.wbg-immo-card__media > .brxe-image:not(img),
.wbg-immo-card__media > figure,
.wbg-immo-card__media > picture,
.wbg-immo-card__media > a:has(img:not(.wbg-immo-card__badge-icon)),
.wbg-immo-card__media.brxe-image:not(img),
.wbg-immo-card__media .brxe-image:not(.wbg-immo-card__badge):not(img),
.wbg-immo-card__media figure:not(.wbg-immo-card__badge),
.wbg-immo-card > .brxe-image:not(.wbg-immo-card__badge):not(img),
.wbg-immo-card > figure:not(.wbg-immo-card__body) {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 1;
}

.wbg-immo-card__media > .brxe-image:not(img)::before,
.wbg-immo-card__media > figure::before,
.wbg-immo-card > .brxe-image:not(.wbg-immo-card__badge):not(img)::before,
.wbg-immo-card > figure:not(.wbg-immo-card__body)::before {
    content: none;
    display: none;
}

.wbg-immo-card__media > img.brxe-image,
.wbg-immo-card__media img:not(.wbg-immo-card__badge-icon),
.wbg-immo-card__media .brxe-image img,
.wbg-immo-card__media figure img,
.wbg-immo-card > .brxe-image:not(.wbg-immo-card__badge) img,
.wbg-immo-card > figure:not(.wbg-immo-card__body) img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    border-top-left-radius: var(--wbg-radius, 10px);
    border-top-right-radius: var(--wbg-radius, 10px);
}

/* bild-angewinkelt in Listing-Karten deaktivieren (normales Kartenfoto) */
.wbg-immo-card .bild-angewinkelt,
.wbg-immo-card__media.bild-angewinkelt,
.wbg-immo-card__media .bild-angewinkelt,
.wbg-immo-card .brxe-image.bild-angewinkelt,
.wbg-immo-card__media .brxe-image.bild-angewinkelt {
    transform: none !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
}

.wbg-immo-card .bild-angewinkelt img,
.wbg-immo-card__media.bild-angewinkelt img,
.wbg-immo-card__media .bild-angewinkelt img {
    transform: none !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.wbg-immo-card__badge,
.wbg-immo-card__media > .wbg-immo-card__badge,
.wbg-immo-card__media > .brxe-code:has(.wbg-immo-card__badge),
.wbg-immo-card__media > .brxe-shortcode:has(.wbg-immo-card__badge) {
    position: absolute;
    top: 25px;
    left: 0;
    z-index: 3;
    margin: 0;
}

.wbg-immo-card__badge.wbg-tag-slanted,
.wbg-immo-card .wbg-tag-slanted.wbg-immo-card__badge {
    background-color: var(--wbg-gruen, #009450) !important;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    font-size: clamp(1rem, 0.95rem + 0.15vw, 1.3125rem) !important;
    font-weight: 400 !important;
    padding: 8px 24px 8px 18px;
}

.wbg-immo-card__media > .brxe-code:empty,
.wbg-immo-card__media > .brxe-shortcode:empty {
    display: none !important;
}

.wbg-immo-card__body,
.brxe-block.wbg-immo-card__body,
.brxe-div.wbg-immo-card__body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto;
    gap: 16px;
    padding: 24px 32px 32px;
    min-height: 0;
    height: 100%;
}

.wbg-immo-card__body > .brxe-text-basic,
.wbg-immo-card__body > .brxe-text,
.wbg-immo-card__body > .brxe-heading {
    align-self: stretch;
    width: 100% !important;
    max-width: 100%;
}

.wbg-immo-card__title,
.brxe-heading.wbg-immo-card__title,
.wbg-immo-card .wbg-immo-card__title {
    flex: 0 0 auto;
    margin: 0 !important;
    font-family: "Lato", sans-serif !important;
    font-size: clamp(1.125rem, 1.05rem + 0.25vw, 1.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
}

.wbg-immo-card__facts,
.brxe-block.wbg-immo-card__facts,
.brxe-div.wbg-immo-card__facts {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
    align-content: start;
    flex: 0 0 auto;
    margin: 0;
}

/* Variante A: Label/Wert direkt als Geschwister im Facts-Block */
.wbg-immo-card__facts > .brxe-text-basic,
.wbg-immo-card__facts > .brxe-text,
.wbg-immo-card__facts > .brxe-heading {
    display: contents;
}

/* Variante B: je Zeile ein Block (.wbg-immo-card__facts-row) */
.wbg-immo-card__facts:has(> .wbg-immo-card__facts-row),
.wbg-immo-card__facts:has(> .brxe-block.wbg-immo-card__facts-row),
.wbg-immo-card__facts:has(> .brxe-div.wbg-immo-card__facts-row) {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.wbg-immo-card__facts-row,
.brxe-block.wbg-immo-card__facts-row,
.brxe-div.wbg-immo-card__facts-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
    width: 100%;
    flex: 0 0 auto;
}

.wbg-immo-card__facts-row > .brxe-text-basic,
.wbg-immo-card__facts-row > .brxe-text,
.wbg-immo-card__facts-row > .brxe-heading,
.wbg-immo-card__facts-row > .brxe-block,
.wbg-immo-card__facts-row > .brxe-div {
    display: block !important;
    min-width: 0;
}

.wbg-immo-card__facts-row > .wbg-immo-card__facts-label,
.wbg-immo-card__facts-row > .brxe-text-basic.wbg-immo-card__facts-label,
.wbg-immo-card__facts-row > .brxe-text.wbg-immo-card__facts-label {
    grid-column: 1;
    justify-self: start;
    text-align: left !important;
}

.wbg-immo-card__facts-row > .wbg-immo-card__facts-value,
.wbg-immo-card__facts-row > .brxe-text-basic.wbg-immo-card__facts-value,
.wbg-immo-card__facts-row > .brxe-text.wbg-immo-card__facts-value {
    grid-column: 2;
    justify-self: end;
    text-align: right !important;
}

/* Ein Wrapper-Block ohne facts-row (häufig in Komponenten) */
.wbg-immo-card__facts > .brxe-block:not(.wbg-immo-card__facts-row),
.wbg-immo-card__facts > .brxe-div:not(.wbg-immo-card__facts-row) {
    display: contents;
}

.wbg-immo-card__facts-label,
.wbg-immo-card__facts .wbg-immo-card__facts-label,
.wbg-immo-card__facts-row .wbg-immo-card__facts-label {
    font-family: "Lato", sans-serif !important;
    font-size: clamp(1rem, 0.95rem + 0.15vw, 1.3125rem) !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
}

.wbg-immo-card__facts-value,
.wbg-immo-card__facts .wbg-immo-card__facts-value,
.wbg-immo-card__facts-row .wbg-immo-card__facts-value {
    font-family: "Lato", sans-serif !important;
    font-size: clamp(1rem, 0.95rem + 0.15vw, 1.3125rem) !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-align: right !important;
    justify-self: end;
}

.wbg-immo-card__body > .brxe-text-basic:has(.wbg-immo-card__facts-line),
.wbg-immo-card__body > .brxe-text:has(.wbg-immo-card__facts-line),
.wbg-immo-card__facts > .brxe-text-basic:has(.wbg-immo-card__facts-line),
.wbg-immo-card__facts > .brxe-text:has(.wbg-immo-card__facts-line),
.wbg-immo-card__facts .brxe-text-basic:has(.wbg-immo-card__facts-line),
.wbg-immo-card__facts .brxe-text:has(.wbg-immo-card__facts-line),
.wbg-immo-card__body .brxe-text-basic:has(.wbg-immo-card__facts-line),
.wbg-immo-card__body .brxe-text:has(.wbg-immo-card__facts-line) {
    display: block !important;
    width: 100% !important;
    max-width: 100%;
    margin: 0 !important;
    grid-column: 1 / -1;
}

.wbg-immo-card__body > .brxe-text-basic:has(.wbg-immo-card__facts-line) p,
.wbg-immo-card__body > .brxe-text:has(.wbg-immo-card__facts-line) p,
.wbg-immo-card__facts > .brxe-text-basic:has(.wbg-immo-card__facts-line) p,
.wbg-immo-card__facts > .brxe-text:has(.wbg-immo-card__facts-line) p,
.wbg-immo-card__facts .brxe-text-basic:has(.wbg-immo-card__facts-line) p,
.wbg-immo-card__facts .brxe-text:has(.wbg-immo-card__facts-line) p,
.wbg-immo-card__body .brxe-text-basic:has(.wbg-immo-card__facts-line) p,
.wbg-immo-card__body .brxe-text:has(.wbg-immo-card__facts-line) p {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

.wbg-immo-card__facts:has(.wbg-immo-card__facts-line) {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
}

.wbg-immo-card__body > .brxe-text-basic.wbg-immo-card__fact-text,
.wbg-immo-card__body > .brxe-text.wbg-immo-card__fact-text,
.wbg-immo-card__facts .brxe-text-basic.wbg-immo-card__fact-text,
.wbg-immo-card__facts .brxe-text.wbg-immo-card__fact-text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    align-self: stretch !important;
}

.wbg-immo-card__facts-line,
.brxe-text-basic .wbg-immo-card__facts-line,
.brxe-text .wbg-immo-card__facts-line,
.wbg-immo-card__body .wbg-immo-card__facts-line,
.wbg-immo-card__facts .wbg-immo-card__facts-line,
.wbg-immo-card .wbg-immo-card__facts-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: baseline;
    column-gap: 16px;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

.wbg-immo-card__facts-line .wbg-immo-card__facts-label {
    grid-column: 1;
    min-width: 0;
    text-align: left !important;
}

.wbg-immo-card__facts-line .wbg-immo-card__facts-value {
    grid-column: 2;
    justify-self: end;
    text-align: right !important;
    white-space: nowrap;
}

.wbg-immo-card__link,
.brxe-text-link.wbg-immo-card__link,
a.wbg-immo-card__link,
.wbg-immo-card__body > .brxe-text-link.wbg-immo-card__link,
.wbg-immo-card__facts > .wbg-immo-card__link,
.wbg-immo-card__facts > .brxe-text-link.wbg-immo-card__link,
.wbg-immo-card__facts > a.wbg-immo-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto !important;
    flex: 0 0 auto;
    align-self: flex-start;
    padding-top: 8px;
    font-family: "Lato", sans-serif !important;
    font-size: clamp(1.125rem, 1.05rem + 0.25vw, 1.3125rem) !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: none !important;
    transition: color 0.2s ease, text-decoration-color 0.2s ease, transform 0.2s ease;
}

.wbg-immo-card__link:hover,
.wbg-immo-card__link:focus-visible,
.brxe-text-link.wbg-immo-card__link:hover,
.brxe-text-link.wbg-immo-card__link:focus-visible,
a.wbg-immo-card__link:hover,
a.wbg-immo-card__link:focus-visible {
    color: var(--wbg-gruen-akzent, #bce037) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    transform: translateY(-2px);
}

/* Bricks Query Loop – Grid-Wrapper neutralisieren */
.wbg-immo-list__grid.brxe-block,
.wbg-immo-list__grid.brxe-div {
    display: grid !important;
}

.wbg-immo-list__grid > .brxe-block:not(.wbg-immo-card):not(.brx-query-trail),
.wbg-immo-list__grid > .brxe-div:not(.wbg-immo-card):not(.brx-query-trail) {
    display: contents;
}

@media (max-width: 1024px) and (min-width: 768px) {
    .wbg-immo-list__grid,
    .brxe-block.wbg-immo-list__grid,
    .brxe-div.wbg-immo-list__grid {
        grid-template-columns: repeat(2, minmax(0, var(--wbg-immo-list-card-w)));
        --wbg-immo-list-grid-gap: clamp(20px, 3vw, 32px);
    }
}

@media (max-width: 1024px) {
    .wbg-immo-list__toolbar,
    .wbg-immo-list__filter-bar {
        justify-content: flex-start;
    }

    .wbg-immo-list__sort-form {
        width: 100%;
        justify-content: flex-start;
    }

    .wbg-immo-list > .brxe-filter-select:not(select),
    .wbg-immo-list > select.brxe-filter-select,
    .wbg-immo-list .brxe-filter-select:not(select) {
        width: 100% !important;
        max-width: 285px !important;
    }

    .wbg-immo-list__sort-control {
        flex: 1 1 220px;
        max-width: 285px;
    }
}

@media (max-width: 767px) {
    .wbg-immo-list,
    section.wbg-immo-list {
        padding-top: 40px;
        padding-bottom: 56px;
    }

    .wbg-immo-list__grid,
    .wbg-immo-list__grid.brx-grid,
    .brxe-block.brx-grid.wbg-immo-list__grid,
    .brxe-block.wbg-immo-list__grid,
    .brxe-div.wbg-immo-list__grid,
    section.wbg-immo-list > .wbg-immo-list__grid,
    section.wbg-immo-list > .brx-grid.wbg-immo-list__grid {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        --wbg-immo-list-card-w: 100%;
        --wbg-immo-list-grid-gap: clamp(24px, 5vw, 32px);
        gap: var(--wbg-immo-list-grid-gap);
    }

    .wbg-immo-list__grid > .wbg-immo-card,
    .wbg-immo-list__grid > .brxe-block.wbg-immo-card,
    .wbg-immo-list__grid > .brxe-div.wbg-immo-card,
    .wbg-immo-list__grid > .brxe-block.wbg-immo-list__query,
    .wbg-immo-list__grid > .brxe-block.wbg-immo-card.wbg-immo-list__query,
    .wbg-immo-list__grid .brx-query-loop-item {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        justify-self: stretch !important;
    }

    .wbg-immo-card,
    .brxe-block.wbg-immo-card,
    .brxe-div.wbg-immo-card,
    .wbg-immo-list__grid > .brxe-block.wbg-immo-card,
    .wbg-immo-list__grid > .brxe-div.wbg-immo-card {
        min-height: 0;
        height: auto;
    }

    .wbg-immo-list__sort-control,
    .wbg-immo-list > .brxe-filter-select:not(select),
    .wbg-immo-list > select.brxe-filter-select {
        max-width: none;
        width: 100% !important;
    }
}


/* ==========================================================================
   Bricks – Globale Hilfsklassen (Global Classes)
   --------------------------------------------------------------------------
   Klassen werden automatisch in Bricks registriert (inc/wbg-bricks-global-classes.php).
   Alternativ: bricks/wbg-global-classes.json im Global Class Manager importieren.
   Styling liegt hier im Child Theme – in Bricks keine Styles duplizieren.

   Marken:        brand-wbg, brand-norima
   Typo wbg:      heading-wbg, heading-wbg--h3, intro-wbg, text-wbg
   Typo norima:   heading-norima, heading-norima--h3, intro-norima, text-norima
   Links:         wbg-link, wbg-link--on-dark, wbg-link--norima
   CTAs:          wbg-cta-primary, wbg-cta-secondary
   Komponenten:   wbg-accordion, wbg-tabs
   Signatur:      bild-angewinkelt, wbg-card-image-slanted, wbg-tag-slanted,
                  wbg-button-slanted, wbg-icon-badge-slanted
   ========================================================================== */

/* --- Marken-Kontext (optional am Section-Block) ------------------------- */
.brand-wbg {
    --wbg-brand-heading: var(--wbg-gruen-dunkel, #19502f);
    --wbg-brand-body: var(--wbg-gruen-dunkel, #19502f);
    --wbg-brand-link: var(--wbg-gruen, #009450);
}

.brand-norima {
    --wbg-brand-heading: var(--wbg-norima, #eab90c);
    --wbg-brand-body: var(--wbg-text, #4a4949);
    --wbg-brand-link: var(--wbg-gruen-dunkel, #19502f);
}

/* --- Typografie: wbg ---------------------------------------------------- */
.heading-wbg,
.brxe-heading.heading-wbg,
:is(h1, h2, h3, h4, h5, h6).heading-wbg {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-section-title) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: var(--wbg-brand-heading, var(--wbg-gruen-dunkel, #19502f)) !important;
    text-align: inherit;
    margin: 0 0 16px;
}

.heading-wbg--h3,
.brxe-heading.heading-wbg--h3,
:is(h3, h4).heading-wbg--h3 {
    font-size: var(--wbg-fs-h3) !important;
    font-weight: 700 !important;
    margin-bottom: 12px;
}

.intro-wbg,
.brxe-text-basic.intro-wbg,
.brxe-text.intro-wbg,
.intro-wbg p {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--wbg-brand-body, var(--wbg-gruen-dunkel, #19502f)) !important;
    margin: 0;
}

.text-wbg,
.brxe-text-basic.text-wbg,
.brxe-text.text-wbg,
.text-wbg p {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--wbg-brand-body, var(--wbg-gruen-dunkel, #19502f)) !important;
    margin: 0 0 1em;
}

.text-wbg:last-child,
.text-wbg p:last-child {
    margin-bottom: 0;
}

/* --- Typografie: norima ------------------------------------------------- */
.heading-norima,
.brxe-heading.heading-norima,
:is(h1, h2, h3, h4, h5, h6).heading-norima {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-section-title) !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    color: var(--wbg-brand-heading, var(--wbg-norima, #eab90c)) !important;
    text-align: inherit;
    margin: 0 0 16px;
}

.heading-norima--h3,
.brxe-heading.heading-norima--h3,
:is(h3, h4).heading-norima--h3 {
    font-size: var(--wbg-fs-h3) !important;
    font-weight: 600 !important;
    margin-bottom: 12px;
}

.intro-norima,
.brxe-text-basic.intro-norima,
.brxe-text.intro-norima,
.intro-norima p {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--wbg-brand-body, var(--wbg-text, #4a4949)) !important;
    margin: 0;
}

.text-norima,
.brxe-text-basic.text-norima,
.brxe-text.text-norima,
.text-norima p {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--wbg-brand-body, var(--wbg-text, #4a4949)) !important;
    margin: 0 0 1em;
}

.text-norima:last-child,
.text-norima p:last-child {
    margin-bottom: 0;
}

/* Section-Kontext: Kinder erben Markenfarben mit generischen Klassen */
.brand-wbg .heading-wbg,
.brand-wbg .heading-wbg--h3,
.brand-wbg .intro-wbg,
.brand-wbg .text-wbg {
    --wbg-brand-heading: var(--wbg-gruen-dunkel, #19502f);
    --wbg-brand-body: var(--wbg-gruen-dunkel, #19502f);
}

.brand-norima .heading-norima,
.brand-norima .heading-norima--h3,
.brand-norima .intro-norima,
.brand-norima .text-norima {
    --wbg-brand-heading: var(--wbg-norima, #eab90c);
    --wbg-brand-body: var(--wbg-text, #4a4949);
}

/* --- Textlinks ---------------------------------------------------------- */
.wbg-link,
a.wbg-link,
.brxe-text-link.wbg-link {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-link) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: var(--wbg-gruen, #009450) !important;
    text-decoration: underline !important;
    text-decoration-color: currentColor !important;
    text-underline-offset: 3px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.wbg-link:hover,
.wbg-link:focus-visible {
    opacity: 0.85;
}

.wbg-link--on-dark,
a.wbg-link--on-dark,
.brxe-text-link.wbg-link--on-dark {
    color: var(--wbg-neutral-50, #fdfcfb) !important;
}

.wbg-link--norima,
a.wbg-link--norima,
.brxe-text-link.wbg-link--norima {
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

/* --- CTAs (Textlink oder Button) ---------------------------------------- */
.wbg-cta-primary,
a.wbg-cta-primary,
.brxe-button.wbg-cta-primary,
.brxe-text-link.wbg-cta-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-cta) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: none !important;
    white-space: nowrap;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    isolation: isolate;
    overflow: visible !important;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.wbg-cta-primary::before,
a.wbg-cta-primary::before,
.brxe-button.wbg-cta-primary::before,
.brxe-text-link.wbg-cta-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--wbg-gruen, #009450) 73%,
        var(--wbg-gruen-akzent, #bce037) 100%
    );
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
}

.wbg-cta-secondary,
a.wbg-cta-secondary,
.brxe-button.wbg-cta-secondary,
.brxe-text-link.wbg-cta-secondary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-cta) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: none !important;
    white-space: nowrap;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    isolation: isolate;
    overflow: visible !important;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.wbg-cta-secondary::before,
a.wbg-cta-secondary::before,
.brxe-button.wbg-cta-secondary::before,
.brxe-text-link.wbg-cta-secondary::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--wbg-gruen-dunkel, #19502f);
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
}

/* Bricks-Button: natives Grün/Styles vom Element entfernen */
.brxe-button.wbg-cta-primary > a,
.brxe-button.wbg-cta-primary > button,
.brxe-button.wbg-cta-primary .brxe-button-inner,
.brxe-button.wbg-cta-secondary > a,
.brxe-button.wbg-cta-secondary > button,
.brxe-button.wbg-cta-secondary .brxe-button-inner {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* Bricks-Global-Class-Layers (::after) unterdrücken */
.wbg-cta-primary::after,
.brxe-button.wbg-cta-primary::after,
.wbg-cta-secondary::after,
.brxe-button.wbg-cta-secondary::after {
    content: none !important;
    display: none !important;
}

.wbg-cta-primary:hover,
.wbg-cta-primary:focus-visible,
.wbg-cta-secondary:hover,
.wbg-cta-secondary:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* --- Akkordeon (Bricks: Verschachtelbar empfohlen) ---------------------- */
/* Standard: dunkelgrüner Hintergrund + weiße Schrift (wie FAQ-Sektion)     */
.wbg-accordion,
.wbg-accordion--dark,
.brxe-accordion-nested.wbg-accordion,
.brxe-accordion-nested.wbg-accordion--dark,
.wbg-faq__accordion,
.brxe-accordion-nested.wbg-faq__accordion,
.wbg-faq__group > .brxe-accordion-nested,
.wbg-faq__group > .wbg-faq__accordion {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: var(--wbg-gruen-dunkel, #19502f) !important;
    border: 0 !important;
    border-radius: 5px !important;
    overflow: hidden !important;
}

.wbg-accordion .accordion-item,
.wbg-accordion > .brxe-block,
.wbg-accordion > .brxe-div,
.wbg-faq__accordion .accordion-item,
.wbg-faq__accordion > .brxe-block,
.wbg-faq__accordion > .brxe-div {
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wbg-faq__accordion .accordion-item.is-hidden {
    display: none !important;
}

.wbg-accordion .accordion-title-wrapper,
.wbg-accordion .accordion-title,
.wbg-accordion .brxe-heading.accordion-title,
.wbg-faq__accordion .accordion-title-wrapper,
.wbg-faq__accordion .accordion-title,
.wbg-faq__accordion .brxe-heading.accordion-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: var(--wbg-text-light, #ffffff) !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 0 !important;
    cursor: pointer;
    box-shadow: none !important;
}

.wbg-accordion .accordion-item:last-child .accordion-title-wrapper,
.wbg-accordion .accordion-item:last-child > .accordion-title-wrapper,
.wbg-faq__accordion .accordion-item:last-child .accordion-title-wrapper,
.wbg-faq__accordion .accordion-item:last-child > .accordion-title-wrapper {
    border-bottom: none !important;
}

.wbg-accordion .accordion-item.brx-open .accordion-title-wrapper,
.wbg-faq__accordion .accordion-item.brx-open .accordion-title-wrapper {
    border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}

.wbg-accordion .accordion-title-wrapper .brxe-heading,
.wbg-accordion .accordion-title-wrapper :is(h1, h2, h3, h4, h5, h6),
.wbg-accordion .accordion-title .brxe-text-basic,
.wbg-accordion .accordion-title .brxe-text,
.wbg-faq__accordion .accordion-title-wrapper .brxe-heading,
.wbg-faq__accordion .accordion-title-wrapper :is(h1, h2, h3, h4, h5, h6),
.wbg-faq__accordion .accordion-title .brxe-text-basic,
.wbg-faq__accordion .accordion-title .brxe-text {
    margin: 0 !important;
    font: inherit !important;
    color: inherit !important;
    text-align: left !important;
}

.wbg-accordion .accordion-title-wrapper svg,
.wbg-accordion .accordion-title svg,
.wbg-accordion .accordion-title-wrapper i,
.wbg-accordion .accordion-title i,
.wbg-accordion .accordion-title-wrapper .brxe-icon,
.wbg-accordion .accordion-title .brxe-icon,
.wbg-faq__accordion .accordion-title-wrapper svg,
.wbg-faq__accordion .accordion-title svg,
.wbg-faq__accordion .accordion-title-wrapper i,
.wbg-faq__accordion .accordion-title i,
.wbg-faq__accordion .accordion-title-wrapper .brxe-icon,
.wbg-faq__accordion .accordion-title .brxe-icon {
    display: none !important;
}

.wbg-accordion .accordion-title-wrapper::after,
.wbg-accordion .accordion-title::after,
.wbg-faq__accordion .accordion-title-wrapper::after,
.wbg-faq__accordion .accordion-title::after {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-left: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: transform 0.2s ease;
}

.wbg-accordion .accordion-item.brx-open > .accordion-title-wrapper::after,
.wbg-accordion .accordion-item.brx-open > .accordion-title::after,
.wbg-accordion .brx-open.accordion-title-wrapper::after,
.wbg-faq__accordion .accordion-item.brx-open > .accordion-title-wrapper::after,
.wbg-faq__accordion .accordion-item.brx-open > .accordion-title::after,
.wbg-faq__accordion .brx-open.accordion-title-wrapper::after {
    transform: rotate(180deg);
}

.wbg-accordion .accordion-content-wrapper,
.wbg-accordion .accordion-content,
.wbg-faq__accordion .accordion-content-wrapper,
.wbg-faq__accordion .accordion-content {
    margin: 0 !important;
    padding: 0 20px 18px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

.wbg-accordion .accordion-item:last-child .accordion-content-wrapper,
.wbg-accordion .accordion-item:last-child .accordion-content,
.wbg-faq__accordion .accordion-item:last-child .accordion-content-wrapper,
.wbg-faq__accordion .accordion-item:last-child .accordion-content {
    border-bottom: none !important;
}

.wbg-accordion .accordion-content-wrapper p,
.wbg-accordion .accordion-content p,
.wbg-accordion .accordion-content-wrapper .brxe-text-basic,
.wbg-accordion .accordion-content-wrapper .brxe-text,
.wbg-faq__accordion .accordion-content-wrapper p,
.wbg-faq__accordion .accordion-content p,
.wbg-faq__accordion .accordion-content-wrapper .brxe-text-basic,
.wbg-faq__accordion .accordion-content-wrapper .brxe-text {
    margin: 0 0 0.75em !important;
    color: inherit !important;
    font: inherit !important;
    text-align: left !important;
}

.wbg-accordion .accordion-content-wrapper p:last-child,
.wbg-accordion .accordion-content p:last-child,
.wbg-faq__accordion .accordion-content-wrapper p:last-child,
.wbg-faq__accordion .accordion-content p:last-child {
    margin-bottom: 0 !important;
}

.wbg-accordion .accordion-content-wrapper a,
.wbg-accordion .accordion-content a,
.wbg-faq__accordion .accordion-content-wrapper a,
.wbg-faq__accordion .accordion-content a {
    color: var(--wbg-text-light, #ffffff) !important;
    text-decoration: underline;
}

/* --- Tabs (Bricks: Tabs Verschachtelbar) -------------------------------- */
.wbg-tabs,
.brxe-tabs-nested.wbg-tabs {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 1016px;
    margin: 0 auto !important;
    padding: 0 !important;
}

.wbg-tabs .tab-menu,
.brxe-tabs-nested.wbg-tabs .tab-menu {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    align-self: center !important;
    gap: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto 28px !important;
    padding: 4px !important;
    list-style: none !important;
    background-color: var(--wbg-gruen-dunkel, #19502f) !important;
    border: 3px solid var(--wbg-gruen-dunkel, #19502f) !important;
    border-radius: 10px !important;
    overflow: hidden;
    transform: skewX(-17deg);
    transform-origin: center center;
}

.wbg-tabs .tab-title,
.brxe-tabs-nested.wbg-tabs .tab-title {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 1 auto;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 14px clamp(20px, 4vw, 40px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    color: var(--wbg-text-light, #ffffff) !important;
    cursor: pointer;
    transition: color 0.2s ease, filter 0.2s ease;
}

.wbg-tabs .tab-title .brxe-text-basic,
.wbg-tabs .tab-title .brxe-text,
.brxe-tabs-nested.wbg-tabs .tab-title .brxe-text-basic,
.brxe-tabs-nested.wbg-tabs .tab-title .brxe-text {
    position: relative;
    z-index: 1;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-cta) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: inherit !important;
    text-align: center;
    white-space: nowrap;
    transform: skewX(17deg);
    transform-origin: center center;
}

.wbg-tabs .tab-title.brx-open,
.brxe-tabs-nested.wbg-tabs .tab-title.brx-open {
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

.wbg-tabs .tab-title.brx-open::before,
.brxe-tabs-nested.wbg-tabs .tab-title.brx-open::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #ffffff;
    border-radius: 5px;
    z-index: 0;
}

.wbg-tabs .tab-pane,
.brxe-tabs-nested.wbg-tabs .tab-pane {
    width: 100% !important;
    color: var(--wbg-gruen-dunkel, #19502f);
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-fs-body);
    line-height: 1.5;
}


/* ==========================================================================
   wbg Hero - "Wir gestalten LebensRäume!"
   --------------------------------------------------------------------------
   Quelle: Figma "HOME - Desktop - 21.04.2026", Node 756:1112 (Group 4965).
   Vollflächiges Panorama-Bild von Nürnberg mit diagonalem dunkelgrünem
   Overlay (Markenwinkel −17.53°) und Headline/Intro links ausgerichtet.

   Anwendung in Bricks (empfohlener Aufbau – als Komponente speicherbar):
   - Section (Wrapper)                   → CSS-Klasse: wbg-hero
       - Block "Inhalts-Container"       → CSS-Klasse: wbg-hero__content
           - Block "Text-Spalte"         → CSS-Klasse: wbg-hero__copy
               - Heading                 → CSS-Klasse: wbg-hero__title
               - Text                    → CSS-Klasse: wbg-hero__intro
               - Suche (optional)        → Klasse wbg-hero__search am Wrapper
           - Block "CTA-Stack"           → CSS-Klasse: wbg-hero__cta-stack
               - Query Loop ODER 3× Hero CTA Element
   Responsive: ≤768 Mobile | 769–1024 Tablet (Parallax reduziert) | ≥1025 Desktop
   - Das Hintergrundbild wird per Bricks "Background → Image" auf der
     Section gesetzt (Datei: assets/wbg-panorama.jpg) oder unten via
     Variable --wbg-hero-image überschrieben.
   ========================================================================== */
.wbg-hero {
    --wbg-hero-image: url('assets/wbg-panorama.jpg');
    --wbg-hero-min-height: 600px;
    --wbg-hero-overlay-width: 52%;
    --wbg-hero-overlay-inset-y: 80px;

    position: relative;
    width: 100%;
    min-height: var(--wbg-hero-min-height);
    overflow: hidden;
    background-image: var(--wbg-hero-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
}

/* Diagonales dunkelgrünes Overlay (linke Bildhälfte) -
   nutzt den Markenwinkel und liegt zwischen Bild und Inhalt.
   Breite gemäß Figma "HOME - Desktop - 21.04.2026" ~52 % - die schräge
   Kante endet etwa mittig im Hero. border-radius rundet alle vier Ecken
   (Diagonalkante rechts + Eintauchen des Panoramas oben/unten). Top/
   Bottom-Inset gibt dem Panorama Luft oben und unten - das Overlay
   "schwebt" auf der linken Seite, wie im Figma vorgesehen.                */
.wbg-hero::before {
    content: "";
    position: absolute;
    inset: var(--wbg-hero-overlay-inset-y) auto var(--wbg-hero-overlay-inset-y) 0;
    width: var(--wbg-hero-overlay-width);
    background-color: var(--wbg-overlay-dark);
    border-radius: 0 10px 10px 0;
    transform: skewX(var(--wbg-skew));
    transform-origin: top left;
    z-index: 1;
    pointer-events: none;
}

.wbg-hero.wbg-hero--parallax-enabled::before {
    transform: skewX(var(--wbg-skew)) translateY(var(--wbg-parallax-copy-y, 0px));
}

.wbg-hero__content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0px;
    max-width: 1280px;
    min-width: 0;
    margin: 0 auto;
    padding: 120px 80px;
    color: var(--wbg-text-light);
    box-sizing: border-box;
}

/* Text-Spalte: bewusst schmaler als die Diagonalkante des Overlays,
   damit Headline + Intro nicht an der schrägen rechten Kante hängen.
   padding-right liefert zusätzlich visuelles Atmen.                        */
.wbg-hero__copy {
    max-width: 480px;
    min-width: 0;
    padding-right: 32px;
    transform: none;
}

.wbg-hero.wbg-hero--parallax-enabled .wbg-hero__copy {
    transform: translateY(var(--wbg-parallax-copy-y, 0px));
    will-change: transform;
}

/* Hero-Headline nutzt denselben Token wie alle Section-Headlines
   ("Alles für Käufer:innen" etc.) - --wbg-fs-h2. Auf Mobile = 36 px,
   auf Desktop bis 56 px - konsistente Typo-Hierarchie über die ganze
   Seite. !important + doppelter Selector überschreiben Bricks-Inline-
   Heading-Typografie-Settings.                                              */
.wbg-hero__title,
.wbg-hero__title.wbg-hero__title {
    margin: 0 0 24px;
    font-size: var(--wbg-fs-hero-title) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: var(--wbg-text-light);
}

.wbg-hero__intro {
    margin: 0;
    max-width: 440px;
    font-size: var(--wbg-fs-body);
    line-height: 1.5;
    color: var(--wbg-text-on-dark);
}

/* Hero-Suchfeld: nur Schriftgröße wie Intro – Layout/Optik bleibt bei Bricks */
.wbg-hero__copy .wbg-hero__search input,
.wbg-hero__copy .brxe-search input,
.wbg-hero__copy form[role="search"] input,
.wbg-hero__copy .bricks-search-form input,
.wbg-hero__copy input[type="search"],
.wbg-hero__copy input[type="text"] {
    font-size: var(--wbg-fs-body) !important;
}

.wbg-hero__copy .wbg-hero__search input::placeholder,
.wbg-hero__copy .brxe-search input::placeholder,
.wbg-hero__copy form[role="search"] input::placeholder,
.wbg-hero__copy .bricks-search-form input::placeholder,
.wbg-hero__copy input[type="search"]::placeholder,
.wbg-hero__copy input[type="text"]::placeholder {
    font-size: var(--wbg-fs-body) !important;
}

/* Tablet (≤1024 px) – Overlay schmaler als zuvor (nicht über CTAs ziehen);
   Grid standardmäßig einspaltig; Querformat stellt 2 Spalten wieder her.  */
@media (max-width: 1024px) {
    .wbg-hero {
        --wbg-hero-overlay-width: 52%;
        --wbg-hero-overlay-inset-y: 56px;
    }

    .wbg-hero::before {
        border-radius: 0 10px 10px 0;
    }

    .wbg-hero__content {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 80px 40px;
    }

    .wbg-hero__copy {
        max-width: min(100%, 480px);
        padding-right: 0;
    }

    .wbg-hero__intro {
        max-width: min(100%, 440px);
    }
}

/* Tablet Hochformat + schmale Viewports: Copy-Block trägt die grüne Fläche
   selbst (::before), damit Headline/Intro/Suche nicht aus dem Overlay laufen. */
@media (max-width: 1024px) and (orientation: portrait) {
    .wbg-hero::before {
        display: none;
    }

    .wbg-hero__copy {
        position: relative;
        isolation: isolate;
        max-width: none;
        width: 100%;
        min-width: 0;
        padding: 32px 28px 36px;
        padding-right: 28px;
        box-sizing: border-box;
    }

    .wbg-hero__copy::before {
        content: "";
        position: absolute;
        inset: 0 -16px 0 -32px;
        background-color: var(--wbg-overlay-dark);
        border-radius: 10px;
        transform: skewX(var(--wbg-skew));
        transform-origin: top left;
        z-index: -1;
    }

    .wbg-hero__title,
    .wbg-hero__intro,
    .wbg-hero__copy .wbg-hero__search,
    .wbg-hero__copy .brxe-search,
    .wbg-hero__copy form[role="search"],
    .wbg-hero__copy .bricks-search-form {
        position: relative;
        z-index: 1;
        max-width: 100%;
    }
}

/* Tablet Hero-CTAs (769–1024 px): Buttonbreite am Text, nicht volle Spalte */
@media (min-width: 769px) and (max-width: 1024px) {
    .wbg-hero__cta-stack {
        --wbg-hero-cta-ramp-height: calc(var(--wbg-fs-hero-cta) + 24px);
        --wbg-hero-cta-ramp-gap: 20px;
        width: auto;
        max-width: 100%;
        align-items: flex-start;
        align-self: start;
        justify-self: start;
        gap: var(--wbg-hero-cta-ramp-gap);
        padding-right: 28px;
    }

    .wbg-hero__cta-stack > .brxe-block,
    .wbg-hero__cta-stack > .brxe-div,
    .wbg-hero__cta-stack > .brxe-container {
        width: auto;
        max-width: 100%;
        justify-content: flex-start;
    }

    .wbg-hero__cta-stack > .brxe-block .wbg-hero-cta,
    .wbg-hero__cta-stack > .brxe-div .wbg-hero-cta,
    .wbg-hero__cta-stack > .brxe-container .wbg-hero-cta,
    .wbg-hero-cta,
    .wbg-hero__cta-stack > :nth-child(1) .wbg-hero-cta,
    .wbg-hero__cta-stack > :nth-child(2) .wbg-hero-cta,
    .wbg-hero__cta-stack > :nth-child(3) .wbg-hero-cta {
        width: auto;
        max-width: min(100%, 340px);
        min-width: 0;
        margin-right: 0;
        padding: 12px 72px 12px 24px;
        white-space: normal;
    }
}

/* Mobile (Figma "HOME - Mobile", Frame 762:277) - eigenständiges Layout:
   - Panorama füllt den kompletten Hero.
   - Grünes Overlay sitzt als skewter Block direkt HINTER dem Copy-Block,
     damit Headline UND Suchfeld zuverlässig auf der grünen Fläche
     liegen - unabhängig davon, wie hoch der Copy-Block durch zusätzliche
     Inhalte (Suche, Subline, etc.) wird (Figma Node 824:357 -
     rgba(25,80,47,0.8), 10 px radius, brand skew).
   - 3 CTAs stehen darunter auf dem Panorama.
   - Intro-Text wird ausgeblendet (kein Lead-Paragraph im Mobile-Design).
   - WICHTIG fürs Bricks-Setup: Das Suchfeld muss INNERHALB des
     .wbg-hero__copy Blocks liegen (unter dem Heading), damit es auf der
     grünen Fläche sitzt.                                                   */
@media (max-width: 768px) {
    .wbg-hero {
        --wbg-hero-min-height: 720px;
    }

    /* Desktop-Overlay (Vollfläche) auf Mobile abschalten - wir nutzen
       stattdessen das ::before vom Copy-Block.                              */
    .wbg-hero::before {
        display: none;
    }

    .wbg-hero__content {
        grid-template-columns: 1fr;
        gap: 56px;
        padding: 56px 24px 48px;
    }

    /* Copy-Block fungiert auf Mobile als grüner Block. Padding gibt
       Headline + Suche genug Abstand zur grünen Kante.                      */
    .wbg-hero__copy {
        position: relative;
        isolation: isolate;
        max-width: none;
        padding: 32px 28px 36px;
        padding-right: 28px;     /* override desktop padding-right: 32 px   */
        margin: 0;
        min-height: 0;
    }

    /* Skewter Parallelogramm-Hintergrund direkt hinter dem Copy-Block.
       Inset blutet leicht links + deutlicher rechts über den Block, sodass
       die schräge Kante rechts knapp innerhalb des Viewports endet
       (Figma-Look).                                                         */
    .wbg-hero__copy::before {
        content: "";
        position: absolute;
        inset: 0 -10px 0 -32px;
        background-color: var(--wbg-overlay-dark);
        border-radius: 10px;
        transform: skewX(var(--wbg-skew));
        transform-origin: top left;
        z-index: -1;
    }

    /* Parallax (Desktop-Effekt) auf Mobile deaktivieren */
    .wbg-hero__copy,
    .wbg-hero__cta-stack {
        transform: none !important;
    }

    /* Mobile: nur Margin-Tweak - font-size kommt jetzt schon vom
       Base-Selector (--wbg-fs-h2 = 36 px auf Mobile).                       */
    .wbg-hero__title,
    .wbg-hero__title.wbg-hero__title {
        margin: 0 0 16px !important;
    }

    /* Intro auf Mobile ausblenden – mehr Platz für Suche + 3 CTAs */
    .wbg-hero__intro {
        display: none !important;
    }

    /* Footer-Pitch unter Käufer:innen- und Eigentümer:innen-Slider */
    .wbg-buyers__footer-text,
    .wbg-owners__footer-text {
        display: none !important;
    }

    /* Suchleiste kürzer als die volle Copy-Breite */
    .wbg-hero__copy .wbg-hero__search,
    .wbg-hero__copy .brxe-search,
    .wbg-hero__copy form[role="search"],
    .wbg-hero__copy .bricks-search-form {
        display: block;
        width: 100%;
        max-width: 280px;
        box-sizing: border-box;
    }

    .wbg-hero__copy .wbg-hero__search input,
    .wbg-hero__copy .brxe-search input,
    .wbg-hero__copy form[role="search"] input,
    .wbg-hero__copy .bricks-search-form input,
    .wbg-hero__copy input[type="search"],
    .wbg-hero__copy input[type="text"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* ==========================================================================
   wbg Hero CTA - Schnellzugriff-Buttons (3 Stück, oben rechts im Hero)
   --------------------------------------------------------------------------
   Quelle: Figma "HOME - Desktop - 21.04.2026", Nodes 756:1320, 756:1328,
   756:1479 ("Group 4987/4988/4989").

   Aufbau pro Button:
   - Großes Label-Parallelogramm in wbg-Grün (#009450) mit weißem Text
     (Lato 24px) und Pfeil rechts.
   - "Zusatz"-Badge: kleineres Icon-Parallelogramm (Dunkelgrün) versetzt
     nach oben/rechts mit frei wählbarem Icon aus der Mediathek.
   - Buttons vertikal gestapelt entlang der schrägen linken Shape-Kante
     (tan(skew) × Höhe pro Stufe; beliebig viele CTAs via JS-Index).

   Anwendung in Bricks:
   --------------------------------------------------------------------------
   Bricks-Element: „Hero CTA (Text + Badge-Icon)“ (Kategorie WBG)
   ODER Query Loop auf Post Type „Hero CTAs“.

   Manuell (3 Buttons):
   1. Textlink-Elemente im CTA-Stack LÖSCHEN
   2. Element hinzufügen → WBG → „Hero CTA (Text + Badge-Icon)“
   3. Pro Button: Button-Text, Link, Badge-Icon (Mediathek) setzen

   Nachhaltig via Post Type:
   1. WP-Admin → Hero CTAs → Beiträge anlegen (Titel, URL, Icon)
   2. In Bricks: Query Loop im .wbg-hero__cta-stack
      - Post Type: Hero CTAs, Sortierung: Reihenfolge
   3. Im Loop: Element „Hero CTA“ + „Daten aus Hero-CTA Beitrag“ aktivieren
      (alternativ Dynamic Tags: {post_title}, {wbg_hero_cta_url}, {wbg_hero_cta_icon})

   Legacy Textlink + Klassen --wohnung/--schaden/--app funktionieren weiter als Fallback.

   Markup (automatisch durch Element):
   <a class="wbg-hero-cta" href="…">
     <span class="wbg-hero-cta__label">…</span>
     <span class="wbg-hero-cta__badge"><img class="wbg-hero-cta__icon" …></span>
   </a>
   ========================================================================== */
.wbg-hero__cta-stack {
    --wbg-hero-cta-skew: -17.5deg;
    /* Höhe ≈ vert. Padding + Zeilenhöhe; Gap fließt in die Schräge ein */
    --wbg-hero-cta-ramp-height: calc(var(--wbg-fs-hero-cta) + 36px);
    --wbg-hero-cta-ramp-gap: 32px;
    --wbg-hero-cta-ramp-step: calc(
        tan(var(--wbg-hero-cta-skew)) *
        (var(--wbg-hero-cta-ramp-height) + var(--wbg-hero-cta-ramp-gap))
    );

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wbg-hero-cta-ramp-gap);
    width: clamp(280px, 30vw, 420px);
    min-width: 0;
    overflow: visible;
    padding-top: 14px;
    padding-right: 28px;
    box-sizing: border-box;
    transform: none;
}

.wbg-hero.wbg-hero--parallax-enabled .wbg-hero__cta-stack {
    transform: translateY(var(--wbg-parallax-cta-y, 0px));
    will-change: transform;
}

/* Bricks Query Loop: Wrapper pro CTA neutralisieren */
.wbg-hero__cta-stack > .brxe-block,
.wbg-hero__cta-stack > .brxe-div,
.wbg-hero__cta-stack > .brxe-container {
    width: auto;
    max-width: 100%;
    min-width: 0;
    display: flex;
    justify-content: flex-start;
}

.wbg-hero__cta-stack > .brxe-block .wbg-hero-cta,
.wbg-hero__cta-stack > .brxe-div .wbg-hero-cta,
.wbg-hero__cta-stack > .brxe-container .wbg-hero-cta {
    width: auto;
    max-width: 100%;
}

/* Maske für Button + Badge - gerundetes Parallelogramm (Original-Pfad aus
   Figma-Icon, identische Form/Rundungen wie im Design). Die Maske wird
   sowohl für den Hauptbutton (::before) als auch das Badge (::after)
   verwendet, mit unterschiedlichen Größen. */
:root {
    --wbg-cta-shape: url("data:image/svg+xml;utf8,<svg viewBox='12 2 90 52' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><path d='M21.7127 13.4446C23.7056 7.12392 30.6938 2 37.3212 2H93.0842C99.7116 2 103.469 7.12392 101.476 13.4446L92.2971 42.5554C90.3042 48.8761 83.3161 54 76.6887 54H20.9256C14.2982 54 10.5412 48.8761 12.5341 42.5554L21.7127 13.4446Z' fill='white'/></svg>");
}

.wbg-hero-cta {
    --wbg-hero-cta-icon: none;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 18px 96px 18px 44px;
    min-width: 340px;
    font-family: 'Lato', sans-serif;
    font-size: var(--wbg-fs-hero-cta);
    font-weight: 400;
    line-height: 1;
    color: var(--wbg-neutral-50);
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.25s ease, transform 0.25s ease;
    isolation: isolate;
}

/* Text sichtbar halten – auch bei Bricks Text Link ohne __label-Wrapper */
.wbg-hero-cta__label,
.wbg-hero-cta > span:not(.wbg-hero-cta__badge),
.wbg-hero-cta .brxe-text,
.wbg-hero-cta .brxe-button-text,
.wbg-hero-cta .brxe-text-link-text {
    position: relative;
    z-index: 2;
}

/* Haupt-Button: skewter Parallelogramm-Hintergrund (hinter dem Text).
   transform-origin top left → untere linke Shape-Ecke liegt auf tan(skew)*H,
   damit die CTAs im Stack eine durchgehende Schrägkante bilden.            */
.wbg-hero-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--wbg-gruen);
    border-radius: 5px;
    transform-origin: top left;
    transform: skewX(-17.5deg);
    box-shadow:
        0 6px 45px rgba(0, 0, 0, 0.4),
        0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: -1;
}

/* Badge mit frei wählbarem Icon (Mediathek / Post Type / Inline-Variable) */
.wbg-hero-cta__badge,
.wbg-hero-cta .wbg-hero-cta__badge {
    position: absolute;
    top: -14px;
    right: -20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 52px;
    background-color: var(--wbg-gruen-dunkel);
    -webkit-mask-image: var(--wbg-cta-shape);
            mask-image: var(--wbg-cta-shape);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    filter:
        drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15))
        drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15));
    pointer-events: none;
    z-index: 3;
}

/* Legacy-Fallback: Badge per CSS-Variable, wenn kein DOM-Badge vorhanden */
.wbg-hero-cta:not(:has(.wbg-hero-cta__badge))::after {
    content: "";
    position: absolute;
    top: -14px;
    right: -20px;
    width: 96px;
    height: 52px;
    background-color: var(--wbg-gruen-dunkel);
    background-image: var(--wbg-hero-cta-icon, none);
    background-repeat: no-repeat;
    background-size: 28px 28px;
    background-position: center;
    -webkit-mask-image: var(--wbg-cta-shape);
            mask-image: var(--wbg-cta-shape);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    filter:
        drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15))
        drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15));
    pointer-events: none;
    z-index: 3;
}

/* Legacy-Varianten (nur wenn kein img-Badge im Markup) */
.wbg-hero-cta--wohnung:not(:has(.wbg-hero-cta__badge)) { --wbg-hero-cta-icon: url("/wp-content/uploads/2026/05/WBG_Icon_Wohnung_Suchen.svg"); }
.wbg-hero-cta--schaden:not(:has(.wbg-hero-cta__badge)) { --wbg-hero-cta-icon: url("/wp-content/uploads/2026/05/WBG_Icon_Schaden_melden.svg"); }
.wbg-hero-cta--app:not(:has(.wbg-hero-cta__badge))     { --wbg-hero-cta-icon: url("/wp-content/uploads/2026/05/WBG_Icon_App.svg"); }

/* Kein leeres Badge ohne Icon-Klasse / ohne DOM-Badge */
.wbg-hero-cta:not(:has(.wbg-hero-cta__badge)):not(.wbg-hero-cta--wohnung):not(.wbg-hero-cta--schaden):not(.wbg-hero-cta--app)::after {
    content: none;
    display: none;
}

.wbg-hero-cta__icon,
.wbg-hero-cta .wbg-hero-cta__icon {
    display: block;
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.wbg-hero-cta:hover,
.wbg-hero-cta:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* Schräg-Kante: untere linke Ecke des oberen Buttons trifft obere linke
   Ecke des nächsten – horizontale Stufe = tan(skew) × (Höhe + Gap).
   Index pro Kind setzt wbg-scroll-effects.js (--wbg-hero-cta-ramp-index).  */
.wbg-hero__cta-stack > :not(.brx-query-trail),
.wbg-hero__cta-stack > :not(.brx-query-trail).wbg-hero-cta {
    margin-left: calc(var(--wbg-hero-cta-ramp-index, 0) * var(--wbg-hero-cta-ramp-step));
    margin-right: 0;
}

.wbg-hero-cta,
.wbg-hero__cta-stack > :not(.brx-query-trail) .wbg-hero-cta {
    margin-right: 0;
}

/* Mobile - CTAs sind NICHT mehr full-width-stretch, sondern liegen
   links und sizen sich auf ihre Textbreite. Dadurch ist das Badge
   rechts sichtbar getrennt vom Hauptbutton (Figma "HOME - Mobile"
   Buttons: ~357 px breit auf 440 px Viewport, nicht volle Breite).         */
@media (max-width: 768px) {
    .wbg-hero__cta-stack {
        --wbg-hero-cta-ramp-height: calc(var(--wbg-fs-hero-cta) + 24px);
        --wbg-hero-cta-ramp-gap: 20px;
        --wbg-hero-cta-ramp-step: 0px;
        width: 100%;
        align-items: stretch;
        gap: var(--wbg-hero-cta-ramp-gap);
        padding-top: 8px;
        padding-right: 20px;
    }

    /* Mobile: keine Schräg-Stufe – CTAs bündig untereinander, volle Breite */
    .wbg-hero__cta-stack > :not(.brx-query-trail),
    .wbg-hero__cta-stack > :not(.brx-query-trail).wbg-hero-cta {
        margin-left: 0 !important;
    }

    .wbg-hero-cta,
    .wbg-hero__cta-stack > :not(.brx-query-trail) .wbg-hero-cta {
        margin-right: 0;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        font-size: var(--wbg-fs-hero-cta) !important;
        padding: 12px 72px 12px 20px;
        white-space: normal;
    }

    .wbg-hero-cta__badge,
    .wbg-hero-cta .wbg-hero-cta__badge,
    .wbg-hero-cta:not(:has(.wbg-hero-cta__badge))::after {
        top: -10px;
        right: -14px;
        width: 72px;
        height: 39px;
    }

    .wbg-hero-cta:not(:has(.wbg-hero-cta__badge))::after {
        background-size: 22px 22px;
    }

    .wbg-hero-cta__icon,
    .wbg-hero-cta .wbg-hero-cta__icon {
        width: 22px;
        height: 22px;
        max-width: 22px;
        max-height: 22px;
    }
}


/* ==========================================================================
   wbg Käufer-Sektion - "Alles für Käufer:innen"
   --------------------------------------------------------------------------
   Quelle: Figma "HOME - Desktop - 21.04.2026", y=1760–2890.
   Vollflächige grüne Sektion (horizontaler Gradient) mit 4 dunklen Karten:
   Eigentumswohnungen / Townhouses & Häuser / Förderhäuser / Kaufberatung.
   Jede Karte besteht aus Bild oben, lime-grünem Türsymbol-Badge (Schräge),
   Titel, Beschreibungstext und Link-CTA.

   Anwendung in Bricks:
   - Section                                → wbg-buyers
       - Block "Header"                     → wbg-buyers__header
           - Heading                        → wbg-buyers__title
           - Text                           → wbg-buyers__intro
       - Block "Grid"                       → wbg-buyers__grid
           - Block (4x je Karte)            → wbg-buyers-card
               - Block "Media"              → wbg-buyers-card__media
                   1. Image (Bricks-Image) – volle Breite oben
                   2. Element „Käufer-Karte Badge (Icon)“ (WBG)
                      Badge-Icon aus Mediathek; liegt per CSS über dem Bild
               - Block "Body"               → wbg-buyers-card__body
                   - Heading                → wbg-buyers-card__title
                   - Text                   → wbg-buyers-card__desc
                   - Text Link              → wbg-buyers-card__link
                     URL: {wbg_buyer_card_url}  Text: {wbg_buyer_card_link_text}
       - Block "Footer"                     → wbg-buyers__footer
           - Text                           → wbg-buyers__footer-text
           - Text Link                      → wbg-buyers__cta

   Wiederverwendung auf anderen Seiten/Sektionen (gleiches Karten-Design):
   1. WP-Admin → Käufer-Karten → Beitrag anlegen (Titel, Bild, Headline, Text, URL, Icon optional)
   2. Kategorie/Taxonomie zuweisen (z. B. „Käufer:innen Startseite“, „Leistungen …“)
   3. Bricks Query Loop: Post Type wbg_buyer_card, Taxonomie-Filter auf die Kategorie
      KEIN wbg-query-bound / wbg-placement-* nötig
   4. Loop-Item immer .wbg-buyers-card – Grid-Wrapper kann pro Sektion variieren
      (Startseite: .wbg-buyers__grid | Highlights z. B. Kaufen-Seite: .wbg-highlights__grid)
   5. Badge optional: Icon-Feld leer lassen → kein Badge im Frontend
   6. Ab 5 sichtbaren Karten: Slider auf Desktop via .wbg-buyers--overflow-slider
      Tablet/Mobile (≤1024 px): immer Slider ab 2 Karten via .wbg-buyers--compact-slider
      Desktop ≤4 Karten: normales 4-Spalten-Grid

   Legacy-Varianten (--wohnung / …) nicht mehr für JetEngine-Karten verwenden.
   Badge nur über CPT-Icon oder leer lassen (kein Fallback-Badge).
   ========================================================================== */
.wbg-buyers {
    padding: 80px 24px;
    background-color: var(--wbg-gruen);        /* solid #009450 - kein Gradient mehr */
    color: var(--wbg-text-light);
}

.wbg-buyers__header {
    max-width: 880px;
    margin: 0 auto 56px;
    text-align: center;
}

/* Title + Intro selbst constrainen + zentrieren, damit das Layout auch
   funktioniert, wenn der Bricks-Aufbau den Header-Wrapper nicht setzt
   (z. B. wenn Heading & Text direkt unter der Section liegen). */
.wbg-buyers__title,
.brxe-heading.wbg-buyers__title {
    max-width: 880px;
    margin: 0 auto 16px;
    font-family: 'Lato', sans-serif;
    font-size: var(--wbg-fs-section-title);    /* fluid 36-56 px */
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    text-align: center;
}

.wbg-buyers__intro {
    max-width: 854px;               /* Figma: Intro 854 px breit */
    margin: 0 auto;
    font-family: 'Lato', sans-serif;
    font-size: var(--wbg-fs-body);  /* fluid 20-24 px */
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--wbg-neutral-50);
    text-align: center;
}

.wbg-buyers__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1320px;
    margin: 0 auto;
}

/* Highlights-Grid – gleiche Karten (.wbg-buyers-card), Inhalt zentriert bei 2–4 Cards.
   Bricks: Query-Loop-Wrapper = .wbg-highlights__grid (statt .wbg-buyers__grid).
   Section auf Unterseiten: .wbg-highlights (+ optional gleiche Header-Klassen wie Käufer). */
.wbg-highlights__grid,
.wbg-highlights__grid.wbg-highlights__grid,
.wbg-highlights__grid.brxe-block,
.wbg-highlights__grid.brxe-div {
    --wbg-highlights-card-width: min(315px, calc((100% - 60px) / 4));
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 20px;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    grid-template-columns: none !important;
}

/* Query-Loop-Marker aus dem Flex-Layout nehmen */
.wbg-highlights__grid > .brx-query-trail {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Query-Loop-/Zwischen-Wrapper auflösen – Karten werden direkte Flex-Kinder */
.wbg-highlights__grid > .brxe-block:not(.wbg-buyers-card):not(.brx-query-trail),
.wbg-highlights__grid > .brxe-div:not(.wbg-buyers-card):not(.brx-query-trail),
.wbg-highlights__grid > .brxe-container:not(.wbg-buyers-card):not(.brx-query-trail) {
    display: contents !important;
}

.wbg-highlights__grid > .wbg-buyers-card,
.wbg-highlights__grid > .brxe-block.wbg-buyers-card,
.wbg-highlights__grid > .brxe-div.wbg-buyers-card {
    flex: 0 0 var(--wbg-highlights-card-width) !important;
    width: var(--wbg-highlights-card-width) !important;
    max-width: var(--wbg-highlights-card-width) !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.wbg-highlights__grid .wbg-buyers-card.wbg-buyers-card {
    width: 100% !important;
    max-width: 100% !important;
}

.wbg-highlights {
    padding: 80px 24px;
    background-color: var(--wbg-gruen);
    color: var(--wbg-text-light);
}

.wbg-highlights__slider {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.wbg-highlights__arrow,
.wbg-highlights__pagination {
    display: none;
}

.wbg-highlights__arrow {
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    color: var(--wbg-gruen-dunkel);
    cursor: pointer;
    z-index: 5;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.08);
    transition: color 0.2s ease, transform 0.15s ease,
        box-shadow 0.2s ease, background-color 0.2s ease;
}

.wbg-highlights__arrow:hover,
.wbg-highlights__arrow:focus-visible {
    color: var(--wbg-gruen);
    background: #ffffff;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.16),
        0 2px 4px rgba(0, 0, 0, 0.1);
    outline: none;
}

.wbg-highlights__arrow:active {
    transform: translateY(-50%) scale(0.92);
}

.wbg-highlights__arrow:disabled,
.wbg-highlights__arrow.is-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.wbg-highlights__arrow svg {
    width: 22px;
    height: 22px;
    display: block;
}

.wbg-highlights__arrow--prev {
    left: 6px;
}

.wbg-highlights__arrow--next {
    right: 6px;
}

.wbg-highlights__pagination {
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 24px 0 0;
    margin: 0;
    list-style: none;
}

.wbg-highlights__pagination-item {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 0;
}

.wbg-highlights__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease,
        height 0.2s ease;
}

.wbg-highlights__dot.is-active {
    background: var(--wbg-neutral-50);
    width: 10px;
    height: 10px;
}

.wbg-buyers-card {
    --wbg-buyers-card-icon: none;          /* per Varianten-Klasse gesetzt */
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--wbg-gruen-dunkel);
    border-radius: var(--wbg-radius);
    color: var(--wbg-text-light);
    /* WICHTIG: KEIN overflow:hidden hier, sonst wird das Badge
       (links -4 px Überhang) abgeschnitten. Image-Clipping macht
       stattdessen .wbg-buyers-card__media. */
}

.wbg-buyers-card__media,
.wbg-buyers-card__media.brxe-block,
.wbg-buyers-card .wbg-buyers-card__media {
    position: relative;
    display: block !important;
    width: 100%;
    flex: 0 0 auto;
    overflow: visible;                    /* Badge darf links über den Rand ragen */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Fester Foto-Rahmen 315×192 – Padding-Box-Methode (robuster als aspect-ratio
   allein, wenn Bricks am Block Höhen setzt). Gilt für alle Karten-FOTOS. */
.wbg-buyers-card__media::before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 60.9524%;           /* 192 ÷ 315 × 100 % */
    pointer-events: none;
}

/* Bild-Wrapper (auch verschachtelt) absolut in den Foto-Rahmen */
.wbg-buyers-card__media > .brxe-image,
.wbg-buyers-card__media > figure,
.wbg-buyers-card__media > picture,
.wbg-buyers-card__media > a:has(img:not(.wbg-buyers-card__badge-icon)),
.wbg-buyers-card__media > .brxe-block:not(.brxe-buyer-card-badge):not(.wbg-buyers-card__badge),
.wbg-buyers-card__media > .brxe-div:not(.brxe-buyer-card-badge),
.wbg-buyers-card__media.brxe-image,
.wbg-buyers-card__media .brxe-image:not(.wbg-buyers-card__badge):not(.brxe-buyer-card-badge),
.wbg-buyers-card__media figure:not(.wbg-buyers-card__badge),
.wbg-buyers-card__media picture {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 1;
    border-top-left-radius: var(--wbg-radius);
    border-top-right-radius: var(--wbg-radius);
}

/* Karten-FOTOS – object-fit:cover schlägt Bricks object-fit:fill (ID-Selektor) */
.wbg-buyers-card__media img:not(.wbg-buyers-card__badge-icon),
.wbg-buyers-card__media .brxe-image img,
.wbg-buyers-card__media img.brxe-image,
.wbg-buyers-card__media figure img,
.wbg-buyers-card__media.brxe-image > img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    border-top-left-radius: var(--wbg-radius);
    border-top-right-radius: var(--wbg-radius);
}

/* Fallback: Foto liegt als Geschwister NEBEN __media (nur Badge im Media-Block) */
.wbg-buyers-card > .brxe-image:not(.wbg-buyers-card__badge),
.wbg-buyers-card > figure:not(.wbg-buyers-card__body) {
    position: relative;
    display: block !important;
    width: 100%;
    flex: 0 0 auto;
    overflow: hidden;
    margin: 0;
    border-top-left-radius: var(--wbg-radius);
    border-top-right-radius: var(--wbg-radius);
}

.wbg-buyers-card > .brxe-image:not(.wbg-buyers-card__badge)::before,
.wbg-buyers-card > figure:not(.wbg-buyers-card__body)::before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 60.9524%;
}

.wbg-buyers-card > .brxe-image:not(.wbg-buyers-card__badge) img,
.wbg-buyers-card > figure:not(.wbg-buyers-card__body) img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* Media-Block nur mit Badge, Foto als Geschwister darunter/oben */
.wbg-buyers-card__media:not(:has(img:not(.wbg-buyers-card__badge-icon)))::before {
    display: none;
}

.wbg-buyers-card:has(> .brxe-image, > figure) > .wbg-buyers-card__media:not(:has(img:not(.wbg-buyers-card__badge-icon))) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-bottom: 60.9524%;
    overflow: visible;
    z-index: 2;
    pointer-events: none;
}

/* "Tür"-Badge: lime-grünes Parallelogramm mit frei wählbarem Icon.
   Nur .brxe-buyer-card-badge ansprechen – niemals den Media-Wrapper. */
.wbg-buyers-card__badge,
.wbg-buyers-card .wbg-buyers-card__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 77px;
    height: 37px;
    background-color: var(--wbg-gruen-akzent);
    -webkit-mask-image: var(--wbg-cta-shape);
            mask-image: var(--wbg-cta-shape);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
    pointer-events: none;
    line-height: 0;
}

/* Badge IM Media-Block: 21 px von oben, 4 px über linken Kartenrand (Figma) */
.wbg-buyers-card__media > .wbg-buyers-card__badge,
.wbg-buyers-card__media > .brxe-buyer-card-badge {
    position: absolute !important;
    top: 21px !important;
    left: -4px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 5;
    width: 77px !important;
    height: 37px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    pointer-events: none;
}

/* Badge als Geschwister VOR dem Media-Block (Fallback) */
.wbg-buyers-card > .brxe-buyer-card-badge {
    position: absolute;
    top: 21px;
    left: -4px;
    z-index: 4;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    min-height: 0 !important;
    pointer-events: none;
}

.wbg-buyers-card__badge-icon,
.wbg-buyers-card .wbg-buyers-card__badge-icon {
    display: block;
    width: 22px;
    height: 22px;
    max-width: 22px;
    max-height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Badge-Element ohne Icon: kein leerer grüner Kasten (Frontend) */
.brxe-buyer-card-badge:not(:has(.wbg-buyers-card__badge-icon)),
.wbg-buyers-card__badge:not(:has(.wbg-buyers-card__badge-icon)) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* Optionale CPT-Felder ohne Inhalt (Fallback für Wrapper, nicht für direkte Bricks-Elemente).
   a.wbg-buyers-card__link / img.brxe-image sind das Element selbst – Ausblenden nur via PHP im CPT-Loop. */
.wbg-buyers-card__desc:not(.brxe-text-basic):not(.brxe-text):empty,
.wbg-buyers-card__desc:not(.brxe-text-basic):not(.brxe-text):has(> .brxe-text-basic:empty),
.wbg-buyers-card__desc:not(.brxe-text-basic):not(.brxe-text):has(> .brxe-text:empty) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wbg-buyers-card__link:not(a):not(:has(a[href]:not([href=""]))),
.wbg-buyers-card__link:not(a):empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Leere Image-Wrapper ausblenden – img.brxe-image (direktes Bricks-Element) ausnehmen,
   dort greift :has(img) nicht, weil das Element selbst das img ist. */
.wbg-buyers-card__media > .brxe-image:not(img):not(:has(img[src]:not([src=""]))),
.wbg-buyers-card__media > figure:not(:has(img[src]:not([src=""]))) {
    display: none !important;
}

.wbg-buyers-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 16px 32px 32px;        /* Figma: 32 L/R, 16 T, 32 B */
}

.wbg-buyers-card__title {
    margin: 0 0 16px;
    font-family: 'Lato', sans-serif;
    font-size: var(--wbg-fs-card-title); /* fluid 28-34 px */
    font-weight: 700;
    line-height: 1.1;
    color: var(--wbg-neutral-200);  /* #F0EEE9 - Figma "Neutral 200" */
}

.wbg-buyers-card__desc {
    margin: 0 0 24px;
    font-family: 'Lato', sans-serif;
    font-size: var(--wbg-fs-card-body);  /* fluid 20-24 px */
    font-weight: 400;
    line-height: 27px;
    letter-spacing: 0.01em;         /* 0.21px / 21px - Figma tracking */
    color: var(--wbg-neutral-50);   /* #FDFCFB */
    flex: 1 1 auto;
}

/* Karten-Link: weißer Text inkl. Pfeil, alles unterstrichen.
   Pfeil "→" bitte direkt im Bricks-Text mit eingeben.
   !important ist nötig, um Bricks-eigene "text-decoration: none"-
   Defaults auf <a>-Tags zu schlagen. */
.wbg-buyers-card__link {
    margin-top: auto;
    font-family: 'Lato', sans-serif;
    font-size: var(--wbg-fs-body);  /* fluid 20-24 px */
    font-weight: 400;
    line-height: 24px;
    color: var(--wbg-neutral-50);
    text-decoration: underline !important;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: opacity 0.2s ease;
}

.wbg-buyers-card__link:hover,
.wbg-buyers-card__link:focus-visible {
    opacity: 0.85;
}

/* Lange Pitch-Zeile unter dem Grid + zentrierter Sekundär-CTA -
   entspricht "Sie möchten Eigentum kaufen, sind aber noch unsicher …"
   plus Button "Sie möchten kaufen?". */
.wbg-buyers__footer {
    max-width: 880px;
    margin: 48px auto 0;
    text-align: center;
    /* Flex-Center sorgt dafür, dass der CTA-Button auch dann mittig
       sitzt, wenn Bricks den Text Link in einen block-level Wrapper
       packt (text-align: center greift dann auf den Inhalt nicht). */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wbg-buyers__footer-text {
    margin: 0 0 24px;
    font-family: 'Lato', sans-serif;
    font-size: var(--wbg-fs-body);  /* fluid 20-24 px */
    font-weight: 400;
    line-height: 27px;
    color: #ffffff;                 /* reines Weiß lt. Figma */
}

/* Sekundärer CTA "Sie möchten kaufen?" (Figma-Node 756:1189).
   Dunkelgrünes, leicht geskewedes Parallelogramm mit fettem weißem
   Text. KEIN Schatten, KEIN Badge - klare visuelle Hierarchie unter
   den Hero-CTAs. */
.wbg-buyers__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-family: 'Lato', sans-serif;
    font-size: var(--wbg-fs-cta); /* fluid 20-26 px */
    font-weight: 700;
    line-height: 1.05;
    color: var(--wbg-neutral-50);
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.25s ease, filter 0.25s ease;
    isolation: isolate;
}

.wbg-buyers__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--wbg-gruen-dunkel);
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
}

.wbg-buyers__cta:hover,
.wbg-buyers__cta:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* Tablet – kein 2-Spalten-Grid; Slider via .wbg-buyers--compact-slider (JS) */
@media (max-width: 1024px) {
    .wbg-buyers {
        padding: 64px 32px;
    }

    .wbg-buyers__header {
        margin-bottom: 40px;
    }
}

/* Slider-Wrapper - vom JS angelegt (.wbg-buyers__slider). Hält Grid
   + Arrows zusammen; relative damit Arrows absolut darin positioniert
   werden können. Auf Desktop transparent (keine Wirkung).                  */
.wbg-buyers__slider {
    position: relative;
    width: 100%;
    /* min-width:0 verhindert, dass der Wrapper im Grid/Flex-Kontext
       (Section .wbg-buyers ist display: block, aber sicher ist sicher)
       von seinem überlaufendem Grid auseinandergedrückt wird. */
    min-width: 0;
    overflow: visible;
}

/* Arrows + Pagination: standardmäßig versteckt (Mobile-Slider + Desktop-Overflow). */
.wbg-buyers__arrow,
.wbg-buyers__pagination {
    display: none;
}

/* Gemeinsame Slider-Controls (Mobile + .wbg-buyers--overflow-slider) */
.wbg-buyers__arrow {
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    color: var(--wbg-gruen-dunkel);
    cursor: pointer;
    z-index: 5;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.08);
    transition: color 0.2s ease, transform 0.15s ease,
        box-shadow 0.2s ease, background-color 0.2s ease;
}

.wbg-buyers__arrow:hover,
.wbg-buyers__arrow:focus-visible {
    color: var(--wbg-gruen);
    background: #ffffff;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.16),
        0 2px 4px rgba(0, 0, 0, 0.1);
    outline: none;
}

.wbg-buyers__arrow:active {
    transform: translateY(-50%) scale(0.92);
}

.wbg-buyers__arrow:disabled,
.wbg-buyers__arrow.is-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.wbg-buyers__arrow svg {
    width: 22px;
    height: 22px;
    display: block;
}

.wbg-buyers__arrow--prev {
    left: 6px;
}

.wbg-buyers__arrow--next {
    right: 6px;
}

.wbg-buyers__pagination {
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 24px 0 0;
    margin: 0;
    list-style: none;
}

.wbg-buyers__pagination-item {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 0;
}

.wbg-buyers__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease,
        height 0.2s ease;
}

.wbg-buyers__dot.is-active {
    background: var(--wbg-neutral-50);
    width: 10px;
    height: 10px;
}

/* Buyers-Badge: Überhang am Media-Block, nicht an der Card abschneiden */
:is([class*="--compact-slider"], [class*="--overflow-slider"])
    .wbg-buyers-card__media {
    overflow: visible !important;
}

/* Mieter Mobile: schwebendes Bild darf über Card-Rand ragen */
@media (max-width: 640px) {
    .wbg-tenants--compact-slider .wbg-tenants-card.wbg-tenants-card,
    .wbg-tenants:not(.wbg-tenants--compact-slider) .wbg-tenants-card.wbg-tenants-card {
        overflow: visible !important;
    }
}

/* Desktop: ab 5 Karten horizontaler Slider */
@media (min-width: 1025px) {
    .wbg-buyers--overflow-slider {
        overflow-x: visible;
    }

    .wbg-buyers--overflow-slider .wbg-buyers__slider {
        max-width: 1320px;
        margin-left: auto;
        margin-right: auto;
        overflow: visible;
    }

    .wbg-buyers--overflow-slider .wbg-buyers__grid.wbg-buyers__grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 8px;
        padding: 0 0 12px 8px;              /* links: Badge-Überhang (−4 px) + Schatten */
        gap: 20px;
        max-width: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wbg-buyers--overflow-slider .wbg-buyers__grid::-webkit-scrollbar {
        display: none;
    }

    .wbg-buyers--overflow-slider .wbg-buyers-card.wbg-buyers-card {
        flex: 0 0 calc((100% - 60px) / 4) !important;
        width: calc((100% - 60px) / 4) !important;
        max-width: calc((100% - 60px) / 4) !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }

    .wbg-buyers--overflow-slider .wbg-buyers__arrow,
    .wbg-buyers--overflow-slider .wbg-buyers__pagination {
        display: flex;
    }

    /* Pfeile außerhalb des Karten-Tracks (grüner Seitenraum) */
    .wbg-buyers--overflow-slider .wbg-buyers__arrow--prev {
        left: -72px;
    }

    .wbg-buyers--overflow-slider .wbg-buyers__arrow--next {
        right: -72px;
    }
}

/* Tablet (641–1024 px): horizontaler Slider wie Mobile, kein 2×2-Grid */
@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-buyers--compact-slider {
        overflow-x: clip;
    }

    .wbg-buyers--compact-slider .wbg-buyers__grid.wbg-buyers__grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 32px;
        padding: 0 32px 12px;
        gap: 16px;
        max-width: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wbg-buyers--compact-slider .wbg-buyers__grid::-webkit-scrollbar {
        display: none;
    }

    .wbg-buyers--compact-slider .wbg-buyers-card.wbg-buyers-card {
        flex: 0 0 58% !important;
        width: 58% !important;
        max-width: 58% !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }

    .wbg-buyers--compact-slider .wbg-buyers__arrow,
    .wbg-buyers--compact-slider .wbg-buyers__pagination {
        display: flex;
    }
}

/* Mobile - horizontaler Slider mit Scroll-Snap, Arrows links/rechts
   und 1 Dot pro Karte. Entspricht dem Figma "HOME - Mobile" Bauträger-
   Slider (Node 824:307).                                                   */
@media (max-width: 640px) {
    .wbg-buyers {
        padding: 56px 0;
        /* Verhindert, dass die "peek"-Card oder schiefe Header-Texte das
           Seiten-Layout horizontal aufblähen. */
        overflow-x: hidden;
    }
    .wbg-buyers__header {
        padding: 0 24px;
        margin-bottom: 32px;
    }
    /* Lange Headlines/Intros mit deutscher Silbentrennung wrappen, damit
       "Käufer:innen" / "Eigentumswohnungen" nicht aus der Viewport laufen. */
    .wbg-buyers__title,
    .wbg-buyers__intro {
        overflow-wrap: break-word;
        hyphens: auto;
    }
    /* Auf Mobile wird das Grid zum horizontalen Flex-Slider umgewandelt.
       Bricks setzt auf .brxe-block (liegt auf der gleichen DIV) ein
       eigenes flex-direction: column - deshalb muss hier ALLES mit
       !important durchgesetzt werden, sonst stapeln die Cards vertikal.
       Doppelte Klasse (.wbg-buyers__grid.wbg-buyers__grid) erhöht die
       Spezifität, ohne den Selector zu verändern.                         */
    .wbg-buyers__grid.wbg-buyers__grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        grid-template-columns: none !important;  /* Reset, falls Grid leaks */
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 24px;
        padding: 0 24px 12px;
        gap: 16px;
        -webkit-overflow-scrolling: touch;
        /* Native Scrollbar verstecken - Pagination dient als Indikator. */
        scrollbar-width: none;
    }
    .wbg-buyers__grid::-webkit-scrollbar {
        display: none;
    }
    .wbg-buyers-card.wbg-buyers-card {
        /* Garantiert EXAKT 78% breit, kein Wachsen, kein Schrumpfen,
           kein Wrap auf neue Zeile - die einzige verlässliche Methode
           gegen Bricks-Defaults und intrinsische min-content-Wider. */
        flex: 0 0 78% !important;
        width: 78% !important;
        max-width: 78% !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }
    /* Card-Text auf engem Mobile-Card-Body sauber wrappen. */
    .wbg-buyers-card__title {
        overflow-wrap: break-word;
        hyphens: auto;
    }
    .wbg-buyers-card__desc,
    .wbg-buyers-card__link {
        overflow-wrap: break-word;
    }
    /* Etwas knapperes Innenmaß, damit die schmale Card nicht zu eng wirkt. */
    .wbg-buyers-card__body {
        padding: 20px 24px 28px;
    }

    .wbg-buyers__arrow,
    .wbg-buyers__pagination {
        display: flex;
    }

    .wbg-buyers__footer {
        padding: 0 24px;
        margin-top: 32px;
    }
}

/* Highlights-Grid – Slider-Modi (wie Käufer:innen, Inhalt zentriert im Grid-Modus) */
@media (min-width: 1025px) {
    .wbg-highlights--overflow-slider {
        overflow-x: visible;
    }

    .wbg-highlights--overflow-slider .wbg-highlights__slider {
        max-width: 1320px;
        margin-left: auto;
        margin-right: auto;
        overflow: visible;
    }

    .wbg-highlights--overflow-slider .wbg-highlights__grid.wbg-highlights__grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 8px;
        padding: 0 0 12px 8px;
        gap: 20px;
        max-width: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wbg-highlights--overflow-slider .wbg-highlights__grid::-webkit-scrollbar {
        display: none;
    }

    .wbg-highlights--overflow-slider .wbg-highlights__grid > .wbg-buyers-card,
    .wbg-highlights--overflow-slider .wbg-highlights__grid > .brxe-block,
    .wbg-highlights--overflow-slider .wbg-highlights__grid > .brxe-div {
        flex: 0 0 calc((100% - 60px) / 4) !important;
        width: calc((100% - 60px) / 4) !important;
        max-width: calc((100% - 60px) / 4) !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }

    .wbg-highlights--overflow-slider .wbg-highlights__grid > .wbg-buyers-card.wbg-buyers-card {
        scroll-snap-align: start;
    }

    .wbg-highlights--overflow-slider .wbg-highlights__arrow,
    .wbg-highlights--overflow-slider .wbg-highlights__pagination {
        display: flex;
    }

    .wbg-highlights--overflow-slider .wbg-highlights__arrow--prev {
        left: -72px;
    }

    .wbg-highlights--overflow-slider .wbg-highlights__arrow--next {
        right: -72px;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-highlights {
        padding: 64px 32px;
    }

    .wbg-highlights--compact-slider {
        overflow-x: clip;
    }

    .wbg-highlights--compact-slider .wbg-highlights__grid.wbg-highlights__grid,
    .wbg-highlights--compact-slider .wbg-highlights__grid.brxe-block,
    .wbg-highlights--compact-slider .wbg-highlights__grid.brxe-div {
        --wbg-highlights-card-width: calc((100% - 16px) / 2);
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 32px;
        padding: 0 32px 12px;
        gap: 16px;
        max-width: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wbg-highlights--compact-slider .wbg-highlights__grid::-webkit-scrollbar {
        display: none;
    }

    .wbg-highlights--compact-slider .wbg-highlights__grid > .wbg-buyers-card,
    .wbg-highlights--compact-slider .wbg-highlights__grid > .brxe-block.wbg-buyers-card,
    .wbg-highlights--compact-slider .wbg-highlights__grid > .brxe-div.wbg-buyers-card,
    .wbg-highlights--compact-slider .wbg-highlights__grid > .brxe-block,
    .wbg-highlights--compact-slider .wbg-highlights__grid > .brxe-div {
        flex: 0 0 var(--wbg-highlights-card-width) !important;
        width: var(--wbg-highlights-card-width) !important;
        max-width: var(--wbg-highlights-card-width) !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }

    .wbg-highlights--compact-slider .wbg-highlights__arrow,
    .wbg-highlights--compact-slider .wbg-highlights__pagination {
        display: flex;
    }
}

@media (max-width: 640px) {
    .wbg-highlights {
        padding: 56px 0;
        overflow-x: hidden;
    }

    .wbg-highlights__grid.wbg-highlights__grid,
    .wbg-highlights__grid.brxe-block,
    .wbg-highlights__grid.brxe-div {
        --wbg-highlights-card-width: calc(100% - 48px);
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 24px;
        padding: 0 24px 12px;
        gap: 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .wbg-highlights__grid::-webkit-scrollbar {
        display: none;
    }

    .wbg-highlights__grid > .wbg-buyers-card,
    .wbg-highlights__grid > .brxe-block.wbg-buyers-card,
    .wbg-highlights__grid > .brxe-div.wbg-buyers-card,
    .wbg-highlights__grid > .brxe-block,
    .wbg-highlights__grid > .brxe-div {
        flex: 0 0 var(--wbg-highlights-card-width) !important;
        width: var(--wbg-highlights-card-width) !important;
        max-width: var(--wbg-highlights-card-width) !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }

    .wbg-highlights__arrow,
    .wbg-highlights__pagination {
        display: flex;
    }
}

/* ==========================================================================
   SECTION "Nachhaltigkeit & Klimaschutz" – Seite Über die wbg (Figma 1121:1503)
   --------------------------------------------------------------------------
   Grüne Vollfläche, zentrierter Header, Karten-Grid wie Käufer:innen/Highlights.
   Loop-Item: .wbg-buyers-card (CPT wbg_buyer_card, Taxonomie z. B. „Nachhaltigkeit“).
   Slider: Desktop ab 5 Karten (.wbg-nachhaltigkeit--overflow-slider),
   Tablet/Mobile ab 2 Karten (.wbg-nachhaltigkeit--compact-slider) via wbg-card-slider.js

   Bricks-Struktur:
   Section (.wbg-nachhaltigkeit)
     Block (.wbg-nachhaltigkeit__header)
       Heading h3 (.wbg-nachhaltigkeit__title)
       Basic Text (.wbg-nachhaltigkeit__intro)
     Query Loop → Wrapper (.wbg-nachhaltigkeit__grid)
       Loop-Item Block (.wbg-buyers-card)
         Block (.wbg-buyers-card__media) → Image + optional Badge
         Block (.wbg-buyers-card__body)
           Heading (.wbg-buyers-card__title)  → {wbg_buyer_card_headline}
           Text (.wbg-buyers-card__desc)      → {wbg_buyer_card_desc}
           Text Link (.wbg-buyers-card__link)  → URL: {wbg_buyer_card_url} / Text: {wbg_buyer_card_link_text}
     Block (.wbg-nachhaltigkeit__footer)       ← optional
       Text Link (.wbg-nachhaltigkeit__cta)
   ========================================================================== */

.wbg-nachhaltigkeit {
    padding: 80px 24px;
    background-color: var(--wbg-gruen, #009450);
    color: var(--wbg-text-light, #ffffff);
    overflow-x: clip;
}

.wbg-nachhaltigkeit__header {
    max-width: 880px;
    margin: 0 auto 56px;
    text-align: center;
}

.wbg-nachhaltigkeit__title,
.brxe-heading.wbg-nachhaltigkeit__title {
    max-width: 880px;
    margin: 0 auto 16px;
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-fs-section-title);
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff !important;
    text-align: center;
}

.wbg-nachhaltigkeit__header .brxe-heading,
.wbg-nachhaltigkeit__header :is(h1, h2, h3, h4),
.brxe-section:has(.wbg-nachhaltigkeit__grid) .wbg-nachhaltigkeit__header :is(.brxe-heading, h1, h2, h3, h4) {
    color: #ffffff !important;
}

.wbg-nachhaltigkeit__intro,
.wbg-nachhaltigkeit__intro .brxe-text-basic,
.wbg-nachhaltigkeit__intro .brxe-text {
    max-width: 752px;
    margin: 0 auto;
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-align: center;
}

/* Helle Variante (z. B. Quartiersentwicklung mit wbg-nachhaltigkeit-Klassen) */
.wbg-nachhaltigkeit.wbg-nachhaltigkeit--light .wbg-nachhaltigkeit__title,
.wbg-nachhaltigkeit.wbg-nachhaltigkeit--light .brxe-heading.wbg-nachhaltigkeit__title,
.wbg-nachhaltigkeit.wbg-nachhaltigkeit--light .wbg-nachhaltigkeit__header .brxe-heading,
.wbg-nachhaltigkeit.wbg-nachhaltigkeit--light .wbg-nachhaltigkeit__header :is(h1, h2, h3, h4) {
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

.wbg-nachhaltigkeit.wbg-nachhaltigkeit--light .wbg-nachhaltigkeit__intro,
.wbg-nachhaltigkeit.wbg-nachhaltigkeit--light .wbg-nachhaltigkeit__intro .brxe-text-basic,
.wbg-nachhaltigkeit.wbg-nachhaltigkeit--light .wbg-nachhaltigkeit__intro .brxe-text,
.wbg-nachhaltigkeit.wbg-nachhaltigkeit--light .wbg-nachhaltigkeit__intro p {
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

.wbg-nachhaltigkeit__intro p {
    margin: 0;
}

.wbg-nachhaltigkeit__grid,
.wbg-nachhaltigkeit__grid.wbg-nachhaltigkeit__grid,
.wbg-nachhaltigkeit__grid.brxe-block,
.wbg-nachhaltigkeit__grid.brxe-div {
    --wbg-nachhaltigkeit-card-width: min(315px, calc((100% - 60px) / 4));
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 20px;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    grid-template-columns: none !important;
}

.wbg-nachhaltigkeit__grid > .brx-query-trail {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.wbg-nachhaltigkeit__grid > .brxe-block:not(.wbg-buyers-card):not(.brx-query-trail),
.wbg-nachhaltigkeit__grid > .brxe-div:not(.wbg-buyers-card):not(.brx-query-trail),
.wbg-nachhaltigkeit__grid > .brxe-container:not(.wbg-buyers-card):not(.brx-query-trail) {
    display: contents !important;
}

.wbg-nachhaltigkeit__grid > .wbg-buyers-card,
.wbg-nachhaltigkeit__grid > .brxe-block.wbg-buyers-card,
.wbg-nachhaltigkeit__grid > .brxe-div.wbg-buyers-card {
    flex: 0 0 var(--wbg-nachhaltigkeit-card-width) !important;
    width: var(--wbg-nachhaltigkeit-card-width) !important;
    max-width: var(--wbg-nachhaltigkeit-card-width) !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.wbg-nachhaltigkeit__grid .wbg-buyers-card.wbg-buyers-card {
    width: 100% !important;
    max-width: 100% !important;
}

.wbg-nachhaltigkeit__slider {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.wbg-nachhaltigkeit__arrow,
.wbg-nachhaltigkeit__pagination {
    display: none;
}

.wbg-nachhaltigkeit__arrow {
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    color: var(--wbg-gruen-dunkel, #19502f);
    cursor: pointer;
    z-index: 5;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.08);
    transition: color 0.2s ease, transform 0.15s ease,
        box-shadow 0.2s ease, background-color 0.2s ease;
}

.wbg-nachhaltigkeit__arrow:hover,
.wbg-nachhaltigkeit__arrow:focus-visible {
    color: var(--wbg-gruen, #009450);
    background: #ffffff;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.16),
        0 2px 4px rgba(0, 0, 0, 0.1);
    outline: none;
}

.wbg-nachhaltigkeit__arrow:active {
    transform: translateY(-50%) scale(0.92);
}

.wbg-nachhaltigkeit__arrow:disabled,
.wbg-nachhaltigkeit__arrow.is-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.wbg-nachhaltigkeit__arrow svg {
    width: 22px;
    height: 22px;
    display: block;
}

.wbg-nachhaltigkeit__arrow--prev {
    left: 6px;
}

.wbg-nachhaltigkeit__arrow--next {
    right: 6px;
}

.wbg-nachhaltigkeit__pagination {
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 24px 0 0;
    margin: 0;
    list-style: none;
}

.wbg-nachhaltigkeit__pagination-item {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 0;
}

.wbg-nachhaltigkeit__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.wbg-nachhaltigkeit__dot.is-active {
    background: var(--wbg-neutral-50, #fdfcfb);
    width: 10px;
    height: 10px;
}

.wbg-nachhaltigkeit__footer {
    max-width: 880px;
    margin: 48px auto 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wbg-nachhaltigkeit__footer-text {
    margin: 0 0 24px;
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-fs-body);
    font-weight: 400;
    line-height: 1.5;
    color: #ffffff;
}

.wbg-nachhaltigkeit__cta,
.wbg-nachhaltigkeit__cta.brxe-text-link,
.wbg-nachhaltigkeit__cta a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-fs-cta);
    font-weight: 700;
    line-height: 1.05;
    color: var(--wbg-neutral-50, #fdfcfb);
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.25s ease, filter 0.25s ease;
    isolation: isolate;
}

.wbg-nachhaltigkeit__cta::before,
.wbg-nachhaltigkeit__cta a::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--wbg-gruen-dunkel, #19502f);
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
}

.wbg-nachhaltigkeit__cta:hover,
.wbg-nachhaltigkeit__cta:focus-visible,
.wbg-nachhaltigkeit__cta a:hover,
.wbg-nachhaltigkeit__cta a:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

@media (min-width: 1025px) {
    .wbg-nachhaltigkeit--overflow-slider {
        overflow-x: visible;
    }

    .wbg-nachhaltigkeit--overflow-slider .wbg-nachhaltigkeit__slider {
        max-width: 1320px;
        margin-left: auto;
        margin-right: auto;
        overflow: visible;
    }

    .wbg-nachhaltigkeit--overflow-slider .wbg-nachhaltigkeit__grid.wbg-nachhaltigkeit__grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 8px;
        padding: 0 0 12px 8px;
        gap: 20px;
        max-width: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wbg-nachhaltigkeit--overflow-slider .wbg-nachhaltigkeit__grid::-webkit-scrollbar {
        display: none;
    }

    .wbg-nachhaltigkeit--overflow-slider .wbg-nachhaltigkeit__grid > .wbg-buyers-card,
    .wbg-nachhaltigkeit--overflow-slider .wbg-nachhaltigkeit__grid > .brxe-block,
    .wbg-nachhaltigkeit--overflow-slider .wbg-nachhaltigkeit__grid > .brxe-div {
        flex: 0 0 calc((100% - 60px) / 4) !important;
        width: calc((100% - 60px) / 4) !important;
        max-width: calc((100% - 60px) / 4) !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }

    .wbg-nachhaltigkeit--overflow-slider .wbg-nachhaltigkeit__arrow,
    .wbg-nachhaltigkeit--overflow-slider .wbg-nachhaltigkeit__pagination {
        display: flex;
    }

    .wbg-nachhaltigkeit--overflow-slider .wbg-nachhaltigkeit__arrow--prev {
        left: -72px;
    }

    .wbg-nachhaltigkeit--overflow-slider .wbg-nachhaltigkeit__arrow--next {
        right: -72px;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-nachhaltigkeit {
        padding: 64px 32px;
    }

    .wbg-nachhaltigkeit__header {
        margin-bottom: 40px;
    }

    .wbg-nachhaltigkeit--compact-slider {
        overflow-x: clip;
    }

    .wbg-nachhaltigkeit--compact-slider .wbg-nachhaltigkeit__grid.wbg-nachhaltigkeit__grid,
    .wbg-nachhaltigkeit--compact-slider .wbg-nachhaltigkeit__grid.brxe-block,
    .wbg-nachhaltigkeit--compact-slider .wbg-nachhaltigkeit__grid.brxe-div {
        --wbg-nachhaltigkeit-card-width: calc((100% - 16px) / 2);
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 32px;
        padding: 0 32px 12px;
        gap: 16px;
        max-width: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wbg-nachhaltigkeit--compact-slider .wbg-nachhaltigkeit__grid::-webkit-scrollbar {
        display: none;
    }

    .wbg-nachhaltigkeit--compact-slider .wbg-nachhaltigkeit__grid > .wbg-buyers-card,
    .wbg-nachhaltigkeit--compact-slider .wbg-nachhaltigkeit__grid > .brxe-block.wbg-buyers-card,
    .wbg-nachhaltigkeit--compact-slider .wbg-nachhaltigkeit__grid > .brxe-div.wbg-buyers-card,
    .wbg-nachhaltigkeit--compact-slider .wbg-nachhaltigkeit__grid > .brxe-block,
    .wbg-nachhaltigkeit--compact-slider .wbg-nachhaltigkeit__grid > .brxe-div {
        flex: 0 0 var(--wbg-nachhaltigkeit-card-width) !important;
        width: var(--wbg-nachhaltigkeit-card-width) !important;
        max-width: var(--wbg-nachhaltigkeit-card-width) !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }

    .wbg-nachhaltigkeit--compact-slider .wbg-nachhaltigkeit__arrow,
    .wbg-nachhaltigkeit--compact-slider .wbg-nachhaltigkeit__pagination {
        display: flex;
    }
}

@media (max-width: 640px) {
    .wbg-nachhaltigkeit {
        padding: 56px 0;
        overflow-x: hidden;
    }

    .wbg-nachhaltigkeit__header {
        margin-bottom: 32px;
        padding: 0 24px;
        align-items: flex-start !important;
        text-align: left !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .wbg-nachhaltigkeit__header > * {
        text-align: left !important;
    }

    .wbg-nachhaltigkeit__title,
    .brxe-heading.wbg-nachhaltigkeit__title,
    .wbg-nachhaltigkeit__header .brxe-heading,
    .wbg-nachhaltigkeit__header :is(h1, h2, h3, h4) {
        text-align: left !important;
        margin: 0 0 16px !important;
        max-width: none !important;
        color: #ffffff !important;
    }

    .wbg-nachhaltigkeit__intro,
    .wbg-nachhaltigkeit__intro.wbg-nachhaltigkeit__intro,
    .brxe-text-basic.wbg-nachhaltigkeit__intro,
    .wbg-nachhaltigkeit__intro .brxe-text-basic,
    .wbg-nachhaltigkeit__intro .brxe-text,
    .wbg-nachhaltigkeit__intro p,
    .brxe-section.wbg-nachhaltigkeit .brxe-text-basic.wbg-nachhaltigkeit__intro {
        overflow-wrap: break-word;
        hyphens: auto;
        text-align: left !important;
        margin: 0 !important;
        max-width: none !important;
        font-size: var(--wbg-fs-body) !important;
        line-height: 1.5 !important;
        letter-spacing: 0.01em !important;
        color: var(--wbg-neutral-50, #fdfcfb) !important;
    }

    /* Helle Variante: wbg-nachhaltigkeit--light an der Section (z. B. Quartiersentwicklung) */
    .wbg-nachhaltigkeit.wbg-nachhaltigkeit--light .wbg-nachhaltigkeit__title,
    .wbg-nachhaltigkeit.wbg-nachhaltigkeit--light .brxe-heading.wbg-nachhaltigkeit__title,
    .wbg-nachhaltigkeit.wbg-nachhaltigkeit--light .wbg-nachhaltigkeit__header .brxe-heading,
    .wbg-nachhaltigkeit.wbg-nachhaltigkeit--light .wbg-nachhaltigkeit__header :is(h1, h2, h3, h4),
    .wbg-nachhaltigkeit.wbg-nachhaltigkeit--light .wbg-nachhaltigkeit__intro,
    .wbg-nachhaltigkeit.wbg-nachhaltigkeit--light .wbg-nachhaltigkeit__intro .brxe-text-basic,
    .wbg-nachhaltigkeit.wbg-nachhaltigkeit--light .wbg-nachhaltigkeit__intro .brxe-text,
    .wbg-nachhaltigkeit.wbg-nachhaltigkeit--light .wbg-nachhaltigkeit__intro p {
        color: var(--wbg-gruen-dunkel, #19502f) !important;
    }

    .wbg-nachhaltigkeit__grid.wbg-nachhaltigkeit__grid,
    .wbg-nachhaltigkeit__grid.brxe-block,
    .wbg-nachhaltigkeit__grid.brxe-div {
        --wbg-nachhaltigkeit-card-width: calc(100% - 48px);
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 24px;
        padding: 0 24px 12px;
        gap: 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .wbg-nachhaltigkeit__grid::-webkit-scrollbar {
        display: none;
    }

    .wbg-nachhaltigkeit__grid > .wbg-buyers-card,
    .wbg-nachhaltigkeit__grid > .brxe-block.wbg-buyers-card,
    .wbg-nachhaltigkeit__grid > .brxe-div.wbg-buyers-card,
    .wbg-nachhaltigkeit__grid > .brxe-block,
    .wbg-nachhaltigkeit__grid > .brxe-div {
        flex: 0 0 var(--wbg-nachhaltigkeit-card-width) !important;
        width: var(--wbg-nachhaltigkeit-card-width) !important;
        max-width: var(--wbg-nachhaltigkeit-card-width) !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }

    .wbg-nachhaltigkeit__arrow,
    .wbg-nachhaltigkeit__pagination {
        display: flex;
    }

    .wbg-nachhaltigkeit__footer {
        margin-top: 40px;
        padding: 0 24px;
    }
}


/* ==========================================================================
   SECTION "Soziales Engagement" – Seite Über die wbg (Figma 1121:1724)
   --------------------------------------------------------------------------
   Weiße Section, zentrierte grüne Feature-Karte (1039×482) mit Schatten.
   Copy links (Titel, Text, unterstrichener Link), Bild rechts mit diagonaler
   linker Kante – Layout wie Mieter-Service-Karten (.wbg-tenants-card).

   Bricks-Struktur:
   Section (.wbg-soziales-engagement)
     Block (.wbg-soziales-engagement__inner)
       Block (.wbg-soziales-engagement__grid)     ← mehrere Cards, Slider ab 2
         Block (.wbg-soziales-engagement__card)
           Block (.wbg-soziales-engagement__copy)
             Heading h3 (.wbg-soziales-engagement__title)
             Basic Text (.wbg-soziales-engagement__body)
             Text Link (.wbg-soziales-engagement__link)
           Block (.wbg-soziales-engagement__media)
             Image
   ========================================================================== */

.wbg-soziales-engagement,
.wbg-soziales-engagement.wbg-soziales-engagement,
section.wbg-soziales-engagement,
.brxe-section:has(.wbg-soziales-engagement__card),
.brxe-section:has(.wbg-soziales-engagement__inner) {
    padding: clamp(72px, 8vw, 100px) clamp(24px, 14.7vw, 212px) !important;
    background-color: #ffffff !important;
    color: var(--wbg-gruen-dunkel, #19502f);
    overflow-x: clip;
}

.wbg-soziales-engagement__inner,
.wbg-soziales-engagement__inner.wbg-soziales-engagement__inner,
.brxe-block.wbg-soziales-engagement__inner,
.brxe-div.wbg-soziales-engagement__inner {
    display: block !important;
    max-width: 1040px;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.wbg-soziales-engagement__grid,
.wbg-soziales-engagement__grid.wbg-soziales-engagement__grid,
.brxe-block.wbg-soziales-engagement__grid,
.brxe-div.wbg-soziales-engagement__grid {
    display: block !important;
    width: 100% !important;
    max-width: 1040px;
    margin: 0 auto !important;
    padding: 0 !important;
}

.wbg-soziales-engagement__grid > .brx-query-trail {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.wbg-soziales-engagement__grid > .brxe-block:not(.wbg-soziales-engagement__card):not(.brx-query-trail),
.wbg-soziales-engagement__grid > .brxe-div:not(.wbg-soziales-engagement__card):not(.brx-query-trail),
.wbg-soziales-engagement__grid > .brxe-container:not(.wbg-soziales-engagement__card):not(.brx-query-trail) {
    display: contents !important;
}

.wbg-soziales-engagement__card,
.wbg-soziales-engagement__card.wbg-soziales-engagement__card,
.brxe-block.wbg-soziales-engagement__card,
.brxe-div.wbg-soziales-engagement__card {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr) !important;
    align-items: stretch !important;
    gap: 0 !important;
    min-height: clamp(360px, 33.5vw, 482px);
    background-color: var(--wbg-gruen, #009450);
    border-radius: var(--wbg-radius, 10px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    color: var(--wbg-text-light, #ffffff);
    isolation: isolate;
}

/* Fallback wenn __card fehlt: inner wird zur Karte */
.wbg-soziales-engagement__inner:not(:has(.wbg-soziales-engagement__card)):has(.wbg-soziales-engagement__media) {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr) !important;
    align-items: stretch !important;
    gap: 0 !important;
    min-height: clamp(360px, 33.5vw, 482px);
    background-color: var(--wbg-gruen, #009450);
    border-radius: var(--wbg-radius, 10px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    color: var(--wbg-text-light, #ffffff);
    isolation: isolate;
}

.wbg-soziales-engagement__copy,
.brxe-block.wbg-soziales-engagement__copy,
.brxe-div.wbg-soziales-engagement__copy {
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 1;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 100%;
    padding: clamp(40px, 5vw, 56px) clamp(24px, 4vw, 59px) clamp(32px, 4vw, 48px);
    box-sizing: border-box;
}

.wbg-soziales-engagement__title,
.brxe-heading.wbg-soziales-engagement__title,
.wbg-soziales-engagement__copy .brxe-heading,
.wbg-soziales-engagement__copy :is(h1, h2, h3, h4) {
    margin: 0 0 clamp(20px, 2.5vw, 24px) !important;
    max-width: 520px;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-card-title) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: var(--wbg-text-light, #ffffff) !important;
    text-align: left !important;
}

.wbg-soziales-engagement__body,
.wbg-soziales-engagement__body.wbg-soziales-engagement__body,
.wbg-soziales-engagement__body .brxe-text-basic,
.wbg-soziales-engagement__body .brxe-text {
    flex: 1 1 auto;
    max-width: 487px;
    margin: 0 0 24px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.01em;
    color: var(--wbg-text-light, #ffffff) !important;
}

.wbg-soziales-engagement__body p {
    margin: 0;
}

.wbg-soziales-engagement__link,
.wbg-soziales-engagement__link.brxe-text-link,
.wbg-soziales-engagement__link a {
    margin-top: auto;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-link) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--wbg-text-light, #ffffff) !important;
    text-decoration: underline !important;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: opacity 0.2s ease;
}

.wbg-soziales-engagement__link:hover,
.wbg-soziales-engagement__link:focus-visible,
.wbg-soziales-engagement__link a:hover,
.wbg-soziales-engagement__link a:focus-visible {
    opacity: 0.85;
}

.wbg-soziales-engagement__media,
.wbg-soziales-engagement__media.wbg-soziales-engagement__media,
.brxe-block.wbg-soziales-engagement__media,
.brxe-div.wbg-soziales-engagement__media,
.wbg-soziales-engagement__card > *:nth-child(2):has(.brxe-image),
.wbg-soziales-engagement__card > *:nth-child(2):has(img),
.wbg-soziales-engagement__inner > *:nth-child(2):has(.brxe-image):not(.wbg-soziales-engagement__card),
.wbg-soziales-engagement__inner > *:nth-child(2):has(img):not(.wbg-soziales-engagement__card) {
    position: relative !important;
    grid-column: 2;
    grid-row: 1;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 100%;
    height: auto !important;
    overflow: hidden !important;
    z-index: 0;
    clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.wbg-soziales-engagement__media img,
.wbg-soziales-engagement__media img.brxe-image,
.wbg-soziales-engagement__media .brxe-image img,
.wbg-soziales-engagement__media picture,
.wbg-soziales-engagement__media picture img,
.wbg-soziales-engagement__card > *:nth-child(2) img.brxe-image,
.wbg-soziales-engagement__card > *:nth-child(2) .brxe-image img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 115% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    left: -8% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: 42% center !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    transform: none !important;
}

.wbg-soziales-engagement__media .brxe-image,
.wbg-soziales-engagement__media figure,
.wbg-soziales-engagement__media picture,
.wbg-soziales-engagement__media a:has(img),
.wbg-soziales-engagement__card > *:nth-child(2) .brxe-image:not(img) {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.wbg-soziales-engagement__slider {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.wbg-soziales-engagement__arrow,
.wbg-soziales-engagement__pagination {
    display: none;
}

.wbg-soziales-engagement__arrow {
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    color: var(--wbg-gruen-dunkel, #19502f);
    cursor: pointer;
    z-index: 5;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.08);
    transition: color 0.2s ease, transform 0.15s ease,
        box-shadow 0.2s ease, background-color 0.2s ease;
}

.wbg-soziales-engagement__arrow:hover,
.wbg-soziales-engagement__arrow:focus-visible {
    color: var(--wbg-gruen, #009450);
    background: #ffffff;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.16),
        0 2px 4px rgba(0, 0, 0, 0.1);
    outline: none;
}

.wbg-soziales-engagement__arrow:active {
    transform: translateY(-50%) scale(0.92);
}

.wbg-soziales-engagement__arrow:disabled,
.wbg-soziales-engagement__arrow.is-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.wbg-soziales-engagement__arrow svg {
    width: 22px;
    height: 22px;
    display: block;
}

.wbg-soziales-engagement__arrow--prev {
    left: 6px;
}

.wbg-soziales-engagement__arrow--next {
    right: 6px;
}

.wbg-soziales-engagement__pagination {
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 24px 0 0;
    margin: 0;
    list-style: none;
}

.wbg-soziales-engagement__pagination-item {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 0;
}

.wbg-soziales-engagement__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(25, 80, 47, 0.35);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.wbg-soziales-engagement__dot.is-active {
    background: var(--wbg-gruen-dunkel, #19502f);
    width: 10px;
    height: 10px;
}

@media (min-width: 1025px) {
    .wbg-soziales-engagement--overflow-slider {
        overflow-x: visible;
    }

    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__slider {
        max-width: 1040px;
        margin-left: auto;
        margin-right: auto;
        overflow: visible;
    }

    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__grid.wbg-soziales-engagement__grid,
    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__grid.brxe-block,
    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__grid.brxe-div {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0;
        padding: 0 0 12px;
        gap: 20px;
        max-width: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__grid::-webkit-scrollbar {
        display: none;
    }

    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__grid > .wbg-soziales-engagement__card,
    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__grid > .brxe-block.wbg-soziales-engagement__card,
    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__grid > .brxe-div.wbg-soziales-engagement__card {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }

    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__arrow,
    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__pagination {
        display: flex;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-soziales-engagement,
    section.wbg-soziales-engagement,
    .brxe-section:has(.wbg-soziales-engagement__card) {
        padding: 64px 32px !important;
    }

    .wbg-soziales-engagement--compact-slider {
        overflow-x: clip;
    }

    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__grid.wbg-soziales-engagement__grid,
    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__grid.brxe-block,
    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__grid.brxe-div {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0;
        padding: 0 0 12px;
        gap: 16px;
        max-width: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__grid::-webkit-scrollbar {
        display: none;
    }

    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__grid > .wbg-soziales-engagement__card,
    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__grid > .brxe-block.wbg-soziales-engagement__card,
    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__grid > .brxe-div.wbg-soziales-engagement__card {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }

    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__arrow,
    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__pagination {
        display: flex;
    }

    .wbg-soziales-engagement__copy,
    .brxe-block.wbg-soziales-engagement__copy {
        padding: 40px 24px 32px;
    }
}

@media (max-width: 640px) {
    .wbg-soziales-engagement,
    section.wbg-soziales-engagement,
    .brxe-section:has(.wbg-soziales-engagement__card) {
        --wbg-soziales-gutter: 20px;
        padding: 48px 0 !important;
        overflow-x: hidden;
    }

    .wbg-soziales-engagement__inner,
    .wbg-soziales-engagement__inner.wbg-soziales-engagement__inner,
    .brxe-block.wbg-soziales-engagement__inner,
    .brxe-div.wbg-soziales-engagement__inner {
        max-width: none !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .wbg-soziales-engagement__inner:not(:has(.wbg-soziales-engagement__slider)),
    .wbg-soziales-engagement__inner.wbg-soziales-engagement__inner:not(:has(.wbg-soziales-engagement__slider)) {
        padding: 0 var(--wbg-soziales-gutter) !important;
    }

    .wbg-soziales-engagement__slider {
        width: 100%;
        max-width: none;
        overflow: hidden;
        box-sizing: border-box;
    }

    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__slider,
    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__slider {
        padding-inline: var(--wbg-soziales-gutter);
    }

    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__grid.wbg-soziales-engagement__grid,
    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__grid.brxe-block,
    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__grid.brxe-div,
    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__grid.wbg-soziales-engagement__grid,
    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__grid.brxe-block,
    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__grid.brxe-div {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        grid-template-columns: none !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        padding: 0 0 12px !important;
        gap: 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__grid::-webkit-scrollbar,
    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__grid::-webkit-scrollbar {
        display: none;
    }

    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__grid > .wbg-soziales-engagement__card,
    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__grid > .wbg-soziales-engagement__card.wbg-soziales-engagement__card,
    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__grid > .brxe-block.wbg-soziales-engagement__card,
    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__grid > .brxe-div.wbg-soziales-engagement__card,
    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__grid > .wbg-soziales-engagement__card,
    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__grid > .wbg-soziales-engagement__card.wbg-soziales-engagement__card,
    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__grid > .brxe-block.wbg-soziales-engagement__card,
    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__grid > .brxe-div.wbg-soziales-engagement__card {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__arrow,
    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__pagination,
    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__arrow,
    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__pagination {
        display: flex;
    }

    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__arrow--prev,
    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__arrow--prev {
        left: 4px;
    }

    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__arrow--next,
    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__arrow--next {
        right: 4px;
    }

    .wbg-soziales-engagement--compact-slider .wbg-soziales-engagement__pagination,
    .wbg-soziales-engagement--overflow-slider .wbg-soziales-engagement__pagination {
        padding-inline: var(--wbg-soziales-gutter);
    }

    .wbg-soziales-engagement__card,
    .wbg-soziales-engagement__card.wbg-soziales-engagement__card,
    .brxe-block.wbg-soziales-engagement__card,
    .brxe-div.wbg-soziales-engagement__card,
    .wbg-soziales-engagement__inner:not(:has(.wbg-soziales-engagement__card)):has(.wbg-soziales-engagement__media) {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        min-height: 0;
        box-sizing: border-box;
    }

    .wbg-soziales-engagement__copy,
    .wbg-soziales-engagement__copy.wbg-soziales-engagement__copy,
    .brxe-block.wbg-soziales-engagement__copy,
    .brxe-div.wbg-soziales-engagement__copy {
        grid-column: auto !important;
        grid-row: auto !important;
        order: 1;
        width: 100% !important;
        min-height: 0 !important;
        padding: 32px 24px 24px !important;
    }

    .wbg-soziales-engagement__body,
    .wbg-soziales-engagement__body .brxe-text-basic,
    .wbg-soziales-engagement__body .brxe-text {
        max-width: none !important;
        margin-bottom: 20px !important;
    }

    .wbg-soziales-engagement__media,
    .wbg-soziales-engagement__media.wbg-soziales-engagement__media,
    .brxe-block.wbg-soziales-engagement__media,
    .brxe-div.wbg-soziales-engagement__media,
    .wbg-soziales-engagement__card > *:nth-child(2):has(.brxe-image),
    .wbg-soziales-engagement__card > *:nth-child(2):has(img) {
        position: relative !important;
        grid-column: auto !important;
        grid-row: auto !important;
        order: 2;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        min-height: 220px !important;
        height: 220px !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }

    .wbg-soziales-engagement__media img,
    .wbg-soziales-engagement__media .brxe-image img,
    .wbg-soziales-engagement__media picture img {
        left: 0 !important;
        width: 100% !important;
        object-position: center center !important;
    }
}


/* ==========================================================================
   SECTION "Quartiersentwicklung" – Seite Über die wbg (Figma 1121:1276 / 1155:1723)
   --------------------------------------------------------------------------
   Weiße Section, zentrierter Header, 3 Karten nebeneinander (.wbg-buyers-card).
   Slider: Desktop ab 5 Karten (.wbg-quartiersentwicklung--overflow-slider),
   Tablet/Mobile ab 2 Karten (.wbg-quartiersentwicklung--compact-slider) via wbg-card-slider.js

   Bricks-Struktur (statisch, später Query Loop am Grid):
   Section (.wbg-quartiersentwicklung)
     Block (.wbg-quartiersentwicklung__header)
       Heading h3 (.wbg-quartiersentwicklung__title)
       Basic Text (.wbg-quartiersentwicklung__intro)
     Block (.wbg-quartiersentwicklung__grid)
       Block (.wbg-buyers-card) ×3
         Block (.wbg-buyers-card__media) → Image
         Block (.wbg-buyers-card__body)
           Basic Text (.wbg-buyers-card__desc)
           Text Link (.wbg-quartiersentwicklung-card__link) → „Download →“
     Block (.wbg-quartiersentwicklung__footer)       ← optional
       Text Link (.wbg-quartiersentwicklung__cta)    → „Alle Downloads anzeigen →“
   ========================================================================== */

.wbg-quartiersentwicklung {
    padding: 80px 24px;
    background-color: #ffffff;
    color: var(--wbg-gruen-dunkel, #19502f);
    overflow-x: clip;
}

.wbg-quartiersentwicklung__header {
    max-width: 880px;
    margin: 0 auto 56px;
    text-align: center;
}

.wbg-quartiersentwicklung__title,
.brxe-heading.wbg-quartiersentwicklung__title {
    max-width: 880px;
    margin: 0 auto 16px;
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-fs-section-title);
    font-weight: 700;
    line-height: 1.1;
    color: var(--wbg-gruen-dunkel, #19502f);
    text-align: center;
}

.wbg-quartiersentwicklung__intro,
.wbg-quartiersentwicklung__intro .brxe-text-basic,
.wbg-quartiersentwicklung__intro .brxe-text {
    max-width: 854px;
    margin: 0 auto;
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--wbg-gruen-dunkel, #19502f);
    text-align: center;
}

.wbg-quartiersentwicklung__intro p {
    margin: 0;
}

.wbg-quartiersentwicklung__grid,
.wbg-quartiersentwicklung__grid.wbg-quartiersentwicklung__grid,
.wbg-quartiersentwicklung__grid.brxe-block,
.wbg-quartiersentwicklung__grid.brxe-div {
    --wbg-quartiersentwicklung-card-width: min(348px, calc((100% - 64px) / 3));
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 32px;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    grid-template-columns: none !important;
}

.wbg-quartiersentwicklung__grid > .brx-query-trail {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.wbg-quartiersentwicklung__grid > .brxe-block:not(.wbg-buyers-card):not(.brx-query-trail),
.wbg-quartiersentwicklung__grid > .brxe-div:not(.wbg-buyers-card):not(.brx-query-trail),
.wbg-quartiersentwicklung__grid > .brxe-container:not(.wbg-buyers-card):not(.brx-query-trail) {
    display: contents !important;
}

.wbg-quartiersentwicklung__grid > .wbg-buyers-card,
.wbg-quartiersentwicklung__grid > .brxe-block.wbg-buyers-card,
.wbg-quartiersentwicklung__grid > .brxe-div.wbg-buyers-card {
    flex: 0 0 var(--wbg-quartiersentwicklung-card-width) !important;
    width: var(--wbg-quartiersentwicklung-card-width) !important;
    max-width: var(--wbg-quartiersentwicklung-card-width) !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.wbg-quartiersentwicklung__grid .wbg-buyers-card.wbg-buyers-card {
    width: 100% !important;
    max-width: 100% !important;
}

/* Karten ohne Titel (nur Text + Download-Link) */
.wbg-quartiersentwicklung .wbg-buyers-card__title:empty,
.wbg-quartiersentwicklung .wbg-buyers-card__title:has(> .brxe-text-basic:empty),
.wbg-quartiersentwicklung .wbg-buyers-card__title:has(> .brxe-text:empty),
.wbg-quartiersentwicklung .brxe-heading.wbg-buyers-card__title:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wbg-quartiersentwicklung .wbg-buyers-card__desc {
    margin-bottom: 0;
}

/* Card-Download-Link – gleiches Styling wie .wbg-buyers-card__link */
.wbg-quartiersentwicklung-card__link,
.wbg-quartiersentwicklung-card__link.brxe-text-link,
.wbg-quartiersentwicklung-card__link a {
    margin-top: auto;
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-fs-body);
    font-weight: 400;
    line-height: 24px;
    color: var(--wbg-neutral-50, #fdfcfb);
    text-decoration: underline !important;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: opacity 0.2s ease;
}

.wbg-quartiersentwicklung-card__link:hover,
.wbg-quartiersentwicklung-card__link:focus-visible,
.wbg-quartiersentwicklung-card__link a:hover,
.wbg-quartiersentwicklung-card__link a:focus-visible {
    opacity: 0.85;
}

.wbg-quartiersentwicklung__slider {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.wbg-quartiersentwicklung__arrow,
.wbg-quartiersentwicklung__pagination {
    display: none;
}

.wbg-quartiersentwicklung__arrow {
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    color: var(--wbg-gruen-dunkel, #19502f);
    cursor: pointer;
    z-index: 5;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.08);
    transition: color 0.2s ease, transform 0.15s ease,
        box-shadow 0.2s ease, background-color 0.2s ease;
}

.wbg-quartiersentwicklung__arrow:hover,
.wbg-quartiersentwicklung__arrow:focus-visible {
    color: var(--wbg-gruen, #009450);
    background: #ffffff;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.16),
        0 2px 4px rgba(0, 0, 0, 0.1);
    outline: none;
}

.wbg-quartiersentwicklung__arrow:active {
    transform: translateY(-50%) scale(0.92);
}

.wbg-quartiersentwicklung__arrow:disabled,
.wbg-quartiersentwicklung__arrow.is-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.wbg-quartiersentwicklung__arrow svg {
    width: 22px;
    height: 22px;
    display: block;
}

.wbg-quartiersentwicklung__arrow--prev {
    left: 6px;
}

.wbg-quartiersentwicklung__arrow--next {
    right: 6px;
}

.wbg-quartiersentwicklung__pagination {
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 24px 0 0;
    margin: 0;
    list-style: none;
}

.wbg-quartiersentwicklung__pagination-item {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 0;
}

.wbg-quartiersentwicklung__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(25, 80, 47, 0.35);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.wbg-quartiersentwicklung__dot.is-active {
    background: var(--wbg-gruen-dunkel, #19502f);
    width: 10px;
    height: 10px;
}

.wbg-quartiersentwicklung__footer {
    max-width: 880px;
    margin: 48px auto 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Footer-CTA – Gradient-Parallelogramm (Figma BTN_Secondary) */
.wbg-quartiersentwicklung__cta,
.wbg-quartiersentwicklung__cta.brxe-text-link,
.wbg-quartiersentwicklung__cta a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-fs-cta);
    font-weight: 700;
    line-height: 1.05;
    color: var(--wbg-neutral-50, #fdfcfb);
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.25s ease, filter 0.25s ease;
    isolation: isolate;
}

.wbg-quartiersentwicklung__cta::before,
.wbg-quartiersentwicklung__cta a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--wbg-gruen, #009450) 73%,
        var(--wbg-gruen-akzent, #afcc46) 100%
    );
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
}

.wbg-quartiersentwicklung__cta:hover,
.wbg-quartiersentwicklung__cta:focus-visible,
.wbg-quartiersentwicklung__cta a:hover,
.wbg-quartiersentwicklung__cta a:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

@media (min-width: 1025px) {
    .wbg-quartiersentwicklung--overflow-slider {
        overflow-x: visible;
    }

    .wbg-quartiersentwicklung--overflow-slider .wbg-quartiersentwicklung__slider {
        max-width: 1320px;
        margin-left: auto;
        margin-right: auto;
        overflow: visible;
    }

    .wbg-quartiersentwicklung--overflow-slider .wbg-quartiersentwicklung__grid.wbg-quartiersentwicklung__grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 8px;
        padding: 0 0 12px 8px;
        gap: 32px;
        max-width: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wbg-quartiersentwicklung--overflow-slider .wbg-quartiersentwicklung__grid::-webkit-scrollbar {
        display: none;
    }

    .wbg-quartiersentwicklung--overflow-slider .wbg-quartiersentwicklung__grid > .wbg-buyers-card,
    .wbg-quartiersentwicklung--overflow-slider .wbg-quartiersentwicklung__grid > .brxe-block,
    .wbg-quartiersentwicklung--overflow-slider .wbg-quartiersentwicklung__grid > .brxe-div {
        flex: 0 0 calc((100% - 64px) / 3) !important;
        width: calc((100% - 64px) / 3) !important;
        max-width: calc((100% - 64px) / 3) !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }

    .wbg-quartiersentwicklung--overflow-slider .wbg-quartiersentwicklung__arrow,
    .wbg-quartiersentwicklung--overflow-slider .wbg-quartiersentwicklung__pagination {
        display: flex;
    }

    .wbg-quartiersentwicklung--overflow-slider .wbg-quartiersentwicklung__arrow--prev {
        left: -72px;
    }

    .wbg-quartiersentwicklung--overflow-slider .wbg-quartiersentwicklung__arrow--next {
        right: -72px;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-quartiersentwicklung {
        padding: 64px 32px;
    }

    .wbg-quartiersentwicklung__header {
        margin-bottom: 40px;
    }

    .wbg-quartiersentwicklung--compact-slider {
        overflow-x: clip;
    }

    .wbg-quartiersentwicklung--compact-slider .wbg-quartiersentwicklung__grid.wbg-quartiersentwicklung__grid,
    .wbg-quartiersentwicklung--compact-slider .wbg-quartiersentwicklung__grid.brxe-block,
    .wbg-quartiersentwicklung--compact-slider .wbg-quartiersentwicklung__grid.brxe-div {
        --wbg-quartiersentwicklung-card-width: calc((100% - 16px) / 2);
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 32px;
        padding: 0 32px 12px;
        gap: 16px;
        max-width: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wbg-quartiersentwicklung--compact-slider .wbg-quartiersentwicklung__grid::-webkit-scrollbar {
        display: none;
    }

    .wbg-quartiersentwicklung--compact-slider .wbg-quartiersentwicklung__grid > .wbg-buyers-card,
    .wbg-quartiersentwicklung--compact-slider .wbg-quartiersentwicklung__grid > .brxe-block.wbg-buyers-card,
    .wbg-quartiersentwicklung--compact-slider .wbg-quartiersentwicklung__grid > .brxe-div.wbg-buyers-card,
    .wbg-quartiersentwicklung--compact-slider .wbg-quartiersentwicklung__grid > .brxe-block,
    .wbg-quartiersentwicklung--compact-slider .wbg-quartiersentwicklung__grid > .brxe-div {
        flex: 0 0 var(--wbg-quartiersentwicklung-card-width) !important;
        width: var(--wbg-quartiersentwicklung-card-width) !important;
        max-width: var(--wbg-quartiersentwicklung-card-width) !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }

    .wbg-quartiersentwicklung--compact-slider .wbg-quartiersentwicklung__arrow,
    .wbg-quartiersentwicklung--compact-slider .wbg-quartiersentwicklung__pagination {
        display: flex;
    }
}

@media (max-width: 640px) {
    .wbg-quartiersentwicklung {
        padding: 56px 0;
        overflow-x: hidden;
    }

    .wbg-quartiersentwicklung__header {
        margin-bottom: 32px;
        padding: 0 24px;
        align-items: flex-start !important;
        text-align: left !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .wbg-quartiersentwicklung__header > * {
        text-align: left !important;
    }

    .wbg-quartiersentwicklung__title,
    .brxe-heading.wbg-quartiersentwicklung__title,
    .wbg-quartiersentwicklung__header .brxe-heading,
    .wbg-quartiersentwicklung__header :is(h1, h2, h3, h4) {
        text-align: left !important;
        margin: 0 0 16px !important;
        max-width: none !important;
    }

    .wbg-quartiersentwicklung__intro,
    .wbg-quartiersentwicklung__intro.wbg-quartiersentwicklung__intro,
    .brxe-text-basic.wbg-quartiersentwicklung__intro,
    .wbg-quartiersentwicklung__intro .brxe-text-basic,
    .wbg-quartiersentwicklung__intro .brxe-text,
    .wbg-quartiersentwicklung__intro p,
    .brxe-section.wbg-quartiersentwicklung .brxe-text-basic.wbg-quartiersentwicklung__intro {
        overflow-wrap: break-word;
        hyphens: auto;
        text-align: left !important;
        margin: 0 !important;
        max-width: none !important;
        font-size: var(--wbg-fs-body) !important;
        line-height: 1.5 !important;
        letter-spacing: 0.01em !important;
        color: var(--wbg-gruen-dunkel, #19502f) !important;
    }

    .wbg-quartiersentwicklung__grid.wbg-quartiersentwicklung__grid,
    .wbg-quartiersentwicklung__grid.brxe-block,
    .wbg-quartiersentwicklung__grid.brxe-div {
        --wbg-quartiersentwicklung-card-width: calc(100% - 48px);
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 24px;
        padding: 0 24px 12px;
        gap: 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .wbg-quartiersentwicklung__grid::-webkit-scrollbar {
        display: none;
    }

    .wbg-quartiersentwicklung__grid > .wbg-buyers-card,
    .wbg-quartiersentwicklung__grid > .brxe-block.wbg-buyers-card,
    .wbg-quartiersentwicklung__grid > .brxe-div.wbg-buyers-card,
    .wbg-quartiersentwicklung__grid > .brxe-block,
    .wbg-quartiersentwicklung__grid > .brxe-div {
        flex: 0 0 var(--wbg-quartiersentwicklung-card-width) !important;
        width: var(--wbg-quartiersentwicklung-card-width) !important;
        max-width: var(--wbg-quartiersentwicklung-card-width) !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }

    .wbg-quartiersentwicklung__arrow,
    .wbg-quartiersentwicklung__pagination {
        display: flex;
    }

    .wbg-quartiersentwicklung__footer {
        margin-top: 40px;
        padding: 0 24px;
    }
}


/* ==========================================================================
   SECTION "Abgeschlossene Projekte" – Seite Über die wbg (Figma 1121:1276 / 1155:1726)
   --------------------------------------------------------------------------
   Center-Carousel (Desktop + Mobile): aktive Karte groß in der Mitte, Nachbarn kleiner.
   Endlosschleife via wbg-card-slider.js (Center-Carousel, ab 2 Karten).

   Bricks-Struktur (statisch, später Query Loop am Grid):
   Section (.wbg-abgeschlossene-projekte)
     Block (.wbg-abgeschlossene-projekte__header)
       Heading h3 (.wbg-abgeschlossene-projekte__title)
       Basic Text (.wbg-abgeschlossene-projekte__intro)
     Block (.wbg-abgeschlossene-projekte__grid)
       Block (.wbg-abgeschlossene-projekte__card) ×n
         Block (.wbg-abgeschlossene-projekte__media) → Image
         Text Link (.wbg-abgeschlossene-projekte__link) → „Referenz 2025 →“
     Block (.wbg-abgeschlossene-projekte__footer)
       Text Link (.wbg-abgeschlossene-projekte__cta) → „Alle Referenzen anzeigen →“
   ========================================================================== */

.wbg-abgeschlossene-projekte {
    padding: 80px 24px;
    background-color: var(--wbg-neutral-100, #f8f7f5);
    color: var(--wbg-gruen-dunkel, #19502f);
    overflow-x: clip;
}

.wbg-abgeschlossene-projekte__header {
    max-width: 880px;
    margin: 0 auto 56px;
    text-align: center;
}

.wbg-abgeschlossene-projekte__title,
.brxe-heading.wbg-abgeschlossene-projekte__title {
    max-width: 880px;
    margin: 0 auto 16px;
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-fs-section-title);
    font-weight: 700;
    line-height: 1.1;
    color: var(--wbg-gruen-dunkel, #19502f);
    text-align: center;
}

.wbg-abgeschlossene-projekte__intro,
.wbg-abgeschlossene-projekte__intro .brxe-text-basic,
.wbg-abgeschlossene-projekte__intro .brxe-text {
    max-width: 854px;
    margin: 0 auto;
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-fs-body);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--wbg-gruen-dunkel, #19502f);
    text-align: center;
}

.wbg-abgeschlossene-projekte__intro p {
    margin: 0;
}

.wbg-abgeschlossene-projekte__grid,
.wbg-abgeschlossene-projekte__grid.wbg-abgeschlossene-projekte__grid,
.wbg-abgeschlossene-projekte__grid.brxe-block,
.wbg-abgeschlossene-projekte__grid.brxe-div {
    --wbg-abgeschlossene-projekte-slot: 338px;
    --wbg-abgeschlossene-projekte-side-width: 234px;
    --wbg-abgeschlossene-projekte-side-height: 289px;
    --wbg-abgeschlossene-projekte-active-width: 338px;
    --wbg-abgeschlossene-projekte-active-height: 416px;
    --wbg-abgeschlossene-projekte-center-pad: max(24px, calc(50% - (var(--wbg-abgeschlossene-projekte-slot) / 2)));
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: clamp(32px, 4.1vw, 59px);
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    grid-template-columns: none !important;
}

.wbg-abgeschlossene-projekte__grid > .brx-query-trail {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.wbg-abgeschlossene-projekte__grid > .brxe-block:not(.wbg-abgeschlossene-projekte__card):not(.brx-query-trail),
.wbg-abgeschlossene-projekte__grid > .brxe-div:not(.wbg-abgeschlossene-projekte__card):not(.brx-query-trail),
.wbg-abgeschlossene-projekte__grid > .brxe-container:not(.wbg-abgeschlossene-projekte__card):not(.brx-query-trail) {
    display: contents !important;
}

.wbg-abgeschlossene-projekte__card,
.wbg-abgeschlossene-projekte__card.wbg-abgeschlossene-projekte__card,
.brxe-block.wbg-abgeschlossene-projekte__card,
.brxe-div.wbg-abgeschlossene-projekte__card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 0 0 var(--wbg-abgeschlossene-projekte-slot);
    width: var(--wbg-abgeschlossene-projekte-slot);
    min-width: 0;
    box-sizing: border-box;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.wbg-abgeschlossene-projekte__media,
.wbg-abgeschlossene-projekte__media.wbg-abgeschlossene-projekte__media,
.brxe-block.wbg-abgeschlossene-projekte__media,
.brxe-div.wbg-abgeschlossene-projekte__media {
    position: relative;
    display: block !important;
    width: var(--wbg-abgeschlossene-projekte-side-width) !important;
    max-width: var(--wbg-abgeschlossene-projekte-side-width) !important;
    height: var(--wbg-abgeschlossene-projekte-side-height) !important;
    border-radius: 10px;
    overflow: hidden;
    background-color: rgba(25, 80, 47, 0.08);
    opacity: 0.6;
    transition:
        width 0.35s ease,
        height 0.35s ease,
        opacity 0.35s ease,
        max-width 0.35s ease;
}

.wbg-abgeschlossene-projekte__card.is-active .wbg-abgeschlossene-projekte__media,
.wbg-abgeschlossene-projekte__card.is-active.brxe-block .wbg-abgeschlossene-projekte__media,
.wbg-abgeschlossene-projekte__card.is-active .wbg-abgeschlossene-projekte__media.brxe-block,
.wbg-abgeschlossene-projekte__card.is-active .wbg-abgeschlossene-projekte__media.brxe-div {
    width: var(--wbg-abgeschlossene-projekte-active-width) !important;
    max-width: var(--wbg-abgeschlossene-projekte-active-width) !important;
    height: var(--wbg-abgeschlossene-projekte-active-height) !important;
    opacity: 1;
}

.wbg-abgeschlossene-projekte:not(.wbg-abgeschlossene-projekte--carousel) .wbg-abgeschlossene-projekte__card:only-child .wbg-abgeschlossene-projekte__media {
    width: var(--wbg-abgeschlossene-projekte-active-width);
    height: var(--wbg-abgeschlossene-projekte-active-height);
    opacity: 1;
}

.wbg-abgeschlossene-projekte__media > .brxe-image,
.wbg-abgeschlossene-projekte__media > figure,
.wbg-abgeschlossene-projekte__media > picture,
.wbg-abgeschlossene-projekte__media > a:has(img),
.wbg-abgeschlossene-projekte__media.brxe-image,
.wbg-abgeschlossene-projekte__media .brxe-image:not(.wbg-abgeschlossene-projekte__link),
.wbg-abgeschlossene-projekte__media figure,
.wbg-abgeschlossene-projekte__media picture {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 10px;
}

.wbg-abgeschlossene-projekte__media img:not(.wbg-abgeschlossene-projekte__link),
.wbg-abgeschlossene-projekte__media .brxe-image img,
.wbg-abgeschlossene-projekte__media img.brxe-image,
.wbg-abgeschlossene-projekte__media figure img,
.wbg-abgeschlossene-projekte__media.brxe-image > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    border-radius: 10px;
}

.wbg-abgeschlossene-projekte__link,
.wbg-abgeschlossene-projekte__link.brxe-text-link,
.wbg-abgeschlossene-projekte__link a {
    margin-top: 16px;
    width: var(--wbg-abgeschlossene-projekte-side-width) !important;
    max-width: var(--wbg-abgeschlossene-projekte-side-width) !important;
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-fs-body);
    font-weight: 400;
    line-height: 1.2;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-decoration: underline !important;
    text-decoration-color: currentColor !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    opacity: 0.6;
    transition: opacity 0.35s ease, width 0.35s ease, max-width 0.35s ease;
}

.wbg-abgeschlossene-projekte__card.is-active .wbg-abgeschlossene-projekte__link,
.wbg-abgeschlossene-projekte__card.is-active .wbg-abgeschlossene-projekte__link.brxe-text-link,
.wbg-abgeschlossene-projekte__card.is-active .wbg-abgeschlossene-projekte__link a {
    width: var(--wbg-abgeschlossene-projekte-active-width) !important;
    max-width: var(--wbg-abgeschlossene-projekte-active-width) !important;
    opacity: 1;
}

.wbg-abgeschlossene-projekte:not(.wbg-abgeschlossene-projekte--carousel) .wbg-abgeschlossene-projekte__card:only-child .wbg-abgeschlossene-projekte__link,
.wbg-abgeschlossene-projekte:not(.wbg-abgeschlossene-projekte--carousel) .wbg-abgeschlossene-projekte__card:only-child .wbg-abgeschlossene-projekte__link a {
    width: var(--wbg-abgeschlossene-projekte-active-width);
    opacity: 1;
}

.wbg-abgeschlossene-projekte__link:hover,
.wbg-abgeschlossene-projekte__link:focus-visible,
.wbg-abgeschlossene-projekte__link a:hover,
.wbg-abgeschlossene-projekte__link a:focus-visible {
    opacity: 1;
}

.wbg-abgeschlossene-projekte__slider {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.wbg-abgeschlossene-projekte--carousel .wbg-abgeschlossene-projekte__slider,
.wbg-abgeschlossene-projekte:has(.wbg-abgeschlossene-projekte__grid[data-wbg-center-carousel-ready="1"]) .wbg-abgeschlossene-projekte__slider {
    max-width: 100%;
    overflow: visible;
}

.wbg-abgeschlossene-projekte--carousel .wbg-abgeschlossene-projekte__grid,
.wbg-abgeschlossene-projekte--carousel .wbg-abgeschlossene-projekte__grid.wbg-abgeschlossene-projekte__grid,
.wbg-abgeschlossene-projekte--carousel .wbg-abgeschlossene-projekte__grid.brxe-block,
.wbg-abgeschlossene-projekte--carousel .wbg-abgeschlossene-projekte__grid.brxe-div,
.wbg-abgeschlossene-projekte__grid[data-wbg-center-carousel-ready="1"],
.wbg-abgeschlossene-projekte__grid[data-wbg-center-carousel-ready="1"].wbg-abgeschlossene-projekte__grid,
.wbg-abgeschlossene-projekte__grid[data-wbg-center-carousel-ready="1"].brxe-block,
.wbg-abgeschlossene-projekte__grid[data-wbg-center-carousel-ready="1"].brxe-div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-inline: var(--wbg-abgeschlossene-projekte-center-pad);
    padding: 0 var(--wbg-abgeschlossene-projekte-center-pad) 12px;
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.wbg-abgeschlossene-projekte--carousel .wbg-abgeschlossene-projekte__grid::-webkit-scrollbar,
.wbg-abgeschlossene-projekte__grid[data-wbg-center-carousel-ready="1"]::-webkit-scrollbar {
    display: none;
}

.wbg-abgeschlossene-projekte__arrow,
.wbg-abgeschlossene-projekte__pagination {
    display: none;
}

.wbg-abgeschlossene-projekte--carousel .wbg-abgeschlossene-projekte__arrow,
.wbg-abgeschlossene-projekte--carousel .wbg-abgeschlossene-projekte__pagination,
.wbg-abgeschlossene-projekte:has(.wbg-abgeschlossene-projekte__grid[data-wbg-center-carousel-ready="1"]) .wbg-abgeschlossene-projekte__arrow,
.wbg-abgeschlossene-projekte:has(.wbg-abgeschlossene-projekte__grid[data-wbg-center-carousel-ready="1"]) .wbg-abgeschlossene-projekte__pagination {
    display: flex;
}

.wbg-abgeschlossene-projekte__card[data-wbg-clone="1"] {
    display: none !important;
}

.wbg-abgeschlossene-projekte:not(.wbg-abgeschlossene-projekte--carousel):not(:has(.wbg-abgeschlossene-projekte__grid[data-wbg-center-carousel-ready="1"])) .wbg-abgeschlossene-projekte__grid,
.wbg-abgeschlossene-projekte:not(.wbg-abgeschlossene-projekte--carousel):not(:has(.wbg-abgeschlossene-projekte__grid[data-wbg-center-carousel-ready="1"])) .wbg-abgeschlossene-projekte__grid.wbg-abgeschlossene-projekte__grid {
    justify-content: center !important;
}

.wbg-abgeschlossene-projekte__arrow {
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(50% - 28px);
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    color: var(--wbg-gruen-dunkel, #19502f);
    cursor: pointer;
    z-index: 20;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.08);
    transition: color 0.2s ease, transform 0.15s ease,
        box-shadow 0.2s ease, background-color 0.2s ease;
}

.wbg-abgeschlossene-projekte__arrow:hover,
.wbg-abgeschlossene-projekte__arrow:focus-visible {
    color: var(--wbg-gruen, #009450);
    background: #ffffff;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.16),
        0 2px 4px rgba(0, 0, 0, 0.1);
    outline: none;
}

.wbg-abgeschlossene-projekte__arrow:active {
    transform: translateY(-50%) scale(0.92);
}

.wbg-abgeschlossene-projekte__arrow:disabled,
.wbg-abgeschlossene-projekte__arrow.is-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.wbg-abgeschlossene-projekte__arrow svg {
    width: 22px;
    height: 22px;
    display: block;
}

.wbg-abgeschlossene-projekte__arrow--prev {
    left: 12px;
}

.wbg-abgeschlossene-projekte__arrow--next {
    right: 12px;
}

.wbg-abgeschlossene-projekte--carousel .wbg-abgeschlossene-projekte__arrow--prev,
.wbg-abgeschlossene-projekte:has(.wbg-abgeschlossene-projekte__grid[data-wbg-center-carousel-ready="1"]) .wbg-abgeschlossene-projekte__arrow--prev {
    left: max(12px, calc(50% - 620px));
}

.wbg-abgeschlossene-projekte--carousel .wbg-abgeschlossene-projekte__arrow--next,
.wbg-abgeschlossene-projekte:has(.wbg-abgeschlossene-projekte__grid[data-wbg-center-carousel-ready="1"]) .wbg-abgeschlossene-projekte__arrow--next {
    right: max(12px, calc(50% - 620px));
}

.wbg-abgeschlossene-projekte__pagination {
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 24px 0 0;
    margin: 0;
    list-style: none;
}

.wbg-abgeschlossene-projekte__pagination-item {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 0;
}

.wbg-abgeschlossene-projekte__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(25, 80, 47, 0.35);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.wbg-abgeschlossene-projekte__dot.is-active {
    background: var(--wbg-gruen-dunkel, #19502f);
    width: 10px;
    height: 10px;
}

.wbg-abgeschlossene-projekte__footer {
    max-width: 880px;
    margin: 48px auto 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wbg-abgeschlossene-projekte__cta,
.wbg-abgeschlossene-projekte__cta.brxe-text-link,
.wbg-abgeschlossene-projekte__cta a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-fs-cta);
    font-weight: 700;
    line-height: 1.05;
    color: var(--wbg-neutral-50, #fdfcfb);
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.25s ease, filter 0.25s ease;
    isolation: isolate;
}

.wbg-abgeschlossene-projekte__cta::before,
.wbg-abgeschlossene-projekte__cta a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--wbg-gruen, #009450) 73%,
        var(--wbg-gruen-akzent, #afcc46) 100%
    );
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
}

.wbg-abgeschlossene-projekte__cta:hover,
.wbg-abgeschlossene-projekte__cta:focus-visible,
.wbg-abgeschlossene-projekte__cta a:hover,
.wbg-abgeschlossene-projekte__cta a:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.wbg-abgeschlossene-projekte--carousel,
.wbg-abgeschlossene-projekte:has(.wbg-abgeschlossene-projekte__grid[data-wbg-center-carousel-ready="1"]) {
    overflow-x: visible;
}

@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-abgeschlossene-projekte {
        padding: 64px 32px;
    }

    .wbg-abgeschlossene-projekte__header {
        margin-bottom: 40px;
    }

    .wbg-abgeschlossene-projekte__grid,
    .wbg-abgeschlossene-projekte__grid.wbg-abgeschlossene-projekte__grid {
        --wbg-abgeschlossene-projekte-slot: 300px;
        --wbg-abgeschlossene-projekte-side-width: 210px;
        --wbg-abgeschlossene-projekte-side-height: 260px;
        --wbg-abgeschlossene-projekte-active-width: 300px;
        --wbg-abgeschlossene-projekte-active-height: 360px;
        gap: 24px;
    }

    .wbg-abgeschlossene-projekte--carousel .wbg-abgeschlossene-projekte__arrow--prev,
    .wbg-abgeschlossene-projekte:has(.wbg-abgeschlossene-projekte__grid[data-wbg-center-carousel-ready="1"]) .wbg-abgeschlossene-projekte__arrow--prev {
        left: 12px;
    }

    .wbg-abgeschlossene-projekte--carousel .wbg-abgeschlossene-projekte__arrow--next,
    .wbg-abgeschlossene-projekte:has(.wbg-abgeschlossene-projekte__grid[data-wbg-center-carousel-ready="1"]) .wbg-abgeschlossene-projekte__arrow--next {
        right: 12px;
    }
}

@media (max-width: 640px) {
    .wbg-abgeschlossene-projekte {
        padding: 56px 0;
        overflow-x: hidden;
    }

    .wbg-abgeschlossene-projekte--carousel,
    .wbg-abgeschlossene-projekte:has(.wbg-abgeschlossene-projekte__grid[data-wbg-center-carousel-ready="1"]) {
        overflow-x: visible;
    }

    .wbg-abgeschlossene-projekte__header {
        margin-bottom: 32px;
        padding: 0 24px;
    }

    .wbg-abgeschlossene-projekte__grid,
    .wbg-abgeschlossene-projekte__grid.wbg-abgeschlossene-projekte__grid,
    .wbg-abgeschlossene-projekte__grid.brxe-block,
    .wbg-abgeschlossene-projekte__grid.brxe-div {
        --wbg-abgeschlossene-projekte-slot: min(338px, calc(100vw - 80px));
        --wbg-abgeschlossene-projekte-side-width: calc(var(--wbg-abgeschlossene-projekte-slot) * 0.69);
        --wbg-abgeschlossene-projekte-side-height: 240px;
        --wbg-abgeschlossene-projekte-active-width: var(--wbg-abgeschlossene-projekte-slot);
        --wbg-abgeschlossene-projekte-active-height: 300px;
        --wbg-abgeschlossene-projekte-center-pad: max(24px, calc(50% - (var(--wbg-abgeschlossene-projekte-slot) / 2)));
        gap: 16px;
    }

    .wbg-abgeschlossene-projekte--carousel .wbg-abgeschlossene-projekte__arrow--prev,
    .wbg-abgeschlossene-projekte:has(.wbg-abgeschlossene-projekte__grid[data-wbg-center-carousel-ready="1"]) .wbg-abgeschlossene-projekte__arrow--prev {
        left: 8px;
    }

    .wbg-abgeschlossene-projekte--carousel .wbg-abgeschlossene-projekte__arrow--next,
    .wbg-abgeschlossene-projekte:has(.wbg-abgeschlossene-projekte__grid[data-wbg-center-carousel-ready="1"]) .wbg-abgeschlossene-projekte__arrow--next {
        right: 8px;
    }

    .wbg-abgeschlossene-projekte__footer {
        margin-top: 40px;
        padding: 0 24px;
    }
}


/* ==========================================================================
   SECTION "Mieter-Portal" – Services für Mieter:innen (Portal-Hero)
   --------------------------------------------------------------------------
   Weißer Hintergrund, Headline + Intro zentriert (Mobile links), zweispaltig Copy | Bild.
   CTA: grüner Gradient-Button (Pfeil im Linktext).

   Bricks-Struktur:
   Section (.wbg-mieter-portal)
     Block (.wbg-mieter-portal__inner)
       Block (.wbg-mieter-portal__header)
         Heading h2 (.wbg-mieter-portal__title)
         Basic Text (.wbg-mieter-portal__intro)
       Block (.wbg-mieter-portal__layout)
         Block (.wbg-mieter-portal__copy)
           Basic Text (.wbg-mieter-portal__body)
           Text Link (.wbg-mieter-portal__cta)
         Block (.wbg-mieter-portal__media)
           Image
   ========================================================================== */

.wbg-mieter-portal,
.wbg-mieter-portal.wbg-mieter-portal,
section.wbg-mieter-portal,
.brxe-section:has(.wbg-mieter-portal__layout),
.brxe-section:has(.wbg-mieter-portal__inner) {
    padding: clamp(72px, 8vw, 113px) clamp(24px, 14.7vw, 212px) !important;
    background-color: #ffffff !important;
    color: var(--wbg-gruen-dunkel, #19502f);
    overflow-x: clip;
}

.wbg-mieter-portal__inner,
.wbg-mieter-portal .wbg-mieter-portal__inner,
.wbg-mieter-portal__inner.wbg-mieter-portal__inner {
    display: block !important;
    max-width: 1016px;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}

.wbg-mieter-portal__header,
.brxe-block.wbg-mieter-portal__header,
.brxe-div.wbg-mieter-portal__header,
.wbg-mieter-portal__header.brxe-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    max-width: 880px;
    margin: 0 auto 56px !important;
    text-align: center;
}

.wbg-mieter-portal__header > * {
    width: 100%;
    text-align: center !important;
}

.wbg-mieter-portal__title,
.brxe-heading.wbg-mieter-portal__title,
.wbg-mieter-portal__header .brxe-heading,
.wbg-mieter-portal__header :is(h1, h2, h3, h4),
.brxe-section:has(.wbg-mieter-portal__layout) .wbg-mieter-portal__header :is(.brxe-heading, h1, h2, h3, h4) {
    max-width: 880px;
    margin: 0 auto 16px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-section-title) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-align: center !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.wbg-mieter-portal__intro,
.wbg-mieter-portal__intro.wbg-mieter-portal__intro,
.wbg-mieter-portal__intro .brxe-text-basic,
.wbg-mieter-portal__intro .brxe-text {
    max-width: 854px;
    margin: 0 auto !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-align: center !important;
}

.wbg-mieter-portal__intro p {
    margin: 0;
}

.wbg-mieter-portal__layout,
.wbg-mieter-portal__layout.wbg-mieter-portal__layout,
.brxe-section:has(.wbg-mieter-portal__layout) .wbg-mieter-portal__layout {
    display: grid !important;
    grid-template-columns: minmax(0, 452fr) minmax(0, 534fr) !important;
    align-items: center !important;
    gap: clamp(24px, 3.3vw, 34px) !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.wbg-mieter-portal__copy,
.wbg-mieter-portal__layout > .brxe-block,
.wbg-mieter-portal__layout > .brxe-div {
    min-width: 0 !important;
}

.wbg-mieter-portal__copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0;
    min-width: 0;
    max-width: 80%;
}

.wbg-mieter-portal__body,
.wbg-mieter-portal__body.wbg-mieter-portal__body,
.wbg-mieter-portal__body .brxe-text-basic,
.wbg-mieter-portal__body .brxe-text {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

.wbg-mieter-portal__body p {
    margin: 0 0 1em;
    color: inherit !important;
}

.wbg-mieter-portal__body p:last-child {
    margin-bottom: 0;
}

.wbg-mieter-portal__cta,
.wbg-mieter-portal__cta.brxe-text-link,
.wbg-mieter-portal__cta a {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    align-self: flex-start;
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: clamp(32px, 4vw, 40px);
    padding: 14px 32px;
    min-height: 0;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-cta) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: none !important;
    white-space: nowrap;
    z-index: 0;
    isolation: isolate;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.wbg-mieter-portal__cta::before,
.wbg-mieter-portal__cta a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--wbg-gruen, #009450) 73%,
        var(--wbg-gruen-akzent, #afcc46) 100%
    );
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
}

.wbg-mieter-portal__cta:hover,
.wbg-mieter-portal__cta:focus-visible,
.wbg-mieter-portal__cta a:hover,
.wbg-mieter-portal__cta a:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.wbg-mieter-portal__media,
.wbg-mieter-portal__media.wbg-mieter-portal__media,
.wbg-mieter-portal__layout > *:nth-child(2):has(.brxe-image),
.wbg-mieter-portal__layout > *:nth-child(2):has(img),
.wbg-mieter-portal__layout > .wbg-mieter-portal__media {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto;
}

.wbg-mieter-portal__media > .brxe-image:not(.wbg-mieter-portal__cta),
.wbg-mieter-portal__media > figure,
.wbg-mieter-portal__media > picture,
.wbg-mieter-portal__media > a:has(img),
.wbg-mieter-portal__media.brxe-image,
.wbg-mieter-portal__media .brxe-image:not(.wbg-mieter-portal__cta),
.wbg-mieter-portal__layout > *:nth-child(2) .brxe-image:not(img),
.wbg-mieter-portal__layout > *:nth-child(2) figure {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wbg-mieter-portal__media img:not(.wbg-mieter-portal__cta),
.wbg-mieter-portal__media img.brxe-image,
.wbg-mieter-portal__media .brxe-image img,
.wbg-mieter-portal__media picture img,
.wbg-mieter-portal__layout > *:nth-child(2) img.brxe-image,
.wbg-mieter-portal__layout > *:nth-child(2) .brxe-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-mieter-portal,
    .wbg-mieter-portal.wbg-mieter-portal,
    section.wbg-mieter-portal,
    .brxe-section:has(.wbg-mieter-portal__layout),
    .brxe-section:has(.wbg-mieter-portal__inner) {
        padding: 56px 32px !important;
    }

    .wbg-mieter-portal__inner,
    .wbg-mieter-portal .wbg-mieter-portal__inner {
        max-width: 100% !important;
    }

    .wbg-mieter-portal__header,
    .brxe-block.wbg-mieter-portal__header {
        margin-bottom: 32px !important;
    }

    .wbg-mieter-portal__layout,
    .wbg-mieter-portal__layout.wbg-mieter-portal__layout,
    .brxe-section:has(.wbg-mieter-portal__layout) .wbg-mieter-portal__layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 36px !important;
    }

    .wbg-mieter-portal__copy,
    .wbg-mieter-portal__layout > *:first-child {
        order: 1 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .wbg-mieter-portal__media,
    .wbg-mieter-portal__layout > *:nth-child(2),
    .wbg-mieter-portal__layout > *:last-child:not(:first-child) {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .wbg-mieter-portal__cta,
    .wbg-mieter-portal__cta a {
        max-width: 100%;
        white-space: normal;
    }
}

@media (max-width: 640px) {
    .wbg-mieter-portal,
    .wbg-mieter-portal.wbg-mieter-portal,
    section.wbg-mieter-portal,
    .brxe-section:has(.wbg-mieter-portal__layout),
    .brxe-section:has(.wbg-mieter-portal__inner) {
        padding: 48px 24px !important;
    }

    .wbg-mieter-portal__header,
    .brxe-block.wbg-mieter-portal__header {
        margin-bottom: 24px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .wbg-mieter-portal__header > * {
        text-align: left !important;
    }

    .wbg-mieter-portal__title,
    .brxe-heading.wbg-mieter-portal__title,
    .wbg-mieter-portal__header .brxe-heading,
    .wbg-mieter-portal__header :is(h1, h2, h3, h4) {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
    }

    .wbg-mieter-portal__intro,
    .wbg-mieter-portal__intro.wbg-mieter-portal__intro,
    .brxe-text-basic.wbg-mieter-portal__intro,
    .wbg-mieter-portal__intro .brxe-text-basic,
    .wbg-mieter-portal__intro .brxe-text,
    .wbg-mieter-portal__intro p,
    .brxe-section.wbg-mieter-portal .brxe-text-basic.wbg-mieter-portal__intro {
        text-align: left !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .wbg-mieter-portal__layout,
    .wbg-mieter-portal__layout.wbg-mieter-portal__layout,
    .brxe-section:has(.wbg-mieter-portal__layout) .wbg-mieter-portal__layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 32px !important;
    }

    .wbg-mieter-portal__copy,
    .wbg-mieter-portal__layout > .wbg-mieter-portal__copy,
    .wbg-mieter-portal__layout > *:first-child {
        order: 1 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .wbg-mieter-portal__media,
    .wbg-mieter-portal__layout > .wbg-mieter-portal__media,
    .wbg-mieter-portal__layout > *:nth-child(2),
    .wbg-mieter-portal__layout > *:last-child:not(:first-child) {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .wbg-mieter-portal__copy {
        max-width: none !important;
    }
}


/* ==========================================================================
   SECTION "UmzugsmanagementPlus" – Services für Mieter:innen
   --------------------------------------------------------------------------
   Wie Mieter-Portal (weißer Hintergrund, zentrierte Headline + Intro),
   Bild rechts als Parallelogramm mit object-fit: cover (wie Kaufberatung).

   Bricks-Struktur:
   Section (.wbg-umzug-plus)
     Block (.wbg-umzug-plus__inner)
       Block (.wbg-umzug-plus__header)
         Heading h2 (.wbg-umzug-plus__title)
         Basic Text (.wbg-umzug-plus__intro)
       Block (.wbg-umzug-plus__layout)
         Block (.wbg-umzug-plus__copy)
           Rich Text / Text (.wbg-umzug-plus__body)
         Block (.wbg-umzug-plus__media)
           Image
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bricks-Kompatibilität: Klassen mit führendem Punkt (`.wbg-umzug-plus` statt
   `wbg-umzug-plus` im Feld „CSS-Klassen“). Korrekt wäre ohne Punkt.
   -------------------------------------------------------------------------- */

.brxe-section[class~=".wbg-umzug-plus"] {
    padding: clamp(72px, 8vw, 113px) clamp(24px, 14.7vw, 212px) !important;
    background-color: #ffffff !important;
    color: var(--wbg-gruen-dunkel, #19502f);
    overflow-x: clip;
}

.brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__inner"] {
    display: block !important;
    max-width: 1016px;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}

.brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__header"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    max-width: 880px;
    margin: 0 auto 56px !important;
    text-align: center;
}

.brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__header"] > * {
    width: 100%;
    text-align: center !important;
}

.brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__title"] {
    max-width: 880px;
    margin: 0 auto 16px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-section-title) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-align: center !important;
}

.brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__intro"] {
    max-width: 854px;
    margin: 0 auto !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-align: center !important;
}

.brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__intro"] p {
    margin: 0;
}

.brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__layout"] {
    display: grid !important;
    grid-template-columns: minmax(0, 452fr) minmax(0, 534fr) !important;
    align-items: center !important;
    gap: clamp(24px, 3.3vw, 34px) !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
}

.brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__copy"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    max-width: 100%;
    transform: none !important;
    overflow: visible !important;
}

.brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__body"] {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

.brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__body"] p {
    margin: 0 0 1em !important;
}

.brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__body"] p:last-child {
    margin-bottom: 0 !important;
}

.brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__body"] a {
    color: inherit !important;
    text-decoration: underline !important;
}

.brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__media"] {
    position: relative !important;
    width: 80% !important;
    max-width: 80% !important;
    min-width: 0 !important;
    aspect-ratio: 534 / 305;
    overflow: hidden !important;
    border-radius: 5px;
    transform: skewX(-17.5deg);
    transform-origin: center center;
    isolation: isolate;
    justify-self: end;
    margin-left: auto;
}

.brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__media"] img,
.brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__media"] .brxe-image img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 130% !important;
    height: 100% !important;
    max-width: none !important;
    left: -15% !important;
    object-fit: cover !important;
    object-position: right top !important;
    transform: skewX(17.5deg) scale(1.05) !important;
    transform-origin: center center !important;
}

.brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__media"] .brxe-image:not(img),
.brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__media"] figure {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

@media (min-width: 641px) and (max-width: 1024px) {
    .brxe-section[class~=".wbg-umzug-plus"] {
        padding: 56px 32px !important;
    }

    .brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__layout"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 36px !important;
        grid-template-columns: none !important;
    }

    .brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__media"] {
        width: 80% !important;
        max-width: 80% !important;
        margin: 0 auto;
        justify-self: auto;
    }
}

@media (max-width: 640px) {
    .brxe-section[class~=".wbg-umzug-plus"] {
        padding: 48px 24px !important;
    }

    .brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__header"] {
        align-items: flex-start !important;
        text-align: left !important;
        margin-bottom: 24px !important;
    }

    .brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__header"] > * {
        text-align: left !important;
    }

    .brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__title"],
    .brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__intro"],
    .brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__intro"] p {
        text-align: left !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__intro"] {
        margin: 0 !important;
    }

    .brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__title"] {
        font-size: 0 !important;
        line-height: 0 !important;
        margin: 0 0 16px !important;
    }

    .brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__title"]::before {
        content: "Umzugsmanagement-\APlus";
        white-space: pre;
        display: block;
        font-size: var(--wbg-fs-section-title) !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        font-family: "Lato", sans-serif !important;
        color: var(--wbg-gruen-dunkel, #19502f) !important;
        text-align: left !important;
    }

    .brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__layout"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 32px !important;
        grid-template-columns: none !important;
    }

    .brxe-section[class~=".wbg-umzug-plus"] [class~=".wbg-umzug-plus__media"] {
        width: 88% !important;
        max-width: 88% !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        justify-self: start !important;
        align-self: flex-start !important;
    }
}

.wbg-umzug-plus,
.wbg-umzug-plus.wbg-umzug-plus,
section.wbg-umzug-plus,
.brxe-section:has(.wbg-umzug-plus__layout),
.brxe-section:has(.wbg-umzug-plus__inner),
.brxe-section:has(.wbg-umzug-plus__title) {
    padding: clamp(72px, 8vw, 113px) clamp(24px, 14.7vw, 212px) !important;
    background-color: #ffffff !important;
    color: var(--wbg-gruen-dunkel, #19502f);
    overflow-x: clip;
}

.wbg-umzug-plus__inner,
.wbg-umzug-plus .wbg-umzug-plus__inner,
.wbg-umzug-plus__inner.wbg-umzug-plus__inner {
    display: block !important;
    max-width: 1016px;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}

.wbg-umzug-plus__header,
.brxe-block.wbg-umzug-plus__header,
.brxe-div.wbg-umzug-plus__header,
.wbg-umzug-plus__header.brxe-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    max-width: 880px;
    margin: 0 auto 56px !important;
    text-align: center;
}

.wbg-umzug-plus__header > * {
    width: 100%;
    text-align: center !important;
}

.wbg-umzug-plus__title,
.brxe-heading.wbg-umzug-plus__title,
.wbg-umzug-plus__header .brxe-heading,
.wbg-umzug-plus__header :is(h1, h2, h3, h4),
.wbg-umzug-plus__inner > .brxe-heading,
.wbg-umzug-plus__inner > .brxe-heading.wbg-umzug-plus__title,
.brxe-section.wbg-umzug-plus .brxe-heading:not(.wbg-umzug-plus__body),
.brxe-section:has(.wbg-umzug-plus__title) .brxe-heading.wbg-umzug-plus__title,
.brxe-section:has(.wbg-umzug-plus__layout) .wbg-umzug-plus__header :is(.brxe-heading, h1, h2, h3, h4) {
    max-width: 880px;
    margin: 0 auto 16px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-section-title) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-align: center !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.wbg-umzug-plus__intro,
.wbg-umzug-plus__intro.wbg-umzug-plus__intro,
.wbg-umzug-plus__intro .brxe-text-basic,
.wbg-umzug-plus__intro .brxe-text {
    max-width: 854px;
    margin: 0 auto !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-align: center !important;
}

.wbg-umzug-plus__intro p {
    margin: 0;
}

.wbg-umzug-plus__layout,
.wbg-umzug-plus__layout.wbg-umzug-plus__layout,
.brxe-section:has(.wbg-umzug-plus__layout) .wbg-umzug-plus__layout,
.brxe-container.wbg-umzug-plus__layout,
.brxe-div.wbg-umzug-plus__layout {
    display: grid !important;
    grid-template-columns: minmax(0, 452fr) minmax(0, 534fr) !important;
    align-items: center !important;
    gap: clamp(24px, 3.3vw, 34px) !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
}

/* Fallback: Copy + Bild direkt im Inner (ohne __layout-Wrapper) */
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)):has(> .wbg-umzug-plus__copy, > .wbg-umzug-plus__body, > .brxe-text-basic, > .brxe-text):has(> .wbg-umzug-plus__media, > .brxe-image, > img, > *:has(.brxe-image)),
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)):has(> .wbg-umzug-plus__copy, > .wbg-umzug-plus__body, > .brxe-text-basic, > .brxe-text):has(> .wbg-umzug-plus__media, > .brxe-image, > img, > *:has(.brxe-image)).brxe-block,
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)):has(> .wbg-umzug-plus__copy, > .wbg-umzug-plus__body, > .brxe-text-basic, > .brxe-text):has(> .wbg-umzug-plus__media, > .brxe-image, > img, > *:has(.brxe-image)).brxe-container,
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)):has(> .wbg-umzug-plus__copy, > .wbg-umzug-plus__body, > .brxe-text-basic, > .brxe-text):has(> .wbg-umzug-plus__media, > .brxe-image, > img, > *:has(.brxe-image)).brxe-div {
    display: grid !important;
    grid-template-columns: minmax(0, 452fr) minmax(0, 534fr) !important;
    align-items: center !important;
    gap: clamp(24px, 3.3vw, 34px) !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > .wbg-umzug-plus__header,
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > .wbg-umzug-plus__title,
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > .brxe-heading.wbg-umzug-plus__title {
    grid-column: 1 / -1 !important;
}

.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > .wbg-umzug-plus__intro,
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > .wbg-umzug-plus__copy,
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > .wbg-umzug-plus__body,
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > .brxe-text-basic:not(.wbg-umzug-plus__intro),
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > .brxe-text:not(.wbg-umzug-plus__intro),
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > .brxe-text-editor {
    grid-column: 1 !important;
}

.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > .wbg-umzug-plus__intro {
    grid-column: 1 / -1 !important;
}

.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > .wbg-umzug-plus__media,
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > .brxe-image,
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > img.brxe-image,
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > *:has(> .brxe-image):not(.wbg-umzug-plus__header):not(.wbg-umzug-plus__copy):not(.wbg-umzug-plus__body):not(.wbg-umzug-plus__intro),
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > *:has(> img):not(.wbg-umzug-plus__header):not(.wbg-umzug-plus__copy):not(.wbg-umzug-plus__body):not(.wbg-umzug-plus__intro) {
    grid-column: 2 !important;
}

.wbg-umzug-plus__copy,
.wbg-umzug-plus__layout > .brxe-block,
.wbg-umzug-plus__layout > .brxe-div,
.wbg-umzug-plus__layout > .brxe-container {
    min-width: 0 !important;
}

.wbg-umzug-plus__copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0;
    min-width: 0;
    max-width: 100%;
    transform: none !important;
    overflow: visible !important;
}

.wbg-umzug-plus__body,
.wbg-umzug-plus__body.wbg-umzug-plus__body,
.wbg-umzug-plus__body .brxe-text-basic,
.wbg-umzug-plus__body .brxe-text,
.wbg-umzug-plus__body .brxe-text-editor {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    transform: none !important;
    font-style: normal !important;
}

.wbg-umzug-plus__body p {
    margin: 0 0 1em !important;
    color: inherit !important;
}

.wbg-umzug-plus__body p:last-child {
    margin-bottom: 0 !important;
}

.wbg-umzug-plus__body a {
    color: inherit !important;
    text-decoration: underline !important;
    text-underline-offset: 0.15em;
}

.wbg-umzug-plus__body a:hover,
.wbg-umzug-plus__body a:focus-visible {
    color: var(--wbg-gruen, #009450) !important;
}

/* Bild rechts – Parallelogramm (object-fit: cover) */
.wbg-umzug-plus__media,
.wbg-umzug-plus__media.wbg-umzug-plus__media,
.wbg-umzug-plus__layout > *:nth-child(2):has(.brxe-image),
.wbg-umzug-plus__layout > *:nth-child(2):has(img),
.wbg-umzug-plus__layout > *:last-child:not(:first-child):has(.brxe-image),
.wbg-umzug-plus__layout > *:last-child:not(:first-child):has(img),
.wbg-umzug-plus__layout > .brxe-image:not(img),
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > .brxe-image:not(img),
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > *:has(> .brxe-image):not(.wbg-umzug-plus__header):not(.wbg-umzug-plus__copy):not(.wbg-umzug-plus__body):not(.wbg-umzug-plus__intro) {
    position: relative !important;
    width: 80% !important;
    max-width: 80% !important;
    min-width: 0 !important;
    aspect-ratio: 534 / 305;
    overflow: hidden !important;
    border-radius: 5px;
    transform: skewX(-17.5deg);
    transform-origin: center center;
    isolation: isolate;
    justify-self: end;
    margin-left: auto;
}

/* Bild-Element ohne Wrapper-Block (nur img in Bricks) */
.wbg-umzug-plus__layout > img.brxe-image,
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > img.brxe-image {
    position: relative !important;
    display: block !important;
    width: 80% !important;
    max-width: 80% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 534 / 305 !important;
    overflow: hidden !important;
    border-radius: 5px !important;
    object-fit: cover !important;
    object-position: right top !important;
    transform: none !important;
    clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%) !important;
    -webkit-clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%) !important;
    justify-self: end;
    margin-left: auto;
}

.wbg-umzug-plus__media,
.wbg-umzug-plus__media.wbg-umzug-plus__media,
.wbg-umzug-plus__layout > *:nth-child(2):has(.brxe-image),
.wbg-umzug-plus__layout > *:nth-child(2):has(img),
.wbg-umzug-plus__layout > *:last-child:not(:first-child):has(.brxe-image),
.wbg-umzug-plus__layout > *:last-child:not(:first-child):has(img),
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > .wbg-umzug-plus__media,
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > *:has(> .brxe-image):not(.wbg-umzug-plus__header):not(.wbg-umzug-plus__copy):not(.wbg-umzug-plus__body):not(.wbg-umzug-plus__intro):not(.brxe-image) {
    position: relative !important;
    width: 80% !important;
    max-width: 80% !important;
    min-width: 0 !important;
    aspect-ratio: 534 / 305;
    overflow: hidden !important;
    border-radius: 5px;
    transform: skewX(-17.5deg);
    transform-origin: center center;
    isolation: isolate;
    justify-self: end;
    margin-left: auto;
}

.wbg-umzug-plus__media img,
.wbg-umzug-plus__media img.brxe-image,
.wbg-umzug-plus__media .brxe-image img,
.wbg-umzug-plus__media picture,
.wbg-umzug-plus__media picture img,
.wbg-umzug-plus__layout > *:nth-child(2) img.brxe-image,
.wbg-umzug-plus__layout > *:nth-child(2) .brxe-image img,
.wbg-umzug-plus__layout > *:last-child:not(:first-child) img.brxe-image,
.wbg-umzug-plus__layout > *:last-child:not(:first-child) .brxe-image img,
.wbg-umzug-plus__layout > .brxe-image img,
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > .brxe-image img,
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > *:has(> .brxe-image) img,
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > *:has(> img) img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 130% !important;
    height: 100% !important;
    max-width: none !important;
    left: -15% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: right top !important;
    transform: skewX(17.5deg) scale(1.05) !important;
    transform-origin: center center !important;
}

.wbg-umzug-plus__media .brxe-image:not(img),
.wbg-umzug-plus__media a,
.wbg-umzug-plus__media figure,
.wbg-umzug-plus__layout > *:nth-child(2) .brxe-image:not(img),
.wbg-umzug-plus__layout > *:nth-child(2) figure,
.wbg-umzug-plus__layout > *:last-child:not(:first-child) .brxe-image:not(img),
.wbg-umzug-plus__layout > *:last-child:not(:first-child) figure,
.wbg-umzug-plus__layout > .brxe-image:not(img),
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > .brxe-image:not(img),
.wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > *:has(> .brxe-image):not(.wbg-umzug-plus__header):not(.wbg-umzug-plus__copy):not(.wbg-umzug-plus__body) figure {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-umzug-plus,
    .wbg-umzug-plus.wbg-umzug-plus,
    section.wbg-umzug-plus,
    .brxe-section:has(.wbg-umzug-plus__layout),
    .brxe-section:has(.wbg-umzug-plus__inner),
    .brxe-section:has(.wbg-umzug-plus__title) {
        padding: 56px 32px !important;
    }

    .wbg-umzug-plus__inner,
    .wbg-umzug-plus .wbg-umzug-plus__inner {
        max-width: 100% !important;
    }

    .wbg-umzug-plus__header,
    .brxe-block.wbg-umzug-plus__header {
        margin-bottom: 32px !important;
    }

    .wbg-umzug-plus__layout,
    .wbg-umzug-plus__layout.wbg-umzug-plus__layout,
    .brxe-section:has(.wbg-umzug-plus__layout) .wbg-umzug-plus__layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 36px !important;
    }

    .wbg-umzug-plus__copy,
    .wbg-umzug-plus__layout > *:first-child {
        order: 1 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .wbg-umzug-plus__media,
    .wbg-umzug-plus__layout > *:nth-child(2):has(.brxe-image),
    .wbg-umzug-plus__layout > *:nth-child(2):has(img),
    .wbg-umzug-plus__layout > *:last-child:not(:first-child) {
        order: 2 !important;
        width: 80% !important;
        max-width: 80% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto;
        aspect-ratio: 534 / 305 !important;
        justify-self: auto;
    }

    .wbg-umzug-plus__media img,
    .wbg-umzug-plus__media .brxe-image img,
    .wbg-umzug-plus__layout > *:nth-child(2) .brxe-image img,
    .wbg-umzug-plus__layout > *:last-child:not(:first-child) .brxe-image img {
        transform: skewX(17.5deg) scale(1.02) !important;
    }
}

@media (max-width: 640px) {
    .wbg-umzug-plus,
    .wbg-umzug-plus.wbg-umzug-plus,
    section.wbg-umzug-plus,
    .brxe-section:has(.wbg-umzug-plus__layout),
    .brxe-section:has(.wbg-umzug-plus__inner),
    .brxe-section:has(.wbg-umzug-plus__title) {
        padding: 48px 24px !important;
    }

    .wbg-umzug-plus__header,
    .brxe-block.wbg-umzug-plus__header {
        margin-bottom: 24px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .wbg-umzug-plus__header > * {
        text-align: left !important;
    }

    .wbg-umzug-plus__title,
    .brxe-heading.wbg-umzug-plus__title,
    .wbg-umzug-plus__header .brxe-heading,
    .wbg-umzug-plus__header :is(h1, h2, h3, h4),
    .brxe-section.wbg-umzug-plus .brxe-heading.wbg-umzug-plus__title,
    .brxe-section:has(.wbg-umzug-plus__layout) .wbg-umzug-plus__header :is(.brxe-heading, h1, h2, h3, h4) {
        text-align: left !important;
        margin: 0 0 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }

    .wbg-umzug-plus__title::before,
    .brxe-heading.wbg-umzug-plus__title::before,
    .wbg-umzug-plus__header .brxe-heading::before,
    .wbg-umzug-plus__header :is(h1, h2, h3, h4)::before,
    .brxe-section.wbg-umzug-plus .brxe-heading.wbg-umzug-plus__title::before {
        content: "Umzugsmanagement-\APlus";
        white-space: pre;
        display: block;
        font-size: var(--wbg-fs-section-title) !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        font-family: "Lato", sans-serif !important;
        color: var(--wbg-gruen-dunkel, #19502f) !important;
        text-align: left !important;
    }

    .wbg-umzug-plus__intro,
    .wbg-umzug-plus__intro.wbg-umzug-plus__intro,
    .brxe-text-basic.wbg-umzug-plus__intro,
    .wbg-umzug-plus__intro .brxe-text-basic,
    .wbg-umzug-plus__intro .brxe-text,
    .wbg-umzug-plus__intro p,
    .brxe-section.wbg-umzug-plus .wbg-umzug-plus__intro,
    .brxe-section.wbg-umzug-plus .brxe-text-basic.wbg-umzug-plus__intro {
        text-align: left !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .wbg-umzug-plus__layout,
    .wbg-umzug-plus__layout.wbg-umzug-plus__layout,
    .brxe-section:has(.wbg-umzug-plus__layout) .wbg-umzug-plus__layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        grid-template-columns: none !important;
        gap: 32px !important;
    }

    .wbg-umzug-plus__copy,
    .wbg-umzug-plus__layout > .wbg-umzug-plus__copy,
    .wbg-umzug-plus__layout > *:first-child {
        order: 1 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .wbg-umzug-plus__media,
    .wbg-umzug-plus__media.wbg-umzug-plus__media,
    .wbg-umzug-plus__layout > .wbg-umzug-plus__media,
    .wbg-umzug-plus__layout > *:nth-child(2),
    .wbg-umzug-plus__layout > *:nth-child(2):has(.brxe-image),
    .wbg-umzug-plus__layout > *:nth-child(2):has(img),
    .wbg-umzug-plus__layout > *:last-child:not(:first-child) {
        order: 2 !important;
        width: 88% !important;
        max-width: 88% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        justify-self: start !important;
        align-self: flex-start !important;
    }

    .wbg-umzug-plus__layout > img.brxe-image,
    .wbg-umzug-plus__inner:not(:has(.wbg-umzug-plus__layout)) > img.brxe-image {
        width: 88% !important;
        max-width: 88% !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        align-self: flex-start !important;
    }
}


/* ==========================================================================
   SECTION "FAQ" – Services für Mieter:innen
   --------------------------------------------------------------------------
   Grüne Vollfläche, zentrierter Header + Suche, 2×2-Grid mit FAQ-Blöcken.
   Pro Block: weiße Gruppen-Headline, dunkelgrünes Akkordeon, optional Link.

   Bricks-Struktur:
   Section (.wbg-faq)
     Block (.wbg-faq__inner)
       Block (.wbg-faq__header)
         Heading h2 (.wbg-faq__title)
         Basic Text (.wbg-faq__intro)
       Block (.wbg-faq__search)              ← optional: Search/Form mit input
         input[type="search"] oder Bricks Search
       Block (.wbg-faq__grid)
         Block (.wbg-faq__group) ×4
           Heading h3 (.wbg-faq__group-title)
           Accordion (Verschachtelbar) (.wbg-faq__accordion)  ← Klasse am Widget!
             accordion-title-wrapper / accordion-content-wrapper (Bricks)
           Text Link (.wbg-faq__group-link)   ← optional, z. B. Haushaltsrechner

   WICHTIG:
   - accordion-title-wrapper, accordion-content-wrapper NICHT umbenennen!
   - Klasse wbg-faq__accordion am Accordion-Widget setzen (ohne führenden Punkt).
   ========================================================================== */

.wbg-faq,
.wbg-faq.wbg-faq,
section.wbg-faq,
.brxe-section:has(.wbg-faq__grid),
.brxe-section:has(.wbg-faq__inner) {
    padding: clamp(72px, 8vw, 113px) clamp(24px, 14.7vw, 212px) !important;
    background-color: var(--wbg-gruen, #009450) !important;
    color: var(--wbg-text-light, #ffffff);
    overflow-x: clip;
}

.wbg-faq__inner,
.wbg-faq .wbg-faq__inner,
.wbg-faq__inner.wbg-faq__inner {
    display: block !important;
    max-width: 1016px;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}

.wbg-faq__header,
.brxe-block.wbg-faq__header,
.brxe-div.wbg-faq__header,
.wbg-faq__header.brxe-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    max-width: 880px;
    margin: 0 auto 25px !important;
    text-align: center;
}

.wbg-faq__header > * {
    width: 100%;
    text-align: center !important;
}

.wbg-faq__title,
.brxe-heading.wbg-faq__title,
.wbg-faq__header .brxe-heading,
.wbg-faq__header :is(h1, h2, h3, h4),
.brxe-section:has(.wbg-faq__grid) .wbg-faq__header :is(.brxe-heading, h1, h2, h3, h4) {
    max-width: 880px;
    margin: 0 auto 16px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-section-title) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: var(--wbg-text-light, #ffffff) !important;
    text-align: center !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.wbg-faq__intro,
.wbg-faq__intro.wbg-faq__intro,
.wbg-faq__intro .brxe-text-basic,
.wbg-faq__intro .brxe-text {
    max-width: 854px;
    margin: 0 auto !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em;
    color: var(--wbg-text-light, #ffffff) !important;
    text-align: center !important;
}

.wbg-faq__intro p {
    margin: 0;
}

.wbg-faq__intro + .wbg-faq__search,
.wbg-faq__header + .wbg-faq__search,
.brxe-section.wbg-faq .wbg-faq__intro + .wbg-faq__search,
.brxe-section.wbg-faq .wbg-faq__header + .wbg-faq__search {
    margin-top: 25px !important;
}

/* Suche – Parallelogramm (Marken-Schräge), 5px Radius */
.wbg-faq__search,
.brxe-block.wbg-faq__search,
.brxe-div.wbg-faq__search,
.brxe-section.wbg-faq .brxe-block.wbg-faq__search,
.brxe-section.wbg-faq .brxe-div.wbg-faq__search {
    width: 100%;
    max-width: 640px;
    margin: 25px auto 48px !important;
    position: relative;
    z-index: 0;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    transform: none !important;
    isolation: isolate;
}

.wbg-faq__search::before,
.brxe-block.wbg-faq__search::before,
.brxe-div.wbg-faq__search::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 5px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    transform: skewX(-17.5deg);
    transform-origin: center center;
    transition: background 0.2s ease, border-color 0.2s ease;
    pointer-events: none;
}

.wbg-faq__search:focus-within::before,
.brxe-block.wbg-faq__search:focus-within::before,
.brxe-div.wbg-faq__search:focus-within::before {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
}

.wbg-faq__search .brxe-search,
.wbg-faq__search form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    position: relative;
    z-index: 1;
}

.wbg-faq__search input[type="search"],
.wbg-faq__search input[type="text"],
.wbg-faq__search .brxe-search input,
.wbg-faq__search .search-field {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 14px 52px 14px 24px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: var(--wbg-text-light, #ffffff) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 5px !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    z-index: 1;
}

.brxe-section.wbg-faq .wbg-faq__search input[type="search"]::placeholder,
.brxe-section.wbg-faq .wbg-faq__search input[type="text"]::placeholder,
.brxe-section.wbg-faq .wbg-faq__search .brxe-search input::placeholder,
.wbg-faq__search input[type="search"]::placeholder,
.wbg-faq__search input[type="text"]::placeholder,
.wbg-faq__search .brxe-search input::placeholder,
.wbg-faq__search input::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}

.brxe-section.wbg-faq .wbg-faq__search input[type="search"]::-webkit-input-placeholder,
.brxe-section.wbg-faq .wbg-faq__search input[type="text"]::-webkit-input-placeholder,
.brxe-section.wbg-faq .wbg-faq__search .brxe-search input::-webkit-input-placeholder,
.wbg-faq__search input[type="search"]::-webkit-input-placeholder,
.wbg-faq__search input[type="text"]::-webkit-input-placeholder,
.wbg-faq__search .brxe-search input::-webkit-input-placeholder,
.wbg-faq__search input::-webkit-input-placeholder {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

.brxe-section.wbg-faq .wbg-faq__search input[type="search"]::-moz-placeholder,
.brxe-section.wbg-faq .wbg-faq__search input[type="text"]::-moz-placeholder,
.brxe-section.wbg-faq .wbg-faq__search .brxe-search input::-moz-placeholder,
.wbg-faq__search input[type="search"]::-moz-placeholder,
.wbg-faq__search input[type="text"]::-moz-placeholder,
.wbg-faq__search .brxe-search input::-moz-placeholder,
.wbg-faq__search input::-moz-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}

.wbg-faq__search input:focus {
    background: transparent !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.wbg-faq__search::after,
.wbg-faq__search .brxe-search::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.95;
    z-index: 2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-4.35-4.35M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.wbg-faq__search button,
.wbg-faq__search input[type="submit"],
.wbg-faq__search .brxe-search button {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* 2×2-Grid */
.wbg-faq__grid,
.wbg-faq__grid.wbg-faq__grid,
.brxe-block.wbg-faq__grid,
.brxe-div.wbg-faq__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: clamp(32px, 4vw, 48px) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.wbg-faq__group,
.brxe-block.wbg-faq__group,
.brxe-div.wbg-faq__group,
.wbg-faq__group.brxe-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    min-width: 0 !important;
}

.wbg-faq__group.is-hidden {
    display: none !important;
}

.wbg-faq__group-title,
.brxe-heading.wbg-faq__group-title,
.wbg-faq__group > .brxe-heading,
.wbg-faq__group > :is(h1, h2, h3, h4).wbg-faq__group-title {
    margin: 0 0 4px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-h3) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--wbg-text-light, #ffffff) !important;
    text-align: left !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Akkordeon: Basis-Styling über globale Klasse .wbg-accordion (siehe oben) */

/* Optionaler Link unter dem Akkordeon */
.wbg-faq__group-link,
.wbg-faq__group-link.brxe-text-link,
.wbg-faq__group-link a,
.wbg-faq__group > .brxe-text-link.wbg-faq__group-link,
.wbg-faq__group > .wbg-faq__group-link a {
    display: inline-flex !important;
    align-items: center;
    align-self: flex-start;
    margin-top: 4px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-link) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--wbg-text-light, #ffffff) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, text-decoration-color 0.2s ease;
}

.wbg-faq__empty,
.wbg-faq__empty.wbg-faq__empty {
    display: none;
    margin: 0;
    padding: 16px 0 0;
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-fs-body);
    color: var(--wbg-text-light, #ffffff);
    text-align: center;
}

.wbg-faq.is-search-active .wbg-faq__empty.is-visible {
    display: block;
}

@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-faq,
    .wbg-faq.wbg-faq,
    section.wbg-faq,
    .brxe-section:has(.wbg-faq__grid) {
        padding: 64px 32px !important;
    }

    .wbg-faq__header,
    .brxe-block.wbg-faq__header {
        margin-bottom: 25px !important;
    }

    .wbg-faq__search,
    .brxe-block.wbg-faq__search {
        margin-top: 25px !important;
        margin-bottom: 40px !important;
    }

    .wbg-faq__grid,
    .wbg-faq__grid.wbg-faq__grid {
        gap: 32px !important;
    }
}

@media (max-width: 640px) {
    .wbg-faq,
    .wbg-faq.wbg-faq,
    section.wbg-faq,
    .brxe-section:has(.wbg-faq__grid),
    .brxe-section:has(.wbg-faq__inner) {
        padding: 48px 24px !important;
    }

    .wbg-faq__header,
    .brxe-block.wbg-faq__header {
        margin-bottom: 25px !important;
        max-width: none !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .wbg-faq__header > * {
        text-align: left !important;
    }

    .wbg-faq__title,
    .brxe-heading.wbg-faq__title,
    .wbg-faq__header .brxe-heading,
    .wbg-faq__header :is(h1, h2, h3, h4),
    .brxe-section:has(.wbg-faq__grid) .wbg-faq__header :is(.brxe-heading, h1, h2, h3, h4) {
        text-align: left !important;
        margin: 0 0 16px !important;
        max-width: none !important;
    }

    .wbg-faq__intro,
    .wbg-faq__intro.wbg-faq__intro,
    .brxe-text-basic.wbg-faq__intro,
    .wbg-faq__intro .brxe-text-basic,
    .wbg-faq__intro .brxe-text,
    .wbg-faq__intro p,
    .brxe-section.wbg-faq .brxe-text-basic.wbg-faq__intro {
        text-align: left !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .wbg-faq__search,
    .brxe-block.wbg-faq__search {
        margin-top: 25px !important;
        margin-bottom: 32px !important;
        max-width: none !important;
    }

    .wbg-faq__grid,
    .wbg-faq__grid.wbg-faq__grid,
    .brxe-block.wbg-faq__grid,
    .brxe-div.wbg-faq__grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .wbg-faq__accordion .accordion-title-wrapper,
    .wbg-faq__accordion .accordion-title {
        padding: 14px 16px !important;
    }

    .wbg-faq__accordion .accordion-content-wrapper,
    .wbg-faq__accordion .accordion-content {
        padding: 0 16px 16px !important;
    }
}


/* ==========================================================================
   SECTION "WEG-Verwaltung" – Eigentümer:innen-Service
   --------------------------------------------------------------------------
   Weißer Hintergrund, gelbe Section-Headline (Norima), grauer Fließtext.
   Zweispaltig Copy | Bild, CTA als gelbes Parallelogramm.

   Bricks-Struktur:
   Section (.wbg-weg)
     Block (.wbg-weg__inner)
       Block (.wbg-weg__header)
         Heading h2 (.wbg-weg__title)
         Basic Text (.wbg-weg__intro)
       Block (.wbg-weg__layout)
         Block (.wbg-weg__copy)
           Basic Text (.wbg-weg__body)
           Text Link (.wbg-weg__cta)
         Block (.wbg-weg__media)
           Image
   ========================================================================== */

.wbg-weg,
.wbg-weg.wbg-weg,
section.wbg-weg,
.brxe-section:has(.wbg-weg__layout),
.brxe-section:has(.wbg-weg__inner) {
    padding: clamp(72px, 8vw, 113px) clamp(24px, 14.7vw, 212px) !important;
    background-color: #ffffff !important;
    color: var(--wbg-text, #4a4949);
    overflow-x: clip;
}

.wbg-weg__inner,
.wbg-weg .wbg-weg__inner,
.wbg-weg__inner.wbg-weg__inner {
    display: block !important;
    max-width: 1016px;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}

.wbg-weg__header,
.brxe-block.wbg-weg__header,
.brxe-div.wbg-weg__header,
.wbg-weg__header.brxe-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    max-width: 880px;
    margin: 0 auto 56px !important;
    text-align: center;
}

.wbg-weg__header > * {
    width: 100%;
    text-align: center !important;
}

.wbg-weg__title,
.brxe-heading.wbg-weg__title,
.wbg-weg__header .brxe-heading,
.wbg-weg__header :is(h1, h2, h3, h4),
.brxe-section:has(.wbg-weg__layout) .wbg-weg__header :is(.brxe-heading, h1, h2, h3, h4) {
    max-width: 880px;
    margin: 0 auto 16px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-section-title) !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    color: var(--wbg-norima, #eab90c) !important;
    text-align: center !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.wbg-weg__intro,
.wbg-weg__intro.wbg-weg__intro,
.wbg-weg__intro .brxe-text-basic,
.wbg-weg__intro .brxe-text {
    max-width: 854px;
    margin: 0 auto !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em;
    color: var(--wbg-text, #4a4949) !important;
    text-align: center !important;
}

.wbg-weg__intro p {
    margin: 0;
}

.wbg-weg__layout,
.wbg-weg__layout.wbg-weg__layout,
.brxe-section:has(.wbg-weg__layout) .wbg-weg__layout {
    display: grid !important;
    grid-template-columns: minmax(0, 452fr) minmax(0, 534fr) !important;
    align-items: center !important;
    gap: clamp(12px, 1.5vw, 20px) !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.wbg-weg__copy,
.wbg-weg__layout > .brxe-block,
.wbg-weg__layout > .brxe-div {
    min-width: 0 !important;
}

.wbg-weg__copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0;
    min-width: 0;
    max-width: 80%;
}

.wbg-weg__body,
.wbg-weg__body.wbg-weg__body,
.wbg-weg__body .brxe-text-basic,
.wbg-weg__body .brxe-text {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0;
    color: var(--wbg-text, #4a4949) !important;
}

.wbg-weg__body p {
    margin: 0 0 1em;
    color: inherit !important;
}

.wbg-weg__body p:last-child {
    margin-bottom: 0;
}

.wbg-weg__cta,
.wbg-weg__cta.brxe-text-link,
.wbg-weg__cta a {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    align-self: flex-start;
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: clamp(32px, 4vw, 40px);
    padding: 14px 32px;
    min-height: 0;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-cta) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: none !important;
    white-space: nowrap;
    z-index: 0;
    isolation: isolate;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.wbg-weg__cta::before,
.wbg-weg__cta a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--wbg-norima, #eab90c);
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
}

.wbg-weg__cta:hover,
.wbg-weg__cta:focus-visible,
.wbg-weg__cta a:hover,
.wbg-weg__cta a:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* Bild rechts – Parallelogramm (skew -17.5°, radius 10px, 80 % wie Kaufberatung) */
.wbg-weg__media,
.wbg-weg__media.wbg-weg__media,
.wbg-weg__layout > *:nth-child(2):has(.brxe-image),
.wbg-weg__layout > *:nth-child(2):has(img),
.wbg-weg__layout > *:last-child:not(:first-child):has(.brxe-image),
.wbg-weg__layout > *:last-child:not(:first-child):has(img),
.wbg-weg__layout > .wbg-weg__media {
    position: relative !important;
    display: block !important;
    width: 80% !important;
    max-width: 80% !important;
    min-width: 0 !important;
    aspect-ratio: 534 / 305;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 10px;
    transform: skewX(-17.5deg);
    transform-origin: center center;
    isolation: isolate;
    justify-self: start;
}

.wbg-weg__layout > img.brxe-image {
    position: relative !important;
    display: block !important;
    width: 80% !important;
    max-width: 80% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 534 / 305 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%) !important;
    -webkit-clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%) !important;
    margin: 0 !important;
    justify-self: start;
}

.wbg-weg__media img:not(.wbg-weg__cta),
.wbg-weg__media img.brxe-image,
.wbg-weg__media .brxe-image img,
.wbg-weg__media picture,
.wbg-weg__media picture img,
.wbg-weg__layout > *:nth-child(2) img.brxe-image,
.wbg-weg__layout > *:nth-child(2) .brxe-image img,
.wbg-weg__layout > *:last-child:not(:first-child) img.brxe-image,
.wbg-weg__layout > *:last-child:not(:first-child) .brxe-image img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 130% !important;
    height: 100% !important;
    max-width: none !important;
    left: -15% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: skewX(17.5deg) scale(1.05) !important;
    transform-origin: center center !important;
}

.wbg-weg__media > .brxe-image:not(.wbg-weg__cta),
.wbg-weg__media > figure,
.wbg-weg__media > picture,
.wbg-weg__media > a:has(img),
.wbg-weg__media.brxe-image,
.wbg-weg__media .brxe-image:not(.wbg-weg__cta),
.wbg-weg__media .brxe-image:not(img),
.wbg-weg__media a,
.wbg-weg__media figure,
.wbg-weg__layout > *:nth-child(2) .brxe-image:not(img),
.wbg-weg__layout > *:nth-child(2) figure,
.wbg-weg__layout > *:last-child:not(:first-child) .brxe-image:not(img),
.wbg-weg__layout > *:last-child:not(:first-child) figure {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-weg,
    .wbg-weg.wbg-weg,
    section.wbg-weg,
    .brxe-section:has(.wbg-weg__layout),
    .brxe-section:has(.wbg-weg__inner) {
        padding: 56px 32px !important;
    }

    .wbg-weg__inner,
    .wbg-weg .wbg-weg__inner {
        max-width: 100% !important;
    }

    .wbg-weg__header,
    .brxe-block.wbg-weg__header {
        margin-bottom: 32px !important;
        align-items: flex-start !important;
        text-align: left !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .wbg-weg__header > * {
        text-align: left !important;
    }

    .wbg-weg__intro,
    .wbg-weg__intro.wbg-weg__intro,
    .brxe-text-basic.wbg-weg__intro,
    .wbg-weg__intro .brxe-text-basic,
    .wbg-weg__intro .brxe-text,
    .wbg-weg__intro p,
    .brxe-section.wbg-weg .brxe-text-basic.wbg-weg__intro {
        text-align: left !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .wbg-weg__layout,
    .wbg-weg__layout.wbg-weg__layout,
    .brxe-section:has(.wbg-weg__layout) .wbg-weg__layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 36px !important;
    }

    .wbg-weg__copy,
    .wbg-weg__layout > *:first-child {
        order: 1 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .wbg-weg__media,
    .wbg-weg__media.wbg-weg__media,
    .wbg-weg__layout > .wbg-weg__media,
    .wbg-weg__layout > *:nth-child(2):has(.brxe-image),
    .wbg-weg__layout > *:nth-child(2):has(img),
    .wbg-weg__layout > *:nth-child(2),
    .wbg-weg__layout > *:last-child:not(:first-child) {
        order: 2 !important;
        width: 80% !important;
        max-width: 80% !important;
        min-width: 0 !important;
        aspect-ratio: 534 / 305 !important;
        margin: 0 auto !important;
        align-self: center !important;
        justify-self: center !important;
    }

    .wbg-weg__layout > img.brxe-image {
        width: 80% !important;
        max-width: 80% !important;
        margin: 0 auto !important;
        align-self: center !important;
    }

    .wbg-weg__media img,
    .wbg-weg__media .brxe-image img,
    .wbg-weg__layout > *:nth-child(2) .brxe-image img {
        transform: skewX(17.5deg) scale(1.02) !important;
    }

    .wbg-weg__cta,
    .wbg-weg__cta a {
        max-width: 100%;
        white-space: normal;
    }
}

@media (max-width: 640px) {
    .wbg-weg,
    .wbg-weg.wbg-weg,
    section.wbg-weg,
    .brxe-section:has(.wbg-weg__layout),
    .brxe-section:has(.wbg-weg__inner) {
        padding: 48px 24px !important;
    }

    .wbg-weg__header,
    .brxe-block.wbg-weg__header {
        margin-bottom: 24px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .wbg-weg__header > * {
        text-align: left !important;
    }

    .wbg-weg__title,
    .brxe-heading.wbg-weg__title,
    .wbg-weg__header .brxe-heading,
    .wbg-weg__header :is(h1, h2, h3, h4) {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
    }

    .wbg-weg__intro,
    .wbg-weg__intro.wbg-weg__intro,
    .brxe-text-basic.wbg-weg__intro,
    .wbg-weg__intro .brxe-text-basic,
    .wbg-weg__intro .brxe-text,
    .wbg-weg__intro p,
    .brxe-section.wbg-weg .brxe-text-basic.wbg-weg__intro {
        text-align: left !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .wbg-weg__layout,
    .wbg-weg__layout.wbg-weg__layout,
    .brxe-section:has(.wbg-weg__layout) .wbg-weg__layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 32px !important;
    }

    .wbg-weg__copy,
    .wbg-weg__layout > .wbg-weg__copy,
    .wbg-weg__layout > *:first-child {
        order: 1 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .wbg-weg__media,
    .wbg-weg__media.wbg-weg__media,
    .wbg-weg__layout > .wbg-weg__media,
    .wbg-weg__layout > *:nth-child(2),
    .wbg-weg__layout > *:nth-child(2):has(.brxe-image),
    .wbg-weg__layout > *:nth-child(2):has(img),
    .wbg-weg__layout > *:last-child:not(:first-child) {
        order: 2 !important;
        width: 88% !important;
        max-width: 88% !important;
        min-width: 0 !important;
        aspect-ratio: 534 / 305 !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        align-self: flex-start !important;
        justify-self: start !important;
    }

    .wbg-weg__layout > img.brxe-image {
        width: 88% !important;
        max-width: 88% !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        align-self: flex-start !important;
    }

    .wbg-weg__copy {
        max-width: none !important;
    }
}


/* ==========================================================================
   SECTION "Verwaltung für Allein-Eigentümer:innen" – Eigentümer:innen-Service
   --------------------------------------------------------------------------
   Grüner Hintergrund (#009450), weiße Typo, zentrierter Header.
   Layout: Bild links (Parallelogramm) | Copy rechts mit Liste + Link-CTA.

   Bricks-Struktur:
   Section (.wbg-allein-eigentuemer)
     Block (.wbg-allein-eigentuemer__inner)
       Block (.wbg-allein-eigentuemer__header)
         Heading h2 (.wbg-allein-eigentuemer__title)
         Basic Text (.wbg-allein-eigentuemer__intro)
       Block (.wbg-allein-eigentuemer__layout)
         Block (.wbg-allein-eigentuemer__media)     ← zuerst = links
           Image
         Block (.wbg-allein-eigentuemer__copy)
           Rich Text (.wbg-allein-eigentuemer__body)  ← Absatz, „Typische Leistungen:“, ul
           Text Link (.wbg-allein-eigentuemer__cta)   ← „Angebot anfragen →“
   ========================================================================== */

.wbg-allein-eigentuemer,
.wbg-allein-eigentuemer.wbg-allein-eigentuemer,
section.wbg-allein-eigentuemer,
.brxe-section:has(.wbg-allein-eigentuemer__layout),
.brxe-section:has(.wbg-allein-eigentuemer__inner) {
    padding: clamp(72px, 8vw, 113px) clamp(24px, 14.7vw, 212px) !important;
    background-color: var(--wbg-gruen, #009450) !important;
    color: var(--wbg-text-light, #ffffff);
    overflow-x: clip;
}

.wbg-allein-eigentuemer__inner,
.wbg-allein-eigentuemer .wbg-allein-eigentuemer__inner,
.wbg-allein-eigentuemer__inner.wbg-allein-eigentuemer__inner {
    display: block !important;
    max-width: 1016px;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}

.wbg-allein-eigentuemer__header,
.brxe-block.wbg-allein-eigentuemer__header,
.brxe-div.wbg-allein-eigentuemer__header,
.wbg-allein-eigentuemer__header.brxe-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    max-width: 880px;
    margin: 0 auto 40px !important;
    text-align: center;
}

.wbg-allein-eigentuemer__header > * {
    width: 100%;
    text-align: center !important;
}

.wbg-allein-eigentuemer__title,
.brxe-heading.wbg-allein-eigentuemer__title,
.wbg-allein-eigentuemer__header .brxe-heading,
.wbg-allein-eigentuemer__header :is(h1, h2, h3, h4),
.brxe-section:has(.wbg-allein-eigentuemer__layout) .wbg-allein-eigentuemer__header :is(.brxe-heading, h1, h2, h3, h4) {
    max-width: 880px;
    margin: 0 auto 16px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-section-title) !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    color: var(--wbg-text-light, #ffffff) !important;
    text-align: center !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.wbg-allein-eigentuemer__intro,
.wbg-allein-eigentuemer__intro.wbg-allein-eigentuemer__intro,
.wbg-allein-eigentuemer__intro .brxe-text-basic,
.wbg-allein-eigentuemer__intro .brxe-text {
    max-width: 854px;
    margin: 0 auto !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em;
    color: var(--wbg-text-light, #ffffff) !important;
    text-align: center !important;
}

.wbg-allein-eigentuemer__intro p {
    margin: 0;
}

.wbg-allein-eigentuemer__layout,
.wbg-allein-eigentuemer__layout.wbg-allein-eigentuemer__layout,
.brxe-section:has(.wbg-allein-eigentuemer__layout) .wbg-allein-eigentuemer__layout {
    display: grid !important;
    grid-template-columns: minmax(0, 452fr) minmax(0, 534fr) !important;
    align-items: start !important;
    gap: clamp(12px, 1.5vw, 20px) !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.wbg-allein-eigentuemer__layout > .wbg-allein-eigentuemer__media,
.wbg-allein-eigentuemer__layout > .wbg-allein-eigentuemer__copy,
.wbg-allein-eigentuemer__layout > *:first-child,
.wbg-allein-eigentuemer__layout > *:nth-child(2) {
    align-self: start !important;
}

.wbg-allein-eigentuemer__copy,
.wbg-allein-eigentuemer__layout > .brxe-block,
.wbg-allein-eigentuemer__layout > .brxe-div {
    min-width: 0 !important;
}

.wbg-allein-eigentuemer__copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0;
    min-width: 0;
    max-width: 100%;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.wbg-allein-eigentuemer__body,
.wbg-allein-eigentuemer__body.wbg-allein-eigentuemer__body,
.wbg-allein-eigentuemer__body .brxe-text-basic,
.wbg-allein-eigentuemer__body .brxe-text {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0;
    color: var(--wbg-text-light, #ffffff) !important;
}

.wbg-allein-eigentuemer__body p {
    margin: 0 0 1em;
    color: inherit !important;
}

.wbg-allein-eigentuemer__body p:last-child {
    margin-bottom: 0;
}

.wbg-allein-eigentuemer__body strong,
.wbg-allein-eigentuemer__body b {
    font-weight: 700 !important;
    color: inherit !important;
}

.wbg-allein-eigentuemer__body ul,
.wbg-allein-eigentuemer__body ol,
.wbg-allein-eigentuemer__body .brxe-text-basic ul,
.wbg-allein-eigentuemer__body .brxe-text ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wbg-allein-eigentuemer__body li,
.wbg-allein-eigentuemer__body .brxe-text-basic li,
.wbg-allein-eigentuemer__body .brxe-text li {
    position: relative;
    margin: 0 0 12px !important;
    padding: 0 0 0 35px !important;
    color: inherit !important;
}

.wbg-allein-eigentuemer__body li:last-child,
.wbg-allein-eigentuemer__body .brxe-text-basic li:last-child,
.wbg-allein-eigentuemer__body .brxe-text li:last-child {
    margin-bottom: 0 !important;
}

.wbg-allein-eigentuemer__body li::before,
.wbg-allein-eigentuemer__body .brxe-text-basic li::before,
.wbg-allein-eigentuemer__body .brxe-text li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 19px;
    height: 15px;
    background: var(--wbg-text-light, #ffffff);
    border-radius: 2px;
    transform: skewX(-17.5deg);
}

.wbg-allein-eigentuemer__cta,
.wbg-allein-eigentuemer__cta.brxe-text-link,
.wbg-allein-eigentuemer__cta a {
    display: inline-block !important;
    align-self: flex-start;
    width: auto !important;
    max-width: 100%;
    margin-top: clamp(24px, 3vw, 32px);
    padding: 0;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: var(--wbg-text-light, #ffffff) !important;
    text-decoration: underline !important;
    text-decoration-color: currentColor !important;
    text-underline-offset: 3px;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, text-decoration-color 0.2s ease;
}

.wbg-allein-eigentuemer__cta::before,
.wbg-allein-eigentuemer__cta a::before,
.wbg-allein-eigentuemer__cta::after,
.wbg-allein-eigentuemer__cta a::after {
    display: none !important;
    content: none !important;
}

.wbg-allein-eigentuemer__cta:hover,
.wbg-allein-eigentuemer__cta:focus-visible,
.wbg-allein-eigentuemer__cta a:hover,
.wbg-allein-eigentuemer__cta a:focus-visible {
    opacity: 1;
    color: var(--wbg-gruen-akzent, #bce037) !important;
    text-decoration-color: currentColor !important;
}

/* Bild links – Parallelogramm */
.wbg-allein-eigentuemer__media,
.wbg-allein-eigentuemer__media.wbg-allein-eigentuemer__media,
.wbg-allein-eigentuemer__layout > *:first-child:has(.brxe-image),
.wbg-allein-eigentuemer__layout > *:first-child:has(img),
.wbg-allein-eigentuemer__layout > .wbg-allein-eigentuemer__media {
    position: relative !important;
    display: block !important;
    width: 80% !important;
    max-width: 80% !important;
    min-width: 0 !important;
    aspect-ratio: 534 / 305;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 10px;
    transform: skewX(-17.5deg);
    transform-origin: center center;
    isolation: isolate;
    justify-self: start;
    align-self: start !important;
}

.wbg-allein-eigentuemer__layout > img.brxe-image:first-child {
    position: relative !important;
    display: block !important;
    width: 80% !important;
    max-width: 80% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 534 / 305 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%) !important;
    -webkit-clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%) !important;
    margin: 0 !important;
    justify-self: start;
}

.wbg-allein-eigentuemer__media img:not(.wbg-allein-eigentuemer__cta),
.wbg-allein-eigentuemer__media img.brxe-image,
.wbg-allein-eigentuemer__media .brxe-image img,
.wbg-allein-eigentuemer__media picture,
.wbg-allein-eigentuemer__media picture img,
.wbg-allein-eigentuemer__layout > *:first-child img.brxe-image,
.wbg-allein-eigentuemer__layout > *:first-child .brxe-image img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 130% !important;
    height: 100% !important;
    max-width: none !important;
    left: -15% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: skewX(17.5deg) scale(1.05) !important;
    transform-origin: center center !important;
}

.wbg-allein-eigentuemer__media > .brxe-image:not(.wbg-allein-eigentuemer__cta),
.wbg-allein-eigentuemer__media > figure,
.wbg-allein-eigentuemer__media > picture,
.wbg-allein-eigentuemer__media > a:has(img),
.wbg-allein-eigentuemer__media.brxe-image,
.wbg-allein-eigentuemer__media .brxe-image:not(.wbg-allein-eigentuemer__cta),
.wbg-allein-eigentuemer__media .brxe-image:not(img),
.wbg-allein-eigentuemer__media a,
.wbg-allein-eigentuemer__media figure,
.wbg-allein-eigentuemer__layout > *:first-child .brxe-image:not(img),
.wbg-allein-eigentuemer__layout > *:first-child figure {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-allein-eigentuemer,
    .wbg-allein-eigentuemer.wbg-allein-eigentuemer,
    section.wbg-allein-eigentuemer,
    .brxe-section:has(.wbg-allein-eigentuemer__layout),
    .brxe-section:has(.wbg-allein-eigentuemer__inner) {
        padding: 56px 32px !important;
    }

    .wbg-allein-eigentuemer__inner,
    .wbg-allein-eigentuemer .wbg-allein-eigentuemer__inner {
        max-width: 100% !important;
    }

    .wbg-allein-eigentuemer__header,
    .brxe-block.wbg-allein-eigentuemer__header {
        margin-bottom: 32px !important;
        align-items: flex-start !important;
        text-align: left !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .wbg-allein-eigentuemer__header > * {
        text-align: left !important;
    }

    .wbg-allein-eigentuemer__intro,
    .wbg-allein-eigentuemer__intro.wbg-allein-eigentuemer__intro,
    .brxe-text-basic.wbg-allein-eigentuemer__intro,
    .wbg-allein-eigentuemer__intro .brxe-text-basic,
    .wbg-allein-eigentuemer__intro .brxe-text,
    .wbg-allein-eigentuemer__intro p,
    .brxe-section.wbg-allein-eigentuemer .brxe-text-basic.wbg-allein-eigentuemer__intro {
        text-align: left !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .wbg-allein-eigentuemer__layout,
    .wbg-allein-eigentuemer__layout.wbg-allein-eigentuemer__layout,
    .brxe-section:has(.wbg-allein-eigentuemer__layout) .wbg-allein-eigentuemer__layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 36px !important;
    }

    .wbg-allein-eigentuemer__copy,
    .wbg-allein-eigentuemer__layout > *:last-child,
    .wbg-allein-eigentuemer__layout > *:nth-child(2) {
        order: 1 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .wbg-allein-eigentuemer__media,
    .wbg-allein-eigentuemer__layout > *:first-child:has(.brxe-image),
    .wbg-allein-eigentuemer__layout > *:first-child:has(img),
    .wbg-allein-eigentuemer__layout > *:first-child {
        order: 2 !important;
        width: 80% !important;
        max-width: 80% !important;
        aspect-ratio: 534 / 305 !important;
        margin: 0 auto !important;
        justify-self: center !important;
    }

    .wbg-allein-eigentuemer__media img,
    .wbg-allein-eigentuemer__media .brxe-image img,
    .wbg-allein-eigentuemer__layout > *:first-child .brxe-image img {
        transform: skewX(17.5deg) scale(1.02) !important;
    }
}

@media (max-width: 640px) {
    .wbg-allein-eigentuemer,
    .wbg-allein-eigentuemer.wbg-allein-eigentuemer,
    section.wbg-allein-eigentuemer,
    .brxe-section:has(.wbg-allein-eigentuemer__layout),
    .brxe-section:has(.wbg-allein-eigentuemer__inner) {
        padding: 48px 24px !important;
    }

    .wbg-allein-eigentuemer__header,
    .brxe-block.wbg-allein-eigentuemer__header {
        margin-bottom: 24px !important;
        max-width: none !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .wbg-allein-eigentuemer__header > * {
        text-align: left !important;
    }

    .wbg-allein-eigentuemer__title,
    .brxe-heading.wbg-allein-eigentuemer__title,
    .wbg-allein-eigentuemer__header .brxe-heading,
    .wbg-allein-eigentuemer__header :is(h1, h2, h3, h4) {
        text-align: left !important;
        margin: 0 0 16px !important;
        max-width: none !important;
    }

    .wbg-allein-eigentuemer__intro,
    .wbg-allein-eigentuemer__intro.wbg-allein-eigentuemer__intro,
    .brxe-text-basic.wbg-allein-eigentuemer__intro,
    .wbg-allein-eigentuemer__intro .brxe-text-basic,
    .wbg-allein-eigentuemer__intro .brxe-text,
    .wbg-allein-eigentuemer__intro p,
    .brxe-section.wbg-allein-eigentuemer .brxe-text-basic.wbg-allein-eigentuemer__intro {
        text-align: left !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .wbg-allein-eigentuemer__layout,
    .wbg-allein-eigentuemer__layout.wbg-allein-eigentuemer__layout,
    .brxe-section:has(.wbg-allein-eigentuemer__layout) .wbg-allein-eigentuemer__layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 32px !important;
    }

    .wbg-allein-eigentuemer__copy,
    .wbg-allein-eigentuemer__layout > .wbg-allein-eigentuemer__copy,
    .wbg-allein-eigentuemer__layout > *:nth-child(2),
    .wbg-allein-eigentuemer__layout > *:last-child {
        order: 1 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .wbg-allein-eigentuemer__media,
    .wbg-allein-eigentuemer__media.wbg-allein-eigentuemer__media,
    .wbg-allein-eigentuemer__layout > .wbg-allein-eigentuemer__media,
    .wbg-allein-eigentuemer__layout > *:first-child,
    .wbg-allein-eigentuemer__layout > *:first-child:has(.brxe-image),
    .wbg-allein-eigentuemer__layout > *:first-child:has(img) {
        order: 2 !important;
        width: 88% !important;
        max-width: 88% !important;
        min-width: 0 !important;
        aspect-ratio: 534 / 305 !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        align-self: flex-start !important;
        justify-self: start !important;
    }

    .wbg-allein-eigentuemer__layout > img.brxe-image:first-child {
        width: 88% !important;
        max-width: 88% !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        align-self: flex-start !important;
    }
}


/* ==========================================================================
   SECTION "Immobilienverwaltung" – Eigentümer:innen-Service (Figma 1160:2183)
   --------------------------------------------------------------------------
   Weiße Section, zentrierter Header (#19502F), 3 Karten (.wbg-buyers-card).
   Desktop: 3-Spalten-Grid (kein Slider).
   Tablet: Slider mit 2 sichtbaren Karten (.wbg-immobilienverwaltung--compact-slider).
   Mobile: Slider mit 1 sichtbarer Karte.
   CPT: wbg_buyer_card, Taxonomie z. B. „Immobilienverwaltung“ (Limit 3, menu_order).

   Bricks-Struktur:
   Section (.wbg-immobilienverwaltung)
     Block (.wbg-immobilienverwaltung__header)
       Heading h2 (.wbg-immobilienverwaltung__title)
       Basic Text (.wbg-immobilienverwaltung__intro)
     Query Loop → Wrapper (.wbg-immobilienverwaltung__grid)
       Post type: wbg_buyer_card | Taxonomie-Filter: Immobilienverwaltung
       Loop-Item Block (.wbg-buyers-card)
         Block (.wbg-buyers-card__media) → Featured Image
         Block (.wbg-buyers-card__body)
           Heading (.wbg-buyers-card__title)  → {wbg_buyer_card_headline}
           Text (.wbg-buyers-card__desc)      → {wbg_buyer_card_desc}
           Text Link (.wbg-buyers-card__link) → URL: {wbg_buyer_card_url} / Text: {wbg_buyer_card_link_text}
     Block (.wbg-immobilienverwaltung__footer)
       Text Link (.wbg-immobilienverwaltung__cta) → „Jetzt kontaktieren →“
   ========================================================================== */

.wbg-immobilienverwaltung {
    padding: 80px 24px;
    background-color: #ffffff;
    color: var(--wbg-gruen-dunkel, #19502f);
    overflow-x: clip;
}

.wbg-immobilienverwaltung__header {
    max-width: 880px;
    margin: 0 auto 56px;
    text-align: center;
}

.wbg-immobilienverwaltung__title,
.brxe-heading.wbg-immobilienverwaltung__title {
    max-width: 880px;
    margin: 0 auto 16px;
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-fs-section-title);
    font-weight: 600;
    line-height: 1.1;
    color: var(--wbg-gruen-dunkel, #19502f);
    text-align: center;
}

.wbg-immobilienverwaltung__intro,
.wbg-immobilienverwaltung__intro .brxe-text-basic,
.wbg-immobilienverwaltung__intro .brxe-text {
    max-width: 854px;
    margin: 0 auto;
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--wbg-gruen-dunkel, #19502f);
    text-align: center;
}

.wbg-immobilienverwaltung__intro p {
    margin: 0;
}

.wbg-immobilienverwaltung__grid,
.wbg-immobilienverwaltung__grid.wbg-immobilienverwaltung__grid,
.wbg-immobilienverwaltung__grid.brxe-block,
.wbg-immobilienverwaltung__grid.brxe-div {
    --wbg-immobilienverwaltung-card-width: min(348px, calc((100% - 64px) / 3));
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 32px;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    grid-template-columns: none !important;
}

.wbg-immobilienverwaltung__grid > .brx-query-trail {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.wbg-immobilienverwaltung__grid > .brxe-block:not(.wbg-buyers-card):not(.brx-query-trail),
.wbg-immobilienverwaltung__grid > .brxe-div:not(.wbg-buyers-card):not(.brx-query-trail),
.wbg-immobilienverwaltung__grid > .brxe-container:not(.wbg-buyers-card):not(.brx-query-trail) {
    display: contents !important;
}

.wbg-immobilienverwaltung__grid > .wbg-buyers-card,
.wbg-immobilienverwaltung__grid > .brxe-block.wbg-buyers-card,
.wbg-immobilienverwaltung__grid > .brxe-div.wbg-buyers-card {
    flex: 0 0 var(--wbg-immobilienverwaltung-card-width) !important;
    width: var(--wbg-immobilienverwaltung-card-width) !important;
    max-width: var(--wbg-immobilienverwaltung-card-width) !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.wbg-immobilienverwaltung__grid .wbg-buyers-card.wbg-buyers-card {
    width: 100% !important;
    max-width: 100% !important;
}

.wbg-immobilienverwaltung__slider {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: visible;
    padding: 0 8px;
    box-sizing: border-box;
}

.wbg-immobilienverwaltung__arrow,
.wbg-immobilienverwaltung__pagination {
    display: none;
}

/* Sichtbar, sobald wbg-card-slider.js Slider-UI mountet (Tablet/Mobile) */
.wbg-immobilienverwaltung:has(.wbg-immobilienverwaltung__slider) .wbg-immobilienverwaltung__arrow,
.wbg-immobilienverwaltung:has(.wbg-immobilienverwaltung__slider) .wbg-immobilienverwaltung__pagination {
    display: flex;
}

.wbg-immobilienverwaltung__arrow {
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    color: var(--wbg-gruen-dunkel, #19502f);
    cursor: pointer;
    z-index: 5;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.08);
    transition: color 0.2s ease, transform 0.15s ease,
        box-shadow 0.2s ease, background-color 0.2s ease;
}

.wbg-immobilienverwaltung__arrow:hover,
.wbg-immobilienverwaltung__arrow:focus-visible {
    color: var(--wbg-gruen, #009450);
    background: #ffffff;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.16),
        0 2px 4px rgba(0, 0, 0, 0.1);
    outline: none;
}

.wbg-immobilienverwaltung__arrow:active {
    transform: translateY(-50%) scale(0.92);
}

.wbg-immobilienverwaltung__arrow:disabled,
.wbg-immobilienverwaltung__arrow.is-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.wbg-immobilienverwaltung__arrow svg {
    width: 22px;
    height: 22px;
    display: block;
}

.wbg-immobilienverwaltung__arrow--prev {
    left: 6px;
}

.wbg-immobilienverwaltung__arrow--next {
    right: 6px;
}

.wbg-immobilienverwaltung__pagination {
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 24px 0 0;
    margin: 0;
    list-style: none;
}

.wbg-immobilienverwaltung__pagination-item {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 0;
}

.wbg-immobilienverwaltung__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(25, 80, 47, 0.35);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.wbg-immobilienverwaltung__dot.is-active {
    background: var(--wbg-gruen-dunkel, #19502f);
    width: 10px;
    height: 10px;
}

.wbg-immobilienverwaltung__footer {
    max-width: 880px;
    margin: 48px auto 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Footer-CTA – Gradient-Parallelogramm (Figma BTN_Secondary) */
.wbg-immobilienverwaltung__cta,
.wbg-immobilienverwaltung__cta.brxe-text-link,
.wbg-immobilienverwaltung__cta a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-family: "Lato", sans-serif;
    font-size: var(--wbg-fs-cta);
    font-weight: 700;
    line-height: 1.05;
    color: var(--wbg-neutral-50, #fdfcfb);
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.25s ease, filter 0.25s ease;
    isolation: isolate;
}

.wbg-immobilienverwaltung__cta::before,
.wbg-immobilienverwaltung__cta a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--wbg-gruen, #009450) 73%,
        var(--wbg-gruen-akzent, #afcc46) 100%
    );
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
}

.wbg-immobilienverwaltung__cta:hover,
.wbg-immobilienverwaltung__cta:focus-visible,
.wbg-immobilienverwaltung__cta a:hover,
.wbg-immobilienverwaltung__cta a:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-immobilienverwaltung {
        padding: 64px 32px;
    }

    .wbg-immobilienverwaltung__header {
        margin-bottom: 40px;
    }

    .wbg-immobilienverwaltung--compact-slider {
        overflow-x: clip;
    }

    .wbg-immobilienverwaltung--compact-slider .wbg-immobilienverwaltung__grid.wbg-immobilienverwaltung__grid,
    .wbg-immobilienverwaltung--compact-slider .wbg-immobilienverwaltung__grid.brxe-block,
    .wbg-immobilienverwaltung--compact-slider .wbg-immobilienverwaltung__grid.brxe-div {
        --wbg-immobilienverwaltung-card-width: calc((100% - 16px) / 2);
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 32px;
        padding: 0 32px 12px;
        gap: 16px;
        max-width: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wbg-immobilienverwaltung--compact-slider .wbg-immobilienverwaltung__grid::-webkit-scrollbar {
        display: none;
    }

    .wbg-immobilienverwaltung--compact-slider .wbg-immobilienverwaltung__grid > .wbg-buyers-card,
    .wbg-immobilienverwaltung--compact-slider .wbg-immobilienverwaltung__grid > .brxe-block.wbg-buyers-card,
    .wbg-immobilienverwaltung--compact-slider .wbg-immobilienverwaltung__grid > .brxe-div.wbg-buyers-card,
    .wbg-immobilienverwaltung--compact-slider .wbg-immobilienverwaltung__grid > .brxe-block,
    .wbg-immobilienverwaltung--compact-slider .wbg-immobilienverwaltung__grid > .brxe-div {
        flex: 0 0 var(--wbg-immobilienverwaltung-card-width) !important;
        width: var(--wbg-immobilienverwaltung-card-width) !important;
        max-width: var(--wbg-immobilienverwaltung-card-width) !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }

    .wbg-immobilienverwaltung--compact-slider .wbg-immobilienverwaltung__arrow,
    .wbg-immobilienverwaltung--compact-slider .wbg-immobilienverwaltung__pagination {
        display: flex;
    }
}

@media (max-width: 640px) {
    .wbg-immobilienverwaltung {
        padding: 56px 0;
        overflow-x: hidden;
    }

    .wbg-immobilienverwaltung__header {
        margin-bottom: 32px;
        padding: 0 24px;
        align-items: flex-start !important;
        text-align: left !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .wbg-immobilienverwaltung__header > * {
        text-align: left !important;
    }

    .wbg-immobilienverwaltung__title,
    .brxe-heading.wbg-immobilienverwaltung__title,
    .wbg-immobilienverwaltung__header .brxe-heading,
    .wbg-immobilienverwaltung__header :is(h1, h2, h3, h4) {
        text-align: left !important;
        margin: 0 0 16px !important;
        max-width: none !important;
    }

    .wbg-immobilienverwaltung__intro,
    .wbg-immobilienverwaltung__intro.wbg-immobilienverwaltung__intro,
    .brxe-text-basic.wbg-immobilienverwaltung__intro,
    .wbg-immobilienverwaltung__intro .brxe-text-basic,
    .wbg-immobilienverwaltung__intro .brxe-text,
    .wbg-immobilienverwaltung__intro p,
    .brxe-section.wbg-immobilienverwaltung .brxe-text-basic.wbg-immobilienverwaltung__intro {
        overflow-wrap: break-word;
        hyphens: auto;
        text-align: left !important;
        margin: 0 !important;
        max-width: none !important;
        font-size: var(--wbg-fs-body) !important;
        line-height: 1.5 !important;
        letter-spacing: 0.01em !important;
        color: var(--wbg-gruen-dunkel, #19502f) !important;
    }

    .wbg-immobilienverwaltung__grid.wbg-immobilienverwaltung__grid,
    .wbg-immobilienverwaltung__grid.brxe-block,
    .wbg-immobilienverwaltung__grid.brxe-div {
        --wbg-immobilienverwaltung-card-width: calc(100% - 48px);
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 24px;
        padding: 0 24px 12px;
        gap: 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .wbg-immobilienverwaltung__grid::-webkit-scrollbar {
        display: none;
    }

    .wbg-immobilienverwaltung__grid > .wbg-buyers-card,
    .wbg-immobilienverwaltung__grid > .brxe-block.wbg-buyers-card,
    .wbg-immobilienverwaltung__grid > .brxe-div.wbg-buyers-card,
    .wbg-immobilienverwaltung__grid > .brxe-block,
    .wbg-immobilienverwaltung__grid > .brxe-div {
        flex: 0 0 var(--wbg-immobilienverwaltung-card-width) !important;
        width: var(--wbg-immobilienverwaltung-card-width) !important;
        max-width: var(--wbg-immobilienverwaltung-card-width) !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }

    .wbg-immobilienverwaltung__arrow,
    .wbg-immobilienverwaltung__pagination {
        display: flex;
    }

    .wbg-immobilienverwaltung__footer {
        margin-top: 40px;
        padding: 0 24px;
    }
}


/* ==========================================================================
   SECTION "Versicherungsschutz" – Eigentümer:innen-Service (Norima)
   --------------------------------------------------------------------------
   Norima-Gelb (#EAB90C), weiße Typo, zentrierter Header.
   Darunter 2 Blöcke: Parallelogramm-Bild + unterstrichener Link (weiß).

   Bricks-Struktur:
   Section (.wbg-versicherungsschutz)
     Block (.wbg-versicherungsschutz__inner)
       Block (.wbg-versicherungsschutz__header)
         Heading h2 (.wbg-versicherungsschutz__title)
         Basic Text (.wbg-versicherungsschutz__intro)
       Block (.wbg-versicherungsschutz__grid)
         Block (.wbg-versicherungsschutz__item) ×2
           Block (.wbg-versicherungsschutz__media) → Image
           Text Link (.wbg-versicherungsschutz__link)
   ========================================================================== */

.wbg-versicherungsschutz,
.wbg-versicherungsschutz.wbg-versicherungsschutz,
section.wbg-versicherungsschutz,
.brxe-section:has(.wbg-versicherungsschutz__grid),
.brxe-section:has(.wbg-versicherungsschutz__inner) {
    padding: clamp(72px, 8vw, 113px) clamp(24px, 14.7vw, 212px) !important;
    background-color: var(--wbg-norima, #eab90c) !important;
    color: var(--wbg-text-light, #ffffff);
    overflow-x: clip;
}

.wbg-versicherungsschutz__inner,
.wbg-versicherungsschutz .wbg-versicherungsschutz__inner,
.wbg-versicherungsschutz__inner.wbg-versicherungsschutz__inner {
    display: block !important;
    max-width: 1016px;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.wbg-versicherungsschutz__header,
.brxe-block.wbg-versicherungsschutz__header,
.brxe-div.wbg-versicherungsschutz__header,
.wbg-versicherungsschutz__header.brxe-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    max-width: 880px;
    margin: 0 auto 56px !important;
    text-align: center;
}

.wbg-versicherungsschutz__header > * {
    width: 100%;
    text-align: center !important;
}

.wbg-versicherungsschutz__title,
.brxe-heading.wbg-versicherungsschutz__title,
.wbg-versicherungsschutz__header .brxe-heading,
.wbg-versicherungsschutz__header :is(h1, h2, h3, h4),
.brxe-section:has(.wbg-versicherungsschutz__grid) .wbg-versicherungsschutz__header :is(.brxe-heading, h1, h2, h3, h4) {
    max-width: 880px;
    margin: 0 auto 16px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-section-title) !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    color: var(--wbg-text-light, #ffffff) !important;
    text-align: center !important;
}

.wbg-versicherungsschutz__intro,
.wbg-versicherungsschutz__intro.wbg-versicherungsschutz__intro,
.wbg-versicherungsschutz__intro .brxe-text-basic,
.wbg-versicherungsschutz__intro .brxe-text {
    max-width: 854px;
    margin: 0 auto !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em;
    color: var(--wbg-text-light, #ffffff) !important;
    text-align: center !important;
}

.wbg-versicherungsschutz__intro p {
    margin: 0;
}

.wbg-versicherungsschutz__grid,
.wbg-versicherungsschutz__grid.wbg-versicherungsschutz__grid,
.wbg-versicherungsschutz__grid.brxe-block,
.wbg-versicherungsschutz__grid.brxe-div {
    --wbg-versicherungsschutz-gap: clamp(24px, 4vw, 48px);
    --wbg-versicherungsschutz-item-width: min(484px, calc((100% - var(--wbg-versicherungsschutz-gap)) / 2));
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: var(--wbg-versicherungsschutz-gap);
    width: 100%;
    max-width: 1016px;
    margin: 0 auto;
}

.wbg-versicherungsschutz__grid > .wbg-versicherungsschutz__item,
.wbg-versicherungsschutz__grid > .brxe-block.wbg-versicherungsschutz__item,
.wbg-versicherungsschutz__grid > .brxe-div.wbg-versicherungsschutz__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex: 0 1 var(--wbg-versicherungsschutz-item-width) !important;
    width: var(--wbg-versicherungsschutz-item-width) !important;
    max-width: var(--wbg-versicherungsschutz-item-width) !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.wbg-versicherungsschutz__item,
.wbg-versicherungsschutz__grid > .brxe-block:not(.wbg-versicherungsschutz__grid),
.wbg-versicherungsschutz__grid > .brxe-div:not(.wbg-versicherungsschutz__grid) {
    align-items: flex-start !important;
    gap: 0;
}

.wbg-versicherungsschutz__media,
.wbg-versicherungsschutz__media.wbg-versicherungsschutz__media,
.wbg-versicherungsschutz__item > .wbg-versicherungsschutz__media,
.wbg-versicherungsschutz__item > *:first-child:has(.brxe-image),
.wbg-versicherungsschutz__item > *:first-child:has(img) {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 484 / 277;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 10px;
    transform: skewX(-17.5deg);
    transform-origin: center center;
    isolation: isolate;
}

.wbg-versicherungsschutz__media img:not(.wbg-versicherungsschutz__link),
.wbg-versicherungsschutz__media img.brxe-image,
.wbg-versicherungsschutz__media .brxe-image img,
.wbg-versicherungsschutz__media picture,
.wbg-versicherungsschutz__media picture img,
.wbg-versicherungsschutz__item > *:first-child img.brxe-image,
.wbg-versicherungsschutz__item > *:first-child .brxe-image img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 130% !important;
    height: 100% !important;
    max-width: none !important;
    left: -15% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: skewX(17.5deg) scale(1.05) !important;
    transform-origin: center center !important;
}

.wbg-versicherungsschutz__media > .brxe-image:not(.wbg-versicherungsschutz__link),
.wbg-versicherungsschutz__media > figure,
.wbg-versicherungsschutz__media > picture,
.wbg-versicherungsschutz__media > a:has(img),
.wbg-versicherungsschutz__media.brxe-image,
.wbg-versicherungsschutz__media .brxe-image:not(.wbg-versicherungsschutz__link),
.wbg-versicherungsschutz__media .brxe-image:not(img),
.wbg-versicherungsschutz__media a,
.wbg-versicherungsschutz__media figure,
.wbg-versicherungsschutz__item > *:first-child .brxe-image:not(img),
.wbg-versicherungsschutz__item > *:first-child figure {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.wbg-versicherungsschutz__link,
.wbg-versicherungsschutz__link.brxe-text-link,
.wbg-versicherungsschutz__link a {
    display: inline-block !important;
    align-self: flex-start !important;
    width: auto !important;
    max-width: 100%;
    margin-top: clamp(16px, 2.5vw, 24px);
    padding: 0;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: var(--wbg-text-light, #ffffff) !important;
    text-align: left !important;
    text-decoration: underline !important;
    text-decoration-color: currentColor !important;
    text-underline-offset: 3px;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: opacity 0.2s ease;
}

.wbg-versicherungsschutz__link::before,
.wbg-versicherungsschutz__link a::before,
.wbg-versicherungsschutz__link::after,
.wbg-versicherungsschutz__link a::after {
    display: none !important;
    content: none !important;
}

.wbg-versicherungsschutz__link:hover,
.wbg-versicherungsschutz__link:focus-visible,
.wbg-versicherungsschutz__link a:hover,
.wbg-versicherungsschutz__link a:focus-visible {
    opacity: 0.85;
    color: var(--wbg-text-light, #ffffff) !important;
}

@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-versicherungsschutz,
    .wbg-versicherungsschutz.wbg-versicherungsschutz,
    section.wbg-versicherungsschutz,
    .brxe-section:has(.wbg-versicherungsschutz__grid),
    .brxe-section:has(.wbg-versicherungsschutz__inner) {
        padding: 56px 40px !important;
        overflow-x: clip !important;
    }

    .wbg-versicherungsschutz__inner,
    .wbg-versicherungsschutz .wbg-versicherungsschutz__inner,
    .wbg-versicherungsschutz__inner.wbg-versicherungsschutz__inner {
        max-width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .wbg-versicherungsschutz__header,
    .brxe-block.wbg-versicherungsschutz__header {
        margin-bottom: 40px !important;
    }

    .wbg-versicherungsschutz__grid,
    .wbg-versicherungsschutz__grid.wbg-versicherungsschutz__grid,
    .wbg-versicherungsschutz__grid.brxe-block,
    .wbg-versicherungsschutz__grid.brxe-div {
        --wbg-versicherungsschutz-gap: 20px;
        --wbg-versicherungsschutz-item-width: min(400px, calc((100% - var(--wbg-versicherungsschutz-gap)) / 2));
        max-width: 100% !important;
        padding: 0;
        box-sizing: border-box;
        justify-content: center !important;
    }

    /* Tablet: clip-path statt skew – kein Überhang an den Viewport-Rändern */
    .wbg-versicherungsschutz__media,
    .wbg-versicherungsschutz__media.wbg-versicherungsschutz__media,
    .wbg-versicherungsschutz__item > .wbg-versicherungsschutz__media,
    .wbg-versicherungsschutz__item > *:first-child:has(.brxe-image),
    .wbg-versicherungsschutz__item > *:first-child:has(img) {
        transform: none !important;
        clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
        -webkit-clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
        overflow: hidden !important;
        border-radius: 10px;
        width: 100% !important;
        max-width: 100% !important;
    }

    .wbg-versicherungsschutz__media img:not(.wbg-versicherungsschutz__link),
    .wbg-versicherungsschutz__media img.brxe-image,
    .wbg-versicherungsschutz__media .brxe-image img,
    .wbg-versicherungsschutz__media picture,
    .wbg-versicherungsschutz__media picture img,
    .wbg-versicherungsschutz__item > *:first-child img.brxe-image,
    .wbg-versicherungsschutz__item > *:first-child .brxe-image img {
        transform: none !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        left: 0 !important;
        inset: 0 !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}

@media (max-width: 640px) {
    .wbg-versicherungsschutz,
    .wbg-versicherungsschutz.wbg-versicherungsschutz,
    section.wbg-versicherungsschutz,
    .brxe-section:has(.wbg-versicherungsschutz__grid),
    .brxe-section:has(.wbg-versicherungsschutz__inner) {
        padding: 56px 24px !important;
    }

    .wbg-versicherungsschutz__header,
    .brxe-block.wbg-versicherungsschutz__header {
        margin-bottom: 32px !important;
        align-items: flex-start !important;
        text-align: left !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .wbg-versicherungsschutz__header > * {
        text-align: left !important;
    }

    .wbg-versicherungsschutz__title,
    .brxe-heading.wbg-versicherungsschutz__title,
    .wbg-versicherungsschutz__header .brxe-heading,
    .wbg-versicherungsschutz__header :is(h1, h2, h3, h4) {
        text-align: left !important;
        margin: 0 0 16px !important;
        max-width: none !important;
    }

    .wbg-versicherungsschutz__intro,
    .wbg-versicherungsschutz__intro.wbg-versicherungsschutz__intro,
    .brxe-text-basic.wbg-versicherungsschutz__intro,
    .wbg-versicherungsschutz__intro .brxe-text-basic,
    .wbg-versicherungsschutz__intro .brxe-text,
    .wbg-versicherungsschutz__intro p,
    .brxe-section.wbg-versicherungsschutz .brxe-text-basic.wbg-versicherungsschutz__intro {
        text-align: left !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .wbg-versicherungsschutz__grid,
    .wbg-versicherungsschutz__grid.wbg-versicherungsschutz__grid,
    .wbg-versicherungsschutz__grid.brxe-block,
    .wbg-versicherungsschutz__grid.brxe-div {
        --wbg-versicherungsschutz-item-width: 100%;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .wbg-versicherungsschutz__grid > .wbg-versicherungsschutz__item,
    .wbg-versicherungsschutz__grid > .brxe-block.wbg-versicherungsschutz__item,
    .wbg-versicherungsschutz__grid > .brxe-div.wbg-versicherungsschutz__item {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .wbg-versicherungsschutz__grid > .wbg-versicherungsschutz__item + .wbg-versicherungsschutz__item,
    .wbg-versicherungsschutz__grid > .brxe-block.wbg-versicherungsschutz__item + .brxe-block.wbg-versicherungsschutz__item,
    .wbg-versicherungsschutz__grid > .brxe-div.wbg-versicherungsschutz__item + .brxe-div.wbg-versicherungsschutz__item {
        margin-top: clamp(24px, 6vw, 32px);
    }

    .wbg-versicherungsschutz__link,
    .wbg-versicherungsschutz__link.brxe-text-link,
    .wbg-versicherungsschutz__link a {
        align-self: flex-start !important;
        text-align: left !important;
    }
}


/* ==========================================================================
   SECTION "Kundencenter" – Services für Mieter:innen
   --------------------------------------------------------------------------
   Grüner Hintergrund, weiße Typo, Headline + Intro zentriert.
   Tab-Navigation wie „Wohnen & Mieten“ (.wbg-rent-search), hier mit 4 Tabs.
   Pro Tab: Bild links (Parallelogramm) | Text + 2 Textlinks rechts.

   Bricks-Struktur (exakt wie im Builder):
   Section (.wbg-kundencenter)
     Überschrift / Intro (optional Block .wbg-kundencenter__header)
     Tabs (Verschachtelbar) (.wbg-kundencenter__tabs)  ← Klasse am Widget!
       tab-menu / tab-title / tab-content              ← Bricks-Systemklassen
         tab-pane (×4, z. B. „Content Kundencenter NordWest“)
           Block (.wbg-kundencenter__panel)              ← PFLICHT: Panel-Block
             Bild (.wbg-kundencenter__media) – optional
             Block (.wbg-kundencenter__copy)
               Basic Text (.wbg-kundencenter__body)
               Block (.wbg-kundencenter__links)
                 Text Link (.wbg-kundencenter__link) ×2

   WICHTIG:
   - tab-pane, tab-menu, tab-title, tab-content NICHT umbenennen/entfernen!
   - Niemals display auf .tab-pane setzen (Bricks: .tab-pane = none, .brx-open = block).
   - Am Panel-Block in Bricks Layout „Block“ lassen – Theme setzt ab 1025 px Grid (2 Spalten).
   - Bricks setzt auf .brxe-block flex-direction: column → Grid + Doppelklasse nötig.
   ========================================================================== */

.wbg-kundencenter,
.wbg-kundencenter.wbg-kundencenter,
section.wbg-kundencenter,
.brxe-section:has(.wbg-kundencenter__tabs),
.brxe-section:has(.wbg-kundencenter__header) {
    padding: clamp(72px, 8vw, 113px) clamp(24px, 14.7vw, 212px) !important;
    background-color: var(--wbg-gruen, #009450) !important;
    color: var(--wbg-text-light, #ffffff);
    overflow-x: clip;
}

.wbg-kundencenter__inner,
.wbg-kundencenter .wbg-kundencenter__inner,
.wbg-kundencenter__inner.wbg-kundencenter__inner {
    display: block !important;
    max-width: 1016px;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}

.wbg-kundencenter__header,
.brxe-block.wbg-kundencenter__header,
.brxe-div.wbg-kundencenter__header,
.wbg-kundencenter__header.brxe-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    max-width: 880px;
    margin: 0 auto !important;
    text-align: center;
}

.wbg-kundencenter__header > * {
    width: 100%;
    text-align: center !important;
}

.wbg-kundencenter__title,
.brxe-heading.wbg-kundencenter__title,
.wbg-kundencenter__header .brxe-heading,
.wbg-kundencenter__header :is(h1, h2, h3, h4),
.brxe-section:has(.wbg-kundencenter__tabs) .wbg-kundencenter__header :is(.brxe-heading, h1, h2, h3, h4) {
    max-width: 880px;
    margin: 0 auto 16px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-section-title) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: var(--wbg-text-light, #ffffff) !important;
    text-align: center !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.wbg-kundencenter__intro,
.wbg-kundencenter__intro.wbg-kundencenter__intro,
.wbg-kundencenter__intro .brxe-text-basic,
.wbg-kundencenter__intro .brxe-text {
    max-width: 854px;
    margin: 0 auto !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em;
    color: var(--wbg-text-light, #ffffff) !important;
    text-align: center !important;
}

.wbg-kundencenter__intro p {
    margin: 0;
}

.brxe-section:has(.wbg-kundencenter__tabs) .brxe-tabs-nested,
.brxe-section:has(.wbg-kundencenter__tabs) .wbg-kundencenter__tabs,
.wbg-kundencenter .brxe-tabs-nested,
.wbg-kundencenter .wbg-kundencenter__tabs {
    margin-top: 30px !important;
}

/* Tab-Panel: 2 Spalten per Grid am Panel-Block – NICHT display auf .tab-pane! */
@media (min-width: 641px) {
    .wbg-kundencenter__panel,
    .wbg-kundencenter__panel.wbg-kundencenter__panel,
    .wbg-kundencenter .tab-pane.brx-open > .brxe-block,
    .wbg-kundencenter .tab-pane.brx-open > .brxe-div,
    .wbg-kundencenter .tab-pane.brx-open > .brxe-container,
    .wbg-kundencenter .tab-pane.brx-open > .wbg-kundencenter__panel,
    .brxe-section:has(.wbg-kundencenter__tabs) .tab-pane.brx-open > .brxe-block,
    .brxe-section:has(.wbg-kundencenter__tabs) .tab-pane.brx-open > .brxe-div,
    .brxe-section:has(.wbg-kundencenter__tabs) .tab-pane.brx-open > .brxe-container,
    .brxe-section:has(.wbg-kundencenter__tabs) .tab-pane.brx-open > .wbg-kundencenter__panel,
    .brxe-tabs-nested.wbg-kundencenter__tabs .tab-pane.brx-open > .brxe-block,
    .brxe-tabs-nested.wbg-kundencenter__tabs .tab-pane.brx-open > .brxe-div,
    .brxe-tabs-nested.wbg-kundencenter__tabs .tab-pane.brx-open > .brxe-container {
        display: grid !important;
        grid-template-columns: minmax(0, max-content) minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
        align-items: start !important;
        gap: clamp(48px, 5vw, 64px) !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        flex-direction: unset !important;
        flex-wrap: unset !important;
    }
}

.wbg-kundencenter__panel > .brxe-block,
.wbg-kundencenter__panel > .brxe-div,
.wbg-kundencenter__panel > .brxe-container,
.brxe-section:has(.wbg-kundencenter__tabs) .tab-pane.brx-open > .brxe-block > *,
.brxe-section:has(.wbg-kundencenter__tabs) .tab-pane.brx-open > .brxe-div > *,
.brxe-section:has(.wbg-kundencenter__tabs) .tab-pane.brx-open > .brxe-container > *,
.wbg-kundencenter .tab-pane.brx-open > .brxe-block > *,
.wbg-kundencenter .tab-pane.brx-open > .brxe-div > *,
.wbg-kundencenter .tab-pane.brx-open > .brxe-container > * {
    min-width: 0 !important;
}

.wbg-kundencenter__copy,
.wbg-kundencenter__panel > .brxe-block,
.wbg-kundencenter__panel > .brxe-div,
.wbg-kundencenter .tab-pane > .brxe-block > .brxe-block:nth-child(2),
.wbg-kundencenter .tab-pane > .brxe-div > .brxe-block:nth-child(2),
.wbg-kundencenter .tab-pane > .brxe-block > .wbg-kundencenter__copy {
    min-width: 0 !important;
}

.wbg-kundencenter__copy,
.brxe-section:has(.wbg-kundencenter__tabs) .wbg-kundencenter__panel > *:nth-child(2),
.brxe-section:has(.wbg-kundencenter__tabs) .wbg-kundencenter__panel > *:only-child > *:nth-child(2),
.brxe-section:has(.wbg-kundencenter__tabs) .wbg-kundencenter__panel > *:only-child > .wbg-kundencenter__copy,
.brxe-section:has(.wbg-kundencenter__tabs) .tab-pane > .brxe-block > *:nth-child(2),
.brxe-section:has(.wbg-kundencenter__tabs) .tab-pane > .brxe-block:only-child > *:nth-child(2),
.brxe-section:has(.wbg-kundencenter__tabs) .tab-pane > .brxe-block:nth-child(2),
.wbg-kundencenter__panel > *:nth-child(2),
.wbg-kundencenter__panel > *:only-child > *:nth-child(2),
.wbg-kundencenter__panel > *:only-child > .wbg-kundencenter__copy,
.wbg-kundencenter__panel > *:only-child > *:has(.brxe-text-basic, .brxe-text, .wbg-kundencenter__body):not(:has(.brxe-image)),
.wbg-kundencenter .tab-pane > .brxe-block:only-child > *:nth-child(2),
.wbg-kundencenter .tab-pane > .brxe-block:nth-child(2),
.wbg-kundencenter .tab-pane > .brxe-div > .brxe-block:nth-child(2),
.wbg-kundencenter .tab-pane > .brxe-block > .wbg-kundencenter__copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: clamp(16px, 2vw, 24px) !important;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    flex-grow: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    font-style: normal !important;
}

.wbg-kundencenter__body,
.wbg-kundencenter__body.wbg-kundencenter__body,
.wbg-kundencenter__body .brxe-text-basic,
.wbg-kundencenter__body .brxe-text,
.wbg-kundencenter__panel > *:nth-child(2) .brxe-text-basic,
.wbg-kundencenter__panel > *:nth-child(2) .brxe-text,
.wbg-kundencenter__panel > *:nth-child(2) p,
.wbg-kundencenter .tab-pane > .brxe-block:only-child > *:nth-child(2) > .brxe-text-basic,
.wbg-kundencenter .tab-pane > .brxe-block:only-child > *:nth-child(2) > .brxe-text,
.wbg-kundencenter .tab-pane > .brxe-block:nth-child(2) > .brxe-text-basic,
.wbg-kundencenter .tab-pane > .brxe-block:nth-child(2) > .brxe-text,
.wbg-kundencenter .tab-pane > .brxe-block > .brxe-block:nth-child(2) > .brxe-text-basic,
.wbg-kundencenter .tab-pane > .brxe-block > .brxe-block:nth-child(2) > .brxe-text,
.wbg-kundencenter .tab-pane > .brxe-div > .brxe-block:nth-child(2) > .brxe-text-basic,
.wbg-kundencenter .tab-pane > .brxe-div > .brxe-block:nth-child(2) > .brxe-text {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.5 !important;
    letter-spacing: 0;
    color: var(--wbg-text-light, #ffffff) !important;
    text-align: left !important;
    transform: none !important;
}

.wbg-kundencenter__body p {
    margin: 0 0 1em;
    color: inherit !important;
}

.wbg-kundencenter__body p:last-child {
    margin-bottom: 0;
}

.wbg-kundencenter__links,
.wbg-kundencenter__links.wbg-kundencenter__links,
.wbg-kundencenter__copy > .wbg-kundencenter__links,
.wbg-kundencenter__panel > *:nth-child(2) > .wbg-kundencenter__links,
.wbg-kundencenter__panel > *:nth-child(2) > .brxe-block:has(.brxe-text-link),
.wbg-kundencenter__panel > *:nth-child(2) > .brxe-block:has(.wbg-kundencenter__link),
.wbg-kundencenter__panel > *:nth-child(2) > .brxe-div:has(.brxe-text-link),
.brxe-section:has(.wbg-kundencenter__tabs) .wbg-kundencenter__panel > *:nth-child(2) > .brxe-block:has(.brxe-text-link),
.wbg-kundencenter .tab-pane > .brxe-block > .brxe-block:nth-child(2) > .brxe-block:has(.brxe-text-link),
.wbg-kundencenter .tab-pane > .brxe-block:only-child > *:nth-child(2) > .brxe-block:has(.brxe-text-link),
.wbg-kundencenter .tab-pane > .brxe-block > .brxe-block:nth-child(2) > .brxe-block:has(.brxe-text-link),
.wbg-kundencenter .tab-pane > .brxe-div > .brxe-block:nth-child(2) > .brxe-block:has(.brxe-text-link) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px clamp(24px, 4vw, 40px) !important;
    width: 100%;
    margin-top: 0 !important;
    flex-grow: 0 !important;
    text-align: left !important;
}

.wbg-kundencenter__link,
.wbg-kundencenter__link.brxe-text-link,
.wbg-kundencenter__link a,
.wbg-kundencenter__links > .wbg-kundencenter__link,
.wbg-kundencenter__copy > .wbg-kundencenter__link {
    display: inline-flex !important;
    align-items: center;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-link) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.2 !important;
    color: var(--wbg-text-light, #ffffff) !important;
    text-decoration: underline !important;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transform: none !important;
    transition: opacity 0.2s ease;
}

.wbg-kundencenter__link:hover,
.wbg-kundencenter__link:focus-visible,
.wbg-kundencenter__link a:hover,
.wbg-kundencenter__link a:focus-visible {
    opacity: 0.85;
}

/* Bild links – Parallelogramm nur am Bild-Element, nie am Text-Wrapper (overflow!) */
.wbg-kundencenter__media,
.wbg-kundencenter__media.wbg-kundencenter__media,
.wbg-kundencenter__panel .wbg-kundencenter__media,
.wbg-kundencenter__panel > .brxe-image:first-child:not(img),
.wbg-kundencenter__panel > *:first-child > .brxe-image:not(img),
.wbg-kundencenter__panel > *:first-child > figure.brxe-image,
.wbg-kundencenter__panel > *:only-child > *:first-child > .brxe-image:not(img),
.wbg-kundencenter__panel > *:only-child > .brxe-image:first-child:not(img),
.brxe-section:has(.wbg-kundencenter__tabs) .wbg-kundencenter__panel .wbg-kundencenter__media,
.brxe-section:has(.wbg-kundencenter__tabs) .wbg-kundencenter__panel > *:first-child > .brxe-image:not(img),
.wbg-kundencenter .tab-pane > .brxe-block > *:first-child > .brxe-image:not(img),
.wbg-kundencenter .tab-pane > .brxe-block > .brxe-image:first-child:not(img),
.wbg-kundencenter .tab-pane > .brxe-div > *:first-child > .brxe-image:not(img) {
    position: relative !important;
    display: block !important;
    width: min(100%, 400px) !important;
    max-width: 400px !important;
    min-width: 0 !important;
    aspect-ratio: 534 / 305 !important;
    overflow: hidden !important;
    border-radius: 5px !important;
    transform: skewX(-17.5deg) !important;
    transform-origin: center center;
    isolation: isolate;
    align-self: start !important;
    justify-self: start !important;
    flex-shrink: 0 !important;
}

/* Spalten-Wrapper ohne Medien-Maske */
.wbg-kundencenter__panel > *:first-child:not(.wbg-kundencenter__media),
.wbg-kundencenter__panel > *:only-child:not(:has(> .brxe-image, > img)),
.brxe-section:has(.wbg-kundencenter__tabs) .wbg-kundencenter__panel > *:first-child:not(.wbg-kundencenter__media) {
    overflow: visible !important;
    transform: none !important;
    aspect-ratio: unset !important;
    height: auto !important;
}

/* img.brxe-image direkt (ohne skew-Wrapper) – Parallelogramm per clip-path */
.wbg-kundencenter__panel > img.brxe-image:first-child,
.wbg-kundencenter__panel > *:first-child:not(.wbg-kundencenter__media) > img.brxe-image,
img.brxe-image.wbg-kundencenter__media {
    position: relative !important;
    display: block !important;
    width: min(100%, 400px) !important;
    max-width: 400px !important;
    aspect-ratio: 534 / 305 !important;
    overflow: hidden !important;
    border-radius: 5px !important;
    transform: none !important;
    clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
    object-fit: cover !important;
    object-position: center center !important;
}

@media (min-width: 641px) {
    /* Fallback: Bild + Text noch in einem gemeinsamen Block verschachtelt */
    .wbg-kundencenter__panel > .brxe-block:only-child:has(.brxe-image):has(.brxe-text-basic, .brxe-text, .wbg-kundencenter__copy, .brxe-text-link),
    .wbg-kundencenter__panel > .brxe-div:only-child:has(.brxe-image):has(.brxe-text-basic, .brxe-text, .wbg-kundencenter__copy, .brxe-text-link),
    .wbg-kundencenter__panel > .brxe-container:only-child:has(.brxe-image):has(.brxe-text-basic, .brxe-text, .wbg-kundencenter__copy, .brxe-text-link),
    .brxe-section:has(.wbg-kundencenter__tabs) .wbg-kundencenter__panel > .brxe-block:only-child:has(.brxe-image):has(.brxe-text-basic, .brxe-text, .wbg-kundencenter__copy, .brxe-text-link) {
        display: grid !important;
        grid-template-columns: minmax(0, max-content) minmax(0, 1fr) !important;
        align-items: start !important;
        gap: clamp(48px, 5vw, 64px) !important;
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
        transform: none !important;
        aspect-ratio: unset !important;
    }

    .wbg-kundencenter__panel > *:only-child > *:nth-child(2),
    .wbg-kundencenter__panel > *:only-child > .wbg-kundencenter__copy,
    .wbg-kundencenter__panel > *:only-child > *:has(.brxe-text-basic, .brxe-text, .wbg-kundencenter__body):not(:has(.brxe-image)) {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
        overflow: visible !important;
        transform: none !important;
    }
}

.wbg-kundencenter__media img,
.wbg-kundencenter__media img.brxe-image,
.wbg-kundencenter__media .brxe-image img,
.wbg-kundencenter__media picture,
.wbg-kundencenter__media picture img,
.wbg-kundencenter__panel .wbg-kundencenter__media img,
.wbg-kundencenter__panel .wbg-kundencenter__media .brxe-image img,
.wbg-kundencenter__panel > .brxe-image:first-child:not(img) img,
.wbg-kundencenter__panel > *:first-child > .brxe-image:not(img) img,
.wbg-kundencenter__panel > *:first-child > .brxe-image img.brxe-image,
.brxe-section:has(.wbg-kundencenter__tabs) .wbg-kundencenter__panel > *:first-child > .brxe-image img,
.brxe-section:has(.wbg-kundencenter__tabs) .wbg-kundencenter__panel .wbg-kundencenter__media img,
.wbg-kundencenter .tab-pane > .brxe-block > *:first-child > .brxe-image img,
.wbg-kundencenter .tab-pane > .brxe-block > .brxe-image img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 130% !important;
    height: 100% !important;
    max-width: none !important;
    left: -15% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: skewX(17.5deg) scale(1.05) !important;
    transform-origin: center center !important;
}

/* Bild-Element ohne Wrapper (img.brxe-image) – nur object-fit, Maske siehe clip-path oben */
.wbg-kundencenter__panel > img.brxe-image:first-child,
.wbg-kundencenter__panel > *:first-child > img.brxe-image {
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
}

.wbg-kundencenter__media .brxe-image:not(img),
.wbg-kundencenter__media a,
.wbg-kundencenter__media figure,
.wbg-kundencenter__panel .wbg-kundencenter__media .brxe-image:not(img),
.brxe-section:has(.wbg-kundencenter__tabs) .wbg-kundencenter__panel > *:first-child > figure {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-kundencenter,
    .wbg-kundencenter.wbg-kundencenter,
    section.wbg-kundencenter,
    .brxe-section:has(.wbg-kundencenter__tabs),
    .brxe-section:has(.wbg-kundencenter__header) {
        padding: 56px 32px !important;
    }

    .wbg-kundencenter__header,
    .brxe-block.wbg-kundencenter__header {
        margin-bottom: 0 !important;
    }

    .wbg-kundencenter .brxe-tabs-nested,
    .wbg-kundencenter .wbg-kundencenter__tabs {
        margin-top: 30px !important;
    }

    .wbg-kundencenter .tab-title .brxe-text-basic,
    .wbg-kundencenter .tab-title .brxe-text {
        font-size: clamp(0.75rem, 1.8vw, 1rem) !important;
    }

    .wbg-kundencenter .tab-pane.brx-open > .brxe-block,
    .wbg-kundencenter .tab-pane.brx-open > .brxe-div,
    .wbg-kundencenter .tab-pane.brx-open > .brxe-container,
    .wbg-kundencenter .tab-pane.brx-open > .wbg-kundencenter__panel,
    .brxe-section:has(.wbg-kundencenter__tabs) .tab-pane.brx-open > .brxe-block,
    .brxe-section:has(.wbg-kundencenter__tabs) .tab-pane.brx-open > .brxe-div,
    .brxe-section:has(.wbg-kundencenter__tabs) .tab-pane.brx-open > .brxe-container,
    .brxe-section:has(.wbg-kundencenter__tabs) .tab-pane.brx-open > .wbg-kundencenter__panel,
    .wbg-kundencenter__panel,
    .wbg-kundencenter__panel.wbg-kundencenter__panel {
        gap: clamp(32px, 4vw, 48px) !important;
    }

    .wbg-kundencenter__media,
    .wbg-kundencenter__media.wbg-kundencenter__media,
    .wbg-kundencenter__panel .wbg-kundencenter__media,
    .wbg-kundencenter__panel > .brxe-image:first-child:not(img),
    .wbg-kundencenter__panel > *:first-child > .brxe-image:not(img),
    .wbg-kundencenter__panel > *:only-child > *:first-child > .brxe-image:not(img),
    .wbg-kundencenter__panel > *:only-child > .brxe-image:first-child:not(img),
    .brxe-section:has(.wbg-kundencenter__tabs) .wbg-kundencenter__panel .wbg-kundencenter__media,
    .brxe-section:has(.wbg-kundencenter__tabs) .wbg-kundencenter__panel > *:first-child > .brxe-image:not(img),
    .wbg-kundencenter .tab-pane > .brxe-block > *:first-child > .brxe-image:not(img),
    .wbg-kundencenter .tab-pane > .brxe-block > .brxe-image:first-child:not(img),
    .wbg-kundencenter .tab-pane > .brxe-div > *:first-child > .brxe-image:not(img),
    .wbg-kundencenter__panel > img.brxe-image:first-child,
    .wbg-kundencenter__panel > *:first-child:not(.wbg-kundencenter__media) > img.brxe-image,
    img.brxe-image.wbg-kundencenter__media {
        width: min(100%, clamp(260px, 34vw, 340px)) !important;
        max-width: clamp(260px, 34vw, 340px) !important;
        margin: 0 !important;
        align-self: start !important;
        justify-self: start !important;
    }
}

@media (max-width: 640px) {
    .wbg-kundencenter,
    .wbg-kundencenter.wbg-kundencenter,
    section.wbg-kundencenter,
    .brxe-section:has(.wbg-kundencenter__tabs),
    .brxe-section:has(.wbg-kundencenter__header) {
        padding: 48px 24px !important;
        align-items: stretch !important;
    }

    .wbg-kundencenter__inner,
    .wbg-kundencenter .wbg-kundencenter__inner,
    .wbg-kundencenter__inner.wbg-kundencenter__inner {
        max-width: none !important;
        width: 100% !important;
    }

    .wbg-kundencenter .brxe-tabs-nested,
    .wbg-kundencenter .wbg-kundencenter__tabs,
    .wbg-kundencenter .tab-content {
        width: 100% !important;
        max-width: 100% !important;
        align-self: stretch !important;
    }

    .wbg-kundencenter__header,
    .brxe-block.wbg-kundencenter__header {
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .wbg-kundencenter .brxe-tabs-nested,
    .wbg-kundencenter .wbg-kundencenter__tabs {
        margin-top: 30px !important;
    }

    .wbg-kundencenter__header > * {
        text-align: left !important;
    }

    .wbg-kundencenter__title,
    .brxe-heading.wbg-kundencenter__title,
    .wbg-kundencenter__header .brxe-heading,
    .wbg-kundencenter__header :is(h1, h2, h3, h4) {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
    }

    .wbg-kundencenter__intro,
    .wbg-kundencenter__intro.wbg-kundencenter__intro,
    .brxe-text-basic.wbg-kundencenter__intro,
    .wbg-kundencenter__intro .brxe-text-basic,
    .wbg-kundencenter__intro .brxe-text,
    .wbg-kundencenter__intro p,
    .brxe-section.wbg-kundencenter .brxe-text-basic.wbg-kundencenter__intro {
        text-align: left !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .wbg-kundencenter .tab-pane.brx-open > .brxe-block,
    .wbg-kundencenter .tab-pane.brx-open > .brxe-div,
    .wbg-kundencenter .tab-pane.brx-open > .brxe-container,
    .wbg-kundencenter .tab-pane.brx-open > .wbg-kundencenter__panel,
    .brxe-section:has(.wbg-kundencenter__tabs) .tab-pane.brx-open > .brxe-block,
    .brxe-section:has(.wbg-kundencenter__tabs) .tab-pane.brx-open > .brxe-div,
    .brxe-section:has(.wbg-kundencenter__tabs) .tab-pane.brx-open > .brxe-container,
    .brxe-section:has(.wbg-kundencenter__tabs) .tab-pane.brx-open > .wbg-kundencenter__panel,
    .wbg-kundencenter__panel,
    .wbg-kundencenter__panel.wbg-kundencenter__panel {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 32px !important;
    }

    .wbg-kundencenter .tab-pane.brx-open > .brxe-block > *:nth-child(2),
    .wbg-kundencenter .tab-pane.brx-open > .brxe-div > *:nth-child(2),
    .wbg-kundencenter .tab-pane.brx-open > .brxe-container > *:nth-child(2),
    .brxe-section:has(.wbg-kundencenter__tabs) .tab-pane.brx-open > .brxe-block > *:nth-child(2),
    .wbg-kundencenter__panel > *:nth-child(2),
    .wbg-kundencenter__copy {
        order: 1 !important;
    }

    .wbg-kundencenter .tab-pane.brx-open > .brxe-block > *:first-child:has(.brxe-image),
    .wbg-kundencenter .tab-pane.brx-open > .brxe-block > *:first-child:has(img),
    .wbg-kundencenter .tab-pane.brx-open > .brxe-div > *:first-child:has(.brxe-image),
    .wbg-kundencenter .tab-pane.brx-open > .brxe-container > *:first-child:has(.brxe-image),
    .brxe-section:has(.wbg-kundencenter__tabs) .tab-pane.brx-open > .brxe-block > *:first-child:has(.brxe-image),
    .wbg-kundencenter__panel > *:first-child:has(.brxe-image),
    .wbg-kundencenter__panel > *:first-child:has(img),
    .wbg-kundencenter__media {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        aspect-ratio: 534 / 305 !important;
        transform: none !important;
        align-self: stretch !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        border-radius: 5px !important;
        overflow: hidden !important;
    }

    .wbg-kundencenter .tab-pane.brx-open > .brxe-block > *:first-child:has(.brxe-image),
    .wbg-kundencenter .tab-pane.brx-open > .brxe-block > *:first-child:has(img),
    .wbg-kundencenter .tab-pane.brx-open > .brxe-div > *:first-child:has(.brxe-image),
    .wbg-kundencenter .tab-pane.brx-open > .brxe-container > *:first-child:has(.brxe-image),
    .brxe-section:has(.wbg-kundencenter__tabs) .tab-pane.brx-open > .brxe-block > *:first-child:has(.brxe-image),
    .wbg-kundencenter__panel > *:first-child:has(.brxe-image),
    .wbg-kundencenter__panel > *:first-child:has(img),
    .wbg-kundencenter__panel > .brxe-image:first-child:not(img),
    .wbg-kundencenter__panel > *:first-child > .brxe-image:not(img),
    .wbg-kundencenter__panel > img.brxe-image:first-child,
    .wbg-kundencenter__panel > *:first-child:not(.wbg-kundencenter__media) > img.brxe-image,
    img.brxe-image.wbg-kundencenter__media {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        aspect-ratio: 534 / 305 !important;
        transform: none !important;
        align-self: stretch !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        border-radius: 5px !important;
        overflow: hidden !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .wbg-kundencenter__media img,
    .wbg-kundencenter__media img.brxe-image,
    .wbg-kundencenter__media .brxe-image img,
    .wbg-kundencenter__panel .wbg-kundencenter__media img,
    .wbg-kundencenter__panel > .brxe-image:first-child:not(img) img,
    .wbg-kundencenter__panel > *:first-child > .brxe-image img,
    .wbg-kundencenter .tab-pane > .brxe-block > *:first-child > .brxe-image img,
    .wbg-kundencenter .tab-pane > .brxe-block > .brxe-image img,
    img.brxe-image.wbg-kundencenter__media,
    .wbg-kundencenter__panel > img.brxe-image:first-child {
        transform: none !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        left: 0 !important;
        position: absolute !important;
        inset: 0 !important;
        object-fit: cover !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        border-radius: 5px !important;
    }

    .wbg-kundencenter .tab-pane.brx-open .brxe-text-basic,
    .wbg-kundencenter .tab-pane.brx-open .brxe-text,
    .wbg-kundencenter .tab-pane.brx-open .wbg-kundencenter__body,
    .wbg-kundencenter .tab-pane.brx-open .wbg-kundencenter__body p,
    .wbg-kundencenter__panel > *:nth-child(2) .brxe-text-basic,
    .wbg-kundencenter__panel > *:nth-child(2) .brxe-text,
    .wbg-kundencenter__panel > *:nth-child(2) p,
    .wbg-kundencenter__copy,
    .wbg-kundencenter__copy .brxe-text-basic,
    .wbg-kundencenter__copy .brxe-text {
        width: 100% !important;
        max-width: none !important;
        text-align: left !important;
        transform: none !important;
    }

    .wbg-kundencenter__links {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px !important;
    }
}


/* ==========================================================================
   SECTION: Services für Mieter:innen  (Figma "HOME - Desktop - 21.04.2026"
   Node 1008:414).

   - Helle Section (Background = transparent / Page-BG), Header zentriert
   - 2 × 2 Card-Grid (4 Karten), jede Karte 651 × 360 px im Desktop
   - Desktop: 2×2-Grid
   - Tablet (641–1024 px): Slider, 1 Karte sichtbar (.wbg-tenants--compact-slider + JS)
   - Mobile (≤640 px): Slider mit Peek + schwebendem Bild (unverändert)
   - Card-Layout: Text links (~33 %), Bild rechts (~67 %) mit
     diagonal beschnittener linker Bildkante (Marken-Schräge)
   - Card-BG #F0EEE9 (Neutral 200), Text & Titel in Dunkelgrün
   - Icon SITZT direkt rechts neben dem Titel (kein Badge wie bei Käufer)
   - Karten-Varianten setzen nur das Icon via CSS-Variable -
     Mediathek-URLs später hier eintragen, der Rest bleibt gleich

   Bricks-Struktur:
   Section (.wbg-tenants)
     Block "Header"                          -> wbg-tenants__header
       Heading h2                            -> wbg-tenants__title
       Basic Text                            -> wbg-tenants__intro
     Block "Grid"                            -> wbg-tenants__grid
       Block "Card App"                      -> wbg-tenants-card wbg-tenants-card--app
         Block "Body"                        -> wbg-tenants-card__body
           Heading h3                        -> wbg-tenants-card__title
           Basic Text                        -> wbg-tenants-card__desc
           Text Link                         -> wbg-tenants-card__link
         Block "Media"                       -> wbg-tenants-card__media
           Image
       Block "Card Schaden"                  -> ... --schaden
       Block "Card Haushaltsrechner"         -> ... --rechner
       Block "Card FAQ"                      -> ... --faq

   JetEngine CPT wbg_tenant_card + Kategorie/Taxonomie:
   1. Beiträge anlegen (Titel, Beitragsbild, Headline, Text, URL, Link-Text, Icon optional)
   2. Bricks Query Loop in .wbg-tenants__grid, Taxonomie-Filter auf eure Kategorie
   3. Loop-Item .wbg-tenants-card:
        .wbg-tenants-card__body
          .wbg-tenants-card__head
            .wbg-tenants-card__title     -> {wbg_tenant_card_headline}
            Mieter-Karte Icon Element     -> „Daten aus Mieter-Karte Beitrag“
          .wbg-tenants-card__desc         -> {wbg_tenant_card_desc}
          .wbg-tenants-card__link        -> {wbg_tenant_card_url} / {wbg_tenant_card_link_text}
        .wbg-tenants-card__media         -> {post_thumbnail}
   ========================================================================== */
.wbg-tenants {
    padding: 80px 24px;
    color: var(--wbg-gruen-dunkel);
}

.wbg-tenants__header {
    max-width: 880px;
    margin: 0 auto 56px;
    text-align: center;
}

.wbg-tenants__title {
    max-width: 880px;
    margin: 0 auto 16px;
    font-family: 'Lato', sans-serif;
    font-size: var(--wbg-fs-section-title);    /* fluid 36-56 px */
    font-weight: 700;
    line-height: 1.1;
    color: var(--wbg-gruen-dunkel);
    text-align: center;
}

.wbg-tenants__intro {
    max-width: 854px;
    margin: 0 auto;
    font-family: 'Lato', sans-serif;
    font-size: var(--wbg-fs-body);  /* fluid 20-24 px */
    font-weight: 400;
    line-height: 1.5;
    color: var(--wbg-gruen-dunkel);
    text-align: center;
}

.wbg-tenants__grid,
.wbg-tenants__grid.wbg-tenants__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 28px;
    max-width: 1320px;
    margin: 0 auto;
    width: 100%;
    /* Bricks setzt auf Query-Loop-Blöcke oft flex + column → Grid erzwingen */
    flex-direction: unset !important;
    flex-wrap: unset !important;
}

/* Bricks: Query Loop oft in innerem Block – ein Kind auflösen, damit
   Loop-Items direkte Grid-Kinder werden (sonst stapeln sie untereinander). */
.wbg-tenants__grid > .brxe-block:only-child,
.wbg-tenants__grid > .brxe-div:only-child {
    display: contents;
}

/* Loop-Item-Wrapper: volle Zellenbreite, kein Flex-Column-Override */
.wbg-tenants__grid > .brxe-block,
.wbg-tenants__grid > .brxe-div {
    min-width: 0;
    max-width: none;
}

.wbg-tenants__grid .wbg-tenants-card {
    width: 100%;
}

/* ------------------------------------------------------------------------ */
/* Card                                                                     */
/* ------------------------------------------------------------------------ */
.wbg-tenants-card {
    position: relative;
    height: 360px;
    background-color: var(--wbg-neutral-200);  /* #F0EEE9 */
    border-radius: var(--wbg-radius);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    color: var(--wbg-gruen-dunkel);
}

/* Body sitzt als position:relative-Layer über dem absolut positionierten
   Media. Dadurch kann der Text-Bereich BREITER sein als die nicht-Bild-
   Zone, weil er in den Bild-Bereich hineinragen darf - die diagonale
   Maske auf dem Image überdeckt den Text dort sowieso. Genau wie im
   Figma-Aufbau. */
.wbg-tenants-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 55%;                          /* ragt 20 % in die Bild-Spalte */
    padding: 56px 0 48px 32px;
}

/* Header-Zeile: Titel + Icon nebeneinander.
   Eigener Block-Wrapper, damit das Icon im Bricks-Builder als
   separates Element (Image / SVG / Icon) angelegt werden kann -
   später ideal für CPT-Bindung (z. B. JetEngine Media-Feld). */
.wbg-tenants-card__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px;
    flex-wrap: wrap;                 /* Icon rutscht bei sehr engem Layout in nächste Zeile */
}

.wbg-tenants-card__title {
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-size: var(--wbg-fs-card-title); /* fluid 28-34 px */
    font-weight: 700;
    line-height: 1.1;
    color: var(--wbg-gruen-dunkel);
    /* Titel darf in den Bild-Bereich reichen - die Diagonale schneidet
       das Bild oben so weg, dass dort Platz fürs Heading bleibt. */
    max-width: 340px;
}

/* Icon-Element neben dem Titel.
   Funktioniert sowohl mit Bricks "Image" (SVG aus Mediathek) als auch
   mit Bricks "Icon" / "SVG" Element. Größe und Ausrichtung sind hier
   zentral gesetzt; die Farbe kommt aus dem SVG selbst (Default-Fill
   #009450) oder per Bricks-Color-Picker, je nach Element-Typ. */
.wbg-tenants-card__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Bilder/SVGs – Klasse am Wrapper ODER direkt am img (Bricks-Bildelement) */
img.wbg-tenants-card__icon,
.wbg-tenants-card__icon img,
.wbg-tenants-card__icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

img.wbg-tenants-card__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    max-width: 36px;
    max-height: 36px;
}

/* Leere Icon-Wrapper ausblenden – img-Element selbst nie verstecken */
.brxe-tenant-card-icon:not(:has(img)),
.wbg-tenants-card__icon:not(:has(img)):not(img) {
    display: none !important;
}

.wbg-tenants-card__desc {
    margin: 0 0 24px;
    font-family: 'Lato', sans-serif;
    font-size: var(--wbg-fs-card-body);  /* fluid 20-24 px */
    font-weight: 400;
    line-height: 27px;
    letter-spacing: 0.01em;
    color: var(--wbg-gruen-dunkel);
    flex: 1 1 auto;
    /* Begrenzt auf Figma-Breite (255-305 px), damit die Description
       die Diagonale nicht "berührt". */
    max-width: 290px;
}

/* Telefonnummer im Schaden-Card kann via <strong> / <b> in Bricks fett
   gesetzt werden. Falls Redaktion sie unterstreichen möchte, hier ein
   Helper-Klasse: .wbg-tenants-card__phone */
.wbg-tenants-card__phone {
    font-weight: 900;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    color: inherit;
}

.wbg-tenants-card__link {
    margin-top: auto;
    font-family: 'Lato', sans-serif;
    font-size: var(--wbg-fs-body);  /* fluid 20-24 px (bewusst größer als Figma 18 px)
                                       wegen Lesbarkeit auf dem hellen BG */
    font-weight: 400;
    line-height: 1.2;
    color: var(--wbg-gruen-dunkel);
    text-decoration: underline !important;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: opacity 0.2s ease;
}

.wbg-tenants-card__link:hover,
.wbg-tenants-card__link:focus-visible {
    opacity: 0.85;
}

/* Media: absolut rechts in der Card, schmaler als der Body breit ist.
   Dadurch entsteht ein "Überlapp"-Bereich, in dem der Text-Block über
   dem Bild steht - aber die diagonale Maske auf dem Bild deckt diesen
   Bereich ab, sodass es visuell sauber wirkt. */
.wbg-tenants-card__media {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 54%;                          /* deutlich schmaler */
    overflow: hidden;
    z-index: 0;
}

.wbg-tenants-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Diagonale Marken-Schräge: oben ~34 % von links eingezogen, unten
       an der Kante - dadurch ist der sichtbare Bild-Bereich oben deutlich
       schmaler. */
    clip-path: polygon(34% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* ------------------------------------------------------------------------ */
/* Card-Varianten - aktuell nur semantische Marker.                         */
/* Das Icon wird ab jetzt als separates Bricks-Element in der Card          */
/* eingefügt (Image / SVG / Icon) und über die Klasse                       */
/* .wbg-tenants-card__icon gestylt - damit lässt es sich später             */
/* problemlos an ein CPT-Feld (JetEngine / ACF) binden.                     */
/* ------------------------------------------------------------------------ */
.wbg-tenants-card--app,
.wbg-tenants-card--schaden,
.wbg-tenants-card--rechner,
.wbg-tenants-card--faq {
    /* Aktuell keine variant-spezifischen Overrides nötig.
       Slot reserviert für spätere Tweaks (z. B. Accent-Color pro Service). */
    --wbg-tenants-card-accent: var(--wbg-gruen);
}

/* ------------------------------------------------------------------------ */
/* Responsive                                                                */
/* ------------------------------------------------------------------------ */

/* Tablet – kein 2×2-Grid; Slider via .wbg-tenants--compact-slider (JS) */
@media (max-width: 1024px) {
    .wbg-tenants {
        padding: 64px 32px;
    }

    .wbg-tenants__header {
        margin-bottom: 40px;
    }

    .wbg-tenants-card {
        min-height: 320px;
        height: auto;
    }

    .wbg-tenants-card__body {
        padding: 40px 0 32px 24px;
        width: 60%;
    }

    .wbg-tenants-card__media {
        width: 52%;
    }
}

/* Slider-Wrapper - vom JS angelegt (.wbg-tenants__slider). Trägt die
   Pfeile relativ zum Grid. Standard: Arrows & Pagination ausgeblendet.   */
.wbg-tenants__slider {
    position: relative;
    width: 100%;
    min-width: 0;
}

.wbg-tenants__arrow,
.wbg-tenants__pagination {
    display: none;
}

.wbg-tenants__arrow {
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    color: var(--wbg-gruen-dunkel);
    cursor: pointer;
    z-index: 5;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.08);
    transition: color 0.2s ease, transform 0.15s ease,
        box-shadow 0.2s ease, background-color 0.2s ease;
}

.wbg-tenants__arrow:hover,
.wbg-tenants__arrow:focus-visible {
    color: var(--wbg-gruen);
    background: #ffffff;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.16),
        0 2px 4px rgba(0, 0, 0, 0.1);
    outline: none;
}

.wbg-tenants__arrow:active {
    transform: translateY(-50%) scale(0.92);
}

.wbg-tenants__arrow:disabled,
.wbg-tenants__arrow.is-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.wbg-tenants__arrow svg {
    width: 22px;
    height: 22px;
    display: block;
}

.wbg-tenants__arrow--prev {
    left: 6px;
}

.wbg-tenants__arrow--next {
    right: 6px;
}

.wbg-tenants__pagination {
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 24px 0 0;
    margin: 0;
    list-style: none;
}

.wbg-tenants__pagination-item {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 0;
}

.wbg-tenants__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(25, 80, 47, 0.35);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.wbg-tenants__dot.is-active {
    background: var(--wbg-gruen-dunkel);
    width: 10px;
    height: 10px;
}

/* Tablet (641–1024 px): 1 Karte pro Slide, Desktop-Card-Layout beibehalten */
@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-tenants--compact-slider {
        overflow-x: clip;
    }

    .wbg-tenants--compact-slider .wbg-tenants__grid.wbg-tenants__grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 32px;
        scroll-padding-right: 32px;
        padding: 0 32px 12px;
        gap: 16px;
        max-width: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wbg-tenants--compact-slider .wbg-tenants__grid::-webkit-scrollbar {
        display: none;
    }

    .wbg-tenants--compact-slider .wbg-tenants-card.wbg-tenants-card {
        flex: 0 0 calc(100% - 64px) !important;
        width: calc(100% - 64px) !important;
        max-width: calc(100% - 64px) !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }

    .wbg-tenants--compact-slider .wbg-tenants__arrow,
    .wbg-tenants--compact-slider .wbg-tenants__pagination {
        display: flex;
    }
}

/* ------------------------------------------------------------------------ */
/* Mobile - 1 Card pro Slide mit Peek der nächsten,                          */
/* schwebendes Bild oberhalb der Card, Icon rechts neben Titel.              */
/* 1:1 entspricht "HOME - Mobile" Service_Slider (Node 829:1678).            */
/* ------------------------------------------------------------------------ */
@media (max-width: 640px) {
    .wbg-tenants {
        padding: 56px 0;
        /* Verhindert, dass Peek-Cards oder das überhängende Bild
           horizontalen Page-Overflow auslösen. */
        overflow-x: hidden;
    }

    /* Header linksbündig auf Mobile */
    .wbg-tenants__header {
        max-width: none;
        padding: 0 24px;
        margin: 0 0 24px !important;
        text-align: left !important;
        align-items: flex-start !important;
    }

    .wbg-tenants__header > * {
        text-align: left !important;
    }

    .wbg-tenants__title,
    .brxe-heading.wbg-tenants__title,
    .wbg-tenants__header .brxe-heading,
    .wbg-tenants__header :is(h1, h2, h3, h4) {
        max-width: none;
        margin: 0 0 16px !important;
        text-align: left !important;
    }

    .wbg-tenants__intro,
    .wbg-tenants__intro.wbg-tenants__intro,
    .brxe-text-basic.wbg-tenants__intro,
    .wbg-tenants__intro .brxe-text-basic,
    .wbg-tenants__intro .brxe-text,
    .wbg-tenants__intro p {
        max-width: none;
        margin: 0 !important;
        text-align: left !important;
    }

    /* Grid → horizontaler Flex-Slider (siehe Käufer:innen-Section).
       Bricks setzt auf .brxe-block ein flex-direction: column - deshalb
       muss alles mit !important + doppelter Klasse durchgesetzt werden.
       align-items: stretch -> alle Cards übernehmen die Höhe der höchsten. */
    .wbg-tenants__grid.wbg-tenants__grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 24px;
        /* Top-Padding gibt Platz für das schwebende Card-Bild. */
        padding: 56px 24px 16px;
        gap: 16px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .wbg-tenants__grid::-webkit-scrollbar {
        display: none;
    }

    /* Card-Container: 78 % Breite, kein min-height (sonst entsteht der
       leere Platz unten). Höhe folgt aus stretch -> alle Cards übernehmen
       die Höhe der höchsten - aber die höchste ist jetzt schlank, weil
       die Fonts auch schlanker sind. overflow: visible weil das Bild oben
       hinausragt. */
    .wbg-tenants-card.wbg-tenants-card {
        flex: 0 0 78% !important;
        width: 78% !important;
        max-width: 78% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;             /* vorher 426 px - zu hoch */
        position: relative;
        overflow: visible !important;
        scroll-snap-align: start;
        background-color: var(--wbg-neutral-200);
        border-radius: 10px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    }

    /* Schwebendes Card-Bild: Parallelogramm per skew, Foto füllt via scale. */
    .wbg-tenants-card__media {
        position: absolute !important;
        top: -28px;
        right: 2px;
        left: auto;
        bottom: auto;
        width: 64%;
        height: 130px;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
        z-index: 2;
        transform: skewX(-17.5deg);
        transform-origin: center center;
        background-color: var(--wbg-neutral-200);
    }

    .wbg-tenants-card__media > img,
    .wbg-tenants-card__media img.brxe-image,
    .wbg-tenants-card__media picture img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
        transform: skewX(17.5deg) scale(1.45) !important;
        transform-origin: center center !important;
        clip-path: none !important;
    }

    /* Wrapper um das Bild – nicht img.brxe-image (sonst 100%-Clamp statt Fill). */
    .wbg-tenants-card__media a,
    .wbg-tenants-card__media figure,
    .wbg-tenants-card__media picture,
    .wbg-tenants-card__media .brxe-image:not(img) {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .wbg-tenants-card__media .brxe-image:not(img) img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: skewX(17.5deg) scale(1.45) !important;
        transform-origin: center center !important;
        clip-path: none !important;
    }

    /* Body füllt die ganze Card. Top-Padding leicht reduziert (vorher
       144 px - das Bild ist jetzt nur 130 px hoch und hängt -28 px hoch,
       also reicht ~120 px Klar-Raum). */
    .wbg-tenants-card__body {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        padding: 122px 22px 22px !important;
        z-index: 1;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;            /* Body dehnt sich auf gleiche Card-Höhe */
    }

    /* Title-Reihe: Titel links, Icon rechts. Auf Mobile darf der Icon
       NICHT in die nächste Zeile rutschen (flex-wrap aus). */
    .wbg-tenants-card__head {
        margin: 0 0 14px;
        gap: 10px;
        flex-wrap: nowrap;
        align-items: center;
    }
    /* Schriftgrößen über globale Token-Skala (identisch Desktop/Mobile). */
    .wbg-tenants-card__title {
        margin: 0;
        max-width: none;
        line-height: 1.1;
        flex: 1 1 auto;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    .wbg-tenants-card__icon {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
    }

    img.wbg-tenants-card__icon {
        width: 32px;
        height: 32px;
        max-width: 32px;
        max-height: 32px;
    }

    .wbg-tenants-card__desc {
        margin: 0 0 18px;
        max-width: none;
        line-height: 1.25;
        flex: 1 1 auto;
        overflow-wrap: break-word;
    }

    .wbg-tenants-card__desc p {
        line-height: 1.25 !important;
        margin: 0 0 12px;
    }

    .wbg-tenants-card__desc p:last-child {
        margin-bottom: 0;
    }

    .wbg-tenants-card__link {
        line-height: 1.1;
        margin-top: auto;
    }

    .wbg-tenants__arrow,
    .wbg-tenants__pagination {
        display: flex;
    }
}

/* ==========================================================================
   SECTION: Services für Eigentümer:innen  (Figma "HOME - Desktop - 21.04.2026"
   Node 1008:419).

   - Solider Hintergrund #009450 (wbg-gruen) wie die Käufer-Sektion
   - Zentrierter Header (Title 48 px, Intro 21 px, beide weiß)
   - 3 Cards in einer Reihe (Desktop), je 400 × 407 px, Background Dunkelgrün
   - Card-Layout: Title oben links, Icon oben rechts, Beschreibung darunter,
     Link am Boden ("Zur WEG-Verwaltung →", unterstrichen)
   - Footer: Pitch-Text + dunkelgrüner Parallelogramm-CTA "Kontakt aufnehmen"
   - Slider-Steuerung (Pfeile + Dots) wird später durch Bricks-Carousel
     ersetzt; CSS hier liefert nur das Card-Markup und Scroll-Snap-Fallback

   Bricks-Struktur:
   Section (.wbg-owners)
     Block "Header"                          -> wbg-owners__header
       Heading h2                            -> wbg-owners__title
       Basic Text                            -> wbg-owners__intro
     Block "Cards" (oder Bricks-Carousel)    -> wbg-owners__grid
       Block "Card WEG-Verwaltung"           -> wbg-owners-card wbg-owners-card--weg
         Block "Head" (Flex-Row)             -> wbg-owners-card__head
           Heading h3                        -> wbg-owners-card__title
           Image / Icon                      -> wbg-owners-card__icon
         Basic Text                          -> wbg-owners-card__desc
         Text Link                           -> wbg-owners-card__link
       Block "Card Portal"                   -> ... --portal
       Block "Card Fremdverwaltung"          -> ... --fremd
     Block "Footer"                          -> wbg-owners__footer
       Basic Text                            -> wbg-owners__footer-text
       Text Link                             -> wbg-owners__cta

   JetEngine CPT wbg_owner_card + Kategorie/Taxonomie:
   1. Beiträge anlegen (Titel, Headline, Text, URL, Link-Text, Icon optional)
   2. Bricks Nested Slider in .wbg-owners__grid (perPage 3 / 2 / 1)
   3. Query Loop auf .wbg-owners-card (wie Käufer/Mieter – Loop auf der Karte!):
        .wbg-owners-card__head
          .wbg-owners-card__title     -> {wbg_owner_card_headline}
          Eigentümer-Karte Icon       -> „Daten aus Eigentümer-Karte Beitrag“
        .wbg-owners-card__desc         -> {wbg_owner_card_desc}
        .wbg-owners-card__link        -> {wbg_owner_card_url} / {wbg_owner_card_link_text}
   Varianten-Klassen (--weg, --portal, --fremd) sind optional – nur noch nötig,
   wenn ihr pro Karte unterschiedliche CSS-Akzente wollt (aktuell alle gleich).
   ========================================================================== */
.wbg-owners {
    padding: 80px 24px;
    background-color: var(--wbg-gruen);        /* solid #009450 */
    color: var(--wbg-text-light);
}

.wbg-owners__header {
    max-width: 880px;
    margin: 0 auto 56px;
    text-align: center;
}

.wbg-owners__title {
    max-width: 880px;
    margin: 0 auto 16px;
    font-family: 'Lato', sans-serif;
    font-size: var(--wbg-fs-section-title);    /* fluid 36-56 px */
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    text-align: center;
}

.wbg-owners__intro {
    max-width: 854px;
    margin: 0 auto;
    font-family: 'Lato', sans-serif;
    font-size: var(--wbg-fs-body);  /* fluid 20-24 px */
    font-weight: 400;
    line-height: 1.5;
    color: var(--wbg-neutral-50);
    text-align: center;
}

/* Card-Container: reiner max-width-Wrapper, KEIN eigenes CSS-Grid -
   das Layout (3 Spalten, Gaps, Slide-Bewegung) macht der Bricks-Slider
   intern. Wäre hier "display: grid" aktiv, würde der Slider als
   einziges Grid-Item nur 1/3 der Breite bekommen und die Cards würden
   massiv schrumpfen. */
.wbg-owners__grid {
    max-width: 1240px;              /* 3 × 400 + 2 × 20 */
    margin: 0 auto;
    position: relative;             /* Anker für die absolut positionierten Splide-Arrows */
}

/* ------------------------------------------------------------------------ */
/* Card                                                                     */
/* ------------------------------------------------------------------------ */
.wbg-owners-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 407px;              /* Figma-Höhe; Karten wachsen bei längerem Text */
    padding: 32px 36px 36px;
    background-color: var(--wbg-gruen-dunkel);  /* #19502F */
    border-radius: var(--wbg-radius);
    color: var(--wbg-neutral-50);
}

/* Header-Zeile: Titel links, Icon rechts oben.
   Eigene Block-Wrapper-Klasse, damit Title + Icon im Bricks als
   separate Elemente angelegt werden können (CPT-ready). */
.wbg-owners-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 40px;
}

.wbg-owners-card__title {
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-size: var(--wbg-fs-card-title); /* fluid 28-34 px */
    font-weight: 700;
    line-height: 1.15;
    color: var(--wbg-neutral-50);
    /* Erzwingt 2-zeiligen Titel bei langen Strings wie
       "Fremdverwaltung für Alleineigentümer". Bricks Heading-Defaults
       greifen mit width 100% rein, daher !important. */
    max-width: 240px !important;
    width: 100%;
    box-sizing: border-box;
}

.wbg-owners-card__icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wbg-owners-card__icon img,
.wbg-owners-card__icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.wbg-owners-card__desc {
    margin: 0 0 32px;
    font-family: 'Lato', sans-serif;
    font-size: var(--wbg-fs-card-body);  /* fluid 20-24 px */
    font-weight: 400;
    line-height: 27px;
    letter-spacing: 0.01em;         /* 0.21 / 21 */
    color: var(--wbg-neutral-50);
    flex: 1 1 auto;
}

.wbg-owners-card__link {
    margin-top: auto;
    font-family: 'Lato', sans-serif;
    font-size: var(--wbg-fs-body);  /* fluid 20-24 px */
    font-weight: 400;
    line-height: 1.2;
    color: var(--wbg-neutral-50);
    text-decoration: underline !important;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: opacity 0.2s ease;
}

.wbg-owners-card__link:hover,
.wbg-owners-card__link:focus-visible {
    opacity: 0.85;
}

/* Card-Varianten - aktuell semantische Marker, später z. B. für
   variant-spezifische Tweaks (eigene Accent-Color je Service). */
.wbg-owners-card--weg,
.wbg-owners-card--portal,
.wbg-owners-card--fremd {
    --wbg-owners-card-accent: var(--wbg-gruen-akzent);
}

/* ------------------------------------------------------------------------ */
/* Footer: Pitch + Sekundär-CTA                                             */
/* ------------------------------------------------------------------------ */
.wbg-owners__footer {
    max-width: 880px;
    margin: 88px auto 0;            /* Figma: ~80 px Abstand zur Slider-Pagination */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wbg-owners__footer-text {
    margin: 0 0 48px;               /* Figma: ~80 px - 32 px Button-Y-Padding ≈ 48 */
    font-family: 'Lato', sans-serif;
    font-size: var(--wbg-fs-body);  /* identisch zu .wbg-owners__intro */
    font-weight: 400;
    line-height: 1.5;
    color: #ffffff;
}

/* Sekundär-CTA "Kontakt aufnehmen" - identische Optik wie der
   buyers__cta-Button (dunkelgrünes, geskewedes Parallelogramm). */
.wbg-owners__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-family: 'Lato', sans-serif;
    font-size: var(--wbg-fs-cta); /* fluid 20-26 px */
    font-weight: 700;
    line-height: 1.05;
    color: var(--wbg-neutral-50);
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.25s ease, filter 0.25s ease;
    isolation: isolate;
}

.wbg-owners__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--wbg-gruen-dunkel);
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
}

.wbg-owners__cta:hover,
.wbg-owners__cta:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* ------------------------------------------------------------------------ */
/* Slider-Steuerung: Pfeile + Custom Pagination                             */
/* ------------------------------------------------------------------------ */
/* Splide's eingebaute Pagination zählt pro Seite (perPage = 3, totalSlides
   = 3 ⇒ nur 1 Dot). Damit wir wie im Figma 3 Dots bekommen, blenden wir
   die Default-Pagination aus und rendern stattdessen eine eigene Liste
   (.wbg-owners__pagination) per JS - 1 Dot pro Slide. */

/* ----- Default-Pagination komplett ausblenden --------------------------- */
.wbg-owners .splide__pagination {
    display: none !important;
}

/* ----- Pfeile: weißer Kreis, dunkelgrüner Chevron (wie Käufer/Mieter/News) */
.wbg-owners .splide__arrow {
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    opacity: 1 !important;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.08) !important;
    color: var(--wbg-gruen-dunkel);
    transition: color 0.2s ease, transform 0.15s ease,
        box-shadow 0.2s ease, opacity 0.2s ease;
    z-index: 5;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wbg-owners .splide__arrow:hover {
    opacity: 1 !important;
    color: var(--wbg-gruen);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.16),
        0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.wbg-owners .splide__arrow:disabled {
    opacity: 0.35 !important;
    cursor: default;
}

.wbg-owners .splide__arrow--prev { left: -48px; }
.wbg-owners .splide__arrow--next { right: -48px; }

.wbg-owners .splide__arrow svg {
    width: 22px !important;
    height: 22px !important;
    fill: var(--wbg-gruen-dunkel) !important;
    stroke: var(--wbg-gruen-dunkel) !important;
}

.wbg-owners .splide__arrow path,
.wbg-owners .splide__arrow polyline,
.wbg-owners .splide__arrow polygon {
    fill: var(--wbg-gruen-dunkel) !important;
    stroke: var(--wbg-gruen-dunkel) !important;
}

.wbg-owners .splide__arrow:hover svg,
.wbg-owners .splide__arrow:hover path,
.wbg-owners .splide__arrow:hover polyline,
.wbg-owners .splide__arrow:hover polygon {
    fill: var(--wbg-gruen) !important;
    stroke: var(--wbg-gruen) !important;
}

/* ----- Custom Pagination (rendered per JS) ------------------------------ */
/* Gleiche Dot-Optik wie .wbg-buyers__dot (Käufer:innen-Slider).            */
.wbg-owners__pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px;
    padding: 24px 0 0 !important;
    margin: 0 !important;
    list-style: none;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

.wbg-owners__pagination-item {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 0;
}

.wbg-owners__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.wbg-owners__dot.is-active {
    background: var(--wbg-neutral-50);
    width: 10px;
    height: 10px;
}

/* ------------------------------------------------------------------------ */
/* Responsive                                                               */
/* ------------------------------------------------------------------------ */
/* Die Slide-Anzahl pro Viewport wird im Bricks-Slider-Element selbst
   über die Breakpoint-Optionen gesetzt (Desktop = 3, Tablet = 2,
   Mobile = 1). CSS hier nur für Section-Padding + Type-Skalierung. */

/* Tablet – Splide: 2 Karten sichtbar (Bricks-Breakpoint ggf. noch auf 3) */
@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-owners .splide__slide {
        width: calc((100% - 20px) / 2) !important;
        max-width: calc((100% - 20px) / 2) !important;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .wbg-owners {
        padding: 64px 32px;
    }

    .wbg-owners__header {
        margin-bottom: 40px;
    }

    .wbg-owners__grid {
        max-width: none;
        padding: 0 8px;
    }

    .wbg-owners-card {
        min-height: 380px;
        padding: 28px 28px 32px;
    }

    .wbg-owners .splide__arrow--prev {
        left: -20px !important;
    }

    .wbg-owners .splide__arrow--next {
        right: -20px !important;
    }

    .wbg-owners__footer {
        margin-top: 40px;
    }

    .wbg-owners-card__head {
        gap: 12px;
        margin-bottom: 32px;
    }

    .wbg-owners-card__icon {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
    }
}

/* Mobile – Icon kompakter, Titel + Icon in einer Zeile */
@media (max-width: 768px) {
    .wbg-owners-card__head {
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
        margin-bottom: 24px;
    }

    .wbg-owners-card__title {
        max-width: none !important;
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;
    }

    .wbg-owners-card__icon {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .wbg-owners {
        padding: 56px 16px;
        /* Verhindert, dass Peek-Cards oder Splide-Pfeile das
           Seiten-Layout horizontal aufblähen. */
        overflow-x: hidden;
    }
    .wbg-owners__header {
        margin-bottom: 32px;
    }
    /* font-size: --wbg-fs-h2 (clamp 36-56 px) regelt das responsive smooth */
    .wbg-owners-card {
        min-height: 360px;
    }

    /* ---- Splide-Arrows: weiße Kreise, halb über den Kartenrand hinaus --- */
    .wbg-owners .splide,
    .wbg-owners .splide__track {
        overflow: visible !important;
    }
    .wbg-owners .splide__arrow {
        width: 40px !important;
        height: 40px !important;
        z-index: 10;
    }
    .wbg-owners .splide__arrow--prev {
        left: -14px !important;
    }
    .wbg-owners .splide__arrow--next {
        right: -14px !important;
    }
    .wbg-owners .splide__arrow svg {
        width: 22px !important;
        height: 22px !important;
    }
    /* Pfeile sollen NICHT verschwinden, wenn am Slide-Anfang/Ende.
       Splide setzt disabled normalerweise auf opacity 0.3 - das ist
       hier ok, wir wollen sie nur niemals display:none. */
    .wbg-owners .splide__arrow[disabled] {
        opacity: 0.35 !important;
        pointer-events: none;
    }
}


/* ==========================================================================
   SECTION "Aktuelles der wbg" (News / Meldungen) - Figma 1008:676
   --------------------------------------------------------------------------
   Card-Schema für WordPress-Beiträge (post) + Taxonomie wbg_artikel_typ:
     - Featured Image       -> .wbg-news-card__media
     - Taxonomy "Artikel-Typ" -> .wbg-news-card__badge   (Projekt/Presse/Hinweis …)
     - Post Date            -> .wbg-news-card__date         (Format d.m.Y)
     - Post Title           -> .wbg-news-card__title
     - Excerpt              -> .wbg-news-card__excerpt
     - Permalink            -> .wbg-news-card__link

   Bricks Query Loop auf post (neueste 3). Detailseite: .wbg-article
   ========================================================================== */

.wbg-news {
    position: relative;
    padding: 88px 24px 96px;
    background-color: var(--wbg-neutral-50, #fdfcfb);
    color: var(--wbg-gruen-dunkel, #19502f);
}

.wbg-news__inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* Startseite: Inner immer vertikal — Headline → Intro → Slider → Footer */
.wbg-news__inner:has(> .wbg-news__header) {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0;
    overflow-x: visible !important;
}

.wbg-news__inner:has(> .wbg-news__header) > .wbg-news__header,
.wbg-news__inner:has(> .wbg-news__header) > .wbg-news__footer,
.wbg-news__inner:has(> .wbg-news__header) > .wbg-news__pagination {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
}

.wbg-news__inner:has(> .wbg-news__header) > .wbg-news__slider,
.wbg-news__inner:has(> .wbg-news__header) > .wbg-news__track,
.wbg-news__inner:has(> .wbg-news__header) > .wbg-news__grid {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}

/* Vom JS angelegt, wenn Query Loop am Inner hängt: nur Cards scrollen.     */
.wbg-news__track {
    width: 100%;
    min-width: 0;
}

@media (min-width: 1025px) {
    .wbg-news:not(.wbg-news--overflow-slider) .wbg-news__inner > .wbg-news__track,
    .wbg-news:not(.wbg-news--overflow-slider) .wbg-news__inner .wbg-news__track,
    .wbg-news:not(.wbg-news--overflow-slider) .wbg-news__track {
        --wbg-news-card-width: calc((100% - 64px) / 3);
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 32px;
        width: 100% !important;
        max-width: none !important;
    }

    .wbg-news:not(.wbg-news--overflow-slider) .wbg-news__inner > .wbg-news__track > .wbg-news__grid,
    .wbg-news:not(.wbg-news--overflow-slider) .wbg-news__inner .wbg-news__track > .wbg-news__grid,
    .wbg-news:not(.wbg-news--overflow-slider) .wbg-news__track > .wbg-news__grid {
        display: contents !important;
    }

    .wbg-news:not(.wbg-news--overflow-slider) .wbg-news__inner > .wbg-news__track .wbg-news-card.wbg-news-card,
    .wbg-news:not(.wbg-news--overflow-slider) .wbg-news__inner .wbg-news__track .wbg-news-card.wbg-news-card,
    .wbg-news:not(.wbg-news--overflow-slider) .wbg-news__track .wbg-news-card.wbg-news-card {
        flex: 0 0 var(--wbg-news-card-width) !important;
        width: var(--wbg-news-card-width) !important;
        max-width: var(--wbg-news-card-width) !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
}

/* Header zentrieren - mit !important und Flex-Layout, weil das Bricks-
   Block-Element sonst align-items:flex-start an die Kinder vererbt und
   Heading/Text dadurch links am Container kleben.                         */
.wbg-news__header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 854px;
    width: 100%;
    margin: 0 auto 56px !important;
    text-align: center;
}

/* Alle Kinder des Headers (Heading, Text, ggf. weitere) füllen die volle
   Breite und werden über text-align horizontal mittig gesetzt - damit ist
   das Ergebnis unabhängig davon, wie Bricks die einzelnen Elemente layoutet. */
.wbg-news__header > * {
    width: 100%;
    text-align: center !important;
}

.wbg-news__title,
.wbg-news__intro {
    width: 100%;
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}

.wbg-news__title {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: var(--wbg-fs-section-title);   /* fluid 36-56 px */
    line-height: 1.1;
    color: var(--wbg-gruen-dunkel, #19502f);
    margin: 0 0 16px;
}

.wbg-news__intro {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: var(--wbg-fs-body);  /* fluid 20-24 px */
    line-height: 1.5;
    letter-spacing: 0.21px;
    color: var(--wbg-gruen-dunkel, #19502f);
    margin: 0;
}

/* ------------------------------------------------------------------------ */
/* Grid                                                                     */
/* ------------------------------------------------------------------------ */
/* Flex-Row statt CSS-Grid: robuster gegen Bricks-#id-Overrides.
   --wbg-news-card-width steuert 3/2/1 Spalten über Breakpoints.
   Query Loop oft am falschen Block → mehrere .wbg-news__grid untereinander;
   :has()-Flattening weiter unten.                                          */
.wbg-news__grid,
.wbg-news__grid.wbg-news__grid,
.brxe-block.wbg-news__grid,
.brxe-div.wbg-news__grid,
.brxe-container.wbg-news__grid {
    --wbg-news-card-width: calc((100% - 64px) / 3);
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
    gap: 32px;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto;
    grid-template-columns: unset !important;
}

/* Bricks Query Loop: Zwischen-Wrapper aus dem Layout-Tree nehmen.         */
.wbg-news__grid > .brx-query-trail {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.wbg-news__grid > .brxe-block:not(.wbg-news-card):not(.brx-query-trail),
.wbg-news__grid > .brxe-div:not(.wbg-news-card):not(.brx-query-trail),
.wbg-news__grid > .brxe-container:not(.wbg-news-card):not(.brx-query-trail) {
    display: contents !important;
}

.wbg-news__grid > .brxe-block,
.wbg-news__grid > .brxe-div {
    min-width: 0;
    max-width: none;
}

.wbg-news__grid > .wbg-news-card,
.wbg-news__grid > .brxe-block.wbg-news-card,
.wbg-news__grid > .brxe-div.wbg-news-card,
.wbg-news__grid > .brxe-block:not(.wbg-news-card) > .wbg-news-card,
.wbg-news__grid > .brxe-div:not(.wbg-news-card) > .wbg-news-card,
.wbg-news__grid .wbg-news-card.wbg-news-card {
    flex: 0 0 var(--wbg-news-card-width) !important;
    width: var(--wbg-news-card-width) !important;
    max-width: var(--wbg-news-card-width) !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* Query Loop am Parent statt am Grid: pro Post ein .wbg-news__grid → flatten */
.wbg-article__related:has(> .wbg-news__grid ~ .wbg-news__grid),
.wbg-article__inner:has(> .wbg-news__grid ~ .wbg-news__grid) {
    --wbg-news-card-width: calc((100% - 64px) / 3);
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 32px;
    width: 100% !important;
}

.wbg-article__related:has(> .wbg-news__grid ~ .wbg-news__grid) > .wbg-news__grid,
.wbg-article__inner:has(> .wbg-news__grid ~ .wbg-news__grid) > .wbg-news__grid {
    display: contents !important;
}

/* Query Loop direkt auf Cards (ohne Grid-Wrapper) */
.wbg-article__related:has(> .wbg-news-card ~ .wbg-news-card),
.wbg-article__inner:has(> .wbg-news-card ~ .wbg-news-card) {
    --wbg-news-card-width: calc((100% - 64px) / 3);
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 32px;
    width: 100% !important;
}

.wbg-article__related:has(> .wbg-news-card ~ .wbg-news-card) > .wbg-news-card,
.wbg-article__inner:has(> .wbg-news-card ~ .wbg-news-card) > .wbg-news-card {
    flex: 0 0 var(--wbg-news-card-width) !important;
    width: var(--wbg-news-card-width) !important;
    max-width: var(--wbg-news-card-width) !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* Startseite: Query Loop am Inner → mehrere .wbg-news__grid unter Header/Footer.
   Inner kurzzeitig row+wrap; Header/Footer volle Breite; Grids display:contents. */
@media (min-width: 1025px) {
    .wbg-news:not(.wbg-news--overflow-slider)
        .wbg-news__inner:has(> .wbg-news__header):has(.wbg-news__grid ~ .wbg-news__grid),
    .wbg-news:not(.wbg-news--overflow-slider)
        .wbg-news__inner:has(> .wbg-news__header):has(> .wbg-news-card ~ .wbg-news-card) {
        --wbg-news-card-width: calc((100% - 64px) / 3);
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 32px;
    }

    .wbg-news:not(.wbg-news--overflow-slider)
        .wbg-news__inner:has(> .wbg-news__header):has(.wbg-news__grid ~ .wbg-news__grid)
        > .wbg-news__header,
    .wbg-news:not(.wbg-news--overflow-slider)
        .wbg-news__inner:has(> .wbg-news__header):has(.wbg-news__grid ~ .wbg-news__grid)
        > .wbg-news__footer,
    .wbg-news:not(.wbg-news--overflow-slider)
        .wbg-news__inner:has(> .wbg-news__header):has(.wbg-news-card ~ .wbg-news-card)
        > .wbg-news__header,
    .wbg-news:not(.wbg-news--overflow-slider)
        .wbg-news__inner:has(> .wbg-news__header):has(.wbg-news-card ~ .wbg-news-card)
        > .wbg-news__footer {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: none !important;
    }

    .wbg-news:not(.wbg-news--overflow-slider)
        .wbg-news__inner:has(> .wbg-news__header)
        > .wbg-news__slider {
        display: contents !important;
    }

    .wbg-news:not(.wbg-news--overflow-slider)
        .wbg-news__inner:has(> .wbg-news__header)
        > .wbg-news__pagination,
    .wbg-news:not(.wbg-news--overflow-slider)
        .wbg-news__inner:has(> .wbg-news__header)
        .wbg-news__arrow {
        display: none !important;
    }

    .wbg-news:not(.wbg-news--overflow-slider)
        .wbg-news__inner:has(> .wbg-news__header):has(.wbg-news__grid ~ .wbg-news__grid)
        .wbg-news__grid {
        display: contents !important;
    }

    .wbg-news:not(.wbg-news--overflow-slider)
        .wbg-news__inner:has(> .wbg-news__header):has(.wbg-news__grid ~ .wbg-news__grid)
        .wbg-news-card.wbg-news-card,
    .wbg-news:not(.wbg-news--overflow-slider)
        .wbg-news__inner:has(> .wbg-news__header):has(> .wbg-news-card ~ .wbg-news-card)
        > .wbg-news-card {
        flex: 0 0 var(--wbg-news-card-width) !important;
        width: var(--wbg-news-card-width) !important;
        max-width: var(--wbg-news-card-width) !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
}

/* ------------------------------------------------------------------------ */
/* Card                                                                     */
/* ------------------------------------------------------------------------ */
.wbg-news-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 562px;
    background-color: var(--wbg-gruen-dunkel, #19502f);
    border-radius: 10px;
    overflow: visible !important;
    color: var(--wbg-neutral-50, #fdfcfb);
    isolation: isolate;
    /* overflow:visible mit !important - Bricks setzt am Block-Element
       gelegentlich overflow:hidden, das würde den Badge-Überhang abschneiden.
       Image-Clipping läuft stattdessen über .wbg-news-card__media (eigenes
       overflow:hidden + border-radius). Gleiches Muster wie bei
       .wbg-buyers-card. */
}

/* Media - 16:9 Bildfläche oben mit eigenem overflow:hidden + Radius,
   damit das Bild trotz fehlendem Card-overflow:hidden sauber an die
   gerundete Card-Top-Kante geclippt wird. */
.wbg-news-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 348 / 192;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: rgba(0, 0, 0, 0.15);
}

.wbg-news-card__media img,
.wbg-news-card__media picture,
.wbg-news-card__media > a {
    display: block;
    width: 100%;
    height: 100%;
}

.wbg-news-card__media img {
    object-fit: cover;
    object-position: center;
}

/* ------------------------------------------------------------------------ */
/* Badge (Kategorie / Taxonomy-Term)                                        */
/* ------------------------------------------------------------------------ */
/* Schlichtes skewtes Rechteck:
   - linke + rechte Kante um -17.5deg gekippt (Vollparallelogramm)
   - border-radius: 5px auf alle Ecken
   - 4 px Überhang über die linke Card-Kante
   Die Card hat overflow:visible !important, damit der nach links unten
   kippende Punkt nicht abgeschnitten wird.                                */
.wbg-news-card__badge {
    position: absolute;
    top: 22px;
    left: -4px;
    z-index: 3;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 102px;
    height: 37px;
    padding: 0 22px !important;
    font-family: "Lato", sans-serif !important;
    font-weight: 400 !important;
    font-size: var(--wbg-fs-body) !important; /* fluid 20-24 px */
    line-height: 1 !important;
    letter-spacing: 0.21px;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.wbg-news-card__badge::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--wbg-gruen, #009450);
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
    pointer-events: none;
}

/* ------------------------------------------------------------------------ */
/* Body                                                                     */
/* ------------------------------------------------------------------------ */
.wbg-news-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 16px 32px 40px;
    gap: 16px;
}

.wbg-news-card__date {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: var(--wbg-fs-xs);    /* fluid 14-15 px */
    line-height: 1.6;
    letter-spacing: 0.15px;
    color: var(--wbg-neutral-50, #fdfcfb);
    margin: 0;
}

.wbg-news-card__title {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: var(--wbg-fs-card-title); /* fluid 28-34 px */
    line-height: 1.15;
    color: var(--wbg-neutral-50, #fdfcfb);
    margin: 0;
}

/* Falls Titel als Link ausgegeben wird (CPT-Loop): Farbe + Underline-off. */
.wbg-news-card__title a {
    color: inherit;
    text-decoration: none;
}

.wbg-news-card__excerpt {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: var(--wbg-fs-card-body);  /* fluid 20-24 px */
    line-height: 1.3;
    letter-spacing: 0.21px;
    color: var(--wbg-neutral-50, #fdfcfb);
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

/* "Weiterlesen ->"-Link - immer am unteren Ende der Card (via margin-top:auto),
   damit alle Cards eine identische Optik haben, egal wie lang der Text ist. */
.wbg-news-card__link {
    margin-top: auto;
    padding-top: 16px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: var(--wbg-fs-link);  /* fluid 20-26 px */
    line-height: 1.2;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    align-self: flex-start;
    transition: opacity 0.2s ease;
}

.wbg-news-card__link:hover,
.wbg-news-card__link:focus-visible {
    opacity: 0.8;
}

/* ------------------------------------------------------------------------ */
/* Footer / CTA                                                             */
/* ------------------------------------------------------------------------ */
/* !important nötig, weil Bricks dem Block-Element ein default-flex-column
   mit align-items:flex-start verpasst - das würde den Button links bündig
   setzen. Hier zentrieren wir hart über alle Bricks-Inline-Styles hinweg. */
.wbg-news__footer {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    margin-top: 56px;
    text-align: center;
}

/* Falls der CTA als alleiniges Kind im Bricks-Block-Element steckt: alle
   Kinder eines Footer-Blocks behalten ihre eigene Breite, sind aber nicht
   gestretched. */
.wbg-news__footer > * {
    width: auto;
    align-self: center;
}

/* Sekundär-CTA mit Farbverlauf grün -> lime (Figma: from-[#009450] from-[73%] to-[#afcc46]) */
.wbg-news__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 336px;
    padding: 16px 28px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: var(--wbg-fs-cta); /* fluid 20-26 px */
    line-height: 1;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: none !important;
    z-index: 0;
    isolation: isolate;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.wbg-news__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--wbg-gruen, #009450) 73%,
        var(--wbg-gruen-akzent, #afcc46) 100%
    );
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
}

.wbg-news__cta:hover,
.wbg-news__cta:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* ------------------------------------------------------------------------ */
/* Responsive                                                               */
/* ------------------------------------------------------------------------ */
/* Tablet - 2 Spalten (nur Desktop-Grid, kein Slider) */
@media (min-width: 1025px) {
    .wbg-news:not(.wbg-news--overflow-slider) .wbg-news__grid,
    .wbg-news:not(.wbg-news--overflow-slider) .wbg-news__track {
        --wbg-news-card-width: calc((100% - 64px) / 3);
    }
}

/* Tablet: 2 Cards im Slider (Startseite) */
@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-news--compact-slider {
        overflow-x: clip;
    }

    .wbg-news--compact-slider .wbg-news__slider {
        overflow: visible;
        position: relative;
        width: 100%;
        min-width: 0;
    }

    .wbg-news--compact-slider .wbg-news__grid.wbg-news__grid,
    .wbg-news--compact-slider .wbg-news__track,
    .wbg-news--compact-slider .wbg-news__slider > .wbg-news__grid.wbg-news__grid,
    .wbg-news--compact-slider .wbg-news__slider > .wbg-news__track {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 32px;
        padding: 0 32px 12px;
        gap: 16px;
        max-width: none;
        width: 100% !important;
        box-sizing: border-box;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wbg-news--compact-slider .wbg-news__track > .wbg-news__grid {
        display: contents !important;
    }

    .wbg-news--compact-slider .wbg-news__grid::-webkit-scrollbar,
    .wbg-news--compact-slider .wbg-news__track::-webkit-scrollbar {
        display: none;
    }

    .wbg-news--compact-slider .wbg-news__grid > .wbg-news-card,
    .wbg-news--compact-slider .wbg-news__grid > .brxe-block.wbg-news-card,
    .wbg-news--compact-slider .wbg-news__grid > .brxe-div.wbg-news-card,
    .wbg-news--compact-slider .wbg-news__grid .wbg-news-card.wbg-news-card,
    .wbg-news--compact-slider .wbg-news__track .wbg-news-card.wbg-news-card,
    .wbg-news--compact-slider .wbg-news__slider .wbg-news-card.wbg-news-card {
        flex: 0 0 58% !important;
        width: 58% !important;
        max-width: 58% !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }

    .wbg-news--compact-slider .wbg-news__arrow,
    .wbg-news--compact-slider .wbg-news__pagination {
        display: flex;
    }

    .wbg-news--compact-slider .wbg-news__inner > .wbg-news__pagination {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: none !important;
    }

    .wbg-news--compact-slider .wbg-news__pagination {
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 24px 32px 0;
        margin: 0;
        list-style: none;
        box-sizing: border-box;
    }

    .wbg-news--compact-slider .wbg-news__pagination-item {
        margin: 0;
        padding: 0;
        list-style: none;
        line-height: 0;
    }

    .wbg-news--compact-slider .wbg-news__dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(25, 80, 47, 0.35);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: background 0.2s ease, width 0.2s ease, height 0.2s ease;
    }

    .wbg-news--compact-slider .wbg-news__dot.is-active {
        background: var(--wbg-gruen-dunkel);
        width: 10px;
        height: 10px;
    }

    .wbg-news--compact-slider .wbg-news__arrow {
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        padding: 0;
        background: #ffffff;
        border: none;
        border-radius: 50%;
        color: var(--wbg-gruen-dunkel);
        cursor: pointer;
        z-index: 5;
        box-shadow:
            0 6px 16px rgba(0, 0, 0, 0.12),
            0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .wbg-news--compact-slider .wbg-news__arrow--prev {
        left: 6px;
    }

    .wbg-news--compact-slider .wbg-news__arrow--next {
        right: 6px;
    }

    .wbg-news--compact-slider .wbg-news__arrow svg {
        width: 22px;
        height: 22px;
        display: block;
    }
}

@media (max-width: 1024px) {
    .wbg-news {
        padding: 72px 32px 80px;
    }

    .wbg-news__header {
        margin-bottom: 40px !important;
    }

    .wbg-news-card {
        min-height: 520px;
    }

    .wbg-news__footer {
        margin-top: 40px;
    }
}

/* Slider-Wrapper (vom JS angelegt) und Arrows/Pagination außerhalb von
   Mobile unsichtbar.                                                       */
.wbg-news__slider {
    position: relative;
    width: 100%;
    min-width: 0;
}

.wbg-news__arrow,
.wbg-news__pagination {
    display: none;
}

/* Mobile - horizontaler Flex-Slider (1 Card sichtbar, Peek der nächsten
   rechts). Identische Mechanik wie .wbg-buyers__grid / .wbg-tenants__grid -
   JS bekommt einen weiteren Eintrag in TARGET_GRIDS und legt automatisch
   Pfeile + Dots an. Arrows und Dots sind hier dunkelgrün, weil die
   Section auf hellem BG steht.                                            */
@media (max-width: 640px) {
    .wbg-news {
        padding: 56px 0 64px;
        overflow-x: hidden;       /* Peek-Card darf nicht horizontal überlaufen */
    }
    .wbg-news__inner {
        max-width: none;
        padding: 0;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        overflow-x: visible !important;
    }
    .wbg-news__inner > .wbg-news__header,
    .wbg-news__inner > .wbg-news__footer,
    .wbg-news__inner > .wbg-news__pagination {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: none !important;
    }
    .wbg-news__header {
        margin-bottom: 32px;
        padding: 0 24px;
    }

    .wbg-news__grid::-webkit-scrollbar,
    .wbg-news__track::-webkit-scrollbar {
        display: none;
    }

    .wbg-news-card:nth-child(3) {
        grid-column: auto;
        max-width: none;
        margin: 0;
    }

    .wbg-news .wbg-news-card,
    .wbg-news .wbg-news-card.wbg-news-card,
    .wbg-news .wbg-news__grid.wbg-news__grid > .wbg-news-card,
    .wbg-news .wbg-news__grid.wbg-news__grid > .brxe-block.wbg-news-card,
    .wbg-news .wbg-news__grid.wbg-news__grid > .brxe-div.wbg-news-card,
    .wbg-news .wbg-news__grid.wbg-news__grid .wbg-news-card.wbg-news-card,
    .wbg-news .wbg-news__track > .wbg-news-card,
    .wbg-news .wbg-news__track > .brxe-block.wbg-news-card,
    .wbg-news .wbg-news__track > .brxe-div.wbg-news-card,
    .wbg-news .wbg-news__track .wbg-news-card.wbg-news-card {
        /* Gleiche Maße wie Artikel-Template „Mehr lesen“ */
        flex: 0 0 calc(100vw - 94px) !important;
        width: calc(100vw - 94px) !important;
        max-width: calc(100vw - 94px) !important;
        min-width: 0 !important;
        min-height: 0;
        scroll-snap-align: start;
        box-sizing: border-box;
    }

    .wbg-news .wbg-news-card,
    .wbg-news .wbg-news-card.wbg-news-card {
        min-height: 480px;
    }

    .wbg-news-card__body {
        padding: 16px 24px 32px;
    }

    .wbg-news__cta {
        width: auto !important;
        min-width: 0 !important;
        padding: 12px 24px;
        gap: 10px;
    }

    .wbg-news__footer {
        padding: 0 24px;
    }

    .wbg-news .wbg-news__slider {
        overflow: hidden;
        width: 100%;
    }

    .wbg-news .wbg-news__slider > .wbg-news__grid.wbg-news__grid,
    .wbg-news .wbg-news__slider > .wbg-news__track,
    .wbg-news .wbg-news__track,
    .wbg-news .wbg-news__grid.wbg-news__grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 48px;
        padding: 0 48px 12px !important;
        gap: 16px;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wbg-news .wbg-news__track > .wbg-news__grid {
        display: contents !important;
    }

    .wbg-news__arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        padding: 0;
        background: #ffffff;
        border: none;
        border-radius: 50%;
        color: var(--wbg-gruen-dunkel);
        cursor: pointer;
        z-index: 5;
        box-shadow:
            0 6px 16px rgba(0, 0, 0, 0.12),
            0 1px 3px rgba(0, 0, 0, 0.08);
        transition: color 0.2s ease, transform 0.15s ease,
            box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .wbg-news__arrow:hover,
    .wbg-news__arrow:focus-visible {
        color: var(--wbg-gruen);
        background: #ffffff;
        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.16),
            0 2px 4px rgba(0, 0, 0, 0.1);
        outline: none;
    }

    .wbg-news__arrow:active {
        transform: translateY(-50%) scale(0.92);
    }

    .wbg-news__arrow:disabled,
    .wbg-news__arrow.is-disabled {
        opacity: 0.35;
        cursor: default;
        pointer-events: none;
    }

    .wbg-news__arrow svg {
        width: 22px;
        height: 22px;
        display: block;
    }

    .wbg-news__arrow--prev { left: 6px; }
    .wbg-news__arrow--next { right: 6px; }

    .wbg-news__pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 24px 0 0;
        margin: 0;
        list-style: none;
    }

    .wbg-news__pagination-item {
        margin: 0;
        padding: 0;
        list-style: none;
        line-height: 0;
    }

    .wbg-news__dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(25, 80, 47, 0.35);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: background 0.2s ease, width 0.2s ease, height 0.2s ease;
    }

    .wbg-news__dot.is-active {
        background: var(--wbg-gruen-dunkel);
        width: 10px;
        height: 10px;
    }
}


/* ==========================================================================
   SINGLE "Blog-Artikel" (WordPress Beitrag) – Figma 1147:1547
   --------------------------------------------------------------------------
   Bricks Template: Single → Post, Section-Klasse .wbg-article

   Section (.wbg-article)
     Image (Featured)              -> .wbg-article__hero
     Block (.wbg-article__inner)
       Heading (Post Title)        -> .wbg-article__title
       Block (.wbg-article__meta)
         Term / Taxonomy           -> .wbg-article__badge
         Post Date                 -> .wbg-article__date
       Divider / Block             -> .wbg-article__divider
       Post Content                -> .wbg-article__content
       Text Link                   -> .wbg-article__back
       Divider                     -> .wbg-article__divider
       Heading "Mehr lesen"        -> .wbg-article__more-title
       Block (.wbg-article__related)
         Query Loop (.wbg-news__grid) -> .wbg-news-card (wie Startseite)
   ========================================================================== */

.wbg-article,
.wbg-article.wbg-article,
section.wbg-article,
.brxe-section:has(.wbg-article__inner),
.brxe-section:has(.wbg-article__hero) {
    padding: 0 0 clamp(72px, 8vw, 96px) !important;
    background-color: #ffffff !important;
    color: var(--wbg-gruen-dunkel, #19502f);
    overflow-x: clip;
}

.wbg-article__hero,
.wbg-article__hero.wbg-article__hero,
.brxe-section.wbg-article .wbg-article__hero,
.brxe-block.wbg-article__hero,
.brxe-div.wbg-article__hero,
.brxe-image.wbg-article__hero {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: clamp(240px, 28vw, 405px) !important;
    min-height: clamp(240px, 28vw, 405px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

.wbg-article__hero img,
.wbg-article__hero .brxe-image,
.wbg-article__hero .brxe-image img,
.wbg-article__hero picture,
.wbg-article__hero picture img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: clamp(240px, 28vw, 405px) !important;
    min-height: clamp(240px, 28vw, 405px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.wbg-article__inner,
.wbg-article__inner.wbg-article__inner,
.brxe-block.wbg-article__inner,
.brxe-div.wbg-article__inner {
    display: block !important;
    max-width: 1034px;
    width: 100% !important;
    margin: 0 auto !important;
    padding: clamp(40px, 5vw, 56px) clamp(24px, 4vw, 32px) 0 !important;
    background: transparent !important;
}

.wbg-article__title,
.brxe-heading.wbg-article__title,
.wbg-article__inner > .brxe-heading.wbg-article__title,
.brxe-section.wbg-article .wbg-article__title,
.brxe-section.wbg-article .wbg-article__inner :is(h1, h2).wbg-article__title {
    margin: 0 0 clamp(20px, 2.5vw, 28px) !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-section-title) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-align: left !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.wbg-article__meta,
.wbg-article__meta.wbg-article__meta,
.brxe-block.wbg-article__meta,
.brxe-div.wbg-article__meta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px 24px !important;
    width: 100%;
    margin: 0 0 clamp(28px, 3vw, 36px) !important;
}

.wbg-article__badge,
.wbg-article__badge.wbg-article__badge,
.wbg-article__meta .wbg-article__badge,
.wbg-article__meta .brxe-text-basic,
.wbg-article__meta a.wbg-article__badge {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 102px;
    height: 37px;
    padding: 0 22px !important;
    margin: 0 !important;
    font-family: "Lato", sans-serif !important;
    font-weight: 400 !important;
    font-size: var(--wbg-fs-body) !important;
    line-height: 1 !important;
    letter-spacing: 0.21px;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: none !important;
    white-space: nowrap;
    z-index: 0;
    isolation: isolate;
}

.wbg-article__badge::before,
.wbg-article__meta a.wbg-article__badge::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--wbg-gruen, #009450);
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
    pointer-events: none;
}

.wbg-article__date,
.wbg-article__date.wbg-article__date,
.wbg-article__meta .wbg-article__date,
.wbg-article__meta .brxe-text-basic.wbg-article__date {
    margin: 0 !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 0;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

.wbg-article__divider,
.wbg-article__divider.wbg-article__divider,
.brxe-block.wbg-article__divider,
.brxe-div.wbg-article__divider,
hr.wbg-article__divider {
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: clamp(28px, 3vw, 36px) 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid #c3b7ab !important;
    background: transparent !important;
}

.wbg-article__content,
.wbg-article__content.wbg-article__content,
.brxe-post-content.wbg-article__content,
.wbg-article__content .brxe-post-content,
.wbg-article__content .brxe-text,
.wbg-article__content .brxe-text-basic {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

.wbg-article__content p,
.wbg-article__content .brxe-post-content p,
.wbg-article__content li {
    margin: 0 0 1.25em;
    color: inherit !important;
}

.wbg-article__content p:last-child,
.wbg-article__content .brxe-post-content p:last-child {
    margin-bottom: 0;
}

.wbg-article__content img,
.wbg-article__content .brxe-post-content img,
.wbg-article__content figure img,
.wbg-article__content .wp-block-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: clamp(24px, 3vw, 32px) 0;
    border-radius: 5px;
    object-fit: cover;
}

.wbg-article__content figure,
.wbg-article__content .wp-block-image {
    margin: clamp(24px, 3vw, 32px) 0;
}

.wbg-article__content a {
    color: var(--wbg-gruen, #009450);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wbg-article__back,
.wbg-article__back.brxe-text-link,
.wbg-article__back a {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    align-self: flex-start;
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    margin: clamp(32px, 4vw, 40px) 0 0 !important;
    padding: 14px 32px;
    min-height: 0;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-cta) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: none !important;
    white-space: nowrap;
    z-index: 0;
    isolation: isolate;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.wbg-article__back::before,
.wbg-article__back a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--wbg-gruen, #009450) 73%,
        var(--wbg-gruen-akzent, #afcc46) 100%
    );
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
}

.wbg-article__back::after,
.wbg-article__back a::after,
.wbg-article__back svg,
.wbg-article__back a svg {
    display: none !important;
    content: none !important;
}

.wbg-article__back:not(:has(svg))::after,
.wbg-article__back a:not(:has(svg))::after {
    display: inline !important;
    content: "←" !important;
    order: -1;
    font-size: 1.1em;
    line-height: 1;
}

.wbg-article__back:hover,
.wbg-article__back:focus-visible,
.wbg-article__back a:hover,
.wbg-article__back a:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.wbg-article__more-title,
.brxe-heading.wbg-article__more-title,
.wbg-article__inner > .brxe-heading.wbg-article__more-title {
    margin: clamp(40px, 5vw, 56px) 0 clamp(32px, 4vw, 40px) !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-section-title) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-align: left !important;
}

.wbg-article__related,
.wbg-article__related.wbg-article__related,
.brxe-block.wbg-article__related {
    width: 100%;
}

.wbg-article .wbg-news__grid,
.wbg-article__related .wbg-news__grid,
.wbg-article__inner .wbg-news__grid.wbg-news__grid {
    --wbg-news-card-width: calc((100% - 64px) / 3);
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 32px;
    width: 100% !important;
    max-width: none;
    margin: 0;
}

.wbg-article__slider {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.wbg-article__arrow,
.wbg-article__pagination {
    display: none;
}

.wbg-article__arrow {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    color: var(--wbg-gruen-dunkel, #19502f);
    cursor: pointer;
    z-index: 6;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.08);
    transition: color 0.2s ease, transform 0.15s ease,
        box-shadow 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.wbg-article__arrow--prev {
    left: 6px;
}

.wbg-article__arrow--next {
    right: 6px;
}

.wbg-article__arrow:hover,
.wbg-article__arrow:focus-visible {
    color: var(--wbg-gruen, #009450);
    background: #ffffff;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.16),
        0 2px 4px rgba(0, 0, 0, 0.1);
    outline: none;
}

.wbg-article__arrow:active {
    transform: translateY(-50%) scale(0.92);
}

.wbg-article__arrow:disabled,
.wbg-article__arrow.is-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.wbg-article__arrow svg {
    width: 22px;
    height: 22px;
    display: block;
}

.wbg-article__pagination {
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 24px 0 0;
    margin: 0;
    list-style: none;
}

.wbg-article__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(25, 80, 47, 0.25);
    border: none;
    padding: 0;
    cursor: pointer;
}

.wbg-article__dot.is-active {
    background: var(--wbg-gruen-dunkel, #19502f);
    width: 10px;
    height: 10px;
}

/* Single-Artikel „Mehr lesen“: ab 4 Cards horizontaler Slider (Desktop 3 sichtbar) */
@media (min-width: 1025px) {
    .wbg-article--overflow-slider {
        overflow-x: visible;
    }

    .wbg-article--overflow-slider .wbg-article__slider {
        overflow: visible;
    }

    .wbg-article--overflow-slider .wbg-news__grid.wbg-news__grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 8px;
        padding: 0 0 12px 8px;
        gap: 32px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wbg-article--overflow-slider .wbg-news__grid::-webkit-scrollbar {
        display: none;
    }

    .wbg-article--overflow-slider .wbg-news-card.wbg-news-card {
        flex: 0 0 calc((100% - 64px) / 3) !important;
        width: calc((100% - 64px) / 3) !important;
        max-width: calc((100% - 64px) / 3) !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }

    .wbg-article--overflow-slider .wbg-article__arrow,
    .wbg-article--overflow-slider .wbg-article__pagination {
        display: flex;
    }

    .wbg-article--overflow-slider .wbg-article__arrow--prev {
        left: -56px;
        right: auto;
    }

    .wbg-article--overflow-slider .wbg-article__arrow--next {
        right: -56px;
        left: auto;
    }
}

/* Tablet: Artikel „Mehr lesen“ – 2 Cards im Slider (ab 2 Beiträge) */
@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-article--compact-slider {
        overflow-x: clip;
    }

    .wbg-article--compact-slider .wbg-article__slider,
    .wbg-article--compact-slider .wbg-article__related {
        margin-left: -24px;
        margin-right: -24px;
        width: calc(100% + 48px) !important;
        max-width: 100vw;
        overflow: visible;
    }

    .wbg-article--compact-slider .wbg-news__grid.wbg-news__grid,
    .wbg-article--compact-slider .wbg-article__related:has(> .wbg-news__grid ~ .wbg-news__grid),
    .wbg-article--compact-slider .wbg-article__inner:has(> .wbg-news__grid ~ .wbg-news__grid),
    .wbg-article--compact-slider .wbg-article__related:has(> .wbg-news-card ~ .wbg-news-card),
    .wbg-article--compact-slider .wbg-article__inner:has(> .wbg-news-card ~ .wbg-news-card) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 32px;
        padding: 0 32px 12px !important;
        gap: 16px;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wbg-article--compact-slider .wbg-article__related:has(> .wbg-news__grid ~ .wbg-news__grid) > .wbg-news__grid,
    .wbg-article--compact-slider .wbg-article__inner:has(> .wbg-news__grid ~ .wbg-news__grid) > .wbg-news__grid {
        display: contents !important;
    }

    .wbg-article--compact-slider .wbg-news__grid::-webkit-scrollbar,
    .wbg-article--compact-slider .wbg-article__related::-webkit-scrollbar {
        display: none;
    }

    .wbg-article--compact-slider .wbg-news__grid > .wbg-news-card,
    .wbg-article--compact-slider .wbg-news__grid > .brxe-block.wbg-news-card,
    .wbg-article--compact-slider .wbg-news__grid .wbg-news-card.wbg-news-card,
    .wbg-article--compact-slider .wbg-article__related .wbg-news-card.wbg-news-card,
    .wbg-article--compact-slider .wbg-article__inner .wbg-news-card.wbg-news-card,
    .wbg-article__related:has(> .wbg-news__grid ~ .wbg-news__grid) .wbg-news-card.wbg-news-card,
    .wbg-article__inner:has(> .wbg-news__grid ~ .wbg-news__grid) .wbg-news-card.wbg-news-card {
        flex: 0 0 58% !important;
        width: 58% !important;
        max-width: 58% !important;
        min-width: 0 !important;
        scroll-snap-align: start;
        box-sizing: border-box;
    }

    .wbg-article--compact-slider .wbg-article__arrow,
    .wbg-article--compact-slider .wbg-article__pagination {
        display: flex;
    }

    .wbg-article__related:has(> .wbg-news__grid ~ .wbg-news__grid),
    .wbg-article__inner:has(> .wbg-news__grid ~ .wbg-news__grid) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 32px;
        padding: 0 32px 12px !important;
        gap: 16px;
        width: 100% !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wbg-article__related:has(> .wbg-news__grid ~ .wbg-news__grid) > .wbg-news__grid,
    .wbg-article__inner:has(> .wbg-news__grid ~ .wbg-news__grid) > .wbg-news__grid {
        display: contents !important;
    }

    .wbg-article__related:has(> .wbg-news__grid ~ .wbg-news__grid) .wbg-news-card.wbg-news-card,
    .wbg-article__inner:has(> .wbg-news__grid ~ .wbg-news__grid) .wbg-news-card.wbg-news-card {
        flex: 0 0 58% !important;
        width: 58% !important;
        max-width: 58% !important;
        scroll-snap-align: start;
    }
}

@media (max-width: 1024px) {
    .wbg-article:not(.wbg-article--compact-slider):not(.wbg-article--overflow-slider) .wbg-news__grid,
    .wbg-article:not(.wbg-article--compact-slider) .wbg-article__related:has(> .wbg-news__grid ~ .wbg-news__grid),
    .wbg-article:not(.wbg-article--compact-slider) .wbg-article__inner:has(> .wbg-news__grid ~ .wbg-news__grid) {
        --wbg-news-card-width: calc((100% - 20px) / 2);
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .wbg-article__inner,
    .wbg-article__inner.wbg-article__inner {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .wbg-article__title,
    .wbg-article__more-title,
    .wbg-article__content,
    .wbg-article__meta {
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .wbg-article__back,
    .wbg-article__back a {
        white-space: normal;
        text-align: center;
    }

    /* „Mehr lesen“: Slider über volle Viewport-Breite (Inner-Padding ausgleichen) */
    .wbg-article .wbg-article__slider,
    .wbg-article .wbg-article__related {
        margin-left: -24px;
        margin-right: -24px;
        width: calc(100% + 48px) !important;
        max-width: 100vw;
    }

    .wbg-article--compact-slider .wbg-news__grid.wbg-news__grid,
    .wbg-article--compact-slider .wbg-article__related:has(> .wbg-news__grid ~ .wbg-news__grid),
    .wbg-article--compact-slider .wbg-article__inner:has(> .wbg-news__grid ~ .wbg-news__grid),
    .wbg-article--compact-slider .wbg-article__related:has(> .wbg-news-card ~ .wbg-news-card),
    .wbg-article--compact-slider .wbg-article__inner:has(> .wbg-news-card ~ .wbg-news-card),
    .wbg-article .wbg-news__grid,
    .wbg-article__related .wbg-news__grid,
    .wbg-article__inner .wbg-news__grid.wbg-news__grid,
    .wbg-article__related:has(> .wbg-news__grid ~ .wbg-news__grid),
    .wbg-article__inner:has(> .wbg-news__grid ~ .wbg-news__grid) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 48px;
        padding: 0 48px 12px !important;
        gap: 16px;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wbg-article--compact-slider .wbg-article__related:has(> .wbg-news__grid ~ .wbg-news__grid) > .wbg-news__grid,
    .wbg-article--compact-slider .wbg-article__inner:has(> .wbg-news__grid ~ .wbg-news__grid) > .wbg-news__grid,
    .wbg-article__related:has(> .wbg-news__grid ~ .wbg-news__grid) > .wbg-news__grid,
    .wbg-article__inner:has(> .wbg-news__grid ~ .wbg-news__grid) > .wbg-news__grid {
        display: contents !important;
    }

    .wbg-article .wbg-news__grid::-webkit-scrollbar,
    .wbg-article--compact-slider .wbg-article__related::-webkit-scrollbar,
    .wbg-article__related:has(> .wbg-news__grid ~ .wbg-news__grid)::-webkit-scrollbar {
        display: none;
    }

    /* 1 Card sichtbar – gleiche Rechnung wie Startseite (100vw − Gutter − Peek) */
    .wbg-article--compact-slider .wbg-news__grid > .wbg-news-card,
    .wbg-article--compact-slider .wbg-news__grid > .brxe-block.wbg-news-card,
    .wbg-article--compact-slider .wbg-news__grid > .brxe-div,
    .wbg-article--compact-slider .wbg-article__related .wbg-news-card.wbg-news-card,
    .wbg-article--compact-slider .wbg-article__inner .wbg-news-card.wbg-news-card,
    .wbg-article .wbg-news__grid > .wbg-buyers-card,
    .wbg-article .wbg-news__grid > .wbg-news-card,
    .wbg-article .wbg-news__grid > .brxe-block,
    .wbg-article .wbg-news__grid > .brxe-div,
    .wbg-article__related:has(> .wbg-news__grid ~ .wbg-news__grid) .wbg-news-card.wbg-news-card,
    .wbg-article__inner:has(> .wbg-news__grid ~ .wbg-news__grid) .wbg-news-card.wbg-news-card {
        flex: 0 0 calc(100vw - 94px) !important;
        width: calc(100vw - 94px) !important;
        max-width: calc(100vw - 94px) !important;
        min-width: 0 !important;
        min-height: 0;
        scroll-snap-align: start;
        box-sizing: border-box;
    }

    .wbg-article .wbg-news-card,
    .wbg-article .wbg-news-card.wbg-news-card {
        min-height: 480px;
    }

    .wbg-article .wbg-news-card__body {
        padding: 16px 24px 32px;
    }

    .wbg-article--compact-slider .wbg-article__arrow,
    .wbg-article--compact-slider .wbg-article__pagination {
        display: flex;
    }
}


/* ==========================================================================
   SECTION "Über die wbg" - Figma 1008:428
   --------------------------------------------------------------------------
   Zentrierter zwei-Karten-Aufbau im max-width-Container:
   - Linke Karte: dunkelgrünes Parallelogramm, -17.5° geneigt, 5 px Radius
   - Rechte Karte: Bild-Parallelogramm, gleicher Winkel, 5 px Radius
   Beide Karten teilen sich die diagonale Markenoptik - die rechte Kante der
   grünen Karte und die linke Kante der Bild-Karte spiegeln sich.
   ========================================================================== */

/* Section: full-bleed, overflow:hidden für das gekappte grüne Parallelogramm.
   ASPECT-RATIO 1440/676 = 2.131 hält die Figma-Proportionen auf JEDEM Viewport
   exakt - dadurch bleiben die diagonalen TR/BR-Positionen prozentual stabil
   (TR bei 50%, BR bei 35% der Section-Breite, wie in Figma).               */
.wbg-about,
.wbg-about.wbg-about,
section.wbg-about {
    position: relative !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    aspect-ratio: 1440 / 676 !important;
    min-height: 480px !important;
    max-height: 720px !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Inner: absolut platziert, füllt die Section vollständig aus. position:absolute
   neutralisiert Bricks' Block-Flex-Default.                                */
.wbg-about__inner,
.wbg-about .wbg-about__inner,
.wbg-about__inner.wbg-about__inner {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 0 !important;
    background: transparent !important;
}

/* ------------------------------------------------------------------------ */
/* Grüne Fläche - ::before des Inner-Blocks (NICHT auf der Section selbst, */
/* da Bricks dort Pseudo-Elemente für eigene Backgrounds nutzt). Pseudo-   */
/* Elemente sind komplett unter unserer Kontrolle - Bricks kann sie nicht  */
/* überschreiben.                                                          */
/* ------------------------------------------------------------------------ */
/* Geometrie (% der Section-Breite, dank aspect-ratio gleich auf allen
   Viewports):
   - Layout-Box: left=-25%, width=67.5%, top=0, bottom=0 (kein Inset!)
   - Layout-Right = 42.5%, Layout-Center-X = 8.75%
   - Section-Höhe = 47% der Section-Breite (aspect 1440/676)
   - Halbe Höhe = 23.5% der Breite
   - Halb. Skew-Offset = 23.5% * tan(17.5°) = 7.4% der Section-Breite
   - Nach skewX(-17.5deg) mit center origin:
       Top-Left:     (-17,6%; 0)     -> OFF-SCREEN, durch overflow gekappt
       Top-Right:    ( 49,9%; 0)     -> sichtbar mit 5px Rundung (matched Figma 50%)
       Bottom-Left:  (-32,4%; 100%)  -> OFF-SCREEN
       Bottom-Right: ( 35,1%; 100%)  -> sichtbar mit 5px Rundung (matched Figma 35%) */
.wbg-about__inner::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -25%;
    width: 67.5%;
    background-color: var(--wbg-gruen-dunkel, #19502f);
    border-radius: 10px;
    transform: skewX(-17.5deg);
    /* WICHTIG: z-index 2 -> liegt VOR dem Bild (z-index 1), damit das
       Bild seine "diagonale linke Kante" durch die grüne Überlagerung
       bekommt - exakt wie in Figma. Content liegt noch darüber (z-index 3).*/
    z-index: 2;
    pointer-events: none;
}

.wbg-about.wbg-about--parallax-enabled .wbg-about__inner::before {
    transform: skewX(-17.5deg) translateY(var(--wbg-about-parallax-y, 0px));
}

/* Falls der frühere .wbg-about__bg Block noch in Bricks existiert: ausblenden -
   das Inner::before erledigt nun den grünen Hintergrund.                   */
.wbg-about__bg,
.wbg-about .wbg-about__bg {
    display: none !important;
}

/* ------------------------------------------------------------------------ */
/* Bild rechts - rechteck-bündig, mit 5 px Rundung. Wird vom grünen        */
/* Parallelogramm links überlagert (z-index ordering); die "diagonale       */
/* Bildkante" links entsteht visuell durch die grüne Überlagerung.          */
/* ------------------------------------------------------------------------ */
/* Geometrie (matched Figma 958×572 in 1440×676):
   - top 8% (= 54/676), bottom 7.4% (= 50/676), right 0, width 66.5% (= 958/1440)
   - Bild rechts bündig, links bei 33.5% der Section. Green's BR liegt bei
     35.1% - überlappt das Bild knapp links und erzeugt die Diagonal-Optik. */
.wbg-about__media,
.wbg-about .wbg-about__media,
.wbg-about__media.wbg-about__media {
    position: absolute !important;
    top: 8% !important;
    bottom: 7.4% !important;
    right: 0 !important;
    left: auto !important;
    width: 66.5% !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background-color: var(--wbg-gruen-dunkel, #19502f);
    /* z-index 1: liegt UNTER der grünen Fläche (::before mit z-index 2),
       damit links die diagonale grüne Überlagerung das Bild verdeckt.    */
    z-index: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wbg-about__media img,
.wbg-about__media > figure,
.wbg-about__media > figure > img,
.wbg-about__media .brxe-image,
.wbg-about__media .brxe-image > img,
.wbg-about__media .brxe-image > figure,
.wbg-about__media .brxe-image > figure > img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
    margin: 0 !important;
}

/* ------------------------------------------------------------------------ */
/* Content links - liegt VOR der grünen Fläche, transparent.               */
/* Position matched Figma:                                                  */
/*   left=77/1440=5.35%, width=461/1440=32%, top=0, height=100% mit         */
/*   vertikalem Centering. Kein eigener BG - Inner::before liefert das Grün.*/
/* ------------------------------------------------------------------------ */
.wbg-about__content,
.wbg-about .wbg-about__content,
.wbg-about__content.wbg-about__content {
    position: absolute !important;
    top: 0 !important;
    left: 5.35% !important;
    right: auto !important;
    bottom: auto !important;
    width: 32% !important;
    min-width: 0 !important;
    max-width: 461px !important;
    height: 100% !important;
    padding: 6% 0 !important;
    margin: 0 !important;
    color: var(--wbg-neutral-50, #fdfcfb);
    /* z-index 3: liegt ÜBER der grünen Fläche (z-index 2), damit der
       Text lesbar bleibt.                                                */
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    transform: none !important;
}

/* Parallax: grüne Fläche + Content wandern beim Scrollen leicht nach oben */
.wbg-about.wbg-about--parallax-enabled .wbg-about__content,
.wbg-about.wbg-about--parallax-enabled .wbg-about__content.wbg-about__content {
    top: var(--wbg-about-parallax-y, 0px) !important;
}

/* ------------------------------------------------------------------------ */
/* Typografie                                                               */
/* ------------------------------------------------------------------------ */
.wbg-about__title {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: var(--wbg-fs-section-title);   /* fluid 36-56 px */
    line-height: 1.05;
    color: var(--wbg-neutral-50, #fdfcfb);
    margin: 0 0 12px;
}

.wbg-about__lead {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: var(--wbg-fs-body);  /* konsistent mit Hero-Intro + allen
                                       anderen Intro-Paragraphen (20-24 px) */
    line-height: 1.4;
    color: var(--wbg-neutral-50, #fdfcfb);
    margin: 0 0 28px;
}

.wbg-about__lead strong,
.wbg-about__lead b {
    font-weight: 700;
}

.wbg-about__body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: var(--wbg-fs-body);  /* fluid 20-24 px */
    line-height: 1.55;
    letter-spacing: 0.17px;
    color: var(--wbg-neutral-50, #fdfcfb);
    margin: 0 0 36px;
}

.wbg-about__body p {
    margin: 0 0 18px;
}

.wbg-about__body p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------------ */
/* CTA - Gradient-Parallelogramm wie .wbg-news__cta, kompaktere Größe       */
/* ------------------------------------------------------------------------ */
.wbg-about__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    align-self: flex-start;
    padding: 14px 32px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: var(--wbg-fs-cta);   /* fluid 20-26 px */
    line-height: 1;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: none !important;
    z-index: 0;
    isolation: isolate;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.wbg-about__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--wbg-gruen, #009450) 73%,
        var(--wbg-gruen-akzent, #afcc46) 100%
    );
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
}

.wbg-about__cta:hover,
.wbg-about__cta:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* ------------------------------------------------------------------------ */
/* Responsive                                                               */
/* ------------------------------------------------------------------------ */
/* Tablet - aspect-ratio bleibt identisch, nur Typo reduziert.
   Bei 1024 Viewport: section_height = 1024/2.131 = 481 px (Figma-skaliert). */
@media (max-width: 1024px) {
    .wbg-about__content,
    .wbg-about .wbg-about__content {
        padding: 5% 0 !important;
    }
    /* font-size: --wbg-fs-h2 (clamp 36-56 px) regelt das responsive smooth */
}

/* Mobile - Figma HOME-Mobile-Vorlage:
   - Grüner Parallelogramm-Header oben mit Title + Lead
   - Vollbreites Bild darunter
   - Body-Text auf hellem BG
   - CTA-Button unten
   Mechanik:
   - .wbg-about__content bekommt `display: contents`, dadurch werden Title,
     Lead, Body und CTA zu direkten Kindern von .wbg-about__inner.
   - In Kombination mit `order` können wir das Bild zwischen Lead und Body
     einsortieren - ohne die Bricks-Struktur ändern zu müssen.
   - ::before auf .wbg-about__inner zeichnet das grüne Parallelogramm-
     Header-Element (analog zur Desktop-Mechanik, nur kompakter). Die linke
     Kante läuft off-screen (overflow:hidden auf der Section kappt sie),
     nur die rechte diagonale Kante bleibt sichtbar - 1:1 wie Figma.       */
@media (max-width: 1024px) {
    .wbg-about,
    .wbg-about.wbg-about,
    section.wbg-about {
        position: relative !important;
        aspect-ratio: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 0 48px 0 !important;
        margin: 0 !important;
        background-color: #ffffff !important;
        overflow: hidden !important;
    }

    /* display: contents → __content "verschwindet" aus dem Layout-Tree,
       seine Kinder werden direkte Kinder von __inner. So können wir Title +
       Lead VOR dem Bild und Body + CTA NACH dem Bild platzieren, ohne die
       Bricks-Markup-Reihenfolge zu verändern.                              */
    .wbg-about__content,
    .wbg-about .wbg-about__content,
    .wbg-about__content.wbg-about__content {
        display: contents !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .wbg-about__inner,
    .wbg-about .wbg-about__inner {
        position: relative !important;
        inset: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    /* Grünes Parallelogramm-Header.
       Geometrie:
       - left: -12 % → linke Kante off-screen, wird durch overflow:hidden
         der Section abgeschnitten (saubere Vertikale am Viewport-Rand)
       - right: 18 % → rechte Kante mit Spielraum, damit der Skew nach
         außen schwingen kann ohne den Viewport zu sprengen
       - height: clamp 140-190 px → noch kompakterer Header
       - skewX(-17.5deg) + border-radius:10px → identische Markenoptik wie
         alle anderen Parallelogramme im Design                            */
    .wbg-about__inner::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: -12% !important;
        right: 18% !important;
        height: clamp(200px, 38vw, 320px) !important;
        width: auto !important;
        background-color: var(--wbg-gruen-dunkel, #19502f) !important;
        border-radius: 10px !important;
        transform: skewX(-17.5deg) !important;
        /* Über dem Bild (z-index 1), unter Title/Lead (z-index 4). */
        z-index: 3 !important;
        pointer-events: none !important;
    }

    .wbg-about.wbg-about--parallax-enabled .wbg-about__inner::before {
        transform: skewX(-17.5deg) !important;
    }

    .wbg-about.wbg-about--parallax-enabled .wbg-about__content,
    .wbg-about.wbg-about--parallax-enabled .wbg-about__content.wbg-about__content {
        top: 0 !important;
    }

    .wbg-about.wbg-about--parallax-enabled .wbg-about__title,
    .wbg-about.wbg-about--parallax-enabled .wbg-about__lead {
        top: 0;
        transform: none;
    }

    /* Title - im Grün-Header, weißer Text. padding-right groß genug, damit
       der Text nicht über die diagonale rechte Kante des Headers ragt.    */
    .wbg-about__title {
        order: 1;
        position: relative;
        z-index: 4;
        padding: 40px 28% 0 24px;
        margin: 0 0 12px;
        color: var(--wbg-neutral-50, #fdfcfb) !important;
        line-height: 1.05;
    }

    /* Lead - im Grün-Header, weißer Text. Mehr padding-right als der Title,
       weil das untere Ende der Header-Diagonale weiter links sitzt.       */
    .wbg-about__lead {
        order: 2;
        position: relative;
        z-index: 4;
        padding: 0 32% 28px 24px;
        margin: 0 0 24px;
        color: var(--wbg-neutral-50, #fdfcfb) !important;
        line-height: 1.35;
    }

    /* "100 Jahren" o. ä. Hervorhebungen in hellgrün - matched Figma.       */
    .wbg-about__lead strong,
    .wbg-about__lead b {
        color: var(--wbg-gruen-akzent, #afcc46) !important;
    }

    /* Bild - voll bündig, liegt HINTER dem grünen Parallelogramm-Header.
       Negative margin-top zieht das Bild unter die schräge untere Kante
       des Headers - exakt wie in Figma.                                  */
    .wbg-about__media,
    .wbg-about .wbg-about__media {
        order: 3;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        height: clamp(220px, 60vw, 320px) !important;
        border-radius: 0 !important;
        margin: -56px 0 0 !important;
        padding: 0 !important;
        z-index: 1 !important;
        background-color: var(--wbg-gruen-dunkel, #19502f);
    }
    .wbg-about__media img,
    .wbg-about .wbg-about__media img,
    .wbg-about__media > figure,
    .wbg-about__media > figure > img,
    .wbg-about__media .brxe-image,
    .wbg-about__media .brxe-image > img,
    .wbg-about__media .brxe-image > figure,
    .wbg-about__media .brxe-image > figure > img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Body - dunkelgrüner Text auf hellem BG. */
    .wbg-about__body {
        order: 4;
        position: relative;
        z-index: 2;
        padding: 32px 24px 0;
        margin: 0;
        color: var(--wbg-gruen-dunkel, #19502f) !important;
    }
    .wbg-about__body p {
        color: var(--wbg-gruen-dunkel, #19502f) !important;
        margin: 0 0 18px;
    }
    .wbg-about__body p:last-child {
        margin-bottom: 0;
    }

    /* CTA - kompakter Button, zentriert. */
    .wbg-about__cta {
        order: 5;
        margin: 32px auto 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 48px);
        align-self: center !important;
        padding: 12px 24px;
    }
}

/* Tablet: grüner Header kompakter (schmaler + niedriger als Mobile-Basis) */
@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-about__inner::before {
        left: -10% !important;
        right: 38% !important;
        height: clamp(168px, 22vw, 220px) !important;
    }

    .wbg-about__title {
        padding: 28px 42% 0 32px !important;
        margin: 0 0 10px !important;
    }

    .wbg-about__lead {
        padding: 0 44% 16px 32px !important;
        margin: 0 0 16px !important;
    }

    .wbg-about__media,
    .wbg-about .wbg-about__media {
        margin: -32px 0 0 !important;
    }
}


/* ==========================================================================
   SECTION "Über uns" – Seite Über die wbg (Figma 1152:1713)
   --------------------------------------------------------------------------
   Weißer Hintergrund, zentrierte Headline + Intro, 3 grüne Stat-Karten,
   zweispaltig Copy | Bild-Parallelogramm, Gradient-CTA.

   Bricks-Struktur:
   Section (.wbg-ueber-uns)
     Block (.wbg-ueber-uns__inner)
       Block (.wbg-ueber-uns__header)
         Heading h3 (.wbg-ueber-uns__title)
         Basic Text (.wbg-ueber-uns__intro)
       Block (.wbg-ueber-uns__stats)
         Block (.wbg-ueber-uns__stat) ×3
           Basic Text (.wbg-ueber-uns__stat-value)
           Basic Text (.wbg-ueber-uns__stat-label)
       Block (.wbg-ueber-uns__layout)
         Block (.wbg-ueber-uns__copy)
           Basic Text (.wbg-ueber-uns__body)
           Text Link (.wbg-ueber-uns__cta)
         Block (.wbg-ueber-uns__media)
           Image
   ========================================================================== */

.wbg-ueber-uns,
.wbg-ueber-uns.wbg-ueber-uns,
section.wbg-ueber-uns,
.brxe-section:has(.wbg-ueber-uns__layout),
.brxe-section:has(.wbg-ueber-uns__inner),
.brxe-section:has(.wbg-ueber-uns__container) {
    padding: clamp(72px, 8vw, 113px) clamp(24px, 14.7vw, 212px) !important;
    background-color: #ffffff !important;
    color: var(--wbg-gruen-dunkel, #19502f);
    overflow-x: clip;
}

.wbg-ueber-uns__inner,
.wbg-ueber-uns__container,
.wbg-ueber-uns .wbg-ueber-uns__inner,
.wbg-ueber-uns .wbg-ueber-uns__container,
.wbg-ueber-uns__inner.wbg-ueber-uns__inner,
.wbg-ueber-uns__container.wbg-ueber-uns__container {
    display: block !important;
    max-width: 1020px;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}

.wbg-ueber-uns__header,
.brxe-block.wbg-ueber-uns__header,
.brxe-div.wbg-ueber-uns__header,
.wbg-ueber-uns__header.brxe-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    max-width: 854px;
    margin: 0 auto 56px !important;
    text-align: center;
}

.wbg-ueber-uns__header > * {
    width: 100%;
    text-align: center !important;
}

.wbg-ueber-uns__title,
.brxe-heading.wbg-ueber-uns__title,
.wbg-ueber-uns__header .brxe-heading,
.wbg-ueber-uns__header :is(h1, h2, h3, h4),
.wbg-ueber-uns__inner > .brxe-heading,
.wbg-ueber-uns__inner > .brxe-heading.wbg-ueber-uns__title,
.brxe-section.wbg-ueber-uns .brxe-heading:not(.wbg-ueber-uns__body),
.brxe-section:has(.wbg-ueber-uns__layout) .wbg-ueber-uns__header :is(.brxe-heading, h1, h2, h3, h4) {
    max-width: 854px;
    margin: 0 auto 16px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-section-title) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-align: center !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.wbg-ueber-uns__intro,
.wbg-ueber-uns__intro.wbg-ueber-uns__intro,
.wbg-ueber-uns__intro .brxe-text-basic,
.wbg-ueber-uns__intro .brxe-text {
    max-width: 854px;
    margin: 0 auto !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-align: center !important;
}

.wbg-ueber-uns__intro p {
    margin: 0;
}

/* Stat-Karten – grüne Parallelogramme (Figma 1152:1718 ff.) */
.wbg-ueber-uns__stats,
.brxe-block.wbg-ueber-uns__stats,
.brxe-div.wbg-ueber-uns__stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(16px, 2.2vw, 32px) !important;
    width: 100% !important;
    margin: 0 0 56px !important;
}

.wbg-ueber-uns__stat,
.brxe-block.wbg-ueber-uns__stat,
.brxe-div.wbg-ueber-uns__stat {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    min-height: 129px;
    padding: 20px 18px;
    text-align: center;
    color: var(--wbg-text-light, #ffffff);
    isolation: isolate;
}

.wbg-ueber-uns__stat::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--wbg-gruen, #009450);
    border-radius: var(--wbg-radius, 10px);
    transform: skewX(-17.5deg);
    z-index: -1;
}

.wbg-ueber-uns__stat-value,
.wbg-ueber-uns__stat-value .brxe-text-basic,
.wbg-ueber-uns__stat-value .brxe-text,
.brxe-text-basic.wbg-ueber-uns__stat-value,
.brxe-text.wbg-ueber-uns__stat-value {
    margin: 0 !important;
    font-family: "Lato", sans-serif !important;
    font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.1875rem) !important; /* 28–35 px */
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: var(--wbg-text-light, #ffffff) !important;
    text-align: center !important;
}

.wbg-ueber-uns__stat-value p {
    margin: 0;
}

.wbg-ueber-uns__stat-label,
.wbg-ueber-uns__stat-label .brxe-text-basic,
.wbg-ueber-uns__stat-label .brxe-text,
.brxe-text-basic.wbg-ueber-uns__stat-label,
.brxe-text.wbg-ueber-uns__stat-label {
    margin: 0 !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-link) !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: var(--wbg-text-light, #ffffff) !important;
    text-align: center !important;
}

.wbg-ueber-uns__stat-label p {
    margin: 0;
}

.wbg-ueber-uns__layout,
.wbg-ueber-uns__layout.wbg-ueber-uns__layout,
.brxe-section:has(.wbg-ueber-uns__layout) .wbg-ueber-uns__layout {
    display: grid !important;
    grid-template-columns: minmax(0, 420fr) minmax(0, 534fr) !important;
    align-items: center !important;
    gap: clamp(24px, 3.3vw, 34px) !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.wbg-ueber-uns__copy,
.wbg-ueber-uns__layout > .brxe-block,
.wbg-ueber-uns__layout > .brxe-div {
    min-width: 0 !important;
}

.wbg-ueber-uns__copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0;
    min-width: 0;
    max-width: 100%;
}

.wbg-ueber-uns__body,
.wbg-ueber-uns__body.wbg-ueber-uns__body,
.wbg-ueber-uns__body .brxe-text-basic,
.wbg-ueber-uns__body .brxe-text {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

.wbg-ueber-uns__body p {
    margin: 0 0 1em;
}

.wbg-ueber-uns__body p:last-child {
    margin-bottom: 0;
}

.wbg-ueber-uns__body strong,
.wbg-ueber-uns__body b {
    font-weight: 700;
}

.wbg-ueber-uns__cta,
.wbg-ueber-uns__cta.brxe-text-link,
.wbg-ueber-uns__cta a {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    align-self: flex-start;
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: clamp(32px, 4vw, 40px);
    padding: 14px 32px;
    min-height: 0;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-cta) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: none !important;
    white-space: nowrap;
    z-index: 0;
    isolation: isolate;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.wbg-ueber-uns__cta::before,
.wbg-ueber-uns__cta a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--wbg-gruen, #009450) 73%,
        var(--wbg-gruen-akzent, #afcc46) 100%
    );
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
}

.wbg-ueber-uns__cta::after,
.wbg-ueber-uns__cta a::after,
.wbg-ueber-uns__cta svg,
.wbg-ueber-uns__cta a svg {
    display: none !important;
    content: none !important;
}

.wbg-ueber-uns__cta:hover,
.wbg-ueber-uns__cta:focus-visible,
.wbg-ueber-uns__cta a:hover,
.wbg-ueber-uns__cta a:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.wbg-ueber-uns__media,
.wbg-ueber-uns__media.wbg-ueber-uns__media,
.wbg-ueber-uns__layout > *:nth-child(2):has(.brxe-image),
.wbg-ueber-uns__layout > *:nth-child(2):has(img) {
    position: relative !important;
    width: 80% !important;
    max-width: 80% !important;
    min-width: 80% !important;
    aspect-ratio: 534 / 305;
    overflow: hidden !important;
    border-radius: var(--wbg-radius, 10px);
    transform: skewX(-17.5deg);
    transform-origin: center center;
    isolation: isolate;
}

.wbg-ueber-uns__media img,
.wbg-ueber-uns__media img.brxe-image,
.wbg-ueber-uns__media .brxe-image img,
.wbg-ueber-uns__media picture,
.wbg-ueber-uns__media picture img,
.wbg-ueber-uns__layout > *:nth-child(2) img.brxe-image,
.wbg-ueber-uns__layout > *:nth-child(2) .brxe-image img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 130% !important;
    height: 100% !important;
    max-width: none !important;
    left: -15% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: skewX(17.5deg) scale(1.05) !important;
    transform-origin: center center !important;
}

.wbg-ueber-uns__media .brxe-image,
.wbg-ueber-uns__layout > *:nth-child(2) .brxe-image {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-ueber-uns,
    .wbg-ueber-uns.wbg-ueber-uns,
    section.wbg-ueber-uns,
    .brxe-section:has(.wbg-ueber-uns__layout),
    .brxe-section:has(.wbg-ueber-uns__inner),
    .brxe-section:has(.wbg-ueber-uns__container) {
        padding: 56px 32px !important;
    }

    .wbg-ueber-uns__inner,
    .wbg-ueber-uns__container,
    .wbg-ueber-uns .wbg-ueber-uns__inner,
    .wbg-ueber-uns .wbg-ueber-uns__container {
        max-width: 100% !important;
    }

    .wbg-ueber-uns__header,
    .brxe-block.wbg-ueber-uns__header {
        margin-bottom: 32px !important;
    }

    .wbg-ueber-uns__stats,
    .brxe-block.wbg-ueber-uns__stats {
        margin-bottom: 36px !important;
        gap: 16px !important;
    }

    .wbg-ueber-uns__stat,
    .brxe-block.wbg-ueber-uns__stat {
        min-height: 112px;
        padding: 16px 12px;
    }

    .wbg-ueber-uns__layout,
    .wbg-ueber-uns__layout.wbg-ueber-uns__layout,
    .brxe-section:has(.wbg-ueber-uns__layout) .wbg-ueber-uns__layout,
    section.wbg-ueber-uns .wbg-ueber-uns__layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 36px !important;
    }

    .wbg-ueber-uns__copy,
    .wbg-ueber-uns__copy.wbg-ueber-uns__copy,
    .wbg-ueber-uns__layout > *:first-child {
        order: 1 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .wbg-ueber-uns__media,
    .wbg-ueber-uns__media.wbg-ueber-uns__media,
    .wbg-ueber-uns__layout > *:nth-child(2):has(.brxe-image),
    .wbg-ueber-uns__layout > *:nth-child(2):has(img),
    .wbg-ueber-uns__layout > *:last-child:not(:first-child) {
        order: 2 !important;
        width: 80% !important;
        max-width: 80% !important;
        min-width: 0 !important;
        margin: 0 auto;
        aspect-ratio: 534 / 305;
    }

    .wbg-ueber-uns__cta,
    .wbg-ueber-uns__cta a {
        max-width: 100%;
        white-space: normal;
    }

    .wbg-ueber-uns__media img,
    .wbg-ueber-uns__media .brxe-image img,
    .wbg-ueber-uns__layout > *:nth-child(2) .brxe-image img {
        transform: skewX(17.5deg) scale(1.02) !important;
    }
}

@media (max-width: 640px) {
    .wbg-ueber-uns,
    .wbg-ueber-uns.wbg-ueber-uns,
    section.wbg-ueber-uns,
    .brxe-section:has(.wbg-ueber-uns__layout),
    .brxe-section:has(.wbg-ueber-uns__inner),
    .brxe-section:has(.wbg-ueber-uns__container) {
        padding: 48px 24px !important;
    }

    .wbg-ueber-uns__inner,
    .wbg-ueber-uns__container,
    .wbg-ueber-uns .wbg-ueber-uns__inner,
    .wbg-ueber-uns .wbg-ueber-uns__container {
        max-width: 100% !important;
    }

    .wbg-ueber-uns__header,
    .brxe-block.wbg-ueber-uns__header {
        margin-bottom: 28px !important;
        padding: 0 !important;
        align-items: flex-start !important;
        text-align: left !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .wbg-ueber-uns__header > * {
        text-align: left !important;
    }

    .wbg-ueber-uns__title,
    .brxe-heading.wbg-ueber-uns__title,
    .wbg-ueber-uns__header .brxe-heading,
    .wbg-ueber-uns__header :is(h1, h2, h3, h4),
    .wbg-ueber-uns__inner > .brxe-heading,
    .wbg-ueber-uns__inner > .brxe-heading.wbg-ueber-uns__title,
    .brxe-section.wbg-ueber-uns .brxe-heading:not(.wbg-ueber-uns__body),
    .brxe-section:has(.wbg-ueber-uns__layout) .wbg-ueber-uns__header :is(.brxe-heading, h1, h2, h3, h4) {
        overflow-wrap: break-word;
        hyphens: auto;
        text-align: left !important;
        margin: 0 0 16px !important;
        max-width: none !important;
    }

    .wbg-ueber-uns__intro,
    .wbg-ueber-uns__intro.wbg-ueber-uns__intro,
    .wbg-ueber-uns__intro .brxe-text-basic,
    .wbg-ueber-uns__intro .brxe-text,
    .wbg-ueber-uns__intro p {
        overflow-wrap: break-word;
        hyphens: auto;
        text-align: left !important;
        margin: 0 !important;
        max-width: none !important;
    }

    .wbg-ueber-uns__stats,
    .brxe-block.wbg-ueber-uns__stats {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-bottom: 32px !important;
    }

    .wbg-ueber-uns__stat,
    .brxe-block.wbg-ueber-uns__stat {
        min-height: 0;
        padding: 20px 24px;
    }

    .wbg-ueber-uns__layout,
    .wbg-ueber-uns__layout.wbg-ueber-uns__layout,
    .brxe-section:has(.wbg-ueber-uns__layout) .wbg-ueber-uns__layout,
    section.wbg-ueber-uns .wbg-ueber-uns__layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 32px !important;
    }

    .wbg-ueber-uns__copy,
    .wbg-ueber-uns__copy.wbg-ueber-uns__copy,
    .wbg-ueber-uns__layout > *:first-child {
        order: 1 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .wbg-ueber-uns__media,
    .wbg-ueber-uns__media.wbg-ueber-uns__media,
    .wbg-ueber-uns__layout > *:nth-child(2):has(.brxe-image),
    .wbg-ueber-uns__layout > *:nth-child(2):has(img),
    .wbg-ueber-uns__layout > *:last-child:not(:first-child) {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0;
        aspect-ratio: 534 / 305;
    }

    .wbg-ueber-uns__cta,
    .wbg-ueber-uns__cta a {
        max-width: 100%;
        white-space: normal;
    }

    .wbg-ueber-uns__media img,
    .wbg-ueber-uns__media .brxe-image img,
    .wbg-ueber-uns__layout > *:nth-child(2) .brxe-image img {
        transform: skewX(17.5deg) scale(1.02) !important;
    }
}


/* ==========================================================================
   SECTION "Karriere" – Seite Über die wbg (Figma 1153:1716)
   --------------------------------------------------------------------------
   Beiger Hintergrund (#F8F7F5), zentrierter Header, zweispaltig Copy | Bild.
   Copy: Body + „Was wir bieten“-Liste (grüne Parallelogramm-Bullets).
   Bild: Parallelogramm wie Über uns. Darunter Job-Karten (grüne Parallelogramme).

   Bricks-Struktur:
   Section (.wbg-karriere)
     Block (.wbg-karriere__inner)
       Block (.wbg-karriere__header)
         Heading h3 (.wbg-karriere__title)
         Basic Text (.wbg-karriere__intro)
       Block (.wbg-karriere__layout)
         Block (.wbg-karriere__copy)
           Basic Text (.wbg-karriere__body)
           Heading h4 (.wbg-karriere__list-title)
           Basic Text (.wbg-karriere__list) – <ul><li>…</li></ul>
         Block (.wbg-karriere__media)
           Image
       Block (.wbg-karriere__jobs)
         Heading h4 (.wbg-karriere__jobs-title)
         Block (.wbg-karriere__jobs-list)
           Block (.wbg-karriere__job) ×n – als Link (URL am Block)
             Block (.wbg-karriere__job-head)
               Basic Text (.wbg-karriere__job-title)
               Block (.wbg-karriere__job-badges)
                 Basic Text (.wbg-karriere__job-badge) ×n  z. B. „Vollzeit“, „Befristet“
             Basic Text (.wbg-karriere__job-desc)

   Hinweis: Job-Karten vorerst statisch in Bricks. Später CPT/Beiträge +
   Query Loop mit gleichen Klassen (.wbg-karriere__job, __job-head, __job-title,
   __job-badges, __job-badge, __job-desc).
   Desktop: Titel | Badges (20 px Abstand, Badges untereinander 6 px).
   Mobile (≤640 px): Job-Karte ohne Schräge (nur border-radius), Reihenfolge
   Badges → Titel → Beschreibung.
   ========================================================================== */

.wbg-karriere,
.wbg-karriere.wbg-karriere,
section.wbg-karriere,
.brxe-section:has(.wbg-karriere__layout),
.brxe-section:has(.wbg-karriere__inner),
.brxe-section:has(.wbg-karriere__container) {
    padding: clamp(72px, 8vw, 113px) clamp(24px, 14.7vw, 212px) !important;
    background-color: #f8f7f5 !important;
    color: var(--wbg-gruen-dunkel, #19502f);
    overflow-x: clip;
}

.wbg-karriere__inner,
.wbg-karriere__container,
.wbg-karriere .wbg-karriere__inner,
.wbg-karriere .wbg-karriere__container,
.wbg-karriere__inner.wbg-karriere__inner,
.wbg-karriere__container.wbg-karriere__container {
    display: block !important;
    max-width: 1020px;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}

.wbg-karriere__header,
.brxe-block.wbg-karriere__header,
.brxe-div.wbg-karriere__header,
.wbg-karriere__header.brxe-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    max-width: 854px;
    margin: 0 auto 30px !important;
    text-align: center;
}

.wbg-karriere__header > * {
    width: 100%;
    text-align: center !important;
}

.wbg-karriere__title,
.brxe-heading.wbg-karriere__title,
.wbg-karriere__header .brxe-heading,
.wbg-karriere__header :is(h1, h2, h3, h4),
.wbg-karriere__inner > .brxe-heading,
.wbg-karriere__inner > .brxe-heading.wbg-karriere__title,
.brxe-section.wbg-karriere .brxe-heading:not(.wbg-karriere__body):not(.wbg-karriere__list-title):not(.wbg-karriere__jobs-title),
.brxe-section:has(.wbg-karriere__layout) .wbg-karriere__header :is(.brxe-heading, h1, h2, h3, h4) {
    max-width: 854px;
    margin: 0 auto 16px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-section-title) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-align: center !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.wbg-karriere__intro,
.wbg-karriere__intro.wbg-karriere__intro,
.wbg-karriere__intro .brxe-text-basic,
.wbg-karriere__intro .brxe-text,
.brxe-text-basic.wbg-karriere__intro,
.brxe-text.wbg-karriere__intro {
    max-width: 854px;
    margin: 0 auto 30px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-align: center !important;
}

.wbg-karriere__header .wbg-karriere__intro,
.wbg-karriere__header .brxe-text-basic.wbg-karriere__intro,
.wbg-karriere__header .brxe-text.wbg-karriere__intro {
    margin-bottom: 0 !important;
}

.wbg-karriere__intro p {
    margin: 0;
}

.wbg-karriere__layout,
.wbg-karriere__layout.wbg-karriere__layout,
.brxe-section:has(.wbg-karriere__layout) .wbg-karriere__layout {
    display: grid !important;
    grid-template-columns: minmax(0, 460fr) minmax(0, 534fr) !important;
    align-items: start !important;
    gap: clamp(20px, 2.2vw, 34px) !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-top: 30px !important;
    margin-bottom: clamp(40px, 5vw, 48px) !important;
}

.wbg-karriere__header + .wbg-karriere__layout,
.brxe-block.wbg-karriere__header + .wbg-karriere__layout,
.brxe-div.wbg-karriere__header + .wbg-karriere__layout {
    margin-top: 0 !important;
}

.wbg-karriere__copy,
.wbg-karriere__layout > .brxe-block,
.wbg-karriere__layout > .brxe-div {
    min-width: 0 !important;
}

.wbg-karriere__copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0;
    min-width: 0;
    max-width: 100%;
}

.wbg-karriere__body,
.wbg-karriere__body.wbg-karriere__body,
.wbg-karriere__body .brxe-text-basic,
.wbg-karriere__body .brxe-text {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

.wbg-karriere__body p {
    margin: 0;
}

.wbg-karriere__list-title,
.brxe-heading.wbg-karriere__list-title,
.wbg-karriere__copy .wbg-karriere__list-title {
    margin: clamp(24px, 3vw, 32px) 0 12px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-h3) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-align: left !important;
}

.wbg-karriere__list,
.wbg-karriere__list.wbg-karriere__list,
.wbg-karriere__list .brxe-text-basic,
.wbg-karriere__list .brxe-text {
    width: 100%;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

.wbg-karriere__list ul,
.wbg-karriere__list .brxe-text-basic ul,
.wbg-karriere__list .brxe-text ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wbg-karriere__list li,
.wbg-karriere__list .brxe-text-basic li,
.wbg-karriere__list .brxe-text li {
    position: relative;
    margin: 0 0 12px !important;
    padding: 0 0 0 35px !important;
    color: inherit !important;
}

.wbg-karriere__list li:last-child,
.wbg-karriere__list .brxe-text-basic li:last-child,
.wbg-karriere__list .brxe-text li:last-child {
    margin-bottom: 0 !important;
}

.wbg-karriere__list li::before,
.wbg-karriere__list .brxe-text-basic li::before,
.wbg-karriere__list .brxe-text li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 19px;
    height: 15px;
    background: var(--wbg-gruen, #009450);
    border-radius: 2px;
    transform: skewX(-17.5deg);
}

.wbg-karriere__media,
.wbg-karriere__media.wbg-karriere__media,
.wbg-karriere__layout > *:nth-child(2):has(.brxe-image),
.wbg-karriere__layout > *:nth-child(2):has(img) {
    position: relative !important;
    width: 80% !important;
    max-width: 80% !important;
    min-width: 80% !important;
    aspect-ratio: 534 / 305;
    overflow: hidden !important;
    border-radius: var(--wbg-radius, 10px);
    transform: skewX(-17.5deg);
    transform-origin: center center;
    isolation: isolate;
    justify-self: end;
}

.wbg-karriere__media img,
.wbg-karriere__media img.brxe-image,
.wbg-karriere__media .brxe-image img,
.wbg-karriere__media picture,
.wbg-karriere__media picture img,
.wbg-karriere__layout > *:nth-child(2) img.brxe-image,
.wbg-karriere__layout > *:nth-child(2) .brxe-image img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 130% !important;
    height: 100% !important;
    max-width: none !important;
    left: -15% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: skewX(17.5deg) scale(1.05) !important;
    transform-origin: center center !important;
}

.wbg-karriere__media .brxe-image,
.wbg-karriere__layout > *:nth-child(2) .brxe-image {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.wbg-karriere__jobs,
.brxe-block.wbg-karriere__jobs,
.brxe-div.wbg-karriere__jobs {
    width: 100%;
}

.wbg-karriere__jobs-title,
.brxe-heading.wbg-karriere__jobs-title,
.wbg-karriere__jobs .wbg-karriere__jobs-title {
    margin: 0 0 24px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-h3) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-align: left !important;
}

.wbg-karriere__jobs-list,
.brxe-block.wbg-karriere__jobs-list,
.brxe-div.wbg-karriere__jobs-list {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* Abstand zwischen Job-Karten (margin-top, da Bricks gap oft ignoriert) */
.wbg-karriere__jobs-list .wbg-karriere__job ~ .wbg-karriere__job,
.wbg-karriere__jobs .wbg-karriere__job ~ .wbg-karriere__job,
.brxe-block.wbg-karriere__jobs-list .brxe-block.wbg-karriere__job ~ .brxe-block.wbg-karriere__job,
.brxe-div.wbg-karriere__jobs-list .brxe-div.wbg-karriere__job ~ .brxe-div.wbg-karriere__job {
    margin-top: clamp(20px, 2.5vw, 28px) !important;
}

.wbg-karriere__job,
.brxe-block.wbg-karriere__job,
.brxe-div.wbg-karriere__job,
.brxe-text-link.wbg-karriere__job,
a.wbg-karriere__job {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: clamp(16px, 2vw, 32px);
    row-gap: 4px;
    align-items: center;
    width: 100% !important;
    min-height: 94px;
    padding: 12px clamp(40px, 4.5vw, 56px) 12px clamp(28px, 3vw, 40px);
    box-sizing: border-box;
    color: var(--wbg-text-light, #ffffff) !important;
    text-decoration: none !important;
    isolation: isolate;
    transition: transform 0.2s ease, filter 0.2s ease;
    cursor: pointer;
}

.wbg-karriere__job::before,
.brxe-text-link.wbg-karriere__job::before,
a.wbg-karriere__job::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--wbg-gruen, #009450) 73%,
        var(--wbg-gruen-akzent, #afcc46) 100%
    );
    border-radius: var(--wbg-radius, 10px);
    transform: skewX(-17.5deg);
    z-index: -1;
}

.wbg-karriere__job:hover,
.wbg-karriere__job:focus-visible,
a.wbg-karriere__job:hover,
a.wbg-karriere__job:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.wbg-karriere__job-content,
.wbg-karriere__job > .brxe-block:not(.wbg-karriere__job-title):not(.wbg-karriere__job-desc):not(.wbg-karriere__job-head):not(.wbg-karriere__job-badges):not(.wbg-karriere__job-badge),
.wbg-karriere__job > .brxe-div:not(.wbg-karriere__job-title):not(.wbg-karriere__job-desc):not(.wbg-karriere__job-head):not(.wbg-karriere__job-badges):not(.wbg-karriere__job-badge) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px;
    grid-column: 1;
    grid-row: 1 / span 2;
    min-width: 0;
}

.wbg-karriere__job-head,
.wbg-karriere__job > .wbg-karriere__job-head,
.brxe-block.wbg-karriere__job-head,
.brxe-div.wbg-karriere__job-head {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 0;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    width: 100%;
}

.wbg-karriere__job-head > .wbg-karriere__job-title,
.wbg-karriere__job-head > .brxe-text-basic.wbg-karriere__job-title,
.wbg-karriere__job-head > .brxe-text.wbg-karriere__job-title,
.wbg-karriere__job-head > .brxe-heading.wbg-karriere__job-title {
    margin-right: 0;
}

.wbg-karriere__job-badges,
.wbg-karriere__job-head > .wbg-karriere__job-badges,
.brxe-block.wbg-karriere__job-badges,
.brxe-div.wbg-karriere__job-badges {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px;
    min-width: 0;
    margin-left: 20px;
}

.wbg-karriere__job-head > .wbg-karriere__job-title + .wbg-karriere__job-badges,
.wbg-karriere__job-head > .brxe-text-basic.wbg-karriere__job-title + .wbg-karriere__job-badges,
.wbg-karriere__job-head > .brxe-text.wbg-karriere__job-title + .wbg-karriere__job-badges,
.wbg-karriere__job-head > .brxe-heading.wbg-karriere__job-title + .wbg-karriere__job-badges {
    margin-left: 20px;
}

.wbg-karriere__job-head > .wbg-karriere__job-title + .wbg-karriere__job-badge,
.wbg-karriere__job-head > .brxe-text-basic.wbg-karriere__job-title + .wbg-karriere__job-badge,
.wbg-karriere__job-head > .brxe-text.wbg-karriere__job-title + .brxe-text-basic.wbg-karriere__job-badge,
.wbg-karriere__job-head > .brxe-heading.wbg-karriere__job-title + .wbg-karriere__job-badge {
    margin-left: 20px !important;
}

.wbg-karriere__job-head > .wbg-karriere__job-badge + .wbg-karriere__job-badge,
.wbg-karriere__job-head > .brxe-text-basic.wbg-karriere__job-badge + .brxe-text-basic.wbg-karriere__job-badge,
.wbg-karriere__job-head > .brxe-text.wbg-karriere__job-badge + .brxe-text.wbg-karriere__job-badge {
    margin-left: 6px !important;
}

.wbg-karriere__job-badge,
.wbg-karriere__job-badge.brxe-text-basic,
.wbg-karriere__job-badge.brxe-text,
.wbg-karriere__job-badge .brxe-text-basic,
.wbg-karriere__job-badge .brxe-text,
.brxe-text-basic.wbg-karriere__job-badge,
.brxe-text.wbg-karriere__job-badge,
.brxe-block.wbg-karriere__job-badge,
.brxe-div.wbg-karriere__job-badge {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 4px 14px;
    border-radius: 5px;
    background: transparent !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-xs) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--wbg-text-light, #ffffff) !important;
    white-space: nowrap;
    isolation: isolate;
    z-index: 0;
}

.wbg-karriere__job-badge::before,
.wbg-karriere__job-badge.brxe-text-basic::before,
.wbg-karriere__job-badge.brxe-text::before,
.brxe-text-basic.wbg-karriere__job-badge::before,
.brxe-text.wbg-karriere__job-badge::before,
.brxe-block.wbg-karriere__job-badge::before,
.brxe-div.wbg-karriere__job-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--wbg-gruen-dunkel, #19502f);
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
}

.wbg-karriere__job-badge p,
.brxe-block.wbg-karriere__job-badge .brxe-text-basic,
.brxe-block.wbg-karriere__job-badge .brxe-text,
.brxe-div.wbg-karriere__job-badge .brxe-text-basic,
.brxe-div.wbg-karriere__job-badge .brxe-text {
    margin: 0;
    position: relative;
    z-index: 1;
    color: var(--wbg-text-light, #ffffff) !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-xs) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

.wbg-karriere__job-badge:empty,
.wbg-karriere__job-badge:has(> .brxe-text-basic:empty),
.wbg-karriere__job-badge:has(> .brxe-text:empty) {
    display: none !important;
}

.wbg-karriere__job-head .wbg-karriere__job-title,
.wbg-karriere__job-head > .wbg-karriere__job-title,
.wbg-karriere__job-head > .brxe-text-basic.wbg-karriere__job-title,
.wbg-karriere__job-head > .brxe-text.wbg-karriere__job-title,
.wbg-karriere__job-head > .brxe-heading.wbg-karriere__job-title {
    grid-column: auto;
    grid-row: auto;
    flex: 0 1 auto;
    min-width: 0;
}

.wbg-karriere__job > .wbg-karriere__job-title,
.brxe-text-basic.wbg-karriere__job-title,
.brxe-text.wbg-karriere__job-title,
.brxe-heading.wbg-karriere__job-title {
    grid-column: 1;
    grid-row: 1;
}

.wbg-karriere__job > .wbg-karriere__job-desc,
.brxe-text-basic.wbg-karriere__job-desc,
.brxe-text.wbg-karriere__job-desc {
    grid-column: 1;
    grid-row: 2;
}

.wbg-karriere__job-title,
.wbg-karriere__job-title .brxe-text-basic,
.wbg-karriere__job-title .brxe-text,
.brxe-text-basic.wbg-karriere__job-title,
.brxe-text.wbg-karriere__job-title {
    margin: 0 !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-link) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--wbg-text-light, #ffffff) !important;
}

.wbg-karriere__job-title p {
    margin: 0;
}

.wbg-karriere__job-desc,
.wbg-karriere__job-desc .brxe-text-basic,
.wbg-karriere__job-desc .brxe-text,
.brxe-text-basic.wbg-karriere__job-desc,
.brxe-text.wbg-karriere__job-desc {
    margin: 0 !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-sm) !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: var(--wbg-text-light, #ffffff) !important;
}

.wbg-karriere__job-desc p {
    margin: 0;
}

.wbg-karriere__job::after,
.brxe-text-link.wbg-karriere__job::after,
a.wbg-karriere__job::after {
    content: "";
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    flex: 0 0 14px;
    width: 14px;
    height: 28px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 28' fill='none'%3E%3Cpath d='M2 2L12 14L2 26' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 28' fill='none'%3E%3Cpath d='M2 2L12 14L2 26' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-karriere,
    .wbg-karriere.wbg-karriere,
    section.wbg-karriere,
    .brxe-section:has(.wbg-karriere__layout),
    .brxe-section:has(.wbg-karriere__inner),
    .brxe-section:has(.wbg-karriere__container) {
        padding: 56px 32px !important;
    }

    .wbg-karriere__inner,
    .wbg-karriere__container,
    .wbg-karriere .wbg-karriere__inner,
    .wbg-karriere .wbg-karriere__container {
        max-width: 100% !important;
    }

    .wbg-karriere__header,
    .brxe-block.wbg-karriere__header {
        margin-bottom: 30px !important;
    }

    .wbg-karriere__intro,
    .wbg-karriere__intro.wbg-karriere__intro,
    .wbg-karriere__intro .brxe-text-basic,
    .wbg-karriere__intro .brxe-text,
    .brxe-text-basic.wbg-karriere__intro,
    .brxe-text.wbg-karriere__intro,
    .wbg-karriere__header .wbg-karriere__intro,
    .wbg-karriere__header .brxe-text-basic.wbg-karriere__intro,
    .wbg-karriere__header .brxe-text.wbg-karriere__intro,
    .wbg-karriere__intro p {
        text-align: left !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .wbg-karriere__header .wbg-karriere__intro,
    .wbg-karriere__header .brxe-text-basic.wbg-karriere__intro,
    .wbg-karriere__header .brxe-text.wbg-karriere__intro {
        margin-bottom: 0 !important;
    }

    .wbg-karriere__layout,
    .wbg-karriere__layout.wbg-karriere__layout,
    .brxe-section:has(.wbg-karriere__layout) .wbg-karriere__layout,
    section.wbg-karriere .wbg-karriere__layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 36px !important;
        margin-bottom: 40px !important;
    }

    .wbg-karriere__copy,
    .wbg-karriere__copy.wbg-karriere__copy,
    .wbg-karriere__layout > *:first-child {
        order: 1 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .wbg-karriere__media,
    .wbg-karriere__media.wbg-karriere__media,
    .wbg-karriere__layout > *:nth-child(2):has(.brxe-image),
    .wbg-karriere__layout > *:nth-child(2):has(img),
    .wbg-karriere__layout > *:last-child:not(:first-child) {
        order: 2 !important;
        width: 80% !important;
        max-width: 80% !important;
        min-width: 0 !important;
        margin: 0 auto;
        justify-self: auto;
        aspect-ratio: 534 / 305;
    }

    .wbg-karriere__job,
    .brxe-block.wbg-karriere__job {
        min-height: 88px;
        padding-right: 40px;
    }

    .wbg-karriere__media img,
    .wbg-karriere__media .brxe-image img,
    .wbg-karriere__layout > *:nth-child(2) .brxe-image img {
        transform: skewX(17.5deg) scale(1.02) !important;
    }
}

@media (max-width: 640px) {
    .wbg-karriere,
    .wbg-karriere.wbg-karriere,
    section.wbg-karriere,
    .brxe-section:has(.wbg-karriere__layout),
    .brxe-section:has(.wbg-karriere__inner),
    .brxe-section:has(.wbg-karriere__container) {
        padding: 48px 24px !important;
    }

    .wbg-karriere__inner,
    .wbg-karriere__container,
    .wbg-karriere .wbg-karriere__inner,
    .wbg-karriere .wbg-karriere__container {
        max-width: 100% !important;
    }

    .wbg-karriere__header,
    .brxe-block.wbg-karriere__header {
        margin-bottom: 24px !important;
        padding: 0 !important;
        align-items: flex-start !important;
        text-align: left !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .wbg-karriere__header > * {
        text-align: left !important;
    }

    .wbg-karriere__title,
    .brxe-heading.wbg-karriere__title,
    .wbg-karriere__header .brxe-heading,
    .wbg-karriere__header :is(h1, h2, h3, h4),
    .wbg-karriere__inner > .brxe-heading,
    .wbg-karriere__inner > .brxe-heading.wbg-karriere__title,
    .brxe-section.wbg-karriere .brxe-heading:not(.wbg-karriere__body):not(.wbg-karriere__list-title):not(.wbg-karriere__jobs-title),
    .brxe-section:has(.wbg-karriere__layout) .wbg-karriere__header :is(.brxe-heading, h1, h2, h3, h4) {
        overflow-wrap: break-word;
        hyphens: auto;
        text-align: left !important;
        margin: 0 0 16px !important;
        max-width: none !important;
    }

    .wbg-karriere__intro,
    .wbg-karriere__intro.wbg-karriere__intro,
    .wbg-karriere__intro .brxe-text-basic,
    .wbg-karriere__intro .brxe-text,
    .brxe-text-basic.wbg-karriere__intro,
    .brxe-text.wbg-karriere__intro,
    .wbg-karriere__intro p {
        overflow-wrap: break-word;
        hyphens: auto;
        text-align: left !important;
        margin: 0 0 24px !important;
        max-width: none !important;
    }

    .wbg-karriere__header .wbg-karriere__intro,
    .wbg-karriere__header .brxe-text-basic.wbg-karriere__intro,
    .wbg-karriere__header .brxe-text.wbg-karriere__intro {
        margin-bottom: 0 !important;
    }

    .wbg-karriere__layout,
    .wbg-karriere__layout.wbg-karriere__layout,
    .brxe-section:has(.wbg-karriere__layout) .wbg-karriere__layout,
    section.wbg-karriere .wbg-karriere__layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 32px !important;
        margin-bottom: 32px !important;
    }

    .wbg-karriere__copy,
    .wbg-karriere__copy.wbg-karriere__copy,
    .wbg-karriere__layout > *:first-child {
        order: 1 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .wbg-karriere__media,
    .wbg-karriere__media.wbg-karriere__media,
    .wbg-karriere__layout > *:nth-child(2):has(.brxe-image),
    .wbg-karriere__layout > *:nth-child(2):has(img),
    .wbg-karriere__layout > *:last-child:not(:first-child) {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0;
        justify-self: auto;
        aspect-ratio: 534 / 305;
    }

    .wbg-karriere__jobs-title,
    .brxe-heading.wbg-karriere__jobs-title {
        margin-bottom: 20px !important;
    }

    .wbg-karriere__jobs-list .wbg-karriere__job ~ .wbg-karriere__job,
    .wbg-karriere__jobs .wbg-karriere__job ~ .wbg-karriere__job,
    .brxe-block.wbg-karriere__jobs-list .brxe-block.wbg-karriere__job ~ .brxe-block.wbg-karriere__job {
        margin-top: 20px !important;
    }

    .wbg-karriere__job,
    .brxe-block.wbg-karriere__job {
        min-height: 0;
        padding: 16px 36px 16px 24px;
        align-items: flex-start !important;
        grid-template-rows: auto auto auto;
        row-gap: 8px;
    }

    .wbg-karriere__job::before,
    .brxe-text-link.wbg-karriere__job::before,
    a.wbg-karriere__job::before {
        transform: none;
        border-radius: var(--wbg-radius, 10px);
    }

    .wbg-karriere__job-head,
    .wbg-karriere__job > .wbg-karriere__job-head,
    .brxe-block.wbg-karriere__job-head,
    .brxe-div.wbg-karriere__job-head {
        display: contents !important;
    }

    .wbg-karriere__job-badges,
    .wbg-karriere__job-head > .wbg-karriere__job-badges,
    .wbg-karriere__job > .wbg-karriere__job-badges,
    .brxe-block.wbg-karriere__job-badges,
    .brxe-div.wbg-karriere__job-badges {
        grid-column: 1;
        grid-row: 1;
        margin-left: 0 !important;
        width: 100%;
    }

    .wbg-karriere__job-head > .wbg-karriere__job-title,
    .wbg-karriere__job-head > .brxe-text-basic.wbg-karriere__job-title,
    .wbg-karriere__job-head > .brxe-text.wbg-karriere__job-title,
    .wbg-karriere__job-head > .brxe-heading.wbg-karriere__job-title,
    .wbg-karriere__job > .wbg-karriere__job-title,
    .brxe-text-basic.wbg-karriere__job-title,
    .brxe-text.wbg-karriere__job-title,
    .brxe-heading.wbg-karriere__job-title {
        grid-column: 1;
        grid-row: 2;
        margin-right: 0 !important;
        width: 100%;
    }

    .wbg-karriere__job > .wbg-karriere__job-desc,
    .brxe-text-basic.wbg-karriere__job-desc,
    .brxe-text.wbg-karriere__job-desc {
        grid-column: 1;
        grid-row: 3;
    }

    .wbg-karriere__job-head > .wbg-karriere__job-title + .wbg-karriere__job-badges,
    .wbg-karriere__job-head > .wbg-karriere__job-title + .wbg-karriere__job-badge,
    .wbg-karriere__job-head > .brxe-text-basic.wbg-karriere__job-title + .wbg-karriere__job-badges,
    .wbg-karriere__job-head > .brxe-text-basic.wbg-karriere__job-title + .wbg-karriere__job-badge,
    .wbg-karriere__job-head > .brxe-heading.wbg-karriere__job-title + .wbg-karriere__job-badges,
    .wbg-karriere__job-head > .brxe-heading.wbg-karriere__job-title + .wbg-karriere__job-badge {
        margin-left: 0 !important;
    }

    .wbg-karriere__job-badge::before,
    .wbg-karriere__job-badge.brxe-text-basic::before,
    .wbg-karriere__job-badge.brxe-text::before,
    .brxe-text-basic.wbg-karriere__job-badge::before,
    .brxe-text.wbg-karriere__job-badge::before,
    .brxe-block.wbg-karriere__job-badge::before,
    .brxe-div.wbg-karriere__job-badge::before {
        transform: none;
    }

    .wbg-karriere__job::after,
    .brxe-text-link.wbg-karriere__job::after,
    a.wbg-karriere__job::after {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: center;
        flex: 0 0 12px;
        width: 12px;
        height: 24px;
    }

    .wbg-karriere__media img,
    .wbg-karriere__media .brxe-image img,
    .wbg-karriere__layout > *:nth-child(2) .brxe-image img {
        transform: skewX(17.5deg) scale(1.02) !important;
    }
}


/* ==========================================================================
   SECTION "Gefördertes Wohnen (WBS)" – Wohnen & Mieten (Figma 1131:1929)
   --------------------------------------------------------------------------
   Weißer Hintergrund, zentrierte Überschrift, zweispaltig Copy | Bild.
   Bild: Parallelogramm (skewX -17.5deg). CTA: grüner Gradient-Button.
   Fußnote 12 px unter dem Button.

   Bricks-Struktur:
   Section (.wbg-wbs)
     Block (.wbg-wbs__inner)
       Block (.wbg-wbs__header)
         Heading h3 (.wbg-wbs__title) – wie Käufer:innen (Tag + Klasse am Element)
       Block (.wbg-wbs__layout)
         Block (.wbg-wbs__copy)
           Basic Text (.wbg-wbs__body)
           Text Link (.wbg-wbs__cta) – extern, Stadt Nürnberg
           Basic Text (.wbg-wbs__note)
         Block (.wbg-wbs__media)
           Image
   ========================================================================== */

.wbg-wbs,
.wbg-wbs.wbg-wbs,
section.wbg-wbs,
.brxe-section:has(.wbg-wbs__layout),
.brxe-section:has(.wbg-wbs__inner),
.brxe-section:has(.wbg-wbs__container) {
    padding: clamp(72px, 8vw, 113px) clamp(24px, 14.7vw, 212px) !important;
    background-color: #ffffff !important;
    color: var(--wbg-gruen-dunkel, #19502f);
    overflow-x: clip;
}

.wbg-wbs__inner,
.wbg-wbs__container,
.wbg-wbs .wbg-wbs__inner,
.wbg-wbs .wbg-wbs__container,
.wbg-wbs__inner.wbg-wbs__inner,
.wbg-wbs__container.wbg-wbs__container {
    display: block !important;
    max-width: 1016px;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}

.wbg-wbs__header,
.brxe-block.wbg-wbs__header,
.brxe-div.wbg-wbs__header,
.wbg-wbs__header.brxe-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    max-width: 880px;
    margin: 0 auto 56px !important;
    text-align: center;
}

.wbg-wbs__header > * {
    width: 100%;
    text-align: center !important;
}

/* Headline – 1:1 wie .wbg-buyers__title (h3.brxe-heading.wbg-buyers__title) */
.wbg-wbs__title,
.brxe-heading.wbg-wbs__title,
.brxe-heading.wbg-wbs__header,
.brxe-heading.wbg-wbs_header,
.wbg-wbs__header .brxe-heading,
.wbg-wbs__header :is(h1, h2, h3, h4),
.wbg-wbs__inner > .brxe-heading,
.wbg-wbs__inner > .brxe-heading.wbg-wbs__title,
.wbg-wbs__inner > :is(h1, h2, h3, h4).wbg-wbs__title,
.brxe-section.wbg-wbs .wbg-wbs__inner > .brxe-heading,
.brxe-section.wbg-wbs .brxe-heading:not(.wbg-wbs__body),
section.wbg-wbs .wbg-wbs__inner > .brxe-heading,
.brxe-section:has(.wbg-wbs__layout) .wbg-wbs__header :is(.brxe-heading, h1, h2, h3, h4) {
    max-width: 880px;
    margin: 0 auto 16px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-section-title) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-align: center !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.wbg-wbs__layout,
.wbg-wbs__layout.wbg-wbs__layout,
.brxe-section:has(.wbg-wbs__layout) .wbg-wbs__layout {
    display: grid !important;
    grid-template-columns: minmax(0, 452fr) minmax(0, 534fr) !important;
    align-items: center !important;
    gap: clamp(24px, 3.3vw, 34px) !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.wbg-wbs__copy,
.wbg-wbs__layout > .brxe-block,
.wbg-wbs__layout > .brxe-div {
    min-width: 0 !important;
}

.wbg-wbs__copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0;
    min-width: 0;
    max-width: 80%;
}

.wbg-wbs__body,
.wbg-wbs__body.wbg-wbs__body,
.wbg-wbs__body .brxe-text-basic,
.wbg-wbs__body .brxe-text {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

.wbg-wbs__body p {
    margin: 0 0 1em;
}

.wbg-wbs__body p:last-child {
    margin-bottom: 0;
}

.wbg-wbs__body strong,
.wbg-wbs__body b {
    font-weight: 700;
}

/* CTA – BTN_Secondary (Figma 1131:1824): Gradient-Parallelogramm + Ext.-Icon */
.wbg-wbs__cta,
.wbg-wbs__cta.brxe-text-link,
.wbg-wbs__cta a {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    align-self: flex-start;
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: clamp(32px, 4vw, 40px);
    padding: 14px 32px;
    min-height: 0;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-cta) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: none !important;
    white-space: nowrap;
    z-index: 0;
    isolation: isolate;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.wbg-wbs__cta::before,
.wbg-wbs__cta a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--wbg-gruen, #009450) 73%,
        var(--wbg-gruen-akzent, #afcc46) 100%
    );
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
}

.wbg-wbs__cta:hover,
.wbg-wbs__cta:focus-visible,
.wbg-wbs__cta a:hover,
.wbg-wbs__cta a:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.wbg-wbs__cta:not(:has(svg))::after,
.wbg-wbs__cta a:not(:has(svg))::after {
    content: "";
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.wbg-wbs__cta svg,
.wbg-wbs__cta a svg {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

.wbg-wbs__note,
.wbg-wbs__note.wbg-wbs__note,
.wbg-wbs__note .brxe-text-basic,
.wbg-wbs__note .brxe-text {
    margin: 16px 0 0 !important;
    max-width: 452px;
    font-family: "Lato", sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 300 !important;
    line-height: 1.35 !important;
    letter-spacing: 0;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

.wbg-wbs__note p {
    margin: 0;
}

/* Bild rechts – Parallelogramm (Figma Mask group 1131:1832, 534×305) */
.wbg-wbs__media,
.wbg-wbs__media.wbg-wbs__media,
.wbg-wbs__layout > *:nth-child(2):has(.brxe-image),
.wbg-wbs__layout > *:nth-child(2):has(img) {
    position: relative !important;
    width: 80% !important;
    max-width: 80% !important;
    min-width: 80% !important;
    aspect-ratio: 534 / 305;
    overflow: hidden !important;
    border-radius: var(--wbg-radius, 10px);
    transform: skewX(-17.5deg);
    transform-origin: center center;
    isolation: isolate;
}

.wbg-wbs__media img,
.wbg-wbs__media img.brxe-image,
.wbg-wbs__media .brxe-image img,
.wbg-wbs__media picture,
.wbg-wbs__media picture img,
.wbg-wbs__layout > *:nth-child(2) img.brxe-image,
.wbg-wbs__layout > *:nth-child(2) .brxe-image img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 130% !important;
    height: 100% !important;
    max-width: none !important;
    left: -15% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: skewX(17.5deg) scale(1.05) !important;
    transform-origin: center center !important;
}

.wbg-wbs__media .brxe-image:not(img),
.wbg-wbs__media a,
.wbg-wbs__media figure,
.wbg-wbs__layout > *:nth-child(2) .brxe-image:not(img),
.wbg-wbs__layout > *:nth-child(2) figure {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 80% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-wbs,
    .wbg-wbs.wbg-wbs,
    section.wbg-wbs,
    .brxe-section:has(.wbg-wbs__layout),
    .brxe-section:has(.wbg-wbs__inner),
    .brxe-section:has(.wbg-wbs__container) {
        padding: 56px 32px !important;
    }

    .wbg-wbs__inner,
    .wbg-wbs__container,
    .wbg-wbs .wbg-wbs__inner,
    .wbg-wbs .wbg-wbs__container {
        max-width: 100% !important;
    }

    .wbg-wbs__header,
    .brxe-block.wbg-wbs__header {
        margin-bottom: 32px !important;
    }

    .wbg-wbs__layout,
    .wbg-wbs__layout.wbg-wbs__layout,
    .brxe-section:has(.wbg-wbs__layout) .wbg-wbs__layout,
    section.wbg-wbs .wbg-wbs__layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 36px !important;
    }

    .wbg-wbs__copy,
    .wbg-wbs__copy.wbg-wbs__copy,
    .wbg-wbs__layout > *:first-child {
        order: 1 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .wbg-wbs__media,
    .wbg-wbs__media.wbg-wbs__media,
    .wbg-wbs__layout > *:nth-child(2):has(.brxe-image),
    .wbg-wbs__layout > *:nth-child(2):has(img),
    .wbg-wbs__layout > *:last-child:not(:first-child) {
        order: 2 !important;
        width: 80% !important;
        max-width: 80% !important;
        min-width: 0 !important;
        margin: 0 auto;
        aspect-ratio: 534 / 305;
    }

    .wbg-wbs__note {
        max-width: none !important;
    }

    .wbg-wbs__cta,
    .wbg-wbs__cta a {
        max-width: 100%;
        white-space: normal;
    }

    .wbg-wbs__media img,
    .wbg-wbs__media .brxe-image img,
    .wbg-wbs__layout > *:nth-child(2) .brxe-image img {
        transform: skewX(17.5deg) scale(1.02) !important;
    }
}

@media (max-width: 640px) {
    .wbg-wbs,
    .wbg-wbs.wbg-wbs,
    section.wbg-wbs,
    .brxe-section:has(.wbg-wbs__layout),
    .brxe-section:has(.wbg-wbs__inner),
    .brxe-section:has(.wbg-wbs__container) {
        padding: 48px 24px !important;
    }

    .wbg-wbs__inner,
    .wbg-wbs__container,
    .wbg-wbs .wbg-wbs__inner,
    .wbg-wbs .wbg-wbs__container {
        max-width: 100% !important;
    }

    .wbg-wbs__header,
    .brxe-block.wbg-wbs__header {
        margin-bottom: 28px !important;
        padding: 0 !important;
        align-items: flex-start !important;
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
    }

    .wbg-wbs__header > * {
        text-align: left !important;
    }

    .wbg-wbs__title,
    .brxe-heading.wbg-wbs__title,
    .brxe-heading.wbg-wbs__header,
    .brxe-heading.wbg-wbs_header,
    .wbg-wbs__header .brxe-heading,
    .wbg-wbs__header :is(h1, h2, h3, h4),
    .wbg-wbs__inner > .brxe-heading,
    .brxe-section.wbg-wbs .brxe-heading:not(.wbg-wbs__body),
    .brxe-section:has(.wbg-wbs__layout) .wbg-wbs__header :is(.brxe-heading, h1, h2, h3, h4) {
        overflow-wrap: break-word;
        hyphens: auto;
        text-align: left !important;
        margin: 0 0 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
    }

    /* Copy oben, Bild darunter */
    .wbg-wbs__layout,
    .wbg-wbs__layout.wbg-wbs__layout,
    .brxe-section:has(.wbg-wbs__layout) .wbg-wbs__layout,
    section.wbg-wbs .wbg-wbs__layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 32px !important;
    }

    .wbg-wbs__copy,
    .wbg-wbs__copy.wbg-wbs__copy,
    .wbg-wbs__layout > *:has(.wbg-wbs__body),
    .wbg-wbs__layout > *:first-child {
        order: 1 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .wbg-wbs__media,
    .wbg-wbs__media.wbg-wbs__media,
    .wbg-wbs__layout > *:nth-child(2):has(.brxe-image),
    .wbg-wbs__layout > *:nth-child(2):has(img),
    .wbg-wbs__layout > *:has(.brxe-image):not(:has(.wbg-wbs__body)),
    .wbg-wbs__layout > *:last-child:not(:first-child) {
        order: 2 !important;
        width: 80% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto;
        aspect-ratio: 16 / 10;
    }

    .wbg-wbs__cta,
    .wbg-wbs__cta a {
        align-self: stretch;
        justify-content: center;
        white-space: normal;
        text-align: center;
        max-width: 100%;
    }

    .wbg-wbs__note {
        max-width: none !important;
    }
}


/* ==========================================================================
   SECTION "Kaufberatung" – Kaufen & Eigentum
   --------------------------------------------------------------------------
   Wie WBS (Copy | Bild-Parallelogramm), aber:
   - Dunkelgrüner Section-Hintergrund, alle Texte weiß
   - Zusätzlicher zentrierter Intro-Text unter der Headline
   - Bild mit object-fit: cover (100 % Fill im Parallelogramm)
   - CTA ohne externes Link-Icon

   Bricks-Struktur:
   Section (.wbg-kaufberatung)
     Block (.wbg-kaufberatung__inner)
       Block (.wbg-kaufberatung__header)
         Heading h3 (.wbg-kaufberatung__title)
         Basic Text (.wbg-kaufberatung__intro)   ← zentriert unter Titel
       Block (.wbg-kaufberatung__layout)
       Block (.wbg-kaufberatung__copy)
         Rich Text / Text (.wbg-kaufberatung__body)
         Text Link (.wbg-kaufberatung__cta)
       Block (.wbg-kaufberatung__media)
           Image
   ========================================================================== */

.wbg-kaufberatung,
.wbg-kaufberatung.wbg-kaufberatung,
section.wbg-kaufberatung,
.brxe-section:has(.wbg-kaufberatung__layout),
.brxe-section:has(.wbg-kaufberatung__inner),
.brxe-section:has(.wbg-kaufberatung__container) {
    padding: clamp(72px, 8vw, 113px) clamp(24px, 14.7vw, 212px) !important;
    background-color: var(--wbg-gruen-dunkel, #19502f) !important;
    color: var(--wbg-text-light, #ffffff);
    overflow-x: clip;
}

.wbg-kaufberatung__inner,
.wbg-kaufberatung__container,
.wbg-kaufberatung .wbg-kaufberatung__inner,
.wbg-kaufberatung .wbg-kaufberatung__container,
.wbg-kaufberatung__inner.wbg-kaufberatung__inner,
.wbg-kaufberatung__container.wbg-kaufberatung__container {
    display: block !important;
    max-width: 1016px;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}

.wbg-kaufberatung__header,
.brxe-block.wbg-kaufberatung__header,
.brxe-div.wbg-kaufberatung__header,
.wbg-kaufberatung__header.brxe-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    max-width: 880px;
    margin: 0 auto 56px !important;
    text-align: center;
}

.wbg-kaufberatung__header > * {
    width: 100%;
    text-align: center !important;
}

.wbg-kaufberatung__title,
.brxe-heading.wbg-kaufberatung__title,
.wbg-kaufberatung__header .brxe-heading,
.wbg-kaufberatung__header :is(h1, h2, h3, h4),
.wbg-kaufberatung__inner > .brxe-heading,
.wbg-kaufberatung__inner > .brxe-heading.wbg-kaufberatung__title,
.brxe-section.wbg-kaufberatung .brxe-heading:not(.wbg-kaufberatung__body),
.brxe-section:has(.wbg-kaufberatung__layout) .wbg-kaufberatung__header :is(.brxe-heading, h1, h2, h3, h4) {
    max-width: 880px;
    margin: 0 auto 16px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-section-title) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: var(--wbg-text-light, #ffffff) !important;
    text-align: center !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.wbg-kaufberatung__intro,
.wbg-kaufberatung__intro.wbg-kaufberatung__intro,
.wbg-kaufberatung__intro .brxe-text-basic,
.wbg-kaufberatung__intro .brxe-text {
    max-width: 854px;
    margin: 0 auto !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em;
    color: var(--wbg-text-light, #ffffff) !important;
    text-align: center !important;
}

.wbg-kaufberatung__intro p {
    margin: 0;
}

.wbg-kaufberatung__layout,
.wbg-kaufberatung__layout.wbg-kaufberatung__layout,
.brxe-section:has(.wbg-kaufberatung__layout) .wbg-kaufberatung__layout {
    display: grid !important;
    grid-template-columns: minmax(0, 452fr) minmax(0, 534fr) !important;
    align-items: center !important;
    gap: clamp(24px, 3.3vw, 34px) !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.wbg-kaufberatung__copy,
.wbg-kaufberatung__layout > .brxe-block,
.wbg-kaufberatung__layout > .brxe-div {
    min-width: 0 !important;
}

.wbg-kaufberatung__copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0;
    min-width: 0;
    max-width: 80%;
}

.wbg-kaufberatung__body,
.wbg-kaufberatung__body.wbg-kaufberatung__body,
.wbg-kaufberatung__body .brxe-text-basic,
.wbg-kaufberatung__body .brxe-text {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0;
    color: var(--wbg-text-light, #ffffff) !important;
}

.wbg-kaufberatung__body p {
    margin: 0 0 1em;
    color: inherit !important;
}

.wbg-kaufberatung__body p:last-child {
    margin-bottom: 0;
}

.wbg-kaufberatung__body strong,
.wbg-kaufberatung__body b {
    font-weight: 700;
}

.wbg-kaufberatung__body ul,
.wbg-kaufberatung__body ol {
    margin: 0 0 1em;
    padding-left: 1.25em;
    color: var(--wbg-text-light, #ffffff) !important;
}

.wbg-kaufberatung__body li {
    margin: 0 0 0.35em;
    color: inherit !important;
}

.wbg-kaufberatung__body li::marker {
    color: var(--wbg-text-light, #ffffff);
}

/* CTA – Gradient-Parallelogramm, ohne externes Link-Icon */
.wbg-kaufberatung__cta,
.wbg-kaufberatung__cta.brxe-text-link,
.wbg-kaufberatung__cta a {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    align-self: flex-start;
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: clamp(32px, 4vw, 40px);
    padding: 14px 32px;
    min-height: 0;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-cta) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: none !important;
    white-space: nowrap;
    z-index: 0;
    isolation: isolate;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.wbg-kaufberatung__cta::before,
.wbg-kaufberatung__cta a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--wbg-gruen, #009450) 73%,
        var(--wbg-gruen-akzent, #afcc46) 100%
    );
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
}

.wbg-kaufberatung__cta::after,
.wbg-kaufberatung__cta a::after,
.wbg-kaufberatung__cta svg,
.wbg-kaufberatung__cta a svg {
    display: none !important;
    content: none !important;
}

.wbg-kaufberatung__cta:hover,
.wbg-kaufberatung__cta:focus-visible,
.wbg-kaufberatung__cta a:hover,
.wbg-kaufberatung__cta a:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.wbg-kaufberatung__note,
.wbg-kaufberatung__note.wbg-kaufberatung__note,
.wbg-kaufberatung__note .brxe-text-basic,
.wbg-kaufberatung__note .brxe-text {
    margin: 16px 0 0 !important;
    max-width: 452px;
    font-family: "Lato", sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 300 !important;
    line-height: 1.35 !important;
    letter-spacing: 0;
    color: var(--wbg-text-light, #ffffff) !important;
}

.wbg-kaufberatung__note p {
    margin: 0;
    color: inherit !important;
}

/* Bild rechts – Parallelogramm wie WBS (80 % Breite, object-fit: cover) */
.wbg-kaufberatung__media,
.wbg-kaufberatung__media.wbg-kaufberatung__media,
.wbg-kaufberatung__layout > *:nth-child(2):has(.brxe-image),
.wbg-kaufberatung__layout > *:nth-child(2):has(img) {
    position: relative !important;
    width: 80% !important;
    max-width: 80% !important;
    min-width: 80% !important;
    aspect-ratio: 534 / 305;
    overflow: hidden !important;
    border-radius: var(--wbg-radius, 10px);
    transform: skewX(-17.5deg);
    transform-origin: center center;
    isolation: isolate;
}

.wbg-kaufberatung__media img,
.wbg-kaufberatung__media img.brxe-image,
.wbg-kaufberatung__media .brxe-image img,
.wbg-kaufberatung__media picture,
.wbg-kaufberatung__media picture img,
.wbg-kaufberatung__layout > *:nth-child(2) img.brxe-image,
.wbg-kaufberatung__layout > *:nth-child(2) .brxe-image img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 130% !important;
    height: 100% !important;
    max-width: none !important;
    left: -15% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: skewX(17.5deg) scale(1.05) !important;
    transform-origin: center center !important;
}

.wbg-kaufberatung__media .brxe-image:not(img),
.wbg-kaufberatung__media a,
.wbg-kaufberatung__media figure,
.wbg-kaufberatung__layout > *:nth-child(2) .brxe-image:not(img),
.wbg-kaufberatung__layout > *:nth-child(2) figure {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-kaufberatung,
    .wbg-kaufberatung.wbg-kaufberatung,
    section.wbg-kaufberatung,
    .brxe-section:has(.wbg-kaufberatung__layout),
    .brxe-section:has(.wbg-kaufberatung__inner),
    .brxe-section:has(.wbg-kaufberatung__container) {
        padding: 56px 32px !important;
    }

    .wbg-kaufberatung__inner,
    .wbg-kaufberatung__container,
    .wbg-kaufberatung .wbg-kaufberatung__inner,
    .wbg-kaufberatung .wbg-kaufberatung__container {
        max-width: 100% !important;
    }

    .wbg-kaufberatung__header,
    .brxe-block.wbg-kaufberatung__header {
        margin-bottom: 32px !important;
        align-items: center !important;
        text-align: left !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .wbg-kaufberatung__header > *:not(.wbg-kaufberatung__title) {
        align-self: stretch !important;
        width: 100% !important;
        text-align: left !important;
    }

    .wbg-kaufberatung__title,
    .brxe-heading.wbg-kaufberatung__title,
    .wbg-kaufberatung__header .brxe-heading,
    .wbg-kaufberatung__header :is(h1, h2, h3, h4),
    .wbg-kaufberatung__inner > .brxe-heading,
    .wbg-kaufberatung__inner > .brxe-heading.wbg-kaufberatung__title,
    .brxe-section.wbg-kaufberatung .brxe-heading.wbg-kaufberatung__title,
    .brxe-section:has(.wbg-kaufberatung__layout) .wbg-kaufberatung__header :is(.brxe-heading, h1, h2, h3, h4) {
        text-align: center !important;
        margin: 0 auto 16px !important;
        max-width: 880px !important;
        width: 100% !important;
    }

    .wbg-kaufberatung__intro,
    .wbg-kaufberatung__intro.wbg-kaufberatung__intro,
    .brxe-text-basic.wbg-kaufberatung__intro,
    .brxe-text.wbg-kaufberatung__intro,
    .wbg-kaufberatung__header .wbg-kaufberatung__intro,
    .wbg-kaufberatung__header .brxe-text-basic,
    .wbg-kaufberatung__header .brxe-text,
    .brxe-section.wbg-kaufberatung .wbg-kaufberatung__intro,
    .brxe-section.wbg-kaufberatung .wbg-kaufberatung__header .brxe-text-basic,
    .brxe-section.wbg-kaufberatung .wbg-kaufberatung__header .brxe-text,
    .wbg-kaufberatung__intro .brxe-text-basic,
    .wbg-kaufberatung__intro .brxe-text,
    .wbg-kaufberatung__intro p {
        text-align: left !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .wbg-kaufberatung__layout,
    .wbg-kaufberatung__layout.wbg-kaufberatung__layout,
    .brxe-section:has(.wbg-kaufberatung__layout) .wbg-kaufberatung__layout,
    section.wbg-kaufberatung .wbg-kaufberatung__layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 36px !important;
    }

    .wbg-kaufberatung__copy,
    .wbg-kaufberatung__copy.wbg-kaufberatung__copy,
    .wbg-kaufberatung__layout > *:first-child {
        order: 1 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .wbg-kaufberatung__media,
    .wbg-kaufberatung__media.wbg-kaufberatung__media,
    .wbg-kaufberatung__layout > *:nth-child(2):has(.brxe-image),
    .wbg-kaufberatung__layout > *:nth-child(2):has(img),
    .wbg-kaufberatung__layout > *:last-child:not(:first-child) {
        order: 2 !important;
        width: 80% !important;
        max-width: 80% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto;
        aspect-ratio: 534 / 305 !important;
    }

    .wbg-kaufberatung__note {
        max-width: none !important;
    }

    .wbg-kaufberatung__cta,
    .wbg-kaufberatung__cta a {
        max-width: 100%;
        white-space: normal;
    }

    .wbg-kaufberatung__media img,
    .wbg-kaufberatung__media .brxe-image img,
    .wbg-kaufberatung__layout > *:nth-child(2) .brxe-image img {
        transform: skewX(17.5deg) scale(1.02) !important;
    }
}

@media (max-width: 640px) {
    .wbg-kaufberatung,
    .wbg-kaufberatung.wbg-kaufberatung,
    section.wbg-kaufberatung,
    .brxe-section:has(.wbg-kaufberatung__layout),
    .brxe-section:has(.wbg-kaufberatung__inner),
    .brxe-section:has(.wbg-kaufberatung__container) {
        padding: 48px 24px !important;
    }

    .wbg-kaufberatung__inner,
    .wbg-kaufberatung__container,
    .wbg-kaufberatung .wbg-kaufberatung__inner,
    .wbg-kaufberatung .wbg-kaufberatung__container {
        max-width: 100% !important;
    }

    .wbg-kaufberatung__header,
    .brxe-block.wbg-kaufberatung__header {
        margin-bottom: 28px !important;
        padding: 0 !important;
        align-items: flex-start !important;
        text-align: left !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .wbg-kaufberatung__header > * {
        text-align: left !important;
    }

    .wbg-kaufberatung__title,
    .brxe-heading.wbg-kaufberatung__title,
    .wbg-kaufberatung__header .brxe-heading,
    .wbg-kaufberatung__header :is(h1, h2, h3, h4),
    .wbg-kaufberatung__inner > .brxe-heading,
    .wbg-kaufberatung__inner > .brxe-heading.wbg-kaufberatung__title,
    .brxe-section.wbg-kaufberatung .brxe-heading:not(.wbg-kaufberatung__body),
    .brxe-section:has(.wbg-kaufberatung__layout) .wbg-kaufberatung__header :is(.brxe-heading, h1, h2, h3, h4) {
        overflow-wrap: break-word;
        hyphens: auto;
        text-align: left !important;
        margin: 0 0 16px !important;
        max-width: none !important;
    }

    .wbg-kaufberatung__intro,
    .wbg-kaufberatung__intro.wbg-kaufberatung__intro,
    .brxe-text-basic.wbg-kaufberatung__intro,
    .brxe-text.wbg-kaufberatung__intro,
    .wbg-kaufberatung__header .wbg-kaufberatung__intro,
    .wbg-kaufberatung__header .brxe-text-basic,
    .wbg-kaufberatung__header .brxe-text,
    .brxe-section.wbg-kaufberatung .wbg-kaufberatung__intro,
    .brxe-section.wbg-kaufberatung .wbg-kaufberatung__header .brxe-text-basic,
    .brxe-section.wbg-kaufberatung .wbg-kaufberatung__header .brxe-text,
    .wbg-kaufberatung__intro .brxe-text-basic,
    .wbg-kaufberatung__intro .brxe-text,
    .wbg-kaufberatung__intro .brxe-text-basic p,
    .wbg-kaufberatung__intro .brxe-text p,
    .wbg-kaufberatung__intro p {
        overflow-wrap: break-word;
        hyphens: auto;
        text-align: left !important;
        margin: 0 !important;
        max-width: none !important;
    }

    .wbg-kaufberatung__layout,
    .wbg-kaufberatung__layout.wbg-kaufberatung__layout,
    .brxe-section:has(.wbg-kaufberatung__layout) .wbg-kaufberatung__layout,
    section.wbg-kaufberatung .wbg-kaufberatung__layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 32px !important;
    }

    .wbg-kaufberatung__copy,
    .wbg-kaufberatung__copy.wbg-kaufberatung__copy,
    .wbg-kaufberatung__layout > *:has(.wbg-kaufberatung__body),
    .wbg-kaufberatung__layout > *:first-child {
        order: 1 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .wbg-kaufberatung__media,
    .wbg-kaufberatung__media.wbg-kaufberatung__media,
    .brxe-block.wbg-kaufberatung__media,
    .brxe-div.wbg-kaufberatung__media,
    .brxe-section.wbg-kaufberatung .wbg-kaufberatung__media,
    .wbg-kaufberatung__layout > *:nth-child(2):has(.brxe-image),
    .wbg-kaufberatung__layout > *:nth-child(2):has(img),
    .wbg-kaufberatung__layout > *:has(.brxe-image):not(:has(.wbg-kaufberatung__body)),
    .wbg-kaufberatung__layout > *:last-child:not(:first-child) {
        order: 2 !important;
        width: 80% !important;
        max-width: 80% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 10 !important;
        margin: 0 auto;
    }

    .wbg-kaufberatung__cta,
    .wbg-kaufberatung__cta a {
        align-self: stretch;
        justify-content: center;
        white-space: normal;
        text-align: center;
        max-width: 100%;
    }

    .wbg-kaufberatung__note {
        max-width: none !important;
    }
}


/* ==========================================================================
   SECTION "Förderhäuser" – Kaufen & Eigentum
   --------------------------------------------------------------------------
   Wie Kaufberatung (Header + 2-Spalten-Layout), aber:
   - Weißer Section-Hintergrund, Texte dunkelgrün
   - Rechts: Informationsfeld (dunkelgrün, Icon + Text) statt Bild
   - CTA: Gradient-Button, Pfeil optional im Bricks-Text (kein CSS-/Link-Icon)

   Bricks-Struktur:
   Section (.wbg-foerderhaeuser)
     Block (.wbg-foerderhaeuser__inner)
       Block (.wbg-foerderhaeuser__header)
         Heading h3 (.wbg-foerderhaeuser__title)
         Basic Text (.wbg-foerderhaeuser__intro)
       Block (.wbg-foerderhaeuser__layout)
         Block (.wbg-foerderhaeuser__copy)
           Text / Rich Text (.wbg-foerderhaeuser__body)
           Text Link (.wbg-foerderhaeuser__cta)
         Block (.wbg-foerderhaeuser__info)
           Icon / SVG (.wbg-foerderhaeuser__info-icon)  optional
           Basic Text (.wbg-foerderhaeuser__info-text)
   ========================================================================== */

.wbg-foerderhaeuser,
.wbg-foerderhaeuser.wbg-foerderhaeuser,
section.wbg-foerderhaeuser,
.brxe-section:has(.wbg-foerderhaeuser__layout),
.brxe-section:has(.wbg-foerderhaeuser__inner),
.brxe-section:has(.wbg-foerderhaeuser__container) {
    padding: clamp(72px, 8vw, 113px) clamp(24px, 14.7vw, 212px) !important;
    background-color: #ffffff !important;
    color: var(--wbg-gruen-dunkel, #19502f);
    overflow-x: clip;
}

.wbg-foerderhaeuser__inner,
.wbg-foerderhaeuser__container,
.wbg-foerderhaeuser .wbg-foerderhaeuser__inner,
.wbg-foerderhaeuser .wbg-foerderhaeuser__container,
.wbg-foerderhaeuser__inner.wbg-foerderhaeuser__inner,
.wbg-foerderhaeuser__container.wbg-foerderhaeuser__container {
    display: block !important;
    max-width: 1016px;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}

.wbg-foerderhaeuser__header,
.brxe-block.wbg-foerderhaeuser__header,
.brxe-div.wbg-foerderhaeuser__header,
.wbg-foerderhaeuser__header.brxe-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    max-width: 880px;
    margin: 0 auto 56px !important;
    text-align: center;
}

.wbg-foerderhaeuser__header > * {
    width: 100%;
    text-align: center !important;
}

.wbg-foerderhaeuser__title,
.brxe-heading.wbg-foerderhaeuser__title,
.wbg-foerderhaeuser__header .brxe-heading,
.wbg-foerderhaeuser__header :is(h1, h2, h3, h4),
.wbg-foerderhaeuser__inner > .brxe-heading,
.wbg-foerderhaeuser__inner > .brxe-heading.wbg-foerderhaeuser__title,
.brxe-section.wbg-foerderhaeuser .brxe-heading:not(.wbg-foerderhaeuser__body):not(.wbg-foerderhaeuser__info-text),
.brxe-section:has(.wbg-foerderhaeuser__layout) .wbg-foerderhaeuser__header :is(.brxe-heading, h1, h2, h3, h4) {
    max-width: 880px;
    margin: 0 auto 16px !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-section-title) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-align: center !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.wbg-foerderhaeuser__intro,
.wbg-foerderhaeuser__intro.wbg-foerderhaeuser__intro,
.wbg-foerderhaeuser__intro .brxe-text-basic,
.wbg-foerderhaeuser__intro .brxe-text {
    max-width: 854px;
    margin: 0 auto !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-align: center !important;
}

.wbg-foerderhaeuser__intro p {
    margin: 0;
}

.wbg-foerderhaeuser__layout,
.wbg-foerderhaeuser__layout.wbg-foerderhaeuser__layout,
.brxe-section:has(.wbg-foerderhaeuser__layout) .wbg-foerderhaeuser__layout {
    display: grid !important;
    grid-template-columns: minmax(0, 452fr) minmax(0, 534fr) !important;
    align-items: center !important;
    gap: clamp(24px, 3.3vw, 34px) !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.wbg-foerderhaeuser__copy,
.wbg-foerderhaeuser__layout > .brxe-block,
.wbg-foerderhaeuser__layout > .brxe-div {
    min-width: 0 !important;
}

.wbg-foerderhaeuser__copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0;
    min-width: 0;
    max-width: 80%;
}

.wbg-foerderhaeuser__body,
.wbg-foerderhaeuser__body.wbg-foerderhaeuser__body,
.wbg-foerderhaeuser__body .brxe-text-basic,
.wbg-foerderhaeuser__body .brxe-text {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

.wbg-foerderhaeuser__body p {
    margin: 0 0 1em;
    color: inherit !important;
}

.wbg-foerderhaeuser__body p:last-child {
    margin-bottom: 0;
}

.wbg-foerderhaeuser__body strong,
.wbg-foerderhaeuser__body b {
    font-weight: 700;
}

/* CTA – Gradient-Parallelogramm, Pfeil nur via Button-Text (kein CSS-/Link-Icon) */
.wbg-foerderhaeuser__cta,
.wbg-foerderhaeuser__cta.brxe-text-link,
.wbg-foerderhaeuser__cta a {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    align-self: flex-start;
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: clamp(32px, 4vw, 40px);
    padding: 14px 32px;
    min-height: 0;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-cta) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: none !important;
    white-space: nowrap;
    z-index: 0;
    isolation: isolate;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.wbg-foerderhaeuser__cta::before,
.wbg-foerderhaeuser__cta a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--wbg-gruen, #009450) 73%,
        var(--wbg-gruen-akzent, #afcc46) 100%
    );
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
}

.wbg-foerderhaeuser__cta::after,
.wbg-foerderhaeuser__cta a::after,
.wbg-foerderhaeuser__cta svg,
.wbg-foerderhaeuser__cta a svg {
    display: none !important;
    content: none !important;
}

.wbg-foerderhaeuser__cta:hover,
.wbg-foerderhaeuser__cta:focus-visible,
.wbg-foerderhaeuser__cta a:hover,
.wbg-foerderhaeuser__cta a:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* Informationsfeld rechts – Rechteck, 5 px Radius, 80 % Breite */
.wbg-foerderhaeuser__info,
.wbg-foerderhaeuser__info.wbg-foerderhaeuser__info,
.wbg-foerderhaeuser__layout > *:nth-child(2):has(.wbg-foerderhaeuser__info-text),
.wbg-foerderhaeuser__layout > *:last-child:not(:first-child):has(.wbg-foerderhaeuser__info-text) {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px;
    width: 80% !important;
    max-width: 80% !important;
    min-width: 80% !important;
    box-sizing: border-box;
    padding: clamp(24px, 3vw, 32px) clamp(22px, 2.8vw, 28px) !important;
    background-color: var(--wbg-gruen-dunkel, #19502f) !important;
    color: var(--wbg-text-light, #ffffff) !important;
    border-radius: 5px;
    overflow: hidden !important;
}

.wbg-foerderhaeuser__info-icon,
.wbg-foerderhaeuser__info .brxe-icon,
.wbg-foerderhaeuser__info .brxe-svg,
.wbg-foerderhaeuser__info img.wbg-foerderhaeuser__info-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    color: var(--wbg-text-light, #ffffff) !important;
    fill: currentColor !important;
}

.wbg-foerderhaeuser__info:not(:has(.wbg-foerderhaeuser__info-icon))::before {
    content: "i";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-family: "Lato", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
}

.wbg-foerderhaeuser__info-text,
.wbg-foerderhaeuser__info-text.wbg-foerderhaeuser__info-text,
.wbg-foerderhaeuser__info-text .brxe-text-basic,
.wbg-foerderhaeuser__info-text .brxe-text,
.wbg-foerderhaeuser__info-text p {
    margin: 0 !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-info-tile) !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: 0;
    color: var(--wbg-text-light, #ffffff) !important;
}

@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-foerderhaeuser,
    .wbg-foerderhaeuser.wbg-foerderhaeuser,
    section.wbg-foerderhaeuser,
    .brxe-section:has(.wbg-foerderhaeuser__layout),
    .brxe-section:has(.wbg-foerderhaeuser__inner),
    .brxe-section:has(.wbg-foerderhaeuser__container) {
        padding: 56px 32px !important;
    }

    .wbg-foerderhaeuser__inner,
    .wbg-foerderhaeuser__container,
    .wbg-foerderhaeuser .wbg-foerderhaeuser__inner,
    .wbg-foerderhaeuser .wbg-foerderhaeuser__container {
        max-width: 100% !important;
    }

    .wbg-foerderhaeuser__header,
    .brxe-block.wbg-foerderhaeuser__header {
        margin-bottom: 32px !important;
        align-items: flex-start !important;
        text-align: left !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .wbg-foerderhaeuser__header > * {
        text-align: left !important;
    }

    .wbg-foerderhaeuser__title,
    .brxe-heading.wbg-foerderhaeuser__title,
    .wbg-foerderhaeuser__header .brxe-heading,
    .wbg-foerderhaeuser__header :is(h1, h2, h3, h4),
    .wbg-foerderhaeuser__inner > .brxe-heading,
    .wbg-foerderhaeuser__inner > .brxe-heading.wbg-foerderhaeuser__title,
    .brxe-section.wbg-foerderhaeuser .brxe-heading:not(.wbg-foerderhaeuser__body):not(.wbg-foerderhaeuser__info-text),
    .brxe-section:has(.wbg-foerderhaeuser__layout) .wbg-foerderhaeuser__header :is(.brxe-heading, h1, h2, h3, h4) {
        text-align: left !important;
        margin: 0 0 16px !important;
        max-width: none !important;
    }

    .wbg-foerderhaeuser__intro,
    .wbg-foerderhaeuser__intro.wbg-foerderhaeuser__intro,
    .brxe-text-basic.wbg-foerderhaeuser__intro,
    .brxe-text.wbg-foerderhaeuser__intro,
    .wbg-foerderhaeuser__header .wbg-foerderhaeuser__intro,
    .wbg-foerderhaeuser__header .brxe-text-basic,
    .wbg-foerderhaeuser__header .brxe-text,
    .brxe-section.wbg-foerderhaeuser .wbg-foerderhaeuser__intro,
    .brxe-section.wbg-foerderhaeuser .wbg-foerderhaeuser__header .brxe-text-basic,
    .brxe-section.wbg-foerderhaeuser .wbg-foerderhaeuser__header .brxe-text,
    .wbg-foerderhaeuser__intro .brxe-text-basic,
    .wbg-foerderhaeuser__intro .brxe-text,
    .wbg-foerderhaeuser__intro p {
        text-align: left !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .wbg-foerderhaeuser__layout,
    .wbg-foerderhaeuser__layout.wbg-foerderhaeuser__layout,
    .brxe-section:has(.wbg-foerderhaeuser__layout) .wbg-foerderhaeuser__layout,
    section.wbg-foerderhaeuser .wbg-foerderhaeuser__layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 36px !important;
    }

    .wbg-foerderhaeuser__copy,
    .wbg-foerderhaeuser__copy.wbg-foerderhaeuser__copy,
    .wbg-foerderhaeuser__layout > *:first-child {
        order: 1 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .wbg-foerderhaeuser__info,
    .wbg-foerderhaeuser__info.wbg-foerderhaeuser__info,
    .wbg-foerderhaeuser__layout > *:nth-child(2):has(.wbg-foerderhaeuser__info-text),
    .wbg-foerderhaeuser__layout > *:last-child:not(:first-child) {
        order: 2 !important;
        width: 80% !important;
        max-width: 80% !important;
        min-width: 0 !important;
        margin: 0 auto;
        gap: 14px;
        padding: 20px 20px !important;
    }

    .wbg-foerderhaeuser__info-icon,
    .wbg-foerderhaeuser__info .brxe-icon,
    .wbg-foerderhaeuser__info .brxe-svg,
    .wbg-foerderhaeuser__info img.wbg-foerderhaeuser__info-icon {
        width: 22px !important;
        height: 22px !important;
    }

    .wbg-foerderhaeuser__info:not(:has(.wbg-foerderhaeuser__info-icon))::before {
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        font-size: 0.75rem;
    }

    .wbg-foerderhaeuser__info-text,
    .wbg-foerderhaeuser__info-text .brxe-text-basic,
    .wbg-foerderhaeuser__info-text .brxe-text,
    .wbg-foerderhaeuser__info-text p {
        line-height: 1.4 !important;
    }

    .wbg-foerderhaeuser__cta,
    .wbg-foerderhaeuser__cta a {
        max-width: 100%;
        white-space: normal;
    }
}

@media (max-width: 640px) {
    .wbg-foerderhaeuser,
    .wbg-foerderhaeuser.wbg-foerderhaeuser,
    section.wbg-foerderhaeuser,
    .brxe-section:has(.wbg-foerderhaeuser__layout),
    .brxe-section:has(.wbg-foerderhaeuser__inner),
    .brxe-section:has(.wbg-foerderhaeuser__container) {
        padding: 48px 24px !important;
    }

    .wbg-foerderhaeuser__inner,
    .wbg-foerderhaeuser__container,
    .wbg-foerderhaeuser .wbg-foerderhaeuser__inner,
    .wbg-foerderhaeuser .wbg-foerderhaeuser__container {
        max-width: 100% !important;
    }

    .wbg-foerderhaeuser__header,
    .brxe-block.wbg-foerderhaeuser__header {
        margin-bottom: 28px !important;
        padding: 0 !important;
        align-items: flex-start !important;
        text-align: left !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .wbg-foerderhaeuser__header > * {
        text-align: left !important;
    }

    .wbg-foerderhaeuser__title,
    .brxe-heading.wbg-foerderhaeuser__title,
    .wbg-foerderhaeuser__header .brxe-heading,
    .wbg-foerderhaeuser__header :is(h1, h2, h3, h4),
    .wbg-foerderhaeuser__inner > .brxe-heading,
    .wbg-foerderhaeuser__inner > .brxe-heading.wbg-foerderhaeuser__title,
    .brxe-section.wbg-foerderhaeuser .brxe-heading:not(.wbg-foerderhaeuser__body):not(.wbg-foerderhaeuser__info-text),
    .brxe-section:has(.wbg-foerderhaeuser__layout) .wbg-foerderhaeuser__header :is(.brxe-heading, h1, h2, h3, h4) {
        overflow-wrap: break-word;
        hyphens: auto;
        text-align: left !important;
        margin: 0 0 16px !important;
        max-width: none !important;
    }

    .wbg-foerderhaeuser__intro,
    .wbg-foerderhaeuser__intro.wbg-foerderhaeuser__intro,
    .brxe-text-basic.wbg-foerderhaeuser__intro,
    .brxe-text.wbg-foerderhaeuser__intro,
    .wbg-foerderhaeuser__header .wbg-foerderhaeuser__intro,
    .wbg-foerderhaeuser__header .brxe-text-basic,
    .wbg-foerderhaeuser__header .brxe-text,
    .brxe-section.wbg-foerderhaeuser .wbg-foerderhaeuser__intro,
    .brxe-section.wbg-foerderhaeuser .wbg-foerderhaeuser__header .brxe-text-basic,
    .brxe-section.wbg-foerderhaeuser .wbg-foerderhaeuser__header .brxe-text,
    .wbg-foerderhaeuser__intro .brxe-text-basic,
    .wbg-foerderhaeuser__intro .brxe-text,
    .wbg-foerderhaeuser__intro .brxe-text-basic p,
    .wbg-foerderhaeuser__intro .brxe-text p,
    .wbg-foerderhaeuser__intro p {
        overflow-wrap: break-word;
        hyphens: auto;
        text-align: left !important;
        margin: 0 !important;
        max-width: none !important;
    }

    .wbg-foerderhaeuser__layout,
    .wbg-foerderhaeuser__layout.wbg-foerderhaeuser__layout,
    .brxe-section:has(.wbg-foerderhaeuser__layout) .wbg-foerderhaeuser__layout,
    section.wbg-foerderhaeuser .wbg-foerderhaeuser__layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 32px !important;
    }

    .wbg-foerderhaeuser__copy,
    .wbg-foerderhaeuser__copy.wbg-foerderhaeuser__copy,
    .wbg-foerderhaeuser__layout > *:has(.wbg-foerderhaeuser__body),
    .wbg-foerderhaeuser__layout > *:first-child {
        order: 1 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .wbg-foerderhaeuser__info,
    .wbg-foerderhaeuser__info.wbg-foerderhaeuser__info,
    .brxe-block.wbg-foerderhaeuser__info,
    .brxe-div.wbg-foerderhaeuser__info,
    .brxe-section.wbg-foerderhaeuser .wbg-foerderhaeuser__info,
    .brxe-section:has(.wbg-foerderhaeuser__layout) .wbg-foerderhaeuser__info,
    .wbg-foerderhaeuser__layout > *:nth-child(2):has(.wbg-foerderhaeuser__info-text),
    .wbg-foerderhaeuser__layout > *:last-child:not(:first-child):has(.wbg-foerderhaeuser__info-text),
    .wbg-foerderhaeuser__layout > *:last-child:not(:first-child) {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        align-self: stretch !important;
        gap: 12px;
        padding: 18px 16px !important;
    }

    .wbg-foerderhaeuser__info-icon,
    .wbg-foerderhaeuser__info .brxe-icon,
    .wbg-foerderhaeuser__info .brxe-svg,
    .wbg-foerderhaeuser__info img.wbg-foerderhaeuser__info-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .wbg-foerderhaeuser__info:not(:has(.wbg-foerderhaeuser__info-icon))::before {
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        font-size: 0.6875rem;
    }

    .wbg-foerderhaeuser__info-text,
    .wbg-foerderhaeuser__info-text .brxe-text-basic,
    .wbg-foerderhaeuser__info-text .brxe-text,
    .wbg-foerderhaeuser__info-text p {
        line-height: 1.4 !important;
    }

    .wbg-foerderhaeuser__cta,
    .wbg-foerderhaeuser__cta a {
        align-self: stretch;
        justify-content: center;
        white-space: normal;
        text-align: center;
        max-width: 100%;
    }
}


/* ==========================================================================
   Rent Search Tabs - "Mieten bei der wbg" (Wohnen & Mieten)
   --------------------------------------------------------------------------
   Styling für Bricks-Widget „Tabs (Verschachtelbar)“ (.brxe-tabs-nested).
   Umschalten übernimmt Bricks (bricksTabs) – aktiver Tab/Pane: .brx-open

   Bricks-Aufbau + Klassen:
   Section                    → wbg-rent-search
   Tabs (Verschachtelbar)     → wbg-rent-search__tabs (optional, zur Klarheit)
     Tab-Menü                 → tab-menu   (PFLICHT – Bricks-Systemklasse)
       Titel                  → tab-title  (PFLICHT, je Tab)
         Einfacher Text       → „Detaillierte Suche“ / „Kartenansicht“
     Tab-Inhalt               → tab-content (PFLICHT)
       Bereich                → tab-pane   (PFLICHT, je Panel)
         Image / Code / iFrame

   WICHTIG:
   - tab-menu, tab-title, tab-content, tab-pane NICHT entfernen/umbenennen!
   - Nur wbg-rent-search / wbg-kundencenter an der Section + optional __tabs am Widget.
   - Tab-Chrome wird mit .wbg-kundencenter geteilt (4 statt 2 Tabs).
   - Bricks-Standard-Ränder/Farben am Tab-Widget zurücksetzen (Theme übernimmt).
   - Panel-Inhalt vorerst Bild, später iFrame im Bereich (.tab-pane).
   ========================================================================== */

.wbg-rent-search,
.wbg-rent-search.wbg-rent-search,
section.wbg-rent-search {
    padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 80px) !important;
    background-color: #ffffff !important;
    color: var(--wbg-gruen-dunkel, #19502f);
    overflow-x: clip;
}

:is(.wbg-rent-search, .wbg-kundencenter) .brxe-tabs-nested,
:is(.wbg-rent-search, .wbg-kundencenter) .wbg-rent-search__tabs,
:is(.wbg-rent-search, .wbg-kundencenter) .wbg-kundencenter__tabs {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    max-width: 1016px;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Tab-Leiste – Parallelogramm-Rahmen (Markenwinkel) + 10 px Radius */
:is(.wbg-rent-search, .wbg-kundencenter) .tab-menu {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    align-self: center !important;
    gap: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto 28px !important;
    padding: 4px !important;
    box-sizing: border-box;
    list-style: none !important;
    background-color: var(--wbg-gruen-dunkel, #19502f) !important;
    border: 3px solid var(--wbg-gruen-dunkel, #19502f) !important;
    border-radius: 10px !important;
    overflow: hidden;
    transform: skewX(-17deg);
    transform-origin: center center;
}

:is(.wbg-rent-search, .wbg-kundencenter) .tab-title {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 1 auto;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 14px clamp(20px, 4vw, 40px) !important;
    box-sizing: border-box;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    color: var(--wbg-text-light, #ffffff) !important;
    cursor: pointer;
    transform: none;
    transition: color 0.2s ease, filter 0.2s ease;
}

:is(.wbg-rent-search, .wbg-kundencenter) .tab-title .brxe-text-basic,
:is(.wbg-rent-search, .wbg-kundencenter) .tab-title .brxe-text {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-cta) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: inherit !important;
    text-align: center;
    white-space: nowrap;
    transform: skewX(17deg);
    transform-origin: center center;
}

:is(.wbg-rent-search, .wbg-kundencenter) .tab-title:hover {
    filter: brightness(1.08);
}

/* Aktiver Tab – weißes Parallelogramm, 5 px Radius (wie BTN_Secondary) */
:is(.wbg-rent-search, .wbg-kundencenter) .tab-title.brx-open {
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    filter: none;
}

:is(.wbg-rent-search, .wbg-kundencenter) .tab-title.brx-open::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #ffffff;
    border-radius: 5px;
    z-index: 0;
}

:is(.wbg-rent-search, .wbg-kundencenter) .tab-title.brx-open:hover {
    filter: none;
}

:is(.wbg-rent-search, .wbg-kundencenter) .tab-title.brx-open .brxe-text-basic,
:is(.wbg-rent-search, .wbg-kundencenter) .tab-title.brx-open .brxe-text {
    color: inherit !important;
}

/* Content-Wrapper */
:is(.wbg-rent-search, .wbg-kundencenter) .tab-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Panels – transparent, Inhalt (Bild / später iFrame) bestimmt die Fläche */
:is(.wbg-rent-search, .wbg-kundencenter) .tab-pane {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

.wbg-rent-search .tab-pane img,
.wbg-rent-search .tab-pane .brxe-image img,
.wbg-rent-search .tab-pane img.brxe-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    object-position: top center !important;
}

.wbg-rent-search .tab-pane .brxe-image:not(img),
.wbg-rent-search .tab-pane figure {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.wbg-rent-search .tab-pane iframe,
.wbg-rent-search .tab-pane .wbg-rent-search__embed iframe {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-height: clamp(480px, 70vh, 820px);
    border: 0;
    background-color: #ffffff;
}

@media (max-width: 1024px) {
    .wbg-rent-search,
    section.wbg-rent-search {
        padding: 56px 32px !important;
    }

    :is(.wbg-rent-search, .wbg-kundencenter) .tab-menu {
        margin-bottom: 24px !important;
    }

    :is(.wbg-rent-search, .wbg-kundencenter) .tab-title {
        padding: 12px 24px !important;
    }

    :is(.wbg-rent-search, .wbg-kundencenter) .tab-title .brxe-text-basic,
    :is(.wbg-rent-search, .wbg-kundencenter) .tab-title .brxe-text {
        font-size: clamp(1rem, 2.5vw, 1.25rem) !important;
        white-space: normal;
    }
}

@media (max-width: 640px) {
    .wbg-rent-search,
    section.wbg-rent-search {
        padding: 48px 20px !important;
    }

    :is(.wbg-rent-search, .wbg-kundencenter) .tab-menu {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
        padding: 3px !important;
    }

    .wbg-rent-search .tab-title {
        flex: 1 1 0;
        min-width: 0;
        padding: 12px 10px !important;
    }

    .wbg-kundencenter .tab-title {
        flex: 0 0 auto;
        min-width: max-content;
        padding: 10px 14px !important;
    }

    :is(.wbg-rent-search, .wbg-kundencenter) .tab-title .brxe-text-basic,
    :is(.wbg-rent-search, .wbg-kundencenter) .tab-title .brxe-text {
        font-size: 0.9375rem !important;
        line-height: 1.25 !important;
    }

    :is(.wbg-rent-search, .wbg-kundencenter) .tab-pane {
        padding: 0 !important;
    }

    .wbg-rent-search .tab-pane iframe,
    .wbg-rent-search .tab-pane .wbg-rent-search__embed iframe {
        min-height: 420px;
    }
}


/* Kundencenter – 4 Tabs (Overrides nach gemeinsamem Tab-Chrome) */
.wbg-kundencenter .tab-menu {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 5px !important;
}

.wbg-kundencenter .tab-title.brx-open::before {
    border-radius: 5px !important;
}

.wbg-kundencenter .tab-title {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px clamp(8px, 1.2vw, 18px) !important;
}

.wbg-kundencenter .tab-title .brxe-text-basic,
.wbg-kundencenter .tab-title .brxe-text {
    font-size: clamp(0.8125rem, 1.35vw, 1.125rem) !important;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .wbg-kundencenter .tab-menu {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .wbg-kundencenter .tab-menu::-webkit-scrollbar {
        display: none;
    }

    .wbg-kundencenter .tab-title {
        flex: 0 0 auto;
        min-width: max-content;
        padding: 10px 14px !important;
    }

    .wbg-kundencenter .tab-title .brxe-text-basic,
    .wbg-kundencenter .tab-title .brxe-text {
        font-size: 0.8125rem !important;
        white-space: nowrap;
    }
}


/* ==========================================================================
   FOOTER - Figma Desktop (Footer-Update 2026)
   --------------------------------------------------------------------------
   Aufbau ab 641 px (Mobile ≤640 px unverändert):
   - .wbg-footer__top    : beiger Bereich (#F8F7F5)
     - Zeile 1: Logo links | To-top-Button rechts (Parallelogramm #F0EEE9)
     - Zeile 2: drei Link-Spalten bündig (col--2 / --3 / --4)
   - .wbg-footer__bottom : grüne Bar – Legal links, Social-Icons rechts

   Mobile (≤640 px): unverändert – Akkordeon via wbg-footer-accordion.js
   Bricks-Struktur in .wbg-footer__top:
     - To-top-Link (Klasse wbg-footer__top-link) – Geschwister von container
     - Block .wbg-footer__container
         - .wbg-footer__brand
         - .wbg-footer__col--2 / --3 / --4
   ========================================================================== */

.wbg-footer {
    position: relative;
    background-color: transparent;
    overflow: hidden;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ------------------------------------------------------------------------ */
/* Top-Area (beige)                                                         */
/* ------------------------------------------------------------------------ */
.wbg-footer__top {
    position: relative !important;
    background-color: var(--wbg-neutral-100, #f8f7f5) !important;
    padding: 50px 60px 50px !important;
    overflow: visible !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.wbg-footer__top::before {
    display: none !important;
}

/* Inner-Container – Layout ab 641 px (s. Media Query), Mobile per Flex/Akkordeon. */
.wbg-footer__container {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Brand-Block (Logo) – Breite begrenzt, Grid-Platzierung ab 641 px. */
.wbg-footer__brand,
.wbg-footer__brand.wbg-footer__brand {
    display: block !important;
    width: 140px !important;
    max-width: 140px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wbg-footer__brand img,
.wbg-footer__brand picture,
.wbg-footer__brand figure,
.wbg-footer__brand a,
.wbg-footer__brand .brxe-image,
.wbg-footer__brand .brxe-image > *,
.wbg-footer__brand .brxe-image img,
.wbg-footer__brand .brxe-image picture img,
.wbg-footer__brand .brxe-image figure img {
    width: 140px !important;
    max-width: 140px !important;
    height: auto !important;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}

/* Nav-Spalten – gap fluid: 26 → 32 px, Grid-Platzierung ab 641 px.       */
.wbg-footer__col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: clamp(20px, 1.5vw + 14px, 32px);
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------------------ */
/* Footer ab Tablet/Desktop (≥641 px) – Logo + To-top Zeile 1, 3 Spalten Z2 */
/* Mobile (≤640 px) bleibt unverändert (Akkordeon).                         */
/* ------------------------------------------------------------------------ */
@media (min-width: 641px) {
    .wbg-footer__container,
    .wbg-footer__container.wbg-footer__container {
        display: grid !important;
        grid-template-columns: repeat(3, max-content);
        grid-template-rows: auto auto;
        justify-content: space-between !important;
        align-items: start !important;
        column-gap: clamp(24px, 3vw, 40px);
        row-gap: 25px;
    }

    .wbg-footer__brand,
    .wbg-footer__brand.wbg-footer__brand {
        grid-column: 1;
        grid-row: 1;
    }

    .wbg-footer__col--2 {
        grid-column: 1;
        grid-row: 2;
    }

    .wbg-footer__col--3 {
        grid-column: 2;
        grid-row: 2;
    }

    .wbg-footer__col--4 {
        grid-column: 3;
        grid-row: 2;
    }

    .wbg-footer__top > a:has(.wbg-footer__top-link),
    .wbg-footer__top > a.wbg-footer__top-link,
    .wbg-footer__top > a.wbg-footer__top-link-anchor {
        position: absolute !important;
        top: 50px;
        right: max(32px, calc((100% - 1320px) / 2));
        z-index: 3;
        width: 56px;
        height: 48px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        isolation: isolate;
        text-decoration: none !important;
        color: var(--wbg-gruen-dunkel, #19502f) !important;
        transition: transform 0.2s ease;
    }

    .wbg-footer__top > a:has(.wbg-footer__top-link)::before,
    .wbg-footer__top > a.wbg-footer__top-link::before,
    .wbg-footer__top > a.wbg-footer__top-link-anchor::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--wbg-neutral-200, #f0eee9);
        border-radius: 5px;
        transform: skewX(-17.5deg);
        z-index: -1;
        pointer-events: none;
    }

    .wbg-footer__top > a:has(.wbg-footer__top-link) svg,
    .wbg-footer__top > a.wbg-footer__top-link svg,
    .wbg-footer__top > a.wbg-footer__top-link-anchor svg,
    .wbg-footer__top > a:has(.wbg-footer__top-link) .wbg-footer__top-link {
        position: static !important;
        top: auto !important;
        right: auto !important;
        width: 21px;
        height: auto;
        display: block;
    }

    .wbg-footer__top > a:has(.wbg-footer__top-link):hover,
    .wbg-footer__top > a:has(.wbg-footer__top-link):focus-visible,
    .wbg-footer__top > a.wbg-footer__top-link-anchor:hover,
    .wbg-footer__top > a.wbg-footer__top-link-anchor:focus-visible {
        transform: translateY(-2px);
    }

    .wbg-footer__bottom-inner {
        justify-content: space-between !important;
    }

    .wbg-footer__legal {
        justify-content: flex-start !important;
    }

    .wbg-footer__socials {
        justify-content: flex-end !important;
    }
}

/* Link-Style - Desktop 1.8rem (28.8px), Mobile 1.25rem (20px) - fluid.
   line-height bewusst tight (1.1), damit die jetzt deutlich größere Typo
   die Spalten nicht aufbläht.                                              */
.wbg-footer__link {
    font-family: "Lato", sans-serif !important;
    font-weight: 400 !important;
    font-size: var(--wbg-fs-footer-link) !important;
    line-height: 1.1 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}

.wbg-footer__link:hover,
.wbg-footer__link:focus-visible {
    text-decoration: underline !important;
    text-underline-offset: 4px;
    opacity: 0.85;
}

/* "Meine wbg App"-Button (Gradient-Parallelogramm wie .wbg-news__cta) */
.wbg-footer__app-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: 24px;
    padding: 14px 28px;
    min-width: 200px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: var(--wbg-fs-cta);
    line-height: 1;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: none !important;
    z-index: 0;
    isolation: isolate;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.wbg-footer__app-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--wbg-gruen, #009450) 73%,
        var(--wbg-gruen-akzent, #afcc46) 100%
    );
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
}

.wbg-footer__app-cta:hover,
.wbg-footer__app-cta:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* ------------------------------------------------------------------------ */
/* Bottom-Bar (grün)                                                        */
/* ------------------------------------------------------------------------ */
.wbg-footer__bottom {
    position: relative !important;
    background-color: var(--wbg-gruen, #009450) !important;
    padding: 32px 60px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100px !important;
    margin: 0 !important;
    z-index: 2;
}

.wbg-footer__bottom-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 48px;
    max-width: 1320px;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Legal-Links links */
.wbg-footer__legal {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 48px;
    flex-wrap: wrap;
    padding: 0 !important;
    margin: 0 !important;
}

.wbg-footer__legal-link {
    font-family: "Lato", sans-serif !important;
    font-weight: 400 !important;
    font-size: var(--wbg-fs-footer-legal) !important;
    line-height: 1.1 !important;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}

.wbg-footer__legal-link:hover,
.wbg-footer__legal-link:focus-visible {
    text-decoration: underline !important;
    text-underline-offset: 4px;
    opacity: 0.9;
}

/* Social-Icons rechts */
.wbg-footer__socials {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 22px;
    padding: 0 !important;
    margin: 0 !important;
}

.wbg-footer__social {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    text-decoration: none !important;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.wbg-footer__social img,
.wbg-footer__social .brxe-image,
.wbg-footer__social .brxe-image > img,
.wbg-footer__social .brxe-image > figure > img,
.wbg-footer__social svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    display: block;
    /* Falls die Icons farbig hochgeladen sind: filter zwingt sie in weiß.
       Falls Icons schon weiß sind, ist der filter neutral.                 */
    filter: brightness(0) invert(1);
    opacity: 0.95;
    transition: opacity 0.2s ease;
}

.wbg-footer__social:hover,
.wbg-footer__social:focus-visible {
    transform: translateY(-2px);
}

.wbg-footer__social:hover img,
.wbg-footer__social:focus-visible img {
    opacity: 1;
}

/* ------------------------------------------------------------------------ */
/* Responsive                                                               */
/* ------------------------------------------------------------------------ */
/* Tablet – nur Abstände, kein altes 2-Spalten-Grid mehr (Layout ab 641 px). */
@media (min-width: 641px) and (max-width: 1024px) {
    .wbg-footer__top {
        padding: 40px 32px 40px !important;
    }

    .wbg-footer__brand,
    .wbg-footer__brand.wbg-footer__brand {
        width: 130px !important;
        max-width: 130px !important;
    }

    .wbg-footer__brand img,
    .wbg-footer__brand .brxe-image,
    .wbg-footer__brand .brxe-image img {
        width: 130px !important;
        max-width: 130px !important;
    }

    .wbg-footer__container,
    .wbg-footer__container.wbg-footer__container {
        column-gap: 32px;
        row-gap: 36px;
    }

    .wbg-footer__top > a:has(.wbg-footer__top-link),
    .wbg-footer__top > a.wbg-footer__top-link,
    .wbg-footer__top > a.wbg-footer__top-link-anchor {
        top: 40px;
        right: max(32px, calc((100% - 1320px) / 2));
    }

    .wbg-footer__bottom {
        padding: 20px 32px !important;
    }
}

/* Mobile - Akkordeon-Navigation (Figma HOME-Mobile), App-CTA zentriert,
   Social-Bar dunkelgrün, Legal-Links gestapelt linksbündig.              */
@media (max-width: 640px) {
    .wbg-footer {
        /* Streifen oben: Parallelogramm des To-top-Links schaut hier hinein. */
        padding-top: 22px !important;
        overflow-x: hidden;
    }

    .wbg-footer__top {
        padding: 44px 0 32px !important;
        min-height: 0 !important;
        overflow-x: hidden;
    }

    .wbg-footer__top::before {
        display: none;
    }

    .wbg-footer__container {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left;
    }

    /* Logo auf Mobile ausblenden (Figma Mobile Footer). */
    .wbg-footer__brand,
    .wbg-footer__brand.wbg-footer__brand {
        display: none !important;
    }

    /* ------------------------------------------------------------------ */
    /* Scroll-to-top: Wrapper + #F0EEE9-Parallelogramm (via JS eingefügt)  */
    /* ------------------------------------------------------------------ */
    .wbg-footer__top-link-wrap {
        position: absolute !important;
        top: -22px !important;
        right: 0 !important;
        width: 52px !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        z-index: 4 !important;
    }

    .wbg-footer__top-link-wrap .wbg-footer__top-link-bg {
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        width: 72px !important;
        height: 100% !important;
        background-color: #f0eee9 !important;
        border-radius: 5px 0 0 5px !important;
        transform: skewX(-17.5deg) !important;
        transform-origin: bottom right !important;
        z-index: 0 !important;
        pointer-events: none !important;
        display: block !important;
    }

    .wbg-footer__top-link-wrap > .wbg-footer__top-link,
    .wbg-footer__top-link-wrap > a {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        height: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 8px 0 0 !important;
        color: var(--wbg-gruen-dunkel, #19502f) !important;
        font-size: var(--wbg-fs-sm) !important;
        line-height: 1 !important;
        text-decoration: none !important;
        background: transparent !important;
        z-index: 1 !important;
        transform: none !important;
    }

    .wbg-footer__top-link-wrap > .wbg-footer__top-link:hover,
    .wbg-footer__top-link-wrap > .wbg-footer__top-link:focus-visible,
    .wbg-footer__top-link-wrap > a:hover,
    .wbg-footer__top-link-wrap > a:focus-visible {
        transform: translateY(-2px) !important;
    }

    /* Fallback: Link direkt in .wbg-footer__top (ohne JS-Wrapper) */
    .wbg-footer__top > .wbg-footer__top-link,
    .wbg-footer__top > a.wbg-footer__top-link,
    .wbg-footer__top > a.wbg-footer__top-link-anchor {
        position: absolute !important;
        top: -22px !important;
        right: 0 !important;
        width: 52px !important;
        height: 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 8px 0 0 !important;
        color: var(--wbg-gruen-dunkel, #19502f) !important;
        font-size: var(--wbg-fs-sm) !important;
        line-height: 1 !important;
        text-decoration: none !important;
        z-index: 4 !important;
        overflow: visible !important;
        background-color: #f0eee9 !important;
        border-radius: 5px 0 0 5px !important;
        transform: skewX(-17.5deg) !important;
        transform-origin: bottom right !important;
    }

    .wbg-footer__top > .wbg-footer__top-link svg,
    .wbg-footer__top > .wbg-footer__top-link img,
    .wbg-footer__top > a.wbg-footer__top-link svg,
    .wbg-footer__top > a.wbg-footer__top-link img,
    .wbg-footer__top-link-wrap .wbg-footer__top-link svg,
    .wbg-footer__top-link-wrap .wbg-footer__top-link img,
    .wbg-footer__top-link-wrap > a svg,
    .wbg-footer__top-link-wrap > a img,
    .wbg-footer__top-link-wrap .brxe-icon,
    .wbg-footer__top-link-wrap .brxe-icon svg,
    .wbg-footer__top-link-wrap .brxe-icon i,
    .wbg-footer__top-link-wrap i {
        position: relative !important;
        z-index: 1 !important;
        width: 25px !important;
        height: 25px !important;
        font-size: var(--wbg-fs-sm) !important;
        line-height: 1 !important;
        display: block;
    }

    .wbg-footer__top > .wbg-footer__top-link svg,
    .wbg-footer__top > .wbg-footer__top-link img,
    .wbg-footer__top > a.wbg-footer__top-link svg,
    .wbg-footer__top > a.wbg-footer__top-link img,
    .wbg-footer__top > a.wbg-footer__top-link-anchor svg,
    .wbg-footer__top > a.wbg-footer__top-link-anchor img {
        transform: skewX(17.5deg) !important;
    }

    /* ------------------------------------------------------------------ */
    /* Akkordeon – full width, Pfeile rechts in fester Spalte ausgerichtet */
    /* ------------------------------------------------------------------ */
    .wbg-footer.is-mobile-accordion .wbg-footer__accordion {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(25, 80, 47, 0.12);
    }

    .wbg-footer.is-mobile-accordion .wbg-footer__accordion-trigger,
    .wbg-footer.is-mobile-accordion button.wbg-footer__accordion-trigger,
    .wbg-footer.is-mobile-accordion .brxe-button.wbg-footer__accordion-trigger {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 48px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 22px 24px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer;
        text-align: left;
        color: var(--wbg-gruen-dunkel, #19502f);
    }

    .wbg-footer.is-mobile-accordion .wbg-footer__accordion-label,
    .wbg-footer.is-mobile-accordion span.wbg-footer__accordion-label {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        font-family: "Lato", sans-serif;
        font-weight: 400 !important;
        font-size: var(--wbg-fs-body) !important;
        line-height: 1.2 !important;
    }

    .wbg-footer.is-mobile-accordion .wbg-footer__accordion-icon,
    .wbg-footer.is-mobile-accordion span.wbg-footer__accordion-icon {
        position: static !important;
        flex: 0 0 28px !important;
        width: 28px !important;
        height: 28px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        transform: none;
        transition: transform 0.2s ease;
    }

    .wbg-footer.is-mobile-accordion .wbg-footer__accordion-icon svg {
        width: 24px;
        height: 24px;
        display: block;
    }

    .wbg-footer.is-mobile-accordion
        .wbg-footer__accordion-trigger[aria-expanded="true"]
        .wbg-footer__accordion-icon {
        transform: rotate(180deg) !important;
    }

    .wbg-footer.is-mobile-accordion .wbg-footer__accordion-panel {
        padding: 0 24px 20px;
    }

    .wbg-footer.is-mobile-accordion .wbg-footer__accordion-panel[hidden] {
        display: none;
    }

    .wbg-footer.is-mobile-accordion .wbg-footer__col {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 18px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .wbg-footer.is-mobile-accordion .wbg-footer__link {
        font-size: var(--wbg-fs-sm) !important;
        line-height: 1.25 !important;
    }

    /* App-CTA unter den Akkordeons, zentriert. */
    .wbg-footer.is-mobile-accordion .wbg-footer__app-cta {
        align-self: center !important;
        margin: 32px auto 0 !important;
        min-width: 0;
        width: auto;
        padding: 12px 28px;
    }

    /* ------------------------------------------------------------------ */
    /* Bottom: Social-Bar (dunkelgrün) + Legal (hellgrün), getrennt        */
    /* ------------------------------------------------------------------ */
    .wbg-footer__bottom {
        padding: 0 !important;
        min-height: 0 !important;
        background: transparent !important;
    }

    .wbg-footer__bottom-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }

    /* Social-Bar: links bündig am Viewport (gerade Kante), rechts -17.5deg
       + 5px Radius TR/BR. Trick: ::before nach links erweitern, damit nach
       skewX(-17.5deg) die sichtbare linke Kante exakt vertikal bleibt.
       Container full-bleed + hellgrüner BG für die Diagonalecke rechts.    */
    .wbg-footer__socials {
        order: 1;
        position: relative;
        justify-content: center !important;
        gap: 20px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        min-height: 84px;
        padding: 28px 24px 28px 24px !important;
        background-color: var(--wbg-gruen, #009450) !important;
        overflow: hidden;
        isolation: isolate;
        z-index: 1;
    }

    .wbg-footer__socials::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        /* links um tan(17.5deg)*H erweitern → nach Skew steht TL bei x=0 */
        left: -30px;
        width: calc(100% + 30px);
        background-color: var(--wbg-gruen-dunkel, #19502f);
        border-radius: 0 5px 5px 0;
        transform: skewX(-17.5deg);
        transform-origin: bottom left;
        z-index: 0;
        pointer-events: none;
    }

    .wbg-footer__social {
        position: relative;
        z-index: 1;
    }

    /* Legal-Links: gleiche Schriftgröße wie Akkordeon-Titles (regulär).  */
    .wbg-footer__legal {
        order: 2;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 22px !important;
        width: 100%;
        padding: 32px 24px 40px !important;
        margin: 0 !important;
        background-color: var(--wbg-gruen, #009450);
    }

    .wbg-footer__legal-link {
        font-family: "Lato", sans-serif !important;
        font-weight: 400 !important;
        font-size: var(--wbg-fs-body) !important;
        line-height: 1.2 !important;
    }

    .wbg-footer__col {
        gap: 18px;
    }
}


/* ==========================================================================
   wbg Header - Desktop + Mobile
   --------------------------------------------------------------------------
   Quelle: Figma "WBG-Redesign"
   - Desktop Component "Header" (756:1124)
   - Mobile Component "Header - Mobile" (768:1490)

   Zwei Zeilen Desktop:
   1) Utility-Bar (grün): Leichte Sprache (links), Suche, Kontakt, DE/EN
   2) Main-Bar (neutral): Logo, Navigation, CTA "Meine wbg App"

   Mobile + Tablet (≤1024 px):
   - Kompakte 70 px Leiste: Logo | Suche-Icon | Burger (sticky beim Scrollen)
   - Utility + Navigation im Slide-in-Panel (.wbg-header__drawer)

   Anwendung in Bricks (Header-Template):
   - Section / Header                         → wbg-header
       - Block "Utility"                      → wbg-header__utility
           - Block "Inner"                    → wbg-header__utility-inner
               - Text Link                    → wbg-header__easy-lang
               - Block "Suche"                → wbg-header__search
                   - Search / Form
               - Block "Rechts"               → wbg-header__utility-right
                   - Text Link                → wbg-header__contact
                   - Block "Sprache"          → wbg-header__lang
                       - Text Link "DE" / "EN"
       - Block "Main"                         → wbg-header__main
           - Block "Inner"                    → wbg-header__main-inner
               - Image (Logo)                 → wbg-header__brand
               - Block "Drawer"               → wbg-header__drawer
                   - Nav Menu                 → wbg-header__nav
                       (Bricks: Mega menu aktiv, Toggle „Hover“,
                        CSS selector: #brx-header oder .wbg-header)
                   - Block "Drawer-Utility"   → wbg-header__drawer-utility

   WordPress-Menü (Appearance → Menus):
   - 5 Hauptpunkte (Wohnen & Mieten, Kaufen & Eigentum, …)
   - Unterpunkte als Untermenü ODER Bricks-Section-Templates (Typ: section)
     mit Klasse wbg-header-mega pro Mega-Menü
   - Pro Hauptpunkt: „Mega menu“-Template zuweisen (optional)

   Desktop: volle Breite, Unterlinks unter dem aktiven Hauptpunkt.
   Mobile/Tablet (≤1024 px): Akkordeon im Drawer (JS), ein Panel offen,
   Unterpunkte 15–20 px Abstand, Bricks-Mobile-Menü ausgeblendet.
                       - Links (Leichte Sprache, Kontakt, DE/EN)
                   - Text Link                → wbg-header-cta wbg-header-cta--app
               - Block "Actions"              → wbg-header__actions
                   - Button                   → wbg-header__search-toggle
                   - Button (3 Spans)         → wbg-header__menu-toggle
               - Text Link                    → wbg-header-cta wbg-header-cta--app
           - Div "Backdrop"                   → wbg-header__backdrop
           - Block "Search-Panel"             → wbg-header__search-panel
               - Block "Suche" (Kopie)        → wbg-header__search
   ========================================================================== */

body.wbg-header-nav-open {
    overflow: hidden;
}

.wbg-header,
.wbg-header.wbg-header,
#brx-header.wbg-header,
#brx-header {
    --wbg-header-utility-h: 48px;
    --wbg-header-main-h: 74px;
    --wbg-header-bg: #ffffff;
    --wbg-header-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fdfcfb' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
    --wbg-header-icon-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319502F' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
    --wbg-header-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319502F' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='4' y1='7' x2='20' y2='7'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='17' x2='20' y2='17'/%3E%3C/svg%3E");
    --wbg-header-close-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319502F' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");

    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--wbg-header-bg) !important;
    z-index: 100;
}

#brx-header,
#brx-header.brxe-section,
#brx-header > .brxe-container,
#brx-header .brxe-section {
    max-width: none !important;
    width: 100% !important;
}

/* ------------------------------------------------------------------------ */
/* Utility-Bar (Desktop)                                                    */
/* ------------------------------------------------------------------------ */
.wbg-header__utility,
.wbg-header__utility.wbg-header__utility {
    display: block !important;
    width: 100% !important;
    background-color: var(--wbg-gruen, #009450) !important;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    min-height: var(--wbg-header-utility-h);
}

.wbg-header__utility > .brxe-block,
.wbg-header__utility > .brxe-div,
.wbg-header__utility > .brxe-container {
    display: contents !important;
}

.wbg-header__utility-inner,
.wbg-header__utility-inner.wbg-header__utility-inner {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    gap: 24px;
    max-width: none !important;
    min-height: var(--wbg-header-utility-h);
    margin: 0 !important;
    padding: 8px clamp(24px, 5vw, 80px) !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* Bricks-Wrapper transparent – aber NICHT die semantischen Header-Komponenten */
.wbg-header__utility-inner > .brxe-block:not(.wbg-header__easy-lang):not(.wbg-header__search):not(.wbg-header__utility-right):not(.wbg-header__contact):not(.wbg-header__lang),
.wbg-header__utility-inner > .brxe-div:not(.wbg-header__easy-lang):not(.wbg-header__search):not(.wbg-header__utility-right),
.wbg-header__utility-inner > .brxe-container:not(.wbg-header__utility-inner) {
    display: contents !important;
}

.wbg-header__easy-lang,
.wbg-header__easy-lang.wbg-header__easy-lang {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-header-ui) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.wbg-header__easy-lang:hover,
.wbg-header__easy-lang:focus-visible {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* Parallelogramm-Suchfeld (Utility-Bar, zentriert) */
.wbg-header__search,
.wbg-header__search.wbg-header__search {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    position: relative;
    left: auto;
    top: auto;
    transform: none !important;
    width: min(100%, 272px);
    min-height: 36px;
    isolation: isolate;
    z-index: 1;
    overflow: visible;
}

/* Schräge Form + border-radius 5px – echtes BG-Element (.wbg-header__search-bg via JS) */
.wbg-header__search-bg,
.wbg-header__search .wbg-header__search-bg {
    position: absolute;
    inset: 0;
    background-color: rgba(253, 252, 251, 0.25) !important;
    border-radius: 5px;
    transform: skewX(-17.5deg);
    transform-origin: center center;
    z-index: 0;
    pointer-events: none;
}

.wbg-header__search::before,
.wbg-header__search.wbg-header__search::before {
    content: none !important;
    display: none !important;
}

.wbg-header__search *,
.wbg-header__search form,
.wbg-header__search .brxe-search,
.wbg-header__search .brxe-form,
.wbg-header__search .brxe-form-field,
.wbg-header__search label,
.wbg-header__search .bricks-search-form,
.wbg-header__search .bricks-search-input {
    transform: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

.wbg-header__search form,
.wbg-header__search .brxe-search,
.wbg-header__search .brxe-form {
    position: relative;
    z-index: 1;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.wbg-header__search input,
.wbg-header__search input[type="search"],
.wbg-header__search input[type="text"],
.wbg-header__search .brxe-search input {
    flex: 1 1 auto;
    width: 100% !important;
    min-height: 36px;
    padding: 8px 40px 8px 16px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-header-ui) !important;
    font-style: normal !important;
    line-height: 1.4 !important;
    color: #fdfcfb !important;
    transform: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.wbg-header__search input::placeholder {
    color: #fdfcfb !important;
    opacity: 1;
}

.wbg-header__search input:focus,
.wbg-header__search input:focus-visible,
.wbg-header__search .brxe-search input:focus,
.wbg-header__search .brxe-search input:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

.wbg-header__search::after,
.wbg-header__search.wbg-header__search::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background-image: var(--wbg-header-icon);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    z-index: 2;
}

.wbg-header__contact,
.wbg-header__contact.wbg-header__contact {
    flex: 0 0 auto;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-header-ui) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.wbg-header__contact:hover,
.wbg-header__contact:focus-visible {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.wbg-header__lang,
.wbg-header__lang.wbg-header__lang {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px;
    flex: 0 0 auto;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-header-ui) !important;
    line-height: 1 !important;
    white-space: nowrap;
}

.wbg-header__lang a,
.wbg-header__lang .brxe-text-link,
.wbg-header__lang .brxe-text-basic,
.wbg-header__lang .brxe-button {
    display: inline !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-header-ui) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: none !important;
    opacity: 1;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wbg-header__lang a:last-child,
.wbg-header__lang .brxe-text-link:last-child {
    opacity: 0.5;
}

.wbg-header__lang a:hover,
.wbg-header__lang a:focus-visible {
    text-decoration: underline !important;
    text-underline-offset: 3px;
    opacity: 1;
}

/* WPML-Sprachwechsler: kompakt als DE/EN */
.wbg-header .wpml-ls-legacy-list-horizontal ul {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wbg-header .wpml-ls-legacy-list-horizontal li {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wbg-header .wpml-ls-legacy-list-horizontal li + li::before {
    content: "/";
    display: inline-block;
    margin: 0 2px;
    line-height: 1;
    pointer-events: none;
}

.wbg-header .wpml-ls-legacy-list-horizontal .wpml-ls-link {
    display: inline !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-header-ui) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wbg-header__lang .wpml-ls-legacy-list-horizontal .wpml-ls-link {
    color: var(--wbg-neutral-50, #fdfcfb) !important;
}

.wbg-header__drawer-utility .wpml-ls-legacy-list-horizontal .wpml-ls-link {
    color: var(--wbg-gruen-dunkel, #19502f) !important;
}

.wbg-header .wpml-ls-legacy-list-horizontal .wpml-ls-item:not(.wpml-ls-current-language) .wpml-ls-link {
    opacity: 0.5;
}

.wbg-header .wpml-ls-legacy-list-horizontal .wpml-ls-item.wpml-ls-current-language .wpml-ls-link {
    opacity: 1;
}

.wbg-header .wpml-ls-legacy-list-horizontal .wpml-ls-link:hover,
.wbg-header .wpml-ls-legacy-list-horizontal .wpml-ls-link:focus-visible {
    opacity: 1 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* Rechte Utility-Gruppe: Kontakt + Sprache horizontal */
.wbg-header__utility-right,
.wbg-header__utility-right.wbg-header__utility-right {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 24px;
    margin: 0 !important;
}

.wbg-header__utility-right > .brxe-block,
.wbg-header__utility-right > .brxe-div,
.wbg-header__utility-right > .brxe-container {
    display: contents !important;
}

/* ------------------------------------------------------------------------ */
/* Main-Bar                                                                 */
/* ------------------------------------------------------------------------ */
.wbg-header__main,
.wbg-header__main.wbg-header__main,
.brxe-block.wbg-header__main,
.brxe-div.wbg-header__main {
    display: block !important;
    position: relative;
    width: 100% !important;
    background-color: var(--wbg-header-bg) !important;
    border: none !important;
    border-bottom: 1px solid rgba(25, 80, 47, 0.06) !important;
    box-shadow: none !important;
}

.wbg-header__main-inner,
.wbg-header__main-inner.wbg-header__main-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(16px, 2vw, 32px);
    max-width: none !important;
    min-height: var(--wbg-header-main-h);
    margin: 0 !important;
    padding: 16px clamp(24px, 5vw, 80px) !important;
    width: 100% !important;
    box-sizing: border-box;
}

.wbg-header__brand,
.wbg-header__brand.wbg-header__brand {
    flex: 0 0 auto;
    width: 92px !important;
    max-width: 92px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wbg-header__brand img,
.wbg-header__brand .brxe-image,
.wbg-header__brand .brxe-image img,
.wbg-header__brand .brxe-logo img {
    display: block !important;
    width: 92px !important;
    max-width: 92px !important;
    height: auto !important;
}

/* Drawer = Nav-Wrapper. Desktop: statisch, Nav horizontal zentriert. */
.wbg-header__drawer,
.wbg-header__drawer.wbg-header__drawer {
    flex: 1 1 auto;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0;
    position: static;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wbg-header__nav,
.wbg-header__nav.wbg-header__nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(16px, 2vw, 32px) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.wbg-header__nav .brxe-nav-menu,
.wbg-header__nav nav,
.wbg-header__nav ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(16px, 2vw, 32px) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.wbg-header__nav li,
.wbg-header__nav .menu-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.wbg-header__nav a,
.wbg-header__nav .brxe-nav-menu a,
.wbg-header__nav-link,
.wbg-header__nav-link.wbg-header__nav-link {
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-sm) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--wbg-gruen-dunkel, #19502f) !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.wbg-header__nav a:hover,
.wbg-header__nav a:focus-visible,
.wbg-header__nav-link:hover,
.wbg-header__nav-link:focus-visible {
    opacity: 0.75;
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

/* Chevron (Desktop Mega + Mobile Akkordeon) */
.wbg-header__nav-chevron {
    flex: 0 0 auto;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-top: -2px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform 0.2s ease, margin 0.2s ease;
}

/* ------------------------------------------------------------------------ */
/* Desktop Mega Menu (Bricks: .brx-has-megamenu > .brx-megamenu)           */
/* ------------------------------------------------------------------------ */
@media (min-width: 1025px) {
    .wbg-header,
    #brx-header.wbg-header,
    #brx-header {
        --wbg-header-total-h: calc(var(--wbg-header-utility-h) + var(--wbg-header-main-h));
        --wbg-mega-gap: 0px;
        --wbg-mega-padding-block: 25px;
    }

    .wbg-header.is-mega-open,
    #brx-header.is-mega-open {
        z-index: 110;
    }

    .wbg-header__utility,
    .wbg-header__main,
    .wbg-header__main-inner,
    .wbg-header__drawer,
    .wbg-header__nav,
    .wbg-header__nav .brxe-nav-menu,
    .wbg-header__nav .bricks-nav-menu,
    .wbg-header__nav .bricks-nav-menu > li {
        overflow: visible !important;
    }

    .wbg-header__nav .bricks-nav-menu,
    .wbg-header__nav nav {
        position: static !important;
    }

    .wbg-header__nav .bricks-nav-menu > li,
    .wbg-header__nav .menu-item {
        position: static !important;
    }

    /* Bricks: Link sitzt IN .brx-submenu-toggle – niemals den Wrapper ausblenden */
    .wbg-header__nav .bricks-nav-menu-wrapper {
        display: block !important;
    }

    .wbg-header__nav .bricks-mobile-menu-wrapper {
        display: none !important;
    }

    .wbg-header__nav .brx-submenu-toggle {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 0;
        background: transparent !important;
        border: none !important;
    }

  /* Nur den Bricks-Untermenü-Button ausblenden (Chevron kommt per JS auf den Link) */
    .wbg-header__nav .brx-submenu-toggle > button,
    .wbg-header__nav .brx-submenu-toggle .menu-item-icon {
        display: none !important;
    }

    .wbg-header__nav .brx-submenu-toggle > a,
    .wbg-header__nav li.menu-item-has-children > a,
    .wbg-header__nav li.brx-has-megamenu > a {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
    }

    .wbg-header__nav li.open > a .wbg-header__nav-chevron,
    .wbg-header__nav li.open .brx-submenu-toggle > a .wbg-header__nav-chevron,
    .wbg-header__nav li.brx-has-megamenu.open > a .wbg-header__nav-chevron,
    .wbg-header__nav li.brx-has-megamenu.open .brx-submenu-toggle > a .wbg-header__nav-chevron,
    .wbg-header__nav li.menu-item-has-children.open > a .wbg-header__nav-chevron,
    .wbg-header__nav li.menu-item-has-children.open .brx-submenu-toggle > a .wbg-header__nav-chevron {
        margin-top: 2px;
        transform: rotate(-135deg);
    }

    .wbg-header__nav li.open > a,
    .wbg-header__nav li.open .brx-submenu-toggle > a,
    .wbg-header__nav li.brx-open > a,
    .wbg-header__nav li.brx-open .brx-submenu-toggle > a,
    .wbg-header__nav li.brx-has-megamenu.open > a,
    .wbg-header__nav li.brx-has-megamenu.open .brx-submenu-toggle > a,
    .wbg-header__nav li.menu-item-has-children.open > a,
    .wbg-header__nav li.menu-item-has-children.open .brx-submenu-toggle > a,
    .wbg-header__nav li.menu-item-has-children.brx-open > a,
    .wbg-header__nav li.menu-item-has-children.brx-open .brx-submenu-toggle > a {
        opacity: 1 !important;
        text-decoration: underline !important;
        text-underline-offset: 4px;
    }

    /* Volle Breite: weiße Fläche – Höhe per JS (--wbg-mega-backdrop-height) */
    .wbg-header.is-mega-open::after,
    #brx-header.is-mega-open::after {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        top: var(--wbg-header-total-h);
        height: var(--wbg-mega-backdrop-height, 0);
        min-height: 0;
        background-color: var(--wbg-header-bg) !important;
        border: none !important;
        box-shadow: 0 14px 28px -12px rgba(25, 80, 47, 0.12);
        z-index: 104;
        pointer-events: none;
    }

    /* Nahtloser Übergang: keine Bricks-Border/Schatten an der Unterkante */
    .wbg-header.is-mega-open .wbg-header__main,
    #brx-header.is-mega-open .wbg-header__main,
    .wbg-header.is-mega-open .brxe-block.wbg-header__main,
    #brx-header.is-mega-open .brxe-block.wbg-header__main {
        border: none !important;
        box-shadow: none !important;
    }

    .wbg-header__nav .brx-submenu-toggle > a {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* Dropdown direkt unter dem jeweiligen Hauptpunkt (left per JS) */
    .wbg-header__nav li > .brx-megamenu,
    .wbg-header__nav li > .sub-menu,
    .wbg-header__nav .wbg-header__mega-panel {
        position: fixed !important;
        left: var(--wbg-mega-inset-left, 0) !important;
        right: auto !important;
        top: var(--wbg-header-total-h) !important;
        width: max-content !important;
        min-width: 12rem;
        max-width: min(420px, calc(100vw - 32px)) !important;
        margin: 0 !important;
        padding: var(--wbg-mega-padding-block, 25px) 0 var(--wbg-mega-padding-block, 25px) !important;
        box-sizing: border-box !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        list-style: none !important;
        z-index: 105;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: none !important;
        transition:
            opacity 0.22s ease,
            visibility 0.22s ease;
    }

    .wbg-header__nav li.open > .brx-megamenu,
    .wbg-header__nav li.open > .sub-menu,
    .wbg-header__nav li.brx-open > .brx-megamenu,
    .wbg-header__nav li.brx-open > .sub-menu,
    .wbg-header__nav li.brx-has-megamenu.open > .brx-megamenu,
    .wbg-header__nav li.menu-item-has-children.open > .sub-menu,
    .wbg-header__nav li.menu-item-has-children.brx-open > .sub-menu,
    .wbg-header__nav li.open > .wbg-header__mega-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Bricks-Standard-Dropdown (dunkel/versetzt) zurücksetzen */
    .wbg-header__nav .bricks-nav-menu > li > .sub-menu,
    .wbg-header__nav .bricks-nav-menu > li > .brx-megamenu {
        inset: auto !important;
    }

    .wbg-header__nav li > .brx-megamenu > *:not(ul):not(.wbg-header-mega),
    .wbg-header__nav .wbg-header-mega,
    .wbg-header__nav .wbg-header-mega__inner {
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        width: auto !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .wbg-header__nav .brx-megamenu .brxe-section,
    .wbg-header__nav .brx-megamenu .brxe-container {
        max-width: none !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background-color: var(--wbg-header-bg) !important;
    }

    .wbg-header__nav li > .brx-megamenu ul,
    .wbg-header__nav li > .sub-menu,
    .wbg-header__nav .wbg-header-mega__list {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: clamp(15px, 1.125rem, 20px) !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        list-style: none !important;
    }

    .wbg-header__nav li > .brx-megamenu li,
    .wbg-header__nav li > .sub-menu li,
    .wbg-header__nav .wbg-header-mega__list li {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .wbg-header__nav li > .brx-megamenu a,
    .wbg-header__nav li > .sub-menu a,
    .wbg-header__nav .wbg-header-mega a {
        display: block;
        margin: 0 !important;
        padding: 0 !important;
        font-family: "Lato", sans-serif !important;
        font-size: var(--wbg-fs-header-ui) !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        color: var(--wbg-gruen-dunkel, #19502f) !important;
        text-decoration: none !important;
        white-space: nowrap;
        opacity: 1 !important;
        transition: opacity 0.2s ease;
    }

    .wbg-header__nav li > .brx-megamenu a:hover,
    .wbg-header__nav li > .brx-megamenu a:focus-visible,
    .wbg-header__nav li > .sub-menu a:hover,
    .wbg-header__nav li > .sub-menu a:focus-visible,
    .wbg-header__nav .wbg-header-mega a:hover,
    .wbg-header__nav .wbg-header-mega a:focus-visible {
        opacity: 0.75 !important;
        text-decoration: underline !important;
        text-underline-offset: 4px;
    }
}

.wbg-header__drawer-utility,
.wbg-header__drawer-utility.wbg-header__drawer-utility {
    display: none !important;
}

/* Desktop-CTA rechts außen (zusätzlich zum optionalen CTA im Drawer) */
.wbg-header__main-inner > .wbg-header-cta,
.wbg-header__main-inner > .wbg-header-cta.wbg-header-cta {
    flex: 0 0 auto;
}

.wbg-header__main-inner > .wbg-header__drawer .wbg-header-cta,
.wbg-header__main-inner > .wbg-header__drawer .wbg-header-cta.wbg-header-cta {
    display: none !important;
}

/* Mobile Actions (Suche + Burger) - Desktop ausblenden */
.wbg-header__actions,
.wbg-header__actions.wbg-header__actions {
    display: none !important;
}

.wbg-header__backdrop,
.wbg-header__backdrop.wbg-header__backdrop {
    display: none !important;
}

.wbg-header__search-panel,
.wbg-header__search-panel.wbg-header__search-panel {
    display: none !important;
}

/* ------------------------------------------------------------------------ */
/* Header CTA "Meine wbg App" (Gradient-Parallelogramm + optionales Badge)  */
/* ------------------------------------------------------------------------ */
.wbg-header-cta,
.wbg-header-cta.wbg-header-cta,
a.wbg-header-cta,
.brxe-text-link.wbg-header-cta,
.brxe-button.wbg-header-cta {
    --wbg-header-cta-icon: none;

    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 22px !important;
    min-width: 0;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-cta) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    color: var(--wbg-neutral-50, #fdfcfb) !important;
    text-decoration: none !important;
    white-space: nowrap;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    isolation: isolate;
    overflow: visible !important;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.wbg-header-cta::before,
.wbg-header-cta.wbg-header-cta::before,
a.wbg-header-cta::before,
.brxe-text-link.wbg-header-cta::before,
.brxe-button.wbg-header-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--wbg-gruen, #009450) 73%,
        #afcc46 100%
    );
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
}

/* Bricks-Fallback: echtes Hintergrund-Element per JS */
.wbg-header-cta-bg,
.wbg-header-cta .wbg-header-cta-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--wbg-gruen, #009450) 73%,
        #afcc46 100%
    );
    border-radius: 5px;
    transform: skewX(-17.5deg);
    z-index: -1;
    pointer-events: none;
}

/* Header-CTA: kein Zusatz-Badge (nur Gradient-Parallelogramm) */
.wbg-header-cta--app::after,
.wbg-header-cta.wbg-header-cta--app::after {
    content: none !important;
    display: none !important;
}

.wbg-header-cta:hover,
.wbg-header-cta:focus-visible,
a.wbg-header-cta:hover,
.brxe-text-link.wbg-header-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    color: var(--wbg-neutral-50, #fdfcfb) !important;
}

/* ------------------------------------------------------------------------ */
/* Tablet                                                                   */
/* ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
    .wbg-header__utility-inner,
    .wbg-header__utility-inner.wbg-header__utility-inner {
        padding: 8px 32px !important;
        gap: 16px;
    }

    .wbg-header__main-inner,
    .wbg-header__main-inner.wbg-header__main-inner {
        padding: 16px 32px !important;
        gap: 20px;
    }

    .wbg-header__easy-lang,
    .wbg-header__easy-lang.wbg-header__easy-lang {
        margin-left: 0 !important;
    }

    .wbg-header-cta,
    .wbg-header-cta.wbg-header-cta {
        font-size: var(--wbg-fs-sm) !important;
        padding: 10px 18px !important;
    }
}

/* Native Mobile-Controls: Desktop aus, Mobile per Media Query */
.wbg-header__native-controls {
    display: none !important;
}

/* ------------------------------------------------------------------------ */
/* Unter Desktop (≤1024 px) – Burger, Drawer, Such-Panel                    */
/* ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
    /* Sticky Top-Leiste (Logo + Burger/Suche) beim Scrollen */
    .wbg-header,
    .wbg-header.wbg-header,
    #brx-header.wbg-header,
    #brx-header {
        position: sticky !important;
        top: 0;
        z-index: 100;
    }

    .admin-bar .wbg-header,
    .admin-bar .wbg-header.wbg-header,
    .admin-bar #brx-header.wbg-header,
    .admin-bar #brx-header {
        top: var(--wp-admin--admin-bar--height, 32px);
    }

    .wbg-header,
    .wbg-header.wbg-header,
    #brx-header.wbg-header,
    #brx-header {
        --wbg-header-main-h: 70px;
    }

    /* Utility-Bar nur im Drawer, nicht oben */
    .wbg-header__utility,
    .wbg-header__utility.wbg-header__utility {
        display: none !important;
    }

    .wbg-header__main-inner,
    .wbg-header__main-inner.wbg-header__main-inner {
        position: relative;
        min-height: var(--wbg-header-main-h);
        padding: 0 16px !important;
        gap: 12px;
        flex-wrap: nowrap !important;
    }

    /* Desktop-Elemente in der Top-Leiste ausblenden */
    .wbg-header__main-inner > .wbg-header-cta,
    .wbg-header__main-inner > .wbg-header-cta.wbg-header-cta,
    .wbg-header__main-inner > .wbg-header__nav,
    .wbg-header__main-inner > .wbg-header__drawer-utility {
        display: none !important;
    }

    /* Bricks-Actions aus – Native-Controls übernehmen */
    .wbg-header__actions,
    .wbg-header__actions.wbg-header__actions {
        display: none !important;
    }

    .wbg-header__brand,
    .wbg-header__brand.wbg-header__brand {
        width: 90px !important;
        max-width: 90px !important;
        flex: 0 0 auto;
    }

    .wbg-header__brand img,
    .wbg-header__brand .brxe-image img {
        width: 90px !important;
        max-width: 90px !important;
    }

    /* Bricks-Wrapper transparent – semantische Header-Blöcke ausnehmen */
    .wbg-header__main-inner > .brxe-block:not(.wbg-header__brand):not(.wbg-header__actions):not(.wbg-header__drawer):not(.wbg-header__native-controls),
    .wbg-header__main-inner > .brxe-div:not(.wbg-header__brand):not(.wbg-header__actions):not(.wbg-header__drawer):not(.wbg-header__native-controls),
    .wbg-header__main-inner > .brxe-container:not(.wbg-header__main-inner) {
        display: contents !important;
    }

    .wbg-header__actions .wbg-header-cta,
    .wbg-header__actions .wbg-header-cta.wbg-header-cta {
        display: none !important;
    }

    /* Native Mobile-Controls (von JS) */
    .wbg-header__native-controls,
    .wbg-header__native-controls.wbg-header__native-controls {
        display: flex !important;
        flex: 0 0 auto;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 16px !important;
        margin-left: auto !important;
        min-height: 40px;
    }

    .wbg-header__native-btn,
    .wbg-header__native-btn.wbg-header__native-btn {
        appearance: none;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        cursor: pointer !important;
        flex-shrink: 0;
    }

    .wbg-header__native-btn svg {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        pointer-events: none;
    }

    /* Close-Button: standardmäßig aus, neben der Lupe wenn Menü offen */
    .wbg-header__native-btn--close,
    .wbg-header__native-btn--close.wbg-header__native-btn--close {
        display: none !important;
    }

    .wbg-header.is-menu-open .wbg-header__native-btn--menu,
    #brx-header.is-menu-open .wbg-header__native-btn--menu {
        display: none !important;
    }

    .wbg-header.is-menu-open .wbg-header__native-btn--close,
    #brx-header.is-menu-open .wbg-header__native-btn--close {
        display: inline-flex !important;
    }

    .wbg-header.is-menu-open .wbg-header__native-controls,
    #brx-header.is-menu-open .wbg-header__native-controls {
        position: relative !important;
        z-index: 140 !important;
    }

    .wbg-header.is-menu-open .wbg-header__main-inner,
    #brx-header.is-menu-open .wbg-header__main-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .wbg-header.is-menu-open .wbg-header__brand,
    #brx-header.is-menu-open .wbg-header__brand {
        display: block !important;
        visibility: visible !important;
        position: relative !important;
        z-index: 141 !important;
        flex: 0 0 auto !important;
    }

    /* Bricks-Toggles aus – Native-Buttons übernehmen */
    .wbg-header__menu-toggle,
    .wbg-header__search-toggle {
        display: none !important;
    }

    /* Drawer = Slide-in Panel (geschlossen: komplett off-screen) */
    .wbg-header__drawer,
    .wbg-header__drawer.wbg-header__drawer {
        position: fixed !important;
        top: 0 !important;
        right: 0;
        bottom: 0;
        left: 0;
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0;
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding: calc(var(--wbg-header-main-h) + 16px) 24px 32px !important;
        background-color: var(--wbg-header-bg) !important;
        overflow-y: auto;
        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.3s ease, visibility 0.3s ease;
        z-index: 120;
        box-sizing: border-box !important;
    }

    /* Header-Leiste bleibt über dem Drawer – kein sichtbarer Spalt */
    .wbg-header.is-menu-open .wbg-header__main,
    .wbg-header.is-menu-open .wbg-header__main.wbg-header__main,
    #brx-header.is-menu-open .wbg-header__main,
    #brx-header.is-menu-open .wbg-header__main.wbg-header__main {
        position: relative !important;
        z-index: 130 !important;
    }

    .wbg-header.is-menu-open .wbg-header__drawer,
    .wbg-header.is-menu-open .wbg-header__drawer.wbg-header__drawer,
    #brx-header.is-menu-open .wbg-header__drawer,
    #brx-header.is-menu-open .wbg-header__drawer.wbg-header__drawer {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    /* Drawer-Inhalt: immer vertikal stapeln (Nav oben, Utility darunter) */
    .wbg-header__drawer,
    .wbg-header__drawer.wbg-header__drawer,
    .brxe-block.wbg-header__drawer,
    #brx-header .wbg-header__drawer {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    .wbg-header__drawer > .wbg-header__nav,
    .wbg-header__drawer > .brxe-nav-menu,
    .wbg-header__drawer > .wbg-header__drawer-utility,
    .wbg-header__drawer > .brxe-block.wbg-header__drawer-utility,
    .wbg-header__drawer > .wbg-header-cta {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        align-self: stretch !important;
    }

    /* Nav im Drawer: kein Row/Wrap (sonst rutscht Utility neben Untermenüs) */
    .wbg-header__drawer .wbg-header__nav,
    .wbg-header__drawer .wbg-header__nav.wbg-header__nav,
    .wbg-header__drawer .brxe-nav-menu.wbg-header__nav {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        align-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .wbg-header__drawer .wbg-header__nav > .bricks-nav-menu-wrapper,
    .wbg-header__drawer .wbg-header__nav .bricks-nav-menu-wrapper {
        order: 1 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fallback: Utility versehentlich im Nav-Element statt im Drawer */
    .wbg-header__drawer .wbg-header__nav > .wbg-header__drawer-utility,
    .wbg-header__drawer .wbg-header__nav > .brxe-block.wbg-header__drawer-utility {
        order: 2 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        align-self: stretch !important;
    }

    /* Bricks-eigenes Mobile-Menü aus – wir nutzen den Drawer + Desktop-UL */
    .wbg-header .bricks-mobile-menu-wrapper,
    .wbg-header .bricks-mobile-menu-overlay,
    .wbg-header .bricks-mobile-menu-toggle,
    .wbg-header__nav .bricks-mobile-menu-wrapper,
    .wbg-header__nav .bricks-mobile-menu-overlay,
    .wbg-header__nav .bricks-mobile-menu-toggle,
    #brx-header .bricks-mobile-menu-wrapper,
    #brx-header .bricks-mobile-menu-overlay,
    #brx-header .bricks-mobile-menu-toggle {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .wbg-header__nav .bricks-nav-menu-wrapper,
    .wbg-header__nav .bricks-nav-menu-wrapper.mobile_landscape {
        display: block !important;
        width: 100% !important;
    }

    .wbg-header.is-mega-open::after,
    #brx-header.is-mega-open::after {
        display: none !important;
    }

    .wbg-header__nav,
    .wbg-header__nav.wbg-header__nav,
    .wbg-header__nav.brxe-nav-menu,
    .wbg-header__nav .brxe-nav-menu {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        align-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 32px !important;
    }

    .wbg-header__nav .bricks-nav-menu,
    .wbg-header__nav nav,
    .wbg-header__nav ul,
    .wbg-header__nav .bricks-nav-menu > li {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .wbg-header__nav .bricks-nav-menu {
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .wbg-header__nav .bricks-nav-menu > li {
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(25, 80, 47, 0.1);
    }

    .wbg-header__nav .bricks-nav-menu > li:last-child {
        border-bottom: none;
    }

    .wbg-header__nav .bricks-nav-menu > li > a,
    .wbg-header__nav-link {
        display: block;
        width: 100%;
        padding: 18px 0 !important;
        font-size: var(--wbg-fs-nav) !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        text-decoration: none !important;
    }

    .wbg-header__nav .bricks-nav-menu > li > a:hover,
    .wbg-header__nav .bricks-nav-menu > li > a:focus-visible {
        opacity: 0.75;
        text-decoration: underline !important;
        text-underline-offset: 4px;
    }

    /* Akkordeon: Hauptpunkte mit Unterseiten – Link navigiert, Chevron klappt auf */
    .wbg-header__nav li.wbg-header__nav-item--has-children {
        width: 100%;
    }

    .wbg-header__nav .wbg-header__submenu-row,
    .wbg-header__nav .brx-submenu-toggle.wbg-header__submenu-row {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
    }

    .wbg-header__nav .wbg-header__submenu-row > .brx-submenu-toggle,
    .wbg-header__nav .brx-submenu-toggle.wbg-header__submenu-row {
        flex: 1 1 auto;
        align-items: center;
        min-width: 0;
        margin: 0;
        padding: 0;
        background: transparent !important;
        border: none !important;
    }

    .wbg-header__nav .wbg-header__submenu-row > .brx-submenu-toggle > a,
    .wbg-header__nav .brx-submenu-toggle.wbg-header__submenu-row > a,
    .wbg-header__nav .wbg-header__submenu-row > a {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        max-width: 100%;
        padding: 18px 0 !important;
        font-size: var(--wbg-fs-nav) !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        text-decoration: none !important;
    }

    .wbg-header__nav .wbg-header__submenu-row > .brx-submenu-toggle > a:hover,
    .wbg-header__nav .wbg-header__submenu-row > .brx-submenu-toggle > a:focus-visible,
    .wbg-header__nav .brx-submenu-toggle.wbg-header__submenu-row > a:hover,
    .wbg-header__nav .brx-submenu-toggle.wbg-header__submenu-row > a:focus-visible,
    .wbg-header__nav .wbg-header__submenu-row > a:hover,
    .wbg-header__nav .wbg-header__submenu-row > a:focus-visible {
        opacity: 0.75;
        text-decoration: underline !important;
        text-underline-offset: 4px;
    }

    .wbg-header__nav .wbg-header__submenu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        position: relative;
        z-index: 2;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        border: none;
        background: transparent;
        color: var(--wbg-gruen-dunkel, #19502f);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .wbg-header__nav .wbg-header__submenu-toggle .menu-item-icon,
    .wbg-header__nav .wbg-header__submenu-toggle > svg:not(.wbg-header__nav-chevron) {
        display: none !important;
    }

    .wbg-header__nav .wbg-header__submenu-toggle .wbg-header__nav-chevron {
        width: 10px;
        height: 10px;
        margin-top: 0;
    }

    .wbg-header__nav li.wbg-header__nav-item--expanded .wbg-header__submenu-toggle .wbg-header__nav-chevron {
        transform: rotate(-135deg);
    }

    .wbg-header__nav li > .brx-megamenu,
    .wbg-header__nav li > .sub-menu,
    .wbg-header__nav .wbg-header__submenu-panel {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 0 20px 16px !important;
        background: transparent !important;
        border: none !important;
        border-left: 2px solid rgba(25, 80, 47, 0.12) !important;
        box-shadow: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        list-style: none !important;
    }

    .wbg-header__nav li.wbg-header__nav-item--has-children > .brx-megamenu,
    .wbg-header__nav li.wbg-header__nav-item--has-children > .sub-menu,
    .wbg-header__nav li.wbg-header__nav-item--has-children > .wbg-header__submenu-panel {
        display: none !important;
    }

    .wbg-header__nav li.wbg-header__nav-item--expanded > .wbg-header__submenu-panel,
    .wbg-header__nav li.wbg-header__nav-item--expanded > .brx-megamenu,
    .wbg-header__nav li.wbg-header__nav-item--expanded > .sub-menu,
    .wbg-header__nav li.wbg-header__nav-item--has-children.open > .sub-menu,
    .wbg-header__nav li.wbg-header__nav-item--has-children.brx-open > .sub-menu,
    .wbg-header__nav li.wbg-header__nav-item--has-children.open > .brx-megamenu,
    .wbg-header__nav li.wbg-header__nav-item--has-children.brx-open > .brx-megamenu {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: clamp(15px, 1.125rem, 20px) !important;
    }

    .wbg-header__nav li.wbg-header__nav-item--expanded > .sub-menu li,
    .wbg-header__nav li.wbg-header__nav-item--expanded > .brx-megamenu li {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    .wbg-header__nav .wbg-header__submenu-panel a,
    .wbg-header__nav li > .brx-megamenu a,
    .wbg-header__nav li > .sub-menu a {
        display: block;
        padding: 0 !important;
        font-size: var(--wbg-fs-header-ui) !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        text-decoration: none !important;
    }

    .wbg-header__nav .wbg-header__submenu-panel a:hover,
    .wbg-header__nav li > .brx-megamenu a:hover,
    .wbg-header__nav li > .sub-menu a:hover {
        opacity: 0.75;
        text-decoration: underline !important;
        text-underline-offset: 4px;
    }

    /* WordPress Admin-Bar: Drawer unterhalb der Admin-Leiste */
    .admin-bar .wbg-header__drawer,
    .admin-bar .wbg-header__drawer.wbg-header__drawer,
    .admin-bar #brx-header .wbg-header__drawer {
        top: var(--wp-admin--admin-bar--height, 32px) !important;
        height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px)) !important;
        max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px)) !important;
    }

    /* Bricks-Toggles/Actions gehören nicht in den Drawer-Inhalt */
    .wbg-header__drawer .wbg-header__menu-toggle,
    .wbg-header__drawer .wbg-header__search-toggle,
    .wbg-header__drawer .wbg-header__actions,
    .wbg-header__drawer .wbg-header__native-controls,
    .wbg-header__drawer .bricks-mobile-menu-toggle,
    .wbg-header__drawer .brxe-nav-menu .bricks-mobile-menu-toggle,
    .wbg-header__drawer .brxe-nav-menu > .bricks-mobile-menu-toggle,
    .wbg-header__drawer .brxe-toggle {
        display: none !important;
    }

    .wbg-header__drawer-utility,
    .wbg-header__drawer-utility.wbg-header__drawer-utility,
    .brxe-block.wbg-header__drawer-utility {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        align-self: stretch !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 0 !important;
        margin: 0 0 24px !important;
        border-top: 1px solid rgba(25, 80, 47, 0.12);
        border-bottom: 1px solid rgba(25, 80, 47, 0.12);
        order: 2;
    }

    .wbg-header__drawer > .wbg-header__nav,
    .wbg-header__drawer > .brxe-nav-menu.wbg-header__nav {
        order: 1;
    }

    .wbg-header__drawer-utility > *:not(.brxe-wpml-language-switcher),
    .wbg-header__drawer-utility .brxe-text-link {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .wbg-header__drawer-utility .brxe-wpml-language-switcher {
        display: inline-flex !important;
        width: auto !important;
        max-width: 100% !important;
    }

    .wbg-header__drawer-utility a,
    .wbg-header__drawer-utility .brxe-text-link {
        font-family: "Lato", sans-serif !important;
        font-size: var(--wbg-fs-header-ui) !important;
        color: var(--wbg-gruen-dunkel, #19502f) !important;
        text-decoration: none !important;
    }

    .wbg-header__drawer .wbg-header-cta,
    .wbg-header__drawer .wbg-header-cta.wbg-header-cta {
        display: inline-flex !important;
        align-self: flex-start;
        margin-top: 8px;
    }

    .wbg-header__backdrop,
    .wbg-header__backdrop.wbg-header__backdrop {
        display: block !important;
        position: fixed;
        inset: 0;
        background: rgba(25, 80, 47, 0.35);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 110;
    }

    .wbg-header.is-menu-open .wbg-header__backdrop,
    .wbg-header.is-menu-open .wbg-header__backdrop.wbg-header__backdrop,
    #brx-header.is-menu-open .wbg-header__backdrop,
    #brx-header.is-menu-open .wbg-header__backdrop.wbg-header__backdrop {
        opacity: 1;
        visibility: visible;
    }

    /* Mobile Such-Panel (unter der 70 px Leiste) */
    .wbg-header__search-panel,
    .wbg-header__search-panel.wbg-header__search-panel {
        display: block !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 16px !important;
        background-color: var(--wbg-gruen, #009450) !important;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
        z-index: 105;
    }

    .wbg-header.is-search-open .wbg-header__search-panel,
    .wbg-header.is-search-open .wbg-header__search-panel.wbg-header__search-panel,
    #brx-header.is-search-open .wbg-header__search-panel,
    #brx-header.is-search-open .wbg-header__search-panel.wbg-header__search-panel {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .wbg-header__search-panel .wbg-header__search,
    .wbg-header__search-panel .wbg-header__search.wbg-header__search {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        display: block !important;
        width: 100% !important;
        max-width: none;
    }
}


/* ==========================================================================
   Header Utility-Suche – Bricks-unabhängig (#brx-header)s
   Funktioniert auch OHNE Klasse .wbg-header__search am Element.
   ========================================================================== */
@media (min-width: 1025px) {
#brx-header .wbg-header__utility .brxe-search,
#brx-header .wbg-header__utility .wbg-header__search,
#brx-header .wbg-header__utility form[role="search"],
#brx-header .wbg-header__utility .bricks-search-form {
    position: relative !important;
    display: block !important;
    width: min(272px, 100%) !important;
    min-height: 36px !important;
    margin: 0 auto !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#brx-header .wbg-header__utility .brxe-search::before,
#brx-header .wbg-header__utility .wbg-header__search::before,
#brx-header .wbg-header__utility .wbg-header__search-bg {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: 0;
    background-color: rgba(253, 252, 251, 0.25) !important;
    border-radius: 5px;
    transform: skewX(-17.5deg);
    transform-origin: center center;
    z-index: 0;
    pointer-events: none;
}

#brx-header .wbg-header__utility .brxe-search *,
#brx-header .wbg-header__utility .wbg-header__search * {
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

#brx-header .wbg-header__utility input[type="search"],
#brx-header .wbg-header__utility input[type="text"],
#brx-header .wbg-header__utility .brxe-search input,
#brx-header .wbg-header__utility .bricks-search-input {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    min-height: 36px !important;
    padding: 8px 40px 8px 16px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    font-family: "Lato", sans-serif !important;
    font-size: var(--wbg-fs-header-ui) !important;
    font-style: normal !important;
    line-height: 1.4 !important;
    color: #fdfcfb !important;
    transform: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

#brx-header .wbg-header__utility input::placeholder {
    color: #fdfcfb !important;
    opacity: 1 !important;
}

#brx-header .wbg-header__utility input:focus,
#brx-header .wbg-header__utility input:focus-visible,
#brx-header .wbg-header__utility .brxe-search input:focus,
#brx-header .wbg-header__utility .brxe-search input:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

#brx-header .wbg-header__utility .brxe-search:focus,
#brx-header .wbg-header__utility .brxe-search:focus-within,
#brx-header .wbg-header__utility .wbg-header__search:focus-within {
    outline: none !important;
    box-shadow: none !important;
}

#brx-header .wbg-header__utility .brxe-search::after,
#brx-header .wbg-header__utility .wbg-header__search::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background-image: var(--wbg-header-icon);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    z-index: 2;
}
}


/* ==========================================================================
   Tablet-Optimierung (641–1024 px)
   --------------------------------------------------------------------------
   Zwischen Mobile (≤640 px Slider/Akkordeon) und Desktop (≥1024 px).
   Typo-Tokens siehe :root-Block oben. Sektions-Grids/Padding in den
   jeweiligen @media (max-width: 1024px)-Blöcken der Sektionen.
   ========================================================================== */
@media (min-width: 641px) and (max-width: 1024px) {

    /* Karten: etwas knapperes Innenmaß auf schmaleren Tablets */
    .wbg-buyers-card__body {
        padding: 16px 24px 28px;
    }

    .wbg-buyers-card__desc {
        line-height: 1.45;
    }
}


/* ==========================================================================
   Orientierung: Tablet + Mobile Querformat
   --------------------------------------------------------------------------
   Desktop (≥1025 px) und Mobile Hochformat (≤768 px, unverändert) bleiben
   untouched. Nur zusätzliche Regeln für:
   - Mobile Querformat:  landscape + max-height 520px (Smartphones)
   - Tablet Hochformat: 769–1024 px + portrait
   - Tablet Querformat: 769–1024 px + landscape
   ========================================================================== */

/* ---- Mobile Querformat (Smartphone gedreht) --------------------------- */
@media (orientation: landscape) and (max-height: 520px) {

    .wbg-hero {
        --wbg-hero-min-height: 0;
        min-height: 0;
        height: auto;
        overflow: visible;
    }

    .wbg-hero::before {
        display: none;
    }

    .wbg-hero__content {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 20px 28px;
        padding: 20px 28px 24px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .wbg-hero__copy {
        position: relative;
        isolation: isolate;
        max-width: none;
        width: auto;
        padding: 20px 24px 22px;
        margin: 0;
        transform: none !important;
    }

    .wbg-hero__copy::before {
        content: "";
        position: absolute;
        inset: 0 -20px 0 -16px;
        background-color: var(--wbg-overlay-dark);
        border-radius: 10px;
        transform: skewX(var(--wbg-skew));
        transform-origin: top left;
        z-index: -1;
    }

    .wbg-hero__intro,
    .wbg-buyers__footer-text,
    .wbg-owners__footer-text {
        display: none !important;
    }

    .wbg-hero__title,
    .wbg-hero__title.wbg-hero__title {
        margin: 0 0 10px !important;
        font-size: clamp(1.75rem, 4.5vw, 2.25rem) !important;
    }

    .wbg-hero__copy .wbg-hero__search,
    .wbg-hero__copy .brxe-search,
    .wbg-hero__copy form[role="search"],
    .wbg-hero__copy .bricks-search-form {
        display: block;
        width: 100%;
        max-width: 240px;
        box-sizing: border-box;
    }

    .wbg-hero__copy .wbg-hero__search input,
    .wbg-hero__copy .brxe-search input,
    .wbg-hero__copy form[role="search"] input,
    .wbg-hero__copy .bricks-search-form input,
    .wbg-hero__copy input[type="search"],
    .wbg-hero__copy input[type="text"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .wbg-hero__cta-stack {
        --wbg-hero-cta-ramp-height: calc(var(--wbg-fs-hero-cta) + 20px);
        --wbg-hero-cta-ramp-gap: 10px;
        --wbg-hero-cta-ramp-step: 0px;
        width: auto;
        min-width: 240px;
        max-width: min(42vw, 320px);
        align-items: stretch;
        gap: var(--wbg-hero-cta-ramp-gap);
        transform: none !important;
    }

    .wbg-hero__cta-stack > :not(.brx-query-trail),
    .wbg-hero__cta-stack > :not(.brx-query-trail).wbg-hero-cta {
        margin-left: 0 !important;
    }

    .wbg-hero-cta,
    .wbg-hero__cta-stack > :not(.brx-query-trail) .wbg-hero-cta {
        margin-right: 0;
        min-width: 0;
        width: 100%;
        padding: 10px 52px 10px 16px;
        white-space: nowrap;
    }

    .wbg-hero-cta__badge,
    .wbg-hero-cta .wbg-hero-cta__badge,
    .wbg-hero-cta:not(:has(.wbg-hero-cta__badge))::after {
        top: -8px;
        right: -12px;
        width: 64px;
        height: 34px;
    }

    /* Schmale Phone-Landschaft: CTAs unter Copy stapeln */
    @media (max-width: 720px) {
        .wbg-hero__content {
            grid-template-columns: 1fr;
            gap: 16px;
            padding: 16px 20px 20px;
        }

        .wbg-hero__cta-stack {
            max-width: 100%;
            min-width: 0;
            width: 100%;
        }
    }

    /* Sektionen kompakter */
    .wbg-buyers,
    .wbg-tenants,
    .wbg-owners {
        padding: 40px 24px;
    }

    .wbg-news {
        padding: 48px 24px 56px;
    }

    .wbg-buyers__header,
    .wbg-tenants__header,
    .wbg-owners__header,
    .wbg-news__header {
        margin-bottom: 28px;
    }

    /* Footer: Tablet-Grid auf schmaler Höhe entschlacken */
    @media (max-width: 900px) {
        .wbg-footer__container {
            column-gap: 24px;
            row-gap: 20px;
        }

        .wbg-footer__top {
            padding: 32px 24px 32px !important;
        }
    }
}

/* ---- Tablet Hochformat (769–1024 px) ---------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {

    .wbg-hero {
        --wbg-hero-min-height: 580px;
        --wbg-hero-overlay-width: 50%;
        --wbg-hero-overlay-inset-y: 48px;
    }

    .wbg-hero__content {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 64px 32px 48px;
    }

    .wbg-hero__copy {
        max-width: min(100%, 460px);
    }

    .wbg-hero__intro {
        display: block !important;
        max-width: min(100%, 420px);
    }

    .wbg-buyers,
    .wbg-tenants,
    .wbg-owners {
        padding: 56px 32px;
    }

    .wbg-news {
        padding: 64px 32px 72px;
    }

    .wbg-buyers__header,
    .wbg-tenants__header,
    .wbg-owners__header,
    .wbg-news__header {
        margin-bottom: 40px;
    }

    .wbg-buyers__grid,
    .wbg-highlights__grid,
    .wbg-tenants__grid,
    .wbg-news__grid {
        gap: 18px;
    }

    .wbg-tenants-card {
        min-height: 300px;
    }

    .wbg-owners .splide__arrow--prev {
        left: -16px !important;
    }

    .wbg-owners .splide__arrow--next {
        right: -16px !important;
    }
}

/* ---- Tablet Querformat (769–1024 px) ---------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {

    .wbg-hero {
        --wbg-hero-min-height: 460px;
        --wbg-hero-overlay-width: 52%;
        --wbg-hero-overlay-inset-y: 36px;
    }

    .wbg-hero__content {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
        align-items: center;
        gap: 28px 32px;
        padding: 40px 32px 36px;
    }

    .wbg-hero__copy {
        max-width: min(100%, 480px);
        padding-right: 16px;
    }

    .wbg-hero__intro {
        display: block !important;
        max-width: min(100%, 440px);
    }

    .wbg-hero__cta-stack {
        --wbg-hero-cta-ramp-height: calc(var(--wbg-fs-hero-cta) + 24px);
        --wbg-hero-cta-ramp-gap: 16px;
        align-items: flex-start;
        align-self: center;
        justify-self: end;
        gap: var(--wbg-hero-cta-ramp-gap);
        padding-right: 20px;
    }

    .wbg-hero__cta-stack > .brxe-block,
    .wbg-hero__cta-stack > .brxe-div,
    .wbg-hero__cta-stack > .brxe-container {
        justify-content: flex-start;
    }

    .wbg-hero-cta__badge,
    .wbg-hero-cta .wbg-hero-cta__badge,
    .wbg-hero-cta:not(:has(.wbg-hero-cta__badge))::after {
        top: -12px;
        right: -16px;
        width: 80px;
        height: 44px;
    }

    .wbg-buyers,
    .wbg-tenants,
    .wbg-owners {
        padding: 48px 32px;
    }

    .wbg-news {
        padding: 56px 32px 64px;
    }

    .wbg-buyers__header,
    .wbg-tenants__header,
    .wbg-owners__header,
    .wbg-news__header {
        margin-bottom: 32px;
    }

    .wbg-tenants-card {
        height: auto;
        min-height: 280px;
    }

    .wbg-tenants-card__body {
        padding: 32px 0 24px 20px;
        width: 58%;
    }

    .wbg-tenants-card__media {
        width: 48%;
    }

    .wbg-news-card {
        min-height: 480px;
    }

    .wbg-about,
    .wbg-about.wbg-about,
    section.wbg-about {
        min-height: 380px !important;
        max-height: 520px !important;
        margin-bottom: 0 !important;
    }

    .wbg-about__content,
    .wbg-about .wbg-about__content {
        padding: 4% 0 !important;
    }

    .wbg-footer__top {
        padding: 32px 32px 32px !important;
    }
}


/* ==========================================================================
   Scroll-Reveal & Hero-Parallax (wbg-scroll-effects.js)
   --------------------------------------------------------------------------
   Dezente Eingangsanimationen beim Scrollen. Deaktiviert bei
   prefers-reduced-motion. Klassen werden per JS gesetzt.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    .wbg-reveal {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
        transition:
            opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--wbg-reveal-delay, 0ms);
        will-change: opacity, transform;
    }

    .wbg-reveal.wbg-reveal--from-left {
        transform: translate3d(-32px, 0, 0);
    }

    .wbg-reveal.wbg-reveal--from-right {
        transform: translate3d(32px, 0, 0);
    }

    .wbg-reveal.is-wbg-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    /* Headlines + Intro-Texte: langsamer, weiter unten startend */
    .wbg-reveal.wbg-reveal--text {
        transform: translate3d(0, 40px, 0);
        transition:
            opacity 1.35s cubic-bezier(0.16, 1, 0.3, 1),
            transform 1.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .wbg-reveal.wbg-reveal--text.is-wbg-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* ------------------------------------------------------------------------ */
/* Textlinks – Hover: Lift + Akzentgrün (Weiterlesen, Zum Rechner, …)          */
/* ------------------------------------------------------------------------ */
.wbg-buyers-card__link,
.wbg-quartiersentwicklung-card__link,
.wbg-abgeschlossene-projekte__link,
.wbg-versicherungsschutz__link,
.wbg-tenants-card__link,
.wbg-owners-card__link,
.wbg-news-card__link,
.wbg-soziales-engagement__link,
.wbg-kundencenter__link,
.wbg-faq__group-link,
.wbg-allein-eigentuemer__cta,
.wbg-buyers-card__link a,
.wbg-quartiersentwicklung-card__link a,
.wbg-abgeschlossene-projekte__link a,
.wbg-versicherungsschutz__link a,
.wbg-soziales-engagement__link a,
.wbg-kundencenter__link a,
.wbg-faq__group-link a,
.wbg-allein-eigentuemer__cta a {
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, text-decoration-color 0.2s ease, filter 0.2s ease;
}

.wbg-buyers-card__link:hover,
.wbg-buyers-card__link:focus-visible,
.wbg-quartiersentwicklung-card__link:hover,
.wbg-quartiersentwicklung-card__link:focus-visible,
.wbg-abgeschlossene-projekte__link:hover,
.wbg-abgeschlossene-projekte__link:focus-visible,
.wbg-versicherungsschutz__link:hover,
.wbg-versicherungsschutz__link:focus-visible,
.wbg-tenants-card__link:hover,
.wbg-tenants-card__link:focus-visible,
.wbg-owners-card__link:hover,
.wbg-owners-card__link:focus-visible,
.wbg-news-card__link:hover,
.wbg-news-card__link:focus-visible,
.wbg-soziales-engagement__link:hover,
.wbg-soziales-engagement__link:focus-visible,
.wbg-kundencenter__link:hover,
.wbg-kundencenter__link:focus-visible,
.wbg-faq__group-link:hover,
.wbg-faq__group-link:focus-visible,
.wbg-allein-eigentuemer__cta:hover,
.wbg-allein-eigentuemer__cta:focus-visible,
.wbg-buyers-card__link a:hover,
.wbg-buyers-card__link a:focus-visible,
.wbg-quartiersentwicklung-card__link a:hover,
.wbg-quartiersentwicklung-card__link a:focus-visible,
.wbg-abgeschlossene-projekte__link a:hover,
.wbg-abgeschlossene-projekte__link a:focus-visible,
.wbg-versicherungsschutz__link a:hover,
.wbg-versicherungsschutz__link a:focus-visible,
.wbg-soziales-engagement__link a:hover,
.wbg-soziales-engagement__link a:focus-visible,
.wbg-kundencenter__link a:hover,
.wbg-kundencenter__link a:focus-visible,
.wbg-faq__group-link a:hover,
.wbg-faq__group-link a:focus-visible,
.wbg-allein-eigentuemer__cta a:hover,
.wbg-allein-eigentuemer__cta a:focus-visible {
    transform: translateY(-2px) !important;
    color: var(--wbg-gruen-akzent, #bce037) !important;
    text-decoration-color: currentColor !important;
    opacity: 1 !important;
}

/* Gelbe Norima-Fläche (Versicherungsschutz): Lift ja, kein Akzentgrün */
:is(
    .wbg-versicherungsschutz,
    .brxe-section:has(.wbg-versicherungsschutz__inner)
) :is(
    .wbg-versicherungsschutz__link,
    .wbg-versicherungsschutz__link a
):is(:hover, :focus-visible) {
    color: var(--wbg-text-light, #ffffff) !important;
    text-decoration-color: currentColor !important;
    opacity: 0.85 !important;
}