/* =========================================================
   TINAX — FAHRZEUGBESCHRIFTUNG GOOGLE-ADS LANDINGPAGE
   Standalone stylesheet — independent from the main site.
   Aesthetic: bright & warm · Tinax-lime accent · light base
   Type: Syne (display) + Hanken Grotesk (body)
   ========================================================= */

:root {
    --bg:          #f8f8f6;   /* einheitlicher heller Hintergrund */
    --bg-2:        #ffffff;   /* white sections / cards */
    --bg-3:        #f8f8f6;   /* neutral light gray band */
    --ink:         #15190f;   /* near-black green (dark stage / footer) */
    --ink-2:       #1f2417;
    --surface:     #ffffff;
    --line:        #e2e6d8;
    --line-2:      #eef1e7;
    --line-dark:   rgba(255,255,255,0.10);
    --text:        #2a2f22;
    --text-muted:  #6c7263;
    --text-dim:    #97987f;
    --on-dark:     #e8ebde;
    --on-dark-mut: #b8beac;
    --acc:         #a7be15;   /* Tinax lime */
    --acc-bright:  #bcd21c;
    --acc-soft:    #eaf2b8;   /* pale lime for tints */
    --acc-ink:     #14180b;   /* text on lime */
    --danger:      #d2453a;
    --r-sm: 12px;
    --r-md: 18px;
    --r-lg: 26px;
    --r-xl: 34px;
    --r-full: 999px;
    --pad-x: clamp(20px, 5vw, 64px);
    --maxw: 1640px;
    --maxw-wide: 1640px;
    --shadow: 0 30px 70px -28px rgba(25,29,18,0.28);
    --shadow-soft: 0 16px 40px -18px rgba(25,29,18,0.18);
    --display: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    --body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.lp {
    font-family: var(--body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.lp-container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.lp-container--wide { max-width: var(--maxw-wide); }

/* =========================================================
   TRUST STRIP — Siegel-Reihe oberhalb des Formulars
   ========================================================= */
.lp-trust-strip {
    background: var(--ink); color: var(--on-dark);
    padding: 36px 0; position: relative; overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.lp-trust-strip::before {
    content: ""; position: absolute; inset: 0;
    background:
        repeating-linear-gradient(90deg, transparent 0 80px, rgba(167,190,21,0.04) 80px 81px),
        radial-gradient(ellipse 700px 200px at 50% 0%, rgba(167,190,21,0.12), transparent 70%);
    pointer-events: none;
}
.lp-trust-strip-inner {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    gap: 22px clamp(28px, 4vw, 60px); flex-wrap: wrap;
    max-width: 1340px;
    margin: 0 auto;
}
.lp-seal {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 6px 0;
    color: var(--on-dark);
}
.lp-seal-text { display: flex; flex-direction: column; line-height: 1.15; }
.lp-stars { color: #fbbc05; letter-spacing: 0.06em; font-size: 1rem; line-height: 1; }
.lp-seal-meta { font-size: 0.85rem; color: var(--on-dark-mut); margin-top: 4px; }
.lp-seal-meta strong { color: var(--on-dark); font-weight: 800; }
.lp-seal--simple { font-size: 0.88rem; line-height: 1.3; color: var(--on-dark); }
.lp-seal--simple strong { display: block; color: var(--on-dark); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.005em; margin-bottom: 2px; }
.lp-seal--simple small { color: var(--on-dark-mut); font-size: 0.85rem; }
.lp-seal-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(167,190,21,0.14); color: var(--acc);
    flex-shrink: 0;
}
@media (max-width: 940px) {
    .lp-trust-strip-inner { justify-content: flex-start; gap: 22px 40px; }
    .lp-seal { flex-basis: calc(50% - 20px); }
}
@media (max-width: 720px) {
    /* Handyansicht: Block als Spalte, ganzer Block zentriert, aber Items
       linksbündig — dadurch sitzen alle Icons in einer Reihe untereinander
       und die Texte starten alle am gleichen X-Punkt. */
    .lp-trust-strip-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 4px;
    }
    .lp-seal {
        flex-basis: auto !important;
        width: auto;
        justify-content: flex-start;
        text-align: left;
    }
}
@media (max-width: 520px) {
    .lp-trust-strip { padding: 28px 0; }
    /* Keine flex-basis-100% mehr — Items behalten ihre Inhalts-Breite,
       damit alle Icons exakt am gleichen X starten. */
    .lp-trust-strip-inner { gap: 20px; }
}

/* =========================================================
   ANFRAGE — Split-Layout: Trust-Spalte links, Wizard rechts
   ========================================================= */
.lp-anfrage,
.lp-anfrage.is-dark { position: relative; background: #10130B; overflow: hidden; }
/* Sanfter Glow hinter dem Anfrageformular — wirkt wie ein dezentes Spotlight auf der Wizard-Karte */
.lp-anfrage::before {
    content: "";
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(2200px, 130vw);
    height: min(1400px, 110%);
    background: radial-gradient(ellipse at center,
        rgba(167,190,21,0.28) 0%,
        rgba(167,190,21,0.18) 20%,
        rgba(167,190,21,0.09) 40%,
        rgba(167,190,21,0.03) 60%,
        transparent 80%);
    pointer-events: none;
    z-index: 0;
}
.lp-anfrage > * { position: relative; z-index: 1; }
.lp-anfrage .lp-stripe--lime {
    position: absolute; left: -20%; right: -20%; top: -120px;
    height: 240px; transform: rotate(-3.5deg); transform-origin: 50% 50%;
    background: linear-gradient(90deg, transparent 0%, var(--acc) 30%, var(--acc-bright) 70%, transparent 100%);
    opacity: 0.10; pointer-events: none;
    z-index: 0;
}
/* Spiegelnder Streifen unten — gleiche Optik, andere Richtung */
.lp-anfrage .lp-stripe--bottom {
    top: auto; bottom: -120px;
    transform: rotate(3.5deg);
    opacity: 0.08;
}
/* Lange diagonale Akzentlinie rechts (vom oberen Rand schräg nach unten-rechts) */
.lp-anfrage-diagonal {
    position: absolute;
    top: -10%;
    right: 6%;
    width: 2px;
    height: 130%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(167,190,21,0.55) 18%,
        rgba(167,190,21,0.75) 50%,
        rgba(167,190,21,0.55) 82%,
        transparent 100%);
    transform: rotate(14deg);
    transform-origin: top center;
    box-shadow: 0 0 24px rgba(167,190,21,0.35);
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 860px) {
    /* Auf Mobile etwas dezenter und weiter außen, damit's nicht über den Inhalt geht */
    .lp-anfrage-diagonal { right: 2%; opacity: 0.55; }
}
.lp-anfrage-stack {
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(28px, 4vw, 44px);
    position: relative; z-index: 1;
}
.lp-anfrage-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}
.lp-anfrage-head .lp-eyebrow { display: inline-flex; }
.lp-anfrage-head h2 {
    font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.04; letter-spacing: -0.025em;
    margin: 18px 0 16px; color: var(--text);
}
.lp-anfrage.is-dark .lp-anfrage-head h2 { color: var(--on-dark); }
.lp-anfrage-lead {
    color: var(--text-muted); font-size: 1.05rem; line-height: 1.6;
    margin: 0 auto;
    max-width: 580px;
}
.lp-anfrage.is-dark .lp-anfrage-lead { color: var(--on-dark-mut); }
/* Wizard mittig, mit angenehmer Lesebreite */
.lp-anfrage-stack > .lp-wizard {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.lp-trust-list {
    list-style: none; padding: 0; margin: 0 0 28px;
    display: flex; flex-direction: column; gap: 14px;
}
.lp-trust-list li {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 0.98rem; color: var(--text); line-height: 1.45;
}
.lp-trust-list li svg { color: var(--acc); flex-shrink: 0; margin-top: 2px; background: var(--acc-soft); border-radius: 50%; padding: 3px; }
.lp-trust-list strong { color: var(--text); font-weight: 700; }

.lp-google-card {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 16px 22px; background: var(--bg-2); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--shadow-soft);
    max-width: 360px;
}
.lp-google-card-body { line-height: 1.25; }
.lp-google-card-rating { display: flex; align-items: baseline; gap: 8px; }
.lp-google-card-rating strong { font-size: 1.6rem; font-weight: 800; color: var(--text); font-family: var(--display); letter-spacing: -0.02em; }
.lp-google-card-stars { color: #fbbc05; letter-spacing: 0.06em; font-size: 0.95rem; }
.lp-google-card-meta { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }

/* Wizard mittig, mit angenehmer Lesebreite und differenzierterer Karte */
.lp-anfrage .lp-wizard {
    margin: 0 auto; width: 100%; max-width: 760px;
    background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.05);
    padding: clamp(28px, 4vw, 44px);
}

/* (Papier-Grain-Overlay entfernt — verbessert Scroll-Performance) */

/* -------- Buttons -------- */
.lp-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 28px; font-family: var(--body); font-size: 1rem; font-weight: 700;
    border-radius: var(--r-full); border: 1px solid transparent; cursor: pointer;
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, background .25s ease, color .25s ease;
    white-space: nowrap; line-height: 1;
}
.lp-btn svg { transition: transform .3s cubic-bezier(.4,0,.2,1); }
.lp-btn:hover svg { transform: translate(3px,-3px); }
.lp-btn--primary { background: var(--acc); color: var(--acc-ink); }
.lp-btn--primary:hover { transform: translateY(-2px); background: var(--acc-bright); box-shadow: 0 16px 34px -12px rgba(167,190,21,0.65); }
.lp-btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.lp-btn--ghost:hover { background: #fff; border-color: #cdd2c2; transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.lp-btn--lg { padding: 19px 34px; font-size: 1.08rem; }
.lp-btn--block { width: 100%; justify-content: center; }
/* ghost button on dark contexts */
.lp-on-dark .lp-btn--ghost, .lp-cta .lp-btn--ghost { color: var(--acc-ink); border-color: rgba(20,24,11,0.25); }
.lp-on-dark .lp-btn--ghost:hover, .lp-cta .lp-btn--ghost:hover { background: rgba(20,24,11,0.08); border-color: rgba(20,24,11,0.4); }

/* -------- Eyebrow -------- */
.lp-eyebrow {
    display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: var(--r-full);
}
.lp-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }

/* =========================================================
   HEADER
   ========================================================= */
.lp-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: flex-start;
    padding: 18px var(--pad-x);
    background: #F8F8F6; /* vom User vorgegeben — light theme */
    transition: background .3s ease, padding .3s ease, border-color .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.4,0,.2,1);
    border-bottom: 1px solid transparent;
}
.lp-header.is-hidden { transform: translateY(-100%); }
.lp-header.is-scrolled {
    background: rgba(248,248,246,0.94);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom-color: rgba(0,0,0,0.06); padding: 12px var(--pad-x); box-shadow: 0 8px 30px -22px rgba(0,0,0,0.18);
}
.lp-logo { display: flex; align-items: center; height: 52px; transition: height .3s ease; }
.lp-header.is-scrolled .lp-logo { height: 44px; }
.lp-logo img { height: 100%; width: auto; }
@media (max-width: 720px) {
    .lp-logo { height: 44px; }
    .lp-header.is-scrolled .lp-logo { height: 38px; }
}

/* =========================================================
   HERO (dark · premium)
   ========================================================= */
.lp-hero {
    position: relative; overflow: hidden; color: var(--on-dark);
    background:
        radial-gradient(1100px 640px at 86% -4%, rgba(167,190,21,0.22), transparent 50%),
        radial-gradient(760px 480px at -8% 100%, rgba(167,190,21,0.08), transparent 55%),
        linear-gradient(180deg, #12150d 0%, #0b0e07 72%);
}
.lp-hero-grid-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 75%);
}
.lp-hero-arc {
    position: absolute; z-index: 0; right: -180px; top: 40px; width: 620px; height: 620px;
    border-radius: 50%; border: 1.5px solid rgba(167,190,21,0.30);
    box-shadow: inset 0 0 120px rgba(167,190,21,0.10);
    pointer-events: none; opacity: 0.5;
}
@media (max-width: 940px) { .lp-hero-arc { display: none; } }

/* --- Split-Hero: linke Hälfte Text, rechte Hälfte Bild (vollflächig) --- */
.lp-hero--split {
    padding: 0; /* Padding wandert in die Content-Spalte */
}
.lp-hero--split .lp-hero-inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: clamp(560px, 78vh, 760px);
    gap: 0;
}
.lp-hero-content-wrap {
    display: flex; align-items: center;
    padding: clamp(125px, 17vh, 175px) clamp(24px, 4vw, 64px) clamp(50px, 7vw, 80px);
    padding-left: max(var(--pad-x), calc((100vw - var(--maxw)) / 2 + var(--pad-x)));
}
.lp-hero-content { max-width: 560px; width: 100%; }

/* Volle Höhe + bis an den rechten Bildschirmrand */
.lp-hero-visual {
    position: relative;
    overflow: hidden;
    min-height: 100%;
}
.lp-hero-visual img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center center;
    display: block;
}
/* Sanfter Übergang vom dunklen Text-Hintergrund ins Foto */
.lp-hero-visual::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(11,14,7,0.55) 0%, rgba(11,14,7,0) 18%);
}

.lp-hero .lp-eyebrow { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.13); color: var(--on-dark); }
.lp-hero h1 {
    font-family: var(--display); font-weight: 800;
    font-size: clamp(1.7rem, 6.5vw, 3.2rem); line-height: 1.08; letter-spacing: -0.03em;
    margin: 30px 0 28px; color: var(--on-dark);
}
.lp-hero-kicker {
    display: block; font-family: var(--body); font-weight: 600;
    font-size: clamp(1rem, 1.4vw, 1.25rem); letter-spacing: -0.01em; color: var(--on-dark-mut);
    margin-bottom: 8px;
}
.lp-hero h1 em { font-style: normal; color: var(--acc); }

/* ========== MAGAZINE-COVER H1 ==========
   Drei-Tier-Treatment: kleine Pre-Zeile, RIESIGES Schlüsselwort, optionale Post-Zeile.
   Auf beiden LPs (Sonnenschutz + Fahrzeug) gleich groß.
   Container wird auf 660px verbreitert (siehe HTML: .lp-hero-content--bigh1),
   damit das Schlüsselwort Platz bekommt. */
.lp-hero-content--bigh1 { max-width: 660px !important; }
.lp-hero h1:has(.lp-h1-main),
.lp-hero h1.lp-h1--magazine {
    line-height: 0.95;
    letter-spacing: -0.04em;
    font-weight: 800;
    text-wrap: balance;
    display: block;
}
.lp-h1-pre,
.lp-h1-post {
    display: block;
    font-family: var(--display);
    font-size: clamp(1.4rem, 2.6vw, 2.2rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--on-dark);
    opacity: 0.88;
}
.lp-h1-pre  { margin-bottom: clamp(8px, 1vw, 14px); }
.lp-h1-post { margin-top: clamp(8px, 1vw, 14px); }
.lp-h1-main {
    display: block;
    font-family: var(--display);
    font-style: normal;
    font-size: clamp(2.8rem, 7vw, 5.6rem);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.05em;
    color: var(--acc);
    /* Wenn der Container zu schmal: an Komposita-Grenzen (<wbr>) brechen,
       NICHT mitten im Wort */
    overflow-wrap: break-word;
    hyphens: auto;
}
@media (max-width: 768px) {
    .lp-h1-pre,
    .lp-h1-post {
        font-size: clamp(1.1rem, 4vw, 1.4rem) !important;
    }
    .lp-h1-main {
        font-size: clamp(2.2rem, 9vw, 3.4rem) !important;
        line-height: 0.95 !important;
        letter-spacing: -0.04em !important;
    }
}
.lp-hero-lead { font-size: clamp(1rem, 1.25vw, 1.18rem); color: var(--on-dark-mut); max-width: 500px; line-height: 1.6; }
.lp-hero-lead strong { color: var(--on-dark); font-weight: 700; }
.lp-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.lp-hero .lp-btn--ghost { color: var(--on-dark); border-color: rgba(255,255,255,0.16); }
.lp-hero .lp-btn--ghost:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.32); box-shadow: none; }

/* Google-Bewertung im Hero, direkt unter den Buttons */
.lp-hero-google {
    display: inline-flex; align-items: center; gap: 12px;
    margin-top: 34px;
    padding: 10px 16px 10px 14px;
    border: 1px solid rgba(255,255,255,0.13);
    background: rgba(255,255,255,0.04);
    border-radius: 14px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    color: inherit;
    text-decoration: none;
    transition: background .2s, border-color .2s, transform .2s;
    cursor: pointer;
}
.lp-hero-google:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.22);
    transform: translateY(-1px);
}
.lp-hero-google:focus-visible {
    outline: 2px solid var(--acc);
    outline-offset: 2px;
}
.lp-hero-google-g { flex-shrink: 0; }
.lp-hero-google-tx { display: flex; flex-direction: column; line-height: 1.15; }
.lp-hero-google-row { display: inline-flex; align-items: center; gap: 8px; }
.lp-hero-google-row .lp-stars { color: #fbbc05; letter-spacing: 0.04em; font-size: 0.95rem; }
.lp-hero-google-row strong { color: var(--on-dark); font-weight: 800; font-size: 0.96rem; }
.lp-hero-google-of { color: var(--on-dark-mut); font-size: 0.86rem; }
.lp-hero-google-tx small { color: var(--on-dark-mut); font-size: 0.76rem; margin-top: 3px; letter-spacing: 0.005em; }

/* --- Tablet ------------------------------------------------ */
@media (max-width: 1100px) {
    .lp-hero-content-wrap { padding-left: clamp(20px, 4vw, 36px); }
}
/* --- Mobile: stapeln (Text oben, Bild unten) -------------- */
@media (max-width: 860px) {
    .lp-hero--split .lp-hero-inner {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .lp-hero-content-wrap {
        padding: clamp(82px, 11vh, 120px) clamp(18px, 5vw, 28px) clamp(28px, 5vw, 40px);
    }
    .lp-hero-visual {
        height: clamp(280px, 50vw, 460px);
        min-height: 0;
    }
    .lp-hero-visual::before {
        background: linear-gradient(180deg, rgba(11,14,7,0.55) 0%, rgba(11,14,7,0) 18%);
    }
    .lp-hero-google { margin-top: 30px; }
}

/* floating Google rating badge */
.lp-hero-badge {
    position: absolute; z-index: 5; right: -14px; bottom: -16px;
    display: flex; align-items: center; gap: 11px;
    padding: 12px 16px; border-radius: 16px;
    background: #fff; color: var(--ink);
    box-shadow: 0 24px 46px -16px rgba(0,0,0,0.55);
}
.lp-hero-badge-body { display: flex; flex-direction: column; line-height: 1.12; }
.lp-hero-badge-stars { color: #fbbc05; font-size: 0.88rem; letter-spacing: 0.05em; }
.lp-hero-badge-text { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }
.lp-hero-badge-text strong { color: var(--ink); font-weight: 800; }



/* =========================================================
   DARK SECTION MODIFIER (.is-dark)
   ========================================================= */
.lp-section.is-dark, .lp-logos.is-dark { background: var(--ink); }
.lp-section.is-dark .lp-section-head h2, .lp-section.is-dark .lp-section-head h2 .hl { color: var(--on-dark); }
.lp-section.is-dark .lp-section-head h2 .hl { color: var(--acc); }
.lp-section.is-dark .lp-section-head p { color: var(--on-dark-mut); }
.lp-section.is-dark .lp-section-head p strong { color: var(--on-dark); }
.lp-section.is-dark .lp-eyebrow,
.lp-logos.is-dark .lp-logos-label { color: var(--on-dark); }
.lp-section.is-dark .lp-eyebrow { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.13); }
/* references on dark */
.lp-refs.is-dark .lp-refitem { border-color: rgba(255,255,255,0.09); }
/* logo strip on dark */
.lp-logos.is-dark { border-top-color: rgba(255,255,255,0.08); border-bottom-color: rgba(255,255,255,0.08); }

/* =========================================================
   SECTION SHELL
   ========================================================= */
.lp-section { padding: clamp(88px, 10vw, 144px) 0; position: relative; }
.lp-section-head { max-width: 720px; margin: 0 auto clamp(60px,7.5vw,84px); text-align: center; }
.lp-section-head .lp-eyebrow { margin-bottom: 22px; }
.lp-section-head h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2.1rem,4.6vw,3.5rem); line-height: 1.0; letter-spacing: -0.035em; color: var(--text); }
.lp-section-head h2 .hl { color: var(--acc); }
.lp-section-head p { margin-top: 22px; font-size: 1.08rem; color: var(--text-muted); line-height: 1.6; }

/* =========================================================
   ANFRAGE — form (dark band, white wizard card on top)
   ========================================================= */
.lp-anfrage { background: #10130B; }
.lp-wizard {
    max-width: 760px; margin: 0 auto; background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow);
    padding: clamp(30px, 5vw, 50px); position: relative;
    overflow: hidden;
    min-width: 0;
}
/* Wenn ein Dropdown offen ist, Overflow temporär freigeben damit das Panel nicht
   am Wizard-Rand abgeschnitten wird. JS setzt .has-open-dropdown beim Öffnen. */
.lp-wizard.has-open-dropdown { overflow: visible; }
.lp-wizard-progress { margin-bottom: 34px; }
.lp-wizard-bar { height: 6px; border-radius: var(--r-full); background: #e9ece2; overflow: hidden; }
.lp-wizard-bar-fill { display: block; height: 100%; width: 25%; border-radius: var(--r-full); background: var(--acc); transition: width .45s cubic-bezier(.4,0,.2,1); }
.lp-wizard-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 0.82rem; font-weight: 600; color: var(--text-dim); }
.lp-wizard-meta b { color: var(--ink); }

