/* Gastgefühl. Neubau 11.10.2026 nach KONZEPT 2 (27_gastgefuehl/fortschritt.md).
   Mechanik aus der Physio-Vorlage (physiotherapie-luxus), Look: Schwarz-Weiß ohne Farbakzent,
   nur Archivo (weit, enge Laufweite), Bilder in Farbe. Alles lokal, kein CDN. */
@font-face{font-family:"Archivo";src:url(fonts/archivo-var.woff2) format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  --nacht:oklch(14.5% 0 0);
  --nacht2:oklch(19% 0 0);
  --hell:oklch(98% 0 0);
  --weiss:oklch(96.5% 0 0);
  --dunkel:oklch(19% 0 0);
  --fg:var(--weiss);
  --mut:oklch(72% 0 0);
  --linie:oklch(31% 0 0);
  --rand:clamp(20px,3vw,48px);
  --out:cubic-bezier(.25,1,.5,1);
}
body.hell{--fg:var(--dunkel);--mut:oklch(40% 0 0);--linie:oklch(85% 0 0)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--nacht)}
body{font-family:"Archivo",system-ui,sans-serif;font-stretch:105%;font-weight:400;color:var(--fg);
  font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip;transition:color .35s linear}
main p,main h2,main h3,main dd,main dt,main li,.fuss{transition:color .35s linear,border-color .35s linear}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em{font-style:normal}
h1,h2,h3,.anzeige{font-family:"Archivo",system-ui,sans-serif;font-stretch:125%;font-weight:500;letter-spacing:-.06em;line-height:.98}
h3{letter-spacing:-.045em;line-height:1.08}
h1,h2,h3,.finale__claim,.ziel__text b{text-wrap:balance}
/* Masken der Zeilen etwas höher, damit Umlaute und Unterlängen nicht abgeschnitten werden */
.zeile-mask,.line-mask{padding:.12em 0 .1em;margin:-.12em 0 -.1em}

/* Erst wenn JS da ist, wird versteckt. Ohne JS (oder bei reduzierter Bewegung) bleibt alles lesbar. */
.js [data-reveal],.js [data-maske],.js [data-highlight],.js [data-woerter],.js [data-staffel]>*,.js .hero__titel{visibility:hidden}
.ohne-js [data-reveal],.ohne-js [data-maske],.ohne-js [data-highlight],.ohne-js [data-woerter],.ohne-js [data-staffel]>*,.ohne-js .hero__titel{visibility:visible}

/* ---------- 0 Ladebild ---------- */
.loader{display:none}
.js .loader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;pointer-events:none}
/* Lider: eine dunkle Fläche, deren elliptisches Loch (--ry) sich von einem Strich in der Mitte aus öffnet */
.loader__lid{position:absolute;inset:0;background:oklch(11% 0 0);--rx:70vw;--ry:0px;
  -webkit-mask:radial-gradient(ellipse var(--rx) var(--ry) at 50% 50%,transparent 72%,#000 100%);
          mask:radial-gradient(ellipse var(--rx) var(--ry) at 50% 50%,transparent 72%,#000 100%)}
.ohne-js .loader{display:none}
.loader__noise,.buehne__noise{position:absolute;inset:0;opacity:.14;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
.loader__text{position:relative;text-align:center;padding:0 var(--rand)}
/* im Schriftbild des Logos, damit es beim Öffnen nahtlos zum Logo werden kann */
.loader__kicker{display:table;margin:0 auto;font-stretch:125%;font-weight:500;font-size:26px;letter-spacing:-.06em;will-change:transform,filter}
.nur-leser{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.loader__claim{font-stretch:125%;font-weight:500;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.04em;margin-top:8px}

/* ---------- Kopf und CTA ---------- */
.kopf{position:fixed;inset:0 0 auto;z-index:90;display:flex;justify-content:center;align-items:center;
  padding:22px var(--rand);pointer-events:none;color:#fff;mix-blend-mode:difference;
  transition:transform .7s var(--out),opacity .5s var(--out)}
.kopf a{pointer-events:auto}
.kopf-schleier{position:fixed;inset:0 0 auto;height:104px;z-index:85;pointer-events:none;opacity:0;
  background:linear-gradient(var(--nacht) 35%,oklch(14.5% 0 0 / 0));transition:opacity .5s var(--out)}
.kopf-schleier.an,.ohne-js .kopf-schleier{opacity:1}
body.hell .kopf-schleier{background:linear-gradient(var(--hell) 35%,oklch(98% 0 0 / 0))}
.kopf__logo{font-stretch:125%;font-weight:500;font-size:26px;letter-spacing:-.06em;will-change:transform}
.kopf__kontakt{position:absolute;right:var(--rand);font-size:16px}
.cta{position:fixed;left:50%;bottom:26px;z-index:90;display:flex;align-items:center;gap:6px;will-change:transform;
  transition:opacity .5s var(--out),visibility .5s,filter .5s var(--out)}
.cta.weg{opacity:0;visibility:hidden;filter:blur(12px);pointer-events:none}
.cta__label{display:grid;overflow:hidden;background:var(--weiss);color:var(--dunkel);border-radius:99px;
  padding:15px 28px;font-size:17px;font-weight:550;line-height:1.2;transition:background .35s,color .35s}
.cta__t{grid-area:1/1;white-space:nowrap}
.cta__pfeil{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--weiss);
  color:var(--dunkel);font-size:18px;transition:background .35s,color .35s}
body.hell .cta__label,body.hell .cta__pfeil{background:var(--dunkel);color:var(--weiss)}

/* ---------- Die Bühne ---------- */
.buehne{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--nacht)}
.bg{position:absolute;inset:-96px;opacity:0}
.bg--glut{background:radial-gradient(70vw 70vh at 50% 55%,oklch(24% 0 0),var(--nacht) 70%)}
.bg--hell{background:var(--hell);transition:opacity .35s linear}
body.hell .bg--hell{opacity:1}

/* ---------- 1 Hero ---------- */
.hero{position:relative}
.hero__stage{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden}
.hero__bg{position:absolute;inset:0;will-change:transform}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero__schleier{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 60% 55%,transparent 30%,oklch(8% 0 0 / .6)),
    linear-gradient(100deg,oklch(8% 0 0 / .72) 0%,oklch(8% 0 0 / .35) 40%,transparent 62%),
    linear-gradient(to top,oklch(8% 0 0 / .7),transparent 40%)}
.hero__titel{position:absolute;z-index:3;inset:0;pointer-events:none;font-size:clamp(44px,5.8vw,112px);
  text-shadow:0 0 70px oklch(8% 0 0 / .65)}
.hero__titel span{display:block;position:absolute;will-change:transform,filter}
.hero__z2{left:var(--rand);top:14vh;transform-origin:0 50%}
.hero__unten{position:absolute;z-index:3;left:var(--rand);bottom:max(11vh,96px);max-width:min(44ch,46vw)}
.hero__slogan{font-stretch:125%;font-weight:500;font-size:clamp(17px,1.45vw,24px);letter-spacing:-.03em;line-height:1.25}
.hero__intro{margin-top:16px;font-size:19.5px;line-height:1.55;color:oklch(86% 0 0);text-shadow:0 0 30px oklch(8% 0 0)}
.hero__hint{position:absolute;z-index:3;right:var(--rand);bottom:max(11vh,96px);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:oklch(80% 0 0)}

/* ---------- 2 These ---------- */
.these{position:relative;padding:12vh var(--rand) 16vh}
.these__satz{font-size:clamp(34px,4.6vw,86px);line-height:1.02;max-width:17ch}
.these__spalten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,72px);margin:18vh 0 0 auto;max-width:1240px}
.these__spalten>div{border-top:1px solid var(--linie);padding-top:28px}
.these__spalten h3{font-size:clamp(25px,2.1vw,36px);margin-bottom:16px}
.these__spalten p{font-size:17.5px;color:var(--mut);max-width:32ch}

/* ---------- 2b Atempause ---------- */
.pause{position:relative;height:120vh;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent)}
.pause__bild{position:absolute;inset:-18% 0;background:url(img/hero_hotel.webp?v=1021) 0% 44%/225% auto no-repeat;will-change:transform}

