/* SaaleSpa – Magic-Ebene (Gestaltung zu spa-magic.js) */
.hx-letters{position:relative;height:260vh;background:#0b1c24;color:#f4f1ea}
.hx-letters-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hx-letters canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hx-letters-hint{position:absolute;left:50%;bottom:clamp(28px,6vh,56px);transform:translateX(-50%);margin:0;font:600 11.5px var(--hx-label,'Josefin Sans',Arial,sans-serif);letter-spacing:.3em;text-transform:uppercase;color:#d9bb87;opacity:calc(1 - var(--hx-letters,0) * 12);transition:opacity .3s}
.hx-letters-end{position:absolute;inset:auto 0 0 0;padding:0 clamp(20px,6vw,88px) clamp(48px,10vh,110px);background:linear-gradient(transparent,#0b1c24cc 55%,#0b1c24f2);opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.hx-letters-through .hx-letters-end{opacity:1;transform:none}
.hx-letters-end .overline{color:#d9bb87}
.hx-letters-end h2{font:300 clamp(40px,6vw,84px)/1.02 var(--hx-serif,'Cormorant Garamond',Georgia,serif);margin:12px 0 0;color:#f4f1ea;text-shadow:0 2px 26px #0b1c24b3;text-wrap:balance}
.hx-letters-end h2 em{color:#f0dcb4}
@media (prefers-reduced-motion:reduce){.hx-letters{height:auto}.hx-letters-stick{position:relative;height:70vh}.hx-letters-hint{display:none}}

/* Wort für Wort */
.hx-reveal-on .hx-word{opacity:.22;transition:opacity .45s cubic-bezier(.2,.7,.2,1)}
.hx-reveal-on .hx-word.lit{opacity:1}

/* Lichtfleck unter dem Mauszeiger */
@media (hover:hover) and (pointer:fine){
 :is(.package-tabs button,.review-grid blockquote,.hx-includes li){position:relative;isolation:isolate}
 :is(.package-tabs button,.review-grid blockquote,.hx-includes li)::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(220px circle at var(--hx-mx,50%) var(--hx-my,50%),#d9bb8738,transparent 70%)}
 :is(.package-tabs button,.review-grid blockquote,.hx-includes li):hover::before{opacity:1}
}

/* Saunadampf */
figure.water-scene-photo{position:relative}
.hx-steam{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}

/* Goldene Knöpfe: auf Touch-Geräten ein ruhiger Lichtstreif alle paar Sekunden */
@media (hover:none){
 body.spa-water :is(.water-reserve,.final-cta .button)::after{animation:hx-shine 7s cubic-bezier(.2,.7,.2,1) 2s infinite}
}
@keyframes hx-shine{0%,72%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@media (prefers-reduced-motion:reduce){body.spa-water :is(.water-reserve,.final-cta .button)::after{animation:none!important}}

/* Wellen-Übergang */
.hx-seam.hx-wave{position:absolute!important;display:block!important;left:0!important;right:0!important;bottom:-1px!important;top:auto!important;height:clamp(46px,6vw,90px)!important;pointer-events:none}
.hx-seam.hx-wave svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Leistungs-Symbole: gleiche Kachelhöhe, gleiche Bildgröße, Zeichnen beim Erscheinen */
.hx-includes{align-items:stretch}
.hx-includes li+li{margin-top:0!important}
.hx-includes li{align-content:center;grid-template-rows:auto auto;min-height:100%}
.hx-includes svg{overflow:visible;width:56px!important;height:56px!important;padding:6px;box-sizing:border-box;border-radius:50%;background:radial-gradient(circle,#d9bb8742 0%,#d9bb871c 42%,transparent 68%);stroke-width:1.3!important}
@media(max-width:600px){.hx-includes svg{width:52px!important;height:52px!important;padding:5px}}
.hx-includes path{transform-box:fill-box}
.hx-includes.hx-draw li path{stroke-dasharray:1;animation:hx-ic-draw 1.15s calc(var(--hx-i,0) * 110ms + .1s) cubic-bezier(.65,0,.25,1) both}
.hx-includes.hx-draw li .ic-st{animation:hx-ic-draw 1.15s calc(var(--hx-i,0) * 110ms + .1s) cubic-bezier(.65,0,.25,1) both,hx-ic-steam 2.8s calc(var(--hx-i,0) * 110ms + 1.3s) ease-in-out infinite}
.hx-includes.hx-draw li .ic-fl{transform-origin:50% 100%;animation:hx-ic-draw 1.15s calc(var(--hx-i,0) * 110ms + .1s) both,hx-ic-flame 1.6s calc(var(--hx-i,0) * 110ms + 1.3s) ease-in-out infinite}
.hx-includes.hx-draw li .ic-nt{animation:hx-ic-draw 1.15s calc(var(--hx-i,0) * 110ms + .1s) both,hx-ic-note 2.4s calc(var(--hx-i,0) * 110ms + 1.3s) ease-in-out infinite}
.hx-includes.hx-draw li .ic-ry{transform-origin:50% 100%;animation:hx-ic-draw 1.15s calc(var(--hx-i,0) * 110ms + .1s) both,hx-ic-rays 3.2s calc(var(--hx-i,0) * 110ms + 1.3s) ease-in-out infinite}
.hx-includes.hx-draw li .ic-wv{animation:hx-ic-draw 1.15s calc(var(--hx-i,0) * 110ms + .1s) both,hx-ic-wave 2.6s calc(var(--hx-i,0) * 110ms + 1.3s) ease-in-out infinite}
.hx-includes.hx-draw li .ic-bb{animation:hx-ic-draw 1.15s calc(var(--hx-i,0) * 110ms + .1s) both,hx-ic-bubble 2.2s calc(var(--hx-i,0) * 110ms + 1.3s) ease-in infinite}
@keyframes hx-ic-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hx-ic-steam{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-1.6px);opacity:.35}}
@keyframes hx-ic-flame{0%,100%{transform:scale(1,1)}35%{transform:scale(.9,1.12)}70%{transform:scale(1.06,.92)}}
@keyframes hx-ic-note{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(.6px,-1.4px) rotate(-6deg)}}
@keyframes hx-ic-rays{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.92)}}
@keyframes hx-ic-wave{0%,100%{transform:translateX(0)}50%{transform:translateX(1.4px)}}
@keyframes hx-ic-bubble{0%{transform:translateY(1.5px);opacity:0}30%{opacity:1}100%{transform:translateY(-3px);opacity:0}}
@media (hover:hover) and (pointer:fine){.hx-includes li{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}.hx-includes li:hover{transform:translateY(-3px);border-color:#b8935a66;box-shadow:0 14px 30px #16333d14}}
@media (prefers-reduced-motion:reduce){.hx-includes.hx-draw li path{animation:none!important}}

/* Arrangement-Karte: Text nicht mehr bündig am Kartenrand */
body.spa-water #arrangements .package-scene{background:#fffdf8}
body.spa-water #arrangements .package-scene figcaption{padding:22px clamp(20px,3vw,32px) 24px!important}