.lp-step { display: none; min-width: 0; }
.lp-step.is-active { display: block; animation: lp-step-in .4s ease both; }
@keyframes lp-step-in { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: translateY(0);} }
.lp-step-kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #7e8a2e; margin-bottom: 8px; }
.lp-step-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem,2.6vw,2rem); line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); }
.lp-step-hint { color: var(--text-muted); margin: 8px 0 26px; font-size: 0.98rem; }

.lp-options { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 26px; }
@media (max-width: 540px) { .lp-options { grid-template-columns: 1fr; } }
.lp-opt { position: relative; cursor: pointer; display: block; }
.lp-opt input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: 0; padding: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}
.lp-opt-box { display: flex; align-items: center; gap: 13px; height: 100%; padding: 17px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: #fbfcf8; transition: border-color .2s, background .2s, transform .2s; }
.lp-opt:hover .lp-opt-box { border-color: #c2c8b4; transform: translateY(-2px); }
.lp-opt input:checked + .lp-opt-box { border-color: var(--acc); background: var(--acc-soft); }
.lp-opt input:focus-visible + .lp-opt-box { outline: 2px solid var(--acc); outline-offset: 2px; }
.lp-opt-ic { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); color: var(--ink); }
.lp-opt input:checked + .lp-opt-box .lp-opt-ic { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.lp-opt-tx { display: flex; flex-direction: column; gap: 1px; }
.lp-opt-tx strong { font-weight: 700; font-size: 0.98rem; }
.lp-opt-tx small { color: var(--text-muted); font-size: 0.84rem; line-height: 1.3; }

.lp-fieldgrid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-bottom: 26px; }
@media (max-width: 540px) { .lp-fieldgrid { grid-template-columns: 1fr; } }
.lp-field { display: flex; flex-direction: column; gap: 7px; }
.lp-field--full { grid-column: 1 / -1; }
.lp-field label { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.lp-field input, .lp-field textarea { width: 100%; padding: 13px 15px; font-family: var(--body); font-size: 1rem; color: var(--ink); background: #fbfcf8; border: 1.5px solid var(--line); border-radius: var(--r-sm); transition: border-color .2s, background .2s; }
.lp-field input:focus, .lp-field textarea:focus { outline: none; border-color: var(--acc); background: #fff; }
.lp-field textarea { resize: vertical; min-height: 80px; }
.lp-inline { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 17px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: #fbfcf8; margin-bottom: 26px; }

.lp-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px;
    border: 1.5px dashed #cdd2bf;
    border-radius: var(--r-md);
    background: #fbfcf8;
    padding: 28px 22px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .2s;
    margin-bottom: 16px;
    min-height: 180px;
}
.lp-drop:hover, .lp-drop.is-drag { border-color: var(--acc); background: var(--acc-soft); transform: translateY(-1px); }
.lp-drop .lp-drop-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--bg-2); color: #5f6e08;
    border: 1.5px solid var(--line);
    flex-shrink: 0;
    line-height: 0;
}
.lp-drop .lp-drop-ic svg { display: block; }
.lp-drop strong {
    display: block;
    font-size: 1rem;
    color: var(--text);
    font-weight: 600;
    line-height: 1.3;
}
.lp-drop span {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.45;
    max-width: 36ch;
}
.lp-drop input { display: none; }
.lp-filelist { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; padding: 0; max-width: 100%; }
.lp-filelist:empty { margin: 0; }
.lp-filelist li {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 14px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 0.9rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.lp-filelist li .lp-file-name {
    display: inline-flex; align-items: center; gap: 9px;
    min-width: 0; flex: 1 1 0;
    overflow: hidden;
}
.lp-filelist li .lp-file-name svg { flex-shrink: 0; }
.lp-filelist li .lp-file-name-tx {
    min-width: 0; flex: 1 1 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: block;
}
.lp-filelist li button {
    background: none; border: none; cursor: pointer;
    color: #9aa094; font-size: 1.1rem; line-height: 1; padding: 2px 6px;
    flex-shrink: 0;
}
.lp-filelist li button:hover { color: var(--danger); }

.lp-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 0.86rem; color: var(--text-muted); line-height: 1.45; cursor: pointer; }
.lp-consent input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--acc); flex-shrink: 0; }
.lp-consent a { color: var(--ink); text-decoration: underline; }

.lp-field input.is-invalid, .lp-field textarea.is-invalid { border-color: var(--danger); background: #fff5f4; }
.lp-options.is-invalid { outline: 1.5px dashed var(--danger); outline-offset: 8px; border-radius: var(--r-sm); }
.lp-consent.is-invalid { color: var(--danger); }

.lp-step-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
/* Mobile: Wizard-Padding ist 26px, der Primärbutton landet rechts knapp am Rand.
   Auf engen Phones (≤540) Buttons untereinander — Hauptaktion oben, Zurück darunter.
   Beide nehmen die volle Breite und stehen mit Luft links und rechts. */
@media (max-width: 540px) {
    .lp-step-nav {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 12px;
        margin-top: 12px;
    }
    .lp-step-nav .lp-btn--primary { width: 100%; justify-content: center; }
    .lp-step-nav .lp-back { align-self: center; padding: 8px 12px; }
}
.lp-back { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; font-family: var(--body); font-size: 0.92rem; font-weight: 600; color: var(--text-muted); background: none; border: none; border-radius: var(--r-full); cursor: pointer; transition: color .2s, transform .2s; }
.lp-back:hover { color: var(--ink); transform: translateX(-2px); }
.lp-reassure { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 18px; font-size: 0.82rem; color: var(--text-dim); }
.lp-reassure svg { color: var(--acc); }

/* =========================================================
   REFERENCES (3-up · lightbox · mobile slider)
   ========================================================= */
.lp-refs { background: var(--bg); position: relative; overflow: hidden; }
/* Halbkreis-Verlauf von oben mittig über die Überschrift bis runter zur Galerie */
.lp-refs.is-dark::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(2400px, 140vw);
    aspect-ratio: 1;
    background: radial-gradient(circle at center,
        rgba(167,190,21,0.22) 0%,
        rgba(167,190,21,0.14) 15%,
        rgba(167,190,21,0.07) 32%,
        rgba(167,190,21,0.03) 50%,
        rgba(167,190,21,0.01) 65%,
        transparent 80%);
    pointer-events: none;
    z-index: 0;
}
.lp-refs > .lp-container { position: relative; z-index: 1; }
.lp-refgrid { display: grid; grid-template-columns: repeat(2,1fr); gap: 30px; }
@media (min-width: 1400px) { .lp-refgrid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 720px) {
    /* Handyansicht: bei 15 Referenzen würde eine alleinstehende Karte unten
       das saubere 2er-Raster brechen. Letzte Karte ausblenden → 14 Karten = 7 Reihen. */
    .lp-refgrid .lp-refitem:last-child { display: none; }
}
.lp-refitem { position: relative; border-radius: var(--r-md); overflow: hidden; cursor: pointer; aspect-ratio: 16/10; border: 1px solid var(--line); background: var(--ink); box-shadow: var(--shadow-soft); }
.lp-refitem img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.lp-refitem:hover img { transform: scale(1.06); }
.lp-refitem::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.45)); opacity: 0; transition: opacity .3s ease; }
.lp-refitem:hover::after { opacity: 1; }
.lp-ref-zoom { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--acc); color: var(--acc-ink); opacity: 0; transform: scale(.7); transition: opacity .3s, transform .3s; }
.lp-refitem:hover .lp-ref-zoom { opacity: 1; transform: scale(1); }
@media (max-width: 760px) {
    .lp-refgrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
    .lp-refitem { aspect-ratio: 4 / 3; }
    .lp-ref-zoom { opacity: 1; transform: scale(1); width: 32px; height: 32px; right: 8px; bottom: 8px; }
    .lp-ref-zoom svg { width: 13px; height: 13px; }
}

/* =========================================================
   REFERENCES — Show more (default: 6 sichtbar)
   ========================================================= */
.lp-refgrid:not(.is-expanded) .lp-refitem:nth-child(n+7) { display: none; }
/* Auf Mobile (max-width: 720px) macht die "letztes Element verstecken"-Regel
   weiter oben Probleme, wenn der Grid eingeklappt ist. Im eingeklappten
   Zustand zeigen wir genau 6 — die Regel wird nur im expanded Zustand
   relevant. */
@media (max-width: 720px) {
    .lp-refgrid:not(.is-expanded) .lp-refitem:last-child { display: block; }
}

.lp-refs-more-wrap {
    margin-top: clamp(28px, 4vw, 44px);
    text-align: center;
}
.lp-refs-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    appearance: none;
    background: transparent;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 13px 26px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--text);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.lp-refs-more:hover {
    border-color: var(--acc);
    background: rgba(167, 190, 21, 0.06);
    color: var(--text);
}
.lp-refs-more svg { transition: transform .3s ease; }
.lp-refs-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.lp-refs-more .lp-refs-more-hide { display: none; }
.lp-refs-more[aria-expanded="true"] .lp-refs-more-show { display: none; }
.lp-refs-more[aria-expanded="true"] .lp-refs-more-hide { display: inline; }

/* lightbox */
.lp-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(15,17,11,0.9); backdrop-filter: blur(8px); padding: 5vw; }
.lp-lightbox.is-open { display: flex; animation: lp-fade .25s ease; }
@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
.lp-lightbox img { max-width: 92vw; max-height: 84vh; width: auto; border-radius: var(--r-md); box-shadow: var(--shadow); }
.lp-lb-close { position: absolute; top: 22px; right: 26px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-dark); background: rgba(255,255,255,0.08); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lp-lb-close:hover { background: rgba(255,255,255,0.16); }
.lp-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-dark); background: rgba(255,255,255,0.08); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lp-lb-nav:hover { background: rgba(255,255,255,0.16); }
.lp-lb-prev { left: 3vw; } .lp-lb-next { right: 3vw; }
@media (max-width: 620px) { .lp-lb-nav { width: 42px; height: 42px; } .lp-lb-prev { left: 10px; } .lp-lb-next { right: 10px; } }

/* =========================================================
   LOGO STRIP — News-Ticker (alle Bildschirmgrößen)
   ========================================================= */
.lp-logos {
    padding: clamp(40px,6vw,60px) 0;
    background: var(--bg-3);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.lp-logos-label {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 28px;
}
.lp-logos-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.lp-logos-track {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: max-content;
    gap: clamp(40px, 6vw, 80px);
    animation: lp-logos-ticker 60s linear infinite;
    will-change: transform;
}
/* Logos-Marquee läuft auch beim Hover durch (kein Pause-Stopp) */
.lp-logo-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
}
.lp-logo-item img {
    display: block;
    max-height: 100%;
    max-width: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.55;
    transition: opacity .3s ease;
}
.lp-logo-item:hover img { opacity: 0.95; }

@keyframes lp-logos-ticker {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .lp-logos-track { animation: none; }
}

/* Dark variant — invertieren, damit Logos auf dunklem Grund sichtbar sind */
.lp-logos.is-dark .lp-logo-item img {
    filter: brightness(0) invert(1);
    opacity: 0.65;
}
.lp-logos.is-dark .lp-logo-item:hover img { opacity: 1; }

/* Mobile: kleinere Logos, schnellerer Lauf */
@media (max-width: 760px) {
    .lp-logo-item { height: 40px; }
    .lp-logo-item img { max-width: 130px; }
    .lp-logos-track {
        gap: clamp(28px, 6vw, 44px);
        animation-duration: 45s;
    }
    .lp-logos { padding: 32px 0 !important; }
    .lp-logos-label { margin-bottom: 18px !important; font-size: 0.72rem; }
}

/* =========================================================
   LEISTUNGEN — Grafik · Produktion · Montage
   ========================================================= */
.lp-leistungen { background: var(--bg); position: relative; overflow: hidden; }
/* Asphalt-Andeutung: feine diagonale Linien */
.lp-leistungen::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
    background: repeating-linear-gradient(-15deg, transparent 0 22px, rgba(0,0,0,0.018) 22px 23px);
}
.lp-leistungen .lp-container { position: relative; z-index: 1; }

/* Vertikale Tabs mit Foto */
.lp-vtabs {
    display: grid; grid-template-columns: minmax(260px, 360px) 1fr;
    gap: clamp(18px, 2.4vw, 38px); max-width: none; margin: 0; align-items: start;
}
.lp-vtabs-list { display: flex; flex-direction: column; gap: 12px; }
.lp-vtab {
    display: flex; align-items: center; gap: 16px; text-align: left; cursor: pointer; width: 100%;
    padding: 20px 22px; border-radius: var(--r-md);
    border: 1px solid var(--line); background: var(--bg-2); color: var(--text);
    font-family: var(--body); transition: border-color .25s, background .25s, transform .25s, color .25s, box-shadow .25s;
}
.lp-vtab:hover { border-color: #c8d09f; transform: translateX(3px); }
.lp-vtab-num {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em;
    background: var(--acc-soft); color: #5f6e08; transition: background .25s, color .25s;
}
.lp-vtab-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-vtab-title { font-weight: 700; font-size: 1.06rem; letter-spacing: -0.01em; line-height: 1.15; }
.lp-vtab-sub { font-size: 0.84rem; color: var(--text-muted); line-height: 1.25; }
.lp-vtab-chev { flex-shrink: 0; margin-left: auto; color: var(--text-dim); transition: transform .25s, color .25s; }
.lp-vtab.is-active { background: var(--ink); border-color: var(--ink); color: var(--on-dark); box-shadow: 0 20px 40px -22px rgba(0,0,0,0.45); }
.lp-vtab.is-active .lp-vtab-num { background: var(--acc); color: var(--acc-ink); }
.lp-vtab.is-active .lp-vtab-sub { color: var(--on-dark-mut); }
.lp-vtab.is-active .lp-vtab-chev { color: var(--acc); transform: translateX(2px); }

.lp-vtabs-panels { position: relative; }
.lp-vtab-panel { display: none; }
.lp-vtab-panel.is-active {
    display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch;
    border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2);
    box-shadow: 0 28px 56px -30px rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.04);
    animation: lp-vtab-in .35s ease both;
}
@keyframes lp-vtab-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lp-vtab-photo { position: relative; margin: 0; min-height: 340px; overflow: hidden; background: var(--ink); }
.lp-vtab-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-vtab-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(167,190,21,0.12), transparent 50%); pointer-events: none; }
.lp-vtab-content { padding: clamp(30px,3vw,46px); display: flex; flex-direction: column; justify-content: center; }
.lp-vtab-step { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #7e8a2e; margin-bottom: 10px; }
.lp-vtab-content h3 { font-weight: 800; font-size: clamp(1.4rem,2.4vw,1.9rem); letter-spacing: -0.02em; color: var(--text); line-height: 1.08; }
.lp-vtab-content h3::after { content: ""; display: block; width: 46px; height: 3px; border-radius: 2px; background: var(--acc); margin: 14px 0; }
.lp-vtab-content p { color: var(--text-muted); font-size: 1rem; line-height: 1.6; margin-bottom: 18px; }
.lp-vtab-content p strong { color: var(--text); font-weight: 700; }
.lp-vtab-ulist { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.lp-vtab-ulist li { position: relative; padding-left: 28px; font-size: 0.94rem; color: var(--text); }
.lp-vtab-ulist li::before {
    content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237e8a2e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat;
}
@media (max-width: 880px) {
    .lp-vtabs { grid-template-columns: 1fr; }
    .lp-vtab-chev { transform: rotate(90deg); }
    .lp-vtab.is-active .lp-vtab-chev { transform: rotate(90deg); }
    .lp-vtab-panel.is-active { grid-template-columns: 1fr; }
    .lp-vtab-photo { min-height: 220px; }
}
.lp-leistungen-bar {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px;
    margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--line);
}
.lp-leistungen-bar span {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
    border-radius: var(--r-full); background: #fff; border: 1px solid var(--line);
    font-size: 0.86rem; font-weight: 600; color: var(--text);
}
.lp-leistungen-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }

/* =========================================================
   VALUE / WARUM ES SICH LOHNT (dark)
   ========================================================= */
/* =========================================================
   VALUE / WARUM ES SICH LOHNT (dark · Foto-Hintergrund)
   ========================================================= */
.lp-value { position: relative; overflow: hidden; isolation: isolate; }
.lp-value::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image:
        linear-gradient(rgba(15,19,11,0.84), rgba(11,14,7,0.94)),
        url("../images/lp-ref/ref-08-basilika-altstadt.jpg");
    background-size: cover; background-position: center;
}
.lp-value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .lp-value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .lp-value-grid { grid-template-columns: 1fr; } }
.lp-valuecard {
    padding: 28px 24px; border-radius: var(--r-lg);
    background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.09);
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.lp-valuecard:hover { transform: translateY(-5px); border-color: rgba(167,190,21,0.4); background: rgba(255,255,255,0.05); }
.lp-value-ic { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: var(--r-md); background: rgba(167,190,21,0.14); color: var(--acc); margin-bottom: 18px; }
.lp-valuecard h3 { font-family: var(--display); font-weight: 700; font-size: 1.18rem; letter-spacing: -0.02em; margin-bottom: 10px; color: var(--on-dark); line-height: 1.15; }
.lp-valuecard p { color: var(--on-dark-mut); font-size: 0.94rem; line-height: 1.55; }
.lp-value-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px;
    margin-top: 44px; padding-top: 38px; border-top: 1px solid rgba(255,255,255,0.09); text-align: center;
}
.lp-value-foot p { color: var(--on-dark); font-weight: 600; font-size: 1.05rem; max-width: 520px; }

/* =========================================================
   PERSONAS — Für wen wir arbeiten (light tinted)
   ========================================================= */
.lp-personas { background: var(--bg-3); position: relative; overflow: hidden; }
.lp-personas::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        repeating-linear-gradient(135deg, transparent 0 60px, rgba(167,190,21,0.04) 60px 62px);
}
.lp-personas .lp-container { position: relative; z-index: 1; }
.lp-persona-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px 22px; padding: 12px 0; }
@media (max-width: 860px) { .lp-persona-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .lp-persona-grid { grid-template-columns: 1fr; } }
.lp-persona {
    display: flex; flex-direction: column; gap: 12px;
    padding: 28px 26px; border-radius: var(--r-md);
    background: var(--bg-2);
    border: 1px solid var(--line);
    box-shadow: 0 14px 30px -22px rgba(0,0,0,0.2);
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
    position: relative;
}
.lp-persona::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--acc); transform: scaleY(0); transform-origin: top; transition: transform .3s ease;
    border-radius: var(--r-md) 0 0 var(--r-md);
}
@media (hover: hover) and (min-width: 761px) {
    .lp-persona:hover { transform: translateY(-5px); border-color: #cdd6b0; box-shadow: 0 26px 46px -24px rgba(0,0,0,0.28); }
    .lp-persona:hover::before { transform: scaleY(1); }
    .lp-persona:hover .lp-persona-ic { background: var(--acc); color: var(--acc-ink); }
}

/* Hover-Bild als Pop-out außerhalb der Karte */
.lp-persona-pop {
    position: absolute;
    bottom: calc(100% + 8px); left: 50%;
    width: 88%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-md);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.45), 0 10px 24px -10px rgba(0,0,0,0.2);
    border: 4px solid #fff;
    transform: translate(-50%, 24px) scale(0.75) rotate(-3deg);
    transform-origin: bottom center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1), visibility 0s linear .35s;
    z-index: 5;
}
@media (hover: hover) and (min-width: 761px) {
    .lp-persona:hover .lp-persona-pop {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0) scale(1) rotate(-2deg);
        transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1), visibility 0s linear 0s;
    }
}
/* Auf Mobile: gar nicht laden / anzeigen */
@media (max-width: 760px) {
    .lp-persona-pop { display: none !important; }
}
.lp-persona-grid { overflow: visible; }
.lp-personas { overflow: visible !important; padding-top: clamp(80px, 10vw, 140px); }

.lp-persona-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 50px; height: 50px; border-radius: var(--r-sm);
    background: var(--acc-soft); color: #5f6e08;
    transition: background .3s ease, color .3s ease;
}
.lp-persona h3 { font-weight: 700; font-size: 1.08rem; letter-spacing: -0.01em; color: var(--text); line-height: 1.2; }
.lp-persona p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; }

/* =========================================================
   FAQ — Häufige Fragen (light · accordion via <details>)
   ========================================================= */