/* ---------- 3 Mein Blick ---------- */
.blick{position:relative;padding:16vh var(--rand) 24vh;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:6vw;align-items:end}
.blick__titel{font-size:clamp(38px,5.2vw,98px)}
.blick__titel span{display:block;will-change:filter,transform}
.blick__titel span+span{color:var(--mut)}
.blick__text p{font-size:19.5px;color:var(--mut);max-width:42ch}
.blick__text p+p{margin-top:22px;color:var(--fg)}
.rad{grid-column:1/-1;display:flex;align-items:center;gap:28px;font-stretch:125%;font-weight:500;letter-spacing:-.05em;
  font-size:clamp(30px,3.4vw,62px);height:4.2em;overflow:hidden;margin-top:12vh;
  -webkit-mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent)}
.rad__vor{font-stretch:105%;font-size:14px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.rad__pfeil{font-stretch:100%}
.rad__liste{list-style:none;align-self:flex-start;will-change:transform}
.rad__liste li{height:1.4em;line-height:1.4em;color:var(--mut);opacity:.35;white-space:nowrap;transition:opacity .5s var(--out),color .5s}
.rad__liste li.jetzt{color:var(--fg);opacity:1}

/* ---------- 4 Worauf ich achte (Grundform: gestapelt, gilt mobil und ohne Bewegung) ---------- */
.achte{position:relative;padding:10vh var(--rand) 14vh}
.achte__titel{font-size:clamp(38px,5.4vw,104px);margin-bottom:9vh}
.achte__titel span{display:block}
.stationen{list-style:none;display:grid;gap:clamp(72px,10vh,120px)}
.station{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr);gap:5vw;align-items:center}
.station__bild{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:var(--nacht2);container-type:inline-size;--w:1}
.station__bild>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.station__text h3{font-size:clamp(30px,2.9vw,52px)}
.station__text p{margin-top:18px;font-size:19px;color:var(--mut);max-width:34ch}
.station__zeit{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--mut);margin-bottom:12px;font-variant-numeric:tabular-nums}
.station__text .station__zeit{margin-top:0;font-size:13px;max-width:none}
.achte__licht,.achte__zeit,.achte__nr,.grundriss,.grundriss__scan{display:none}

/* Szene der ersten Station: Suchergebnis, Sterne, Buchungsmaske, nur aus HTML und CSS, schwarz-weiß */
.szene{position:absolute;inset:0;padding:7cqw 7cqw;display:flex;flex-direction:column;gap:3cqw;justify-content:center;
  background:radial-gradient(90% 80% at 70% 20%,oklch(27% 0 0),oklch(15% 0 0));color:var(--weiss);font-size:2.3cqw;line-height:1.3}
.szene__suche{display:flex;align-items:center;gap:2cqw;background:oklch(96% 0 0);color:oklch(22% 0 0);border-radius:99px;padding:2cqw 3.4cqw;font-size:2.6cqw}
.szene__lupe{width:2.6cqw;height:2.6cqw;border:.5cqw solid oklch(40% 0 0);border-radius:50%;flex:none}
.szene__cursor{width:.3cqw;height:3cqw;background:oklch(22% 0 0);margin-left:-1cqw;animation:blinken 1.1s steps(1) infinite}
@keyframes blinken{50%{opacity:0}}
.szene__treffer{display:grid;grid-template-columns:24cqw 1fr;gap:3.4cqw;align-items:center;padding:3cqw;border:1px solid oklch(34% 0 0);border-radius:1.4cqw;background:oklch(18% 0 0 / .7)}
.szene__foto{aspect-ratio:4/3;border-radius:1cqw;background:url(img/hero_hotel.webp?v=1021) 62% 60%/cover;filter:grayscale(1) contrast(1.05)}
.szene__info{display:grid;gap:1.6cqw}
.szene__info b{font-stretch:125%;font-weight:500;letter-spacing:-.04em;font-size:3.6cqw;line-height:1}
.sterne{display:flex;gap:.9cqw}
.sterne i{width:3.4cqw;height:3.4cqw;background:oklch(36% 0 0);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.sterne i.an{background:var(--weiss)}
.szene__balken{display:block;height:1.4cqw;width:80%;border-radius:99px;background:oklch(34% 0 0)}
.szene__balken--kurz{width:52%}
.szene__buchung{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:1.6cqw;align-items:stretch}
.szene__feld{display:grid;gap:1.2cqw;border:1px solid oklch(34% 0 0);border-radius:1.2cqw;padding:1.8cqw 2.2cqw;font-size:1.9cqw;color:oklch(72% 0 0)}
.szene__feld .szene__balken{width:70%;height:1.2cqw;background:oklch(46% 0 0)}
.szene__knopf{display:grid;place-items:center;background:var(--weiss);color:var(--dunkel);border-radius:99px;padding:0 3.4cqw;font-weight:600;font-size:2.1cqw;white-space:nowrap}

/* ---------- 5 Das Ziel ---------- */
.ziel{position:relative}
.ziel__stage{position:relative;min-height:100vh;overflow:hidden;display:grid;place-items:center;padding:16vh var(--rand);
  -webkit-mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent)}
.ziel__bg{position:absolute;inset:-12% 0;will-change:transform}
.ziel__bg img{width:100%;height:100%;object-fit:cover}
.ziel__schleier{position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 50%,oklch(8% 0 0 / .62),oklch(8% 0 0 / .9))}
.ziel__innen{position:relative;z-index:2;text-align:center;display:grid;justify-items:center}
.ziel__satz{font-size:clamp(40px,5.8vw,112px);max-width:15ch;line-height:1;will-change:transform}
.ziel__satz .wort{display:inline-block;will-change:transform,opacity}
.ziel__text{margin-top:6vh;font-size:clamp(19px,1.45vw,23px);line-height:1.6;max-width:44ch;color:oklch(84% 0 0)}
.ziel__text b{display:block;margin-top:14px;line-height:1.3;font-weight:500;font-stretch:125%;letter-spacing:-.03em;color:var(--weiss);font-size:1.15em}

/* ---------- 6 Was es Ihrem Haus bringt ---------- */
.bringt{position:relative;padding:24vh var(--rand) 18vh}
.bringt__titel span{display:block}
.bringt__klein{font-size:clamp(26px,2.6vw,46px);letter-spacing:-.05em;color:var(--mut)}
.bringt__gross{font-size:clamp(52px,8.4vw,164px);line-height:.95;margin-top:.12em;transform-origin:0 70%}
.bringt__intro{margin-top:5vh;font-size:19.5px;color:var(--mut);max-width:40ch}
.bringt__inhalt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:6vw;margin-top:14vh;align-items:start}
.bringt__bild{position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--nacht2)}
.bringt__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;will-change:transform}
.nutzen{list-style:none;border-top:1px solid var(--linie)}
.nutzen li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:32px;padding:clamp(28px,4.4vh,48px) 0;border-bottom:1px solid var(--linie);align-items:baseline}
.nutzen h3{font-size:clamp(25px,2.2vw,38px)}
.nutzen p{color:var(--mut);font-size:17.5px}

/* ---------- 7 Was Sie bekommen (hell) ---------- */
.bekommen{position:relative;padding:26vh var(--rand) 26vh;min-height:100vh;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:7vw;align-items:start}
.bekommen__titel{font-size:clamp(36px,4.4vw,84px);max-width:13ch}
.bekommen__text{padding-top:1.2vw}
.bekommen__text p{font-size:19.5px;line-height:1.7;color:var(--mut);max-width:44ch}
.bekommen__vertraulich{margin-top:44px;padding-left:24px;border-left:2px solid var(--fg);color:var(--fg)!important}

/* ---------- 8 Bericht-Blatt ---------- */
.bericht{position:relative;padding:20vh var(--rand) 22vh}
.bericht__kopf{display:flex;justify-content:space-between;align-items:end;gap:6vw;flex-wrap:wrap}
.bericht__kopf h2{font-size:clamp(36px,4.4vw,84px);max-width:14ch}
.bericht__kopf p{font-size:19.5px;color:var(--mut);max-width:30ch}
.blatt__raum{perspective:1800px;margin-top:10vh}
.blatt{position:relative;margin:0 auto;max-width:1080px;background:var(--hell);color:var(--dunkel);border-radius:4px;
  padding:clamp(24px,4.4vw,72px);box-shadow:0 70px 140px -50px oklch(4% 0 0 / .9);transform-origin:50% 0;will-change:transform}
