/* LB Bau – Basis-Stylesheet (Phase 1: Tokens, Typo, Header/Footer, Platzhalter) */

/* ---------- Fonts (lokal, latin-Subset) ----------
   Montserrat = Kundin-Wunsch (Futura-Ersatz), Bebas Neue = Logo-Schrift-Schwester
   fuer Caps-Headlines. */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/montserrat-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/montserrat-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/montserrat-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/bebas-neue-latin-400-normal.woff2') format('woff2');
}
/* Metrisch angeglichener Fallback gegen CLS beim Font-Swap (Hero = LCP) */
@font-face {
    font-family: 'Bebas Neue Fallback';
    src: local('Arial Narrow'), local('Arial');
    size-adjust: 78%;
    ascent-override: 105%;
}

/* ---------- Design-Tokens ---------- */
:root {
    --lbb-blue: #3058b0;
    --lbb-blue-dark: #2850a0;
    --lbb-navy: #182030;
    --lbb-navy-soft: #232b3d;
    --lbb-ink: #182030;
    --lbb-text: #4d5565;
    --lbb-text-invert: #ffffff;
    --lbb-text-invert-soft: #b9c0d0;
    --lbb-bg: #ffffff;
    --lbb-bg-soft: #f5f6f8;
    --lbb-card: #ffffff;
    --lbb-border: #e4e7ee;
    --lbb-radius-card: 8px;
    --lbb-radius-control: 6px;
    --lbb-font-head: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    --lbb-font-display: 'Bebas Neue', 'Bebas Neue Fallback', 'Arial Narrow', sans-serif;
    --lbb-font-body: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    --lbb-container: 1290px;
    --lbb-space: clamp(3.5rem, 8vw, 6.5rem);
}

/* ---------- View Transitions: sanfte Seitenwechsel (progressive) ---------- */
@view-transition {
    navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.28s;
    animation-timing-function: ease;
}
@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

