/*
 * Landbund Theme
 * Werte direkt aus Figma-Design (piyLhffIbcUTu8ym2xr3Qa, Node 492:5031)
 */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700&display=swap');

/* ── Design Tokens ───────────────────────────────────────────────────────────── */
:root {
    /* Farben */
    --neutral-green-50:  #F1F7EC;
    --neutral-green-100: #E0F0D5;
    --neutral-green-200: #C0E0AB;
    --neutral-green-500: #488020;
    --neutral-green-800: #1D330D;
    --neutral-green-900: #0E1A07;
    --color-primary: var(--neutral-green-200); /* Alias, rückwärtskompatibel */

    /* Abstände */
    --margin-xs:  4px;
    --margin-s:   8px;
    --margin-m:  16px;
    --margin-l:  24px;
    --margin-xl: 32px;
    --margin-M: var(--margin-m);   /* Alias */
    --margin-XL: var(--margin-xl); /* Alias */

    /* Border-Radius */
    --border-radius-xs:    4px;
    --border-radius-s:     8px;
    --border-radius-m:    16px;  /* Figma: Karten, Nav-Kacheln-Container */
    --border-radius-l:    24px;  /* Figma: Hero, Maps-Bild, Coupon-Karte */
    --border-radius-full: 1000px;

    /* Hero-Overlap: Hero padding-bottom = Nav-Kacheln margin-top */
    --hero-overlap: 110px;
}

/* ── Basis ───────────────────────────────────────────────────────────────────── */
body {
    font-family: 'Barlow', sans-serif;
}

/* ── Typografie ──────────────────────────────────────────────────────────────── */
p {
    color: var(--neutral-green-900);
    font-size: 18px;
    font-weight: 600;
    line-height: 145%;
    letter-spacing: 0.18px;
}

h1 {
    color: var(--neutral-green-900);
    text-align: center;
    font-size: 56px;
    font-weight: 600;
    line-height: 115%;
    letter-spacing: -1.12px;
}

h2 {
    color: var(--neutral-green-900);
    font-size: 44px;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -0.88px;
}

h3 {
    color: var(--neutral-green-900);
    font-size: 32px;
    font-weight: 600;
    line-height: 125%;
    letter-spacing: -0.64px;
}

h4 {
    color: var(--neutral-green-900);
    font-size: 24px;
    font-weight: 600;
    line-height: 133%;
}

/* Bilder im Fließtext bekommen leichte Abrundung — nicht für Hero/Karten */
.textpic-item.textpic-text img,
.frame-inner > p img {
    border-radius: var(--border-radius-s);
}