.lp-faq { background: var(--bg); }
.lp-faq-grid { display: grid; grid-template-columns: minmax(0,0.82fr) minmax(0,1fr); gap: clamp(36px,5vw,76px); align-items: start; max-width: none; margin: 0; }
.lp-faq-aside { position: sticky; top: 100px; }
.lp-faq-aside .lp-eyebrow { margin-bottom: 22px; }
.lp-faq-aside h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem,3.6vw,3.1rem); line-height: 1.02; letter-spacing: -0.03em; color: var(--text); }
.lp-faq-aside h2 .hl { color: var(--acc); }
.lp-faq-aside p { margin-top: 18px; color: var(--text-muted); font-size: 1.06rem; line-height: 1.6; max-width: 440px; }
.lp-faq.is-dark .lp-faq-aside h2 { color: var(--on-dark); }
.lp-faq.is-dark .lp-faq-aside p { color: var(--on-dark-mut); }
.lp-faq.is-dark .lp-faq-foot { color: var(--on-dark-mut); }
.lp-faq.is-dark .lp-faq-foot a { color: var(--on-dark); }
.lp-faq.is-dark .lp-faq-foot a:hover { color: var(--acc); }
@media (max-width: 900px) { .lp-faq-grid { grid-template-columns: 1fr; gap: 32px; } .lp-faq-aside { position: static; } }
.lp-faq-list { max-width: none; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-faq-item {
    background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md);
    overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease;
}
.lp-faq-item:hover { border-color: #cdd6b0; }
.lp-faq-item[open] { border-color: #cdd6b0; box-shadow: var(--shadow-soft); }
.lp-faq-q {
    list-style: none; cursor: pointer; padding: 19px 22px;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    font-family: var(--display); font-weight: 700; font-size: 1.04rem; letter-spacing: -0.015em;
    color: var(--text); line-height: 1.35;
    transition: color .2s ease;
}
.lp-faq-q::-webkit-details-marker, .lp-faq-q::marker { display: none; content: ""; }
.lp-faq-q:hover { color: #5f6e08; }
.lp-faq-ic {
    position: relative; flex-shrink: 0; width: 28px; height: 28px;
    border-radius: 50%; background: var(--acc-soft); display: inline-block;
}
.lp-faq-ic::before, .lp-faq-ic::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    background: #5f6e08; transform: translate(-50%,-50%);
}
.lp-faq-ic::before { width: 12px; height: 2px; }
.lp-faq-ic::after { width: 2px; height: 12px; transition: transform .25s cubic-bezier(.4,0,.2,1); }
.lp-faq-item[open] .lp-faq-ic { background: var(--acc); }
.lp-faq-item[open] .lp-faq-ic::before, .lp-faq-item[open] .lp-faq-ic::after { background: var(--acc-ink); }
.lp-faq-item[open] .lp-faq-ic::after { transform: translate(-50%,-50%) rotate(90deg); }
.lp-faq-a {
    padding: 0 22px 22px; color: var(--text-muted);
    font-size: 0.96rem; line-height: 1.6; max-width: 720px;
}
.lp-faq-a strong { color: var(--text); font-weight: 700; }
.lp-faq-foot { text-align: center; margin-top: 36px; color: var(--text-muted); font-size: 0.96rem; }
.lp-faq-aside .lp-faq-foot { text-align: left; margin-top: 28px; }
.lp-faq-foot a { color: var(--text); text-decoration: underline; text-decoration-color: var(--acc); text-underline-offset: 3px; font-weight: 600; }
.lp-faq-foot a:hover { color: #5f6e08; }

/* =========================================================
   FINAL CTA — Split-Band: Botschaft + Aktions-Panel
   ========================================================= */
.lp-cta {
    padding: clamp(56px,8vw,108px) 0; position: relative; overflow: hidden;
    background:
        radial-gradient(900px 520px at 82% -25%, var(--acc-bright), transparent 70%),
        var(--acc);
    color: var(--acc-ink);
}
.lp-cta-inner {
    display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(34px,5vw,72px);
    align-items: center; margin: 0 auto;
}
@media (max-width: 900px) { .lp-cta-inner { grid-template-columns: 1fr; gap: 34px; } }

.lp-cta-eyebrow {
    display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; margin-bottom: 20px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--acc-ink); background: rgba(20,24,11,0.09); border: 1px solid rgba(20,24,11,0.18); border-radius: var(--r-full);
}
.lp-cta-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.lp-cta h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2.1rem,4.4vw,3.5rem); line-height: 1.0; letter-spacing: -0.035em; color: var(--acc-ink); }
.lp-cta h2 .hl { color: var(--ink); }
.lp-cta-text p { margin: 18px 0 24px; color: rgba(20,24,11,0.74); font-size: 1.08rem; max-width: 540px; }
.lp-cta-points { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.lp-cta-points li { position: relative; padding-left: 30px; font-weight: 600; font-size: 0.98rem; color: var(--acc-ink); }
.lp-cta-points li::before {
    content: ""; position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%;
    background-color: var(--ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 12px; background-repeat: no-repeat; background-position: center;
}

.lp-cta-panel {
    background: var(--ink); color: var(--on-dark); border-radius: var(--r-lg);
    padding: clamp(28px,3vw,40px); display: flex; flex-direction: column; gap: 13px;
    box-shadow: 0 34px 70px -26px rgba(20,24,11,0.55);
}
.lp-cta-panel strong { font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--on-dark); line-height: 1.08; }
.lp-cta-panel-sub { color: var(--on-dark-mut); font-size: 0.98rem; margin-bottom: 6px; }
.lp-cta-panel .lp-btn { width: 100%; justify-content: center; }
.lp-cta-panel .lp-btn--primary { background: var(--acc); color: var(--acc-ink); }
.lp-cta-panel .lp-btn--primary:hover { background: var(--acc-bright); box-shadow: 0 16px 34px -12px rgba(167,190,21,0.55); }
.lp-cta-panel .lp-btn--ghost { color: var(--on-dark); border-color: rgba(255,255,255,0.18); }
.lp-cta-panel .lp-btn--ghost:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.32); box-shadow: none; }
.lp-cta-reassure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; font-size: 0.82rem; color: var(--on-dark-mut); }
.lp-cta-reassure svg { color: var(--acc); flex-shrink: 0; }

/* =========================================================
   FOOTER
   ========================================================= */
/* =========================================================
   FINAL CTA — Abschluss-Call-to-Action vor dem Footer
   ========================================================= */
.lp-finalcta {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 500px at 50% 10%, rgba(167,190,21,0.18), transparent 55%),
        radial-gradient(700px 400px at 95% 100%, rgba(167,190,21,0.08), transparent 60%),
        linear-gradient(180deg, #10130B 0%, #161B0F 100%);
}
.lp-finalcta-inner {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.lp-finalcta .lp-eyebrow {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.13);
    color: var(--on-dark);
}
.lp-finalcta h2 {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(2.1rem, 4.2vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 22px 0 18px;
    color: var(--on-dark);
}
.lp-finalcta h2 .hl {
    color: var(--acc);
    font-style: normal;
}
.lp-finalcta-lead {
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    color: var(--on-dark-mut);
    line-height: 1.6;
    margin: 0 auto 32px;
    max-width: 620px;
}
.lp-finalcta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}
.lp-finalcta .lp-btn--ghost {
    color: var(--on-dark);
    border-color: rgba(255,255,255,0.16);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.lp-finalcta .lp-btn--ghost:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.32);
    box-shadow: none;
}
@media (max-width: 540px) {
    .lp-finalcta-actions .lp-btn { width: 100%; justify-content: center; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.lp-footer { padding: 40px 0; background: var(--ink); color: var(--on-dark); }
.lp-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.lp-footer-brand { display: flex; align-items: center; gap: 14px; }
.lp-footer-brand img { height: 34px; }
.lp-footer-meta { font-size: 0.85rem; color: var(--on-dark-mut); }
.lp-footer-legal { display: flex; gap: 20px; font-size: 0.85rem; }
.lp-footer-legal a { color: var(--on-dark-mut); }
.lp-footer-legal a:hover { color: var(--on-dark); }

/* =========================================================
   MOBILE FLOATING CTA
   ========================================================= */
.lp-fab { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; display: none; box-shadow: 0 16px 40px -10px rgba(25,29,18,0.4); }
.lp-fab.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; transition: transform .35s ease, opacity .35s ease; }
.lp-fab:not(.is-hidden) { transition: transform .35s ease, opacity .35s ease; }
@media (max-width: 760px) { .lp-fab { display: flex; } }

/* =========================================================
   DESKTOP FLOATING ACTIONS (bottom-right)
   ========================================================= */
.lp-floats {
    position: fixed; right: clamp(18px,2.4vw,30px); bottom: clamp(18px,2.4vw,30px); z-index: 95;
    display: none; flex-direction: column; align-items: flex-end; gap: 12px;
}
.lp-float { display: inline-flex; align-items: center; gap: 10px; border-radius: var(--r-full); font-family: var(--body); font-weight: 700; transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, background .25s ease; }
.lp-float--phone {
    width: 54px; height: 54px; justify-content: center;
    background: var(--ink); color: var(--acc); border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 16px 34px -12px rgba(0,0,0,0.55);
}
.lp-float--phone:hover { transform: translateY(-3px); background: var(--ink-2); }
.lp-float--cta {
    padding: 16px 24px; font-size: 1rem; background: var(--acc); color: var(--acc-ink);
    box-shadow: 0 18px 40px -12px rgba(167,190,21,0.6);
    animation: lp-float-pulse 2.8s ease-in-out infinite;
}
.lp-float--cta:hover { transform: translateY(-3px); background: var(--acc-bright); box-shadow: 0 22px 48px -12px rgba(167,190,21,0.7); animation: none; }
.lp-float--cta svg { flex-shrink: 0; }
@keyframes lp-float-pulse {
    0%, 100% { box-shadow: 0 18px 40px -12px rgba(167,190,21,0.55), 0 0 0 0 rgba(167,190,21,0.45); }
    50% { box-shadow: 0 18px 40px -12px rgba(167,190,21,0.7), 0 0 0 12px rgba(167,190,21,0); }
}
@media (prefers-reduced-motion: reduce) { .lp-float--cta { animation: none; } }

/* =========================================================
   REVEAL — statisch sichtbar (kein Scroll-JS für Performance)
   ========================================================= */
.lp-reveal { opacity: 1; transform: none; }

/* =========================================================
   THANK YOU PAGE (light)
   ========================================================= */
.lp-thanks { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 120px var(--pad-x) 80px; position: relative;
    background: radial-gradient(900px 600px at 50% -10%, rgba(167,190,21,0.18), transparent 55%), var(--bg); }
.lp-thanks-inner { max-width: 620px; }
.lp-thanks-check { display: inline-flex; align-items: center; justify-content: center; width: 92px; height: 92px; border-radius: 50%; background: var(--acc); color: var(--acc-ink); margin-bottom: 28px; box-shadow: 0 18px 40px -14px rgba(167,190,21,0.6); animation: lp-pop .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes lp-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lp-thanks h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem,5vw,3.7rem); line-height: 1.0; letter-spacing: -0.035em; margin-bottom: 18px; color: var(--text); }
.lp-thanks h1 .hl { color: var(--acc); }
.lp-thanks p { color: var(--text-muted); font-size: 1.12rem; margin-bottom: 14px; }
.lp-thanks-steps { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 34px 0; }
.lp-thanks-step { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--r-full); font-size: 0.92rem; color: var(--text-muted); background: #fff; }
.lp-thanks-step b { color: #7e8a2e; }
.lp-thanks-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 8px; }

/* =========================================================
   PROMO POPUP (Aktion 10 %)
   ========================================================= */
.lp-promo {
    position: fixed; inset: 0; z-index: 1000; display: none;
    align-items: center; justify-content: center; padding: 5vw;
    background: rgba(8,10,5,0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lp-promo.is-open { display: flex; animation: lp-fade .25s ease; }
.lp-promo-card {
    position: relative; width: min(940px, 96vw); max-height: 92vh; overflow: hidden;
    display: grid; grid-template-columns: 1.28fr 0.72fr;
    background: linear-gradient(150deg, #181c10 0%, #0b0e07 70%);
    border: 1px solid rgba(255,255,255,0.10); border-radius: var(--r-lg);
    box-shadow: 0 50px 100px -30px rgba(0,0,0,0.8);
    color: var(--on-dark);
    animation: lp-promo-pop .42s cubic-bezier(.2,1.2,.4,1) both;
}
@keyframes lp-promo-pop { from { transform: scale(.92) translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.lp-promo-close {
    position: absolute; top: 14px; right: 14px; z-index: 6;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.08); color: #fff;
    font-size: 1.5rem; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: background .2s;
}
.lp-promo-close:hover { background: rgba(255,255,255,0.18); }
.lp-promo-main { position: relative; z-index: 2; padding: clamp(28px,3.4vw,46px); display: flex; flex-direction: column; }
.lp-promo-chevrons { display: flex; gap: 6px; margin-bottom: 18px; }
.lp-promo-chevrons span { width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 13px solid var(--acc); }
.lp-promo-chevrons span:nth-child(2) { opacity: .55; }
.lp-promo-chevrons span:nth-child(3) { opacity: .28; }
.lp-promo-logo { height: 40px; width: auto; margin-bottom: 22px; }
.lp-promo-title { font-weight: 800; font-size: clamp(2rem,4vw,3rem); line-height: 0.98; letter-spacing: -0.03em; text-transform: uppercase; color: #fff; }
.lp-promo-sub { margin-top: 14px; font-size: clamp(1.05rem,1.6vw,1.25rem); font-weight: 700; color: #fff; }
.lp-promo-sub .hl { color: var(--acc); }
.lp-promo-list { list-style: none; margin: 22px 0; display: flex; flex-direction: column; gap: 11px; }
.lp-promo-list li { display: flex; align-items: center; gap: 12px; font-size: 1rem; font-weight: 600; color: var(--on-dark); }
.lp-promo-list svg { flex-shrink: 0; color: var(--acc); }
.lp-promo-cta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: auto; }
.lp-promo-deadline { font-size: 0.85rem; font-weight: 700; color: var(--acc-bright); }
.lp-promo-contact {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.10);
    font-size: 0.92rem; font-weight: 600;
}
.lp-promo-contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark); }
.lp-promo-contact a:hover { color: var(--acc); }
.lp-promo-contact svg { color: var(--acc); flex-shrink: 0; }
.lp-promo-divider { width: 1px; height: 18px; background: rgba(255,255,255,0.18); }
.lp-promo-photo { position: relative; overflow: hidden; }
.lp-promo-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-promo-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, #0b0e07 0%, rgba(11,14,7,0.1) 38%); }
@media (min-width: 781px) { .lp-promo-photo { clip-path: polygon(16% 0, 100% 0, 100% 100%, 0% 100%); } }
@media (max-width: 780px) {
    .lp-promo-card { grid-template-columns: 1fr; max-height: 94vh; overflow-y: auto; }
    .lp-promo-photo { display: none; }
}

/* =========================================================
   PROMO POPUP — Bild-only Variante (überschreibt das alte Card-Layout)
   ========================================================= */
.lp-promo-card.lp-promo-card--image {
    background: transparent !important;
    padding: 0 !important;
    overflow: visible !important;
    display: block !important;
    box-shadow: none !important;
    max-width: min(640px, 92vw) !important;
    width: auto !important;
    border-radius: 0 !important;
    grid-template-columns: none !important;
}
.lp-promo-card--image .lp-promo-imglink {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 32px 70px -20px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.25);
    line-height: 0;
    transition: transform .25s ease;
}
.lp-promo-card--image .lp-promo-imglink:hover { transform: translateY(-3px) scale(1.01); }
.lp-promo-card--image .lp-promo-imglink img {
    display: block; width: 100%; height: auto;
}
.lp-promo-card--image .lp-promo-close {
    position: absolute;
    top: -16px; right: -16px;
    z-index: 5;
    width: 38px; height: 38px;
    background: #fff; color: #0c0c0c;
    border: none; border-radius: 50%;
    font-size: 1.6rem; line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s ease, background .2s ease;
}
.lp-promo-card--image .lp-promo-close:hover { transform: scale(1.08); background: var(--acc); }

/* =========================================================
   VTABS — Accordion (Mobile + Desktop):
   Tab-Header + Content direkt darunter, nur einer offen
   ========================================================= */
.lp-vtabs--accordion {
    display: flex; flex-direction: column; gap: 14px;
    grid-template-columns: none !important;
    align-items: stretch;
    max-width: 1100px; margin: 0 auto;
}
/* Außenhülle — alle 4 Ecken einheitlich gerundet */
.lp-vtabs--accordion .lp-vtabs-item {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg-2);
    transition: box-shadow .25s ease, border-color .25s ease;
}
/* Aktive Item — Lime-Akzent + stärkerer Schatten */
.lp-vtabs--accordion .lp-vtabs-item:has(.lp-vtab.is-active),
.lp-vtabs--accordion .lp-vtabs-item:has(.is-active) {
    border-color: var(--acc);
    box-shadow: 0 22px 44px -22px rgba(0,0,0,0.22);
}
/* Header-Button */
.lp-vtabs--accordion .lp-vtab {
    width: 100%; border: none; border-radius: 0;
    background: var(--bg-2);
    color: var(--text);
    padding: 20px 24px;
    display: flex; align-items: center; gap: 16px;
    cursor: pointer; transition: background .2s ease, color .2s ease;
    box-shadow: none;
}
.lp-vtabs--accordion .lp-vtab:hover { background: rgba(167,190,21,0.06); }
/* Aktiver Header — transparent (gleiche Fläche wie Wrapper), nur Akzent an Badge + Chevron */
.lp-vtabs--accordion .lp-vtab.is-active {
    background: transparent;
    color: var(--text);
    box-shadow: none;
}
.lp-vtabs--accordion .lp-vtab.is-active .lp-vtab-title { color: var(--text); }
.lp-vtabs--accordion .lp-vtab.is-active .lp-vtab-sub { color: var(--text-muted); }
/* "01"-Badge bleibt lime in beiden Zuständen */
.lp-vtabs--accordion .lp-vtab-num {
    background: var(--acc); color: var(--acc-ink);
}
.lp-vtabs--accordion .lp-vtab.is-active .lp-vtab-chev { color: var(--acc); transform: rotate(90deg); }
.lp-vtabs--accordion .lp-vtab .lp-vtab-chev { transition: transform .3s ease, color .2s ease; transform: rotate(0deg); }

/* Panel — nahtlos unter dem Header (keine eigenen Rundungen/Ränder, kein Gap) */
.lp-vtabs--accordion .lp-vtab-panel {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    opacity: 0;
    transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s ease;
    pointer-events: none;
    background: var(--bg-2);
    border: none;
    border-radius: 0;
}
.lp-vtabs--accordion .lp-vtab-panel.is-active {
    max-height: 1600px;
    padding: 0;
    opacity: 1;
    pointer-events: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
}
.lp-vtabs--accordion .lp-vtab-panel-inner {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0; align-items: stretch;
}
.lp-vtabs--accordion .lp-vtab-panel .lp-vtab-photo {
    margin: 0;
    min-height: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
}
.lp-vtabs--accordion .lp-vtab-panel .lp-vtab-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}
.lp-vtabs--accordion .lp-vtab-panel .lp-vtab-content {
    padding: clamp(28px, 3vw, 44px);
    display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 760px) {
    .lp-vtabs--accordion .lp-vtab-panel.is-active { grid-template-columns: 1fr; gap: 0; }
    .lp-vtabs--accordion .lp-vtab-panel .lp-vtab-photo { min-height: 220px; }
}
/* alte Panels-Wrap-Klasse aufheben (jetzt jeder Tab + Panel im Item) */
.lp-vtabs--accordion .lp-vtabs-list,
.lp-vtabs--accordion .lp-vtabs-panels { display: contents; }

/* =========================================================
   MOBILE FAB-Stack — 2 Icons (WhatsApp + Anfrage-Formular)
   ========================================================= */
.lp-fab-stack {
    position: fixed; right: 16px; bottom: 16px; z-index: 90;
    display: none; flex-direction: column; gap: 12px; align-items: flex-end;
    transform: translateY(140%); opacity: 0; pointer-events: none;
    transition: transform .35s ease, opacity .35s ease;
}
.lp-fab-stack:not(.is-hidden) { transform: translateY(0); opacity: 1; pointer-events: auto; }
.lp-fab-stack.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }

.lp-fab2 {
    position: relative;
    width: 56px; height: 56px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    box-shadow: 0 14px 32px -10px rgba(0,0,0,0.35), 0 4px 10px rgba(0,0,0,0.18);
    transition: transform .25s ease, box-shadow .25s ease;
}
.lp-fab2:hover { transform: translateY(-2px) scale(1.05); }
.lp-fab2:active { transform: scale(0.96); }