/* ---------- Reset-Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
    margin: 0;
    font-family: var(--lbb-font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--lbb-text);
    background: var(--lbb-bg);
    hyphens: auto;
    overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lbb-blue); text-decoration: none; }
a:hover { color: var(--lbb-blue-dark); }
:focus-visible { outline: 3px solid var(--lbb-blue); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3 {
    font-family: var(--lbb-font-head);
    color: var(--lbb-ink);
    line-height: 1.15;
    margin: 0 0 0.6em;
    hyphens: none;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 700; }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.25rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 600; }
p { margin: 0 0 1em; }

.lbb-container {
    max-width: var(--lbb-container);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2rem);
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.lbb-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--lbb-navy);
    color: #fff;
    padding: 0.6rem 1rem;
    z-index: 100;
}
.lbb-skip-link:focus { left: 0; color: #fff; }

/* ---------- Buttons ---------- */
.lbb-button {
    display: inline-block;
    font-family: var(--lbb-font-body);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0.9rem 1.75rem;
    min-width: 150px;
    text-align: center;
    border-radius: var(--lbb-radius-control);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.lbb-cta .lbb-button { min-width: 190px; padding: 1.05rem 2.25rem; font-size: 1rem; }
.lbb-button:active { transform: scale(0.98); }
.lbb-button-primary { background: var(--lbb-blue); color: #fff; }
.lbb-button-primary:hover { background: var(--lbb-blue-dark); color: #fff; transform: translateY(-1px); }
.lbb-button-light { background: #fff; color: var(--lbb-blue); }
.lbb-button-light:hover { background: var(--lbb-navy); color: #fff; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
    .lbb-button:hover { transform: none; }
}

/* ---------- Header ---------- */
.lbb-header {
    background: var(--lbb-bg);
    border-bottom: 1px solid var(--lbb-border);
    position: sticky;
    top: 0;
    z-index: 50;
}
.lbb-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    min-height: 72px;
}
.lbb-logo { justify-self: start; display: inline-flex; }
.lbb-logo img { width: 96px; height: auto; transition: opacity 0.18s ease; }
.lbb-logo:hover img { opacity: 0.75; }
.lbb-nav { justify-self: center; }
.lbb-header-cta { justify-self: end; }
.lbb-nav ul {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
.lbb-nav-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--lbb-ink);
    padding: 0.4rem 0;
}
.lbb-nav-link:hover { color: var(--lbb-blue); }
.lbb-nav-link.is-active { color: var(--lbb-blue); }
.lbb-nav-toggle { display: none; }

@media (max-width: 900px) {
    .lbb-header-inner { grid-template-columns: auto 1fr auto auto; }
    .lbb-logo { grid-column: 1; }
    .lbb-header-cta { grid-column: 3; padding: 0.7rem 1.1rem; min-width: 0; }
    .lbb-nav-toggle { grid-column: 4; }
    .lbb-nav-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 10px;
        background: transparent;
        border: 0;
        cursor: pointer;
    }
    .lbb-nav-toggle span {
        display: block;
        height: 2px;
        width: 100%;
        background: var(--lbb-ink);
        border-radius: 2px;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .lbb-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .lbb-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .lbb-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .lbb-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        background: var(--lbb-bg);
        border-bottom: 1px solid var(--lbb-border);
        box-shadow: 0 24px 40px rgba(24, 32, 48, 0.14);
        display: block;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
        transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0.24s;
        padding: 0.5rem clamp(1.25rem, 4vw, 2rem) 1rem;
        max-height: 70dvh;
        overflow-y: auto;
        justify-self: auto;
    }
    .lbb-nav.is-open {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .lbb-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
    .lbb-nav li {
        border-bottom: 1px solid var(--lbb-border);
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.28s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
    }
    .lbb-nav li:last-child { border-bottom: 0; }
    .lbb-nav.is-open li { opacity: 1; transform: translateY(0); }
    .lbb-nav.is-open li:nth-child(1) { transition-delay: 0.05s; }
    .lbb-nav.is-open li:nth-child(2) { transition-delay: 0.1s; }
    .lbb-nav.is-open li:nth-child(3) { transition-delay: 0.15s; }
    .lbb-nav.is-open li:nth-child(4) { transition-delay: 0.2s; }
    .lbb-nav.is-open li:nth-child(5) { transition-delay: 0.25s; }
    .lbb-nav-link { display: block; padding: 1rem 0.25rem; font-size: 1.05rem; }
    .lbb-nav-link.is-active { color: var(--lbb-blue); }
}

/* ---------- Kicker ---------- */
.lbb-kicker {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lbb-blue);
    margin: 0 0 0.65rem;
}
.lbb-kicker-on-dark { color: #7d9bdc; }

/* ---------- Hero ---------- */
.lbb-hero {
    background: var(--lbb-navy);
    padding-block: clamp(4rem, 9vw, 7rem);
}
.lbb-hero h1 { color: #fff; }
.lbb-hero-headline {
    font-family: var(--lbb-font-display);
    font-weight: 400;
    font-size: clamp(2.75rem, 6.5vw, 4.5rem);
    line-height: 1.04;
    letter-spacing: 0.015em;
    text-transform: uppercase;
    margin-bottom: 0;
    max-width: none;
}
.lbb-hero-text {
    color: var(--lbb-text-invert-soft);
    max-width: 58ch;
    margin-block: 1.1rem 0;
}
.lbb-hero-action { margin: 1.9rem 0 0; }
.lbb-hero-slim { padding-block: clamp(3rem, 6vw, 4.5rem); }
.lbb-hero-slim h1 { margin-bottom: 0; }
.lbb-hero-slim .lbb-hero-text { margin-top: 1rem; }

/* ---------- CTA (geboxt im Container, nach Design) ---------- */
.lbb-cta { padding-block: clamp(2.5rem, 5vw, 4rem); }
.lbb-cta .lbb-cta-box {
    background: var(--lbb-blue);
    border-radius: var(--lbb-radius-card);
    padding: clamp(2rem, 4.5vw, 3.25rem) clamp(1.75rem, 4.5vw, 3.5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.lbb-cta h2 { color: #fff; margin-bottom: 0.3em; }
.lbb-cta-copy p { color: rgba(255, 255, 255, 0.88); margin: 0; max-width: 56ch; }
/* Ohne feste Basis waechst die Copy mit dem Text und draengt die Aktion in die
   naechste Zeile: der Anrufen-Button gehoert aber nach rechts (0.39.0). */
.lbb-cta-copy { flex: 1 1 22rem; min-width: 0; }
.lbb-cta-action { margin: 0; flex: 0 0 auto; }
.lbb-cta-copy strong { color: #fff; }
/* Gesetzte Umbrueche nur dort, wo die Zeile auch Platz hat (0.40.1).
   Gemessen: der erste Satz des Kontakt-Aufrufs passt erst ab rund 1240px in
   eine Zeile. Darunter erzeugt ein zusaetzlicher harter Umbruch eine kurze
   Reststrophe, deshalb faellt er weg und der Satz fliesst normal.
   Die Schwelle haengt an der Textlaenge: wird die Ueberschrift im Backend
   deutlich laenger, gehoert dieser Wert mit geprueft. */
@media (max-width: 1239px) {
    .lbb-cta br.lbb-umbruch { display: none; }
}
/* Hero: zwei kurze Saetze, der Umbruch traegt bis auf Handybreite. */
@media (max-width: 560px) {
    .lbb-hero br.lbb-umbruch { display: none; }
}

/* Hervorhebungen aus **fett** (0.39.0): im Fliesstext kraeftiger und in der
   Textfarbe, damit die Betonung sichtbar ist und nicht nur minimal dicker. */
p strong, li strong { font-weight: 700; color: var(--lbb-ink); }
[data-lbb-bg="navy"] p strong, .lbb-refs strong { color: #fff; }

/* ---------- Media-Platzhalter (bis Kundin Bilder liefert) ---------- */
.lbb-media-placeholder {
    width: 100%;
    height: 100%;
    min-height: 280px;
    border-radius: var(--lbb-radius-card);
    background:
        repeating-linear-gradient(-45deg, transparent, transparent 14px, rgba(24, 32, 48, 0.025) 14px, rgba(24, 32, 48, 0.025) 28px),
        var(--lbb-bg-soft);
    border: 1px solid var(--lbb-border);
}

/* Ankersprung im OnePager: der Kopf klebt, ohne Reserve landet die Ueberschrift
   darunter (0.46.0). Gilt fuer jede Sektion mit id. */
[data-lbb-section][id] { scroll-margin-top: 88px; }
/* "Start" soll an den Dokumentanfang, nicht unter den Kopf. Der Browser rechnet
   Ziel = Elementoberkante minus Reserve und klemmt auf 0 - eine grosszuegige
   Reserve fuehrt also zuverlaessig ganz nach oben, unabhaengig davon, ob eine
   WordPress-Adminleiste alles um 32px verschiebt (0.48.0). */
[data-lbb-section][id]:first-of-type { scroll-margin-top: 320px; }
@media (max-width: 900px) {
    [data-lbb-section][id] { scroll-margin-top: 74px; }
    [data-lbb-section][id]:first-of-type { scroll-margin-top: 320px; }
}

/* ---------- Abstands-Regel: gleiche Hintergruende stossen aneinander ---------- */
[data-lbb-bg="white"] + [data-lbb-bg="white"],
[data-lbb-bg="soft"] + [data-lbb-bg="soft"],
[data-lbb-bg="navy"] + [data-lbb-bg="navy"] {
    padding-top: 0;
}

/* ---------- Bildunterschrift ---------- */
.lbb-intro-media { position: relative; }
.lbb-media-caption {
    position: absolute;
    left: 14px;
    bottom: 14px;
    background: #fff;
    color: var(--lbb-ink);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.45rem 0.8rem;
    border-radius: var(--lbb-radius-control);
    box-shadow: 0 4px 14px rgba(24, 32, 48, 0.12);
    max-width: calc(100% - 28px);
}

/* ---------- Icons & Checks ---------- */
.lbb-icon { width: 26px; height: 26px; stroke-width: 1.7; }
img.lbb-icon-custom { object-fit: contain; filter: brightness(0) invert(1); }
.lbb-check-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--lbb-blue);
    color: #fff;
    flex-shrink: 0;
}
.lbb-check-dot svg { width: 12px; height: 12px; }
.lbb-check-dot-invert { background: #fff; color: var(--lbb-blue); width: 20px; height: 20px; }

/* ---------- Qualitaet ohne Umwege ---------- */
.lbb-intro { padding-block: var(--lbb-space); }
.lbb-intro-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.lbb-intro-media { align-self: center; aspect-ratio: 1 / 1; width: 100%; }
.lbb-intro-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--lbb-radius-card);
}
.lbb-intro-media .lbb-media-placeholder { position: absolute; inset: 0; min-height: 0; }
.lbb-intro-text { margin-top: 0.25rem; }
.lbb-checklist {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.5rem;
}
.lbb-checklist li { display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 700; font-size: 0.92rem; color: var(--lbb-ink); line-height: 1.45; }
.lbb-checklist .lbb-check-dot { margin-top: 1px; }

/* ---------- Gewerke ---------- */
.lbb-gewerke { background: var(--lbb-bg-soft); padding-block: var(--lbb-space); }
.lbb-gewerke-head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 1.5rem 4rem;
    align-items: end;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.lbb-gewerke-head h2 { margin-bottom: 0; max-width: 16ch; }
.lbb-gewerke-head > p { margin: 0; font-size: 0.98rem; color: var(--lbb-text); }
.lbb-gewerke-titel .lbb-kicker { margin-bottom: 0.6rem; }
.lbb-gewerke-titel h2 { margin-bottom: 0; max-width: 16ch; }
.lbb-gewerke-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
}
/* Genau 4 aktive Karten: ruhiges 2x2 statt 3+1-Umbruch (0.19.1).
   Nur Desktop, sonst schlaegt die :has-Spezifitaet die Mobile-Stacks. */
@media (min-width: 901px) {
    .lbb-gewerke-grid:has(> .lbb-gcard:nth-child(4):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* Referenz-Karten: das Raster folgt der Anzahl, sonst bleibt bei drei
   Projekten eine leere vierte Spalte stehen (0.38.0). */
@media (min-width: 901px) {
    .lbb-refs-grid:has(> .lbb-rcard:nth-child(3):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lbb-refs-grid:has(> .lbb-rcard:nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.lbb-gcard {
    background: var(--lbb-card);
    border-radius: var(--lbb-radius-card);
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lbb-gcard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(24, 32, 48, 0.08); }
.lbb-gcard-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--lbb-radius-control);
    background: var(--lbb-blue);
    color: #fff;
    margin-bottom: 1.4rem;
}
.lbb-gcard-icon .lbb-icon { width: 17px; height: 17px; }
.lbb-gcard h3 { margin-bottom: 0.5rem; }
/* Kein margin-bottom mehr: der Abstand war die Reserve fuer den entfallenen
   Mehr-erfahren-Link. Jetzt macht das Karten-Padding die Arbeit (0.48.1). */
.lbb-gcard p { font-size: 0.92rem; margin-bottom: 0; }
/* Kontakt-Karte (0.38.0): schliesst das Raster ab, wenn weniger als sechs
   Gewerke gepflegt sind. Blau wie die Referenzkarten und die Vorteils-Box. */
.lbb-gcard-cta {
    background: var(--lbb-blue);
    color: #fff;
    justify-content: center;
}
.lbb-gcard-cta:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(48, 88, 176, 0.28); }
.lbb-gcard-cta h3 { color: #fff; margin-bottom: 0.5rem; }
.lbb-gcard-cta p { color: rgba(255, 255, 255, 0.88); }
/* Kein margin-top:auto wie bei den Gewerke-Karten: der Button wuerde sonst
   an die Unterkante wandern und mitten in der Karte ein Loch lassen.
   Die Karte hat keine Icon-Zeile, also zentriert die Gruppe als Ganzes. */
.lbb-gcard-cta .lbb-button { margin-top: 1.6rem; }
/* Fruehere Sonderregel "Kontakt-Karte immer volle Breite" ist bewusst entfernt
   (0.42.1): sie zog die Karte aus dem Raster und liess dadurch die davor
   stehende Karte allein in ihrer Reihe. Die allgemeine Waisen-Regel unten
   greift fuer die Kontakt-Karte genauso wie fuer jede andere. */

/* ---------- Verwaiste letzte Karte (0.40.3) ----------
   Generelle Regel statt Einzelfall-Flickerei: bleibt die letzte Karte allein in
   ihrer Reihe stehen, fuellt sie die Reihe aus. Betrifft jedes Karten-Raster,
   dessen Anzahl die Kundin im Backend aendern kann.
   Zweispaltig: die letzte Karte steht allein, wenn ihre Position ungerade ist.
   Dreispaltig: wenn ihre Position 3n+1 ist. Das 4er-Raster ist ausgenommen,
   es hat mit der :has-Regel oben schon zwei Spalten. */
@media (min-width: 561px) and (max-width: 900px) {
    .lbb-gewerke-grid > .lbb-gcard:last-child:nth-child(odd),
    .lbb-refs-grid > .lbb-rcard:last-child:nth-child(odd),
    .lbb-team-cards > .lbb-member:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}
@media (min-width: 901px) {
    .lbb-gewerke-grid:not(:has(> .lbb-gcard:nth-child(4):last-child)) > .lbb-gcard:last-child:nth-child(3n + 1) {
        grid-column: 1 / -1;
    }
}

/* ---------- Team ---------- */
.lbb-team { padding-block: var(--lbb-space); }
.lbb-team-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.lbb-team-copy h2 { max-width: 16ch; }
.lbb-team-copy p { max-width: 52ch; }
.lbb-team-action { margin-top: 1.75rem; }
.lbb-team-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}
.lbb-member {
    margin: 0;
    background: var(--lbb-card);
    border: 1px solid var(--lbb-border);
    border-radius: var(--lbb-radius-card);
    overflow: hidden;
}
.lbb-member-photo { aspect-ratio: 4 / 5; }
.lbb-member-photo img, .lbb-member-photo .lbb-media-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    border: 0;
    min-height: 0;
}
.lbb-member figcaption { padding: 1rem 1.15rem 1.15rem; }
.lbb-member strong { display: block; font-size: 0.98rem; color: var(--lbb-ink); }
.lbb-member figcaption span {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lbb-blue);
}

/* ---------- Referenzen ---------- */
.lbb-refs { position: relative; background: var(--lbb-navy); padding-block: var(--lbb-space); overflow: hidden; }
.lbb-refs-pattern { position: absolute; inset: 0; width: 100%; height: 100%; }
.lbb-refs-inner { position: relative; text-align: center; }
.lbb-refs h2 { color: #fff; }
.lbb-refs-intro { color: var(--lbb-text-invert-soft); max-width: 62ch; margin-inline: auto; }
.lbb-refs-grid {
    list-style: none;
    padding: 0;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.9rem, 1.6vw, 1.4rem);
}
.lbb-rcard {
    background: var(--lbb-blue);
    border-radius: var(--lbb-radius-card);
    padding: 1.4rem 1.4rem 1.6rem;
    text-align: left;
    color: #fff;
    transition: transform 0.18s ease, background-color 0.18s ease;
}
.lbb-rcard:hover { transform: translateY(-4px); background: var(--lbb-blue-dark); }
.lbb-rcard-num { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; opacity: 0.75; margin-bottom: 1.6rem; }
.lbb-rcard-title { font-weight: 700; font-size: 1.15rem; line-height: 1.35; }

/* ---------- USPs + Seit-2007-Box ---------- */
.lbb-usps { padding-block: var(--lbb-space); }
.lbb-usps-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
.lbb-usps-text { max-width: 52ch; }
.lbb-usps-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.6rem; }
.lbb-usps-list li { display: flex; gap: 1.1rem; align-items: flex-start; }
.lbb-usps-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--lbb-radius-control);
    background: var(--lbb-blue);
    color: #fff;
    flex-shrink: 0;
}
.lbb-usps-icon .lbb-icon { width: 17px; height: 17px; }
.lbb-usps-item-copy strong { display: block; color: var(--lbb-ink); font-size: 1rem; margin-bottom: 0.2rem; }
.lbb-usps-item-copy span { font-size: 0.92rem; }
.lbb-usps-box {
    position: sticky;
    top: 96px;
    overflow: hidden;
    background: var(--lbb-blue);
    border-radius: var(--lbb-radius-card);
    color: #fff;
    padding: clamp(2rem, 3.5vw, 2.75rem);
}
.lbb-usps-box-pattern { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lbb-usps-box > :not(.lbb-usps-box-pattern) { position: relative; }
.lbb-usps-box-title {
    font-family: var(--lbb-font-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    color: #fff;
    letter-spacing: 0.02em;
    margin-bottom: 1.5rem;
}
.lbb-usps-box-list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.85rem; }
.lbb-usps-box-list li { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; font-size: 0.98rem; }
.lbb-box-check { display: inline-flex; color: #fff; flex-shrink: 0; opacity: 0.9; }
.lbb-box-check svg { width: 16px; height: 16px; }
.lbb-usps-box-btn { width: 100%; text-align: center; }

/* ---------- Responsive Stacks ---------- */
@media (max-width: 900px) {
    .lbb-intro-inner, .lbb-team-inner, .lbb-usps-inner { grid-template-columns: 1fr; }
    .lbb-gewerke-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lbb-gewerke-head { grid-template-columns: 1fr; align-items: start; }
    .lbb-refs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lbb-usps-box { position: relative; top: auto; }
}
@media (max-width: 560px) {
    .lbb-gewerke-grid { grid-template-columns: 1fr; }
    .lbb-refs-grid { grid-template-columns: 1fr; }
    .lbb-team-cards { grid-template-columns: 1fr; }
}

/* ---------- Kontaktseite ---------- */
/* Weiss auf Wunsch der Kundin (0.48.2, vorher soft aus dem 0.44.0-Audit).
   Der 1px-Rahmen der Formular-Karte traegt jetzt wieder die Containerwirkung;
   falls das der Kundin zu flach wirkt, waere der naechste Zug die Karte selbst
   auf --lbb-bg-soft zu drehen statt den Sektionsgrund. */
.lbb-kontakt { padding-block: var(--lbb-space); }
.lbb-kontakt-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: clamp(1.5rem, 3.5vw, 3rem);
    /* Bewusst NICHT gestreckt (Vergleich 0.44.0): auf gleiche Hoehe gezogen
       wandert der Leerraum in die Box und wirkt dort schlimmer. Der eigentliche
       Grund fuer die fruehere Unwucht war der weisse Grund unter der weissen
       Karte, nicht die Hoehendifferenz. Die kompakte Box neben der langen Karte
       ist redaktionell normal, sobald beide als Objekte lesbar sind. */
    align-items: start;
}
.lbb-kontakt-info {
    position: sticky;
    top: 96px;
    overflow: hidden;
    background: var(--lbb-blue);
    border-radius: var(--lbb-radius-card);
    color: #fff;
    padding: clamp(1.75rem, 3.5vw, 2.5rem);
}
.lbb-kontakt-info > :not(.lbb-usps-box-pattern) { position: relative; }
.lbb-kontakt-info-title {
    color: #fff;
    font-size: 1.15rem;
    margin-bottom: 1.25rem;
}
.lbb-kontakt-phone {
    display: inline-block;
    font-family: var(--lbb-font-display);
    font-size: clamp(1.9rem, 3.5vw, 2.6rem);
    letter-spacing: 0.03em;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 0.75rem;
}
.lbb-kontakt-phone:hover { color: rgba(255, 255, 255, 0.75); }
/* Drei Lautstaerken statt zwei: Nummer laut, E-Mail mittel, Anschrift leise.
   Die E-Mail ist ein gleichrangiger Kontaktweg und verschwand vorher in der
   Adresszeile. */
.lbb-kontakt-mail {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 1rem;
    overflow-wrap: anywhere;
}
.lbb-kontakt-mail:hover { color: rgba(255, 255, 255, 0.75); }
.lbb-kontakt-adresse {
    font-style: normal;
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.6rem;
}
/* Zurueckhaltend: eine Zeile, die man findet, wenn man sie sucht - nicht der
   zweite Knopf neben dem Anruf. */
.lbb-kontakt-maps {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    text-underline-offset: 3px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.lbb-kontakt-maps:hover {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.9);
}
.lbb-kontakt-maps-pin { display: inline-flex; flex-shrink: 0; }
.lbb-kontakt-maps-pin svg { width: 15px; height: 15px; }
.lbb-kontakt-trust {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    display: grid;
    gap: 0.7rem;
    font-size: 0.92rem;
    font-weight: 600;
}
.lbb-kontakt-trust li { display: flex; align-items: center; gap: 0.7rem; }

.lbb-kontakt-card {
    background: var(--lbb-card);
    border: 1px solid var(--lbb-border);
    border-radius: var(--lbb-radius-card);
    padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.lbb-kontakt-intro { max-width: 58ch; }

.lbb-form { margin-top: 1.5rem; }
.lbb-form-web { position: absolute !important; left: -9999px !important; top: -9999px !important; }
.lbb-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.9rem 1.25rem; margin-bottom: 1.25rem; }
.lbb-form-row .lbb-form-field { margin-bottom: 0; }
.lbb-form-field { margin-bottom: 1.25rem; border: 0; padding: 0; margin-inline: 0; min-width: 0; }
fieldset.lbb-form-field legend { padding: 0; margin-left: 0; }
.lbb-form-field label,
.lbb-form-field legend {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--lbb-ink);
    margin-bottom: 0.4rem;
}
.lbb-form-optional { font-weight: 400; color: var(--lbb-text); opacity: 0.65; }
.lbb-form-field input[type="text"],
.lbb-form-field input[type="tel"],
.lbb-form-field input[type="email"],
.lbb-form-field textarea {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    color: var(--lbb-ink);
    background: #fff;
    border: 1px solid #d5dae4;
    border-radius: var(--lbb-radius-control);
    padding: 0.8rem 0.9rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lbb-form-field input:focus,
.lbb-form-field textarea:focus {
    outline: none;
    border-color: var(--lbb-blue);
    box-shadow: 0 0 0 3px rgba(48, 88, 176, 0.15);
}
.lbb-form-field.has-error input,
.lbb-form-field.has-error textarea { border-color: #c2382f; }
.lbb-form-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: #c2382f;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0.4rem 0 0;
    hyphens: none;
}
.lbb-form-error::before {
    content: '!';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    border-radius: 50%;
    background: #c2382f;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}
.lbb-form-alert {
    background: #fdf0ef;
    border: 1px solid #f0c4c0;
    color: #a32d2d;
    border-radius: var(--lbb-radius-control);
    padding: 0.85rem 1.1rem;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 1.25rem 0 0;
    hyphens: none;
}
.lbb-chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 500px; }
.lbb-chip { position: relative; }
.lbb-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.lbb-chip span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--lbb-text);
    background: var(--lbb-bg-soft);
    border: 1px solid var(--lbb-border);
    border-radius: 999px;
    padding: 0.35rem 1.1rem;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lbb-chip:hover span { border-color: var(--lbb-blue); color: var(--lbb-blue); }
.lbb-chip input:checked + span { background: var(--lbb-blue); border-color: var(--lbb-blue); color: #fff; }
.lbb-chip input:focus-visible + span { outline: 3px solid var(--lbb-blue); outline-offset: 2px; }
.lbb-form-footer { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.lbb-form-privacy { flex: 1; min-width: 240px; font-size: 0.78rem; color: var(--lbb-text); margin: 0; hyphens: none; }
.lbb-form-footer .lbb-button { flex-shrink: 0; }

.lbb-form-success { text-align: center; padding: clamp(1.5rem, 4vw, 3rem) 1rem; }
.lbb-form-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--lbb-blue);
    color: #fff;
    margin-bottom: 1.25rem;
    box-shadow: 0 12px 30px rgba(48, 88, 176, 0.35);
    animation: lbb-pop 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.25) both;
}
.lbb-form-success-icon svg { width: 28px; height: 28px; }
.lbb-form-success h2 { animation: lbb-rise 0.45s ease 0.12s both; }
.lbb-form-success p { max-width: 46ch; margin-inline: auto; animation: lbb-rise 0.45s ease 0.22s both; }
.lbb-form-success-action { margin-top: 1.5rem; animation: lbb-rise 0.45s ease 0.32s both; }
@keyframes lbb-pop {
    0% { transform: scale(0.4); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes lbb-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
    .lbb-kontakt-inner { grid-template-columns: 1fr; }
    .lbb-kontakt-info { position: static; }
    .lbb-form-footer { flex-direction: column; align-items: stretch; }
    .lbb-form-footer .lbb-button { width: 100%; }
}

/* ---------- 404 ---------- */
.lbb-404 {
    position: relative;
    overflow: hidden;
    background: var(--lbb-navy);
    padding-block: clamp(5rem, 12vw, 9rem);
    text-align: center;
}
.lbb-404-inner { position: relative; }
.lbb-404-code {
    font-family: var(--lbb-font-display);
    font-size: clamp(5rem, 14vw, 9rem);
    line-height: 1;
    color: var(--lbb-blue);
    margin: 0 0 0.5rem;
    letter-spacing: 0.04em;
}
.lbb-404 h1 { color: #fff; margin-bottom: 0.4em; }
.lbb-404-text {
    color: var(--lbb-text-invert-soft);
    max-width: 52ch;
    margin: 0 auto 2rem;
}
.lbb-404-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Textseiten (Impressum/Datenschutz) ---------- */
.lbb-richtext { padding-block: var(--lbb-space); }
/* Linksbuendig wie jede andere Sektion. Vorher trug dasselbe Element beide
   Klassen: die 72ch machten den Container schmal, und der zentriert sich per
   auto-Rand - deshalb stand der Text mittig statt an der Kante (0.47.0). */
.lbb-prose { max-width: 72ch; }
.lbb-prose h2 { margin-top: 1.6em; }
.lbb-prose h3 { margin-top: 1.4em; }

/* ---------- Phase-1-Platzhalter ---------- */
.lbb-placeholder {
    padding: var(--lbb-space) 0;
    border-bottom: 1px dashed var(--lbb-border);
    background: repeating-linear-gradient(-45deg, transparent, transparent 12px, rgba(48, 88, 176, 0.03) 12px, rgba(48, 88, 176, 0.03) 24px);
}
.lbb-placeholder-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lbb-blue);
    background: rgba(48, 88, 176, 0.08);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    margin-bottom: 0.75rem;
}
.lbb-placeholder h2 { margin: 0; }