/* ── Button ──────────────────────────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex;
    height: 48px;
    padding: 16px var(--margin-l);
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: var(--border-radius-full);
    background: var(--neutral-green-500);
    color: white;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.32px;
    text-decoration: none !important;
}

/* ── Navbar ──────────────────────────────────────────────────────────────────── */
.lb-navbar {
    background-color: #fff;
    border-bottom: 0;
    box-shadow: none;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.lb-navbar .container-mainnavigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lb-navbar-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.lb-logo {
    height: 39px;
    width: auto;
    display: block;
}

.lb-nav-toggle {
    width: auto !important;
    height: auto !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    border: none;
    /* Figma: bg neutral/green-100 (#E0F0D5) */
    background-color: var(--neutral-green-100);
    padding: var(--margin-m) var(--margin-xl);
    cursor: pointer;
    color: var(--neutral-green-900);
    overflow: visible;
    border-radius: var(--border-radius-full);
}

.lb-nav-toggle:focus {
    outline: 0;
    box-shadow: none;
}

.lb-nav-label {
    /* Figma: 18px SemiBold, tracking 0.18px */
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.18px;
    color: var(--neutral-green-900);
    line-height: 1.45;
}

.lb-nav-toggle .navbar-toggler-icon {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: block !important;
    width: 22px !important;
    flex-shrink: 0;
}

.lb-navbar .navbar-toggler {
    display: inline-flex !important;
}

.lb-navbar .navbar-collapse {
    display: none !important;
}

.lb-navbar .navbar-collapse.show {
    display: block !important;
    width: 100%;
}

.lb-navbar .navbar-collapse.show .navbar-nav {
    flex-direction: column !important;
}

.lb-navbar .navbar-collapse.show .nav-item {
    width: 100%;
}

.lb-navbar .navbar-collapse.show .nav-link {
    padding: 0.6rem 0 !important;
    border-bottom: none;
}

/* ── Hero ────────────────────────────────────────────────────────────────────────
   Figma (492:5033):
   - Stage: rounded-[24px], Höhe 543px
   - Hintergrundbild: top 16.39% = 89px vom oberen Rand
   14px Seitenabstand damit die Rundungen sichtbar bleiben.
   padding-bottom schafft Platz für den Nav-Kacheln-Overlap.

   Bootstrap Package rendert frame-type-image als:
     .lb-hero > .frame > .frame-group-container > … > .gallery-row
       > .gallery-item > figure.image > picture > img
   ──────────────────────────────────────────────────────────────────────────── */
.lb-hero {
    width: 100%;
    padding: 0 14px var(--hero-overlap);
}

.lb-hero .frame-container {
    max-width: 100% !important;
    padding: 0;
}

.lb-hero .frame-inner,
.lb-hero .gallery-row {
    padding: 0;
    margin: 0;
}

/* figure.image als Stage: 543px, 24px Radius */
.lb-hero figure.image {
    border-radius: var(--border-radius-l);
    overflow: hidden;
    height: 543px;
    margin: 0;
    display: block;
}

/* Bild füllt Stage, Figma: Bildanfang bei 16.39% von oben */
.lb-hero figure.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 16%;
    border-radius: 0;
    display: block;
}

/* Fallback für Carousel (falls in Zukunft ein Slider eingesetzt wird) */
.lb-hero .carousel,
.lb-hero .carousel-container {
    border-radius: var(--border-radius-l);
    overflow: hidden;
    height: 543px;
}

.lb-hero .carousel-item img {
    height: 543px;
    width: 100%;
    object-fit: cover;
    object-position: center 16%;
}

/* ── Seitenstruktur ──────────────────────────────────────────────────────────── */
.lb-section {
    padding: 3.5rem 0;
}

.lb-section-white {
    background-color: #fff;
}

.lb-section-green {
    background-color: var(--neutral-green-100);
}

/* ── Nav-Kacheln-Sektion (colPos 201) ────────────────────────────────────────
   Figma: weißer Card-Container beginnt bei y=442, Hero ist 543px hoch.
   Overlap = 543 - 442 = 101px → wir nutzen --hero-overlap: 110px.
   Die gesamte Sektion wird um diesen Betrag nach oben gezogen.
   ──────────────────────────────────────────────────────────────────────────── */
.lb-section-nav-kacheln {
    margin-top: calc(-1 * var(--hero-overlap));
    padding-top: 0;
    position: relative;
    z-index: 1;
}

/* ── Nav-Kacheln Card-Container ───────────────────────────────────────────────
   Bootstrap Package fügt „frame-" vor den Rahmenklassen-Wert:
   frame_class=lb-nav-kacheln → class="frame-lb-nav-kacheln"
   Figma (492:5437): white bg, h=207px, rounded-[16px].
   ──────────────────────────────────────────────────────────────────────────── */
/* Figma: Rectangle 11 – weißer Container, 1023×207px, rx=16px
   Innerhalb des Bootstrap-Containers (1216px) zentriert.
   Seitenabstände: (1216-1023)/2 ≈ 96px je Seite. */
.frame-lb-nav-kacheln .frame-inner {
    background-color: white;
    border-radius: var(--border-radius-m);
    padding: 9px 16px;
    min-height: 207px;
    max-width: 1023px;
    margin-left: auto;
    margin-right: auto;
    /* Innere Kachel-Reihe als Flex-Container */
    display: flex;
    align-items: center;
    gap: 32px;
}