/* WhatsApp button — top */
.lp-fab2--wa { background: #25D366; color: #fff; }
.lp-fab2--wa::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(37,211,102,0.55);
    animation: lp-fab2-ring-wa 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes lp-fab2-ring-wa {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.55); }
    70%  { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.lp-fab2-badge {
    position: absolute; top: -2px; right: -2px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    background: #ff3b30; color: #fff;
    font-size: 0.7rem; font-weight: 800;
    font-family: var(--display);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px #25D366;
    animation: lp-fab2-badge-pop 1.6s ease-in-out infinite;
}
@keyframes lp-fab2-badge-pop {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

/* Anfrage-Form button — bottom */
.lp-fab2--form { background: var(--acc); color: var(--acc-ink); }
.lp-fab2--form::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(167,190,21,0.55);
    animation: lp-fab2-ring-form 2.4s ease-out infinite 1.2s;
    pointer-events: none;
}
@keyframes lp-fab2-ring-form {
    0%   { box-shadow: 0 0 0 0 rgba(167,190,21,0.55); }
    70%  { box-shadow: 0 0 0 14px rgba(167,190,21,0); }
    100% { box-shadow: 0 0 0 0 rgba(167,190,21,0); }
}

/* Hinweis: lp-fab-stack ist ausgeblendet, weil der Chatbot-FAB (.lp-askfab)
   jetzt auf allen Bildschirmgrößen sichtbar ist und dieselbe Funktion
   ergonomischer abdeckt (Inquiry per Chat-Modal). Falls fab-stack wieder
   gebraucht wird, einfach die `display: flex` Media-Regel reaktivieren. */
@media (prefers-reduced-motion: reduce) {
    .lp-fab2::before, .lp-fab2-badge { animation: none; }
}

/* =========================================================
   REFERENCES — Mobile: Zoom-Icon ausblenden
   ========================================================= */
@media (max-width: 760px) {
    .lp-ref-zoom { display: none !important; }
}

/* =========================================================
   PERSONAS — Mobile Slider (auto-rotate via JS)
   ========================================================= */
@media (max-width: 760px) {
    .lp-persona-grid {
        display: flex !important;
        grid-template-columns: none;
        gap: 14px;
        overflow-x: auto;
        overflow-y: visible;
        position: relative;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding: 4px 4px 4px;
        margin: 0 -4px;
        scrollbar-width: none;
    }
    .lp-persona-grid::-webkit-scrollbar { display: none; }
    .lp-persona-grid .lp-persona {
        flex: 0 0 calc(100% - 8px);
        scroll-snap-align: center;
        transform: none !important;
    }
    .lp-persona-grid .lp-persona::before { display: none; }
    .lp-persona-dots {
        display: flex; gap: 8px; justify-content: center; margin-top: 16px;
    }
    .lp-persona-dots button {
        width: 8px; height: 8px; border-radius: 50%;
        background: rgba(0,0,0,0.18); border: none; padding: 0; cursor: pointer;
        transition: background .2s, width .2s;
    }
    .lp-persona-dots button.is-active {
        background: var(--acc); width: 24px; border-radius: 4px;
    }
}

/* =========================================================
   VALUE CARDS — Mobile collapsible
   ========================================================= */
@media (max-width: 760px) {
    .lp-value-grid { grid-template-columns: 1fr !important; gap: 10px; }
    .lp-value-grid .lp-valuecard {
        cursor: pointer;
        padding: 18px 20px;
        position: relative;
    }
    .lp-value-grid .lp-valuecard::after {
        content: "+"; position: absolute; top: 14px; right: 18px;
        width: 26px; height: 26px;
        border-radius: 50%; background: rgba(167,190,21,0.15);
        color: var(--acc); font-size: 1.2rem; line-height: 1;
        display: flex; align-items: center; justify-content: center;
        transition: transform .25s ease, background .25s ease;
    }
    .lp-value-grid .lp-valuecard.is-open::after { content: "−"; background: var(--acc); color: var(--acc-ink); }
    .lp-value-grid .lp-valuecard h3 { margin-right: 36px; font-size: 1rem; }
    .lp-value-grid .lp-valuecard p {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin: 0;
        transition: max-height .3s ease, margin .3s ease, opacity .3s ease;
    }
    .lp-value-grid .lp-valuecard.is-open p {
        max-height: 200px;
        margin-top: 8px;
        opacity: 1;
    }
    /* hide icon on mobile (saves space) */
    .lp-value-grid .lp-valuecard .lp-value-ic { display: none; }
}

/* =========================================================
   KOMFORT-SERVICE (Abhol- & Bringservice + WhatsApp)
   ========================================================= */
.lp-komfort { background: var(--bg); position: relative; }
.lp-komfort-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 1.8vw, 22px);
    margin-top: clamp(28px, 3vw, 42px);
    max-width: 1100px; margin-inline: auto;
}
.lp-komfort-card {
    position: relative;
    padding: clamp(24px, 2.4vw, 32px);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    overflow: hidden;
}
.lp-komfort-card::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(167,190,21,0.06), transparent 60%);
    opacity: 0; transition: opacity .3s ease;
    pointer-events: none;
}
.lp-komfort-card:hover { transform: translateY(-4px); border-color: rgba(167,190,21,0.4); box-shadow: 0 24px 48px -28px rgba(0,0,0,0.18); }
.lp-komfort-card:hover::before { opacity: 1; }
.lp-komfort-card--highlight {
    background: var(--ink); color: var(--on-dark);
    border-color: var(--ink);
}
.lp-komfort-card--highlight::before {
    background: linear-gradient(135deg, rgba(167,190,21,0.18), transparent 60%);
    opacity: 1;
}
.lp-komfort-num {
    position: absolute; top: 18px; right: 22px;
    font-family: var(--display);
    font-weight: 800; font-size: 1.1rem;
    color: var(--text-dim);
    letter-spacing: -0.01em;
}
.lp-komfort-card--highlight .lp-komfort-num { color: rgba(255,255,255,0.35); }
.lp-komfort-ic {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 16px;
    background: var(--acc-soft); color: #5f6e08;
    margin-bottom: 18px;
}
.lp-komfort-card--highlight .lp-komfort-ic { background: rgba(167,190,21,0.2); color: var(--acc); }
.lp-komfort-card h3 {
    position: relative;
    font-family: var(--display); font-weight: 700;
    font-size: 1.18rem; letter-spacing: -0.02em;
    line-height: 1.2; margin-bottom: 10px;
}
.lp-komfort-card--highlight h3 { color: var(--on-dark); }
.lp-komfort-card p {
    position: relative;
    font-size: 0.96rem; line-height: 1.55;
    color: var(--text-muted); margin-bottom: 16px;
}
.lp-komfort-card--highlight p { color: var(--on-dark-mut); }
.lp-komfort-tag {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px;
    background: rgba(167,190,21,0.12); color: #5f6e08;
    font-size: 0.78rem; font-weight: 600; letter-spacing: -0.01em;
}
.lp-komfort-tag::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--acc);
    box-shadow: 0 0 0 3px rgba(167,190,21,0.18);
}
.lp-komfort-card--highlight .lp-komfort-tag {
    background: rgba(167,190,21,0.2); color: var(--acc);
}
.lp-komfort-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 18px;
    margin-top: clamp(30px, 3vw, 44px);
}
.lp-komfort-foot-meta { font-size: 0.92rem; color: var(--text-muted); }
.lp-komfort-foot-meta a { color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--acc); }

/* WhatsApp button */
.lp-btn.lp-btn--wa {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 22px; border-radius: 999px;
    background: #25D366; color: #fff;
    font-family: var(--display); font-weight: 700; font-size: 0.98rem;
    text-decoration: none;
    box-shadow: 0 14px 32px -10px rgba(37,211,102,0.45);
    transition: transform .25s ease, box-shadow .25s ease;
}
.lp-btn.lp-btn--wa:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -10px rgba(37,211,102,0.6); }

@media (max-width: 880px) {
    .lp-komfort-grid { grid-template-columns: 1fr; max-width: 540px; }
}

/* =========================================================
   UNIFIED THEME — eine Bühne, Karten als Anker
   Hero bleibt dunkel; alles andere wird zur einheitlichen Cremefläche.
   Aktiviert durch <body class="theme-unified">. Entfernen → klassisch.
   ========================================================= */
body.theme-unified {
    background: var(--bg);
}

/* Hero NICHT anfassen — bleibt dark */
body.theme-unified .lp-hero { /* unverändert */ }

/* Alle anderen Sections auf cream */
body.theme-unified .lp-section:not(.lp-hero):not(.is-dark),
body.theme-unified .lp-anfrage,
body.theme-unified .lp-personas,
body.theme-unified .lp-faq,
body.theme-unified .lp-leistungen,
body.theme-unified .lp-refs,
body.theme-unified .lp-cta {
    background: var(--bg);
}

/* "Mehr als nur Optik" (war dunkel) → cream mit dunklen Karten als Kontrast */
body.theme-unified .lp-section.is-dark.lp-value {
    background: var(--bg);
}
body.theme-unified .lp-section.is-dark.lp-value::after { display: none; }
body.theme-unified .lp-section.is-dark.lp-value::before { display: none; }
body.theme-unified .lp-section.is-dark.lp-value .lp-section-head h2,
body.theme-unified .lp-section.is-dark.lp-value .lp-section-head h2 .hl { color: var(--text); }
body.theme-unified .lp-section.is-dark.lp-value .lp-section-head h2 .hl { color: var(--acc); }
body.theme-unified .lp-section.is-dark.lp-value .lp-section-head p { color: var(--text-muted); }
body.theme-unified .lp-section.is-dark.lp-value .lp-section-head p strong { color: var(--text); }
body.theme-unified .lp-section.is-dark.lp-value .lp-eyebrow { color: var(--text); background: var(--bg-2); border-color: var(--line); }

/* Value-Cards: weiß auf cream mit Schatten */
body.theme-unified .lp-valuecard {
    background: var(--bg-2);
    border-color: var(--line);
    box-shadow: 0 14px 32px -22px rgba(0,0,0,0.18);
}
body.theme-unified .lp-valuecard:hover {
    background: var(--bg-2);
    border-color: rgba(167,190,21,0.5);
    box-shadow: 0 24px 48px -22px rgba(0,0,0,0.25);
}
body.theme-unified .lp-valuecard h3 { color: var(--text); }
body.theme-unified .lp-valuecard p { color: var(--text-muted); }
body.theme-unified .lp-value-ic { background: var(--acc-soft); color: #5f6e08; }
body.theme-unified .lp-value-foot p { color: var(--text-muted); }

/* Logo-Strip (war is-dark) → cream */
body.theme-unified .lp-logos.is-dark {
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
body.theme-unified .lp-logos.is-dark .lp-logos-label { color: var(--text-dim); }
body.theme-unified .lp-logos.is-dark .lp-logo-item img { filter: none; opacity: 0.7; }
body.theme-unified .lp-logos.is-dark .lp-logo-item:hover img { opacity: 1; }

/* Final CTA — war wahrscheinlich dunkel, jetzt hell */
body.theme-unified .lp-cta { background: var(--bg); color: var(--text); }
body.theme-unified .lp-cta h2 { color: var(--text); }
body.theme-unified .lp-cta h2 .hl { color: var(--acc); }
body.theme-unified .lp-cta p,
body.theme-unified .lp-cta-points li { color: var(--text-muted); }
body.theme-unified .lp-cta-eyebrow { background: var(--bg-2); color: var(--text); border: 1px solid var(--line); }
body.theme-unified .lp-cta-panel {
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--line);
    box-shadow: 0 28px 56px -30px rgba(0,0,0,0.18);
}
body.theme-unified .lp-cta-panel strong { color: var(--text); }
body.theme-unified .lp-cta-panel-sub { color: var(--text-muted); }
body.theme-unified .lp-cta-reassure { color: var(--text-dim); }

/* Karten weiß + leichter Schatten überall */
body.theme-unified .lp-faq-item,
body.theme-unified .lp-vtabs--accordion .lp-vtabs-item {
    background: var(--bg-2);
    box-shadow: 0 12px 28px -22px rgba(0,0,0,0.15);
}
body.theme-unified .lp-persona {
    background: var(--bg-2);
    box-shadow: 0 12px 28px -22px rgba(0,0,0,0.15);
}
/* Hover-Bild wieder erzwingen (sonst überschreibt das Unified-Base den Gradient) */
@media (hover: hover) and (min-width: 761px) {
    body.theme-unified .lp-persona:hover {
        background: rgba(15,17,11,0.82);
    }
}

/* Trust-Strip (oben unter Hero) — auch cream */
body.theme-unified .lp-trust-strip { background: var(--bg); border-bottom: 1px solid var(--line); }

/* Anfrage-Form bleibt cream, Wizard-Karte sticht durch weiß heraus */
body.theme-unified .lp-anfrage { background: var(--bg); }
body.theme-unified .lp-wizard {
    background: var(--bg-2);
    box-shadow: 0 24px 56px -30px rgba(0,0,0,0.2);
}



/* =========================================================
   MOBILE COMPACTNESS — kleinere Schriften, mehr Whitespace
   ========================================================= */
@media (max-width: 760px) {
    /* Sections großzügig — viel mehr Atemluft */
    .lp-section { padding: 72px 0; }
    .lp-section .lp-section-head { margin-bottom: 36px; }
    :root { --pad-x: clamp(22px, 6vw, 32px); }

    /* Section-Heads: kompaktere Hierarchie */
    .lp-section-head h2,
    .lp-cta h2,
    .lp-anfrage-head h2,
    .lp-faq-aside h2 {
        font-size: clamp(1.8rem, 6vw, 2.3rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.025em !important;
    }
    .lp-section-head p,
    .lp-cta p,
    .lp-faq-aside p,
    .lp-anfrage-lead {
        font-size: 0.96rem !important;
        line-height: 1.6 !important;
        color: var(--text-muted) !important;
    }
    .lp-eyebrow {
        font-size: 0.7rem;
        padding: 6px 14px;
        margin-bottom: 18px;
    }

    /* Hero-Buttons auf Mobile volle Breite, untereinander */
    .lp-hero-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100% !important;
    }
    .lp-hero-actions .lp-btn {
        width: 100% !important;
        justify-content: center !important;
        text-align: center;
    }

    /* Bilder in Grafik-Produktion-Montage Tabs: garantiert keinen Radius */
    .lp-vtabs--accordion .lp-vtab-panel .lp-vtab-photo,
    .lp-vtabs--accordion .lp-vtab-panel .lp-vtab-photo img {
        border-radius: 0 !important;
    }

    /* Hero kompakter */
    .lp-hero { padding: 96px 0 64px !important; }
    .lp-hero-headline,
    .lp-hero h1 {
        font-size: clamp(1.65rem, 6.5vw, 3rem) !important;
        line-height: 1.08 !important;
    }
    .lp-hero-sub {
        font-size: 1rem !important;
        line-height: 1.55 !important;
        margin-top: 18px !important;
    }

    /* Karten: kleinere Schrift aber großzügiges Padding */
    .lp-persona,
    .lp-valuecard {
        padding: 24px 22px !important;
    }
    .lp-faq-item { padding: 0 !important; }
    .lp-persona h3,
    .lp-valuecard h3 { font-size: 1.02rem !important; margin-bottom: 6px; }
    .lp-persona p,
    .lp-section:not(.is-dark) .lp-valuecard p {
        font-size: 0.9rem !important; line-height: 1.55 !important;
        color: var(--text-muted) !important;
    }
    .lp-section.is-dark .lp-valuecard p {
        font-size: 0.94rem !important; line-height: 1.6 !important;
        color: var(--on-dark-mut) !important;
    }
    .lp-section.is-dark .lp-valuecard h3 {
        color: var(--on-dark) !important;
    }
    .lp-persona-ic,
    .lp-value-ic { width: 42px !important; height: 42px !important; margin-bottom: 12px; }

    /* Listen identische Farbe wie p-Texte (gleicher --text-muted), nicht fetter */
    .lp-trust-list,
    .lp-cta-points,
    .lp-vtab-ulist {
        color: var(--text-muted) !important;
    }
    .lp-trust-list li,
    .lp-cta-points li,
    .lp-vtab-ulist li {
        color: var(--text-muted) !important;
        font-weight: 400 !important;
        font-size: 0.94rem !important;
        line-height: 1.6 !important;
    }
    .lp-trust-list { gap: 12px !important; }
    .lp-cta-points { gap: 10px !important; }

    /* Trust-Strip kompakt aber mit Atemluft */
    .lp-trust-strip { padding: 22px 0 !important; }

    /* Wizard / Anfrage großzügiger */
    .lp-anfrage { padding: 64px 0 !important; }
    .lp-wizard { padding: 28px 22px !important; border-radius: var(--r-lg); }
    .lp-step-title { font-size: 1.18rem !important; margin-bottom: 6px !important; }
    .lp-step-hint { font-size: 0.9rem !important; line-height: 1.55 !important; margin-bottom: 20px !important; }
    .lp-opt-box { padding: 16px 14px !important; }
    .lp-opt-tx strong { font-size: 0.96rem !important; }
    .lp-opt-tx small { font-size: 0.8rem !important; color: var(--text-muted) !important; }
    .lp-options { gap: 12px !important; display: flex; flex-direction: column; }
    .lp-fieldgrid { gap: 16px !important; }
    .lp-field label { font-size: 0.84rem !important; margin-bottom: 6px; font-weight: 600; color: var(--text); }
    .lp-field input,
    .lp-field textarea,
    .lp-field select { padding: 13px 14px !important; font-size: 0.96rem !important; }
    .lp-step-nav { margin-top: 24px !important; gap: 12px; }
    .lp-step-kicker { font-size: 0.74rem !important; letter-spacing: 0.12em; margin-bottom: 10px; }
    .lp-anfrage-head { margin-bottom: 4px; }
    .lp-anfrage-head h2 { margin-bottom: 14px; }
    .lp-anfrage-lead { margin-bottom: 22px !important; }

    /* Tabs kompakter */
    .lp-vtabs--accordion { gap: 12px; }
    .lp-vtabs--accordion .lp-vtab { padding: 18px 18px !important; }
    .lp-vtab-title { font-size: 1rem !important; margin-bottom: 2px; }
    .lp-vtab-sub { font-size: 0.8rem !important; color: var(--text-muted); }
    .lp-vtab-num { width: 38px !important; height: 38px !important; font-size: 0.94rem !important; }
    .lp-vtabs--accordion .lp-vtab-panel .lp-vtab-photo { min-height: 200px !important; }
    .lp-vtabs--accordion .lp-vtab-panel .lp-vtab-content { padding: 24px 22px !important; }
    .lp-vtab-content h3 { font-size: 1.25rem !important; margin-bottom: 6px; }
    .lp-vtab-step { font-size: 0.72rem !important; margin-bottom: 8px; }
    .lp-vtab-content p { font-size: 0.92rem !important; line-height: 1.6 !important; margin-bottom: 14px !important; }
    .lp-vtab-ulist { gap: 8px !important; }
    .lp-vtab-ulist li { font-size: 0.9rem !important; padding-left: 26px !important; }

    /* FAQ kompakter, aber mehr Whitespace */
    .lp-faq-q { font-size: 0.97rem !important; padding: 18px 18px !important; gap: 12px !important; line-height: 1.4; }
    .lp-faq-a { font-size: 0.92rem !important; line-height: 1.6 !important; padding: 0 18px 20px !important; color: var(--text-muted); }
    .lp-faq-aside { position: static !important; margin-bottom: 32px; }
    .lp-faq-grid { gap: 0 !important; }
    .lp-faq-list { display: flex; flex-direction: column; gap: 10px; }

    /* Final CTA panel knapper */
    .lp-cta-inner { gap: 28px !important; }
    .lp-cta-panel { padding: 24px !important; }

    /* Buttons in Original-Größe (vorherige Compactness war zu klein) */
    .lp-btn.lp-btn--lg { padding: 18px 28px !important; font-size: 1.05rem !important; }

    /* Synonym-Marquee */


    /* Logo-Strip */
    .lp-logos { padding: 32px 0 !important; }
    .lp-logos-label { margin-bottom: 18px !important; }

    /* Personas */
    .lp-personas { padding-top: 72px !important; }
}

/* =========================================================
   FAQ — Show more on Mobile (default 3 visible)
   ========================================================= */
.lp-faq-more {
    display: none;
    margin: 16px auto 0;
    appearance: none; background: transparent;
    border: 1.5px solid var(--line); border-radius: 999px;
    padding: 11px 22px;
    font-family: var(--display); font-weight: 700; font-size: 0.92rem;
    color: var(--text); cursor: pointer;
    align-items: center; gap: 8px;
    transition: border-color .2s ease, background .2s ease;
}
.lp-faq-more:hover { border-color: var(--acc); background: rgba(167,190,21,0.06); }
.lp-faq-more svg { transition: transform .3s ease; }
.lp-faq-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.lp-faq-more .lp-faq-more-hide { display: none; }
.lp-faq-more[aria-expanded="true"] .lp-faq-more-show { display: none; }
.lp-faq-more[aria-expanded="true"] .lp-faq-more-hide { display: inline; }

@media (max-width: 760px) {
    .lp-faq-more { display: inline-flex; }
    /* Initial: nur die ersten 3 FAQ-Items zeigen */
    .lp-faq-list:not(.is-expanded) .lp-faq-item:nth-child(n+4) {
        display: none;
    }
}

/* =========================================================
   NO-BOLD IN BODY TEXT — strong soll nicht fetter sein als Body
   ========================================================= */
p strong,
li strong,
.lp-step-hint strong,
.lp-anfrage-lead strong,
.lp-hero-lead strong,
.lp-cta p strong,
.lp-trust-list strong,
.lp-cta-points strong,
.lp-vtab-ulist strong,
.lp-vtab-content p strong,
.lp-faq-a strong {
    font-weight: 400 !important;
    color: inherit !important;
}

/* =========================================================
   CHIPS / LISTE — Multi-Select als Liste (kein Button-Look)
   ========================================================= */
.lp-field--full { grid-column: 1 / -1; }
.lp-field-hint {
    font-size: 0.78rem; font-weight: 400; color: var(--text-muted);
    margin-left: 6px;
}
.lp-chips {
    display: flex; flex-direction: column;
    gap: 2px;
    margin-top: 6px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg-2);
    overflow: hidden;
    max-height: 260px;
    overflow-y: auto;
}
.lp-chip {
    position: relative; display: flex; align-items: center;
    cursor: pointer; user-select: none;
}
.lp-chip + .lp-chip { border-top: 1px solid var(--line); }
.lp-chip input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: 0; padding: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}
.lp-chip span {
    display: flex; align-items: center; width: 100%;
    padding: 12px 16px;
    font-family: var(--body); font-size: 0.95rem; font-weight: 400;
    color: var(--text);
    line-height: 1.4;
    transition: background .15s ease;
}
/* Checkbox-Marker links vom Text */
.lp-chip span::before {
    content: "";
    display: inline-flex; flex-shrink: 0;
    width: 18px; height: 18px;
    margin-right: 12px;
    border: 1.5px solid var(--line);
    border-radius: 4px;
    background: var(--bg);
    transition: background .15s ease, border-color .15s ease;
}
.lp-chip:hover span { background: var(--acc-soft); }
.lp-chip input:checked + span {
    background: var(--acc-soft);
    color: var(--text);
    font-weight: 500;
}
.lp-chip input:checked + span::before {
    background-color: var(--acc);
    border-color: var(--acc);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191c14' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}
.lp-chip input:focus-visible + span {
    outline: 2px solid var(--acc);
    outline-offset: -2px;
}
.lp-chips.is-invalid { border-color: #d9534f; }

/* =========================================================
   TESTIMONIAL — Eine prominente Kundenstimme
   ========================================================= */
.lp-testimonial { background: var(--bg); padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.lp-testimonial-card {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    position: relative;
    text-align: left;
    box-shadow: 0 22px 50px -32px rgba(0,0,0,0.16);
}
.lp-testimonial-quote {
    color: var(--acc);
    margin-bottom: 22px;
    opacity: 0.9;
}
.lp-testimonial-text {
    font-family: var(--display);
    font-size: clamp(1.25rem, 2.2vw, 1.65rem);
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--text);
    font-weight: 500;
    margin: 0 0 32px;
    font-style: italic;
}
.lp-testimonial-author {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}
.lp-testimonial-avatar {
    flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--on-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}
.lp-testimonial-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    flex: 1 1 0;
    min-width: 0;
}
.lp-testimonial-meta strong {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    letter-spacing: -0.005em;
}
.lp-testimonial-meta span {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.lp-testimonial-stars {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
    text-align: right;
    flex-shrink: 0;
}
.lp-testimonial-stars .lp-stars {
    color: #fbbc05;
    letter-spacing: 0.06em;
    font-size: 1rem;
    line-height: 1;
}
.lp-testimonial-stars small {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 4px;
}
@media (max-width: 540px) {
    .lp-testimonial-author { gap: 12px; }
    .lp-testimonial-stars { width: 100%; flex-direction: row; align-items: center; gap: 8px; justify-content: flex-start; text-align: left; margin-top: 4px; }
    .lp-testimonial-stars small { margin-top: 0; }
}

/* =========================================================
   SO LÄUFT'S AB — 4-Schritt Ablauf-Timeline
   ========================================================= */
/* =========================================================
   ABLAUF — helle Section mit dezenten Lime-Akzenten, Karten mit Pfeilen
   ========================================================= */
.lp-ablauf {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 500px at 12% 8%, rgba(167,190,21,0.08), transparent 55%),
        radial-gradient(700px 400px at 95% 100%, rgba(167,190,21,0.05), transparent 60%),
        var(--bg-2);
    background-attachment: scroll;
}
.lp-ablauf > .lp-container { position: relative; z-index: 1; }
.lp-ablauf-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
    list-style: none;
    padding: 0;
    margin: 0 0 52px;
    position: relative;
    counter-reset: step;
}
.lp-ablauf-step {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 36px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .25s ease, box-shadow .25s ease;
}
.lp-ablauf-step:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -22px rgba(0,0,0,0.45); }
/* Verbindung ZWISCHEN den Karten: drei kleine Punkte (Lime), klar und ruhig */
.lp-ablauf-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    width: 14px;
    height: 4px;
    pointer-events: none;
    z-index: 2;
    background-image: radial-gradient(circle, var(--acc) 1.8px, transparent 2px);
    background-size: 6px 4px;
    background-repeat: repeat-x;
    background-position: center;
    opacity: 0.85;
}
.lp-ablauf-step:not(:last-child)::before {
    /* Alte Linie deaktiviert — wird nicht mehr benutzt */
    content: none;
}
.lp-ablauf-num {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--acc);
    color: var(--acc-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--display); font-weight: 800; font-size: 1.05rem;
    margin-bottom: 8px;
}
.lp-ablauf-tx strong {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--text);
    margin-bottom: 2px;
    line-height: 1.2;
}
.lp-ablauf-meta {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6e7a2c;
    background: var(--acc-soft);
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}
.lp-ablauf-tx p {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}
.lp-ablauf-cta {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
    margin-top: clamp(8px, 1vw, 14px);
}