.blatt__kopf{display:flex;justify-content:space-between;gap:24px;align-items:center;border-bottom:1px solid oklch(85% 0 0);padding-bottom:26px}
.blatt__marke{font-stretch:125%;font-weight:500;letter-spacing:-.05em;font-size:clamp(24px,2.2vw,34px);color:var(--dunkel)!important}
.stempel{border:1.5px solid var(--dunkel);color:var(--dunkel)!important;padding:7px 16px;border-radius:3px;font-size:15px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.beob{padding:36px 0;border-bottom:1px solid oklch(85% 0 0)}
.beob:last-of-type{border-bottom:0;padding-bottom:0}
.beob h3{font-size:clamp(24px,2.1vw,34px);display:flex;gap:10px 18px;align-items:baseline;flex-wrap:wrap;color:var(--dunkel)!important}
.beob h3 em{font-stretch:105%;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:oklch(42% 0 0)}
.beob dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 36px;margin-top:22px}
.beob dt{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:oklch(42% 0 0)!important}
.beob dd{font-size:17.5px;color:var(--dunkel)!important;line-height:1.55;margin-top:6px}

/* ---------- 9 Finale ---------- */
.finale{position:relative}
.finale__stage{position:relative;height:100vh;min-height:720px;overflow:hidden}
.finale__wort{position:absolute;left:50%;top:15vh;transform:translateX(-50%);font-stretch:125%;font-weight:500;font-size:14vw;line-height:.9;
  letter-spacing:-.07em;white-space:nowrap;color:oklch(90% 0 0)}
.ring{position:absolute;left:50%;top:39vh;width:min(30vw,440px,46vh);aspect-ratio:1;margin-left:calc(min(30vw,440px,46vh) / -2);will-change:transform}
.ring svg{position:relative;width:100%;height:100%;overflow:visible}
.klingel{position:absolute;z-index:2;left:23%;top:20%;width:58%;height:auto;will-change:transform;
  filter:drop-shadow(0 30px 40px oklch(0% 0 0 / .7)) drop-shadow(0 0 60px oklch(80% .08 85 / .18))}
/* Text füllt den Kreis aus eigener Länge, Safari ignoriert textLength auf textPath */
.ring text{font-family:"Archivo",sans-serif;font-stretch:110%;font-size:11px;letter-spacing:.35em;text-transform:uppercase;font-weight:600;fill:var(--weiss)}
.ring circle{fill:none;stroke:var(--weiss);stroke-width:.6px;opacity:.45}
.finale__unten{position:absolute;left:var(--rand);right:var(--rand);bottom:max(9vh,72px);display:flex;justify-content:space-between;align-items:end;gap:40px}
.finale__claim{font-stretch:125%;font-weight:500;letter-spacing:-.05em;font-size:clamp(24px,2.2vw,38px);line-height:1.08;max-width:min(14ch,30vw)}
.finale__link{font-size:19px;border-bottom:1px solid currentColor;padding-bottom:4px;white-space:nowrap}

/* ---------- 10 Kontakt und Fuß ---------- */
.kontakt{position:relative;padding:16vh var(--rand) 14vh}
.kontakt__innen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:8vw;align-items:start}
.kontakt h2{font-size:clamp(36px,4.4vw,84px);max-width:12ch}
.kontakt__intro{margin-top:28px;font-size:19.5px;color:var(--mut);max-width:36ch}
.kontakt__zeilen{margin-top:40px;display:grid;gap:8px;font-size:19px}
.kontakt__zeilen span{color:var(--mut);font-size:16px;margin-top:10px;max-width:36ch}
.formular{display:grid;gap:26px}
.formular label{display:grid;gap:6px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--mut)}
.formular input[type=text],.formular input[type=email],.formular textarea{font:inherit;font-size:18px;letter-spacing:0;text-transform:none;font-weight:400;
  color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--linie);padding:10px 0;border-radius:0;width:100%}
.formular textarea{min-height:130px;resize:vertical}
.formular input:focus,.formular textarea:focus{outline:0;border-bottom-color:var(--fg)}
.formular .check{display:flex;gap:12px;align-items:flex-start;text-transform:none;letter-spacing:0;font-size:16px;font-weight:400;line-height:1.5}
.formular .check input{margin-top:5px;accent-color:var(--weiss);flex:none;width:18px;height:18px}
.formular .check a{color:var(--fg);border-bottom:1px solid var(--linie)}
.formular button{justify-self:start;background:var(--weiss);color:var(--dunkel);border-radius:99px;padding:16px 34px;font-size:17px;font-weight:600;min-height:52px;
  transition:background .4s var(--out),transform .4s var(--out)}
.formular button:hover{background:oklch(85% 0 0)}
.formular button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.fuss{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:0 var(--rand);padding:26px 0 40px;border-top:1px solid var(--linie);font-size:15px;color:var(--mut)}
.fuss nav{display:flex;gap:24px}
/* Handy: Links untereinander und links, © ganz unten (Sven 15.10.2026, nur Handy) */
@media (max-width:991px){.fuss{flex-direction:column;align-items:flex-start;gap:28px}.fuss nav{flex-direction:column;gap:10px;order:-1}}
.fuss a:hover{color:var(--fg)}

/* ---------- Textseiten (Impressum, Datenschutz) ---------- */
.textseite{max-width:760px;margin:0 auto;padding:18vh var(--rand) 10vh}
.textseite h1{font-size:clamp(36px,4.4vw,64px);margin-bottom:40px}
.textseite h2{font-size:28px;margin:36px 0 10px}
.textseite p{color:var(--mut);margin-top:14px}
.textseite a{border-bottom:1px solid var(--linie)}

