/* SaaleSpa – Highend-Ebene (Vorschau 15.10.2026)
   Echtes Logo, edle Schriften, weiche Übergänge, warmes Licht und ruhige Bewegung.
   Nur Gestaltung: Texte, Preise, Arrangements und Buchungswege bleiben unverändert. */

@font-face{font-family:'Cormorant Garamond';src:url('/assets/highend-fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/assets/highend-fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/assets/highend-fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/assets/highend-fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Josefin Sans';src:url('/assets/highend-fonts/josefin-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Josefin Sans';src:url('/assets/highend-fonts/josefin-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{--hx-night:#0b1c24;--hx-deep:#10262f;--hx-ink:#16333d;--hx-cream:#f4f1ea;--hx-sand:#ebe4d6;--hx-gold:#d9bb87;--hx-gold-deep:#a9834b;--hx-mist:#c9d4d5;--hx-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;--hx-label:'Josefin Sans','DM Sans',Arial,sans-serif;--hx-ease:cubic-bezier(.2,.7,.2,1)}

/* ---------- Marke: echtes SaaleSpa-Logo ---------- */
.wordmark{position:relative}
.header .wordmark,body .header .wordmark{display:block!important;width:clamp(132px,13vw,168px);height:clamp(34px,3.4vw,44px);background:url('/assets/brand/saalespa-wortmarke-creme.svg') left center/contain no-repeat}
.header .wordmark>*{opacity:0!important;pointer-events:none}
footer .wordmark{display:block!important;width:min(280px,72vw);aspect-ratio:5619/1734;height:auto!important;background:url('/assets/brand/saalespa-logo-gold.svg') left center/contain no-repeat;margin-bottom:22px}
footer .wordmark>*{opacity:0!important}

/* ---------- Schrift: Serif für Gefühl, Logo-Grotesk für Orientierung ---------- */
body.spa-water :is(h1,h2,.water-statement){font-family:var(--hx-serif)!important;font-weight:300!important;letter-spacing:-.012em!important;font-kerning:normal;font-feature-settings:'liga','kern'}
body.spa-water h3{font-family:var(--hx-serif)!important;font-weight:500!important;letter-spacing:0!important}
body.spa-water :is(h1,h2,h3) em{font-family:var(--hx-serif);font-style:italic;font-weight:300;color:var(--hx-gold)}
body.spa-water .water-copy h1{font-size:clamp(64px,7.6vw,118px)!important;line-height:.92!important;text-shadow:0 2px 30px #06182080,0 1px 2px #06182066}
body.spa-water .water-copy h1 em{font-weight:300}
body.spa-water .water-prologue h2{font-size:clamp(46px,6.6vw,96px)!important;line-height:1.02!important}
body.spa-water section h2{line-height:1.02}
body.spa-water :is(.overline,.water-kicker,.footer-label,.eyebrow,.water-tour-top strong,.package-tag){font-family:var(--hx-label)!important;font-weight:400!important;text-transform:uppercase!important;letter-spacing:.26em!important;font-size:12px!important;line-height:1.5!important}
body.spa-water :is(.overline,.water-kicker):not(.package-tag){display:inline-flex!important;align-items:center;gap:14px}
body.spa-water :is(.overline,.water-kicker):not(.package-tag)::before{content:'';flex:0 0 34px;height:1px;background:currentColor;opacity:.7}
body.spa-water .header nav a:not(.nav-book){font-family:var(--hx-label);text-transform:uppercase;letter-spacing:.16em;font-size:12px!important;position:relative}
body.spa-water .header nav a:not(.nav-book)::after{content:'';position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--hx-gold);transition:right .45s var(--hx-ease)}
body.spa-water .header nav a:not(.nav-book):hover::after{right:0}

/* ---------- Kopfzeile: gläsern, wird beim Scrollen ruhig dunkel ---------- */
body.spa-water .header{transition:background .5s var(--hx-ease),box-shadow .5s,min-height .4s;-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px)}
body.spa-water.hx-scrolled .header{background:#0b1c24e6!important;box-shadow:0 1px 0 #d9bb8726,0 18px 40px #00000033}

/* ---------- Knöpfe: warm, weich, mit Lichtkante ---------- */
body.spa-water :is(.button.gold,.water-reserve,.nav-book,.final-cta .button){position:relative;overflow:hidden;isolation:isolate;border-radius:999px!important;border:0!important;background:linear-gradient(135deg,#ead3a8,#d2ad6f 55%,#c49a5b)!important;color:#0b1c24!important;box-shadow:0 10px 30px #a9834b40,inset 0 1px 0 #ffffff66;font-family:var(--hx-label)!important;text-transform:uppercase;letter-spacing:.14em;font-size:12.5px!important;font-weight:600!important;transition:transform .35s var(--hx-ease),box-shadow .35s}
body.spa-water :is(.button.gold,.water-reserve,.nav-book,.final-cta .button)::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,#ffffffa6 50%,transparent 70%);transform:translateX(-130%);transition:transform 1.1s var(--hx-ease)}
body.spa-water :is(.button.gold,.water-reserve,.nav-book,.final-cta .button):hover{transform:translateY(-2px);box-shadow:0 16px 40px #a9834b59,inset 0 1px 0 #ffffff80}
body.spa-water :is(.button.gold,.water-reserve,.nav-book,.final-cta .button):hover::after{transform:translateX(130%)}
body.spa-water .header .nav-book{padding:12px 22px!important;min-height:44px}
body.spa-water .text-link{text-underline-offset:5px}

/* ---------- Startbild: Kino mit Nebel und warmem Licht ---------- */
body.spa-water .water-window{isolation:isolate}
body.spa-water .water-media::after{background:radial-gradient(ellipse 80% 60% at 70% 40%,transparent 40%,#061820a8 100%),linear-gradient(180deg,#061820b3,transparent 26%,transparent 60%,#061820d9)!important}
.hx-mist{position:absolute;left:-10%;right:-10%;bottom:-6%;height:46%;z-index:2;pointer-events:none;opacity:.55;filter:blur(28px);background:radial-gradient(ellipse 30% 40% at 20% 70%,#f4f1ea2e,transparent 70%),radial-gradient(ellipse 34% 46% at 60% 80%,#f4f1ea24,transparent 70%),radial-gradient(ellipse 26% 36% at 88% 66%,#d9bb871f,transparent 70%);animation:hx-drift 22s ease-in-out infinite alternate;mix-blend-mode:screen}
@keyframes hx-drift{0%{transform:translate3d(-3%,0,0) scale(1)}100%{transform:translate3d(3%,-4%,0) scale(1.08)}}
body.spa-water .water-copy h1>span,body.spa-water .water-copy h1>em{display:block;animation:hx-rise 1.5s var(--hx-ease) both}
body.spa-water .water-copy h1>em{animation-delay:.25s}
body.spa-water .water-kicker{animation:hx-fade 1.6s .1s var(--hx-ease) both}
@keyframes hx-rise{from{opacity:0;transform:translateY(.35em);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes hx-fade{from{opacity:0}to{opacity:1}}
.hx-scrollcue{position:absolute;left:50%;bottom:28px;z-index:4;width:1px;height:58px;overflow:hidden;background:#f4f1ea30;pointer-events:none}
.hx-scrollcue::after{content:'';position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--hx-gold);animation:hx-cue 2.6s var(--hx-ease) infinite}
@keyframes hx-cue{0%{top:-40%}100%{top:100%}}

/* ---------- Weiche Nahtstellen statt harter Kanten ---------- */
.hx-seam{position:absolute;left:0;right:0;bottom:-1px;height:clamp(56px,8vw,130px);pointer-events:none;z-index:3}
body.spa-water main>section,body.spa-water main>aside{position:relative}

/* ---------- Bilder: ruhige Rahmen, langsamer Zoom ---------- */
body.spa-water :is(.gift-grid>img,.package-scene,.water-scene-photo,.story figure,.visit figure,.restaurant-section figure,.morning-story figure){border-radius:18px;overflow:hidden;box-shadow:0 30px 70px #0b1c2433}
body.spa-water :is(.gift-grid>img,.package-scene img,.water-scene-photo img,.story figure img,.restaurant-section figure img){transition:transform 2.4s var(--hx-ease)}
body.spa-water :is(.gift-grid>img,.package-scene,.water-scene-photo,.story figure,.restaurant-section figure):hover :is(img),body.spa-water .gift-grid>img:hover{transform:scale(1.035)}

/* ---------- Einblenden beim Scrollen (nur mit Skript, ohne „Bewegung reduzieren“) ---------- */
.hx-reveal{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1.2s var(--hx-ease),transform 1.2s var(--hx-ease);transition-delay:var(--hx-delay,0s)}
.hx-reveal.hx-in{opacity:1;transform:none}
.hx-unveil{clip-path:inset(10% 8% 10% 8% round 18px);transition:clip-path 1.6s var(--hx-ease);transition-delay:var(--hx-delay,0s)}
.hx-unveil img{transform:scale(1.12);transition:transform 2.2s var(--hx-ease)}
.hx-unveil.hx-in{clip-path:inset(0 0 0 0 round 18px)}
.hx-unveil.hx-in img{transform:scale(1)}

/* ---------- Arrangements: Karten mit Goldkante ---------- */
body.spa-water .package-tabs{gap:12px!important;border:0!important}
body.spa-water .package-tabs button{border:1px solid #16333d1f!important;border-radius:14px!important;background:#fffdf8!important;box-shadow:0 1px 0 #fff inset,0 8px 24px #0b1c240d;transition:transform .35s var(--hx-ease),box-shadow .35s,border-color .35s,background .35s!important}
body.spa-water .package-tabs button:hover{transform:translateY(-3px);box-shadow:0 18px 36px #0b1c241a;border-color:#a9834b66!important}
body.spa-water .package-tabs button:is(.active,[aria-selected=true],[aria-pressed=true]){background:var(--hx-ink)!important;color:var(--hx-cream)!important;border-color:var(--hx-ink)!important;box-shadow:0 0 0 1px #d9bb8799,0 22px 44px #0b1c2433}
body.spa-water .package-tabs button :is(b,strong,.package-choice-name){font-family:var(--hx-serif);font-weight:500;font-size:1.25em;letter-spacing:0}
body.spa-water .booking-card{border-radius:24px!important;overflow:visible!important}
body.spa-water .price,body.spa-water .price-row strong{font-family:var(--hx-serif)!important;font-weight:300!important;letter-spacing:-.01em}
body.spa-water :is(.durations,.preview-slot-actions) button{border-radius:999px!important;transition:background .3s,color .3s,border-color .3s}

/* ---------- Gutscheine: Lichtschein hinter dem Bild ---------- */
body.spa-water .gift-section{overflow:hidden}
body.spa-water .gift-section::before{content:'';position:absolute;width:70vmax;height:70vmax;right:-20vmax;top:-10vmax;background:radial-gradient(circle,#d9bb8722,transparent 62%);pointer-events:none}

/* ---------- 3D-Boot: Vorschaubild statt leerer Fläche ---------- */
body.spa-water .water-model-loading{background:linear-gradient(180deg,#0b1c2433,#0b1c24cc),url('/assets/model-overview.jpg') center/cover no-repeat;border-radius:18px}
body.spa-water #water-model-start{border-radius:999px!important;border:1px solid #d9bb87aa!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0b1c2466!important;font-family:var(--hx-label);text-transform:uppercase;letter-spacing:.16em;font-size:12px;padding:16px 26px!important;transition:background .3s,transform .3s var(--hx-ease)}
body.spa-water #water-model-start:hover{background:#d9bb87!important;color:#0b1c24!important;transform:translateY(-2px)}

/* ---------- Gästestimmen ---------- */
body.spa-water .review-score strong{font-family:var(--hx-serif);font-weight:300;font-size:clamp(34px,3vw,46px)!important}
body.spa-water .review-score strong::before{content:'★★★★★';display:block;font-size:14px;letter-spacing:.3em;color:var(--hx-gold);margin-bottom:6px;font-family:var(--hx-label)}
body.spa-water .review-grid blockquote p{font-family:var(--hx-serif)!important;font-style:italic;font-weight:300!important;font-size:clamp(24px,2.1vw,32px)!important;line-height:1.25!important}
body.spa-water .review-grid blockquote{transition:transform .5s var(--hx-ease)}
body.spa-water .review-grid blockquote:hover{transform:translateY(-4px)}

/* ---------- Aufklapper ---------- */
body.spa-water details>summary{transition:color .3s}
body.spa-water details>summary:hover{color:var(--hx-gold-deep)}

/* ---------- Schluss: Logo als Signatur ---------- */
body.spa-water .final-cta{overflow:hidden}
body.spa-water .final-cta::before{content:'';position:absolute;inset:auto -10% -40% -10%;height:90%;background:radial-gradient(ellipse 50% 60% at 50% 100%,#d9bb8726,transparent 70%);pointer-events:none}
body.spa-water .final-cta h2{font-size:clamp(48px,6vw,92px)!important}

/* ---------- Warmes Licht folgt der Maus (nur Desktop) ---------- */
.hx-glow{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,#d9bb8714,transparent 65%);opacity:0;transition:opacity .6s;will-change:transform}
body.hx-glow-on .hx-glow{opacity:1}

/* ---------- Kleine Verfeinerungen ---------- */
::selection{background:#d9bb87;color:#0b1c24}
body.spa-water{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}

@media(max-width:700px){
 .header .wordmark,body .header .wordmark{width:128px;height:34px}
 body.spa-water .water-copy h1{font-size:clamp(52px,15vw,68px)!important;line-height:.94!important}
 body.spa-water .water-prologue h2{font-size:clamp(40px,11vw,56px)!important}
 body.spa-water :is(.overline,.water-kicker,.footer-label,.package-tag){font-size:11px!important;letter-spacing:.22em!important}
 body.spa-water :is(.overline,.water-kicker):not(.package-tag)::before{flex-basis:22px}
 body.spa-water .water-reserve{font-size:12px!important}
 .hx-mist{height:32%;bottom:auto;top:20%;opacity:.4}
 .hx-scrollcue{display:none}
 body.spa-water .review-grid blockquote p{font-size:26px!important}
 body.spa-water .final-cta h2{font-size:46px!important}
}
@media(prefers-reduced-motion:reduce){
 .hx-mist,.hx-scrollcue::after,body.spa-water .water-copy h1>span,body.spa-water .water-copy h1>em,body.spa-water .water-kicker{animation:none!important}
 .hx-reveal,.hx-unveil,.hx-unveil img{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
 .hx-glow{display:none}
}
body.spa-water .water-price strong{font-family:var(--hx-serif)!important;font-weight:300!important;font-size:clamp(38px,3.2vw,48px)!important;letter-spacing:-.01em}
body.spa-water .water-reserve{width:auto!important;min-width:0!important;white-space:nowrap;padding:0 26px!important;gap:12px;justify-content:center}
@media(max-width:700px){
 body.spa-water .water-offer{gap:12px!important}
 body.spa-water .water-reserve{padding:0 18px!important;letter-spacing:.1em!important;font-size:11.5px!important}
 body.spa-water .water-price strong{font-size:38px!important}
}
/* Untere Leiste am Handy: schwebende Glaskapsel statt Balken */
@media(max-width:1000px){
 body.spa-water .mobile-book{left:12px!important;right:12px!important;bottom:max(12px,env(safe-area-inset-bottom))!important;display:grid!important;grid-template-columns:1.25fr 1fr;gap:6px;padding:6px!important;border-radius:999px;background:#0b1c24e0!important;-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 18px 40px #0b1c2466,inset 0 0 0 1px #d9bb8740!important}
 body.spa-water .mobile-book a{justify-content:center!important;min-height:48px!important;padding:0 14px!important;border-radius:999px;font-family:var(--hx-label);text-transform:uppercase;letter-spacing:.14em}
 body.spa-water .mobile-book a>span{max-width:none!important;font-size:12px!important}
 body.spa-water .mobile-book .preview-mobile-book{background:linear-gradient(135deg,#ead3a8,#d2ad6f 55%,#c49a5b)!important;color:#0b1c24!important;font-weight:600}
 body.spa-water .mobile-book .preview-mobile-gift{background:transparent!important;color:#f4f1ea!important}
}
/* Desktop: Titel links oben über Wald und See, damit er nicht über das Boot läuft */
@media(min-width:701px){
 body.spa-water .water-copy{left:5.5vw!important;right:auto!important;text-align:left!important;width:min(44vw,640px)!important}
 body.spa-water .water-copy .water-kicker{margin-left:0!important;margin-right:auto!important;justify-content:flex-start}
 body.spa-water .water-media::after{background:radial-gradient(ellipse 60% 70% at 18% 30%,#061820a6,transparent 70%),radial-gradient(ellipse 80% 60% at 70% 40%,transparent 40%,#0618208c 100%),linear-gradient(180deg,#061820b3,transparent 26%,transparent 60%,#061820d9)!important}
}
@media(min-width:701px){
 body.spa-water .water-lower{width:auto!important;min-width:330px}
 body.spa-water .water-offer{gap:28px!important}
 body.spa-water .water-reserve{flex:0 0 auto;height:58px!important;min-height:58px!important;overflow:hidden}
}

/* ---------- Stufe 2: Jahreszeit, Termin-Hinweis, Licht im Rundgang, Hochkant-Film ---------- */
.hx-season{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px!important;padding:8px 16px;border:1px solid #d9bb8766;border-radius:999px;background:#0b1c2459;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:400 11px/1.3 var(--hx-label);text-transform:uppercase;letter-spacing:.2em;color:#f4f1ea;animation:hx-fade 1.4s .4s var(--hx-ease) both}
.hx-season::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--hx-gold);box-shadow:0 0 12px var(--hx-gold)}
body.hx-season-winter #water-header-film{filter:saturate(.82) brightness(1.02) hue-rotate(-6deg)}
body.hx-season-spring #water-header-film{filter:saturate(1.05) brightness(1.03)}
body.hx-season-summer #water-header-film{filter:saturate(1.1) sepia(.06)}
body.hx-season-autumn #water-header-film{filter:saturate(1.04) sepia(.12)}

.hx-next{display:inline-flex!important;flex-wrap:wrap;align-items:center;gap:6px 12px;align-self:flex-start;max-width:100%;padding:12px 18px;border-radius:16px;background:#0b1c2499;border:1px solid #d9bb8759;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#f4f1ea!important;text-decoration:none!important;transition:background .3s,border-color .3s,transform .35s var(--hx-ease);animation:hx-rise 1s var(--hx-ease) both}
.hx-next:hover{background:#0b1c24d9;border-color:var(--hx-gold);transform:translateY(-2px)}
.hx-next-label{font:400 11px var(--hx-label);text-transform:uppercase;letter-spacing:.18em;color:var(--hx-gold)}
.hx-next strong{font:300 20px/1.2 var(--hx-serif);letter-spacing:0}
.hx-next-pulse{width:8px;height:8px;border-radius:50%;background:#7fc4a0;box-shadow:0 0 0 0 #7fc4a080;animation:hx-ping 2.2s ease-out infinite}
@keyframes hx-ping{0%{box-shadow:0 0 0 0 #7fc4a080}80%,100%{box-shadow:0 0 0 10px #7fc4a000}}

body.spa-water .water-tour-top{position:relative}
.hx-daylight{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen}
.hx-daylight span{position:absolute;inset:0;transition:opacity .2s linear}
.hx-daylight .hx-morning{background:radial-gradient(ellipse 60% 70% at 15% 10%,#cfe3ff1f,transparent 70%),linear-gradient(180deg,#9fc3d612,transparent 60%);opacity:calc(1 - var(--hx-day,0))}
.hx-daylight .hx-evening{background:radial-gradient(ellipse 70% 80% at 85% 90%,#f0a85a42,transparent 70%),linear-gradient(0deg,#d9894a2a,transparent 65%);opacity:var(--hx-day,0)}
.hx-sunpath{position:absolute;left:50%;bottom:-1px;width:min(260px,30%);transform:translateX(-50%);height:1px;margin:0;background:linear-gradient(90deg,#cfe3ff55,#d9bb8799,#f0a85a99)}
.hx-sunpath i{position:absolute;top:50%;left:calc(var(--hx-day,0) * 100%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:radial-gradient(circle,#fff6e2,#e6b878 70%);box-shadow:0 0 14px #f0c27f}

@media(max-width:700px){
 /* Hochkant-Film füllt das Startbild, Titel und Auswahl liegen darüber */
 body.hx-portrait-film .water-window{min-height:100svh!important;padding:0!important;justify-content:flex-end}
 body.hx-portrait-film .water-media{position:absolute!important;inset:0!important;aspect-ratio:auto!important;height:100%!important}
 body.hx-portrait-film .water-media #water-header-film{object-fit:cover!important;width:100%;height:100%}
 body.hx-portrait-film .water-media::after{background:linear-gradient(180deg,#0618209e 0%,transparent 16%,#0b1c2459 30%,#0b1c24c7 50%,#0b1c24f2 72%,#0b1c24 100%)!important}
 body.hx-portrait-film .water-kicker{text-shadow:0 1px 12px #061820}
 body.hx-portrait-film .water-copy{margin-top:auto;padding-top:120px;z-index:3}
 body.hx-portrait-film .water-lower{margin-top:0;z-index:3}
 body.hx-portrait-film .hx-mist{top:auto;bottom:10%;height:40%}
 .hx-next{padding:10px 14px}
 .hx-next strong{font-size:18px}
 .hx-season{margin-bottom:14px!important}
 .hx-sunpath{display:none}
}
@media(prefers-reduced-motion:reduce){.hx-next,.hx-season,.hx-next-pulse{animation:none!important}}

/* ---------- Stufe 3: Menü, Seitenwechsel, Begrüßung, Arrangements ---------- */
/* Weicher Übergang zwischen SaaleSpa-Seiten (Start, Gutschein, Buchung, Rechtliches) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
body.spa-water .header{view-transition-name:hx-header}

/* Menü am Handy: ganze Fläche, große Serif, gestaffelt */
@media(max-width:1000px){
 body.spa-water .header .wordmark,body.spa-water .header .menu{position:relative;z-index:3}
 body.spa-water .header nav.open{position:fixed!important;inset:0!important;z-index:2;display:flex!important;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px!important;min-height:100dvh;padding:110px max(28px,env(safe-area-inset-left)) calc(40px + env(safe-area-inset-bottom))!important;background:radial-gradient(ellipse 70% 50% at 80% 100%,#d9bb871f,transparent 70%),#0b1c24!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:0!important;box-shadow:none!important;overflow-y:auto}
 body.spa-water .header nav.open a:not(.nav-book){font:300 clamp(34px,9vw,46px)/1.2 var(--hx-serif)!important;text-transform:none!important;letter-spacing:-.01em!important;color:#f4f1ea;padding:6px 0;opacity:0;transform:translateY(14px);animation:hx-menu .7s var(--hx-ease) forwards}
 body.spa-water .header nav.open a[hreflang]{font:400 12px var(--hx-label)!important;text-transform:uppercase!important;letter-spacing:.2em!important;margin-top:18px;color:var(--hx-gold)}
 body.spa-water .header nav.open a:not(.nav-book)::after{bottom:4px}
 body.spa-water .header nav.open .nav-book{margin-top:26px;align-self:stretch;justify-content:center;min-height:56px;opacity:0;animation:hx-menu .7s .42s var(--hx-ease) forwards}
 body.spa-water .header nav.open a:nth-child(1){animation-delay:.04s}body.spa-water .header nav.open a:nth-child(2){animation-delay:.08s}body.spa-water .header nav.open a:nth-child(3){animation-delay:.12s}body.spa-water .header nav.open a:nth-child(4){animation-delay:.16s}body.spa-water .header nav.open a:nth-child(5){animation-delay:.2s}body.spa-water .header nav.open a:nth-child(6){animation-delay:.24s}body.spa-water .header nav.open a:nth-child(7){animation-delay:.28s}
 body.spa-water:has(.header nav.open){overflow:hidden}
}
@keyframes hx-menu{to{opacity:1;transform:none}}

/* Begrüßung beim ersten Besuch: das Logo erscheint wie mit der Hand gezogen */
.hx-intro{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;background:radial-gradient(ellipse 60% 50% at 50% 60%,#16343d,#0b1c24 70%);pointer-events:auto;cursor:pointer;animation:hx-intro-out .7s 1.55s cubic-bezier(.6,0,.2,1) forwards}
.hx-intro img{width:min(440px,72vw);height:auto;clip-path:inset(0 100% 0 0);animation:hx-draw 1.15s .15s cubic-bezier(.65,0,.25,1) forwards;filter:drop-shadow(0 0 30px #d9bb8740)}
@keyframes hx-draw{to{clip-path:inset(0 0 0 0)}}
@keyframes hx-intro-out{to{opacity:0;visibility:hidden;transform:scale(1.03)}}

/* Arrangements: Bild blendet weich über, Preis zählt sanft */
#package-photo.hx-swap{animation:hx-swap .8s var(--hx-ease)}
@keyframes hx-swap{from{opacity:.15;transform:scale(1.04);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.hx-tick{display:inline-block;animation:hx-tick .5s var(--hx-ease)}
@keyframes hx-tick{from{opacity:.2;transform:translateY(-.25em)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 .hx-intro{display:none}
 body.spa-water .header nav.open a,body.spa-water .header nav.open .nav-book{animation:none!important;opacity:1!important;transform:none!important}
 #package-photo.hx-swap,.hx-tick{animation:none}
}

/* ---------- Stufe 4: Rundgang-Film ---------- */
.hx-kino{position:relative;padding:clamp(70px,9vw,130px) 0;background:radial-gradient(ellipse 60% 70% at 20% 50%,#d9bb8714,transparent 70%),#0b1c24;color:#f4f1ea;overflow:hidden}
.hx-kino-wrap{width:min(1180px,calc(100% - 44px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(32px,6vw,90px);align-items:center}
.hx-kino-copy{display:grid;gap:22px;justify-items:start}
.hx-kino-copy h2{font:300 clamp(46px,5.4vw,84px)/1.02 var(--hx-serif);letter-spacing:-.012em;margin:0}
.hx-kino-copy h2 em{font-style:italic;color:var(--hx-gold)}
.hx-kino-copy>p:not(.overline){max-width:46ch;margin:0;font-size:17px;line-height:1.75;color:#c5d1d2}
.hx-kino-play{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 24px 0 8px;border:1px solid #d9bb8780;border-radius:999px;background:transparent;color:#f4f1ea;font:400 12px var(--hx-label);text-transform:uppercase;letter-spacing:.16em;cursor:pointer;transition:background .3s,border-color .3s}
.hx-kino-play:hover{background:#d9bb871f;border-color:var(--hx-gold)}
.hx-kino-icon{width:38px;height:38px;border-radius:50%;background:var(--hx-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 38'%3E%3Cpath d='M15.5 12.5v13l10.5-6.5z' fill='%230b1c24'/%3E%3C/svg%3E") center/100% no-repeat}
.hx-kino-play[aria-pressed=true] .hx-kino-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 38'%3E%3Cpath d='M14 12.5h3.5v13H14zM20.5 12.5H24v13h-3.5z' fill='%230b1c24'/%3E%3C/svg%3E")}
.hx-kino-film{position:relative;margin:0;justify-self:center;width:min(100%,430px);aspect-ratio:3/4;border-radius:22px;overflow:hidden;box-shadow:0 40px 90px #00000080,0 0 0 1px #d9bb874d;background:#08151a}
.hx-kino-film video{display:block;width:100%;height:100%;object-fit:cover}
.hx-kino-film::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 10px #0b1c2433,inset 0 -80px 80px -60px #0b1c24aa}
@media(max-width:800px){
 .hx-kino-wrap{grid-template-columns:1fr}
 .hx-kino-film{order:-1;width:100%;max-width:520px}
 .hx-kino-copy>p:not(.overline){font-size:16px}
}
/* Stufe 4: Hochkant-Boot oben vollständig sichtbar, Titel darunter */
@media(max-width:700px){
 body.hx-portrait-film .water-window{justify-content:flex-start!important;min-height:0!important;padding:0!important}
 body.hx-portrait-film .water-media{position:relative!important;inset:auto!important;height:min(calc(100vw * 4 / 3),64svh)!important;aspect-ratio:auto!important;flex:0 0 auto}
 body.hx-portrait-film .water-media #water-header-film{object-fit:cover!important;object-position:50% 72%}
 body.hx-portrait-film .water-media::after{background:linear-gradient(180deg,#06182088 0%,transparent 20%,transparent 66%,#0b1c24 100%)!important}
 body.hx-portrait-film .water-copy{margin-top:-46px!important;padding-top:0!important}
 body.hx-portrait-film .water-copy h1{font-size:clamp(44px,12.4vw,54px)!important}
 body.hx-portrait-film .water-copy h1>span{display:inline!important}
 body.hx-portrait-film .water-copy h1>em{display:block!important}
 body.hx-portrait-film .hx-season{margin-bottom:10px!important}
 body.hx-portrait-film .water-kicker{margin-bottom:10px!important}
 body.hx-portrait-film .water-lower{padding-top:18px!important}
 body.hx-portrait-film .hx-mist{top:30%;bottom:auto;height:30%}
}
@media(max-width:700px){
 body.hx-portrait-film .water-media{height:min(calc(100vw * 4 / 3),58svh)!important}
 body.hx-portrait-film .water-window{position:relative}
 body.hx-portrait-film .water-film-actions{display:none!important}
 body.hx-portrait-film .water-media{position:relative!important}
 body.hx-portrait-film #header-film-toggle.hx-film-fab{position:absolute!important;right:14px;bottom:58px;z-index:4;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px!important;padding:0!important;border:0!important;background:transparent;font-size:0!important;color:transparent;cursor:pointer}
 body.hx-portrait-film #header-film-toggle::before{width:40px;height:40px;flex-basis:40px;background-color:#0b1c2499!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
 body.hx-portrait-film .water-copy{margin-top:-40px!important}
}

/* Arrangements: Gold-Symbole für enthaltene Leistungen (keine Aufzählungspunkte) */
.hx-includes{list-style:none;margin:22px 0 4px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px 12px}
.hx-includes li{display:grid;justify-items:center;gap:8px;padding:14px 8px 12px;border:1px solid #16333d14;border-radius:14px;background:#fffdf8;text-align:center;animation:hx-rise .6s calc(var(--hx-i,0) * 45ms) var(--hx-ease) both}
.hx-includes li::marker{content:none}
.hx-includes svg{width:34px;height:34px;fill:none;stroke:#a9834b;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.hx-includes span{font:400 11px/1.35 var(--hx-label);text-transform:uppercase;letter-spacing:.1em;color:#16333d}
@media(max-width:700px){.hx-includes{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.hx-includes span{font-size:10px;letter-spacing:.06em}}
@media(prefers-reduced-motion:reduce){.hx-includes li{animation:none}}
/* Symbolkacheln am Handy ohne einzelne Waise in der letzten Zeile */
@media(max-width:600px){.hx-includes{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-includes:has(>li:nth-child(3):last-child),.hx-includes:has(>li:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}.hx-includes:not(:has(>li:nth-child(3):last-child)) li:last-child:nth-child(odd){grid-column:1/-1}}

/* ===== Handy: mehr Luft, weniger Worte (Stufe 4) ===== */
@media (max-width:700px){
 /* Startbild: nur Jahreszeit und Titel, die lange Ortszeile entfällt am Handy */
 body.spa-water .water-entry .water-copy .water-kicker{display:none!important}
 .water-entry .hx-season{margin-bottom:18px!important}
 .water-entry .water-offer{gap:16px!important;padding-top:20px!important}
 /* Fließtext: etwas größer, mehr Zeilen- und Absatzabstand */
 main p:not([class*=kicker]):not([class*=overline]):not(.hx-season):not([class*=label]):not(.eyebrow){line-height:1.72}
 main :is(p,li)+p{margin-top:.9em}
 :is(.restaurant-note,.visit p,.standard-note,.booking-note,.price-note,.morning-film-note){font-size:15px!important;line-height:1.68!important}
 /* Kleine Großbuchstaben-Zeilen gut lesbar */
 :is([class*=kicker],[class*=overline],.eyebrow,.section-kicker,.hx-season){font-size:12px!important;letter-spacing:.2em!important;line-height:1.6!important}
 .hx-includes span{font-size:11.5px!important;letter-spacing:.08em!important}
 /* Fingergerechte Tippflächen */
 footer :is(.footer-contact,.footer-links,nav,div)>a,.review-grid cite a,footer a.wordmark{display:inline-flex!important;align-items:center;min-height:44px}
 .review-grid cite a{padding-block:6px}
}
@media (max-width:700px){header a.wordmark,footer a.wordmark{min-height:44px;display:inline-flex!important;align-items:center}}
@media (max-width:900px){footer :is(.footer-contact,.footer-links,nav,div)>a,.review-grid cite a,header a.wordmark,footer a.wordmark{display:inline-flex!important;align-items:center;min-height:44px}}