@media (max-width: 900px) {
    .lp-ablauf-grid { grid-template-columns: repeat(2, 1fr); }
    /* In 2-Spalten-Layout: Pfeil bei jeder zweiten Karte (am Zeilenende) ausblenden */
    .lp-ablauf-step:nth-child(2n)::after,
    .lp-ablauf-step:nth-child(2n)::before { display: none; }
}
@media (max-width: 540px) {
    /* Karten als horizontaler Slider mit Scroll-Snap */
    .lp-ablauf-grid {
        display: flex;
        grid-template-columns: none;
        gap: 22px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* Padding rechts/links — Karten richten sich am Container-Rand aus */
        padding: 4px var(--pad-x) 18px;
        margin: 0 calc(var(--pad-x) * -1) 48px;
        scroll-padding: 0 var(--pad-x);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(167,190,21,0.55) transparent;
    }
    .lp-ablauf-grid::-webkit-scrollbar { height: 5px; }
    .lp-ablauf-grid::-webkit-scrollbar-track { background: transparent; }
    .lp-ablauf-grid::-webkit-scrollbar-thumb {
        background: rgba(167,190,21,0.55);
        border-radius: 99px;
    }
    .lp-ablauf-step {
        flex: 0 0 82%;
        min-width: 82%;
        scroll-snap-align: center;
        padding: 34px 26px 30px;
        /* Karten-Layout: Nummer oben, dann Inhalt */
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .lp-ablauf-num { margin-bottom: 10px; flex-shrink: 0; }
    .lp-ablauf-cta .lp-btn { width: 100%; justify-content: center; }
    /* Punkt-Verbinder zwischen Karten machen im Slider keinen Sinn */
    .lp-ablauf-step:not(:last-child)::after,
    .lp-ablauf-step:not(:last-child)::before { display: none; }
}

/* =========================================================
   FESTPREIS-VERSPRECHEN (statt Preisliste)
   Dunkle Section mit 3 Trust-Karten + CTA
   ========================================================= */
.lp-festpreis {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(700px 400px at 10% 100%, rgba(167,190,21,0.10), transparent 55%),
        radial-gradient(800px 500px at 95% 0%, rgba(167,190,21,0.08), transparent 60%),
        linear-gradient(180deg, #10130B 0%, #161B0F 100%);
}
.lp-festpreis > .lp-container { position: relative; z-index: 1; }

/* 3-spaltiges Karten-Raster */
.lp-festpreis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 2.4vw, 28px);
    margin-bottom: clamp(32px, 4vw, 48px);
}

/* Einzelne Trust-Karte (glasig auf dunkel) */
.lp-festpreis-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    padding: clamp(26px, 3vw, 36px) clamp(22px, 2.5vw, 30px);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    display: flex; flex-direction: column; gap: 14px;
}
.lp-festpreis-card:hover {
    border-color: rgba(167,190,21,0.35);
    transform: translateY(-3px);
    box-shadow: 0 22px 44px -24px rgba(0,0,0,0.5);
}
.lp-festpreis-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(167,190,21,0.16);
    color: var(--acc);
    border: 1px solid rgba(167,190,21,0.28);
}
.lp-festpreis-card h3 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    color: var(--on-dark);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.2;
}
.lp-festpreis-card p {
    color: var(--on-dark-mut);
    font-size: 0.96rem;
    line-height: 1.55;
    margin: 0;
}

/* CTA-Bereich unter den Karten */
.lp-festpreis-cta {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    text-align: center;
}
.lp-festpreis-note {
    color: var(--on-dark-mut);
    font-size: 0.85rem;
    margin: 0;
}

@media (max-width: 900px) {
    .lp-festpreis-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
    .lp-festpreis-cta .lp-btn { width: 100%; justify-content: center; }
}

/* =========================================================
   PREISE — Tabs + Variantenkarten (3 Fahrzeugtypen × 3 Varianten)
   ========================================================= */
.lp-preise { background: var(--bg); }

/* --- Tabs Container --------------------------------------- */
.lp-pricetabs {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: 0 30px 60px -32px rgba(0,0,0,0.16);
    /* Desktop: Tabs links (Sidebar), Panel rechts */
    display: grid;
    grid-template-columns: minmax(240px, 300px) 1fr;
}

/* --- Tab Buttons (Fahrzeugtyp) ---------------------------- */
.lp-pricetabs-nav {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--bg);
    border-right: 1px solid var(--line);
    border-bottom: none;
    align-content: start;
}
.lp-pricetabs-btn {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    display: flex; align-items: center; gap: 14px;
    padding: 22px 26px;
    text-align: left;
    font-family: inherit;
    color: var(--text-muted);
    border-left: 3px solid transparent;
    transition: background .2s, color .2s, border-color .2s;
    position: relative;
}
.lp-pricetabs-btn + .lp-pricetabs-btn {
    border-top: 1px solid var(--line);
    border-left: 3px solid transparent;
}
.lp-pricetabs-btn:hover { background: rgba(167,190,21,0.06); color: var(--text); }
.lp-pricetabs-btn.is-active {
    background: var(--bg-2);
    color: var(--text);
    border-left-color: var(--acc);
}
.lp-pricetabs-btn:focus-visible {
    outline: 2px solid var(--acc); outline-offset: -2px;
}
.lp-pricetabs-btn-ic {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--text);
    transition: background .2s, color .2s, border-color .2s;
}
.lp-pricetabs-btn.is-active .lp-pricetabs-btn-ic {
    background: var(--acc);
    border-color: var(--acc);
    color: var(--acc-ink);
}
.lp-pricetabs-btn-tx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.lp-pricetabs-btn-tx strong {
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.005em;
}
.lp-pricetabs-btn-tx small {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Panels --------------------------------------------- */
.lp-pricetabs-panel {
    padding: clamp(24px, 3.5vw, 38px);
    background: var(--bg-2);
}
.lp-pricetabs-panel[hidden] { display: none; }

/* --- Varianten-Karten ----------------------------------- */
.lp-pricevariants {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.4vw, 26px);
}
.lp-pricecard {
    display: grid;
    grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1fr);
    gap: clamp(22px, 5vw, 64px);
    align-items: stretch;
    padding: clamp(18px, 2.4vw, 24px);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.lp-pricecard:hover {
    border-color: rgba(167,190,21,0.45);
    box-shadow: 0 18px 36px -22px rgba(0,0,0,0.16);
}
.lp-pricecard-media {
    position: relative;
    border-radius: calc(var(--r-md) - 4px);
    overflow: hidden;
    background: #e9ece2; /* Platzhalter, falls Bild langsam lädt */
    aspect-ratio: 16/7.2;
    /* Höhe NICHT auf Row-Height strecken (align-items: stretch des Eltern-Grids).
       Sonst zwingt aspect-ratio die Breite über den Column-Track hinaus
       und das Bild läuft in die Text-Spalte rein. */
    align-self: start;
    width: 100%;
}
.lp-pricecard-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.lp-pricecard-body {
    display: flex; flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    padding: 4px 4px 4px 0;
    min-width: 0; /* erlaubt overflow-wrap am Titel statt das Grid zu sprengen */
}
.lp-pricecard-title {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    color: var(--acc-ink-deep, var(--text));
    color: #6e7a2c; /* gleicher Akzentton wie Eyebrows */
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.1;
    /* Lange deutsche Komposita (FOLIENBESCHRIFTUNG, VOLLFOLIERUNG) dürfen umbrechen,
       statt aus der Spalte zu laufen und über das Bild zu ragen. */
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}
.lp-pricecard-points {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.lp-pricecard-points li {
    position: relative;
    padding-left: 16px;
    font-size: 0.96rem;
    line-height: 1.5;
    color: var(--text);
}
.lp-pricecard-points li::before {
    content: "";
    position: absolute; left: 0; top: 0.65em;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--acc);
}
.lp-pricecard-price {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-muted);
    letter-spacing: -0.005em;
    display: flex; align-items: baseline; gap: 8px;
    margin-top: 4px;
}
.lp-pricecard-price span {
    font-size: clamp(1.7rem, 3vw, 2.1rem);
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.025em;
}

/* --- Panel-Fuß mit PDF-Download ------------------------ */
.lp-pricetabs-foot {
    margin-top: clamp(20px, 2.6vw, 28px);
    display: flex; justify-content: center;
}
.lp-pricetabs-pdf {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 22px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    font-size: 0.95rem;
    transition: border-color .2s, background .2s, color .2s, transform .2s;
}
.lp-pricetabs-pdf:hover {
    border-color: var(--acc);
    background: var(--acc-soft);
    transform: translateY(-1px);
}
.lp-pricetabs-pdf svg { color: #c44; flex-shrink: 0; }

.lp-preise-note {
    color: var(--text-muted);
    font-size: 0.88rem;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}
.lp-preise.is-dark .lp-preise-note { color: var(--on-dark-mut); }

/* --- Tablet + Mobile ------------------------------------ */
@media (max-width: 860px) {
    .lp-pricetabs {
        grid-template-columns: 1fr;
    }
    .lp-pricetabs-nav {
        border-right: none;
        border-bottom: 1px solid var(--line);
    }
    .lp-pricetabs-btn { padding: 16px 20px; gap: 12px; border-left: 0; }
    .lp-pricetabs-btn + .lp-pricetabs-btn {
        border-left: 0;
        border-top: 1px solid var(--line);
    }
    .lp-pricetabs-btn.is-active { border-left-color: transparent; box-shadow: inset 4px 0 0 var(--acc); }
    .lp-pricetabs-btn-ic { width: 38px; height: 38px; }
}
@media (max-width: 1024px) and (min-width: 721px) {
    /* Zwischenstufe: Karten stapeln (Bild über Text) statt zu enge 2-Spalten —
       verhindert, dass Text in den Bildbereich überlappt. Slider greift erst unter 720px.
       Erst ab 1025px ist das nebeneinander-Layout wirklich entspannt lesbar. */
    .lp-pricecard {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .lp-pricecard-media { aspect-ratio: 16/8; }
    .lp-pricecard-body { padding: 4px; }
}
@media (max-width: 720px) {
    /* Preiskarten als horizontaler Slider mit Scroll-Snap */
    .lp-pricevariants {
        display: flex;
        flex-direction: row;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 4px 18px 14px;
        margin: 0 -18px 4px;
        scroll-padding: 0 18px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(167,190,21,0.55) transparent;
    }
    .lp-pricevariants::-webkit-scrollbar { height: 5px; }
    .lp-pricevariants::-webkit-scrollbar-track { background: transparent; }
    .lp-pricevariants::-webkit-scrollbar-thumb {
        background: rgba(167,190,21,0.55);
        border-radius: 99px;
    }
    .lp-pricecard {
        flex: 0 0 84%;
        min-width: 84%;
        scroll-snap-align: center;
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 22px;
    }
    .lp-pricecard-media { aspect-ratio: 16/8; }
    .lp-pricecard-title { font-size: 1.25rem; }
    .lp-pricecard-points li { font-size: 0.92rem; }
    .lp-pricetabs-panel { padding: 22px 0; }
}

/* =========================================================
   HEADER mit Telefonnummer
   ========================================================= */
.lp-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}
.lp-header-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--acc);
    border: 1.5px solid var(--acc);
    color: var(--acc-ink);
    text-decoration: none;
    margin-left: auto; /* expliziter Rechtsbündig-Anker */
    transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
    box-shadow: 0 6px 18px -8px rgba(0,0,0,0.18);
}
.lp-header-phone:hover {
    background: #b8d020;
    border-color: #b8d020;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px rgba(0,0,0,0.25);
}
.lp-header-phone-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: transparent;
    color: var(--acc-ink);
    flex-shrink: 0;
}
.lp-header-phone-tx {
    display: inline-flex;
    align-items: center;
    line-height: 1.15;
    text-align: right;
}
.lp-header-phone-tx strong { font-weight: 700; font-size: 1rem; letter-spacing: -0.005em; }

@media (max-width: 540px) {
    .lp-header-phone { padding: 6px 12px; gap: 8px; }
    .lp-header-phone-ic { width: 28px; height: 28px; }
    .lp-header-phone-tx strong { font-size: 0.88rem; }
}

/* =========================================================
   IHRE FARBE — Color-Cycler · 2-Spalten-Layout
   Text links, gerahmtes Van-Bild rechts mit Farbrotation.
   ========================================================= */
.lp-colors {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    isolation: isolate;
}
/* Sanfter Lime-Schimmer im Hintergrund — gleiche Atmosphäre wie Anfrage */
.lp-colors::before {
    content: "";
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 500px at 88% 10%, rgba(167,190,21,0.10), transparent 55%),
        radial-gradient(700px 400px at 8% 95%, rgba(167,190,21,0.06), transparent 60%);
}
.lp-colors > .lp-container { position: relative; z-index: 1; }
.lp-colors-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(36px, 5vw, 80px);
    align-items: center;
}
.lp-colors-content { max-width: 540px; }
.lp-colors-content .lp-eyebrow {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.13);
    color: var(--on-dark);
    margin-bottom: 22px;
}
.lp-colors-content h2 {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(2.1rem, 4.6vw, 3.6rem);
    line-height: 1.0;
    letter-spacing: -0.035em;
    color: var(--on-dark);
    margin: 0 0 20px;
}
.lp-colors-content h2 .hl { color: var(--acc); }
.lp-colors-lead {
    color: var(--on-dark-mut);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 30px;
}
.lp-colors-lead strong { color: var(--on-dark); font-weight: 700; }
.lp-colors-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.lp-colors-meta {
    color: var(--on-dark-mut);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* Bildrahmen — abgerundet, mit Farbschein dahinter */
.lp-colors-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-colors-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 4;
    border-radius: clamp(18px, 2vw, 28px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 40px 90px -30px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.03) inset;
}
.lp-colors-frame img,
.lp-colors-frame picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.lp-colors-van {
    animation: lp-hue-cycle 28s linear infinite;
    will-change: filter;
    filter: hue-rotate(0deg) saturate(1.0) brightness(0.98);
}
@keyframes lp-hue-cycle {
    0%   { filter: hue-rotate(0deg)   saturate(1.0) brightness(0.98); }
    100% { filter: hue-rotate(360deg) saturate(1.0) brightness(0.98); }
}
/* Sanfter Farb-Halo um den Rahmen, der mit-rotiert */
.lp-colors-frame-glow {
    position: absolute;
    inset: -22%;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgba(167,55,212,0.55), transparent 65%);
    filter: blur(45px);
    animation: lp-hue-cycle 28s linear infinite;
    pointer-events: none;
    opacity: 0.6;
}

@media (max-width: 900px) {
    .lp-colors-grid { grid-template-columns: 1fr; gap: 36px; }
    .lp-colors-content { max-width: 100%; }
    .lp-colors-frame { aspect-ratio: 4 / 3; }
    .lp-colors-actions { gap: 14px; }
    .lp-colors-actions .lp-btn { width: 100%; justify-content: center; }
    .lp-colors-meta { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-colors-van,
    .lp-colors-frame-glow { animation: none; }
}

/* =========================================================
   WERKSTATT — Eigene Fertigung Mannheim
   Text links, Foto-Komposition rechts (versetzt, editorial)
   ========================================================= */
.lp-werkstatt {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    isolation: isolate;
}
.lp-werkstatt::before {
    content: "";
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(800px 450px at 10% 5%, rgba(167,190,21,0.07), transparent 55%),
        radial-gradient(600px 350px at 95% 90%, rgba(167,190,21,0.05), transparent 60%);
}
.lp-werkstatt > .lp-container { position: relative; z-index: 1; }
.lp-werkstatt-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(36px, 5vw, 80px);
    align-items: center;
}
.lp-werkstatt-content { max-width: 540px; }
.lp-werkstatt-content .lp-eyebrow {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.13);
    color: var(--on-dark);
    margin-bottom: 22px;
}
.lp-werkstatt-content h2 {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(2.1rem, 4.6vw, 3.6rem);
    line-height: 1.0;
    letter-spacing: -0.035em;
    color: var(--on-dark);
    margin: 0 0 20px;
}
.lp-werkstatt-content h2 .hl { color: var(--acc); }
.lp-werkstatt-lead {
    color: var(--on-dark-mut);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 24px;
}
.lp-werkstatt-lead strong { color: var(--on-dark); font-weight: 700; }
.lp-werkstatt-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lp-werkstatt-points li {
    position: relative;
    padding-left: 26px;
    color: var(--on-dark);
    font-size: 0.98rem;
    line-height: 1.5;
}
.lp-werkstatt-points li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.55em;
    width: 14px; height: 2px;
    background: var(--acc);
    border-radius: 2px;
}

/* Fotos — editorial, versetzt */
.lp-werkstatt-gallery {
    position: relative;
    aspect-ratio: 5 / 4.4;
    width: 100%;
}
.lp-werkstatt-photo {
    position: absolute;
    margin: 0;
    overflow: hidden;
    border-radius: clamp(16px, 1.8vw, 24px);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 30px 70px -28px rgba(0,0,0,0.55);
    transition: transform .35s ease, box-shadow .35s ease;
}
.lp-werkstatt-photo picture,
.lp-werkstatt-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lp-werkstatt-photo--main {
    top: 0; left: 0;
    width: 72%;
    height: 78%;
    z-index: 1;
}
.lp-werkstatt-photo--inset {
    bottom: 0; right: 0;
    width: 54%;
    height: 60%;
    z-index: 2;
    border-color: rgba(167,190,21,0.20);
    box-shadow:
        0 30px 70px -22px rgba(0,0,0,0.6),
        0 0 0 4px var(--ink);
}
.lp-werkstatt-gallery:hover .lp-werkstatt-photo--main { transform: translate(-4px, -4px); }
.lp-werkstatt-gallery:hover .lp-werkstatt-photo--inset { transform: translate(4px, 4px); }