/* ---------- Desktop mit Bewegung: die Szenen stehen fest, der Scroll bewegt sie ---------- */
@media (min-width:992px){
  .js:not(.ohne-js) .hero{height:240vh}
  .js:not(.ohne-js) .hero__stage{position:sticky;top:0}
  /* Die These steigt schon in das verlöschende Hero-Bild, damit keine leere Strecke entsteht */
  .js:not(.ohne-js) .these{margin-top:-55vh;z-index:4}

  .js:not(.ohne-js) .achte{height:900vh;padding:0;margin-top:-18vh}
  .js:not(.ohne-js) .achte__stage{position:sticky;top:0;height:100vh;overflow:hidden;
    --rl:40vw;--rr:calc(var(--rand) + 1vw);--rt:max(13vh,90px);--rb:max(13vh,100px)}
  .js:not(.ohne-js) .achte__titel{position:absolute;inset:0;margin:0;display:grid;place-content:center;text-align:center;z-index:1}
  .js:not(.ohne-js) .achte__titel span{will-change:transform}
  /* Die Bühne öffnet sich aus dem Spalt zwischen den beiden Titelzeilen */
  .js:not(.ohne-js) .stationen{position:absolute;inset:0;display:block;clip-path:inset(50% 0 50% 0)}
  .js:not(.ohne-js) .station{display:contents}
  .js:not(.ohne-js) .station__zeit{display:none}
  /* Jede Station ist ein Fotoabzug mit hellem Rand, leicht schräg auf dem vorigen */
  .js:not(.ohne-js) .station__bild{position:absolute;left:var(--rl);right:var(--rr);top:var(--rt);bottom:var(--rb);aspect-ratio:auto;z-index:2;
    border:clamp(8px,.7vw,12px) solid oklch(95% 0 0);border-radius:3px;box-shadow:0 40px 90px -30px oklch(0% 0 0 / .85),0 8px 24px -8px oklch(0% 0 0 / .6);
    transform-origin:50% 60%;will-change:transform;--dim:0}
  .js:not(.ohne-js) .station__bild::after{content:"";position:absolute;inset:0;background:oklch(0% 0 0);opacity:var(--dim);pointer-events:none;z-index:4}
  .js:not(.ohne-js) .station__text{position:absolute;left:var(--rand);top:50%;width:min(30vw,470px);transform:translateY(-50%);z-index:3}
  .js:not(.ohne-js) .station__text h3{font-size:clamp(34px,3.1vw,58px)}
  /* Licht der Tageszeit hinter der Bühne */
  .js:not(.ohne-js) .achte__licht{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;--lc:rgba(70,90,150,.32);
    background:radial-gradient(60% 70% at 70% 45%,var(--lc),transparent 72%)}
  /* Die große Uhr: jede Ziffer ist eine Walze, die beim Scrollen weiterrollt */
  .js:not(.ohne-js) .achte__zeit{display:block;position:absolute;z-index:3;left:var(--rand);top:var(--rt);opacity:0}
  .js:not(.ohne-js) .uhr{display:flex;align-items:flex-start;font-stretch:125%;font-weight:500;letter-spacing:-.05em;line-height:1;
    font-size:clamp(56px,6.2vw,112px);font-variant-numeric:tabular-nums}
  .js:not(.ohne-js) .uhr__w{display:block;height:1em;overflow:hidden}
  .js:not(.ohne-js) .uhr__w b{display:flex;flex-direction:column;font-weight:inherit;will-change:transform}
  .js:not(.ohne-js) .uhr__w b span{display:block;height:1em}
  .js:not(.ohne-js) .uhr__p{display:block;height:1em;padding:0 .02em}
  .js:not(.ohne-js) .achte__tag{position:relative;height:1.4em;margin-top:14px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--mut)}
  .js:not(.ohne-js) .achte__tag span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0}
  .js:not(.ohne-js) .achte__nr{display:flex;align-items:flex-end;gap:10px;position:absolute;z-index:3;left:var(--rand);bottom:var(--rb);opacity:0}
  .js:not(.ohne-js) .uhr--nr{font-size:clamp(28px,2.4vw,40px);letter-spacing:-.03em}
  .js:not(.ohne-js) .achte__von{font-size:15px;font-weight:600;letter-spacing:.08em;color:var(--mut);padding-bottom:.25em}

  .js:not(.ohne-js) .grundriss{display:block;position:absolute;inset:0;--g:0;
    background:radial-gradient(90% 90% at 50% 45%,oklch(20% 0 0),oklch(13% 0 0));
    -webkit-mask-image:linear-gradient(to bottom,#000 46%,transparent 54%);mask-image:linear-gradient(to bottom,#000 46%,transparent 54%);
    -webkit-mask-size:100% 250%;mask-size:100% 250%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:0 calc((1 - var(--g)) * 100%);mask-position:0 calc((1 - var(--g)) * 100%)}
  .js:not(.ohne-js) .grundriss svg{position:absolute;left:4%;top:5%;width:92%;height:90%;overflow:visible}
  .js:not(.ohne-js) .grundriss .l{fill:none;stroke:var(--weiss);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:1 1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
  .js:not(.ohne-js) .grundriss .l--wand{stroke-width:4}
  .js:not(.ohne-js) .grundriss .marke{opacity:0}
  .js:not(.ohne-js) .grundriss .marke circle{fill:var(--weiss)}
  .js:not(.ohne-js) .grundriss .marke .marke__ring{fill:none;stroke:var(--weiss);stroke-width:1.2;opacity:.6}
  .js:not(.ohne-js) .grundriss .marke text{fill:var(--weiss);font-family:"Archivo",sans-serif;font-stretch:115%;font-weight:600;font-size:19px;letter-spacing:.01em;
    paint-order:stroke;stroke:oklch(14% 0 0);stroke-width:6px;stroke-linejoin:round}
  .js:not(.ohne-js) .grundriss__scan{display:block;position:absolute;left:0;right:0;height:2px;top:calc((1.5 * var(--g) - .25) * 100%);opacity:0;z-index:2;--g:0;
    background:linear-gradient(90deg,transparent,var(--weiss) 20%,var(--weiss) 80%,transparent);box-shadow:0 0 26px 6px oklch(100% 0 0 / .45)}

  .js:not(.ohne-js) .ziel{height:230vh}
  .js:not(.ohne-js) .ziel__stage{position:sticky;top:0;height:100vh}

  .js:not(.ohne-js) .finale{height:200vh}
  .js:not(.ohne-js) .finale__stage{position:sticky;top:0}
}

/* ---------- Mobil und Tablet: gestapelt, ruhig ---------- */
@media (max-width:991px){
  .kopf{mix-blend-mode:normal;color:var(--weiss);padding:14px var(--rand) 34px;
    background:linear-gradient(to bottom,oklch(14.5% 0 0) 0%,oklch(14.5% 0 0) 58%,oklch(14.5% 0 0 / 0))}
  body.hell .kopf{color:var(--dunkel);background:linear-gradient(to bottom,oklch(98% 0 0) 0%,oklch(98% 0 0) 58%,oklch(98% 0 0 / 0))}
  .kopf__logo{font-size:22px}
  .kopf__kontakt{display:none}
  .kopf-schleier{display:none}
  .cta{bottom:16px}
  .cta__label{padding:13px 22px;font-size:17px}
  .cta__pfeil{width:47px;height:47px}
  .hero__stage{height:auto;min-height:100svh}
  .hero__titel{inset:auto var(--rand) auto var(--rand);top:max(13vh,84px);font-size:clamp(34px,9.6vw,72px)}
  .hero__titel span{position:static;text-align:left}
  .pause{height:70vh}
  .pause__bild{background-size:auto 120%;background-position:4% 44%}
  .rad{font-size:clamp(17px,4.7vw,30px);gap:10px;margin-top:8vh}
  .rad__vor{font-size:13px}
  .hero__unten{left:var(--rand);right:var(--rand);max-width:none;bottom:96px}
  .hero__intro{font-size:17.5px}
  .hero__hint{display:none}
  .hero__schleier{background:linear-gradient(to bottom,oklch(8% 0 0 / .75),oklch(8% 0 0 / .15) 45%,oklch(8% 0 0 / .85) 72%,oklch(8% 0 0 / .95))}
  .these{padding:14vh var(--rand) 10vh}
  .these__spalten{grid-template-columns:1fr;margin-top:9vh;gap:36px}
  .blick{grid-template-columns:1fr;padding:10vh var(--rand) 14vh;gap:36px}
  .station{grid-template-columns:1fr;gap:24px}
  .achte{padding:6vh var(--rand) 10vh}
  .achte__titel{margin-bottom:7vh}
  .ziel__stage{padding:18vh var(--rand)}
  .bringt{padding:14vh var(--rand) 12vh}
  .bringt__inhalt{grid-template-columns:1fr;gap:44px;margin-top:8vh}
  .bringt__bild{aspect-ratio:4/3}
  .nutzen li{grid-template-columns:1fr;gap:8px}
  .bekommen{grid-template-columns:1fr;padding:16vh var(--rand) 16vh;gap:40px;min-height:0}
  .bericht{padding:12vh var(--rand) 16vh}
  .beob dl{grid-template-columns:1fr}
  .blatt__raum{margin-top:6vh}
  .finale__stage{height:auto;min-height:0;display:flex;flex-direction:column;align-items:center;padding:16vh var(--rand) 12vh;gap:7vh}
  .finale__wort{position:static;transform:none;font-size:16.5vw}
  .ring{position:relative;left:auto;top:auto;margin-left:0;width:min(62vw,320px)}
  .finale__unten{position:static;flex-direction:column;align-items:flex-start;width:100%;gap:24px}
  .finale__claim{max-width:16ch;font-size:clamp(26px,7vw,40px)}
  .kontakt{padding:10vh var(--rand) 12vh}
  .kontakt__innen{grid-template-columns:1fr;gap:56px}
  .fuss{padding-bottom:40px}
}
@media (max-width:560px){
  .szene__buchung{grid-template-columns:1fr 1fr}
  .szene__knopf{grid-column:1/-1;padding:2cqw}
}

/* Hauptlauf 11.10.2026: kein Difference-Blend mehr, das Logo faerbte sich ueber dem Hero-Foto blau. Farbe folgt body.hell, Schleier sorgt fuer Lesbarkeit. */
.kopf{mix-blend-mode:normal;color:#fff;transition:color .5s var(--out)}
body.hell .kopf{color:oklch(21% 0 0)}
.kopf__logo{text-shadow:0 1px 18px oklch(0% 0 0 / .35)}
body.hell .kopf__logo{text-shadow:none}

/* ---------- 7b Presse (12.10.2026): dunkel nach dem hellen Abschnitt, Zeitung schlägt sich auf ---------- */
.presse{position:relative;padding:24vh var(--rand) 20vh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:7vw;align-items:center}
.presse__kicker{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--mut);margin-bottom:26px}
.presse__titel{font-size:clamp(36px,4.2vw,80px);max-width:13ch;margin-bottom:34px}
.presse__text>p:not(.presse__kicker){font-size:19.5px;line-height:1.7;color:var(--mut);max-width:42ch}
.presse__text>p+p{margin-top:18px}
.presse__text .presse__hinweis{margin-top:34px;padding-left:22px;border-left:2px solid var(--fg);color:var(--fg)}
.presse__link{margin-top:40px}
/* Links mit rollenden Buchstaben (wie die feste CTA) */
.rollink{display:inline-grid;grid-template-columns:auto auto;column-gap:12px;align-items:center;overflow:hidden;font-size:19px;padding-bottom:6px;border-bottom:1px solid currentColor}
.rollink__t{grid-area:1/1;white-space:nowrap}
.rollink__t--2{transform:translateY(110%);opacity:0}
.rollink__pfeil{grid-column:2;grid-row:1;display:inline-block;transition:transform .6s var(--out)}
.rollink:hover .rollink__pfeil{transform:translateX(6px)}

/* Blog-Seite: Leerzustand */
.blogseite__intro{font-size:19.5px;line-height:1.7;max-width:46ch}
.leer{margin-top:9vh;position:relative}
.leer__karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 95%);mask-image:linear-gradient(to bottom,#000 30%,transparent 95%)}
.leer__karten div{display:grid;gap:10px;padding-bottom:26px}
.leer__karten i{aspect-ratio:4/3;border:1px solid var(--linie);border-radius:4px;
  background:linear-gradient(110deg,oklch(18% 0 0) 30%,oklch(23% 0 0) 50%,oklch(18% 0 0) 70%) 0 0/250% 100%;animation:schimmer 3.2s ease-in-out infinite}
.leer__karten b{display:block;height:9px;border-radius:99px;background:oklch(24% 0 0)}
.leer__karten b:nth-of-type(1){width:85%;height:13px;margin-top:6px}
.leer__karten b:nth-of-type(3){width:55%}
.leer__karten div:nth-child(2) i{animation-delay:.25s}.leer__karten div:nth-child(3) i{animation-delay:.5s}
@keyframes schimmer{0%{background-position:100% 0}100%{background-position:-50% 0}}
.leer__text{position:relative;margin-top:2vh!important;text-align:center;font-stretch:125%;font-weight:500;letter-spacing:-.04em;
  font-size:clamp(22px,2vw,30px);color:var(--fg)!important}
@media (prefers-reduced-motion:reduce){.leer__karten i{animation:none}}

@media (max-width:991px){
  .presse{grid-template-columns:1fr;padding:14vh var(--rand) 14vh;gap:56px}
  .zeitung{width:100%}
  .leer__karten{grid-template-columns:1fr 1fr}
  .leer__karten div:nth-child(3){display:none}
  .leer__text{margin-top:1vh!important}
}
/* Presse am Desktop: der Abschnitt steht beim Aufschlagen kurz fest, die Zeitung passt ganz ins Bild */
@media (min-width:992px){
  .js:not(.ohne-js) .presse{min-height:100vh;padding:10vh var(--rand)}
  .js:not(.ohne-js) .zeitung{width:min(100%,520px,60vh)}
}

/* ---------- Umbau 12.10.2026: Kernaussage und Bereiche (Hotels, Thermen und Spas, Restaurants) ---------- */
.these__satz{max-width:19ch}
.these__text{margin-top:6vh;font-size:clamp(19.5px,1.5vw,24px);line-height:1.6;color:var(--mut);max-width:44ch}
.bereiche{position:relative;padding:14vh var(--rand) 6vh}
.bereiche__kicker{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--mut);margin-bottom:26px}
.bereiche__titel{font-size:clamp(38px,5vw,96px);max-width:14ch}
.kacheln{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px);margin-top:10vh}
.kachel:nth-child(2){margin-top:8vh}
.kachel:nth-child(3){margin-top:16vh}
.kachel__bild{position:relative;aspect-ratio:3/4;border-radius:6px;overflow:hidden;background:var(--nacht2);margin-bottom:26px}
.kachel__zoom{position:absolute;inset:0;transition:transform 1.4s var(--out)}
.kachel:hover .kachel__zoom{transform:scale(1.06)}
.kachel__foto{position:absolute;inset:-8% 0;background-size:cover;background-position:50% 50%;will-change:transform}
.kachel__foto--hotel{background-image:url(img/hero_hotel.webp?v=1021);background-position:68% 50%}
.kachel__foto--spa{background-image:url(img/wellness.webp?v=1021);background-position:30% 50%}
.kachel__foto--restaurant{background-image:url(img/service.webp?v=1021);background-position:45% 50%}
.kachel h3{font-size:clamp(26px,2.3vw,40px)}
.kachel p{margin-top:12px;font-size:17.5px;line-height:1.6;color:var(--mut);max-width:34ch}
.bereiche__schluss{margin-top:16vh;font-stretch:125%;font-weight:500;letter-spacing:-.04em;font-size:clamp(24px,2.4vw,42px);line-height:1.15;max-width:22ch}
@media (max-width:991px){
  .bereiche{padding:10vh var(--rand) 12vh}
  .kacheln{grid-template-columns:1fr;gap:56px;margin-top:7vh}
  .kachel:nth-child(2),.kachel:nth-child(3){margin-top:0}
  .kachel__bild{aspect-ratio:4/3}
  .bereiche__schluss{margin-top:9vh}
}