/* ── Cards (Bootstrap Package CardGroup) ─────────────────────────────────────
   Figma: c106 (Line1): Headline-Kachel (348px) + 2 Bildkacheln (je 279px), gap 32px.
   Bootstrap Package rendert CardGroup als flex-container, Items als .card-group-element-item.
   ──────────────────────────────────────────────────────────────────────────── */

/* Card-Group-Container innerhalb des weißen Rahmens als Flex-Row */
.frame-lb-nav-kacheln .card-group-element {
    display: flex;
    flex-direction: row;
    gap: 32px;
    width: 100%;
    align-items: center;
}

.frame-lb-nav-kacheln .card-group-element-item {
    padding: 0;
    min-width: 0;
}

/* Basis: alle Kacheln im Nav-Kacheln-Container */
.frame-lb-nav-kacheln .card {
    border: none;
    border-radius: var(--border-radius-m);
    height: 189px;
    overflow: hidden;
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Bild füllt die gesamte Karte */
.frame-lb-nav-kacheln .card-img-top {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 0;
}

.frame-lb-nav-kacheln .card-img-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* Dunkles Overlay (Figma: rgba(0,0,0,0.4)) */
.frame-lb-nav-kacheln .card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    pointer-events: none;
}

/* Titel unten links, Figma: 32px SemiBold, weiß, letter-spacing -0.02em */
.frame-lb-nav-kacheln .card-body {
    position: relative;
    z-index: 2;
    padding: var(--margin-m);
    background: transparent;
}

.frame-lb-nav-kacheln .card-title,
.frame-lb-nav-kacheln .card h2 {
    color: white;
    font-size: 32px;
    font-weight: 600;
    line-height: 125%;
    letter-spacing: -0.64px;
    margin: 0;
}

/* Headline-Kachel (kein Bild): weißer Textblock mit H2 "Wir liefern..." (Figma: #FFFFFF, rx=4px, p=10px 32px) */
.frame-lb-nav-kacheln .card:not(:has(.card-img-top img)) {
    background: white;
    border-radius: var(--border-radius-xs); /* Figma: 4px */
    padding: 10px 32px;
    justify-content: center;
    align-items: flex-start;
    height: auto;
    min-height: 126px;
    overflow: visible;
    flex: 1.25; /* Figma: 348px vs 279px für Bildkacheln ≈ Faktor 1.25 */
}

.frame-lb-nav-kacheln .card:not(:has(.card-img-top img))::after {
    display: none;
}

.frame-lb-nav-kacheln .card:not(:has(.card-img-top img)) .card-body {
    position: static;
    padding: 0;
}

/* Headline-Text: H2 44px, dunkel – überschreibt die generelle card-title Regel */
.frame-lb-nav-kacheln .card:not(:has(.card-img-top img)) .card-title,
.frame-lb-nav-kacheln .card:not(:has(.card-img-top img)) h2 {
    color: var(--neutral-green-900);
    font-size: 44px;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -0.88px;
    margin: 0;
}

/* Bildkacheln (mit Bild) bekommen 1fr Breite (Figma: 279px ≈ gleich breit) */
.frame-lb-nav-kacheln .card:has(.card-img-top img) {
    flex: 1;
}

/* ── c107: Frame 316022 – 4-Kacheln-Reihe (Karriere · Intro · Pellets · Agrar) ──
   Figma: display flex, flex-wrap wrap, gap 32px, height 202px
   Karte 1 (Karriere): grüner Verlauf, zentriert, border-radius 8px
   Karte 2 (Intro-Text): kein Bild, dunkler Text, transparent
   Karte 3+4 (Bilder): Overlay, Titel unten, border-radius 16px
   ──────────────────────────────────────────────────────────────────────────── */

