/* Suiren Japanese Head Spa · Tokens aus dem Design-Export (15.09.2026), Seite statisch, self-hosted. */
/* Schriften (OFL, fontsource) direkt hier statt per @import: spart drei serielle, renderblockierende Requests. Dateien unter assets/fonts/. */
/* Cinzel · OFL-1.1 · https://fontsource.org/fonts/cinzel */
@font-face{font-family: 'Cinzel'; src: url('/assets/fonts/cinzel/cinzel-latin-ext-normal.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family: 'Cinzel'; src: url('/assets/fonts/cinzel/cinzel-latin-normal.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Cormorant · OFL-1.1 · https://fontsource.org/fonts/cormorant */
@font-face{font-family: 'Cormorant'; src: url('/assets/fonts/cormorant/cormorant-latin-ext-italic.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family: 'Cormorant'; src: url('/assets/fonts/cormorant/cormorant-latin-italic.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family: 'Cormorant'; src: url('/assets/fonts/cormorant/cormorant-latin-ext-normal.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family: 'Cormorant'; src: url('/assets/fonts/cormorant/cormorant-latin-normal.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Jost · OFL-1.1 · https://fontsource.org/fonts/jost */
@font-face{font-family: 'Jost'; src: url('/assets/fonts/jost/jost-latin-ext-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family: 'Jost'; src: url('/assets/fonts/jost/jost-latin-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family: 'Jost'; src: url('/assets/fonts/jost/jost-latin-ext-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family: 'Jost'; src: url('/assets/fonts/jost/jost-latin-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Ersatzschriften mit angepassten Metriken (tools/schrift-metrik.mjs): bis die Webfonts da sind, nehmen Times New Roman und Arial
   denselben Platz ein, damit beim Tausch nichts springt (Layoutverschiebung) */
@font-face{font-family:'Cormorant Ersatz';src:local('Times New Roman');size-adjust:96.43%;ascent-override:95.82%;descent-override:29.76%;line-gap-override:0%}
@font-face{font-family:'Jost Ersatz';src:local('Arial');size-adjust:94.79%;ascent-override:112.88%;descent-override:39.56%;line-gap-override:0%}
@font-face{font-family:'Cinzel Ersatz';src:local('Times New Roman');size-adjust:131.88%;ascent-override:74%;descent-override:28.21%;line-gap-override:0%}
:root {
  --blue-50:#F1F4FF; --blue-100:#E2E9FF; --blue-200:#C5D2FF; --blue-300:#9FB3FF; --blue-400:#7991FF;
  --blue-500:#5271FF; --blue-600:#3D58E6; --blue-700:#2F44BA; --blue-800:#27388F; --blue-900:#1D2A66;
  --ink-900:#211C1D; --ink-700:#443D3F; --ink-500:#6E6669; --ink-300:#A39A9D;
  --paper-0:#FFFFFF; --paper-50:#FBFAF7; --paper-100:#F6F3ED; --paper-200:#EDE8DE; --paper-300:#DFD8CA;
  --lotus-100:#FBE3EA; --lotus-300:#F2AFC3; --lotus-500:#DD7E9C; --leaf-100:#E6F0DC; --leaf-500:#7FA465;
  --font-display:'Cinzel','Cinzel Ersatz','Times New Roman',serif;
  --font-serif:'Cormorant','Cormorant Ersatz',Georgia,serif;
  --font-sans:'Jost','Jost Ersatz','Century Gothic',sans-serif;
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-pill:999px;
  --shadow-soft:0 2px 8px rgba(33,28,29,.05);
  --shadow-card:0 6px 24px rgba(33,28,29,.08);
  --shadow-float:0 16px 48px rgba(29,42,102,.16);
  --ease:cubic-bezier(.25,.1,.25,1);
  --wrap:1180px}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper-50);color:var(--ink-900);font-family:var(--font-sans);font-weight:300;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-serif);font-weight:400;line-height:1.12;margin:0}
p{margin:0}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.eyebrow{font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-600)}
.display{font-family:var(--font-display);letter-spacing:.18em;text-transform:uppercase}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 30px;border-radius:var(--radius-pill);font-family:var(--font-sans);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);cursor:pointer}
.btn-primary{background:var(--blue-500);color:#fff}
.btn-primary:hover{background:var(--blue-600);transform:translateY(-1px);box-shadow:var(--shadow-float)}
.btn-ghost{background:transparent;color:var(--ink-900);border-color:var(--ink-900)}
.btn-ghost:hover{background:var(--ink-900);color:#fff}
.btn-light{background:rgba(251,250,247,.88);color:var(--ink-900);backdrop-filter:blur(10px)}
.btn-light:hover{background:#fff}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px}

/* Hinweisleiste */
.notice{position:relative;z-index:25;background:var(--blue-900);color:var(--blue-100);font-size:15px;line-height:1.5;text-align:center;padding:14px 20px}
.notice a{color:#fff}

/* Header */
.site-header{position:absolute;top:0;left:0;right:0;z-index:20;padding:22px 0}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{height:40px;width:auto}
.brand .logo-night{display:none}
[data-mode="night"] .brand .logo-day{display:none}
[data-mode="night"] .brand .logo-night{display:block}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--ink-900)}
.nav a:hover{color:var(--blue-600)}
.nav .btn{padding:11px 22px}
[data-mode="night"] .nav a{color:var(--paper-50)}
.menu-btn{display:none}

/* Hero */
.hero{position:relative;min-height:100svh;overflow:hidden;background:#7FB3D9;display:flex;align-items:flex-end}
.hero pond-scene{position:absolute;inset:0}

.hero-fallback{position:absolute;inset:0;background:url("/assets/img/teich/pond-day-2.webp") center/cover no-repeat;transition:opacity .6s}
html[data-mode="night"] .hero-fallback{background-image:url("/assets/img/teich/pond-night-2.webp")}
/* Am Handy ein kleineres Standbild (LCP); die volle Auflösung holt sich der Teich danach als Textur */
@media (max-width:700px){
  .hero-fallback{background-image:url("/assets/img/teich/pond-day-2-960.webp")}
  html[data-mode="night"] .hero-fallback{background-image:url("/assets/img/teich/pond-night-2-960.webp")}
}

/* Sektionen */
.section{padding:clamp(50px,7vw,78px) 0}
/* Bildreiche Sektionen unter dem ersten Bildschirm erst aufbauen, wenn sie in die Nähe scrollen: ihre lazy-Bilder konkurrieren sonst mit dem Hero-Bild */
#behandlungen,#geschenke{content-visibility:auto;contain-intrinsic-size:auto 1200px}
.section-head{max-width:640px;margin-bottom:44px}
.section-head h2{font-size:clamp(32px,3.6vw,46px);margin-top:12px}
.section-head p{margin-top:14px;color:var(--ink-700);font-size:18px}
.section-raised{background:var(--paper-100)}

/* Rituale */
.rituals{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ritual{background:var(--paper-0);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);display:flex;flex-direction:column;transition:transform .42s var(--ease),box-shadow .42s var(--ease)}
.ritual:hover{transform:translateY(-3px);box-shadow:var(--shadow-float)}
.ritual-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--blue-100)}
/* Kundenfavorit: Karte mit umlaufendem Lichtsaum */
.ritual-best{position:relative;isolation:isolate;overflow:visible;background:none}
.ritual-best .ritual-img{border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.ritual-best .ritual-body{background:var(--paper-0);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.ritual-best::before,.ritual-best::after{content:"";position:absolute;inset:-3px;border-radius:calc(var(--radius-lg) + 3px);pointer-events:none;animation:glow-spin 9s linear infinite}
.ritual-best::before{z-index:-1;padding:3px;background:conic-gradient(from var(--glow-angle,0deg),var(--blue-200) 0 8%,var(--lotus-300) 16%,var(--blue-600) 25%,var(--blue-300) 30%,var(--blue-500) 35%,var(--blue-200) 44% 58%,var(--lotus-300) 66%,var(--blue-600) 75%,var(--blue-300) 80%,var(--blue-500) 85%,var(--blue-200) 94%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ritual-best::after{z-index:-2;inset:-10px;background:conic-gradient(from var(--glow-angle,0deg),rgba(82,113,255,.12) 0 8%,rgba(221,126,156,.7) 18%,rgba(61,88,230,.95) 28%,rgba(82,113,255,.12) 42% 58%,rgba(221,126,156,.7) 68%,rgba(61,88,230,.95) 78%,rgba(82,113,255,.12) 92%);filter:blur(16px)}
.ritual-badge{position:absolute;top:0;left:50%;z-index:3;transform:translate(-50%,-50%);white-space:nowrap;padding:9px 20px;border-radius:var(--radius-pill);background:var(--blue-600);color:#fff;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;box-shadow:0 0 0 3px var(--paper-50),0 8px 24px rgba(61,88,230,.35)}
@media (prefers-reduced-motion:reduce){.ritual-best::before,.ritual-best::after{animation:none}}
.ritual-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ritual:hover .ritual-img img{transform:scale(1.04)}
.ritual-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.ritual-kanji{font-family:var(--font-serif);font-size:15px;color:var(--ink-500);letter-spacing:.1em}
.ritual h3{font-size:26px}
.ritual p{font-size:15px;color:var(--ink-700);flex:1}
.ritual-meta{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1px solid var(--paper-200)}
.ritual-meta .price{font-family:var(--font-serif);font-size:26px}
.ritual-meta .dur{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-500)}
.ritual .btn{margin-top:6px}

/* Abos & Gutscheine */
.offers{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.offer{background:var(--paper-0);border-radius:var(--radius-lg);padding:26px 24px;box-shadow:var(--shadow-soft);border:1px solid var(--paper-200);display:flex;flex-direction:column;gap:8px}
.offer h3{font-size:24px}
.offer .price{font-family:var(--font-serif);font-size:34px;margin-top:6px}
.offer .price small{font-family:var(--font-sans);font-size:13px;color:var(--ink-500);margin-left:8px;text-decoration:line-through}
.offer p{font-size:14px;color:var(--ink-700);flex:1}
.offer-gift{background:var(--lotus-100);border-color:transparent}

/* Stimmen */
.quote{background:var(--paper-0);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-soft)}
.quote p{font-family:var(--font-serif);font-size:22px;line-height:1.4}
.quote .stars{display:flex;margin-bottom:14px}
.quote .stars i{width:15px;height:15px}
.quote footer{margin-top:16px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-500)}
.rating{margin-top:28px;font-size:14px;color:var(--ink-700)}

/* Standort */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.visit dl{display:grid;grid-template-columns:140px 1fr;gap:12px 20px;margin:26px 0 0}
.visit dt{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-600);padding-top:3px}
.visit dd{margin:0}

/* Footer */
.site-footer{background:var(--ink-900);color:var(--ink-300);padding:56px 0 32px;font-size:14px;content-visibility:auto;contain-intrinsic-size:auto 420px}
.site-footer .wrap{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:40px 56px;align-items:start}
.site-footer .display{color:#fff;font-size:20px}
.footer-nav{display:grid;grid-template-columns:repeat(4,auto);gap:24px 56px}
.footer-nav div{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.site-footer a{text-decoration:none;color:var(--ink-300)}
.site-footer a:hover{color:#fff}
.site-footer a.social{display:inline-flex;align-items:center;gap:8px}
.social-icon{width:17px;height:17px;flex:none}
.site-footer .legal{grid-column:1/-1;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;gap:12px 32px;flex-wrap:wrap}
.legal-links{display:flex;gap:24px;margin-right:auto}
@media (max-width:1100px){.site-footer .wrap{grid-template-columns:1fr}}
@media (max-width:760px){.footer-nav{grid-template-columns:1fr 1fr;gap:24px}}

/* Rechtsseiten */
.legal-page{padding:140px 0 96px;max-width:760px}
.legal-page h1{font-size:44px;margin-bottom:8px}
.legal-page h2{font-size:24px;margin:36px 0 10px}
.legal-page p,.legal-page li{font-size:16px;color:var(--ink-700)}
.legal-page ul{padding-left:20px}
.legal-page .stand{color:var(--ink-500);font-size:14px}

/* Reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (max-width:1000px){
  .rituals,.offers{grid-template-columns:repeat(2,1fr)}
    .visit{grid-template-columns:1fr;gap:36px}}
@media (max-width:700px){
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:70px;right:16px;left:16px;flex-direction:column;align-items:flex-start;gap:18px;padding:24px;background:var(--paper-50);border-radius:var(--radius-lg);box-shadow:var(--shadow-float)}
  .nav.open a{color:var(--ink-900)}
  .menu-btn{display:inline-flex;border:0;background:rgba(251,250,247,.8);border-radius:var(--radius-pill);padding:10px 16px;font:inherit;font-size:12px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}

  .rituals,.offers{grid-template-columns:1fr}
  .visit dl{grid-template-columns:1fr;gap:4px 0}
  .visit dt{margin-top:12px}
  .site-footer .wrap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* Feste Buchungsleiste am Handy (Salonkee öffnet im neuen Tab, Einbettung ist dort gesperrt) */
.book-bar{display:none}
@media (max-width:700px){
  .book-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;border-radius:var(--radius-lg);background:rgba(251,250,247,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow-float)}
  .book-bar .btn{padding:13px 10px;font-size:12px}
  .site-footer{padding-bottom:96px}
}

/* Klassen statt Inline-Styles (CSP style-src 'self' erlaubt keine style-Attribute) */
.rating-tight{margin-top:18px}

.footer-sub{margin-top:6px;white-space:nowrap}

/* Sterne und Laufband der Bewertungen */
.rating-line{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;font-size:15px;color:var(--ink-700)}
.rating-line strong{font-weight:500;color:var(--ink-900)}
.stars{display:inline-flex;gap:3px}
.stars i{--fill:100%;width:18px;height:18px;background:linear-gradient(90deg,var(--blue-500) var(--fill),var(--paper-300) var(--fill));clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.stars i.part{--fill:80%}
.marquee{overflow:hidden;margin-top:8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:22px;width:max-content;padding:12px 0;animation:marquee 70s linear infinite;transform:translateX(-50%)}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee .quote{flex:0 0 340px;margin:0}
@keyframes marquee{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (max-width:700px){.marquee .quote{flex-basis:280px}.marquee-track{animation-duration:55s}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;transform:none;flex-wrap:wrap;width:auto}.marquee{mask-image:none;-webkit-mask-image:none}}

.hero{min-height:auto;background:var(--paper-50);display:block;align-items:initial}
.site-header{position:relative;padding:22px 0 10px}

.hero-proof{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:14px;color:var(--ink-700)}

.textlink{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--blue-600);border-bottom:1px solid var(--blue-200);align-self:flex-start;padding-bottom:2px;margin-top:6px}
.textlink:hover{border-color:var(--blue-600)}
/* Textlinks und Fußzeilenlinks mit genug Tippfläche (Visual QA 22.10.) */
.textlink{padding-top:10px}
.site-footer nav a,.legal-links a{padding:6px 0}
.offer .btn{margin-top:8px;align-self:flex-start}

pond-scene{position:absolute;inset:0;touch-action:pan-y;cursor:pointer}
pond-scene canvas{display:block;width:100%;height:100%}
pond-scene.is-fallback{display:none}

.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;background:#1a1416;overflow:hidden}

.hero .site-header{position:relative;z-index:3;padding:22px 0 0}
.hero .nav a{color:var(--paper-50)}
.hero .brand .logo-day{display:none}
.hero .brand .logo-night{display:block}
.hero .menu-btn{background:rgba(251,250,247,.85)}

/* Button mit umlaufendem Lichtsaum */
/* Der Saum dreht per transform: Chrome setzt einen animierten @property-Winkel nicht zuverlässig in conic-gradient ein (stand still, 30.10.2026).
   ::before ist ein großes, drehendes Verlaufsquadrat, ::after deckt die Mitte ab, übrig bleibt ein 2px-Ring am Rand. */
.btn-glow{position:relative;overflow:hidden;background:var(--blue-500);color:#fff;isolation:isolate;box-shadow:0 10px 30px rgba(82,113,255,.35),0 0 24px rgba(82,113,255,.3)}
.btn-glow::before{content:"";position:absolute;left:50%;top:50%;width:max(130%,160px);aspect-ratio:1;background:conic-gradient(transparent 0 62%,#fff 70%,var(--blue-200) 78%,transparent 86%);transform:translate(-50%,-50%);animation:glow-rotate 3.2s linear infinite;z-index:-2}
.btn-glow::after{content:"";position:absolute;inset:2px;border-radius:inherit;background:var(--blue-600);z-index:-1;transition:background .18s var(--ease)}
.btn-glow:hover{transform:translateY(-1px)}
.btn-glow:hover::after{background:var(--blue-700)}
@property --glow-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes glow-spin{to{--glow-angle:360deg}}
@keyframes glow-rotate{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn-glow::before{animation:none;background:rgba(255,255,255,.5)}}

/* Besuch mit eingebauter Karte */
.visit{grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.visit-info h2{font-size:clamp(30px,3.2vw,40px);margin-top:12px}
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;margin:26px 0 30px;font-size:16px;line-height:1.55}
.visit-label{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-600);margin-bottom:6px}
.visit .muted{color:var(--ink-500);font-size:14px}
.map{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);aspect-ratio:1/1;background:var(--paper-100)}
.map img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.map-pin{position:absolute;left:var(--pin-x,50%);top:var(--pin-y,50%);width:18px;height:18px;border-radius:50%;background:var(--blue-500);border:3px solid #fff;box-shadow:0 0 0 6px rgba(82,113,255,.25),0 4px 12px rgba(29,42,102,.35);transform:translate(-50%,-50%)}
.map-credit{position:absolute;right:8px;bottom:6px;font-size:11px;color:var(--ink-700);background:rgba(251,250,247,.8);padding:2px 6px;border-radius:6px}
@media (max-width:1000px){.visit{grid-template-columns:1fr}}
@media (max-width:700px){.visit-grid{grid-template-columns:1fr}}

.map{--pin-x:49.56%;--pin-y:64.49%}

.book-bar.hidden{transform:translateY(120%);opacity:0;pointer-events:none}
.book-bar{transition:transform .35s var(--ease),opacity .35s var(--ease)}

/* ===== Startseiten-Hero: Video in Ellipse auf Seigaiha-Muster ===== */
/* Hero-Variante B: Video im Kreis, Seigaiha-Muster aus der Bildmarke als Hintergrund (schwarz auf Papier, sehr leicht) */
.hero-kreis{min-height:100svh;background-color:#7FB3D9;display:flex;flex-direction:column}
.hero-kreis::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 68% 50%,rgba(251,250,247,0) 28%,rgba(251,250,247,.55) 62%,rgba(251,250,247,.9) 100%);pointer-events:none}
.hero-kreis .site-header{position:relative;z-index:3}
.hero-kreis .nav a{color:var(--ink-900)}
.hero-kreis .brand .logo-day{display:block}
.hero-kreis .brand .logo-night{display:none}
.hero-kreis-grid{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:32px 0 72px}
.hero-kreis-copy h1{font-size:clamp(40px,4.6vw,64px);font-weight:300;margin:14px 0 16px}

.hero-circle{position:relative;width:min(100%,620px);aspect-ratio:1;margin-inline:auto;border-radius:50%;overflow:hidden;background:url("/assets/img/illu/wasserbogen-5.webp") center 45%/cover no-repeat;box-shadow:0 30px 80px rgba(29,42,102,.22),0 0 0 10px var(--paper-50),0 0 0 11px var(--paper-300)}
.hero-circle-video{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
@media (max-width:1000px){.hero-kreis-grid{grid-template-columns:1fr;gap:32px}.hero-circle{width:min(100%,460px)}}
@media (max-width:700px){.hero-kreis-grid{padding:12px 0 56px}.hero-circle{width:min(100%,320px);background-image:url("/assets/img/illu/wasserbogen-5-640.webp")}}
@media (prefers-reduced-motion:reduce){.hero-circle-video{display:none}}

/* Startseite: Text in eigener Karte über dem Muster */
.hero-kreis-copy{background:rgba(251,250,247,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--radius-lg);padding:40px 44px;box-shadow:var(--shadow-card);border:1px solid var(--paper-200)}
.hero-kreis::before{background:none}
@media (max-width:700px){.hero-kreis-copy{padding:26px 22px}}

/* Muster läuft unten weich in die nächste Sektion aus */
.hero-kreis::after{content:"";position:absolute;left:0;right:0;bottom:0;height:220px;background:linear-gradient(to bottom,rgba(251,250,247,0),var(--paper-50) 85%);pointer-events:none;z-index:1}
.hero-kreis .site-header,.hero-kreis-grid{position:relative;z-index:2}

/* ===== Fassung 4 (22.09.): der Koi-Teich ist der Hero-Hintergrund, kein Wellenmuster mehr ===== */
.hero-kreis .hero-fallback,.hero-kreis pond-scene{z-index:0}
.hero-kreis-grid,.hero-kreis .site-header .wrap{pointer-events:none}
.hero-kreis-grid>*,.hero-kreis .site-header .wrap>*{pointer-events:auto}
.hero-kreis::after{height:160px;background:linear-gradient(to bottom,rgba(251,250,247,0),var(--paper-50) 92%)}
.hero-kreis .menu-btn{background:rgba(251,250,247,.85)}
html[data-mode="night"] .hero-kreis .brand .logo-day{display:none}
html[data-mode="night"] .hero-kreis .brand .logo-night{display:block}
html[data-mode="night"] .hero-kreis .nav a{color:var(--paper-50)}
html[data-mode="night"] .hero-kreis-copy{background:rgba(251,250,247,.94)}

/* ===== Fassung 5 (14.10.): Navigation auf hellem Balken, Untertitel im Hero entfällt ===== */
.hero-kreis-copy h1{margin-bottom:26px}
.hero-kreis .site-header{z-index:4} /* mobiles Menü liegt sonst unter der Hero-Karte */
@media (min-width:701px){
  .hero-kreis .nav{gap:2px;padding:5px;border-radius:var(--radius-pill);background:rgba(251,250,247,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--paper-200);box-shadow:var(--shadow-card)}
  .hero-kreis .nav a,html[data-mode="night"] .hero-kreis .nav a{padding:10px 16px;border-radius:var(--radius-pill);color:var(--ink-900);transition:background .2s var(--ease),color .2s var(--ease)}
  .hero-kreis .nav a:hover{background:var(--paper-0);color:var(--blue-600)}
}

/* ===== Launch-Check 14.10.: Kontrast, Fokus, Reflow, Nachtmenü ===== */
.btn-primary,.btn-glow{background:var(--blue-600)}
.btn-primary:hover,.btn-glow:hover{background:var(--blue-700)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--ink-900);outline-offset:2px;box-shadow:0 0 0 5px #fff}
.legal-page h1{font-size:clamp(30px,8vw,44px);overflow-wrap:anywhere;hyphens:auto}
.section-head .review-note{margin-top:12px;font-size:14px;color:var(--ink-500);max-width:62ch}
.section-head .review-note summary{cursor:pointer;display:inline-block;text-decoration:underline;text-underline-offset:3px}
.section-head .review-note summary::-webkit-details-marker{display:none}
.section-head .review-note p{margin-top:8px;font-size:14px;color:var(--ink-500)}
.section-head .review-note a{color:inherit}
.book-bar.hidden{visibility:hidden;transition:transform .35s var(--ease),opacity .35s var(--ease),visibility 0s .35s}
@media (max-width:700px){
  html[data-mode="night"] .hero-kreis .nav.open a{color:var(--ink-900)}
}

/* ===== Unterseiten (15.10.): Behandlungen, Gutscheine & Abos, Besuch ===== */
.page-first{padding-top:clamp(32px,5vw,56px)}
.section-head h1{font-size:clamp(36px,4vw,52px);margin-top:12px}
.ritual h2{font-size:26px}
.offer h2{font-size:24px}
.nav a[aria-current="page"]{color:var(--blue-600)}
.subpage .section-head + .visit{margin-top:0}

/* ===== Häufige Fragen (21.10.) ===== */
#fragen{position:relative;overflow:hidden;isolation:isolate}
.faq-water{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:72px;align-items:start}
.faq .section-head{margin-bottom:0}
.faq .section-head a{color:var(--blue-700);white-space:nowrap}
.faq-list{grid-column:2;grid-row:1 / span 2}
.faq-group + .faq-group{margin-top:40px}
.faq-group h3{font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-600);margin-bottom:4px;padding:6px 0}
.faq-item{border-bottom:1px solid var(--paper-300)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:32px;padding:18px 0;font-family:var(--font-serif);font-size:22px;line-height:1.3;transition:color .2s var(--ease)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;width:24px;text-align:center;font-family:var(--font-sans);font-size:24px;line-height:1;color:var(--blue-600);transition:transform .2s var(--ease),opacity .2s var(--ease)}
.faq-item[open] summary{color:var(--blue-700)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--blue-700)}
.faq-item summary:focus-visible{outline:2px solid var(--ink-900);outline-offset:2px}
.faq-item p{margin:0 0 24px;padding:2px 0 2px 20px;border-left:2px solid var(--blue-300);max-width:62ch;color:var(--ink-700);font-size:16px}
.faq-item p a{color:var(--blue-700)}
/* Zahlungslogos unter der Antwort, innerhalb derselben Linie */
.faq-item p:has(+ .zahlarten){margin-bottom:0;padding-bottom:16px}
.zahlarten{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px 16px;margin:0 0 24px;padding:0 0 4px 20px;border-left:2px solid var(--blue-300)}
.zahlarten span{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500)}
.zahlarten ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.zahlarten img{display:block;height:26px;width:auto}
@media (max-width:700px){.zahlarten{grid-template-columns:1fr;gap:6px}.zahlarten ul + span{margin-top:6px}}

/* Mit Skript: Überschrift über die ganze Breite, darunter Seerosen links und ihre Fragen auf ihrer Höhe rechts */
.faq-js .faq .section-head{grid-column:1 / -1}
.faq-js .faq-lilies{grid-column:1;grid-row:2}
.faq-js .faq-list{grid-column:2;grid-row:2;transition:padding-top .8s var(--ease)}
.faq-js .faq-group + .faq-group{margin-top:0}
.faq-js .faq-group:not([hidden]){animation:faq-in .5s var(--ease)}
@keyframes faq-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.faq-lilies{position:relative;height:630px;margin-top:36px}
.faq-lily{position:absolute;width:160px;padding:0;border:0;background:none;font:inherit;color:var(--ink-500);cursor:pointer;display:flex;flex-direction:column;align-items:center;-webkit-tap-highlight-color:transparent;will-change:transform}
.faq-lily canvas{display:block;width:160px;height:140px;transition:transform .8s cubic-bezier(.3,1.35,.5,1)}
.faq-lily span{margin-top:-6px;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;transition:color .3s var(--ease),transform .8s cubic-bezier(.3,1.35,.5,1)}
.faq-lily:hover span{color:var(--blue-600)}
.faq-lily[aria-selected="true"]{z-index:1}
.faq-lily[aria-selected="true"] canvas{transform:scale(1.32)}
.faq-lily[aria-selected="true"] span{color:var(--ink-900);transform:translateY(18px)}
.faq-lily:focus-visible{outline:none}
.faq-lily:focus-visible span{outline:2px solid var(--ink-900);outline-offset:4px}
.faq-lily:nth-child(1){left:0;top:10px}
.faq-lily:nth-child(2){left:54%;top:50px}
.faq-lily:nth-child(3){left:8%;top:230px}
.faq-lily:nth-child(4){left:58%;top:270px}
.faq-lily:nth-child(5){left:30%;top:460px}
/* Kontakt erst über die Seerose „Antwort fehlt?“, damit zuerst die Antworten gelesen werden */
.faq-kontakt > p{margin:10px 0 22px;max-width:52ch;color:var(--ink-700);font-size:16px}
.faq-kontakt-wege{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:1000px){
  .faq{grid-template-columns:1fr}
  .faq-list,.faq-js .faq-list,.faq-js .faq-lilies{grid-column:auto;grid-row:auto}
  .faq-js .faq-list{padding-top:0 !important}
  .faq-lilies{height:auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px 4px;margin:12px 0 28px}
  .faq-lily{grid-column:span 2}
  .faq-lily:nth-child(4){grid-column:2 / span 2}
  .faq-lily:nth-child(5){grid-column:4 / span 2}
  .faq-lily{position:static;width:auto}
  .faq-lily canvas{width:100%;max-width:150px;height:auto;aspect-ratio:160/140}
  .faq-lily[aria-selected="true"] canvas{transform:scale(1.18)}
  .faq-lily[aria-selected="true"] span{transform:translateY(8px)}
}
@media (max-width:700px){.faq-item summary{font-size:20px;gap:24px}.faq-lily span{font-size:11px;letter-spacing:.08em;text-align:center}}
@media (prefers-reduced-motion:reduce){.faq-lily canvas,.faq-lily span,.faq-js .faq-list{transition:none}.faq-js .faq-group:not([hidden]){animation:none}}

/* ===== Umland (30.10.): Ortsseiten „Head Spa für <Ort>“ und Übersicht auf /besuch, erzeugt von tools/umland.mjs ===== */
/* Schriftgrößen, Punktgrößen und Linienbreiten der Karte stehen als Attribute im SVG, weil jede Karte anders zoomt. */
.umland-lead{font-family:var(--font-serif);font-size:clamp(21px,2vw,24px);line-height:1.4;color:var(--ink-900);max-width:42ch}
.umland-ort{align-items:start}
.umland-ort .visit-grid{margin:30px 0 14px}
.umland-quelle{font-size:13px;color:var(--ink-500)}
.umland-ort .rating-line{margin:22px 0 26px}
.umland-map{position:relative;border-radius:var(--radius-lg);background:var(--paper-100);box-shadow:var(--shadow-card);overflow:hidden}
.umland-karte{display:block;width:100%;height:auto}
.umland-karte text{paint-order:stroke;stroke:var(--paper-100);stroke-linejoin:round;font-family:var(--font-sans);fill:var(--ink-700)}
.umland-karte .ort circle{fill:var(--paper-0);stroke:var(--ink-500)}
.umland-karte a.ort:hover text{fill:var(--blue-600)}
.umland-karte a.ort:hover circle{stroke:var(--blue-600)}
.umland-karte a.ort:focus-visible{outline:none}
.umland-karte a.ort:focus-visible circle{stroke:var(--blue-700)}
.umland-karte a.ort:focus-visible text{fill:var(--blue-700);text-decoration:underline}
.umland-karte .ort.aktiv circle{fill:var(--paper-0);stroke:var(--blue-500)}
.umland-karte .ort.aktiv text{font-weight:500;fill:var(--ink-900)}
.umland-karte .studio circle{fill:var(--blue-500);stroke:var(--paper-0)}
.umland-karte .studio text{font-family:var(--font-display);letter-spacing:.18em;text-transform:uppercase;fill:var(--ink-900)}
.umland-karte .route-aktiv{fill:none;stroke:var(--blue-500);stroke-linecap:round;stroke-linejoin:round}
.umland-map .route-aktiv{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease) .3s}
.umland-map.in .route-aktiv{stroke-dashoffset:0}
.umland-uebersicht{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:start}
.umland-uebersicht .umland-map{position:sticky;top:calc(var(--kopf-h,0px) + 24px)}
.tabelle-wrap{max-width:760px}
.tabelle{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.tabelle th{text-align:left;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-600);padding:0 14px 12px 0;border-bottom:1px solid var(--paper-300);vertical-align:bottom}
.tabelle td{padding:13px 14px 13px 0;border-bottom:1px solid var(--paper-200)}
.tabelle td:not(:first-child){white-space:nowrap}
.tabelle a{color:var(--ink-900);text-underline-offset:3px;text-decoration-color:var(--paper-300)}
.tabelle a:hover{color:var(--blue-600);text-decoration-color:currentColor}
.umland-uebersicht .umland-quelle{margin-top:14px}
@media (max-width:1000px){.umland-uebersicht{grid-template-columns:minmax(0,1fr)}.umland-uebersicht .umland-map{position:relative;top:auto}}
@media (max-width:700px){
  .umland-karte .ort:not(.aktiv) text{display:none}
  .umland-uebersicht .umland-map{display:none}
  .tabelle{font-size:14.5px}
  .tabelle th{letter-spacing:.08em;padding-right:10px}
  .tabelle td{padding:12px 10px 12px 0}
}
@media (prefers-reduced-motion:reduce){.umland-map .route-aktiv{stroke-dashoffset:0;transition:none}}

/* ===== Anlass-Seiten (30.10.): Weihnachten, Valentinstag, Muttertag, Mitarbeitergeschenk, erzeugt von tools/anlaesse.mjs ===== */
.anlass-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.anlass-text h1{font-size:clamp(36px,4vw,52px)}
.anlass-lead{font-family:var(--font-serif);font-size:clamp(21px,2vw,24px);line-height:1.4;color:var(--ink-900);max-width:40ch;margin-top:22px}
.anlass-text .rating-line{margin:24px 0 28px}
.anlass-bild{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);background:var(--paper-100)}
.anlass-bild img{width:100%;height:auto}
.anlass-marke{margin-left:8px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600);white-space:nowrap}
.anlass-zeile{display:block;margin-top:3px;font-size:14px;line-height:1.45;color:var(--ink-500)}
.anlass-ablauf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.anlass-ablauf h2{font-size:clamp(30px,3.2vw,40px)}
.anlass-zwei{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:start}
.anlass-schritte{display:grid;gap:14px;margin:24px 0 32px;padding-left:1.3em;max-width:56ch}
.anlass-schritte li::marker{color:var(--blue-600);font-weight:500}
.anlass-schritte a{color:var(--blue-700)}
.anlass-fragen{border-top:1px solid var(--paper-300)}
.anlass-hinweis{margin-top:32px;max-width:62ch;font-size:14px;color:var(--ink-500)}
.anlass-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:32px}
.anlass-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border:1px solid var(--paper-300);border-radius:var(--radius-pill);background:var(--paper-0);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink-900);transition:border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)}
.anlass-links a::after{content:"\2192";font-size:15px;letter-spacing:0;color:var(--blue-500);transition:transform .18s var(--ease)}
.anlass-links a:hover{border-color:var(--blue-300);color:var(--blue-700)}
.anlass-links a:hover::after{transform:translateX(3px)}
@media (max-width:1000px){.anlass-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.anlass-links{grid-template-columns:1fr}}
@media (max-width:1000px){.anlass-hero,.anlass-ablauf,.anlass-zwei{grid-template-columns:minmax(0,1fr);gap:40px}}
.anlass-wege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
/* Überschriften, Texte und Normen der drei Wege stehen per Subgrid auf gleicher Höhe */
.anlass-weg{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start;justify-items:start}
.anlass-wege-block .section-head{max-width:none;text-align:center}
.anlass-wege-block .section-head h2{text-wrap:balance}
.anlass-wege-block .anlass-hinweis{margin-inline:auto;text-align:center}
.anlass-wege-aktion{display:flex;justify-content:center;margin-top:48px}
.anlass-weg h3{font-family:var(--font-serif);font-size:clamp(24px,2.4vw,30px);line-height:1.2;margin-bottom:14px}
.anlass-weg p{max-width:56ch;color:var(--ink-700)}
.anlass-weg .anlass-grundlage{margin-top:12px;font-size:13px;letter-spacing:.06em;color:var(--blue-600)}
.anlass-fragen-breit{max-width:820px}
@media (max-width:1000px){.anlass-wege{grid-template-columns:minmax(0,1fr);gap:36px}.anlass-weg{grid-row:auto;grid-template-rows:none}}
.tabelle td.tabelle-text{white-space:normal}
.anlass-weitere{margin-top:56px;padding-top:28px;border-top:1px solid var(--paper-300)}

