/* Waldhotel Doldenhorn, Kandersteg — Designstudie · Tasty Studios
   Gebaut in der Machart der beiden Schwesterhäuser (Carlton-Europe, Landgasthof Ruedihus): dieselben Bausteine, eigene Farben und eigene Titelschrift.
   Farbwelt: Nachtblau der heutigen Website des Hauses, Papier und Gold. Bewegung nur über transform und opacity, nativer Scroll.
   Jeder Block hat eine Kommentarzeile, die sagt, was er tut. */

/* ---------- Schriften: Titel Libre Caslon fett (alter Schnitt, wie der Name des Hauses im Druck), Lesetext Instrument Sans, kleine Marken DM Mono ---------- */
@font-face{font-family:'Caslon WD';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/librecaslon-700.woff2') format('woff2')}
@font-face{font-family:'Caslon Ersatz';src:local('Georgia Bold'),local('Georgia-Bold'),local('Georgia');size-adjust:104%}
@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:'Sans Ersatz';src:local('Arial');size-adjust:99%}

:root{
  --nacht:#0d1621;     /* Grundfarbe der heutigen Website des Hauses */
  --tief:#070c14;      /* dunkelster Grund: Fuss, Menü */
  --blau:#142235;      /* zweite dunkle Fläche, aufgehellt aus dem Nachtblau */
  --karte:#0f1b2b;
  --stahl:#3d5370;     /* kleine Marken auf Hell */
  --hellgold:#e3d2a6;  /* Betonung in Titeln auf Dunkel */
  --gold:#b89850;      /* Lilie von Relais & Châteaux in der Logo-Datei des Hauses, gemessen */
  --papier:#f1ece2;    /* aufgehellt aus der Tischwäsche des Au Gourmet (#c8c0b8) */
  --leinen:#d9d1c2;
  --blatt:#fbf8f1;
  --tinte:#0f1620;
  --punkt:#b89850;
  --schiefer:#384858;  /* Servietten und Wände im Au Gourmet, gemessen */
  --ld:15,22,32; --lh:241,236,226;
  --titel:'Caslon WD','Caslon Ersatz',Georgia,'Times New Roman',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);
  --rand:clamp(20px,4.6vw,76px); --max:1480px;
  --abschnitt:clamp(72px,8.6vw,136px);
  --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:var(--papier);font-family:var(--sans);font-size:19.44px;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,video{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:2px 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}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--rand)}

/* ---------- Flächen: dunkel und hell im Wechsel (Nachtblau, Blau, Papier) ---------- */
.fl{position:relative;padding-block:var(--abschnitt)}
.fl--nacht{background:var(--nacht)}
.fl--blau{background:var(--blau)}
.fl--tief{background:var(--tief)}
.hell{background:var(--papier);color:var(--tinte)}
.fl--eng{padding-block:clamp(48px,5.6vw,88px)}
/* Muster des Hauses, Ton in Ton: die drei Tannen aus dem Zeichen */
.tannen{background-image:url(../img/tapete-gold-055.png?v=1-dh1410);background-size:150px 170px}

/* ---------- Schrift ---------- */
h1,h2,h3,h4{font-family:var(--titel);font-weight:700;letter-spacing:-.005em}
.d1{font-size:clamp(2.808rem,6.048vw,5.616rem);line-height:1.05}
.d2{font-size:clamp(2.16rem,4.212vw,3.78rem);line-height:1.1}
.d3{font-size:clamp(1.62rem,2.484vw,2.268rem);line-height:1.16}
.d4{font-size:clamp(1.296rem,1.62vw,1.512rem);line-height:1.22}
/* Betonung über Farbe, nie kursiv */
.gold{color:var(--gold)}
.hell .gold{color:var(--stahl)}
.lead{font-size:clamp(1.188rem,1.566vw,1.404rem);line-height:1.55}
.leise{opacity:.74}
.eng{max-width:58ch}
.mono{font-family:var(--mono);font-size:12.42px;letter-spacing:.17em;text-transform:uppercase}
p+p{margin-top:1em}
.strich{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* Zeilen-Maske: grosse Überschriften fahren zeilenweise aus einem Schlitz hoch */
.z{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.z>span{display:block;transform:translateY(110%);transition:transform 1.25s var(--e1);transition-delay:calc(var(--i,0)*90ms)}
.da .z>span,.z.da>span{transform:none}
/* Einblenden: Text und Bild kommen 30 px 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}
/* Hochschweben: Bilder kommen weit von unten und werden dabei grösser */
[data-r="schweb"]{transform:translateY(96px) scale(.9);transition:opacity .9s var(--e1),transform 1.05s var(--e1)}
/* Aufgehen: ein grosses Bild blendet auf und wächst leicht (0,94 → 1), danach gleitet es beim Scrollen sacht in seinem Rahmen */
[data-r="bild"]{transform:scale(.94);transition:opacity 1.2s var(--e1),transform 1.5s var(--e1)}
/* Linie, die sich von links zieht */
.linie{display:block;height:1px;background:currentColor;opacity:.26;transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--e1)}
.linie.da,.da>.linie{transform:none}

/* ---------- Kapitelzeile: Wort in der Titelschrift mit Strich davor ---------- */
.kapitel{display:flex;align-items:center;gap:16px;font-family:var(--titel);font-weight:700;font-size:1.166rem;line-height:1;color:var(--gold);margin-bottom:26px}
.kapitel i{width:64px;height:1px;background:currentColor;opacity:.7}
.hell .kapitel{color:var(--stahl)}

/* ---------- Knöpfe mit Tiefe: Pille, Lichtkante oben, Schattenkante unten, runder Knauf mit Pfeil, Lichtstreifen beim Darüberfahren ---------- */
.kn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:space-between;gap:14px;height:54px;padding:0 7px 0 26px;border-radius:999px;white-space:nowrap;
  font-family:var(--mono);font-size:12.42px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--tinte);
  background:linear-gradient(#f6f1e6,#e5ddcc 55%,#d5cbb8);box-shadow:inset 0 1px 0 #fffdf8,inset 0 -2px 0 #a79c86,0 12px 22px -12px rgba(0,0,0,.75);
  transition:transform .5s var(--e2)}