/* Card-Group-Container c107: flex-row, gap 32px (Figma: Frame 316022) */
.lb-section-nav-kacheln .frame-default .card-group-element {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px;
    width: 100%;
}

.lb-section-nav-kacheln .frame-default .card-group-element-item {
    padding: 0;
    flex: 1;
    min-width: 279px;
}

/* Basis aller c107-Kacheln */
.lb-section-nav-kacheln .frame-default .card {
    border: none;
    border-radius: var(--border-radius-m);
    height: 189px;
    overflow: hidden;
    position: relative;
    padding: 0;
    width: 100%;
}

/* Bild-Kacheln: Overlay + Titel unten */
.lb-section-nav-kacheln .frame-default .card-img-top {
    position: absolute;
    inset: 0;
}

.lb-section-nav-kacheln .frame-default .card-img-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.lb-section-nav-kacheln .frame-default .card:has(.card-img-top img)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.lb-section-nav-kacheln .frame-default .card:has(.card-img-top img) .card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--margin-m);
    z-index: 2;
}

/* Karte 1: Karriere – grüner Verlauf, zentriert (Figma: lr=8px, p=70px 27px) */
.lb-section-nav-kacheln .frame-default .card-group-element-item:first-child .card {
    background: linear-gradient(180deg, #65B32E 0%, #488020 59.62%);
    border-radius: var(--border-radius-s);
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 27px;
}

.lb-section-nav-kacheln .frame-default .card-group-element-item:first-child .card::after {
    display: none;
}

.lb-section-nav-kacheln .frame-default .card-group-element-item:first-child .card-body {
    position: static;
    text-align: center;
    padding: 0;
}

.lb-section-nav-kacheln .frame-default .card-group-element-item:first-child .card-title {
    font-size: 32px;
    color: white;
    letter-spacing: -0.64px;
}

/* Karte 2: Intro-Text – kein Bild, dunkler Text (Figma: H4 24px + Body 16px) */
.lb-section-nav-kacheln .frame-default .card-group-element-item:nth-child(2) .card {
    background: transparent;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lb-section-nav-kacheln .frame-default .card-group-element-item:nth-child(2) .card::after {
    display: none;
}

.lb-section-nav-kacheln .frame-default .card-group-element-item:nth-child(2) .card-body {
    position: static;
    padding: 0;
}

.lb-section-nav-kacheln .frame-default .card-group-element-item:nth-child(2) .card-title {
    color: #000;
    font-size: 24px;
    font-weight: 600;
    line-height: 133%;
    letter-spacing: normal;
}

.lb-section-nav-kacheln .frame-default .card-group-element-item:nth-child(2) .card-text,
.lb-section-nav-kacheln .frame-default .card-group-element-item:nth-child(2) p {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.02em;
    margin: 0;
}

/* Karte 3+4: Bildkacheln */
.lb-section-nav-kacheln .frame-default .card-title {
    color: white;
    font-size: 32px;
    font-weight: 600;
    line-height: 125%;
    letter-spacing: -0.64px;
    margin: 0;
}

/* ── Karriere-Sektion (colPos 202) ───────────────────────────────────────────
   Figma (492:5072):
   - H2 "Wir wachsen gemeinsam..." liegt auf WEISSEM Hintergrund (y=1206)
   - Grünes Band (#E0F0D5, 428px) startet 171px unterhalb der Überschrift (y=1377)
   - Grid: 2 Spalten (1fr + 384px), gap 32px, align-items end, h=458px
   - Bild: 800×458px, border-radius 16px, object-fit cover
   - Text: 18px SemiBold, #0e1a07
   - Button: bg #488020, h=48px, px=24px, rounded-full, white 16px Bold

   Umsetzung: Sektion hat weißen Hintergrund, ein ::after-Pseudo-Element
   bildet das grüne Band am unteren Teil (428px von unten).
   ──────────────────────────────────────────────────────────────────────────── */
.lb-section-karriere {
    background-color: white;
    position: relative;
    /* Padding oben für die Überschrift (ca. 3.5rem), unten Platz für grünes Band */
    padding-bottom: 4rem;
}

/* Grünes Band: beginnt 171px unterhalb der Überschrift.
   Wir positionieren es am unteren Ende des Abschnitts. */
.lb-section-karriere::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 428px;
    background-color: var(--neutral-green-100);
    z-index: 0;
}

.lb-section-karriere .container {
    position: relative;
    z-index: 1;
}

/* Überschrift im Karriere-Bereich */
.lb-section-karriere .frame-header h2 {
    margin-bottom: var(--margin-xl);
}

/* Grid: Bild links (1fr), Text rechts (384px)
   Bootstrap Package rendert textpic-left so:
     .textpic.textpic-centered.textpic-left
       .textpic-item.textpic-gallery   ← Bilder
       .textpic-item.textpic-text      ← Fließtext
   ──────────────────────────────────────────── */
.lb-section-karriere .textpic.textpic-left {
    display: grid;
    grid-template-columns: 1fr 384px;
    gap: var(--margin-xl);
    align-items: end;
}

.lb-section-karriere .textpic.textpic-left::after {
    display: none; /* Bootstrap clearfix entfernen */
}

.lb-section-karriere .textpic-item.textpic-gallery {
    float: none !important;
    margin: 0;
    width: 100% !important;
}

/* Figma: Bild 800×458px, border-radius 16px (--border-radius-m) */
.lb-section-karriere .textpic-item.textpic-gallery img {
    width: 100%;
    height: 458px;
    object-fit: cover;
    border-radius: var(--border-radius-m);
    display: block;
}

/* Textspalte: flex column, gap 32px, unten ausgerichtet */
.lb-section-karriere .textpic-item.textpic-text {
    display: flex;
    flex-direction: column;
    gap: var(--margin-xl);
    justify-content: flex-end;
    height: 458px;
}

.lb-section-karriere .textpic-item.textpic-text p {
    font-size: 18px;
    font-weight: 600;
    line-height: 145%;
    letter-spacing: 0.18px;
    color: var(--neutral-green-900);
    margin: 0;
}

@media (max-width: 991px) {
    .lb-section-karriere .textpic.textpic-left {
        grid-template-columns: 1fr;
    }

    .lb-section-karriere .textpic-item.textpic-gallery img {
        height: 280px;
    }

    .lb-section-karriere .textpic-item.textpic-text {
        height: auto;
    }

    .lb-section-karriere::after {
        height: 300px;
    }
}

/* ── Coupon-Teaser (colPos 203 = Weiß 2 + colPos 204 = Grün 2) ─────────────
   Figma: Gesamthöhe 429px, Split-Hintergrund:
   - Obere 226px (colPos 203, weiß): Headline H2 + Subtext, zentriert, top=32px
   - Untere 203px (colPos 204, grün #E0F0D5): Coupon-Karte w=800px, h=254px, shadow
   - Coupon-Karte beginnt 119px nach Sektionsstart → überlappt den Übergang weiß/grün
   ──────────────────────────────────────────────────────────────────────────── */

/* colPos 203: Headline-Block (weißer Bereich) */
.lb-section-coupon-header {
    background-color: #fff;
    padding: 32px 0 24px;
    text-align: center;
}

.lb-section-coupon-header .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.lb-section-coupon-header h2 {
    font-size: 44px;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -0.88px;
    text-align: center;
    margin: 0;
}

.lb-section-coupon-header p {
    font-size: 18px;
    font-weight: 600;
    line-height: 145%;
    letter-spacing: 0.01em;
    text-align: center;
    margin: 0;
}

/* colPos 204: Coupon-Karte (grüner Bereich) */
.lb-section-coupon {
    background-color: var(--neutral-green-100);
    padding: 32px 0 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lb-section-coupon .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Veraltete Regeln – werden durch coupon-header ersetzt */
.lb-section-coupon h2,
.lb-section-coupon p {
    display: none; /* Headline ist in colPos 203, nicht 204 */
}

/* ── Coupon-Karte ─────────────────────────────────────────────────────────────
   Bootstrap Package: frame_class=lb-coupon-card → class="frame-lb-coupon-card"
   Der HTML-Inhalt (c114) enthält bereits .rlb-coupon-card mit Inline-Styles.
   Hier: Zentrierung sicherstellen + Figma-Maße (800px, 24px radius, shadow).
   ──────────────────────────────────────────────────────────────────────────── */
.frame-lb-coupon-card .frame-inner {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Inline-Styles im HTML-Element überschreiben */
.frame-lb-coupon-card .rlb-coupon-card {
    max-width: 800px !important;
    border-radius: var(--border-radius-l) !important;
    box-shadow: 0 4px 29.8px 0 rgba(0, 0, 0, 0.15) !important;
}

/* ── Intro-Text ───────────────────────────────────────────────────────────────
   Klasse „lb-section-intro" im TYPO3-Backend setzen.
   ──────────────────────────────────────────────────────────────────────────── */
.lb-section-intro p {
    margin-bottom: var(--margin-xl);
}

/* ── Footer ──────────────────────────────────────────────────────────────────
   Figma (492:5142):
   - Hintergrund: neutral/green-50 (#F1F7EC)
   - Weißer gewölbter Cap oben: h=64px, border-radius 0 0 1000px 1000px
   - 3 Inhaltsspalten mit gap
   - Subfooter-Pill: bg #C0E0AB, border-radius 1000px, px=148px, py=16px
     Links: © Copyright, Rechts: Impressum | Datenschutz | …
   ──────────────────────────────────────────────────────────────────────────── */
.footer-section-meta {
    background: var(--neutral-green-50);
}

#page-footer.bp-page-footer {
    color: var(--neutral-green-800);
    background-color: var(--neutral-green-50);
}

/* Weißer gewölbter Bogen (Figma: h=64px, rounded-bl/br 1000px) */
#page-footer.bp-page-footer::before {
    content: '';
    display: block;
    height: 64px;
    background: white;
    border-radius: 0 0 var(--border-radius-full) var(--border-radius-full);
}

.lb-footer-main {
    padding: 3rem 0 2rem;
}

/* 3 Spalten: Kontakt | Top-Links | Produkte+Social
   Figma: gap 217px zwischen Spalten (1212px Container, je ~271px) */
.lb-footer-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 11vw, 217px);
}