/* ---------- Scroll-Reveal (nur mit JS aktiv, reduced-motion-sicher) ---------- */
html.lbb-js .lbb-reveal {
    opacity: 0;
    /* Knapper Weg, schneller Start, weiches Auslaufen: die Bewegung soll
       auffallen wie ein Blatt Papier, das sich setzt - nicht wie ein Effekt. */
    transform: translateY(14px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease;
    transition-delay: var(--lbb-reveal-delay, 0s);
    will-change: opacity, transform;
}
html.lbb-js .lbb-reveal.is-inview { will-change: auto; }
html.lbb-js .lbb-reveal.is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html.lbb-js .lbb-reveal { opacity: 1; transform: none; }
}

/* ---------- Mobile Kontakt-Leiste ---------- */
.lbb-callbar { display: none; }
@media (max-width: 900px) {
    .lbb-callbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 70;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px clamp(1rem, 4vw, 1.5rem) calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.94);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-top: 1px solid var(--lbb-border);
    }
    .lbb-callbar .lbb-button { flex: 1; min-width: 0; padding: 0.9rem 0.75rem; }
    .lbb-callbar-top {
        flex: 0 0 auto;
        width: 47px;
        height: 47px;
        border: 1px solid var(--lbb-border);
        border-radius: var(--lbb-radius-control);
        background: #fff;
        color: var(--lbb-ink);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.18s ease, color 0.18s ease;
    }
    .lbb-callbar-top:hover { background: var(--lbb-bg-soft); }
    .lbb-callbar-top svg { width: 18px; height: 18px; }
    .lbb-totop { display: none; }
    /* Platz fuer die fixe Callbar: auf dem Footer statt body, damit kein
       spaeteres Fremd-CSS (z. B. WP Global Styles) die Regel ueberstimmt. */
    .lbb-footer { padding-bottom: 84px; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}