/* Geschenke auf der Startseite: links die Saisonkarte (site.js blendet nach Datum ein), rechts dauerhaft Firmen */
[data-saison][hidden]{display:none!important}
.geschenke{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:22px;align-items:stretch}
.geschenk{position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:var(--radius-lg);background:var(--paper-0);border:1px solid var(--paper-200);box-shadow:var(--shadow-soft)}
.geschenk-bild{position:relative;aspect-ratio:16/10;overflow:hidden;margin:14px 14px 0;border-radius:calc(var(--radius-lg) - 8px)}
.geschenk-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.geschenk-text{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 30px 34px}
.geschenk-text h2{font-size:clamp(28px,3vw,40px);max-width:20ch;text-wrap:balance}
.geschenk-text .btn{margin-top:auto}
.geschenk-text .eyebrow+h2{margin-top:10px}
.geschenk-anlass{margin-top:-12px;color:var(--ink-700);max-width:34ch}
.geschenk-text h2,.geschenk-anlass{margin-bottom:26px}
/* Ohne Saison steht Firmen allein: Bild und Text nebeneinander */
.geschenke:not(:has(.geschenk[data-saison]:not([hidden]))) .geschenk-firma{flex-direction:row}
.geschenke:not(:has(.geschenk[data-saison]:not([hidden]))) .geschenk-firma .geschenk-bild{flex:0 0 42%;aspect-ratio:auto;min-height:340px;margin:14px}
.geschenke:not(:has(.geschenk[data-saison]:not([hidden]))) .geschenk-firma .geschenk-text{justify-content:center;align-items:flex-start;text-align:left;padding:40px clamp(28px,5vw,64px)}
.geschenke:not(:has(.geschenk[data-saison]:not([hidden]))) .geschenk-firma .btn{margin-top:0}
@media (max-width:700px){.geschenke .geschenk-firma{flex-direction:column!important}.geschenke .geschenk-firma .geschenk-bild{flex:none!important;aspect-ratio:16/10!important;min-height:0!important;margin:14px 14px 0!important}}