/* Rechtsseiten: lange Wörter am Handy umbrechen (14.10.2026) */
.textseite h2{overflow-wrap:break-word;hyphens:auto}

/* ---------- Umbau 14.10.2026: vier Welten, Ruf im Ziel, neuer Bericht, Buchen ---------- */
.pause__bild{background:url(img/pause_spa.webp?v=1021) 50% 50%/cover no-repeat}
.kacheln--vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.kacheln--vier .kachel:nth-child(2){margin-top:6vh}
.kacheln--vier .kachel:nth-child(3){margin-top:12vh}
.kacheln--vier .kachel:nth-child(4){margin-top:18vh}
.kachel__foto--kurs{background-image:url(img/kurs.webp?v=1021);background-position:50% 50%}
.kachel__foto--spa{background-position:50% 50%}
@media (max-width:1279px) and (min-width:992px){
  .kacheln--vier{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kacheln--vier .kachel:nth-child(n){margin-top:0}
  .kacheln--vier .kachel:nth-child(even){margin-top:10vh}
}
@media (max-width:991px){ .kacheln--vier{grid-template-columns:1fr} .kacheln--vier .kachel:nth-child(n){margin-top:0} }

.ziel__ruf{margin-top:5vh;font-stretch:125%;font-weight:500;letter-spacing:-.05em;line-height:.98;
  font-size:clamp(40px,6.4vw,124px);max-width:13ch;color:var(--weiss);text-wrap:balance}
.ziel__ruf .zeichen{display:inline-block;will-change:transform,opacity,filter}

/* Bericht: nach Bereichen, jeder Punkt mit Beobachtung, Vorschlag, Wichtigkeit */
.blatt__titel{margin-top:6px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:oklch(42% 0 0)!important}
.lob{margin-top:34px;padding:26px 30px;background:oklch(94% 0 0);border-radius:4px}
.lob h3{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;font-stretch:100%;color:var(--dunkel)!important}
.lob p{margin-top:10px;font-size:18px;line-height:1.55;color:var(--dunkel)!important;max-width:60ch}
.bereich{margin-top:44px}
.bereich__name{font-size:clamp(24px,2.1vw,34px);color:var(--dunkel)!important;padding-bottom:14px;border-bottom:2px solid var(--dunkel)}
.punkte{list-style:none}
.punkt{display:grid;grid-template-columns:44px minmax(0,5fr) minmax(0,4fr) 150px;gap:14px 28px;padding:22px 0;border-bottom:1px solid oklch(85% 0 0);align-items:start}
.punkt__nr{font-stretch:125%;font-weight:600;font-size:15px;color:oklch(55% 0 0)!important;padding-top:3px}
.punkt h4{font-size:19px;font-weight:600;line-height:1.3;color:var(--dunkel)!important}
.punkt__was p{margin-top:6px;font-size:16.5px;line-height:1.55;color:oklch(32% 0 0)!important}
.punkt__tipp{font-size:16.5px;line-height:1.55;color:var(--dunkel)!important}
.punkt__tipp b{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:oklch(42% 0 0);margin-bottom:4px}
.punkt__tags{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.tag{font-size:12.5px;font-weight:600;letter-spacing:.04em;padding:5px 10px;border-radius:99px;border:1px solid oklch(78% 0 0);color:oklch(30% 0 0)!important;white-space:nowrap}
.tag--hoch{background:var(--dunkel);border-color:var(--dunkel);color:var(--hell)!important}
@media (max-width:991px){
  .punkt{grid-template-columns:32px minmax(0,1fr);gap:10px 14px}
  .punkt__tipp,.punkt__tags{grid-column:2}
  .punkt__tags{flex-direction:row;flex-wrap:wrap}
  .lob{padding:20px}
}

/* Formulare: Spamfalle, Meldung, Auswahl */
.falle{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular select,.formular input[type=tel]{font:inherit;font-size:18px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--fg);
  background:transparent;border:0;border-bottom:1px solid var(--linie);padding:10px 0;border-radius:0;width:100%}
.formular select option{color:#111}
.formular__meldung{min-height:1.4em;font-size:16px;color:var(--mut)}
.formular__meldung[data-art=ok]{color:var(--fg)}
.formular__meldung[data-art=fehler]{color:oklch(75% .12 30)}
.formular__hinweis{font-size:15px;color:var(--mut)}
.formular button:disabled{opacity:.5;cursor:wait}
.kontakt__termin{margin-top:22px}
.kontakt__termin a{border-bottom:1px solid var(--linie)}
.kontakt__termin a:hover{border-color:var(--fg)}

/* Unterseiten Buchen und Kontakt */
body.unterseite{background:var(--nacht)}
.unterseite .kopf{mix-blend-mode:normal}
.kontakt--seite{padding-top:20vh}
.kontakt--seite h1{font-size:clamp(36px,4.4vw,84px);max-width:12ch}
.buchen{padding:20vh var(--rand) 14vh}
.buchen__kicker{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--mut);margin-bottom:22px}
.buchen h1{font-size:clamp(36px,4.4vw,84px);max-width:14ch}
.buchen__intro{margin-top:26px;font-size:19.5px;color:var(--mut);max-width:44ch}
.buchen__innen{margin-top:9vh;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:7vw;align-items:start}
.kal{border:1px solid var(--linie);border-radius:6px;padding:clamp(18px,2.4vw,36px)}
.kal__kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.kal__monat{font-stretch:125%;font-weight:500;letter-spacing:-.04em;font-size:clamp(22px,2vw,32px)}
.kal__pfeil{width:46px;height:46px;border-radius:50%;border:1px solid var(--linie);color:var(--fg);font-size:18px;display:grid;place-items:center;transition:background .3s,color .3s}
.kal__pfeil:hover:not(:disabled){background:var(--weiss);color:var(--dunkel)}
.kal__pfeil:disabled{opacity:.25;cursor:default}
.kal__wochentage,.kal__tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center}
.kal__wochentage span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--mut);padding-bottom:12px}
.kal__tag{aspect-ratio:1;display:grid;place-items:center;font-size:17px;color:oklch(45% 0 0);margin:3px 0}
.kal__tag.vorbei{color:oklch(30% 0 0)}
.kal__tag.frei{color:var(--fg);background:oklch(26% 0 0);cursor:pointer;transition:background .25s,color .25s;font-weight:500}
.kal__tag.frei.anfang{border-radius:99px 0 0 99px}
.kal__tag.frei.ende{border-radius:0 99px 99px 0}
.kal__tag.frei.anfang.ende{border-radius:99px}
.kal__tag.frei:hover{background:oklch(40% 0 0)}
.kal__tag.frei.gewaehlt{background:var(--weiss);color:var(--dunkel)}
.kal__legende{margin-top:18px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mut)}
.kal__legende i{width:26px;height:14px;border-radius:99px;background:oklch(26% 0 0)}
.termin-anzeige{font-stretch:125%;font-weight:500;letter-spacing:-.03em;font-size:clamp(20px,1.7vw,28px);color:var(--mut);padding-bottom:18px;border-bottom:1px solid var(--linie)}
.termin-anzeige.an{color:var(--fg)}
@media (max-width:991px){
  .buchen{padding:16vh var(--rand) 10vh}
  .buchen__innen{grid-template-columns:1fr;gap:48px;margin-top:6vh}
  .kontakt--seite{padding-top:16vh}
}
@media (max-width:991px){.blatt__kopf{flex-wrap:wrap;align-items:flex-start}.blatt__titel{letter-spacing:.08em;font-size:12.5px}.punkt__was,.punkt__tipp{min-width:0;overflow-wrap:break-word;hyphens:auto}.tag{white-space:normal}}
.bericht,.bringt{overflow-x:clip}