.lbb-button-ghost { background: #fff; color: var(--lbb-blue); border-color: var(--lbb-border); }
.lbb-button-ghost:hover { background: var(--lbb-bg-soft); color: var(--lbb-blue-dark); }

/* ---------- Scroll-nach-oben ---------- */
.lbb-totop {
    position: fixed;
    right: clamp(1rem, 3vw, 1.75rem);
    bottom: clamp(1rem, 3vw, 1.75rem);
    z-index: 60;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--lbb-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(24, 32, 48, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background-color 0.18s ease;
}
.lbb-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.lbb-totop:hover { background: var(--lbb-blue-dark); transform: translateY(-2px); }
.lbb-totop svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
    .lbb-totop, .lbb-totop:hover { transform: none; }
}

/* ---------- Footer (nach Design: Marke | Leistungen | Kontakt) ---------- */
.lbb-footer { background: var(--lbb-bg-soft); }
.lbb-footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 5vw, 4rem);
    padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem;
}
.lbb-footer-logo {
    width: 150px;
    height: auto;
    margin-bottom: 1rem;
}
.lbb-footer-brand p {
    font-size: 0.9rem;
    color: var(--lbb-text);
    opacity: 0.75;
    max-width: 32ch;
    margin: 0;
}
.lbb-footer-heading {
    font-family: var(--lbb-font-head);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lbb-ink);
    margin: 0 0 1.1rem;
}
.lbb-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: var(--lbb-text);
}
.lbb-footer-list a { color: var(--lbb-text); }
.lbb-footer-list a:hover { color: var(--lbb-blue); }
.lbb-footer-gap { margin-top: 0.75rem; }
.lbb-footer-meta {
    grid-column: 1 / -1;
    border-top: 1px solid var(--lbb-border);
    padding-top: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.lbb-footer-meta p { font-size: 0.85rem; margin: 0; color: var(--lbb-text); }
.lbb-footer-legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.25rem;
    font-size: 0.85rem;
}
.lbb-footer-legal a { color: var(--lbb-text); }
.lbb-footer-legal a:hover { color: var(--lbb-blue); }

