.autohaus-liste{margin-top:28px}
.verguetung,.bleibt-hinweis{margin-top:28px;max-width:44em;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);padding:20px 22px}
.verguetung h3,.bleibt-hinweis h3{margin:0 0 6px}
.verguetung p,.bleibt-hinweis p{margin:0;color:var(--muted)}
.bleibt-hinweis{margin-bottom:32px}.story-kopf .bleibt-hinweis{margin-bottom:0}

/* Laden-Fotos: Hinweis-Box, Seitenkopf, Bremen-Leiste (Symbolbilder) */
.bleibt-bild{margin:-4px -4px 14px;border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:#111}.bleibt-bild picture,.bleibt-bild img{display:block;width:100%;height:100%;object-fit:cover}
.hero-bild--foto{border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#111}.hero-bild--foto picture,.hero-bild--foto img{display:block;width:100%;height:100%;object-fit:cover}
.bremen-raster{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0 10px}.bremen-raster figure{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:16/10;background:#111}.bremen-raster img,.bremen-raster picture{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:960px){.bremen-raster{grid-template-columns:repeat(4,1fr)}}
.moment-bild img{object-position:75% 50%}

html{overflow-x:clip}.reveal-maske{overflow:hidden}
/* Problem-Sektion: mehr Luft und klare Trennung zur Gewinn-Sektion */
.problem{padding:96px 0 104px;border-bottom:1px solid var(--line)}.problem .versprechen{margin-top:1.3em}
.warum{padding-top:72px}
@media (min-width:860px){.problem{padding:160px 0 170px}.warum{padding-top:110px}}
.bestand-mehr{margin:48px 0 0}
/* Abschluss mit Bremen-Foto und bewegtem Orange-Overlay */
.cta-bild{position:relative;isolation:isolate;overflow:hidden;padding:clamp(96px,16vw,190px) 0;background:#0a0a0a}
.cta-bild-bg,.cta-bild-bg picture,.cta-bild-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cta-bild-bg{z-index:-3}.cta-bild-bg img{filter:saturate(.8) contrast(1.05);animation:ctazoom 30s ease-in-out infinite alternate}
@keyframes ctazoom{from{transform:scale(1)}to{transform:scale(1.12)}}
.cta-bild::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(10,10,10,.78),rgba(10,10,10,.5) 45%,rgba(10,10,10,.85))}
.cta-bild-lauf{position:absolute;inset:-30%;z-index:-1;mix-blend-mode:screen;opacity:.75;background:radial-gradient(40% 35% at 25% 40%,rgba(254,124,2,.85),transparent 70%),radial-gradient(35% 40% at 75% 60%,rgba(255,90,0,.7),transparent 70%),radial-gradient(30% 30% at 55% 20%,rgba(255,176,102,.6),transparent 70%);animation:ctalauf 16s ease-in-out infinite alternate}
@keyframes ctalauf{0%{transform:translate3d(-6%,-3%,0) rotate(0deg) scale(1)}50%{transform:translate3d(5%,4%,0) rotate(6deg) scale(1.12)}100%{transform:translate3d(-3%,6%,0) rotate(-5deg) scale(1.05)}}
.cta-bild-in h2{color:#fff;font-size:clamp(2.2rem,6.4vw,4.6rem);line-height:1.04;letter-spacing:-.04em;text-shadow:0 4px 40px rgba(0,0,0,.55);margin:0 0 .6em}
.cta-bild-in .btn-row{justify-content:center}.cta-bild-in .btn:not(.btn--accent){background:rgba(10,10,10,.55);border:1.5px solid rgba(255,255,255,.55);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (prefers-reduced-motion:reduce){.cta-bild-bg img,.cta-bild-lauf{animation:none}}
.cta-bild-in .btn-row{align-items:flex-start;flex-wrap:wrap}.cta-bild-in .hv-mini{text-align:left}.cta-bild-in .mini-btn .mini-go{min-width:min(340px,100%)}
@media (min-width:960px){.bew-grid{align-items:stretch}.bew-links{position:static;display:flex;flex-direction:column}.bew-foto{aspect-ratio:auto;flex:1 1 0;min-height:150px}.bew-cta{margin-top:24px}}
.bew-foto img,.bew-foto picture img{object-position:50% 12%!important}
/* CTA edel: Foto natuerlich-warm, Orange als Licht (Glut von unten, wandernder Schein), duenne Akzentlinie */
.cta-bild-bg img{filter:saturate(.9) contrast(1.06) brightness(.9)}
.cta-bild-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ff9a1f,#fe7c02 55%,#ff5a00);mix-blend-mode:soft-light;opacity:.55}
.cta-bild::before{background:linear-gradient(180deg,rgba(10,10,10,.72) 0%,rgba(10,10,10,.28) 42%,rgba(10,10,10,.5) 70%,rgba(10,10,10,.92) 100%)}
.cta-bild::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;z-index:-1;background:radial-gradient(70% 100% at 50% 110%,rgba(254,124,2,.7),rgba(254,90,0,.25) 55%,transparent 80%);pointer-events:none}
.cta-bild-lauf{opacity:.5;mix-blend-mode:screen}
.cta-bild-in h2{font-size:clamp(2.1rem,5.6vw,4.2rem);letter-spacing:-.035em;margin-bottom:.7em}
.cta-bild-in h2::before{content:"";display:block;width:56px;height:3px;margin:0 auto 22px;border-radius:2px;background:linear-gradient(90deg,#ff9a1f,#fe7c02)}
.cta-bild-in .btn-row{align-items:center;gap:14px}.cta-bild-in .hv-mini{margin:0}.cta-bild-in .mini-btn{margin-top:0}.cta-bild-in .mini-btn .mini-go{margin:0;min-height:58px;box-shadow:0 14px 40px -14px rgba(254,124,2,.8)}
.cta-bild-in .btn:not(.btn--accent){min-height:58px;display:inline-flex;align-items:center;background:rgba(10,10,10,.4);border:1px solid rgba(255,255,255,.4)}
/* CTA mit Porsche: links ausgerichtet, Fahrzeug bleibt rechts sichtbar */
.cta-bild-bg img{object-position:72% 60%}.cta-bild-in{text-align:left}.cta-bild-in h2{max-width:11em}.cta-bild-in h2::before{margin-left:0}.cta-bild-in .btn-row{justify-content:flex-start}
@media (max-width:700px){.cta-bild-in h2{max-width:none}}
/* Bildmoment mit Buttons ueber der Ueberschrift (ersetzt den Foto-CTA am Seitenende) */
.moment--cta .moment-bild{aspect-ratio:auto;height:560px}.moment--cta .moment-text{top:auto;bottom:0;padding:0 0 44px}
.moment-buttons{margin-bottom:0}.moment-buttons .btn-row{justify-content:flex-start;align-items:center;gap:14px}.moment-buttons .hv-mini{margin:0}.moment-buttons .mini-btn{margin-top:0}.moment-buttons .btn:not(.btn--accent){min-height:58px;display:inline-flex;align-items:center;background:rgba(10,10,10,.45);border:1px solid rgba(255,255,255,.4)}
@media (min-width:860px){.moment--cta .moment-bild{height:clamp(560px,40vw,700px)}.moment--cta .moment-text{padding-bottom:64px}}
.moment-top{position:absolute;left:0;right:0;top:0;z-index:2;padding:36px 0}@media (min-width:860px){.moment-top{padding:48px 0}}
.moment-top .moment-buttons .btn-row{justify-content:center}.moment-buttons .hv-mini{display:flex;justify-content:center}
.moment-top{padding:72px 0 0}
@media (min-width:860px){.moment-top{padding:96px 0 0}.moment--cta .moment-bild{height:clamp(620px,44vw,760px)}}
.moment-buttons .hv-mini{display:block;width:100%;max-width:640px;margin:0 auto}.moment-buttons .btn-row{display:block}
.moment-top{padding:120px 0 0}.moment-top .moment-buttons .btn-row{justify-content:flex-start}.moment-buttons .hv-mini{margin:0;max-width:560px}
.moment--cta .moment-bild{height:clamp(760px,120vw,900px)}
@media (min-width:860px){.moment-top{padding:150px 0 0}.moment--cta .moment-bild{height:clamp(780px,56vw,900px)}}
@media (max-width:820px){.story-kopf .hv-mini,.story-kopf .btn-row{display:none}}
/* Handy: Bildmoment entzerrt. Auswahl oben auf ruhigem Dunkel, darunter das Foto in voller Schaerfe (kein Hintergrundbild hinter den Knoepfen), Ueberschrift darunter */
@media (max-width:859px){
.moment--cta{display:flex;flex-direction:column}
.moment--cta .moment-top{position:static;order:1;padding:44px 0 28px}
.moment--cta .moment-bild{position:relative;order:2;height:auto;aspect-ratio:16/11}
.moment--cta .moment-bild img{object-position:80% 55%}
.moment--cta .moment-bild::after{background:linear-gradient(180deg,#0a0a0a,transparent 22%,transparent 70%,#0a0a0a)}
.moment--cta .moment-text{position:static;order:3;padding:6px 0 44px}
.moment--cta .moment-buttons .hv-mini .mini-list,.moment--cta .moment-buttons .hv-mini [class*=chips]{gap:8px}
}
@media (max-width:859px){
.moment--cta .moment-top{position:relative;z-index:2;padding-bottom:0}
.moment--cta .moment-bild{margin-top:-155px;aspect-ratio:16/13}
.moment--cta .moment-bild img{object-position:80% 70%}
.moment--cta .moment-bild::after{background:linear-gradient(180deg,#0a0a0a 0,rgba(10,10,10,.55) 22%,transparent 42%,transparent 72%,#0a0a0a)}
}
/* Handy: Bestand als Karussell, seitlich wischen statt nach unten scrollen; naechste Karte schaut raus */
@media (max-width:699px){
.bestand-home .cards{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 calc(-1 * 18px);padding:4px 18px 14px;scroll-padding-left:18px;scrollbar-width:none;overscroll-behavior-x:contain}
.bestand-home .cards::-webkit-scrollbar{display:none}
.bestand-home .cards>li{flex:0 0 66%;min-width:0;scroll-snap-align:start}
.bestand-home .cards .card-body,.bestand-home .cards .vc-body{padding:12px 14px}
.bestand-home .cards h3{font-size:1.05rem}
.bestand-mehr{margin-top:18px}
}

/* Hero-Ueberschrift im Wechsel: alle Saetze liegen uebereinander (hoechster bestimmt die Hoehe). Jede Zeile gleitet hinter einer Maske weg, die naechste schlaegt leicht gekippt von unten hinein */
.h-wechsel{display:grid}.h-wechsel .hw{grid-area:1/1;visibility:hidden}.h-wechsel .hw.on,.h-wechsel .hw.aus{visibility:visible}
.h-wechsel .hwm{display:block;overflow:hidden;padding:.04em .02em .16em;margin:-.04em -.02em -.16em}
.h-wechsel .hw1,.h-wechsel .hw2{display:block;transform-origin:0 100%;will-change:transform;text-wrap:balance}
.js .h-wechsel .hw:not(.on):not(.aus) .hw1,.js .h-wechsel .hw:not(.on):not(.aus) .hw2{transform:translateY(112%) skewY(5deg);transition:none}
.js .h-wechsel .hw.on .hw1,.js .h-wechsel .hw.on .hw2{transform:none;transition:transform .95s cubic-bezier(.16,1,.3,1) .85s}
.js .h-wechsel .hw.on .hw2{transition-delay:1.4s}
.js .h-wechsel .hw.aus .hw1,.js .h-wechsel .hw.aus .hw2{transform:translateY(-112%) skewY(-4deg);transition:transform .6s cubic-bezier(.7,0,.84,0)}
.js .h-wechsel .hw.aus .hw2{transition-delay:.14s}
.hero h1 .ac.hw-gruen{color:#34d17f}

/* Jede Folie bekommt eine eigene Animation (data-a): a = Maske hoch, b = Wisch von links, c = Scharfstellen (Fokus), d = Klappe (3D) */
.js .h-wechsel .hw[data-a="b"]:not(.on):not(.aus) .hw1,.js .h-wechsel .hw[data-a="b"]:not(.on):not(.aus) .hw2{transform:none;clip-path:inset(0 100% 0 0);transition:none}
.js .h-wechsel .hw[data-a="b"].on .hw1,.js .h-wechsel .hw[data-a="b"].on .hw2{transform:none;clip-path:inset(0 0 0 0);transition:clip-path .95s cubic-bezier(.77,0,.18,1) .85s}
.js .h-wechsel .hw[data-a="b"].on .hw2{transition-delay:1.4s}
.js .h-wechsel .hw[data-a="b"].aus .hw1,.js .h-wechsel .hw[data-a="b"].aus .hw2{transform:none;clip-path:inset(0 0 0 100%);transition:clip-path .55s cubic-bezier(.7,0,.84,0)}
.js .h-wechsel .hw[data-a="b"].aus .hw2{transition-delay:.14s}
.h-wechsel .hw[data-a="c"] .hwm,.h-wechsel .hw[data-a="d"] .hwm{overflow:visible}
.js .h-wechsel .hw[data-a="c"]:not(.on):not(.aus) .hw1,.js .h-wechsel .hw[data-a="c"]:not(.on):not(.aus) .hw2{opacity:0;filter:blur(16px);transform:scale(1.14);transition:none}
.js .h-wechsel .hw[data-a="c"].on .hw1,.js .h-wechsel .hw[data-a="c"].on .hw2{opacity:1;filter:none;transform:none;transition:opacity .9s ease .85s,filter 1s ease .85s,transform 1.2s cubic-bezier(.16,1,.3,1) .85s}
.js .h-wechsel .hw[data-a="c"].on .hw2{transition-delay:1.4s}
.js .h-wechsel .hw[data-a="c"].aus .hw1,.js .h-wechsel .hw[data-a="c"].aus .hw2{opacity:0;filter:blur(10px);transform:scale(.94);transition:opacity .5s ease,filter .5s ease,transform .6s ease}
.js .h-wechsel .hw[data-a="c"].aus .hw2{transition-delay:.14s}
.h-wechsel .hw[data-a="d"] .hwm{perspective:700px}
.js .h-wechsel .hw[data-a="d"]:not(.on):not(.aus) .hw1,.js .h-wechsel .hw[data-a="d"]:not(.on):not(.aus) .hw2{opacity:0;transform-origin:50% 0;transform:rotateX(-88deg);transition:none}
.js .h-wechsel .hw[data-a="d"].on .hw1,.js .h-wechsel .hw[data-a="d"].on .hw2{opacity:1;transform-origin:50% 0;transform:none;transition:opacity .5s ease .85s,transform .95s cubic-bezier(.2,1,.3,1) .85s}
.js .h-wechsel .hw[data-a="d"].on .hw2{transition-delay:1.4s}
.js .h-wechsel .hw[data-a="d"].aus .hw1,.js .h-wechsel .hw[data-a="d"].aus .hw2{opacity:0;transform-origin:50% 0;transform:rotateX(88deg);transition:opacity .45s ease,transform .6s cubic-bezier(.7,0,.84,0)}
.js .h-wechsel .hw[data-a="d"].aus .hw2{transition-delay:.14s}
@media (prefers-reduced-motion:reduce){.js .h-wechsel .hw1,.js .h-wechsel .hw2{transition:none!important}}
@media (max-width:699px){.bestand-mehr{display:none}}
