:root{
  --creme:#f6efe4; --creme-2:#efe5d5; --papier:#fbf7f0;
  --tinte:#1d2a2b; --tinte-2:#4c5b5b; --tinte-3:#7d8988;
  --wasser:#0f3a3d; --wasser-2:#14565a; --wasser-3:#1f7f80; --wasser-hell:#d9ecea;
  --glut:#c9643a; --glut-2:#e08a55; --sonne:#f2b872; --sonne-hell:#fbe3c2;
  --linie:rgba(29,42,43,.12);
  --display:"Fraunces", "Iowan Old Style", Georgia, serif;
  --text:"Albert Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --r-xl:34px; --r-l:24px; --r-m:16px;
  --schatten:0 1px 2px rgba(15,58,61,.06), 0 24px 60px -28px rgba(15,58,61,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--text);font-size:17px;line-height:1.6;color:var(--tinte);
  background:var(--creme);-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:92px}
/* Körnung und Sonnenglut hinter allem */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60vw 46vw at 96% -8%, rgba(242,184,114,.55), transparent 62%),
    radial-gradient(48vw 40vw at -12% 34%, rgba(31,127,128,.16), transparent 66%),
    var(--creme)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .28  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
img{max-width:100%;display:block}
.mitte{width:min(1180px, 100% - 44px);margin-inline:auto}

/* ---------- Kopf ---------- */
.kopf{position:absolute;top:0;left:0;right:0;z-index:30}
.kopf .mitte{display:flex;align-items:center;justify-content:space-between;padding-block:22px}
.marke{font-family:var(--display);font-size:23px;font-weight:500;letter-spacing:-.02em;text-decoration:none;
  font-variation-settings:"SOFT" 100}
.marke i{color:var(--glut);font-weight:400}
.marke{display:inline-flex;align-items:center}
.marke img{display:block;height:40px;width:auto}
@media (max-width:640px){.marke img{height:34px}}
.kopfnav{display:flex;gap:6px;font-size:14.5px;font-weight:500}
.kopfnav a{text-decoration:none;padding:8px 14px;border-radius:999px;color:var(--tinte-2);transition:.25s}
.kopfnav a:hover{background:rgba(255,255,255,.7);color:var(--tinte)}