@media (max-width: 900px) {
    .lp-werkstatt-grid { grid-template-columns: 1fr; gap: 36px; }
    .lp-werkstatt-content { max-width: 100%; }
    .lp-werkstatt-gallery { aspect-ratio: 4 / 3.6; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 540px) {
    .lp-werkstatt-photo--main { width: 76%; height: 76%; }
    .lp-werkstatt-photo--inset { width: 56%; height: 56%; }
}

/* =========================================================
   DARK-MODE-OVERRIDES für PREISE und ABLAUF
   Beide Sections bekommen nun einen dunklen Auftritt –
   Karten, Tabs, Listen werden invertiert, ohne die Struktur
   selbst anzufassen.
   ========================================================= */

/* --- PREISE.is-dark ------------------------------------- */
.lp-preise.is-dark {
    background: var(--ink);
    position: relative;
    isolation: isolate;
}
.lp-preise.is-dark::before {
    content: "";
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 500px at 50% 0%, rgba(167,190,21,0.08), transparent 55%);
}
.lp-preise.is-dark > .lp-container { position: relative; z-index: 1; }
.lp-preise.is-dark .lp-section-head h2 { color: var(--on-dark); }
.lp-preise.is-dark .lp-section-head h2 .hl { color: var(--acc); }
.lp-preise.is-dark .lp-section-head p { color: var(--on-dark-mut); }
.lp-preise.is-dark .lp-section-head p strong { color: var(--on-dark); }
.lp-preise.is-dark .lp-eyebrow {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.13);
    color: var(--on-dark);
}
.lp-preise.is-dark .lp-pricetabs {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 30px 70px -32px rgba(0,0,0,0.6);
}
.lp-preise.is-dark .lp-pricetabs-panel {
    background: transparent;
}
.lp-preise.is-dark .lp-pricetabs-nav {
    background: rgba(0,0,0,0.22);
    border-bottom-color: rgba(255,255,255,0.08);
}
.lp-preise.is-dark .lp-pricetabs-btn {
    color: var(--on-dark-mut);
}
.lp-preise.is-dark .lp-pricetabs-btn + .lp-pricetabs-btn {
    border-left-color: rgba(255,255,255,0.08);
}
.lp-preise.is-dark .lp-pricetabs-btn:hover {
    background: rgba(167,190,21,0.08);
    color: var(--on-dark);
}
.lp-preise.is-dark .lp-pricetabs-btn.is-active {
    background: rgba(255,255,255,0.04);
    color: var(--on-dark);
    border-bottom-color: var(--acc);
}
.lp-preise.is-dark .lp-pricecard {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}
.lp-preise.is-dark .lp-pricecard:hover {
    border-color: rgba(167,190,21,0.45);
    box-shadow: 0 18px 36px -22px rgba(0,0,0,0.6);
}
.lp-preise.is-dark .lp-pricecard-media {
    background: #1c1f15;
}
.lp-preise.is-dark .lp-pricecard-title {
    color: var(--acc);
}
.lp-preise.is-dark .lp-pricecard-points li { color: var(--on-dark); }
.lp-preise.is-dark .lp-pricecard-price { color: var(--on-dark-mut); }
.lp-preise.is-dark .lp-pricecard-price span { color: var(--on-dark); }
.lp-preise.is-dark .lp-pricetabs-pdf {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.13);
    color: var(--on-dark);
}
.lp-preise.is-dark .lp-pricetabs-pdf:hover {
    border-color: var(--acc);
    background: rgba(167,190,21,0.12);
    color: var(--on-dark);
}
.lp-preise.is-dark .lp-preise-note { color: var(--on-dark-mut); }

/* --- ABLAUF.is-dark ------------------------------------- */
.lp-ablauf.is-dark {
    background:
        linear-gradient(rgba(11, 14, 7, 0.86), rgba(11, 14, 7, 0.94)),
        url('../images/lp-werkstatt-1.jpg') center 30% / cover no-repeat,
        var(--ink);
    background-attachment: scroll;
    position: relative;
}
/* Sanfter Lime-Schimmer obendrüber für Markenwärme */
.lp-ablauf.is-dark::before {
    content: "";
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 500px at 12% 8%, rgba(167,190,21,0.10), transparent 55%),
        radial-gradient(700px 400px at 95% 100%, rgba(167,190,21,0.06), transparent 60%);
}
.lp-ablauf.is-dark > .lp-container { position: relative; z-index: 1; }
.lp-ablauf.is-dark .lp-section-head h2 { color: var(--on-dark); }
.lp-ablauf.is-dark .lp-section-head h2 .hl { color: var(--acc); }
.lp-ablauf.is-dark .lp-section-head p { color: var(--on-dark-mut); }
.lp-ablauf.is-dark .lp-eyebrow {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.13);
    color: var(--on-dark);
}
.lp-ablauf.is-dark .lp-ablauf-step {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}
.lp-ablauf.is-dark .lp-ablauf-step:hover {
    background: rgba(255,255,255,0.05);
    box-shadow: 0 22px 40px -22px rgba(0,0,0,0.7);
}
.lp-ablauf.is-dark .lp-ablauf-tx strong { color: var(--on-dark); }
.lp-ablauf.is-dark .lp-ablauf-tx p { color: var(--on-dark-mut); }
.lp-ablauf.is-dark .lp-ablauf-meta {
    background: rgba(167,190,21,0.18);
    color: var(--acc);
}

/* Override für die "no-bold" !important-Regel, damit Ablauf-Titel im Dark-Mode sichtbar weiß bleiben */
.lp-ablauf.is-dark .lp-ablauf-tx strong { color: var(--on-dark) !important; }
.lp-werkstatt .lp-werkstatt-lead strong { color: var(--on-dark) !important; }
.lp-colors .lp-colors-lead strong { color: var(--on-dark) !important; }

/* =========================================================
   COLOR-WORDS — Typografie-Wolke unten im Color-Cycler-Rahmen
   Verschiedene Schriftarten, Größen — jedes Wort durchläuft
   die Farbpalette synchron zum Van, aber mit Zeit-Versatz,
   damit es lebendig wirkt.
   ========================================================= */
.lp-colors-words {
    position: absolute;
    left: 0; right: 0;
    bottom: 5%;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.05em 0.35em;
    padding: 0 clamp(12px, 3%, 32px);
    pointer-events: none;
    line-height: 0.9;
}
.lp-colors-word {
    display: inline-block;
    /* Basisfarbe; hue-rotate verschiebt den Farbton zyklisch */
    color: hsl(295, 85%, 70%);
    line-height: 0.9;
    text-shadow:
        0 2px 14px rgba(0,0,0,0.5),
        0 0 28px rgba(0,0,0,0.25);
    will-change: filter;
    animation: lp-word-hue 28s linear infinite;
}
@keyframes lp-word-hue {
    0%   { filter: hue-rotate(0deg)   saturate(1.15); }
    100% { filter: hue-rotate(360deg) saturate(1.15); }
}
/* Jedes Wort: andere Schrift, Größe, Stil — und leichter Versatz */
.lp-colors-word--1 {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(1.6rem, 4.8vw, 3.4rem);
    font-style: italic;
    letter-spacing: -0.04em;
    animation-delay: -2s;
}
.lp-colors-word--2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2rem, 6vw, 4.2rem);
    letter-spacing: -0.03em;
    animation-delay: -8s;
}
.lp-colors-word--3 {
    font-family: 'Bebas Neue', 'Hanken Grotesk', sans-serif;
    font-weight: 400;
    font-size: clamp(2.2rem, 6.8vw, 4.6rem);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    animation-delay: -14s;
}
.lp-colors-word--4 {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: clamp(1.8rem, 5.2vw, 3.6rem);
    letter-spacing: -0.01em;
    transform: rotate(-3deg) translateY(4%);
    animation-delay: -18s;
}
.lp-colors-word--5 {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.4rem, 4vw, 2.8rem);
    letter-spacing: -0.02em;
    text-transform: lowercase;
    animation-delay: -23s;
}

/* Mobile: Wörter etwas dichter packen */
@media (max-width: 700px) {
    .lp-colors-words {
        bottom: 4%;
        gap: 0.05em 0.25em;
    }
    .lp-colors-word--4 { transform: rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
    .lp-colors-word { animation: none; }
}

/* =========================================================
   LOGO-TICKER — Stabilität (Mobile-Fix: Logos waren manchmal
   weg, weil einzelne SVGs zu 0×0 kollabierten und lazy-load
   sie nicht nachschob. Jetzt: fester Mindest-Slot.)
   ========================================================= */
.lp-logo-item {
    min-width: 110px;
    min-height: 40px;
}
.lp-logo-item img {
    /* Wenn ein SVG ohne intrinsische Größe daherkommt, wenigstens etwas Platz */
    min-width: 80px;
}
@media (max-width: 760px) {
    .lp-logo-item {
        min-width: 100px;
        min-height: 36px;
    }
    .lp-logo-item img {
        min-width: 70px;
    }
}

/* =========================================================
   HERO-BANNERS — Konzept · Fertigung · Montage
   Drei lime-grüne Banner mit weißer fetter Schrift,
   deutlich gekippt, eng gestapelt und gestaffelt — sitzen
   komplett innerhalb der Hero-Bildfläche unten links.
   ========================================================= */
.lp-hero-banners {
    position: absolute;
    z-index: 5;
    /* Komplett auf dem Bild (rechte Hero-Hälfte) */
    left: 52%;
    bottom: clamp(28px, 6vh, 80px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    pointer-events: none;
}
.lp-hero-banner {
    display: inline-block;
    padding: 10px 26px 12px;
    background: var(--acc);
    color: #ffffff;
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(1.55rem, 2.7vw, 2.4rem);
    line-height: 1;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: rotate(-9deg);
    transform-origin: center;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55);
}
/* Negativer vertikaler Versatz → Banner überlappen sich leicht (wie in der Referenz) */
.lp-hero-banner + .lp-hero-banner { margin-top: -4px; }
/* Staffelung — jede Zeile schiebt sich deutlich weiter nach rechts */
.lp-hero-banner--2 { margin-left: clamp(28px, 4vw, 60px); }
.lp-hero-banner--3 { margin-left: clamp(56px, 7.5vw, 120px); }

/* Tablet — falls Hero schmaler wird, Position leicht anpassen */
@media (max-width: 1100px) {
    .lp-hero-banners { left: 50%; }
}

/* Mobile — nach Spaltenumbruch sitzen die Banner unten links auf dem Bild */
@media (max-width: 860px) {
    .lp-hero-banners {
        left: clamp(12px, 4vw, 24px);
        bottom: clamp(14px, 3vh, 28px);
    }
    .lp-hero-banner {
        font-size: clamp(1.05rem, 4.5vw, 1.5rem);
        padding: 7px 16px 9px;
        box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55);
    }
    .lp-hero-banner + .lp-hero-banner { margin-top: -3px; }
    .lp-hero-banner--2 { margin-left: 18px; }
    .lp-hero-banner--3 { margin-left: 36px; }
}

/* Highlight-Akzent auf "unverbindlich" im Anfrage-Header (eigener Wrapper, nicht .lp-section-head) */
.lp-anfrage-head h2 .hl { color: var(--acc); }

/* =========================================================
   DROPDOWN — Klick öffnet Liste, Auswahl füllt das Label
   ========================================================= */
.lp-dropdown {
    position: relative;
}
.lp-dropdown-toggle {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    font: inherit;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    min-height: 50px;
}
.lp-dropdown-toggle:hover {
    border-color: var(--acc);
}
.lp-dropdown-toggle:focus-visible {
    outline: none;
    border-color: var(--acc);
    box-shadow: 0 0 0 3px rgba(167,190,21,0.18);
}
.lp-dropdown.is-open > .lp-dropdown-toggle {
    border-color: var(--acc);
    background: #fafcf3;
}
.lp-dropdown.lp-options.is-invalid > .lp-dropdown-toggle {
    border-color: #d04545;
    background: #fef5f5;
}
.lp-dropdown-label {
    flex: 1;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.96rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-dropdown.has-value .lp-dropdown-label {
    color: var(--text);
    font-weight: 600;
}
.lp-dropdown-arrow {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.lp-dropdown.is-open .lp-dropdown-arrow {
    transform: rotate(180deg);
    color: var(--acc);
}
.lp-dropdown-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    z-index: 9999;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    padding: 6px;
    box-shadow: 0 22px 50px -16px rgba(15,17,11,0.25);
    max-height: min(65vh, 440px);
    overflow-y: auto;
    animation: lp-dropdown-in .18s cubic-bezier(.4,0,.2,1);
}
/* Mobil: Panel öffnet sich ÜBER dem Formular (nicht inline), z-index 9999
   damit alles drunterliegt. Damit es nicht an der Section-Kante abgeschnitten
   wird, hebt die :has()-Regel weiter unten die overflow:hidden-Sperre auf,
   sobald irgendein Dropdown geöffnet ist. */
@media (max-width: 720px) {
    .lp-dropdown-panel {
        max-height: min(55vh, 360px);
        box-shadow: 0 18px 40px -14px rgba(15,17,11,0.35);
    }
}
/* Desktop-Safety-Netz: wenn ein Dropdown offen ist, darf die Section nicht
   clippen — sonst würde der Panel-Schatten unten abgeschnitten. */
.lp-anfrage:has(.lp-dropdown.is-open) {
    overflow: visible;
    z-index: 100;
}
/* Hero-Form (lp-hero-mag-stage): die Hero-Container haben overflow:hidden
   für Bg-Bilder & Dekoration. Sobald ein Dropdown geöffnet ist, müssen sie
   die Clipping-Sperre aufheben — sonst wird die Optionsliste auf Handy
   abgeschnitten und der Nutzer muss scrollen. */
.lp-hero:has(.lp-dropdown.is-open),
.lp-hero--mag:has(.lp-dropdown.is-open),
.lp-hero-mag-stage:has(.lp-dropdown.is-open),
.lp-hero-mag-form:has(.lp-dropdown.is-open),
.lp-hero-mag-col:has(.lp-dropdown.is-open),
.lp-hero-mag-inner:has(.lp-dropdown.is-open) {
    overflow: visible;
}
.lp-hero-mag-stage:has(.lp-dropdown.is-open) {
    z-index: 100;
    position: relative;
}
.lp-dropdown-panel[hidden] { display: none; }
@keyframes lp-dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lp-dropdown-option {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s ease;
}
.lp-dropdown-option:hover {
    background: var(--acc-soft, rgba(167,190,21,0.08));
}
.lp-dropdown-option input {
    appearance: none;
    -webkit-appearance: none;
    width: 22px; height: 22px;
    min-width: 22px; min-height: 22px;
    max-width: 22px; max-height: 22px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 1.6px solid #c5cab1;
    background: #fff;
    flex-shrink: 0;
    flex-grow: 0;
    cursor: pointer;
    position: relative;
    transition: border-color .15s, background .15s;
}
.lp-dropdown-option input[type="checkbox"] { border-radius: 5px; }
.lp-dropdown-option input[type="radio"]    { border-radius: 50%; }
.lp-dropdown-option:hover input {
    border-color: var(--acc);
}
.lp-dropdown-option input:checked {
    background: var(--acc);
    border-color: var(--acc);
}
/* Checkmark für Checkbox — über translate exakt mittig positioniert */
.lp-dropdown-option input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 5px; height: 10px;
    border: solid var(--acc-ink, #1c1f15);
    border-width: 0 2.2px 2.2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}
/* Filled circle für Radio — auch sauber über translate */
.lp-dropdown-option input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 9px; height: 9px;
    background: var(--acc-ink, #1c1f15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.lp-dropdown-option-text {
    display: flex; flex-direction: column;
    line-height: 1.3;
    min-width: 0;
    flex: 1;
}
.lp-dropdown-option-text strong {
    font-weight: 600;
    font-size: 0.96rem;
    color: var(--text);
}
.lp-dropdown-option-text small {
    color: var(--text-muted);
    font-size: 0.83rem;
    margin-top: 1px;
}
/* Sichtbar-machen-Effekt für selektierte Option im Panel */
.lp-dropdown-option:has(input:checked) {
    background: rgba(167,190,21,0.08);
}
.lp-dropdown-option:has(input:checked) .lp-dropdown-option-text strong {
    color: var(--text);
}

/* Mobile: nur Toggle-Padding minimal anpassen — Panelhöhe bleibt vh-relativ */
@media (max-width: 540px) {
    .lp-dropdown-toggle { padding: 12px 16px; min-height: 48px; }
}

/* =========================================================
   DROPDOWN auf Desktop: Toggle aus, Optionen als Karten/Chips
   Mobile (< 720px) bleibt die Dropdown-Liste
   ========================================================= */
@media (min-width: 720px) {
    .lp-dropdown-toggle { display: none; }

    /* Wrapper-Grid von .lp-options aufheben — sonst landet das Panel in einer Spalte */
    .lp-dropdown.lp-options {
        display: block;
        margin-bottom: 0;
    }

    /* Panel wird inline statt absolut platziert */
    .lp-dropdown-panel,
    .lp-dropdown-panel[hidden] {
        display: grid !important;
        position: static;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
        margin: 0;
        max-height: none;
        overflow: visible;
        animation: none;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Optionen als Karten (Design + Leistung) */
    .lp-dropdown-option {
        border: 1.5px solid var(--line);
        border-radius: var(--r-md);
        background: #fff;
        padding: 14px 18px;
        gap: 14px;
        transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
    }
    .lp-dropdown-option:hover {
        border-color: var(--acc);
        background: #fafcf3;
        transform: translateY(-1px);
        box-shadow: 0 8px 18px -10px rgba(0,0,0,0.08);
    }
    .lp-dropdown-option:has(input:checked) {
        border-color: var(--acc);
        background: var(--acc-soft, rgba(167,190,21,0.10));
    }

    /* Fahrzeugtyp (kein .lp-options Wrapper) → Chips/Pillen */
    .lp-dropdown:not(.lp-options) .lp-dropdown-panel {
        grid-template-columns: none;
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
    }
    .lp-dropdown:not(.lp-options) .lp-dropdown-option {
        padding: 9px 16px;
        border-radius: 99px;
        flex: 0 0 auto;
    }
    .lp-dropdown:not(.lp-options) .lp-dropdown-option-text small { display: none; }
}

/* =========================================================
   KUNDENSTIMMEN — Google Reviews als Cards
   ========================================================= */
.lp-testimonials { background: var(--bg); overflow: hidden; }

/* Newsticker — scrollbar (Touch & Maus), Auto-Lauf wird via JS getrieben */
.lp-testimonials-marquee {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge alt */
    cursor: grab;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.lp-testimonials-marquee::-webkit-scrollbar { display: none; }
.lp-testimonials-marquee.is-dragging { cursor: grabbing; }
.lp-testimonials-marquee.is-dragging * { user-select: none; pointer-events: none; }

.lp-testimonials-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: max-content;
    gap: 26px;
    padding: 6px 0;
    /* Animation läuft via JS (scrollLeft), nicht mehr per CSS-keyframes */
}

@media (max-width: 980px) { .lp-testimonials-track { gap: 22px; } }
@media (max-width: 620px) { .lp-testimonials-track { gap: 18px; } }

.lp-testimonial-card {
    position: relative;
    flex: 0 0 auto;
    width: clamp(280px, 28vw, 360px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 38px 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    overflow: hidden;
}
.lp-testimonial-card::before {
    /* Deko-Anführungszeichen oben links — sehr subtil, gibt Markenakzent */
    content: "\201C";
    position: absolute;
    top: -22px;
    left: 18px;
    font-family: var(--display);
    font-size: 7.2rem;
    font-weight: 800;
    color: var(--acc);
    opacity: 0.15;
    line-height: 1;
    pointer-events: none;
}
.lp-testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px -22px rgba(15,17,11,0.18);
    border-color: rgba(167,190,21,0.4);
}
.lp-testimonial-stars {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    width: max-content;
}
.lp-testimonial-stars svg {
    display: block;
    flex-shrink: 0;
}
.lp-testimonial-quote {
    position: relative;
    font-size: 0.97rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
    flex: 1;
    font-style: normal;
}
.lp-testimonial-meta {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid var(--line);
    padding-top: 16px;
    margin-top: 4px;
    gap: 12px;
    flex-wrap: wrap;
}
.lp-testimonial-name { font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.lp-testimonial-source {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}

.lp-testimonials-cta {
    text-align: center;
    margin-top: clamp(44px, 5vw, 64px);
}
.lp-testimonials-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--r-full);
    background: transparent;
    color: var(--ink);
    text-decoration: none;
    border: 1.5px solid var(--line);
    font-weight: 600;
    font-size: 0.96rem;
    transition: background .2s, border-color .2s, transform .2s;
}
.lp-testimonials-link:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

/* =========================================================
   TRUST-ROW direkt über dem Anfrage-Wizard
   ========================================================= */
.lp-anfrage-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px clamp(22px, 3.5vw, 40px);
    list-style: none;
    padding: 0;
    margin: 0 auto clamp(30px, 4vw, 44px);
    max-width: 820px;
}
.lp-anfrage-trust li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--on-dark-mut);
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.3;
}
.lp-anfrage-trust svg {
    color: var(--acc);
    flex-shrink: 0;
}
/* Mobile: kleinerer Text + kompaktere Lücken */
@media (max-width: 540px) {
    .lp-anfrage-trust { gap: 10px 20px; font-size: 0.88rem; }
    .lp-anfrage-trust li { font-size: 0.88rem; }
}

/* =========================================================
   ANIMATIONS — Scroll-Reveal, Mikro-Interaktionen
   Alle Animationen respektieren prefers-reduced-motion.
   ========================================================= */