/* Saisonfarben: Weihnachten Winternacht mit Schnee und goldener Bildkante, die übrigen in Markenfarben */
/* In der Weihnachtszeit wird der ganze Abschnitt zur Winternacht, die Saisonkarte liegt leicht abgesetzt darauf */
#geschenke{position:relative;overflow:hidden}
#geschenke>.xmas-schnee{display:none}
#geschenke:has(.saison-weihnachten:not([hidden])){background:radial-gradient(120% 90% at 78% 10%,#2b3c8f 0%,var(--blue-900) 48%,#121a44 100%)}
#geschenke:has(.saison-weihnachten:not([hidden]))>.xmas-schnee{display:block}
#geschenke .geschenke{position:relative;z-index:2}
.saison-weihnachten{color:#fff;border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05);box-shadow:none}
#geschenke:has(.saison-weihnachten:not([hidden])) .geschenk-firma{border-color:transparent;box-shadow:0 24px 64px rgba(6,10,40,.45)}
.saison-weihnachten .geschenk-bild{box-shadow:0 0 0 2px #e9c877,0 18px 48px rgba(6,10,40,.5),0 0 60px rgba(243,213,138,.18)}
.saison-weihnachten h2{color:#fff}
.saison-valentinstag{background:var(--lotus-100);border-color:transparent}
.saison-muttertag{background:var(--lotus-100);border-color:transparent}
.saison-ostern{background:var(--leaf-100);border-color:transparent}
.saison-geburtstag{background:var(--blue-50);border-color:transparent}
.saison-weltfrauentag{background:#F1ECF8;border-color:transparent}
.xmas-schnee,.xmas-schnee::after{position:absolute;inset:-240px 0 0;pointer-events:none;z-index:1;background-image:radial-gradient(2px 2px at 20px 30px,#fff,transparent),radial-gradient(1.5px 1.5px at 90px 140px,rgba(255,255,255,.85),transparent),radial-gradient(2.5px 2.5px at 160px 60px,rgba(255,255,255,.9),transparent),radial-gradient(1.5px 1.5px at 210px 190px,#fff,transparent),radial-gradient(2px 2px at 60px 210px,rgba(255,255,255,.7),transparent);background-size:240px 240px;animation:schnee 16s linear infinite;opacity:.55}
.xmas-schnee::after{content:"";inset:0;background-size:360px 360px;animation-duration:26s;opacity:.6;filter:blur(.6px)}
@keyframes schnee{to{transform:translateY(240px)}}
@media (prefers-reduced-motion:reduce){.xmas-schnee,.xmas-schnee::after{animation:none}}

/* Bewertungen kompakter (Felix 30.10.2026): weniger Luft, kleinere Karten */
#bewertungen{padding:clamp(52px,7vw,80px) 0}
#bewertungen .section-head{margin-bottom:24px}
#bewertungen .section-head h2{font-size:clamp(28px,3vw,38px)}
#bewertungen .quote{padding:20px 22px}
#bewertungen .quote p{font-size:18px;line-height:1.38}
#bewertungen .quote .stars{margin-bottom:10px}
#bewertungen .quote footer{margin-top:12px}
#bewertungen .marquee-track{align-items:flex-start}
#bewertungen .marquee .quote{flex-basis:290px}
#bewertungen .quote p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
@media (max-width:700px){#bewertungen .marquee .quote{flex-basis:250px}}
/* Sechs Menüpunkte passen erst ab rund 1000 px, darunter bis zum Menüknopf ohne Bewertungen und Fragen */
@media (min-width:701px) and (max-width:1000px){.nav .nav-extra{display:none}}
.geschenk-text .btn{white-space:nowrap}
@media (max-width:1000px){.geschenk-text{padding:24px 20px 28px}.geschenk-text .btn{padding:15px 20px;font-size:12px;letter-spacing:.07em}}
/* Epassi-Hinweis unter den Behandlungen. Logo nur unverändert verwenden (Epassi-AVB 7.2), deshalb neutraler Grund statt Umfärben */
.epassi-hinweis{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:14px;padding:10px 20px;border-radius:var(--radius-pill);background:var(--paper-0);border:1px solid var(--paper-200);box-shadow:var(--shadow-soft);font-size:14px;color:var(--ink-700)}
.epassi-hinweis img{width:auto;height:17px}
.epassi-partner{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-900)}
.epassi-alt{font-weight:400;letter-spacing:.04em;text-transform:none;font-size:13px;color:var(--ink-500)}
.epassi-rabatt{display:inline-flex;gap:12px;white-space:nowrap}
.epassi-pfeil{color:var(--blue-500)}
/* Tippziele am Handy mindestens 44 px hoch (Visual-QA 30.10.2026) */
@media (max-width:700px){.menu-btn{min-height:44px}.offer .textlink{display:inline-flex;align-items:flex-end;min-height:44px}}
/* Hero: zweiter Knopf „Termin verschenken“ in umgekehrten Farben, Lichtsaum dreht gegenläufig */
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.btn-glow-invers,.btn-glow-invers:hover{background:var(--blue-100);color:var(--blue-700);box-shadow:0 10px 30px rgba(82,113,255,.18)}
.btn-glow-invers::before{background:conic-gradient(transparent 0 62%,var(--blue-500) 70%,var(--blue-300) 78%,transparent 86%);animation-direction:reverse}
.btn-glow-invers::after{background:var(--paper-0)}
.btn-glow-invers:hover::after{background:var(--blue-50)}
.tabelle td.eigen,.tabelle th.eigen,.tabelle tr.eigen td{background:var(--blue-50);color:var(--blue-800);font-weight:500}
.tabelle td.eigen,.tabelle th.eigen,.tabelle tr.eigen td:first-child{padding-left:12px}
/* Rechtsgrundlagen: Fragezeichen öffnet den Wortlaut bei Hover, Fokus oder Antippen */
.norm{position:relative;display:inline-flex;align-items:center;gap:8px}
.norm-btn{position:relative;display:inline-grid;place-items:center;width:20px;height:20px;padding:0;border:1px solid var(--blue-300);border-radius:50%;background:var(--paper-0);color:var(--blue-600);font:500 12px/1 var(--font-sans);cursor:help}
.norm-btn::after{content:"";position:absolute;inset:-12px}
.norm-text{position:absolute;left:0;bottom:calc(100% + 12px);z-index:10;width:min(360px,calc(100vw - 48px));padding:14px 16px;border-radius:var(--radius-md);background:var(--ink-900);color:#fff;font-size:13px;line-height:1.55;letter-spacing:0;box-shadow:var(--shadow-float);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
.norm:hover .norm-text,.norm:focus-within .norm-text{opacity:1;visibility:visible;transform:none}
.anlass-weg:last-child .norm-text{left:auto;right:0} /* sonst ragt der versteckte Text der dritten Karte rechts aus der Seite */

/* Musik und Mond rechts im Kopf (Knöpfe legt site.js an, Wellenlinie schwingt nur, solange Musik läuft) */
.musik,.mond{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--radius-pill);background:rgba(251,250,247,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow-soft);color:var(--ink-900);cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}
body>.musik{position:fixed;top:22px;right:20px;z-index:40}
.musik:hover,.mond:hover{background:#fff;color:var(--blue-600)}
.musik svg{width:24px;height:16px;overflow:visible}
.musik path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.musik[aria-pressed="false"]{color:var(--ink-500)}

/* Firmenanfrage als schmaler Dialog in Schritten (Markup aus tools/anlaesse.mjs, Logik in site.js) */
.anfrage{width:min(460px,100vw - 24px);max-height:min(720px,100dvh - 24px);padding:0;border:0;border-radius:var(--radius-lg);background:var(--paper-50);color:var(--ink-900);box-shadow:var(--shadow-float)}
.anfrage::backdrop{background:rgba(33,28,29,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.anfrage [hidden]{display:none !important}
.anfrage form,.anfrage-danke{padding:26px 28px 28px}
.anfrage-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px}
.anfrage h2{font-size:30px}
.anfrage-zu{width:40px;height:40px;margin-right:-10px;border:0;border-radius:var(--radius-pill);background:transparent;font-size:26px;line-height:1;color:var(--ink-500);cursor:pointer}
.anfrage-zu:hover{background:var(--paper-200);color:var(--ink-900)}
.anfrage-fortschritt{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:18px 0 24px;padding:0;list-style:none}
.anfrage-fortschritt li{height:3px;border-radius:2px;background:var(--paper-300);transition:background .25s var(--ease)}
.anfrage-fortschritt li.an{background:var(--blue-500)}
.anfrage-schritt{display:grid;gap:16px;margin:0;padding:0;border:0;min-width:0}
.anfrage-schritt legend{padding:0;margin-bottom:16px;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-600)}
.anfrage-feld{display:grid;gap:6px;font-size:14px;color:var(--ink-700)}
.anfrage-feld small{color:var(--ink-300);font-size:12px}
.anfrage input:not([type=radio]):not([type=checkbox]),.anfrage textarea{width:100%;padding:12px 14px;border:1px solid var(--paper-300);border-radius:var(--radius-sm);background:var(--paper-0);font:inherit;font-size:16px;color:var(--ink-900)}
.anfrage textarea{resize:vertical;min-height:84px}
.anfrage input:focus,.anfrage textarea:focus{outline:2px solid var(--blue-300);outline-offset:0;border-color:var(--blue-500)}
.anfrage-reihe{display:grid;grid-template-columns:120px 1fr;gap:12px}
.anfrage-werte{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:8px}
.anfrage-werte label{position:relative}
.anfrage-werte input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.anfrage-werte span{display:grid;place-items:center;height:48px;padding:0 10px;border:1px solid var(--paper-300);border-radius:var(--radius-pill);background:var(--paper-0);font-size:15px;white-space:nowrap;transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease)}
.anfrage-werte input:checked + span{border-color:var(--blue-500);background:var(--blue-50);color:var(--blue-700);font-weight:500}
.anfrage-werte input:focus-visible + span{outline:2px solid var(--blue-500);outline-offset:2px}
.anfrage-zahl{display:grid;grid-template-columns:48px 1fr 48px;gap:8px}
.anfrage-zahl button{border:1px solid var(--paper-300);border-radius:var(--radius-pill);background:var(--paper-0);font-size:20px;color:var(--ink-700);cursor:pointer}
.anfrage-zahl button:hover{border-color:var(--blue-300);color:var(--blue-600)}
.anfrage-zahl input{text-align:center;-moz-appearance:textfield}
.anfrage-zahl input::-webkit-inner-spin-button,.anfrage-zahl input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.anfrage-summe{min-height:24px;font-size:15px;color:var(--ink-500)}
.anfrage-summe strong{font-weight:500;color:var(--ink-900)}
.anfrage-hinweis{font-size:13px;color:var(--ink-500)}
.anfrage-hinweis a,.anfrage-fehler a{color:var(--blue-700)}
.anfrage-fehler{margin-top:16px;font-size:14px;color:#B3261E}
.anfrage-nav{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:28px}
.anfrage-zurueck{margin-right:auto;padding:12px 4px;border:0;background:none;font:inherit;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500);cursor:pointer}
.anfrage-zurueck:hover{color:var(--ink-900)}
.anfrage-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.anfrage-danke{display:grid;gap:14px;justify-items:start}
@media (max-width:420px){.anfrage form,.anfrage-danke{padding:22px 20px 22px}.anfrage-reihe{grid-template-columns:96px 1fr}}

/* ===== 31.10.: Navigation läuft mit, Mond-Schalter und Musik im Kopf ===== */
/* site.js setzt html.kopf-fest und misst die Kopfhöhe nach --kopf-h; ohne Skript bleibt der Kopf im Fluss */
html.kopf-fest{scroll-padding-top:var(--kopf-h)}
html.kopf-fest .site-header{position:fixed;top:0;left:0;right:0;z-index:50;padding:14px 0;transition:background .25s var(--ease),box-shadow .25s var(--ease)}
html.kopf-fest .hero-kreis,html.kopf-fest body.subpage{padding-top:var(--kopf-h)}
html.kopf-fest .site-header.gescrollt{background:rgba(251,250,247,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--paper-200),var(--shadow-soft)}
html.kopf-fest .site-header.gescrollt .brand .logo-day{display:block}
html.kopf-fest .site-header.gescrollt .brand .logo-night{display:none}
html.kopf-fest[data-mode="night"] .hero-kreis .site-header.gescrollt .brand .logo-day{display:block}
html.kopf-fest[data-mode="night"] .hero-kreis .site-header.gescrollt .brand .logo-night{display:none}
.site-header .wrap{justify-content:flex-start}
.site-header .nav{order:1;margin-left:auto}
.kopf-knoepfe{order:2;display:flex;gap:8px}
.kopf-knoepfe:empty{display:none}
.site-header .menu-btn{order:3}
.mond svg{width:20px;height:20px}
.mond path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.mond[aria-pressed="false"]{color:var(--ink-500)}
.mond[aria-pressed="true"],.mond[aria-pressed="true"]:hover{background:var(--ink-900);color:#F3E6C4}
.mond[aria-pressed="true"] path{fill:currentColor}
@media (max-width:700px){
  .site-header .wrap{gap:8px}
  .kopf-knoepfe{margin-left:auto}
}

/* Seigaiha-Wellenmuster hinter den Bewertungen (assets/js/seigaiha.js); der Layer liegt hinter dem Inhalt */
[data-seigaiha]{position:relative;isolation:isolate;background:linear-gradient(180deg,var(--paper-50),var(--paper-100) 22%,var(--paper-100) 78%,var(--paper-50))}
[data-seigaiha]>.seigaiha{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:.24;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent)}
[data-seigaiha]>.seigaiha>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}