/* ---------- Bühne ---------- */
.buehne{position:relative;padding:118px 0 0}
.buehne .mitte{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.krume{font-size:13px;color:var(--tinte-3);margin:0 0 26px;letter-spacing:.01em}
.krume a{text-decoration:none}.krume a:hover{text-decoration:underline}
.status{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;
  padding:8px 16px 8px 12px;border-radius:999px;background:#fff;box-shadow:0 1px 0 rgba(29,42,43,.06),0 10px 24px -14px rgba(15,58,61,.5)}
.status .puls{position:relative;width:10px;height:10px;border-radius:50%;background:#3fae6a}
.status .puls::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #3fae6a;opacity:0;animation:puls 2.2s ease-out infinite}
.status.zu .puls{background:var(--glut)}.status.zu .puls::after{border-color:var(--glut)}
@keyframes puls{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.ort{font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--wasser-3);margin:26px 0 10px}
h1{font-family:var(--display);font-weight:400;font-size:clamp(46px,6.6vw,92px);line-height:.96;letter-spacing:-.035em;margin:0;
  font-variation-settings:"SOFT" 100,"opsz" 144;color:var(--wasser)}
h1 em{font-style:italic;font-weight:300;color:var(--glut)}
.lead{font-size:clamp(18px,1.55vw,21px);line-height:1.55;color:var(--tinte-2);max-width:31em;margin:26px 0 0}
.lead b{color:var(--tinte);font-weight:600}
.knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.knopf{display:inline-flex;align-items:center;gap:10px;font:600 16px/1 var(--text);text-decoration:none;
  padding:17px 26px;border-radius:999px;border:0;cursor:pointer;transition:transform .25s, box-shadow .25s, background .25s}
.knopf.voll{background:var(--wasser);color:#fff;box-shadow:0 16px 30px -16px rgba(15,58,61,.8)}
.knopf.voll:hover{transform:translateY(-2px);background:var(--wasser-2)}
.knopf.leer{background:rgba(255,255,255,.65);color:var(--wasser);box-shadow:inset 0 0 0 1.5px rgba(15,58,61,.2)}
.knopf.leer:hover{background:#fff;transform:translateY(-2px)}
.knopf svg{width:18px;height:18px}

.fenster{position:relative;aspect-ratio:4/4.6;max-height:660px;justify-self:end;width:100%}
.fenster .bild{position:absolute;inset:0;border-radius:999px 999px var(--r-xl) var(--r-xl);overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(15,58,61,.75);background:var(--wasser)}
.fenster img{width:100%;height:100%;object-fit:cover;object-position:38% 92%;transform:scale(1.06);
  animation:zoom 26s ease-in-out infinite alternate}
@keyframes zoom{to{transform:scale(1.16) translate(1.5%,-1.5%)}}
.fenster .bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(242,184,114,.30), transparent 38%, rgba(15,58,61,.35))}
/* Dampf */
.dampf{position:absolute;left:-6%;right:-6%;bottom:-4%;height:46%;pointer-events:none;filter:blur(30px);opacity:.42}
.dampf span{position:absolute;bottom:0;width:38%;height:70%;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.85), transparent);animation:steig 11s ease-in-out infinite}
.dampf span:nth-child(1){left:2%;animation-delay:-2s}
.dampf span:nth-child(2){left:30%;width:46%;animation-duration:14s;animation-delay:-7s}
.dampf span:nth-child(3){left:62%;animation-duration:12s;animation-delay:-4s}
@keyframes steig{0%{transform:translateY(30%) scale(.8);opacity:0}35%{opacity:.9}100%{transform:translateY(-70%) scale(1.35);opacity:0}}
.marken{position:absolute;display:flex;flex-direction:column;gap:10px;left:-44px;top:30%}
.markechip{display:flex;align-items:baseline;gap:9px;background:#fff;border-radius:18px;padding:12px 18px;
  box-shadow:var(--schatten);font-size:14px;color:var(--tinte-2);white-space:nowrap}
.markechip b{font-family:var(--display);font-size:26px;font-weight:500;color:var(--wasser);letter-spacing:-.02em}
.markechip:nth-child(2){margin-left:38px}.markechip:nth-child(3){margin-left:12px}
.bildnachweis{position:absolute;right:18px;bottom:12px;font-size:10.5px;color:rgba(255,255,255,.8);letter-spacing:.02em}

/* ---------- Heute ---------- */
.heute{position:relative;margin-top:clamp(40px,6vw,84px)}
.heutekarte{background:linear-gradient(135deg,var(--wasser) 0%, var(--wasser-2) 60%, #1b6c6c 100%);color:#fff;
  border-radius:var(--r-xl);padding:clamp(28px,4vw,52px);position:relative;overflow:hidden;box-shadow:var(--schatten)}
.heutekarte::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(40% 70% at 88% 10%, rgba(242,184,114,.55), transparent 70%),
             radial-gradient(30% 50% at 8% 100%, rgba(255,255,255,.12), transparent 70%)}
.heutekarte>*{position:relative}
.h-kopf{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:baseline}
.h-datum{font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sonne)}
.h-live{font-size:13px;opacity:.75}
.h-satz{font-family:var(--display);font-weight:300;font-size:clamp(28px,3.7vw,50px);line-height:1.08;letter-spacing:-.025em;
  margin:14px 0 0;max-width:19em;font-variation-settings:"SOFT" 100}
.h-satz em{font-style:italic;color:var(--sonne)}
.tagesband{margin-top:38px}
.band{position:relative;height:14px;border-radius:999px;background:rgba(255,255,255,.14);overflow:visible}
.band .fuell{position:absolute;left:0;top:0;bottom:0;border-radius:999px;
  background:linear-gradient(90deg,#7fd1c4,var(--sonne) 72%,var(--glut-2));width:0;transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.band .sperre{position:absolute;right:0;top:0;bottom:0;width:10%;border-radius:0 999px 999px 0;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 4px,transparent 4px 8px)}
.band .jetzt{position:absolute;top:50%;width:26px;height:26px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);
  box-shadow:0 0 0 6px rgba(255,255,255,.22), 0 6px 16px rgba(0,0,0,.3);left:0;transition:left 1.6s cubic-bezier(.2,.8,.2,1)}
.skala{display:flex;justify-content:space-between;font-size:12.5px;opacity:.7;margin-top:12px;font-variant-numeric:tabular-nums}
.h-zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:36px;border-top:1px solid rgba(255,255,255,.18)}
.h-zahl{padding:22px 22px 0 0}
.h-zahl+.h-zahl{padding-left:22px;border-left:1px solid rgba(255,255,255,.18)}
.h-zahl .w{font-family:var(--display);font-size:clamp(26px,2.6vw,36px);font-weight:400;letter-spacing:-.02em;line-height:1.1}
.h-zahl .e{font-size:13px;opacity:.72;margin-top:6px}

