/* SaaleSpa · Glas-Menüleiste und „Euer Tag an Bord“ (nach Ideen aus Aceternity UI, als schlankes CSS/JS nachgebaut) */

/* Glas-Menüleiste: das Wasser des Films scheint durch */
html body.spa-water .header,html body.spa-water .header.water-solid,html body.spa-water.hx-scrolled .header{
 background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.035) 46%,rgba(255,255,255,.08)),rgba(9,24,31,.34)!important;
 -webkit-backdrop-filter:blur(16px) saturate(165%) brightness(1.04);backdrop-filter:blur(16px) saturate(165%) brightness(1.04);
 border:1px solid rgba(255,255,255,.18);border-top-color:rgba(255,255,255,.34);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.06),0 18px 44px -24px rgba(0,0,0,.65);
 transition:background .5s ease,box-shadow .5s ease,top .5s cubic-bezier(.2,.7,.1,1)}
body.spa-water .header::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:radial-gradient(260px 120px at var(--gx,20%) 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 70%);opacity:.9;transition:opacity .4s}
html body.spa-water.hx-scrolled .header{background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 46%,rgba(255,255,255,.06)),rgba(9,24,31,.6)!important}
/* offenes Handy-Menü braucht den ganzen Bildschirm: Glas dort aus */
html body.spa-water .header:has(nav.open){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#0b1c24!important}
@media (min-width:1100px){
 body.spa-water .header{top:14px;left:max(18px,calc(50% - 660px));right:max(18px,calc(50% - 660px));min-height:66px;padding:10px 12px 10px 28px;border-radius:999px}
 body.spa-water .header .nav-book{border-radius:999px}
}
@media (max-width:1099px){
 body.spa-water .header{border-width:0 0 1px;border-bottom-color:rgba(255,255,255,.14)}
 body.spa-water .header::before{opacity:.5}
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
 html body.spa-water .header,html body.spa-water.hx-scrolled .header{background:rgba(9,24,31,.92)!important}
}

/* Euer Tag an Bord: Text läuft, Bild bleibt stehen */
.spfx-ablauf{position:relative;padding:clamp(72px,9vw,140px) 0 clamp(56px,7vw,110px);color:#f4f3ef}
.spfx-kopf{max-width:46rem;margin-bottom:clamp(36px,5vw,72px)}
.spfx-kopf h2{margin:.25em 0 0}
.spfx-buehne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,96px);align-items:start}
.spfx-schritt{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:4vh 0;opacity:.32;transition:opacity .7s cubic-bezier(.2,.7,.1,1)}
.spfx-schritt.is-aktiv,.spfx-schritt:only-child{opacity:1}
.spfx-schritt h3{font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.04;margin:.3em 0 .45em}
.spfx-schritt p:not(.overline){max-width:30em;color:rgba(244,243,239,.82);line-height:1.7;margin:0}
.spfx-schritt figure{display:none}
.spfx-bilder{position:sticky;top:16vh;height:68vh;border-radius:22px;overflow:hidden;box-shadow:0 40px 80px -46px rgba(0,0,0,.8);background:#0b1c24}
.spfx-bilder img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1s ease,transform 1.6s cubic-bezier(.2,.7,.1,1)}
.spfx-bilder img.is-aktiv{opacity:1;transform:none}
.spfx-bilder::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);border-radius:inherit}
.spfx-mehr{margin-top:clamp(28px,4vw,48px)}
.spfx-js .spfx-schritt{opacity:.32}
html:not(.spfx-js) .spfx-schritt{opacity:1}
html:not(.spfx-js) .spfx-bilder img:first-child{opacity:1;transform:none}
@media (max-width:899px){
 .spfx-buehne{display:block}
 .spfx-bilder{display:none}
 .spfx-schritt,.spfx-js .spfx-schritt{min-height:0;opacity:1;padding:0 0 clamp(40px,10vw,56px)}
 .spfx-schritt figure{display:block;margin:0 0 20px;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:#0b1c24}
 .spfx-schritt figure img{display:block;width:100%;height:100%;object-fit:cover}
 .spfx-schritt h3{font-size:clamp(1.8rem,8vw,2.3rem)}
}
@media (prefers-reduced-motion:reduce){.spfx-schritt,.spfx-js .spfx-schritt{opacity:1;transition:none}.spfx-bilder img{transition:none}}