/* Standard Reveal: nur aktiv, wenn JS geladen und Body markiert hat. */
body.js-enabled .lp-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .75s cubic-bezier(.2, .65, .25, 1),
        transform .75s cubic-bezier(.2, .65, .25, 1);
    will-change: opacity, transform;
}
body.js-enabled .lp-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Stagger-Container: direkte Kinder werden zeitversetzt eingeblendet. */
body.js-enabled .lp-reveal-stagger > * {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity .65s cubic-bezier(.2, .65, .25, 1),
        transform .65s cubic-bezier(.2, .65, .25, 1);
}
body.js-enabled .lp-reveal-stagger.is-visible > * {
    opacity: 1;
    transform: none;
}
body.js-enabled .lp-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
body.js-enabled .lp-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; }
body.js-enabled .lp-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
body.js-enabled .lp-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
body.js-enabled .lp-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; }
body.js-enabled .lp-reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 450ms; }
body.js-enabled .lp-reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 540ms; }
body.js-enabled .lp-reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 600ms; }

/* Subtiler Float-Effekt auf dem Hero Google-Badge — wirkt lebendig ohne
   aufdringlich zu sein. 3,2 s Loop, ease-in-out, ~3 px Amplitude. */
@keyframes lp-float-soft {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
.lp-hero-google {
    animation: lp-float-soft 3.4s ease-in-out infinite;
}
/* Hover oder Touch: Animation pausieren, damit Klick präzise bleibt */
.lp-hero-google:hover {
    animation-play-state: paused;
}

/* Shine-Sweep auf den Primary-Buttons — wird beim Hover ausgelöst. */
.lp-btn--primary {
    position: relative;
    overflow: hidden;
}
.lp-btn--primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-18deg);
    pointer-events: none;
    transition: left .65s cubic-bezier(.4, 0, .2, 1);
}
.lp-btn--primary:hover::after {
    left: 130%;
}

/* Ablauf-Nummern: kurzer Pop beim Reveal */
@keyframes lp-num-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
body.js-enabled .lp-ablauf-step.is-visible .lp-ablauf-num,
body.js-enabled .lp-reveal-stagger.is-visible .lp-ablauf-step .lp-ablauf-num {
    animation: lp-num-pop .55s cubic-bezier(.34, 1.56, .64, 1) both;
}

/* Refgrid-Karten: Reveal mit leichtem Scale-Up statt nur Translate */
body.js-enabled .lp-refgrid > .lp-refitem {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
    transition:
        opacity .6s cubic-bezier(.2, .65, .25, 1),
        transform .6s cubic-bezier(.2, .65, .25, 1);
}
body.js-enabled .lp-refgrid.is-visible > .lp-refitem,
body.js-enabled .lp-refs.is-visible .lp-refitem {
    opacity: 1;
    transform: none;
}
/* Wave-Reveal über mehrere Karten — ohne 15 nth-child-Regeln */
body.js-enabled .lp-refgrid.is-visible > .lp-refitem:nth-child(1)  { transition-delay: 0ms; }
body.js-enabled .lp-refgrid.is-visible > .lp-refitem:nth-child(2)  { transition-delay: 60ms; }
body.js-enabled .lp-refgrid.is-visible > .lp-refitem:nth-child(3)  { transition-delay: 120ms; }
body.js-enabled .lp-refgrid.is-visible > .lp-refitem:nth-child(4)  { transition-delay: 180ms; }
body.js-enabled .lp-refgrid.is-visible > .lp-refitem:nth-child(5)  { transition-delay: 240ms; }
body.js-enabled .lp-refgrid.is-visible > .lp-refitem:nth-child(6)  { transition-delay: 300ms; }
body.js-enabled .lp-refgrid.is-visible > .lp-refitem:nth-child(n+7) { transition-delay: 360ms; }

/* Hero: Inhalt staffelt ein beim Laden (kein Scroll nötig — Hero ist sofort sichtbar) */
@keyframes lp-hero-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}
.lp-hero-content > .lp-eyebrow,
.lp-hero-content > h1,
.lp-hero-content > .lp-hero-lead,
.lp-hero-content > .lp-hero-actions,
.lp-hero-content > .lp-hero-google {
    animation: lp-hero-fade-up .85s cubic-bezier(.2, .65, .25, 1) both;
}
.lp-hero-content > .lp-eyebrow      { animation-delay: 0.10s; }
.lp-hero-content > h1               { animation-delay: 0.20s; }
.lp-hero-content > .lp-hero-lead    { animation-delay: 0.35s; }
.lp-hero-content > .lp-hero-actions { animation-delay: 0.50s; }
.lp-hero-content > .lp-hero-google  { animation-delay: 0.70s; }

/* Reduced-Motion Override: alle Animationen entschärfen */
@media (prefers-reduced-motion: reduce) {
    body.js-enabled .lp-reveal,
    body.js-enabled .lp-reveal-stagger > *,
    body.js-enabled .lp-refgrid > .lp-refitem {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    .lp-hero-google,
    .lp-btn--primary::after,
    .lp-hero-content > .lp-eyebrow,
    .lp-hero-content > h1,
    .lp-hero-content > .lp-hero-lead,
    .lp-hero-content > .lp-hero-actions,
    .lp-hero-content > .lp-hero-google {
        animation: none !important;
    }
}

/* =========================================================
   MATERIALIEN / Markenfolien-Hersteller mit Datenblatt-Akkordeon
   ========================================================= */
.lp-folien {
    background: var(--bg-3);
}
.lp-folien-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: var(--maxw);
    margin: 0 auto;
}
@media (max-width: 820px) {
    .lp-folien-grid { grid-template-columns: 1fr; gap: 22px; }
}

.lp-folien-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 38px 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.lp-folien-card:hover {
    border-color: rgba(167, 190, 21, 0.4);
    box-shadow: 0 20px 44px -22px rgba(15, 17, 11, 0.16);
}

/* Logo-Container — fixe Höhe, Logo zentriert */
.lp-folien-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 56px;
    margin-bottom: 4px;
}
.lp-folien-logo img {
    max-height: 100%;
    max-width: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.lp-folien-tagline {
    margin: 0;
    font-size: 0.99rem;
    line-height: 1.55;
    color: var(--text);
}
.lp-folien-tagline strong {
    color: var(--ink);
    font-weight: 700;
}

/* Native <details> als Akkordeon */
.lp-folien-details {
    margin-top: 6px;
    border-top: 1px solid var(--line);
    padding-top: 4px;
}
.lp-folien-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    padding: 16px 4px;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.96rem;
    transition: color .2s;
    user-select: none;
}
.lp-folien-summary::-webkit-details-marker { display: none; }
.lp-folien-summary::marker { content: ""; }
.lp-folien-summary:hover { color: #6e7a2c; }
.lp-folien-summary-label { flex: 1; }
.lp-folien-summary-count {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-3);
    padding: 4px 9px;
    border-radius: 99px;
}
.lp-folien-chevron {
    transition: transform .3s cubic-bezier(.2, .65, .25, 1);
    color: var(--text-muted);
    flex-shrink: 0;
}
.lp-folien-details[open] .lp-folien-chevron {
    transform: rotate(180deg);
    color: var(--acc-dark);
}

/* Liste der PDFs */
.lp-folien-list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: lp-folien-fade-in .3s cubic-bezier(.2, .65, .25, 1);
}
@keyframes lp-folien-fade-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
.lp-folien-list li a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 12px;
    text-decoration: none;
    color: var(--text);
    border-radius: var(--r-sm);
    transition: background .18s, color .18s;
}
.lp-folien-list li a:hover {
    background: var(--bg-3);
    color: var(--ink);
}
.lp-folien-list li a:hover .lp-folien-arrow {
    transform: translate(2px, -2px);
    color: var(--acc-dark);
}
.lp-folien-pdf-ic {
    flex-shrink: 0;
    color: var(--acc-dark);
    opacity: 0.85;
}
.lp-folien-list-tx {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.lp-folien-list-tx strong {
    font-weight: 700;
    color: var(--ink);
    font-size: 0.96rem;
    letter-spacing: -0.005em;
}
.lp-folien-list-tx small {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.lp-folien-arrow {
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: 0.6;
    transition: transform .22s ease, color .22s;
}

@media (max-width: 540px) {
    .lp-folien-card { padding: 30px 22px 22px; }
    .lp-folien-list li a { padding: 12px 8px; gap: 12px; }
    .lp-folien-list-tx strong { font-size: 0.92rem; }
    .lp-folien-list-tx small { font-size: 0.78rem; }
}

/* =========================================================
   Badge auf Teilfolierungs-Bildern: weist auf unbeklebten Originalbereich hin
   ========================================================= */
.lp-pricecard-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #ffffff;
    color: var(--ink);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 99px;
    box-shadow: 0 4px 12px -4px rgba(15, 17, 11, 0.18);
    pointer-events: none;
    z-index: 1;
}
.lp-pricecard-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--acc);
    flex-shrink: 0;
}
@media (max-width: 540px) {
    .lp-pricecard-badge {
        top: 10px;
        left: 10px;
        font-size: 0.58rem;
        padding: 5px 9px;
    }
}

/* =========================================================
   PRICECARD KICKER — kleiner technischer Begriff über Marketing-Titel
   (z. B. "folienbeschriftung" über "Mobile Visitenkarte")
   ========================================================= */
.lp-pricecard-kicker {
    display: inline-block;
    margin-bottom: 4px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.2;
    letter-spacing: 0;
}
@media (max-width: 540px) {
    .lp-pricecard-kicker {
        font-size: 0.74rem;
    }
}
/* Im dunklen Pricing-Theme: gedämpftes hell statt dunkel-muted */
.lp-preise.is-dark .lp-pricecard-kicker {
    color: var(--on-dark-mut);
}

/* =========================================================
   SHARE STRIP — Seite teilen / weiterempfehlen
   ========================================================= */
.lp-share-strip {
    background: var(--bg-3);
    padding: clamp(36px, 5vw, 56px) 0;
    border-top: 1px solid var(--line);
}
.lp-share-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 3vw, 26px);
    flex-wrap: wrap;
}
.lp-share-label {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.lp-share-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}
.lp-share-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition: transform .2s ease, color .25s ease, background .25s ease,
                border-color .25s ease, box-shadow .25s ease;
}
.lp-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -10px rgba(15, 17, 11, 0.2);
}
.lp-share-btn:active { transform: translateY(0); }

/* Brand-Farben on Hover */
.lp-share-btn[data-platform="whatsapp"]:hover {
    background: #25D366; border-color: #25D366; color: #fff;
}
.lp-share-btn[data-platform="email"]:hover {
    background: var(--acc-dark); border-color: var(--acc-dark); color: #fff;
}
.lp-share-btn[data-platform="linkedin"]:hover {
    background: #0A66C2; border-color: #0A66C2; color: #fff;
}
.lp-share-btn[data-platform="copy"]:hover,
.lp-share-btn[data-platform="native"]:hover {
    background: var(--ink); border-color: var(--ink); color: #fff;
}

/* Copy-Feedback (Check-Icon nach erfolgreichem Kopieren) */
.lp-share-btn[data-platform="copy"] .lp-share-icon-done { display: none; }
.lp-share-btn[data-platform="copy"].is-copied {
    background: var(--acc); border-color: var(--acc); color: var(--ink);
}
.lp-share-btn[data-platform="copy"].is-copied .lp-share-icon-default { display: none; }
.lp-share-btn[data-platform="copy"].is-copied .lp-share-icon-done { display: block; }

@media (max-width: 540px) {
    .lp-share-buttons { gap: 8px; }
    .lp-share-btn { width: 42px; height: 42px; }
}
/* =========================================================
   HERO — MAGAZINE LAYOUT (Elementra-inspired)
   Zwei-spaltiger Hero. Links: Headline + Tinax-Van-Bild unten.
   Rechts: Composite mit Folienrollen-Bild als Hintergrund + Form
   als Overlay-Card.
   Padding ist identisch zum Header (var(--pad-x)), damit Logo
   und H1 vertikal exakt aligned sind.
   Light Theme: heller Hero-Hintergrund (#F8F8F6), dunkler Text.
   ========================================================= */
.lp-hero--mag {
    padding: 0;
    background: #F8F8F6; /* vom User vorgegeben */
    color: var(--text);
    position: relative;
    overflow: hidden;
    min-height: auto;
}
/* Eyebrow auf hellem Hintergrund: nicht den dunklen lp-hero Default verwenden */
.lp-hero--mag .lp-eyebrow {
    background: #fff;
    border-color: var(--line);
    color: var(--text);
}
/* H1 Pre/Post in dunkler Text-Farbe statt weiß */
.lp-hero--mag .lp-h1-pre,
.lp-hero--mag .lp-h1-post {
    color: var(--text);
    opacity: 1;
}
/* H1-Hauptwort ("Fahrzeugbeschriftung") nicht lime, sondern dunkel wie die anderen Überschriften */
.lp-hero--mag .lp-h1-main {
    color: var(--ink);
}
/* Lead-Paragraph dunkel */
.lp-hero--mag .lp-hero-lead { color: var(--text-muted); }
.lp-hero--mag .lp-hero-lead strong { color: var(--text); }
/* Google-Rating Badge auf hellem Hintergrund */
.lp-hero--mag .lp-hero-google {
    background: #fff;
    border-color: var(--line);
    color: var(--text);
}
.lp-hero--mag .lp-hero-google:hover {
    background: #fff;
    border-color: var(--acc);
}
.lp-hero--mag .lp-hero-google-tx strong { color: var(--text); }
.lp-hero--mag .lp-hero-google-of { color: var(--text-muted); }
.lp-hero--mag .lp-hero-google-tx small { color: var(--text-muted); }
.lp-hero-mag-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(110px, 13vh, 160px) var(--pad-x) clamp(48px, 6vw, 80px);
    display: grid;
    grid-template-columns: 6fr 4fr;
    gap: clamp(28px, 3.5vw, 56px);
    position: relative;
    z-index: 1;
    align-items: stretch;
}
.lp-hero-mag-col {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 3vw, 44px);
    min-width: 0;
}
.lp-hero-mag-col--right { gap: 0; }
.lp-hero-mag-text {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.lp-hero-mag-text .lp-eyebrow {
    align-self: flex-start;
    margin-bottom: clamp(20px, 2.4vw, 28px);
}
.lp-hero-mag-text .lp-hero-lead {
    margin-top: clamp(20px, 2.4vw, 28px);
}
.lp-hero-mag-text .lp-hero-google {
    margin-top: clamp(24px, 2.8vw, 32px);
    align-self: flex-start;
}
.lp-hero-mag-image {
    border-radius: var(--r-md);
    overflow: hidden;
    aspect-ratio: 1448 / 825;
    background: rgba(255,255,255,0.04);
    margin: 0;
    position: relative;
}
.lp-hero-mag-image img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* --- Stage rechts: Bild als Background, Form als Overlay --- */
.lp-hero-mag-stage {
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 4vw, 64px) clamp(24px, 3vw, 48px);
    isolation: isolate;
}
.lp-hero-mag-stage-bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}
.lp-hero-mag-stage-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16,19,11,0.62) 0%, rgba(16,19,11,0.85) 100%);
    z-index: 1;
}
/* Soft-Variante: dezente bis mittlere Tönung, Foto bleibt erkennbar,
   wirkt aber gedämpft. Genutzt auf der Fahrzeug-LP, damit das Werkstatt-
   Foto nicht zu kontrastreich-grell hinter der Form-Card wirkt. */
.lp-hero-mag-stage-overlay--soft {
    background: linear-gradient(180deg, rgba(16,19,11,0.45) 0%, rgba(16,19,11,0.65) 100%);
}

/* --- Form als helle Card auf dem dunklen Stage-Bild --- */
.lp-hero-mag-form {
    position: relative;
    z-index: 2;
    background: transparent;
    color: var(--ink);
    padding: 0;
    box-shadow: none;
    width: 100%;
    max-width: 560px;
}
/* Wizard innerhalb der Form-Card (weiße Card, dunkler Text) */
.lp-hero-mag-form .lp-wizard {
    margin: 0;
    max-width: 100%;
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}
.lp-hero-mag-form .lp-wizard-progress { margin-bottom: 18px; }
.lp-hero-mag-form .lp-step-kicker {
    margin-top: 0;
    color: #7e8a2e;
}
.lp-hero-mag-form .lp-step-title {
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    line-height: 1.25;
    color: var(--ink);
}
.lp-hero-mag-form .lp-step-hint {
    font-size: 0.92rem;
    color: var(--text-muted);
}
.lp-hero-mag-form .lp-step-nav { margin-top: 20px; }
/* Wizard-Bar auf hellem Hintergrund */
.lp-hero-mag-form .lp-wizard-bar { background: #e9ece2; }
.lp-hero-mag-form .lp-wizard-meta { color: var(--text-dim); }
.lp-hero-mag-form .lp-wizard-meta b { color: var(--ink); }
/* Dropdown-Toggle und -Options auf weißer Card */
.lp-hero-mag-form .lp-dropdown-toggle {
    background: var(--bg-2);
    border-color: var(--line);
    color: var(--ink);
}
.lp-hero-mag-form .lp-dropdown-toggle:hover {
    background: var(--bg);
    border-color: var(--acc);
}
.lp-hero-mag-form .lp-dropdown-label { color: var(--ink); }
.lp-hero-mag-form .lp-dropdown-panel {
    background: var(--bg-2);
    border-color: var(--line);
}
.lp-hero-mag-form .lp-dropdown-option {
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--ink);
}
.lp-hero-mag-form .lp-dropdown-option:hover {
    background: var(--bg);
    border-color: var(--acc);
}
.lp-hero-mag-form .lp-dropdown-option-text strong { color: var(--ink); }
.lp-hero-mag-form .lp-dropdown-option-text small { color: var(--text-muted); }
.lp-hero-mag-form .lp-dropdown-option:has(input:checked) {
    background: rgba(167, 190, 21, 0.08);
    border-color: var(--acc);
}
.lp-hero-mag-form .lp-dropdown-option:has(input:checked) .lp-dropdown-option-text strong { color: var(--ink); }
/* Form-Inputs auf weißer Card */
.lp-hero-mag-form .lp-field label,
.lp-hero-mag-form .lp-field-label {
    color: var(--ink);
}
.lp-hero-mag-form .lp-field input,
.lp-hero-mag-form .lp-field textarea {
    background: var(--bg);
    border-color: var(--line);
    color: var(--ink);
}
.lp-hero-mag-form .lp-field input::placeholder,
.lp-hero-mag-form .lp-field textarea::placeholder {
    color: var(--text-dim);
}
.lp-hero-mag-form .lp-field input:focus,
.lp-hero-mag-form .lp-field textarea:focus {
    border-color: var(--acc);
    background: var(--bg-2);
}
/* Back-Button im Wizard */
.lp-hero-mag-form .lp-back {
    color: var(--text-muted);
}
.lp-hero-mag-form .lp-back:hover { color: var(--ink); }

/* In der 30%-Spalte des 70/30-Heros sind die Optionen zu eng für 2 Spalten —
   immer 1 Spalte im Hero-Form, damit Text nicht abgeschnitten wird. */