/* ---------- Abschnitte ---------- */
section{padding-top:clamp(70px,9vw,130px)}
.auftakt{font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--glut);margin:0 0 14px}
h2{font-family:var(--display);font-weight:350;font-size:clamp(34px,4.4vw,60px);line-height:1.02;letter-spacing:-.03em;margin:0;
  color:var(--wasser);font-variation-settings:"SOFT" 100}
h2 em{font-style:italic;font-weight:300;color:var(--glut)}
.unter{font-size:18.5px;color:var(--tinte-2);max-width:36em;margin:20px 0 0}

/* Dein Tag */
.tag{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px}
.moment{position:relative;border-radius:var(--r-l);padding:26px 24px 28px;min-height:330px;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;color:#fff;isolation:isolate;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.moment:hover{transform:translateY(-8px)}
.moment::before{content:"";position:absolute;inset:0;z-index:-2}
.moment::after{content:"";position:absolute;z-index:-1;width:150%;aspect-ratio:1;border-radius:50%;left:-25%;top:-72%;
  filter:blur(8px);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.moment:hover::after{transform:translateY(7%) scale(1.04)}
.m1::before{background:linear-gradient(180deg,#8fd0cb,#2f8d8c 70%,#1b6c6c)}
.m1::after{background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,0) 72%)}
.m2::before{background:linear-gradient(180deg,#f4c689,#e08a55 62%,#b9542f)}
.m2::after{background:radial-gradient(closest-side,rgba(255,240,205,.95),rgba(255,240,205,0) 70%)}
.m3::before{background:linear-gradient(180deg,#f2b872 0%,#d8734a 40%,#73384a 78%,#2d2a45)}
.m3::after{background:radial-gradient(closest-side,rgba(255,214,150,1),rgba(255,214,150,0) 66%);top:-58%}
.m4::before{background:linear-gradient(180deg,#16283f,#0f3a3d 60%,#0a2729)}
.m4::after{background:radial-gradient(closest-side,rgba(180,215,230,.5),rgba(180,215,230,0) 68%);width:70%;left:48%;top:-20%}
.m-zeit{font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.moment h3{font-family:var(--display);font-weight:400;font-size:27px;line-height:1.1;letter-spacing:-.02em;margin:8px 0 10px;
  font-variation-settings:"SOFT" 100}
.moment p{margin:0;font-size:15.5px;line-height:1.5;opacity:.93}
.sterne{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(1.4px 1.4px at 22% 18%,#fff,transparent),
  radial-gradient(1px 1px at 68% 10%,#fff,transparent),radial-gradient(1.2px 1.2px at 40% 32%,#fff,transparent),
  radial-gradient(1px 1px at 84% 28%,#fff,transparent),radial-gradient(1.3px 1.3px at 12% 40%,#fff,transparent);opacity:.8}

/* Rechner */
.rechner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:0;margin-top:52px;background:#fff;
  border-radius:var(--r-xl);box-shadow:var(--schatten);overflow:hidden}
.r-wahl{padding:clamp(26px,3.4vw,46px)}
.r-gruppe+.r-gruppe{margin-top:30px}
.r-titel{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tinte-3);margin:0 0 12px}
.segment{display:flex;background:var(--creme);border-radius:999px;padding:5px;gap:4px}
.segment button{flex:1;border:0;background:transparent;font:600 15.5px/1 var(--text);color:var(--tinte-2);padding:14px 10px;
  border-radius:999px;cursor:pointer;transition:.3s}
.segment button[aria-pressed=true]{background:var(--wasser);color:#fff;box-shadow:0 10px 20px -12px rgba(15,58,61,.9)}
.segment button:not([aria-pressed=true]):hover{background:rgba(255,255,255,.8)}
.zaehler{display:flex;align-items:center;gap:18px}
.zaehler button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--linie);background:#fff;font-size:24px;
  color:var(--wasser);cursor:pointer;transition:.25s;line-height:1}
.zaehler button:hover{background:var(--wasser);color:#fff;border-color:var(--wasser)}
.zaehler output{font-family:var(--display);font-size:40px;min-width:1.4em;text-align:center;color:var(--wasser);letter-spacing:-.02em}
.zaehler small{font-size:14.5px;color:var(--tinte-3)}
.schalter{display:flex;align-items:center;gap:14px;cursor:pointer;font-size:15.5px;color:var(--tinte-2);user-select:none}
.schalter input{appearance:none;width:50px;height:30px;border-radius:999px;background:var(--creme-2);position:relative;
  cursor:pointer;transition:.3s;flex:none;margin:0}
.schalter input::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.25);transition:.3s}
.schalter input:checked{background:var(--wasser-3)}.schalter input:checked::after{left:23px}
.r-summe{background:linear-gradient(160deg,var(--sonne-hell),#f7cf9d 60%,var(--sonne));padding:clamp(26px,3.4vw,46px);
  display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.r-summe::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-120px;top:-130px;
  background:radial-gradient(closest-side,rgba(255,255,255,.75),transparent)}
.r-summe>*{position:relative}
.s-label{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8a4a22}
.s-betrag{font-family:var(--display);font-weight:400;font-size:clamp(58px,7vw,96px);line-height:1;letter-spacing:-.04em;
  color:#3d2413;margin:10px 0 6px;font-variation-settings:"SOFT" 100;font-variant-numeric:tabular-nums}
.s-betrag small{font-size:.42em;letter-spacing:-.01em;margin-left:.12em}
.s-zeile{font-size:15.5px;color:#5c3a20}
.s-hinweis{font-size:14.5px;color:#5c3a20;background:rgba(255,255,255,.55);border-radius:var(--r-m);padding:14px 16px;margin-top:26px;line-height:1.45}
.s-hinweis b{color:#3d2413}

/* Gut zu wissen */
.wissen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.w-karte{background:rgba(255,255,255,.72);backdrop-filter:blur(6px);border-radius:var(--r-l);padding:30px 28px;
  border:1px solid rgba(255,255,255,.9);transition:.4s}
.w-karte:hover{background:#fff;transform:translateY(-4px);box-shadow:var(--schatten)}
.w-nr{font-family:var(--display);font-style:italic;font-weight:300;font-size:54px;line-height:1;color:var(--glut-2)}
.w-karte h3{font-family:var(--display);font-weight:450;font-size:23px;letter-spacing:-.015em;line-height:1.15;margin:14px 0 10px;color:var(--wasser)}
.w-karte p{margin:0;font-size:16px;color:var(--tinte-2)}

/* Sauna – Nachtbereich */
.nacht{margin-top:clamp(70px,9vw,130px);background:radial-gradient(90% 120% at 85% 0%, #2a3f57 0%, #0f3a3d 45%, #0a2426 100%);
  color:#fff;border-radius:var(--r-xl);padding:clamp(34px,5vw,80px);position:relative;overflow:hidden}
.nacht::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;left:-180px;bottom:-260px;
  background:radial-gradient(closest-side,rgba(224,138,85,.55),transparent 70%);animation:glimmen 7s ease-in-out infinite alternate}
@keyframes glimmen{to{transform:scale(1.18);opacity:.75}}
.nacht>*{position:relative}
.nacht .auftakt{color:var(--sonne)}.nacht h2{color:#fff}.nacht h2 em{color:var(--sonne)}
.nacht .unter{color:rgba(255,255,255,.75)}
.saunen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);margin-top:48px}
.s-liste{list-style:none;margin:0;padding:0}
.s-liste li{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.s-liste li:first-child{border-top:1px solid rgba(255,255,255,.14)}
.s-liste .n{font-family:var(--display);font-size:22px;font-weight:400;letter-spacing:-.01em}
.s-liste .m{font-size:14.5px;color:rgba(255,255,255,.66);text-align:right}
.s-liste .m b{color:var(--sonne);font-weight:600}
.s-spalte h3{font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:0 0 16px}

/* Lage */
.lage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);margin-top:52px;align-items:stretch}
.karte-svg{border-radius:var(--r-l);overflow:hidden;background:#e4ece4;min-height:340px;box-shadow:var(--schatten)}
.karte-svg svg{width:100%;height:100%;display:block}
.adr{font-family:var(--display);font-size:25px;line-height:1.3;letter-spacing:-.015em;color:var(--wasser);margin:0}
.adr small{display:block;font-family:var(--text);font-size:15.5px;color:var(--tinte-2);letter-spacing:0;margin-top:8px}
.nah{list-style:none;margin:30px 0 0;padding:0}
.nah li{border-top:1px solid var(--linie)}.nah li:last-child{border-bottom:1px solid var(--linie)}
.nah a{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:16px 4px;text-decoration:none;transition:.25s}
.nah a:hover{padding-left:14px;color:var(--glut)}
.nah .n{font-weight:600;font-size:16.5px}.nah .k{font-size:14.5px;color:var(--tinte-3);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Quelle */
.ehrlich{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}
.e-karte{border-radius:var(--r-l);padding:30px 30px 28px}
.e-quelle{background:var(--wasser-hell)}
.e-offen{background:var(--sonne-hell)}
.e-karte h3{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;color:var(--wasser-2)}
.e-offen h3{color:#8a4a22}
.e-karte blockquote{margin:0;font-family:var(--display);font-style:italic;font-weight:300;font-size:21px;line-height:1.4;color:var(--wasser)}
.e-karte p{margin:0;font-size:16px;color:var(--tinte-2)}
.e-fuss{font-size:13.5px;color:var(--tinte-3);margin-top:16px !important}

.fuss{margin-top:clamp(70px,9vw,120px);border-top:1px solid var(--linie);padding:34px 0 40px;font-size:14px;color:var(--tinte-3)}
.fuss .reihe{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:12px}
.fuss a{text-decoration:none}.fuss a:hover{text-decoration:underline}

/* ---------- Haftleiste ---------- */
.leiste{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);z-index:50;width:min(760px,100% - 28px);
  background:rgba(15,58,61,.94);backdrop-filter:blur(14px);color:#fff;border-radius:999px;padding:10px 10px 10px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 24px 50px -18px rgba(10,36,38,.8);
  transition:transform .7s cubic-bezier(.2,.9,.2,1)}
.leiste.da{transform:translate(-50%,0)}
.l-text{font-size:15px;line-height:1.3;min-width:0}
.l-text b{font-family:var(--display);font-size:20px;font-weight:450;letter-spacing:-.01em}
.l-text span{opacity:.72;display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leiste .knopf{background:var(--sonne);color:#3d2413;padding:15px 24px;font-size:15px;white-space:nowrap;flex:none}
.leiste .knopf:hover{background:#ffd29a;transform:none}

/* ---------- Auftritt ---------- */
.auf{opacity:0;transform:translateY(26px);animation:auf 1s cubic-bezier(.2,.8,.2,1) forwards}
.auf.v1{animation-delay:.08s}.auf.v2{animation-delay:.2s}.auf.v3{animation-delay:.32s}.auf.v4{animation-delay:.46s}.auf.v5{animation-delay:.6s}
@keyframes auf{to{opacity:1;transform:none}}
.sicht{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1)}
.sicht.da{opacity:1;transform:none}
.tag .sicht:nth-child(2),.wissen .sicht:nth-child(2){transition-delay:.12s}
.tag .sicht:nth-child(3),.wissen .sicht:nth-child(3){transition-delay:.24s}
.tag .sicht:nth-child(4){transition-delay:.36s}

@media (max-width:980px){
  .buehne .mitte{grid-template-columns:1fr}
  .fenster{justify-self:center;max-width:560px;aspect-ratio:4/4.2;margin-top:10px}
  .marken{left:-6px}
  .tag{grid-template-columns:1fr 1fr}
  .rechner,.lage,.saunen,.ehrlich{grid-template-columns:1fr}
  .wissen{grid-template-columns:1fr}
  .kopfnav{display:none}
}
@media (max-width:600px){
  body{font-size:16px}
  .buehne{padding-top:92px}
  .tag{grid-template-columns:1fr}.moment{min-height:250px}
  .h-zahlen{grid-template-columns:1fr 1fr}
  .h-zahl:nth-child(3){padding-left:0;border-left:0}
  .h-zahl:nth-child(n+3){border-top:1px solid rgba(255,255,255,.18);margin-top:22px}
  .markechip b{font-size:21px}.markechip{padding:9px 14px;font-size:13px}
  .leiste{padding-left:20px}.l-text span{display:none}
  .s-liste li{flex-direction:column;gap:2px}.s-liste .m{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .auf,.sicht{opacity:1;transform:none}
}

/* ---------- Bühne ohne Foto: gemaltes Wasser ---------- */
.wasserbild{position:absolute;inset:0;background:
  radial-gradient(70% 50% at 30% 18%, rgba(242,184,114,.85), transparent 60%),
  linear-gradient(180deg,#f4c689 0%,#e9a873 22%,#3d9a98 46%,#1f7f80 66%,#0f3a3d 100%)}
.wasserbild::before,.wasserbild::after{content:"";position:absolute;left:-30%;right:-30%;height:34%;border-radius:45%;
  background:radial-gradient(closest-side,rgba(255,255,255,.34),transparent);animation:welle 13s ease-in-out infinite alternate}
.wasserbild::before{top:40%}.wasserbild::after{top:58%;animation-duration:17s;animation-delay:-6s;opacity:.7}
@keyframes welle{to{transform:translateX(9%) scaleY(1.25)}}
.wasserbild i{position:absolute;left:50%;top:15%;width:26%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);
  background:radial-gradient(closest-side,#fff6e2,#f7cf9d 60%,transparent 72%);filter:blur(1px)}
.segment.hoch{flex-wrap:wrap;border-radius:26px}.segment.hoch button{flex:1 1 40%;border-radius:20px}
.karte-svg .ortsname{font-family:var(--display)}


/* ---------- Stimmungskarten mit Foto: das Bild trägt, die Farbe der Karte bleibt als Schleier ---------- */
.moment.foto::before{background-image:var(--foto);background-size:cover;background-position:center;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.moment.foto:hover::before{transform:scale(1.06)}
.moment.foto::after{width:auto;aspect-ratio:auto;inset:0;left:0;top:0;border-radius:0;filter:none}
.moment.foto:hover::after{transform:none}
.m1.foto::after{background:linear-gradient(180deg,rgba(31,127,128,.10) 0%,rgba(20,86,90,.55) 52%,rgba(15,58,61,.92) 100%)}
.m2.foto::after{background:linear-gradient(180deg,rgba(201,100,58,.10) 0%,rgba(150,66,34,.55) 52%,rgba(92,36,16,.93) 100%)}
.m3.foto::after{background:linear-gradient(180deg,rgba(242,184,114,.15) 0%,rgba(115,56,74,.6) 55%,rgba(45,42,69,.94) 100%)}
.m4.foto::after{background:linear-gradient(180deg,rgba(22,40,63,.2) 0%,rgba(15,58,61,.7) 55%,rgba(10,39,41,.95) 100%)}

/* ---------- Startseite ---------- */
body.start{padding-bottom:0}
.st-buehne{position:relative;z-index:5;min-height:min(86vh,780px);display:flex;align-items:flex-end;color:#fff;
  border-radius:0 0 var(--r-xl) var(--r-xl);background:var(--wasser)}
.st-hinten{position:absolute;inset:0;overflow:hidden;border-radius:0 0 var(--r-xl) var(--r-xl)}
.st-hinten>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 60%;
  transform:scale(1.05);animation:zoom 30s ease-in-out infinite alternate}
.st-hinten::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,39,41,.62) 0%,rgba(10,39,41,.12) 20%,rgba(15,58,61,.18) 42%,rgba(10,39,41,.9) 100%),
             linear-gradient(90deg,rgba(10,39,41,.55),transparent 65%)}
.st-buehne .dampf{z-index:1}
.st-inhalt{position:relative;z-index:2;padding-block:150px clamp(40px,6vw,80px)}
body.start .kopf .marke,body.start .kopfnav a{color:#fff}
body.start .kopfnav a:hover{background:rgba(255,255,255,.18);color:#fff}
body.start .marke i{color:var(--sonne)}
.st-inhalt .ort{color:var(--sonne)}
.st-inhalt h1{color:#fff;font-size:clamp(42px,6vw,84px)}
.st-inhalt h1 em{color:var(--sonne)}
.st-inhalt .lead{color:rgba(255,255,255,.88);max-width:36em}.st-inhalt .lead b{color:#fff}
.st-suche{position:relative;margin-top:34px;max-width:560px}
.st-suche svg{position:absolute;left:22px;top:21px;width:22px;height:22px;color:var(--tinte-3);pointer-events:none}
.st-suche input{width:100%;font:500 18px/1 var(--text);padding:22px 24px 22px 58px;border-radius:999px;border:0;outline:0;
  background:#fff;color:var(--tinte);box-shadow:0 24px 50px -20px rgba(0,0,0,.6)}
.st-suche input:focus{box-shadow:0 0 0 4px rgba(242,184,114,.6),0 24px 50px -20px rgba(0,0,0,.6)}
.st-treffer{position:absolute;left:0;right:0;top:calc(100% + 10px);max-height:min(60vh,520px);overflow-y:auto;margin:0;padding:8px;list-style:none;background:#fff;
  border-radius:22px;box-shadow:var(--schatten);z-index:5;color:var(--tinte)}
.st-treffer a,.st-treffer .bald{display:flex;justify-content:space-between;gap:14px;padding:13px 16px;border-radius:14px;text-decoration:none;font-size:16px}
.st-treffer a:hover{background:var(--creme)}
.st-treffer span span{color:var(--tinte-3);font-size:14px}.st-treffer .bald b{color:var(--tinte-3);font-weight:500}

.st-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:48px}
.st-karte{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-l);overflow:hidden;text-decoration:none;
  box-shadow:0 1px 2px rgba(15,58,61,.06);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.st-karte:hover{transform:translateY(-8px);box-shadow:var(--schatten)}
.st-bild{aspect-ratio:4/3;background-size:cover;background-color:var(--wasser-2);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.st-karte:hover .st-bild{transform:scale(1.05)}
.st-text{padding:20px 22px 24px;position:relative;background:#fff}
.st-status{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--tinte-2)}
.st-status .puls{position:relative;width:8px;height:8px;border-radius:50%;background:#3fae6a}
.st-status.zu .puls{background:var(--glut)}
.st-karte h3{font-family:var(--display);font-weight:450;font-size:25px;letter-spacing:-.02em;line-height:1.1;margin:10px 0 4px;color:var(--wasser)}
.st-ort{margin:0;font-size:14.5px;color:var(--tinte-3)}
.st-preis{margin:16px 0 0;font-size:15px;color:var(--tinte-2)}
.st-preis b{font-family:var(--display);font-size:24px;font-weight:450;color:var(--glut);letter-spacing:-.02em}
.st-preis span{color:var(--tinte-3);font-size:13.5px}
.st-laender{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.st-land{background:rgba(255,255,255,.75);border-radius:999px;padding:10px 18px;font-size:15px;color:var(--tinte-2)}
.st-land b{font-family:var(--display);font-size:18px;color:var(--wasser);margin-right:4px}
@media (max-width:600px){.st-inhalt{padding-top:120px}.st-suche input{font-size:16px;padding:19px 20px 19px 52px}.st-suche svg{left:19px;top:18px}}

/* ---------- Unterseiten (Länder, Themen, Methode, Recht) ---------- */
body.unterseite{padding-bottom:0}
.u-kopf{padding-top:128px}
.u-kopf h1{font-size:clamp(40px,5.4vw,76px)}
.u-kopf .lead{max-width:40em}
.u-liste{list-style:none;margin:40px 0 0;padding:0;columns:2;column-gap:48px}
.u-liste li{break-inside:avoid;border-bottom:1px solid var(--linie)}
.u-liste li>a,.u-liste li>span{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:14px 4px;text-decoration:none;transition:.25s}
.u-liste li>a:hover{padding-left:14px;color:var(--glut)}
.u-liste .n{font-weight:600;font-size:16.5px}.u-liste li>span .n{font-weight:500;color:var(--tinte-2)}
.u-liste .k{font-size:14px;color:var(--tinte-3);white-space:nowrap;text-align:right}
.u-text{max-width:44em;font-size:17.5px;color:var(--tinte-2);margin-top:26px}
.u-text h3{font-family:var(--display);font-weight:450;font-size:25px;letter-spacing:-.015em;color:var(--wasser);margin:38px 0 10px}
.u-text p{margin:0 0 16px}.u-text ul{margin:0 0 16px;padding-left:22px}.u-text li{margin-bottom:8px}
.u-text a{color:var(--wasser-2)}
a.st-land{text-decoration:none;transition:.25s}a.st-land:hover{background:#fff;transform:translateY(-2px)}
.st-notiz{margin:12px 0 0;font-size:14.5px;color:var(--tinte-2);line-height:1.45}
@media (max-width:760px){.u-liste{columns:1}.u-kopf{padding-top:100px}}

.nah .nah-bald{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:16px 4px}
.nah .nah-bald .n{font-weight:500;color:var(--tinte-2)}

/* ---------- Suchbegriffe in den Überschriften, Tabellen, Fragen (SEO-Ausbau 09/2026) ---------- */
.h1-kw{display:block;font-family:var(--text);font-size:clamp(16px,1.5vw,19px);font-weight:600;letter-spacing:.01em;line-height:1.3;color:var(--wasser-2);margin-top:18px}
h2 .kw{display:block;font-family:var(--text);font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1.4;color:var(--glut);margin:0 0 14px}
.nacht h2 .kw{color:var(--sonne)}
.tabellen{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin-top:22px;align-items:start}
.t-block{background:rgba(255,255,255,.72);backdrop-filter:blur(6px);border-radius:var(--r-l);padding:30px 30px 26px}
.t-block h3{font-family:var(--display);font-weight:450;font-size:24px;letter-spacing:-.015em;line-height:1.15;margin:0 0 6px;color:var(--wasser)}
.tabelle{width:100%;border-collapse:collapse;margin-top:20px;font-size:16px}
.tabelle caption{text-align:left;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wasser-2);padding-bottom:8px}
.tabelle caption small{display:block;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--tinte-3);font-size:13.5px;margin-top:3px}
.tabelle th,.tabelle td{padding:10px 0;border-top:1px solid var(--linie);text-align:left;vertical-align:top}
.tabelle thead th{border-top:0;font-size:13px;font-weight:600;color:var(--tinte-3);padding-bottom:6px}
.tabelle tbody th{font-weight:500;color:var(--tinte);padding-right:14px}
.tabelle tbody th small{display:block;font-weight:400;color:var(--tinte-3);font-size:13.5px}
.tabelle td{font-family:var(--display);font-size:18px;color:var(--wasser);text-align:right;padding-left:12px}
.tabelle.preis td{white-space:nowrap}
.t-block{min-width:0}
.tabelle thead th:not(:first-child){text-align:right;padding-left:12px}
.t-fuss{font-size:14px;color:var(--tinte-3);margin:16px 0 0}
.sparliste{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px;font-size:15.5px;color:var(--tinte-2)}
.sparliste b{display:block;color:var(--wasser);font-weight:600}
.fragen{display:grid;gap:12px;margin-top:44px;max-width:900px}
.frage{background:rgba(255,255,255,.72);backdrop-filter:blur(6px);border-radius:var(--r-m);padding:0 26px;transition:background .3s}
.frage[open]{background:#fff;box-shadow:var(--schatten)}
.frage summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 0}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"+";font-family:var(--display);font-size:28px;line-height:1;color:var(--glut);transition:transform .3s}
.frage[open] summary::after{transform:rotate(45deg)}
.frage h3{font-family:var(--display);font-weight:450;font-size:20px;letter-spacing:-.01em;line-height:1.25;margin:0;color:var(--wasser)}
.frage p{margin:0;padding:0 0 22px;font-size:16.5px;color:var(--tinte-2);max-width:46em}
@media (max-width:900px){.tabellen{grid-template-columns:1fr}.t-block{padding:24px 20px}.tabelle td{font-size:16.5px}.frage{padding:0 20px}.frage h3{font-size:18px}}

.vertiefung{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px;align-items:start}
.vertiefung>.t-block:only-child{grid-column:1/-1;max-width:900px}
.v-text{font-size:16.5px;color:var(--tinte-2);margin:12px 0 0}
.v-text b,.w-karte p b,.anreise b{color:var(--wasser);font-weight:600}
.wissen.rund{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.wissen.rund .w-karte h3{margin-top:0}
.w-karte p+p{margin-top:12px}
.w-karte a,.t-fuss a,.anreise a{color:var(--wasser-2);text-underline-offset:3px}
.w-quelle{font-size:13.5px!important;color:var(--tinte-3)!important}
.w-liste{list-style:none;margin:14px 0 0;padding:0;font-size:15.5px;color:var(--tinte-2)}
.w-liste li{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-top:1px solid var(--linie)}
.w-liste b{font-family:var(--display);font-weight:400;color:var(--wasser);white-space:nowrap}
.anreise{margin-top:18px;font-size:15.5px;color:var(--tinte-2)}.anreise p{margin:0 0 10px}
@media (max-width:900px){.vertiefung{grid-template-columns:1fr}}

.u-text:has(.vergleich){max-width:none}
.tabelle.vergleich{background:rgba(255,255,255,.72);border-radius:var(--r-l);border-collapse:separate;border-spacing:0;overflow:hidden;margin-top:10px}
.tabelle.vergleich th,.tabelle.vergleich td{padding:16px 22px;text-align:left;white-space:normal;font-family:var(--text);font-size:16px;color:var(--tinte-2)}
.tabelle.vergleich thead th{font-family:var(--display);font-size:21px;font-weight:450;color:var(--wasser);padding-top:24px}
.tabelle.vergleich thead th:not(:first-child){text-align:left;padding-left:22px}
.tabelle.vergleich thead a{text-decoration:none;color:inherit}.tabelle.vergleich thead a:hover{color:var(--glut)}
.tabelle.vergleich tbody th{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--wasser-2);width:22%}
@media (max-width:700px){.tabelle.vergleich th,.tabelle.vergleich td{padding:12px 10px;font-size:14.5px}.tabelle.vergleich thead th{font-size:17px}.tabelle.vergleich tbody th{font-size:11px;letter-spacing:.04em}}
.vertiefung .tabelle td{white-space:nowrap;width:1%}