/* ---------- Nachbesserung 14.10.2026 abends (Sven): Ruf kleiner, Zeitung echter, Knopf pulsiert ---------- */
.ziel__ruf{font-size:clamp(28px,2.6vw,48px);max-width:22ch;margin-top:3.5vh;line-height:1.08}
.zeitung__hinten .zeitung__hinten @keyframes gg-puls{0%,100%{transform:scale(1);box-shadow:0 0 0 0 oklch(96% 0 0 / .35)}50%{transform:scale(1.035);box-shadow:0 0 0 10px oklch(96% 0 0 / 0)}}
.cta__label,.cta__pfeil{animation:gg-puls 2.8s ease-in-out infinite}
.cta__pfeil{animation-delay:.12s}
.cta:hover .cta__label,.cta:hover .cta__pfeil{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.cta__label,.cta__pfeil{animation:none}}
.kal__tag.belegt{color:oklch(42% 0 0);text-decoration:line-through;text-decoration-thickness:1.5px}
.kal__legende{gap:22px}.kal__legende span{display:flex;align-items:center;gap:10px}.kal__legende s{color:oklch(45% 0 0);text-decoration-thickness:1.5px}

/* ---------- Zeitung, Neubau 14.10.2026 (Sven): eine durchgehende Seite, oben und unten passen exakt ----------
   Beide Hälften zeigen dieselbe Seite (z-blatt, doppelt so hoch wie eine Hälfte): oben ihre obere, unten ihre
   untere Hälfte. Die Rückseite der oberen Hälfte ist eine eigene Seite in Schwarz-Weiß (sieht man, solange zu ist). */
.zeitung{position:relative;margin:0;perspective:1700px;width:min(100%,600px);justify-self:center;container-type:inline-size}
.zeitung__seite{position:relative;aspect-ratio:3/4;transform-style:preserve-3d;transform-origin:50% 60%;will-change:transform;
  filter:drop-shadow(0 40px 60px oklch(0% 0 0 / .55))}
.zeitung__oben,.zeitung__unten{position:absolute;left:0;right:0;height:50%}
.zeitung__oben{top:0;transform-origin:50% 100%;transform-style:preserve-3d;z-index:2;will-change:transform}
.zeitung__unten{bottom:0;overflow:hidden}
.zeitung__vorne,.zeitung__hinten{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.zeitung__hinten{transform:rotateX(180deg)}
.zeitung__vorne,.zeitung__hinten,.zeitung__unten{background:oklch(96.5% .005 85);color:oklch(18% 0 0)}
.zeitung__hinten{background:oklch(94.5% .005 85)}
.zeitung__vorne::after,.zeitung__unten::after,.zeitung__hinten::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none}
.zeitung__vorne::after{background:linear-gradient(to top,oklch(0% 0 0 / calc(.22 * var(--falz,0))),transparent 45%)}
.zeitung__unten::after{background:linear-gradient(to bottom,oklch(0% 0 0 / calc(.26 * var(--falz,0))),transparent 45%),
  linear-gradient(to bottom,oklch(0% 0 0 / .08),transparent 3%)}
.zeitung__hinten::after{background:linear-gradient(to bottom,oklch(0% 0 0 / .07),transparent 30%)}

.z-blatt{position:absolute;left:0;right:0;height:200%;padding:6.5% 6.5% 6%;display:flex;flex-direction:column}
.z-blatt--oben{top:0}
.z-blatt--unten{top:-100%}
.zeitung p,.zeitung figcaption,.zeitung span,.zeitung b{color:inherit!important}
.z-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:2cqw;font-family:Georgia,"Times New Roman",serif;
  font-size:2.1cqw;font-style:italic;padding-bottom:1.6cqw;border-bottom:.5cqw double oklch(25% 0 0)}