.kn i{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#223452,#0f1b2b);box-shadow:inset 0 1px 0 #4a6384,inset 0 -2px 0 #060b13}
.kn svg{width:15px;height:15px;stroke:var(--papier);fill:none;stroke-width:1.5}
.kn::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:32%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-120%) skewX(-18deg)}
.kn:hover{transform:translateY(-2px)}
.kn:hover::after{transform:translateX(560%) skewX(-18deg);transition:transform .9s var(--e1)}
.kn:active{transform:translateY(1px)}
/* dunkler Knopf auf hellen Flächen */
.kn--dunkel{color:var(--papier);background:linear-gradient(#27405f,#1a2b42 55%,#0f1b2b);box-shadow:inset 0 1px 0 #5a7396,inset 0 -2px 0 #060b13,0 12px 22px -12px rgba(15,22,32,.7)}
.kn--dunkel i{background:linear-gradient(#f6f1e6,#d5cbb8);box-shadow:inset 0 1px 0 #fffdf8,inset 0 -2px 0 #a79c86}
.kn--dunkel svg{stroke:var(--tinte)}
.kn--dunkel::after{background:linear-gradient(100deg,transparent,rgba(227,210,166,.28),transparent)}
.kn--klein{height:46px;padding:0 6px 0 20px;font-size:11.88px}
.kn--klein i{width:34px;height:34px}
.kn--ohne{padding:0 26px}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* runde Tasten: Pfeile, Menü, Schliessen */
.rund{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--papier);background:linear-gradient(#27405f,#0f1b2b);box-shadow:inset 0 1px 0 #5a7396,inset 0 -2px 0 #060b13,0 10px 18px -10px rgba(0,0,0,.8);transition:transform .5s var(--e2)}
.rund svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}
.rund:hover{transform:translateY(-2px)}.rund:active{transform:translateY(1px)}
.rund[disabled]{opacity:.35;pointer-events:none}
/* Reiter: dieselbe Tiefe, matt eingelassene Spur, gewählt = hell */
.reiter{display:inline-flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:999px;background:rgba(0,0,0,.26);box-shadow:inset 0 1px 3px rgba(0,0,0,.55),inset 0 0 0 1px rgba(var(--lh),.1)}
.reiter button{height:46px;padding:0 22px;border-radius:999px;font-family:var(--mono);font-size:12.42px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:rgba(var(--lh),.8);transition:color .3s}
.reiter button[aria-selected="true"]{color:var(--tinte);background:linear-gradient(#f6f1e6,#e5ddcc 55%,#d5cbb8);box-shadow:inset 0 1px 0 #fffdf8,inset 0 -2px 0 #a79c86,0 8px 14px -8px rgba(0,0,0,.7)}
.hell .reiter{background:rgba(var(--ld),.1);box-shadow:inset 0 1px 3px rgba(var(--ld),.3),inset 0 0 0 1px rgba(var(--ld),.1)}
.hell .reiter button{color:rgba(var(--ld),.85)}
.hell .reiter button[aria-selected="true"]{color:var(--papier);background:linear-gradient(#27405f,#1a2b42 55%,#0f1b2b);box-shadow:inset 0 1px 0 #5a7396,inset 0 -2px 0 #060b13,0 8px 14px -8px rgba(15,22,32,.6)}

/* ---------- 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:fixed;z-index:61;top:26px;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;overflow:hidden;border:1px solid transparent;border-radius:999px;color:var(--papier);
  font-family:var(--mono);font-size:12.42px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  background:linear-gradient(180deg,#223452,#0b1420) padding-box,
    conic-gradient(from calc(var(--ga) - var(--go)),transparent,var(--gold) var(--gp),#fff calc(var(--gp)*2),var(--gold) calc(var(--gp)*3),transparent calc(var(--gp)*4)) border-box;
  box-shadow:inset 0 0 0 1px rgba(var(--lh),.12),0 14px 26px -16px rgba(0,0,0,.85);
  transition:--go .8s cubic-bezier(.25,1,.5,1),--gp .8s cubic-bezier(.25,1,.5,1),transform .8s var(--e2);animation:ga 3.6s linear infinite}
.glanz svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.5}
.glanz:is(:hover,:focus-visible){--gp:20%;--go:95deg}
.glanz:active{transform:translateY(1px)}
.glanz--l{left:var(--rand)}.glanz--r{right:var(--rand)}
.weg~.glanz,.glanz.weg{transform:translateY(-190%)}
@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(var(--lh),.06);box-shadow:inset 0 0 0 1px rgba(var(--lh),.15)}
.hell .rahmen{background:rgba(var(--ld),.05);box-shadow:inset 0 0 0 1px rgba(var(--ld),.16)}
.rahmen__k{display:block;position:relative;overflow:hidden;border-radius:calc(var(--r-xl) - 7px);background:#060b13;isolation:isolate}
.rahmen__k img{width:100%;height:100%;object-fit:cover}
.v-32 .rahmen__k{aspect-ratio:3/2}.v-43 .rahmen__k{aspect-ratio:4/3}.v-11 .rahmen__k{aspect-ratio:1}.v-34 .rahmen__k{aspect-ratio:3/4}.v-45 .rahmen__k{aspect-ratio:4/5}.v-169 .rahmen__k{aspect-ratio:16/9}
/* Gleiten: das Bild ist etwas grösser als sein Rahmen und wandert darin */
.gleit{transform:scale(1.13)}
/* Einkerbung als Namensschild in der Bildecke: immer lesbar, immer gleich weit vom Rand */
.kerbe{--f:var(--nacht);--e:clamp(16px,1.6vw,24px);position:absolute;z-index:2;left:-1px;bottom:-1px;display:block;padding:clamp(11px,1.1vw,15px) clamp(18px,1.8vw,26px) clamp(9px,.9vw,12px) clamp(14px,1.4vw,20px);border-radius:0 var(--e) 0 0;background:var(--f);color:var(--papier);
  font-family:var(--titel);font-weight:700;font-size:clamp(1.134rem,1.458vw,1.458rem);line-height:1.2;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}
.fl--blau .kerbe{--f:var(--blau)}.hell .kerbe{--f:var(--papier);color:var(--tinte)}.fl--tief .kerbe{--f:var(--tief)}
/* Bild ohne Rahmen: runde Ecken, weicher Schatten, Name mittig darunter */
.frei{display:block;text-align:center}
.frei__b{display:block;overflow:hidden;border-radius:var(--r-l);box-shadow:0 30px 44px -28px rgba(0,0,0,.8);background:#060b13}
.hell .frei__b{box-shadow:0 30px 44px -28px rgba(var(--ld),.6)}
.frei__b img{width:100%;height:100%;object-fit:cover}
.frei b{display:block;margin-top:16px;font-family:var(--titel);font-weight:700;font-size:clamp(1.296rem,1.728vw,1.62rem);line-height:1.2}
.frei small{display:block;margin-top:4px;font-size:1.08rem;opacity:.74}
/* Zeichen des Hauses, gross und leise hinter einem Bild */
.hinter{position:relative}
.hinter>svg{position:absolute;z-index:0;width:min(46%,300px);height:auto;right:-9%;top:-13%;color:var(--gold);opacity:.5}
.hinter>.rahmen,.hinter>figure{position:relative;z-index:1}

/* ---------- Leiste oben: schmale Insel in der Mitte, links und rechts in der Ecke je ein Knopf mit Glanzkante ---------- */
.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(-140%)}
.nav__insel{pointer-events:auto;width:fit-content;max-width:100%;margin:0 auto;height:62px;padding:0 26px 0 16px;border-radius:999px;display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);
  border:1px solid rgba(var(--lh),.2);background:linear-gradient(180deg,#223452,#0a121d);box-shadow:inset 0 1px 0 rgba(226,236,255,.16),0 16px 30px -18px rgba(0,0,0,.9)}
.nav__logo{display:flex;align-items:center;gap:12px}
.nav__logo svg{height:40px;width:auto;color:var(--gold)}
/* Wortmarke des Hauses aus dem Druck: Tannen, Name in feinen Kapitälchen, Kandersteg, vier Sterne */
.nav__logo img{height:44px;width:auto;max-width:none}
.nav__logo b{font-family:var(--titel);font-weight:700;font-size:1.318rem;letter-spacing:.08em;white-space:nowrap}
.nav__links{display:flex;gap:clamp(16px,1.8vw,30px)}
.nav__links a{font-family:var(--mono);font-size:14.58px;letter-spacing:.11em;text-transform:uppercase;color:rgba(var(--lh),.78);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}
.burger{display:none;width:46px;height:46px;position:relative;border-radius:50%;background:linear-gradient(#f6f1e6,#d5cbb8);box-shadow:inset 0 1px 0 #fffdf8,inset 0 -2px 0 #a79c86}
.burger span{position:absolute;left:14px;right:14px;height:1.6px;background:var(--tinte);transition:transform .6s var(--e2)}
.burger span:first-child{top:20px}.burger span:last-child{top:26px}
.offen .burger span:first-child{transform:translateY(3px) rotate(45deg)}
.offen .burger span:last-child{transform:translateY(-3px) rotate(-45deg)}
/* Menü am Handy: ganze Fläche, grosse Zeilen in der Titelschrift */
.menue{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:118px var(--rand) 34px;background:var(--tief);overflow:auto;opacity:0;visibility:hidden;transition:opacity .4s var(--e2),visibility 0s .4s}
.offen .menue{opacity:1;visibility:visible;transition:opacity .5s var(--e2)}
.menue__links a{display:block;font-family:var(--titel);font-weight:700;font-size:clamp(2.16rem,9.72vw,3.456rem);line-height:1.22;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:10px;font-size:1.08rem}
.menue__fuss .knoepfe{margin-bottom:12px}

/* ---------- Auftakt (Fassung 53): oben nur Wald und Haus, unten links Titel, Satz und Buchung in einem Block ---------- */
.auftakt{position:relative;background:#070a14}
.auftakt__steh{position:relative;min-height:100svh;display:flex;overflow:hidden;isolation:isolate}
.auftakt__haus{position:absolute;inset:0;z-index:-1}
.auftakt__haus picture{display:block;width:100%;height:100%}
.auftakt__haus img{width:100%;height:100%;object-fit:cover;object-position:12% 50%}
/* Der ganze Block sitzt unten links auf dem Dunkel der Wiese (ins Bild gerechnet): das Haus bleibt frei */
.auftakt__t{width:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-top:clamp(112px,15vh,168px);padding-bottom:clamp(24px,3vw,44px)}
/* weicher Hof hinter der Schrift: eigene Lage, blendet ein, sobald die Zeilen stehen (nie auf der rollenden Zeile selbst) */
.auftakt h1{position:relative;text-shadow:0 2px 18px rgba(4,6,14,.75)}
.auftakt__hof{position:absolute;z-index:-1;left:calc(var(--rand) - 60px);bottom:0;width:min(920px,86vw);height:62%;background:radial-gradient(60% 60% at 34% 56%,rgba(4,6,14,.62),transparent 72%);opacity:0;transition:opacity 1.6s var(--e1) .5s;pointer-events:none}
.auftakt h1.da~.auftakt__hof{opacity:1}
.auftakt__satz{margin-top:14px;max-width:38ch;font-size:clamp(1.188rem,1.62vw,1.426rem);line-height:1.5;text-shadow:0 1px 14px rgba(4,6,14,.9)}
/* Buchungsleiste: heller Bogen Papier mit Tiefe */
.leiste{margin-top:clamp(22px,2.6vw,34px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:stretch;gap:0;width:min(880px,100%);padding:9px;border-radius:22px;background:linear-gradient(#f8f4ea,#e8dfcd);color:var(--tinte);box-shadow:inset 0 1px 0 #fffdf8,inset 0 -2px 0 #a79c86,0 26px 44px -24px rgba(0,0,0,.9)}
.leiste label{display:grid;gap:3px;padding:9px 18px;border-right:1px solid rgba(var(--ld),.16);min-width:0}
.leiste label span{font-family:var(--mono);font-size:11.34px;letter-spacing:.15em;text-transform:uppercase;color:var(--stahl)}
.leiste input,.leiste select{width:100%;min-width:0;border:0;background:transparent;color:var(--tinte);font:500 1.145rem var(--sans);padding:0;color-scheme:light;appearance:none;-webkit-appearance:none}
.leiste .kn{margin-left:9px;align-self:center}
.auftakt__klein{margin-top:14px;font-size:1.026rem;text-shadow:0 1px 10px rgba(4,6,14,.9)}
.auftakt__handy{display:none}
/* drinnen: die Stube. Ohne Bewegung ein ruhiger zweiter Schirm, mit Bewegung eine zweite stehende Lage über dem Haus */
.auftakt__drin{position:relative;min-height:84svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.auftakt__stube{position:absolute;inset:0;z-index:-1;transform-origin:0 0}
.auftakt__stube img{width:100%;height:100%;object-fit:cover}
.auftakt__t2{width:100%;padding-bottom:clamp(40px,5vw,84px);text-shadow:0 2px 20px rgba(4,8,14,.9),0 0 60px rgba(4,8,14,.6)}
.auftakt__t2 .d2{max-width:16ch}
.auftakt__t2 p{max-width:46ch;margin-top:16px}
.auftakt__t2 .knoepfe{margin-top:24px;text-shadow:none}
.pin .auftakt{height:250svh}
.pin .auftakt__steh,.pin .auftakt__drin{position:sticky;top:0;height:100svh;min-height:0}
.pin .auftakt__drin{margin-top:-100svh;pointer-events:none;overflow:visible}
.pin .auftakt__stube{opacity:0;will-change:transform,opacity;box-shadow:0 0 0 4px var(--hellgold)}
.pin .auftakt__t2{opacity:0}
.pin .auftakt__drin.drin .auftakt__t2{pointer-events:auto}
.pin .auftakt__t{will-change:opacity;height:100%}

/* ---------- Raster ---------- */
.paar{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:center}
.paar--um{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.paar--um>:first-child{order:2}
.paar>*{min-width:0}
.paar--gleich{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.paar--blatt{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
/* Kopfzeile eines Abschnitts: Titel links, Text rechts, unten bündig */
.kopfzeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(30px,3.6vw,54px)}
.kopfzeile p{max-width:52ch}

/* ---------- Frage an den Gast: vier Bilder auf einer Höhe, das gewählte etwas grösser, darunter die Antwort ---------- */
.fragen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.5vw,22px);align-items:start}
.frage{display:block;width:100%;text-align:center;border-radius:calc(var(--r-l) + 8px);padding:8px 8px 16px;background:linear-gradient(#f8f4ea,#e9e1d0);color:var(--tinte);box-shadow:inset 0 1px 0 #fffdf8,inset 0 -2px 0 #b8ae98,0 26px 36px -28px rgba(var(--ld),.7);transition:transform .7s var(--e1)}
.frage__b{display:block;overflow:hidden;border-radius:var(--r-l);aspect-ratio:4/5;background:#060b13}
.frage__b img{width:100%;height:100%;object-fit:cover}
.frage b{display:block;margin-top:14px;font-family:var(--titel);font-weight:700;font-size:clamp(1.242rem,1.728vw,1.62rem);line-height:1.2}
.frage:hover{transform:translateY(-4px)}
.frage[aria-selected="true"]{transform:scale(1.035);background:linear-gradient(#27405f,#0f1b2b);color:var(--papier);box-shadow:inset 0 0 0 1.5px var(--gold),inset 0 1px 0 #5a7396,0 30px 40px -26px rgba(var(--ld),.8)}
.antwort{margin-top:clamp(22px,2.4vw,34px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 30px;align-items:center;padding:clamp(22px,2.4vw,34px) clamp(22px,2.8vw,40px);border-radius:var(--r-l);background:var(--blatt);box-shadow:inset 0 0 0 1px rgba(var(--ld),.12),0 26px 40px -30px rgba(var(--ld),.55)}
.antwort p{margin-top:8px;max-width:64ch}
.antwort[hidden]{display:none}

/* ---------- Stuben: zwei Stockwerke, Karten schweben nacheinander herauf ---------- */
.treppe{display:flex;align-items:center;gap:18px;margin:clamp(34px,4vw,56px) 0 clamp(20px,2.2vw,30px);font-family:var(--titel);font-weight:700;font-size:clamp(1.404rem,2.052vw,1.89rem);line-height:1}
.treppe .linie{flex:1}
.stock{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.5vw,22px)}
.stock--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stube{border-radius:calc(var(--r-l) + 6px);overflow:hidden;background:var(--karte);box-shadow:inset 0 0 0 1px rgba(var(--lh),.13),inset 0 1px 0 rgba(226,236,255,.1),0 30px 44px -32px #000}
.stube__b{display:block;overflow:hidden;aspect-ratio:4/3;background:#060b13}
.stock--2 .stube__b{aspect-ratio:16/10}
.stube__b img{width:100%;height:100%;object-fit:cover}
.stube__t{padding:clamp(18px,1.8vw,26px) clamp(18px,2vw,28px) clamp(22px,2.2vw,30px)}
.stube__t p{margin-top:8px;font-size:1.08rem;opacity:.84}
.hell .stube{background:var(--blatt);box-shadow:inset 0 0 0 1px rgba(var(--ld),.14),0 30px 44px -32px rgba(var(--ld),.6)}

/* ---------- Blatt: ein heller Bogen Papier auf dunklem Grund (Karte, Preise, Geschichte) ---------- */
.blatt{position:relative;background:var(--blatt);color:var(--tinte);border-radius:10px;padding:clamp(26px,3.6vw,56px);box-shadow:inset 0 1px 0 #fff,0 44px 64px -36px #000}
.blatt__kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding-bottom:18px;border-bottom:3px double rgba(var(--ld),.32);margin-bottom:6px}
.blatt__kopf h3{font-size:clamp(2.16rem,3.672vw,3.24rem);line-height:1;color:var(--stahl)}
.blatt__kopf svg{width:54px;height:auto;color:var(--gold)}
.gruppe{margin-top:26px;font-family:var(--mono);font-size:12.42px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--stahl)}
.gang{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 20px;padding:13px 0;border-bottom:1px solid rgba(var(--ld),.15)}
.gang b{font-family:var(--titel);font-weight:700;font-size:1.145rem;line-height:1.3;letter-spacing:.01em}
.gang em{font-family:var(--titel);font-style:normal;font-weight:700;font-size:1.145rem;line-height:1.3;white-space:nowrap}
.gang span{grid-column:1/-1;font-size:1.058rem;line-height:1.45;opacity:.76}
.blatt__spalten{columns:2;column-gap:clamp(30px,4vw,64px)}
.blatt__spalten>section{break-inside:avoid}
.blatt__fuss{margin-top:24px;font-size:1.026rem;opacity:.78}
/* Bögen: Bild mit rundem Kopf, Name und Preis mittig darunter. Nur bei Gerichten */
.boegen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px;align-content:start}
.bogen{text-align:center}
.bogen__b{display:block;overflow:hidden;aspect-ratio:3/4;border-radius:999px 999px 18px 18px;background:#060b13}
.bogen__b img{width:100%;height:100%;object-fit:cover}
.bogen b{display:block;margin-top:14px;font-family:var(--titel);font-weight:700;font-size:1.21rem;line-height:1.2}
.bogen small{display:block;margin-top:3px;font-size:1.058rem;opacity:.74}
/* Tagesmenu: sieben Tage als Spalten, die sich nie halb leer umbrechen */
.tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;margin-top:14px;border-top:1px solid rgba(var(--ld),.2)}
.tag{padding:16px 14px 18px 0;border-right:1px solid rgba(var(--ld),.14)}
.tag+.tag{padding-left:14px}.tag:last-child{border-right:0}
.tag h4{font-size:1.188rem;color:var(--stahl);margin-bottom:8px}
.tag li{font-size:1.015rem;line-height:1.4;padding:6px 0;border-top:1px solid rgba(var(--ld),.1)}

/* ---------- Fenster: ein stehendes Bild zwischen zwei Abschnitten. Der Abschnitt ist ein Ausschnitt, die Seite zieht darüber (clip-path, kein Skript) ---------- */
.bruch{position:relative;height:58vh;clip-path:inset(0);display:grid;place-items:center;text-align:center;background:#060b13}
.bruch__bild{position:fixed;inset:0;z-index:-1}
.bruch__bild img{width:100%;height:100%;object-fit:cover}
.bruch .in{position:fixed;left:0;right:0;top:50%;transform:translateY(-50%);padding-inline:var(--rand)}
.bruch p{font-family:var(--titel);font-weight:700;font-size:clamp(1.62rem,3.564vw,3.24rem);line-height:1.2;max-width:25ch;margin:0 auto;text-shadow:0 2px 22px rgba(0,0,0,.92),0 0 70px rgba(0,0,0,.85)}
.bruch small{display:block;margin-top:18px;font-family:var(--mono);font-size:12.42px;letter-spacing:.17em;text-transform:uppercase;text-shadow:0 1px 10px #000}

/* ---------- Zimmer: jedes einzeln und gross, Flächen im Wechsel, dazwischen eine feine Linie mit dem Zeichen ---------- */
.zimmer{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:end}
.zimmer--um{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.zimmer--um .zimmer__b{order:2}
.zimmer__b{position:relative}
.zimmer__t p{margin-top:12px}
.preis{margin-top:16px;font-family:var(--titel);font-weight:700;font-size:clamp(1.296rem,1.728vw,1.566rem);line-height:1.25}
.preis small{display:block;margin-top:4px;font-family:var(--sans);font-weight:400;font-size:1.08rem;opacity:.76}
.zimmer__t .knoepfe{margin-top:22px}
.uebergang{display:flex;align-items:center;gap:20px;margin-block:clamp(34px,4.4vw,64px);color:var(--gold)}
.hell .uebergang{color:var(--stahl)}
.uebergang .linie{flex:1;opacity:.4}
.uebergang svg{width:36px;height:auto}
.mehr{position:absolute;right:20px;bottom:20px;z-index:3}
/* Bühne: ein Zimmer geöffnet, alle Fotos gross, Pfeile und Daumenreihe */
dialog.buehne{width:min(1240px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:var(--r-xl);background:var(--nacht);color:var(--papier);overflow:hidden;box-shadow:0 60px 120px -40px #000}
dialog.buehne::backdrop,dialog.buchen::backdrop{background:rgba(4,8,14,.86)}
.buehne__in{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;padding:18px;max-height:calc(100dvh - 24px)}
.buehne__kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 6px 0 10px}
.buehne__bild{position:relative;min-height:0;border-radius:var(--r-l);overflow:hidden;background:#05090f;display:grid;place-items:center}
.buehne__bild img{max-width:100%;max-height:68dvh;width:auto;height:auto;object-fit:contain}
.buehne__pfeile{position:absolute;inset:auto 14px 14px auto;display:flex;gap:8px}
.buehne__daumen{display:flex;gap:8px;overflow-x:auto;padding:2px 6px 6px}
.buehne__daumen button{flex:none;width:112px;aspect-ratio:3/2;border-radius:12px;overflow:hidden;opacity:.55;box-shadow:inset 0 0 0 1px rgba(var(--lh),.2)}
.buehne__daumen button[aria-current="true"]{opacity:1;box-shadow:0 0 0 2px var(--gold)}
.buehne__daumen img{width:100%;height:100%;object-fit:cover}

/* ---------- Die grossen Jahre: eigener dunkler Abschnitt, Ziffern steigen aus einer Linie ---------- */
.jahre{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:3px double rgba(var(--lh),.3);padding-block:clamp(30px,3.6vw,54px);margin-top:clamp(40px,4.6vw,70px)}
.jahr{padding-inline:clamp(12px,2vw,36px)}
.jahr:first-child{padding-left:0}
.jahr+.jahr{border-left:1px solid rgba(var(--lh),.16)}
.jahr b{display:block;overflow:hidden;font-family:var(--titel);font-weight:700;font-size:clamp(2.592rem,6.804vw,7.56rem);line-height:1;letter-spacing:-.01em}
.jahr b span{display:block;transform:translateY(104%);transition:transform 1.5s var(--e1);transition-delay:calc(var(--i,0)*120ms)}
.jahre.da .jahr b span{transform:none}
.jahr p{margin-top:14px;font-size:1.08rem;opacity:.84;max-width:26ch}

/* ---------- Namen als Laufband an der Naht zwischen zwei Abschnitten: ein Zug mit zwei gleichen Hälften, nur transform, läuft nur im Bild ---------- */
.laufband{overflow:hidden;background:var(--tief);border-block:1px solid rgba(var(--lh),.12);padding:15px 0}
.laufband__zug{display:flex;width:max-content;animation:lauf 46s linear infinite;animation-play-state:paused}
.laufband.laeuft .laufband__zug{animation-play-state:running}
.laufband span{display:flex;align-items:center;gap:26px;padding-right:26px;font-family:var(--titel);font-weight:700;font-size:1.166rem;white-space:nowrap;color:rgba(var(--lh),.88)}
.laufband span::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold)}
@keyframes lauf{to{transform:translateX(-50%)}}

/* ---------- Morgen: Garten, Zopf, der Brief der Gastgeber ---------- */
.morgen{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,88px);align-items:start}
.morgen__bilder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr);gap:clamp(12px,1.5vw,22px);align-items:end}
.brief p{font-size:1.123rem}
.brief .unter{margin-top:20px;font-family:var(--titel);font-weight:700;font-size:1.296rem}
/* Angaben auf einer Linie: Wert gross in der Titelschrift, Angabe klein darüber */
.angaben{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(34px,4vw,60px);border-top:1px solid rgba(var(--ld),.22)}
.fl--nacht .angaben,.fl--blau .angaben{border-color:rgba(var(--lh),.2)}
.angabe{padding:20px clamp(14px,2vw,30px) 0 0}
.angabe+.angabe{padding-left:clamp(14px,2vw,30px);border-left:1px solid rgba(var(--ld),.16)}
.fl--nacht .angabe+.angabe,.fl--blau .angabe+.angabe{border-color:rgba(var(--lh),.14)}
.angabe small{display:block;margin-top:9px;font-size:1.08rem;opacity:.74}
.angabe b{display:block;font-family:var(--titel);font-weight:700;font-size:clamp(1.296rem,1.944vw,1.836rem);line-height:1.2}
.angabe a{box-shadow:inset 0 -1px 0 currentColor}

/* Drei Texte nebeneinander, jeder an einer Linie (keine Kacheln) */
.drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.4vw,56px);margin-top:clamp(40px,5vw,72px)}
.drei article{padding-top:22px;border-top:3px double rgba(var(--ld),.3)}
.drei h3+p{margin-top:8px;font-weight:600}
.drei p+p{font-size:1.08rem}

/* ---------- Seitenkopf der Unterseiten: Titel links auf dem Muster des Hauses, rechts ein grosses Foto, das nach links ins Holz ausläuft ---------- */
.seitenkopf{position:relative;overflow:hidden;background:var(--blau);padding-top:clamp(150px,15vw,220px);padding-bottom:clamp(54px,6vw,96px);isolation:isolate}
.seitenkopf__bild{position:absolute;z-index:-1;top:0;right:0;bottom:0;width:62%}
.seitenkopf__bild img{width:100%;height:100%;object-fit:cover}
.seitenkopf h1{max-width:13ch}
.seitenkopf .lead{margin-top:20px;max-width:40ch;text-shadow:0 1px 16px rgba(4,8,14,.9)}
.seitenkopf svg.zier{width:58px;height:auto;color:var(--gold);margin-bottom:22px}

/* ---------- Film des Hauses: steht im Rahmen, läuft erst, wenn er ganz im Bild ist ---------- */
.film{position:relative}
.film video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#05090f}
/* grosse Taste in der Bildmitte, solange der Film steht; läuft er, rückt sie klein in die Ecke */
.film__taste{position:absolute;z-index:3;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;color:var(--tinte);background:linear-gradient(#f6f1e6,#d5cbb8);box-shadow:inset 0 1px 0 #fffdf8,inset 0 -2px 0 #a79c86,0 18px 30px -14px rgba(0,0,0,.9)}
.film__taste svg{width:24px;height:24px;fill:currentColor;stroke:none}
.film.laeuft .film__taste{left:20px;top:auto;bottom:20px;margin:0;width:48px;height:48px}
.film.laeuft .film__taste svg{width:14px;height:14px}

/* ---------- Schluss der Startseite: echtes Foto, Dunkel ins Bild gerechnet ---------- */
.schluss{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding-block:clamp(90px,11vw,170px)}
.schluss__bild{position:absolute;inset:0;z-index:-1}
.schluss__bild img{width:100%;height:100%;object-fit:cover}
.schluss svg.zier{width:64px;height:auto;color:var(--hellgold);margin:0 auto 22px}
.schluss h2{text-shadow:0 2px 24px rgba(0,0,0,.9),0 0 70px rgba(0,0,0,.7)}
.schluss p{margin:16px auto 0;max-width:44ch;text-shadow:0 1px 14px rgba(0,0,0,.95)}
.schluss .knoepfe{justify-content:center;margin-top:28px}
/* Schmaler Ausklang der Unterseiten */
.ausklang{background:var(--blau);padding-block:clamp(44px,5vw,72px)}
.ausklang .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.ausklang p{font-family:var(--titel);font-weight:700;font-size:clamp(1.512rem,2.484vw,2.268rem);line-height:1.2}

/* ---------- Fuss: Satz des Hauses gross, Zeichen in der Ecke, die drei Häuser der Familie als runde Karten, Linkspalten mit Linie und Pfeil ---------- */
.fuss{position:relative;overflow:hidden;background:var(--tief);padding:clamp(60px,6.6vw,104px) 0 26px}
.fuss__kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.fuss__satz{font-family:var(--titel);font-weight:700;font-size:clamp(2.268rem,5.832vw,5.616rem);line-height:1.04}
.fuss__unter{margin-top:16px;font-family:var(--mono);font-size:12.42px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.fuss__ecke{flex:none;width:clamp(110px,14vw,210px);color:var(--gold);opacity:.9}
.fuss__ecke svg{width:100%;height:auto}
.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{border-radius:26px;padding:9px;background:linear-gradient(180deg,#223452,#0a121d);box-shadow:inset 0 0 0 1px rgba(184,152,80,.36),inset 0 1px 0 rgba(226,236,255,.14),0 34px 50px -34px #000;transition:transform .9s var(--e1)}
.fh:hover{transform:translateY(-6px)}
.fh__bild{display:block;position:relative;overflow:hidden;border-radius:19px;aspect-ratio:16/10;background:#060b13}
.fh__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fh__t{padding:clamp(18px,1.7vw,26px) clamp(14px,1.4vw,20px) clamp(12px,1.2vw,18px)}
.fh h3{font-size:clamp(1.404rem,1.836vw,1.89rem);line-height:1.14}
.fh address{margin-top:8px;font-size:1.08rem;opacity:.78}
.fh .knoepfe{margin-top:16px}
/* Vier Häuser der Familie (mit dem Berghotel Gasterntal): vier in einer Reihe, darunter zwei mal zwei */
.fuss__haeuser--vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.fuss__haeuser--vier .fh h3{font-size:clamp(1.242rem,1.534vw,1.62rem)}
@media (max-width:1180px){.fuss__haeuser--vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pfeil{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.42px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;padding:8px 0;box-shadow:inset 0 -1px 0 rgba(var(--lh),.4)}
.pfeil svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.5}
.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-size:1.08rem;color:var(--gold)}
.fuss h4::after{content:'';flex:1;height:1px;background:rgba(var(--lh),.16)}
.fuss__sp li{border-bottom:1px solid rgba(var(--lh),.09)}
.fl-link{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;font-size:1.08rem;line-height:1.3;color:rgba(var(--lh),.84);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(var(--lh),.24);opacity:.7;transition:opacity .35s,transform .5s var(--e2)}
.fl-link i svg{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)}
.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(var(--lh),.14);font-family:var(--mono);font-size:12.42px;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--lh),.66)}
.fuss__unten a:hover{color:#fff}
.fuss__unten .studie{color:rgba(var(--lh),.46)}

/* ---------- Buchen: Fenster mit zwei Reitern (Zimmer mit Datum und Gästen, Tisch mit Telefon), feiner Innenrahmen, Zeichen des Hauses oben ---------- */
dialog.buchen{width:min(900px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:var(--r-xl);background:var(--blau);color:var(--papier);overflow:auto;box-shadow:0 60px 120px -40px #000}
.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(184,152,80,.34);border-radius:calc(var(--r-xl) - 10px);pointer-events:none;z-index:2}
.buchen__b{position:relative;min-height:320px;background:#060b13}
.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(28px,3vw,42px)}
.buchen__t svg.zier{width:50px;height:auto;color:var(--gold);margin-bottom:16px}
.buchen .zu{position:absolute;z-index:3;right:22px;top:22px}
.buchen .reiter{margin-top:20px}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.feld{display:grid;gap:5px;padding:12px 16px;border-radius:10px;background:rgba(4,8,14,.42);box-shadow:inset 0 1px 3px rgba(0,0,0,.6),inset 0 0 0 1px rgba(var(--lh),.12)}
.feld--ganz{grid-column:1/-1}
.feld span{font-family:var(--mono);font-size:11.88px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.feld input,.feld select{width:100%;min-width:0;border:0;background:transparent;color:var(--papier);font:500 1.166rem var(--sans);padding:0;color-scheme:dark;appearance:none;-webkit-appearance:none}
.feld select option{color:#000}
.buchen form .kn{margin-top:18px;width:100%}
.buchen__klein{margin-top:18px;padding-top:16px;border-top:1px solid rgba(var(--lh),.16);font-size:1.058rem;line-height:1.55;opacity:.84}
.buchen__gross{display:block;margin-top:18px;font-family:var(--titel);font-weight:700;font-size:clamp(1.62rem,2.592vw,2.16rem);line-height:1.2}
.buchen [hidden]{display:none}

/* ---------- Textseiten: Inhaltsfeld links (bleibt stehen), Text als Blatt rechts ---------- */
.textseite{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:start}
.textseite nav{position:sticky;top:110px;display:grid;gap:2px}
.textseite nav a{padding:10px 0;border-bottom:1px solid rgba(var(--lh),.14);font-family:var(--titel);font-weight:700;font-size:1.166rem}
.blatt h2{font-size:clamp(1.62rem,2.376vw,2.16rem);margin-top:34px;color:var(--stahl)}
.blatt h2:first-child{margin-top:0}
.blatt h2+p{margin-top:12px}
.blatt a:not(.kn){box-shadow:inset 0 -1px 0 currentColor}
.liste li{padding:12px 0;border-bottom:1px solid rgba(var(--ld),.15);font-family:var(--titel);font-weight:700;font-size:1.21rem}
.fl--nacht .liste li,.fl--blau .liste li{border-color:rgba(var(--lh),.15)}

/* ---------- Kleinere Schirme ---------- */
/* Zwischen 1121 und 1400 px wird die Leiste enger gesetzt (Wortmarke, Abstände, Eck-Knöpfe), damit Insel und Eck-Knöpfe sich nie berühren. Es fällt kein Punkt weg */
@media (min-width:1121px) and (max-width:1400px){
  .nav__insel{gap:18px;padding:0 20px 0 14px}
  .nav__logo img{height:40px}
  .nav__links{gap:14px}
  .nav__links a{font-size:13.5px;letter-spacing:.09em}
  .glanz{height:42px;padding:0 14px;gap:8px;font-size:11.34px;letter-spacing:.1em;top:28px}
}
@media (max-width:1120px){
  .glanz{display:none}
  .tage{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tag{border-bottom:1px solid rgba(var(--ld),.14)}
  .tag:nth-child(4){border-right:0}.tag:nth-child(5){padding-left:0}
  .tag:last-child{grid-column:span 2}
}
@media (max-width:900px){
  body{font-size:18.36px}
  .nav{top:12px}
  .nav__insel{width:100%;justify-content:space-between;padding:0 8px 0 14px;height:60px}
  .nav__links{display:none}
  .burger{display:block}
  .paar,.paar--um,.paar--gleich,.paar--blatt,.kopfzeile,.zimmer,.zimmer--um,.morgen,.textseite,.buchen__in{grid-template-columns:minmax(0,1fr)}
  .paar--um>:first-child,.zimmer--um .zimmer__b{order:0}
  .kopfzeile{align-items:start;gap:16px}
  .fragen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frage__b{aspect-ratio:1}
  .antwort{grid-template-columns:minmax(0,1fr)}
  .stock,.stock--2,.drei{grid-template-columns:minmax(0,1fr)}
  .blatt__spalten{columns:1}
  .jahre{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .jahr:nth-child(3){padding-left:0;border-left:0}
  .angaben{grid-template-columns:minmax(0,1fr)}
  .angabe+.angabe{padding-left:0;border-left:0;border-top:1px solid rgba(var(--ld),.14);margin-top:18px}
  .fuss__haeuser,.fuss__haeuser--vier{grid-template-columns:minmax(0,1fr)}
  .fuss__oben{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fuss__ecke{width:92px}
  .buchen__b{min-height:180px}
  .textseite nav{position:static}
  .seitenkopf{padding-top:0;padding-bottom:44px}
  .seitenkopf__bild{position:relative;width:auto;aspect-ratio:4/3;margin-bottom:30px}
  .hinter>svg{right:-4%}
  /* Auftakt am Handy: erster Schirm nur Bild, Titel, Satz, zwei Knöpfe. Das Haus steht in der Bildmitte, die Schrift darunter auf dem Dunkel */
  .auftakt__steh{display:block;min-height:0}
  .auftakt__haus{position:relative;inset:auto;z-index:0}
  .auftakt__haus img{aspect-ratio:1;object-position:50% 50%}
  .auftakt__t{display:block;padding-block:24px 34px}
  .auftakt h1{text-shadow:none}.auftakt__hof,.leiste,.auftakt__klein{display:none}
  .auftakt__handy{display:flex;margin-top:22px}
  .auftakt__drin{min-height:76svh}
  .bruch{height:54vh}
  .tage{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tag,.tag+.tag{padding:14px 12px 16px 0;border-right:0}
  .tag:last-child{grid-column:auto}
  .morgen__bilder{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mehr{right:14px;bottom:14px}
  .buehne__daumen button{width:84px}
}
@media (max-width:520px){
  .d1{font-size:clamp(2.484rem,11.88vw,3.456rem)}
  .kn{height:52px;padding-left:22px;letter-spacing:.14em}
  .knoepfe .kn{flex:1 1 auto}
  .nav__logo b{font-size:1.166rem;letter-spacing:.06em}
  .nav__logo svg{height:36px}
  .nav__logo img{height:40px}
  .fuss__oben{grid-template-columns:minmax(0,1fr)}
  .fuss__kopf{align-items:flex-start}
  .reiter{border-radius:28px}
  .reiter button{padding:0 16px;letter-spacing:.11em}
  .jahr b{font-size:clamp(2.7rem,14.04vw,3.888rem)}
  .boegen{gap:18px 12px}
  .felder{grid-template-columns:minmax(0,1fr)}
  .blatt{padding:22px 18px}
  .blatt__kopf>div{min-width:0}
  .blatt__kopf h3{font-size:clamp(1.566rem,7.992vw,2.16rem);overflow-wrap:anywhere}
  .blatt__kopf svg{width:40px}
}
/* niedrige Fenster: Titel etwas kleiner und der Satz in zwei statt drei Zeilen, damit der Block nicht ins Haus wächst */
@media (max-height:860px) and (min-width:901px){.auftakt .d1{font-size:min(clamp(2.808rem,6.048vw,5.616rem),9.936vh)}.auftakt__satz{max-width:60ch}}
@media (max-height:780px) and (min-width:901px){.auftakt__klein{display:none}}
@media (max-height:520px) and (min-width:901px){.auftakt__satz,.auftakt__klein{display:none}}
/* niedrige Handys: das Bild wird flacher, damit Titel, Satz und beide Knöpfe auf den ersten Schirm passen */
@media (max-width:900px) and (max-height:700px){.auftakt__haus img{aspect-ratio:3/2}.auftakt__t{padding-block:18px 24px}.auftakt__handy{margin-top:16px}}

/* ---------- Ruhe: wer weniger Bewegung wünscht, bekommt alles sofort und still ---------- */
@media (prefers-reduced-motion:reduce){
  .z>span,[data-r],.linie,.jahr b span{transition:none;transform:none;opacity:1}
  .laufband__zug,.ehren__zug,.glanz{animation:none}
  .kn::after{display:none}
}
.still .z>span,.still [data-r],.still .linie,.still .jahr b span{transition:none;transform:none;opacity:1}
.still .auftakt__hof{opacity:1}

/* ---------- Waldhotel Doldenhorn: Ergänzungen zur ganzen Seite ---------- */
.fl--nacht .drei article,.fl--blau .drei article{border-color:rgba(var(--lh),.3)}
.antwort .knoepfe{justify-content:flex-end}
.liste li{overflow:hidden}
.seitenkopf__bild img{object-position:0 50%}   /* der linke Rand des Fotos ist ins Blau gerechnet, er muss am Rand der Fläche liegen */
/* Auszeichnungen: ein schmales Band auf Papier, das langsam durchläuft. Es bewegt sich nur der Zug (transform), nur solange das Band im Bild ist, und er hält an, wenn die Maus darauf steht */
.ehren{overflow:hidden;background:var(--papier);padding-block:clamp(12px,1.2vw,16px);border-bottom:1px solid rgba(var(--ld),.12)}
.ehren__zug{display:flex;width:max-content;animation:lauf 96s linear infinite;animation-play-state:paused}
.ehren.laeuft .ehren__zug{animation-play-state:running}
.ehren:hover .ehren__zug,.ehren:focus-within .ehren__zug{animation-play-state:paused}
.ehren__zug>div{display:flex;align-items:center}
.ehren a,.ehren span{display:block;flex:none;padding-right:clamp(48px,5.4vw,88px)}
.ehren img{display:block;height:clamp(34px,3vw,44px);width:auto;max-width:none}

/* ---------- Bewegung wie auf der Carlton-Seite (Robert 08.10.2026: «soll sich anfühlen wie im Referenzlink, auf der gesamten Hotelseite») ---------- */
:root{--e3:cubic-bezier(.19,1,.22,1)}
.z{padding:.16em 0 .1em;margin:-.16em 0 -.1em}
.z>span{transform:translateY(108%)}
/* Auftritt, Wort für Wort die gültige Fassung der Carlton-Seite («Fassung 34 · 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»): Text und Flächen 40 bis 70 px, Fotos und Karten 56 bis 104 px und von der Unterkante aus leicht wachsend */
[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"]{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{opacity:1;transform:none}
/* das Foto im Rahmen kommt dabei aus leichter Vergrösserung zur Ruhe und gleitet danach beim Scrollen */
[data-r="bild"] .rahmen__k 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{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}
/* der Auftakt bleibt ruhig, wie auf der Carlton-Seite */
.auftakt [data-r]{transform:translateY(30px);transition:opacity 1.1s var(--e1),transform 1.3s var(--e1);transition-delay:calc(var(--i,0)*90ms)}
.auftakt [data-r].da{transform:none}
.auftakt__haus{will-change:transform}
/* Titel, die nur zeilenweise rollen, und die Zahlenreihe stehen selbst still */
h1[data-r],h2[data-r],h3.d2[data-r]{transition-delay:0s}
/* Fenster: der Satz als Titel, der Zeile für Zeile hochrollt; dahinter ein weicher dunkler Hof, damit er auf jedem Foto steht */
.bruch{height:auto;min-height:min(66vh,640px)}
.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,8,14,.74) 0%,rgba(4,8,14,.5) 38%,rgba(4,8,14,0) 70%)}
.bruch .d2{font-size:clamp(2.052rem,4.644vw,4.86rem);line-height:1.1;max-width:none;text-shadow:0 2px 20px rgba(4,8,14,.7)}
.bruch small{margin-top:clamp(16px,1.8vw,26px)}
/* Seitenkopf: das Foto kommt beim Laden langsam zur Ruhe, der Titel rollt danach hoch */
.seitenkopf__bild img{transform:scale(1.08);transform-origin:0 50%;animation:skein 2.8s var(--e1) .1s forwards}
@keyframes skein{to{transform:none}}
.seitenkopf .z>span{transition-delay:.15s}.seitenkopf .z:nth-child(2)>span{transition-delay:.3s}.seitenkopf .z:nth-child(3)>span{transition-delay:.45s}
@media (max-width:900px){.bruch{min-height:54svh}.bruch .d2{font-size:clamp(1.62rem,7.128vw,2.7rem)}}
@media (prefers-reduced-motion:reduce){[data-r]{transform:none!important;opacity:1!important;transition:none!important}[data-r] .rahmen__k img,.seitenkopf__bild img{transform:none!important;transition:none;animation:none}}
.still [data-r]{transform:none!important;opacity:1!important;transition:none!important}
.still [data-r] .rahmen__k img,.still .seitenkopf__bild img{transform:none!important;transition:none;animation:none}

/* ---------- Worauf freuen Sie sich? (Fassung 2): vier grosse Zeilen, ein Foto, das mit der Zeile wechselt ---------- */
.freude__gitter{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:start}
.freude__liste{margin-top:clamp(26px,3.2vw,48px);border-top:1px solid rgba(var(--lh),.16)}
.freude__zeile{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 46px;align-items:center;gap:18px;width:100%;text-align:left;padding:clamp(17px,1.9vw,27px) 0;border-bottom:1px solid rgba(var(--lh),.16);color:var(--papier)}
.freude__zeile b{font-family:var(--titel);font-weight:700;font-size:clamp(1.62rem,2.808vw,2.7rem);line-height:1.08;opacity:.4;transition:opacity .5s,transform .7s var(--e1)}
.freude__zeile small{font-family:var(--mono);font-size:12.42px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .5s}
.freude__zeile i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--tinte);background:linear-gradient(#f6f1e6,#d5cbb8);box-shadow:inset 0 1px 0 #fffdf8,inset 0 -2px 0 #a79c86,0 12px 18px -10px rgba(0,0,0,.8);opacity:0;transform:scale(.8);transition:opacity .4s,transform .6s var(--e2)}
.freude__zeile i svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.3}
.freude__zeile::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--e1)}
.freude__zeile[aria-selected="true"] b{opacity:1;transform:translateX(clamp(8px,1vw,16px))}
.freude__zeile[aria-selected="true"] small{opacity:.78}
.freude__zeile[aria-selected="true"] i{opacity:1;transform:none}
.freude__zeile[aria-selected="true"]::after{transform:none}
.freude__zeile:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.freude__bild .rahmen__k img,.freude__bild.da .rahmen__k img{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity .7s var(--e2),transform 1.6s var(--e1)}
.freude__bild .rahmen__k img.an,.freude__bild.da .rahmen__k img.an{opacity:1;transform:none}
.freude__antworten{display:grid;margin-top:clamp(20px,2.2vw,32px)}
.freude__antwort{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .45s var(--e2),visibility 0s .45s}
.freude__antwort.an{opacity:1;visibility:visible;transition:opacity .7s var(--e2) .2s}
.freude__antwort p{margin-top:10px;max-width:60ch;opacity:.88}
.freude__antwort .knoepfe{margin-top:22px}
@media (max-width:900px){
  .freude__gitter{grid-template-columns:minmax(0,1fr)}
  .freude__zeile{grid-template-columns:minmax(0,1fr) 40px;gap:12px}
  .freude__zeile small{display:none}
  .freude__zeile i{width:40px;height:40px}
}
.freude__zeile{grid-template-columns:minmax(0,1fr) 46px}
.freude__zeile small{display:none}

/* ==========================================================================
   STARTSEITE FASSUNG 3 (08.10.2026 abends, Roberts Liste). Alles Bewegte nur über transform und opacity.
   ========================================================================== */
.mitte{justify-content:center;text-align:center;margin-inline:auto}
.knoepfe.mitte{margin-top:clamp(30px,3.6vw,54px)}
p.mitte{max-width:74ch}

/* ---------- Auszeichnungen: Plaketten aus Elfenbein in einer dunklen, vertieften Schiene. Das Band läuft immer, auch unter der Maus ---------- */
.ehren{background:linear-gradient(#0c1522,#101c2d 46%,#0a121d);padding-block:clamp(16px,1.7vw,26px);border-bottom:0;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.9),inset 0 18px 26px -16px #000,inset 0 -18px 26px -16px #000,inset 0 -1px 0 rgba(184,152,80,.42),inset 0 2px 0 rgba(184,152,80,.18)}
.ehren.laeuft .ehren__zug,.ehren.laeuft:hover .ehren__zug,.ehren.laeuft:focus-within .ehren__zug{animation-play-state:running}
.ehren__zug{animation-duration:110s}
.ehren a,.ehren span{display:grid;place-items:center;flex:none;height:clamp(62px,5.4vw,84px);padding:0 clamp(22px,2.6vw,40px);margin-right:clamp(14px,1.5vw,22px);border-radius:18px;
  background:linear-gradient(#fffdf8,#f3ecdd 46%,#ddd1b8);
  box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 #a3977c,inset 0 -4px 6px -2px rgba(90,74,40,.35),inset 0 0 0 1px rgba(184,152,80,.55),0 16px 18px -12px rgba(0,0,0,.9),0 2px 0 rgba(0,0,0,.5)}
.ehren img{height:clamp(30px,2.7vw,42px);width:auto;max-width:none}

/* ---------- Bildstapel: mehrere Fotos in einem Rahmen. Das neue blendet über das alte, das alte bleibt darunter stehen (kein dunkler Durchblick) ---------- */
.stapel .rahmen__k img,.stapel.da .rahmen__k img{position:absolute;inset:0;z-index:0;opacity:0;transform:scale(1.07);transition:opacity .9s var(--e2),transform 0s linear .9s}
.stapel .rahmen__k img.an,.stapel.da .rahmen__k img.an{opacity:1;transform:none;transition:opacity 1.25s var(--e2),transform 2.6s var(--e1)}
.stapel .kerbe{z-index:9999;opacity:0;transition:opacity .45s var(--e2)}
.stapel .kerbe.an{opacity:1;transition:opacity .8s var(--e2) .3s}

/* ---------- Worauf freuen Sie sich? (Fassung 3): ein Läufer mit Goldlinie und Knauf gleitet von Zeile zu Zeile ---------- */
.freude__liste{position:relative}
.freude__zeile{display:block;grid-template-columns:none;padding:clamp(18px,2vw,28px) 64px clamp(18px,2vw,28px) 0}
.freude__zeile::after,.freude__zeile i{display:none}
.freude__zeile b{display:block;opacity:.34;transition:opacity .7s var(--e2),transform 1s var(--e1)}
.freude__zeile:hover b{opacity:.7}
.freude__zeile[aria-selected="true"] b{opacity:1;transform:translateX(clamp(8px,1vw,16px))}
.freude__laeufer{position:absolute;z-index:1;left:0;right:0;top:0;height:var(--h,84px);transform:translate3d(0,var(--y,0px),0);transition:transform 1s var(--e1);pointer-events:none}
.freude__laeufer::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold)}
.freude__laeufer i{position:absolute;right:0;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:50%;display:grid;place-items:center;color:var(--tinte);background:linear-gradient(#f6f1e6,#d5cbb8);box-shadow:inset 0 1px 0 #fffdf8,inset 0 -2px 0 #a79c86,0 12px 18px -10px rgba(0,0,0,.8)}
.freude__laeufer i svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.3}
.freude__antwort{transform:translateY(16px);transition:opacity .35s var(--e2),transform .35s var(--e2),visibility 0s .35s}
.freude__antwort.an{transform:none;transition:opacity .9s var(--e2) .28s,transform 1.1s var(--e1) .28s}

/* ---------- Fenster: nur ein Schatten hinter den Buchstaben, kein dunkler Hof ---------- */
.bruch .in::before{display:none}
.bruch .d2{text-shadow:0 .02em .04em rgba(4,8,14,.8),0 .06em .16em rgba(4,8,14,.7),0 .14em .42em rgba(4,8,14,.5)}
.bruch small{text-shadow:0 1px 2px rgba(4,8,14,.9),0 2px 10px rgba(4,8,14,.75)}

/* ---------- Zimmer: vier nebeneinander. Name und Grösse über dem Foto, Preis und Pfeil darunter ---------- */
.zreihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.9vw,30px);align-items:start}
.zr__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:0 6px 14px}
.zr__kopf h3{font-size:clamp(1.458rem,2.16vw,2.052rem);line-height:1.1}
.zr__kopf span{font-family:var(--mono);font-size:11.88px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:.7}
.zr .rahmen__k img{transition:transform 1.6s var(--e1)}
.zr__fuss{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 6px 0}
.zr__fuss b{display:block;font-family:var(--titel);font-weight:700;font-size:clamp(1.102rem,1.35vw,1.296rem);line-height:1.2}
.zr__fuss small{display:block;margin-top:3px;font-size:1.026rem;opacity:.72}
.zr .mehr{right:14px;bottom:14px}
.zr:nth-child(even){margin-top:clamp(0px,3.4vw,54px)}

/* ---------- Küche: grosses Foto als Bühne, die Karte liegt als Blatt über seiner Ecke; darunter die drei Orte ---------- */
.tafel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end}
.tafel__bild{grid-column:1/9;grid-row:1}
.tafel__bild .rahmen__k{aspect-ratio:3/2}
.tafel__karte{grid-column:8/13;grid-row:1;z-index:2;margin-bottom:clamp(-64px,-4.4vw,-30px);padding:clamp(22px,2.6vw,40px)}
.tafel__karte .blatt__kopf h3{font-size:clamp(1.836rem,2.7vw,2.592rem)}
.orte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,44px);margin-top:clamp(74px,7.4vw,118px)}
.ort{position:relative;display:block;padding-top:20px;border-top:1px solid rgba(var(--lh),.2)}
.ort::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--e1)}
.ort[aria-current="true"]::before{transform:none}
.ort__kopf{display:flex;justify-content:space-between;align-items:center;gap:14px}
.ort__kopf b{font-family:var(--titel);font-weight:700;font-size:clamp(1.512rem,2.268vw,2.16rem);line-height:1.1;opacity:.5;transition:opacity .6s var(--e2)}
.ort[aria-current="true"] .ort__kopf b{opacity:1}
.ort__kopf i{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--tinte);background:linear-gradient(#f6f1e6,#d5cbb8);box-shadow:inset 0 1px 0 #fffdf8,inset 0 -2px 0 #a79c86,0 12px 18px -10px rgba(0,0,0,.8);opacity:0;transform:scale(.8);transition:opacity .5s var(--e2),transform .7s var(--e2)}
.ort[aria-current="true"] .ort__kopf i{opacity:1;transform:none}
.ort__kopf i svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.3}
.ort__t{display:block;margin-top:12px;font-size:1.08rem;line-height:1.55;opacity:.78;max-width:44ch}

/* ---------- Band zum Blättern: Pfeile, Ziehen mit der Maus, Laufbalken (das Blättern selbst bleibt nativ) ---------- */
.blaetter__kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:clamp(20px,3.4vw,60px);align-items:end;margin-bottom:clamp(28px,3.4vw,50px)}
.blaetter__kopf p{max-width:52ch}
.pfeile{display:flex;gap:10px}
.pfeile button{transition:transform .5s var(--e2),opacity .4s}
.pfeile button:disabled{opacity:.3}
.fl--blau .pfeile .rund,.fl--nacht .pfeile .rund{color:var(--tinte);background:linear-gradient(#f6f1e6,#d5cbb8);box-shadow:inset 0 1px 0 #fffdf8,inset 0 -2px 0 #a79c86,0 12px 18px -10px rgba(0,0,0,.8)}
.band{display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--rand);padding:6px var(--rand) 30px;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.senk{overflow-x:hidden}
.band>*{flex:none;scroll-snap-align:start}
.band img{pointer-events:none;-webkit-user-drag:none;user-select:none}
.laufbalken{position:relative;height:1px;width:min(280px,44%);margin:6px 0 0 auto;background:rgba(var(--lh),.2)}
.laufbalken i{position:absolute;left:0;top:-.5px;height:2px;width:30%;background:var(--hellgold);will-change:transform}
/* hohe Bildkarte im Band (Spa) */
.bk{display:block;width:clamp(230px,24vw,350px)}
.bk__b{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r-xl);background:#060b13;isolation:isolate;box-shadow:0 34px 44px -30px #000}
.bk__b img{width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--e1)}
.bk:hover .bk__b img{transform:scale(1.06)}
.bk small{display:block;margin-top:14px;padding-left:4px;font-family:var(--mono);font-size:12.42px;letter-spacing:.14em;text-transform:uppercase;opacity:.74}
/* grosse Karte im Band (Angebote): links das Foto mit Datum im Schild, rechts der Text */
.lk{display:grid;grid-template-columns:1.08fr 1fr;width:min(1060px,82vw);min-height:clamp(400px,36vw,520px);border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(#0f1b2b,#0a121d);color:var(--papier);box-shadow:inset 0 0 0 1px rgba(184,152,80,.3),0 40px 54px -36px #000}
.lk__b{position:relative;min-height:0;background:#060b13;overflow:hidden;isolation:isolate}
.lk__b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--e1)}
.lk:hover .lk__b img{transform:scale(1.04)}
.lk .kerbe{--f:var(--blau);color:var(--hellgold);font-size:clamp(1.242rem,1.836vw,1.836rem)}
.lk__t{display:flex;flex-direction:column;justify-content:space-between;gap:26px;padding:clamp(24px,3.2vw,50px)}
.lk__nr{font-family:var(--mono);font-size:12.42px;letter-spacing:.16em;text-transform:uppercase;color:var(--hellgold)}
.lk h3{font-size:clamp(1.836rem,3.132vw,3.24rem);line-height:1.08;text-wrap:balance}
.lk p{margin-top:16px;font-size:clamp(1.08rem,1.242vw,1.231rem);line-height:1.58;opacity:.84;max-width:48ch}
.lk .knoepfe{margin-top:24px}
#spa .jahre{margin-top:clamp(34px,4vw,60px)}
#spa .jahr b{font-size:clamp(2.808rem,7.128vw,7.992rem)}

/* ---------- Feste und Seminare: drei hohe Karten, die mittlere steht tiefer; am Rechner wandern sie verschieden schnell ---------- */
.dreiklang{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,32px);align-items:start;padding-bottom:clamp(20px,4vw,70px)}
.dreiklang .drift:nth-child(2){margin-top:clamp(30px,6vw,96px)}
.drift{will-change:transform}
.dk{display:block}
.dk__b{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-xl);background:#060b13;isolation:isolate;box-shadow:0 40px 50px -34px rgba(var(--ld),.75)}
.dk__b img{width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--e1)}
.dk:hover .dk__b img{transform:scale(1.06)}
.dk .kerbe{font-size:clamp(1.35rem,2.052vw,2.052rem)}
.dk__b .rund{position:absolute;z-index:3;right:16px;top:16px;color:var(--tinte);background:linear-gradient(#f6f1e6,#d5cbb8);box-shadow:inset 0 1px 0 #fffdf8,inset 0 -2px 0 #a79c86,0 12px 18px -10px rgba(0,0,0,.8);transition:transform .7s var(--e2)}
.dk:hover .dk__b .rund{transform:translate(3px,-3px)}
.dk small{display:block;margin-top:14px;padding-left:4px;font-family:var(--mono);font-size:12.42px;letter-spacing:.14em;text-transform:uppercase;opacity:.74}

/* ---------- Schluss als Einladung: Satz des Gastgebers, Buchung, drei Angaben ---------- */
.schluss--einladung{padding-block:clamp(84px,10vw,150px)}
.schluss--einladung .d2{font-size:clamp(2.16rem,4.752vw,4.752rem);line-height:1.1;text-shadow:0 .02em .04em rgba(4,8,14,.85),0 .07em .2em rgba(4,8,14,.75),0 .15em .5em rgba(4,8,14,.6)}
.schluss--einladung .mono{margin-top:18px;text-shadow:0 1px 2px rgba(4,8,14,.9),0 2px 10px rgba(4,8,14,.75)}
.schluss--einladung .leiste{margin:clamp(28px,3.2vw,46px) auto 0;text-align:left}
.schluss__handy{display:none}
.koord{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:center;margin-top:clamp(30px,3.6vw,54px);text-align:left;text-shadow:0 1px 2px rgba(4,8,14,.9),0 2px 12px rgba(4,8,14,.8)}
.koord div{padding:4px clamp(16px,2.4vw,40px);border-left:1px solid rgba(var(--lh),.26)}
.koord div:first-child{border-left:0;padding-left:0}
.koord dt{font-family:var(--mono);font-size:11.88px;letter-spacing:.15em;text-transform:uppercase;color:var(--hellgold)}
.koord dd{margin-top:8px;font-family:var(--titel);font-weight:700;font-size:clamp(1.134rem,1.62vw,1.62rem);line-height:1.25}
.koord dd small{font-family:var(--sans);font-weight:400;font-size:.994rem;opacity:.84}
.koord a{box-shadow:inset 0 -1px 0 currentColor}

@media (max-width:1100px){
  .zreihe{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(30px,5vw,54px)}
  .zr:nth-child(even){margin-top:0}
}
@media (max-width:900px){
  .ehren a,.ehren span{height:58px;padding:0 20px;border-radius:14px}.ehren img{height:28px}
  .freude__zeile{padding-right:54px}
  .freude__laeufer i{width:40px;height:40px;margin-top:-20px}
  .tafel{display:block}
  .tafel__karte{margin:-34px 0 0 clamp(14px,5vw,40px);position:relative}
  .orte{grid-template-columns:minmax(0,1fr);margin-top:40px;gap:0}
  .ort{padding-block:18px}
  .ort__kopf b{opacity:1}.ort__kopf i{opacity:1;transform:none}
  .blaetter__kopf{grid-template-columns:minmax(0,1fr) auto;gap:14px 20px}
  .blaetter__kopf p{grid-column:1/-1;grid-row:2}
  .bk{width:min(70vw,300px)}
  .lk{grid-template-columns:minmax(0,1fr);width:84vw;min-height:0}
  .lk__b{aspect-ratio:3/2}
  .lk__t{padding:24px 22px 26px}
  .dreiklang{grid-template-columns:minmax(0,1fr);gap:26px;padding-bottom:0}
  .dreiklang .drift:nth-child(2){margin-top:0}
  .dk__b{aspect-ratio:3/2}
  .schluss--einladung .leiste{display:none}.schluss__handy{display:flex;justify-content:center;margin-top:26px}
  .koord{grid-template-columns:minmax(0,1fr);justify-content:stretch;text-align:center;gap:18px}
  .koord div,.koord div:first-child{border-left:0;padding:0}
}
@media (max-width:560px){
  .zr__kopf{display:block;padding:0 2px 10px}.zr__kopf span{display:block;margin-top:5px}
  .zr__fuss .rund{display:none}
  .zr .mehr{right:8px;bottom:8px}
}
@media (prefers-reduced-motion:reduce){.stapel .rahmen__k img,.freude__laeufer,.drift{transition:none!important}}
/* Schluss: der Satz steht oben im dunklen Wald, Buchung und Angaben unten auf der Wiese; das erleuchtete Haus bleibt dazwischen frei */
.schluss--einladung{padding-block:clamp(70px,7vw,110px) clamp(46px,5vw,76px)}
.schluss--einladung .wrap{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(220px,25vw,380px)}
.schluss--einladung .schluss__bild img{object-position:50% 58%}
.schluss--einladung .leiste{margin-top:0}
@media (max-width:900px){.schluss--einladung .wrap{gap:clamp(150px,44vw,240px)}}

/* ---------- Begrüssung unter den Auszeichnungen: Aufbau wie «Das Vintage Hotel.» auf der Carlton-Seite ---------- */
.gruss__gitter{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3.4vw,64px);align-items:center}
.gruss__t{grid-column:1/7}.gruss__trio{grid-column:7/-1}
.gruss__gross{margin-top:clamp(22px,2.6vw,36px);font-weight:500;font-size:clamp(1.35rem,1.944vw,1.944rem);line-height:1.36;letter-spacing:-.012em;text-wrap:pretty}
.gruss__gast{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)}
.gruss__b{grid-area:b;display:block;width:clamp(104px,8.6vw,134px);height:clamp(104px,8.6vw,134px);margin-left:7px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgba(var(--ld),.2),0 0 0 6px #fbf8f1,0 0 0 7px rgba(var(--ld),.2),0 22px 28px -16px rgba(var(--ld),.62)}
.gruss__b img{width:100%;height:100%;object-fit:cover}
.gruss__lauf{grid-area:t;align-self:end;margin:0;opacity:.86}
.gruss__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 rgba(var(--ld),.2)}
.gruss__n b{font-family:var(--titel);font-weight:700;font-size:clamp(1.404rem,1.836vw,1.836rem)}
.gruss__n span{font-size:1.08rem;opacity:.72}
.gruss .gruss__t>.knoepfe{margin-top:clamp(30px,3.4vw,50px)}
.gruss__trio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,2vw,30px) clamp(12px,1.4vw,22px)}
.gruss__trio>figure:first-child{grid-column:1/-1}
.gruss__trio .frei__b{border-radius:22px}
.gruss__trio .frei b{margin-top:clamp(12px,1.2vw,18px);font-size:clamp(1.166rem,1.62vw,1.685rem)}
.zahlensatz{text-align:center;font-family:var(--mono);font-size:12.96px;letter-spacing:.2em;text-transform:uppercase;color:var(--hellgold)}
#gastgeber .jahre{margin-top:clamp(30px,3.6vw,54px)}
@media (max-width:900px){
  .gruss__gitter{grid-template-columns:minmax(0,1fr)}
  .gruss__t,.gruss__trio{grid-column:auto}
  .gruss__gast{grid-template-areas:"t t" "b n";column-gap:18px;row-gap:22px}
  .gruss__b{width:92px;height:92px}
  .gruss__n{display:grid;border-top:0;padding-top:0;align-self:center}
}

/* Kurze Filme des Hauses im Rahmen: füllen ihn wie ein Foto; im Stapel blenden sie wie die Fotos */
video.auto{display:block;width:100%;height:100%;object-fit:cover;background:#060b13}
.stapel .rahmen__k video,.stapel.da .rahmen__k video{position:absolute;inset:0;z-index:0;opacity:0;transform:scale(1.04);transition:opacity .9s var(--e2),transform 0s linear .9s}
.stapel .rahmen__k video.an,.stapel.da .rahmen__k video.an{opacity:1;transform:none;transition:opacity 1.25s var(--e2),transform 2.6s var(--e1)}

/* ======================================================================================================================
   08.10.2026 20:40 · Roberts Liste zur Startseite: Leiste und Eck-Knöpfe tiefer und etwas grösser, Tisch-Feld neben der Buchung
   (statt loser Zeile), Auszeichnungen auf einem Verlauf bzw. frei im Fenster, Kacheln heben sich, Film am Herd läuft einmal.
   Stand davor: _sicherung/vor-kopf-und-band/
   ====================================================================================================================== */
@media (min-width:901px){
  .nav{top:30px}
  .nav__insel{height:66px;padding:0 30px 0 18px}
  .nav__logo img{height:47px}
  .nav__links a{font-size:15.12px}
  .glanz{top:38px;height:50px;padding:0 23px;font-size:12.96px}
  .glanz svg{width:13px;height:13px}
}
@media (min-width:1121px) and (max-width:1400px){
  .nav__insel{padding:0 22px 0 15px}
  .nav__logo img{height:42px}
  .nav__links a{font-size:14.04px}
  .glanz{top:40px;height:46px;padding:0 16px;font-size:11.88px}
}

/* Auftakt: Buchung (Elfenbein) und Tisch (Nachtblau) als ein Paar auf einer Linie */
.auftakt__reihe{display:flex;align-items:stretch;gap:14px;margin-top:clamp(22px,2.6vw,34px)}
.auftakt__reihe .leiste{margin-top:0;flex:1 1 0;width:auto;max-width:880px;min-width:0}
.tischfeld{flex:none;margin-left:auto;display:flex;align-items:center;padding:9px 11px 9px 4px;border-radius:22px;color:var(--papier);border:1px solid rgba(var(--lh),.2);
  background:linear-gradient(180deg,#223452,#0a121d);box-shadow:inset 0 1px 0 rgba(226,236,255,.16),0 26px 44px -24px rgba(0,0,0,.9)}
.tischfeld p{display:grid;gap:3px;padding:9px 20px;white-space:nowrap}
.tischfeld p+p{border-left:1px solid rgba(var(--lh),.16)}
.tischfeld span{font-family:var(--mono);font-size:11.34px;letter-spacing:.15em;text-transform:uppercase;color:var(--hellgold)}
.tischfeld b,.tischfeld a{font:500 1.145rem var(--sans)}
.tischfeld a{text-decoration:underline;text-decoration-color:rgba(var(--lh),.34);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .4s}
.tischfeld a:hover{text-decoration-color:var(--gold)}
.tischfeld .rund{margin-left:6px;width:46px;height:46px;color:var(--tinte);background:linear-gradient(#f6f1e6,#d5cbb8);box-shadow:inset 0 1px 0 #fffdf8,inset 0 -2px 0 #a79c86,0 12px 18px -10px rgba(0,0,0,.8)}
@media (max-width:1340px){
  .auftakt__reihe{flex-direction:column;align-items:flex-start}
  .auftakt__reihe .leiste{flex:none;width:min(880px,100%)}
  .tischfeld{margin-left:0}
}
@media (max-height:780px) and (min-width:901px) and (max-width:1340px){.tischfeld{display:none}}
@media (max-width:900px){.auftakt__reihe{display:none}}

/* Auszeichnungen auf der Startseite: die Fläche läuft vom Dunkel des Auftakts ins Papier, die Plaketten ziehen davor durch */
.ehren--fluss{background:linear-gradient(180deg,#0b100f 0%,#0c1522 20%,#16263c 44%,#4a5b73 64%,#a5aaab 80%,#dcd6ca 92%,var(--papier) 100%);box-shadow:none;
  padding-block:clamp(26px,2.8vw,44px) clamp(64px,7vw,112px)}
.ehren--fluss a,.ehren--fluss span{box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 #a3977c,inset 0 -4px 6px -2px rgba(90,74,40,.35),inset 0 0 0 1px rgba(184,152,80,.55),0 22px 22px -14px rgba(4,8,14,.72)}
/* Auszeichnungen ohne eigene Fläche: sie schweben unten im Fenster direkt über dem Foto */
.bruch--band{min-height:min(86vh,840px)}
.ehren--frei{position:absolute;z-index:2;left:0;right:0;bottom:clamp(22px,2.8vw,44px);background:none;box-shadow:none;padding-block:0 18px}
.ehren--frei a,.ehren--frei span{box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 #a3977c,inset 0 -4px 6px -2px rgba(90,74,40,.35),inset 0 0 0 1px rgba(184,152,80,.55),0 20px 22px -12px rgba(0,0,0,.85)}
@media (max-width:900px){.bruch--band{min-height:76svh}}

/* Kacheln mit Tiefe wie auf der Carlton-Seite: sie liegen auf einem Schatten und heben sich unter dem Zeiger */
.frei__b{transform:translateZ(0);transition:transform .7s var(--e2),box-shadow .6s var(--e2)}
.frei__b img{transition:transform 1.6s var(--e1)}
.frei b{transition:color .4s}
.hell .frei__b{box-shadow:0 0 0 1px rgba(var(--ld),.08),0 34px 40px -26px rgba(var(--ld),.7)}
@media (hover:hover){
  .frei:hover .frei__b{transform:translateY(-8px);box-shadow:0 0 0 2px var(--gold),0 46px 46px -30px rgba(0,0,0,.9)}
  .hell .frei:hover .frei__b{box-shadow:0 0 0 2px var(--gold),0 46px 46px -30px rgba(var(--ld),.74)}
  .frei:hover .frei__b img{transform:scale(1.06)}
  .frei:hover b{color:var(--gold)}
  .hell .frei:hover b{color:#8a6f33}
}

/* Film am Herd: nach dem einen Durchlauf dunkelt der Rahmen ab und die Wortmarke des Hauses erscheint */
.abspann{position:absolute;inset:0;z-index:9998;display:grid;place-items:center;background:rgba(6,10,17,.8);opacity:0;transition:opacity 1.6s var(--e2);pointer-events:none}
.abspann i{display:block;width:min(58%,520px);aspect-ratio:760/141;background:url(../logo/wortmarke-leiste.webp?v=d641bbdc-dh1410) 50%/contain no-repeat;opacity:0;transform:translateY(16px);transition:opacity 1.4s var(--e2) .5s,transform 1.9s var(--e1) .5s}
.stapel.ende .rahmen__k>.kerbe:first-of-type.an~.abspann,.stapel.ende .rahmen__k>.kerbe:first-of-type.an~.abspann i{opacity:1;transform:none}

/* ======================================================================================================================
   08.10.2026 21:00 · Roberts Durchgang über alle Seiten, Teil 2: Kopf der Unterseiten auf Papier, Auftritt von Zimmern und
   Restaurants (Mosaik, grosser Name, Angaben als Zeilen), Papier mit Tiefe, Schluss im letzten Abschnitt, Zimmer-Karten,
   «Worauf freuen Sie sich?» mit grossen Zeilen, Gourmet-Aufenthalt als breites Foto mit Karte.
   ====================================================================================================================== */

/* ---------- Kopf der Unterseiten: kein Blau mehr. Titel auf Papier, das Foto steht frei und läuft rechts aus dem Bild ---------- */
.seitenkopf{background:var(--papier);color:var(--tinte);padding-top:clamp(128px,11vw,172px);padding-bottom:clamp(20px,3vw,48px)}
.seitenkopf__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4.4vw,80px);align-items:center}
.seitenkopf .seitenkopf__bild{position:relative;z-index:auto;inset:auto;width:auto;aspect-ratio:4/3;margin-right:calc(-1*var(--rand) - max(0px,(100vw - var(--max))/2));
  border-radius:var(--r-xl) 0 0 var(--r-xl);overflow:hidden;background:#d9d2c4;box-shadow:0 0 0 1px rgba(var(--ld),.1),0 50px 60px -40px rgba(var(--ld),.8)}
.seitenkopf .seitenkopf__bild img{object-position:50% 50%;transform-origin:50% 50%}
.seitenkopf h1{max-width:none;font-size:clamp(2.484rem,5.076vw,4.752rem)}
.seitenkopf .gold{color:var(--stahl)}
.seitenkopf .lead{text-shadow:none;max-width:44ch;opacity:.86}
@media (max-width:900px){
  .seitenkopf{padding-top:0;padding-bottom:10px}
  .seitenkopf__in{grid-template-columns:minmax(0,1fr);gap:26px}
  .seitenkopf .seitenkopf__bild{order:-1;margin:0 calc(-1*var(--rand));border-radius:0;aspect-ratio:4/3;box-shadow:none}
}

/* ---------- Auftritt: Mosaik aus einem grossen und zwei kleinen Fotos, daneben Name, Satz, Angaben, Knöpfe ---------- */
.schau{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4.6vw,84px);align-items:center}
.schau--um{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.schau--um .mos{order:2}
.mos{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.5/1}
.mos__b{position:relative;min-width:0;min-height:0}
.mos__b:first-child{grid-row:1/3;grid-column:1}
.schau--um .mos{grid-template-columns:minmax(0,1fr) minmax(0,1.62fr)}
.schau--um .mos__b:first-child{grid-column:2}
.schau--um .mos__b:not(:first-child){grid-column:1}
.mos__b .rahmen__k{position:absolute;inset:0;border-radius:22px;background:#d9d2c4;box-shadow:0 0 0 1px rgba(var(--ld),.1),0 34px 40px -28px rgba(var(--ld),.72);transition:transform .7s var(--e2),box-shadow .6s var(--e2)}
.mos__b:first-child .rahmen__k{border-radius:30px}
@media (hover:hover){.mos__b:hover .rahmen__k{transform:translateY(-7px);box-shadow:0 0 0 2px var(--gold),0 46px 46px -30px rgba(var(--ld),.76)}}
.schau__n{font-family:var(--titel);font-weight:700;font-size:clamp(2.484rem,4.86vw,4.644rem);line-height:1.03;letter-spacing:-.012em}
.schau__s{margin-top:clamp(16px,1.8vw,26px);font-size:clamp(1.166rem,1.458vw,1.361rem);line-height:1.55;max-width:46ch}
.werte{margin-top:clamp(20px,2.2vw,32px);border-top:1px solid rgba(var(--ld),.22)}
.werte div{display:grid;grid-template-columns:minmax(104px,30%) minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(var(--ld),.22)}
.werte dt{font-family:var(--mono);font-size:11.88px;letter-spacing:.16em;text-transform:uppercase;color:var(--stahl)}
.werte dd{font-family:var(--titel);font-weight:700;font-size:clamp(1.134rem,1.404vw,1.339rem);line-height:1.3}
.werte a{box-shadow:inset 0 -1px 0 currentColor}
.schau .knoepfe{margin-top:clamp(22px,2.4vw,34px)}
@media (max-width:900px){
  .schau,.schau--um{grid-template-columns:minmax(0,1fr)}
  .schau--um .mos{order:0}
  .mos__b .rahmen__k{border-radius:16px}.mos__b:first-child .rahmen__k{border-radius:22px}
}

/* ---------- Papier mit Tiefe: jedes Blatt liegt auf einem zweiten, leicht verdrehten Bogen; breite Blätter haben einen Falz in der Mitte ---------- */
.blatt{isolation:isolate;background:none;box-shadow:none;border-radius:4px}
.blatt::before{content:'';position:absolute;z-index:-1;inset:0;border-radius:4px;background:linear-gradient(180deg,#fffdf8,var(--blatt));
  box-shadow:inset 0 0 0 1px rgba(138,117,69,.2),inset 0 1px 0 #fff,0 2px 0 #e3d9c2,0 30px 46px -30px rgba(0,0,0,.8)}
.blatt::after{content:'';position:absolute;z-index:-2;left:10px;right:10px;top:14px;bottom:-9px;border-radius:4px;background:#f3ecda;transform:rotate(-.5deg);
  box-shadow:inset 0 0 0 1px rgba(138,117,69,.18),0 7px 0 -2px #e9e0cb,0 8px 0 -2px rgba(138,117,69,.32),0 16px 22px -12px rgba(0,0,0,.55)}
.hell .blatt::before{box-shadow:inset 0 0 0 1px rgba(138,117,69,.2),inset 0 1px 0 #fff,0 2px 0 #e3d9c2,0 30px 46px -30px rgba(var(--ld),.5)}
@media (min-width:901px){
  .blatt:has(>.blatt__spalten)::before{background:
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(255,255,255,.95) calc(50% - .5px),rgba(255,255,255,.95) calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(90deg,transparent calc(50% - 40px),rgba(116,92,44,.08) 50%,transparent 50%),
    linear-gradient(90deg,transparent 50%,rgba(116,92,44,.13) 50%,transparent calc(50% + 56px)),
    linear-gradient(180deg,#fffdf8,var(--blatt))}
}

/* ---------- Schluss einer Seite: mittig im letzten Abschnitt, Knöpfe darunter ---------- */
.ende{margin-top:clamp(60px,7.4vw,118px);text-align:center}
.ende .uebergang{margin-block:0 clamp(34px,4vw,60px)}
.ende__satz{font-family:var(--titel);font-weight:700;font-size:clamp(2.052rem,3.888vw,3.564rem);line-height:1.1;letter-spacing:-.01em}

/* ---------- Startseite, Zimmer: vier grosse Karten aus Elfenbein, je ein grosses Foto mit Namen, Satz des Hauses, Preis ---------- */
.zkarten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.2vw,34px)}
.zkarte{display:flex;min-width:0}
.zkarte__k{flex:1;display:flex;flex-direction:column;min-width:0;padding:10px 10px 0;border-radius:36px;background:linear-gradient(180deg,#fffdf8,#f7f1e4);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(184,152,80,.3),0 3px 0 #cfc4a8,0 44px 50px -34px rgba(var(--ld),.62);transition:transform .7s var(--e2),box-shadow .6s var(--e2)}
.zkarte__b{position:relative;aspect-ratio:16/10;border-radius:27px;overflow:hidden;background:#d9d2c4;isolation:isolate}
.zkarte__b a{display:block;width:100%;height:100%}
.zkarte__b img{width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--e1)}
.zkarte .kerbe{--f:#fdfaf3;color:var(--tinte);font-family:var(--titel);font-weight:700;font-size:clamp(1.62rem,2.7vw,2.592rem);line-height:1}
.zkarte .mehr{right:14px;bottom:14px}
.zkarte__t{flex:1;display:flex;flex-direction:column;padding:clamp(18px,2vw,30px) clamp(14px,1.8vw,26px) clamp(18px,2vw,28px)}
.zkarte__s{font-size:clamp(1.102rem,1.35vw,1.274rem);line-height:1.55;opacity:.88;max-width:56ch}
.zkarte__u{margin-top:auto;padding-top:clamp(18px,2vw,28px);display:flex;justify-content:space-between;align-items:center;gap:16px}
.zkarte__u p{padding-top:clamp(14px,1.6vw,22px);border-top:1px solid rgba(var(--ld),.18);flex:1}
.zkarte__u b{display:block;font-family:var(--titel);font-weight:700;font-size:clamp(1.404rem,2.052vw,1.944rem);line-height:1.15}
.zkarte__u small{display:block;margin-top:5px;font-family:var(--mono);font-size:11.88px;letter-spacing:.15em;text-transform:uppercase;color:var(--stahl)}
.zkarte__u .rund{width:56px;height:56px}
@media (hover:hover){
  .zkarte:hover .zkarte__k{transform:translateY(-8px);box-shadow:inset 0 1px 0 #fff,0 0 0 2px var(--gold),0 3px 0 #cfc4a8,0 56px 56px -36px rgba(var(--ld),.7)}
  .zkarte:hover .zkarte__b img{transform:scale(1.05)}
}
@media (max-width:900px){.zkarten{grid-template-columns:minmax(0,1fr)}.zkarte__k{border-radius:28px;padding:8px 8px 0}.zkarte__b{border-radius:21px;aspect-ratio:3/2}}

/* ---------- Breites Foto mit Karte über der Ecke (Vorbild «Für Sie als Direktbucher» der Carlton-Seite) ---------- */
.weit .rahmen__k{aspect-ratio:21/9}
.weit__unten{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,70px);align-items:start;margin-top:calc(-1*clamp(70px,10vw,150px));padding:0 clamp(14px,3vw,48px)}
.tafelkarte{display:grid;gap:16px;justify-items:start;padding:clamp(24px,3vw,46px);border-radius:var(--r-m);color:var(--tinte);background:linear-gradient(180deg,#fffdf8,#f3ecdd 60%,#e4d9c2);
  box-shadow:inset 0 1px 0 #fff,0 4px 0 #a79c86,0 34px 50px -30px rgba(0,0,0,.9)}
.tafelkarte .gold{color:var(--stahl)}
.tafelkarte .d3{font-size:clamp(1.944rem,3.24vw,3.024rem)}
.tafelkarte .knoepfe{margin-top:8px}
.weit__r{padding-top:calc(clamp(70px,10vw,150px) + clamp(24px,2.8vw,44px))}
.weit__r .mono{color:var(--hellgold);margin-bottom:6px}
.weit__r .gang{border-color:rgba(var(--lh),.16)}
.weit__r .preis{margin-top:22px}
@media (max-width:900px){
  .weit .rahmen__k{aspect-ratio:3/2}
  .weit__unten{grid-template-columns:minmax(0,1fr);margin-top:-40px;padding:0 10px}
  .weit__r{padding-top:6px}
}

/* ======================================================================================================================
   08.10.2026 21:30 · Roberts Durchgang, Teil 3: grosse Sätze, wandernde Foto-Gruppen, Karten aus Elfenbein für Termine,
   Säulen, Posten, Team; Küche, Spa, Feste, Angebote und Haus damit neu gesetzt.
   ====================================================================================================================== */

/* ---------- Grosser Satz des Hauses, rollt zeilenweise ---------- */
.gross{margin-top:clamp(18px,2vw,28px);font-family:var(--titel);font-weight:700;font-size:clamp(1.458rem,2.376vw,2.268rem);line-height:1.22;letter-spacing:-.006em;text-wrap:balance}
.kopfzeile .gross{margin-top:0}
.hell .gross{color:var(--tinte)}

/* ---------- Drei Fotos als Gruppe; am Rechner wandern sie beim Scrollen verschieden schnell ---------- */
.trio{position:relative;aspect-ratio:1/.98;min-width:0}
.trio .drift{position:absolute}
.trio .drift:nth-child(1){left:0;top:5%;width:70%}
.trio .drift:nth-child(2){right:0;top:0;width:41%;z-index:2}
.trio .drift:nth-child(3){right:5%;bottom:0;width:49%;z-index:3}
.trio__b{position:relative;overflow:hidden;border-radius:26px;background:#060b13;isolation:isolate;box-shadow:0 0 0 1px rgba(var(--lh),.16),0 40px 46px -30px #000}
.hell .trio__b{background:#d9d2c4;box-shadow:0 0 0 1px rgba(var(--ld),.1),0 0 0 6px #fbf8f1,0 0 0 7px rgba(var(--ld),.14),0 40px 46px -28px rgba(var(--ld),.8)}
.trio .drift:nth-child(1) .trio__b{aspect-ratio:4/5;border-radius:32px}
.trio .drift:nth-child(2) .trio__b{aspect-ratio:1}
.trio .drift:nth-child(3) .trio__b{aspect-ratio:3/2}
.trio__b img{width:100%;height:100%;object-fit:cover}
.fl--blau .trio .kerbe{--f:var(--blau)}
@media (max-width:900px){.trio{margin-top:10px}.trio__b{border-radius:18px}.trio .drift:nth-child(1) .trio__b{border-radius:22px}}

/* ---------- Säulen: drei Karten aus Elfenbein ---------- */
.saeulen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,30px);margin-top:clamp(48px,6vw,96px)}
.saeule{display:flex;min-width:0}
.saeule__k{flex:1;padding:clamp(24px,2.8vw,42px);border-radius:var(--r-l);color:var(--tinte);background:linear-gradient(180deg,#fffdf8,#f6f0e3);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(184,152,80,.3),0 3px 0 #cfc4a8,0 40px 46px -34px rgba(var(--ld),.6);transition:transform .7s var(--e2),box-shadow .6s var(--e2)}
.saeule__k svg{display:block;width:40px;height:auto;color:var(--gold);margin-bottom:18px}
.saeule__k p{margin-top:12px;font-size:1.102rem;line-height:1.55;opacity:.86}
@media (hover:hover){.saeule:hover .saeule__k{transform:translateY(-8px);box-shadow:inset 0 1px 0 #fff,0 0 0 2px var(--gold),0 3px 0 #cfc4a8,0 52px 52px -36px rgba(var(--ld),.7)}}
@media (max-width:900px){.saeulen{grid-template-columns:minmax(0,1fr)}}

/* ---------- Termin als Karte: Tag gross, Thema darunter ---------- */
.termine{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,22px);margin-top:clamp(22px,2.6vw,36px)}
.termine--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.termine--kante{position:relative;z-index:2;margin-top:calc(-1*clamp(54px,7.4vw,116px));padding-inline:clamp(14px,3vw,48px)}
.termin{display:flex;min-width:0}
.termin__k{flex:1;padding:clamp(18px,2vw,30px);border-radius:var(--r-m);color:var(--tinte);background:linear-gradient(180deg,#fffdf8,#f3ecdd 60%,#e6dcc6);
  box-shadow:inset 0 1px 0 #fff,0 4px 0 #a79c86,0 30px 40px -28px rgba(0,0,0,.85);transition:transform .7s var(--e2)}
.hell .termin__k{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(184,152,80,.3),0 4px 0 #a79c86,0 34px 44px -30px rgba(var(--ld),.7)}
.termin__d{display:flex;align-items:flex-end;gap:12px;padding-bottom:14px;border-bottom:3px double rgba(var(--ld),.3)}
.termin__d b{font-family:var(--titel);font-weight:700;font-size:clamp(2.7rem,4.536vw,4.32rem);line-height:.86;color:var(--stahl)}
.termin__d span{font-family:var(--titel);font-weight:700;font-size:1.296rem;line-height:1.1;padding-bottom:2px}
.termin__d small{display:block;margin-top:5px;font-family:var(--mono);font-weight:400;font-size:11.34px;letter-spacing:.16em;text-transform:uppercase;opacity:.72}
.termin h3{margin-top:14px;font-family:var(--titel);font-weight:700;font-size:clamp(1.242rem,1.62vw,1.534rem);line-height:1.2}
.termin__o{color:var(--stahl);padding-bottom:12px;border-bottom:3px double rgba(var(--ld),.3)}
.termin__t{margin-top:8px;font-size:1.058rem;line-height:1.5;opacity:.82}
@media (hover:hover){.termin:hover .termin__k{transform:translateY(-7px)}}
@media (max-width:900px){.termine,.termine--3{grid-template-columns:minmax(0,1fr)}.termine--kante{margin-top:-34px;padding-inline:10px}}
.curling{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,4vw,70px);align-items:center;margin-top:clamp(48px,6vw,96px);padding-top:clamp(34px,4vw,60px);border-top:3px double rgba(var(--ld),.3)}
.curling .termine{margin-top:0}
@media (max-width:900px){.curling{grid-template-columns:minmax(0,1fr)}}

/* ---------- Grosse Zahlen zu dritt ---------- */
.jahre--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.jahre--3 .jahr b{font-size:clamp(2.592rem,7.992vw,8.64rem)}

/* ---------- Posten: Name gross, daneben der Preis, darunter der Satz ---------- */
.posten{margin-top:clamp(22px,2.6vw,36px);border-top:1px solid rgba(var(--ld),.22)}
.posten article{padding:clamp(16px,1.8vw,24px) 0;border-bottom:1px solid rgba(var(--ld),.22)}
.posten article>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.posten h3{font-family:var(--titel);font-weight:700;font-size:clamp(1.512rem,2.376vw,2.268rem);line-height:1.1}
.posten small{font-family:var(--mono);font-size:12.42px;letter-spacing:.15em;text-transform:uppercase;color:var(--stahl);white-space:nowrap}
.posten p{margin-top:8px;max-width:52ch;opacity:.86}

/* ---------- Zwei Texte nebeneinander zum Blatt ---------- */
.naechte article{padding:clamp(18px,2vw,28px) 0;border-top:1px solid rgba(var(--lh),.18)}
.naechte article:last-child{border-bottom:1px solid rgba(var(--lh),.18)}
.naechte p{margin-top:10px;opacity:.88}

/* ---------- Kleines Blatt, Brief, Team ---------- */
.blatt--klein{padding:clamp(18px,2.2vw,30px) clamp(20px,2.6vw,36px)}
.blatt--klein .gang:first-child{padding-top:4px}
.blatt--klein .blatt__fuss{margin-top:14px}
.blatt.brief p{margin-top:14px;font-size:1.145rem;line-height:1.62}
.blatt.brief .unter{margin-top:26px;font-family:var(--titel);font-weight:700;font-size:1.62rem}
.blatt.brief .blatt__fuss{font-size:.994rem}
.team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(18px,2vw,26px)}
.team__k{padding:16px 18px 15px;border-radius:16px;background:linear-gradient(#fffdf8,#f3ecdd 46%,#e2d7bf);
  box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 #a3977c,inset 0 0 0 1px rgba(184,152,80,.5),0 16px 18px -12px rgba(var(--ld),.55)}
.team__k b{display:block;font-family:var(--titel);font-weight:700;font-size:clamp(1.166rem,1.458vw,1.361rem);line-height:1.15}
.team__k small{display:block;margin-top:6px;font-family:var(--mono);font-size:11.34px;letter-spacing:.15em;text-transform:uppercase;color:var(--stahl)}

/* ---------- Werte in der rechten Spalte unter dem breiten Foto, auf Hell ---------- */
.hell .weit__r .werte{margin-top:0}
.hell .tafelkarte{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(184,152,80,.3),0 4px 0 #a79c86,0 34px 50px -30px rgba(var(--ld),.7)}

/* ---------- Auszeichnungen auf der Startseite: wieder ein Streifen, im Nachtblau der Leiste oben mit leichtem Verlauf (Robert 08.10.2026 21:40) ---------- */
.ehren--navy{background:linear-gradient(180deg,#223452,#16243a 52%,#0a121d);border-block:1px solid rgba(var(--lh),.2);box-shadow:inset 0 1px 0 rgba(226,236,255,.16),inset 0 -1px 0 rgba(0,0,0,.6)}

/* ---------- Startseite, Zimmer: vier hohe Kacheln, Name und Preis mittig darunter (Vorbild: Carlton-Startseite, Robert 08.10.2026 20:53) ---------- */
.zhoch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,2.6vw,40px) clamp(14px,1.7vw,26px)}
.zhoch .frei__b{border-radius:26px}
.zhoch .frei b{margin-top:clamp(16px,1.7vw,26px);font-size:clamp(1.512rem,2.268vw,2.268rem);line-height:1.1}
.zhoch .frei small{margin-top:9px;font-size:clamp(1.08rem,1.188vw,1.188rem);opacity:.84}
.zhoch .frei i{display:block;margin-top:7px;font-style:normal;font-family:var(--mono);font-size:11.34px;letter-spacing:.15em;text-transform:uppercase;color:var(--stahl)}
@media (max-width:900px){.zhoch{grid-template-columns:repeat(2,minmax(0,1fr))}.zhoch .frei__b{border-radius:18px}}
/* der Film läuft unter der Wortmarke weiter: etwas dichterer Schleier */
.abspann{background:rgba(6,10,17,.84)}
/* Fenster mit Auszeichnungen: der Satz steht hier im Fenster selbst (nicht fest in der Bildschirmmitte), damit die Plaketten nie über ihn laufen */
/* 08.10.2026 23:00 (Robert: «er ist auch kein Fenster. Ein Fenster geht auf und schliesst sich. Und der Text dahinter verschwindet»): der Satz steht jetzt
   auch hier fest in der Bildschirmmitte und rollt Zeile für Zeile hoch. Damit die Plaketten nie über ihn laufen, sitzt er in einem eigenen Glas, das über
   den Plaketten endet: dort verschwindet er, wenn das Fenster weiterzieht. */
.bruch--band{display:grid;grid-template-rows:minmax(0,1fr) auto;place-items:stretch;padding:0}
.bruch__glas{position:relative;min-height:0;clip-path:inset(0)}
.bruch--band .ehren--frei{position:relative;left:auto;right:auto;bottom:auto;margin:clamp(10px,1.2vw,18px) 0 clamp(22px,2.8vw,44px)}

/* ======================================================================================================================
   08.10.2026 22:30 · Scroll-Gefühl wie auf der Carlton-Startseite (Roberts Referenz localhost:8912/index.html).
   Die Werte der Bewegung waren schon dieselben; es fehlte, dass JEDES Foto beim Hochkommen aus der Vergrösserung zurückgeht
   und danach sacht in seinem Rahmen gleitet. Auf der Carlton-Seite sitzen alle Fotos in .rahmen__k, hier nur zwei von dreissig.
   Jetzt gilt dasselbe für Kacheln (.frei__b), Band-Karten (.bk__b), wandernde Karten (.dk__b) und Foto-Gruppen (.trio__b).
   ====================================================================================================================== */
[data-r="schweb"] :is(.frei__b,.bk__b,.dk__b) img,[data-r="schweb"].trio__b img{transform:scale(1.14);transition:transform 1.4s var(--e3);transition-delay:calc(var(--i,0)*90ms)}
[data-r="schweb"].da :is(.frei__b,.bk__b,.dk__b) img,[data-r="schweb"].da.trio__b img{transform:none}
@media (prefers-reduced-motion:reduce){[data-r] :is(.frei__b,.bk__b,.dk__b) img,[data-r].trio__b img{transform:none!important;transition:none}}
.still [data-r] :is(.frei__b,.bk__b,.dk__b) img,.still [data-r].trio__b img{transform:none!important;transition:none}
[data-r="schweb"] .lk__b img{transform:scale(1.14);transition:transform 1.4s var(--e3);transition-delay:calc(var(--i,0)*90ms)}
[data-r="schweb"].da .lk__b img{transform:none}
.still [data-r] .lk__b img{transform:none!important;transition:none}

/* ======================================================================================================================
   08.10.2026 22:30 · Roberts zweiter Durchgang (Farbe im Auftakt Fassung 99, Auszeichnungen auf dem Foto, Begrüssung,
   «Worauf freuen Sie sich?» zum Blättern, grosse Zimmer, Restaurant gewählt mit eigener Karte, Mosaik bündig, Tapete im Seitenkopf)
   ====================================================================================================================== */
/* Auftakt Fassung 99: über dem Foto stehen Leiste und Eck-Knöpfe in Creme, der Titel ganz in Creme. Nachtblau kommt erst nach dem Foto (Klasse am body, main.js) */
.auftakt h1 .gold{color:var(--papier)}
.auf-foto .nav__insel,.auf-foto .glanz{background:linear-gradient(#f8f4ea,#e8dfcd);border-color:transparent;box-shadow:inset 0 1px 0 #fffdf8,inset 0 -2px 0 #a79c86,0 16px 30px -18px rgba(0,0,0,.9);animation:none}
.auf-foto .glanz{color:#111a26}
.auf-foto .nav__links a{color:#1b2533}
.auf-foto .nav__links a:hover,.auf-foto .nav__links a[aria-current]{color:#000}
.auf-foto .nav__logo img{filter:brightness(0) saturate(100%) invert(9%) sepia(22%) saturate(1400%) hue-rotate(178deg)}
.auf-foto .burger{background:linear-gradient(#27405f,#0f1b2b);box-shadow:inset 0 1px 0 #5a7396,inset 0 -2px 0 #060b13}
.auf-foto .burger span{background:var(--papier)}
/* Die Auszeichnungen laufen ohne eigene Fläche unten über dem Auftaktfoto. Dafür ist der Auftakt am Rechner um diesen Streifen höher als der Bildschirm */
@media (min-width:901px){
  .auftakt__steh{--streifen:clamp(118px,10.4vw,150px);min-height:calc(100svh + var(--streifen))}
  .auftakt__t{padding-bottom:calc(var(--streifen) + clamp(24px,3vw,44px))}
  .ehren--auftakt{bottom:clamp(14px,1.8vw,28px);padding-block:0 10px}
}
@media (max-width:900px){.ehren--auftakt{position:relative;bottom:auto;padding-block:4px 26px}}

/* Begrüssung: rechts eine Foto-Gruppe wie auf den Unterseiten statt dreier Kacheln mit Namen */
.gruss__trio{display:block}

/* «Worauf freuen Sie sich?»: ein Foto in der Mitte, Text darunter, zum Blättern */
.wahl{overflow:hidden}
.wahl__kopf{text-align:center}
.wahl__reiter{display:flex;flex-wrap:wrap;justify-content:center;gap:4px clamp(18px,2.8vw,48px);margin-top:clamp(16px,1.8vw,26px)}
.wahl__reiter button{position:relative;padding:10px 2px;font-family:var(--titel);font-weight:700;font-size:clamp(1.134rem,1.62vw,1.534rem);line-height:1.2;color:rgba(var(--lh),.44);transition:color .5s var(--e1)}
.wahl__reiter button::after{content:'';position:absolute;left:0;right:0;bottom:3px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--e1)}
.wahl__reiter button:hover{color:rgba(var(--lh),.8)}
.wahl__reiter button[aria-selected="true"]{color:var(--papier)}
.wahl__reiter button[aria-selected="true"]::after{transform:none}
.wahl__buehne{position:relative;margin-top:clamp(24px,2.8vw,42px);--bw:min(1040px,66vw)}
/* Galerie mit Tiefe (Robert 08.10.2026: «ein Screen vor sich, dann geht er nach rechts, verschwindet nach hinten, und von hinten links kommt der nächste und übernimmt»):
   alle Blätter liegen übereinander; vorn steht eines, das vorige steht blass rechts hinten, das nächste blass links hinten. Bewegt wird nur transform und opacity. */
.wahl__band{position:relative;display:grid;padding:8px 0 12px;touch-action:pan-y}
.wahl__blatt{grid-area:1/1;width:var(--bw);justify-self:center;min-width:0;pointer-events:none}
.wahl__blatt .rahmen{transform-origin:50% 50%;opacity:0;transform:translate3d(-58%,0,0) scale(.56);transition:transform 1.25s var(--e1),opacity .9s var(--e1);will-change:transform,opacity;cursor:pointer}
.wahl__blatt[data-lage="vorn"]{z-index:3;pointer-events:auto}
.wahl__blatt[data-lage="vorn"] .rahmen{opacity:1;transform:none;cursor:auto}
.wahl__blatt[data-lage="links"],.wahl__blatt[data-lage="rechts"]{z-index:2}
.wahl__blatt[data-lage="links"] .rahmen,.wahl__blatt[data-lage="rechts"] .rahmen{pointer-events:auto;opacity:.32}
.wahl__blatt[data-lage="links"] .rahmen{transform:translate3d(-39%,0,0) scale(.76)}
.wahl__blatt[data-lage="rechts"] .rahmen{transform:translate3d(39%,0,0) scale(.76)}
.wahl__blatt[data-lage="fern-r"] .rahmen{transform:translate3d(58%,0,0) scale(.56)}
.wahl__blatt.sprung .rahmen{transition:none}
.still .wahl__blatt .rahmen{transition:none}
@media (prefers-reduced-motion:reduce){.wahl__blatt .rahmen{transition:none}}
.wahl .rahmen__k{aspect-ratio:16/9}
.wahl__t{max-width:62ch;margin:clamp(20px,2.2vw,32px) auto 0;text-align:center;opacity:0;transform:translateY(14px);transition:opacity .4s var(--e1),transform .6s var(--e1)}
.wahl__blatt.an .wahl__t{opacity:1;transform:none;transition:opacity .8s var(--e1) .18s,transform 1s var(--e1) .18s}
.wahl__t p{margin-top:12px;opacity:.86;text-wrap:pretty}
.wahl__t .knoepfe{justify-content:center;margin-top:22px}
.wahl__pf{position:absolute;z-index:3;top:calc(var(--bw)*.28125 + 8px);margin-top:-24px}
.wahl__pf--l{left:calc((100% - var(--bw))/2 - 24px)}.wahl__pf--r{right:calc((100% - var(--bw))/2 - 24px)}
@media (max-width:900px){.wahl__buehne{--bw:86vw}.wahl .rahmen__k{aspect-ratio:4/3}.wahl__pf{top:calc(var(--bw)*.375 + 8px)}.wahl__pf--l{left:6px}.wahl__pf--r{right:6px}.wahl__blatt[data-lage="links"] .rahmen,.wahl__blatt[data-lage="rechts"] .rahmen{opacity:0}}

/* Zimmer der Startseite: zwei grosse Querformate je Reihe, Name links, Preis rechts */
.zgross{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(34px,4.2vw,68px) clamp(20px,2.6vw,40px)}
.zgross .frei{text-align:left}
.zgross .frei__b{border-radius:28px}
.zgross__z{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-top:clamp(16px,1.7vw,24px)}
.zgross .frei b{margin-top:0;font-size:clamp(1.728rem,2.808vw,2.7rem);line-height:1.08}
.zgross .frei small{margin-top:0;font-size:clamp(1.08rem,1.296vw,1.296rem);opacity:.84;white-space:nowrap}
.zgross .frei i{display:block;margin-top:8px;font-style:normal;font-family:var(--mono);font-size:11.88px;letter-spacing:.15em;text-transform:uppercase;color:var(--stahl)}
@media (max-width:900px){.zgross{grid-template-columns:minmax(0,1fr)}}

/* Küche auf der Startseite: ein Restaurant ist immer gewählt und deutlich markiert; mit ihm wechselt der Auszug aus seiner Karte */
.tafel__karte{display:grid}
.tafel__w{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transition:opacity .45s var(--e2),visibility 0s linear .45s}
.tafel__w.an{opacity:1;visibility:visible;transition:opacity .8s var(--e2) .2s}
.ort{padding:20px clamp(14px,1.6vw,24px) 22px;border-radius:0 0 18px 18px;transition:background-color .7s var(--e2)}
.ort::before{height:2px}
.ort[aria-current="true"]{background-color:rgba(var(--lh),.06)}
.ort__kopf b{opacity:.42}
.ort__t{opacity:.5;transition:opacity .6s var(--e2)}
.ort[aria-current="true"] .ort__t{opacity:.9}

/* Mosaik mit grossem Namen: der Name schliesst oben mit den Fotos ab (Robert: «sieht so unfertig aus») */
@media (min-width:901px){.schau{align-items:start}.schau__n{margin-top:-.16em}}

/* Kopf der Unterseiten: hinter Titel und Satz liegt eine Tapete aus den drei Tannen, nur in diesem Kopf; nach unten läuft sie aus */
.seitenkopf::before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(var(--lh),0) 55%,var(--papier)),url(../img/tapete-stahl-085.png?v=1-dh1410);background-size:auto,150px 170px;pointer-events:none}

/* Blätter mit Falz: die Fusszeilen bleiben auf der linken Seite und laufen nicht über den Knick */
@media (min-width:901px){.blatt:has(>.blatt__spalten)>.blatt__fuss,.blatt__fuesse{columns:2;column-gap:clamp(30px,4vw,64px)}.blatt__fuesse{margin-top:24px}.blatt__fuesse .blatt__fuss{margin:0 0 14px;break-inside:avoid}}

/* Curling: unter den zwei Terminen liegt ein Winterfoto vom Haus */
.curling--bild{display:block}
.curling--bild .weit{margin-top:clamp(20px,2.4vw,34px)}
.curling--bild .weit .rahmen__k{aspect-ratio:21/8}

/* Restaurant-Seiten und Karriere (08.10.2026 22:45) */
.blatt--mitte{max-width:820px;margin-inline:auto}
.orte--fest .ort{background-color:rgba(var(--lh),.05)}
.orte--fest .ort:hover{background-color:rgba(var(--lh),.09)}
.orte--fest{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(30px,3.6vw,54px)}
.kfragen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,28px)}
.kfrage{display:flex;flex-direction:column;min-height:clamp(220px,19vw,280px);padding:clamp(22px,2.6vw,38px);border-radius:var(--r-l);border:1.5px dashed rgba(138,117,69,.6);background:rgba(255,253,248,.55)}
.kfrage p{margin-top:12px;font-size:1.102rem;line-height:1.55;opacity:.8}
.kfrage .mono{margin-top:auto;padding-top:22px;font-size:11.88px;letter-spacing:.16em;text-transform:uppercase;color:var(--stahl)}
.kstellen{border-top:1px solid rgba(var(--lh),.22)}
.kstelle{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(16px,2.4vw,40px);padding:clamp(18px,2.2vw,30px) 0;border-bottom:1px solid rgba(var(--lh),.22)}
.kstelle .mono{font-size:11.88px;letter-spacing:.16em;color:var(--gold)}
.kstelle b{font-family:var(--titel);font-weight:700;font-size:clamp(1.62rem,3.24vw,3.024rem);line-height:1.1;transition:transform .7s var(--e2)}
.kstelle:hover b{transform:translateX(10px)}
.kstelle__k{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12.42px;letter-spacing:.15em;text-transform:uppercase}
.kstelle__k i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--tinte);background:linear-gradient(#f6f1e6,#d5cbb8);box-shadow:inset 0 1px 0 #fffdf8,inset 0 -2px 0 #a79c86,0 12px 18px -10px rgba(0,0,0,.8)}
.kstelle__k i svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.4}
@media (max-width:900px){.kfragen{grid-template-columns:minmax(0,1fr)}.kfrage{min-height:0}.orte--fest{grid-template-columns:minmax(0,1fr)}.kstelle__k{font-size:0;gap:0}}
/* «Worauf freuen Sie sich?»: auf niedrigen Bildschirmen richtet sich die Breite des Fotos nach der Höhe, damit Foto und Text zusammen ins Fenster passen */
@media (min-width:901px){.wahl__buehne{--bw:max(560px,min(1040px,66vw,calc((100svh - 440px)*1.7778)))}}

.wahl__kopf .gold{white-space:nowrap}
@media (max-width:900px){.tafel__karte .blatt__kopf{flex-wrap:nowrap;align-items:flex-start}.tafel__karte .blatt__kopf svg{flex:none;width:40px}}
/* Wortmarke in der Leiste 3 px höher: der Schriftzug sitzt im Bild unter der Mitte, weil die Tannen nach oben ragen (Robert 08.10.2026) */
.nav__logo img{transform:translateY(-3px)}

/* Zimmer der Startseite als Grundriss (Robert 08.10.2026: «zwei, zwei nebeneinander ist so Standard … richtig innovativ»): ein Mosaik aus vier Fotos,
   deren Flächen im Verhältnis der Zimmergrössen stehen (20, 30, 50, 70 m²). Links oben die Junior Suite, darunter Economy und Ambiance, rechts hoch die Suite. */
.zplan{display:grid;grid-template-columns:40fr 60fr 70fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);aspect-ratio:16/10}
.zplan .frei{position:relative;min-width:0;min-height:0;text-align:left}
.zplan .frei__b{position:relative;height:100%;border-radius:26px}
.zplan__junior{grid-area:1/1/2/3}.zplan__economy{grid-area:2/1/3/2}.zplan__ambiance{grid-area:2/2/3/3}.zplan__suite{grid-area:1/3/3/4}
.zplan .kerbe{--f:var(--papier);color:var(--tinte);display:grid;gap:6px;padding:clamp(14px,1.4vw,20px) clamp(22px,2.2vw,32px) clamp(12px,1.2vw,16px) clamp(16px,1.6vw,22px);max-width:92%}
.zplan .kerbe b{margin:0;font-family:var(--titel);font-weight:700;font-size:clamp(1.404rem,2.268vw,2.268rem);line-height:1.05}
.zplan__suite .kerbe b{font-size:clamp(1.728rem,3.24vw,3.24rem)}
.zplan .kerbe small{margin:0;font-size:clamp(.929rem,1.08vw,1.08rem);line-height:1.3;opacity:.84}
.zplan .kerbe i{display:block;font-style:normal;font-family:var(--mono);font-size:11.34px;letter-spacing:.14em;text-transform:uppercase;color:var(--stahl)}
.zplan__mass{margin-top:clamp(16px,1.8vw,26px);font-size:1.058rem;opacity:.74}
@media (max-width:900px){
  .zplan{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:none;aspect-ratio:auto;gap:14px}
  .zplan .frei{grid-area:auto}.zplan .frei__b{height:auto;aspect-ratio:3/2}
  .zplan__economy .frei__b{aspect-ratio:2/1}.zplan__suite .frei__b{aspect-ratio:4/5}
}

/* ---------- 08.10.2026 22:30 · dritter Durchgang ---------- */
/* Knöpfe am Mosaik: Fotos und Karte nebeneinander, der Tisch mittig darunter */
.knoepfe:has(>.kn-zeile){display:inline-grid;grid-template-columns:auto auto;justify-content:start}
.kn-zeile{grid-column:1/-1;justify-self:start}
/* Feste, «Momente im Doldenhorn»: die Namensschilder beige mit blauer Schrift */
#momente .bk .kerbe{--f:#efe7d6;color:#1c3050}
/* Angebote, «Sechs Nächte»: Preise und Wochen als Karten */
.reise{margin-top:clamp(48px,6vw,96px);padding-top:clamp(34px,4vw,60px);border-top:3px double rgba(var(--lh),.3)}
.reise__kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 30px}
.reise__kopf .mono,.reise__o{font-size:11.88px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.reise__o{margin-top:clamp(28px,3.2vw,46px)}
.reise .termine{margin-top:clamp(14px,1.6vw,22px)}
.termine--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.reise .termine--3 .termin__d b{font-size:clamp(2.376rem,4.212vw,3.996rem)}
.reise .termin__t{font-family:var(--mono);font-size:12.42px;letter-spacing:.12em;text-transform:uppercase;color:var(--stahl);opacity:1}
/* Curling: zwei Blätter vom Abreisskalender */
.kal{min-width:0;border-radius:18px;overflow:hidden;text-align:center;color:var(--tinte);background:linear-gradient(180deg,#fffdf8,#f3ecdd 60%,#e6dcc6);box-shadow:inset 0 0 0 1px rgba(138,117,69,.22),inset 0 -3px 0 #a3977c,0 30px 34px -24px rgba(var(--ld),.6)}
.kal__m{position:relative;padding:15px 12px 13px;font-family:var(--mono);font-size:12.96px;letter-spacing:.2em;text-transform:uppercase;color:var(--papier);background:linear-gradient(#27405f,#16263c)}
.kal__m::before,.kal__m::after{content:'';position:absolute;top:50%;width:11px;height:11px;margin-top:-6px;border-radius:50%;background:#0a121d;box-shadow:inset 0 1px 0 rgba(0,0,0,.6),0 1px 0 rgba(226,236,255,.18)}
.kal__m::before{left:18px}.kal__m::after{right:18px}
.kal__t{padding-top:clamp(18px,2.2vw,30px);font-family:var(--titel);font-weight:700;font-size:clamp(3.456rem,6.912vw,6.48rem);line-height:.9;color:var(--stahl)}
.kal__w{margin-top:12px;font-family:var(--mono);font-size:11.34px;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.kal h3{margin:clamp(14px,1.6vw,22px) clamp(16px,2vw,28px) 0;padding:clamp(14px,1.5vw,20px) 0 clamp(18px,2vw,26px);border-top:3px double rgba(var(--ld),.3);font-family:var(--titel);font-weight:700;font-size:clamp(1.242rem,1.728vw,1.62rem);line-height:1.2}
/* Das Haus, «Ihre Gastgeber»: ein Foto, der Brief als ruhiger Text, darunter die Namen als Zeilen */
.gg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5.6vw,104px);align-items:center}
.gg__o{margin-top:clamp(22px,2.6vw,38px);font-size:11.88px;letter-spacing:.16em;text-transform:uppercase;color:var(--stahl)}
.gg__anrede{margin-top:10px;font-family:var(--titel);font-weight:700;font-size:clamp(1.62rem,2.376vw,2.16rem);line-height:1.15}
.gg__t .lead{margin-top:14px;max-width:46ch}
.gg__lauf{margin-top:14px;max-width:58ch;opacity:.88}
.gg__unter{margin-top:22px;font-family:var(--titel);font-weight:700;font-size:1.404rem}
.gg__namen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,3.4vw,60px);margin-top:clamp(44px,5.4vw,84px);border-top:3px double rgba(var(--ld),.3)}
.gg__namen div{padding:18px 0 16px;border-bottom:1px solid rgba(var(--ld),.18)}
.gg__namen dt{font-family:var(--titel);font-weight:700;font-size:clamp(1.242rem,1.62vw,1.512rem);line-height:1.15}
.gg__namen dd{margin:7px 0 0;font-family:var(--mono);font-size:11.34px;letter-spacing:.15em;text-transform:uppercase;color:var(--stahl)}
@media (max-width:900px){.gg{grid-template-columns:minmax(0,1fr)}.gg__namen{grid-template-columns:repeat(2,minmax(0,1fr))}.termine--4{grid-template-columns:repeat(2,minmax(0,1fr))}.reise .termine--3{grid-template-columns:minmax(0,1fr)}}

.gg__bild .rahmen__k{aspect-ratio:4/5}


/* ---------- 08.10.2026 23:00 · Fuss mit Auftritt (Robert: «im Footer kann ruhig noch ein bisschen was passieren, das sieht so leer aus») ----------
   Der Satz rollt Zeile für Zeile hoch, darunter zieht sich eine Goldlinie von links, und die drei Tannen bauen sich Streifen für Streifen von unten auf.
   Danach steht das Zeichen still (der Schimmer alle paar Sekunden ist seit 09.10.2026 raus). Nur transform und opacity. */
.fuss__kopf{align-items:center}
.fuss__ecke[data-r]{opacity:.9;transform:none;transition:none}
.fuss__ecke path{opacity:0;transform:translateY(1.6px);transition:opacity .55s var(--e2),transform .9s var(--e1);transition-delay:calc(.25s + var(--i,0)*60ms)}
.fuss__ecke.da path{opacity:1;transform:none}   /* 09.10.2026, Robert: «Es reicht, wenn sich das Logo einmal am Anfang so aufbaut.» Der wiederkehrende Schimmer ist raus. */
.fuss__linie{margin:clamp(26px,3vw,46px) 0 0;color:var(--gold);opacity:.5;transition-duration:1.9s}
.fuss__linie+.fuss__haeuser{margin-top:clamp(30px,3.4vw,54px)}
@media (prefers-reduced-motion:reduce){.fuss__ecke path{opacity:1;transform:none;transition:none;animation:none!important}}
.still .fuss__ecke path{opacity:1;transform:none;transition:none;animation:none!important}

/* ---------- 09.10.2026 · Fuss wie bei Carlton-Europe und Ruedihus (Robert: «die Footer sollen so aussehen, auch mit einer Tapete im Hintergrund») ----------
   Lauftext an der Naht, Tannen-Tapete als Grund (läuft nach unten aus), links Wortmarke mit Satz, in der Mitte das Kontaktfeld mit eingelassenen Feldern, rechts die drei Tannen als Siegel.
   Stand davor: _sicherung/vor-fuss-kontaktfeld/. Nur transform und opacity in Bewegung. */
.naht{position:relative;z-index:3;background:linear-gradient(180deg,#1d3049,#13202f);box-shadow:inset 0 1px 0 rgba(184,152,80,.62),inset 0 -1px 0 rgba(184,152,80,.5),0 18px 30px -22px rgba(0,0,0,.85)}
.naht .laufband{margin:0;padding:clamp(11px,1.1vw,15px) 0;border:0;background:none}
.naht .laufband__zug{animation-duration:var(--t,52s)}
.naht .laufband span{font-size:clamp(1.08rem,1.35vw,1.404rem);letter-spacing:.01em;gap:clamp(22px,2.6vw,44px);padding-right:clamp(22px,2.6vw,44px);color:var(--hellgold)}
.naht .laufband span:nth-child(even){color:var(--papier)}
.naht .laufband span::after{width:7px;height:7px;background:var(--gold);opacity:.8}
.fuss{isolation:isolate}
.fuss::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(180deg,rgba(7,12,20,0) 0,rgba(7,12,20,0) 50%,var(--tief) 94%),url(../img/tapete-gold-085.png?v=1-dh1410);background-size:auto,150px 170px}
.naht--fuss+.fuss{padding-top:clamp(84px,8.4vw,130px)}
.fuss__kopf--drei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;align-items:center;gap:clamp(24px,3.4vw,64px)}
.fuss__logo{display:inline-block}
.fuss__logo img{display:block;height:clamp(44px,4.2vw,62px);width:auto}
.fuss__marke .fuss__satz{margin-top:clamp(20px,2.4vw,34px);font-size:clamp(1.836rem,3.456vw,3.564rem);line-height:1.08}
.fuss__kontakt{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(9px,.9vw,13px);margin:0;padding:clamp(11px,1.1vw,15px);border-radius:28px;background:linear-gradient(180deg,#22385a,#182a44);box-shadow:inset 0 0 0 1px rgba(184,152,80,.3),inset 0 1px 0 rgba(226,236,255,.14),0 28px 40px -32px rgba(0,0,0,.85)}
.fuss__kontakt[data-r]{transform:none}
.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,#060b13,#0a131f 34%,#0c1725);box-shadow:inset 0 3px 6px -1px rgba(2,5,10,.7),inset 0 1px 0 rgba(2,5,10,.55),inset 0 0 0 1px rgba(2,5,10,.3),0 1px 0 rgba(226,236,255,.12)}
.fuss__kontakt>div:nth-child(1){grid-row:1/3}
.fuss__kontakt>div:last-child{grid-column:1/-1}
.fuss__kontakt dt{font-family:var(--mono);font-size:12.42px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.fuss__kontakt dd{margin:8px 0 0;font-family:var(--titel);font-weight:700;font-size:clamp(1.058rem,1.21vw,1.274rem);line-height:1.25;color:var(--papier)}
.fuss__kontakt dd small{display:block;margin-top:7px;font-family:var(--sans);font-weight:400;font-size:.929rem;line-height:1.35;color:rgba(var(--lh),.72)}
.fuss__kontakt a{white-space:nowrap;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{width:auto;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.3vw,20px)}
.fuss__ecke--siegel[data-r]{opacity:1}
.siegel{display:grid;place-items:center;width:clamp(150px,15vw,230px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 38%,#24395b,#0a121d 72%);box-shadow:inset 0 0 0 1px rgba(184,152,80,.72),inset 0 0 0 9px #0a121d,inset 0 0 0 10px rgba(184,152,80,.42),0 30px 40px -24px rgba(0,0,0,.9)}
.fuss__ecke--siegel .siegel svg{width:44%;height:auto;color:var(--gold)}
.fuss__ecke--siegel small{font-family:var(--mono);font-size:clamp(9.18px,.842vw,11.88px);letter-spacing:.13em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
@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;padding:10px;gap:9px}
  .fuss__kontakt>div{padding:13px 14px 14px;border-radius:15px}
  .fuss__kontakt dd{font-size:1.08rem}
}
@media (max-width:520px){
  .fuss__kontakt{grid-template-columns:minmax(0,1fr)}
  .fuss__kontakt>div:nth-child(1){grid-row:auto}
  .fuss__kontakt a{white-space:normal;overflow-wrap:anywhere}
}


/* 09.10.2026 · Angebote, «Noch offene Wochen» als Blätter vom Abreisskalender (wie Curling), vier nebeneinander. Vergangene Wochen nimmt main.js heraus:
   bleiben weniger als vier, behalten die Blätter ihre Breite und stehen links. */
.kal--w .kal__t{font-size:clamp(3.24rem,5.616vw,5.616rem)}
.kal--w h3{font-size:clamp(1.08rem,1.35vw,1.382rem)}
.termine[data-wochen][hidden],.reise__o[hidden]{display:none}
@media (max-width:900px){.kal--w .kal__m{padding:12px 8px 11px;font-size:10.8px;letter-spacing:.12em}.kal--w .kal__m::before,.kal--w .kal__m::after{width:8px;height:8px;margin-top:-4px}.kal--w .kal__m::before{left:10px}.kal--w .kal__m::after{right:10px}.kal--w h3{margin-left:10px;margin-right:10px}}

/* 09.10.2026 · Startseite, Begrüssung: der Knopf «Das Haus und seine Gastgeber» steht mittig in seiner Spalte (Robert) */
.gruss .gruss__t>.knoepfe{justify-content:center}

/* 09.10.2026 · Das Haus, «Anreise und Kontakt»: die Angaben als Kasten mit vertieften Feldern (wie im Fuss), Unterkante bündig mit der Tafelkarte.
   Robert: «den Kasten noch schöner gestalten». Telefon und E-Mail sind ganze Felder zum Antippen, mit rundem Knauf. */
.weit__unten--gleich{align-items:stretch}
.weit__r--kasten{display:grid}
.kkasten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(9px,.9vw,13px);padding:clamp(11px,1.1vw,15px);border-radius:28px;background:linear-gradient(180deg,#22385a,#182a44);box-shadow:inset 0 0 0 1px rgba(184,152,80,.34),inset 0 1px 0 rgba(226,236,255,.14),0 4px 0 #0a121d,0 34px 50px -30px rgba(var(--ld),.75)}
.kkasten__f{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-height:clamp(118px,10.5vw,160px);padding:clamp(16px,1.6vw,24px) clamp(17px,1.7vw,26px) clamp(17px,1.7vw,25px);border-radius:18px;color:var(--papier);background:linear-gradient(180deg,#060b13,#0a131f 34%,#0c1725);box-shadow:inset 0 3px 6px -1px rgba(2,5,10,.7),inset 0 1px 0 rgba(2,5,10,.55),inset 0 0 0 1px rgba(2,5,10,.3),0 1px 0 rgba(226,236,255,.12)}
.kkasten__o{font-family:var(--mono);font-size:12.42px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.kkasten__f b{font-family:var(--titel);font-weight:700;font-size:clamp(1.21rem,1.62vw,1.62rem);line-height:1.2;overflow-wrap:anywhere}
.kkasten__f small{display:block;margin-top:8px;font-family:var(--sans);font-weight:400;font-size:.972rem;line-height:1.4;color:rgba(var(--lh),.72)}
.kkasten__f i{position:absolute;top:clamp(11px,1.1vw,16px);right:clamp(11px,1.1vw,16px);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--tinte);background:linear-gradient(#f6f1e6,#d5cbb8);box-shadow:inset 0 1px 0 #fffdf8,inset 0 -2px 0 #a79c86,0 10px 16px -10px rgba(0,0,0,.8);transition:transform .5s var(--e2)}
.kkasten__f i svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.4}
a.kkasten__f:hover i{transform:translate(2px,-2px)}
@media (max-width:900px){.kkasten{border-radius:22px}.kkasten__f{min-height:0;border-radius:15px}}
@media (max-width:560px){.kkasten{grid-template-columns:minmax(0,1fr)}}

/* 09.10.2026 · Das Haus, «Wir suchen dich!»: die offenen Stellen als Aushang auf Papier, jede Zeile führt in die Bewerbung (Robert: «auch noch schöner gestalten») */
.aushang{padding:clamp(20px,2.2vw,32px) clamp(22px,2.6vw,40px) clamp(18px,2vw,28px);border-radius:var(--r-l);color:var(--tinte);background:linear-gradient(180deg,#fffdf8,#f3ecdd 60%,#e4d9c2);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(184,152,80,.3),0 4px 0 #a79c86,0 34px 50px -30px rgba(0,0,0,.85)}
.aushang__o{padding-bottom:clamp(12px,1.3vw,18px);border-bottom:3px double rgba(var(--ld),.3);font-family:var(--mono);font-size:12.42px;letter-spacing:.16em;text-transform:uppercase;color:var(--stahl)}
.aushang__z{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:clamp(13px,1.4vw,19px) 0;border-bottom:1px solid rgba(var(--ld),.16)}
.aushang__z b{font-family:var(--titel);font-weight:700;font-size:clamp(1.318rem,1.998vw,1.998rem);line-height:1.15;transition:transform .7s var(--e2)}
.aushang__z i{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--papier);background:linear-gradient(#27405f,#0f1b2b);box-shadow:inset 0 1px 0 #5a7396,inset 0 -2px 0 #060b13,0 10px 18px -10px rgba(var(--ld),.7);transition:transform .5s var(--e2)}
.aushang__z i svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.5}
.aushang__z:hover b{transform:translateX(8px)}
.aushang__z:hover i{transform:translate(2px,-2px)}
.aushang__u{margin-top:clamp(14px,1.5vw,20px);font-size:1.026rem;opacity:.78}
.aushang__u a{box-shadow:inset 0 -1px 0 currentColor}
@media (prefers-reduced-motion:reduce){.aushang__z b,.aushang__z i,.kkasten__f i{transition:none}}

/* ---------- Studio (09.10.2026): Hinweis für Gäste, beantwortete Karriere-Fragen, Zimmer-Kacheln ohne Grundriss, eigene Seiten ---------- */
.hinweisband{position:fixed;left:0;right:0;bottom:0;z-index:58;padding:0 var(--rand) max(10px,env(safe-area-inset-bottom));pointer-events:none}
.hinweisband__in{pointer-events:auto;margin:0 auto;max-width:980px;display:flex;align-items:center;gap:14px;padding:12px 12px 12px 20px;border-radius:18px;background:var(--nacht);color:var(--papier);box-shadow:inset 0 0 0 1px rgba(184,152,80,.35),0 24px 40px -22px rgba(0,0,0,.8);font-size:16.2px;line-height:1.4}
.hinweisband__in>svg{flex:none;width:18px;height:18px;stroke:var(--gold);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.hinweisband__in p{flex:1;min-width:0}
.hinweisband__in p a{margin-left:10px;color:var(--hellgold);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;white-space:nowrap}
.hinweisband__in button{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--papier);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.hinweisband__in button svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.5}
@media (max-width:900px){.hinweisband{padding-inline:10px}.hinweisband__in{font-size:15.12px;padding-left:16px}}
.kfrage--da p{opacity:1}
.kfrage--da ul.liste{margin-top:10px}
.zplan--frei{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;aspect-ratio:auto}
.zplan--frei .frei__b{aspect-ratio:4/3}
@media (max-width:900px){.zplan--frei{grid-template-columns:1fr}}
.eigene__t p+p{margin-top:1em}
.eigene__t ul.liste{margin-top:14px}
.eng-mitte{max-width:860px}

/* 09.10.2026 · Feste, Seminare: das Rahmenprogramm als eine ruhige Kopfzeile (Satz links, zwei Zeilen rechts, Verweis auf den Flyer).
   Die erste Fassung (alle 17 Programme als Fliesssatz in der Titelschrift mit Goldpunkten) hat Robert verworfen: «Katastrophe, niemals so etwas». */
.kopfzeile.rprog{align-items:center;margin:clamp(44px,5.4vw,84px) 0 0;padding-top:clamp(36px,4.4vw,68px);border-top:1px solid rgba(var(--lh),.16)}
.rprog p{opacity:.9}
.rprog__s{font-size:clamp(1.836rem,3.132vw,3.132rem);line-height:1.12}
@media (max-width:900px){.kopfzeile.rprog{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.rprog__s{font-size:min(1.836rem,6.804vw)}}

/* 09.10.2026 18:40 · Kalenderblätter voller (Robert: «noch mehr in so ein Design, irgendwie ist das jetzt zu leer»). Die Leere kam vom Absatz-Abstand,
   der an der grossen Zahl hing (1em der Zahl). Jetzt: Wochentag über der Zahl, Zahl grösser, darunter die Tage der Woche als Leiste (An- und Abreise bzw.
   Turniertage dunkel), Lochreihe unter dem Kopf, zwei Blätter des Blocks schauen unten hervor, Ecke unten rechts hebt sich. Alles steht, nichts bewegt sich. */
.kal{position:relative;box-shadow:inset 0 0 0 1px rgba(138,117,69,.22),0 3px 0 #efe6d3,0 4px 0 #b3a688,0 7px 0 #e8dec9,0 8px 0 #a3977c,0 34px 36px -24px rgba(var(--ld),.62)}
.kal p,.kal ol{margin:0}
.kal__m{border-bottom:1px solid #0a121d}
.kal__m+*{position:relative}
.kal__w{margin:0;padding-top:clamp(16px,1.7vw,24px);font-size:11.88px;letter-spacing:.2em;color:var(--stahl);opacity:1;background:radial-gradient(circle,rgba(var(--ld),.3) 1.2px,transparent 1.6px) 0 5px/9px 4px repeat-x}
.kal__t{padding-top:clamp(4px,.5vw,8px);font-size:clamp(3.348rem,5.832vw,6.696rem);line-height:.98;letter-spacing:-.02em}
.kal--w .kal__t{font-size:clamp(3.888rem,7.128vw,7.128rem)}
.kal .kal__tage{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(3px,.35vw,6px);padding:0;margin:clamp(12px,1.2vw,18px) clamp(14px,1.8vw,26px) 0}
.kal__tage li{display:grid;gap:2px;padding:7px 0 6px;border-radius:9px;font-family:var(--titel);font-weight:700;font-size:clamp(.929rem,1.08vw,1.123rem);line-height:1.1;color:rgba(var(--ld),.5)}
.kal__tage i{font-family:var(--mono);font-style:normal;font-weight:400;font-size:9.72px;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.kal__tage .zw{color:var(--tinte);background:rgba(61,83,112,.13)}
.kal__tage .fest{color:var(--papier);background:linear-gradient(#27405f,#16263c);box-shadow:inset 0 1px 0 rgba(226,236,255,.2),0 4px 8px -5px rgba(var(--ld),.7)}
.kal h3{margin-top:clamp(12px,1.3vw,18px);padding-bottom:clamp(20px,2.1vw,28px)}
.kal::after{content:'';position:absolute;right:0;bottom:0;width:clamp(22px,2.2vw,32px);height:clamp(22px,2.2vw,32px);border-top-left-radius:7px;background:linear-gradient(135deg,#fffdf8 0,#e7dcc4 48%,#bfb294 50%,#eee4cf 53%,#eee4cf 100%);box-shadow:-3px -3px 7px -3px rgba(var(--ld),.34)}
@media (max-width:900px){.kal--w .kal__tage{margin:10px 8px 0;gap:2px}.kal--w .kal__tage li{padding:5px 0 4px;border-radius:6px;font-size:.799rem}.kal--w .kal__tage i{font-size:7.56px;letter-spacing:0}.kal--w .kal__t{font-size:3.564rem}}

/* 09.10.2026 · Takt-Wächter (main.js): ist die Bildrate des Geräts gedeckelt (Stromsparmodus), stehen die mitlaufenden Fotos still.
   Der Wechsel in die Ruhelage gleitet einmal, statt zu springen. */
.lahm .gleit,.lahm .auftakt__haus{transition:transform .9s var(--e1)}
.lahm .gleit{will-change:auto}

/* 09.10.2026 · Tannen-Tapete: die Kachel ist einmal fertig gerechnet (assets/img/tapete-*.png, 5 KB) statt als Zeichnung im Stil. Der Browser musste die
   Zeichnung für jede Fläche neu ausrechnen, im Kopf und im Fuss dazu durch eine Maske. Der Auslauf nach unten ist jetzt ein Verlauf in der Farbe des Grundes
   über der Kachel (gleiches Bild, keine Maske). Neu rechnen: _qa/kachel.js. */

/* 09.10.2026 · Leistung (Prüfung der Live-Seite): zwei Dinge liessen die Seite in jedem Bild neu malen.
   1. Eck-Knöpfe: der Goldglanz drehte über eine Stil-Variable (--ga). Das zwang den Browser, Knöpfe und Seite in jedem Bild neu zu malen, auch beim Scrollen
      und auch, wenn die Knöpfe weg waren. Jetzt dreht eine fertige Fläche (::before) über die Grafikkarte, die Füllung liegt als ::after darüber. Gleiches Bild.
   2. Gleitende Fotos: das Skript bewegt sie schon weich nach; der Übergang im Stil (1,4 s) kam obendrauf, die Fotos zogen rund eine Sekunde hinter dem Scrollen her. */
.glanz{background:none;animation:none;border:0;padding:0 21px}   /* der Rand (1 px) liegt jetzt als Lücke zwischen ::after und Kante; overflow schneidet am Innenrand, darum Rand 0 und Polster 1 px mehr (gleiche Masse) */
@media (min-width:901px){.glanz{padding:0 24px}}
@media (min-width:1121px) and (max-width:1400px){.glanz{padding:0 17px}}
.glanz::before{content:'';position:absolute;z-index:-2;left:50%;top:50%;width:150%;aspect-ratio:1;margin:-75% 0 0 -75%;pointer-events:none;
  background:conic-gradient(from calc(0deg - var(--go)),transparent,var(--gold) var(--gp),#fff calc(var(--gp)*2),var(--gold) calc(var(--gp)*3),transparent calc(var(--gp)*4));
  transition:--go .8s cubic-bezier(.25,1,.5,1),--gp .8s cubic-bezier(.25,1,.5,1);animation:glanzdreh 3.6s linear infinite;will-change:transform}
.glanz::after{content:'';position:absolute;z-index:-1;inset:1px;border-radius:inherit;background:linear-gradient(180deg,#223452,#0b1420);box-shadow:inset 0 0 0 1px rgba(var(--lh),.12);pointer-events:none}
.glanz:is(:hover,:focus-visible)::before{--gp:20%;--go:95deg}
.glanz.weg::before,.weg~.glanz::before{animation-play-state:paused}
@keyframes glanzdreh{to{transform:rotate(360deg)}}
.auf-foto .glanz::before,.auf-foto .glanz::after{display:none}
@media (prefers-reduced-motion:reduce){.glanz::before{animation:none}}
.still .glanz::before{animation:none}
html:not(.lahm) .gleit{transition:none!important}

/* 09.10.2026 · Leistung 2 (Zimmerseite stockte beim Scrollen, Robert): Die gleitenden Fotos trugen «will-change:transform». Damit hielt der Browser alle 13 Fotos
   dauerhaft als eigene Flächen in Bildschirmauflösung und entpackte sie bei jeder Grössenänderung des Gleitens neu (Chrome: Entpacken und Grafikkarte im Sekundenbereich,
   WebKit bei 60 Bildern/s: 92 lange Bilder → 9). Ohne den Hinweis entstehen die Flächen erst, wenn das Skript die Fotos bewegt. Bewegung, Zeiten und Masse unverändert. */

/* FUSS DER KETTE (Robert 15.10.2026: «wie beim Carlton … als einheitliche Kette, die Verbindung zwischen den Häusern, hausspezifisch»).
   Aufbau wie der Carlton-Fuss (dort main.css FASSUNG 47 bis 50): Zeichen in der Doppellinie, Satz als Inschrift, Kontaktzeile,
   Band von Rand zu Rand mit Spalten und einer Zeile des Hauses, die vier Häuser (eigenes breit mit Einkerbung, drei darunter), dunkles Ende.
   Farben und Schrift kommen aus diesem Haus (Variablen oben). */
.fuss--kette{text-align:center;padding-bottom:0}
.fuss--kette .wrap{max-width:1240px}
.fuss__kk{max-width:1240px;margin:0 auto}
.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(var(--k-l),.75);border-bottom:1px solid rgba(var(--k-l),.35)}
.fuss__sl a{flex:none;display:block;line-height:0;color:var(--k-a)}
.fuss__z{display:block;height:var(--k-zh,66px);width:auto;color:var(--k-a);fill:currentColor;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.fuss__inschrift{position:relative;margin:0;padding:clamp(20px,2.4vw,32px) 0;border-bottom:1px solid rgba(var(--k-l),.75);
  font-family:var(--titel);font-size:clamp(1.404rem,3.132vw,3.078rem);line-height:1.2;letter-spacing:.12em;text-transform:uppercase;text-wrap:balance;color:var(--k-t);text-shadow:0 -1px 0 rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.14)}
.fuss__inschrift::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:rgba(var(--k-l),.35)}
.fuss__inschrift em{font-style:normal;color:var(--k-a)}
.fuss--kette .fuss__kz{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 20px;margin:24px 0 0;font-size:16.2px;color:rgba(var(--lh,255,255,255),.86)}
.fuss--kette .fuss__kz i{width:1px;height:14px;background:currentColor;opacity:.35}
.fuss--kette .fuss__kz a{color:inherit}
.fuss--kette .fuss__kz a:hover{color:var(--k-a)}
.fuss--kette .fuss__band{position:relative;isolation:isolate;margin-top:clamp(36px,4vw,54px);padding:clamp(36px,3.8vw,54px) 0 clamp(38px,4vw,56px)}
.fuss--kette .fuss__band::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;background:rgba(0,0,0,.34);
  border-top:4px double rgba(var(--k-l),.6);border-bottom:4px double rgba(var(--k-l),.6)}
.fuss--kette .fuss__oben{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0;border:0}
.fuss--kette .fuss__sp h4{display:block;margin:0 0 12px;padding:0;border:0;font-family:var(--mono);font-weight:400;font-size:1.026rem;letter-spacing:.18em;text-transform:uppercase;color:var(--k-a)}
.fuss--kette .fuss__sp h4::before,.fuss--kette .fuss__sp h4::after{display:none!important}
.fuss--kette .fuss__sp li{border:0;padding:0}
.fuss--kette .fl-link{display:block;padding:5px 0;border:0;font-size:16.2px;color:rgba(var(--lh,255,255,255),.86)}
.fuss--kette .fl-link i{display:none}
.fuss--kette .fl-link:hover{color:var(--k-a)}
.fuss__zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,60px);align-items:center;margin-top:clamp(36px,4vw,54px);padding-top:clamp(30px,3.2vw,44px);border-top:1px solid rgba(var(--k-l),.3);text-align:left}
.fuss__zeile[data-r]{transform:none}
.fuss__zeile h3{font-family:var(--titel);font-size:clamp(1.134rem,1.674vw,1.62rem);line-height:1.25;letter-spacing:.14em;text-transform:uppercase;color:var(--k-t);text-shadow:0 -1px 0 rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.14)}
.fuss__zeile p{margin-top:12px;max-width:60ch;font-size:1.026rem;line-height:1.55;color:rgba(var(--lh,255,255,255),.7)}
.fuss__zeile .knoepfe{justify-content:flex-end}
.fuss--kette .fuss__haus{max-width:1240px;margin:clamp(60px,6.4vw,92px) auto 0}
.fuss__haus-t{display:flex;align-items:center;justify-content:center;gap:28px;margin:0;font-family:var(--titel);font-size:clamp(1.728rem,2.592vw,2.484rem);line-height:1.15;color:var(--papier)}
.fuss__haus-t::before,.fuss__haus-t::after{content:"";flex:0 1 170px;height:1px;background:linear-gradient(90deg,rgba(var(--k-l),0),rgba(var(--k-l),.8))}
.fuss__haus-t::after{transform:scaleX(-1)}
.fuss__haus-u{margin:12px 0 0;font-family:var(--mono);font-size:12.42px;letter-spacing:.17em;text-transform:uppercase;color:var(--k-a)}
.fuss__breit{margin-top:clamp(32px,3.6vw,50px);text-align:left}
.fuss__breit a{color:var(--papier);text-decoration:none}
.fuss__gg{position:relative;display:block;aspect-ratio:21/9;overflow:hidden;border-radius:var(--k-r,14px);box-shadow:0 0 0 1px rgba(var(--k-l),.5)}
.fuss__gg[data-r]{transform:none}
.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:var(--tief);--e:clamp(18px,1.8vw,26px);color:var(--papier);text-align:center;font-family:var(--titel);font-size:clamp(1.242rem,1.836vw,1.836rem);line-height:1.15;padding:clamp(16px,1.6vw,22px) clamp(30px,3vw,44px) clamp(14px,1.4vw,20px)}
.fuss__gg .kerbe small{display:block;margin-bottom:8px;font-family:var(--mono);font-weight:400;font-size:12.42px;letter-spacing:.13em;text-transform:uppercase;color:var(--k-a)}
.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(var(--k-l),.45);background:linear-gradient(180deg,var(--k-c1),var(--k-c2));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(--titel);font-size:clamp(1.188rem,1.458vw,1.512rem);line-height:1.2}
.fuss__ko-t small{display:block;margin-top:6px;font-family:var(--mono);font-size:11.88px;letter-spacing:.15em;text-transform:uppercase;color:var(--k-a)}
.fuss__ko-t em{display:block;margin-top:6px;font-style:normal;font-size:14.58px;line-height:1.4;color:rgba(var(--lh,255,255,255),.62)}
.fuss__knauf{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--k-kt,#1a1408);background:var(--k-kn);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 0 rgba(0,0,0,.28),0 3px 6px -2px rgba(0,0,0,.5);transition:transform .6s var(--e2)}
.fuss__knauf svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6}
.fuss__ko:hover .fuss__knauf{transform:translate(2px,-2px)}
.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(0,0,0,.5);border-top:4px double rgba(var(--k-l),.6)}
.fuss__ende-z{display:block;height:var(--k-ezh,46px);width:auto;margin:0 auto 26px;color:var(--k-a);fill:currentColor;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.fuss--kette .fuss__ende .fuss__unten{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0 auto;padding:0;border:0;text-align:center}
@media (max-width:1100px){.fuss__drei{grid-template-columns:repeat(2,minmax(0,1fr))}.fuss__gg{aspect-ratio:16/9}}
@media (max-width:860px){
  .fuss--kette .fuss__oben{grid-template-columns:1fr 1fr;gap:26px 16px}
  .fuss--kette .fuss__kz{flex-direction:column;gap:4px}.fuss--kette .fuss__kz i{display:none}
  .fuss__zeile{grid-template-columns:minmax(0,1fr);text-align:center}.fuss__zeile p{margin-left:auto;margin-right:auto}.fuss__zeile .knoepfe{justify-content:center}
}
@media (max-width:700px){.fuss__drei{grid-template-columns:minmax(0,1fr)}.fuss__gg{aspect-ratio:4/3}}
@media (max-width:560px){.fuss__haus-t{font-size:1.62rem}.fuss__haus-t::before,.fuss__haus-t::after{display:none}.fuss__sl{gap:16px}}
.fuss--kette{--k-l:227,210,166;--k-t:var(--hellgold);--k-a:var(--gold);--k-c1:#1b2d46;--k-c2:var(--karte);--k-kn:linear-gradient(180deg,#f6ecd0,#e3d2a6 30%,#c9ad6c 60%,#9a7d3e);--k-kt:var(--tinte);--k-r:var(--r-l)}
.fuss--kette .fuss__z{height:clamp(60px,5.6vw,78px)}

/* 16.10.2026 · «Demnächst im Haus» als Bühne (Robert wählte Variante 06 aus varianten-demnaechst.html): ein Foto über die ganze Breite, unten die Termine als Leiste.
   Gewechselt wird nur der Inhalt, die Fläche bleibt gleich hoch. Fotos blenden im selben Rahmen über (neues deckt sich über das alte, das alte bleibt bis dahin voll stehen);
   der alte Text ist sofort weg, der neue kommt kurz von unten (keine Einblendung). Fotos ohne Kappe in voller Grösse, damit sie scharf sind. */
.dmn-fl{padding-top:0;background:var(--nacht)}
.dmn{position:relative;isolation:isolate;display:flex;min-height:clamp(660px,58vw,980px);color:var(--papier)}
.dmn__bilder{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#060b13}
.dmn__bilder img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
.dmn__bilder img.an{visibility:visible;z-index:2}
.dmn__bilder img.war{visibility:visible;z-index:1}
.dmn__bilder img.kommt{animation:dmn-ueber .9s var(--e2) both}
@keyframes dmn-ueber{from{opacity:0}to{opacity:1}}
.dmn__bilder::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,22,33,.88) 0%,rgba(13,22,33,.4) 24%,rgba(13,22,33,.16) 42%,rgba(13,22,33,.8) 68%,rgba(13,22,33,.96) 88%,var(--nacht) 100%),
             linear-gradient(90deg,rgba(13,22,33,.7) 0%,rgba(13,22,33,.25) 40%,rgba(13,22,33,0) 62%)}
.dmn__in{position:relative;flex:1;display:flex;flex-direction:column;width:100%;padding-top:clamp(110px,9vw,150px);padding-bottom:clamp(30px,3vw,46px)}
.dmn__kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:clamp(20px,3.4vw,60px);align-items:end}
.dmn__kopf p{max-width:52ch}
.dmn__texte{display:grid;margin-top:auto;padding-top:clamp(48px,6vw,96px);max-width:min(660px,56%)}
.dmn__t{grid-area:1/1;align-self:end;visibility:hidden}
.dmn__t.an{visibility:visible}
.dmn__t.kommt>*{animation:dmn-text .55s var(--e1) both}
.dmn__t.kommt>*:nth-child(2){animation-delay:.03s}.dmn__t.kommt>*:nth-child(3){animation-delay:.06s}.dmn__t.kommt>*:nth-child(4){animation-delay:.09s}
@keyframes dmn-text{from{transform:translateY(18px)}to{transform:none}}
.dmn__t h3{margin-top:14px;font-size:clamp(2.484rem,4.752vw,4.752rem);line-height:1.03;text-wrap:balance;text-shadow:0 2px 24px rgba(7,12,20,.45)}
.dmn__t p{margin-top:18px;font-size:clamp(1.08rem,1.242vw,1.253rem);line-height:1.6;opacity:.88;max-width:52ch}
.dmn__t .knoepfe{margin-top:26px}
.dmn__leiste{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-top:clamp(36px,4.2vw,64px);border-top:1px solid rgba(241,236,226,.24)}
.dmn__leiste button{position:relative;display:flex;flex-direction:column;justify-content:flex-start;appearance:none;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;padding:18px 20px 4px 0;opacity:.56;transition:opacity .35s}
.dmn__leiste button::before{content:"";position:absolute;left:0;right:20px;top:-1px;height:2px;background:var(--hellgold);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--e1)}
.dmn__leiste button.an{opacity:1}.dmn__leiste button.an::before{transform:none}
.dmn__leiste button:hover{opacity:.9}
.dmn__leiste button:focus-visible{outline:2px solid var(--hellgold);outline-offset:4px;border-radius:4px}
.dmn__leiste span{display:block;font-family:var(--mono);font-size:12.42px;letter-spacing:.16em;text-transform:uppercase;color:var(--hellgold)}
.dmn__leiste b{display:block;margin-top:8px;font-family:var(--titel);font-size:clamp(1.102rem,1.404vw,1.469rem);line-height:1.2}
.dmn-fl>.wrap .knoepfe{margin-top:clamp(30px,3.4vw,50px)}
@media (max-width:860px){
  .dmn{min-height:max(700px,100svh)}
  .dmn__bilder::after{background:linear-gradient(180deg,rgba(13,22,33,.82) 0%,rgba(13,22,33,.2) 24%,rgba(13,22,33,.3) 40%,rgba(13,22,33,.9) 62%,var(--nacht) 92%)}
  .dmn__kopf{grid-template-columns:minmax(0,1fr) auto;gap:14px 20px}
  .dmn__kopf p{grid-column:1/-1;grid-row:2}
  .dmn__texte{max-width:none}
  .dmn__leiste{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--rand));padding-inline:var(--rand);scroll-padding-inline:var(--rand)}
  .dmn__leiste::-webkit-scrollbar{display:none}
  .dmn__leiste button{flex:0 0 min(62vw,260px);scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){.dmn__bilder img.kommt,.dmn__t.kommt>*{animation:none}}

/* ---------- 16.10.2026 «Worauf freuen Sie sich?» als Variante 13 (Robert): Luftbild als Bühne, Titel beige mit Schatten tief über der Wiese, Grund Blau mit Tannen-Tapete, vier Karten ohne Rahmen mit tiefem Schatten ---------- */
.vf{padding-block:var(--abschnitt);background-color:var(--blau)}
.vf .kerbe{--f:var(--nacht)}
.vf__buehne{position:relative;margin:0}
.vf__buehne .rahmen__k{aspect-ratio:21/9}
.vf__buehne .rahmen__k img{filter:saturate(.82) brightness(.9) contrast(1.04)}
.vf__buehne .rahmen__k::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(13,22,33,.28) 0%,rgba(13,22,33,.08) 26%,rgba(13,22,33,.3) 48%,rgba(13,22,33,.66) 70%,rgba(13,22,33,.86) 100%),radial-gradient(120% 90% at 50% 45%,rgba(13,22,33,0) 55%,rgba(13,22,33,.4) 100%)}
.vf__titel{position:absolute;z-index:2;left:0;right:0;bottom:calc(clamp(60px,9vw,150px) + clamp(64px,7vw,116px));margin:0;text-align:center;color:#fdfbf7;font-size:clamp(2.376rem,5.616vw,5.4rem);line-height:1.04;pointer-events:none;text-shadow:0 .02em .04em rgba(4,8,14,.55),0 .04em .12em rgba(4,8,14,.35)}
.vf__karten{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,24px);margin-top:calc(-1 * clamp(60px,9vw,150px));padding-inline:clamp(16px,4vw,64px)}
.vf__karte{display:block;color:inherit;text-decoration:none}
.vf__karte .rahmen{padding:0;background:none;box-shadow:none;border-radius:var(--r-xl)}
.vf__karte .rahmen__k{aspect-ratio:3/4;border-radius:var(--r-xl);box-shadow:0 2px 4px rgba(2,5,10,.5),0 14px 30px rgba(2,5,10,.6),0 34px 70px rgba(2,5,10,.55)}
.vf__karte .kerbe{font-family:var(--titel);font-weight:700;font-size:clamp(1.08rem,1.62vw,1.566rem)}
@media (hover:hover){.vf__karte .rahmen__k img{transition:transform .9s var(--e1)}.vf__karte:hover .rahmen__k img{transform:scale(1.04)}}
@media (max-width:900px){
  .vf__buehne .rahmen__k{aspect-ratio:4/5}
  .vf__titel{bottom:124px;font-size:clamp(2.16rem,9.72vw,3.024rem);padding-inline:18px}
  .vf__karten{grid-template-columns:repeat(2,1fr);margin-top:-56px;padding-inline:12px}
}

/* ======================================================================================================================
   16.10.2026 abends · Begrüssung = varianten11.html Nr. 05 «Drei Kacheln darunter» (Roberts Wahl).
   Text zentriert, darunter drei gleich grosse abgerundete Kacheln mit Tiefe, ohne den weissen Rand des Trios.
   ====================================================================================================================== */
.gruss--drei .gruss__mitte{max-width:860px;margin:0 auto;text-align:center}
.gruss--drei .gruss__gross{margin-left:auto;margin-right:auto}
.gruss--drei .knoepfe{justify-content:center;margin-top:clamp(28px,3vw,44px)}
.gruss__reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,26px);margin-top:clamp(52px,5.4vw,88px)}
.hell .gruss__k{aspect-ratio:4/3;border-radius:26px;box-shadow:0 1px 2px rgba(var(--ld),.18),0 40px 46px -28px rgba(var(--ld),.75)}
@media (max-width:900px){.gruss__reihe{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.gruss__reihe .gruss__k:first-child{grid-column:1/-1;aspect-ratio:3/2}.hell .gruss__k{border-radius:20px}}

/* 16.10.2026 Robert: «Herzlich willkommen» so gross wie «Worauf freuen Sie sich?»; dazwischen ein ruhiger Übergang ohne Foto (Tannen-Zeichen zwischen Goldlinien, Satz des Hauses zur Lage) */
.gruss--drei .gruss__mitte .d2{font-size:clamp(2.376rem,5.616vw,5.4rem);line-height:1.04}
.vf__weg{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2vw,28px);margin:0 auto clamp(22px,2.6vw,38px);max-width:min(1180px,100%);color:var(--gold)}
.vf__linie{flex:1;height:1px;background:rgba(184,152,80,.55)}
.vf__zeichen{width:clamp(30px,2.6vw,40px);height:auto;fill:currentColor}
.vf__satz{max-width:44ch;margin:0 auto clamp(48px,5.4vw,88px);text-align:center;font-family:var(--titel);font-weight:700;font-size:clamp(1.62rem,2.916vw,2.916rem);line-height:1.24;color:var(--papier);text-wrap:balance}
@media (max-width:900px){.gruss--drei .gruss__mitte .d2{font-size:clamp(2.16rem,9.72vw,3.024rem)}.vf__satz{max-width:22ch}}

/* 16.10.2026 Robert: unter den vier Karten eine Fläche mit Angaben zum Bereich, wechselt beim Überfahren (Touch: Tippen). Text kommt deckend aus dem Schlitz, nie überblendet. */
.vf__karte{position:relative}
.vf__strich{position:absolute;left:18%;right:18%;bottom:calc(-1 * clamp(12px,1.4vw,18px));height:2px;background:var(--gold);transform:scaleX(0);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.vf__karte.an .vf__strich{transform:scaleX(1)}
.vf__info{position:relative;overflow:hidden;margin-top:clamp(40px,4.6vw,70px);padding-inline:clamp(16px,4vw,64px)}
.vf__text{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,96px);align-items:start;padding-top:clamp(22px,2.4vw,34px);border-top:1px solid rgba(var(--lh),.16)}
.vf__info{display:grid}.vf__text{grid-area:1/1}
.vf__text[hidden]{display:grid;visibility:hidden}
.vf__text .d3{margin:0;color:var(--papier)}
.vf__text p{margin:0 0 clamp(20px,2.2vw,30px);max-width:58ch;color:var(--papier);font-size:clamp(1.134rem,1.296vw,1.274rem);line-height:1.62}
.vf__text.kommt>*{animation:vf-kommt 1.3s cubic-bezier(.16,1,.3,1) both}
.vf__text.kommt .vf__foto img{animation:vf-zoom 1.8s cubic-bezier(.16,1,.3,1) both}
@keyframes vf-kommt{from{transform:translateY(22px)}to{transform:none}}
@keyframes vf-zoom{from{transform:scale(1.07)}to{transform:none}}
@media (max-width:900px){.vf__text{grid-template-columns:1fr;gap:14px}.vf__info{padding-inline:12px}}
@media (prefers-reduced-motion:reduce){.vf__text.kommt>*,.vf__text.kommt .vf__foto img{animation:none}}

/* 16.10.2026 abends · «Demnächst im Haus», Text als Tafel (Robert: «Informationen besser angezeigt … Satz aus dem Hausmagazin kann man nicht lesen … schöner und luxuriöser»).
   Der Text steht nicht mehr frei auf dem Foto, sondern auf einer deckenden nachtblauen Tafel mit feiner Goldkante; Datum oder Preis unten in der Titelschrift neben dem Knopf.
   Der Satz zum Hausmagazin steht klein unter dem Titel. Das Foto selbst wird dafür weniger abgedunkelt. */
.dmn__bilder::after{background:linear-gradient(180deg,rgba(13,22,33,.86) 0%,rgba(13,22,33,.5) 18%,rgba(13,22,33,0) 40%,rgba(13,22,33,0) 66%,rgba(13,22,33,.7) 86%,var(--nacht) 100%)}
.dmn__kopf{grid-template-columns:minmax(0,1fr) auto;align-items:start}
.dmn__kopf .d2{text-shadow:0 2px 30px rgba(7,12,20,.55)}
.dmn__quelle{margin-top:18px;font-family:var(--mono);font-size:12.42px;letter-spacing:.2em;text-transform:uppercase;color:var(--hellgold);text-shadow:0 1px 14px rgba(7,12,20,.8)}
.dmn__texte{position:relative;max-width:min(600px,100%);margin-top:auto;padding:clamp(30px,3vw,46px) clamp(30px,3.2vw,50px) clamp(26px,2.6vw,38px);
  border-radius:var(--r-xl,22px);background:linear-gradient(#111e30,#0a121d);box-shadow:inset 0 0 0 1px rgba(184,152,80,.34),inset 0 1px 0 rgba(227,210,166,.12),0 40px 60px -34px rgba(0,0,0,.85)}
.dmn__texte::before{content:"";position:absolute;inset:9px;border-radius:calc(var(--r-xl,22px) - 7px);border:1px solid rgba(184,152,80,.14);pointer-events:none}
.dmn__t{align-self:stretch;display:flex;flex-direction:column}
.dmn__t .lk__nr{display:flex;align-items:center;gap:14px;letter-spacing:.22em}
.dmn__t .lk__nr::after{content:"";flex:1;max-width:120px;height:1px;background:rgba(184,152,80,.5)}
.dmn__t h3{margin-top:18px;font-size:clamp(2.16rem,3.564vw,3.564rem);line-height:1.06;text-shadow:none}
.dmn__t p{margin-top:16px;font-size:clamp(1.058rem,1.145vw,1.166rem);line-height:1.68;opacity:.8;max-width:46ch}
.dmn__fuss{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:auto;padding-top:28px}
.dmn__t p+.dmn__fuss{margin-top:26px;border-top:1px solid rgba(184,152,80,.22)}
.dmn__wann{font-family:var(--titel);font-size:clamp(1.35rem,1.728vw,1.728rem);line-height:1.1;color:var(--hellgold)}
.dmn__leiste{margin-top:clamp(28px,3vw,44px)}
@media (max-width:860px){
  .dmn__bilder::after{background:linear-gradient(180deg,rgba(13,22,33,.86) 0%,rgba(13,22,33,.3) 22%,rgba(13,22,33,0) 40%,rgba(13,22,33,.6) 62%,var(--nacht) 84%)}
  .dmn__texte{padding:26px 22px 22px}
  .dmn__fuss{gap:14px}
}
.dmn__bilder::after{background:linear-gradient(180deg,rgba(13,22,33,.9) 0%,rgba(13,22,33,.72) 20%,rgba(13,22,33,.28) 36%,rgba(13,22,33,0) 50%,rgba(13,22,33,0) 64%,rgba(13,22,33,.78) 84%,var(--nacht) 100%)}
.dmn__quelle{white-space:nowrap}
.dmn__kopf{margin-bottom:clamp(36px,4vw,64px)}
@media (max-width:860px){.dmn__quelle{white-space:normal;max-width:30ch;line-height:1.7}}
/* Satz zum Hausmagazin unter der Leiste, auf ruhigem Grund (über dem Foto war er nicht lesbar) */
.dmn__quelle{margin-top:22px;white-space:normal;font-family:inherit;font-size:15.66px;letter-spacing:.01em;text-transform:none;color:rgba(241,236,226,.66);text-shadow:none}
.dmn__kopf{align-items:end}

.vf__foto{margin:clamp(22px,2.4vw,34px) 0 0}
.vf__foto .rahmen__k{aspect-ratio:3/2}
.vf__foto .kerbe{font-family:var(--titel);font-weight:700;font-size:clamp(1.08rem,1.404vw,1.404rem)}
.vf__liste{margin:0 0 clamp(26px,2.8vw,40px);padding:0}
.vf__liste>div{display:grid;grid-template-columns:minmax(120px,11rem) minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid rgba(var(--lh),.14)}
.vf__liste>div:last-child{border-bottom:1px solid rgba(var(--lh),.14)}
.vf__liste dt{font-family:var(--mono);font-size:.907rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hellgold);padding-top:3px}
.vf__liste dd{margin:0;color:var(--papier);font-size:clamp(1.102rem,1.242vw,1.21rem);line-height:1.5}
@media (max-width:900px){.vf__liste>div{grid-template-columns:1fr;gap:4px}}

/* ======================================================================================================================
   16.10.2026 abends · Gastgeber = varianten-gastgeber.html Nr. 18 (Roberts Wahl, mit zwei kleinen Bildern rechts, ohne Schriftzug).
   Breite Kachel links, zwei kleine übereinander rechts, zusammen gleich hoch. Kacheln abgerundet mit Tiefe, ohne Rand.
   ====================================================================================================================== */
.gg18{display:grid;grid-template-columns:minmax(0,2.6fr) minmax(0,1fr);gap:clamp(16px,1.8vw,26px);height:clamp(320px,32vw,500px);max-width:1180px;margin:0 auto}
.gg18__klein{display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,1.8vw,26px);min-height:0}
.gg18__k{height:100%;border-radius:26px;box-shadow:0 1px 2px rgba(0,0,0,.4),0 40px 46px -28px #000}
.gg18__k img{width:100%;height:100%;object-fit:cover}
.gg18__satz{max-width:760px;margin:clamp(40px,4.4vw,64px) auto 0;text-align:center;font-weight:500;font-size:clamp(1.242rem,1.728vw,1.728rem);line-height:1.38;letter-spacing:-.012em;text-wrap:balance}
#gastgeber .knoepfe{margin-top:clamp(26px,3vw,40px)}
@media (max-width:900px){.gg18{grid-template-columns:minmax(0,1fr);height:auto}.gg18>.gg18__k{aspect-ratio:3/2}.gg18__klein{grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.gg18__klein .gg18__k{aspect-ratio:1}.gg18__k{border-radius:20px}}

/* 16.10.2026 Robert: «beim Footer bitte immer noch so eine goldene Linie oben» (alle Seiten), gleiche Doppellinie wie über dem Fuss-Ende */
.fuss::after{content:'';position:absolute;z-index:1;top:0;left:0;right:0;height:0;border-top:4px double rgba(184,152,80,.42);pointer-events:none}
.fuss{padding-top:clamp(36px,4.4vw,72px)}   /* Robert 16.10.2026: Textblock oben im Fuss etwas höher, mittiger zwischen den Linien */

/* 16.10.2026 Robert: keine Linie auf der Naht, keine einfarbige, unscharfe Fläche unter «Demnächst im Haus». Das Foto läuft bis zur Kante durch, unten nur so viel Schatten, wie die Leiste zum Lesen braucht; «Alle Angebote» steht im Foto */
.dmn-fl{padding-bottom:0}
.dmn__bilder::after{background:linear-gradient(180deg,rgba(13,22,33,.88) 0%,rgba(13,22,33,.4) 24%,rgba(13,22,33,.16) 42%,rgba(13,22,33,.5) 66%,rgba(13,22,33,.66) 100%),
             linear-gradient(90deg,rgba(13,22,33,.7) 0%,rgba(13,22,33,.25) 40%,rgba(13,22,33,0) 62%)}
.dmn__schluss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 30px;margin-top:clamp(22px,2.4vw,34px)}
.dmn__schluss .dmn__quelle{margin:0}
@media (max-width:860px){.dmn__bilder::after{background:linear-gradient(180deg,rgba(13,22,33,.82) 0%,rgba(13,22,33,.2) 24%,rgba(13,22,33,.3) 40%,rgba(13,22,33,.62) 62%,rgba(13,22,33,.72) 100%)}}

/* ---------- Sanfte Ecken = leiste-varianten.html Nr. 08 (Robert 16.10.2026, 22:51; löst Nr. 12 von 22:10 ab) ----------
   Leiste wieder in der Mitte, die Eck-Knöpfe links und rechts, alle drei mit kleinen Rundungen statt der Pillenform.
   Oben links statt «Tisch reservieren» die Sprachwahl (DE/EN/FR sichtbar, Liste mit allen sechs Sprachen des Hauses; übersetzt wird erst ganz am Schluss),
   genauso breit wie «Zimmer buchen» (main.js gleicht die Breite an). */
.nav__insel,.glanz,.glanz::after{border-radius:12px}
.glanz--r,.sprache{justify-content:center}
.sprache{padding:0;overflow:visible;cursor:pointer}
.sprache::before{display:none}
.sprache::after{box-shadow:inset 0 0 0 1px rgba(184,152,80,.5)}
.sprache summary{display:flex;align-items:center;justify-content:center;gap:14px;height:100%;padding:0 20px;list-style:none;cursor:pointer}
.sprache summary::-webkit-details-marker{display:none}
.sprache summary>svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.6;opacity:.8;transition:transform .4s var(--e2)}
.sprache[open] summary>svg{transform:rotate(180deg)}
.sprache__drei{display:inline-flex;align-items:center;gap:8px}
.sprache__drei b{font-weight:500;box-shadow:inset 0 -1px 0 var(--gold);padding:5px 1px}
.sprache__drei span{opacity:.5}
.sprache__drei i{font-style:normal;opacity:.35}
.sprache__liste{position:absolute;left:0;top:calc(100% + 10px);min-width:100%;margin:0;padding:8px;list-style:none;border-radius:12px;color:var(--papier);
  background:linear-gradient(180deg,#223452,#0b1420);box-shadow:inset 0 0 0 1px rgba(var(--lh),.12),0 16px 30px -18px rgba(0,0,0,.9)}
.auf-foto .sprache__liste{color:#111a26;background:linear-gradient(#f8f4ea,#e8dfcd);box-shadow:inset 0 1px 0 #fffdf8,inset 0 -2px 0 #a79c86,0 16px 30px -18px rgba(0,0,0,.9)}
.sprache__liste a,.sprache__liste span{display:flex;align-items:baseline;gap:14px;padding:10px 14px;border-radius:8px;font-family:var(--sans);font-size:15.12px;letter-spacing:0;text-transform:none;white-space:nowrap}
.sprache__liste b{min-width:1.8em;font-family:var(--mono);font-weight:500;font-size:11.88px;letter-spacing:.14em;color:var(--gold)}
.sprache__liste a[aria-current]{background:rgba(var(--lh),.1)}
.auf-foto .sprache__liste a[aria-current]{background:rgba(var(--ld),.08)}
.sprache__liste span{cursor:default;opacity:.6}

/* 16.10.2026 23:10 · Robert zu den Restaurants (Küche) und «Seminare und Tagungen» (Feste): «die Buttons bitte mittig in ihren Bereichen» */
.schau__t .knoepfe,.paar .knoepfe,.vf__rechts .knoepfe{justify-content:center}
.schau__t .knoepfe:has(>.kn-zeile),.paar .knoepfe:has(>.kn-zeile),.vf__rechts .knoepfe:has(>.kn-zeile){display:grid;justify-content:center}
:is(.schau__t,.paar,.vf__rechts) .knoepfe>.kn-zeile{justify-self:center}

/* 16.10.2026 23:20 · Robert zu «Das Haus»: Namen der Gastgeber «ein bisschen edler wie so Namensschilder»: je Name ein Schild aus Papier mit Goldrahmen, Name und Aufgabe mittig */
.gg__namen{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);border-top:0;padding-top:0}
.gg__namen div{position:relative;display:grid;justify-items:center;align-content:center;text-align:center;padding:clamp(22px,2.2vw,30px) 18px clamp(20px,2vw,26px);border:0;border-radius:16px;
  background:linear-gradient(180deg,#fffdf8,#f1e9d8);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(184,152,80,.25),0 2px 4px rgba(15,22,32,.08),0 16px 32px -18px rgba(15,22,32,.45)}
.gg__namen div::before{content:'';position:absolute;inset:7px;border:1px solid rgba(184,152,80,.55);border-radius:11px;pointer-events:none}
.gg__namen div::after{content:'';position:absolute;top:7px;left:50%;width:34px;height:2px;margin-left:-17px;background:var(--gold);border-radius:2px}
.gg__namen dt{font-size:clamp(1.296rem,1.674vw,1.62rem)}
.gg__namen dd{margin-top:9px;color:#8a7442}
@media (max-width:900px){.gg__namen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.gg__namen{grid-template-columns:minmax(0,1fr)}}

/* 16.10.2026 23:20 · Robert zu «Anreise und Kontakt»: «diese Kacheln rechts viel zu gross … viel kleiner»: Kasten nicht mehr auf die Höhe der Karte gezogen, mittig daneben, Felder knapp */
@media (min-width:901px){
  html #anreise .weit__unten--gleich{align-items:center}
  html #anreise .weit__r--kasten{display:block;align-self:center;width:100%;max-width:520px;justify-self:center;margin-inline:auto}
  html #anreise .kkasten{flex:none;grid-auto-rows:auto}
}
html #anreise .kkasten__f{min-height:0;gap:8px;padding:16px 18px 17px}
html #anreise .kkasten__f b{font-size:clamp(1.08rem,1.21vw,1.231rem)}
html #anreise .kkasten__f small{font-size:.864rem;margin-top:5px}
html #anreise .kkasten__f i{width:30px;height:30px;top:10px;right:10px}

/* 16.10.2026 23:25 · Robert: «Die Schrift im Fenster scheint mir ein bisschen gross … ob die Schriften alle passen, auch gleich gross». Gemessen (_qa/schrift_mass.js, 1440 px):
   Fenster-Sätze standen auf allen 20 Fenstern bei 62 px, grösser als die Abschnitts-Überschriften (56 px), lange Zitate liefen über sechs Zeilen.
   Jetzt eine Grösse für alle Fenster, deutlich unter den Überschriften: 1440 px → 36 px, Handy → höchstens 29 px (Robert 23:23: «überall … zu gross»). */
html .bruch .d2{font-size:clamp(1.674rem,2.7vw,2.538rem);line-height:1.16;max-width:32ch;margin-inline:auto}
@media (max-width:900px){html .bruch .d2{font-size:clamp(1.404rem,5.616vw,1.944rem)}}

/* 16.10.2026 23:25 · Robert zur Sauna World («Ein Saunagang»): die drei Kacheln «eleganter und luxuriöser», die drei Angaben darunter (Zeiten, Anfrage, Mail) «nochmal schöner».
   Kacheln: Papier mit innerem Goldrahmen, Schrittzahl in römischen Ziffern, kleines Zeichen, alles mittig, Goldstrich unter dem Titel.
   Angaben: drei dunkle Schilder mit feinem Goldrahmen, Bezeichnung oben in Gold, Wert in der Titelschrift, Verweise ohne Unterstrich. */
#saunagang .saeulen{counter-reset:schritt}
#saunagang .saeule__k{position:relative;display:grid;justify-items:center;align-content:start;text-align:center;padding:clamp(34px,3.4vw,52px) clamp(26px,2.8vw,44px) clamp(30px,3vw,44px);counter-increment:schritt;
  background:linear-gradient(180deg,#fffdf8 0%,#f7f1e4 60%,#efe6d2 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 rgba(184,152,80,.22),0 3px 0 #d8ccb0,0 40px 60px -34px rgba(2,5,10,.75)}
#saunagang .saeule__k::before{content:'';position:absolute;inset:10px;border:1px solid rgba(184,152,80,.55);border-radius:calc(var(--r-l) - 10px);pointer-events:none}
#saunagang .saeule__k::after{content:counter(schritt,upper-roman);order:-1;font-family:var(--titel);font-weight:700;font-size:1.026rem;letter-spacing:.2em;color:#9a7b3c;margin-bottom:12px}
#saunagang .saeule__k svg{width:26px;margin:0 0 16px}
#saunagang .saeule__k .d3{font-size:clamp(1.566rem,2.16vw,2.052rem);padding-bottom:16px;background:linear-gradient(var(--gold),var(--gold)) 50% 100%/44px 1px no-repeat}
#saunagang .saeule__k p{margin-top:16px;max-width:34ch;font-size:1.058rem;line-height:1.62;opacity:.82}
#saunagang .angaben--dunkel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);margin-top:clamp(36px,4vw,60px);border:0}
#saunagang .angaben--dunkel .angabe{position:relative;display:flex;flex-direction:column-reverse;justify-content:center;align-items:center;gap:12px;text-align:center;padding:clamp(24px,2.4vw,34px) 20px;border:0;border-radius:var(--r-m);
  background:linear-gradient(180deg,#1b2d47,#122036);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 44px -28px rgba(0,0,0,.8)}
#saunagang .angaben--dunkel .angabe::before{content:'';position:absolute;inset:7px;border:1px solid rgba(184,152,80,.32);border-radius:calc(var(--r-m) - 7px);pointer-events:none}
#saunagang .angaben--dunkel .angabe small{font-family:var(--mono);font-size:11.88px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);opacity:1}
#saunagang .angaben--dunkel .angabe b{font-size:clamp(1.242rem,1.62vw,1.512rem);line-height:1.3}
#saunagang .angaben--dunkel .angabe a{box-shadow:none;text-decoration:none;color:var(--papier);background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat;transition:background-size .6s var(--e1)}
#saunagang .angaben--dunkel .angabe a:hover{background-size:100% 1px}
@media (max-width:900px){#saunagang .angaben--dunkel{grid-template-columns:minmax(0,1fr)}}

/* 16.10.2026 23:30 · Robert zur Seminar-Seite: (1) der Schatten unter dem Kopfbild «zu abgehackt, muss flüssiger in den Untergrund übergehen»: der Kopf beschneidet nur noch seitlich,
   der Schatten fällt weich in den nächsten Abschnitt; (2) «das Dokument links und unten rechts auf einer Höhe abschliessen»: rechte Spalte als Säule, die Raummiete sitzt unten bündig mit der Pauschale. */
html .seitenkopf{overflow:visible;overflow-x:clip;z-index:1}
#pauschale .paar--blatt{align-items:stretch}
#pauschale .paar--blatt>div:last-child{display:flex;flex-direction:column}
#pauschale .pauschale__miete{margin-top:auto}
#pauschale .paar--blatt>div:last-child>.knoepfe{margin-bottom:clamp(22px,2.6vw,36px)}
@media (max-width:900px){#pauschale .pauschale__miete{margin-top:clamp(22px,2.6vw,36px)}}

/* 17.10.2026 · Robert zu den Zimmerseiten: (1) Schatten unter dem Kopffoto «schneidet zu sehr ab, muss flüssiger in den Untergrund übergehen»: weicher, und der Kopf lässt unten
   so viel Luft, dass der Schatten ganz in ihm ausläuft (Safari schnitt ihn trotz overflow-x:clip an der Kante ab); der Abschnitt danach rückt um dieselbe Luft nach oben.
   (2) übrige Fotos klein in einer Reihe (galerie() in bau.py, --n = Anzahl), am Handy zwei je Reihe. */
.seitenkopf .seitenkopf__bild{box-shadow:0 0 0 1px rgba(var(--ld),.1),0 34px 70px -34px rgba(var(--ld),.55),0 12px 24px -16px rgba(var(--ld),.3)}
@media (min-width:901px){
  .seitenkopf{padding-bottom:clamp(80px,7vw,110px)}
  .seitenkopf+.fl{padding-top:max(40px,calc(var(--abschnitt) - clamp(50px,4vw,62px)))}
}
.stock--reihe{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
@media (max-width:900px){.stock--reihe{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stock--reihe>figure[role="button"]{cursor:pointer}
.stock--reihe>figure[role="button"]:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* 17.10.2026 · Robert: «Wenn ich Play drücke, rutscht der Button unten links in die Kachel. Entferne den Button, wenn man Play drückt.» Läuft der Film, ist die Taste weg
   (Tippen auf den Film hält an, main.js), angehalten steht sie wieder in der Mitte. */
.film.laeuft .film__taste{left:50%;top:50%;bottom:auto;width:84px;height:84px;margin:-42px 0 0 -42px;opacity:0;visibility:hidden;pointer-events:none}
.film__taste{transition:opacity .35s ease,visibility 0s linear}
.film.laeuft{cursor:pointer}
.film.laeuft .film__taste{transition:opacity .35s ease,visibility 0s linear .35s}
/* 17.10.2026 · Robert zu «Momente im Doldenhorn» (heiraten.html): «die Schatten der Kacheln auch wieder sehr abgehackt, sollen flüssiger in den Untergrund übergehen».
   Ein Band zum Blättern schneidet alles ab, was unter seinen Rand fällt: unten so viel Luft, dass der ganze Schatten darin ausläuft, der Abstand nach aussen bleibt wie vorher. */
.band{padding-bottom:clamp(84px,7vw,110px);margin-bottom:calc(30px - clamp(84px,7vw,110px))}
/* Auszeichnungen als freie Plaketten: dieselbe Regel, der Streifen schneidet sonst den Schatten unter den Plaketten ab (gemessen 6 bis 18 px Platz für 30 px Schatten). */
.ehren--frei{padding-bottom:34px;margin-bottom:-16px}
/* 17.10.2026 · Robert: «dieser Schein bei dem Button kommt von links und fährt ganz schnell nach rechts», sichtbar neben dem Knopf (Anfrage-Fenster «Tisch anfragen»).
   Safari schneidet den wandernden Streifen am runden Knopf nicht ab, sobald der Knopf beim Darüberfahren hochrückt. Der Schein wandert jetzt nicht mehr als Streifen,
   er ist ein Verlauf auf der Fläche des Knopfs selbst (gleiche Grösse, gleiche Rundung) und kann den Knopf nie verlassen. */
.kn::after{inset:0;left:0;width:auto;border-radius:inherit;transform:none;pointer-events:none;
  background:linear-gradient(100deg,transparent 0 38%,rgba(255,255,255,.5) 50%,transparent 62% 100%) no-repeat;background-size:320% 100%;background-position:100% 0}
.kn:hover::after{transform:none;background-position:0 0;transition:background-position .9s var(--e1)}
/* 17.10.2026 · Robert zu den Namensschildern (haus.html): «sehen nicht edel aus, und der Strich oben in der Mitte sieht aus wie ein Defekt».
   Strich weg. Schilder wie graviert: Nachtblau mit Goldschnitt, Name in Goldprägung, darunter eine feine Goldlinie und die Aufgabe in hellem Versal. */
.gg__namen div{background:radial-gradient(130% 120% at 50% 0%,#22385a 0%,#15253c 55%,#0f1b2d 100%);color:#efe6d2;
  box-shadow:inset 0 1px 0 rgba(243,227,186,.3),inset 0 0 0 1px rgba(201,166,96,.55),0 1px 0 #a88a4f,0 26px 40px -28px rgba(15,22,32,.85)}
.gg__namen div::before{inset:6px;border:1px solid rgba(201,166,96,.42);border-radius:11px}
.gg__namen div::after{content:none;display:none}
.gg__namen dt{background:linear-gradient(180deg,#f7e7bd 0%,#d9b46a 58%,#b38a45 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#e3c27e;letter-spacing:.01em}
.gg__namen dd{display:grid;justify-items:center;gap:10px;margin-top:12px;color:rgba(239,230,210,.72)}
.gg__namen dd::before{content:'';width:42px;height:1px;background:linear-gradient(90deg,rgba(201,166,96,0),#c9a660,rgba(201,166,96,0))}
/* 17.10.2026 · Robert (Das Haus #anreise): «die blaue Kachel weiter runter, mittiger zwischen dem Bild und dem unteren Ende der linken Kachel».
   Die Zeile beginnt um den Überstand ins Bild früher; derselbe Wert als Rand oben setzt die Mitte genau zwischen Bildkante und Kartenende. */
@media (min-width:901px){html #anreise .weit__r--kasten{margin-top:clamp(70px,10vw,150px)}}
/* 17.10.2026 · Schrift grösser: am Handy bleiben die Knöpfe beim alten Mass, sonst läuft «Zum Restaurant Doldenhorn» über den Knopf hinaus. */
@media (max-width:480px){.kn{font-size:11.5px;letter-spacing:.14em;padding-left:22px;gap:12px}}
@media (max-width:480px){.knoepfe>.kn{flex-shrink:0;max-width:100%}}
@media (max-width:480px){.schau__t .knoepfe{grid-template-columns:minmax(0,1fr)!important;justify-items:center}.tafel__w .knoepfe .kn{font-size:10.5px;letter-spacing:.1em;padding-left:18px}}
/* 17.10.2026 · Robert: «zwischen den Heroes und dem ersten Block … dieser Leerraum gefällt mir nicht (kein Strich mit Logo) … gilt für weite Teile der Seite».
   Master 2.5, erstes Mittel: Abstand verringern. Der Kopf schneidet nur noch rechts ab (clip-path statt overflow-x:clip), sein Schatten fällt weich über den
   nächsten Abschnitt; damit braucht er unten keine Extra-Luft mehr, und der erste Block rückt nah an den Kopf. */
@media (min-width:901px){
  html .seitenkopf{overflow:visible;clip-path:inset(-600px 0 -600px -600px);padding-bottom:clamp(16px,1.6vw,26px)}
  html .seitenkopf+.fl{padding-top:clamp(44px,4.2vw,70px)}
}
/* 17.10.2026 · Unter jedem Seitenkopf drei Angaben der Seite (Robert: Fassung 02 aus uebergang-varianten.html), drei_zahlen()/zahlen_zeile() in bau.py.
   Grosse Angabe in der Titelschrift, kleiner Satz darunter, doppelte Goldlinie oben, feine unten, senkrechte Goldlinien dazwischen. */
.kz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));box-sizing:border-box;width:calc(100% - 2*var(--rand));max-width:calc(var(--max) - 2*var(--rand));margin-inline:auto;padding-inline:0;margin-top:clamp(28px,3vw,44px);border-top:3px double rgba(184,152,80,.55);border-bottom:1px solid rgba(184,152,80,.45);position:relative;z-index:2}
.kz>div{display:grid;gap:6px;align-content:center;padding:clamp(16px,1.8vw,24px) clamp(14px,2vw,30px);text-align:center}
.kz>div+div{border-left:1px solid rgba(184,152,80,.45)}
.kz b{font-family:var(--titel);font-weight:700;font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.05;color:#27405f}
.kz small{display:block;font-size:.98rem;line-height:1.4;opacity:.82}
.seitenkopf--nacht .kz b{color:#e3c27e}.seitenkopf--nacht .kz small{color:rgba(239,230,210,.8)}
@media (max-width:900px){.kz{grid-template-columns:minmax(0,1fr);margin-top:22px}.kz>div+div{border-left:0;border-top:1px solid rgba(184,152,80,.45)}.kz>div{padding:14px 10px}}