@media (max-width: 767px) {
    .lb-footer-columns {
        grid-template-columns: 1fr;
    }
}

.lb-footer-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Subfooter-Pill (Figma: bg #C0E0AB, border-radius 1000px, px=148px, py=16px, gap 323px) */
.lb-footer-bottom {
    padding: 0 0 2rem;
}

.lb-footer-subfooter {
    background-color: var(--neutral-green-200);
    border-radius: var(--border-radius-full);
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Figma: px=148px, py=16px, gap=323px (responsive: space-between mit min-gap) */
    padding: var(--margin-m) 148px;
    gap: clamp(var(--margin-xl), 16vw, 323px);
}

@media (max-width: 991px) {
    .lb-footer-subfooter {
        padding: var(--margin-m) var(--margin-xl);
        flex-direction: column;
        text-align: center;
        border-radius: var(--border-radius-l);
    }
}

.lb-footer-subfooter .lb-footer-col p,
.lb-footer-subfooter p {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--neutral-green-900);
}

/* Footer Spalten: Adresstexte (Figma: 700 bold, #1D330D) */
.lb-footer-col p,
.lb-footer-col address {
    font-size: 16px;
    font-weight: 700;
    color: var(--neutral-green-800);
    line-height: 150%;
    letter-spacing: 0.02em;
    margin: 0;
    font-style: normal;
}