@media (max-width: 800px) {
    .lbb-footer-inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- Projektablauf (0.18.0) ---------- */
.lbb-prozess { background: var(--lbb-bg-soft); padding-block: var(--lbb-space); }
.lbb-prozess.is-white { background: var(--lbb-bg); }
.lbb-prozess.is-white .lbb-prozess-step { background: var(--lbb-bg-soft); border-color: transparent; }
.lbb-prozess-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.lbb-prozess-head h2 { margin-bottom: 0; max-width: 22ch; }
.lbb-prozess-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}
.lbb-prozess-step {
    background: var(--lbb-card);
    border: 1px solid var(--lbb-border);
    border-radius: var(--lbb-radius-card);
    padding: clamp(1.5rem, 3vw, 2rem);
}
.lbb-prozess-num {
    display: inline-block;
    font-family: var(--lbb-font-display);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--lbb-blue);
    margin-bottom: 0.9rem;
}
.lbb-prozess-step h3 { margin-bottom: 0.35em; }
.lbb-prozess-step p { margin: 0; font-size: 0.95rem; }
@media (max-width: 900px) {
    .lbb-prozess-grid { grid-template-columns: 1fr; }
    .lbb-prozess-step { display: grid; grid-template-columns: auto 1fr; column-gap: 1.1rem; }
    .lbb-prozess-num { grid-row: 1 / span 2; margin-bottom: 0; font-size: 2rem; }
}

