/* Zusätzliche Bewegung (v2). Greift nur mit html.bew; bewegung.js setzt die Klasse nur ohne „Bewegung reduzieren“ */

/* Navigation: Lesefortschritt und aktiver Abschnitt */
.scroll-balken{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--rost);transform:scaleX(0);transform-origin:left center;pointer-events:none}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--rost);transform:scaleX(0);transform-origin:left center;transition:transform var(--dur) var(--ease-calm)}
.nav-links a:hover::after,.nav-links a.aktiv::after{transform:scaleX(1)}
.nav-links a.aktiv{color:var(--rost)}

/* Hero: Hintergrund über CSS-Variablen verschiebbar (Scroll-Parallax --py, Maus --mx/--my); Skalierung lässt Platz dafür */
.bew .hero-hintergrund img{scale:1.2;translate:var(--mx,0) calc(var(--py,0px) + var(--my,0px))}

/* Übergang Hero → „Warum jetzt“: Bild dunkelt beim Scrollen in die Tinte ab, warme Lichtflecken driften an der Nahtstelle */
.bew .hero-hintergrund::after{background:rgba(42,40,34,var(--dunkel,.78))}
.bew .bg-tinte:not(.cta-band){position:relative}
.bew .bg-tinte:not(.cta-band) > .wrap{position:relative}
.uebergang{position:absolute;left:0;right:0;top:-170px;height:340px;overflow:hidden;pointer-events:none}
.uebergang span{position:absolute;top:0;width:46vw;height:100%;border-radius:50%;background:radial-gradient(closest-side,rgba(201,138,99,.26),rgba(201,138,99,0))}
.uebergang span:nth-child(1){left:-8%}
.uebergang span:nth-child(2){left:30%}
.uebergang span:nth-child(3){left:62%}

/* Bilder: Parallax innerhalb des Rahmens, Bild ist dafür höher als der Rahmen */
.bew .par img{height:116%;margin-top:-8%;translate:0 var(--py,0%)}
.bew .cta-band > img{inset:auto;left:0;top:-15%;height:130%;translate:0 var(--py,0%)}

/* Ablauf: Linie über den Schritten füllt sich beim Scrollen */
.bew #ablauf .g4{position:relative}
.ablauf-linie{position:absolute;left:0;top:-1px;width:100%;height:3px;background:var(--rost);transform:scaleX(0);transform-origin:left center;pointer-events:none}
.bew .feature.erreicht .feature-kopf .icon{color:var(--rost)}
.bew .feature-kopf .icon{transition:color var(--dur) var(--ease-calm)}
@media (max-width:900px){.ablauf-linie{display:none}}

/* Buttons: GSAP bewegt sie magnetisch, der CSS-Übergang darf Transform nicht nachziehen */
.bew .btn{position:relative;overflow:hidden;transition:background var(--dur) var(--ease-calm),color var(--dur) var(--ease-calm),border-color var(--dur) var(--ease-calm),scale var(--dur-fast) var(--ease-calm)}
.klick{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:currentColor;opacity:.25;pointer-events:none}

/* Karten kippen zur Maus; der CSS-Hover-Zoom und seine Übergänge würden damit kollidieren */
.bew .preis-karte,.bew .referenz{transition:border-color var(--dur) var(--ease-calm)}
.bew .preis-karte:hover{transform:none}

/* Formular */
.bew .feld label{transition:color var(--dur) var(--ease-calm),transform var(--dur) var(--ease-calm)}
.bew .feld:focus-within label{color:var(--rost);transform:translateX(4px)}