/* Footer Headings: Figma zeigt H4 (24px) – globales h3 (32px) überschreiben */
#page-footer h2,
#page-footer h3,
#page-footer h4 {
    font-size: 24px;
    font-weight: 600;
    line-height: 133%;
    color: var(--neutral-green-800);
    margin-bottom: var(--margin-m);
}

#page-footer a {
    color: var(--neutral-green-800);
    text-decoration: none;
}

#page-footer a:hover {
    color: var(--neutral-green-900);
    text-decoration: underline;
}

/* ── Maps-Sektion (colPos 205) ───────────────────────────────────────────────
   Figma: Maps-Bereich mit Karte (border-radius 24px, grüner Overlay)
   und Adress-Kachel-Grid (4 Spalten, 280px breit, gap 32px).
   ──────────────────────────────────────────────────────────────────────────── */
.lb-section-maps {
    padding: 3.5rem 0;
}

.lb-section-maps .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

/* Karten-Bild: border-radius 24px, grüner Overlay (rgba 22%)
   Bootstrap Package rendert Bilder in .gallery-row > .gallery-item > figure.image > img
   ──────────────────────────────────────────────────────────────────────────── */
.lb-section-maps .gallery-row {
    width: 100%;
    border-radius: var(--border-radius-l);
    overflow: hidden;
    position: relative;
}