/* ---------- CTA-Band: Telefonnummer unter dem Button (0.18.0) ---------- */
.lbb-cta-tel {
    margin: 0.65rem 0 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
}
.lbb-cta-tel a { color: #fff; font-weight: 700; white-space: nowrap; }
.lbb-cta-tel a:hover { color: #fff; text-decoration: underline; }

/* ---------- Leistungs-Schwerpunkt-Baender (0.19.0) ---------- */
.lbb-lband { padding-block: var(--lbb-space); }
.lbb-lband-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.lbb-lband.is-flipped .lbb-lband-media { order: 2; }
.lbb-lband.is-flipped .lbb-lband-copy { order: 1; }
.lbb-lband-media { position: relative; }
.lbb-lband-media .lbb-media-placeholder { min-height: 340px; }
.lbb-lband-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--lbb-radius-card);
}
.lbb-lband-copy h2 { max-width: 18ch; }
.lbb-lband-text { max-width: 52ch; }
@media (max-width: 900px) {
    .lbb-lband-inner { grid-template-columns: 1fr; gap: 1.75rem; }
    .lbb-lband.is-flipped .lbb-lband-media { order: 0; }
    .lbb-lband.is-flipped .lbb-lband-copy { order: 0; }
    .lbb-lband-media .lbb-media-placeholder { min-height: 220px; }
}