.z-kopf b{font-style:normal;font-weight:700;font-size:3.4cqw;letter-spacing:-.01em}
.z-rubrik{margin-top:3.4cqw;font-family:"Archivo",sans-serif;font-stretch:110%;font-size:1.9cqw;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.z-schlagzeile{margin-top:1.6cqw;font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:6.6cqw;line-height:1.04;letter-spacing:-.01em}
.z-vorspann{margin-top:2.2cqw;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:2.7cqw;line-height:1.35;max-width:46ch}
.z-inhalt{flex:1;min-height:0;margin-top:3.4cqw;padding-top:3cqw;border-top:1px solid oklch(30% 0 0);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);column-gap:1.8cqw}
.z-sp{font-family:Georgia,"Times New Roman",serif;font-size:1.78cqw;line-height:1.42;text-align:justify;hyphens:auto;color:oklch(24% 0 0);overflow:hidden}
.z-sp p+p{margin-top:.75em}
.z-sp--1,.z-sp--2{position:relative}
.z-sp--2,.z-sp--3{border-left:1px solid oklch(80% 0 0);padding-left:1.8cqw}
.z-sp--3{grid-column:3;grid-row:1 / 3;position:relative;display:flex;flex-direction:column}
.z-info{margin-top:auto;padding:1.6cqw;background:oklch(91% .006 85);font-size:1.7cqw;line-height:1.4;text-align:left}
.z-info b{display:block;font-family:"Archivo",sans-serif;font-stretch:110%;font-size:1.5cqw;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.5em}
.z-sp--3 .z-autor{font-style:italic;margin-top:1.2em}
.z-bild{grid-column:1 / 3;grid-row:2;margin:3cqw 0 0;display:flex;flex-direction:column;min-height:0}
.z-foto{flex:1;min-height:0;background:url(img/pause_spa.webp?v=1021) 50% 55%/cover}
.z-bild figcaption{margin-top:1.2cqw;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:1.7cqw;color:oklch(35% 0 0)}

/* Rückseite: was man sieht, solange die Zeitung zusammengefaltet ist */
.z-rueck{position:absolute;inset:0;padding:5.5% 6.5% 5%;display:flex;flex-direction:column}
.z-rueck__inhalt{flex:1;min-height:0;margin-top:3cqw;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:3.6cqw}
.z-foto--sw{background:url(img/kurs.webp?v=1021) 50% 40%/cover;filter:grayscale(1) contrast(1.08)}
.z-rueck__titel{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:4.2cqw;line-height:1.08;margin-bottom:2cqw}
.z-rueck .z-sp{overflow:hidden}
.z-termine{margin-top:3cqw;padding-top:2cqw;border-top:1px solid oklch(30% 0 0);display:flex;gap:2.4cqw;align-items:baseline;
  font-family:Georgia,"Times New Roman",serif;font-size:1.78cqw}
.z-termine b{font-family:"Archivo",sans-serif;font-stretch:110%;font-size:1.7cqw;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
@media (max-width:991px){ .zeitung{width:100%} }

/* ---------- Gastgefühl-Wert im Bericht: Gesamtwert, Skala, Bereiche ---------- */
.wert{margin-top:34px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px 56px;align-items:end;padding-bottom:34px;border-bottom:1px solid oklch(85% 0 0)}
.wert__label{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:oklch(42% 0 0)!important}
.wert__zahl{font-stretch:125%;font-weight:500;letter-spacing:-.06em;line-height:.9;font-size:clamp(84px,9vw,148px);color:var(--dunkel)!important;margin-top:10px}
.wert__zahl small{font-size:.38em;letter-spacing:-.02em;margin-left:.08em}
.wert__ziel{margin-top:14px;font-size:16.5px;color:oklch(32% 0 0)!important}
.wert__ziel b{color:var(--dunkel)}
.wert__skala{grid-column:1/-1;grid-row:2}
.wert__bahn{position:relative;height:10px;border-radius:99px;background:oklch(88% 0 0)}
.wert__fuell{position:absolute;inset:0 auto 0 0;width:calc(var(--w) * 1%);border-radius:inherit;background:var(--dunkel);transform-origin:0 50%}
.wert__marke{position:absolute;top:-6px;bottom:-6px;left:calc(var(--z) * 1%);width:2px;background:var(--dunkel);opacity:.45}
.wert__stufen{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin-top:10px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:oklch(50% 0 0)}
.wert__stufen li{color:oklch(50% 0 0)!important}
.wert__stufen li:nth-child(2),.wert__stufen li:nth-child(3){text-align:center}
.wert__stufen li:last-child{text-align:right}
.wert__bereiche{list-style:none;display:grid;gap:14px}
.wert__bereiche li{display:grid;grid-template-columns:130px minmax(0,1fr) 52px;gap:14px;align-items:center;font-size:16px}
.wert__bereiche span{color:var(--dunkel)!important}
.wert__bereiche i{position:relative;display:block;height:6px;border-radius:99px;background:oklch(88% 0 0)}
.wert__bereiche i::before{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--w) * 1%);border-radius:inherit;background:var(--dunkel);transform-origin:0 50%}
.js:not(.ohne-js) .wert__fuell,.js:not(.ohne-js) .wert__bereiche i::before{transform:scaleX(0);transition:transform 1.6s var(--out)}
.js:not(.ohne-js) .wert__bereiche li:nth-child(2) i::before{transition-delay:.1s}
.js:not(.ohne-js) .wert__bereiche li:nth-child(3) i::before{transition-delay:.2s}
.js:not(.ohne-js) .wert__bereiche li:nth-child(4) i::before{transition-delay:.3s}
.js:not(.ohne-js) .wert__bereiche li:nth-child(5) i::before{transition-delay:.4s}
.js:not(.ohne-js) .wert.an .wert__fuell,.js:not(.ohne-js) .wert.an .wert__bereiche i::before{transform:none}
.wert__bereiche b{text-align:right;font-weight:600;color:var(--dunkel)!important;font-variant-numeric:tabular-nums}
@media (max-width:991px){
  .wert{grid-template-columns:1fr;gap:26px}
  .wert__bereiche{grid-row:3}
  .wert__bereiche li{grid-template-columns:110px minmax(0,1fr) 48px;font-size:15px}
  .wert__stufen{font-size:10.5px;letter-spacing:.04em}
}

/* Sven 15.10.2026: am Handy überall derselbe ruhige Abstand zwischen den Kapiteln (vorher bis zu 32vh) */
@media (max-width:991px){
  .blick{padding-bottom:6vh}
  .bereiche{padding:8vh var(--rand) 6vh}
  .achte{padding-bottom:4vh}
  .ziel__stage{padding:10vh var(--rand)}
  .bringt{padding:10vh var(--rand) 6vh}
  .bekommen{padding:8vh var(--rand)}
  .presse{padding:8vh var(--rand)}
  .bericht{padding:8vh var(--rand) 6vh}
  .finale__stage{padding:8vh var(--rand)}
  .kontakt{padding:8vh var(--rand) 10vh}
}

/* Startseite: kein Formular mehr, nur die zwei Wege (Termin wählen, Kontaktseite), Sven 15.10.2026 */
.kontakt__wege{display:grid;gap:14px;align-content:start;justify-items:start}
.kontakt__knopf{display:inline-flex;gap:12px;align-items:center;background:var(--weiss);color:var(--dunkel);border-radius:99px;
  padding:18px 34px;font-size:18px;font-weight:600;transition:background .35s}
.kontakt__knopf:hover{background:oklch(85% 0 0)}
.kontakt__knopf--leise{background:none;color:var(--fg);border:1px solid var(--linie)}
.kontakt__knopf--leise:hover{background:oklch(100% 0 0 / .08)}
@media (min-width:992px){.kontakt__wege{align-self:end;display:flex;flex-wrap:wrap;gap:14px}}   /* Computer: Knöpfe nebeneinander */
.wechsel{display:inline-grid;vertical-align:top}
.wechsel>span{grid-area:1/1;will-change:filter,opacity}
.js:not(.ohne-js) .bereiche__schluss{visibility:hidden}