.lb-section-maps .gallery-item {
    width: 100%;
}

.lb-section-maps figure.image {
    margin: 0;
    position: relative;
    border-radius: var(--border-radius-l);
    overflow: hidden;
}

.lb-section-maps figure.image img {
    width: 100%;
    height: 546px;
    object-fit: cover;
    border-radius: var(--border-radius-l);
    display: block;
}

/* Grüner Overlay (Figma: rgba(101, 179, 46, 0.22)) */
.lb-section-maps figure.image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(101, 179, 46, 0.22);
    pointer-events: none;
}

/* Überschrift zentriert */
.lb-section-maps .frame-header {
    width: 100%;
    text-align: center;
}

/* ── Adress-Kacheln (Content-tiles) ──────────────────────────────────────────
   Figma: 4 Spalten à 280px, gap 32px = 1216px gesamt.
   border-bottom: 1px solid #E0F0D5, padding: 0 16px.
   Titel H4 (24px SemiBold), Adresse (16px Regular #1D330D),
   Tag (#E0F0D5 bg, border-radius 4px, padding 0 8px).
   Klasse „lb-standorte-grid" als Rahmenklasse im TYPO3-Backend setzen.
   ──────────────────────────────────────────────────────────────────────────── */
.frame-lb-standorte-grid ul,
.lb-section-maps .frame-lb-standorte-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 32px;
    width: 100%;
}

.frame-lb-standorte-grid li,
.lb-section-maps .frame-lb-standorte-grid li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: var(--margin-l) var(--margin-m);
    gap: var(--margin-m);
    border-bottom: 1px solid var(--neutral-green-100);
    min-height: 176px;
}

/* Adress-Kachel-Titel */
.frame-lb-standorte-grid li strong,
.frame-lb-standorte-grid li b {
    font-size: 24px;
    font-weight: 600;
    line-height: 133%;
    color: var(--neutral-green-900);
    display: block;
}

/* Adresszeilen */
.frame-lb-standorte-grid li span {
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: var(--neutral-green-800);
}

/* Tag-Badge (z.B. „Raiffeisen-Markt") */
.frame-lb-standorte-grid .tag {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    height: 24px;
    background: var(--neutral-green-100);
    border-radius: var(--border-radius-xs);
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: var(--neutral-green-800);
}

/* Pfeil-Icon (Figma: border 2px solid #65B32E) */
.frame-lb-standorte-grid .arrow {
    display: inline-flex;
    width: 17px;
    height: 11px;
    border: 2px solid #65B32E;
    align-self: flex-end;
}

@media (max-width: 1199px) {
    .frame-lb-standorte-grid ul {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .frame-lb-standorte-grid ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .lb-section-maps figure.image img {
        height: 280px;
    }
}