@media (min-width: 720px) {
    .lp-hero-mag-form .lp-dropdown-panel,
    .lp-hero-mag-form .lp-dropdown-panel[hidden] {
        grid-template-columns: 1fr !important;
    }
}
/* Lead-Paragraph so breit wie H1: kein 500px-Cap, fülle die linke Spalte */
.lp-hero--mag .lp-hero-lead { max-width: none; }
.lp-hero-form-title {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.35rem, 1.9vw, 1.85rem);
    line-height: 1.15;
    letter-spacing: -0.018em;
    color: var(--text);
    margin: 0 0 10px;
}
.lp-hero-form-title .hl { color: var(--acc-dark, #6e7a2c); }
.lp-hero-form-sub {
    font-size: clamp(0.92rem, 1vw, 0.98rem);
    color: var(--text-muted);
    margin: 0 0 22px;
    line-height: 1.5;
}
.lp-express-field { margin-bottom: 13px; }
.lp-express-field label {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.015em;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.lp-express-field input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text);
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none; appearance: none;
}
.lp-express-field input::placeholder { color: var(--text-muted); opacity: 0.6; }
.lp-express-field input:focus {
    outline: none;
    border-color: var(--acc);
    box-shadow: 0 0 0 3px rgba(167,190,21,0.18);
}
.lp-express-field input:user-invalid {
    border-color: #d77;
}
.lp-express-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 18px 0;
    line-height: 1.5;
    cursor: pointer;
}
.lp-express-consent input[type="checkbox"] {
    margin-top: 3px;
    width: 16px; height: 16px;
    accent-color: var(--acc);
    flex-shrink: 0;
}
.lp-express-submit { width: 100%; justify-content: center; }
.lp-express-status {
    margin-top: 14px;
    font-size: 0.9rem;
    min-height: 1.2em;
    line-height: 1.5;
}
.lp-express-status.is-success { color: #5a8a00; font-weight: 600; }
.lp-express-status.is-error   { color: #c33; }
.lp-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* --- Tablet & Mobile --- */
@media (max-width: 1100px) {
    .lp-hero-mag-inner { gap: clamp(20px, 3vw, 36px); }
}
@media (max-width: 860px) {
    .lp-hero-mag-inner {
        grid-template-columns: 1fr;
        padding-top: clamp(90px, 12vh, 130px);
        padding-bottom: clamp(36px, 6vw, 56px);
        gap: clamp(28px, 5vw, 40px);
    }
    .lp-hero-mag-col { gap: 28px; }
    .lp-hero-mag-col--left  { order: 1; }
    .lp-hero-mag-col--right { order: 2; }
    .lp-hero-mag-image { aspect-ratio: 16/10; }
    .lp-hero-mag-stage {
        min-height: auto;
        padding: clamp(40px, 8vw, 60px) clamp(20px, 5vw, 36px);
    }
}

/* =========================================================
   FAHRZEUG LP — Page-spezifische Overrides
   - Alle border-radius werden auf 0 zurückgesetzt (sharp edges)
   - Sections sind voll breit wie der Header (kein max-width-Cap)
   - Logos-Section bekommt den hellen Hero-Hintergrund #F8F8F6
   ========================================================= */
body.lp-fahrzeug *,
body.lp-fahrzeug *::before,
body.lp-fahrzeug *::after {
    border-radius: 0 !important;
}
/* Ausnahmen vom border-radius-Reset: alles im Chat-Modal + der Floating
   "Anfrage stellen"-Button behalten ihre runde Form. */
body.lp-fahrzeug .lp-askfab,
body.lp-fahrzeug .lp-askfab::before,
body.lp-fahrzeug .lp-askfab::after,
body.lp-fahrzeug .lp-chatmodal *,
body.lp-fahrzeug .lp-chatmodal *::before,
body.lp-fahrzeug .lp-chatmodal *::after {
    border-radius: revert !important;
}
/* Konkrete Werte für FAB und Badge (revert würde sonst auf 0 fallen, weil
   die Default-Werte = 0 sind, also explizit setzen). */
body.lp-fahrzeug .lp-askfab          { border-radius: 50% !important; }
body.lp-fahrzeug .lp-askfab::after   { border-radius: 50% !important; }
body.lp-fahrzeug .lp-askfab::before  { border-radius: 50% !important; }
/* Volle Breite wie der Header: kein max-width-Cap auf den Container.
   Sections behalten ihre var(--pad-x) Padding, identisch zum Header. */
body.lp-fahrzeug .lp-container,
body.lp-fahrzeug .lp-container--wide,
body.lp-fahrzeug .lp-hero-mag-inner {
    max-width: none;
}
/* Logos-Section heller machen, passend zum Hero.
   Trennlinie zwischen Hero und Logos entfernen (nahtloser Übergang),
   die Trennlinie zwischen Logos und Refs-Section bleibt erhalten. */
body.lp-fahrzeug .lp-logos {
    background: #F8F8F6;
    border-top: none;
    border-bottom: none;
    padding: clamp(40px, 6vw, 60px) 0 140px;
}
body.lp-fahrzeug .lp-logos-label { color: var(--text-muted); }

/* =========================================================
   SERVICES4 — Vier-Schritt-Mini (Beratung · Design · Produktion · Montage)
   Sitzt zwischen Logos und References. Heller Hintergrund.
   ========================================================= */
.lp-services4 {
    background: #F8F8F6;
    padding: clamp(20px, 3vw, 44px) 0 clamp(80px, 11vw, 140px);
}
.lp-services4-grid {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(24px, 3vw, 48px);
}
.lp-services4-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 0;
}
.lp-services4-ic {
    width: 72px; height: 72px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    color: var(--acc);
    margin-bottom: 4px;
    margin-left: -8px;
}
.lp-services4-ic svg {
    width: 44px;
    height: 44px;
    stroke-width: 1.6;
}
.lp-services4-title {
    font-family: var(--display);
    font-size: clamp(1.2rem, 1.6vw, 1.45rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
    line-height: 1.15;
}
.lp-services4-tx {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}
@media (max-width: 980px) {
    .lp-services4-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .lp-services4-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* =========================================================
   SECTION HEAD — SPLIT (Elementra-Stil)
   Eyebrow + großer H2 links · Body-Text rechts · linksbündig
   ========================================================= */
.lp-section-head--split {
    max-width: var(--maxw);
    margin: 0 auto clamp(56px, 7vw, 96px);
    text-align: left;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}
.lp-section-head--split .lp-section-head-left { display: flex; flex-direction: column; }
.lp-section-kicker {
    font-family: var(--display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: clamp(20px, 2.4vw, 32px);
}
.lp-section-headline {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(2.2rem, 4.6vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--ink);
    margin: 0;
}
.lp-section-head--split .lp-section-head-right {
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* Body-Text rechts startet auf gleicher Höhe wie die H2-Überschrift links
       (also unter dem Kicker). Padding-top entspricht Kicker-Höhe + dessen
       margin-bottom. */
    padding-top: clamp(36px, 4.4vw, 50px);
}
.lp-section-head--split .lp-section-head-right p {
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.65;
    color: var(--text-muted);
}
@media (max-width: 900px) {
    .lp-section-head--split {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .lp-section-head--split .lp-section-head-right { padding-top: 0; }
}

/* Split-Head Variante für dunkle Sections (z. B. .lp-ablauf.is-dark) */
.lp-section.is-dark .lp-section-head--split .lp-section-kicker,
.lp-section.is-dark .lp-section-head--split .lp-section-headline {
    color: var(--on-dark);
}
.lp-section.is-dark .lp-section-head--split .lp-section-head-right p {
    color: var(--on-dark-mut);
}

/* =========================================================
   LP-FAHRZEUG — Einheitliche Cream-Grundfarbe pageweit
   Alle Sections nutzen var(--bg) als Hintergrund, damit die ganze
   Seite die warme Hero-Farbe (#F8F8F6) als Grundton hat.
   Karten / Inhalts-Boxes innerhalb bleiben weiß (--bg-2), damit
   sie Kontrast zur cremefarbenen Section haben.
   ========================================================= */
body.lp-fahrzeug .lp-section,
body.lp-fahrzeug .lp-refs,
body.lp-fahrzeug .lp-services4,
body.lp-fahrzeug .lp-preise,
body.lp-fahrzeug .lp-leistungen,
body.lp-fahrzeug .lp-personas,
body.lp-fahrzeug .lp-faq,
body.lp-fahrzeug .lp-komfort,
body.lp-fahrzeug .lp-testimonials,
body.lp-fahrzeug .lp-process,
body.lp-fahrzeug .lp-trust-strip,
body.lp-fahrzeug .lp-logos {
    background: var(--bg);
}
/* Sections, die ihren eigenen, eigenständigen Charakter behalten sollen
   (dunkler Hintergrund), bleiben dunkel. */
body.lp-fahrzeug .lp-section.is-dark {
    background: var(--ink);
}

/* =========================================================
   LP-FAHRZEUG — Section-Heads (Elementra split) bekommen
   var(--maxw)-Constraint via .lp-section-head--split.
   Content darunter (Pricetabs, Ablauf-Grid, etc.) bleibt
   ohne Constraint — genauso breit wie die Refs-Gallerie
   (= volle Container-Breite minus Padding).
   ========================================================= */

/* =========================================================
   FEATURE-IMAGE — zwischen Materialien und Preise
   Volle Container-Breite (gleich der Refs-Gallerie).
   ========================================================= */
.lp-feature-img {
    background: var(--bg);
    padding: clamp(20px, 3vw, 44px) 0 clamp(64px, 9vw, 120px);
}
.lp-feature-img-wrap {
    width: 100%;
    overflow: hidden;
    border-radius: 0;
}
.lp-feature-img-wrap img {
    display: block;
    width: 100%;
    height: auto;
}

/* =========================================================
   DESKTOP-ONLY LINE BREAK
   <br class="lp-br-desktop"> wirkt nur ab 768px aufwärts.
   ========================================================= */
.lp-br-desktop { display: none; }
@media (min-width: 768px) {
    .lp-br-desktop { display: inline; }
}

/* =========================================================
   FARB-SCHICHTUNG (lp-fahrzeug)
   - Refs + Services4 + Ablauf: Weiß #FFFFFF
   - Materialien (folien) + Feature-Image + Footer: Dark #181818
   ========================================================= */
/* Weiße Sections */
body.lp-fahrzeug .lp-refs,
body.lp-fahrzeug .lp-services4,
body.lp-fahrzeug .lp-ablauf {
    background: #FFFFFF;
}
/* Dunkle Sections (Materialien + Feature-Image) */
body.lp-fahrzeug .lp-folien,
body.lp-fahrzeug .lp-feature-img {
    background: #181818;
}
/* Footer dunkel */
body.lp-fahrzeug .lp-footer {
    background: #181818;
}

/* --- Text-Inversion in den dunklen Sections --- */
/* Materialien Section-Head */
body.lp-fahrzeug .lp-folien .lp-section-head--split .lp-section-kicker,
body.lp-fahrzeug .lp-folien .lp-section-head--split .lp-section-headline {
    color: var(--on-dark);
}
body.lp-fahrzeug .lp-folien .lp-section-head--split .lp-section-head-right p {
    color: var(--on-dark-mut);
}
body.lp-fahrzeug .lp-folien .lp-section-head--split .lp-section-head-right p strong {
    color: var(--on-dark);
}
/* Folien-Karten auf dunklem Hintergrund: helle Karte mit dezentem Border */
body.lp-fahrzeug .lp-folien .lp-folien-card {
    background: #1f1f1f;
    border-color: rgba(255,255,255,0.10);
    color: var(--on-dark);
}
body.lp-fahrzeug .lp-folien .lp-folien-card .lp-folien-tagline,
body.lp-fahrzeug .lp-folien .lp-folien-card .lp-folien-tagline strong {
    color: var(--on-dark);
}
body.lp-fahrzeug .lp-folien .lp-folien-card .lp-folien-summary {
    color: var(--on-dark);
    border-top-color: rgba(255,255,255,0.10);
}
body.lp-fahrzeug .lp-folien .lp-folien-card .lp-folien-summary-label {
    color: var(--on-dark);
}
body.lp-fahrzeug .lp-folien .lp-folien-card .lp-folien-summary-count {
    background: rgba(255,255,255,0.08);
    color: var(--on-dark-mut);
}
body.lp-fahrzeug .lp-folien .lp-folien-card .lp-folien-chevron { color: var(--on-dark-mut); }
body.lp-fahrzeug .lp-folien .lp-folien-list li a {
    color: var(--on-dark);
    border-color: rgba(255,255,255,0.08);
}
body.lp-fahrzeug .lp-folien .lp-folien-list li a:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--acc);
}
body.lp-fahrzeug .lp-folien .lp-folien-list li a strong { color: var(--on-dark); }
body.lp-fahrzeug .lp-folien .lp-folien-list li a small { color: var(--on-dark-mut); }
body.lp-fahrzeug .lp-folien .lp-folien-list .lp-folien-pdf-ic,
body.lp-fahrzeug .lp-folien .lp-folien-list .lp-folien-arrow { color: var(--on-dark-mut); }

/* Footer-Text auf dunklem Hintergrund */
body.lp-fahrzeug .lp-footer,
body.lp-fahrzeug .lp-footer a,
body.lp-fahrzeug .lp-footer .lp-footer-meta {
    color: var(--on-dark-mut);
}
body.lp-fahrzeug .lp-footer a:hover { color: var(--on-dark); }
body.lp-fahrzeug .lp-footer strong { color: var(--on-dark); }
body.lp-fahrzeug .lp-footer hr,
body.lp-fahrzeug .lp-footer .lp-footer-divider {
    border-color: rgba(255,255,255,0.10);
}

/* =========================================================
   HERO-ADRESSE — einzeilig mit Pin-Icon
   ========================================================= */
.lp-hero-address {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.lp-hero-address-pin {
    flex-shrink: 0;
    color: var(--acc);
}
.lp-hero-address span {
    line-height: 1.4;
}

/* =========================================================
   Inhaltsbreite vereinheitlichen
   Pricetabs + Ablauf-Grid + Ablauf-CTA bekommen var(--maxw),
   gleiche Breite wie das Split-Section-Head darüber.
   ========================================================= */
body.lp-fahrzeug .lp-preise .lp-pricetabs,
body.lp-fahrzeug .lp-preise .lp-preise-note,
body.lp-fahrzeug .lp-preise .lp-preise-pdf,
body.lp-fahrzeug .lp-ablauf .lp-ablauf-grid,
body.lp-fahrzeug .lp-ablauf .lp-ablauf-cta {
    max-width: var(--maxw);
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   FLOATING ANFRAGE-BUTTON (FAB) — Desktop + Mobile
   ========================================================= */
.lp-askfab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    left: auto;
    top: auto;
    width: 64px;
    height: 64px;
    z-index: 950;
    display: inline-flex; /* sichtbar auf allen Bildschirmgrößen */
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--acc);
    color: var(--acc-ink);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 14px 32px -10px rgba(0,0,0,0.32), 0 4px 10px -4px rgba(0,0,0,0.18);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.lp-askfab:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -12px rgba(0,0,0,0.36), 0 6px 14px -4px rgba(0,0,0,0.22);
}
.lp-askfab:active { transform: translateY(0); }
.lp-askfab-icon { flex-shrink: 0; }
/* Label ausblenden — der Button ist jetzt nur das runde Icon */
.lp-askfab-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Roter Badge ("1") wie eine ungelesene Nachricht */
.lp-askfab::after {
    content: "1";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    background: #E53935;
    color: #fff;
    border-radius: 50%;
    font-family: var(--display);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,0.18);
    pointer-events: none;
}

/* Pulse-Ring um den Button */
.lp-askfab::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--acc);
    z-index: -1;
    animation: lp-askfab-pulse 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
    pointer-events: none;
}
@keyframes lp-askfab-pulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    70%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
}

/* FAB verstecken wenn Modal offen */
.lp-askfab.is-hidden { display: none !important; }

/* Bei reduced-motion: Pulse aus */
@media (prefers-reduced-motion: reduce) {
    .lp-askfab::before { animation: none; opacity: 0; }
}

/* =========================================================
   CHAT-STYLE MODAL — geführter Anfrage-Dialog
   ========================================================= */
.lp-chatmodal {
    position: fixed; inset: 0;
    z-index: 960;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 24px;
    animation: lp-chatmodal-fade .22s ease both;
}
.lp-chatmodal[hidden] { display: none !important; }
@keyframes lp-chatmodal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.lp-chatmodal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15,15,15,0.32);
    backdrop-filter: blur(2px);
}
.lp-chatmodal-panel {
    position: relative;
    width: min(440px, 100%);
    max-height: min(720px, calc(100vh - 48px));
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4), 0 10px 24px -8px rgba(0,0,0,0.2);
    animation: lp-chatmodal-slide .26s cubic-bezier(.2,.7,.3,1) both;
}
/* Mobile: Bottom-Sheet, full width, mehr Höhe, mit Safe-Area für Notch */
@media (max-width: 640px) {
    .lp-chatmodal {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }
    .lp-chatmodal-panel {
        width: 100%;
        max-width: 100%;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}
@keyframes lp-chatmodal-slide {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.lp-chatmodal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 14px;
    background: #181818;
    color: #fff;
}
.lp-chatmodal-head-tx {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lp-chatmodal-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--acc);
    color: var(--acc-ink);
    display: inline-flex;
    align-items: center; justify-content: center;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.05rem;
}
.lp-chatmodal-head h2 {
    margin: 0;
    font-family: var(--display);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.15;
}
.lp-chatmodal-head p {
    margin: 2px 0 0;
    font-size: 0.78rem;
    opacity: 0.7;
    line-height: 1.2;
}
.lp-chatmodal-close {
    appearance: none;
    border: 0;
    background: rgba(255,255,255,0.08);
    color: #fff;
    width: 34px; height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s ease;
}
.lp-chatmodal-close:hover { background: rgba(255,255,255,0.16); }
/* Mobile: Schließen-Button größer und prominenter — leichter zu tippen */
@media (max-width: 640px) {
    .lp-chatmodal-close {
        width: 44px;
        height: 44px;
        background: rgba(255,255,255,0.14);
    }
    .lp-chatmodal-close svg { width: 22px; height: 22px; }
}

.lp-chatmodal-progress {
    height: 3px;
    background: rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
}
.lp-chatmodal-progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--acc);
    transition: width .35s cubic-bezier(.2,.7,.3,1);
}

.lp-chatmodal-stream {
    flex: 1;
    overflow-y: auto;
    padding: 20px 18px 8px;
    background: #f7f7f5;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}
.lp-chatmodal-stream::-webkit-scrollbar { width: 7px; }
.lp-chatmodal-stream::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 99px; }

.lp-chat-bubble {
    max-width: 88%;
    padding: 12px 15px;
    line-height: 1.45;
    font-size: 0.94rem;
    border-radius: 14px;
    animation: lp-chat-pop .22s ease both;
    word-wrap: break-word;
}
@keyframes lp-chat-pop {
    from { transform: translateY(6px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.lp-chat-bubble--bot {
    align-self: flex-start;
    background: #fff;
    color: var(--ink);
    border: 1px solid rgba(0,0,0,0.06);
    border-bottom-left-radius: 4px;
}
.lp-chat-bubble--user {
    align-self: flex-end;
    background: var(--acc);
    color: var(--acc-ink);
    border-bottom-right-radius: 4px;
    font-weight: 600;
}
.lp-chat-bubble--bot strong { color: var(--ink); }

.lp-chatmodal-actions {
    padding: 14px 18px 18px;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp-chat-option {
    appearance: none;
    border: 1.5px solid rgba(0,0,0,0.10);
    background: #fff;
    color: var(--ink);
    text-align: left;
    padding: 12px 14px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.93rem;
    line-height: 1.3;
    cursor: pointer;
    display: flex; flex-direction: column; gap: 2px;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.lp-chat-option:hover {
    border-color: var(--acc);
    background: #fafcf3;
}
.lp-chat-option:active { transform: scale(0.99); }
.lp-chat-option strong { font-weight: 700; }
.lp-chat-option small { font-size: 0.8rem; color: var(--text-muted); }

.lp-chat-contactgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.lp-chat-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.lp-chat-field--full { grid-column: 1 / -1; }
.lp-chat-field label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}
.lp-chat-field input,
.lp-chat-field textarea {
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid rgba(0,0,0,0.10);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    font-size: 0.93rem;
    color: var(--ink);
    background: #fff;
    transition: border-color .15s ease;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
.lp-chat-field input:focus,
.lp-chat-field textarea:focus {
    outline: none;
    border-color: var(--acc);
}
.lp-chat-field textarea {
    min-height: 80px;
    resize: vertical;
}
.lp-chat-field .lp-chat-fieldhint {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.lp-chat-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.lp-chat-consent input { margin-top: 2px; }
.lp-chat-consent a { color: var(--ink); text-decoration: underline; }

.lp-chat-submit {
    appearance: none;
    border: 0;
    background: var(--acc);
    color: var(--acc-ink);
    padding: 12px 18px;
    border-radius: 12px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    transition: transform .12s ease, box-shadow .15s ease;
}
.lp-chat-submit:hover { box-shadow: 0 10px 22px -8px rgba(167,190,21,0.55); }
.lp-chat-submit:active { transform: scale(0.99); }
.lp-chat-submit:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.lp-chat-back {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.82rem;
    padding: 4px 8px;
    margin-top: 2px;
    align-self: flex-start;
    text-decoration: underline;
}
.lp-chat-back:hover { color: var(--ink); }

.lp-chatmodal-foot {
    margin: 0;
    padding: 10px 18px 14px;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.04);
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
}
.lp-chatmodal-foot svg { flex-shrink: 0; color: var(--text-muted); }

/* Success state */
.lp-chat-success {
    align-self: center;
    text-align: center;
    padding: 24px 8px 8px;
}
.lp-chat-success-ic {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--acc);
    color: var(--acc-ink);
    display: inline-flex;
    align-items: center; justify-content: center;
    margin-bottom: 12px;
}
.lp-chat-success h3 {
    margin: 0 0 6px;
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink);
}
.lp-chat-success p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Body-Lock wenn Modal offen */
body.lp-chatmodal-open { overflow: hidden; }

/* =========================================================
   CHAT-MODAL — Upload-Step
   ========================================================= */
.lp-chat-uploadwrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp-chat-uploadbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    border: 1.5px dashed rgba(0,0,0,0.18);
    border-radius: 12px;
    background: #fafafa;
    color: var(--ink);
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.lp-chat-uploadbtn:hover {
    border-color: var(--acc);
    background: #fafcf3;
}
.lp-chat-filelist {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lp-chat-filelist:empty { display: none; }
.lp-chat-fileitem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f5f5f3;
    border-radius: 8px;
    font-size: 0.86rem;
    color: var(--ink);
}
.lp-chat-fileitem svg { flex-shrink: 0; color: var(--text-muted); }
.lp-chat-fileitem span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.lp-chat-fileitem button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    padding: 2px 8px;
    cursor: pointer;
    border-radius: 50%;
    transition: background .12s ease, color .12s ease;
}
.lp-chat-fileitem button:hover {
    background: rgba(0,0,0,0.06);
    color: #c44;
}
.lp-chat-uploadnav {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.lp-chat-skip {
    appearance: none;
    flex: 0 0 auto;
    border: 1.5px solid rgba(0,0,0,0.10);
    background: #fff;
    color: var(--text-muted);
    padding: 10px 16px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.93rem;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.lp-chat-skip:hover { border-color: rgba(0,0,0,0.25); color: var(--ink); }
.lp-chat-submit--compact { flex: 1; padding: 10px 14px; font-size: 0.95rem; }

/* =========================================================
   CTA-MID — zwischen Materialien und Feature-Bild
   Dunkler Hintergrund, schließt sich an Materialien an
   ========================================================= */
body.lp-fahrzeug .lp-cta-mid {
    background: #181818;
    padding: clamp(50px, 7vw, 90px) 0;
    color: var(--on-dark);
}
body.lp-fahrzeug .lp-cta-mid-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    text-align: center;
    padding: 0 var(--pad-x);
}
body.lp-fahrzeug .lp-cta-mid-title {
    font-family: var(--display);
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--on-dark);
    margin: 0 0 14px;
}
body.lp-fahrzeug .lp-cta-mid-title em {
    color: var(--acc);
    font-style: normal;
}
body.lp-fahrzeug .lp-cta-mid-tx {
    font-size: clamp(0.98rem, 1.1vw, 1.08rem);
    color: var(--on-dark-mut);
    margin: 0 0 28px;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}