/* Handy-Lider statt Maske (flüssig): oben und unten je eine dunkle Fläche mit weichem Rand zur Mitte */
.lid{display:none}
@media (max-width:991px){
  .loader__lid{display:none}
  /* Sven 15.10.2026: am Handy dieselbe Augenform wie am Computer. Jedes Lid hat einen ausgeschnittenen Bogen an der
     Innenkante (Hintergrundverlauf, kein Maskieren, die Fläche wird nur verschoben). Geschlossen liegen beide Bögen in der
     Mitte aufeinander, beim Auseinanderfahren öffnet sich zuerst die Mitte: ein Mandelauge. */
  .lid{display:block;position:absolute;left:0;right:0;height:96%;will-change:transform}
  .lid--o{top:-30%;background:radial-gradient(ellipse 60% 16.7% at 50% 100%,oklch(11% 0 0 / 0) 82%,oklch(11% 0 0) 100%)}
  .lid--u{top:34%;background:radial-gradient(ellipse 60% 16.7% at 50% 0%,oklch(11% 0 0 / 0) 82%,oklch(11% 0 0) 100%)}
}

/* Menü: am Computer unsichtbar (dort steht „Kontakt“ rechts), am Handy drei Striche rechts, Logo links */
.menue-knopf,.menue{display:none}
@media (max-width:991px){
  .kopf{justify-content:space-between}
  .menue-knopf{display:grid;gap:6px;align-content:center;justify-items:end;width:44px;height:44px;margin-right:-8px;padding:8px;pointer-events:auto;color:inherit}
  .menue-knopf i{display:block;width:22px;height:1.25px;border-radius:1px;background:currentColor;transition:transform .45s var(--out),opacity .3s}
  .menue-auf .menue-knopf i:nth-child(1){transform:translateY(7.25px) rotate(45deg)}
  .menue-auf .menue-knopf i:nth-child(2){opacity:0}
  .menue-auf .menue-knopf i:nth-child(3){transform:translateY(-7.25px) rotate(-45deg)}
  .menue{display:grid;position:fixed;inset:0;z-index:88;align-content:center;gap:22px;padding:0 var(--rand);
    background:oklch(12% 0 0 / .97);color:var(--weiss);opacity:0;visibility:hidden;transition:opacity .45s var(--out),visibility .45s}
  .menue[hidden]{display:none}
  .menue a{font-stretch:125%;font-weight:500;letter-spacing:-.05em;font-size:clamp(34px,10vw,52px);line-height:1.1}
  .menue-auf .menue{opacity:1;visibility:visible}
  .menue-auf .kopf{color:var(--weiss);background:none}
  .menue-auf .cta{opacity:0;pointer-events:none}
}

/* Szene „Der erste Eindruck“ am Handy: Höhe aus dem Inhalt, größere Schrift, nichts abgeschnitten (Sven 15.10.2026) */
@media (max-width:991px){
  .station__bild--szene{aspect-ratio:auto}
  .szene{position:relative;inset:auto;padding:6cqw;gap:4cqw;font-size:3.6cqw}
  .szene__suche{font-size:4cqw;padding:3cqw 4.6cqw;gap:3cqw}
  .szene__lupe{width:4cqw;height:4cqw}
  .szene__cursor{height:4.6cqw}
  .szene__treffer{grid-template-columns:30cqw 1fr;padding:4cqw;gap:4cqw}
  .szene__info{gap:2.4cqw}
  .szene__info b{font-size:5.2cqw}
  .sterne i{width:4.8cqw;height:4.8cqw}
  .szene__balken{height:2cqw}
  .szene__buchung{grid-template-columns:1fr 1fr;gap:2.6cqw}
  .szene__feld{font-size:3.2cqw;padding:3cqw 3.4cqw;gap:2cqw}
  .szene__feld .szene__balken{height:1.8cqw}
  .szene__knopf{grid-column:1/-1;font-size:3.8cqw;padding:3.4cqw}
}

/* Bericht am Handy: die Punkte eines Bereichs als Karussell zum Wischen, die nächste Karte schaut rechts herein (Sven 15.10.2026) */
@media (max-width:991px){
  .punkte{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    padding:16px 2px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .punkte::-webkit-scrollbar{display:none}
  .punkt{flex:0 0 86%;scroll-snap-align:start;border:1px solid oklch(85% 0 0);border-radius:10px;padding:18px 16px;background:oklch(99% 0 0)}
  .punkt:last-child{margin-right:8px}
}

/* Handy: halb durchsichtige Nummern rechts oben (halbe Größe seit 15.10.2026, Sven) (These-Spalten und Nutzen), Sven 15.10.2026 */
@media (max-width:991px){
  .these__spalten,.nutzen{counter-reset:nr}
  .these__spalten>div,.nutzen li{position:relative;counter-increment:nr}
  .these__spalten>div::after,.nutzen li::after{content:counter(nr,decimal-leading-zero);position:absolute;right:0;top:.18em;
    font-stretch:125%;font-weight:500;letter-spacing:-.06em;font-size:clamp(32px,10vw,48px);line-height:1;color:var(--fg);opacity:.09;pointer-events:none}
  .these__spalten h3,.nutzen h3{padding-right:13vw}
}

/* Szene als Google-Eintrag: Wertung, Art, Aktionen, Öffnungszeiten (Sven 15.10.2026) */
.szene__wertung{display:flex;align-items:center;gap:1.2cqw;font-size:2.2cqw;color:oklch(82% 0 0)}
.szene__art{font-size:2cqw;color:oklch(66% 0 0)}
.szene__aktionen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6cqw}
.szene__aktionen span{display:grid;justify-items:center;gap:1.1cqw;font-size:1.9cqw;color:oklch(80% 0 0)}
.szene__aktionen i{display:grid;place-items:center;width:6.4cqw;height:6.4cqw;border-radius:50%;border:1px solid oklch(44% 0 0);color:oklch(88% 0 0)}
.szene__aktionen svg{width:52%;height:52%}
.szene__aktionen .an i{background:var(--weiss);border-color:var(--weiss);color:var(--dunkel)}
.szene__aktionen .an{color:var(--weiss);font-weight:600}
.szene__zeiten{display:flex;flex-wrap:wrap;gap:.6cqw 1.6cqw;align-items:baseline;padding-top:2.4cqw;border-top:1px solid oklch(30% 0 0);font-size:2cqw;color:oklch(70% 0 0)}
.szene__zeiten b{color:oklch(86% .09 150);font-weight:600}
@media (max-width:991px){
  .szene__wertung{font-size:3.6cqw;gap:2cqw}
  .szene__art{font-size:3.3cqw}
  .szene__aktionen{gap:2cqw}
  .szene__aktionen span{font-size:3.1cqw;gap:1.8cqw}
  .szene__aktionen i{width:11cqw;height:11cqw}
  .szene__zeiten{font-size:3.3cqw;padding-top:3.4cqw;gap:1cqw 2.4cqw}
}
/* Bericht-Karten am Handy: Text über die volle Breite, Nummer groß und halb durchsichtig rechts oben */
@media (max-width:991px){
  .punkt{display:block;position:relative;padding:20px 18px}
  .punkt__nr{position:absolute;right:14px;top:8px;padding:0;font-size:46px!important;line-height:1;letter-spacing:-.06em;opacity:.16}
  .punkt h4{padding-right:58px}
  .punkt__tipp{margin-top:14px}
  .punkt__tags{margin-top:14px}
}
.buchen__direkt{margin-top:18px;font-size:17px;color:var(--mut);max-width:52ch}
.buchen__direkt a{color:var(--fg);border-bottom:1px solid var(--linie);white-space:nowrap}

/* Handy, Sven 15.10.2026: „Ihre Gäste bezahlen für ein gutes Gefühl“ steht in der Mitte zwischen dem letzten Satz des Hero-Textes
   („… verbessern lässt.“) und dem Absatz „Jede kleine Störung …“, wie er es abgenommen hat (Hero-Text endet 96px über dem Hero-Ende,
   darum padding-top = (17,5vh − 96px)/2 = gleicher Abstand wie der Absatz vorher hatte). Der Absatz darunter gehört zur Aussage und rückt
   wieder dicht an sie heran (Standardabstand 6vh), die Spalten rücken mit hoch. */
@media (max-width:991px){
  .these{padding-top:max(0px,calc((17.5vh - 96px) / 2))}
  .these__spalten{margin-top:11.5vh}
}