/* ---------- Haeufige Fragen (0.22.0) ---------- */
.lbb-faq { background: var(--lbb-bg-soft); padding-block: var(--lbb-space); }
.lbb-faq-inner { max-width: 860px; margin-inline: auto; }
.lbb-faq-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.lbb-faq-head h2 { margin-bottom: 0; }
.lbb-faq-item {
    background: var(--lbb-card);
    border: 1px solid var(--lbb-border);
    border-radius: var(--lbb-radius-card);
    margin-bottom: 0.75rem;
}
.lbb-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.35rem;
    font-weight: 700;
    color: var(--lbb-ink);
    cursor: pointer;
    list-style: none;
}
.lbb-faq-item summary::-webkit-details-marker { display: none; }
.lbb-faq-item summary:hover { color: var(--lbb-blue); }
.lbb-faq-chevron {
    flex-shrink: 0;
    display: inline-flex;
    width: 22px;
    height: 22px;
    color: var(--lbb-blue);
    transition: transform 0.2s ease;
}
.lbb-faq-chevron svg { width: 100%; height: 100%; }
.lbb-faq-item[open] .lbb-faq-chevron { transform: rotate(180deg); }
.lbb-faq-item > p { margin: 0; padding: 0 1.35rem 1.15rem; max-width: 62ch; }

/* ---------- FAQ: weisse Variante + sanftes Auf-/Zuklappen (0.22.1) ---------- */
.lbb-faq.is-white { background: var(--lbb-bg); }
.lbb-faq.is-white .lbb-faq-item { background: var(--lbb-bg-soft); border-color: transparent; }