/* Carlton-Europe Vintage Adults Hotel — Neufassung · Tasty Studios
   Bausteine nach dem Referenzbau Salt & Silver, in Farben und Schrift des Hauses.
   Bewegung nur über transform + opacity. Kein Weichzeichner, kein Schatten über Bewegtem. Nativer Scroll. */

/* ---------- Schriften: Titel aus der Wortmarke (Libre Baskerville, fett, Versalien), Lesetext Instrument Sans, kleine Marken DM Mono ---------- */
@font-face{font-family:'Baskerville CE';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/libre-baskerville-700.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/InstrumentSans-normal-400_600.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/DMMono-normal-400.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/DMMono-normal-500.woff2') format('woff2')}
/* Ersatzschriften in gleicher Laufweite, damit beim Laden nichts springt */
@font-face{font-family:'Baskerville Ersatz';src:local('Georgia Bold'),local('Georgia-Bold'),local('Georgia');size-adjust:112%}
@font-face{font-family:'Sans Ersatz';src:local('Arial');size-adjust:99%}

:root{
  --nacht:#06142b; --navy:#0b1f40; --blau:#12305e;
  --papier:#f4ecdc; --creme:#e8dbbf; --weiss:#fbf6ea; --gold:#dcc68f; --taupe:#8a7545; --tinte:#0c1526;
  --serif:'Baskerville CE','Baskerville Ersatz',Georgia,serif;
  --sans:'Instrument Sans','Sans Ersatz',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --e1:cubic-bezier(.16,1,.3,1); --e2:cubic-bezier(.32,.72,0,1); --e3:cubic-bezier(.19,1,.22,1);
  --rand:clamp(20px,4.6vw,76px); --max:1480px;
  --abschnitt:clamp(78px,9.4vw,150px);
  --r-xl:34px; --r-l:26px; --r-m:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--nacht);color:#fff;font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
address{font-style:normal}
::selection{background:var(--gold);color:var(--tinte)}
:focus-visible{outline:1.5px solid var(--gold);outline-offset:4px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Flächen: dunkel und hell im Wechsel ---------- */
.fl{position:relative;padding:var(--abschnitt) var(--rand)}
.fl--nacht{background:var(--nacht);color:#fff}
.fl--navy{background:var(--navy);color:#fff}
.fl--papier{background:var(--papier);color:var(--tinte)}
.fl--creme{background:var(--creme);color:var(--tinte)}
.in{max-width:var(--max);margin:0 auto}
.fl--eng{padding-top:clamp(56px,6.6vw,104px);padding-bottom:clamp(56px,6.6vw,104px)}
.fl--oben0{padding-top:0}
/* Tapete des Hauses, Ton in Ton */
.tapete{background-image:url(../img/tapete-navy.webp?v=ba8679c1);background-size:1100px auto;background-position:50% 0}
.fl--papier.tapete{background-image:url(../img/tapete.webp?v=c929f6ca)}
.fl--creme.tapete{background-image:url(../img/tapete-creme.webp?v=23425e99)}

/* ---------- Schrift ---------- */
.d1,.d2,.d3,.d4{font-family:var(--serif);font-weight:400;letter-spacing:0;text-wrap:balance}
.d1{font-size:clamp(2.5rem,6.5vw,6.9rem);line-height:1.04}
.d2{font-size:clamp(2.05rem,4.7vw,5rem);line-height:1.05}
.d3{font-size:clamp(1.5rem,2.6vw,2.7rem);line-height:1.1;letter-spacing:.012em}
.d4{font-size:clamp(1.12rem,1.45vw,1.5rem);line-height:1.16;letter-spacing:.02em}
/* Betonung über Farbe, nie kursiv */
.d1 em,.d2 em,.d3 em,.d4 em{font-style:normal;color:var(--taupe)}
.fl--nacht em,.fl--navy em,.hero em,.sk em,.buehne em,.bruch em,.schluss em,dialog em,.fuss em{color:var(--gold)}
.lauf{font-size:clamp(1rem,1.12vw,1.14rem);line-height:1.66;max-width:60ch}
.lauf p+p{margin-top:1.05em}
.lauf a{box-shadow:inset 0 -1px 0 currentColor}
.fl--nacht .lauf,.fl--navy .lauf{color:rgba(255,255,255,.78)}
.fl--papier .lauf,.fl--creme .lauf{color:rgba(12,21,38,.8)}
.gross{font-family:var(--sans);font-weight:500;font-size:clamp(1.25rem,1.8vw,1.8rem);line-height:1.36;letter-spacing:-.012em;text-wrap:pretty}
.mono{font-family:var(--mono);font-size:13.5px;letter-spacing:.12em;text-transform:uppercase}
.mono--k{font-size:11px;letter-spacing:.16em}
.leise{opacity:.62}
.quelle{margin-top:18px;font-size:.86rem;line-height:1.5;opacity:.6;max-width:70ch}
.quelle a{box-shadow:inset 0 -1px 0 currentColor}

/* Zeilen-Maske: grosse Überschriften fahren zeilenweise aus einem Schlitz hoch */
.z{display:block;overflow:hidden;padding:.16em 0 .1em;margin:-.16em 0 -.1em}
.z>span{display:block;transform:translateY(108%);transition:transform 1.25s var(--e1)}
.da .z>span,.z.da>span{transform:none}
.z:nth-child(2)>span{transition-delay:.09s}.z:nth-child(3)>span{transition-delay:.18s}.z:nth-child(4)>span{transition-delay:.27s}

/* Einblenden: Text und Bild kommen von unten */
[data-r]{opacity:0;transform:translateY(30px);transition:opacity 1.1s var(--e1),transform 1.3s var(--e1);transition-delay:calc(var(--i,0)*90ms)}
[data-r].da{opacity:1;transform:none}
/* Bild-Vorhang: Bild im Rahmen fährt von 113 % auf 100 % */
[data-r="bild"]{transform:none}
[data-r="bild"] .rahmen__k img{transform:scale(1.13);transition:transform 1.9s var(--e1)}
[data-r="bild"].da .rahmen__k img{transform:none}
/* Hochschweben: Bilder kommen weit von unten und werden dabei grösser */
[data-r="schweb"]{opacity:0;transform:translateY(clamp(90px,14vw,190px)) scale(.94);transform-origin:50% 100%;
  transition:opacity .65s var(--e1),transform 1.05s var(--e3);transition-delay:calc(var(--i,0)*90ms)}
[data-r="schweb"].da{opacity:1;transform:none}
[data-r="schweb"] .rahmen__k img{transform:scale(1.14);transition:transform 1.4s var(--e3);transition-delay:calc(var(--i,0)*90ms)}
[data-r="schweb"].da .rahmen__k img{transform:none}
/* Linie, die sich von links zieht */
.linie{display:block;height:1px;background:currentColor;opacity:.22;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.5s var(--e1)}
.da>.linie,.linie.da{transform:none}

/* ---------- Kapitelzeile: Etage in der Titelschrift, Strich, Wort ---------- */
.kapitel{display:flex;align-items:center;gap:16px;font-family:var(--serif);font-weight:400;font-size:clamp(.95rem,1.1vw,1.12rem);letter-spacing:0;color:var(--taupe);margin-bottom:clamp(18px,2vw,30px)}
.kapitel i{flex:none;width:clamp(38px,5vw,84px);height:1px;background:currentColor;opacity:.7}
.fl--nacht .kapitel,.fl--navy .kapitel,.buehne .kapitel,.sk .kapitel{color:var(--gold)}

/* ---------- Knöpfe mit Tiefe: Pille, Lichtkante oben, Schattenkante unten, runder Knauf, Glanz beim Darüberfahren ---------- */
.kn{--o:#fbf3e2;--m:#e8dbbf;--u:#cfbd98;--t:var(--tinte);--licht:rgba(255,255,255,.92);--kante:rgba(110,88,44,.38);--tief:rgba(0,0,0,.6);
  --ko:#1e3c72;--ku:#050f22;--kt:var(--weiss);--klicht:rgba(255,255,255,.24);
  position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:14px;height:54px;padding:0 7px 0 26px;border-radius:999px;
  font-family:var(--mono);font-size:13px;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;color:var(--t);
  background:linear-gradient(180deg,var(--o) 0%,var(--m) 46%,var(--u) 100%);
  box-shadow:inset 0 1px 0 var(--licht),inset 0 -3px 0 var(--kante),inset 0 0 0 1px rgba(255,255,255,.08),0 1px 1px rgba(0,0,0,.3),0 16px 26px -14px var(--tief);
  transition:transform .55s var(--e2),box-shadow .55s var(--e2)}
.kn:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 var(--licht),inset 0 -3px 0 var(--kante),inset 0 0 0 1px rgba(255,255,255,.08),0 2px 2px rgba(0,0,0,.25),0 24px 32px -16px var(--tief)}
.kn:active{transform:translateY(1px) scale(.985);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.28),inset 0 -1px 0 var(--kante),0 1px 1px rgba(0,0,0,.3),0 6px 12px -8px var(--tief)}
.kn::after{content:'';position:absolute;z-index:-1;top:-20%;bottom:-20%;left:0;width:38%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);transform:translateX(-180%) skewX(-18deg);transition:transform 0s}
.kn:hover::after{transform:translateX(360%) skewX(-18deg);transition:transform 1s var(--e1)}
.kn i{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--ko),var(--ku));color:var(--kt);
  box-shadow:inset 0 1px 0 var(--klicht),inset 0 -2px 0 rgba(0,0,0,.28),0 3px 6px rgba(0,0,0,.35);transition:transform .6s var(--e2)}
.kn:hover i{transform:translateX(2px) scale(1.05)}
.kn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.2;transition:transform .6s var(--e2)}
.kn:hover svg{transform:translate(2px,-2px)}
/* dunkler Knopf auf hellen Flächen */
.fl--papier .kn,.fl--creme .kn,.tafel .kn,.blatt .kn{--o:#1f3f77;--m:#0b1f40;--u:#040d1e;--t:#fff;--licht:rgba(255,255,255,.26);--kante:rgba(0,0,0,.55);--tief:rgba(6,20,43,.6);
  --ko:#fbf3e2;--ku:#cfbd98;--kt:var(--tinte);--klicht:rgba(255,255,255,.9)}
.fl--papier .kn::after,.fl--creme .kn::after,.tafel .kn::after,.blatt .kn::after{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.2) 50%,transparent 100%)}
/* zweiter Knopf: auf Dunkel eine Platte aus Navy, auf Hell eine aus Porzellan */
.kn--linie{--o:#24477f;--m:#12305e;--u:#0a1c3b;--t:#fff;--licht:rgba(255,255,255,.24);--kante:rgba(0,0,0,.45);--tief:rgba(0,0,0,.55);
  --ko:#fbf3e2;--ku:#cfbd98;--kt:var(--tinte);--klicht:rgba(255,255,255,.9)}
.kn--linie::after{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.16) 50%,transparent 100%)}
.fl--papier .kn--linie,.fl--creme .kn--linie,.tafel .kn--linie,.blatt .kn--linie{--o:#fffdf7;--m:#f6eedd;--u:#e0d2b6;--t:var(--tinte);--licht:#fff;--kante:rgba(110,88,44,.28);--tief:rgba(74,58,26,.42);
  --ko:#1e3c72;--ku:#050f22;--kt:var(--weiss);--klicht:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 var(--licht),inset 0 -3px 0 var(--kante),inset 0 0 0 1px rgba(110,88,44,.16),0 1px 1px rgba(74,58,26,.2),0 16px 26px -14px var(--tief)}
.fl--papier .kn--linie::after,.fl--creme .kn--linie::after,.tafel .kn--linie::after,.blatt .kn--linie::after{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.8) 50%,transparent 100%)}
.kn--klein{height:44px;padding-left:20px;font-size:10.5px;gap:10px}
.kn--klein i{width:32px;height:32px}
.kn--ohne{padding-right:26px}
.kn-reihe{display:flex;flex-wrap:wrap;gap:12px}
.pfeil{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:13px;letter-spacing:.13em;text-transform:uppercase;padding:8px 0;position:relative}
.pfeil::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;opacity:.3;transition:opacity .5s}
.pfeil:hover::after{opacity:1}
.pfeil svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.2;transition:transform .6s var(--e2)}
.pfeil:hover svg{transform:translate(3px,-3px)}
/* Reiter und Auswahl-Pillen: dieselbe Tiefe */
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{height:46px;padding:0 22px;border-radius:999px;font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(180deg,#fffdf7,#efe5d0);color:var(--tinte);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(110,88,44,.22),inset 0 0 0 1px rgba(110,88,44,.16),0 8px 14px -10px rgba(74,58,26,.45);transition:transform .45s var(--e2),box-shadow .45s var(--e2)}
.tab:hover{transform:translateY(-1px)}
.tab[aria-selected="true"],.tab[aria-pressed="true"]{background:linear-gradient(180deg,#1f3f77,#0b1f40 50%,#040d1e);color:#fff;transform:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -2px 0 rgba(0,0,0,.55),0 10px 16px -10px rgba(6,20,43,.7)}
.fl--nacht .tab,.fl--navy .tab,.sk .tab,.bruch .tab{background:linear-gradient(180deg,#24477f,#12305e 50%,#0a1c3b);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.45),0 10px 16px -10px rgba(0,0,0,.7)}
.fl--nacht .tab[aria-selected="true"],.fl--navy .tab[aria-selected="true"],.fl--nacht .tab[aria-pressed="true"],.fl--navy .tab[aria-pressed="true"],.sk .tab[aria-pressed="true"],.bruch .tab[aria-pressed="true"]{background:linear-gradient(180deg,#fbf3e2,#e8dbbf 50%,#cfbd98);color:var(--tinte);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(110,88,44,.36),0 10px 16px -10px rgba(0,0,0,.7)}
/* runde Tasten: Pfeile, Menü, Schliessen */
.pfeile{display:flex;gap:8px}
.pfeile button,.burger,.zu,.rund{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#24477f,#12305e 50%,#0a1c3b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -2px 0 rgba(0,0,0,.45),0 10px 16px -10px rgba(0,0,0,.75);transition:transform .5s var(--e2),box-shadow .5s var(--e2),opacity .4s}
.pfeile button:hover,.burger:hover,.rund:hover{transform:translateY(-2px)}
.pfeile button:active,.burger:active,.rund:active{transform:translateY(1px) scale(.96);box-shadow:inset 0 2px 5px rgba(0,0,0,.5)}
.pfeile button:disabled{opacity:.32;pointer-events:none}
.pfeile svg,.rund svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.3}
.pfeile--hell button{color:var(--tinte);background:linear-gradient(180deg,#fffdf7,#f3ead6 50%,#e0d2b6);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(110,88,44,.26),inset 0 0 0 1px rgba(110,88,44,.16),0 10px 16px -10px rgba(74,58,26,.5)}
.zu:hover{transform:rotate(90deg)}
.laufbalken{position:relative;height:1px;width:min(280px,44%);margin:10px 0 0 auto;background:rgba(255,255,255,.18)}
.laufbalken i{position:absolute;left:0;top:-.5px;height:2px;width:30%;background:#fff;will-change:transform}
.laufbalken--hell{background:rgba(12,21,38,.18)}.laufbalken--hell i{background:var(--tinte)}

/* ---------- Glanzkante: ein feines Licht läuft um den Rand. Nur für die zwei Eck-Knöpfe oben ---------- */
@property --ga{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --go{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --gp{syntax:"<percentage>";initial-value:5%;inherits:false}
.glanz{isolation:isolate;position:relative;overflow:hidden;border:1px solid transparent;border-radius:999px;color:var(--papier);
  background:linear-gradient(180deg,#12305e,#081a38) padding-box,
    conic-gradient(from calc(var(--ga) - var(--go)),transparent,var(--gold) var(--gp),#fff calc(var(--gp)*2),var(--taupe) calc(var(--gp)*3),transparent calc(var(--gp)*4)) border-box;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 14px 26px -16px rgba(0,0,0,.8);
  transition:--go .8s cubic-bezier(.25,1,.5,1),--gp .8s cubic-bezier(.25,1,.5,1),transform .5s var(--e2)}
.glanz--laeuft{animation:ga 3.6s linear infinite}
.glanz:is(:hover,:focus-visible,:focus-within){--gp:20%;--go:95deg;animation:ga 3.6s linear infinite}
.glanz:active{transform:translateY(1px)}
@keyframes ga{to{--ga:360deg}}

/* ---------- Bildrahmen: doppelter Rand, 7 px Polster, feine Innenlinie ---------- */
.rahmen{display:block;padding:7px;border-radius:var(--r-xl);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)}
.fl--papier .rahmen,.fl--creme .rahmen{background:rgba(12,21,38,.045);box-shadow:inset 0 0 0 1px rgba(12,21,38,.1)}
.rahmen__k{display:block;position:relative;overflow:hidden;border-radius:calc(var(--r-xl) - 7px);background:#0e2347;isolation:isolate}
.rahmen__k img{width:100%;height:100%;object-fit:cover}
.rahmen--m{border-radius:var(--r-l);padding:6px}.rahmen--m .rahmen__k{border-radius:calc(var(--r-l) - 6px)}
.v-34 .rahmen__k{aspect-ratio:3/4}.v-45 .rahmen__k{aspect-ratio:4/5}.v-32 .rahmen__k{aspect-ratio:3/2}
.v-169 .rahmen__k{aspect-ratio:16/9}.v-11 .rahmen__k{aspect-ratio:1}.v-219 .rahmen__k{aspect-ratio:21/9}.v-43 .rahmen__k{aspect-ratio:4/3}.v-21 .rahmen__k{aspect-ratio:2/1}
.legende{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;opacity:.62}
/* Einkerbung: Zahl oder Wort sitzt in einer ausgeschnittenen Bildecke */
.kerbe{--f:var(--papier);--e:clamp(16px,1.6vw,24px);position:absolute;z-index:2;left:0;bottom:0;display:block;padding:clamp(9px,1vw,14px) clamp(15px,1.6vw,24px) 0 2px;border-radius:0 var(--e) 0 0;background:var(--f);color:var(--tinte);
  font-family:var(--serif);font-weight:400;font-size:clamp(1.05rem,1.5vw,1.6rem);line-height:1;letter-spacing:0;white-space:nowrap}
.kerbe::before,.kerbe::after{content:'';position:absolute;width:var(--e);height:var(--e);background:radial-gradient(circle at 100% 0,transparent calc(var(--e) - .5px),var(--f) var(--e))}
.kerbe::before{left:0;bottom:100%}.kerbe::after{left:100%;bottom:0}
.kerbe small{display:block;font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.13em;margin-bottom:5px;opacity:.7}
.kerbe--gross{font-size:clamp(2.6rem,5vw,5.2rem);line-height:.86;padding-top:clamp(10px,1.1vw,16px)}
.fl--creme .kerbe{--f:var(--creme)}.fl--nacht .kerbe{--f:var(--nacht);color:#fff}.fl--navy .kerbe{--f:var(--navy);color:#fff}
.lk .kerbe{--f:var(--navy);color:var(--gold)}

/* ---------- Leiste oben: schmale Insel in der Mitte, Sprache links in der Ecke, Buchen rechts in der Ecke ---------- */
.nav{position:fixed;z-index:60;top:18px;left:0;right:0;padding:0 var(--rand);pointer-events:none;transition:transform .8s var(--e2)}
.nav.weg{transform:translateY(-130%)}
.nav__insel{pointer-events:auto;width:fit-content;max-width:100%;margin:0 auto;height:62px;padding:0 9px 0 22px;border-radius:999px;
  display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,2.2vw,36px);
  border:1px solid rgba(220,198,143,.26);background:linear-gradient(180deg,rgba(18,48,94,.97),rgba(8,26,56,.97));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 30px -18px rgba(0,0,0,.85)}
.nav__logo{display:flex;align-items:center;gap:12px;color:#fff}
.nav__logo svg{height:26px;width:auto;color:var(--gold)}
.nav__logo b{font-family:var(--serif);font-weight:700;font-size:1.06rem;letter-spacing:.07em;white-space:nowrap}
.nav__links{display:flex;gap:clamp(14px,1.5vw,24px)}
.nav__links a{font-family:var(--mono);font-size:13.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.74);padding:10px 0;position:relative;transition:color .4s}
.nav__links a::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--e1)}
.nav__links a:hover,.nav__links a[aria-current]{color:#fff}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav__rechts{display:flex;align-items:center;gap:8px}
.nav__rechts .kn{display:none}
.burger{display:none;width:44px;height:44px;position:relative}
.burger span{position:absolute;left:14px;right:14px;height:1.2px;background:#fff;transition:transform .6s var(--e2)}
.burger span:first-child{top:19px}.burger span:last-child{top:25px}
.offen .burger span:first-child{transform:translateY(3px) rotate(45deg)}
.offen .burger span:last-child{transform:translateY(-3px) rotate(-45deg)}
/* Buchstaben rollen beim Überfahren durch – nur in den Menüpunkten der Leiste */
.rl{display:inline-flex;overflow:hidden;line-height:1.5;vertical-align:top;white-space:pre}
.rl i{position:relative;display:block;font-style:normal;transition:transform .55s cubic-bezier(.2,.7,.25,1);transition-delay:calc(var(--k,0)*16ms)}
.rl i::after{content:attr(data-b);position:absolute;left:0;top:100%;color:var(--gold)}
@media (hover:hover){.nav__links a:hover .rl i{transform:translateY(-100%)}}
.sprache{position:fixed;z-index:61;top:22px;left:max(18px,calc(var(--rand)*.5));display:flex;align-items:center;gap:7px;height:46px;padding:0 17px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;transition:transform .5s var(--e2)}
.sprache a{padding:6px 2px;color:rgba(255,255,255,.5);transition:color .3s}
.sprache a[aria-current="true"]{color:#fff;box-shadow:inset 0 -1px 0 var(--gold)}
.sprache a:hover{color:#fff}
.sprache i{font-style:normal;opacity:.35}
.eckknopf{position:fixed;z-index:61;top:22px;right:max(18px,calc(var(--rand)*.5));display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 22px 0 24px;font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;
  transition:--go .8s cubic-bezier(.25,1,.5,1),--gp .8s cubic-bezier(.25,1,.5,1),transform .5s var(--e2)}
.eckknopf svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.4;transition:transform .5s var(--e2)}
.eckknopf:hover svg{transform:translate(3px,-3px)}
.nav.weg~.sprache,.nav.weg~.eckknopf{transform:translateY(-220%)}
.menue{position:fixed;inset:0;z-index:55;background:var(--nacht);padding:112px var(--rand) 34px;display:flex;flex-direction:column;justify-content:space-between;gap:26px;overflow:auto;
  opacity:0;visibility:hidden;transition:opacity .5s var(--e2),visibility 0s .5s}
.offen .menue{opacity:1;visibility:visible;transition:opacity .5s var(--e2)}
.menue__links a{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,7.6vw,3rem);line-height:1.2;letter-spacing:0;overflow:hidden}
.menue__links a span{display:block;transform:translateY(105%);transition:transform .9s var(--e1);transition-delay:calc(var(--i)*55ms)}
.offen .menue__links a span{transform:none}
.menue__fuss{display:grid;gap:8px;font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.menue__fuss .kn{justify-self:start;margin-bottom:10px}

/* ---------- Auftakt: Vorhang mit dem Zeichen des Hauses ---------- */
.vorhang{position:fixed;inset:0;z-index:90;background:var(--nacht);display:grid;place-items:center;pointer-events:none;animation:vorhang 1s var(--e2) 1.05s forwards}
.vorhang svg{width:112px;height:auto;color:var(--gold);animation:emblem 1.1s var(--e1) both}
@keyframes vorhang{to{transform:translateY(-101%)}}
@keyframes emblem{0%{opacity:0;transform:scale(.86) translateY(14px)}45%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.kein-vorhang .vorhang{display:none}

/* ---------- Hero: echtes Foto über die volle Fläche, Titel unten links, Plan des Hauses unten rechts ---------- */
.hero{position:relative;height:100svh;min-height:660px;overflow:hidden;background:var(--nacht);display:flex;align-items:flex-end}
.hero__bild{position:absolute;inset:-7% 0 -7% 0;will-change:transform}
.hero__bild picture{display:block;width:100%;height:100%}
.hero__bild img{width:100%;height:100%;object-fit:cover;object-position:64% 42%;transform:scale(1.1);animation:heroein 2.6s var(--e1) .9s forwards}
.kein-vorhang .hero__bild img{animation-delay:0s}
@keyframes heroein{to{transform:none}}
.hero__in{position:relative;width:100%;max-width:calc(var(--max) + 2*var(--rand));margin:0 auto;padding:0 var(--rand) clamp(30px,4.4vw,58px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px}
.hero .z>span{transition-delay:1.25s}.hero .z:nth-child(2)>span{transition-delay:1.36s}
.kein-vorhang .hero .z>span{transition-delay:.1s}.kein-vorhang .hero .z:nth-child(2)>span{transition-delay:.2s}
.hero__sub{margin-top:26px;max-width:46ch;font-size:clamp(1rem,1.2vw,1.18rem);color:rgba(255,255,255,.84)}
.hero .kn-reihe{margin-top:30px}
.hero [data-r]{transition-delay:calc(1.5s + var(--i,0)*90ms)}
.kein-vorhang .hero [data-r]{transition-delay:calc(.35s + var(--i,0)*90ms)}
/* Schild des Hauses (auf der bisherigen Seite ein messingfarbenes Feld mit gekappten Ecken) */
.schild{display:inline-block;margin-bottom:clamp(16px,1.8vw,26px);padding:9px 20px 8px;background:var(--gold);color:var(--nacht);font-family:var(--serif);font-weight:400;font-size:.94rem;letter-spacing:0;
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px)}
/* Plan des Hauses als Wegweiser: jede Etage führt in ihr Kapitel */
.plan{position:relative;width:clamp(230px,23vw,348px);margin:0 0 4px}
.plan img{width:100%;height:auto;opacity:.92}
.plan a{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:flex-end}
.plan a::before{content:'';position:absolute;inset:0;border-radius:10px;background:rgba(220,198,143,.16);opacity:0;transition:opacity .35s}
.plan a:hover::before,.plan a:focus-visible::before{opacity:1}
.plan a span{position:relative;transform:translateX(-104%);margin-right:100%;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.82);white-space:nowrap;transition:color .3s}
.plan a span::after{content:'';width:clamp(18px,2.2vw,34px);height:1px;background:var(--gold)}
.plan a:hover span{color:var(--gold)}
.plan figcaption{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2);font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;line-height:1.7;color:rgba(255,255,255,.62);text-align:right}

/* ---------- Seitenkopf der Unterseiten: dunkel, Zeichen des Hauses, ein echtes Foto leise dahinter ---------- */
.sk{position:relative;overflow:hidden;padding:clamp(150px,16vw,220px) var(--rand) clamp(44px,5vw,76px);background:var(--nacht)}
.sk__hg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 50%;pointer-events:none;user-select:none}
.sk>.in{position:relative}
.sk__zeichen{display:block;width:clamp(52px,5vw,78px);height:auto;color:var(--gold);margin-bottom:clamp(18px,2vw,30px)}
.sk__zeile{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(30px,5vw,90px);align-items:end;margin-top:clamp(20px,2.4vw,34px)}
.sk__satz{font-weight:600;font-size:clamp(1.1rem,1.5vw,1.42rem);line-height:1.38;letter-spacing:-.008em;color:#fff;padding-top:18px;border-top:1px solid rgba(255,255,255,.22)}
.sk .kn-reihe{margin-top:26px}

/* ---------- Raster ---------- */
.zwei{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3.4vw,64px);align-items:center}
.zwei>.t{grid-column:1/7}.zwei>.b{grid-column:7/-1}
.zwei--um>.t{grid-column:7/-1;grid-row:1}.zwei--um>.b{grid-column:1/7;grid-row:1}
.zwei--oben{align-items:start}
.kopfzeile{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;margin-bottom:clamp(30px,3.8vw,60px)}
.kopfzeile .lauf{max-width:46ch}

/* ---------- Willkommen: Text links, zwei Fotos rechts, das zweite schiebt sich über die Ecke ---------- */
.paar{position:relative;padding:0 0 clamp(30px,5vw,70px) clamp(0px,3vw,50px)}
.paar .klein{position:absolute;right:-1.5%;bottom:0;width:44%}
.paar .klein .rahmen{background:var(--papier);box-shadow:inset 0 0 0 1px rgba(12,21,38,.1),0 30px 44px -30px rgba(12,21,38,.6)}
.unterschrift{margin-top:26px;font-family:var(--serif);font-weight:400;font-size:1.02rem;letter-spacing:0}
/* Zeichen des Hauses, gross und leise hinter einem Bild */
.zeichen-hinter{position:absolute;z-index:0;right:-4%;top:-13%;width:38%;color:var(--taupe);opacity:.2}
.zeichen-hinter+*{position:relative;z-index:1}

/* ---------- Dreiklang: drei Bilder schweben herauf, darunter je ein grosses Wort ---------- */
.drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,34px);align-items:start;margin-top:clamp(50px,6vw,96px);padding-bottom:clamp(10px,2vw,30px)}
.drei figure:nth-child(2){margin-top:clamp(40px,7vw,112px)}
.drei figure:nth-child(3){margin-top:clamp(14px,2.6vw,42px)}
.drei figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:16px}
.drei figcaption b{display:block;overflow:hidden;padding-top:.1em;font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3.3vw,3.5rem);line-height:1.06;letter-spacing:0}
.drei figcaption span{font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;opacity:.6;text-align:right}
.schweb{will-change:transform}

/* ---------- Fenster: ein stehendes Bild zwischen zwei Abschnitten. Der Abschnitt ist ein Ausschnitt, die Seite zieht darüber (clip-path, kein Skript) ---------- */
.bruch{position:relative;min-height:min(58vh,560px);clip-path:inset(0);background:var(--nacht);color:#fff;overflow:hidden}
.bruch>img{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;object-fit:cover}
.bruch .in{position:fixed;left:0;right:0;top:50%;width:auto;max-width:calc(var(--max) + 2*var(--rand));margin:0 auto;padding:0 var(--rand);transform:translateY(-50%)}
.bruch .d2{font-size:clamp(2rem,5vw,5.3rem);text-shadow:0 2px 26px rgba(4,12,28,.6)}
.bruch .mono{display:block;margin-top:20px;color:rgba(255,255,255,.86);text-shadow:0 1px 14px rgba(4,12,28,.7)}
@media (max-width:860px){.bruch{min-height:54svh}}

/* ---------- Die grossen Zahlen: eigener Abschnitt, riesige Ziffern steigen aus einer Linie und zählen hoch ---------- */
.prunk{position:relative;background:var(--navy);color:#fff;padding:clamp(78px,9vw,150px) var(--rand) clamp(70px,8vw,130px);overflow:hidden}
.prunk__satz{font-family:var(--serif);font-weight:400;font-size:clamp(1rem,1.35vw,1.34rem);letter-spacing:.1em;color:var(--gold);text-align:center;margin-bottom:clamp(36px,4.6vw,70px)}
.prunk .in{position:relative;padding:clamp(40px,5vw,80px) 0;border-top:1px solid rgba(220,198,143,.26);border-bottom:1px solid rgba(220,198,143,.26)}
.prunk .in::before,.prunk .in::after{content:'';position:absolute;left:0;right:0;height:1px;background:rgba(220,198,143,.12)}
.prunk .in::before{top:7px}.prunk .in::after{bottom:7px}
.prunk__r{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr}
.prunk__z{position:relative;display:grid;justify-items:center;text-align:center;padding:0 clamp(10px,1.6vw,28px)}
.prunk__z+.prunk__z::before{content:'';position:absolute;left:0;top:8%;bottom:8%;width:1px;background:rgba(220,198,143,.22)}
.prunk__z b{display:block;overflow:hidden;font-family:var(--serif);font-weight:400;font-size:clamp(4rem,10.6vw,11.4rem);line-height:1;letter-spacing:-.012em;color:var(--papier);padding:.04em 0 .07em;font-variant-numeric:tabular-nums lining-nums}
.prunk__z b span{display:block;transform:translateY(104%);transition:transform 1.7s var(--e3);transition-delay:calc(var(--i,0)*140ms + .1s)}
.prunk__z.da b span{transform:none}
.prunk__z i{display:block;width:clamp(40px,5vw,84px);height:1px;background:var(--gold);margin:clamp(14px,1.8vw,26px) 0 clamp(12px,1.4vw,20px);transform:scaleX(0);transition:transform 1.4s var(--e1);transition-delay:calc(var(--i,0)*140ms + .7s)}
.prunk__z.da i{transform:none}
.prunk__z em{font-style:normal;font-family:var(--serif);font-weight:400;font-size:clamp(.84rem,1.05vw,1.06rem);letter-spacing:0;color:rgba(255,255,255,.8);max-width:16ch}
.prunk__z[data-r]{transform:none}
.prunk--drei .prunk__r{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- Bühne: vier Etagen. Angeheftete Strecke, je Etage fünf Abzüge, die nacheinander von unten landen ---------- */
.buehne{position:relative;background:var(--nacht);color:#fff}
.buehne__kopf{padding:var(--abschnitt) var(--rand) clamp(22px,3vw,44px)}
.buehne__kopf .in{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 60px;flex-wrap:wrap}
.buehne__kopf .lauf{max-width:44ch}
.buehne__strecke{height:400vh;position:relative}
.buehne__halt{position:sticky;top:0;height:100vh;min-height:640px;padding:96px var(--rand) 30px;display:grid;grid-template-columns:minmax(340px,.82fr) 1.18fr;gap:clamp(24px,3.4vw,64px);max-width:calc(var(--max) + 2*var(--rand));margin:0 auto}
.buehne__texte{position:relative}
.haus{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:0;opacity:0;visibility:hidden;will-change:opacity;transition:opacity .45s var(--e2),visibility 0s .45s}
.haus.an{opacity:1;visibility:visible;transition:opacity .7s var(--e2) .25s}
.haus__art{margin-top:16px;font-family:var(--mono);font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.haus .lauf{margin-top:20px;max-width:44ch}
.haus__zeile{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;margin-top:26px;padding:16px 0;border-block:1px solid rgba(255,255,255,.16)}
.haus__zeile div{padding:2px clamp(14px,1.8vw,28px);border-left:1px solid rgba(255,255,255,.18)}
.haus__zeile div:first-child{border-left:0;padding-left:0}
.haus__zeile dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.haus__zeile dd{margin-top:7px;font-family:var(--serif);font-weight:400;font-size:clamp(.95rem,1.25vw,1.26rem);line-height:1.12;letter-spacing:0;}
.haus .kn-reihe{margin-top:26px}
.buehne__bilder{position:relative}
.polas{position:absolute;inset:0;opacity:0;transition:opacity .4s var(--e2);pointer-events:none}
.polas.an{opacity:1}
.pola{position:absolute;left:50%;top:50%;width:min(39%,36vh);margin:0;padding:2.1% 2.1% 0;background:linear-gradient(180deg,#fbf6ea,#efe6d2);box-shadow:0 30px 50px -24px rgba(0,0,0,.95),0 2px 0 rgba(255,255,255,.5) inset,0 0 0 1px rgba(0,0,0,.1);
  translate:-50% -50%;opacity:0;transform:translate3d(calc(var(--x)*.6),95%,0) rotate(calc(var(--r)*2.6)) scale(calc(var(--s,1)*.86));transition:opacity .6s var(--e2),transform 1.3s var(--e1);will-change:transform}
.pola img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;outline:1px solid rgba(0,0,0,.14);outline-offset:-1px}
.pola figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;height:clamp(34px,3.5vw,52px);font-family:var(--mono);font-size:clamp(9px,.76vw,11px);letter-spacing:.15em;text-transform:uppercase;color:#1a2740}
.pola figcaption svg{flex:none;width:clamp(22px,2.1vw,30px);height:auto;color:var(--taupe)}
.pola.da{opacity:1;transform:translate3d(var(--x),var(--y),0) rotate(var(--r)) scale(var(--s,1))}
.polas:not(.an) .pola{transition-duration:0s;transition-delay:.42s}
.p1::before,.p2::before{content:'';position:absolute;left:50%;top:-11px;width:34%;height:22px;margin-left:-17%;background:#d3c39c;box-shadow:0 1px 0 rgba(255,255,255,.35) inset;transform:rotate(-4deg)}
.p2::before{transform:rotate(5deg);background:#c7b78f;margin-left:-4%}
.p1{--x:-74%;--y:-60%;--r:-8deg;--s:.94;z-index:1}
.p2{--x:72%;--y:-57%;--r:6deg;--s:1;z-index:2}
.p3{--x:-66%;--y:58%;--r:4deg;--s:1.02;z-index:3}
.p4{--x:76%;--y:60%;--r:-7deg;--s:.94;z-index:4}
.p5{--x:2%;--y:0%;--r:-2deg;--s:1.1;z-index:5;transition:opacity .5s var(--e2),transform 1.25s cubic-bezier(.2,1.25,.3,1)}
/* jede Etage legt ihre Abzüge anders aus */
@media (min-width:861px){
  .polas--b .p1{--x:-84%;--y:-36%;--r:5deg;--s:.9}.polas--b .p2{--x:-2%;--y:-70%;--r:-4deg;--s:.88}.polas--b .p3{--x:-78%;--y:56%;--r:-6deg;--s:.96}.polas--b .p4{--x:84%;--y:-30%;--r:7deg;--s:.92}.polas--b .p5{--x:30%;--y:34%;--r:3deg;--s:1.22}
  .polas--c .p1{--x:-80%;--y:-58%;--r:-5deg;--s:.86}.polas--c .p2{--x:80%;--y:-60%;--r:8deg;--s:.86}.polas--c .p3{--x:-82%;--y:50%;--r:7deg;--s:.86}.polas--c .p4{--x:82%;--y:52%;--r:-5deg;--s:.86}.polas--c .p5{--x:0%;--y:-2%;--r:1deg;--s:1.34}
  .polas--d .p1{--x:-88%;--y:8%;--r:-7deg;--s:.84}.polas--d .p2{--x:86%;--y:-48%;--r:6deg;--s:.9}.polas--d .p3{--x:-40%;--y:66%;--r:5deg;--s:.86}.polas--d .p4{--x:84%;--y:56%;--r:-6deg;--s:.9}.polas--d .p5{--x:-8%;--y:-22%;--r:-2deg;--s:1.3}
}
/* Lift: zeigt die Etage, auf der man steht */
.lift{position:absolute;z-index:3;right:calc(var(--rand)*.5);top:50%;translate:0 -50%;display:grid;gap:6px;justify-items:center;padding:14px 8px 10px;border-radius:999px;border:1px solid rgba(220,198,143,.3);background:linear-gradient(180deg,#12305e,#081a38)}
.lift small{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.lift ol{position:relative;display:grid;gap:6px}
.lift li{display:grid;place-items:center;width:34px;height:34px;font-family:var(--serif);font-weight:400;font-size:.9rem;color:rgba(255,255,255,.5);position:relative;z-index:1;transition:color .4s}
.lift li.an{color:var(--nacht)}
.lift .kabine{position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,#fbf3e2,#cfbd98);box-shadow:inset 0 1px 0 #fff,0 4px 10px rgba(0,0,0,.5);transition:transform .9s var(--e1)}
.polas--m{display:none}

/* ---------- Band zum Blättern: nativer Seitwärts-Scroll, Wischen, Ziehen, Pfeile, Laufbalken ---------- */
.gang__kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,44px)}
.band{display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--rand);padding:4px var(--rand) 26px;margin:0 calc(-1*var(--rand));scrollbar-width:none;cursor:grab}
.band::-webkit-scrollbar{display:none}
.band.zieht{cursor:grabbing;scroll-snap-type:none}
.band>*{flex:none;scroll-snap-align:start}
.band img{pointer-events:none;-webkit-user-drag:none}
/* grosse Karte: Bild links, Text rechts */
.lk{display:grid;grid-template-columns:1.08fr 1fr;width:min(1120px,80vw);min-height:clamp(420px,39vw,570px);border-radius:var(--r-xl);overflow:hidden;background:var(--navy);color:#fff}
.lk__b{position:relative;min-height:0;background:#0e2347}
.lk__b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--e1)}
.lk:hover .lk__b img{transform:scale(1.035)}
.lk__t{display:flex;flex-direction:column;justify-content:space-between;gap:26px;padding:clamp(24px,3.2vw,50px)}
.lk__nr{font-family:var(--serif);font-weight:400;font-size:1rem;letter-spacing:0;color:var(--gold)}
.lk h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.9vw,3rem);line-height:1.06;letter-spacing:0;color:var(--papier);text-wrap:balance}
.lk__ort{display:block;margin-top:14px;font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.lk p{margin-top:18px;font-size:clamp(.96rem,1.05vw,1.06rem);line-height:1.62;color:rgba(255,255,255,.78);max-width:52ch}
.lk .kn-reihe{margin-top:22px}
.fl--nacht .lk,.fl--navy .lk.hell{background:var(--papier);color:var(--tinte)}
.fl--nacht .lk h3{color:var(--tinte)}.fl--nacht .lk p{color:rgba(12,21,38,.8)}.fl--nacht .lk__nr,.fl--nacht .lk__ort{color:var(--taupe)}
/* Bogen: Bild mit rundem Kopf, Name und Angabe mittig darunter, keine Kachel */
.bogen{width:clamp(230px,21vw,320px);text-align:center}
.bogen__b{position:relative;display:block;aspect-ratio:4/5;border-radius:999px 999px 22px 22px;overflow:hidden;background:#0e2347}
.bogen__b img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e1)}
.bogen:hover .bogen__b img{transform:scale(1.05)}
.bogen h3{margin-top:18px;font-family:var(--serif);font-weight:400;font-size:clamp(1.02rem,1.28vw,1.3rem);line-height:1.15;letter-spacing:0;}
.bogen p{margin-top:8px;font-size:1rem;line-height:1.45;opacity:.76}
.bogen b{display:block;margin-top:10px;font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.fl--papier .bogen b,.fl--creme .bogen b{color:var(--taupe)}

/* ---------- Namen als Laufband: ein Zug mit zwei gleichen Hälften, nur transform, läuft nur im Bild ---------- */
.laufband{overflow:hidden;margin:clamp(30px,4vw,60px) calc(var(--rand)*-1) 0;padding:clamp(18px,2.2vw,32px) 0;border-block:1px solid rgba(12,21,38,.16)}
.laufband--hell{border-color:rgba(255,255,255,.16)}
.laufband__zug{display:flex;width:max-content;align-items:center;animation:lauf var(--t,56s) linear infinite;animation-play-state:paused}
.laufband.laeuft .laufband__zug{animation-play-state:running;will-change:transform}
.laufband li{flex:none;display:flex;align-items:center;gap:clamp(30px,4vw,70px);padding-right:clamp(30px,4vw,70px);font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,2.3vw,2.3rem);letter-spacing:0;white-space:nowrap}
.laufband li::after{content:'';width:clamp(26px,3vw,50px);height:1px;background:currentColor;opacity:.5}
.laufband li:nth-child(even){opacity:.5}
@keyframes lauf{to{transform:translate3d(-50%,0,0)}}
@media (hover:hover){.laufband:hover .laufband__zug{animation-play-state:paused}}

/* ---------- Lage: Bild über die volle Breite, helle Tafel liegt darüber, Angaben gross daneben ---------- */
.ort__b .rahmen__k{aspect-ratio:21/9}
.ort__unten{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,70px);align-items:end;margin-top:calc(-1*clamp(70px,10vw,150px));padding:0 clamp(14px,3vw,48px)}
.tafel{display:grid;gap:18px;justify-items:start;padding:clamp(24px,3vw,44px);border-radius:6px;color:var(--tinte);background:linear-gradient(180deg,#fbf3e2,#ecdfc4 60%,#dfd0af);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 0 #a39370,0 34px 50px -30px rgba(0,0,0,.9)}
.tafel .d3 em{color:var(--taupe)}
.tafel .lauf{color:rgba(12,21,38,.8)}
.fl--papier .tafel,.fl--creme .tafel{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 0 #a39370,0 34px 50px -30px rgba(74,58,26,.7)}
.koord{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:end;padding-bottom:6px}
.koord div{padding:4px clamp(14px,2vw,30px);border-left:1px solid rgba(255,255,255,.2)}
.koord div:first-child{border-left:0;padding-left:0}
.koord dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.koord dd{margin-top:8px;font-family:var(--serif);font-weight:400;font-size:clamp(1.05rem,1.6vw,1.66rem);line-height:1.1;letter-spacing:0;}
.fl--papier .koord div,.fl--creme .koord div{border-color:rgba(12,21,38,.2)}
.fl--papier .koord dt,.fl--creme .koord dt{color:var(--taupe)}
.koord--links{justify-content:start}

/* ---------- Grosse Liste mit Bildstapel: Zeilen in der Titelschrift, das Foto wechselt mit der Zeile ---------- */
.wahl{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,70px);align-items:center}
.wahl__b{position:relative}
.wahl__b .rahmen__k{aspect-ratio:4/5}
.wahl__b .rahmen__k img{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--e2),transform 1.6s var(--e1);transform:scale(1.06)}
.wahl__b .rahmen__k img.an{opacity:1;transform:none}
.wahl__l li{border-top:1px solid rgba(12,21,38,.16)}
.wahl__l li:last-child{border-bottom:1px solid rgba(12,21,38,.16)}
.fl--nacht .wahl__l li,.fl--navy .wahl__l li{border-color:rgba(255,255,255,.16)}
.wahl__l a,.wahl__l button{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 24px;width:100%;text-align:left;padding:clamp(16px,1.8vw,26px) 0}
.wahl__l strong{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.9vw,3rem);line-height:1.06;letter-spacing:0;opacity:.36;transition:opacity .5s,transform .7s var(--e1)}
.wahl__l li.an strong{opacity:1;transform:translateX(clamp(8px,1vw,16px))}
.wahl__l span{grid-column:1;display:block;max-width:52ch;font-size:1rem;line-height:1.55;opacity:0;max-height:0;overflow:hidden;transition:opacity .5s,max-height .7s var(--e1);padding-left:clamp(8px,1vw,16px)}
.wahl__l li.an span{opacity:.82;max-height:9em}
.wahl__l i{grid-row:1;grid-column:2;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#1f3f77,#0b1f40 50%,#040d1e);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -2px 0 rgba(0,0,0,.55),0 10px 16px -10px rgba(6,20,43,.7);opacity:0;transform:scale(.8);transition:opacity .4s,transform .6s var(--e2)}
.fl--nacht .wahl__l i,.fl--navy .wahl__l i{color:var(--tinte);background:linear-gradient(180deg,#fbf3e2,#e8dbbf 50%,#cfbd98);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(110,88,44,.36)}
.wahl__l li.an i{opacity:1;transform:none}
.wahl__l i svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.2}

/* ---------- Regler: eine Wahl auf einer Schiene ---------- */
.regler{-webkit-appearance:none;appearance:none;width:100%;height:46px;background:transparent;margin:0;cursor:grab}
.regler::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:rgba(12,21,38,.14);box-shadow:inset 0 1px 2px rgba(12,21,38,.3)}
.regler::-moz-range-track{height:8px;border-radius:999px;background:rgba(12,21,38,.14)}
.regler::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:44px;margin-top:-18px;border-radius:50%;background:linear-gradient(180deg,#1f3f77,#0b1f40 50%,#040d1e);border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.55),0 0 0 5px var(--gold),0 12px 18px -8px rgba(6,20,43,.7)}
.regler::-moz-range-thumb{width:34px;height:34px;border-radius:50%;background:#0b1f40;border:5px solid var(--gold)}
.fl--nacht .regler::-webkit-slider-runnable-track,.fl--navy .regler::-webkit-slider-runnable-track{background:rgba(255,255,255,.16);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.fl--nacht .regler::-webkit-slider-thumb,.fl--navy .regler::-webkit-slider-thumb{background:linear-gradient(180deg,#fbf3e2,#e8dbbf 50%,#cfbd98);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(110,88,44,.4),0 0 0 5px #12305e,0 12px 18px -8px rgba(0,0,0,.8)}
.skala{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;opacity:.62}
/* Stufe: grosses Bild, daneben die Angaben, die mit dem Regler wechseln */
.stufe{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3.6vw,64px);align-items:center}
.stufe__b{position:relative}
.stufe__b .rahmen__k{aspect-ratio:3/2}
.stufe__b .rahmen__k img{position:absolute;inset:0;opacity:0;transform:scale(1.07);transition:opacity .7s var(--e2),transform 1.6s var(--e1)}
.stufe__b .rahmen__k img.an{opacity:1;transform:none}
.stufe__nr{font-family:var(--serif);font-weight:400;font-size:clamp(4rem,8.4vw,8.6rem);line-height:.9;letter-spacing:-.01em;font-variant-numeric:lining-nums}
.stufe__nr small{font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:.13em;text-transform:uppercase;margin-left:14px;opacity:.6}
.stufe h3{margin-top:14px}
.stufe .lauf{margin-top:16px;min-height:7.6em}
.stufe__mit{margin:18px 0 20px;padding:16px 0;border-block:1px solid rgba(12,21,38,.16);font-weight:600;font-size:1.02rem;line-height:1.5;min-height:4.6em}
.fl--nacht .stufe__mit,.fl--navy .stufe__mit{border-color:rgba(255,255,255,.18)}
.stufe .kn-reihe{margin-top:26px}

/* ---------- Auswahl mit Reitern: eine Bühne, die mit dem Reiter wechselt ---------- */
.pakete{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,70px);align-items:center}
.pakete__preis{font-family:var(--serif);font-weight:400;font-size:clamp(3.6rem,8.6vw,9rem);line-height:.96;letter-spacing:-.01em;font-variant-numeric:lining-nums;margin:clamp(22px,2.6vw,38px) 0 6px}
.pakete__preis small{display:block;font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:.13em;text-transform:uppercase;opacity:.66;margin-bottom:12px}
.pakete .gross{margin-top:18px;max-width:34ch}
.pakete .lauf{margin-top:14px}
.pakete__b .rahmen__k{aspect-ratio:4/5}
.wechsel{position:relative}
.wechsel>*{transition:opacity .6s var(--e2)}
.wechsel>[hidden]{display:block!important;position:absolute;inset:0;opacity:0;pointer-events:none;visibility:hidden}
.pakete__b .rahmen__k img{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity .7s var(--e2),transform 1.6s var(--e1)}
.pakete__b .rahmen__k img.an{opacity:1;transform:none}

/* ---------- Blatt: ein heller Bogen Papier auf dunklem Grund (Karte, Preise, Zeitleiste) ---------- */
.blatt{position:relative;padding:clamp(26px,3.4vw,54px);border-radius:var(--r-l);background:linear-gradient(180deg,#fdf8ec,#f4ecdc);color:var(--tinte);box-shadow:inset 0 0 0 1px rgba(110,88,44,.18),0 4px 0 #a39370,0 40px 60px -36px rgba(0,0,0,.9)}
.blatt::before{content:'';position:absolute;inset:9px;border:1px solid rgba(110,88,44,.28);border-radius:calc(var(--r-l) - 9px);pointer-events:none}
.blatt__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:16px;border-bottom:1px solid rgba(12,21,38,.2)}
.gericht{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;padding:15px 0;border-bottom:1px solid rgba(12,21,38,.12)}
.gericht b{font-family:var(--serif);font-weight:400;font-size:clamp(1rem,1.2vw,1.18rem);letter-spacing:0;line-height:1.2}
.gericht i{font-style:normal;font-family:var(--serif);font-weight:400;font-size:1.05rem;font-variant-numeric:lining-nums;white-space:nowrap}
.gericht span{grid-column:1/-1;font-size:.97rem;line-height:1.5;opacity:.74;max-width:54ch}
.blatt .kn-reihe{margin-top:24px}

/* ---------- Schmaler Ausklang der Unterseiten ---------- */
.ausklang{background:var(--nacht);padding:clamp(40px,4.6vw,66px) var(--rand);border-top:1px solid rgba(255,255,255,.1)}
.ausklang .in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:22px 40px}
.ausklang p{font-weight:600;font-size:clamp(1.12rem,1.6vw,1.5rem);line-height:1.32;letter-spacing:-.01em;color:#fff;max-width:36ch}

/* ---------- Schluss der Startseite: echtes Foto leise im Hintergrund ---------- */
.schluss{position:relative;overflow:hidden;background:var(--nacht);color:#fff;padding:clamp(100px,12vw,190px) var(--rand) clamp(70px,8vw,120px);text-align:center}
.schluss>.in{position:relative}
.schluss .sk__zeichen{margin-inline:auto}
.schluss .kn-reihe{justify-content:center;margin-top:clamp(26px,3vw,40px)}
.schluss .koord{justify-content:center;margin-top:clamp(40px,5vw,70px);text-align:left}

/* ---------- Fuss: Satz des Hauses gross, Zeichen in der Ecke, Häuser der Familie als Karten mit Bild, Linkspalten mit Linie und Pfeil ---------- */
.fuss{position:relative;overflow:hidden;background:var(--nacht);color:#fff;padding:clamp(60px,6.6vw,104px) var(--rand) 26px}
.ausklang+.fuss{border-top:1px solid rgba(255,255,255,.1)}
.fuss__kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.fuss__marke svg{height:clamp(54px,5.4vw,84px);width:auto;color:#fff}
.fuss__marke svg .mono-ce{color:var(--gold)}
.fuss__marke p{margin-top:clamp(20px,2.4vw,34px);font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,4.2vw,4.3rem);line-height:1.06;letter-spacing:0}
.fuss__netz{display:flex;gap:10px;margin-top:clamp(22px,2.4vw,34px)}
.rund{width:48px;height:48px;color:var(--gold)}
.rund svg{width:20px;height:20px;stroke-width:1.5}
.fuss__ecke{flex:none;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.3vw,20px);margin:0 clamp(0px,1.6vw,26px) 4px 0}
.fuss__ecke svg{width:clamp(110px,14vw,214px);height:auto;color:var(--gold);opacity:.92}
.fuss__ecke small{font-family:var(--mono);font-size:clamp(8.5px,.78vw,11px);letter-spacing:.13em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.fuss__haeuser{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.5vw,24px);margin-top:clamp(40px,4.6vw,72px)}
.fh{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:linear-gradient(180deg,#12305e,#0b2148);border-radius:6px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 22px 40px -28px rgba(0,0,0,.9)}
.fh__bild{position:relative;display:block;overflow:hidden;min-height:190px}
.fh__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e2)}
.fh:hover .fh__bild img{transform:scale(1.06)}
.fh__t{display:flex;flex-direction:column;padding:clamp(18px,1.6vw,26px);min-width:0}
.fh h3{font-family:var(--serif);font-weight:400;font-size:clamp(1rem,1.18vw,1.26rem);line-height:1.12;letter-spacing:0}
.fh address{margin-top:10px;font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.74)}
.fh__zeit{margin-top:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;color:var(--gold)}
.fh__kn{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:auto;padding-top:18px}
.fuss__oben{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,3.4vw,64px);margin-top:clamp(42px,4.6vw,76px)}
.fuss h4{display:flex;align-items:center;gap:14px;margin-bottom:6px;font-family:var(--serif);font-weight:400;font-size:.92rem;letter-spacing:0;color:var(--gold)}
.fuss h4::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.14)}
.fuss__sp li{border-bottom:1px solid rgba(255,255,255,.08)}
.fl-link{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;font-size:.97rem;line-height:1.3;color:rgba(255,255,255,.8);transition:color .3s}
.fl-link i{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);opacity:.6;transition:opacity .35s,transform .5s var(--e2),background-color .3s}
.fl-link i svg{display:block;width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.3}
.fl-link:hover{color:#fff}
.fl-link:hover i{opacity:1;transform:translate(2px,-2px);background:rgba(220,198,143,.2)}
.fuss__unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px;margin-top:clamp(36px,4vw,60px);padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.fuss__unten a:hover{color:#fff}
.fuss__unten .studie{color:rgba(255,255,255,.42)}
.plaketten{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px)}
.plaketten img{height:clamp(46px,4.6vw,64px);width:auto}

/* ---------- Buchen: Fenster mit Datum und Gästen, feiner Innenrahmen, Zeichen des Hauses oben ---------- */
dialog.buchen{width:min(880px,calc(100% - 28px));max-height:calc(100dvh - 28px);padding:0;border:0;border-radius:var(--r-xl);background:var(--navy);color:#fff;overflow:auto;box-shadow:0 60px 120px -40px #000}
dialog.buchen::backdrop{background:rgba(3,10,24,.82)}
.buchen__in{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.buchen__in::before{content:'';position:absolute;inset:10px;border:1px solid rgba(220,198,143,.26);border-radius:calc(var(--r-xl) - 10px);pointer-events:none;z-index:2}
.buchen__b{position:relative;min-height:320px;background:#0e2347}
.buchen__b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.buchen__t{padding:clamp(30px,4vw,54px) clamp(26px,3.4vw,48px) clamp(26px,3vw,40px)}
.buchen__t svg.z-ce{width:54px;height:auto;color:var(--gold);margin-bottom:18px}
.buchen .zu{position:absolute;z-index:3;right:22px;top:22px;width:44px;height:44px}
.buchen .zu svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.4}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.feld{display:grid;gap:5px;padding:12px 16px;border-radius:6px;background:rgba(3,10,24,.42);box-shadow:inset 0 1px 3px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.1)}
.feld--ganz{grid-column:1/-1}
.feld span{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.feld input,.feld select,.feld textarea{width:100%;min-width:0;border:0;background:transparent;color:#fff;font:500 1.04rem var(--sans);padding:0;color-scheme:dark;appearance:none;-webkit-appearance:none;resize:vertical}
.feld select option{color:#000}
.buchen form .kn{margin-top:18px;width:100%;justify-content:space-between}
.buchen__vorteil{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.76)}
/* Felder auf hellen Flächen */
.fl--papier .feld,.fl--creme .feld,.blatt .feld{background:rgba(255,255,255,.5);box-shadow:inset 0 1px 3px rgba(74,58,26,.28),inset 0 0 0 1px rgba(110,88,44,.2)}
.fl--papier .feld span,.fl--creme .feld span,.blatt .feld span{color:var(--taupe)}
.fl--papier .feld input,.fl--papier .feld select,.fl--papier .feld textarea,.fl--creme .feld input,.fl--creme .feld select,.fl--creme .feld textarea,.blatt .feld input,.blatt .feld select,.blatt .feld textarea{color:var(--tinte);color-scheme:light}

/* ---------- Rechtstexte: Inhaltsfeld links (bleibt stehen), Text als Blatt rechts ---------- */
.recht{display:grid;grid-template-columns:minmax(220px,3fr) minmax(0,8fr);gap:clamp(24px,4vw,70px);align-items:start}
.recht__inhalt{position:sticky;top:110px;padding:22px;border-radius:var(--r-m);background:var(--navy);color:#fff}
.recht__inhalt b{display:block;font-family:var(--serif);font-size:.92rem;letter-spacing:0;color:var(--gold);margin-bottom:10px}
.recht__inhalt a{display:block;padding:9px 0;border-top:1px solid rgba(255,255,255,.12);font-size:.93rem;line-height:1.35;color:rgba(255,255,255,.74);transition:color .3s,padding .4s var(--e1)}
.recht__inhalt a.an,.recht__inhalt a:hover{color:#fff;padding-left:8px}
.recht__text h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,1.5vw,1.5rem);letter-spacing:0;line-height:1.2;margin:1.9em 0 .6em;scroll-margin-top:110px}
.recht__text h2:first-child{margin-top:0}
.recht__text h3{font-family:var(--sans);font-weight:600;font-size:1.06rem;margin:1.4em 0 .4em}
.recht__text p,.recht__text li{font-size:1rem;line-height:1.68;color:rgba(12,21,38,.84)}
.recht__text p+p{margin-top:.8em}
.recht__text ul{list-style:disc;padding-left:1.2em;margin:.6em 0}
.recht__text a{box-shadow:inset 0 -1px 0 currentColor;word-break:break-word}

/* ---------- Kleinere Schirme ---------- */
@media (max-width:1180px){
  .fuss__haeuser{grid-template-columns:repeat(3,minmax(0,1fr))}.fh{grid-template-columns:minmax(0,1fr)}.fh__bild{min-height:0;aspect-ratio:16/10}
  .lift{display:none}
}
@media (max-width:1060px){
  .sprache,.eckknopf{display:none}
  .nav__links{display:none}.burger{display:grid}.nav__rechts .kn{display:inline-flex}
  .nav__insel{width:auto;max-width:560px;padding-left:20px}
  .plan{display:none}
  .hero__in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  :root{--abschnitt:clamp(64px,13vw,96px)}
  .nav{top:12px}.nav__insel{max-width:none;height:58px}
  .hero{min-height:560px}
  .hero__bild img{object-position:50% 40%}
  .sk__zeile,.zwei,.wahl,.stufe,.pakete,.recht,.buchen__in{grid-template-columns:minmax(0,1fr)}
  .zwei>.t,.zwei>.b,.zwei--um>.t,.zwei--um>.b{grid-column:1/-1;grid-row:auto}
  .paar{padding:0 0 46px}.paar .klein{right:0;width:48%}
  .drei{grid-template-columns:minmax(0,1fr);gap:26px}.drei figure:nth-child(n){margin-top:0}
  .drei .rahmen__k{aspect-ratio:3/2!important}
  [data-r="schweb"]{transform:translateY(70px) scale(.96)}
  .prunk__r,.prunk--drei .prunk__r{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:50px}
  .prunk__z:nth-child(3)::before{content:none}
  .prunk__z b{font-size:clamp(3.4rem,17vw,6rem)}
  /* Bühne am Handy: ruhige Grundform, jede Etage ein eigener Block mit ihren Abzügen */
  .buehne__strecke{height:auto}
  .buehne__halt{position:static;height:auto;min-height:0;display:block;padding:10px var(--rand) 40px}
  .buehne__bilder{display:none}
  .haus{position:static;opacity:1;visibility:visible;display:block;padding:34px 0 10px;border-top:1px solid rgba(255,255,255,.14)}
  .haus:first-child{border-top:0}
  .polas--m{display:block;position:relative;inset:auto;height:118vw;max-height:540px;margin:6px 0 30px;opacity:1}
  .polas--m .pola{width:40%}
  .polas--m .pola figcaption{height:32px;font-size:7.5px;letter-spacing:.08em}
  .polas--m .pola figcaption svg{width:18px}
  .polas--m .p1{--x:-62%;--y:-56%}.polas--m .p2{--x:60%;--y:-50%}.polas--m .p3{--x:-58%;--y:54%}.polas--m .p4{--x:62%;--y:58%}
  .polas--m .p1::before,.polas--m .p2::before{top:-7px;height:14px}
  .polas--m.an .pola{opacity:1;transform:translate3d(var(--x),var(--y),0) rotate(var(--r)) scale(var(--s,1));transition-delay:calc(var(--k)*.15s)}
  .polas--m:not(.an) .pola{transition-duration:0s;transition-delay:0s}
  .haus__zeile{grid-template-columns:minmax(0,1fr);gap:12px}.haus__zeile div{border-left:0;padding:0}
  .lk{grid-template-columns:minmax(0,1fr);width:84vw;min-height:0}.lk__b{aspect-ratio:4/3}.lk__t{gap:20px}
  .bogen{width:62vw}
  .ort__b .rahmen__k{aspect-ratio:4/3}.ort__unten{grid-template-columns:minmax(0,1fr);margin-top:-46px;padding:0 10px}
  .koord{grid-template-columns:minmax(0,1fr);gap:12px;justify-content:start}.koord div{border-left:0;padding:0}
  .schluss .koord{justify-items:center;text-align:center}
  .wahl__b .rahmen__k{aspect-ratio:3/2}
  .wahl__l li strong{opacity:1}.wahl__l li span{opacity:.82;max-height:none}.wahl__l li i{opacity:1;transform:none}
  .stufe .lauf,.stufe__mit{min-height:0}
  .recht__inhalt{position:static}
  .fuss__haeuser{grid-template-columns:minmax(0,1fr)}.fh{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}.fh__bild{aspect-ratio:auto;min-height:170px}
  .fuss__oben{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pfeile button{width:46px;height:46px}
  .buchen__b{min-height:180px}
  .felder{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .fuss__kopf{align-items:flex-start}.fuss__ecke svg{width:86px}.fuss__ecke small{font-size:7.5px;letter-spacing:.2em}
  .kn{height:52px;padding-left:22px;letter-spacing:.14em}
  .nav__logo b{font-size:.92rem;letter-spacing:.05em}.nav__rechts .kn{height:42px;padding:0 16px;font-size:10px}.nav__rechts .kn i{display:none}
  .fh__kn .kn{width:100%;justify-content:space-between}
}
@media (max-width:380px){.nav__logo b{display:none}.d1{font-size:2.2rem}}
@media (prefers-reduced-motion:reduce){
  .laufband__zug{animation:none!important;flex-wrap:wrap;width:auto;justify-content:center;row-gap:14px}
  .laufband li[aria-hidden]{display:none}
  .glanz,.glanz--laeuft{animation:none!important}.rl i{transition:none}
  .pola{opacity:1!important;transform:translate3d(var(--x),var(--y),0) rotate(var(--r)) scale(var(--s,1))!important}
  .vorhang{display:none}
}

/* ---------- Nachträge Startseite ---------- */
em{font-style:normal}
.hero .d1{font-size:clamp(2.5rem,6vw,6.3rem)}
.hero .z>span{white-space:nowrap}
.hero .z:nth-child(3)>span{transition-delay:1.47s}.kein-vorhang .hero .z:nth-child(3)>span{transition-delay:.3s}
.d2--eng{font-size:clamp(1.9rem,3.7vw,3.9rem)}
.drei figcaption b{font-size:clamp(1.3rem,2.5vw,2.7rem)}
.koord--vier{grid-template-columns:repeat(2,minmax(0,auto));row-gap:22px}
.koord--vier div:nth-child(3){border-left:0;padding-left:0}
/* Lift-Tafel im Auftakt: vier Etagen als Tasten, jede führt an ihren Halt */
.tafel-lift{display:grid;gap:8px;justify-items:stretch;padding:16px 12px 12px;border-radius:6px;border:1px solid rgba(220,198,143,.34);background:linear-gradient(180deg,rgba(18,48,94,.94),rgba(8,26,56,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 40px -22px rgba(0,0,0,.9);margin-bottom:6px}
.tafel-lift small{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);text-align:center;margin-bottom:4px}
.tafel-lift a{display:grid;grid-template-columns:44px auto;align-items:center;gap:14px;padding:5px 18px 5px 5px;border-radius:999px;transition:background-color .35s}
.tafel-lift a:hover{background:rgba(220,198,143,.14)}
.tafel-lift b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-family:var(--serif);font-weight:400;font-size:1.02rem;color:var(--tinte);background:linear-gradient(180deg,#fbf3e2,#e8dbbf 50%,#cfbd98);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(110,88,44,.4),0 6px 10px -4px rgba(0,0,0,.6);transition:transform .5s var(--e2)}
.tafel-lift a:hover b{transform:translateY(-2px)}
.tafel-lift a:active b{transform:translateY(1px) scale(.96)}
.tafel-lift span{font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.86)}
@media (max-width:1060px){.tafel-lift{display:none}}
/* ---------- Reihe gleich grosser Fotos ---------- */
.reihe{display:grid;gap:clamp(12px,1.5vw,22px);margin-top:clamp(36px,4.6vw,70px)}
.reihe--2{grid-template-columns:repeat(2,minmax(0,1fr))}.reihe--3{grid-template-columns:repeat(3,minmax(0,1fr))}.reihe--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.reihe .legende{justify-content:center}
.hero .d1{font-size:clamp(2.5rem,5.5vw,5.8rem)}
.wechsel{margin-top:clamp(20px,2.4vw,34px)}
.zitat{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.5vw,2.6rem);line-height:1.16;letter-spacing:0;text-wrap:balance}
.zitat+.mono{display:block;margin-top:18px;opacity:.7}
.tabelle{width:100%;border-collapse:collapse;font-size:.98rem}
.tabelle th,.tabelle td{padding:13px 12px 13px 0;text-align:left;border-top:1px solid rgba(12,21,38,.16);vertical-align:top}
.tabelle thead th{border:0;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--taupe)}
.tabelle tbody th{font-family:var(--serif);font-weight:400;font-size:.98rem;letter-spacing:0;}
.rollt{overflow-x:auto}
@media (max-width:860px){.reihe--3,.reihe--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stufe--preis .stufe__nr{font-size:clamp(3rem,6.2vw,6.4rem);white-space:nowrap}
.stufe__nr small{display:block;margin:12px 0 0}
.kerbe{padding-left:clamp(14px,1.4vw,20px)}
.pakete__preis{text-transform:uppercase;letter-spacing:.004em}
/* Saal-Karten im Band */
.saal{width:clamp(280px,27vw,400px);transition:opacity .5s var(--e2)}
.saal h3{margin-top:18px;font-family:var(--serif);font-weight:400;font-size:clamp(1.05rem,1.3vw,1.32rem);letter-spacing:0;line-height:1.15}
.saal p{margin-top:8px;font-size:1rem;line-height:1.5;opacity:.78}
.saal .mono{display:block;margin-top:10px;color:var(--taupe)}
.saal__leer{display:grid;place-items:center;aspect-ratio:4/3;border-radius:6px;background:var(--navy);color:var(--gold)}
.saal__leer svg{width:38%;height:auto}
.frage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,70px);align-items:end;margin-bottom:clamp(30px,3.6vw,54px)}
.frage .stufe__nr{font-size:clamp(4.6rem,10vw,10.4rem)}
.frage [data-treffer]{margin-top:14px;font-weight:600;font-size:1.06rem;min-height:3.2em}
.grundriss{padding:clamp(18px,3vw,50px)}
.grundriss img{width:100%;height:auto}
@media (max-width:860px){.frage{grid-template-columns:minmax(0,1fr)}.saal{width:74vw}}
/* Gutschein: Blatt mit dem Zeichen des Hauses */
.gutschein .blatt__kopf{align-items:center}
.gutschein__z{width:54px;height:auto;color:var(--taupe)}
.gutschein__satz{margin:18px 0 4px;font-weight:600;font-size:1.12rem;line-height:1.35}
.saal .mono+.mono{color:inherit;opacity:.62;margin-top:4px}
/* Team: Namen in der Titelschrift, daneben ihr Satz */
.team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(30px,5vw,90px);margin-top:clamp(30px,4vw,60px)}
.team li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:18px;align-items:baseline;padding:22px 0;border-top:1px solid rgba(255,255,255,.16)}
.team b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.05rem,1.4vw,1.4rem);letter-spacing:0;line-height:1.15}
.team small{display:block;margin-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.team q{font-size:1.06rem;line-height:1.5;color:rgba(255,255,255,.8);quotes:'«' '»'}
.tafel address{font-size:1.06rem;line-height:1.6}
.tafel address b{font-weight:600}
@media (max-width:860px){.team{grid-template-columns:minmax(0,1fr)}.team li{grid-template-columns:minmax(0,1fr);gap:8px}}
@media (min-width:861px){.prunk--breit .prunk__r{grid-template-columns:1.5fr .8fr 1.25fr .8fr}
.prunk--breit .prunk__z b{font-size:clamp(2.6rem,6.3vw,6.7rem)}}
@media (max-width:860px){.prunk--breit .prunk__z b{font-size:clamp(2.5rem,12vw,4.6rem)}}
@media (max-width:860px){
  .hero .z>span{white-space:normal}
  .hero .d1{font-size:clamp(2rem,9.4vw,3.4rem)}
  .hero__in{padding-bottom:26px}
  .hero__sub{margin-top:18px}.hero .kn-reihe{margin-top:22px}
  .sk{padding-top:clamp(120px,30vw,170px)}
  .d2{font-size:clamp(1.8rem,7.6vw,2.8rem)}.d2--eng{font-size:clamp(1.55rem,6.4vw,2.4rem)}
  .bruch .d2{font-size:clamp(1.7rem,7.4vw,2.8rem)}
  .koord--vier{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frage .stufe__nr{font-size:4.4rem}
  .pakete__preis{font-size:clamp(3rem,15vw,4.6rem)}
  .team q{font-size:1rem}
}
@media (max-width:560px){
  .nav{padding:0 12px}
  .nav__insel{gap:8px;padding:0 7px 0 14px}
  .nav__logo{gap:9px}.nav__logo svg{height:22px}
  .nav__logo b{font-size:.84rem;letter-spacing:.04em}
  .nav__rechts .kn{height:40px;padding:0 13px;font-size:9.5px;letter-spacing:.12em}
  .kn-reihe .kn{max-width:100%}
  .prunk__satz{letter-spacing:.06em}
  .lk__t{padding:22px 20px 24px}
  .blatt{padding:22px 18px}.blatt::before{inset:6px}
  .gericht{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .haus__zeile dd,.koord dd{font-size:1.05rem}
}
@media (max-width:360px){.nav__logo b{display:none}.kn{letter-spacing:.1em;padding-left:18px;gap:10px}}
/* Schmale Schirme: nichts ragt über den Rand */
main,footer{overflow-wrap:break-word}
@media (max-width:560px){
  .d1,.d2,.zitat,.lk h3,.bogen h3,.stufe h3,.recht__text h2,.sk h1{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
  .hero .d1{hyphens:manual;-webkit-hyphens:manual}
  .wahl,.ort__unten,.recht,.frage,.haus,.zwei{grid-template-columns:minmax(0,1fr)}
  .recht__inhalt{position:static}
  .zitat{font-size:clamp(1.12rem,5.4vw,1.5rem)}
  .gericht i{white-space:normal;text-align:right}
}
.blatt__kopf{flex-wrap:wrap}.blatt__kopf>*{min-width:0}
@media (max-width:560px){
  .fuss__kopf{flex-direction:column;align-items:flex-start;gap:26px}
  .fuss__ecke{flex-direction:row;align-items:center;gap:14px;margin:0}
  .fuss__ecke svg{width:64px}
  .fuss__ecke small{white-space:normal;letter-spacing:.18em;line-height:1.6}
}
@media (max-width:380px){.d2{font-size:7vw}.d2--eng{font-size:6.2vw}.bruch .d2{font-size:7vw}}
@media (max-width:560px){.kapitel{flex-wrap:wrap;white-space:normal;row-gap:6px;letter-spacing:.16em}.kapitel i{flex:none}}
.stufe__nr--ohne{font-size:0;line-height:1}
.stufe__nr--ohne small{margin:10px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(.95rem,1.1vw,1.12rem);letter-spacing:0;color:var(--taupe);opacity:1}
.stufe__nr--ohne+.lauf{margin-top:18px}

@media (max-width:560px){.prunk__z{padding:0 8px}.prunk__z em{font-size:10.5px;letter-spacing:.06em;line-height:1.5;max-width:none}}

/* =====================================================================
   FASSUNG 4 · Grandhotel. Ruhig, hell, klassisch: Bilder im Passepartout,
   Titel in normaler Schreibung, feste Leiste, nichts Verspieltes.
   ===================================================================== */
:root{--r-xl:22px;--r-l:16px;--r-m:12px;--mono:var(--sans);--abschnitt:clamp(84px,9vw,148px);--linie:rgba(138,117,69,.42)}
body{font-size:18px}
.d1,.d2,.d3,.d4{letter-spacing:-.014em}
.d1{font-size:clamp(2.4rem,5.4vw,5.4rem);line-height:1.09}
.d2{font-size:clamp(2rem,3.9vw,4rem);line-height:1.12}
.d2--eng{font-size:clamp(1.9rem,3.2vw,3.3rem)}
.d3{font-size:clamp(1.45rem,2.2vw,2.3rem);line-height:1.18}
.lauf{font-size:clamp(1.06rem,1.18vw,1.2rem);line-height:1.72}
.gross{font-family:var(--serif);font-weight:400;letter-spacing:-.008em;font-size:clamp(1.3rem,1.9vw,1.9rem);line-height:1.42}
.mono,.kapitel{font-weight:600}
.kapitel{font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.nav__logo b{font-weight:700;letter-spacing:.07em}
/* Zierlinie mit Zeichen: trennt Abschnitte wie auf Briefpapier */
.zier{display:flex;align-items:center;justify-content:center;gap:18px;color:var(--taupe);margin:0 auto clamp(26px,3vw,44px)}
.zier::before,.zier::after{content:'';height:1px;width:clamp(40px,7vw,110px);background:currentColor;opacity:.55}
.zier svg{width:34px;height:auto}
.fl--nacht .zier,.fl--navy .zier{color:var(--gold)}
.mitte{text-align:center}.mitte .lauf{margin-inline:auto}.mitte .kn-reihe{justify-content:center}
/* Reiter: Worte mit Linie statt Pillen */
.tabs{gap:6px clamp(18px,2.4vw,36px);border-bottom:1px solid var(--linie)}
.tab,.fl--nacht .tab,.fl--navy .tab,.sk .tab,.bruch .tab{height:auto;padding:12px 0 14px;border-radius:0;background:none;box-shadow:none;color:inherit;opacity:.6;font-family:var(--serif);font-size:clamp(1.05rem,1.4vw,1.32rem);letter-spacing:0;text-transform:none;position:relative;transition:opacity .4s}
.tab:hover{transform:none;opacity:1}
.tab::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--taupe);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e1)}
.fl--nacht .tab::after,.fl--navy .tab::after{background:var(--gold)}
.tab[aria-pressed="true"],.tab[aria-selected="true"],.fl--nacht .tab[aria-pressed="true"],.fl--navy .tab[aria-pressed="true"],.sk .tab[aria-pressed="true"],.bruch .tab[aria-pressed="true"],.fl--nacht .tab[aria-selected="true"],.fl--navy .tab[aria-selected="true"]{background:none;box-shadow:none;color:inherit;opacity:1}
.tab[aria-pressed="true"]::after,.tab[aria-selected="true"]::after{transform:none}
.fl--nacht .tabs,.fl--navy .tabs{border-color:rgba(220,198,143,.34)}
.pakete__preis{font-size:clamp(2.2rem,4.2vw,4.2rem);line-height:1.08;text-transform:none;letter-spacing:-.014em}
.pakete__preis small{font-size:13px;letter-spacing:.13em;font-weight:600;margin-bottom:8px}

/* Buchungsleiste */
.leiste{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:stretch;gap:0;max-width:980px;margin:calc(-1*clamp(34px,3.6vw,50px)) auto 0;background:#fffaf0;border-radius:5px;box-shadow:0 0 0 1px var(--linie),0 30px 44px -30px rgba(74,58,26,.7);text-align:left}
.leiste label{display:grid;gap:4px;padding:16px 22px 15px;border-right:1px solid rgba(138,117,69,.28);cursor:pointer}
.leiste label span{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
.leiste input,.leiste select{font:inherit;font-family:var(--serif);font-size:1.16rem;color:var(--tinte);background:none;border:0;padding:0;min-width:0;width:100%;color-scheme:light;appearance:none;-webkit-appearance:none;cursor:pointer}
.leiste input:focus-visible,.leiste select:focus-visible{outline:0;box-shadow:0 2px 0 var(--taupe)}
.leiste .kn{align-self:center;margin:0 12px}
.leiste__hin{margin:16px auto 0;font-size:.94rem;color:rgba(12,21,38,.7)}
.leiste__hin a{box-shadow:inset 0 -1px 0 currentColor;white-space:nowrap}
@media (max-width:860px){
  .leiste{grid-template-columns:1fr 1fr;margin-top:18px}
  .leiste label:nth-of-type(2){border-right:0}
  .leiste label:nth-of-type(3){grid-column:1/-1;border-right:0;border-top:1px solid rgba(138,117,69,.28)}
  .leiste .kn{grid-column:1/-1;justify-self:stretch;justify-content:space-between;margin:0 12px 12px}
  .leiste label{padding:13px 16px 12px}
  .auftakt__bild .rahmen__k{aspect-ratio:4/3}
}
/* ---------- Zeilen: ruhige Liste mit kleinem Bild (Restaurants, Angebote, Partner) ---------- */
.zeilen{border-top:1px solid var(--linie)}
.zeile{display:grid;grid-template-columns:clamp(120px,15vw,220px) minmax(0,1.1fr) minmax(0,1.4fr) auto;gap:clamp(16px,2.6vw,44px);align-items:center;padding:clamp(16px,1.8vw,26px) 0;border-bottom:1px solid var(--linie)}
.zeile__b .rahmen{padding:6px}.zeile__b .rahmen__k{aspect-ratio:4/3}
.zeile h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,1.9vw,1.9rem);line-height:1.16;letter-spacing:-.008em}
.zeile h3+small{display:block;margin-top:6px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
.zeile p{font-size:1.02rem;line-height:1.6;color:rgba(12,21,38,.8);max-width:52ch}
.zeile__r{display:grid;gap:10px;justify-items:end;text-align:right}
.zeile__r b{font-family:var(--serif);font-weight:400;font-size:1.2rem;white-space:nowrap}
.fl--nacht .zeilen,.fl--navy .zeilen,.fl--nacht .zeile,.fl--navy .zeile{border-color:rgba(220,198,143,.3)}
.fl--nacht .zeile p,.fl--navy .zeile p{color:rgba(255,255,255,.8)}
.fl--nacht .zeile h3+small,.fl--navy .zeile h3+small{color:var(--gold)}
@media (max-width:860px){
  .zeile{grid-template-columns:96px minmax(0,1fr);align-items:start;gap:8px 16px}
  .zeile__b{grid-row:1/4}.zeile p{grid-column:2}.zeile__r{grid-column:2;justify-items:start;text-align:left}
}
/* ---------- Galerie in einer Reihe: gleich grosse Bilder mit Schild darunter ---------- */
.schau{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,28px)}
.schau--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.schau a,.schau article{display:block;text-align:center}
.schau .rahmen__k{aspect-ratio:4/5}
.schau h3{margin-top:18px;font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,1.6vw,1.6rem);line-height:1.2}
.schau small{display:block;margin-top:6px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
.schau p{margin:10px auto 0;max-width:34ch;font-size:1rem;line-height:1.58;color:rgba(12,21,38,.78)}
.schau a .rahmen__k img{transition:transform 1.6s var(--e1)}
.schau a:hover .rahmen__k img{transform:scale(1.03)}
.fl--nacht .schau p,.fl--navy .schau p{color:rgba(255,255,255,.78)}.fl--nacht .schau small,.fl--navy .schau small{color:var(--gold)}
@media (max-width:860px){.schau,.schau--3{grid-template-columns:repeat(2,minmax(0,1fr))}.schau--3>:last-child{grid-column:1/-1}.schau--3>:last-child .rahmen__k{aspect-ratio:16/10}}
/* ---------- Fragen: Auswahl mit klaren Knöpfen (Zeit, Zimmer, Gäste) ---------- */
.frage2{display:grid;gap:clamp(18px,2vw,28px)}
.wahlreihe{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.wahlreihe>span{flex:none;min-width:11ch;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
.opt{min-height:46px;padding:0 20px;border-radius:4px;font-size:1rem;font-weight:500;color:var(--tinte);background:#fffaf0;box-shadow:0 0 0 1px var(--linie);transition:background .3s,color .3s,box-shadow .3s}
.opt:hover{box-shadow:0 0 0 1px var(--taupe)}
.opt[aria-pressed="true"]{background:var(--navy);color:#fff;box-shadow:0 0 0 1px var(--navy)}
.treffer{font-family:var(--serif);font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.4}
.treffer a{box-shadow:inset 0 -1px 0 currentColor}
.matt{opacity:.28;transition:opacity .5s}
select.wahlfeld{font:inherit;font-family:var(--serif);font-size:1.2rem;color:var(--tinte);background:#fffaf0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a7545' stroke-width='1.4'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center/14px;border:0;border-radius:4px;box-shadow:0 0 0 1px var(--linie);padding:13px 46px 13px 18px;appearance:none;-webkit-appearance:none;cursor:pointer;color-scheme:light}
/* ---------- Karte: Bögen mit Gerichten und Getränken (nur beim Restaurant) ---------- */
.gk{flex:none;width:clamp(250px,22vw,330px);scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;text-align:center}
.gk__b{align-self:stretch;position:relative;aspect-ratio:1/1.16;border-radius:50% 50% 3px 3px/43% 43% 3px 3px;overflow:hidden;background:#0e2347;box-shadow:0 0 0 1px rgba(220,198,143,.4)}
.gk__b img{width:100%;height:100%;object-fit:cover}
.gk h4{margin:18px 8px 0;font-family:var(--serif);font-weight:400;font-size:1.34rem;line-height:1.2;text-wrap:balance}
.gk p{margin:8px 10px 0;font-size:.98rem;line-height:1.5;color:rgba(255,255,255,.72)}
.gk b{margin-top:10px;font-family:var(--serif);font-weight:400;font-size:1.26rem;color:var(--gold);font-variant-numeric:lining-nums}
.gk--klein{width:clamp(210px,17vw,270px)}
.weinliste{columns:3;column-gap:clamp(30px,4vw,70px)}
.weinliste section{break-inside:avoid;margin-bottom:clamp(26px,3vw,40px)}
.weinliste h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;padding-bottom:10px;border-bottom:1px solid var(--linie);margin-bottom:6px}
.weinliste h4{margin:16px 0 2px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
.wein{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:9px 0;border-bottom:1px solid rgba(12,21,38,.1)}
.wein b{font-family:var(--serif);font-weight:400;font-size:1.06rem;line-height:1.3}
.wein i{font-style:normal;font-family:var(--serif);font-variant-numeric:lining-nums;white-space:nowrap}
.wein span{grid-column:1/-1;font-size:.92rem;line-height:1.45;color:rgba(12,21,38,.66)}
@media (max-width:1080px){.weinliste{columns:2}}
@media (max-width:640px){.weinliste{columns:1}.gk{width:72vw}.gk--klein{width:60vw}}
/* Zahlenband: leiser */
.prunk__z b{font-size:clamp(3rem,7vw,7rem)}
.prunk__z em{font-family:var(--sans);font-weight:500;font-size:clamp(.95rem,1.05vw,1.08rem);line-height:1.45;max-width:20ch;color:rgba(255,255,255,.82)}
.wahl__l strong{font-size:clamp(1.5rem,2.6vw,2.7rem);line-height:1.14;opacity:.5}
.laufband li{font-size:clamp(1.2rem,2vw,2rem)}
.fuss__marke p{font-size:clamp(1.7rem,3.6vw,3.7rem);line-height:1.12}
.menue__links a{font-size:clamp(1.6rem,6.6vw,2.6rem);line-height:1.26}
.zitat{font-size:clamp(1.3rem,2.2vw,2.3rem);line-height:1.3}
.gericht b{font-size:clamp(1.06rem,1.25vw,1.22rem)}
.schluss .d1{font-size:clamp(2.3rem,5vw,5rem)}
@media (max-width:860px){.d1{font-size:clamp(2rem,8.4vw,3.1rem)}.d2,.bruch .d2{font-size:clamp(1.8rem,7vw,2.6rem)}.d2--eng{font-size:clamp(1.6rem,6.2vw,2.3rem)}}
@media (max-width:380px){.d2,.bruch .d2{font-size:7.4vw}.d2--eng{font-size:6.6vw}}







.pakete{align-items:start}
.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:0 clamp(16px,1.9vw,30px)}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;font-size:clamp(1.02rem,1.25vw,1.2rem)}

[data-merk]{transition:opacity .6s}
[data-merk]{scroll-margin-top:110px}

/* =====================================================================
   FASSUNG 5 · Aufbau einer Hotel-Seite, mit der vollen Bewegung:
   Türen gehen auf, Bilder schieben sich frei, Titel rollen hoch.
   ===================================================================== */
/* Auftakt: zwei Türflügel gehen auf («Eintreten»), dahinter das Haus */
.vorhang{background:none;animation:none;display:block}
.vorhang i{position:absolute;top:0;bottom:0;width:50.4%;background:var(--nacht);animation:torl 1.7s var(--e2) 1.2s forwards}
.vorhang i::before{content:'';position:absolute;inset:clamp(18px,2.4vw,40px);border:1px solid rgba(220,198,143,.34)}
.vorhang i::after{content:'';position:absolute;top:50%;width:10px;height:74px;margin-top:-37px;border-radius:5px;background:linear-gradient(180deg,#f3e3b8,#b89a55);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.vorhang i:first-of-type{left:0;box-shadow:inset -1px 0 0 rgba(220,198,143,.55)}.vorhang i:first-of-type::after{right:clamp(26px,3vw,50px)}
.vorhang i:last-of-type{right:0;animation-name:torr;box-shadow:inset 1px 0 0 rgba(220,198,143,.55)}.vorhang i:last-of-type::after{left:clamp(26px,3vw,50px)}
.vorhang svg{position:absolute;left:50%;top:38%;width:clamp(84px,8vw,124px);margin-left:calc(-.5*clamp(84px,8vw,124px));z-index:1;animation:emblem 1.1s var(--e1) both,torweg .45s linear 1.1s forwards}
@keyframes torl{to{transform:translateX(-101%)}}@keyframes torr{to{transform:translateX(101%)}}@keyframes torweg{to{opacity:0}}
.hero--f{min-height:700px}
.hero--f .hero__bild img{object-position:60% 40%;transform:scale(1.16);animation:heroein 3.4s var(--e1) 1.3s forwards}
.kein-vorhang .hero--f .hero__bild img{animation-delay:0s}
.hero--f .hero__in{display:block;padding-bottom:clamp(26px,3.4vw,48px)}
.hero--f .d1{font-size:clamp(2.6rem,6vw,6.4rem);line-height:1.04;letter-spacing:-.02em;text-shadow:0 2px 30px rgba(4,12,28,.5)}
.hero--f .z>span{white-space:nowrap;transition-delay:1.9s;transition-duration:1.5s}.hero--f .z:nth-child(2)>span{transition-delay:2.05s}
.kein-vorhang .hero--f .z>span{transition-delay:.15s}.kein-vorhang .hero--f .z:nth-child(2)>span{transition-delay:.3s}
.hero--f .hero__sub{max-width:50ch;margin-top:18px;font-size:clamp(1.06rem,1.3vw,1.3rem)}
.hero--f [data-r]{transition-delay:calc(2.3s + var(--i,0)*140ms)}
.kein-vorhang .hero--f [data-r]{transition-delay:calc(.5s + var(--i,0)*120ms)}
/* Buchungsleiste im Auftakt: heller Bogen Papier mit Tiefe */
.leiste{margin:clamp(22px,2.6vw,38px) 0 0;max-width:1040px;border-radius:28px;background:linear-gradient(180deg,#fdf6e6,#ecdfc4 70%,#dfd0af);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 0 #a39370,0 34px 50px -26px rgba(0,0,0,.85)}
.leiste label{padding:17px 24px 16px}
.leiste .kn{--o:#1f3f77;--m:#0b1f40;--u:#040d1e;--t:#fff;--licht:rgba(255,255,255,.26);--kante:rgba(0,0,0,.55);--tief:rgba(6,20,43,.6);margin:0 12px}
.hero__zeile{display:flex;flex-wrap:wrap;gap:8px 30px;margin-top:16px;font-size:.95rem;color:rgba(255,255,255,.78)}
.hero__zeile a{color:#fff;box-shadow:inset 0 -1px 0 var(--gold)}
@media (max-width:860px){.hero--f .z>span{white-space:normal}.hero--f .d1{font-size:clamp(2.1rem,9.6vw,3.4rem)}.leiste{margin-top:18px;border-radius:20px}.leiste .kn{margin:0 12px 12px}}
/* Goldene Linie, die sich unter Kopfzeilen zieht */
.kopfzeile{position:relative;padding-bottom:clamp(20px,2.4vw,34px)}
.kopfzeile::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--taupe),rgba(138,117,69,.12));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.8s var(--e1) .3s}
.fl--nacht .kopfzeile::after,.fl--navy .kopfzeile::after{background:linear-gradient(90deg,var(--gold),rgba(220,198,143,.1))}
.kopfzeile:has(.da)::after{transform:none}
/* Reiter auf dunklem Grund + Bild daneben mit Tiefe */
.pakete{align-items:center}
.pakete .tabs{margin-bottom:clamp(20px,2.4vw,34px)}
.pakete .d3{font-size:clamp(1.8rem,3vw,3.1rem)}
/* Grosse Karten im Band (Pakete): Datum in der Kerbe */
.lk h3{font-size:clamp(1.5rem,2.3vw,2.4rem)}
/* Tiefe: kleines Bild im Paar wandert langsamer als das grosse */
.paar .klein>.rahmen{will-change:transform}
.drei figcaption b{font-size:clamp(1.5rem,2.4vw,2.5rem)}
.treffer{min-height:1.5em}
.nav__links{gap:clamp(12px,1.35vw,22px)}
.nav__links a{font-size:12.5px;letter-spacing:.09em}
.nav__insel{padding-right:22px}
@media (min-width:1081px) and (max-width:1500px){.nav__logo b{font-size:.98rem}.eckknopf{padding:0 16px 0 18px;letter-spacing:.1em}.sprache{padding:0 13px}}
.tabs{gap:0 clamp(14px,1.5vw,22px)}
.tab{font-size:clamp(.98rem,1.12vw,1.1rem)}
.wahlzeile{display:flex;align-items:center;gap:16px;margin-top:22px}
.wahlzeile>span{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
.fl--nacht .wahlzeile>span,.fl--navy .wahlzeile>span{color:var(--gold)}
.stufe .wahlzeile+.kn-reihe{margin-top:22px}
.pk{flex:none;width:clamp(240px,21vw,320px);scroll-snap-align:start;text-align:center}
.pk .rahmen__k{aspect-ratio:4/5}.pk .rahmen__k img{width:100%;height:100%;object-fit:cover}
.pk h3{margin-top:18px;font-family:var(--serif);font-weight:400;font-size:1.4rem;line-height:1.2}
.pk p{margin:8px auto 0;max-width:30ch;font-size:.98rem;line-height:1.5;opacity:.8}
@media (max-width:640px){.pk{width:68vw}}
@media (min-width:861px){.zwei>.t,.zwei>.b{grid-row:1}}
.stufe__nr{white-space:nowrap;font-size:clamp(3rem,6vw,6rem)}
.frage .stufe__nr{font-size:clamp(3.4rem,7vw,7rem)}
@media (max-width:860px){.leiste{grid-template-columns:1fr 1fr}.hero--f{min-height:640px}.hero__zeile{font-size:.88rem}}
@media (max-width:380px){.tafel{padding:20px 16px}.kn{letter-spacing:.05em;padding-left:16px;font-size:11px;gap:8px}.tafel .kn-reihe{width:100%}}
.tafel{min-width:0}.tafel>*{min-width:0;max-width:100%}
@media (max-width:860px){.tabs{flex-wrap:wrap;overflow:visible;gap:0 18px}.pakete{grid-template-columns:minmax(0,1fr)}}

/* =====================================================================
   FASSUNG 6 · Startseite nach Roberts Durchsicht vom 08.10. (Schatten hinter
   Schrift, Fenster mittig, Zeit-Auswahl als Bildreihe, Galerie, Einkerbungen)
   ===================================================================== */
.tafel,.feld,.saal__leer{border-radius:var(--r-m)}
/* Auftakt: weicher Schatten hinter Titel und Text (wie im Referenzbau) */
.hero--f .hero__sub{text-shadow:0 1px 2px rgba(4,10,24,.75),0 6px 26px rgba(4,10,24,.9)}
.hero__zeile{text-shadow:0 1px 2px rgba(4,10,24,.8),0 4px 18px rgba(4,10,24,.9)}
/* Fenster: mittig, mit dunklem Hof hinter der Schrift, Antwort gross und lesbar */
.bruch .in{text-align:center}
.bruch .in::before{content:'';position:absolute;z-index:-1;left:50%;top:50%;width:min(1100px,96vw);height:170%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(4,10,24,.78) 0%,rgba(4,10,24,.56) 38%,rgba(4,10,24,0) 70%)}
.bruch .d2{text-shadow:0 2px 20px rgba(4,10,24,.7)}
.bruch .mono{margin:clamp(16px,1.8vw,26px) auto 0;max-width:34ch;font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,1.9vw,1.9rem);line-height:1.4;letter-spacing:0;text-transform:none;color:#fff;text-shadow:0 1px 3px rgba(4,10,24,.8),0 4px 22px rgba(4,10,24,.9)}
.bruch{min-height:min(66vh,640px)}
/* Einkerbung: grösser, als Namensschild im Bild */
.kerbe{font-size:clamp(1.15rem,1.55vw,1.7rem);padding:clamp(11px,1.1vw,16px) clamp(18px,1.9vw,28px) 2px clamp(14px,1.4vw,20px)}
.fl--navy.tapete .kerbe{--f:#0c2145}
/* ---------- Zeit: fünf Bilder nebeneinander als Auswahl, darunter die Antwort ---------- */
.zeitreihe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,20px);border:0}
.zeitreihe .tab{position:relative;display:block;height:auto;padding:0;opacity:1;text-align:left;border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/5;background:#0e2347;box-shadow:0 0 0 1px rgba(220,198,143,.22),0 26px 40px -28px rgba(0,0,0,.9);transition:transform .9s var(--e1),box-shadow .5s}
.zeitreihe .tab::after{display:none}
.zeitreihe .tab img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;transform:scale(1.04);transition:opacity .7s var(--e2),transform 1.8s var(--e1)}
.zeitreihe .tab:hover img{opacity:.8}
.zeitreihe .tab[aria-pressed="true"]{transform:translateY(-12px);box-shadow:0 0 0 2px var(--gold),0 34px 46px -26px rgba(0,0,0,.95)}
.zeitreihe .tab[aria-pressed="true"] img{opacity:1;transform:none}
.zeitreihe .kerbe{font-size:clamp(1rem,1.5vw,1.6rem)}
.zeitfeld{margin-top:clamp(30px,3.4vw,54px)}
.zeitfeld [data-feld]{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,80px);align-items:end}
.zeitfeld .d3{font-size:clamp(2rem,3.6vw,3.8rem);line-height:1.08}
.zeitfeld .lauf{margin-top:16px;max-width:56ch}
.zeitfeld .koord{justify-content:start;padding:0}
.zeitfeld .kn-reihe{margin-top:22px}
@media (max-width:860px){
  .zeitreihe{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .zeitreihe .tab:nth-child(n+4){grid-column:span 1}
  .zeitreihe .tab{aspect-ratio:1/1}
  .zeitreihe .tab[aria-pressed="true"]{transform:none}
  .zeitreihe .kerbe{font-size:.86rem;white-space:normal;padding:7px 10px 1px 8px;line-height:1.1}
  .zeitfeld [data-feld]{grid-template-columns:minmax(0,1fr);gap:14px}
}
/* ---------- Zimmer: drei Bilder auf einer Höhe, schweben nacheinander ein ---------- */
.zreihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,34px);margin-top:clamp(40px,5vw,80px)}
.zreihe a{display:block;position:relative}
.zreihe [data-r="schweb"]{transform:translateY(clamp(90px,12vw,170px)) scale(.96);transform-origin:50% 100%;transition:opacity 1.2s var(--e1),transform 1.7s var(--e3);transition-delay:calc(var(--i,0)*240ms)}
.zreihe [data-r="schweb"].da{transform:none}
.zreihe .rahmen__k{aspect-ratio:3/4}
.zreihe .rahmen__k img{transition:transform 1.8s var(--e1)}
.zreihe a:hover .rahmen__k img{transform:scale(1.04)}
.zreihe figcaption{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:14px;font-size:1.02rem;color:rgba(12,21,38,.78)}
.zreihe figcaption .pfeil{flex:none}
@media (max-width:860px){.zreihe{grid-template-columns:minmax(0,1fr)}.zreihe .rahmen__k{aspect-ratio:4/3}}
/* ---------- Lauftext an der Naht zwischen zwei Abschnitten: schmal, läuft immer ---------- */
.naht{position:relative;z-index:3;margin:calc(-1*clamp(22px,2.2vw,30px)) 0;background:linear-gradient(180deg,#143568,#0b2148);box-shadow:inset 0 1px 0 rgba(220,198,143,.55),inset 0 -1px 0 rgba(220,198,143,.55),0 18px 30px -22px rgba(0,0,0,.8)}
.naht .laufband{margin:0;padding:clamp(11px,1.1vw,15px) 0;border:0}
.naht .laufband li{font-size:clamp(1rem,1.25vw,1.3rem);gap:clamp(22px,2.6vw,44px);padding-right:clamp(22px,2.6vw,44px);color:var(--gold);opacity:1}
.naht .laufband li:nth-child(even){opacity:1;color:#fff}
.naht .laufband li::after{width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:.8}
@media (hover:hover){.laufband:hover .laufband__zug{animation-play-state:running}}
/* ---------- Galerie «Wofür kommen Sie?»: zwei grosse Bilder oben, vier kleine darunter, Name in der Kerbe ---------- */
.galerie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,20px)}
.gal{position:relative;display:block;border-radius:var(--r-xl);overflow:hidden;background:var(--navy);color:#fff;isolation:isolate;box-shadow:0 30px 44px -34px rgba(12,21,38,.8)}
.gal{height:clamp(190px,17.5vw,262px)}
.gal:nth-child(-n+2){grid-column:span 2;height:clamp(300px,30.5vw,456px)}
.gal:nth-child(n+3) .kerbe{font-size:clamp(1.15rem,1.6vw,1.7rem)}
.gal:nth-child(n+3) .gal__t span{font-size:clamp(.9rem,1vw,1rem);line-height:1.42}
.gal .rahmen__k{position:absolute;inset:0;border-radius:0;background:var(--navy)}
.gal .rahmen__k img{width:100%;height:100%;object-fit:cover}
.gal[data-r].da .rahmen__k img{transition:transform 2.4s var(--e1)}
.gal[data-r].da:hover .rahmen__k img{transform:scale(1.07)}
.gal .kerbe{--f:var(--papier);font-size:clamp(1.45rem,2.3vw,2.5rem);line-height:1.15;-webkit-text-stroke:.4px currentColor;padding:clamp(9px,.95vw,14px) clamp(22px,2.2vw,32px) clamp(9px,.95vw,14px) clamp(16px,1.6vw,24px);transition:transform .7s var(--e1)}
.gal__t{position:absolute;z-index:3;left:0;right:0;top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:clamp(16px,1.6vw,24px) clamp(16px,1.6vw,24px) clamp(18px,1.8vw,28px);background:linear-gradient(180deg,#143568,#0b1f40);box-shadow:inset 0 -1px 0 rgba(220,198,143,.5);transform:translateY(-102%);transition:transform .8s var(--e2)}
.gal__t span{font-size:clamp(.98rem,1.1vw,1.12rem);line-height:1.5;color:rgba(255,255,255,.9);max-width:44ch}
.gal__kn{position:absolute;z-index:4;right:clamp(12px,1.2vw,18px);top:clamp(12px,1.2vw,18px);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--tinte);background:linear-gradient(180deg,#fbf3e2,#e8dbbf 50%,#cfbd98);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(110,88,44,.36),0 12px 18px -10px rgba(0,0,0,.7);transition:transform .7s var(--e1)}
.gal__kn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.2}
.gal:hover .gal__t,.gal:focus-visible .gal__t{transform:none}
.gal:hover .gal__kn{transform:rotate(45deg)}
.gal__t{padding-right:clamp(70px,6vw,88px)}
@media (max-width:1240px){.galerie{grid-template-columns:repeat(2,minmax(0,1fr))}.gal:nth-child(n){grid-column:auto;height:clamp(220px,31vw,360px)}.gal:nth-child(n) .kerbe{font-size:clamp(1.25rem,2.3vw,1.8rem)}}
@media (hover:none){.gal__t{transform:none;padding-top:12px;padding-bottom:13px}.gal__t span{font-size:.92rem;line-height:1.42}}
@media (max-width:860px){
  .galerie{grid-template-columns:minmax(0,1fr)}
  .gal:nth-child(n){grid-column:auto;height:auto;aspect-ratio:4/3.4}
  .gal:nth-child(n) .kerbe{font-size:clamp(1.15rem,5.6vw,1.5rem)}
}
/* ---------- Packages: Datum in der Kerbe und Text der Karte grösser ---------- */
.lk .kerbe{font-size:clamp(1.25rem,1.9vw,2rem);padding:clamp(13px,1.3vw,19px) clamp(20px,2.2vw,32px) 4px clamp(16px,1.6vw,24px)}
.lk h3{font-size:clamp(2rem,3.2vw,3.4rem);line-height:1.08}
.lk p{font-size:clamp(1.08rem,1.3vw,1.3rem);line-height:1.55;margin-top:14px}
.lk__nr{font-size:clamp(1.15rem,1.5vw,1.5rem)}
/* ---------- Fuss: die drei Häuser als runde, edle Karten ---------- */
.fh{grid-template-columns:minmax(0,1fr);border-radius:26px;padding:9px;background:linear-gradient(180deg,#16386c,#0b2148);box-shadow:inset 0 0 0 1px rgba(220,198,143,.34),inset 0 1px 0 rgba(255,255,255,.16),0 34px 50px -34px rgba(0,0,0,.95);transition:transform .9s var(--e1)}
.fh:hover{transform:translateY(-6px)}
.fh__bild{border-radius:19px;min-height:0;aspect-ratio:16/10;box-shadow:inset 0 0 0 1px rgba(220,198,143,.3)}
.fh__t{padding:clamp(18px,1.7vw,26px) clamp(14px,1.4vw,20px) clamp(12px,1.2vw,18px)}
.fh h3{font-size:clamp(1.3rem,1.7vw,1.8rem);line-height:1.14}
.fh address{font-size:1rem}
@media (max-width:860px){.fuss__haeuser{grid-template-columns:minmax(0,1fr)}}

/* =====================================================================
   FASSUNG 7 · Bild-Effekt wie auf der Restaurant-Seite des Referenzbaus:
   der Rahmen steht, das Bild darin kommt aus leichter Vergrösserung zur Ruhe.
   ===================================================================== */
[data-r="bild"]{transform:none}
[data-r="bild"] .rahmen__k img,.lk__b[data-r="bild"] img,.fh__bild[data-r="bild"] img{transform:scale(1.13);transition:transform 1.9s var(--e1);transition-delay:calc(var(--i,0)*90ms)}
[data-r="bild"].da .rahmen__k img,.lk__b[data-r="bild"].da img,.fh__bild[data-r="bild"].da img{transform:none}
.lk__b[data-r="bild"],.fh__bild[data-r="bild"]{opacity:1}
.zreihe [data-r="schweb"] .rahmen__k img{transform:scale(1.13);transition:transform 1.9s var(--e1);transition-delay:calc(var(--i,0)*240ms + .2s)}
.zreihe [data-r="schweb"].da .rahmen__k img{transform:none}
.zeitreihe .tab[data-r="bild"] img{transform:scale(1.16);transition:opacity .7s var(--e2),transform 1.9s var(--e1);transition-delay:calc(var(--i,0)*110ms)}
.zeitreihe .tab[data-r="bild"].da img{transform:scale(1.04)}
.zeitreihe .tab[data-r="bild"].da[aria-pressed="true"] img{transform:none}
.gal[data-r="bild"].da .rahmen__k img{transition:transform 1.9s var(--e1)}
/* Zimmer-Namen in der Kerbe grösser */
.zreihe .kerbe{font-size:clamp(1.5rem,2.3vw,2.5rem);padding:clamp(14px,1.4vw,20px) clamp(22px,2.3vw,34px) 4px clamp(16px,1.6vw,24px)}
/* Auftakt: Satz unter dem Titel besser lesbar, Titel mit mehr Schatten */
.hero--f .hero__sub{font-size:clamp(1.14rem,1.45vw,1.46rem);font-weight:500;line-height:1.5;color:#fff;max-width:46ch;text-shadow:0 0 .4em rgba(4,10,24,.95),0 1px 2px rgba(4,10,24,.95),0 3px 12px rgba(4,10,24,.95),0 10px 40px rgba(4,10,24,1)}
.hero__zeile{color:#fff;font-weight:500}
/* ---------- Zimmer-Auswahl wie beim Tasty Hotel: Fragen, Stand, Raster aus Karten ---------- */
.finder{display:grid;gap:clamp(18px,2vw,28px)}
.finder .wahlreihe>span{min-width:14ch}
.finder__stand{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(20px,2.4vw,36px);padding-top:clamp(18px,2vw,28px);border-top:1px solid var(--linie)}
.finder__stand b{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2vw,2.1rem);line-height:1.2}
.finder__stand b i{font-style:normal;color:var(--taupe)}
.finder__stand button{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);padding:10px 0;box-shadow:inset 0 -1px 0 currentColor}
.zraster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin-top:clamp(22px,2.6vw,38px)}
.zk{grid-column:span 4;display:flex;flex-direction:column;border-radius:26px;padding:9px;background:linear-gradient(180deg,#fffdf6,#f6eedd);color:var(--tinte);box-shadow:inset 0 0 0 1px rgba(138,117,69,.3),inset 0 1px 0 #fff,0 34px 46px -34px rgba(74,58,26,.75);transition:opacity .55s var(--e2),transform .7s var(--e1)}
.zk:nth-child(n+4){grid-column:span 6}
.zk__b{position:relative;display:block;border-radius:19px;overflow:hidden;aspect-ratio:4/3;background:var(--creme)}
.zk:nth-child(n+4) .zk__b{aspect-ratio:16/9}
.zk__b img{width:100%;height:100%;object-fit:cover;transform:scale(1.13);transition:transform 1.9s var(--e1);transition-delay:calc(var(--i,0)*120ms)}
.zk.da .zk__b img{transform:none}
.zk.da:hover .zk__b img{transform:scale(1.04)}
.zk .kerbe{--f:#fbf5e6;font-size:clamp(1.1rem,1.55vw,1.65rem);line-height:1.15;padding:clamp(10px,1vw,14px) clamp(20px,2vw,28px) clamp(9px,.9vw,13px) clamp(16px,1.6vw,22px)}/* 16.10.: Text mittig in der Einkerbung, etwas kleiner */
.zk__t{display:grid;gap:6px;padding:clamp(16px,1.6vw,22px) clamp(12px,1.2vw,18px) 6px}
.zk__t b{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,1.4vw,1.4rem);color:var(--taupe)}
.zk__t span{font-size:1.02rem;line-height:1.55;color:rgba(12,21,38,.8)}
.zk__u{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:auto;padding:12px clamp(12px,1.2vw,18px) 10px}
.zk__u i{font-style:normal;font-family:var(--serif);font-size:1.12rem}
.zk[data-r]{transform:translateY(clamp(50px,7vw,100px))}
.zk[data-r].da{transform:none}
.zk.matt,.zk[data-r].da.matt{opacity:.2;transform:scale(.965)}
@media (max-width:860px){.zk,.zk:nth-child(n+4){grid-column:1/-1}.zk__b,.zk:nth-child(n+4) .zk__b{aspect-ratio:4/3}}

/* =====================================================================
   FASSUNG 8 · Gleiten: Bilder kommen ruhig aus der Tiefe (blenden auf und
   wachsen leicht), danach wandert das Bild beim Scrollen sacht in seinem Rahmen.
   Kein Hochrollen, kein Vorhang. Nur transform und opacity, ein Takt.
   ===================================================================== */
[data-r="bild"],[data-r="schweb"],.zreihe [data-r="schweb"],.zk[data-r]{opacity:0;transform:scale(.94);transform-origin:50% 55%;transition:opacity 1.25s var(--e1),transform 1.9s var(--e3);transition-delay:calc(var(--i,0)*170ms)}
[data-r="bild"].da,[data-r="schweb"].da,.zreihe [data-r="schweb"].da,.zk[data-r].da{opacity:1;transform:none}
.lk__b[data-r="bild"],.fh__bild[data-r="bild"]{opacity:1;transform:none}
.zk.matt,.zk[data-r].da.matt{opacity:.2;transform:scale(.965)}
.gleit{transform:scale(1.16);transition:none!important;will-change:transform;backface-visibility:hidden}

/* =====================================================================
   FASSUNG 9 · Zimmer einzeln aufmachen (Fotos), breite Karte ohne Beschnitt
   ===================================================================== */
.lk--breit{width:min(1180px,100%);margin:0 auto;min-height:0;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.lk--breit .lk__b{aspect-ratio:3/2}
.lk--breit .lk__b img{position:absolute;inset:0}
@media (max-width:860px){.lk--breit{grid-template-columns:minmax(0,1fr)}}
dialog.zb{width:min(1360px,calc(100% - 28px));max-width:none;max-height:calc(100dvh - 28px);padding:0;border:0;border-radius:var(--r-xl);background:var(--papier);color:var(--tinte);overflow:auto;box-shadow:0 60px 120px -40px #000}
dialog.zb::backdrop{background:rgba(3,10,24,.86)}
dialog.zb[open]{animation:zbauf .7s var(--e1)}
@keyframes zbauf{from{opacity:0;transform:translateY(24px) scale(.975)}}
.zb .zu{position:absolute;z-index:5;right:16px;top:16px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#1f3f77,#0b1f40 50%,#040d1e);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 10px 16px -10px rgba(6,20,43,.7);transition:transform .5s var(--e1)}
.zb .zu svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.3}
.zb__in{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(20px,2.6vw,44px);padding:clamp(12px,1.2vw,18px);align-items:center}
.zb__buehne{position:relative;border-radius:calc(var(--r-xl) - 6px);overflow:hidden;aspect-ratio:3/2;background:var(--navy)}
.zb__bilder img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .7s var(--e2),transform 1.8s var(--e1)}
.zb__bilder img.an{opacity:1;transform:none}
.zb__buehne .kerbe{--f:var(--papier);font-size:clamp(1.1rem,1.5vw,1.6rem)}
.zb__pf{position:absolute;z-index:3;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;display:grid;place-items:center;color:var(--tinte);background:linear-gradient(180deg,#fbf3e2,#e8dbbf 50%,#cfbd98);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(110,88,44,.36),0 14px 20px -10px rgba(0,0,0,.7);transition:transform .4s var(--e1)}
.zb__pf svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.4}
.zb__pf--l{left:14px}.zb__pf--r{right:14px}
.zb__pf:hover{transform:scale(1.06)}.zb__pf:active{transform:scale(.96)}
.zb__daumen{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none;padding:2px}
.zb__daumen::-webkit-scrollbar{display:none}
.zb__daumen button{flex:none;width:clamp(74px,7.4vw,112px);aspect-ratio:3/2;border-radius:10px;overflow:hidden;opacity:.55;box-shadow:0 0 0 1px rgba(138,117,69,.3);transition:opacity .4s,box-shadow .4s}
.zb__daumen button img{width:100%;height:100%;object-fit:cover}
.zb__daumen button:hover{opacity:.9}
.zb__daumen button[aria-pressed="true"]{opacity:1;box-shadow:0 0 0 2px var(--taupe)}
.zb__t{padding:clamp(10px,2vw,34px) clamp(14px,2.4vw,40px) clamp(14px,2vw,30px) 0}
.zb__t .d3{font-size:clamp(1.9rem,2.9vw,3rem);line-height:1.08;padding-right:50px}
.zb__t .kapitel{margin:12px 0 0}
.zb__t .lauf{margin-top:18px;color:rgba(12,21,38,.82)}
.zb__t .zb__mit{padding-top:16px;border-top:1px solid var(--linie);font-weight:600}
.zb__t .kn-reihe{margin-top:24px}
.zb .kn{--o:#1f3f77;--m:#0b1f40;--u:#040d1e;--t:#fff;--licht:rgba(255,255,255,.26);--kante:rgba(0,0,0,.55);--tief:rgba(6,20,43,.6)}
@media (max-width:860px){.zb__in{grid-template-columns:minmax(0,1fr);gap:8px}.zb__t{padding:14px 10px 18px}.zb__pf{width:44px;height:44px;margin-top:-22px}}
.lk--breit{padding:10px;align-items:center}
.lk--breit .lk__b{border-radius:calc(var(--r-xl) - 8px);overflow:hidden}

/* =====================================================================
   FASSUNG 10 · Seitenkopf neu: Titel auf der Tapete, daneben ein grosses
   Farbfoto mit Einkerbung, das in den nächsten Abschnitt hineinragt.
   ===================================================================== */
.sk2{position:relative;z-index:1;color:#fff;padding:clamp(128px,11.5vw,176px) var(--rand) 0;box-shadow:inset 0 -1px 0 rgba(220,198,143,.4)}
.sk2>.in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(30px,5vw,96px);align-items:center}
.sk2__t{padding-bottom:clamp(56px,6.5vw,104px)}
.sk2 .d1{font-size:clamp(2.6rem,5.6vw,5.9rem);line-height:1.05;letter-spacing:-.02em}
.sk2 .d1 em{color:var(--gold)}
.sk2 .z>span{transition-delay:.15s}.sk2 .z:nth-child(2)>span{transition-delay:.3s}
.sk2__satz{margin-top:clamp(20px,2.2vw,32px);max-width:36ch;font-family:var(--serif);font-size:clamp(1.14rem,1.5vw,1.5rem);line-height:1.45;color:rgba(255,255,255,.9)}
.sk2 .kn-reihe{margin-top:clamp(22px,2.4vw,34px)}
.sk2__b{position:relative;margin:0 0 calc(-1*clamp(54px,6vw,100px));z-index:2}
.sk2__b .rahmen{background:#0d2447;box-shadow:inset 0 0 0 1px rgba(220,198,143,.4),0 44px 60px -36px rgba(0,0,0,.9)}
.sk2__b .rahmen__k{aspect-ratio:4/3}
.sk2__b .rahmen__k img{width:100%;height:100%;object-fit:cover}
.sk2__b .kerbe{--f:#0d2447;color:#fff;font-size:clamp(1.15rem,1.6vw,1.75rem)}
.sk2+.fl{padding-top:calc(var(--abschnitt) + clamp(24px,3vw,50px))}
.sk2--text{padding-bottom:clamp(44px,5vw,80px)}
.sk2--text>.in{grid-template-columns:minmax(0,1fr)}.sk2--text .sk2__t{padding-bottom:0}
.sk2--text+.fl{padding-top:var(--abschnitt)}
@media (max-width:860px){
  .sk2{padding-top:104px}
  .sk2>.in{grid-template-columns:minmax(0,1fr);gap:26px}
  .sk2__t{padding-bottom:0}
  .sk2 .d1{font-size:clamp(2.2rem,10vw,3.4rem)}
  .sk2__b{margin-bottom:-44px}
  .sk2+.fl{padding-top:calc(var(--abschnitt) + 30px)}
}

/* =====================================================================
   FASSUNG 11 · Auswahl-Leiste: ein runder, matter Balken in der Mitte mit
   eingekerbter Spur und erhabenen Tasten, die beim Wählen einrasten und leuchten.
   ===================================================================== */
.konsole{display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%;margin:clamp(6px,1vw,14px) auto 0;padding:11px;border-radius:46px;
  background:linear-gradient(180deg,#1b3f77,#0d2550 46%,#081a3a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(220,198,143,.42),0 7px 0 #040d20,0 8px 0 1px rgba(220,198,143,.16),0 46px 60px -30px rgba(6,20,43,.95)}
.konsole__spur{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;padding:9px;border-radius:36px;background:linear-gradient(180deg,#041025,#07183a);box-shadow:inset 0 4px 9px rgba(0,0,0,.85),inset 0 -1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(0,0,0,.5)}
.taste{position:relative;min-height:50px;padding:0 22px 0 42px;border-radius:999px;font-size:14.5px;font-weight:600;letter-spacing:.01em;color:var(--tinte);white-space:nowrap;
  background:linear-gradient(180deg,#fffaf0,#eee2c8 52%,#d3c29d);
  box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 rgba(110,88,44,.42),0 3px 0 #7a683e,0 14px 16px -8px rgba(0,0,0,.85);
  transition:transform .28s var(--e1),box-shadow .4s,background .4s,color .4s}
.taste::before{content:'';position:absolute;left:17px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:#b3a071;box-shadow:inset 0 1px 2px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.7);transition:background .35s,box-shadow .45s}
.taste:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 rgba(110,88,44,.42),0 5px 0 #7a683e,0 18px 20px -8px rgba(0,0,0,.9),0 0 0 1px rgba(220,198,143,.5)}
.taste:active{transform:translateY(3px)}
.taste[aria-pressed="true"]{transform:translateY(3px);color:#fff;background:linear-gradient(180deg,#0a2147,#12305e 55%,#1d4683);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.7),inset 0 0 0 1px rgba(236,214,157,.9),0 0 0 1px rgba(236,214,157,.3),0 0 26px rgba(236,214,157,.6),0 0 60px -10px rgba(236,214,157,.55)}
.taste[aria-pressed="true"]::before{background:#fff0c2;box-shadow:0 0 0 3px rgba(255,233,174,.22),0 0 14px 4px rgba(255,214,120,.95)}
.konsole__neu{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:var(--tinte);background:radial-gradient(circle at 35% 28%,#fff6dc,#e2cf9e 55%,#b89a55);box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 rgba(90,70,30,.45),0 3px 0 #6d5a30,0 14px 18px -8px rgba(0,0,0,.9);transition:transform .5s var(--e1),opacity .4s}
.konsole__neu svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}
.konsole__neu:hover{transform:rotate(90deg)}
.konsole__neu[style*="hidden"]{display:none}
.konsole__stand{margin:clamp(26px,3vw,44px) auto 0;text-align:center}
.konsole__stand b{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2vw,2.1rem);line-height:1.25}
.konsole__stand b i{font-style:normal;color:var(--taupe)}
.zraster{margin-top:clamp(30px,3.6vw,54px)}
@media (max-width:1180px){.konsole{border-radius:34px;align-items:stretch}.konsole__spur{border-radius:26px}.konsole__neu{align-self:center}}
@media (max-width:560px){.konsole{flex-direction:column;padding:9px;width:100%}.konsole__spur{gap:8px;padding:8px}.taste{min-height:46px;padding:0 16px 0 36px;font-size:14px}.taste::before{left:14px}}
.konsole__spur{gap:7px;padding:8px}
.taste{padding:0 17px 0 36px;font-size:14px}
.taste::before{left:14px}
@media (min-width:1500px){.taste{padding:0 22px 0 42px;font-size:15px}.taste::before{left:17px}.konsole__spur{gap:9px}}

/* =====================================================================
   FASSUNG 12 · Seitenkopf: das Foto ohne Kasten, es läuft links in die Tapete
   aus. Auswahl-Leiste flacher. Kleine Übergänge zwischen den Zimmern.
   ===================================================================== */
.sk2{overflow:hidden;min-height:clamp(480px,46vw,680px);display:flex;align-items:flex-end;padding-bottom:0}
.sk2>.in{position:relative;z-index:2;width:100%;grid-template-columns:minmax(0,1fr)}
.sk2__t{max-width:min(620px,46vw);padding-bottom:clamp(50px,5.6vw,92px)}
.sk2__b{position:absolute;z-index:1;top:0;right:0;bottom:0;left:auto;width:64%;margin:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 22%,#000 46%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 22%,#000 46%)}
.sk2__b img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:skein 2.8s var(--e1) .1s forwards}
@keyframes skein{to{transform:none}}
.sk2 .d1{text-shadow:0 2px 24px rgba(6,20,43,.6)}
.sk2+.fl{padding-top:var(--abschnitt)}
.sk2--text{min-height:0;display:block}
.sk2--text .sk2__t{max-width:none}
@media (max-width:860px){
  .sk2{display:block;min-height:0;padding-top:104px}
  .sk2__t{max-width:none;padding-bottom:26px}
  .sk2__b{position:relative;width:auto;height:62vw;margin:0 calc(-1*var(--rand));-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%);mask-image:linear-gradient(180deg,transparent 0,#000 34%)}
  .sk2>.in{display:block}
}
/* Auswahl-Leiste: matt und flach, nur leicht eingelassen */
.konsole{padding:8px;border-radius:40px;background:linear-gradient(180deg,#12305e,#0b2148);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(220,198,143,.34),0 22px 34px -24px rgba(6,20,43,.8)}
.konsole__spur{padding:7px;background:#08193a;box-shadow:inset 0 2px 4px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.07)}
.taste{min-height:46px;background:linear-gradient(180deg,#fbf3e2,#e8dbbf);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(110,88,44,.3),0 6px 10px -7px rgba(0,0,0,.7)}
.taste::before{width:8px;height:8px;margin-top:-4px;background:#b9a87e;box-shadow:none}
.taste:hover{transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(110,88,44,.3),0 6px 10px -7px rgba(0,0,0,.7),0 0 0 1px rgba(220,198,143,.7)}
.taste:active{transform:scale(.98)}
.taste[aria-pressed="true"]{transform:none;background:#12305e;box-shadow:inset 0 2px 4px rgba(0,0,0,.45),inset 0 0 0 1px rgba(236,214,157,.85),0 0 16px rgba(236,214,157,.32)}
.taste[aria-pressed="true"]::before{background:#f6e3ab;box-shadow:0 0 8px 2px rgba(255,214,120,.7)}
.konsole__neu{width:50px;height:50px;background:linear-gradient(180deg,#fbf3e2,#dccb9f);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(110,88,44,.3),0 6px 10px -7px rgba(0,0,0,.7)}
/* Übergang zwischen zwei Zimmern: feine Linie, in der Mitte das Zeichen des Hauses */
.kat{padding-top:clamp(64px,7vw,112px);padding-bottom:clamp(64px,7vw,112px)}
.uebergang{position:relative;z-index:2;height:0}
.uebergang::before{content:'';position:absolute;left:var(--rand);right:var(--rand);top:0;height:1px;background:linear-gradient(90deg,transparent,var(--taupe) 22%,var(--taupe) 78%,transparent);opacity:.6}
.uebergang span{position:absolute;left:50%;top:0;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;display:grid;place-items:center;background:var(--creme);box-shadow:inset 0 0 0 1px rgba(138,117,69,.5),inset 0 2px 4px rgba(74,58,26,.22),0 1px 0 rgba(255,255,255,.8)}
.uebergang--hell span{background:var(--papier)}
.uebergang svg{width:30px;height:auto;color:var(--taupe)}

/* =====================================================================
   FASSUNG 13 · Material aus der Sammlung: Gastgeber, Einblicke, Film
   ===================================================================== */
.gastgeber{display:flex;align-items:center;gap:16px;margin-top:clamp(22px,2.4vw,32px)}
.gastgeber__b{flex:none;width:74px;height:74px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--linie),0 0 0 5px #fffaf0,0 0 0 6px var(--linie),0 14px 20px -12px rgba(74,58,26,.6)}
.gastgeber__b img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.gastgeber p{display:grid;gap:2px}
.gastgeber b{font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,1.5vw,1.5rem)}
.gastgeber span{font-size:1rem;color:rgba(12,21,38,.72)}
.eb{flex:none;width:clamp(300px,44vw,720px);scroll-snap-align:start;margin:0}
.eb .rahmen__k{aspect-ratio:3/2}.eb .rahmen__k img{width:100%;height:100%;object-fit:cover}
.eb .rahmen[data-r="bild"]{display:block}
@media (max-width:640px){.eb{width:82vw}}
.film{margin:0 auto;max-width:1180px}
.film .rahmen__k{aspect-ratio:16/9;background:#000}
.film video{display:block;width:100%;height:100%;object-fit:cover}
#bau .koord{margin-top:clamp(22px,2.6vw,34px)}
.hero--f .hero__bild{inset:0 0 -14% 0}
.hero--f .hero__bild img{object-position:62% 0%}

/* =====================================================================
   FASSUNG 14 · Auftakt ohne hellen Streifen, drei Bilder beim Vintage Hotel,
   Zeit-Auswahl als helle Karten mit eingelassenem Namensfeld
   ===================================================================== */
.trio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(10px,1.2vw,18px)}
.trio>figure:first-child{grid-column:1/-1}
.trio .rahmen__k{aspect-ratio:4/3}.trio>figure:first-child .rahmen__k{aspect-ratio:3/2}
.trio .rahmen--m .kerbe{font-size:clamp(1rem,1.25vw,1.3rem)}
.zeitreihe,.tabs.zeitreihe{overflow:visible;flex-wrap:wrap;padding-top:14px}
.zeitreihe .tab.zt{display:flex;flex-direction:column;aspect-ratio:auto;overflow:visible;padding:8px 8px 9px;border-radius:26px;color:var(--tinte);
  background:linear-gradient(180deg,#fffdf6,#f1e6cc);box-shadow:inset 0 0 0 1px rgba(138,117,69,.32),inset 0 1px 0 #fff,0 28px 38px -26px rgba(0,0,0,.85);
  transition:transform .9s var(--e1),box-shadow .5s,opacity 1.25s var(--e1)}
.zt__b{position:relative;display:block;aspect-ratio:1/1.02;border-radius:19px;overflow:hidden;background:var(--creme)}
.zeitreihe .tab.zt img{opacity:.82}
.zeitreihe .tab.zt:hover img,.zeitreihe .tab.zt[aria-pressed="true"] img{opacity:1}
.zt__n{display:block;margin:9px 1px 0;padding:12px 6px 11px;border-radius:14px;text-align:center;font-family:var(--serif);font-size:clamp(.98rem,1.4vw,1.42rem);line-height:1.1;white-space:nowrap;
  background:#f1e7cf;box-shadow:inset 0 2px 4px rgba(74,58,26,.24),inset 0 -1px 0 rgba(255,255,255,.9);transition:background .45s,color .45s,box-shadow .45s}
.zeitreihe .tab.zt[aria-pressed="true"]{transform:translateY(-10px);box-shadow:inset 0 0 0 1px rgba(138,117,69,.32),inset 0 1px 0 #fff,0 0 0 2px var(--gold),0 0 0 7px rgba(220,198,143,.16),0 36px 44px -26px rgba(0,0,0,.95)}
.zeitreihe .tab.zt[aria-pressed="true"] .zt__n{background:linear-gradient(180deg,#0b2148,#12305e);color:#fff;box-shadow:inset 0 2px 4px rgba(0,0,0,.5),inset 0 0 0 1px rgba(220,198,143,.6)}
@media (max-width:860px){
  .zeitreihe .tab.zt{aspect-ratio:auto;border-radius:18px;padding:6px 6px 7px}
  .zt__b{border-radius:13px}.zt__n{font-size:.82rem;padding:8px 2px 7px;margin-top:6px;border-radius:10px;white-space:normal}
  .zeitreihe .tab.zt[aria-pressed="true"]{transform:none}
  .trio{gap:8px}
}

/* =====================================================================
   FASSUNG 15 · Bildkarten im dunkelblauen Rahmen, Packages-Karten erhaben,
   Auftakt-Schatten ohne Kante, Kerben ohne Haarlinie
   ===================================================================== */
/* Auftakt: während des Hochrollens nur enger Schatten (sonst schneidet die Maske ihn als Streifen ab), danach blendet der weiche Hof ein */
/* Kerben: einen Hauch über den Rand, damit darunter keine dunkle Haarlinie stehen bleibt */
.kerbe{left:-1px;bottom:-1px}
.fl--papier .rahmen__k,.fl--creme .rahmen__k{background:var(--creme)}
/* Bildkarte: Rahmen in Navy wie der Knopf, Bild mit eigener Rundung, Name mittig darunter */
.bk{margin:0;padding:9px 9px 0;border-radius:28px;color:#fbf3e2;background:linear-gradient(180deg,#24477f,#0e2a55 46%,#071a3a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(220,198,143,.34),0 3px 0 #040d1e,0 34px 44px -26px rgba(6,20,43,.8)}
.bk .rahmen__k{display:block;position:relative;overflow:hidden;border-radius:20px;aspect-ratio:4/3;background:#0b1f40;transform:translateZ(0);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.bk .rahmen__k img{width:100%;height:100%;object-fit:cover}
.bk figcaption{display:grid;place-items:center;min-height:clamp(48px,4.4vw,62px);padding:2px 12px 4px;text-align:center;font-family:var(--serif);font-size:clamp(1.08rem,1.5vw,1.56rem);line-height:1.1;letter-spacing:.005em}
.trio>figure:first-child .rahmen__k{aspect-ratio:16/10}
.trio .bk:not(:first-child){border-radius:24px}.trio .bk:not(:first-child) .rahmen__k{border-radius:16px}
@media (max-width:860px){.bk{border-radius:20px;padding:6px 6px 0}.bk .rahmen__k{border-radius:14px}.bk figcaption{min-height:40px;font-size:1rem}}
/* Packages: Karten heben sich vom Grund ab */
.gang:has(.lk) .band{padding-top:22px;padding-bottom:86px;margin-bottom:-52px}
.gang .lk{border-radius:30px;padding:10px;background:linear-gradient(180deg,#24477f,#0e2a55 40%,#071a3a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(220,198,143,.36),0 4px 0 #030b1c,0 5px 0 1px rgba(220,198,143,.14),0 40px 50px -22px rgba(0,0,0,.9),0 70px 80px -50px rgba(0,0,0,.8);
  transition:transform .9s var(--e1)}
.gang .lk:hover{transform:translateY(-8px)}
.gang .lk__b{border-radius:21px;overflow:hidden;transform:translateZ(0)}
.gang .lk .kerbe{--f:#0e2a55;color:#fbf3e2}
.gang .lk__t{padding:clamp(22px,3vw,46px)}
.gang:has(.lk) .laufbalken{position:relative;z-index:2}


/* =====================================================================
   FASSUNG 17 · Auftakt-Titel mit Schatten, gebaut wie im Referenzbau Salt & Silver:
   drei gleiche Lagen in derselben Rasterzelle. Die Schrift und eine Schattenlage fahren
   gemeinsam durch den Schlitz hoch; ist die Schrift da, blendet der fertige, unbeschnittene
   Schatten über. Nur Deckkraft und Verschiebung.
   ===================================================================== */
.hero--f .hero__titel{position:relative;display:grid}
.hero--f .hero__titel>*{grid-area:1/1;min-width:0;margin:0}
.hero--f .hero__titel .z{padding:.16em 0 .03em;margin:-.16em 0 -.03em}
.hero--f .hero__titel>h1[data-r]{position:relative;opacity:1;transform:none}
.hero--f .hero__titel>h1 .z{overflow:hidden}
.hero--f .hero__titel>h1 .z>span{text-shadow:none}
.hero--f .hero__schatten{position:relative;display:block;color:transparent;pointer-events:none;-webkit-user-select:none;user-select:none;text-shadow:none}
.hero--f .hero__schatten em{color:transparent}
.hero--f .hero__schatten .z>span{text-shadow:0 .02em .03em rgba(4,10,24,.7),0 .1em .26em rgba(4,10,24,.8),0 .16em .5em rgba(4,10,24,.7)}
.hero--f .hero__schatten--mit .z{overflow:visible;clip-path:inset(-.3em -.6em 0 -.6em)}
.hero--f .hero__schatten--mit[data-r]{opacity:1;transform:none;transition:opacity .5s linear 3.15s}
.hero--f .hero__schatten--mit[data-r].da{opacity:0}
.hero--f .hero__schatten--ruhe .z{overflow:visible;clip-path:none}
.hero--f .hero__schatten--ruhe .z>span{transform:none;transition:none}
.hero--f .hero__schatten--ruhe[data-r]{opacity:0;transform:none;transition:opacity .5s linear 3.15s}
.hero--f .hero__schatten--ruhe[data-r].da{opacity:1}
.kein-vorhang .hero--f .hero__schatten--mit[data-r],.kein-vorhang .hero--f .hero__schatten--ruhe[data-r]{transition-delay:1.4s}
/* Auftakt: Satz unter dem Titel wieder im normalen Schnitt wie zu Beginn, dafür mehr Schatten; Titel-Schatten etwas kräftiger */
.hero--f .hero__sub{font-weight:400;text-shadow:0 0 .3em rgba(4,10,24,1),0 1px 2px rgba(4,10,24,1),0 2px 8px rgba(4,10,24,1),0 4px 18px rgba(4,10,24,1),0 10px 46px rgba(4,10,24,1),0 0 70px rgba(4,10,24,.85)}
.leiste+.hero__zeile{max-width:1040px;justify-content:center;text-align:center}
.hero__zeile{font-weight:400;text-shadow:0 0 .3em rgba(4,10,24,1),0 1px 2px rgba(4,10,24,1),0 3px 14px rgba(4,10,24,1),0 8px 30px rgba(4,10,24,.95)}
.hero--f .hero__schatten .z>span{text-shadow:0 .02em .04em rgba(4,10,24,.85),0 .07em .2em rgba(4,10,24,.9),0 .15em .46em rgba(4,10,24,.9),0 .1em 1em rgba(4,10,24,.7)}
/* Zeit-Auswahl: die gewählte Karte wird grösser als die anderen, das Namensfeld bleibt hell */
.zeitreihe .tab.zt{transform-origin:50% 60%;z-index:1}
.zeitreihe .tab.zt[aria-pressed="true"]{transform:scale(1.1);z-index:2;box-shadow:inset 0 0 0 1px rgba(138,117,69,.32),inset 0 1px 0 #fff,0 0 0 2px var(--gold),0 44px 54px -26px rgba(0,0,0,.95)}
.zeitreihe .tab.zt[aria-pressed="true"] .zt__n{background:#f1e7cf;color:var(--tinte);box-shadow:inset 0 2px 4px rgba(74,58,26,.24),inset 0 -1px 0 rgba(255,255,255,.9)}
.zeitreihe{padding-top:22px;padding-bottom:10px}
@media (max-width:860px){.zeitreihe .tab.zt[aria-pressed="true"]{transform:scale(1.05)}}
/* Auftakt: noch etwas mehr Schatten hinter Titel und Satz */
.hero--f .hero__schatten .z>span{text-shadow:0 .02em .04em rgba(4,10,24,.95),0 .06em .16em rgba(4,10,24,.95),0 .12em .34em rgba(4,10,24,.95),0 .18em .6em rgba(4,10,24,.9),0 .1em 1.2em rgba(4,10,24,.85)}
.hero--f .hero__sub{text-shadow:0 0 .25em rgba(4,10,24,1),0 1px 2px rgba(4,10,24,1),0 2px 6px rgba(4,10,24,1),0 4px 14px rgba(4,10,24,1),0 8px 30px rgba(4,10,24,1),0 12px 54px rgba(4,10,24,1),0 0 80px rgba(4,10,24,.95)}
/* Die mitfahrende Schattenlage bleibt aus: mit dem kräftigeren Schatten wäre ihre Schnittkante als Balken zu sehen. Der Schatten blendet ein, sobald die Schrift steht. */
.hero--f .hero__schatten--mit{display:none}
.hero--f .hero__schatten--ruhe[data-r]{transition:opacity .7s ease 3s}
.kein-vorhang .hero--f .hero__schatten--ruhe[data-r]{transition-delay:1.25s}
/* Zeit-Auswahl: gewählte Karte noch etwas grösser */
.zeitreihe .tab.zt[aria-pressed="true"]{transform:scale(1.17)}
.zeitreihe{padding-top:38px;padding-bottom:26px}
@media (max-width:860px){.zeitreihe .tab.zt[aria-pressed="true"]{transform:scale(1.07)}.zeitreihe{padding-top:22px;padding-bottom:12px}}

/* =====================================================================
   FASSUNG 18 · Auftakt: der Schatten rollt mit der Schrift durch den Schlitz hoch.
   Seine Lage läuft zur Schlitzkante weich aus (Maske statt harter Schnitt), deshalb kein Balken.
   Steht die Schrift, blendet der volle Schatten über. Schluss: Schrift mit Schatten, Angaben auf einer Leiste.
   ===================================================================== */
.hero--f .hero__schatten--mit{display:block}
.hero--f .hero__schatten--mit .z{overflow:visible;clip-path:none;padding:.7em .8em .03em;margin:-.7em -.8em -.03em;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 .34em,#000 calc(100% - .2em),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 .34em,#000 calc(100% - .2em),transparent 100%)}
.hero--f .hero__schatten--mit[data-r]{opacity:1;transition:opacity .55s linear 3.25s}
.hero--f .hero__schatten--mit[data-r].da{opacity:0}
.hero--f .hero__schatten--ruhe[data-r]{transition:opacity .55s linear 3.25s}
.kein-vorhang .hero--f .hero__schatten--mit[data-r],.kein-vorhang .hero--f .hero__schatten--ruhe[data-r]{transition-delay:1.5s}
/* Schluss */
.schluss .d1 .z>span{text-shadow:0 .03em .06em rgba(4,10,24,.9),0 .1em .3em rgba(4,10,24,.9),0 .16em .6em rgba(4,10,24,.8)}
.schluss .d1 .z{overflow:visible;clip-path:inset(-.4em -.6em 0 -.6em)}
.schluss .d1.da .z{clip-path:none;transition:clip-path 0s 1.6s}
.schluss .lauf{color:#fff;text-shadow:0 1px 2px rgba(4,10,24,1),0 3px 12px rgba(4,10,24,1),0 8px 34px rgba(4,10,24,1)}
.schluss .koord{display:inline-grid;margin-top:clamp(34px,4vw,56px);padding:16px 8px 15px;border-radius:24px;background:linear-gradient(180deg,#16386c,#0b2148);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(220,198,143,.4),0 26px 36px -22px rgba(0,0,0,.9)}
.schluss .koord div{padding:4px clamp(18px,2.4vw,36px)}
.schluss .koord div:first-child{padding-left:clamp(18px,2.4vw,36px)}
.schluss .koord dt{font-size:13px;color:var(--gold);opacity:1}
.schluss .koord dd{color:#fff}
@media (max-width:560px){.schluss .koord{display:grid;grid-template-columns:1fr;gap:12px;padding:16px 6px}.schluss .koord div{border-left:0}}
/* Zeit-Auswahl: gewählte Karte wieder nur leicht grösser (Stand davor) */
.zeitreihe .tab.zt[aria-pressed="true"]{transform:scale(1.1)}
.zeitreihe{padding-top:22px;padding-bottom:10px}
@media (max-width:860px){.zeitreihe .tab.zt[aria-pressed="true"]{transform:scale(1.05)}}
/* Bilder ohne Rahmen (Willkommen und Zimmer-Reihe der Startseite): runde Ecken, weicher Schatten, Name mittig darunter */
.frei{margin:0;min-width:0}
.frei .rahmen__k{display:block;border-radius:22px;aspect-ratio:4/3;background:var(--creme);transform:translateZ(0);box-shadow:0 34px 40px -28px rgba(40,30,10,.6)}
.frei .rahmen__k img{width:100%;height:100%;object-fit:cover}
.frei figcaption{display:block;padding-top:clamp(12px,1.2vw,18px);text-align:center;font-family:var(--serif);font-size:clamp(1.08rem,1.5vw,1.56rem);line-height:1.1;letter-spacing:.005em;color:var(--tinte)}
.trio--frei{gap:clamp(20px,2vw,30px) clamp(12px,1.4vw,22px)}
.zreihe .frei .rahmen__k{aspect-ratio:3/4;border-radius:26px}
.zreihe .frei figcaption{display:block;margin-top:0;padding-top:clamp(16px,1.7vw,26px);font-size:clamp(1.4rem,2.1vw,2.2rem);line-height:1.12;color:var(--tinte)}
.zreihe .frei figcaption span{display:block;margin-top:9px;font-family:var(--sans);font-size:clamp(1.02rem,1.1vw,1.12rem);line-height:1.4;letter-spacing:0;color:rgba(12,21,38,.78)}
@media (max-width:860px){.zreihe .frei .rahmen__k{aspect-ratio:4/3;border-radius:22px}}

/* Kerbe in den grossen Karten: genug Luft nach unten, damit Unterlängen nicht abgeschnitten sind; Karten im Band stehen nie am linken Rand an */
.gang .lk .kerbe{--f:#0e2a55;color:#fbf3e2;padding-bottom:12px;line-height:1.15}
.gang .lk{scroll-snap-align:start}
.band{scroll-padding-left:var(--rand)}
.fl--papier .gang .lk,.fl--creme .gang .lk{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(220,198,143,.36),0 4px 0 #030b1c,0 40px 50px -24px rgba(12,21,38,.75),0 70px 80px -50px rgba(12,21,38,.6)}

/* =====================================================================
   FASSUNG 19 · Gut zu wissen (aufklappbare Antworten) und Newsletter im Fuss
   ===================================================================== */
.gzw{columns:2;column-gap:clamp(24px,3.4vw,60px)}
.gzw details{break-inside:avoid;border-bottom:1px solid var(--linie)}
.gzw details:first-child,.gzw details:nth-child(10){border-top:1px solid var(--linie)}
.gzw summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(15px,1.5vw,21px) 0;cursor:pointer;list-style:none;font-family:var(--serif);font-size:clamp(1.2rem,1.6vw,1.62rem);line-height:1.2}
.gzw summary::-webkit-details-marker{display:none}
.gzw summary i{position:relative;flex:none;width:42px;height:42px;border-radius:50%;color:#fff;background:linear-gradient(180deg,#1f3f77,#0b1f40 55%,#040d1e);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 10px 14px -10px rgba(6,20,43,.7);transition:transform .6s var(--e1)}
.gzw summary i::before,.gzw summary i::after{content:'';position:absolute;left:50%;top:50%;width:13px;height:1.4px;margin:-.7px 0 0 -6.5px;background:currentColor;transition:transform .5s var(--e1)}
.gzw summary i::after{transform:rotate(90deg)}
.gzw details[open] summary i{transform:rotate(180deg)}
.gzw details[open] summary i::after{transform:rotate(0)}
.gzw details>div{padding:0 62px clamp(16px,1.6vw,22px) 0;animation:gzwauf .6s var(--e1)}
.gzw p{font-size:1.04rem;line-height:1.66;color:rgba(12,21,38,.82)}
.gzw a{box-shadow:inset 0 -1px 0 currentColor}
@keyframes gzwauf{from{opacity:0;transform:translateY(-8px)}}
@media (max-width:860px){.gzw{columns:1}.gzw details:nth-child(10){border-top:0}.gzw details>div{padding-right:0}}
.fuss__news{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(20px,3vw,60px);align-items:center;margin-top:clamp(34px,4vw,60px);padding:clamp(22px,2.6vw,38px);border-radius:26px;background:linear-gradient(180deg,#16386c,#0b2148);box-shadow:inset 0 0 0 1px rgba(220,198,143,.34),inset 0 1px 0 rgba(255,255,255,.16),0 34px 50px -34px rgba(0,0,0,.95)}
.fuss__news[data-r]{transform:none}
.fuss__news h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.3vw,2.4rem);line-height:1.12}
.fuss__news p{margin-top:8px;font-size:1rem;line-height:1.55;color:rgba(255,255,255,.78);max-width:52ch}
.fuss__feld{display:flex;align-items:center;gap:8px;padding:7px 7px 7px 22px;border-radius:999px;background:#07183a;box-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.1)}
.fuss__feld label{flex:1;min-width:0}
.fuss__feld input{width:100%;min-width:0;background:none;border:0;outline:0;color:#fff;font:inherit;font-size:1.06rem;padding:10px 0}
.fuss__feld input::placeholder{color:rgba(255,255,255,.55)}
.fuss__feld .kn{flex:none}
@media (max-width:860px){.fuss__news{grid-template-columns:minmax(0,1fr)}.fuss__feld{flex-wrap:wrap;border-radius:22px;padding:10px 12px}.fuss__feld .kn{width:100%;justify-content:space-between}}


/* ==========================================================================
   FASSUNG 20 · Gastgeber: Porträt grösser und neben dem Text, Name als Unterschrift
   ========================================================================== */
.gastgeber{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"b t" "b n";column-gap:clamp(22px,2.4vw,36px);row-gap:14px;align-items:center;margin-top:clamp(26px,2.8vw,40px)}
.gastgeber__b{grid-area:b;align-self:center;width:clamp(104px,8.6vw,134px);height:clamp(104px,8.6vw,134px);margin-left:7px;box-shadow:0 0 0 1px var(--linie),0 0 0 6px #fffaf0,0 0 0 7px var(--linie),0 22px 28px -16px rgba(74,58,26,.62)}
.gastgeber>.lauf{grid-area:t;align-self:end;margin:0;max-width:none}
.gastgeber>.gastgeber__n{grid-area:n;align-self:start;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding-top:14px;border-top:1px solid var(--linie)}
.gastgeber__n b{font-size:clamp(1.3rem,1.7vw,1.7rem)}
@media (max-width:600px){
  .gastgeber{grid-template-areas:"t t" "b n";column-gap:18px;row-gap:22px}
  .gastgeber__b{width:92px;height:92px}
  .gastgeber>.gastgeber__n{display:grid;border-top:0;padding-top:0;align-self:center}
}

/* ==========================================================================
   FASSUNG 21 · «Wofür kommen Sie?»: sechs gleich grosse Bilder · Auswahl-Balken mit Glanz
   ========================================================================== */
@media (min-width:1241px){
  .galerie{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gal:nth-child(n){grid-column:auto;height:clamp(250px,23.5vw,350px)}
  .gal:nth-child(n) .kerbe{font-size:clamp(1.25rem,1.8vw,1.9rem)}
  .gal:nth-child(n) .gal__t span{font-size:clamp(.95rem,1.05vw,1.08rem);line-height:1.46}
}

/* Balken: feines Licht läuft um den Rand, ein Lichtstreifen zieht durch, die Tasten kommen der Reihe nach */
.konsole{position:relative;isolation:isolate;overflow:hidden;border:1px solid transparent;--gp:0%;
  background:linear-gradient(180deg,#12305e,#0b2148) padding-box,
    conic-gradient(from calc(var(--ga) - var(--go)),rgba(220,198,143,.4),var(--gold) var(--gp),#fff calc(var(--gp)*2),var(--gold) calc(var(--gp)*3),rgba(220,198,143,.4) calc(var(--gp)*4)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 22px 34px -24px rgba(6,20,43,.8);
  transition:--go .9s cubic-bezier(.25,1,.5,1),--gp .9s cubic-bezier(.25,1,.5,1),box-shadow .7s var(--e2),opacity 1.1s var(--e1),transform 1.3s var(--e1)}
.konsole:is(:hover,:focus-within){--gp:7%;--go:60deg;animation:ga 5.2s linear infinite;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 5px rgba(220,198,143,.1),0 30px 40px -24px rgba(6,20,43,.9)}
.konsole::before,.konsole::after{content:'';position:absolute;z-index:3;top:-30%;bottom:-30%;left:0;width:16%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,244,214,.34) 50%,transparent);transform:translateX(-140%) skewX(-18deg)}
.konsole.da::before{animation:kstreif 1.9s var(--e2) .55s both}
.konsole:hover::after{transform:translateX(760%) skewX(-18deg);transition:transform 1.7s var(--e2)}
@keyframes kstreif{to{transform:translateX(760%) skewX(-18deg)}}
.konsole .taste{overflow:hidden;transition:transform .5s var(--e2),box-shadow .5s var(--e2),background .45s,color .45s}
.konsole .taste::after{content:'';position:absolute;top:-20%;bottom:-20%;left:0;width:40%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85) 50%,transparent);transform:translateX(-130%) skewX(-18deg)}
.konsole .taste:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(110,88,44,.3),0 12px 14px -8px rgba(0,0,0,.8),0 0 0 1px rgba(236,214,157,.95),0 0 18px rgba(236,214,157,.3)}
.konsole .taste:hover::after{transform:translateX(380%) skewX(-18deg);transition:transform .95s var(--e1)}
.konsole .taste:hover::before{background:var(--taupe);box-shadow:0 0 0 3px rgba(220,198,143,.4)}
.konsole .taste:active{transform:scale(.98)}
.konsole .taste[aria-pressed="true"]{transform:none}
.konsole .taste[aria-pressed="true"]::after{background:linear-gradient(100deg,transparent,rgba(255,244,214,.3) 50%,transparent)}
.konsole .taste[aria-pressed="true"]:hover::before{background:#f6e3ab;box-shadow:0 0 8px 2px rgba(255,214,120,.7)}
.konsole.da .taste{animation:tein 1s var(--e1) backwards;animation-delay:calc(.2s + var(--k,0)*75ms)}
.konsole .taste:nth-child(2){--k:1}.konsole .taste:nth-child(3){--k:2}.konsole .taste:nth-child(4){--k:3}.konsole .taste:nth-child(5){--k:4}.konsole .taste:nth-child(6){--k:5}.konsole .taste:nth-child(7){--k:6}.konsole .taste:nth-child(8){--k:7}
@keyframes tein{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){.konsole,.konsole::before,.konsole .taste{animation:none!important}.konsole::before,.konsole::after,.konsole .taste::after{display:none}}

/* ==========================================================================
   FASSUNG 22 · «Wie viel Zeit haben Sie?»: fünf Karten in einer Reihe. Die gewählte wird gross
   und rutscht nach unten, die anderen werden klein und bleiben als Zeile oben stehen.
   ========================================================================== */
.zs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,20px);align-items:start}
.zs__k{position:relative;display:flex;flex-direction:column;min-width:0;padding:8px 8px 9px;border-radius:26px;color:var(--tinte);text-align:left;cursor:pointer;
  background:linear-gradient(180deg,#fffdf6,#f1e6cc);box-shadow:inset 0 0 0 1px rgba(138,117,69,.32),inset 0 1px 0 #fff,0 28px 38px -26px rgba(0,0,0,.85)}
.zs--bereit .zs__k.da{transition:transform .6s var(--e2),box-shadow .5s var(--e2);transition-delay:0s}
.zs__b{position:relative;display:block;aspect-ratio:1/1.02;border-radius:19px;overflow:hidden;background:var(--creme)}
.zs__b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--e1)}
.zs__n{display:block;margin:9px 1px 0;padding:12px 6px 11px;border-radius:14px;text-align:center;font-family:var(--serif);font-size:clamp(.98rem,1.4vw,1.42rem);line-height:1.1;white-space:nowrap;
  background:#f1e7cf;box-shadow:inset 0 2px 4px rgba(74,58,26,.24),inset 0 -1px 0 rgba(255,255,255,.9)}
@media (hover:hover){
  .zs:not(.zs--offen) .zs__k.da:hover{transform:translateY(-8px);box-shadow:inset 0 0 0 1px rgba(138,117,69,.32),inset 0 1px 0 #fff,0 0 0 2px var(--gold),0 40px 46px -26px rgba(0,0,0,.95)}
  .zs__k:hover .zs__b img{transform:scale(1.06)}
}
.zs__k:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.zs__text,.zs__zu{display:none}

/* offen */
.zs--offen{grid-template-columns:repeat(12,minmax(0,1fr));row-gap:clamp(18px,1.8vw,28px)}
.zs--offen .zs__k{grid-column:span 3;flex-direction:row;align-items:stretch;gap:8px;padding:7px;border-radius:20px}
.zs--offen .zs__k .zs__b{flex:none;width:clamp(54px,4.6vw,70px);aspect-ratio:1/1;border-radius:14px}
.zs--offen .zs__k .zs__n{flex:1;min-width:0;margin:0;display:grid;place-items:center;padding:6px 8px;border-radius:13px;font-size:clamp(.95rem,1.25vw,1.26rem)}
@media (hover:hover){.zs--offen .zs__k.da:not([aria-pressed="true"]):hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(138,117,69,.32),inset 0 1px 0 #fff,0 0 0 2px var(--gold),0 26px 30px -22px rgba(0,0,0,.95)}}
.zs--offen .zs__k[aria-pressed="true"]{grid-column:1/8;grid-row:2;flex-direction:column;gap:0;padding:10px 10px 11px;border-radius:32px;cursor:default;
  box-shadow:inset 0 0 0 1px rgba(138,117,69,.32),inset 0 1px 0 #fff,0 0 0 2px var(--gold),0 0 0 8px rgba(220,198,143,.14),0 50px 60px -34px rgba(0,0,0,.95)}
.zs--offen .zs__k[aria-pressed="true"] .zs__b{width:auto;aspect-ratio:16/10.4;border-radius:23px}
.zs--offen .zs__k[aria-pressed="true"] .zs__b img{transform:none}
.zs--offen .zs__k[aria-pressed="true"] .zs__n{flex:none;display:block;margin:10px 1px 0;padding:15px 10px 14px;border-radius:17px;font-size:clamp(1.3rem,2.1vw,2.2rem)}
.zs--offen .zs__zu{display:grid;place-items:center;grid-column:1/8;grid-row:2;justify-self:end;align-self:start;z-index:3;margin:clamp(20px,1.9vw,28px);width:50px;height:50px;border-radius:50%;color:var(--tinte);
  background:linear-gradient(180deg,#fbf3e2,#e8dbbf 50%,#cfbd98);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(110,88,44,.36),0 12px 18px -10px rgba(0,0,0,.7);transition:transform .6s var(--e1)}
.zs__zu svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}
.zs--offen .zs__zu:hover{transform:rotate(90deg)}
.zs--offen .zs__text{display:block;grid-column:8/-1;grid-row:2;align-self:center;padding-left:clamp(10px,2.4vw,44px)}
.zs__text .d3{font-size:clamp(2rem,3.4vw,3.5rem);line-height:1.08}
.zs__text .lauf{margin-top:18px;max-width:46ch}
.zs__text .koord{justify-content:start;padding:0;margin-top:clamp(20px,2.2vw,32px)}
.zs__text .kn-reihe{margin-top:clamp(20px,2.2vw,30px)}
.zs__text .koord{grid-template-columns:repeat(2,minmax(0,1fr))}.zs__text .koord dd{font-size:clamp(1.05rem,1.3vw,1.36rem);line-height:1.18}
.zs__text [data-r]{opacity:1;transform:none}
@media (max-width:1100px){
  .zs--offen .zs__k[aria-pressed="true"],.zs--offen .zs__zu{grid-column:1/-1}
  .zs--offen .zs__text{grid-column:1/-1;grid-row:3;padding-left:0}
}
@media (max-width:860px){
  .zs{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  .zs__k{grid-column:span 2;border-radius:18px;padding:6px 6px 7px}
  .zs__k:nth-child(n+4){grid-column:span 3}
  .zs__k:nth-child(n+4) .zs__b{aspect-ratio:1.5/1}
  .zs__b{border-radius:13px}.zs__n{font-size:.86rem;padding:8px 2px 7px;margin-top:6px;border-radius:10px;white-space:normal}
  .zs:not(.zs--offen){align-items:stretch}.zs:not(.zs--offen) .zs__n{flex:1;display:grid;place-items:center}
  .zs--offen{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:8px}
  .zs--offen .zs__k,.zs--offen .zs__k:nth-child(n+4){grid-column:span 1;border-radius:16px;padding:6px}
  .zs--offen .zs__k .zs__b,.zs--offen .zs__k:nth-child(n+4) .zs__b{width:46px;aspect-ratio:1/1;border-radius:11px}
  .zs--offen .zs__k .zs__n{font-size:.9rem;border-radius:10px}
  .zs--offen .zs__k[aria-pressed="true"],.zs--offen .zs__zu{grid-column:1/-1;grid-row:3}
  .zs--offen .zs__k[aria-pressed="true"]{border-radius:24px;padding:7px 7px 8px;margin-top:10px}
  .zs--offen .zs__k[aria-pressed="true"] .zs__b{width:auto;aspect-ratio:4/3;border-radius:18px}
  .zs--offen .zs__k[aria-pressed="true"] .zs__n{font-size:1.3rem;padding:12px 8px 11px;border-radius:13px;margin-top:7px}
  .zs--offen .zs__zu{width:44px;height:44px;margin:24px 16px}
  .zs--offen .zs__text{grid-row:4;margin-top:14px}
}
/* Übergang: die Karten wandern und wachsen, der Rest der Seite springt nicht über Kreuz */
::view-transition-old(root){display:none}
::view-transition-new(root){animation:none}
::view-transition-group(zs-k0),::view-transition-group(zs-k1),::view-transition-group(zs-k2),::view-transition-group(zs-k3),::view-transition-group(zs-k4){animation-duration:.85s;animation-timing-function:cubic-bezier(.32,.72,0,1)}
::view-transition-old(zs-k0),::view-transition-old(zs-k1),::view-transition-old(zs-k2),::view-transition-old(zs-k3),::view-transition-old(zs-k4),
::view-transition-new(zs-k0),::view-transition-new(zs-k1),::view-transition-new(zs-k2),::view-transition-new(zs-k3),::view-transition-new(zs-k4){animation-duration:.5s;height:100%;width:100%;object-fit:fill}
.zs--fahrt .zs__text{view-transition-name:zs-text}.zs--fahrt .zs__zu{view-transition-name:zs-zu}
::view-transition-new(zs-text){animation:zsein .8s cubic-bezier(.16,1,.3,1) .3s both}
::view-transition-old(zs-text){animation:zsaus .25s ease both}
::view-transition-new(zs-zu){animation:zsaus .4s ease .45s reverse both}
::view-transition-old(zs-zu){animation:zsaus .2s ease both}
@keyframes zsein{from{opacity:0;transform:translateY(26px)}}
@keyframes zsaus{to{opacity:0}}

/* ==========================================================================
   FASSUNG 23 · Essen & Trinken: Auftakt mit mehr Bildern, «Weniger ist mehr» als Satz mit Angaben
   ========================================================================== */
.gastgeber__n--zwei{display:grid!important;grid-template-columns:auto auto;justify-content:start;gap:4px 14px!important;align-items:baseline}
.gastgeber__n--zwei i{display:none}
@media (max-width:600px){.gastgeber__n--zwei{grid-template-columns:minmax(0,1fr)}.gastgeber__n--zwei span{margin-bottom:6px}}
.mehr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,80px);align-items:end;margin-top:clamp(50px,6vw,96px);padding-top:clamp(28px,3vw,46px);border-top:1px solid var(--linie)}
.mehr .d3{font-size:clamp(2rem,3.6vw,3.8rem);line-height:1.06}
.mehr .lauf{margin-top:14px;max-width:44ch}
.mehr .koord{padding:0 0 6px}
.mehr [data-r]{opacity:1;transform:none}
.mehr+.reihe{margin-top:clamp(34px,4vw,60px)}
@media (max-width:860px){.mehr{grid-template-columns:minmax(0,1fr);align-items:start}}
.freireihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2vw,30px) clamp(12px,1.4vw,22px);margin-top:clamp(34px,4vw,60px)}
.freireihe .frei figcaption{font-size:clamp(1.02rem,1.3vw,1.36rem)}
@media (max-width:860px){.freireihe{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Die drei Lokale im Haus als Porträt: ein grosses und drei kleine Bilder, daneben Name und Text, im Wechsel */
.pts{display:grid;gap:clamp(60px,7vw,120px)}
.pt{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(26px,4.4vw,84px);align-items:center}
.pt--um{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.pt--um .pt__b{order:2}
.pt__b{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.pt__b .frei:first-child{grid-column:1/-1}
.pt__b .frei .rahmen__k{aspect-ratio:4/3;border-radius:18px}
.pt__b .frei:first-child .rahmen__k{aspect-ratio:16/9.6;border-radius:24px}
.pt__nr{display:block;font-family:var(--serif);font-size:clamp(1.15rem,1.5vw,1.5rem);color:var(--taupe)}
.pt__t .d3{margin-top:10px;font-size:clamp(2.2rem,4vw,4.2rem);line-height:1.04}
.pt__t .lk__ort{color:var(--taupe)}
.pt__t .lauf{margin-top:18px;max-width:44ch;font-size:clamp(1.04rem,1.2vw,1.2rem)}
.pt__t .kn-reihe{margin-top:24px;align-items:center}
@media (max-width:860px){.pt,.pt--um{grid-template-columns:minmax(0,1fr)}.pt--um .pt__b{order:0}}

/* ==========================================================================
   FASSUNG 24 · Abstand über Angaben, Package-Karten mit schmaler Kante, Fuss neu:
   Tapete des Hauses als Grund, Abschluss-Satz als Tafel, Lauftext an der Naht, Kontakt gross, Zeichen als Siegel
   ========================================================================== */
.zwei .t>.koord{margin-top:clamp(30px,3.4vw,50px)}
.gang .lk{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(220,198,143,.36),0 1.5px 0 #030b1c,0 2px 0 1px rgba(220,198,143,.14),0 40px 50px -22px rgba(0,0,0,.9),0 70px 80px -50px rgba(0,0,0,.8)}

.ausklang,.fuss{position:relative;isolation:isolate}
.ausklang::before,.fuss::before{content:'';position:absolute;inset:0;z-index:-1;background:url(../img/tapete-navy.webp?v=ba8679c1) 50% 0/1100px auto;opacity:.42;pointer-events:none}
.fuss::before{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 96%);mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 96%)}
.ausklang{border-top:0;padding-top:clamp(50px,5.6vw,84px);padding-bottom:clamp(56px,6vw,92px)}
.ausklang .in{padding:clamp(24px,3vw,46px) clamp(24px,3.4vw,56px);border-radius:30px;background:linear-gradient(180deg,#17396e,#0b2148);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(220,198,143,.4),0 34px 46px -30px rgba(0,0,0,.9)}
.ausklang p{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.3vw,2.4rem);line-height:1.2;letter-spacing:0;max-width:28ch}
.naht--fuss{margin-top:0}
.naht--fuss .laufband{margin-top:0;border:0}
.ausklang+.naht--fuss,.schluss+.naht--fuss{margin-top:calc(-1*clamp(22px,2.2vw,30px))}
.naht--fuss+.fuss{border-top:0;padding-top:clamp(84px,8.4vw,130px)}
.fuss__kopf--drei{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;align-items:center;gap:clamp(26px,4vw,80px)}
.fuss__kontakt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.2vw,34px) clamp(18px,2vw,34px);padding:clamp(22px,2.4vw,36px);border-radius:26px;background:rgba(6,20,43,.55);box-shadow:inset 0 0 0 1px rgba(220,198,143,.28),inset 0 1px 0 rgba(255,255,255,.08)}
.fuss__kontakt{grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr)}.fuss__kontakt dd{font-size:clamp(1rem,1.2vw,1.25rem)}.fuss__kontakt dd a{white-space:nowrap}
.fuss__kontakt dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.fuss__kontakt dd{margin-top:8px;font-family:var(--serif);font-size:clamp(1.05rem,1.35vw,1.4rem);line-height:1.25}
.fuss__kontakt a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--e1)}
.fuss__kontakt a:hover{background-size:100% 1px}
.fuss__ecke--siegel{margin:0}
.siegel{display:grid;place-items:center;width:clamp(150px,15vw,230px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 38%,#17396e,#0a1e42 70%);
  box-shadow:inset 0 0 0 1px rgba(220,198,143,.7),inset 0 0 0 9px #0a1e42,inset 0 0 0 10px rgba(220,198,143,.4),0 30px 40px -24px rgba(0,0,0,.9)}
.fuss__ecke--siegel .siegel svg{width:54%;opacity:1}
@media (max-width:1100px){.fuss__kopf--drei{grid-template-columns:minmax(0,1fr) auto}.fuss__kontakt{grid-column:1/-1;grid-row:2}}
@media (max-width:700px){.fuss__kopf--drei{grid-template-columns:minmax(0,1fr)}.fuss__ecke--siegel{display:none}.fuss__kontakt{grid-row:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:18px}.fuss__kontakt dd{font-size:1rem;overflow-wrap:anywhere}}

/* ==========================================================================
   FASSUNG 25 · Säle: Schieberegler für die Gästezahl, Bühne mit dem passenden Saal und allen Angaben,
   darunter alle Säle zum Anwählen. Grundriss über die ganze Breite.
   ========================================================================== */
.gregler{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,4vw,70px);align-items:center;margin-top:clamp(6px,1vw,14px)}
.gregler__zahl{font-family:var(--serif);font-size:clamp(4.4rem,9vw,9.4rem);line-height:.86;font-variant-numeric:lining-nums tabular-nums;min-width:2.7ch}
.gregler__zahl small{display:block;margin-top:14px;font-family:var(--mono);font-size:13px;letter-spacing:.13em;text-transform:uppercase;opacity:.6}
.gregler__spur{position:relative;padding:15px 30px 12px;border-radius:44px;background:linear-gradient(180deg,#12305e,#0b2148);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(220,198,143,.4),0 22px 34px -24px rgba(6,20,43,.8)}
.gregler input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:none;cursor:grab;--p:16%}
.gregler input[type=range]:active{cursor:grabbing}
.gregler input[type=range]::-webkit-slider-runnable-track{height:14px;border-radius:999px;background:linear-gradient(90deg,#f6e3ab,var(--gold)) 0 0/var(--p) 100% no-repeat,#061430;box-shadow:inset 0 2px 4px rgba(0,0,0,.7),inset 0 -1px 0 rgba(255,255,255,.1)}
.gregler input[type=range]::-moz-range-track{height:14px;border-radius:999px;background:#061430;box-shadow:inset 0 2px 4px rgba(0,0,0,.7)}
.gregler input[type=range]::-moz-range-progress{height:14px;border-radius:999px;background:linear-gradient(90deg,#f6e3ab,var(--gold))}
.gregler input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:42px;height:42px;margin-top:-14px;border-radius:50%;border:0;background:radial-gradient(circle at 36% 28%,#fffaf0,#efe2c4 55%,#cfb984);box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 rgba(110,88,44,.4),0 0 0 2px #0b2148,0 0 0 3px rgba(236,214,157,.9),0 10px 16px -6px rgba(0,0,0,.8);transition:transform .35s var(--e2),box-shadow .35s}
.gregler input[type=range]::-moz-range-thumb{width:42px;height:42px;border-radius:50%;border:0;background:radial-gradient(circle at 36% 28%,#fffaf0,#efe2c4 55%,#cfb984);box-shadow:0 0 0 2px #0b2148,0 0 0 3px rgba(236,214,157,.9),0 10px 16px -6px rgba(0,0,0,.8)}
.gregler input[type=range]:hover::-webkit-slider-thumb,.gregler input[type=range]:focus-visible::-webkit-slider-thumb{transform:scale(1.08);box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 rgba(110,88,44,.4),0 0 0 2px #0b2148,0 0 0 3px #f6e3ab,0 0 22px rgba(236,214,157,.55),0 10px 16px -6px rgba(0,0,0,.8)}
.gregler input[type=range]:focus{outline:0}
.gregler__marken{display:flex;justify-content:space-between;padding:0 12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:rgba(251,243,226,.72);font-variant-numeric:tabular-nums}
.gregler__marken span{width:2.4em;text-align:center}
.gregler__marken{position:relative;display:block;height:16px;margin:0 21px;padding:0}.gregler__marken span{position:absolute;top:0;left:var(--m);transform:translateX(-50%)}
.gregler__treffer{margin-top:16px;font-family:var(--serif);font-size:clamp(1.1rem,1.5vw,1.56rem);line-height:1.3;min-height:1.4em}
.gregler__treffer b{font-weight:400;color:var(--taupe)}
.gregler[data-r]{transform:none}

.sbuehne{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3.6vw,66px);align-items:center;margin-top:clamp(34px,4vw,60px)}
.sbuehne[data-r]{transform:none}
.sbuehne__b{position:relative;aspect-ratio:16/10.6;border-radius:28px;overflow:hidden;background:var(--navy);box-shadow:0 0 0 1px rgba(138,117,69,.35),0 0 0 9px #fffaf0,0 0 0 10px rgba(138,117,69,.35),0 46px 56px -34px rgba(40,30,10,.7);margin:10px;transform:translateZ(0)}
.sbuehne__bild{position:absolute;inset:0;opacity:0;transform:scale(1.05);transition:opacity .8s var(--e2),transform 1.6s var(--e1)}
.sbuehne__bild.an{opacity:1;transform:none;z-index:1}
.sbuehne__bild img{width:100%;height:100%;object-fit:cover}
.sbuehne__bild .saal__leer{position:absolute;inset:0;border-radius:0;aspect-ratio:auto}
.sbuehne__t article{animation:sbein .8s var(--e1) both}
@keyframes sbein{from{opacity:0;transform:translateY(18px)}}
.sbuehne__t .d3{margin-top:10px;font-size:clamp(2.1rem,3.7vw,3.9rem);line-height:1.04}
.sbuehne__t .lauf{margin-top:14px;max-width:46ch}
.sitz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(18px,2vw,28px);border-top:1px solid var(--linie);border-left:1px solid var(--linie)}
.sitz div{padding:11px 12px 10px;border-right:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.sitz dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);white-space:nowrap}
.sitz dd{margin-top:5px;font-family:var(--serif);font-size:clamp(1.15rem,1.5vw,1.56rem);line-height:1;font-variant-numeric:lining-nums}
.sitz--text{display:block;border:0;font-family:var(--serif);font-size:1.2rem}
.sbuehne__miete{margin-top:16px;font-family:var(--serif);font-size:clamp(1.1rem,1.4vw,1.42rem)}
.sbuehne__t .kn-reihe{margin-top:22px}
.sreihe{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(8px,1vw,16px);margin-top:clamp(34px,4vw,60px)}
.sth{display:flex;flex-direction:column;min-width:0;padding:7px 7px 10px;border-radius:20px;text-align:center;color:var(--tinte);cursor:pointer;background:linear-gradient(180deg,#fffdf6,#f1e6cc);box-shadow:inset 0 0 0 1px rgba(138,117,69,.32),inset 0 1px 0 #fff,0 22px 28px -22px rgba(74,58,26,.7);transition:transform .6s var(--e2),box-shadow .5s var(--e2),opacity .5s var(--e2)}
.sth__b{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--creme)}
.sth__b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sth__b .saal__leer{position:absolute;inset:0;border-radius:0;aspect-ratio:auto}
.sth__n{margin-top:9px;font-family:var(--serif);font-size:clamp(.86rem,1.02vw,1.08rem);line-height:1.12;text-wrap:balance;min-height:2.24em;display:grid;place-items:center}
.sth__z{margin-top:3px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
.sth:hover{transform:translateY(-5px)}
.sth[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(138,117,69,.32),inset 0 1px 0 #fff,0 0 0 2px var(--taupe),0 0 0 6px rgba(138,117,69,.16),0 26px 30px -20px rgba(74,58,26,.8)}
.sth.matt{opacity:.32}
.sth.matt:hover{opacity:.7}
.gplan{margin:clamp(10px,1.6vw,24px) 0 0;padding:clamp(16px,2.6vw,44px);border-radius:28px;background:#fbf5e6;box-shadow:inset 0 0 0 1px rgba(138,117,69,.32),inset 0 1px 0 #fff,0 40px 50px -40px rgba(74,58,26,.7)}
.gplan[data-r]{transform:none}
.gplan img{display:block;width:100%;height:auto}
.gplan__unten{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-top:clamp(22px,2.6vw,36px)}
.gplan__unten[data-r]{transform:none}
.gplan__unten .koord{padding:0}.gplan__unten .koord[data-r]{opacity:1;transform:none}
.gplan__unten .mono{color:var(--taupe)}
@media (max-width:1100px){.sbuehne{grid-template-columns:minmax(0,1fr)}.sreihe{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:860px){.gplan{overflow-x:auto;-webkit-overflow-scrolling:touch}.gplan img{width:190%;max-width:none}}
@media (max-width:640px){
  .gregler{grid-template-columns:minmax(0,1fr);gap:16px}.gregler__zahl{font-size:4.4rem}.gregler__zahl small{display:inline;margin-left:12px}
  .gregler__spur{padding:12px 18px 10px;border-radius:30px}
  .sreihe{grid-template-columns:repeat(2,minmax(0,1fr))}.sth__n{min-height:0;font-size:1rem}
  .sitz{grid-template-columns:repeat(2,minmax(0,1fr))}.sbuehne__b{border-radius:20px;margin:8px}
}
@media (max-width:700px){.fuss__kontakt{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fuss__kontakt div:last-child{grid-column:1/-1}}

/* ==========================================================================
   FASSUNG 26 · Fuss mit vier Häusern: das Berghotel Gasterntal kommt als viertes dazu.
   Vier Karten in einer Reihe, darunter zwei mal zwei, auf dem Handy untereinander.
   ========================================================================== */
.fuss__haeuser--vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.fuss__haeuser--vier .fh h3{font-size:clamp(1.15rem,1.42vw,1.56rem)}
@media (max-width:1180px){.fuss__haeuser--vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.fuss__haeuser--vier{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   FASSUNG 26 · Auswahl-Balken der Zimmer hell statt dunkelblau (passt zur Seite) ·
   Zeit-Karten: die nicht gewählten bleiben als kleine Bildkarten in einer Reihe darüber
   ========================================================================== */
.konsole{background:linear-gradient(180deg,#fffdf6,#f3e9d2) padding-box,
    conic-gradient(from calc(var(--ga) - var(--go)),rgba(138,117,69,.42),var(--taupe) var(--gp),#fff6dc calc(var(--gp)*2),var(--taupe) calc(var(--gp)*3),rgba(138,117,69,.42) calc(var(--gp)*4)) border-box;
  box-shadow:inset 0 1px 0 #fff,0 26px 34px -28px rgba(74,58,26,.7)}
.konsole:is(:hover,:focus-within){box-shadow:inset 0 1px 0 #fff,0 0 0 5px rgba(138,117,69,.1),0 30px 38px -26px rgba(74,58,26,.8)}
.konsole__spur{background:#eadfc6;box-shadow:inset 0 2px 4px rgba(74,58,26,.24),inset 0 -1px 0 rgba(255,255,255,.9)}
.konsole::before,.konsole::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.75) 50%,transparent)}
.konsole .taste{background:linear-gradient(180deg,#fffdf7,#f6eedb);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(138,117,69,.26),0 5px 8px -6px rgba(74,58,26,.55)}
.konsole .taste:hover{box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(138,117,69,.7),0 10px 12px -8px rgba(74,58,26,.6),0 0 16px rgba(220,198,143,.5)}
.konsole .taste[aria-pressed="true"]{background:linear-gradient(180deg,#12305e,#0b2148);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(236,214,157,.85),0 8px 12px -8px rgba(6,20,43,.8)}
.konsole__neu{background:linear-gradient(180deg,#fffdf7,#efe4c8);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(138,117,69,.3),0 5px 8px -6px rgba(74,58,26,.55)}

.zs__k::after{content:'';position:absolute;right:18px;top:18px;width:38px;height:38px;border-radius:50%;pointer-events:none;
  background:linear-gradient(180deg,#fbf3e2,#e8dbbf 50%,#cfbd98) center/100% no-repeat;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(110,88,44,.36),0 10px 14px -8px rgba(0,0,0,.7);
  -webkit-mask:none;transition:transform .6s var(--e1),opacity .4s}
.zs__k::before{content:'';position:absolute;z-index:1;right:18px;top:18px;width:38px;height:38px;pointer-events:none;
  background:var(--tinte);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M8 3.5v9M3.5 8h9'/%3E%3C/svg%3E") center/15px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M8 3.5v9M3.5 8h9'/%3E%3C/svg%3E") center/15px no-repeat;transition:transform .6s var(--e1),opacity .4s}
@media (hover:hover){.zs__k:hover::before{transform:rotate(90deg)}}
.zs--offen .zs__k::before,.zs--offen .zs__k::after{opacity:0}
/* offen: kleine Bildkarten statt Zeilen */
.zs--offen .zs__k{flex-direction:column;align-items:stretch;gap:0;padding:7px 7px 8px;border-radius:20px}
.zs--offen .zs__k .zs__b{flex:none;width:auto;aspect-ratio:2.5/1;border-radius:14px}
.zs--offen .zs__k .zs__n{flex:none;display:block;margin:7px 1px 0;padding:9px 6px 8px;border-radius:11px;font-size:clamp(.95rem,1.2vw,1.22rem)}
@media (max-width:860px){
  .zs__k::before,.zs__k::after{right:11px;top:11px;width:28px;height:28px}.zs__k::before{-webkit-mask-size:12px;mask-size:12px}
  .zs--offen .zs__k .zs__b,.zs--offen .zs__k:nth-child(n+4) .zs__b{width:auto;aspect-ratio:2.4/1;border-radius:11px}
  .zs--offen .zs__k .zs__n{font-size:.9rem;padding:7px 4px 6px;margin-top:5px;border-radius:9px}
}

/* FASSUNG 27 · Zimmer-Kategorien: drei Fotos als Gefüge (eins gross, zwei daneben), ohne Kasten, jedes öffnet alle Fotos.
   Die vier Bilder der Aarmühle-Suite lassen sich ebenfalls öffnen. */
.zmos{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);aspect-ratio:1.6/1}
.zmos__b{position:relative;display:block;min-width:0;min-height:0;padding:0;border-radius:24px;background:var(--creme);box-shadow:0 0 0 1px rgba(138,117,69,.3),0 34px 40px -28px rgba(40,30,10,.62)}
.zmos__b:first-child{grid-row:1/3;border-radius:30px}
.zmos__b .rahmen__k{position:absolute;inset:0;display:block;border-radius:inherit;overflow:hidden;transform:translateZ(0)}
.zmos__b img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--e1)}
.zmos__b i,.reihe figure[data-zimmer] .rahmen__k::after{position:absolute;z-index:2;right:14px;bottom:14px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--tinte);
  background:linear-gradient(180deg,#fbf3e2,#e8dbbf 50%,#cfbd98);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(110,88,44,.36),0 12px 18px -10px rgba(0,0,0,.7);transition:transform .6s var(--e1)}
.zmos__b:not(:first-child) i{width:36px;height:36px;right:10px;bottom:10px}
.zmos__b i svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.3}
.zmos__b:focus-visible{outline:2px solid var(--taupe);outline-offset:4px}

.reihe figure[data-zimmer]{cursor:zoom-in}
.reihe figure[data-zimmer] .rahmen__k{position:relative}
.reihe figure[data-zimmer] .rahmen__k::after{content:'+';font-family:var(--serif);font-size:22px;line-height:1;width:38px;height:38px;right:10px;bottom:10px;padding-bottom:3px}
@media (hover:hover){.reihe figure[data-zimmer]:hover .rahmen__k::after{transform:rotate(90deg)}.reihe figure[data-zimmer]:hover img{transform:scale(1.05)}}
.reihe figure[data-zimmer]:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:22px}
@media (max-width:860px){.zmos{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;aspect-ratio:auto}.zmos__b{aspect-ratio:3/2;border-radius:18px}.zmos__b:first-child{grid-row:auto;grid-column:1/-1;aspect-ratio:3/2;border-radius:22px}}

/* FASSUNG 28 · keine Pluszeichen in Bildern · Apartments: Hotelservice als vier helle Karten mit eingelassenem Namen */
.zs__k::before,.zs__k::after,.reihe figure[data-zimmer] .rahmen__k::after{display:none}
.dienste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,22px);align-items:stretch}
.dienst{display:flex;flex-direction:column;padding:9px 9px 0;border-radius:28px;color:var(--tinte);background:linear-gradient(180deg,#fffdf6,#f3e9d2);
  box-shadow:inset 0 0 0 1px rgba(138,117,69,.32),inset 0 1px 0 #fff,0 40px 46px -34px rgba(74,58,26,.75)}
.dienst[data-r="schweb"].da{transition:opacity 1.25s var(--e1),transform .7s var(--e2),box-shadow .5s var(--e2);transition-delay:0s}
.dienst__b{display:block;border-radius:20px;overflow:hidden;aspect-ratio:1/1.06;background:var(--creme);transform:translateZ(0)}
.dienst__b .rahmen__k{display:block;width:100%;height:100%}
.dienst__b img{width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--e1)}
.dienst h3{margin:10px 1px 0;padding:14px 8px 13px;border-radius:15px;text-align:center;font-family:var(--serif);font-weight:400;font-size:clamp(1.1rem,1.5vw,1.56rem);line-height:1.1;text-wrap:balance;
  background:#f1e7cf;box-shadow:inset 0 2px 4px rgba(74,58,26,.24),inset 0 -1px 0 rgba(255,255,255,.9)}
.dienst p{flex:1;margin:0;padding:clamp(16px,1.6vw,22px) clamp(10px,1.1vw,16px) clamp(16px,1.6vw,22px);font-size:clamp(1rem,1.08vw,1.1rem);line-height:1.56;color:rgba(12,21,38,.8)}
.dienst dl{margin:0 -9px;padding:15px clamp(18px,1.8vw,26px) 17px;border-radius:0 0 28px 28px;background:linear-gradient(180deg,#12305e,#0b2148);color:#fff;box-shadow:inset 0 1px 0 rgba(220,198,143,.55)}
.dienst dt{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.dienst dd{margin:6px 0 0;font-family:var(--serif);font-size:clamp(1.05rem,1.3vw,1.36rem);line-height:1.15}
@media (hover:hover){.dienst.da:hover{transform:translateY(-8px);box-shadow:inset 0 0 0 1px rgba(138,117,69,.32),inset 0 1px 0 #fff,0 0 0 2px var(--taupe),0 50px 54px -34px rgba(74,58,26,.85)}.dienst:hover .dienst__b img{transform:scale(1.07)}}
@media (max-width:1100px){.dienste{grid-template-columns:repeat(2,minmax(0,1fr))}.dienst__b{aspect-ratio:3/2}}
@media (max-width:600px){.dienste{grid-template-columns:minmax(0,1fr)}}

/* FASSUNG 29 · Lupe: Bilder reagieren auf den Zeiger, wachsen beim Klick an ihrem Platz zur grossen Ansicht */
.frei--lupe{cursor:zoom-in}
.frei--lupe .rahmen__k{overflow:hidden;transition:transform .7s var(--e2),box-shadow .6s var(--e2)}
.frei--lupe .rahmen__k img{transition:transform 1.6s var(--e1)}
@media (hover:hover){
  .frei--lupe:hover .rahmen__k{transform:translateY(-8px);box-shadow:0 0 0 2px var(--taupe),0 46px 46px -30px rgba(40,30,10,.7)}
  .frei--lupe:hover .rahmen__k img{transform:scale(1.06)}
  .frei--lupe:hover figcaption{color:var(--taupe)}
}
.frei--lupe figcaption{transition:color .4s}
.frei--lupe:focus-visible{outline:2px solid var(--taupe);outline-offset:6px;border-radius:24px}
.frei--lupe:active .rahmen__k{transform:scale(.985)}
.lupe{position:fixed;inset:0;z-index:999;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(8px,1.6vw,26px);padding:clamp(14px,2.4vw,40px);background:rgba(6,20,43,.94)}
.lupe[hidden]{display:none}
.lupe figure{margin:0;display:grid;justify-items:center;gap:clamp(12px,1.4vw,20px);min-width:0}
.lupe img{display:block;max-width:100%;max-height:calc(100svh - 150px);width:auto;height:auto;border-radius:24px;box-shadow:0 0 0 1px rgba(220,198,143,.5),0 0 0 9px #0b2148,0 0 0 10px rgba(220,198,143,.3),0 50px 70px -30px #000}
.lupe figcaption{font-family:var(--serif);font-size:clamp(1.2rem,1.9vw,2rem);line-height:1.1;color:#fff;text-align:center}
.lupe__pf,.lupe__zu{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:var(--tinte);background:linear-gradient(180deg,#fbf3e2,#e8dbbf 50%,#cfbd98);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(110,88,44,.36),0 14px 20px -10px rgba(0,0,0,.8);transition:transform .5s var(--e2)}
.lupe__pf svg,.lupe__zu svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.lupe__pf:hover{transform:scale(1.08)}.lupe__zu:hover{transform:rotate(90deg)}
.lupe__zu{position:absolute;right:clamp(14px,2.4vw,40px);top:clamp(14px,2.4vw,40px);z-index:2}
.lupe--eins .lupe__pf{visibility:hidden}
::view-transition-group(lupe){animation-duration:.6s;animation-timing-function:cubic-bezier(.32,.72,0,1)}
::view-transition-old(lupe),::view-transition-new(lupe){height:100%;width:100%;object-fit:cover}
@media (max-width:700px){.lupe{grid-template-columns:minmax(0,1fr);padding:14px}.lupe__pf{position:absolute;bottom:18px;z-index:2}.lupe__pf--l{left:calc(50% - 66px)}.lupe__pf--r{left:calc(50% + 10px)}.lupe img{max-height:calc(100svh - 230px);border-radius:16px}.lupe figure{margin-bottom:70px}}

/* FASSUNG 30 · Zeit-Karten: grosses Bild kleiner; beim Wechsel fahren Rahmen und Bild getrennt, Namen und Text
   blenden erst nach der Landung ein (vorher überlagerten sich alte und neue Schrift als Schatten) */
@media (min-width:1101px){
  .zs--offen .zs__k[aria-pressed="true"],.zs--offen .zs__zu{grid-column:1/7}
  .zs--offen .zs__text{grid-column:7/-1}
  .zs--offen .zs__k[aria-pressed="true"] .zs__b{aspect-ratio:16/9.8}
  .zs--offen .zs__k[aria-pressed="true"] .zs__n{font-size:clamp(1.2rem,1.75vw,1.85rem);padding:12px 10px 11px}
  .zs__text .d3{font-size:clamp(1.9rem,3.1vw,3.2rem)}
}
::view-transition-group(zs-k0),::view-transition-group(zs-k1),::view-transition-group(zs-k2),::view-transition-group(zs-k3),::view-transition-group(zs-k4),::view-transition-group(zs-b0),::view-transition-group(zs-b1),::view-transition-group(zs-b2),::view-transition-group(zs-b3),::view-transition-group(zs-b4),::view-transition-group(zs-n0),::view-transition-group(zs-n1),::view-transition-group(zs-n2),::view-transition-group(zs-n3),::view-transition-group(zs-n4){animation-duration:.7s;animation-timing-function:cubic-bezier(.32,.72,0,1)}
::view-transition-old(zs-k0),::view-transition-old(zs-k1),::view-transition-old(zs-k2),::view-transition-old(zs-k3),::view-transition-old(zs-k4),::view-transition-new(zs-k0),::view-transition-new(zs-k1),::view-transition-new(zs-k2),::view-transition-new(zs-k3),::view-transition-new(zs-k4){animation-duration:.3s;height:100%;width:100%;object-fit:fill}
::view-transition-old(zs-b0),::view-transition-old(zs-b1),::view-transition-old(zs-b2),::view-transition-old(zs-b3),::view-transition-old(zs-b4),::view-transition-new(zs-b0),::view-transition-new(zs-b1),::view-transition-new(zs-b2),::view-transition-new(zs-b3),::view-transition-new(zs-b4){animation:none;mix-blend-mode:normal;height:100%;width:100%;object-fit:cover;border-radius:16px}
::view-transition-old(zs-b0),::view-transition-old(zs-b1),::view-transition-old(zs-b2),::view-transition-old(zs-b3),::view-transition-old(zs-b4){display:none}
::view-transition-old(zs-n0),::view-transition-old(zs-n1),::view-transition-old(zs-n2),::view-transition-old(zs-n3),::view-transition-old(zs-n4){display:none}
::view-transition-new(zs-n0),::view-transition-new(zs-n1),::view-transition-new(zs-n2),::view-transition-new(zs-n3),::view-transition-new(zs-n4){animation:zsnur .35s ease .5s both;mix-blend-mode:normal;height:100%;width:100%;object-fit:fill}
::view-transition-old(zs-text){display:none}
::view-transition-new(zs-text){animation:zsnur .5s ease .32s both;mix-blend-mode:normal}
::view-transition-old(zs-zu){display:none}
::view-transition-new(zs-zu){animation:zsnur .3s ease .5s both}
@keyframes zsnur{from{opacity:0}}

/* FASSUNG 31 · Fenster-Unterzeile etwas kleiner · Monatswahl der Apartments als Tastenfeld */
.bruch .mono{font-size:clamp(1.02rem,1.45vw,1.46rem);max-width:40ch}
.monate{margin-top:clamp(20px,2.2vw,30px)}
.monate__t{display:block;margin-bottom:12px;font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.monate__spur{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;padding:9px;border-radius:26px;background:#061430;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7),inset 0 -1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(220,198,143,.42),0 22px 30px -22px rgba(0,0,0,.8)}
.monate button{position:relative;overflow:hidden;min-height:48px;border-radius:16px;font-family:var(--serif);font-size:clamp(1rem,1.2vw,1.22rem);color:var(--tinte);cursor:pointer;
  background:linear-gradient(180deg,#fbf3e2,#e8dbbf);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(110,88,44,.3),0 6px 10px -7px rgba(0,0,0,.7);transition:transform .45s var(--e2),box-shadow .45s var(--e2),background .4s,color .4s}
.monate button::after{content:'';position:absolute;top:-20%;bottom:-20%;left:0;width:40%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85) 50%,transparent);transform:translateX(-130%) skewX(-18deg)}
@media (hover:hover){.monate button:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(110,88,44,.3),0 12px 14px -8px rgba(0,0,0,.8),0 0 0 1px rgba(236,214,157,.95),0 0 18px rgba(236,214,157,.3)}.monate button:hover::after{transform:translateX(380%) skewX(-18deg);transition:transform .9s var(--e1)}}
.monate button:active{transform:scale(.97)}
.monate button[aria-pressed="true"]{color:#fff;background:linear-gradient(180deg,#1a3d76,#0f2a57);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(236,214,157,.9),0 0 18px rgba(236,214,157,.34)}
.monate button[aria-pressed="true"]::after{display:none}
.monate button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.stufe .monate+.sr+.kn-reihe{margin-top:26px}
@media (max-width:520px){.monate__spur{grid-template-columns:repeat(4,minmax(0,1fr));border-radius:22px}.monate button{min-height:44px;border-radius:13px}}
/* Zeit-Karten: Namen und Text früher einblenden */
::view-transition-new(zs-n0),::view-transition-new(zs-n1),::view-transition-new(zs-n2),::view-transition-new(zs-n3),::view-transition-new(zs-n4){animation-delay:.4s}

/* ==========================================================================
   FASSUNG 32 · Zeit-Karten: Namen, Text und Kreuz sind gewöhnliche Elemente (blenden aus und ein), nur Bilder und
   Rahmen fahren · Apartments: Jahresband mit zwölf Säulen (Höhe = Preis) und Regler statt Tastenfeld
   ========================================================================== */
.zs--fahrt .zs__text,.zs--fahrt .zs__zu,.zs__text,.zs__zu{view-transition-name:none}
.zs__text,.zs__n,.zs__zu{transition:opacity .42s ease}
.zs--warte .zs__text,.zs--warte .zs__n,.zs--warte .zs__zu{opacity:0;transition-duration:.15s}

.stufe .jahr{grid-column:1/-1;grid-row:1}
.jahr{position:relative;isolation:isolate;padding:clamp(18px,2.2vw,34px) clamp(16px,2.4vw,40px) clamp(16px,1.8vw,26px);border-radius:32px;margin-bottom:clamp(10px,1.6vw,26px);
  background:linear-gradient(180deg,#1d4380,#0f2b5a 46%,#081c40);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(220,198,143,.4),0 1.5px 0 #030b1c,0 44px 54px -30px rgba(0,0,0,.9)}
.jahr__t{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;margin:0 0 clamp(14px,1.6vw,22px);font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(251,243,226,.7)}
.jahr__t span:first-child{color:var(--gold)}
.jahr__saeulen{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;height:clamp(150px,15vw,214px)}
.jahr__m{position:relative;display:grid;grid-template-rows:auto auto auto;justify-items:center;align-content:end;gap:8px;height:100%;padding:0 3px;color:rgba(251,243,226,.62);cursor:pointer;transition:color .4s}
.jahr__m small{font-family:var(--serif);font-size:clamp(.78rem,1.05vw,1.06rem);font-variant-numeric:lining-nums;line-height:1;transition:transform .5s var(--e2),color .4s}
.jahr__m i{display:block;width:min(100%,clamp(14px,3.2vw,48px));height:calc(var(--h)*clamp(72px,8.4vw,128px));border-radius:10px 10px 4px 4px;transform-origin:50% 100%;
  background:linear-gradient(180deg,rgba(220,198,143,.5),rgba(220,198,143,.16));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(220,198,143,.3);transition:transform .6s var(--e1),box-shadow .5s,opacity .4s}
.jahr__m i::after{content:'';display:block;height:100%;border-radius:inherit;background:linear-gradient(180deg,#fff3cf,#ecd69d 40%,#c9a95c);opacity:0;transition:opacity .45s var(--e2)}
.jahr__m b{font-family:var(--serif);font-weight:400;font-size:clamp(.8rem,1.2vw,1.24rem);line-height:1}
@media (hover:hover){.jahr__m:hover{color:#fff}.jahr__m:hover i{transform:scaleY(1.05)}.jahr__m:hover i::after{opacity:.45}}
.jahr__m[aria-pressed="true"]{color:#fff}
.jahr__m[aria-pressed="true"] small{color:#f6e3ab;transform:scale(1.24)}
.jahr__m[aria-pressed="true"] i{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(246,227,171,.9),0 0 26px rgba(236,214,157,.5)}
.jahr__m[aria-pressed="true"] i::after{opacity:1}
.jahr__m:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:10px}
.jahr__spur{display:block;margin:clamp(12px,1.4vw,18px) calc(100%/24 - 21px) 0}
.jahr__spur input[type=range]{--p:0%}
@media (max-width:700px){.jahr{border-radius:24px}.jahr__m{gap:6px;padding:0 1px}.jahr__m small{font-size:.66rem}.jahr__m b{font-size:.7rem}.jahr__m[aria-pressed="true"] small{transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.zs__text,.zs__n,.zs__zu{transition:none}}

/* FASSUNG 33 · Monatswahl schlicht: zwölf Worte auf einer Linie, der gewählte Monat unterstrichen (Tafel mit Säulen und Regler wieder raus) */
.stufe .jahr.tabs{grid-column:1/-1;grid-row:1;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:0 clamp(6px,1vw,16px);padding:0;margin:0 0 clamp(6px,1.2vw,18px);border-radius:0;background:none;box-shadow:none;overflow:visible;border-bottom:1px solid rgba(220,198,143,.34)}
.jahr.tabs .jahr__m{display:block;height:auto;padding:12px 0 14px;color:inherit;cursor:pointer;font-size:clamp(1rem,1.3vw,1.3rem);white-space:nowrap}
.jahr.tabs .jahr__m abbr{display:none;text-decoration:none}
.jahr.tabs .jahr__m[aria-pressed="true"]{color:var(--gold)}
.jahr.tabs .jahr__m:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
@media (max-width:1180px){.jahr.tabs .jahr__m span{display:none}.jahr.tabs .jahr__m abbr{display:inline}}
@media (max-width:560px){.stufe .jahr.tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-bottom:0;row-gap:2px}.jahr.tabs .jahr__m{text-align:center;padding:10px 0 11px;border-bottom:1px solid rgba(220,198,143,.34);font-size:1rem}.jahr.tabs .jahr__m::after{bottom:-1px}}

/* ==========================================================================
   FASSUNG 34 · Auftritt: alles steigt sichtbar von unten auf, sobald es ins Fenster rückt.
   Nichts steht erst als leere Fläche da und erscheint dann aus dem Nichts.
   ========================================================================== */
[data-r]{transform:translateY(clamp(40px,4.6vw,70px));transition:opacity .75s var(--e2),transform 1.2s var(--e1);transition-delay:calc(var(--i,0)*70ms)}
[data-r="bild"],[data-r="schweb"],.zreihe [data-r="schweb"],.zk[data-r]{opacity:0;transform:translateY(clamp(56px,6.4vw,104px)) scale(.975);transform-origin:50% 100%;transition:opacity .8s var(--e2),transform 1.35s var(--e1);transition-delay:calc(var(--i,0)*100ms)}
[data-r].da,[data-r="bild"].da,[data-r="schweb"].da,.zreihe [data-r="schweb"].da,.zk[data-r].da{opacity:1;transform:none}
.lk__b[data-r="bild"],.fh__bild[data-r="bild"],.lk__b[data-r="bild"].da,.fh__bild[data-r="bild"].da{opacity:1;transform:none}
.zk.matt,.zk[data-r].da.matt{opacity:.2;transform:scale(.965)}
.gregler[data-r],.sbuehne[data-r],.gplan[data-r],.gplan__unten[data-r]{transform:translateY(clamp(40px,4.6vw,70px))}
.gregler[data-r].da,.sbuehne[data-r].da,.gplan[data-r].da,.gplan__unten[data-r].da{transform:none}
/* Auftakt der Startseite bleibt, wie er war (Titel mit Schatten nicht anfassen) */
.hero [data-r],.hero--f [data-r]{transform:translateY(30px);transition-property:opacity,transform;transition-duration:1.1s,1.3s;transition-timing-function:var(--e1),var(--e1)}
.hero [data-r].da,.hero--f [data-r].da{transform:none}
@media (prefers-reduced-motion:reduce){[data-r]{transform:none!important;opacity:1!important;transition:none!important}}

/* FASSUNG 35 · Zeit-Karten: der Wechsel läuft ohne Übergangs-Technik des Browsers (die hielt die Seite beim Klick kurz an).
   Karten und Bilder fahren über transform, der Klick wirkt sofort. */
.zs__text,.zs__n,.zs__zu{transition:none}
.zs__k{-webkit-tap-highlight-color:transparent}
.zs__k:active .zs__b img{transform:scale(1.03)}

/* ==========================================================================
   FASSUNG 36 · Bilder: kein «grosses mit kleinem unten rechts» mehr, Gefüge überall; jedes Bild reagiert auf den Zeiger
   und öffnet sich gross · Hund · Grundriss zum Überfahren · Seminar und Hochzeit als drei Karten · Zeitleiste nach unten ·
   Nachhaltigkeit als fünf Karten · Bewerbungsseite nach dem Vorbild von Salt & Silver
   ========================================================================== */
figure.zmos__b{margin:0}
.zmos--2{grid-template-rows:minmax(0,1fr)}
.zmos__b{transition:opacity .8s var(--e2),transform .7s var(--e2),box-shadow .5s var(--e2)}

.zmos__b.frei--lupe:hover .rahmen__k,.zmos__b.frei--lupe .rahmen__k{transform:translateZ(0);box-shadow:none}
/* gerahmte Bilder (Bildrahmen mit Polster): der ganze Rahmen hebt sich */
.frei--lupe>.rahmen{transition:transform .7s var(--e2),box-shadow .6s var(--e2)}
@media (hover:hover){.frei--lupe:hover>.rahmen{transform:translateY(-8px);box-shadow:0 0 0 2px var(--taupe),0 44px 46px -30px rgba(20,16,6,.75)}.fl--nacht .frei--lupe:hover>.rahmen,.fl--navy .frei--lupe:hover>.rahmen{box-shadow:0 0 0 2px var(--gold),0 44px 46px -30px rgba(0,0,0,.9)}}
.frei--lupe>.rahmen .rahmen__k,.frei--lupe:hover>.rahmen .rahmen__k{transform:none;box-shadow:none}
.st__b.frei--lupe:hover .rahmen__k,.dienst__b.frei--lupe:hover .rahmen__k,.stelle__b .frei--lupe:hover .rahmen__k,.hundl__b.frei--lupe:hover .rahmen__k,.bieten__gross.frei--lupe:hover .rahmen__k{transform:none;box-shadow:none}
.st__b img,.dienst__b img,.stelle__b img,.hundl__b img,.bieten__gross img{transition:transform 1.6s var(--e1)}


/* Hund: links unter dem Text das Bild von Aris, es füllt die Spalte bis unten */
.zwei--streck{align-items:stretch}
.hundl{display:flex;flex-direction:column}
.hundl__b{position:relative;flex:1;min-height:clamp(260px,26vw,440px);margin:clamp(26px,3vw,46px) 0 0;border-radius:28px;overflow:hidden;background:var(--navy);box-shadow:0 0 0 1px rgba(220,198,143,.4),0 40px 46px -30px rgba(0,0,0,.9)}
.hundl__b .rahmen__k{position:absolute;inset:0;display:block}
.hundl__b img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
@media (max-width:860px){.hundl__b{flex:none;min-height:0;aspect-ratio:4/3}}

/* Grundriss zum Überfahren */
.gplan{position:relative}
.gplan__k{position:relative}
.gplan__z{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gplan__z polygon{fill:rgba(220,198,143,0);stroke:rgba(138,117,69,0);stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:all;cursor:pointer;outline:0;transition:fill .35s var(--e2),stroke .35s var(--e2)}
.gplan__z polygon.an,.gplan__z polygon:focus-visible{fill:rgba(220,198,143,.5);stroke:var(--taupe)}
.gplan__info{position:absolute;right:clamp(16px,2.6vw,44px);bottom:clamp(16px,2.6vw,44px);width:clamp(230px,21vw,310px);display:grid;gap:4px;padding:9px 9px 16px;border-radius:24px;color:#fff;
  background:linear-gradient(180deg,#1d4380,#0f2b5a 46%,#081c40);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(220,198,143,.4),0 1.5px 0 #030b1c,0 36px 44px -26px rgba(6,20,43,.85)}
.gplan__info>i{display:grid;place-items:center;height:clamp(70px,7vw,100px);color:var(--gold)}
.gplan__info>i svg{width:54px;height:auto}
.gplan__ib{display:block;aspect-ratio:16/10;border-radius:16px;overflow:hidden;margin-bottom:8px;background:#0a1e42}
.gplan__ib img{width:100%;height:100%;object-fit:cover;animation:gpein .5s var(--e2)}
@keyframes gpein{from{opacity:0;transform:scale(1.05)}}
.gplan__info b{padding:0 12px;font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,1.7vw,1.7rem);line-height:1.12}
.gplan__info:not(.voll) b{text-align:center}
.gplan__info span:not(.gplan__ib){padding:0 12px;font-size:1rem;line-height:1.4;color:rgba(255,255,255,.82)}
.gplan__info:not(.voll) span{text-align:center}
.gplan__info small{padding:2px 12px 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.gplan__finger{display:none}
@media (hover:none){.gplan__maus{display:none}.gplan__finger{display:block}}
@media (max-width:860px){.gplan{overflow:visible}.gplan__roll{overflow-x:auto;-webkit-overflow-scrolling:touch}.gplan__k{width:190%}.gplan img{width:100%;max-width:none}.gplan__info{position:static;width:auto;margin-top:14px}}

/* Drei Angebote als erhabene Karten (Seminarpauschalen hell auf Dunkelblau, Hochzeitspackages dunkelblau auf Papier) */
.staffel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,26px);align-items:stretch}
.st{display:flex;flex-direction:column;padding:10px 10px clamp(18px,1.8vw,26px);border-radius:32px;color:var(--tinte);background:linear-gradient(180deg,#fffdf6,#f3e9d2);
  box-shadow:inset 0 0 0 1px rgba(138,117,69,.32),inset 0 1px 0 #fff,0 1.5px 0 #c9b88c,0 46px 50px -30px rgba(0,0,0,.9)}
.st[data-r="schweb"].da{transition:opacity 1.25s var(--e1),transform .7s var(--e2),box-shadow .5s var(--e2);transition-delay:0s}
@media (hover:hover){.st.da:hover{transform:translateY(-8px)}}
.st__b{position:relative;margin:0;aspect-ratio:4/3;border-radius:23px;overflow:hidden;background:var(--creme);transform:translateZ(0)}
.st__b .rahmen__k{position:absolute;inset:0;display:block}
.st__b img{width:100%;height:100%;object-fit:cover}
.st__n{margin:10px 1px 0;padding:14px 8px 13px;border-radius:16px;text-align:center;font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,1.9vw,2rem);line-height:1.1;background:#f1e7cf;box-shadow:inset 0 2px 4px rgba(74,58,26,.24),inset 0 -1px 0 rgba(255,255,255,.9)}
.st__preis{margin:clamp(18px,2vw,30px) clamp(10px,1.2vw,18px) 0;font-family:var(--serif);font-size:clamp(2.6rem,4.6vw,4.8rem);line-height:1;font-variant-numeric:lining-nums}
.st__preis small{display:block;margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--taupe)}
.st__gross{margin:clamp(16px,1.8vw,26px) clamp(10px,1.2vw,18px) 0;padding-top:clamp(16px,1.8vw,24px);border-top:1px solid var(--linie);font-family:var(--serif);font-size:clamp(1.14rem,1.45vw,1.5rem);line-height:1.3;text-wrap:pretty}
.st__lauf{flex:1;margin:12px clamp(10px,1.2vw,18px) 0;font-size:clamp(1rem,1.08vw,1.1rem);line-height:1.56;color:rgba(12,21,38,.8)}
.staffel--navy .st{color:#fff;background:linear-gradient(180deg,#24477f,#0e2a55 40%,#071a3a);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(220,198,143,.36),0 1.5px 0 #030b1c,0 44px 50px -26px rgba(12,21,38,.75)}
.staffel--navy .st__n{color:#fbf3e2;background:#0a1e42;box-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(220,198,143,.3)}
.staffel--navy .st__preis{color:var(--gold)}.staffel--navy .st__preis small{color:rgba(251,243,226,.72)}
.staffel--navy .st__gross{border-color:rgba(220,198,143,.34)}.staffel--navy .st__lauf{color:rgba(255,255,255,.8)}
.staffel--hoch .st__b{aspect-ratio:1/1}
.staffel--hoch .st:nth-child(1) img{object-position:50% 70%}
@media (max-width:1000px){.staffel{grid-template-columns:minmax(0,1fr);max-width:620px;margin-inline:auto}.staffel--hoch .st__b{aspect-ratio:4/3}}

/* Zeitleiste nach unten: die Karten bleiben oben stehen, die nächste schiebt sich von unten darüber */
.zeitstapel{display:grid;gap:clamp(20px,2.4vw,36px)}
.zeitstapel .lk{position:sticky;top:calc(clamp(96px,8.6vw,124px) + var(--n,0)*12px);width:100%;min-height:clamp(400px,33vw,510px);border-radius:30px;padding:10px;
  background:linear-gradient(180deg,#24477f,#0e2a55 40%,#071a3a);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(220,198,143,.36),0 1.5px 0 #030b1c,0 -18px 30px -22px rgba(6,20,43,.55),0 40px 50px -22px rgba(6,20,43,.6)}
.zeitstapel .lk__b{border-radius:21px;overflow:hidden;transform:translateZ(0)}
.zeitstapel .lk .kerbe{--f:#0e2a55;color:#fbf3e2}
.zeitstapel .lk__t{padding:clamp(22px,3vw,46px)}
@media (max-width:860px),(max-height:780px){.zeitstapel .lk{position:relative;top:auto}}

/* Fünf Karten in einer Reihe, Karten ohne Fuss */
.dienst:not(:has(dl)){padding-bottom:9px}
.dienst__b{margin:0}
@media (min-width:1241px){.dienste--fuenf{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.1vw,18px)}}
@media (min-width:1101px) and (max-width:1240px){.dienste--fuenf{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dienste--fuenf .dienst h3{min-height:3.3em;display:grid;place-items:center;font-size:clamp(1.05rem,1.3vw,1.34rem)}
.dienste--fuenf .dienst p{font-size:1rem}

/* Bewerbungsseite */
.stelle{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(22px,3.4vw,60px);align-items:stretch;padding:clamp(12px,1.3vw,20px);border-radius:clamp(26px,2.6vw,40px);background:#fbf5e6;
  box-shadow:inset 0 0 0 1px rgba(138,117,69,.32),inset 0 1px 0 #fff,0 2px 0 #cdbd94,0 54px 60px -44px rgba(74,58,26,.8)}
.stelle[data-r].da{transform:none}
.stelle__b{position:relative;min-height:clamp(320px,36vw,580px)}
.stelle__b figure{position:absolute;inset:0;margin:0;border-radius:clamp(18px,1.8vw,26px);overflow:hidden;transform:translateZ(0)}
.stelle__b .rahmen__k{position:absolute;inset:0;display:block}
.stelle__b img{width:100%;height:100%;object-fit:cover}
.stelle__nr{--e:clamp(14px,1.5vw,22px);position:absolute;left:0;bottom:0;padding:clamp(10px,1.1vw,16px) clamp(16px,1.7vw,26px) 0 2px;border-radius:0 clamp(18px,1.8vw,26px) 0 0;background:#fbf5e6;color:var(--tinte);font-family:var(--serif);font-size:clamp(3.4rem,6.8vw,7rem);line-height:.82;font-variant-numeric:lining-nums;pointer-events:none}
.stelle__nr::before,.stelle__nr::after{content:'';position:absolute;width:var(--e);height:var(--e);background:radial-gradient(circle at 100% 0,transparent calc(var(--e) - .5px),#fbf5e6 var(--e))}
.stelle__nr::before{left:0;bottom:100%}.stelle__nr::after{left:100%;bottom:0}
.stelle__t{display:grid;align-content:center;justify-items:start;gap:clamp(14px,1.5vw,22px);padding:clamp(14px,2.4vw,44px) clamp(8px,2vw,36px) clamp(18px,2.4vw,44px) 0}
.stelle__t .mono{color:var(--taupe)}
.stelle__t .d2{font-size:clamp(2.6rem,5.2vw,5.6rem);line-height:1.02}
.stelle__orte{display:flex;flex-wrap:wrap;gap:8px}
.stelle__orte span{padding:9px 14px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(12,21,38,.22);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.stelle__orte span:last-child{background:linear-gradient(180deg,#12305e,#0b2148);color:#fff;box-shadow:inset 0 0 0 1px rgba(220,198,143,.5)}
.stelle__t .lauf{max-width:58ch;font-size:clamp(1.04rem,1.25vw,1.24rem)}
.stelle__mit{width:100%;padding:clamp(18px,1.8vw,26px);border-radius:20px;background:#f1e7cf;box-shadow:inset 0 2px 4px rgba(74,58,26,.2),inset 0 -1px 0 rgba(255,255,255,.9)}
.stelle__mit h3{font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);margin-bottom:12px}
.stelle__mit ul{display:grid;gap:10px}
.stelle__mit li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;line-height:1.45;font-size:1.06rem}
.stelle__mit svg{width:22px;height:22px;padding:4px;border-radius:50%;background:#12305e;fill:none;stroke:#f6e3ab;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.bieten>.in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,90px);align-items:start}
.bieten__links{display:grid;gap:clamp(22px,2.6vw,38px)}
.bieten__gross{position:relative;margin:0;aspect-ratio:16/10;border-radius:26px;overflow:hidden;box-shadow:0 0 0 1px rgba(220,198,143,.4),0 40px 46px -30px rgba(0,0,0,.9);transform:translateZ(0)}
.bieten__gross .rahmen__k{position:absolute;inset:0;display:block}
.bieten__gross img{width:100%;height:100%;object-fit:cover}
.bieten__liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.1vw,16px);list-style:none;margin:0;padding:0}
.bieten__liste li{display:grid;align-content:space-between;gap:clamp(26px,3vw,50px);min-height:clamp(190px,17vw,250px);padding:clamp(20px,1.9vw,30px);border-radius:24px;background:linear-gradient(180deg,rgba(29,67,128,.55),rgba(11,33,72,.55));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(220,198,143,.26)}
.bieten__liste q{font-family:var(--serif);font-size:clamp(1.2rem,1.6vw,1.66rem);line-height:1.3;quotes:'«' '»';text-wrap:pretty}
.bieten__liste p{display:grid;gap:5px}
.bieten__liste b{font-family:var(--serif);font-weight:400;font-size:1.16rem;color:var(--gold)}
.bieten__liste span{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.bieten__ruf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 30px;margin-top:clamp(22px,2.6vw,38px);padding-top:clamp(20px,2.2vw,32px);border-top:1px solid rgba(220,198,143,.34)}
.bieten__ruf p{max-width:34ch;font-family:var(--serif);font-size:clamp(1.14rem,1.5vw,1.5rem);line-height:1.3}
.bew{display:grid;gap:clamp(18px,2vw,28px);margin-top:clamp(26px,3vw,44px);padding-top:clamp(20px,2.2vw,32px);border-top:1px solid var(--linie)}
.bew dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--taupe)}
.bew dd{margin:8px 0 0;font-family:var(--serif);font-size:clamp(1.2rem,1.7vw,1.76rem);line-height:1.22}
.bew a{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}
@media (max-width:860px){
  .stelle{grid-template-columns:minmax(0,1fr)}.stelle__b{min-height:0;aspect-ratio:4/3}.stelle__t{padding:6px 8px 14px}
  .bieten>.in{grid-template-columns:minmax(0,1fr)}.bieten__links{position:static}
}
@media (max-width:560px){.bieten__liste{grid-template-columns:minmax(0,1fr)}.bieten__liste li{min-height:0}}

/* FASSUNG 37 · Zeit-Karten: nach der Fahrt rastet nichts mehr ein (kein Anheben und kein Bild-Zoom, solange gefahren wird) */
/* ohne !important: das würde die Fahrt der Karte selbst abstellen (wichtige Angaben schlagen jede Animation), dann springt der Rahmen ans Ziel
   und nur das Bild fährt, so sah der Wechsel «gehackt» aus. Die hohe Gewichtung reicht, um das Anheben unter der Maus zu schlagen. */
.zs.zs--faehrt .zs__k.zs__k.zs__k.zs__k,.zs.zs--faehrt .zs__k.zs__k.zs__k.zs__k:hover{transform:none;transition:none}
.zs__k .zs__b img,.zs__k:hover .zs__b img,.zs__k:active .zs__b img{transform:none;transition:none}

/* ==========================================================================
   Kontaktkasten im Fuss: eine erhabene Platte mit vier vertieften Feldern («Kuhlen»), in denen der Text liegt
   (Robert 08.10.2026: «luxuriöser, mit diesen Einkerbungen, mit diesen Kuhlen, wo dann der Text drin ist»). Nur Flächen und Schatten, nichts bewegt sich.
   ========================================================================== */
.fuss__kontakt{gap:clamp(9px,.9vw,13px);padding:clamp(11px,1.1vw,15px);border-radius:28px;
  background:linear-gradient(160deg,#17325f,#0c2045 46%,#07152f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(220,198,143,.36),inset 0 -2px 0 rgba(0,0,0,.55),0 34px 46px -30px rgba(0,0,0,.95)}
.fuss__kontakt>div{padding:clamp(14px,1.45vw,21px) clamp(15px,1.6vw,23px) clamp(15px,1.55vw,22px);border-radius:18px;
  background:linear-gradient(180deg,#030a1a,#07183a 68%,#0a1f44);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.85),inset 0 1px 0 rgba(0,0,0,.95),inset 0 0 0 1px rgba(0,0,0,.4),inset 0 -1px 0 rgba(220,198,143,.16),0 1px 0 rgba(255,255,255,.16)}
.fuss__kontakt dd{text-shadow:0 1px 0 rgba(0,0,0,.6)}
@media (max-width:700px){.fuss__kontakt{padding:10px;gap:9px}.fuss__kontakt>div{padding:13px 14px 14px;border-radius:15px}}
/* Aufteilung der vier Felder: Adresse hoch links, Telefon und Rezeption rechts übereinander, E-Mail breit darunter (nichts läuft über den Rand) */
.fuss__kontakt{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
.fuss__kontakt>div:nth-child(1){grid-row:1/3}
.fuss__kontakt>div:nth-child(4),.fuss__kontakt div:last-child{grid-column:1/-1}
.fuss__kontakt dd{font-size:clamp(1.02rem,1.22vw,1.26rem)}
@media (max-width:700px){.fuss__kontakt{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}}
@media (max-width:380px){.fuss__kontakt dd{font-size:.94rem}.fuss__kontakt dd a{white-space:normal;overflow-wrap:anywhere}}


/* ==========================================================================
   FASSUNG 38 · Roberts Liste vom 08.10.2026, 20 Uhr (Sicherung davor: _sicherung/vor-fassung-38/)
   ========================================================================== */
/* Kopfleiste: Insel schmaler, damit zwischen Insel und Eck-Knöpfen Luft ist (Verhältnis wie beim Waldhotel Doldenhorn),
   Eck-Knöpfe auf der Mitte der Insel, alles 8 px tiefer */
@media (min-width:1081px){
  .nav{top:26px}
  .sprache,.eckknopf{top:34px}
  .nav__insel{gap:clamp(16px,1.9vw,28px);padding:0 24px 0 20px}
  .nav__logo{gap:10px}.nav__logo svg{height:24px}
  .nav__logo b{font-size:.875rem;letter-spacing:.06em}
  .nav__links{gap:clamp(10px,1.2vw,18px)}
  .nav__links a{font-size:12px;letter-spacing:.08em}
}
/* schmalere Laptop-Fenster: dort stiessen Insel und Eck-Knopf aneinander. Bis 1320 px steht nur das Zeichen in der Insel, die Eck-Knöpfe sind schmaler */
@media (min-width:1081px) and (max-width:1320px){
  .nav__logo b{display:none}
  .nav__insel{gap:20px;padding:0 22px 0 18px}
  .nav__links{gap:clamp(11px,1.15vw,15px)}
  .eckknopf{gap:8px;padding:0 14px 0 16px;font-size:11px;letter-spacing:.09em}
  .sprache{padding:0 12px;gap:6px}
}
/* Kontaktkasten im Fuss: Kuhlen bleiben sichtbar vertieft, aber weicher und matt, ohne schwarzes Loch und ohne Glanzkanten (Robert: erst «viel zu stark, muss edler, matt», dann zur flachen Fassung «jetzt ist der 3D-Kuhlen-Effekt weg») */
.fuss__kontakt{background:linear-gradient(180deg,#16306a,#122a5c);
  box-shadow:inset 0 0 0 1px rgba(220,198,143,.22),inset 0 1px 0 rgba(255,255,255,.07),0 28px 40px -32px rgba(0,0,0,.7)}
.fuss__kontakt>div{background:linear-gradient(180deg,#081736,#0a1d42 34%,#0c2147);
  box-shadow:inset 0 3px 6px -1px rgba(1,6,16,.62),inset 0 1px 0 rgba(1,6,16,.55),inset 0 0 0 1px rgba(1,6,16,.26),0 1px 0 rgba(255,255,255,.1)}
.fuss__kontakt dd{text-shadow:none}
/* Auswahl-Leiste der Zimmer: kein Lichtstreifen beim Hereinkommen */
.konsole.da::before{animation:none}
/* Bänder: nur seitwärts, nicht nach oben schieben (der Auftritt von unten machte das Band in der Höhe verschiebbar) */
.band{overflow-y:hidden}
/* Fenster: ein ganz leichter Schleier über dem ganzen Bild und ein schwacher, weiter Hof hinter der Schrift, der erst mit der Schrift kommt;
   dazu der Schatten an den Buchstaben (Robert: der starke Hof war zu viel, nur Buchstabenschatten ist auf hellen Bildern zu wenig) */
.bruch::after{content:'';position:absolute;z-index:1;inset:0;background:rgba(4,10,24,.16);pointer-events:none}
.bruch .in{z-index:2}
.bruch .in::before{width:min(1040px,94vw);height:210%;background:radial-gradient(ellipse at center,rgba(4,10,24,.34) 0%,rgba(4,10,24,.2) 36%,rgba(4,10,24,0) 70%);opacity:0;transition:opacity 1.3s ease .25s}
.bruch .in:has(.d2.da)::before{opacity:1}
/* der Schatten kommt erst, wenn die Zeile steht: sonst schiebt sich beim Hochrollen ein dunkler Balken vor die Schrift */
.bruch .d2{text-shadow:none}
.bruch .d2 .z{overflow:visible;clip-path:inset(0 -.6em)}
/* der Ausschnitt der Zeile öffnet sich erst nach dem Hochrollen (von inset zu inset, damit der Wechsel wirklich wartet; «none» käme sofort) */
.bruch .d2.da .z{clip-path:inset(-.9em -.6em);transition:clip-path 0s 1.5s}
.bruch .d2 .z>span{text-shadow:0 .02em .04em rgba(4,10,24,0),0 .06em .16em rgba(4,10,24,0),0 .14em .42em rgba(4,10,24,0);transition:transform 1.25s var(--e1),text-shadow .9s ease;transition-delay:0s,1.5s}
.bruch .d2 .z:nth-child(2)>span{transition-delay:.09s,1.55s}.bruch .d2 .z:nth-child(3)>span{transition-delay:.18s,1.6s}
.bruch .d2.da .z>span{text-shadow:0 .02em .04em rgba(4,10,24,.82),0 .06em .16em rgba(4,10,24,.7),0 .14em .42em rgba(4,10,24,.5)}
.bruch .mono{text-shadow:0 1px 2px rgba(4,10,24,.92),0 2px 10px rgba(4,10,24,.78),0 0 24px rgba(4,10,24,.45)}
/* Pauschalen und Hochzeitspackages: zuerst was man bekommt, der Preis klein am Fuss der Karte */
.st__gross{margin-top:clamp(18px,2vw,28px);padding-top:0;border-top:0;font-size:clamp(1.3rem,1.72vw,1.8rem);line-height:1.24}
.st__lauf{margin-top:14px}
.st__preis{order:5;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:clamp(18px,2vw,26px);padding-top:clamp(13px,1.4vw,18px);border-top:1px solid var(--linie);font-size:clamp(1.18rem,1.45vw,1.46rem);line-height:1.1}
.st__preis small{margin:0;font-size:11px;letter-spacing:.12em}
.st__n{font-weight:600;letter-spacing:.005em}
.st__preis{justify-content:center;text-align:center}
.fl--papier .st,.fl--creme .st{box-shadow:inset 0 0 0 1px rgba(138,117,69,.26),inset 0 1px 0 #fff,0 1.5px 0 #d8caa4,0 36px 44px -30px rgba(74,58,26,.5)}
.nachsatz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,80px);align-items:center;margin-top:clamp(44px,5.4vw,86px);padding-top:clamp(30px,3.6vw,56px);border-top:1px solid var(--linie)}
.nachsatz .d3{font-size:clamp(1.6rem,2.7vw,2.9rem);line-height:1.12}
.nachsatz .lauf{max-width:46ch}
.nachsatz .kn-reihe{margin-top:clamp(18px,2.2vw,30px)}
@media (max-width:860px){.nachsatz{grid-template-columns:minmax(0,1fr)}}
/* Angebote: die Gutschein-Karte aus den Drucksachen, Vorder- und Rückseite leicht versetzt */
.gschein{position:relative;margin-top:clamp(34px,4vw,62px);width:min(540px,94%);aspect-ratio:1000/590}
.gschein img{position:absolute;width:84%;height:auto;border-radius:6px}
.gschein__h{right:0;bottom:0;transform:rotate(3deg);box-shadow:0 0 0 1px rgba(138,117,69,.22),0 20px 26px -18px rgba(74,58,26,.55)}
.gschein__v{left:0;top:0;transform:rotate(-2.5deg);box-shadow:0 28px 34px -20px rgba(12,21,38,.65)}
/* Karte: Getränke (kleiner, oben) und Gerichte (gross, unten) stehen frei im Raum, dicht untereinander, mit einer feinen Linie dazwischen;
   Preise klein unter einem Strich auf einer Linie (Robert: kein Kasten drumherum, Bögen frei und eher grösser) */
.kbrett{position:relative}
.kbrett__fach .gang__kopf{margin:0 0 clamp(14px,1.6vw,24px);align-items:center}
.kbrett__t{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,1.9vw,2rem);line-height:1.1}
.kbrett__fach .pfeile button{width:46px;height:46px}
.kbrett__fach .band{padding-bottom:4px;gap:clamp(14px,1.5vw,24px)}
.kbrett__fach .laufbalken{margin-top:16px}
.kbrett__naht{display:flex;align-items:center;gap:18px;margin:clamp(20px,2.4vw,36px) 0;color:var(--gold)}
.kbrett__naht::before,.kbrett__naht::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(220,198,143,0),rgba(220,198,143,.5))}
.kbrett__naht::after{transform:scaleX(-1)}
.kbrett__naht svg{flex:none;height:17px;width:auto}
.kbrett .gk{width:clamp(264px,23.6vw,356px)}
.kbrett .gk>p{margin-bottom:14px}
.kbrett .gk--klein{width:clamp(196px,16vw,246px)}
.kbrett .gk--klein h4{margin:14px 4px 0;font-size:1.14rem}
.kbrett .gk--klein>p{margin:6px 4px 12px;font-size:.9rem;line-height:1.44}
.gk__p{position:relative;margin-top:auto;padding-top:13px;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;row-gap:4px}
.gk__p::before{content:'';position:absolute;left:50%;top:0;width:30px;height:1px;margin-left:-15px;background:rgba(220,198,143,.55)}
.gk__p span{display:inline-flex;align-items:baseline;gap:7px;padding:0 12px}
.gk__p span+span{box-shadow:-1px 0 0 rgba(220,198,143,.3)}
.gk__p i{font-style:normal;font-family:var(--serif);font-size:1.1rem;color:var(--gold);font-variant-numeric:lining-nums}
.gk__p small{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.gk--klein .gk__p{padding-top:11px}.gk--klein .gk__p i{font-size:.98rem}
@media (max-width:640px){.kbrett .gk{width:72vw}.kbrett .gk--klein{width:48vw}}
/* Weinkarte als Blatt: ein Bogen mit drei Seiten und zwei Falzen, der auf zwei weiteren Bögen liegt (nur Flächen und Schatten, nichts bewegt sich).
   Jede Seite beginnt auf gleicher Höhe mit dem Zeichen des Hauses; der Hinweis steht am Fuss der letzten Seite. */
.weinblatt{position:relative;padding:0 0 clamp(12px,1.4vw,20px)}
.weinblatt::before,.weinblatt::after{content:'';position:absolute;z-index:0;left:10px;right:10px;top:12px;bottom:clamp(4px,.7vw,10px);border-radius:4px;background:#f6eedb;box-shadow:inset 0 0 0 1px rgba(138,117,69,.16),0 10px 18px -12px rgba(74,58,26,.32)}
.weinblatt::before{transform:rotate(-.55deg) translateY(6px)}
.weinblatt::after{transform:rotate(.4deg) translateY(3px);background:#faf4e4}
.weinblatt__bogen{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:4px;background:linear-gradient(180deg,#fffdf8,#fbf5e8);
  box-shadow:inset 0 0 0 1px rgba(138,117,69,.2),inset 0 1px 0 #fff,0 2px 0 #e9dfc4,0 30px 46px -30px rgba(74,58,26,.5)}
.weinseite{display:flex;flex-direction:column;min-width:0;padding:clamp(22px,2.6vw,42px) clamp(18px,2.5vw,42px) clamp(22px,2.6vw,40px);
  background:linear-gradient(90deg,rgba(116,92,44,.11),rgba(116,92,44,0) 52px),linear-gradient(270deg,rgba(116,92,44,.07),rgba(116,92,44,0) 38px)}
.weinseite:first-child{background:linear-gradient(270deg,rgba(116,92,44,.07),rgba(116,92,44,0) 38px)}
.weinseite:last-child{background:linear-gradient(90deg,rgba(116,92,44,.11),rgba(116,92,44,0) 52px)}
.weinseite+.weinseite{box-shadow:inset 1px 0 0 rgba(255,255,255,.95),-1px 0 0 rgba(138,117,69,.24)}
.weinseite__kopf{display:flex;align-items:center;gap:16px;margin-bottom:clamp(18px,2.2vw,34px);color:var(--taupe)}
.weinseite__kopf::before,.weinseite__kopf::after{content:'';flex:1;height:1px;background:rgba(138,117,69,.38)}
.weinseite__kopf svg{flex:none;height:24px;width:auto}
.weinseite .weinliste{columns:auto;column-count:1}
.weinseite .weinliste section:last-child{margin-bottom:0}
.weinblatt__fuss{margin-top:auto;padding-top:clamp(24px,2.8vw,40px);text-align:center;font-family:var(--serif);font-size:.98rem;line-height:1.5;color:rgba(12,21,38,.62);text-wrap:balance}
.weinblatt__fuss::before{content:'';display:block;width:34px;height:1px;margin:0 auto 14px;background:var(--taupe)}
@media (max-width:1080px){
  .weinblatt__bogen{grid-template-columns:minmax(0,1fr);max-width:680px;margin-inline:auto}
  .weinseite,.weinseite:first-child,.weinseite:last-child{background:none}
  .weinseite+.weinseite{box-shadow:none;padding-top:0}.weinseite+.weinseite .weinseite__kopf{display:none}
}
/* Wellness: die drei Gartenbilder laufen beim Scrollen gegeneinander (Badeteich und Terrasse nach unten, XXL-Schach nach oben); die Bewegung
   sitzt auf einer inneren Hülle, damit sie dem Auftritt des Bildes nicht in die Quere kommt */
#park .drei{margin-top:clamp(40px,5.4vw,84px)!important;padding-bottom:clamp(40px,5vw,80px)}
/* drei Abzüge aus dem Wellnessdörfli unter dem Text «Nach dem Wandertag» */
.pstapel{display:flex;align-items:flex-start;margin-top:clamp(44px,5.4vw,84px);padding:0 30px 10px 8px}
.pstapel figure{position:relative;flex:0 1 230px;min-width:0;margin:0 -26px 0 0}
.pstapel figure:nth-child(2){margin-top:26px;z-index:1}
.pstapel__k{display:block;padding:9px 9px 0;background:linear-gradient(180deg,#fbf6ea,#efe6d2);box-shadow:0 28px 36px -22px rgba(0,0,0,.9),inset 0 0 0 1px rgba(0,0,0,.08);transform:rotate(var(--w,0deg));transition:transform .6s var(--e2)}
.pstapel__k img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.pstapel__k small{display:block;padding:10px 2px 12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:#1a2740}
@media (max-width:640px){.pstapel{padding-right:20px}.pstapel figure{margin-right:-14px}.pstapel__k{padding:6px 6px 0}.pstapel__k small{padding:8px 0 9px;font-size:8px;letter-spacing:.06em;white-space:nowrap}}
/* Bilder im Stapel bleiben unter der Maus liegen (Robert 14.10.2026 00:50: «mach den Effekt weg, dass das Bild in den Vordergrund rückt»; Regel für alle Seiten) */
/* Buchungsleiste im Auftakt: fährt ruhig von unten herauf, statt aufzuploppen */
.hero--f .leiste[data-r]{transform:translateY(clamp(64px,7.4vw,116px));transition-duration:1.2s,1.9s;transition-timing-function:ease,cubic-bezier(.2,.72,.2,1)}
.hero--f .leiste[data-r].da{transform:none}
/* Jobs: Abschluss unter «Warum bei uns arbeiten?» ohne Trennlinie */
.nachsatz--ruf{border-top:0;padding-top:0}
#warum .dienste{margin-top:0}
.zs__nt{display:inline-block}
/* Abzug des bisherigen Textes der Zeit-Karten während des Wechsels */
.zs{position:relative}

/* ---------- Sprachen (en/, fr/): Hinweis über den Rechtstexten, die im deutschen Wortlaut des Hauses bleiben ---------- */
.rechthin{margin:0 0 2em;padding:14px 18px;border-left:2px solid var(--gold);background:rgba(6,20,43,.05);font-size:.95rem;line-height:1.5}
html[lang="fr"] .fuss__marke p{font-size:clamp(1.55rem,3.2vw,3.3rem)}   /* «Uniquement différent.» ist länger als «Einzigartig anders.» und bräche sonst um */

/* ---------- FASSUNG 39 (Studio): Hinweis für Gäste oben auf jeder Seite, Dank nach einem Formular ---------- */
.hinweisband{position:relative;z-index:48;background:var(--gold);color:var(--tinte);font-size:15px;line-height:1.4}
.hinweisband .in{display:flex;align-items:center;justify-content:center;gap:12px;padding:11px var(--rand);text-align:center}
.hinweisband svg{flex:none;width:30px;height:18px}
.hinweisband p{margin:0}
.hinweisband a{text-decoration:underline;text-underline-offset:3px;margin-left:6px;white-space:nowrap}
/* Der Streifen liegt im Fluss ganz oben; Leiste und Eck-Knöpfe rücken um seine Höhe nach unten (--band setzt main.js), die Seite selbst nicht */
html[style*="--band"] .nav,html[style*="--band"] .sprache,html[style*="--band"] .eckknopf{margin-top:var(--band,0px)}
.formular__danke{margin-top:14px;font-weight:600;color:inherit}


/* ---------- FASSUNG 40 (09.10.2026): Schalter für zwei Möglichkeiten (Sommer / Winter) ----------
   Eingelassene Bahn mit Goldlinie, darin gleitet eine helle Taste zur gewählten Seite (nur transform). */
.tabs.tabs--schalter{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;gap:0;padding:5px;border:0;border-radius:999px;overflow:visible;
  background:linear-gradient(180deg,#050f22,#0b1f40);box-shadow:inset 0 2px 6px rgba(0,0,0,.7),inset 0 -1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(220,198,143,.34)}
.tabs.tabs--schalter::before{content:'';position:absolute;left:5px;top:5px;bottom:5px;width:calc(50% - 5px);border-radius:999px;
  background:linear-gradient(180deg,#fbf3e2 0%,#e8dbbf 46%,#cfbd98 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),inset 0 -3px 0 rgba(110,88,44,.38),0 1px 1px rgba(0,0,0,.4),0 12px 18px -10px rgba(0,0,0,.8);
  transition:transform .7s var(--e2)}
.tabs.tabs--schalter:has(.tab:nth-child(2)[aria-pressed="true"])::before{transform:translateX(100%)}
.tabs.tabs--schalter .tab,.fl--nacht .tabs.tabs--schalter .tab,.fl--navy .tabs.tabs--schalter .tab{position:relative;z-index:1;height:48px;min-width:clamp(118px,11vw,156px);padding:0 clamp(22px,2.2vw,34px);border-radius:999px;
  background:none;box-shadow:none;opacity:1;color:rgba(251,243,226,.78);font-family:var(--serif);font-size:clamp(1.02rem,1.2vw,1.2rem);letter-spacing:.01em;text-align:center;transition:color .5s var(--e2)}
.tabs.tabs--schalter .tab::after{display:none}
.tabs.tabs--schalter .tab:hover{color:#fff}
.tabs.tabs--schalter .tab[aria-pressed="true"],.fl--nacht .tabs.tabs--schalter .tab[aria-pressed="true"],.fl--navy .tabs.tabs--schalter .tab[aria-pressed="true"],
.tabs.tabs--schalter:not(:has([aria-pressed="true"])) .tab:first-child{color:var(--tinte);opacity:1;background:none;box-shadow:none}
.tabs.tabs--schalter .tab:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.fl--papier .tabs.tabs--schalter,.fl--creme .tabs.tabs--schalter{background:linear-gradient(180deg,#0b1f40,#12305e)}
@media (prefers-reduced-motion:reduce){.tabs.tabs--schalter::before{transition:none}}

/* ---------- FASSUNG 40: Formulare als dunkelblaue Karte mit Goldrand (Anfrage, Gutschein, Nachricht, Bewerbung) ----------
   Wie die Buchung: Tapete, doppelte Goldlinie, eingelassene Felder, Angaben in der Titelschrift, heller Knopf. */
form.blatt{color:#fff;border-radius:var(--r-xl);padding:clamp(28px,3.6vw,58px);
  background:linear-gradient(180deg,rgba(24,58,110,.88) 0%,rgba(10,30,66,.93) 44%,rgba(5,17,40,.97) 100%),#0b1f40 url(../img/tapete-navy.webp?v=ba8679c1) 50% 0/760px auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(220,198,143,.55),0 3px 0 #030b1c,0 56px 70px -40px rgba(12,21,38,.9)}
form.blatt::before{inset:10px;border:1px solid rgba(220,198,143,.34);border-radius:calc(var(--r-xl) - 10px)}
form.blatt .blatt__kopf{align-items:center;padding-bottom:clamp(16px,1.8vw,24px);border-bottom:1px solid rgba(220,198,143,.36)}
form.blatt .blatt__kopf .d4{font-size:clamp(1.6rem,2.3vw,2.4rem);line-height:1.1;color:#fbf3e2}
form.blatt .blatt__kopf .mono{color:rgba(220,198,143,.86)}
form.blatt .gutschein__z{color:var(--gold);width:clamp(54px,4.6vw,70px)}
form.blatt .gutschein__satz{margin:clamp(18px,2vw,26px) 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(1.12rem,1.4vw,1.4rem);line-height:1.35;color:rgba(255,255,255,.92)}
form.blatt .felder{gap:12px;margin-top:clamp(20px,2.2vw,30px)}
form.blatt .feld{gap:7px;padding:15px 20px 14px;border-radius:16px;background:rgba(3,10,24,.5);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.62),inset 0 -1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(220,198,143,.24);transition:box-shadow .45s var(--e2)}
form.blatt .feld:hover{box-shadow:inset 0 2px 6px rgba(0,0,0,.62),inset 0 -1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(220,198,143,.46)}
form.blatt .feld:focus-within{box-shadow:inset 0 2px 6px rgba(0,0,0,.62),inset 0 -1px 0 rgba(255,255,255,.09),inset 0 0 0 1.5px rgba(220,198,143,.92)}
form.blatt .feld span{color:var(--gold);font-size:11px;letter-spacing:.16em}
form.blatt .feld input,form.blatt .feld select,form.blatt .feld textarea{color:#fff;color-scheme:dark;font-family:var(--serif);font-weight:400;font-size:clamp(1.06rem,1.2vw,1.2rem);line-height:1.3;outline:0}
form.blatt .feld textarea{resize:none;min-height:3.9em}
form.blatt .feld select{padding-right:26px;cursor:pointer;background:no-repeat right 2px center/13px 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Cpath d='M1 1l5.5 5.5L12 1' fill='none' stroke='%23dcc68f' stroke-width='1.4'/%3E%3C/svg%3E")}
form.blatt .feld input[type=number]{-moz-appearance:textfield}
form.blatt .feld input[type=number]::-webkit-inner-spin-button,form.blatt .feld input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
form.blatt .feld input:-webkit-autofill{-webkit-text-fill-color:#fff;transition:background-color 99999s}
form.blatt .kn{--o:#fbf3e2;--m:#e8dbbf;--u:#cfbd98;--t:var(--tinte);--licht:rgba(255,255,255,.92);--kante:rgba(110,88,44,.38);--tief:rgba(0,0,0,.7);--ko:#1e3c72;--ku:#050f22;--kt:var(--weiss);--klicht:rgba(255,255,255,.24)}
form.blatt .kn::after{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.8) 50%,transparent 100%)}
form.blatt .kn-reihe{margin-top:clamp(22px,2.4vw,32px)}
form.blatt .lauf{color:rgba(255,255,255,.82)}
@media (max-width:600px){form.blatt{border-radius:26px}form.blatt::before{inset:7px;border-radius:19px}form.blatt .feld{padding:13px 16px 12px;border-radius:13px}}

/* ---------- FASSUNG 41 (09.10.2026): Fenster-Bild erst, wenn der Abschnitt naht ----------
   Das Bild steht fest über dem ganzen Schirm, der Browser hält es deshalb für sichtbar und lädt es beim Öffnen der Seite sofort
   (je 300 bis 700 KB, gleichzeitig mit dem Kopfbild). Ohne Fläche lädt er es nicht; bilder.js setzt .nah gut eine Fensterhöhe vorher. */
.bruch:not(.nah)>img{display:none}

/* ---------- FASSUNG 42 (09.10.2026): Bilder sind sofort da ----------
   Gemessen: auf der Startseite standen 14 von 31 Bildern beim Scrollen länger als 0,3 s blass im Blick (bis 1,35 s),
   obwohl sie längst geladen waren. Grund war das Aufblenden (opacity 0 → 1) der Bildrahmen. Das Aufsteigen von unten bleibt (Fassung 34),
   nur ohne Durchsichtigkeit: das Foto ist vom ersten Moment an voll da und steigt ein Stück nach. Text blendet weiter auf. */
[data-r="bild"],[data-r="schweb"],.zreihe [data-r="schweb"],.zk[data-r]{opacity:1;transition:opacity .5s var(--e2),transform 1.35s var(--e1)}
.zk.matt,.zk[data-r].da.matt{opacity:.2}
[data-r]:has(img){opacity:1}

/* Datenschutz: Abschnitt zum KI-Assistenten, als Entwurf gekennzeichnet */
.recht__entwurf{padding:12px 16px;border-radius:12px;background:rgba(220,198,143,.22);box-shadow:inset 0 0 0 1px rgba(138,117,69,.35);font-size:.95rem}

/* 13.10.2026 (Robert): «Wie viel Zeit haben Sie?» steht von Anfang an offen; Pfeile oben rechts blättern durch die Karten */
.zs__nav{display:none}
.zs--offen .zs__nav{display:flex;gap:10px;grid-column:8/-1;grid-row:2;justify-self:end;align-self:start;z-index:3;margin-top:clamp(20px,1.9vw,28px)}
.zs__pf{display:grid;place-items:center;width:50px;height:50px;padding:0;border-radius:50%;color:var(--tinte);cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg,#fbf3e2,#e8dbbf 50%,#cfbd98);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(110,88,44,.36),0 12px 18px -10px rgba(0,0,0,.7)}
.zs__pf svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--e1)}
@media (hover:hover){.zs__pf[data-zs-nav="-1"]:hover svg{transform:translateX(-3px)}.zs__pf[data-zs-nav="1"]:hover svg{transform:translateX(3px)}}
.zs__pf:active{box-shadow:inset 0 2px 5px rgba(110,88,44,.45),0 6px 10px -8px rgba(0,0,0,.7)}
.zs__pf:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
@media (max-width:1100px){.zs--offen .zs__nav{grid-column:1/-1;grid-row:3;margin-top:2px}}
@media (max-width:860px){.zs--offen .zs__nav{display:none}}
/* die Antwort steht oben auf der Linie von Kreuz und Pfeilen und schliesst unten mit der grossen Karte ab; lange Titel brechen vor den Pfeilen um */
@media (min-width:861px){.zs--offen .zs__text .d3{padding-right:132px}}
@media (min-width:1101px){
  .zs--offen .zs__text{display:flex;align-self:stretch}
  .zs--offen .zs__text>[data-feld]:not([hidden]){flex:1;min-width:0;display:flex;flex-direction:column;padding-top:clamp(20px,1.9vw,28px)}
  .zs--offen .zs__text>[data-feld]>.lauf{margin-bottom:clamp(20px,2.2vw,32px)}
  .zs--offen .zs__text>[data-feld]>.koord{margin-top:auto}
}
/* die beiden Knöpfe der Antwort stehen mittig in ihrer Spalte */
.zs--offen .zs__text .kn-reihe{justify-content:center}
/* Antwort, Kreuz und Pfeile kommen mit den Karten herein, statt vor ihnen dazustehen */
.zs .zs__text,.zs .zs__zu,.zs .zs__nav{transition:opacity 1.1s var(--e1) .25s}
.zs__k:first-child:not(.da)~.zs__text,.zs__k:first-child:not(.da)~.zs__zu,.zs__k:first-child:not(.da)~.zs__nav{opacity:0}
@media (prefers-reduced-motion:reduce){.zs .zs__text,.zs .zs__zu,.zs .zs__nav{transition:none}}
/* Kopf eines Abschnitts mittig: Zeichen, Titel, Satz untereinander */
.kopfmitte{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:clamp(34px,4.2vw,64px)}
.kopfmitte .zier{margin-bottom:clamp(28px,3.4vw,52px)}
.kopfmitte .zier svg{width:clamp(48px,4.4vw,68px)}
.fl--mitte{padding-top:clamp(52px,5.4vw,84px)}
.kopfmitte .lauf{max-width:52ch;margin-top:clamp(16px,1.9vw,26px)}
/* Bilder neben dem Text schliessen oben mit dem Titel und unten mit dem Knopf ab */
@media (min-width:861px){
  .zwei--buendig{align-items:stretch}
  .zwei--buendig>.b{display:flex;padding-top:calc(clamp(1.9rem,3.2vw,3.3rem)*.2)}
  .zwei--buendig>.b>.zmos{flex:1;aspect-ratio:auto;min-height:0}
}

/* Die vier Lokale im Haus als Bildkarten mit echtem Foto (Robert 13.10.2026, dritte Fassung auf sein Wort «mit Fotos»; abgelehnt: Platte mit Kreuz, «noch nicht super»: Zeilen ohne Bild).
   Karten im Stil der kleinen Zeit-Karten; die Reihe ist so hoch wie die Tafel daneben (beide strecken sich), jede Karte führt zum Lokal. */
.ort__unten--karten{align-items:stretch}
.ort__unten--karten>.tafel{align-content:center}
.lokale{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:clamp(10px,1.1vw,16px)}
.lokale li{display:flex;min-width:0}
.lokal{flex:1;display:flex;flex-direction:column;min-width:0;padding:7px 7px 8px;border-radius:20px;color:var(--tinte);text-decoration:none;
  background:linear-gradient(180deg,#fffdf6,#f1e6cc);box-shadow:inset 0 0 0 1px rgba(138,117,69,.32),inset 0 1px 0 #fff,0 28px 38px -26px rgba(0,0,0,.85);transition:transform .6s var(--e2),box-shadow .5s var(--e2)}
.lokal__b{position:relative;flex:1;display:block;min-height:clamp(88px,7.6vw,120px);border-radius:14px;overflow:hidden;background:var(--creme)}
.lokal__b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lokal__n{display:flex;flex-direction:column;gap:4px;margin:7px 1px 0;padding:9px 8px 9px;border-radius:11px;text-align:center;background:#f1e7cf;box-shadow:inset 0 2px 4px rgba(74,58,26,.24),inset 0 -1px 0 rgba(255,255,255,.9)}
.lokal__n i{font-style:normal;font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}
.lokal__n b{font-family:var(--serif);font-weight:400;font-size:clamp(1rem,1.3vw,1.34rem);line-height:1.12;text-wrap:balance}
@media (hover:hover){.lokal:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(138,117,69,.32),inset 0 1px 0 #fff,0 0 0 2px var(--gold),0 26px 30px -22px rgba(0,0,0,.95)}}
.lokal:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
@media (max-width:860px){.lokal{border-radius:16px;padding:6px 6px 7px}.lokal__b{min-height:84px;border-radius:11px}.lokal__n{border-radius:9px;padding:8px 4px}}

/* Schein über der Package-Karte wie beim Grand Beau-Rivage (Robert 13.10.2026): unter der Maus zieht ein heller Streifen von links nach rechts über das Textfeld (nur transform) */
.gang .lk__t{position:relative;isolation:isolate;overflow:hidden;border-radius:21px}
.gang .lk__t::after{content:'';position:absolute;top:-20%;bottom:-20%;left:0;width:40%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(243,227,182,.1) 50%,transparent);transform:translateX(-160%) skewX(-16deg);transition:transform 0s}
@media (hover:hover){.gang .lk:hover .lk__t::after{transform:translateX(330%) skewX(-16deg);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}}

/* Zimmer-Abschnitte: die Bilder ein Stück grösser, breitere Bildspalte und höheres Gefüge (Robert 13.10.2026) */
.zwei__fuss{margin-top:16px}
.zwei--bild .d2{font-size:clamp(2rem,3.9vw,4rem)}
/* Titel schliesst oben mit den Bildern ab, Ausstattung und Knöpfe unten */
@media (min-width:1101px){
  .zwei--bild>.zmos{aspect-ratio:1.42/1;align-self:start;width:100%}
  .zwei--bild{align-items:stretch}
  .zwei--bild>.t{display:flex;flex-direction:column}
  .zwei--bild>.t>.d2{margin-top:-.2em}
  .zwei--bild>.t>.zwei__fuss{margin-top:auto}
  .zwei--bild>.t>.lauf:not(.zwei__fuss){margin-bottom:22px}
}
@media (min-width:1300px){
  .zwei--bild>.t{grid-column:1/6}.zwei--bild>.b{grid-column:6/-1}
  .zwei--um.zwei--bild>.t{grid-column:8/-1}.zwei--um.zwei--bild>.b{grid-column:1/8}
}

/* Abschnitt als eine Karte (Robert 13.10.2026 zur Dachterrasse: «luxuriöser und edler, sieht so langweilig aus»): dunkelblaue Karte auf der Tapete wie die Package-Karten,
   links das Textfeld mit feinem Goldrahmen, alles mittig (Zeile, Titel, Raute, Satz, Knopf), rechts die Fotos in voller Höhe; Schein unter der Maus. */
.edel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:10px;padding:10px;border-radius:30px;background:linear-gradient(180deg,#24477f,#0e2a55 40%,#071a3a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(220,198,143,.36),0 1.5px 0 #030b1c,0 2px 0 1px rgba(220,198,143,.14),0 40px 50px -22px rgba(0,0,0,.9),0 70px 80px -50px rgba(0,0,0,.8)}
.edel__t{position:relative;isolation:isolate;overflow:hidden;border-radius:21px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(40px,4.4vw,72px) clamp(24px,3.2vw,54px)}
.edel__t::before{content:'';position:absolute;inset:clamp(10px,1vw,16px);border-radius:15px;border:1px solid rgba(220,198,143,.34);box-shadow:inset 0 0 0 4px rgba(5,17,40,.22),inset 0 0 0 5px rgba(220,198,143,.13);pointer-events:none;z-index:-1}
.edel__t::after{content:'';position:absolute;top:-20%;bottom:-20%;left:0;width:40%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(243,227,182,.1) 50%,transparent);transform:translateX(-160%) skewX(-16deg);transition:transform 0s}
@media (hover:hover){.edel:hover .edel__t::after{transform:translateX(330%) skewX(-16deg);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}}
.edel__t .kapitel{justify-content:center;margin-bottom:clamp(16px,1.8vw,26px)}
.edel__t .d2{font-size:clamp(2.2rem,4.3vw,4.5rem);line-height:1.06}
.edel__raute{display:flex;align-items:center;justify-content:center;gap:14px;margin:clamp(20px,2.3vw,34px) 0 clamp(18px,2vw,30px);color:var(--gold)}
.edel__raute::before,.edel__raute::after{content:'';width:clamp(44px,5.4vw,92px);height:1px;background:currentColor;opacity:.6}
.edel__raute i{width:7px;height:7px;background:currentColor;transform:rotate(45deg)}
.edel__t .lauf{max-width:40ch;margin:0}
.edel__t .kn-reihe{justify-content:center}
.edel__b{display:flex;min-width:0}
.edel__b>.zmos{flex:1;aspect-ratio:auto;min-height:clamp(360px,37vw,580px);gap:10px}
.edel__b .zmos__b,.edel__b .zmos__b:first-child{border-radius:21px;box-shadow:none}
@media (max-width:1100px){
  .edel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .edel__t .kapitel{flex-direction:column;gap:9px;white-space:normal}.edel__t .kapitel i{width:38px}
  .edel__t .kn{height:44px;padding-left:20px;font-size:10.5px;gap:10px}.edel__t .kn i{width:32px;height:32px}
}
@media (max-width:860px){
  .edel{grid-template-columns:minmax(0,1fr);border-radius:24px;padding:8px;gap:8px}
  .edel__t{border-radius:17px;padding:44px 22px 40px}.edel__t::before{inset:8px;border-radius:12px}
  .edel__b>.zmos{min-height:0}.edel__b .zmos__b,.edel__b .zmos__b:first-child{border-radius:17px}
}

/* ===== FASSUNG 44 · Auftakt «28» und Kopf (Robert 13.10.2026, gewählt aus varianten-auftakt-2.html) =====
   Grössenverhältnisse wie der Auftakt des Grand Beau-Rivage. Kopf auf allen Seiten: Insel höher, links oben «Tisch reservieren»,
   rechts oben «Zimmer buchen», Sprachen unten links, Chat unten rechts. Zeichen in Gold mit Relief als Bild (node _qa/ce_gold.js),
   weil Safari SVG-Filter unscharf rechnet. Das Dunkel hinter der Schrift steckt im Foto (hero_farbe.py). Stand davor: _sicherung/2026-10-13-vor-auftakt-28/ */
@font-face{font-family:'Baskerville Fein';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/libre-baskerville-400.woff2') format('woff2')}
@font-face{font-family:'Montserrat CE';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/montserrat-600-latin.woff2') format('woff2')}
.nav__logo svg{aspect-ratio:1680/1084;color:transparent;background:url(../img/ce-gold-320.webp?v=b3b7a7bf) center/contain no-repeat}
.gast-knopf .gast-knopf__ce svg{color:transparent;background:url(../img/ce-gold-320.webp?v=b3b7a7bf) center/contain no-repeat}
@media (min-width:1081px){
  .nav{top:26px}
  .nav__insel{height:74px;padding:0 36px 0 28px;gap:clamp(20px,2.2vw,34px)}
  .nav__logo svg{height:42px;width:auto}
  .nav__logo b{font-size:1.12rem}
  .nav__links{gap:clamp(14px,2.2vw,34px)}
  .nav__links a{font-size:13px;font-weight:500;letter-spacing:.06em;white-space:nowrap}
  .eckknopf{top:41px;height:44px;font-size:12.5px;letter-spacing:.13em;padding:0 20px 0 22px;gap:12px}
  .eckknopf--links{right:auto;left:max(18px,calc(var(--rand)*.5))}
  .sprache{top:auto;bottom:30px;height:44px;transition:transform .55s var(--e2),opacity .4s ease}
  html[style*="--band"] .sprache{margin-top:0}
  .nav.weg~.sprache{transform:translateY(calc(100% + 48px));opacity:0;pointer-events:none}
  .gast-knopf{bottom:30px}
}
@media (min-width:1081px) and (max-width:1700px){.nav__logo b{display:none}.nav__logo svg{height:46px}.nav__insel{gap:30px}}
@media (min-width:1081px) and (max-width:1430px){.nav__links{gap:20px}.nav__insel{gap:24px;padding:0 28px 0 24px}}
@media (min-width:1081px) and (max-width:1280px){.eckknopf{padding:0 15px 0 17px;letter-spacing:.09em;font-size:11.5px;gap:8px}.nav__links{gap:13px}.nav__links a{font-size:12px;letter-spacing:.04em}.nav__insel{padding:0 22px 0 20px;gap:18px}}
@media (min-width:1081px) and (max-width:1190px){.eckknopf{padding:0 12px 0 14px;letter-spacing:.06em;font-size:11px;gap:6px}.nav__links{gap:10px}.nav__links a{font-size:11.5px;letter-spacing:.02em}.nav__insel{padding:0 16px 0 14px;gap:14px}.nav__logo svg{height:40px}}
/* Auftakt */
.hero--f{align-items:stretch}
.hero--f .hero__bild{inset:0 -3% -14% -11%}
section.hero--f .hero__bild img{object-position:60% 17%;background-position:60% 17%}
.hero--f .hero__in{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:none;margin:0;padding:clamp(104px,13vh,118px) var(--rand) clamp(70px,10vh,92px)}
.hero__marke{display:flex;flex-direction:column;align-items:center}
/* Zeichen mit Schatten im Bild (python3 _qa/ce_schatten.py): als Filter im Browser stand der weiche Schatten als Viereck hinter dem Zeichen (Robert 13.10.2026).
   Das Bild ist um den Schattenrand grösser als das Zeichen (19,23 % je Seite); --b ist die Bildbreite, der Rand wird als negativer Abstand herausgerechnet. */
.hero__ce{--b:clamp(158px,17.06vw,262px);width:var(--b);height:auto;margin:calc(var(--b)*-.1923);pointer-events:none}
.hero__name{margin:clamp(14px,1.8vw,27px) -.18em 0 0;font-family:var(--serif);font-weight:700;font-size:clamp(1.4rem,3.85vw,3.75rem);line-height:1.1;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;color:#fbf6ea;
  text-shadow:0 .02em .04em rgba(4,10,24,.95),0 .06em .16em rgba(4,10,24,.95),0 .12em .34em rgba(4,10,24,.95),0 .18em .6em rgba(4,10,24,.9),0 .1em 1.2em rgba(4,10,24,.85)}
.hero__ort{margin:clamp(10px,1.1vw,17px) -.3em 0 0;font-family:'Montserrat CE',var(--sans);font-weight:600;font-size:clamp(.72rem,1.16vw,1.14rem);letter-spacing:.3em;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(180deg,#fbf0cf 0%,#ead39c 30%,#c9a764 48%,#9c7b43 58%,#dcc189 76%,#f3e3b6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 -.5px 0 rgba(255,247,226,.45)) drop-shadow(0 1px 0 rgba(61,42,16,.9)) drop-shadow(0 2px 3px rgba(4,10,24,.85))}
.hero__ort i{font-style:normal}
.hero__satz{margin-top:clamp(16px,1.9vw,28px);font-family:'Baskerville Fein',var(--serif);font-weight:400;font-size:clamp(1.15rem,1.9vw,1.86rem);line-height:1.3;color:#fff;
  text-shadow:0 0 .25em rgba(4,10,24,1),0 1px 2px rgba(4,10,24,1),0 2px 6px rgba(4,10,24,1),0 4px 14px rgba(4,10,24,1),0 8px 30px rgba(4,10,24,1),0 12px 54px rgba(4,10,24,1)}
.hero__satz em{font-style:normal;color:var(--gold)}
.hero--f .leiste{position:relative;top:clamp(30px,7.4vh,68px);width:100%;max-width:920px;margin:clamp(22px,2.6vw,39px) auto 0;padding:0 0 0 clamp(14px,2vw,30px);border-radius:999px;text-align:left;
  /* erhabene Platte wie die Buchung des Grand Beau-Rivage (Robert 13.10.2026: «dem Balken noch so einen 3D-Effekt»): Goldkante, Licht von oben, dunkle Lippe unten, drei Schatten */
  border:1px solid rgba(220,198,143,.5);
  background:radial-gradient(120% 140% at 50% -40%,rgba(120,160,235,.28),rgba(120,160,235,0) 58%),linear-gradient(180deg,#2a4f92 0%,#17376e 24%,#0d2349 62%,#061430 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 12px 18px -14px rgba(255,255,255,.2),inset 0 -2px 0 rgba(0,0,0,.42),inset 0 0 0 1px rgba(220,198,143,.1),
    0 26px 44px -20px rgba(2,8,22,.85),0 8px 16px -8px rgba(2,8,22,.55),0 1px 2px rgba(2,8,22,.4)}
.hero--f .leiste label{padding:9px 22px 8px;border-right-color:rgba(255,255,255,.2)}
.hero--f .leiste label span{font-size:12.5px;letter-spacing:.17em;color:var(--gold);white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,.35)}
.hero--f .leiste input,.hero--f .leiste select{color:rgba(250,244,232,.96);color-scheme:dark;text-shadow:0 1px 1px rgba(0,0,0,.35)}
.hero--f .leiste .kn{--o:#f8eac6;--m:#d6b679;--u:#aa874f;--t:var(--tinte);--licht:rgba(255,250,235,.9);--kante:rgba(92,72,38,.45);--tief:rgba(0,0,0,.6);height:48px;margin:0 9px 0 12px;
  background:linear-gradient(180deg,#f8eac6 0%,#ead09a 20%,#d6b679 52%,#c2a062 80%,#aa874f 100%);text-shadow:0 1px 0 rgba(255,248,230,.5)}
.hero--f .leiste .kn i{width:36px;height:36px}
.hero--f>.hero__zeile{position:absolute;z-index:2;left:0;right:0;bottom:30px;min-height:44px;max-width:none;margin:0;padding:0 clamp(190px,17vw,260px);justify-content:center;align-items:center;gap:6px 30px}
@media (max-width:1280px){.hero--f>.hero__zeile{font-size:.84rem;gap:4px 18px}}
@media (max-width:1080px){.hero--f>.hero__zeile{padding:0 92px 0 var(--rand);justify-content:flex-start;text-align:left;bottom:18px}}
@media (max-width:860px){
  .hero--f .hero__bild{inset:0 0 -14% 0}
  .hero__ce{--b:169px}
  .hero__name{font-size:clamp(1.25rem,6.5vw,2.6rem);letter-spacing:.14em;margin-right:-.14em}
  .hero__ort{white-space:normal;font-size:.7rem;letter-spacing:.24em;margin-right:-.24em;line-height:1.75}
  .hero__ort span{display:block}.hero__ort i{display:none}
  .hero__satz{font-size:1.2rem}
  .hero--f .leiste{top:0;margin-top:26px;padding:6px;border-radius:24px}
  .hero--f .leiste label{padding:11px 16px 10px}
  .hero--f .leiste label:nth-of-type(3){border-top-color:rgba(220,198,143,.22)}
  .hero--f .leiste .kn{height:52px;margin:8px 6px 6px}
  .hero--f{flex-direction:column;height:auto;min-height:max(100svh,640px)}
  .hero--f .hero__in{flex:1 0 auto;padding:92px 18px 22px}
  .hero--f>.hero__zeile{position:relative;left:auto;right:auto;bottom:auto;flex:none;flex-direction:column;align-items:flex-start;gap:2px;font-size:.82rem;min-height:0;padding:0 92px 24px 18px}
}
@media (max-width:400px){.hero__ce{--b:137px}.hero--f .hero__in{padding-top:84px}.hero__satz{font-size:1.08rem}.hero--f .leiste{margin-top:20px}}
@media (max-width:700px){section.hero--f .hero__bild img{object-position:50% 0%;background-position:50% 0%}}

/* ===== FASSUNG 45 · Bewegung wie beim Grand Beau-Rivage (Robert 13.10.2026: «mach mehr wie Rivage die ganzen Animationen», «ohne den Hero und ohne das») =====
   Auftakt (#oben) und «Das Vintage Hotel» (#willkommen) bleiben, wie sie sind. Sonst: Schrift steigt kürzer und ruhiger, Karten und Bilder kommen von weiter
   unten mit etwas Tiefe herein (deckend, nie durchscheinend), Fotos gleiten am Scroll (Zeitachse des Browsers, main.js), die vier Haus-Karten im Fuss
   und die Zeit-Galerie fliegen herein. Stand davor: _sicherung/2026-10-13-vor-bewegung-wie-gbr/ */
main>section:not(#oben):not(#willkommen) [data-r]:where(:not([data-r="bild"],[data-r="schweb"],[data-r="rein"])),.fuss [data-r]:where(:not([data-r="rein"],[data-r="bild"])){transform:translateY(clamp(22px,2.6vw,40px));transition:opacity 1s var(--e2),transform 1.4s var(--e1);transition-delay:calc(var(--i,0)*90ms)}
main>section:not(#oben):not(#willkommen) :where([data-r="bild"],[data-r="schweb"],.zk[data-r]){opacity:1;transform:translateY(clamp(70px,9vw,140px)) scale(.95);transform-origin:50% 100%;transition:opacity .5s var(--e2),transform 1.45s var(--e3);transition-delay:calc(var(--i,0)*110ms)}
main>section:not(#oben):not(#willkommen) [data-r].da,.fuss [data-r].da{opacity:1;transform:none}
main>section:not(#oben):not(#willkommen) .lk__b[data-r="bild"],main>section:not(#oben):not(#willkommen) .zk.matt[data-r]{transform:none}
/* Hereinfliegen als eigener Auftritt (keyframes statt Übergang, damit das Anheben unter der Maus danach nicht träge wird) */
[data-r="rein"]{opacity:1;transform:none}
.fh[data-r="rein"]{transition:transform .9s var(--e1);transition-delay:0s}
[data-r="rein"].da{animation:ceRein 1.6s var(--e3) backwards;animation-delay:calc(var(--i,0)*130ms)}
[data-r="rein"].da .fh__bild img{animation:ceZoom 2.6s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i,0)*130ms)}
[data-r="rein"].da .fh__t{animation:ceText 1.5s var(--e1) backwards;animation-delay:calc(var(--i,0)*130ms + .35s)}
@keyframes ceRein{from{transform:translateY(clamp(80px,10vw,150px)) scale(.94)}}
@keyframes ceZoom{from{transform:scale(1.14)}}
@keyframes ceText{from{opacity:0;transform:translateY(16px)}}
/* Zeit-Galerie: die Karten fliegen nacheinander herein, das Foto setzt sich, Text und Pfeile folgen einen Atemzug später */
.zs .zs__k[data-r].da{animation:ceRein 1.7s var(--e3) backwards;animation-delay:calc(var(--i,0)*140ms)}
.zs .zs__k[data-r].da .zs__b img{animation:ceZoom 2.6s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i,0)*140ms)}
.zs:not(:has(>.zs__k.da))>.zs__text,.zs:not(:has(>.zs__k.da))>.zs__nav{opacity:0}
.zs:has(>.zs__k.da)>.zs__text{animation:ceText 1.5s var(--e1) .6s backwards}
.zs:has(>.zs__k.da)>.zs__nav{animation:ceText 1.2s var(--e1) .85s backwards}
/* Gleiten am Scroll: der Browser führt das Foto selbst mit (kein Nachlauf); der Rahmen ist die Zeitachse */
.gleit{will-change:auto}
@supports (animation-timeline: view()) and (overflow: clip){
  .gal,.lk{overflow:clip}   /* beschneiden wie bisher, aber ohne dass der Browser die Karte für die Scroll-Fläche hält (sonst hinge das Foto nicht am Scroll der Seite) */
  .za-gl{view-timeline:--gl block}
  img.gleit--za{animation:glZug linear both;animation-timeline:--gl;animation-range:cover 0% cover 100%}
}
@keyframes glZug{from{translate:0 var(--glw,0px)}to{translate:0 calc(-1 * var(--glw,0px))}}
@media (prefers-reduced-motion:reduce){[data-r="rein"].da,[data-r="rein"].da *,.zs .zs__k[data-r].da,.zs .zs__k[data-r].da *,.zs>.zs__text,.zs>.zs__nav{animation:none!important;opacity:1!important}img.gleit--za{animation:none}}

/* ===== FASSUNG 46 · Rahmen: Startbild «Menü am Boden» und Fuss «gerahmt» (Robert 14.10.2026: «12 hero, 9 footer» aus varianten-rahmen-3.html) =====
   Anlass: der Rahmen glich dem Grand Beau-Rivage zu sehr (Insel mit drei Knöpfen, Zeichen mittig über dem Namen, Fuss mit vier Spalten).
   Startseite ab 1081 px: oben nur das goldene CE mit Name mittig, links die Sprachen, rechts «Zimmer buchen»; die Menüpunkte laufen unten als Zeile
   über die ganze Breite. Die Insel erscheint erst, wenn der Auftakt aus dem Bild ist (html.kopf-oben, main.js). Darunter bleibt alles wie bisher.
   Fuss auf allen Seiten: doppelte Goldlinie als Rahmen, darin Zeichen, Satz, Kontakt, alle Links mittig und der Newsletter; darunter die vier Häuser.
   Stand davor: _sicherung/2026-10-14-vor-rahmen-12-9/ */
.hero__kopfzeichen,.hero__menue{display:none}
@media (min-width:1081px){
  .hero--boden .hero__ce,.hero--boden>.hero__zeile{display:none}
  .hero__kopfzeichen{display:flex;position:absolute;z-index:4;top:30px;left:50%;transform:translateX(-50%);flex-direction:column;align-items:center;gap:11px;text-decoration:none}
  .hero__kopfzeichen img{display:block;height:54px;width:auto;filter:drop-shadow(0 2px 10px rgba(4,10,24,.55))}
  .hero__kopfzeichen b{font-family:var(--serif);font-weight:700;font-size:1.02rem;line-height:1;letter-spacing:.22em;margin-right:-.22em;text-transform:uppercase;color:#fbf6ea;white-space:nowrap;
    text-shadow:0 1px 2px rgba(4,10,24,.9),0 2px 12px rgba(4,10,24,.8)}
  .hero__menue{display:flex;justify-content:space-between;position:absolute;z-index:3;left:var(--rand);right:var(--rand);bottom:0;padding:22px 0 26px;border-top:1px solid rgba(220,198,143,.55)}
  .hero__menue a{font-family:'Baskerville Fein',var(--serif);font-size:17px;line-height:1;color:#fff;text-decoration:none;white-space:nowrap;transition:color .3s;
    text-shadow:0 1px 2px rgba(4,10,24,.9),0 2px 14px rgba(4,10,24,.85)}
  .hero__menue a:hover{color:var(--gold)}
  .hero--boden .hero__in{padding-top:clamp(120px,15vh,150px);padding-bottom:clamp(118px,15vh,150px)}
  .nav,.eckknopf{transition:transform .8s var(--e2),opacity .5s ease,visibility .5s}
  html.kopf-oben .nav,html.kopf-oben .eckknopf{opacity:0;visibility:hidden;pointer-events:none}
  html.kopf-oben .sprache{top:47px;bottom:auto}
  html.kopf-oben .gast-knopf{bottom:96px}
}
@media (min-width:1081px) and (max-height:760px){
  .hero--boden{min-height:0;height:100svh}
  .hero__kopfzeichen{top:20px;gap:8px}.hero__kopfzeichen img{height:42px}
  .hero--boden .hero__in{padding-top:104px;padding-bottom:104px}
  .hero--boden .leiste{top:0}
  .hero__menue{padding:16px 0 18px}
  html.kopf-oben .sprache{top:34px}
}
@media (min-width:1081px) and (max-width:1280px){.hero__menue a{font-size:15px}}

.fuss--rahmen{text-align:center}
.fuss__rahmen{position:relative;max-width:1240px;margin:0 auto;padding:clamp(48px,5vw,72px) clamp(28px,4vw,64px) clamp(36px,4vw,52px);border:1px solid rgba(220,198,143,.7);border-radius:6px;outline:1px solid rgba(220,198,143,.3);outline-offset:-9px}
.fuss__siegel{display:block;height:60px;width:auto;margin:0 auto 22px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.fuss__satz{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.4vw,3.3rem);line-height:1.1;color:#fbf6ea}
.fuss__satz em{font-style:normal;color:var(--gold)}
.fuss__kz{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 20px;margin-top:20px;font-size:15px;color:rgba(251,246,234,.86)}
.fuss__kz i{width:1px;height:14px;background:currentColor;opacity:.35}
.fuss__kz a{color:inherit}
.fuss--rahmen .fuss__netz{justify-content:center;margin-top:20px}
.fuss--rahmen .fuss__oben{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:clamp(34px,4vw,50px) 0 0;padding:0;border:0}
.fuss--rahmen .fuss__sp h4{font-family:var(--serif);font-weight:400;font-size:1.12rem;letter-spacing:0;text-transform:none;color:var(--gold);margin:0 0 12px;padding:0;border:0}
.fuss--rahmen .fuss__sp h4{display:block}
.fuss--rahmen .fuss__sp h4::before,.fuss--rahmen .fuss__sp h4::after{display:none!important}
.fuss--rahmen .fuss__sp li{border:0;padding:0}
.fuss--rahmen .fl-link{display:block;justify-content:center;padding:5px 0;border:0;font-size:15px;color:rgba(251,246,234,.86)}
.fuss--rahmen .fl-link i{display:none}
.fuss--rahmen .fl-link:hover{color:var(--gold)}
.fuss--rahmen .fuss__news{margin:clamp(34px,4vw,48px) 0 0;text-align:left}
/* FASSUNG 46 (14.10.2026): «Hotels · Restaurants · More» als Galerie: jedes Haus im doppelten Goldrahmen wie der Fuss-Rahmen selbst,
   Foto hoch wie ein gerahmtes Bild, darunter die Tafel mit Namen in Baskerville, Ort gesperrt in Gold und rundem Goldknauf. Nur hier im Fuss. */
.fuss__haus{max-width:1240px;margin:clamp(60px,6.4vw,92px) auto 0;text-align:center}
.fuss__haus-t{display:flex;align-items:center;justify-content:center;gap:28px;font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.4vw,2.3rem);line-height:1.15;color:#fbf6ea}
.fuss__haus-t::before,.fuss__haus-t::after{content:"";flex:0 1 170px;height:1px;background:linear-gradient(90deg,rgba(220,198,143,0),rgba(220,198,143,.8))}
.fuss__haus-t::after{transform:scaleX(-1)}
.fuss__haus-u{margin:12px 0 0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1rem,1.15vw,1.12rem);letter-spacing:.01em;color:var(--gold)}
.fuss__vier{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,30px);margin-top:clamp(32px,3.6vw,50px);text-align:left}
.fv{position:relative;display:flex;flex-direction:column;padding:11px;border-radius:8px;color:#fbf6ea;text-decoration:none;
  background:linear-gradient(180deg,#16335f,#0d2449 48%,#091b3a);
  border:1px solid rgba(220,198,143,.66);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 0 #030b1a,0 46px 56px -32px rgba(0,0,0,.9);
  transition:transform .6s cubic-bezier(.34,1.3,.5,1),box-shadow .6s,border-color .6s}
.fv::before{content:"";position:absolute;inset:5px;border:1px solid rgba(220,198,143,.3);border-radius:4px;pointer-events:none;transition:border-color .6s}
.fv__b{display:block;overflow:hidden;aspect-ratio:3/4;border-radius:3px;background:#0b1f40;box-shadow:inset 0 0 0 1px rgba(0,0,0,.45)}
.fv__b img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e1)}
.fv__n{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;margin:11px 0 0;padding:17px 14px 17px 18px;border-radius:4px;
  background:linear-gradient(180deg,#05122a,#081a36 42%,#0a1d3c);box-shadow:inset 0 3px 7px -1px rgba(0,0,0,.65),inset 0 1px 0 rgba(0,0,0,.5),inset 0 0 0 1px rgba(220,198,143,.14),0 1px 0 rgba(255,255,255,.07)}
.fv__t{min-width:0}
.fv__t b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.18rem,1.3vw,1.4rem);line-height:1.18}
.fv__t small{display:block;margin-top:7px;font-family:var(--sans);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.fv__t em{display:block;margin-top:8px;font-style:normal;font-size:13px;line-height:1.4;color:rgba(251,246,234,.6)}
.fv__k{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--tinte);
  background:linear-gradient(180deg,#f8eac6,#ead09a 30%,#d6b679 60%,#aa874f);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 0 rgba(92,72,38,.35),0 3px 6px -2px rgba(0,0,0,.5);transition:transform .5s cubic-bezier(.34,1.3,.5,1)}
.fv__k svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6}
.fv:hover{transform:translateY(-8px);border-color:rgba(220,198,143,.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 0 #030b1a,0 62px 70px -34px rgba(0,0,0,.95),0 0 64px -20px rgba(220,198,143,.3)}
.fv:hover::before{border-color:rgba(220,198,143,.58)}
.fv:hover .fv__b img{transform:scale(1.05)}
.fv:hover .fv__k{transform:translate(2px,-2px)}
@media (max-width:1180px){.fuss__vier{grid-template-columns:1fr 1fr}.fv__b{aspect-ratio:4/5}}
@media (max-width:560px){.fuss__vier{grid-template-columns:1fr}.fv__b{aspect-ratio:3/2}.fuss__haus-t{font-size:1.5rem}.fuss__haus-t::before,.fuss__haus-t::after{display:none}}
.fuss--rahmen .fuss__unten{max-width:1240px;margin-left:auto;margin-right:auto;text-align:left}
@media (max-width:860px){
  .fuss--rahmen .fuss__oben{grid-template-columns:1fr 1fr;gap:26px 16px}
  .fuss__kz{flex-direction:column;gap:4px}.fuss__kz i{display:none}
}

/* FASSUNG 47 (14.10.2026, Robert wählt aus fuss-luxus.html Nr. 14 «Inschrift» und aus fuss-haeuser.html Nr. 8 «Haupthaus gross»):
   Kopf ohne Doppelrahmen, der Satz als Inschrift in Versalien zwischen doppelten Goldlinien, Spaltenköpfe gesperrt.
   Häuser: das Carlton gross links mit Namen in der Einkerbung (Text mittig darin), die drei Schwesterhäuser rechts untereinander. */
.fuss--inschrift .fuss__rahmen{border:0;outline:0;padding:0;max-width:1240px}
.fuss--inschrift .fuss__siegel{height:62px}
.fuss--inschrift .fuss__satz{position:relative;margin-top:6px;padding:clamp(20px,2.4vw,32px) 0;border-top:1px solid rgba(220,198,143,.75);border-bottom:1px solid rgba(220,198,143,.75);
  font-size:clamp(1.3rem,2.9vw,2.85rem);line-height:1.2;letter-spacing:.12em;text-transform:uppercase;text-wrap:balance;color:#e9dcb8;text-shadow:0 -1px 0 rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.14)}
.fuss--inschrift .fuss__satz::before,.fuss--inschrift .fuss__satz::after{content:"";position:absolute;left:0;right:0;height:1px;background:rgba(220,198,143,.35)}
.fuss--inschrift .fuss__satz::before{top:5px}.fuss--inschrift .fuss__satz::after{bottom:5px}
.fuss--inschrift .fuss__kz{margin-top:24px}
.fuss--inschrift .fuss__oben{margin-top:clamp(36px,4vw,54px)}
.fuss--inschrift .fuss__sp h4{font-size:.95rem;letter-spacing:.18em;text-transform:uppercase}
.fuss__gk{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(18px,2.4vw,36px);margin-top:clamp(32px,3.6vw,50px);text-align:left}
.fuss__gk a{color:#fbf6ea;text-decoration:none}
.fuss__gg{position:relative;display:block;min-height:clamp(420px,40vw,600px);overflow:hidden;border-radius:var(--r-l);box-shadow:0 0 0 1px rgba(220,198,143,.5)}
.fuss__gg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e1)}
.fuss__gg:hover img{transform:scale(1.03)}
.fuss__gg .kerbe{--f:#07162f;--e:clamp(18px,1.8vw,26px);color:#fbf6ea;text-align:center;padding:clamp(16px,1.6vw,22px) clamp(30px,3vw,44px) clamp(14px,1.4vw,20px)}
.fuss__gg .kerbe small{color:var(--gold);opacity:1;margin-bottom:8px}
.fuss__gk-rest{display:grid;grid-template-rows:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.fuss__gl{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) auto;gap:18px;align-items:center;padding:10px 18px 10px 10px;border-radius:12px;border:1px solid rgba(220,198,143,.45);background:linear-gradient(180deg,#132e59,#0b2148);transition:transform .7s var(--e1)}
.fuss__gl:hover{transform:translateY(-4px)}
.fuss__gl-b{display:block;height:100%;min-height:130px;overflow:hidden;border-radius:6px}
.fuss__gl-b img{display:block;width:100%;height:100%;object-fit:cover}
.fuss__gl-t b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.12rem,1.4vw,1.45rem);line-height:1.2}
.fuss__gl-t small{display:block;margin-top:6px;font-family:var(--sans);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.fuss__gl-t em{display:block;margin-top:6px;font-style:normal;font-size:13.5px;line-height:1.4;color:rgba(251,246,234,.62)}
.fuss__gl .fv__k{transition:transform .6s var(--e2)}
.fuss__gl:hover .fv__k{transform:translate(2px,-2px)}
@media (max-width:1100px){.fuss__gk{grid-template-columns:minmax(0,1fr)}.fuss__gg{min-height:0;aspect-ratio:4/3}}
@media (max-width:700px){.fuss__gg{aspect-ratio:4/5}.fuss__gl{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);padding-right:12px}.fuss__gl .fv__k{display:none}}
/* Die Häuser stehen ganz unten: ihr Steigen endet, sobald sie ganz im Bild sind, sonst bleibt die unterste Karte am Seitenende versetzt. */
@supports (animation-timeline:view()){html:not(#a):not(#b) .fuss .fuss__gk [data-r="rein"],html:not(#a):not(#b) .fuss .fuss__gk [data-r="rein"].da,html:not(#a):not(#b) .fuss .fuss__gk [data-r="rein"].da.ce-fertig{animation-range:entry 0% entry 100%,normal!important}}

/* FASSUNG 48 (14.10.2026, Robert wählt aus fuss-kopf.html Nr. 2 «Zeichen in der Linie» und aus fuss-mitte.html Nr. 20 «Band über die Breite»):
   Das Zeichen sitzt in der oberen Doppellinie, darunter die Inschrift mit Doppellinie unten. Spalten und Newsletter liegen zusammen
   in einem dunkleren Band von Rand zu Rand; der Newsletter ist keine eigene Karte mehr, sondern die untere Zeile des Bandes. */
.fuss__sl{display:flex;align-items:center;gap:26px}
.fuss__sl::before,.fuss__sl::after{content:"";flex:1;height:4px;border-top:1px solid rgba(220,198,143,.75);border-bottom:1px solid rgba(220,198,143,.35)}
.fuss--inschrift .fuss__sl .fuss__siegel{flex:none;height:66px;margin:0}
.fuss--inschrift .fuss__satz{margin-top:0;border-top:0}
.fuss--inschrift .fuss__satz::before{display:none}
.fuss__band{position:relative;isolation:isolate;margin-top:clamp(36px,4vw,54px);padding:clamp(36px,3.8vw,54px) 0 clamp(38px,4vw,56px)}
.fuss__band::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;background:rgba(2,8,20,.42);
  border-top:4px double rgba(220,198,143,.6);border-bottom:4px double rgba(220,198,143,.6)}
.fuss--inschrift .fuss__band .fuss__oben{margin-top:0}
.fuss--rahmen .fuss__band .fuss__news{margin:clamp(36px,4vw,54px) 0 0;padding:clamp(30px,3.2vw,44px) 0 0;border-radius:0;background:none;box-shadow:none;border-top:1px solid rgba(220,198,143,.3)}
.fuss__band .fuss__news h3{font-size:clamp(1.05rem,1.55vw,1.5rem);line-height:1.25;letter-spacing:.14em;text-transform:uppercase;color:#e9dcb8;text-shadow:0 -1px 0 rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.14)}
.fuss__band .fuss__news p{margin-top:12px;font-size:.95rem;color:rgba(251,246,234,.7)}
.fuss__band .fuss__feld{background:rgba(1,6,16,.65);box-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 0 0 1px rgba(220,198,143,.28)}
@media (max-width:860px){.fuss__band .fuss__news{text-align:center}.fuss__band .fuss__news p{margin-left:auto;margin-right:auto}}

/* FASSUNG 49 (15.10.2026, Robert wählt aus fuss-laeden.html Nr. 3 «Carlton breit»): das Carlton als breites Bild über die ganze Breite
   mit Namen in der Einkerbung, darunter die drei Schwesterhäuser in einer Reihe, Foto oben, Knauf rechts. Ersetzt .fuss__gk. */
.fuss__breit{margin-top:clamp(32px,3.6vw,50px);text-align:left}
.fuss__breit a{color:#fbf6ea;text-decoration:none}
.fuss__gg--breit{min-height:0;aspect-ratio:21/9}
.fuss__gg--breit img{object-position:50% 62%}
.fuss__drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(18px,2vw,28px)}
.fuss__ko{display:flex;flex-direction:column;padding:10px;border-radius:12px;border:1px solid rgba(220,198,143,.45);background:linear-gradient(180deg,#132e59,#0b2148);transition:transform .7s var(--e1)}
.fuss__ko:hover{transform:translateY(-4px)}
.fuss__ko-b{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:6px}
.fuss__ko-b img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e1)}
.fuss__ko:hover .fuss__ko-b img{transform:scale(1.04)}
.fuss__ko-t{flex:1;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 8px 8px 10px}
.fuss__ko-t b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.1rem,1.35vw,1.4rem);line-height:1.2}
.fuss__ko-t small{display:block;margin-top:6px;font-family:var(--sans);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.fuss__ko-t em{display:block;margin-top:6px;font-style:normal;font-size:13.5px;line-height:1.4;color:rgba(251,246,234,.62)}
.fuss__ko .fv__k{transition:transform .6s var(--e2)}.fuss__ko:hover .fv__k{transform:translate(2px,-2px)}
@supports (animation-timeline:view()){html:not(#a):not(#b) .fuss .fuss__breit [data-r="rein"],html:not(#a):not(#b) .fuss .fuss__breit [data-r="rein"].da,html:not(#a):not(#b) .fuss .fuss__breit [data-r="rein"].da.ce-fertig{animation-range:entry 0% entry 100%,normal!important}}
@media (max-width:1100px){.fuss__drei{grid-template-columns:repeat(2,minmax(0,1fr))}.fuss__gg--breit{aspect-ratio:16/9}}
@media (max-width:700px){.fuss__drei{grid-template-columns:minmax(0,1fr)}.fuss__gg--breit{aspect-ratio:4/3}}

/* FASSUNG 50 (15.10.2026, Robert: «unter den Häusern noch so ein Ende von der Seite, was dann nochmal so dunkelblau ist»):
   Abschluss als dunkles Band von Rand zu Rand mit Doppellinie oben, wie das Band der Spalten; darin das Zeichen und die Schlusszeile, mittig. */
.fuss--inschrift{padding-bottom:0}
.fuss__ende{position:relative;isolation:isolate;margin-top:clamp(64px,7vw,104px);padding:clamp(44px,4.6vw,64px) 0 clamp(34px,3.6vw,48px);text-align:center}
.fuss__ende::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;background:rgba(2,8,20,.62);border-top:4px double rgba(220,198,143,.6)}
.fuss__ende-z{display:block;height:46px;width:auto;margin:0 auto 26px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.fuss--rahmen .fuss__ende .fuss__unten{flex-direction:column;align-items:center;gap:12px;margin:0 auto;padding:0;border:0;text-align:center}

/* FASSUNG Startseite «fünf Kapitel, zwei Fenster» (Robert 15.10.2026): Kissen-Menü im Zimmer-Abschnitt,
   «Im Haus» als ein Abschnitt mit Auswahl-Leiste (matter runder Balken, flache Tasten, gewählt in Gold). */
.zk-unter{margin-top:clamp(70px,8vw,120px);text-align:center}
.zk-unter .lauf{max-width:40em;margin:16px auto 0}
.zk-kissen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,26px);margin-top:clamp(30px,3.4vw,50px)}
.zk-kissen figure{margin:0}
.zk-kissen__b{display:block;aspect-ratio:900/821;border-radius:22px;overflow:hidden;background:var(--creme)}
.zk-kissen__b img{width:100%;height:100%;object-fit:cover}   /* Robert 15.10.2026, 14:37: Kachel im Format der Kissen-Fotos (900 × 821), nichts mehr links und rechts abgeschnitten */
.zk-kissen figcaption{margin-top:14px;text-align:center}
.zk-kissen b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.05rem,1.3vw,1.3rem)}
.zk-kissen figcaption span{display:block;margin-top:6px;font-size:14px;line-height:1.45;opacity:.75}
#im-haus .trio .frei--kerbe .kerbe{--f:var(--nacht);background:var(--nacht);color:#fff}
.ih-leiste{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;width:max-content;max-width:100%;margin:clamp(30px,3.4vw,50px) auto clamp(40px,4.6vw,70px);padding:6px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(220,198,143,.22)}
.ih-leiste .tab{min-height:44px;padding:0 clamp(14px,1.5vw,22px);border-radius:999px;border:0;background:transparent;color:rgba(255,255,255,.82);font:500 15px/1 var(--sans);letter-spacing:.01em;cursor:pointer;transition:background .3s,color .3s}
.ih-leiste .tab:hover{color:#fff}
.ih-leiste .tab[aria-pressed="true"]{background:var(--gold);color:var(--tinte)}
.ih-felder .zwei{align-items:center}
.ih-felder [data-feld]:not([hidden]){animation:ihFeld .7s var(--e1) both}
@keyframes ihFeld{from{transform:translateY(24px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.ih-felder [data-feld]{animation:none!important}}
@media (max-width:860px){
  .zk-kissen{grid-template-columns:repeat(2,minmax(0,1fr))}.zk-kissen figure:last-child{grid-column:1/-1;max-width:50%;justify-self:center}
  .ih-leiste{width:auto;border-radius:26px}
  .ih-leiste .tab{min-height:40px;font-size:14px;padding:0 13px}
}

/* Auszeichnungen statt grosser Zahlen auf der Startseite (Robert 15.10.2026, Fassung 17 aus varianten-inhalt.html) */
.prunk--ausz .in{padding:0;border:0}.prunk--ausz .in::before,.prunk--ausz .in::after{content:none}
.ausz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(220,198,143,.35);border-bottom:1px solid rgba(220,198,143,.35)}
.ausz__z{padding:clamp(30px,3.4vw,50px) clamp(16px,2vw,30px);text-align:center}
.ausz__z+.ausz__z{border-left:1px solid rgba(220,198,143,.22)}
.ausz__z b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.4vw,2.4rem);line-height:1.1;color:var(--gold)}
.ausz__z p{margin:12px auto 0;max-width:24ch;color:rgba(255,255,255,.8)}
@media (max-width:860px){.ausz{grid-template-columns:repeat(2,minmax(0,1fr))}.ausz__z:nth-child(3){border-left:0}.ausz__z:nth-child(n+3){border-top:1px solid rgba(220,198,143,.22)}}
@media (max-width:560px){.ausz{grid-template-columns:minmax(0,1fr)}.ausz__z+.ausz__z{border-left:0;border-top:1px solid rgba(220,198,143,.22)}.ausz__z{padding:26px 8px}.ausz__z b{font-size:1.75rem;overflow-wrap:normal;word-break:normal}}
/* Weniger Weissraum zwischen den Abschnitten (Robert 15.10.2026: «noch ein bisschen zu viel Weissraum»), vorher clamp(84px,9vw,148px) */
:root{--abschnitt:clamp(60px,6.4vw,104px)}
@media (max-width:860px){:root{--abschnitt:clamp(52px,12vw,72px)}}
.fl--papier+.fl--papier,.fl--creme+.fl--creme,.fl--navy+.fl--navy,.fl--nacht+.fl--nacht{padding-top:calc(var(--abschnitt)*.55)}
.prunk--ausz{padding-top:var(--abschnitt);padding-bottom:var(--abschnitt)}
/* Robert 15.10.2026 (zwei Bildschirmfotos: Zimmerkarten → Kissen, Kissen → «Wofür kommen Sie?»): Lücken weiter schliessen */
.zk-unter{margin-top:clamp(40px,4.4vw,64px)}
.fl--papier:has(+ .fl--papier),.fl--creme:has(+ .fl--creme),.fl--navy:has(+ .fl--navy),.fl--nacht:has(+ .fl--nacht){padding-bottom:calc(var(--abschnitt)*.45)}
.fl--papier+.fl--papier,.fl--creme+.fl--creme,.fl--navy+.fl--navy,.fl--nacht+.fl--nacht{padding-top:calc(var(--abschnitt)*.45)}
/* «Im Haus» in drei Abschnitte geteilt (Robert 15.10.2026) */
.ih-teil+.ih-teil{margin-top:clamp(70px,8vw,120px)}
.ih-ab .zwei{align-items:center}
.fl--creme.ih-ab .trio .frei--kerbe .kerbe{--f:var(--creme);background:var(--creme)}
.fl--nacht.ih-ab .trio .frei--kerbe .kerbe{--f:var(--nacht);background:var(--nacht);color:#fff}
/* Packages: Kacheln viel grösser (Robert 15.10.2026), gut zwei sichtbar, der Rest per Pfeil */
#pakete .pk9{flex-basis:calc((100% - 1.4 * var(--gap)) / 2.4)}
#pakete .pk9 img{aspect-ratio:3/2}
#pakete .pk9__t b{font-size:clamp(1.6rem,2.4vw,2.4rem)}
@media (max-width:900px){#pakete .pk9{flex-basis:84%}}
/* Kissen als eigenes Band unter den Zimmern (Robert 15.10.2026) */
.zk-band .zk-unter{margin-top:0}
.zk-band{padding-top:calc(var(--abschnitt) + 10px)}
/* Ein Knopf, zwei feine Verweise (Robert 15.10.2026), Stil wie die Verweise der Zimmerseite */
.zk-wege{display:flex;flex-direction:column;align-items:center;gap:clamp(22px,2.4vw,30px);margin-top:clamp(40px,4.4vw,64px)}
.zk-wege p{display:flex;flex-wrap:wrap;justify-content:center;gap:14px clamp(22px,2.4vw,36px);margin:0}
.tlink{display:inline-flex;align-items:center;gap:9px;padding:0 0 5px;border-bottom:1px solid rgba(138,117,69,.55);font:500 12.5px/1.2 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--tinte);text-decoration:none;transition:color .35s var(--e2),border-color .35s var(--e2)}
.tlink i{display:grid;place-items:center;width:14px;height:14px}
.tlink svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.5;transition:transform .45s var(--e1)}
.tlink:hover{color:var(--taupe);border-color:var(--taupe)}.tlink:hover svg{transform:translate(2px,-2px)}

/* ===== Startseite 15.10.2026, Runde «Im Haus» neu (Robert) ===== */
/* Karten heben stärker ab */
.ih-ab .koord:not(.dn-reg) div{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 0 rgba(0,0,0,.3),0 30px 40px -20px rgba(0,0,0,.85);transform:translateY(-2px)}
.fl--creme.ih-ab .koord:not(.dn-reg) div,.fl--papier.ih-ab .koord:not(.dn-reg) div{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 0 rgba(138,117,69,.18),0 26px 34px -20px rgba(60,44,12,.5)}
/* Genuss: rechts ein grosses Bild mit Einkerbung, Text mittig daneben */
.ih-eins .frei{margin:0}.ih-eins .rahmen__k{display:block;aspect-ratio:5/4}
.ih-eins .rahmen__k img{width:100%;height:100%;object-fit:cover}
.fl--nacht .ih-eins .frei--kerbe .kerbe{--f:var(--nacht);background:var(--nacht);color:#fff}
/* Frühstück als Tagesband */
.fz-kopf{text-align:center;max-width:820px;margin:0 auto}.fz-kopf .lauf{margin:18px auto 0}
.fz-band{position:relative;display:flex;height:14px;margin:clamp(44px,5vw,70px) 0 clamp(50px,5.4vw,76px);border-radius:999px;overflow:visible;box-shadow:inset 0 0 0 1px rgba(220,198,143,.35)}
.fz-band i{display:block;height:100%}
.fz-band .a{background:linear-gradient(90deg,#f1dfa6,#dcc68f);border-radius:999px 0 0 999px}.fz-band .b{background:linear-gradient(90deg,#c9a95c,#a8873f)}.fz-band .c{background:linear-gradient(90deg,#3a4a6e,#1d2d52);border-radius:0 999px 999px 0}
.fz-band span{position:absolute;top:24px;transform:translateX(-50%);font-family:var(--serif);font-size:1rem;color:rgba(255,255,255,.7);white-space:nowrap}
.fz-band span:first-of-type{transform:none}.fz-band span:last-of-type{transform:translateX(-100%)}
.fz-drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,40px)}
.fz-b{display:block;aspect-ratio:4/5;border-radius:var(--r-l);overflow:hidden;box-shadow:0 2px 0 rgba(0,0,0,.3),0 40px 50px -26px rgba(0,0,0,.9)}
.fz-b img{width:100%;height:100%;object-fit:cover}
.fz-k b{display:block;margin-top:22px;font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.4vw,2.4rem);color:var(--gold);line-height:1.1}
.fz-k p{margin:10px 0 0;max-width:30ch;color:rgba(255,255,255,.82)}
/* Gewölbekeller als Bühne über die ganze Breite */
.kb{position:relative}
.kb-bild{width:100vw;margin-left:calc(50% - 50vw);height:clamp(480px,58vw,820px);overflow:hidden}
.kb-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.kb-tafel{position:relative;z-index:1;width:min(640px,100%);margin:calc(-1 * clamp(140px,14vw,240px)) 0 0;padding:clamp(34px,4vw,60px);background:var(--nacht);border-radius:var(--r-l);box-shadow:inset 0 0 0 1px rgba(220,198,143,.4),0 0 0 10px var(--nacht),0 0 0 11px rgba(220,198,143,.2),0 50px 70px -30px rgba(0,0,0,.9)}
.kb-tafel .lauf{margin-top:18px}
.kb-fakt{margin:26px 0 0;border-top:3px double rgba(220,198,143,.5)}
.kb-fakt div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid rgba(220,198,143,.22)}
.kb-fakt dt{font-family:var(--serif);color:#fff}.kb-fakt dd{margin:0;color:var(--gold);text-align:right}
.kb-abzug{position:absolute;right:clamp(0px,3vw,60px);bottom:clamp(-40px,-3vw,-20px);z-index:2;width:clamp(200px,22vw,320px);margin:0;padding:12px 12px 0;background:#fbf6ea;transform:rotate(3deg);box-shadow:0 40px 50px -24px rgba(0,0,0,.9)}
.kb-abzug img{width:100%;aspect-ratio:4/3;object-fit:cover}
.kb-abzug figcaption{padding:12px 2px 14px;font-family:var(--serif);font-style:italic;color:var(--taupe)}
/* Wellnessdörfli: Triptychon im Passepartout */
.wd-drei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,3.4vw,60px);align-items:center}
.wd-pp{margin:0;padding:clamp(10px,1vw,14px);background:#fbf6ea;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(138,117,69,.25),0 2px 0 rgba(138,117,69,.15),0 44px 54px -28px rgba(60,44,12,.55)}
.wd-pp img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px;outline:1px solid rgba(138,117,69,.45);outline-offset:-7px}
.wd-pp figcaption{padding:12px 4px 4px;text-align:center;font-family:var(--serif);font-style:italic;color:var(--taupe)}
.wd-pp--l{margin-top:clamp(40px,6vw,110px)}.wd-pp--r{margin-bottom:clamp(40px,6vw,110px)}
.wd-tafel{text-align:center}.wd-ce{display:block;height:44px;width:auto;margin:0 auto 24px}
.wd-tafel .lauf{margin:18px auto 0}
.wd-zeile{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 0;margin:28px 0 30px;padding:14px 0;border-top:3px double rgba(138,117,69,.45);border-bottom:3px double rgba(138,117,69,.45);font-family:var(--serif);font-size:1.08rem;color:var(--tinte)}
.wd-zeile i{width:5px;height:5px;transform:rotate(45deg);background:var(--taupe);margin:0 16px}
.wd-breit{margin:clamp(60px,7vw,110px) 0 0;position:relative}
.wd-breit img{display:block;width:100%;aspect-ratio:21/8;object-fit:cover;border-radius:var(--r-l);box-shadow:0 50px 60px -34px rgba(60,44,12,.6)}
.wd-breit figcaption{margin-top:14px;text-align:center;font-family:var(--serif);font-style:italic;color:var(--taupe)}
/* Top of Carlton */
.td-kopf{text-align:center;margin-bottom:clamp(36px,4vw,60px)}.td-kopf h3{margin:0;color:#fff}.td-kopf h3 em{color:var(--gold)}
.td-buehne{margin:0;padding:12px;border-radius:calc(var(--r-l) + 12px);box-shadow:inset 0 0 0 1px rgba(220,198,143,.55),0 60px 80px -40px rgba(0,0,0,.9)}
.td-buehne img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r-l)}
.td-unten{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,3vw,50px);align-items:start;margin-top:calc(-1 * clamp(60px,7vw,120px))}
.td-abzug{margin:clamp(70px,8vw,140px) 0 0;padding:12px 12px 0;background:#fbf6ea;box-shadow:0 40px 50px -24px rgba(0,0,0,.9)}
.td-abzug--l{transform:rotate(-3deg)}.td-abzug--r{transform:rotate(3deg)}
.td-abzug img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.td-abzug figcaption{padding:12px 2px 14px;font-family:var(--serif);font-style:italic;color:var(--taupe);text-align:center}
.td-karte{position:relative;z-index:1;text-align:center;background:#fbf6ea;color:var(--tinte);padding:clamp(34px,3.6vw,54px) clamp(24px,3vw,46px);border-radius:6px;box-shadow:inset 0 0 0 1px rgba(138,117,69,.35),inset 0 0 0 8px #fbf6ea,inset 0 0 0 9px rgba(138,117,69,.25),0 50px 70px -30px rgba(0,0,0,.9)}
.td-karte .lauf{color:rgba(12,21,38,.78)!important}
.td-k-ort{margin:0 0 16px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe)}
.td-k-zeile{display:flex;justify-content:center;align-items:center;margin:24px 0 10px;font-family:var(--serif);font-size:1.4rem;color:var(--tinte)}
.td-k-zeile i{width:5px;height:5px;transform:rotate(45deg);background:var(--taupe);margin:0 16px}
.td-k-fakt{margin:14px 0 26px;text-align:left;border-top:3px double rgba(138,117,69,.45)}
.td-k-fakt div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid rgba(138,117,69,.3)}
.td-k-fakt dt{font-family:var(--serif)}.td-k-fakt dd{margin:0;color:var(--taupe);text-align:right}
/* Packages: drei Kacheln ganz sichtbar */
#pakete .pk9{flex-basis:calc((100% - 2 * var(--gap)) / 3)}
#pakete .pk9__t b{font-size:clamp(1.4rem,2vw,2rem)}
@media (max-width:900px){#pakete .pk9{flex-basis:84%}}
@media (max-width:860px){
 .fz-drei,.wd-drei,.td-unten{grid-template-columns:minmax(0,1fr)}
 .wd-pp--l,.wd-pp--r{margin:0}.wd-tafel{order:-1}
 .td-unten{margin-top:24px}.td-abzug{margin:0;max-width:80%;justify-self:center}.td-karte{order:-1}
 .kb-tafel{margin-top:-60px}.kb-abzug{position:relative;right:auto;bottom:auto;margin:30px auto 0;display:block}
 .wd-breit img{aspect-ratio:3/2}.td-buehne img{aspect-ratio:4/3}
 .fz-b{aspect-ratio:4/3}
}
/* Bewegung wie beim Grand Beau-Rivage, ganze Website (Robert 15.10.2026) */
/* Hotelname rollt im Auftakt aus der Maske herein, etwas später als das Zeichen */
.hero__name .z{display:inline-block;overflow:hidden;vertical-align:top}
.hero__name .z>span{transition:transform 1.3s cubic-bezier(.22,1,.36,1) .55s}
/* Seitenkopf der Unterseiten: Inhalt bleibt beim Hinausscrollen zurück (skWeg) */
@supports (animation-timeline: view()){
  .sk2{view-timeline:--skweg block}
  .sk2 .sk2__t{animation:skWegCe linear both;animation-timeline:--skweg;animation-range:exit 0% exit 100%}
}
@keyframes skWegCe{from{translate:0 0}to{translate:0 calc(.28 * 92vh)}}
@media (prefers-reduced-motion:reduce){.sk2 .sk2__t{animation:none}}
/* Fotos in den neuen Abschnitten: Rahmen schneiden das Gleiten ab */
.fz-b,.kb-bild,.se-b-bild,.se-k-b,.ih-eins .rahmen__k{overflow:hidden}
.hero__name .z{padding:.45em .6em;margin:-.45em -.6em}
/* Packages (Robert 15.10.2026, 03:42): Kacheln länglicher und edler; bei einer Auswahl nur die passenden, von der Mitte aus */
#pakete .pk9-g .pk9.weg{display:none}
#pakete .pk9-g.gewaehlt{justify-content:center}
#pakete .pk9{border-radius:10px;box-shadow:0 2px 0 rgba(0,0,0,.25),0 44px 56px -28px rgba(0,0,0,.9)}
#pakete .pk9 img{aspect-ratio:4/5}
#pakete .pk9::after{content:'';position:absolute;inset:9px;border:1px solid rgba(138,117,69,.45);border-radius:5px;pointer-events:none}
#pakete .pk9__t{justify-items:center;text-align:center;padding:clamp(22px,2.2vw,32px) clamp(20px,2vw,30px) clamp(26px,2.6vw,36px)}
#pakete .pk9__t b{font-size:clamp(1.5rem,2vw,2rem)}
#pakete .pk9__d{display:flex;align-items:center;gap:12px}
#pakete .pk9__d::before,#pakete .pk9__d::after{content:'';width:26px;height:1px;background:rgba(138,117,69,.6)}
#pakete .pk9__k{max-width:32ch}
/* Packages (Robert 15.10.2026, 03:49): alle gleich gross, die mittlere tiefer; kleines Zeichen über dem Namen */
#pakete .pk9-g{align-items:stretch;padding-bottom:110px}
#pakete .pk9{display:flex;flex-direction:column;--y:0px!important}
#pakete .pk9:nth-child(3n+2){--y:56px!important}
#pakete .pk9 img{aspect-ratio:1/1;flex:none}
#pakete .pk9__t{flex:1;align-content:start}
#pakete .pk9__t::before{content:'';display:block;width:46px;height:30px;margin:0 auto 4px;background:url(../img/ce-gold-320.webp?v=b3b7a7bf) center/contain no-repeat}
@media (max-width:900px){#pakete .pk9:nth-child(3n+2){--y:0px!important}#pakete .pk9-g{padding-bottom:70px}}

/* ===== KELLER UEBERLAPPT 4 (Robert 15.10.2026, 13:40: varianten-keller-2.html Nr. 4, Reinschweben, Puls und Zoom wie überall: data-r="schweb") =====
   Drei Bilder übereinander gelegt: Damen gross hinten, Wein oben rechts, Kerzen vorn unten rechts. Robert 13:45 «rahmenlose Kacheln»: keine Kante, kein Schatten, die Bilder liegen direkt übereinander. */
.kb4{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(40px,6vw,104px);align-items:center;padding:clamp(10px,2vw,30px) 0}
.kb4-st{position:relative;height:clamp(560px,54vw,820px)}
.kb4-b{position:absolute;margin:0}
.kb4-b .rahmen__k{display:block;width:100%;height:100%;overflow:hidden;border-radius:14px}
.kb4-b img{width:100%;height:100%;object-fit:cover}
.kb4-b--a{left:0;top:0;width:66%;height:88%}
.kb4-b--c{right:1%;top:5%;width:28%;height:31%}
.kb4-b--b{right:0;bottom:0;width:48%;height:52%}
.kb4-t .lauf{margin-top:20px;max-width:46ch}
.kb4-f{margin:28px 0 0;max-width:460px;border-top:3px double rgba(220,198,143,.5)}
.kb4-f div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:13px 0;border-bottom:1px solid rgba(220,198,143,.22)}
.kb4-f dt{font-family:var(--serif);color:#fff}
.kb4-f dd{margin:0;font-family:var(--serif);font-style:italic;color:var(--gold);text-align:right}
@media (max-width:860px){
 .kb4{grid-template-columns:1fr;gap:40px}
 .kb4-st{height:min(118vw,620px)}
}

/* ===== FRÜHSTÜCK BILDWAND (Robert 15.10.2026, 13:35: Nr. 19 aus varianten-fruehstueck-5.html) =====
   Sechs Frühstücksbilder als Wand in vier Spalten und drei Reihen, in der Mitte eine Tafel (Navy mit Tapete, Goldkante) mit Titel und den drei Zeiten. */
.fzw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,clamp(150px,15vw,240px));gap:clamp(8px,.8vw,12px)}
.fzw-b{margin:0;min-width:0}.fzw-b .rahmen__k{height:100%;border-radius:var(--r-m)}
.fzw-b img{width:100%;height:100%;object-fit:cover}
.fzw .w0{grid-column:1;grid-row:1/3}.fzw .w1{grid-column:2;grid-row:1}.fzw .w2{grid-column:3/5;grid-row:1}
.fzw .w3{grid-column:4;grid-row:2/4}.fzw .w4{grid-column:1/3;grid-row:3}.fzw .w5{grid-column:3;grid-row:3}
.fzw-t{grid-column:2/4;grid-row:2;display:flex;flex-direction:column;justify-content:center;padding:clamp(18px,2vw,30px) clamp(20px,2.4vw,40px);border-radius:var(--r-m);
  background:#0b1f40 url(../img/tapete-navy.webp?v=ba8679c1) 50% 0/760px auto;box-shadow:inset 0 0 0 1px rgba(220,198,143,.55),0 30px 40px -24px rgba(0,0,0,.8);color:#fff}
.fzw-t .d3{margin:0;font-size:clamp(1.5rem,2.3vw,2.4rem);line-height:1.1;color:#fff}
.fzw-t ul{list-style:none;margin:clamp(12px,1.4vw,18px) 0 0;padding:0}
.fzw-t li{display:flex;align-items:baseline;gap:18px;padding:clamp(6px,.7vw,9px) 0;border-top:1px solid rgba(220,198,143,.3)}
.fzw-t li b{flex:none;min-width:7.2em;font-family:var(--serif);font-weight:400;font-size:clamp(1rem,1.2vw,1.2rem);color:var(--gold)}
.fzw-t li span{font-size:clamp(.92rem,1vw,1.02rem);color:rgba(255,255,255,.85)}
@media (max-width:860px){.fzw{grid-template-columns:1fr 1fr;grid-template-rows:none}
 .fzw .fzw-b{grid-column:auto;grid-row:auto;height:42vw}.fzw .w2,.fzw .w4{grid-column:1/3}
 .fzw-t{grid-column:1/3;grid-row:1}.fzw-t li b{min-width:6.6em}.fzw .w4{order:1}}

/* ===== FRÜHSTÜCK BILDWAND, TAFEL EDLER (Robert 15.10.2026, 14:34, Bildschirmfoto: «kannst du die karte in der mitte noch edler machen?») =====
   Nur die Tafel: doppelte Goldlinie innen, CE-Zeichen in Gold, alles mittig, die drei Zeiten nebeneinander mit feinen Goldlinien dazwischen. */
.fzw-t{position:relative;align-items:center;text-align:center;padding:clamp(14px,1.6vw,24px) clamp(18px,2.2vw,36px);
  background:linear-gradient(180deg,rgba(30,69,131,.5),rgba(6,20,46,.85)),#0b1f40 url(../img/tapete-navy.webp?v=ba8679c1) 50% 0/760px auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(220,198,143,.7),0 4px 0 #030b1c,0 40px 50px -30px #000}
.fzw-t::before{content:'';position:absolute;inset:7px;border:1px solid rgba(220,198,143,.28);border-radius:calc(var(--r-m) - 5px);pointer-events:none}
.fzw-t .d3::before{content:'';display:block;width:clamp(40px,3.4vw,54px);height:clamp(26px,2.2vw,35px);margin:0 auto clamp(6px,.7vw,10px);background:url(../img/ce-gold-320.webp?v=b3b7a7bf) center/contain no-repeat}
.fzw-t .d3{font-size:clamp(1.4rem,2vw,2.2rem)}
.fzw-t ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin-top:clamp(10px,1.2vw,18px);padding-top:clamp(10px,1.2vw,16px);
  border-top:1px solid rgba(220,198,143,.55);box-shadow:0 -4px 0 -3px rgba(220,198,143,.22)}
.fzw-t li{flex-direction:column;align-items:center;gap:4px;padding:0 clamp(8px,1vw,16px);border-top:0}
.fzw-t li + li{border-left:1px solid rgba(220,198,143,.3)}
.fzw-t li b{min-width:0;font-size:clamp(1.05rem,1.4vw,1.45rem);white-space:nowrap}
.fzw-t li span{font-size:clamp(.82rem,.9vw,.95rem);color:rgba(255,255,255,.78)}
@media (max-width:860px){.fzw-t{padding:22px 16px}.fzw-t ul{grid-template-columns:minmax(0,1fr)}.fzw-t li{padding:10px 0}
 .fzw-t li + li{border-left:0;border-top:1px solid rgba(220,198,143,.25)}}

/* ===== GENUSS FEINSCHLIFF (Robert 15.10.2026, 14:35/14:36, zwei Bildschirmfotos): grosse Bildkachel hebt sich stärker vom Grund ab,
   «Vielfältiger Genuss.» grösser, Knopf mittig in seiner Spalte. Nur der erste Teil von #im-haus. */
#im-haus .ih-teil:first-child .t .d3{font-size:clamp(2.6rem,4.6vw,4.6rem);line-height:1.04}
#im-haus .ih-teil:first-child .t .kn-reihe{justify-content:center}
#im-haus .ih-teil:first-child .trio .rahmen__k{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 0 rgba(0,0,0,.45),0 0 0 1px rgba(220,198,143,.18),0 34px 50px -18px rgba(0,0,0,.95),0 80px 110px -50px rgba(0,0,0,.9)}

/* ===== WELLNESS BEWEGUNG (Robert 15.10.2026, 14:40: «den Bildern und den Text bitte auch: Reinkriegen, Pulsieren, Federn, Zoomen») =====
   Fotos stecken jetzt in .rahmen__k (Zoom im Rahmen), die feine Goldlinie liegt auf dem Rahmen statt auf dem Bild, damit sie beim Zoomen stehen bleibt. */
.wd-sechs .rahmen__k{aspect-ratio:3/2;border-radius:3px;background:#efe6d2}
.wd-sechs .rahmen__k::after{content:'';position:absolute;inset:7px;border:1px solid rgba(138,117,69,.45);border-radius:2px;pointer-events:none;z-index:2}
.wd-sechs .rahmen__k img{aspect-ratio:auto;height:100%;border-radius:0;outline:0}
@media (max-width:860px){.wd-sechs .rahmen__k::after{inset:5px}}

/* ===== SCHWEBEN AM SCROLLEN: Keller und Frühstück (Robert 15.10.2026, 14:41: «ich scrolle runter und dann kommen die erst hoch … so richtig luxuriös und elegant
   reingeschwebt, sobald ich durch den Bereich scrolle»). Wie die Zimmerseite (probe_zimmer.py, Robert 23:20): Weg nach oben, Grösse und Foto-Zoom hängen ganz am Scrollen,
   vom ersten Pixel unten im Fenster bis gut ein Drittel im Bild, weich auslaufend über Zwischenschritte. Nichts läuft nach der Uhr nach. Ohne Zeitachse: stehen sie still. ===== */
@keyframes kzZug{0%{translate:0 clamp(90px,10vw,160px);scale:.94}35%{translate:0 clamp(40px,4.4vw,70px);scale:.965}65%{translate:0 clamp(12px,1.3vw,20px);scale:.988}100%{translate:0 0;scale:1}}
@keyframes kzBild{0%{transform:scale(1.12)}40%{transform:scale(1.05)}70%{transform:scale(1.015)}100%{transform:none}}
@supports (animation-timeline:view()) and (view-timeline-name:--kz){
 :is(.kb4-b,.fzw-b){view-timeline-name:--kz;animation:kzZug linear both;animation-timeline:--kz;animation-range:entry 0% cover 45%}
 :is(.kb4-b,.fzw-b) img{animation:kzBild linear both;animation-timeline:--kz;animation-range:entry 0% cover 45%}
}
@media (prefers-reduced-motion:reduce){:is(.kb4-b,.fzw-b),:is(.kb4-b,.fzw-b) img{animation:none;translate:none;scale:none;transform:none}}

/* ===== WEITERE ZIMMER 4 «Gross und zwei» (15.10.2026): Zimmerseiten, Abschnitt #weitere ===== */
.zreihe--wz4{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-rows:auto auto;gap:clamp(18px,2.4vw,36px)}
.zreihe--wz4 .wz4-a{grid-row:1/3;display:flex;flex-direction:column}
.zreihe--wz4 .wz4-a>a{flex:1;display:flex;min-height:0}
.zreihe--wz4 .wz4-a .rahmen__k{flex:1;aspect-ratio:auto;min-height:0}
.zreihe--wz4 .frei:not(.wz4-a) .rahmen__k{aspect-ratio:16/10}
.zreihe--wz4 .frei .rahmen__k{border-radius:22px}
.zreihe--wz4 .frei figcaption{text-align:left;padding-top:clamp(12px,1.3vw,18px);font-size:clamp(1.25rem,1.8vw,1.9rem)}
.zreihe--wz4 .frei figcaption a{color:inherit}
@media (max-width:860px){.zreihe--wz4{grid-template-columns:minmax(0,1fr)}.zreihe--wz4 .wz4-a{grid-row:auto}.zreihe--wz4 .wz4-a .rahmen__k{aspect-ratio:4/3}.zreihe--wz4 .frei .rahmen__k{border-radius:18px}}

/* ===== SCHWEBEN ÜBERALL (Robert 15.10.2026: «alle Seiten so»): schweben.js setzt .ce-sw an Rahmen, in denen ein Foto allein sitzt; dort zoomt und gleitet es wie in .rahmen__k ===== */
.ce-sw{overflow:hidden;isolation:isolate}

/* ===== GÄSTE EMPFANGEN SEIT 1898 (15.10.2026): Startseite zwischen «Das Vintage Hotel» und dem Fenster «Was bedeutet Vintage?», zwei alte Abzüge im hellen Passepartout ===== */
#seit .sx-kopf{max-width:820px;margin:0 auto;text-align:center}
#seit .sx-kopf .gross{max-width:32em;margin:clamp(20px,2.4vw,32px) auto 0;text-wrap:balance}
#seit .sx-paar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,60px);max-width:1360px;margin:clamp(40px,4.6vw,72px) auto 0;align-items:start}
#seit .sx-abzug{margin:0}
#seit .sx-abzug:nth-child(2){margin-top:clamp(28px,4vw,64px)}
/* rahmenlose 3D-Kacheln (Robert 15.10.2026): flach, nicht gedreht («nicht nach links und rechts»), Tiefe über Schatten und Lichtkante */
#seit .sx-pp{display:block;position:relative;border-radius:18px;box-shadow:0 2px 0 rgba(255,255,255,.55) inset,0 46px 60px -30px rgba(40,30,10,.55),0 14px 24px -12px rgba(40,30,10,.32),0 2px 4px rgba(40,30,10,.12)}
#seit .sx-pp img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:18px}
#seit .sx-pp::after{content:'';position:absolute;inset:0;border-radius:18px;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.18)}
#seit .sx-abzug figcaption{margin-top:18px;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(1.35rem,1.9vw,1.85rem);color:var(--tinte)}
@media (max-width:700px){#seit .sx-paar{grid-template-columns:1fr}#seit .sx-abzug:nth-child(2){margin-top:0}}

/* ===== DACH + HOCHZEIT (15.10.2026): Startseite #dach, unter «Top of Carlton» der Teil «Ja, ich will!», Bilder links frei, Text rechts ===== */
.tf{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(36px,5vw,96px);align-items:center;margin-top:clamp(90px,10vw,170px)}
.tf-b{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:clamp(14px,1.6vw,24px)}
.tf-b figure{margin:0}
.tf-b img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--r-l)}
.tf-gross{grid-row:1/3}.tf-gross img{aspect-ratio:5/6}
.tf-klein,.tf-quer{min-height:0}.tf-klein img,.tf-quer img{aspect-ratio:auto}
.tf-t h3{margin:0;color:#fff}.tf-t h3 em{color:var(--gold)}
.tf-t .lauf{margin-top:clamp(22px,2.4vw,32px);color:rgba(255,255,255,.82)}
.tf-nach{margin:clamp(22px,2.4vw,30px) 0 0;padding-top:clamp(18px,2vw,24px);border-top:1px solid rgba(220,198,143,.4);font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1.5vw,1.45rem);color:var(--gold)}
.tf-t .kn-reihe{margin-top:clamp(26px,2.8vw,38px)}
@media (max-width:860px){.tf{grid-template-columns:minmax(0,1fr)}.tf-b{grid-template-columns:1fr 1fr}.tf-b{grid-template-rows:auto auto}.tf-gross{grid-row:auto;grid-column:1/-1}.tf-gross img{aspect-ratio:4/3}.tf-klein img,.tf-quer img{aspect-ratio:1}}

/* ===== OHNE RAHMENLINIEN (Robert 15.10.2026, «überall»): keine feine Goldlinie mehr um Bildkacheln, nur der Schatten bleibt.
   Gewollte Rahmen bleiben: Top of Carlton (.td-buehne), Hunde-Porträt, Gastgeber-Kreis, Grundriss, Auswahl-Knöpfe. ===== */
.zk{padding:0!important;background:none!important;box-shadow:none!important}
.zk .zk__b{border-radius:22px;box-shadow:0 34px 46px -30px rgba(74,58,26,.75)!important}
.zmos__b,figure.zmos__b,.zmk,.rahmen,.fl .rahmen,.rahmen--m,.rahmen__k.za-gl{box-shadow:0 34px 42px -28px rgba(40,30,10,.62)!important}
.gk__b{box-shadow:none}
.jt-b{box-shadow:0 34px 40px -30px rgba(0,0,0,.9)!important}
.chronik__k{box-shadow:0 28px 34px -14px rgba(74,58,26,.55),0 64px 60px -40px rgba(74,58,26,.6)!important}
.team__b{box-shadow:0 22px 30px -18px rgba(0,0,0,.7)!important}

/* ===== GRUNDRISS OHNE ZOOM (15.10.2026): der Zoom/Gleit-Effekt der Fotos vergrösserte den Grundriss, die Raum-Markierungen sassen daneben ===== */
.gplan__k img,.gplan__k img.gleit{transform:none!important;animation:none!important;transition:none!important}

/* ===== WELLNESS «NACH DEM WANDERTAG» (15.10.2026): Text als geschlossener Block oben, die Abzüge füllen unten bis zur Kante des Blatts.
   Robert: zu viel Leerraum zwischen Überschrift, Text und Knopf, aber nicht einfach zusammenziehen (sonst Leerraum darüber). ===== */
@media (min-width:861px){
  #pflege .sb-wander>.t{justify-content:flex-start}
  #pflege .sb-wander>.t>.d2{order:1;margin-top:clamp(10px,1.4vw,24px)}
  #pflege .sb-wander>.t>.lauf{order:2}
  #pflege .sb-wander>.t>.kn-reihe{order:3;justify-content:flex-start;margin-bottom:0}
  #pflege .sb-wander .pstapel--oben{order:4;margin:auto 0 0;padding-top:clamp(40px,4.4vw,70px)}
  #pflege .sb-wander .pstapel figure{flex:0 0 44%;margin-right:-14%}#pflege .sb-wander .pstapel figure:last-child{margin-right:0}
  #pflege .sb-wander .pstapel figure:nth-child(2){margin-top:clamp(40px,5vw,80px);position:relative;z-index:2}
}

/* ===== LIEFERANTEN ALS KARTEN (15.10.2026, Restaurant): Band dunkler Karten zum Blättern, Bild links, Text rechts, wie bei Salt & Silver ===== */
.lfk-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:clamp(20px,4vw,70px);align-items:end}
.lfk-kopf .d2{margin:0;color:#fff}.lfk-kopf .d2 em{color:var(--gold)}.lfk-kopf .lauf{color:rgba(255,255,255,.8);margin:0}
.lfk-g{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,1040px);column-gap:clamp(16px,2vw,28px);margin-top:clamp(36px,4vw,60px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:30px}
.lfk-g::-webkit-scrollbar{display:none}
.lfk{scroll-snap-align:start;display:grid;grid-template-columns:1.15fr 1fr;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#0f2a55,#0a1f42);box-shadow:0 30px 44px -30px rgba(0,0,0,.9)}
.lfk__b{min-height:clamp(300px,30vw,440px)}.lfk__b img{display:block;width:100%;height:100%;object-fit:cover}
.lfk__t{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(26px,3vw,46px);color:#fff}
.lfk__nr{font:500 11px var(--mono,var(--sans));letter-spacing:.2em;color:var(--gold)}
.lfk__t h3{margin:0;font:400 clamp(1.6rem,2.4vw,2.5rem)/1.1 var(--serif);color:#fff}
.lfk__ort{display:block;margin-top:10px;font-family:var(--serif);font-style:italic;color:var(--gold);font-size:clamp(1rem,1.2vw,1.15rem)}
.lfk__t p{margin:18px 0 0;font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.65;color:rgba(255,255,255,.82)}
@media (max-width:860px){.lfk-kopf{grid-template-columns:1fr}.lfk-g{grid-auto-columns:86%}.lfk{grid-template-columns:1fr}.lfk__b{min-height:0;aspect-ratio:4/3}}
.lfk__b{position:relative;height:clamp(320px,30vw,440px);min-height:0}.lfk__b img{position:absolute;inset:0}
.lfk__t{justify-content:flex-start;gap:0}.lfk__t h3{margin-top:auto}
@media (max-width:860px){.lfk__b{height:auto;aspect-ratio:4/3}.lfk__t h3{margin-top:22px}}

/* ===== LEISTE OBEN «NOTENZEILE» (Robert 16.10.2026, Fassung 8 aus varianten-leiste-oben.html, ersetzt das Dock unten):
   am Rechner ein nachtblaues Band über die ganze Breite, eine Goldlinie läuft durch, das Zeichen sitzt genau in der Mitte auf der Linie,
   je drei Bereiche links und rechts stehen auf der Linie. Rezeption, Sprache und Buchen klein rechts. Beim Runterscrollen geht das Band
   nach oben weg und ist auch oben auf der Seite nicht da; es kommt nur beim Hochscrollen (.da, main.js, Robert 16.10.2026). Startseite oben: nur das Zeichen.
   Stand davor: _sicherung/vor-leiste-oben-1016/ ===== */
.nav__trenn,.nav__chat,.nav__buchen,.nav .sprache{display:none}
.nav__h{display:contents}
@media (min-width:1061px){
  .nav{top:0;bottom:auto;padding:0;height:84px;background:var(--marine,#0b1f40);box-shadow:0 14px 30px -22px rgba(0,0,0,.8);pointer-events:auto}
  .nav,.nav.weg{transform:translateY(-110%)}
  .nav.da{transform:none}
  .nav::before,.nav::after{content:"";position:absolute;top:56px;height:1px;background:rgba(220,198,143,.85);pointer-events:none}
  .nav::before{left:0;right:calc(50% + 54px)}
  .nav::after{right:0;left:calc(50% + 54px)}
  .nav__insel{position:static;width:auto;max-width:none;height:84px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;display:block}
  .nav__logo{position:absolute;left:50%;top:56px;transform:translate(-50%,-50%);display:block;line-height:0}
  .nav__logo b{display:none}
  .nav__logo svg{height:38px;width:auto}
  .nav__links{position:absolute;left:0;right:0;top:0;height:56px;display:grid;grid-template-columns:1fr 108px 1fr;gap:0;pointer-events:none}
  .nav__h{display:flex;align-items:flex-end;gap:clamp(20px,2.1vw,32px);padding-bottom:12px;pointer-events:auto}
  .nav__h:first-child{grid-column:1;justify-content:flex-end;padding-right:12px}
  .nav__h:last-child{grid-column:3;justify-content:flex-start;padding-left:12px}
  .nav__links a{font-family:var(--serif);font-weight:400;font-size:16.5px;line-height:1;letter-spacing:0;text-transform:none;color:#fff;white-space:nowrap;padding:0}
  .nav__links a::after{bottom:-6px}
  .nav__links a[aria-current]{color:var(--gold)}
  .nav__links a:hover{color:var(--gold)}
  .nav__links a .rl i{transform:none!important}
  .nav__rechts{position:absolute;right:max(24px,calc(var(--rand)*.6));top:0;height:56px;padding-bottom:12px;display:flex;align-items:flex-end;gap:20px}
  .nav__chat{display:grid;place-items:center;width:26px;height:22px;padding:0;color:rgba(255,255,255,.8);background:none;border:0;cursor:pointer}
  .nav__chat svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
  .nav__chat:hover{color:var(--gold)}
  .nav .sprache{display:flex;position:static;height:auto;padding:0;background:none;box-shadow:none;border:0;transform:none!important;font-size:11px}
  .nav .sprache a{padding:2px 1px}
  .nav__buchen{display:block;padding:0 0 3px;border:0;border-bottom:1px solid var(--gold);background:none;cursor:pointer;color:var(--gold);font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
  .nav__buchen:hover{color:#fff}
  body>.sprache,.eckknopf{display:none!important}
  /* Rezeption im Chat unten rechts (Robert 16.10.2026): kommt und geht mit der Leiste oben, offen bleibt sie immer stehen */
  body .gast-knopf{bottom:30px;transform:translateY(calc(100% + 60px));pointer-events:none;transition:transform .8s var(--e2)}
  body .nav.da~.gast-knopf,html.gast-offen body .gast-knopf{transform:none;pointer-events:auto}
  body .nav.da~.gast-knopf:hover{transform:translateY(-2px)}
}
@media (min-width:1061px) and (max-width:1300px){
  .nav__links a{font-size:15px}
  .nav__h{gap:18px}
  .nav__rechts{gap:14px}.nav__chat{display:none}
}

/* ===== RECHNER: rechte Kachel so hoch wie die linke, unten das Foto des passenden Saals (15.10.2026) ===== */
@media (min-width:861px){
  .dn-rechner{align-items:stretch}
  .dn-rechner__ergebnis{display:flex;flex-direction:column}
  .dn-rechner__bild{position:relative;flex:1 1 auto;min-height:200px;margin:28px 0 0;border-radius:calc(var(--r-xl) - 14px);overflow:hidden;background:#0a1e42}
}
.dn-rechner__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.dn-rechner__bild img.an{opacity:1}
@media (max-width:860px){.dn-rechner__bild{position:relative;aspect-ratio:3/2;margin:22px 0 0;border-radius:16px;overflow:hidden}}

/* ===== HUNDESPEISEKARTE FREIGESTELLT (Robert 15.10.2026: «hier bitte freigestellte Bilder»): wie die Speisekarte auf Essen & Trinken,
   keine Bögen mehr, Foto quadratisch frei mit runden Ecken und weichem Schatten ===== */
#hundekarte .gk__b{aspect-ratio:1/1;border-radius:var(--r-l);box-shadow:0 34px 46px -28px rgba(0,0,0,.9),0 8px 16px -10px rgba(0,0,0,.5)!important}

/* ===== SEITENKOPF OHNE EINFEDERN (Robert 15.10.2026): das Foto im Kopf der Unterseiten steht beim Laden sofort an seinem Platz,
   kein Hochschweben/Pulsieren der Fläche (dahinter blitzte Blau). Bewegt wird nur das Bild im Rahmen (skein), wie beim Rivage. ===== */
.sk2__b,.sk2__b[data-r],.sk2__b[data-r].da{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
/* Nachtrag: auch das Bild selbst ruht (Robert: «Bild wackelt und krizzelt kurz» auf Angebote und Das Haus), es ist beim Öffnen einfach da */
.sk2__b img{animation:none!important;transform:none!important;transition:none!important}

/* ===== LIEFERANTEN ALS VERZEICHNIS (Robert 15.10.2026, ersetzt die Karten zum Blättern): links die Liste wie im gedruckten Prospekt,
   Nummer in Gold, Name, Ort kursiv, Satz, Haarlinien dazwischen; rechts ein grosses Foto, das zum gewählten Lieferanten überblendet ===== */
.lv-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,70px);align-items:end}
.lv-kopf .d2{margin:0}.lv-kopf .lauf{margin:0}
.lv-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(30px,4.6vw,90px);margin-top:clamp(40px,4.6vw,70px);align-items:stretch}
.lv-liste{list-style:none;margin:0;padding:0;border-top:1px solid rgba(138,117,69,.45)}
.lv{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:0 14px;padding:clamp(16px,1.6vw,22px) 0;border-bottom:1px solid rgba(138,117,69,.3);cursor:default;outline:0}
.lv__nr{font:400 clamp(1.4rem,1.9vw,1.9rem)/1 var(--serif);color:rgba(138,117,69,.55);padding-top:.18em;transition:color .35s}
.lv h3{margin:0;font:400 clamp(1.3rem,1.8vw,1.85rem)/1.15 var(--serif);color:var(--tinte);transition:color .35s}
.lv__ort{display:block;margin-top:4px;font-family:var(--serif);font-style:italic;color:var(--taupe);font-size:clamp(.98rem,1.1vw,1.08rem)}
.lv__t p{margin:0;max-height:0;overflow:hidden;opacity:0;font-size:clamp(.98rem,1.05vw,1.06rem);line-height:1.6;color:rgba(12,21,38,.78);transition:max-height .5s var(--e2,ease),opacity .4s,margin .4s}
.lv.an .lv__t p{max-height:8em;opacity:1;margin-top:10px}
.lv.an .lv__nr{color:#a98a45}
.lv__mini{display:none}
.lv-b{position:relative;min-height:420px;border-radius:var(--r-l,22px);overflow:hidden;background:#e7dcc6;box-shadow:0 40px 56px -34px rgba(40,30,10,.6),0 10px 20px -12px rgba(40,30,10,.35)}
.lv-b__i{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.lv-b__i.an{opacity:1}
.lv-b__i img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:860px){
  .lv-kopf,.lv-wrap{grid-template-columns:1fr}
  .lv-b{display:none}
  .lv__t p{max-height:none;opacity:1;margin-top:10px}
  .lv__mini{display:block;grid-column:2;margin-top:14px;border-radius:16px;overflow:hidden;aspect-ratio:3/2;box-shadow:0 20px 30px -20px rgba(40,30,10,.6)}
  .lv__mini img{display:block;width:100%;height:100%;object-fit:cover}
}

/* ===== SAAL-BÜHNE OHNE EINFEDERN (15.10.2026, Robert: «sieht total falsch aus, wenn die Bilder laden»): das Bild im Rahmen schwebte
   verkleinert herein, dahinter lagen Rahmen und Grund frei. Jetzt steht es fest im Rahmen; der Wechsel zwischen den Sälen bleibt. ===== */
.sbuehne__bild[data-r],.sbuehne__bild[data-r].da{transform:none!important;animation:none!important}

/* Hundespeisekarte: Preise mit Franken (Robert 15.10.2026: «da fehlen die Schweizer Franken») */
#hundekarte .gk__p span::before{content:'CHF\00a0';font-size:.62em;letter-spacing:.12em;vertical-align:.18em;margin-right:.15em;opacity:.85}

/* ===== FASSUNG 45 · Auftakt «18» (Robert 15.10.2026: «18 mit dem Hintergrundbild von 17 und dieser Leiste», aus varianten-auftakt-5.html) =====
   Foto hero-w-* (hero_warm.py: warm, heller, Dunkel nur hinter Name und am Rand). Name gross in der Titelschrift, darunter die Ortszeile, kein Satz.
   Buchung ohne Platte: Anreise, Abreise und Gäste zwischen feinen Goldlinien, «Verfügbarkeit prüfen» mit rundem Goldrand-Pfeil.
   Datum und Gäste laufen über die Hausauswahl (auswahl.js), das Datum mit data-tagmonat als «15. Okt.», ohne Winkel. Stand davor: _sicherung/2026-10-15-vor-auftakt-18/ */
html body .hero--f .hero__name{font-size:clamp(1.7rem,5vw,5.4rem);letter-spacing:.2em;margin-right:-.2em}
html body .hero--f .hero__ort{margin-top:clamp(14px,1.6vw,24px)}
html body .hero--f .leiste{display:grid;grid-template-columns:1fr 1fr 1.25fr 2.2fr;align-items:stretch;max-width:none;width:auto;margin:0;padding:0;top:auto;border:0;border-radius:0;
  border-top:1px solid rgba(220,198,143,.6);background:none;box-shadow:none}
html body .hero--f .leiste label{position:relative;display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,.7vw,10px);padding:clamp(16px,1.9vw,28px) 12px clamp(14px,1.6vw,24px) clamp(20px,4vw,64px);
  border:0;border-right:1px solid rgba(220,198,143,.32);cursor:pointer}
html body .hero--f .leiste label:first-child{padding-left:clamp(20px,4vw,64px)}
html body .hero--f .leiste label span{font-family:'Montserrat CE',var(--sans);font-weight:500;font-size:clamp(10.5px,.84vw,13px);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);text-shadow:0 1px 8px rgba(4,10,24,.8)}
html body .hero--f .leiste input,html body .hero--f .leiste select{-webkit-appearance:none;appearance:none;background:none;border:0;padding:0;margin:0;font-family:'Baskerville Fein',var(--serif);font-weight:400;font-size:clamp(1.3rem,1.95vw,2rem);line-height:1.1;
  color:#fbf6ea;text-shadow:0 1px 12px rgba(4,10,24,.85);cursor:pointer;width:100%}
html body .hero--f .leiste select option{color:#0c1526}
html body .hero--f .leiste .cw-knopf{text-shadow:0 1px 12px rgba(4,10,24,.85);padding:0;min-height:0;background:none;border:0;box-shadow:none}
html body .hero--f .leiste .cw-winkel{display:none}
html body .hero--f .leiste .kn{justify-self:end;align-self:center;height:auto;margin:0;padding:0 0 0 24px;gap:clamp(16px,1.8vw,28px);background:none;box-shadow:none;border:0;
  font-family:'Montserrat CE',var(--sans);font-weight:500;font-size:clamp(11px,1vw,15px);letter-spacing:.26em;color:#fbf6ea;text-shadow:0 1px 10px rgba(4,10,24,.85)}
html body .hero--f .leiste .kn::before,html body .hero--f .leiste .kn::after{display:none}
html body .hero--f .leiste .kn i{width:clamp(46px,4.2vw,66px);height:clamp(46px,4.2vw,66px);border-radius:50%;background:none;box-shadow:none;border:1px solid rgba(230,210,162,.85);display:grid;place-items:center;transition:background .4s ease}
html body .hero--f .leiste .kn i svg{width:30%;height:30%;stroke:#e6d2a2;fill:none;stroke-width:1.4}
html body .hero--f .leiste .kn:hover i{background:rgba(230,210,162,.16)}
@media (min-width:1081px){
  html body .hero--boden .hero__in{padding-bottom:clamp(170px,22vh,220px)}
  html body .hero--f .leiste{position:absolute;left:var(--rand);right:var(--rand);bottom:66px}
}
@media (min-width:1081px) and (max-height:760px){html body .hero--f .leiste{bottom:51px}html body .hero--boden .hero__in{padding-bottom:150px}}
@media (max-width:1080px){
  html body .hero--f .leiste{grid-template-columns:1fr 1fr;margin-top:30px;border-bottom:1px solid rgba(220,198,143,.6)}
  html body .hero--f .leiste label{padding:16px 10px 14px 4px}
  html body .hero--f .leiste label:nth-of-type(2){border-right:0;padding-left:16px}
  html body .hero--f .leiste label:nth-of-type(3){grid-column:1/-1;border-right:0;border-top:1px solid rgba(220,198,143,.32)}
  html body .hero--f .leiste .kn{grid-column:1/-1;justify-self:stretch;justify-content:space-between;padding:14px 0 16px 4px;border-top:1px solid rgba(220,198,143,.32)}
}
/* ===== PACKAGES SCHWEBEN HEREIN (Robert 15.10.2026: «die drei Kacheln richtig luxuriös und edel reinschweben»): nach der Uhr, nicht ans Scrollen.
   Sobald die Reihe ins Bild kommt (seitenbau.js setzt .schwebt), steigen die Kacheln deckend nacheinander auf, setzen mit einem Hauch Nachfedern,
   das Foto zieht sich dabei von gross auf seine Grösse zurück, Zeichen und Text folgen. Nur transform, Text mit opacity. ===== */
@keyframes pkRein{0%{transform:translateY(calc(var(--y) + var(--s) + clamp(120px,13vw,200px))) scale(.9)}
  62%{transform:translateY(calc(var(--y) + var(--s) - 7px)) scale(1.006)}
  82%{transform:translateY(calc(var(--y) + var(--s) + 2px)) scale(.999)}
  100%{transform:translateY(calc(var(--y) + var(--s))) scale(1)}}
@keyframes pkBild{from{transform:scale(1.16)}to{transform:none}}
@keyframes pkText{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
#pakete .pk9-g.pk-bereit .pk9{animation:pkRein 1.9s cubic-bezier(.22,.8,.3,1) both paused;animation-delay:calc(var(--n,0) * 170ms)}
#pakete .pk9-g.pk-bereit .pk9 img{animation:pkBild 2.6s cubic-bezier(.2,.7,.2,1) both paused;animation-delay:calc(var(--n,0) * 170ms)}
#pakete .pk9-g.pk-bereit .pk9__t{animation:pkText 1.1s cubic-bezier(.2,.7,.2,1) both paused;animation-delay:calc(var(--n,0) * 170ms + 620ms)}
#pakete .pk9-g.pk-bereit.schwebt .pk9,#pakete .pk9-g.pk-bereit.schwebt .pk9 img,#pakete .pk9-g.pk-bereit.schwebt .pk9__t{animation-play-state:running}
#pakete .pk9:nth-child(2){--n:1}#pakete .pk9:nth-child(3){--n:2}#pakete .pk9:nth-child(n+4){--n:3}
@media (prefers-reduced-motion:reduce){#pakete .pk9-g.pk-bereit .pk9,#pakete .pk9-g.pk-bereit .pk9 img,#pakete .pk9-g.pk-bereit .pk9__t{animation:none}}
/* Platz unter der Reihe, damit die Kacheln beim Aufsteigen nicht am Rand der Bandfläche abgeschnitten werden (gleicher Endabstand wie vorher) */
#pakete .pk9-g.pk-bereit{padding-bottom:300px;margin-bottom:-214px;pointer-events:none}
#pakete .pk9-g.pk-bereit .pk9{pointer-events:auto}
#pakete .pk9-g.pk-bereit .pk9.pk-fertig,#pakete .pk9-g.pk-bereit .pk9.pk-fertig img{animation:none}
@media (max-width:900px){#pakete .pk9-g.pk-bereit{padding-bottom:240px;margin-bottom:-194px}}

/* ===== FASSUNG 47 · Auftakt ohne Balken (Robert 15.10.2026, Fassung 20 aus varianten-auftakt-7.html: «mach mal 20, und die Sprache oben auch,
   mit dem ersten Scroll kommen Sprache, Leiste und KI rein»). Am Rechner im Auftakt nur Zeichen, Name, Ortszeile und unten mittig eine feine Zeile
   «Zimmer buchen · Tisch reservieren». Buchungszeile und Menüzeile fallen im Auftakt weg, die Sprache oben links auch. Das Dock (Menü, Sprache, Chat, Buchen)
   kommt mit dem ersten Scroll (html.kopf-oben, main.js). Handy unverändert. Stand davor: _sicherung/2026-10-15-vor-auftakt-wege/ ===== */
.hero__wege{display:none}
@media (min-width:1081px){
  html body .hero--f .hero__menue,html body .hero--f .leiste{display:none}
  html.kopf-oben body>.sprache{display:none!important}
  html body .hero--boden .hero__in{padding-bottom:clamp(120px,15vh,150px)}
  .hero__wege{display:flex;align-items:center;gap:clamp(24px,2.6vw,40px);position:absolute;z-index:3;left:50%;bottom:clamp(36px,6vh,60px);transform:translateX(-50%);
    padding:18px clamp(28px,3vw,44px);border-top:1px solid rgba(220,198,143,.6);border-bottom:1px solid rgba(220,198,143,.6);white-space:nowrap}
  .hero__wege button,.hero__wege a{font-family:'Montserrat CE',var(--sans);font-weight:500;font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:#fbf6ea;
    background:none;border:0;padding:0;cursor:pointer;text-decoration:none;text-shadow:0 1px 10px rgba(4,10,24,.85);transition:color .3s}
  .hero__wege button:hover,.hero__wege a:hover{color:var(--gold)}
  .hero__wege i{font-style:normal;color:var(--gold)}
}

/* Einkerbungen überall (Robert 16.10.2026: «überall, wo Texte in Einkerbungen sind, mittig zentriert … auf der ganzen Seite»): oben und unten gleich viel Luft */
html body .kerbe:not(.kerbe--gross){--kp:clamp(9px,.95vw,14px);padding-top:var(--kp)!important;padding-bottom:var(--kp)!important;line-height:1.15!important}
@media (max-width:700px){html body .kerbe:not(.kerbe--gross){--kp:8px}}
/* Bündige Zweierreihen laufen nicht versetzt zum Scrollen, sonst stimmt die Kante nicht (Robert 16.10.2026, Das Haus) */
@media (min-width:961px){.zwei--buendig>.b{translate:none!important}#bau .zwei--buendig>.b>.zmos{min-height:0}}
/* Buchungsfenster im Package-Modus (Robert 16.10.2026, wie beim Rivage) */
dialog.buchen.buchen--paket .buchen__t h2{display:flex;flex-direction:column;gap:10px}
dialog.buchen .pk-art{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe)}
dialog.buchen .pk-preis{display:block;font-family:var(--serif);font-size:.62em;line-height:1.2;color:var(--taupe)}
dialog.buchen.buchen--paket .buchen__b img{object-fit:cover}

/* Lieferanten (Robert 16.10.2026): Wechsel per Klick statt Überfahren, zwei kleine Pfeile unter dem Foto */
.lv{cursor:pointer}
.lv:not(.an):hover h3{color:var(--taupe)}
.lv:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.lv-r{display:flex;flex-direction:column;gap:clamp(14px,1.4vw,20px)}
.lv-r .lv-b{flex:1}
.lv-pfeile{justify-content:flex-start}
.lv-pfeile button{width:44px;height:44px}
@media (max-width:860px){.lv-pfeile{display:none}}

/* Grundriss (Robert 16.10.2026): Räume und Karte führen per Klick zum Raum */
.gplan__z [data-ziel]{cursor:pointer}
.gplan__info.geht{cursor:pointer}
.gplan__hin{display:flex;align-items:center;gap:8px;margin-top:8px;padding:0 12px;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.gplan__hin i{display:inline-flex;width:12px;height:12px;transition:transform .3s}.gplan__hin svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6}
.gplan__info.geht:hover .gplan__hin i{transform:translateX(3px)}

/* Menü oben (Robert 16.10.2026: «gefällt mir nicht, diese Unterstriche unter den Kategorien»): keine Unterstriche mehr,
   die gewählte Seite steht in Gold, beim Überfahren wird der Name heller */
html body .nav__links a::after{display:none!important}
html body .nav__links a{transition:color .35s ease}
html body .nav__links a:hover{color:#fff}
html body .nav__links a[aria-current]{color:var(--gold)}

/* Wellness «Nach dem Wandertag» (Robert 16.10.2026: «Fotos bitte höher, Leerraum zwischen den Fotos und dem Absatz»): Polaroids direkt unter dem Knopf, nicht unten angeschlagen */
html body #pflege .sb-wander .pstapel--oben{margin-top:0!important;padding-top:clamp(40px,4vw,64px)}

/* Jobs (Robert 16.10.2026): Nummer «01» samt Einkerbung aus der Stellen-Kachel entfernt */
html body .stelle__nr{display:none!important}

/* ===== DAS HAUS, Photovoltaik (Robert 16.10.2026: «anders darstellen, luxuriöser, edler … die vier grossen Zahlen nebeneinander haben wir schon zwei-, dreimal»):
   eine grosse Zahl links unter einem feinen Sonnenbogen, die drei übrigen als ruhige Zeilen rechts. Die Zahlen rollen weiter herauf. ===== */
.prunk--sonne .prunk__satz{max-width:var(--max,1280px);margin-left:auto;margin-right:auto;text-align:left;font-style:italic;letter-spacing:.04em;font-size:clamp(1.05rem,1.4vw,1.4rem)}
.prunk--sonne .in{border:0;padding:0}.prunk--sonne .in::before,.prunk--sonne .in::after{content:none}
.prunk--sonne .prunk__r{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:repeat(3,auto);column-gap:clamp(40px,7vw,130px);align-items:center}
.prunk--sonne .prunk__z::before{content:none!important}
.prunk--sonne .prunk__z:first-child{grid-row:1/4;justify-items:start;text-align:left;padding:clamp(70px,8vw,130px) 0 0}
.prunk--sonne .prunk__z:first-child::after{content:'';position:absolute;left:-4%;top:0;width:108%;aspect-ratio:2/1;border:1px solid rgba(220,198,143,.5);border-bottom:0;border-radius:999px 999px 0 0;pointer-events:none;
  -webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent);transform:scaleY(0);transform-origin:50% 100%;transition:transform 1.8s var(--e3)}
.prunk--sonne .prunk__z:first-child.da::after{transform:none}
.prunk--sonne .prunk__z:first-child b{font-size:clamp(4.4rem,10vw,10.4rem);color:var(--gold)}
.prunk--sonne .prunk__z:first-child em{font-family:var(--serif);font-size:clamp(1.15rem,1.5vw,1.5rem);max-width:none;color:var(--papier)}
.prunk--sonne .prunk__z:not(:first-child){grid-column:2;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:center;justify-items:start;text-align:left;column-gap:clamp(18px,2.4vw,40px);padding:clamp(22px,2.6vw,38px) 0;border-top:1px solid rgba(220,198,143,.28)}
.prunk--sonne .prunk__z:last-child{border-bottom:1px solid rgba(220,198,143,.28)}
.prunk--sonne .prunk__z:not(:first-child) b{font-size:clamp(2.6rem,4.6vw,4.8rem);color:var(--papier)}
.prunk--sonne .prunk__z:not(:first-child) i{display:none}
.prunk--sonne .prunk__z:not(:first-child) em{font-size:clamp(.98rem,1.1vw,1.12rem);max-width:22ch}
@media (max-width:860px){
  .prunk--sonne .prunk__r{grid-template-columns:1fr;row-gap:0}
  .prunk--sonne .prunk__z:first-child{grid-row:auto;padding-top:clamp(60px,18vw,110px);margin-bottom:40px}
  .prunk--sonne .prunk__z:not(:first-child){grid-column:1}
  .prunk--sonne .prunk__z:first-child b{font-size:clamp(3.6rem,17vw,6.4rem)}
  .prunk--sonne .prunk__z:not(:first-child) b{font-size:clamp(2.2rem,10vw,3.2rem)}
}
/* Robert 16.10.2026, 18:50: «das mit dem Halbkreis passt nicht so gut» — Bogen raus, die grosse Zahl steht frei */
html body .prunk--sonne .prunk__z:first-child::after{content:none}
html body .prunk--sonne .prunk__z:first-child{padding-top:0}
/* Das Haus, «Arbeiten im Carlton-Europe» (Robert 16.10.2026: Text ein Stückchen kleiner) */
html body .sb-arbeit .t>p.gross{font-size:clamp(1.25rem,1.75vw,1.8rem);line-height:1.4}

/* ===== Robert 16.10.2026, 19:20: «in diesem Abschnitt nicht zusätzlich scrollen, die Karten einfach hochgeschleppt». Die Reihe der Packages ist am Rechner
   kein eigener Scrollbereich mehr (nur die Pfeile blättern), am Handy nur seitlich. Platz unter der Reihe, damit die aufsteigenden Kacheln nicht abgeschnitten werden. ===== */
#pakete .pk9-g{overflow:hidden;overscroll-behavior:auto;padding-bottom:420px;margin-bottom:-334px;pointer-events:none}
#pakete .pk9-g .pk9{pointer-events:auto}
@media (max-width:900px){#pakete .pk9-g{overflow-x:auto;overflow-y:hidden;padding-bottom:300px;margin-bottom:-254px}}
/* ===== Robert 16.10.2026, 19:25: «flackert sehr mit dem Übergang … Hintergrund in der Einkerbung beige und dafür den Text blau» (Startseite, Vielfältiger Genuss) ===== */
.fl--nacht .ih-eins .frei--kerbe .kerbe{--f:var(--creme);background:var(--creme);color:var(--navy)}