/* Landgasthof Ruedihus, Kandersteg — Designstudie · Tasty Studios
   Farbwelt «Stube bei Kerzenlicht»: jeder Ton ist aus einem Bild des Hauses gemessen (_recherche/farben.json).
   Bausteine nach dem Referenzbau Salt & Silver und dem Carlton-Europe. Bewegung nur über transform und opacity, nativer Scroll.
   Jeder Block hat eine Kommentarzeile, die sagt, was er tut. */

/* ---------- Schriften: Titel aus der Wortmarke (Georgia Bold → Gelasio, gleiche Laufweite), Lesetext Instrument Sans, kleine Marken DM Mono ---------- */
@font-face{font-family:'Gelasio';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/gelasio-700.woff2') format('woff2')}
@font-face{font-family:'Gelasio';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/gelasio-400.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/InstrumentSans-normal-400_600.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/DMMono-normal-400.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/DMMono-normal-500.woff2') format('woff2')}
/* Ersatzschriften in gleicher Laufweite, damit beim Laden nichts springt (Gelasio läuft wie Georgia) */
@font-face{font-family:'Sans Ersatz';src:local('Arial');size-adjust:99%}

:root{
  --russ:#1f1209;      /* Stube, Schatten am Boden */
  --tief:#170d06;      /* dunkelster Grund: Fuss, Menü */
  --holz:#321f10;      /* Stube, dunkles Wandholz */
  --karte:#2a180a;
  --balken:#6d431f;    /* Balken im Lampenlicht */
  --kerze:#c98543;     /* Kerzenlicht auf dem Tischtuch */
  --licht:#f3cd94;     /* hellster Ton im Kerzenlicht */
  --gold:#b78f51;      /* Gold des Zeichens auf den Karten des Hauses */
  --papier:#efe4d3;    /* aufgehellt aus der hellen Wand der Liebeslaube #d8c2ad */
  --leinen:#d8c2ad;
  --blatt:#fbf5ea;
  --tinte:#2a1a0e;
  --geranie:#c42e13;   /* Geranien an der Fassade: nur als Punkt */
  --ofen:#31380d;      /* Kachelofen im Ofestübli: nur als Punkt */
  --ld:50,31,16; --lh:239,228,211;
  --titel:'Gelasio',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(--russ);color:var(--papier);font-family:var(--sans);font-size:18px;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(--kerze);color:var(--tinte)}
:focus-visible{outline:2px solid var(--kerze);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 (Russ, Holz, Papier) ---------- */
.fl{position:relative;padding-block:var(--abschnitt)}
.fl--russ{background:var(--russ)}
.fl--holz{background:var(--holz)}
.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 Butzenscheiben der Fensterreihe */
.butzen{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23c98543' stroke-opacity='.07' stroke-width='1.4'%3E%3Ccircle cx='28' cy='28' r='21'/%3E%3Ccircle cx='28' cy='28' r='5'/%3E%3Cpath d='M0 0h56v56H0z'/%3E%3C/g%3E%3C/svg%3E")}

/* ---------- Schrift ---------- */
h1,h2,h3,h4{font-family:var(--titel);font-weight:700;letter-spacing:-.005em}
.d1{font-size:clamp(2.6rem,5.6vw,5.2rem);line-height:1.05}
.d2{font-size:clamp(2rem,3.9vw,3.5rem);line-height:1.1}
.d3{font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.16}
.d4{font-size:clamp(1.2rem,1.5vw,1.4rem);line-height:1.22}
/* Betonung über Farbe, nie kursiv */
.gold{color:var(--gold)}
.hell .gold{color:var(--balken)}
.lead{font-size:clamp(1.1rem,1.45vw,1.3rem);line-height:1.55}
.leise{opacity:.74}
.eng{max-width:58ch}
.mono{font-family:var(--mono);font-size:11.5px;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.08rem;line-height:1;color:var(--gold);margin-bottom:26px}
.kapitel i{width:64px;height:1px;background:currentColor;opacity:.7}
.hell .kapitel{color:var(--balken)}

/* ---------- 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:11.5px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--tinte);
  background:linear-gradient(#f6ecdc,#e7d7c0 55%,#d6c2a6);box-shadow:inset 0 1px 0 #fffaf0,inset 0 -2px 0 #b89f7f,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(#4a2e17,#2a180a);box-shadow:inset 0 1px 0 #7b5330,inset 0 -2px 0 #140a03}
.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(#55361c,#3a2412 55%,#2a180a);box-shadow:inset 0 1px 0 #84603c,inset 0 -2px 0 #120903,0 12px 22px -12px rgba(42,26,14,.7)}
.kn--dunkel i{background:linear-gradient(#f6ecdc,#d6c2a6);box-shadow:inset 0 1px 0 #fffaf0,inset 0 -2px 0 #b89f7f}
.kn--dunkel svg{stroke:var(--tinte)}
.kn--dunkel::after{background:linear-gradient(100deg,transparent,rgba(243,205,148,.28),transparent)}
.kn--klein{height:46px;padding:0 6px 0 20px;font-size:11px}
.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(#55361c,#2a180a);box-shadow:inset 0 1px 0 #84603c,inset 0 -2px 0 #120903,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:11.5px;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(#f6ecdc,#e7d7c0 55%,#d6c2a6);box-shadow:inset 0 1px 0 #fffaf0,inset 0 -2px 0 #b89f7f,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(#55361c,#3a2412 55%,#2a180a);box-shadow:inset 0 1px 0 #84603c,inset 0 -2px 0 #120903,0 8px 14px -8px rgba(42,26,14,.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:11.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  background:linear-gradient(180deg,#4a2e17,#24140a) padding-box,
    conic-gradient(from calc(var(--ga) - var(--go)),transparent,var(--kerze) 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:#120a04;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);will-change:transform}
/* Einkerbung als Namensschild in der Bildecke: immer lesbar, immer gleich weit vom Rand */
.kerbe{--f:var(--russ);--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.05rem,1.35vw,1.35rem);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--holz .kerbe{--f:var(--holz)}.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:#120a04}
.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.2rem,1.6vw,1.5rem);line-height:1.2}
.frei small{display:block;margin-top:4px;font-size:1rem;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,#4a2e17,#27160b);box-shadow:inset 0 1px 0 rgba(255,236,200,.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)}
.nav__logo b{font-family:var(--titel);font-weight:700;font-size:1.22rem;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:13.5px;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(--kerze);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(#f6ecdc,#d6c2a6);box-shadow:inset 0 1px 0 #fffaf0,inset 0 -2px 0 #b89f7f}
.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(2rem,9vw,3.2rem);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:1rem}
.menue__fuss .knoepfe{margin-bottom:12px}

/* ---------- Auftakt: das Haus zur blauen Stunde. Beim ersten Scrollen wächst aus der Fensterreihe das Bild der Stube ---------- */
.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 img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
/* Titel oben links im dunklen Berg, Buchungsleiste unten im Schnee: das erleuchtete Haus bleibt frei */
.auftakt__t{width:100%;display:flex;flex-direction:column;justify-content:space-between;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:12px;max-width:36ch;font-size:clamp(1.1rem,1.5vw,1.32rem);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(#f8f0e2,#e9dac3);color:var(--tinte);box-shadow:inset 0 1px 0 #fffaf0,inset 0 -2px 0 #b89f7f,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:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--balken)}
.leiste input,.leiste select{width:100%;min-width:0;border:0;background:transparent;color:var(--tinte);font:500 1.06rem 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:.95rem;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(10,4,0,.9),0 0 60px rgba(10,4,0,.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(--licht)}
.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(#f8f0e2,#eadbc5);color:var(--tinte);box-shadow:inset 0 1px 0 #fffaf0,inset 0 -2px 0 #c3ad8d,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:#120a04}
.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.15rem,1.6vw,1.5rem);line-height:1.2}
.frage:hover{transform:translateY(-4px)}
.frage[aria-selected="true"]{transform:scale(1.035);background:linear-gradient(#55361c,#2a180a);color:var(--papier);box-shadow:inset 0 0 0 1.5px var(--kerze),inset 0 1px 0 #84603c,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.3rem,1.9vw,1.75rem);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(255,236,200,.1),0 30px 44px -32px #000}
.stube__b{display:block;overflow:hidden;aspect-ratio:4/3;background:#120a04}
.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:1rem;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(2rem,3.4vw,3rem);line-height:1;color:var(--balken)}
.blatt__kopf svg{width:54px;height:auto;color:var(--gold)}
.gruppe{margin-top:26px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--balken)}
.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.06rem;line-height:1.3;letter-spacing:.01em}
.gang em{font-family:var(--titel);font-style:normal;font-weight:700;font-size:1.06rem;line-height:1.3;white-space:nowrap}
.gang span{grid-column:1/-1;font-size:.98rem;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:.95rem;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:#120a04}
.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.12rem;line-height:1.2}
.bogen small{display:block;margin-top:3px;font-size:.98rem;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.1rem;color:var(--balken);margin-bottom:8px}
.tag li{font-size:.94rem;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:#120a04}
.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.5rem,3.3vw,3rem);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:11.5px;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.2rem,1.6vw,1.45rem);line-height:1.25}
.preis small{display:block;margin-top:4px;font-family:var(--sans);font-weight:400;font-size:1rem;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(--balken)}
.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(--russ);color:var(--papier);overflow:hidden;box-shadow:0 60px 120px -40px #000}
dialog.buehne::backdrop,dialog.buchen::backdrop{background:rgba(10,5,2,.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:#0d0703;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(--kerze)}
.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.4rem,6.3vw,7rem);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:1rem;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.08rem;white-space:nowrap;color:rgba(var(--lh),.88)}
.laufband span::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--kerze)}
@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.04rem}
.brief .unter{margin-top:20px;font-family:var(--titel);font-weight:700;font-size:1.2rem}
/* 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--russ .angaben,.fl--holz .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--russ .angabe+.angabe,.fl--holz .angabe+.angabe{border-color:rgba(var(--lh),.14)}
.angabe small{display:block;margin-top:9px;font-size:1rem;opacity:.74}
.angabe b{display:block;font-family:var(--titel);font-weight:700;font-size:clamp(1.2rem,1.8vw,1.7rem);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:1rem}

/* ---------- 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(--holz);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(20,10,3,.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:#0d0703}
/* 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(#f6ecdc,#d6c2a6);box-shadow:inset 0 1px 0 #fffaf0,inset 0 -2px 0 #b89f7f,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(--licht);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(--holz);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.4rem,2.3vw,2.1rem);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.1rem,5.4vw,5.2rem);line-height:1.04}
.fuss__unter{margin-top:16px;font-family:var(--mono);font-size:11.5px;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,#4a2e17,#27160b);box-shadow:inset 0 0 0 1px rgba(183,143,81,.36),inset 0 1px 0 rgba(255,236,200,.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:#120a04}
.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.3rem,1.7vw,1.75rem);line-height:1.14}
.fh address{margin-top:8px;font-size:1rem;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.15rem,1.42vw,1.5rem)}
@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:11.5px;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:1rem;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:1rem;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:11.5px;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(--holz);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(183,143,81,.34);border-radius:calc(var(--r-xl) - 10px);pointer-events:none;z-index:2}
.buchen__b{position:relative;min-height:320px;background:#120a04}
.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(10,5,2,.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:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--kerze)}
.feld input,.feld select{width:100%;min-width:0;border:0;background:transparent;color:var(--papier);font:500 1.08rem 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:.98rem;line-height:1.55;opacity:.84}
.buchen__gross{display:block;margin-top:18px;font-family:var(--titel);font-weight:700;font-size:clamp(1.5rem,2.4vw,2rem);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.08rem}
.blatt h2{font-size:clamp(1.5rem,2.2vw,2rem);margin-top:34px;color:var(--balken)}
.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.12rem}
.fl--russ .liste li,.fl--holz .liste li{border-color:rgba(var(--lh),.15)}

/* ---------- Kleinere Schirme ---------- */
@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:17px}
  .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:56% 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.3rem,11vw,3.2rem)}
  .kn{height:52px;padding-left:22px;letter-spacing:.14em}
  .knoepfe .kn{flex:1 1 auto}
  .nav__logo b{font-size:1.08rem;letter-spacing:.06em}
  .nav__logo svg{height:36px}
  .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.5rem,13vw,3.6rem)}
  .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.45rem,7.4vw,2rem);overflow-wrap:anywhere}
  .blatt__kopf svg{width:40px}
}
@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,.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}

/* =====================================================================
   Fassung 2 (08.10.2026 abends): die Startseite als ein Abend im Haus.
   Ankommen → Znacht → Die Nacht → Seit 1753 → Am Morgen. Neue Bausteine unten, jeder mit seiner einen Bewegung.
   ===================================================================== */

/* Auftakt: das Haus kommt beim Laden sacht zur Ruhe (einmalig, nur transform) */
.auftakt__haus img{animation:ruhe 3.4s var(--e1) both}
@keyframes ruhe{from{transform:scale(1.08)}to{transform:none}}

/* Kapitelzeile: grösser, mit einer Linie, die sich zieht */
.kapitel{font-size:clamp(1.1rem,1.5vw,1.4rem);margin-bottom:clamp(20px,2.4vw,34px)}
.kapitel i{width:clamp(48px,7vw,110px);transform-origin:left}

/* Wortweise: ein Satz des Hauses wird beim Scrollen Wort für Wort hell (nur Deckkraft) */
.worte__t{font-family:var(--titel);font-weight:700;font-size:clamp(1.75rem,3.3vw,3.2rem);line-height:1.18;letter-spacing:-.005em;max-width:19ch}
.worte__von{margin-top:26px;font-family:var(--mono);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.liest .w{opacity:.17;transition:opacity .7s var(--e1)}
.liest .w.an{opacity:1}
.still .w{opacity:1}
/* Tiefe: ein grosses Bild, über dessen Ecke ein kleines liegt. Das kleine wandert langsamer */
.tiefe{position:relative;padding:0 0 12% 14%}
.tiefe__klein{position:absolute;left:0;bottom:0;width:44%;z-index:2}
.tiefe__klein .rahmen{background:var(--holz);box-shadow:inset 0 0 0 1px rgba(var(--lh),.2),0 30px 44px -26px #000}
.hell .tiefe__klein .rahmen{background:var(--papier)}

/* Rundgang durch die Stuben: ohne Bewegung ein Band zum Wischen, am Rechner eine stehende Strecke, die zur Seite fährt (ein Zug, nur transform) */
.rg{position:relative;background:var(--russ)}
.rg__steh{padding-block:var(--abschnitt)}
.rg__zug{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);padding-inline:var(--rand);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.rg__zug::-webkit-scrollbar{display:none}
.rg__text{flex:none;width:min(520px,84vw);scroll-snap-align:start}
.rg__text p{margin-top:14px}
.rg__text h3+p{margin-top:8px}
.rg__text h3{margin-top:26px}
.rg__text h3:first-child{margin-top:0}
.rg__p{flex:none;scroll-snap-align:center;width:min(84vw,calc(min(64svh,640px)*1.5))}
.rg__p .rahmen__k{aspect-ratio:3/2}
.rg__p b{display:block;margin-top:16px;font-family:var(--titel);font-weight:700;font-size:clamp(1.15rem,1.5vw,1.45rem);line-height:1.2}
.rg__balken{display:none}
.quer .rg__steh{position:sticky;top:0;height:100svh;padding:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.quer .rg__zug{overflow:visible;width:max-content;will-change:transform}
.quer .rg__balken{display:block;position:absolute;left:var(--rand);right:var(--rand);bottom:clamp(22px,4svh,44px);height:2px;background:rgba(var(--lh),.16)}
.quer .rg__balken i{display:block;height:100%;background:var(--kerze);transform-origin:left;transform:scaleX(0);will-change:transform}

/* Laufband gross: Namen in der Titelschrift (Herkunft der Produkte, Gäste des Hauses) */
.laufband--gross{padding:clamp(18px,2.2vw,30px) 0;background:var(--holz)}
.laufband--gross span{font-size:clamp(1.6rem,3.6vw,3.3rem);gap:clamp(22px,3vw,48px);padding-right:clamp(22px,3vw,48px);color:var(--papier)}
.laufband--gross span::after{width:9px;height:9px}
.laufband--gross .laufband__zug{animation-duration:64s}
.laufband--hell{background:var(--papier);border-color:rgba(var(--ld),.14)}
.laufband--hell span{color:var(--tinte)}
.laufband--hell span::after{background:var(--geranie)}
.vorband{background:var(--holz);padding:clamp(30px,3.4vw,50px) 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.vorband--hell{background:var(--papier);color:var(--balken)}

/* Die Nacht: jedes Zimmer ist ein ganzer Schirm. Das nächste schiebt sich als Karte darüber (position:sticky, kein Skript) */
.nacht{background:#0d0703}
.zb{position:sticky;top:0;height:100svh;min-height:560px;display:flex;align-items:flex-end;overflow:hidden;background:#0d0703}
.zb+.zb{border-radius:30px 30px 0 0;box-shadow:0 -1px 0 rgba(183,143,81,.6)}
.zb__bild{position:absolute;inset:0}
.zb__bild img{width:100%;height:100%;object-fit:cover}
.zb__in{position:relative;width:100%;padding-bottom:clamp(22px,3.4vw,52px)}
/* helle Tafel über dem Bild, Angaben gross */
.zb__tafel{width:min(540px,100%);padding:clamp(22px,2.6vw,38px);border-radius:26px;background:linear-gradient(#fbf5ea,#f1e6d4);color:var(--tinte);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(var(--ld),.12),0 30px 50px -26px rgba(0,0,0,.85)}
.zb__tafel .d2{font-size:clamp(1.9rem,3.2vw,2.9rem)}
.zb__tafel p{margin-top:10px}
.zb__tafel .knoepfe{margin-top:20px}
.zb__tafel .gold{color:var(--balken)}
.zb--r .zb__in .zb__tafel{margin-left:auto}

/* Zahlen der Gäste: dieselbe Tafel wie die Jahre, drei bis vier Werte */
.jahr small{display:block;margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
.jahr small+p{margin-top:4px}

/* Band zum Blättern mit grossen Karten: nativer Seitwärts-Scroll, Pfeile, Laufbalken */
.band{display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--rand) 44px;scrollbar-width:none;scroll-padding-left:var(--rand)}
.band::-webkit-scrollbar{display:none}
.band>*{flex:none;width:min(480px,84vw);scroll-snap-align:start}
.anlass{display:flex;flex-direction:column;padding:clamp(24px,2.6vw,38px);border-radius:32px;background:linear-gradient(#fbf5ea,#f1e6d4);color:var(--tinte);box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 #c9b392,0 28px 40px -30px #000}
.anlass h3{font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.1;color:var(--balken)}
.anlass .wann{margin-top:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.anlass p{margin-top:18px;font-family:var(--titel);font-weight:700;font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.3}
.anlass .wann,.anlass .zusatz{font-family:var(--sans);font-weight:400}
.anlass .wann{font-family:var(--mono)}
.anlass ul{margin-top:16px;border-top:1px solid rgba(var(--ld),.18)}
.anlass li{padding:9px 0;border-bottom:1px solid rgba(var(--ld),.12);font-family:var(--titel);font-weight:700;font-size:1.05rem}
.anlass .zusatz{margin-top:auto;padding-top:22px;font-size:1.02rem;line-height:1.5;opacity:.82}
.bandfuss{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding-inline:var(--rand)}
.laufbalken{flex:1;max-width:260px;height:2px;background:rgba(var(--lh),.2);overflow:hidden}
.laufbalken i{display:block;width:25%;height:100%;background:var(--kerze)}

/* Woher es kommt: grosse Zeilen in der Titelschrift, der Ort gross, darunter was von dort kommt */
.herkunft{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,5vw,88px);margin-top:clamp(30px,3.6vw,54px)}
.herkunft div{padding:clamp(16px,1.8vw,24px) 0;border-top:1px solid rgba(var(--ld),.2)}
.fl--russ .herkunft div,.fl--holz .herkunft div{border-color:rgba(var(--lh),.18)}
.herkunft b{display:block;font-family:var(--titel);font-weight:700;font-size:clamp(1.7rem,3vw,2.8rem);line-height:1.08}
.herkunft span{display:block;margin-top:6px;font-size:1.02rem;opacity:.82}

/* Gut zu wissen: Angabe gross, Quelle klein darunter, an einer Linie */
.wissen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(22px,3.4vw,56px);margin-top:clamp(26px,3vw,44px)}
.wissen div{padding:20px 0;border-top:1px solid rgba(var(--ld),.2)}
.fl--russ .wissen div,.fl--holz .wissen div{border-color:rgba(var(--lh),.18)}
.wissen--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wissen b{display:block;hyphens:auto;overflow-wrap:anywhere;font-family:var(--titel);font-weight:700;font-size:clamp(1.2rem,1.7vw,1.55rem);line-height:1.2}
.wissen span{display:block;margin-top:6px;font-size:.95rem;opacity:.7}

/* Zeitstrahl: eine Linie zieht sich mit dem Scrollen nach unten, die Jahre stehen daran */
.zeit{position:relative;margin-top:clamp(34px,4vw,60px);padding-left:clamp(28px,4vw,64px)}
.zeit::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(var(--lh),.16)}
.zeit__linie{position:absolute;left:-1px;top:0;bottom:0;width:3px;background:var(--kerze);transform-origin:top;transform:scaleY(0);will-change:transform}
.still .zeit__linie{transform:none}
.zeit article{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(16px,3vw,52px);align-items:start;padding-block:clamp(22px,2.8vw,40px);border-bottom:1px solid rgba(var(--lh),.12)}
.zeit article b{font-family:var(--titel);font-weight:700;font-size:clamp(2.6rem,6vw,5.6rem);line-height:.95;letter-spacing:-.01em}
.zeit article p{font-size:1.06rem;max-width:58ch}
.zeit article p+p{margin-top:.8em}

/* Morgen: vier Bilder, zwei gross und zwei klein, auf einer Linie */
.morgenreihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.3vw,20px);align-items:start;margin-top:clamp(34px,4vw,60px)}
.zitat{font-family:var(--titel);font-weight:700;font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.28;max-width:30ch}
.zitat+small{display:block;margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;opacity:.7}

@media (max-width:900px){
  .tiefe{padding:0 0 16% 10%}
  .zb{position:relative;height:auto;min-height:0;display:block;border-radius:0!important;box-shadow:none!important}
  .zb__bild{position:relative;inset:auto}
  .zb__bild img{aspect-ratio:4/3}
  .zb__in{padding:0 0 34px}
  .zb__tafel{margin-top:-26px;position:relative}
  .herkunft,.wissen,.wissen--2{grid-template-columns:minmax(0,1fr)}
  .zeit article{grid-template-columns:minmax(0,1fr);gap:10px}
  .morgenreihe{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .bandfuss{justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){.auftakt__haus img{animation:none}.zeit__linie{transform:none}}


/* =====================================================================
   Roberts Korrekturen am Auftakt und an der Leiste (08.10.2026 nachts):
   Leiste oben und die zwei Eck-Knöpfe etwas grösser und tiefer, Titel tiefer, Buchungsleiste tiefer und edler, Zeile darunter entfernt.
   ===================================================================== */
@media (min-width:901px){
  .nav{top:30px}
  .nav__insel{height:72px;padding:0 32px 0 18px;gap:clamp(22px,2.8vw,46px)}
  .nav__logo svg{height:46px}
  .nav__logo b{font-size:1.38rem}
  .nav__links{gap:clamp(18px,2.1vw,34px)}
  .nav__links a{font-size:14.5px}
  .glanz{top:39px;height:54px;padding:0 26px;gap:12px;font-size:12.5px}
  .glanz svg{width:13px;height:13px}
  .auftakt__t{padding-top:clamp(160px,22vh,236px);padding-bottom:clamp(20px,3.2vh,36px)}
}
/* Buchungsleiste: dunkle Platte wie die Leiste oben, feine Goldlinie innen, Lichtkante, heller Knopf */
.leiste{position:relative;grid-template-columns:repeat(3,minmax(0,1fr)) auto;width:min(940px,100%);padding:10px 10px 10px 14px;border-radius:999px;color:var(--papier);
  background:linear-gradient(180deg,#4f321a,#2c190c 58%,#22130a);box-shadow:inset 0 1px 0 rgba(255,236,200,.22),inset 0 -2px 0 #0f0703,0 0 0 1px rgba(183,143,81,.55),0 30px 46px -22px rgba(0,0,0,.95)}
.leiste::before{content:'';position:absolute;inset:5px;border-radius:999px;border:1px solid rgba(183,143,81,.28);pointer-events:none}
.leiste label{padding:10px 22px;border-right:1px solid rgba(183,143,81,.3);gap:5px}
.leiste label span{color:var(--kerze);font-size:11px}
.leiste input,.leiste select{color:var(--papier);color-scheme:dark;font:500 1.12rem var(--sans)}
.leiste select option{color:#000}
.leiste .kn{margin-left:12px;height:58px;color:var(--tinte);background:linear-gradient(#f6ecdc,#e7d7c0 55%,#d6c2a6);box-shadow:inset 0 1px 0 #fffaf0,inset 0 -2px 0 #b89f7f,0 12px 22px -12px rgba(0,0,0,.8)}
.leiste .kn i{width:44px;height:44px;background:linear-gradient(#4a2e17,#2a180a);box-shadow:inset 0 1px 0 #7b5330,inset 0 -2px 0 #140a03}
.leiste .kn svg{stroke:var(--papier)}

/* =====================================================================
   FASSUNG 3 (08.10.2026 nachts) · nach Roberts Durchgang durch die Seite.
   Raus: wachsendes Stubenbild im Auftakt, Wort-für-Wort, Rundgang zur Seite, Zimmer, die sich übereinander schieben, Bögen, grosses Bild mit kleinem über der Ecke.
   Rein, alles nach dem Vorbild der Carlton-Seiten: Auftritt von unten, Gleiten, Lupe, 3D-Kacheln mit einer aufgeklappten Karte, Bildgefüge, Polaroids, Fenster mit rollendem Titel.
   ===================================================================== */

/* Auftritt: alles steigt sichtbar von unten auf, sobald es ins Fenster rückt (Werte der Carlton-Zimmerseite) */
[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}
.auftakt [data-r]{transform:translateY(30px);transition:opacity 1.1s var(--e1),transform 1.3s var(--e1);transition-delay:calc(.35s + var(--i,0)*120ms)}
.auftakt [data-r].da{transform:none}
.still [data-r],.still [data-r="bild"],.still [data-r="schweb"]{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){[data-r]{transform:none!important;opacity:1!important;transition:none!important}}
/* Gleiten: das Bild ist etwas grösser als sein Rahmen und wandert darin (Lage setzt das Skript) */
.gleit{transform:scale(1.16);transition:none!important;will-change:transform;backface-visibility:hidden}
/* Auftakt: das Haus kommt einmal zur Ruhe (am Träger), das Foto selbst wandert beim Scrollen sacht mit */
.auftakt__haus{animation:ruhe 3.4s var(--e1) both}
.auftakt__haus img{animation:none;will-change:transform}
.auftakt__steh{min-height:100svh}

/* Bild ohne Rahmen: runde Ecken, weicher Schatten, Name mittig darunter. Reagiert auf den Zeiger und öffnet sich gross (Lupe) */
.frei__b{position:relative;transition:transform .7s var(--e2),box-shadow .6s var(--e2)}
.frei b{font-size:clamp(1.15rem,1.5vw,1.45rem)}
.lupe-f{cursor:zoom-in}
.lupe-f .rahmen__k{transition:transform .7s var(--e2),box-shadow .6s var(--e2)}
@media (hover:hover){
  .frei.lupe-f:hover .rahmen__k,.rahmen.lupe-f:hover .rahmen__k{transform:translateY(-8px);box-shadow:0 0 0 2px var(--kerze),0 46px 46px -30px rgba(0,0,0,.85)}
  .hell .frei.lupe-f:hover .rahmen__k,.hell .rahmen.lupe-f:hover .rahmen__k{box-shadow:0 0 0 2px var(--balken),0 46px 46px -30px rgba(42,26,14,.7)}
}
.lupe-f:focus-visible{outline:2px solid var(--kerze);outline-offset:6px;border-radius:24px}
.lupe-f:active .rahmen__k{transform:scale(.985)}
.lupe{position:fixed;inset:0;z-index:999;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(8px,1.6vw,26px);padding:clamp(14px,2.4vw,40px);background:rgba(16,9,4,.95)}
.lupe[hidden]{display:none}
.lupe figure{margin:0;display:grid;justify-items:center;gap:clamp(12px,1.4vw,20px);min-width:0}
.lupe img{display:block;max-width:100%;max-height:calc(100svh - 150px);width:auto;height:auto;border-radius:24px;box-shadow:0 0 0 1px rgba(183,143,81,.6),0 0 0 9px #2a180a,0 0 0 10px rgba(183,143,81,.35),0 50px 70px -30px #000}
.lupe figcaption{font-family:var(--titel);font-weight:700;font-size:clamp(1.2rem,1.9vw,2rem);line-height:1.1;color:var(--papier);text-align:center}
.lupe__pf,.lupe__zu{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:var(--tinte);background:linear-gradient(#f6ecdc,#e7d7c0 55%,#d6c2a6);box-shadow:inset 0 1px 0 #fffaf0,inset 0 -2px 0 #b89f7f,0 14px 20px -10px rgba(0,0,0,.8);transition:transform .5s var(--e2)}
.lupe__pf svg,.lupe__zu svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.lupe__pf:hover{transform:scale(1.08)}.lupe__zu:hover{transform:rotate(90deg)}
.lupe__zu{position:absolute;right:clamp(14px,2.4vw,40px);top:clamp(14px,2.4vw,40px);z-index:2}
.lupe--eins .lupe__pf{visibility:hidden}
::view-transition-group(lupe){animation-duration:.55s;animation-timing-function:cubic-bezier(.32,.72,0,1)}

/* Bildgefüge: ein grosses Bild, zwei kleine daneben oder darunter, keines verdeckt ein anderes */
.gefuege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.gefuege>:first-child{grid-column:1/-1}
.gefuege--quer{grid-template-columns:minmax(0,7fr) minmax(0,4fr);grid-template-rows:auto auto;align-items:start}
.gefuege--quer>:first-child{grid-column:1;grid-row:1/3}
/* Galerie: zwei grosse Bilder oben, vier kleine darunter, jedes mit Namen */
.gal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(22px,2.6vw,40px) clamp(12px,1.4vw,22px)}
.gal>*{grid-column:span 3}
.gal>:nth-child(-n+2){grid-column:span 6}
/* Familie als kleine runde Marke neben der Unterschrift */
.gruss{display:flex;align-items:center;gap:18px;margin-top:clamp(22px,2.6vw,36px);padding-top:clamp(18px,2vw,26px);border-top:1px solid rgba(var(--ld),.2)}
.gruss svg{flex:none;width:54px;height:auto;color:var(--balken)}
.gruss b{display:block;font-family:var(--titel);font-weight:700;font-size:1.25rem}
.gruss span{display:block;font-size:1rem;opacity:.78}
.titeltext{font-family:var(--titel);font-weight:400;font-size:clamp(1.2rem,1.75vw,1.6rem);line-height:1.45}

/* 3D-Kacheln mit einer aufgeklappten Karte («Was führt Sie zu uns?»): kleine Kacheln oben, die gewählte gross darunter, daneben der Text.
   Beim Wechsel fahren Karte, Bildfeld und Foto getrennt von der alten in die neue Lage (Skript), nichts verzerrt */
.zs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.4vw,22px);row-gap:clamp(18px,1.9vw,30px);align-items:start}
.zs__k{position:relative;display:flex;flex-direction:column;min-width:0;grid-column:span 4;padding:7px 7px 8px;border-radius:22px;color:var(--tinte);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(#fcf6ec,#ecdcc5);box-shadow:inset 0 0 0 1px rgba(109,67,31,.34),inset 0 1px 0 #fff,inset 0 -3px 0 #c5ae8c,0 30px 36px -24px rgba(0,0,0,.9)}
.zs__k.da{transition:transform .6s var(--e2),box-shadow .5s var(--e2);transition-delay:0s}
.zs__b{position:relative;display:block;aspect-ratio:2.6/1;border-radius:15px;overflow:hidden;background:var(--leinen)}
.zs__b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zs__n{display:block;margin:7px 1px 0;padding:10px 6px 9px;border-radius:12px;text-align:center;font-family:var(--titel);font-weight:700;font-size:clamp(1rem,1.3vw,1.32rem);line-height:1.1;white-space:nowrap;
  background:linear-gradient(#efe1cb,#f6ecdc);box-shadow:inset 0 2px 4px rgba(42,26,14,.26),inset 0 -1px 0 #fff}
@media (hover:hover){.zs:not(.zs--faehrt) .zs__k.da:not([aria-pressed="true"]):hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(109,67,31,.34),inset 0 1px 0 #fff,inset 0 -3px 0 #c5ae8c,0 0 0 2px var(--kerze),0 40px 44px -26px #000}}
.zs__k:focus-visible{outline:2px solid var(--kerze);outline-offset:4px}
.zs__k[aria-pressed="true"]{grid-column:1/7;grid-row:2;padding:10px 10px 11px;border-radius:32px;cursor:default;
  box-shadow:inset 0 0 0 1px rgba(109,67,31,.34),inset 0 1px 0 #fff,inset 0 -4px 0 #c5ae8c,0 0 0 2px rgba(201,133,67,.75),0 50px 60px -34px #000}
.zs__k[aria-pressed="true"] .zs__b{aspect-ratio:16/10;border-radius:23px}
.zs__k[aria-pressed="true"] .zs__n{margin:10px 1px 0;padding:14px 10px 13px;border-radius:17px;font-size:clamp(1.25rem,1.9vw,2rem)}
.zs--faehrt .zs__k{transition:none}
.zs__text{grid-column:7/-1;grid-row:2;align-self:center;padding-left:clamp(10px,2.4vw,44px)}
.zs__text p{margin-top:16px;max-width:46ch}
.zs__text .knoepfe{margin-top:clamp(20px,2.2vw,30px)}
.zs__text [hidden]{display:none}
/* zwei Angaben nebeneinander: klein das Wort, gross der Wert */
.koord{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:clamp(20px,2.2vw,32px)}
.koord div{padding-right:18px}
.koord div+div{padding-left:clamp(14px,1.8vw,26px);border-left:1px solid rgba(var(--lh),.2)}
.hell .koord div+div{border-color:rgba(var(--ld),.2)}
.koord dt{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--kerze)}
.hell .koord dt{color:var(--balken)}
.koord dd{margin-top:7px;font-family:var(--titel);font-weight:700;font-size:clamp(1.05rem,1.4vw,1.4rem);line-height:1.2}

/* Fenster: der Titel rollt zeilenweise hoch, dahinter ein dunkler Hof; das Bild wandert beim Scrollen sacht mit */
.bruch{height:auto;min-height:min(66vh,640px)}
.bruch__bild{inset:-8% 0;will-change:transform}
.bruch .in{text-align:center}
.bruch .in::before{content:'';position:absolute;z-index:-1;left:50%;top:50%;width:min(1100px,96vw);height:190%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(12,6,2,.8) 0%,rgba(12,6,2,.56) 38%,rgba(12,6,2,0) 70%)}
.bruch h2{font-size:clamp(1.6rem,3.7vw,3.5rem);line-height:1.14;text-shadow:0 2px 20px rgba(12,6,2,.7)}
.bruch h2.lang{font-size:clamp(1.4rem,3vw,2.8rem)}
.bruch small{margin-top:clamp(16px,1.8vw,26px);font-family:var(--titel);font-weight:400;font-size:clamp(1.02rem,1.4vw,1.4rem);letter-spacing:0;text-transform:none}

/* Polaroids: fünf Abzüge, leicht gedreht, alle ganz zu sehen. Unter dem Zeiger richtet sich der Abzug auf */
.polas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(18px,2vw,30px) clamp(12px,1.4vw,22px);margin-top:clamp(28px,3vw,44px)}
.polas>*{grid-column:span 2}
.polas>:nth-child(4){grid-column:2/4}.polas>:nth-child(5){grid-column:4/6}
.pola{display:block;padding:9px 9px 0;border-radius:4px;background:linear-gradient(#fdfaf3,#f3ead9);color:var(--tinte);box-shadow:inset 0 1px 0 #fff,0 26px 30px -18px rgba(0,0,0,.85);transform:rotate(var(--w,0deg));transition:transform .7s var(--e2),box-shadow .6s var(--e2)}
.pola .rahmen__k{display:block;aspect-ratio:1;border-radius:2px;overflow:hidden;background:#120a04}
.pola .rahmen__k img{width:100%;height:100%;object-fit:cover}
.pola b{display:block;padding:12px 4px 3px;text-align:center;font-family:var(--titel);font-weight:700;font-size:clamp(.98rem,1.15vw,1.12rem);line-height:1.2}
.pola small{display:block;padding:0 4px 13px;text-align:center;font-size:.95rem;opacity:.72;min-height:1.5em}
@media (hover:hover){.lupe-f:hover .pola{transform:rotate(0deg) translateY(-8px);box-shadow:inset 0 1px 0 #fff,0 0 0 2px var(--kerze),0 40px 40px -22px #000}}

/* Die Nacht: Kopf in der Mitte mit dem Zeichen, darunter die vier Zimmer als 3D-Kacheln auf einer Höhe */
.mitte{text-align:center}
.mitte .zier{width:64px;height:auto;color:var(--gold);margin:0 auto 20px}
.mitte .lead{max-width:60ch;margin:22px auto 0}
.mitte .kapitel{justify-content:center}
.mitte .kapitel::before{content:'';width:clamp(48px,7vw,110px);height:1px;background:currentColor;opacity:.7}
.zierlinie{display:flex;align-items:center;gap:20px;margin:clamp(30px,3.6vw,52px) auto;max-width:720px;color:var(--gold)}
.zierlinie i{flex:1;height:1px;background:currentColor;opacity:.45}
.zierlinie svg{width:30px;height:auto}
.zkarten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.5vw,24px)}
.zk3{display:flex;flex-direction:column;padding:8px 8px 10px;border-radius:28px;color:var(--tinte);text-align:center;background:linear-gradient(#fcf6ec,#ecdcc5);
  box-shadow:inset 0 0 0 1px rgba(109,67,31,.34),inset 0 1px 0 #fff,inset 0 -4px 0 #c5ae8c,0 36px 44px -28px #000}
.zk3.da{transition:transform .7s var(--e2),box-shadow .6s var(--e2);transition-delay:0s}
.zk3__b{display:block;aspect-ratio:4/5;border-radius:21px;overflow:hidden;background:#120a04}
.zk3__b img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--e1)}
.zk3__n{display:block;margin:9px 1px 0;padding:13px 8px 12px;border-radius:15px;font-family:var(--titel);font-weight:700;font-size:clamp(1.2rem,1.75vw,1.75rem);line-height:1.1;background:linear-gradient(#efe1cb,#f6ecdc);box-shadow:inset 0 2px 4px rgba(42,26,14,.26),inset 0 -1px 0 #fff}
.zk3__p{display:block;padding:12px 6px 4px;font-size:1rem;line-height:1.35}
.zk3__p b{display:block;font-family:var(--titel);font-size:1.08rem}
@media (hover:hover){.zk3.da:hover{transform:translateY(-10px);box-shadow:inset 0 0 0 1px rgba(109,67,31,.34),inset 0 1px 0 #fff,inset 0 -4px 0 #c5ae8c,0 0 0 2px var(--kerze),0 50px 50px -30px #000}.zk3:hover .zk3__b img{transform:scale(1.06)}}

/* Geschichte: Zitat mit feiner Linie links, Jahreszahlen in der Mitte gesetzt */
.zitatblock{margin-top:24px;padding-left:clamp(18px,2vw,28px);border-left:2px solid var(--gold)}
.zitatblock p{font-family:var(--titel);font-weight:400;font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.45}
.zitatblock small{display:block;margin-top:12px;font-size:.98rem;opacity:.74}
.jahre--mitte .jahr{text-align:center;padding-inline:clamp(10px,1.6vw,26px)}
.jahre--mitte .jahr:first-child{padding-left:clamp(10px,1.6vw,26px)}
.jahre--mitte .jahr p{margin-inline:auto}
.jahre--mitte .jahr b::after{content:'';display:block;width:34px;height:1px;margin:14px auto 0;background:var(--gold)}

@media (max-width:900px){
  .gefuege--quer{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gefuege--quer>:first-child{grid-column:1/-1;grid-row:auto}
  .gal>*{grid-column:span 6}.gal>:nth-child(-n+2){grid-column:1/-1}
  .zs{gap:8px;row-gap:12px}
  .zs__k{border-radius:16px;padding:5px 5px 6px}
  .zs__b{aspect-ratio:1.5/1;border-radius:11px}
  .zs__n{font-size:.86rem;padding:8px 2px 7px;margin-top:5px;border-radius:9px;white-space:normal}
  .zs__k[aria-pressed="true"]{grid-column:1/-1;border-radius:24px;padding:7px 7px 8px}
  .zs__k[aria-pressed="true"] .zs__b{aspect-ratio:4/3;border-radius:18px}
  .zs__k[aria-pressed="true"] .zs__n{font-size:1.3rem;padding:12px 8px 11px;border-radius:13px;margin-top:7px}
  .zs__text{grid-column:1/-1;grid-row:3;padding-left:0;margin-top:8px}
  .polas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .polas>*,.polas>:nth-child(4),.polas>:nth-child(5){grid-column:auto}
  .polas>:nth-child(5){grid-column:1/-1;justify-self:center;width:50%}
  .zkarten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zk3{border-radius:20px;padding:6px 6px 8px}.zk3__b{border-radius:15px}.zk3__n{font-size:1.1rem;padding:10px 4px 9px;border-radius:11px}
  .bruch{min-height:54svh}
  .gruss svg{width:44px}
}

/* Laufband gross: schmaler und leichter gesetzt (Robert: «ein bisschen schmaler und luxuriöser») */
.laufband--gross{padding:clamp(14px,1.7vw,24px) 0}
.laufband--gross span{font-weight:400;font-size:clamp(1.25rem,2.3vw,2.1rem);letter-spacing:.04em;gap:clamp(26px,3.4vw,54px);padding-right:clamp(26px,3.4vw,54px)}
.laufband--gross span::after{width:6px;height:6px;background:var(--gold)}
.vorband{padding-top:clamp(22px,2.6vw,38px)}

/* Bewertungen: zwei 3D-Karten mit den Zeichen der Portale. Balken und Sterne füllen sich (nur transform), die Zahlen zählen hoch */
.bw{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(14px,1.8vw,28px);align-items:stretch}
.bw__k{padding:clamp(22px,2.6vw,40px);border-radius:32px;color:var(--tinte);background:linear-gradient(#fcf6ec,#ecdcc5);box-shadow:inset 0 0 0 1px rgba(109,67,31,.34),inset 0 1px 0 #fff,inset 0 -4px 0 #c5ae8c,0 40px 50px -30px #000}
.bw__kopf{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:clamp(16px,1.8vw,24px);border-bottom:3px double rgba(var(--ld),.3)}
.bw__kopf img{height:clamp(22px,2.2vw,30px);width:auto}
.bw__kopf p{text-align:right;margin:0}
.bw__kopf b{display:block;font-family:var(--titel);font-weight:700;font-size:clamp(2.6rem,4.6vw,4.4rem);line-height:.95}
.bw__kopf span{display:block;margin-top:6px;font-size:1rem;opacity:.76}
.bw__z{display:grid;grid-template-columns:minmax(0,8em) minmax(0,1fr) 3em;align-items:center;gap:16px;padding-top:clamp(14px,1.6vw,20px);font-size:1.06rem}
.bw__z i{display:block;height:10px;border-radius:99px;overflow:hidden;background:rgba(var(--ld),.14);box-shadow:inset 0 1px 2px rgba(42,26,14,.3)}
.bw__z i b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--balken),var(--kerze));transform-origin:left;transform:scaleX(0);transition:transform 1.8s var(--e1) .25s}
.bw__k.da .bw__z i b{transform:scaleX(var(--b))}
.bw__z em{font-family:var(--titel);font-style:normal;font-weight:700;font-size:1.3rem;text-align:right}
.bw__sterne{position:relative;width:max-content;margin-top:clamp(18px,2vw,26px)}
.bw__sterne svg{width:clamp(34px,3.4vw,48px);height:auto}
.bw__sterne .leer{display:flex;gap:6px;fill:rgba(var(--ld),.18)}
.bw__sterne .voll{position:absolute;inset:0;overflow:hidden;transform-origin:left;transform:scaleX(0);transition:transform 1.8s var(--e1) .35s}
.bw__sterne .voll>span{display:flex;gap:6px;width:max-content;fill:var(--kerze);transform-origin:left;transform:scaleX(1000);transition:transform 1.8s var(--e1) .35s}
.bw__k.da .bw__sterne .voll{transform:scaleX(var(--b))}
.bw__k.da .bw__sterne .voll>span{transform:scaleX(calc(1 / var(--b)))}
.bw__klein{margin-top:clamp(18px,2vw,26px);font-size:.98rem;opacity:.78}
.still .bw__z i b{transform:scaleX(var(--b));transition:none}.still .bw__sterne .voll{transform:scaleX(var(--b));transition:none}.still .bw__sterne .voll>span{transform:scaleX(calc(1 / var(--b)));transition:none}

/* Anreise: Bild über die volle Breite, eine helle Tafel liegt über der unteren Kante, die Angaben gross daneben */
.ort__unten{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start;padding-inline:clamp(0px,2.4vw,40px)}
.tafel{position:relative;z-index:2;margin-top:clamp(-150px,-9vw,-60px);padding:clamp(24px,2.8vw,42px);border-radius:28px;background:linear-gradient(#fcf6ec,#ecdcc5);box-shadow:inset 0 0 0 1px rgba(109,67,31,.3),inset 0 1px 0 #fff,inset 0 -4px 0 #c5ae8c,0 40px 50px -30px rgba(42,26,14,.75)}
.tafel p{margin-top:14px}
.tafel .knoepfe{margin-top:22px}
.koord--4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(20px,2.4vw,34px);margin-top:clamp(24px,2.8vw,40px)}
.koord--4 div:nth-child(3){padding-left:0;border-left:0}
.koord--4 dd{font-size:clamp(1.15rem,1.7vw,1.7rem)}
.koord--4 a{box-shadow:inset 0 -1px 0 currentColor}
@media (max-width:900px){
  .bw,.ort__unten{grid-template-columns:minmax(0,1fr)}
  .ort .rahmen__k{aspect-ratio:4/3!important}
  .tafel{margin-top:-40px}
  .bw__z{grid-template-columns:minmax(0,6.4em) minmax(0,1fr) 2.6em;gap:10px}
  .koord--4{grid-template-columns:minmax(0,1fr)}.koord--4 div+div{padding-left:0;border-left:0}
}

/* Schluss: dunkler Hof hinter Titel und Satz, dazu Schatten an der Schrift (wie im Fenster) */
.schluss__in{position:relative;isolation:isolate}
.schluss__in::before{content:'';position:absolute;z-index:-1;left:50%;top:50%;width:min(1100px,96vw);height:150%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(12,6,2,.82) 0%,rgba(12,6,2,.6) 38%,rgba(12,6,2,0) 70%)}
.schluss h2{text-shadow:0 2px 20px rgba(12,6,2,.8),0 0 60px rgba(12,6,2,.6)}
.schluss p{text-shadow:0 1px 3px rgba(12,6,2,.9),0 4px 22px rgba(12,6,2,.95)}
.zimmer{align-items:center}

/* Polaroids in einer Reihe über die ganze Breite */
.polas--reihe{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,2vw,34px);padding-inline:clamp(0px,2vw,30px)}
.polas--reihe>*,.polas--reihe>:nth-child(4),.polas--reihe>:nth-child(5){grid-column:auto}
.polas--reihe>:nth-child(even){margin-top:clamp(14px,2vw,30px)}
.blatt__spalten .gang{break-inside:avoid}
/* Sterne: die gefüllten liegen über den leeren und blenden ein (kein Verzerren) */
.bw__sterne .voll,.bw__k.da .bw__sterne .voll{inset:0 auto 0 0;width:calc(var(--b)*100%);transform:none;opacity:0;transition:opacity 1.4s var(--e1) .5s}
.bw__sterne .voll>span,.bw__k.da .bw__sterne .voll>span{transform:none;transition:none}
.bw__k.da .bw__sterne .voll,.still .bw__sterne .voll{opacity:1}
@media (max-width:900px){
  .polas--reihe{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:0}
  .polas--reihe>:nth-child(even){margin-top:0}
  .polas--reihe>:nth-child(5){grid-column:1/-1;justify-self:center;width:50%}
}
/* Bühne: behält ihre Höhe, auch solange das grosse Foto noch lädt (sonst rutschen die Pfeile unter den Kopf) */
.buehne__bild{min-height:min(56dvh,560px)}

/* Auftakt: Titel noch etwas tiefer (Robert) */
@media (min-width:901px){.auftakt__t{padding-top:clamp(186px,26vh,280px)}}


/* =====================================================================
   FASSUNG 4 (08.10.2026 nachts) · Auftakt nach Roberts Wahl (Fassung 26 aus varianten3.html).
   Sommerbild statt Winterbild, eigener Satz statt «Zu Gast – bei Freunden» (der steht beim Doldenhorn), Titel rechtsbündig oben rechts vor dem Baum,
   Buchung als erhabene Platte mit vertieften Feldern, Rotbraun der Giebelmalerei mit Hell und Dunkel für Leiste, Eck-Knöpfe und Buchung.
   Stand davor: _sicherung/vor-fassung26/
   ===================================================================== */
:root{--b1:#6a4032;--b2:#4a271c;--b3:#32180f;--b4:#200e08;--creme:#f7ecdc;--gold2:#d2b384;
  --platte:radial-gradient(130% 150% at 50% -55%,rgba(255,222,184,.26),transparent 62%),linear-gradient(180deg,var(--b1),var(--b2) 30%,var(--b3) 72%,var(--b4))}
/* Leiste oben und Eck-Knöpfe (alle Seiten): Platte mit Lichtkante oben und dunkler Kante unten */
.nav__insel{color:var(--creme);border:0;background:var(--platte);
  box-shadow:inset 0 1px 0 rgba(255,228,196,.42),inset 0 -2px 0 rgba(0,0,0,.5),inset 0 0 0 1px rgba(210,179,132,.3),0 2px 0 #150905,0 16px 22px -10px rgba(0,0,0,.6),0 34px 46px -24px rgba(0,0,0,.8)}
.nav__logo svg{color:var(--gold2)}
.glanz{color:var(--creme);background:var(--platte) padding-box,
  conic-gradient(from calc(var(--ga) - var(--go)),transparent,#e7c79b var(--gp),#fff calc(var(--gp)*2),var(--gold2) calc(var(--gp)*3),transparent calc(var(--gp)*4)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,228,196,.36),inset 0 -2px 0 rgba(0,0,0,.45),0 2px 0 #150905,0 14px 20px -10px rgba(0,0,0,.6),0 28px 40px -22px rgba(0,0,0,.8)}
/* Auftakt: Grund in der dunkelsten Farbe der Platte, Foto über <picture> (Handy: eigenes Quadrat) */
.auftakt{background:#1a0b06}
.auftakt__haus picture{display:block;width:100%;height:100%}
.auftakt__haus img{object-position:50% 30%}
/* Titel: Schatten als eigene Lage hinter der Schrift (die rollenden Zeilen würden ihn abschneiden), kommt, sobald die Zeilen stehen */
.auftakt__titel{position:relative;isolation:isolate}
.auftakt .auftakt__titel h1{position:relative;z-index:1;color:var(--creme);text-shadow:0 2px 3px rgba(10,5,2,.7)}
.auftakt__schatten{position:absolute;inset:0;z-index:0;font-family:var(--titel);font-weight:700;letter-spacing:-.005em;color:transparent;
  text-shadow:0 6px 26px rgba(10,5,2,.85),0 0 70px rgba(10,5,2,.6);opacity:0;transition:opacity 1.3s var(--e1) .95s;pointer-events:none;user-select:none}
.auftakt__schatten span{display:block}
.auftakt__schatten .z{overflow:visible}.auftakt__schatten .z>span{transform:none;transition:none}  /* Schatten spiegelt den h1 (data-spiegel), ohne dessen Hereinkommen */
.auftakt__titel h1.da+.auftakt__schatten,.still .auftakt__schatten{opacity:1}
@media (prefers-reduced-motion:reduce){.auftakt__schatten{opacity:1;transition:none}}
.auftakt__satz{color:var(--creme);font-weight:500;text-shadow:0 1px 2px rgba(10,5,2,.95),0 2px 14px rgba(10,5,2,.95),0 0 36px rgba(10,5,2,.85)}
@media (min-width:901px){
  .auftakt__t{padding-top:clamp(160px,20vh,208px);padding-bottom:clamp(30px,4.9vh,52px)}
  .auftakt__kopf{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
  .auftakt .d1{font-size:clamp(2rem,4vw,4.4rem);line-height:1.06}
  .auftakt__satz{margin-top:16px;max-width:31ch;font-size:clamp(1.08rem,1.42vw,1.28rem)}
  .auftakt .leiste{margin-inline:auto}
}
/* Buchung: erhabene Platte, darin drei vertiefte Felder, der Knopf steht hervor */
.leiste{width:min(980px,100%);gap:8px;padding:11px;color:var(--creme);background:var(--platte);
  box-shadow:inset 0 1px 0 rgba(255,228,196,.5),inset 0 2px 0 rgba(255,228,196,.1),inset 0 -3px 0 rgba(0,0,0,.6),inset 0 0 0 1px rgba(210,179,132,.34),
    0 3px 0 #140805,0 4px 0 rgba(210,179,132,.18),0 20px 26px -10px rgba(0,0,0,.66),0 54px 70px -30px rgba(0,0,0,.92)}
.leiste::before{display:none}
.leiste label{border:0;border-radius:16px;padding:11px 22px 12px;background:linear-gradient(180deg,rgba(12,5,2,.62),rgba(12,5,2,.3));
  box-shadow:inset 0 3px 7px rgba(0,0,0,.7),inset 0 1px 0 rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,222,184,.2),0 1px 0 rgba(255,222,184,.14)}
.leiste label:first-child{border-radius:36px 16px 16px 36px;padding-left:34px}
.leiste label span{color:var(--gold2)}
.leiste input,.leiste select{color:var(--creme)}
.leiste .kn{margin-left:4px;height:62px;padding:0 9px 0 28px;color:#2a140c;
  background:radial-gradient(120% 130% at 50% -30%,#fffdf8,transparent 60%),linear-gradient(180deg,#fbf2e3,#ecdcc4 52%,#d3bc9c);
  box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 #a98e6c,inset 0 0 0 1px rgba(255,255,255,.35),0 2px 0 #1a0b06,0 12px 16px -6px rgba(0,0,0,.7),0 22px 30px -14px rgba(0,0,0,.8)}
.leiste .kn i{width:46px;height:46px;background:radial-gradient(90% 90% at 34% 22%,#8a5a47,transparent 62%),linear-gradient(180deg,#5c3326,#2a130c);
  box-shadow:inset 0 1px 0 #a67a64,inset 0 -2px 0 #120703,0 2px 4px rgba(0,0,0,.5)}
.leiste .kn svg{stroke:var(--creme)}
@media (min-width:901px) and (max-width:1120px){
  .leiste label{padding-inline:14px}.leiste label:first-child{padding-left:24px}
  .leiste .kn{padding-left:18px;gap:10px;letter-spacing:.1em}
}
/* Handy: Bild als Quadrat oben, Schrift darunter linksbündig auf dem dunklen Grund */
@media (max-width:900px){
  .auftakt__haus img{object-position:50% 50%}
  .auftakt .auftakt__titel h1{text-shadow:none}
  .auftakt__schatten{display:none}
  .auftakt .d1{font-size:clamp(1.4rem,7.3vw,2.7rem);line-height:1.08}
  .auftakt__satz{text-shadow:none;font-weight:400}
}
/* Fuss: der neue Satz hat drei Zeilen */
.fuss__satz--drei{font-size:clamp(1.5rem,4.1vw,3.9rem);line-height:1.08}

/* =====================================================================
   FASSUNG 5 (09.10.2026) · Aufbau und Bausteine nach der Carlton-Seite (Roberts Auftrag: «nach dem Vorbild komplett upgraden»).
   Reihenfolge der Startseite wie dort: Ankunft · Willkommen · Fenster · Frage · Zimmer auf einer Höhe · Fenster ·
   Stuben (breites Bild mit Tafel) · Lauftext an der Naht · Geschichte (Gefüge) · Galerie mit Namensschild ·
   Gäste · grosse Zahlen · Schluss mit Angaben · Fuss mit Kontaktfeld und Siegel.
   Farben, Schrift und Auftakt bleiben die des Ruedihus. Bewegung nur über transform und opacity.
   ===================================================================== */
:root{--e3:cubic-bezier(.19,1,.22,1);--leinen2:#e5d3bb}
/* Flächen: zweites helles Feld, damit helle und dunkle Abschnitte wechseln wie beim Vorbild */
.hell.fl--leinen{background:var(--leinen2)}
.fl--leinen .kerbe{--f:var(--leinen2)}
.fl--leinen .frei__b{box-shadow:0 30px 44px -28px rgba(var(--ld),.7)}
/* Kopfzeile eines Abschnitts: Titel links, Satz rechts, darunter zieht eine feine Linie auf */
.kopfzeile{position:relative;padding-bottom:clamp(20px,2.4vw,34px)}
.kopfzeile::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--gold),rgba(183,143,81,.1));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.8s var(--e1) .3s}
.hell .kopfzeile::after{background:linear-gradient(90deg,var(--balken),rgba(109,67,31,.12))}
.kopfzeile:has(.da)::after,.still .kopfzeile::after{transform:none}
/* Gastgeber: Foto neben dem Satz, der Name als Unterschrift */
.gastgeber{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.2vw,34px);align-items:center;margin-top:clamp(24px,2.8vw,40px);padding-top:clamp(20px,2.2vw,30px);border-top:1px solid rgba(var(--ld),.2)}
.gastgeber__b{display:block;width:clamp(150px,17vw,250px);aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(var(--ld),.2),0 22px 30px -20px rgba(var(--ld),.7)}
.gastgeber__b img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.gastgeber p{font-size:1.02rem;line-height:1.6}
.gastgeber__n{display:flex;align-items:baseline;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(var(--ld),.22)}
.gastgeber__n b{font-family:var(--titel);font-weight:700;font-size:clamp(1.2rem,1.6vw,1.6rem);line-height:1.1}
.gastgeber__n span{font-size:.95rem;opacity:.72}
/* Zimmer auf einer Höhe: vier freie Bilder, Name gross darunter, Preis klein. Sie steigen nacheinander von unten auf. */
.zreihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,30px);margin-top:clamp(34px,4.4vw,70px)}
.zreihe .frei{display:block;color:inherit}
.zreihe .frei__b{border-radius:26px}
.zreihe .frei__b img{transition:transform 1.8s var(--e1)}
.zreihe .frei b{margin-top:clamp(16px,1.7vw,26px);font-size:clamp(1.35rem,1.9vw,2rem);line-height:1.12}
.zreihe .frei small{margin-top:8px;font-size:clamp(1rem,1.08vw,1.1rem);line-height:1.4;opacity:.82}
.zreihe .frei small i{display:block;font-style:normal;opacity:.82}
@media (hover:hover){
  .zreihe .frei:hover .frei__b{transform:translateY(-8px);box-shadow:0 0 0 2px var(--balken),0 46px 46px -30px rgba(42,26,14,.7)}
  .zreihe .frei:hover b{color:var(--balken)}
}
.zreihe .frei b{transition:color .4s}
/* Angaben in einer Reihe (unter den Zimmern) */
.koord--reihe{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(34px,4vw,60px);padding-top:clamp(22px,2.4vw,34px);border-top:1px solid rgba(var(--ld),.18)}
.koord--reihe dd{font-size:clamp(1.05rem,1.35vw,1.35rem)}
/* Satz in der Mitte unter einem Block */
.satzmitte{max-width:52ch;margin:clamp(44px,5.4vw,84px) auto 0;text-align:center;font-family:var(--titel);font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.45}
/* Stuben: breites Bild, helle Tafel, Angaben. Auf dunklem Grund */
.ort--dunkel .koord--4 dd{color:var(--papier)}
.ort--dunkel .rahmen{box-shadow:inset 0 0 0 1px rgba(var(--lh),.16),0 50px 60px -40px #000}
.polas--unter{margin-top:clamp(50px,6vw,96px)}
/* Lauftext an der Naht zwischen zwei Abschnitten: schmal, mit Lichtkante oben und unten */
.naht{position:relative;z-index:3;margin:calc(-1*clamp(22px,2.2vw,30px)) 0;background:var(--platte);box-shadow:inset 0 1px 0 rgba(210,179,132,.6),inset 0 -1px 0 rgba(210,179,132,.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-weight:400;font-size:clamp(1rem,1.25vw,1.3rem);letter-spacing:.01em;gap:clamp(22px,2.6vw,44px);padding-right:clamp(22px,2.6vw,44px);color:var(--gold2)}
.naht .laufband span:nth-child(even){color:var(--creme)}
.naht .laufband span::after{width:7px;height:7px;background:var(--gold2);opacity:.8}
.naht--fuss{margin-top:0;margin-bottom:0}
/* Galerie: sechs gleich grosse Bilder, der Name sitzt in der ausgeschnittenen Ecke, der Satz schiebt sich beim Überfahren von oben herein */
.galerie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,20px)}
.gt{position:relative;display:block;height:clamp(250px,23.5vw,350px);border-radius:var(--r-xl);overflow:hidden;background:var(--holz);color:var(--papier);isolation:isolate;transform-origin:50% 100%;box-shadow:0 30px 44px -34px rgba(var(--ld),.85)}
.gt .rahmen__k{position:absolute;inset:0;border-radius:0;background:var(--holz)}
.gt .rahmen__k img{width:100%;height:100%;object-fit:cover}
.gt .kerbe{--f:var(--papier);color:var(--tinte);font-size:clamp(1.25rem,1.8vw,1.9rem);line-height:1.15;padding:clamp(9px,.95vw,14px) clamp(22px,2.2vw,32px) clamp(9px,.95vw,14px) clamp(16px,1.6vw,24px)}
.gt__t{position:absolute;z-index:3;left:0;right:0;top:0;padding:clamp(16px,1.6vw,24px) clamp(70px,6vw,88px) clamp(18px,1.8vw,28px) clamp(16px,1.6vw,24px);background:linear-gradient(180deg,var(--b1),var(--b3));box-shadow:inset 0 -1px 0 rgba(210,179,132,.55);transform:translateY(-102%);transition:transform .8s var(--e2)}
.gt__t span{display:block;font-size:clamp(.96rem,1.05vw,1.08rem);line-height:1.46;color:rgba(var(--lh),.94);max-width:44ch}
.gt__kn{position:absolute;z-index:4;right:clamp(12px,1.2vw,18px);top:clamp(12px,1.2vw,18px);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--tinte);background:linear-gradient(180deg,#fbf3e2,#e7d7c0 50%,#d0bb9c);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(109,67,31,.4),0 12px 18px -10px rgba(0,0,0,.7);transition:transform .7s var(--e1)}
.gt__kn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.3}
.gt:focus-visible .gt__t{transform:none}
@media (hover:hover){
  .gt:hover .gt__t{transform:none}
  .gt:hover .gt__kn{transform:rotate(45deg)}
}
@media (hover:none){
  .gt__t{transform:none;padding-top:12px;padding-bottom:13px}
  .gt__t span{font-size:.92rem;line-height:1.42}
}
/* Grosse Zahlen: eigener dunkler Abschnitt, die Ziffern steigen aus einer Linie und zählen hoch */
.prunk{position:relative;overflow:hidden;background:var(--tief);padding:clamp(78px,9vw,150px) 0 clamp(70px,8vw,130px)}
.prunk__satz{font-family:var(--titel);font-weight:400;font-size:clamp(1rem,1.35vw,1.34rem);letter-spacing:.1em;color:var(--gold);text-align:center;margin-bottom:clamp(36px,4.6vw,70px)}
.prunk__in{position:relative;padding:clamp(40px,5vw,80px) 0;border-block:1px solid rgba(183,143,81,.32)}
.prunk__in::before,.prunk__in::after{content:'';position:absolute;left:0;right:0;height:1px;background:rgba(183,143,81,.14)}
.prunk__in::before{top:7px}
.prunk__in::after{bottom:7px}
.prunk__r{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.prunk__z{position:relative;display:grid;justify-items:center;align-content:start;text-align:center;padding:0 clamp(10px,1.6vw,28px)}
.prunk__z+.prunk__z::before{content:'';position:absolute;left:0;top:8%;bottom:8%;width:1px;background:rgba(183,143,81,.26)}
.prunk__z b{display:block;overflow:hidden;font-family:var(--titel);font-weight:700;font-size:clamp(3rem,7vw,7rem);line-height:1;letter-spacing:-.012em;color:var(--papier);padding:.04em 0 .16em;font-variant-numeric:tabular-nums}
.prunk__z b span{display:block;transform:translateY(108%);transition:transform 1.7s var(--e3);transition-delay:calc(var(--i,0)*140ms + .1s)}
.prunk__z.da b span{transform:none}
.prunk__z>i{display:block;width:clamp(40px,5vw,84px);height:1px;background:var(--gold);margin:clamp(8px,1.2vw,18px) 0 clamp(12px,1.4vw,20px);transform:scaleX(0);transition:transform 1.4s var(--e1);transition-delay:calc(var(--i,0)*140ms + .7s)}
.prunk__z.da>i{transform:none}
.prunk__z em{font-style:normal;font-weight:500;font-size:clamp(.95rem,1.05vw,1.08rem);line-height:1.45;max-width:24ch;color:rgba(var(--lh),.84)}
.prunk__z[data-r]{opacity:1;transform:none}
.still .prunk__z b span,.still .prunk__z>i{transform:none;transition:none}
/* Schluss: Angaben als erhabene Platte unter den Knöpfen */
.schluss .koord{display:inline-grid;grid-template-columns:repeat(3,auto);margin-top:clamp(34px,4vw,56px);padding:16px 8px 15px;border-radius:24px;text-align:left;background:var(--platte);box-shadow:inset 0 1px 0 rgba(255,228,196,.32),inset 0 0 0 1px rgba(210,179,132,.4),inset 0 -2px 0 rgba(0,0,0,.45),0 26px 36px -22px rgba(0,0,0,.9)}
.schluss .koord div,.schluss .koord div+div{padding:4px clamp(18px,2.4vw,36px)}
.schluss .koord div+div{border-left:1px solid rgba(210,179,132,.28)}
.schluss .koord dt{color:var(--gold2)}
.schluss .koord dd{color:var(--creme);font-size:clamp(1.02rem,1.3vw,1.3rem)}
.schluss .koord a{box-shadow:none}
/* Fuss: Muster des Hauses als Grund, Satz, Kontaktfeld mit eingelassenen Feldern, Siegel */
.fuss{isolation:isolate}
.fuss::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23c98543' stroke-opacity='.09' stroke-width='1.4'%3E%3Ccircle cx='28' cy='28' r='21'/%3E%3Ccircle cx='28' cy='28' r='5'/%3E%3Cpath d='M0 0h56v56H0z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 94%);mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 94%)}
.naht--fuss+.fuss{padding-top:clamp(84px,8.4vw,130px)}
.fuss__kopf--drei{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;align-items:center;gap:clamp(26px,4vw,80px)}
.fuss__logo{display:inline-flex;align-items:center;gap:14px;color:var(--creme)}
.fuss__logo svg{width:clamp(40px,3.6vw,54px);height:auto;color:var(--gold2)}
.fuss__logo b{font-family:var(--titel);font-weight:700;font-size:clamp(1.2rem,1.7vw,1.7rem);letter-spacing:.14em}
.fuss__marke .fuss__satz{margin-top:clamp(20px,2.4vw,34px)}
.fuss__kontakt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(9px,.9vw,13px);padding:clamp(11px,1.1vw,15px);border-radius:28px;background:linear-gradient(180deg,#56301f,#43241a);box-shadow:inset 0 0 0 1px rgba(210,179,132,.26),inset 0 1px 0 rgba(255,228,196,.12),0 28px 40px -32px rgba(0,0,0,.8)}
.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,#1d0d07,#27130b 34%,#2c160d);box-shadow:inset 0 3px 6px -1px rgba(8,3,1,.66),inset 0 1px 0 rgba(8,3,1,.55),inset 0 0 0 1px rgba(8,3,1,.28),0 1px 0 rgba(255,228,196,.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:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold2)}
.fuss__kontakt dd{margin-top:8px;font-family:var(--titel);font-weight:700;font-size:clamp(1.02rem,1.22vw,1.26rem);line-height:1.25;color:var(--creme)}
.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;opacity:1;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.3vw,20px)}
.siegel{display:grid;place-items:center;width:clamp(150px,15vw,230px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 38%,#5c3424,#2a130c 72%);box-shadow:inset 0 0 0 1px rgba(210,179,132,.7),inset 0 0 0 9px #2a130c,inset 0 0 0 10px rgba(210,179,132,.4),0 30px 40px -24px rgba(0,0,0,.9)}
.fuss__ecke--siegel .siegel svg{width:52%;height:auto;color:var(--gold2)}
.fuss__ecke--siegel small{font-family:var(--mono);font-size:clamp(8.5px,.78vw,11px);letter-spacing:.13em;text-transform:uppercase;color:var(--gold2);white-space:nowrap}
/* Leiste im Fuss: Geschenkgutschein (an der Stelle des Newsletters beim Vorbild) */
.fuss__gabe{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,60px);align-items:center;margin-top:clamp(34px,4vw,60px);padding:clamp(22px,2.6vw,38px);border-radius:26px;background:linear-gradient(180deg,#4a2e17,#27160b);box-shadow:inset 0 0 0 1px rgba(183,143,81,.36),inset 0 1px 0 rgba(255,236,200,.14),0 34px 50px -34px #000}
.fuss__gabe[data-r]{transform:none}
.fuss__gabe h3{font-size:clamp(1.5rem,2.3vw,2.4rem);line-height:1.12}
.fuss__gabe p{margin-top:8px;font-size:1rem;line-height:1.55;color:rgba(var(--lh),.82);max-width:62ch}
@media (max-width:1240px){
  .galerie{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gt{height:clamp(220px,31vw,360px)}
}
@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:900px){
  .zreihe{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(26px,5vw,40px)}
  .koord--reihe{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}
  .koord--reihe div:nth-child(3){padding-left:0;border-left:0}
  .galerie{grid-template-columns:minmax(0,1fr)}
  .gt{height:auto;aspect-ratio:4/3.4}
  .gt .kerbe{font-size:clamp(1.15rem,5.6vw,1.5rem)}
  .prunk__r{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:50px}
  .prunk__z:nth-child(3)::before{content:none}
  .prunk__z b{font-size:clamp(3rem,15vw,5.4rem)}
  .fuss__gabe{grid-template-columns:minmax(0,1fr)}
  .gastgeber{grid-template-columns:minmax(0,1fr)}
  .gastgeber__b{width:min(100%,320px)}
}
@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:1rem}
}
@media (max-width:620px){
  .schluss .koord{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:16px 6px;text-align:center}
  .schluss .koord div+div{border-left:0}
}
@media (max-width:380px){
  .fuss__kontakt dd{font-size:.94rem}
  .fuss__kontakt a{white-space:normal;overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:reduce){
  .prunk__z b span,.prunk__z>i,.kopfzeile::after{transform:none;transition:none}
}
.tafel{color:var(--tinte)}
.tafel .gold{color:var(--balken)}
.fuss__marke .fuss__satz{font-size:clamp(1.5rem,2.9vw,2.9rem);line-height:1.1}
.fuss__kopf--drei{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:clamp(24px,3.4vw,64px)}
.fuss__kontakt{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
.fuss__kontakt dd{font-size:clamp(.98rem,1.12vw,1.18rem)}
@media (max-width:1100px){.fuss__kopf--drei{grid-template-columns:minmax(0,1fr) auto}}
@media (max-width:700px){.fuss__kopf--drei{grid-template-columns:minmax(0,1fr)}}
.fuss__marke .fuss__satz{font-size:clamp(1.4rem,2.3vw,2.45rem);line-height:1.12}
/* Zimmer-Seite: jede Kategorie auf eigener Fläche; an der Naht zwischen zwei Flächen sitzt das Zeichen im Kreis */
.zband{padding-block:clamp(60px,7vw,110px)}
.zband__z{position:absolute;z-index:2;left:50%;top:0;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--papier);color:var(--balken);box-shadow:inset 0 0 0 1px rgba(var(--ld),.26),0 10px 16px -10px rgba(var(--ld),.5)}
.zband__z svg{width:30px;height:auto}
.zband:not(.fl--leinen) .zband__z{display:none}
.zband.fl--leinen::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:rgba(var(--ld),.16)}
@media (max-width:380px){
  .kn{letter-spacing:.08em;padding-left:18px;gap:10px;max-width:100%}
  .fl .knoepfe .kn{min-width:0}
}
@media (max-width:520px){
  .koord--reihe dd{font-size:1rem;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
  .koord--reihe div{padding-right:10px}
  .koord--reihe div+div{padding-left:12px}
}
@media (max-width:520px){
  .zreihe{gap:12px;row-gap:26px}
  .zreihe .frei b{font-size:clamp(.98rem,4.6vw,1.2rem);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
  .zreihe .frei small{font-size:.92rem}
  .zreihe .frei__b{border-radius:18px}
}
@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}
}

/* =====================================================================
   FASSUNG 6 (09.10.2026) · Willkommen als Fries · «Was führt Sie zu uns?» als Galerie zum Durchklicken · Zimmer als Gefüge (Vorbild Doldenhorn) ·
   Abzüge fliegen herein · Geschichte als aufgeschlagenes Buch · «Rund ums Haus» als Liste mit Bühne · Zahlen zählen · Seitenkopf als Fensterreihe
   ===================================================================== */

.gastgeber--zeile{grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,2.8vw,46px);margin-top:clamp(34px,4vw,60px);padding-top:clamp(24px,2.6vw,38px)}
.gastgeber--zeile .gastgeber__b{width:clamp(170px,19vw,280px)}
.gastgeber p.gastgeber__satz{font-family:var(--titel);font-size:clamp(1.2rem,1.8vw,1.7rem);line-height:1.36;max-width:36ch}
.gastgeber--zeile .gastgeber__n{margin-top:12px;padding-top:0;border-top:0}

/* ---------- «Was führt Sie zu uns?»: Galerie zum Durchklicken. Das gewählte Bild steht gross in der Mitte, die Nachbarn schauen links und rechts herein.
   Bewegt wird nur die Bahn (ein Element), die Bilder selbst wechseln Grösse und Deckkraft. ---------- */
.rkf{--bw:min(62vw,1000px);--lu:clamp(12px,1.8vw,30px);overflow:hidden}
.rk__kopf{text-align:center}
.rk__titel .z{display:inline-block;vertical-align:top;margin-inline:.13em}
.rk__namen{display:flex;flex-wrap:wrap;justify-content:center;gap:4px clamp(18px,3vw,54px);margin-top:clamp(16px,1.8vw,26px)}
.rk__namen button{position:relative;padding:8px 2px 11px;font-family:var(--titel);font-weight:700;font-size:clamp(1.05rem,1.5vw,1.45rem);line-height:1.1;color:var(--papier);opacity:.5;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .5s,color .5s}
.rk__namen button::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--kerze);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--e1)}
.rk__namen button[aria-pressed="true"]{opacity:1;color:var(--licht)}
.rk__namen button[aria-pressed="true"]::after{transform:none}
.rk__namen button:focus-visible{outline:2px solid var(--kerze);outline-offset:4px;border-radius:6px}
@media (hover:hover){.rk__namen button:hover{opacity:.9}}
.rk{position:relative;margin-top:clamp(26px,3.2vw,50px);padding-block:10px clamp(30px,3.4vw,48px)}
.rk__bahn{position:relative;width:var(--bw);aspect-ratio:16/9.4;margin-inline:auto;transform:translate3d(calc(var(--a,0) * -1 * (100% + var(--lu))),0,0);transition:transform 1.05s var(--e3)}
.rk__s{position:absolute;inset:0;margin:0;transform:translate3d(calc(var(--k,0) * (100% + var(--lu))),0,0);cursor:pointer}
.rk__s.an{cursor:default}
.rk__b{display:block;position:relative;width:100%;height:100%;overflow:hidden;border-radius:var(--r-xl);background:#120a04;transform:scale(.9);opacity:.36;box-shadow:0 40px 50px -34px #000;transition:transform 1.05s var(--e3),opacity .9s var(--e1)}
.rk__b img{width:100%;height:100%;object-fit:cover}
.rk__s.an .rk__b{transform:none;opacity:1;box-shadow:0 0 0 1px rgba(210,179,132,.6),0 0 0 8px #2a180a,0 0 0 9px rgba(210,179,132,.3),0 50px 60px -36px #000}
.rk__pf{position:absolute;z-index:3;top:calc(10px + var(--bw) * .29375);width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;display:grid;place-items:center;color:var(--tinte);background:linear-gradient(#f6ecdc,#e7d7c0 55%,#d6c2a6);box-shadow:inset 0 1px 0 #fffaf0,inset 0 -2px 0 #b89f7f,0 14px 20px -10px rgba(0,0,0,.8);cursor:pointer;transition:transform .5s var(--e2)}
.rk__pf--l{left:calc(50% - var(--bw) / 2)}
.rk__pf--r{left:calc(50% + var(--bw) / 2)}
.rk__pf svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.rk__pf:focus-visible{outline:2px solid var(--kerze);outline-offset:4px}
.rk__pf:active{transform:scale(.94)}
@media (hover:hover){.rk__pf:hover{transform:scale(1.08)}}
.rk__lauf{width:var(--bw);height:2px;margin:0 auto;border-radius:2px;background:rgba(var(--lh),.16);overflow:hidden}
.rk__lauf i{display:block;width:25%;height:100%;background:var(--kerze);transform:translateX(calc(var(--n,0) * 100%));transition:transform 1.05s var(--e3)}
.rk__text{display:grid;width:min(100%,1120px);margin:clamp(26px,3vw,44px) auto 0}
.rk__text>[data-feld]{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,70px);align-items:start;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .4s var(--e1),transform .6s var(--e1),visibility 0s .4s}
.rk__text>[data-feld].an{opacity:1;visibility:visible;transform:none;transition:opacity .8s var(--e1) .25s,transform 1s var(--e1) .25s,visibility 0s}
.rk__text .lead{margin-top:14px;max-width:44ch}
.rk__text .koord{margin-top:8px}
.rk__text .knoepfe{margin-top:clamp(20px,2.2vw,30px)}
.still .rk__bahn,.still .rk__b,.still .rk__lauf i,.still .rk__text>[data-feld]{transition:none}

/* ---------- Zimmer auf der Startseite: Gefüge aus vier Bildern wie beim Waldhotel Doldenhorn, Name, Preis und Belegung in der Kerbe ---------- */
.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;margin-top:clamp(34px,4.4vw,70px)}
.zplan .frei{position:relative;display:block;min-width:0;min-height:0;text-align:left;color:inherit}
.zplan .frei__b{position:relative;height:100%;border-radius:26px}
.zplan .frei__b img{transition:transform 1.8s var(--e1)}
.zplan__breit{grid-area:1/1/2/3}.zplan__klein{grid-area:2/1/3/2}.zplan__mitte{grid-area:2/2/3/3}.zplan__hoch{grid-area:1/3/3/4}
@media (hover:hover){
  .zplan .frei:hover .frei__b{transform:translateY(-8px);box-shadow:0 0 0 2px var(--balken),0 46px 46px -30px rgba(42,26,14,.7)}
  .zplan .frei:hover .frei__b img{transform:scale(1.05)}
}

/* ---------- Abzüge fliegen herein: jeder aus seiner Richtung, gedreht und etwas grösser, und landet an seinem Platz ---------- */
.flugfeld{overflow:hidden}
[data-r="flug"]{opacity:0;transform:translate3d(var(--fx,0),var(--fy,60vh),0) rotate(var(--fw,10deg)) scale(1.06);transition:opacity .55s var(--e1),transform 1.3s cubic-bezier(.2,1.06,.3,1);transition-delay:0s}
[data-r="flug"].da{opacity:1;transform:none}
.polas--flug{gap:clamp(10px,1.3vw,20px);padding-inline:0;margin-inline:calc(clamp(0px,2.2vw,34px) * -1)}
.polas--flug .pola{padding:11px 11px 0}
.polas--flug .pola b{padding-top:14px;font-size:clamp(1.02rem,1.3vw,1.28rem)}
.polas--flug .pola small{font-size:1rem}



/* ---------- Seitenkopf der Unterseiten: heller Grund, Titel links, Satz rechts; das Foto steht darunter als Fensterreihe aus fünf Scheiben, die nacheinander aufgehen ---------- */
.kopfreihe{padding-top:clamp(128px,12.5vw,176px);padding-bottom:clamp(40px,4.6vw,72px)}
.kopfreihe__t{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(18px,4vw,72px);align-items:end}
.kopfreihe h1{font-size:clamp(2.2rem,4.5vw,4.2rem);line-height:1.06}
.kopfreihe .lead{max-width:44ch;padding-bottom:.55em}

/* ---------- Zimmer-Seite: das grosse Bild ist so hoch wie die zwei kleinen zusammen ---------- */
@media (min-width:901px){
  .gefuege--quer{align-items:stretch}
  .gefuege--quer>:first-child{display:flex;flex-direction:column}
  .gefuege--quer>:first-child .frei__b{flex:1 1 auto;aspect-ratio:auto!important;min-height:0}
  .gefuege--quer>:first-child .frei__b img{position:absolute;inset:0}
}

@media (max-width:1100px){
  .gastgeber--zeile{grid-template-columns:auto minmax(0,1fr)}
  .gastgeber--zeile>.kn{grid-column:1/-1;justify-self:start}
}
@media (max-width:900px){
  .rkf{--bw:84vw;--lu:10px}
  .rk__bahn{aspect-ratio:4/3}
  .rk__pf{top:calc(10px + var(--bw) * .375);width:46px;height:46px;margin:-23px 0 0 -23px}
  .rk__pf--l{left:calc(50% - var(--bw) / 2 + 6px)}.rk__pf--r{left:calc(50% + var(--bw) / 2 - 6px)}
  .rk__b{border-radius:22px}
  .rk__namen{gap:2px 14px}
  .rk__namen button{font-size:.98rem;padding-inline:0}
  .rk__text>[data-feld]{grid-template-columns:minmax(0,1fr);gap:10px}
  .zplan{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 .zplan__klein .frei__b{aspect-ratio:3/2}.zplan .zplan__hoch .frei__b{aspect-ratio:4/5}
  .polas--flug{margin-inline:0}
  .kopfreihe{padding-top:112px}
}
@media (max-width:520px){
  .gastgeber--zeile{grid-template-columns:minmax(0,1fr)}
  .gastgeber--zeile .gastgeber__b{width:min(100%,320px)}
  .rk__namen{gap:2px 16px}
}
@media (prefers-reduced-motion:reduce){
  .rk__bahn,.rk__b,.rk__lauf i,.rk__text>[data-feld]{transition:none}
}


/* =====================================================================
   FASSUNG 7 (09.10.2026, nach Roberts Durchsicht) · Willkommen als Bilderwand mit Tafel · Zimmer-Schilder als rotbraune Platte ·
   Abzüge kommen von unten · Geschichte als drei gerahmte Bilder · «Rund ums Haus» als Fächer · nur die grossen Zahlen zählen
   ===================================================================== */


/* ---------- Zimmer: Name, Preis und Belegung auf der rotbraunen Platte des Hauses, runder heller Knauf oben rechts ---------- */
.zplan__kn{position:absolute;z-index:2;right:clamp(10px,1vw,16px);top:clamp(10px,1vw,16px);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--tinte);background:linear-gradient(180deg,#fbf3e2,#e7d7c0 50%,#d0bb9c);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(109,67,31,.4),0 12px 18px -10px rgba(0,0,0,.7);transition:transform .7s var(--e1)}
.zplan__kn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.3}
@media (hover:hover){.zplan .frei:hover .zplan__kn{transform:rotate(45deg)}}

/* ---------- Geschichte: drei gerahmte Bilder wie an einer Wand. Der Giebel hängt gross in der Mitte, Fassade und Winter links und rechts auf seiner Mitte ---------- */
.tri__titel{text-align:center}
.tri__titel .z{display:inline-block;vertical-align:top;margin-inline:.13em}
.tri{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.16fr) minmax(0,1fr);gap:clamp(22px,3.4vw,60px);align-items:center;margin-top:clamp(30px,3.6vw,56px);padding-inline:clamp(0px,1vw,14px)}
.tri .frei{margin:0}
.tri .frei__b{border-radius:4px;box-shadow:0 0 0 clamp(7px,.8vw,11px) var(--blatt),0 0 0 calc(clamp(7px,.8vw,11px) + 1px) rgba(109,67,31,.5),0 0 0 calc(clamp(7px,.8vw,11px) + 5px) #4a2c14,0 0 0 calc(clamp(7px,.8vw,11px) + 6px) rgba(210,179,132,.6),0 50px 56px -30px rgba(var(--ld),.8)}
.tri .frei b{margin-top:clamp(24px,2.2vw,32px);font-size:clamp(1.05rem,1.35vw,1.35rem)}
.tri .tri__m b{font-size:clamp(1.2rem,1.7vw,1.7rem)}
.hell .tri .frei.lupe-f:hover .rahmen__k{box-shadow:0 0 0 clamp(7px,.8vw,11px) var(--blatt),0 0 0 calc(clamp(7px,.8vw,11px) + 1px) rgba(109,67,31,.5),0 0 0 calc(clamp(7px,.8vw,11px) + 5px) #4a2c14,0 0 0 calc(clamp(7px,.8vw,11px) + 6px) var(--kerze),0 60px 56px -30px rgba(var(--ld),.85)}
.tri__sage{max-width:66ch;margin:clamp(34px,4vw,60px) auto 0;text-align:center}
.tri__sage p{font-family:var(--titel);font-size:clamp(1.15rem,1.65vw,1.56rem);line-height:1.46}
.tri__sage small{display:block;margin-top:14px;font-size:.98rem;opacity:.76}
.tri__fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,36px);margin-top:clamp(26px,3vw,44px)}
.koord--platte{display:inline-grid;grid-template-columns:repeat(2,auto);margin-top:0;padding:15px 8px 14px;border-radius:24px;text-align:left;background:var(--platte);box-shadow:inset 0 1px 0 rgba(255,228,196,.32),inset 0 0 0 1px rgba(210,179,132,.4),inset 0 -2px 0 rgba(0,0,0,.45),0 26px 36px -22px rgba(42,26,14,.8)}
.koord--platte div,.koord--platte div+div{padding:4px clamp(18px,2.4vw,34px)}
.hell .koord--platte div+div{border-left:1px solid rgba(210,179,132,.28)}
.hell .koord--platte dt{color:var(--gold2)}
.koord--platte dd{color:var(--creme);font-size:clamp(1.02rem,1.25vw,1.25rem)}

/* ---------- «Rund ums Haus»: Fächer aus sechs hohen Bildern. Jedes Blatt ist so breit wie das offene und liegt über seinem Vorgänger;
   geöffnet wird nur über transform: die Blätter hinter dem offenen rücken um dessen Breite nach rechts, das Foto fährt im Blatt zur Mitte.
   Zahlen: schmal 9 %, Spalt 0,8 %, offen 51 % der Breite. In Blattbreiten: Schritt 19,2157 %, Zusatz 82,353 %, Spalt 1,5686 %. ---------- */
.fa{position:relative;height:clamp(390px,41vw,580px);margin-top:clamp(30px,3.6vw,56px);overflow:hidden;border-radius:24px;background:var(--papier);isolation:isolate}
.fa__p{position:absolute;z-index:calc(var(--i) + 1);top:0;bottom:0;left:0;width:51%;display:block;color:var(--creme);cursor:pointer;transform:translate3d(calc(var(--i) * 19.2157% + var(--v,0) * 82.353%),0,0);transition:transform 1.1s var(--e3)}
.fa__p.an~.fa__p{--v:1}
.fa__p::before{content:'';position:absolute;inset:0;background:var(--papier)}
.fa__sp{position:absolute;top:0;bottom:0;right:100%;width:1.5686%;background:var(--papier)}
.fa__sp::before,.fa__sp::after{content:'';position:absolute;right:100%;width:24px;height:24px}
.fa__sp::before{top:0;background:radial-gradient(circle at 0 100%,transparent 23.5px,var(--papier) 24px)}
.fa__sp::after{bottom:0;background:radial-gradient(circle at 0 0,transparent 23.5px,var(--papier) 24px)}
.fa__b{position:absolute;inset:0;overflow:hidden;border-radius:24px;background:var(--holz)}
.fa__b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translate3d(-41.18%,0,0);transition:transform 1.1s var(--e3)}
.fa__p.an .fa__b img{transform:none}
.fa__mehr,.fa__kn{position:absolute;z-index:2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--tinte);background:linear-gradient(180deg,#fbf3e2,#e7d7c0 50%,#d0bb9c);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(109,67,31,.4),0 12px 18px -10px rgba(0,0,0,.7);transition:opacity .4s,transform .7s var(--e1)}
.fa__mehr svg,.fa__kn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.4}
.fa__mehr{left:8.8235%;bottom:18px;margin-left:-22px}
.fa__kn{right:16px;top:16px;opacity:0;transform:scale(.5) rotate(-45deg)}
.fa__p.an .fa__mehr{opacity:0;transform:scale(.5)}
.fa__p.an .fa__kn{opacity:1;transform:none;transition-delay:.3s}
  box-shadow:inset 0 1px 0 rgba(255,228,196,.32),inset 0 0 0 1px rgba(210,179,132,.42),inset 0 -2px 0 rgba(0,0,0,.45),0 18px 26px -16px rgba(0,0,0,.85);opacity:0;transform:translateY(16px);transition:opacity .25s,transform .4s var(--e1)}
.fa__p:focus-visible{outline:none}
.fa__p:focus-visible .fa__b{box-shadow:inset 0 0 0 3px var(--kerze)}
@media (hover:hover){.fa__p.an:hover .fa__kn{transform:rotate(45deg)}}
.still .fa__p,.still .fa__b img,.still .fa__kn,.still .fa__mehr,.still .fa__u,.still .fa__ut{transition:none}

@media (max-width:1100px){
}
@media (max-width:900px){
  .kopfreihe__t{grid-template-columns:minmax(0,1fr)}
  .tri{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px;padding-inline:12px}
  .tri__titel .z{display:block;margin-inline:0}
  .koord--platte{grid-template-columns:minmax(0,1fr);gap:10px;text-align:center}
  .hell .koord--platte div+div{border-left:0}
  /* Fächer wird am Handy ein Band zum Wischen: jedes Bild mit Namen und Satz */
  .fa{display:flex;gap:12px;height:auto;margin-inline:calc(var(--rand) * -1);padding:0 var(--rand) 6px;border-radius:0;background:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fa::-webkit-scrollbar{display:none}
  .fa__p{position:relative;flex:0 0 78%;width:auto;aspect-ratio:4/5;transform:none;scroll-snap-align:center}
  .fa__p::before,.fa__sp,.fa__mehr{display:none}
  .fa__b{border-radius:22px}
  .fa__b img{transform:none}
  .fa__kn,.fa__p.an .fa__kn{opacity:1;transform:none;right:10px;top:10px}
  .zplan__kn{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){.fa__p,.fa__b img,.fa__kn,.fa__mehr,.fa__u,.fa__ut{transition:none}}
@media (max-width:520px){
}


/* =====================================================================
   FASSUNG 8 (09.10.2026, zweite Durchsicht) · Willkommen wieder wie in Fassung 5 · Zimmer-Angaben in der ausgeschnittenen Bildecke ·
   Geschichte mit fünf Bildern, die aufgehängt werden · «Rund ums Haus»: Name und Satz unter dem offenen Bild
   ===================================================================== */
/* ---------- Zimmer: Name, Preis und Belegung in der Kerbe; Schrift wie in der früheren Zimmerreihe (Name in der Titelschrift, Angaben in der Leseschrift) ---------- */
.zplan .kerbe{--f:var(--papier);--e:clamp(18px,1.8vw,26px);color:var(--tinte);display:grid;gap:3px;max-width:94%;white-space:normal;padding:clamp(14px,1.4vw,20px) clamp(24px,2.4vw,36px) clamp(10px,1vw,14px) clamp(4px,.5vw,8px)}
.zplan .kerbe b{margin:0;font-family:var(--titel);font-weight:700;font-size:clamp(1.3rem,2.05vw,2.05rem);line-height:1.08;transition:color .4s}
.zplan .zplan__hoch .kerbe b{font-size:clamp(1.6rem,2.8vw,2.8rem)}
.zplan .kerbe small{margin:4px 0 0;font-family:var(--sans);font-weight:400;font-size:clamp(.95rem,1.08vw,1.1rem);line-height:1.3;opacity:.86}
.zplan .kerbe i{display:block;font-style:normal;font-family:var(--sans);font-weight:400;font-size:clamp(.9rem,1vw,1.02rem);line-height:1.3;opacity:.64}
@media (hover:hover){.zplan .frei:hover .kerbe b{color:var(--balken)}}

/* ---------- Geschichte: fünf Rahmen. Jeder wird aufgehängt: kommt von unten, hängt erst schief und pendelt gerade ---------- */
[data-r="haeng"]{opacity:0;transform:translate3d(0,80px,0) rotate(var(--hw,3deg));transform-origin:50% 0;transition:opacity .6s var(--e1),transform 1.5s cubic-bezier(.2,1.3,.32,1);transition-delay:0s}
[data-r="haeng"].da{opacity:1;transform:none}
.tri{align-items:stretch}
.tri__m{order:2;align-self:start}.tri__l{order:1}.tri__r{order:3}
.tri__m .frei__b{aspect-ratio:3/4}
.tri__sp{display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,2.8vw,42px);min-height:0}
.tri__sp .frei{display:flex;flex-direction:column;min-height:0}
.tri__sp .frei__b{position:relative;flex:1 1 auto;min-height:0}
.tri__sp .frei__b img{position:absolute;inset:0}
.tri .tri__sp .frei b{margin-top:clamp(20px,1.9vw,28px);font-size:clamp(1rem,1.2vw,1.2rem)}

/* ---------- «Rund ums Haus»: Name und Satz stehen unter dem offenen Bild und wandern mit ihm (9,8 % der Breite je Blatt) ---------- */
.fa__t{display:none}
.fa__u{position:relative;display:grid;width:100%;margin-top:clamp(16px,1.8vw,26px);transform:translate3d(calc(var(--akt,0) * 9.8%),0,0);transition:transform 1.1s var(--e3)}
.fa__u[data-r]{opacity:1}
.fa__ut{grid-area:1/1;display:grid;gap:6px;width:51%;padding-left:clamp(4px,.6vw,10px);opacity:0;transition:opacity .3s}
.fa__ut.an{opacity:1;transition:opacity .8s var(--e1) .35s}
.fa__ut b{font-family:var(--titel);font-weight:700;font-size:clamp(1.4rem,2.2vw,2.2rem);line-height:1.1}
.fa__ut span{font-size:clamp(1rem,1.12vw,1.14rem);line-height:1.5;opacity:.86;max-width:52ch}

@media (max-width:900px){
  .tri{align-items:start}
  .tri__m{order:0;grid-column:1/-1}
  .tri__sp{display:contents}
  .tri__sp .frei__b{flex:none;aspect-ratio:4/3}
  .fa__u{display:none}
  .fa__p{display:flex;flex-direction:column;aspect-ratio:auto;color:var(--tinte)}
  .fa__b{position:relative;inset:auto;aspect-ratio:4/5}
  .fa__t{display:grid;gap:5px;padding:12px 2px 0}
  .fa__t b{font-family:var(--titel);font-weight:700;font-size:1.35rem;line-height:1.12}
  .fa__t span{font-size:1rem;line-height:1.5;opacity:.86}
}


/* =====================================================================
   FASSUNG 9 (09.10.2026) · Seitenkopf mit zwei ganzen Fotos · Essen: Stuben als zwei Tafeln, Karte als Zettel (Vorbild Gasterntal),
   Foodkonzept mit aufgelegten Abzügen, Herkunft als Kompass, Anlässe als Jahreslauf, Feste als Bild mit Tafel
   ===================================================================== */
/* ---------- Seitenkopf: zwei ganze Fotos nebeneinander, ein breites und ein hohes ---------- */
.kopfpaar{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,1fr);gap:clamp(10px,1.2vw,18px);height:clamp(280px,50vh,540px);margin-top:clamp(24px,2.8vw,44px)}
.kopfpaar .frei{position:relative;min-width:0;min-height:0;margin:0}
.kopfpaar .frei__b{position:absolute;inset:0;border-radius:clamp(20px,2vw,30px)}

/* ---------- Stuben: je Stockwerk eine helle Tafel, jede Stube eine Zeile ---------- */
.stock{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,28px);margin-top:clamp(30px,3.6vw,56px)}
.stock__k{padding:clamp(24px,2.8vw,44px);border-radius:32px;color:var(--tinte);background:linear-gradient(#fcf6ec,#ecdcc5);box-shadow:inset 0 0 0 1px rgba(109,67,31,.34),inset 0 1px 0 #fff,inset 0 -4px 0 #c5ae8c,0 40px 50px -30px #000}
.stock__k header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:3px double rgba(var(--ld),.3)}
.stock__k header h3{color:var(--balken)}
.stock__k header span{font-family:var(--mono);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;opacity:.72;white-space:nowrap}
.stock__k ul{list-style:none;margin:0;padding:0}
.stock__k li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid rgba(var(--ld),.15)}
.stock__k li b{font-family:var(--titel);font-weight:700;font-size:clamp(1.3rem,1.9vw,1.9rem);line-height:1.1}
.stock__k li span{font-size:1.02rem;opacity:.78;white-space:nowrap}
.stock__k p{margin-top:16px}
.stock+.kapitel{margin-top:clamp(40px,5vw,76px)}

/* ---------- Karte: jede Rubrik ein Zettel, zwei Stapel, in jedem liegt ein Abzug ---------- */
.reiter--gross{padding:8px;background:linear-gradient(#fcf6ec,#e2d0b4);box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 #b89f7f,0 3px 0 #4a2c14,0 22px 30px -16px #000}
.reiter--gross{flex-wrap:nowrap}
.reiter--gross button{height:52px;min-width:0;padding:0 clamp(12px,1.3vw,20px);white-space:nowrap;font-family:var(--titel);font-weight:700;font-size:clamp(.92rem,1.08vw,1.06rem);letter-spacing:0;text-transform:none;color:var(--tinte)}
.reiter--gross button[aria-selected="true"]{color:var(--creme);background:var(--platte);box-shadow:inset 0 1px 0 rgba(255,228,196,.32),inset 0 0 0 1px rgba(210,179,132,.42),0 8px 14px -8px rgba(0,0,0,.7)}
.karte[hidden]{display:none}
.karte__kopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 22px;margin-bottom:clamp(18px,2.2vw,30px)}
.karte__kopf h3{font-size:clamp(1.8rem,2.8vw,2.6rem);line-height:1;color:var(--licht)}
.karte__kopf .mono{opacity:.7}
.zetteltisch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2.2vw,34px);align-items:start}
.zettelstapel{display:grid;gap:clamp(16px,2.2vw,34px)}
.zettel{padding:clamp(22px,2.6vw,38px);border-radius:14px}
.zettel .gruppe{margin-top:0;font-family:var(--titel);font-weight:700;font-size:clamp(1.3rem,1.8vw,1.7rem);line-height:1.12;letter-spacing:.01em;text-transform:none;color:var(--balken)}
.zettel .gruppe+.gang{margin-top:6px}
.zettel__pola{padding:clamp(6px,1vw,16px) 0}
.zettel__pola .pola-f{width:min(62%,380px);margin-inline:auto}
.zettel--breit{margin-top:clamp(16px,2.2vw,34px)}
.karte__fuss{margin-top:22px;max-width:96ch;font-size:.95rem;opacity:.8}
.karte__fuss a{box-shadow:inset 0 -1px 0 currentColor}

/* ---------- Foodkonzept: erster Satz gross, rechts ein grosses Bild mit zwei aufgelegten Abzügen, darunter drei Tafeln ---------- */
.fk__gross{margin-top:20px;font-family:var(--titel);font-weight:700;font-size:clamp(1.4rem,2.3vw,2.2rem);line-height:1.22}
.fk__gross+p{margin-top:18px}
.fk__bilder{position:relative;padding:0 14% 8% 0}
.fk__haupt{position:relative;margin:0}
.fk__haupt .frei__b{aspect-ratio:1/1.04;border-radius:var(--r-xl)}
.fk__haupt b.kerbe{margin:0}
.fk__p{position:absolute;z-index:3;width:40%}
.fk__p--a{right:0;top:5%}
.fk__p--b{right:7%;bottom:0;width:37%}
.fk__drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,28px);margin-top:clamp(44px,5.4vw,84px)}
.fk__k{padding:clamp(24px,2.6vw,40px);border-radius:28px;background:linear-gradient(#fcf6ec,#ecdcc5);box-shadow:inset 0 0 0 1px rgba(109,67,31,.3),inset 0 1px 0 #fff,inset 0 -4px 0 #c5ae8c,0 40px 50px -30px rgba(42,26,14,.75)}
.fk__k svg{display:block;width:40px;height:auto;margin-bottom:16px;color:var(--gold)}
.fk__k h3{color:var(--balken)}
.fk__unter{margin-top:8px;font-weight:600;font-size:1.06rem;line-height:1.4}
.fk__k p+p{margin-top:12px}

/* ---------- Herkunft: Kompass rund ums Haus. Ringe wachsen aus der Mitte, jeder Weg wächst vom Ort zum Haus, ein Lichtpunkt läuft ihn entlang ---------- */
.hk{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,56px);align-items:center;margin-top:clamp(20px,2.4vw,36px)}
.hk[data-r]{opacity:1;transform:none}
.hk__texte{display:grid}
.hk__t{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .3s,transform .5s var(--e1)}
.hk__t.an{opacity:1;transform:none;transition:opacity .8s var(--e1) .15s,transform 1s var(--e1) .15s}
.hk__t b{display:block;font-family:var(--titel);font-weight:700;font-size:clamp(2.2rem,4.6vw,4.3rem);line-height:1.04;color:var(--licht)}
.hk__t p{margin-top:16px;max-width:34ch;font-size:clamp(1.1rem,1.45vw,1.32rem);line-height:1.5}
.hk__namen{display:flex;flex-wrap:wrap;gap:4px clamp(14px,1.8vw,26px);margin-top:clamp(26px,3vw,44px);padding-top:clamp(18px,2vw,26px);border-top:1px solid rgba(var(--lh),.16)}
.hk__namen button{position:relative;padding:6px 0 8px;font-family:var(--titel);font-weight:700;font-size:clamp(1rem,1.2vw,1.18rem);color:var(--papier);opacity:.5;cursor:pointer;transition:opacity .4s,color .4s}
.hk__namen button::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--kerze);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--e1)}
.hk__namen button[aria-pressed="true"]{opacity:1;color:var(--licht)}
.hk__namen button[aria-pressed="true"]::after{transform:none}
.hk__namen button:focus-visible{outline:2px solid var(--kerze);outline-offset:4px;border-radius:6px}
.hk__svg{display:block;width:100%;height:auto;overflow:visible}
.hk__ringe circle{fill:none;stroke:var(--gold);stroke-opacity:.3;stroke-width:1;transform-box:fill-box;transform-origin:50% 50%;transform:scale(.001);transition:transform 1.7s var(--e3);transition-delay:calc(var(--i) * 170ms)}
.hk__ticks line{stroke:var(--gold);stroke-opacity:.45;stroke-width:1;opacity:0;transition:opacity 1.2s .7s}
.hk__leit{stroke:var(--gold);stroke-opacity:.26;stroke-width:1;stroke-dasharray:1 7;stroke-linecap:round;opacity:0;transition:opacity 1s;transition-delay:calc(1.2s + var(--i) * 130ms)}
.hk__weg{stroke:var(--kerze);stroke-opacity:.42;stroke-width:1.4;stroke-linecap:round;transform-box:view-box;transform:scale(.001);transition:transform 1.3s var(--e3),stroke-opacity .5s,stroke-width .5s;transition-delay:calc(.9s + var(--i) * 130ms)}
.hk__punkt{fill:var(--licht);transform-box:fill-box;transform-origin:50% 50%;transform:scale(.001);transition:transform .8s cubic-bezier(.2,1.5,.4,1),fill .4s;transition-delay:calc(.7s + var(--i) * 130ms)}
.hk__reise{fill:var(--licht);opacity:0}
.hk__o text{font-family:var(--titel);font-weight:700;font-size:23px;fill:var(--papier);opacity:0;transition:opacity .8s,fill .4s;transition-delay:calc(1.2s + var(--i) * 130ms)}
.hk__o{cursor:pointer}
.hk__mitte{fill:#2a180a;stroke:var(--gold);stroke-width:1.2}
.hk__z{color:var(--gold);fill:var(--gold)}
.hk__puls{fill:none;stroke:var(--kerze);stroke-width:2;transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.hk__puls.los{animation:hk-puls 1.6s var(--e1) 1.5s both}
.hk.da .hk__ringe circle,.hk.da .hk__weg,.hk.da .hk__punkt{transform:none}
.hk.da .hk__ticks line{opacity:1}
.hk.da .hk__leit{opacity:1}
.hk.da .hk__o text{opacity:.6}
.hk.fertig .hk__o *{transition-delay:0s}
.hk__o.an .hk__weg{stroke-opacity:1;stroke-width:2.6}
.hk__o.an .hk__punkt{transform:scale(1.5);fill:var(--kerze)}
.hk.da .hk__o.an text{opacity:1;fill:var(--licht)}
.hk__o.an .hk__reise{animation:hk-reise 2s cubic-bezier(.5,0,.3,1) .1s both}
@keyframes hk-reise{0%{transform:translate(0,0);opacity:0}12%{opacity:1}86%{opacity:1}100%{transform:translate(var(--tx),var(--ty));opacity:0}}
@keyframes hk-puls{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.9);opacity:0}}
.still .hk__ringe circle,.still .hk__weg,.still .hk__punkt{transform:none;transition:none}
.still .hk__ticks line,.still .hk__leit{opacity:1}.still .hk__o text{opacity:.7}

/* ---------- Durchs Jahr: Lineal von Januar bis Dezember, darunter die Anlässe als Bildkarten in der Reihenfolge des Kalenders ---------- */
.jl{margin-top:clamp(24px,3vw,44px)}
.jl__lineal{position:relative;padding-bottom:26px}
.jl__monate{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(var(--lh),.66)}
.jl__monate span{padding:0 0 12px 8px;border-left:1px solid rgba(var(--lh),.2)}
.jl__bahn{position:relative;height:12px;border-radius:999px;background:rgba(0,0,0,.3);box-shadow:inset 0 1px 3px rgba(0,0,0,.6),inset 0 0 0 1px rgba(var(--lh),.1)}
.jl__bahn i{position:absolute;top:1px;bottom:1px;left:var(--von);width:max(var(--breit),10px);margin-left:-5px;border-radius:999px;background:linear-gradient(#e8b06a,var(--kerze));box-shadow:0 0 0 1px rgba(0,0,0,.35);transform:scale(0);transition:transform .9s cubic-bezier(.2,1.4,.4,1),background .3s;transition-delay:calc(.3s + var(--i) * 120ms)}
.jl__lineal.da .jl__bahn i{transform:none}
.jl__bahn i.an{background:var(--licht);transform:scale(1.5);transition-delay:0s}
.jl__karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,3.4vw,54px) clamp(14px,1.8vw,28px);margin-top:clamp(20px,2.4vw,36px)}
.jl__k{min-width:0}
.jl__b{position:relative;display:block;aspect-ratio:3/2;border-radius:var(--r-l);transition:transform .7s var(--e2),box-shadow .6s var(--e2)}
.jl__b img{transition:transform 1.8s var(--e1)}
.jl__k h3{margin-top:clamp(16px,1.8vw,24px);color:var(--licht)}
.jl__k .wann{margin-top:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.66}
.jl__s{margin-top:12px;font-family:var(--titel);font-size:clamp(1.06rem,1.3vw,1.24rem);line-height:1.4}
.jl__k ul{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid rgba(var(--lh),.16)}
.jl__k li{padding:8px 0;border-bottom:1px solid rgba(var(--lh),.12);font-size:1rem}
.jl__k .zusatz{margin-top:12px;font-size:.98rem;line-height:1.5;opacity:.76}
@media (hover:hover){.jl__k:hover .jl__b{transform:translateY(-8px);box-shadow:0 0 0 2px var(--kerze),0 46px 46px -30px #000}.jl__k:hover .jl__b img{transform:scale(1.05)}}

/* ---------- Feste: Bild über die Breite auf hellem Grund ---------- */
.hell .ort .rahmen{box-shadow:inset 0 0 0 1px rgba(var(--ld),.16),0 50px 60px -40px rgba(var(--ld),.8)}
.hell .ort .koord--4 dd{color:var(--tinte)}

@media (max-width:1100px){
  .hk{grid-template-columns:minmax(0,1fr)}
  .hk__karte{order:-1}
  .jl__karten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .kopfpaar{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);height:clamp(220px,62vw,360px)}
  .stock,.zetteltisch,.fk__drei{grid-template-columns:minmax(0,1fr)}
  .zettel__pola .pola-f{width:min(74%,340px)}
  .reiter--gross button{min-width:0;height:48px;padding:0 16px;font-size:1rem}
  .hk__o text{display:none}
  .hk__punkt{r:9px}
}
@media (max-width:620px){
  .jl__karten{grid-template-columns:minmax(0,1fr)}
  .jl__monate span{padding-left:3px;font-size:9px;letter-spacing:.04em}
  .stock__k li{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .hk__ringe circle,.hk__weg,.hk__punkt,.jl__bahn i{transform:none;transition:none}
  .hk__ticks line,.hk__leit{opacity:1}.hk__o text{opacity:.7}
  .hk__o.an .hk__reise,.hk__puls.los{animation:none}
}


/* =====================================================================
   FASSUNG 10 (09.10.2026) · Das Haus: Geschichte als Bilderfolge nach unten, Gastgeber als gerahmtes Bild mit Brief, Garten als Bild mit Tafel und Abzügen,
   Spa mit Lichtstreif, Anreise mit Platte, Noten wie auf der Startseite, Bewerbung nach dem Aufbau der Doldenhorn-Seite
   ===================================================================== */
:root{--passe:0 0 0 9px var(--blatt),0 0 0 10px rgba(109,67,31,.5),0 0 0 14px #4a2c14,0 0 0 15px rgba(210,179,132,.6),0 50px 56px -30px rgba(50,31,16,.8)}

/* ---------- Geschichte: die Linie läuft in der Mitte nach unten, links und rechts im Wechsel ein Abzug und die Jahreszahl mit ihrem Text ---------- */
.zeit--bilder{padding-left:0;margin-top:clamp(40px,5vw,80px)}
.zeit--bilder::before{left:50%}
.zeit--bilder .zeit__linie{left:calc(50% - 1.5px)}
.zeit--bilder .zj{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(44px,9vw,160px);align-items:center;padding-block:clamp(26px,3.4vw,56px);border-bottom:0}
.zj__bild{justify-self:center;width:min(100%,430px)}
.zj--um .zj__bild{order:2}
.zj--um .zj__t{order:1}
.zeit--bilder .pola b{font-size:clamp(1rem,1.2vw,1.18rem);line-height:1.2;letter-spacing:0}
.zj__punkt{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--kerze);box-shadow:0 0 0 6px var(--russ),0 0 0 7px rgba(201,133,67,.55)}
.zj__punkt[data-r]{opacity:1;transform:scale(0);transition:transform .8s cubic-bezier(.2,1.6,.4,1)}
.zj__punkt[data-r].da{transform:none}
.zeit--bilder .zj__jahr{display:block;overflow:hidden;padding-bottom:.1em;font-family:var(--titel);font-weight:700;font-size:clamp(3.4rem,7.6vw,7.2rem);line-height:.95;letter-spacing:-.012em;color:var(--licht)}
.zj__jahr[data-r]{opacity:1;transform:none}
.zj__jahr span{display:block;transform:translateY(108%);transition:transform 1.6s var(--e3)}
.zj__jahr.da span{transform:none}
.zj__t>div{margin-top:12px}
.zeit--bilder .zj__t p{max-width:46ch;font-size:1.06rem}
.still .zj__jahr span,.still .zj__punkt{transform:none;transition:none}

/* ---------- Gastgeber: die Familie gerahmt, daneben ihr Brief auf heller Tafel ---------- */
.gg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(34px,5.4vw,96px);align-items:center}
.gg__rahmen{margin:0 clamp(14px,1.6vw,22px)}
.gg .gg__rahmen .frei__b{aspect-ratio:4/3.3;border-radius:4px;background:#fff;box-shadow:var(--passe)}
.gg .gg__rahmen b{margin-top:clamp(28px,2.6vw,36px);font-size:clamp(1.3rem,1.9vw,1.9rem)}
.gg .gg__rahmen small{margin-top:6px;font-size:.95rem}
.gg__brief{margin-top:0;padding:clamp(28px,3.6vw,60px)}
.gg__brief svg.zier{display:block;width:46px;height:auto;margin-bottom:14px;color:var(--gold)}
.gg__brief p{margin-top:12px}
.gg__brief .gg__anrede{margin-top:20px;font-family:var(--titel);font-weight:700;font-size:clamp(1.3rem,1.8vw,1.7rem)}
.gg__brief .gg__gruss{margin-top:22px;font-family:var(--titel);font-weight:700;font-size:clamp(1.5rem,2.2vw,2.1rem);color:var(--balken)}
.gg__brief .gg__hin{margin-top:18px;padding-top:16px;border-top:1px solid rgba(var(--ld),.2);font-size:.98rem;opacity:.82}

/* ---------- Garten: Bild über die Breite, helle Tafel darüber, daneben kommen zwei Abzüge von unten ---------- */
.polas--paar{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.8vw,28px);margin-top:clamp(20px,2.4vw,36px);padding-inline:clamp(0px,3vw,54px);align-self:start}
.polas--paar>*,.polas--paar>:nth-child(4),.polas--paar>:nth-child(5){grid-column:auto}
.tafel .titeltext{margin-top:14px}

/* ---------- Spa: grosses Bild im Goldrand, ein Lichtstreif zieht einmal über das Wasser; drei Worte steigen nacheinander auf ---------- */
.spa{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,4.6vw,84px);align-items:center}
.spa__bild{position:relative;margin:0 9px}
.spa .spa__bild .frei__b{aspect-ratio:3/2;border-radius:var(--r-xl);box-shadow:0 0 0 1px rgba(210,179,132,.6),0 0 0 8px #2a180a,0 0 0 9px rgba(210,179,132,.3),0 50px 60px -36px #000}
.spa__bild b.kerbe{--f:var(--holz);margin:0;color:var(--papier)}
.spa__licht{position:absolute;z-index:2;top:-20%;bottom:-20%;left:0;width:30%;background:linear-gradient(100deg,transparent,rgba(255,244,222,.36),transparent);transform:translate3d(-170%,0,0) skewX(-14deg);pointer-events:none}
.spa__bild.da .spa__licht{animation:spa-licht 2.8s var(--e1) 1s both}
@keyframes spa-licht{to{transform:translate3d(460%,0,0) skewX(-14deg)}}
.spa__drei{list-style:none;margin:clamp(20px,2.4vw,32px) 0 0;padding:0;border-top:1px solid rgba(var(--lh),.18)}
.spa__drei li{padding:13px 0 12px;border-bottom:1px solid rgba(var(--lh),.18);font-family:var(--titel);font-weight:700;font-size:clamp(1.3rem,2vw,1.9rem);line-height:1.1;color:var(--licht)}

/* ---------- Anreise und Kontakt: Bild über die Breite, die Angaben auf einer rotbraunen Platte, die auf dem Bildrand sitzt ---------- */
.anr{margin-top:clamp(26px,3vw,46px)}
.hell .anr .rahmen{box-shadow:inset 0 0 0 1px rgba(var(--ld),.16),0 50px 60px -40px rgba(var(--ld),.8)}
.koord--platte.anr__platte{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(calc(100% - 2 * clamp(12px,4vw,70px)),1100px);margin:clamp(-76px,-5.4vw,-38px) auto 0;padding:clamp(16px,1.9vw,28px) clamp(6px,1vw,14px)}
.anr__platte dd{font-size:clamp(1.05rem,1.45vw,1.46rem);line-height:1.3}
.anr__platte a{box-shadow:inset 0 -1px 0 rgba(247,236,220,.5)}

/* ---------- Bewerbung ---------- */
.team{margin-top:clamp(30px,3.6vw,56px)}
.leben{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,28px);margin-top:clamp(30px,3.6vw,56px)}
.kfragen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,28px);margin-top:clamp(30px,3.6vw,56px)}
.kfrage{display:flex;flex-direction:column;min-height:clamp(200px,17vw,250px);padding:clamp(22px,2.6vw,38px);border-radius:var(--r-l);border:1.5px dashed rgba(109,67,31,.55);background:rgba(251,245,234,.62)}
.kfrage h3{color:var(--balken)}
.kfrage p{margin-top:12px;font-size:1.02rem;line-height:1.55;opacity:.84}
.kfrage .mono{margin-top:auto;padding-top:22px;font-size:11px;letter-spacing:.16em;color:var(--balken)}
.kstellen{margin-top:clamp(20px,2.4vw,36px);border-top:1px solid rgba(var(--lh),.22)}
.kstelle{display:grid;grid-template-columns: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);color:inherit}
.kstelle b{font-family:var(--titel);font-weight:700;font-size:clamp(1.5rem,3vw,2.8rem);line-height:1.1;transition:transform .7s var(--e2),color .4s}
.kstelle__k{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase}
.kstelle__k i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--tinte);background:linear-gradient(180deg,#fbf3e2,#e7d7c0 50%,#d0bb9c);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(109,67,31,.4),0 12px 18px -10px rgba(0,0,0,.7);transition:transform .7s var(--e1)}
.kstelle__k i svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.4}
@media (hover:hover){.kstelle:hover b{transform:translateX(10px);color:var(--licht)}.kstelle:hover .kstelle__k i{transform:rotate(45deg)}}

@media (max-width:900px){
  .zeit--bilder::before,.zeit--bilder .zeit__linie{left:0}
  .zeit--bilder .zeit__linie{left:-1px}
  .zeit--bilder .zj{grid-template-columns:minmax(0,1fr);gap:18px;padding-left:30px}
  .zj--um .zj__bild,.zj--um .zj__t{order:0}
  .zj__bild{justify-self:start;width:min(86%,360px)}
  .zj__punkt{left:0;top:54px}
  .gg,.spa,.leben,.kfragen{grid-template-columns:minmax(0,1fr)}
  .kfrage{min-height:0}
  .koord--platte.anr__platte{grid-template-columns:minmax(0,1fr);width:calc(100% - 24px);margin-top:-30px;gap:12px;text-align:center}
  .kstelle__k{font-size:0;gap:0}
}
@media (prefers-reduced-motion:reduce){.zj__jahr span,.zj__punkt{transform:none!important;transition:none}.spa__bild.da .spa__licht{animation:none}}
/* Nachträge Fassung 10: der Text unter dem Fächer wandert auch nach dem Einblenden mit; die Kartenwahl bricht auf schmalen Schirmen um */
.fa__u[data-r],.fa__u[data-r].da{opacity:1;transform:translate3d(calc(var(--akt,0) * 9.8%),0,0)}
@media (max-width:1180px){.reiter--gross{flex-wrap:wrap;justify-content:center;border-radius:28px}}
#foodkonzept{overflow:hidden}
@media (max-width:520px){.fk__p .pola b{font-size:.78rem;padding-inline:2px;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}.fk__p .pola small{display:none}.fk__p .pola b{padding-bottom:9px}}

/* ---------- Kopf der Unterseiten (Fassung 13): dieselbe Sprache wie der Auftakt der Startseite, etwas niedriger; die Platte kann feste Angaben tragen ---------- */
.auftakt--seite .auftakt__steh{min-height:100svh}  /* 17.10.2026 Robert: Kopfbild schliesst bündig mit der Unterkante des Bildschirms ab */
.leiste--angaben{grid-template-columns:repeat(3,minmax(0,1fr)) auto}
.leiste__f{display:grid;align-content:center;gap:5px;min-width:0;border-radius:16px;padding:11px 22px 12px;background:linear-gradient(180deg,rgba(12,5,2,.62),rgba(12,5,2,.3));
  box-shadow:inset 0 3px 7px rgba(0,0,0,.7),inset 0 1px 0 rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,222,184,.2),0 1px 0 rgba(255,222,184,.14)}
.leiste__f:first-child{border-radius:36px 16px 16px 36px;padding-left:34px}
.leiste__f span{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold2)}
.leiste__f b{font:500 1.12rem var(--sans);color:var(--creme);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal--still>:nth-child(n+3){grid-column:span 4}
@media (max-width:1180px){.leiste__f{padding-inline:14px}.leiste__f:first-child{padding-left:24px}.leiste__f b{font-size:1rem}}
@media (max-width:900px){.auftakt--seite .auftakt__steh{min-height:0}.auftakt--seite .auftakt__haus img{aspect-ratio:4/3}.gal--still>:nth-child(n+3){grid-column:auto}}

/* =====================================================================
   STUDIO (09.10.2026): Hinweis für Gäste. Ein Streifen unten im Bild (Betriebsferien, Feiertage), aus dem Studio ein- und ausgeschaltet,
   rotbraune Platte wie die Leiste oben, lässt sich wegtippen. Liegt unter der Leiste und den Eck-Knöpfen, über dem Inhalt.
   ===================================================================== */
.hinweisband{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:58;width:min(calc(100% - 2*var(--rand)),780px)}
.hinweisband__in{display:flex;align-items:center;gap:14px;padding:11px 11px 11px 20px;border-radius:999px;border:1px solid rgba(var(--lh),.2);color:var(--papier);
  background:linear-gradient(180deg,#4a2e17,#27160b);box-shadow:inset 0 1px 0 rgba(255,236,200,.16),0 16px 30px -18px rgba(0,0,0,.9);font-size:15px;line-height:1.4}
.hinweisband__z{flex:none;width:26px;height:34px;color:var(--gold)}
.hinweisband p{margin:0;min-width:0;flex:1}
.hinweisband a{color:var(--licht);text-decoration:underline;text-underline-offset:3px;margin-left:8px;white-space:nowrap}
.hinweisband__zu{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--papier);background:rgba(0,0,0,.28);transition:background-color .3s}
.hinweisband__zu:hover{background:rgba(0,0,0,.45)}
.hinweisband__zu svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.5}
@media(max-width:900px){.hinweisband{bottom:12px;width:calc(100% - 24px)}.hinweisband__in{border-radius:22px;font-size:14px;align-items:flex-start;padding-top:13px}.hinweisband a{white-space:normal;display:block;margin:4px 0 0}}

/* =====================================================================
   FASSUNG 14 (09.10.2026): Roberts Durchgang Abschnitt für Abschnitt
   ===================================================================== */
/* ---------- Garten: Überschrift passt sich der Tafel an (kein Wort ragt hinaus), drei Abzüge leicht übereinander ---------- */
.ort .tafel{container-type:inline-size}
.ort .tafel .d2{font-size:min(clamp(2rem,3.9vw,3.5rem),11.4cqi)}
.polas--drei{display:flex;justify-content:center;align-items:flex-start;align-self:start;margin-top:clamp(20px,2.4vw,36px)}
.polas--drei>*{position:relative;flex:0 1 39%;min-width:0;margin-inline:-3.2%}
.polas--drei>:nth-child(2){z-index:2;margin-top:clamp(22px,3vw,48px)}
.polas--drei .pola{padding:10px 10px 0}
@media (max-width:900px){.polas--drei{margin-top:34px}.polas--drei .pola b{font-size:.86rem;padding-top:9px}.polas--drei .pola{padding:6px 6px 0}}

/* ---------- Stuben: der Name steht in der Kerbe unten links und kommt erst beim Überfahren (am Handy steht er immer) ---------- */
@media (hover:hover){
  .gal--still .kerbe{opacity:0;transform:translateY(10px);transition:opacity .35s var(--e2),transform .6s var(--e1)}
  .gal--still .frei:hover .kerbe,.gal--still .frei:focus-visible .kerbe{opacity:1;transform:none}
}

/* ---------- Karte: beide Stapel gleich hoch, der Abzug steht in der Mitte der freien Fläche; Hinweis darunter mittig ---------- */
.zetteltisch{align-items:stretch}
.zettelstapel{display:flex;flex-direction:column}
.zettel__pola{flex:1 1 auto;display:grid;align-content:center}
.karte__fuss{max-width:74ch;margin-inline:auto;text-align:center}
@media (min-width:901px){
  .zettel__pola{container-type:size;min-height:clamp(400px,37vw,520px)}
  .zettel__pola .pola-f{width:min(80%,calc((100cqb - 34px) * .86))}
}

/* ---------- Schichtung: Bilder liegen übereinander, jedes mit hellem Rand und Namen in der Kerbe. Beim Überfahren kommt eines nach vorn ---------- */
.schicht{position:relative;width:100%;aspect-ratio:1/.96}
.schicht>figure{position:absolute;margin:0;z-index:1}
.schicht .frei__b{width:100%;height:auto;border-radius:clamp(16px,1.7vw,26px);box-shadow:0 0 0 clamp(4px,.45vw,7px) var(--rand-f,var(--russ)),0 34px 44px -26px rgba(0,0,0,.85)}
.hell .schicht{--rand-f:var(--papier)}.fl--holz .schicht{--rand-f:var(--holz)}
.hell .schicht .frei__b{box-shadow:0 0 0 clamp(4px,.45vw,7px) var(--rand-f),0 34px 44px -26px rgba(var(--ld),.72)}
.schicht .kerbe{font-family:var(--titel);font-weight:700;font-size:clamp(.9rem,1.05vw,1.1rem);line-height:1.15;white-space:nowrap}
.schicht--vier .schicht__a{left:5%;top:19%;width:70%}
.schicht--vier .schicht__b{right:0;top:3%;width:43%;z-index:2}
.schicht--vier .schicht__c{right:2%;top:43%;width:39%;z-index:3}
.schicht--vier .schicht__d{left:0;top:0;width:40%;z-index:4}
.schicht--drei{aspect-ratio:1/.87}
.schicht--drei .schicht__a{left:0;top:0;width:100%}
.schicht--drei .schicht__b{left:31%;top:54%;width:39%;z-index:2}
.schicht--drei .schicht__c{right:2%;top:45%;width:27%;z-index:3}
@media (max-width:900px){.schicht{margin-top:30px}.schicht .kerbe{font-size:.8rem;padding:7px 12px 6px 9px}}
.schicht>figure:not(.schicht__a) .kerbe{--e:14px;font-size:clamp(.78rem,.88vw,.95rem);padding:8px 15px 7px 11px}

/* ---------- Gut zu wissen: sechs Platten im Holz des Hauses, jede mit hellem Knauf und gezeichnetem Zeichen. Sie klappen nacheinander auf ---------- */
.gz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.3vw,20px);margin-top:clamp(26px,3vw,44px);perspective:1100px}
.gz__p{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px clamp(14px,1.4vw,20px);align-items:center;padding:clamp(16px,1.6vw,24px) clamp(18px,1.8vw,26px);border-radius:22px;color:var(--creme);background:var(--platte);
  box-shadow:inset 0 1px 0 rgba(255,228,196,.32),inset 0 0 0 1px rgba(210,179,132,.4),inset 0 -2px 0 rgba(0,0,0,.45),0 26px 34px -24px rgba(0,0,0,.95)}
.gz__z{grid-row:1/3;width:clamp(50px,4.2vw,62px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;color:var(--tinte);background:linear-gradient(180deg,#fbf3e2,#e7d7c0 50%,#d0bb9c);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(109,67,31,.4),0 12px 18px -10px rgba(0,0,0,.8);transition:transform .8s var(--e1)}
.gz__z svg{width:52%;height:auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.gz__z svg:not([viewBox="0 0 24 24"]){fill:currentColor;stroke:none;width:46%}
.gz__p b{align-self:end;font-family:var(--titel);font-weight:700;font-size:clamp(1.05rem,1.35vw,1.32rem);line-height:1.18;hyphens:auto;overflow-wrap:anywhere}
.gz__p span{align-self:start;font-family:var(--mono);font-size:10.5px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--gold2)}
[data-r="kipp"]{opacity:0;transform:rotateX(-64deg) translateY(34px);transform-origin:50% 0;transition:opacity .5s var(--e2),transform 1.15s cubic-bezier(.2,1.25,.3,1);transition-delay:0s}
.gz__p.da{transition:transform .6s var(--e2),box-shadow .5s var(--e2)}
@media (hover:hover){.gz__p.da:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,228,196,.4),inset 0 0 0 1px rgba(210,179,132,.75),inset 0 -2px 0 rgba(0,0,0,.45),0 34px 36px -22px #000}.gz__p:hover .gz__z{transform:rotate(-10deg) scale(1.06)}}
@media (max-width:560px){.gz{grid-template-columns:minmax(0,1fr)}}

  box-shadow:inset 0 1px 0 rgba(255,228,196,.32),inset 0 0 0 1px rgba(210,179,132,.45),0 50px 60px -34px #000;transform:translate3d(7%,-11%,-90px) rotate(4deg)}
  background:radial-gradient(circle at 34% 28%,#f6dcae,#d9ad6c 46%,#a8793a 78%,#7d5524);box-shadow:inset 0 2px 1px rgba(255,244,214,.8),inset 0 -3px 4px rgba(70,40,12,.55),0 0 0 3px rgba(125,85,36,.5),0 22px 26px -12px rgba(0,0,0,.8);
  transform:translateZ(70px) rotate(10deg) scale(1);transition:transform 1s cubic-bezier(.2,1.5,.35,1) 1.2s,opacity .4s 1.2s}

/* ---------- Herkunft: Kompass über einem Bild des Hauses, Ringe bei 10, 50 und 100 km; links die Kilometer gross und ein Wegweiser mit allen Orten ---------- */
@media (min-width:901px){.hk{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center}}
.hk__grund{opacity:0;transition:opacity 1.6s var(--e1) .2s}
.hk.da .hk__grund,.still .hk__grund{opacity:1}
.hk__ringe circle{stroke-opacity:.5}
.hk__ringe circle:last-child{stroke-opacity:.8;stroke-width:1.4}
.hk__ringnamen text{font-family:var(--mono);font-size:12px;letter-spacing:.12em;fill:var(--gold2);opacity:0;transition:opacity 1s;transition-delay:calc(1.4s + var(--i) * 170ms)}
.hk.da .hk__ringnamen text,.still .hk__ringnamen text{opacity:.85}
.hk__nord{font-family:var(--mono);font-size:13px;letter-spacing:.1em;fill:var(--gold2);opacity:.8}
.hk__weg{stroke-opacity:.5}
.hk__okm{font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:.1em;fill:var(--kerze);opacity:0;transition:opacity .4s}
.hk__o.an .hk__okm{opacity:1}
.hk__t{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 clamp(16px,2vw,30px);align-items:end}
.hk__km{grid-column:1/-1;display:flex;align-items:flex-end;gap:10px;margin-bottom:clamp(6px,1vw,14px);color:var(--kerze)}
.hk__km b{font-family:var(--titel);font-weight:700;font-size:clamp(4.4rem,9.6vw,9rem);line-height:.8;letter-spacing:-.02em;color:var(--kerze)}
.hk__km i{font-family:var(--titel);font-style:normal;font-weight:700;font-size:clamp(1.5rem,2.6vw,2.5rem);line-height:1;padding-bottom:.08em}
.hk__km em{font-family:var(--mono);font-style:normal;font-size:11px;line-height:1.5;letter-spacing:.15em;text-transform:uppercase;color:var(--gold2);padding:0 0 .5em 8px;border-left:1px solid rgba(210,179,132,.4);margin-left:6px}
.hk__t>b{grid-column:1/-1;margin-top:clamp(10px,1.2vw,18px);font-size:clamp(2rem,3.6vw,3.4rem)}
.hk__t p{grid-column:1/-1;margin-top:12px;max-width:36ch;font-family:var(--titel);font-size:clamp(1.05rem,1.35vw,1.28rem);line-height:1.45}
.hk__texte{min-height:clamp(250px,25vw,340px);align-items:start}
.hk__weiser{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(10px,1.2vw,18px);margin-top:clamp(20px,2.4vw,34px);padding:clamp(8px,.8vw,12px) clamp(14px,1.5vw,22px);border:0;border-radius:22px;background:var(--platte);
  box-shadow:inset 0 1px 0 rgba(255,228,196,.32),inset 0 0 0 1px rgba(210,179,132,.4),inset 0 -2px 0 rgba(0,0,0,.45),0 30px 40px -26px rgba(0,0,0,.95)}
.hk__weiser button{display:grid;grid-template-columns:auto minmax(12px,1fr) auto;align-items:baseline;gap:8px;padding:11px 0 10px;font-size:clamp(.98rem,1.12vw,1.1rem);color:var(--creme);opacity:.62;text-align:left;border-bottom:1px solid rgba(210,179,132,.16)}
.hk__weiser button:nth-last-child(-n+2){border-bottom:0}
.hk__weiser button::after{display:none}
.hk__weiser button i{height:1px;background:repeating-linear-gradient(90deg,rgba(210,179,132,.5) 0 2px,transparent 2px 7px);transform:translateY(-4px)}
.hk__weiser button em{font-family:var(--mono);font-style:normal;font-weight:400;font-size:11.5px;letter-spacing:.1em;color:var(--gold2);white-space:nowrap}
.hk__weiser button[aria-pressed="true"]{opacity:1;color:var(--licht)}
.hk__weiser button[aria-pressed="true"] em{color:var(--kerze)}
.hk__weiser button span{transition:transform .5s var(--e1)}
.hk__weiser button[aria-pressed="true"] span{transform:translateX(5px)}
.hk__fuss{max-width:86ch;margin:clamp(22px,2.6vw,38px) auto 0;font-size:.95rem;text-align:center}
@media (max-width:900px){.hk__texte{min-height:0}.hk__weiser{grid-template-columns:minmax(0,1fr)}.hk__weiser button:nth-last-child(2){border-bottom:1px solid rgba(210,179,132,.16)}}


/* ---------- Gastgeber: eine helle Bildkarte, der Titel steht gross hinter der Familie (das Weiss des Fotos geht im Blatt auf), daneben der Brief ---------- */
.gg2{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(30px,5.2vw,92px);align-items:center}
.gg2__karte{position:relative;container-type:inline-size;aspect-ratio:1/1.02;overflow:hidden;isolation:isolate;border-radius:clamp(22px,2.4vw,36px);background:#fff;
  box-shadow:0 0 0 1px rgba(109,67,31,.28),0 0 0 clamp(7px,.8vw,11px) var(--blatt),0 0 0 calc(clamp(7px,.8vw,11px) + 1px) rgba(109,67,31,.4),0 60px 70px -40px rgba(var(--ld),.85)}
.gg2__titel{position:absolute;left:0;right:0;top:6.5cqi;margin:0;text-align:center;font-family:var(--titel);font-weight:700;font-size:17.6cqi;line-height:.94;letter-spacing:-.015em;color:var(--tinte)}
.gg2__titel span{display:block;overflow:hidden;padding-bottom:.08em}
.gg2__titel i{display:block;font-style:normal;transform:translateY(108%);transition:transform 1.5s var(--e3)}
.gg2__titel span+span i{transition-delay:.14s}
.gg2__titel .gold{color:var(--balken)}
.gg2__foto{position:absolute;left:0;right:0;bottom:0;transform:translateY(14%);opacity:0;transition:transform 1.7s var(--e3) .35s,opacity .9s var(--e2) .35s}
.gg2__foto img{display:block;width:100%;height:auto}
.gg2__nachweis{position:absolute;left:0;right:0;bottom:0;margin:0;padding:34px 18px 12px;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(20,10,4,.72))}
.gg2__karte.da .gg2__titel i,.still .gg2__titel i{transform:none}
.gg2__karte.da .gg2__foto,.still .gg2__foto{transform:none;opacity:1}
.gg2__brief .kapitel{color:var(--balken)}
.gg2__gross{font-family:var(--titel);font-weight:700;font-size:clamp(1.5rem,2.5vw,2.4rem);line-height:1.16;max-width:20ch}
.gg2__text{margin-top:clamp(18px,2vw,28px);max-width:54ch}
.gg2__text p+p{margin-top:12px}
.gg2__fuss{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 20px;margin-top:clamp(22px,2.6vw,36px);padding-top:clamp(18px,2vw,26px);border-top:3px double rgba(var(--ld),.3)}
.gg2__gruss{font-family:var(--titel);font-weight:700;font-size:clamp(1.9rem,3vw,2.8rem);line-height:1;color:var(--balken)}
.gg2__fuss svg{grid-row:1/3;grid-column:2;width:clamp(46px,4.4vw,62px);height:auto;color:var(--gold)}
.gg2__hin{font-size:.98rem;opacity:.8}
@media (max-width:900px){.gg2{grid-template-columns:minmax(0,1fr)}.gg2__nachweis{font-size:9px;letter-spacing:.08em}}

/* ---------- Offene Stellen: jede Stelle eine Platte mit Knauf und Zeichen, sie klappen nacheinander auf ---------- */
.stp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.5vw,22px);perspective:1300px}
.stp__p{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(14px,1.8vw,26px);padding:clamp(20px,2.2vw,34px) clamp(20px,2.4vw,36px);border-radius:26px;color:var(--creme);background:var(--platte);
  box-shadow:inset 0 1px 0 rgba(255,228,196,.32),inset 0 0 0 1px rgba(210,179,132,.4),inset 0 -2px 0 rgba(0,0,0,.45),0 30px 40px -26px rgba(0,0,0,.95)}
.stp__p .gz__z{grid-row:auto;width:clamp(56px,5vw,76px)}
.stp__p>b{font-family:var(--titel);font-weight:700;font-size:clamp(1.5rem,2.5vw,2.4rem);line-height:1.08;hyphens:auto;overflow-wrap:anywhere}
.stp__p>b small{display:block;margin-top:8px;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold2)}
.stp__k{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold2)}
.stp__k i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--creme);box-shadow:inset 0 0 0 1px rgba(210,179,132,.55);transition:transform .7s var(--e1),background-color .4s,color .4s}
.stp__k i svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.4}
.stp__p.da{transition:transform .6s var(--e2),box-shadow .5s var(--e2)}
@media (hover:hover){.stp__p.da:hover{transform:translateY(-7px);box-shadow:inset 0 1px 0 rgba(255,228,196,.4),inset 0 0 0 1px rgba(210,179,132,.8),inset 0 -2px 0 rgba(0,0,0,.45),0 40px 40px -24px #000}
  .stp__p:hover .stp__k i{transform:rotate(45deg);background:var(--creme);color:var(--tinte)}.stp__p:hover .gz__z{transform:rotate(-10deg) scale(1.06)}}
.stp__p:focus-visible{outline:2px solid var(--kerze);outline-offset:4px}
.stp__fuss{max-width:70ch;margin:clamp(22px,2.6vw,38px) auto 0;text-align:center}
@media (max-width:900px){.stp{grid-template-columns:minmax(0,1fr)}.stp__k{font-size:0;gap:0}}
.gg2__foto img{transform:scale(1.07);transform-origin:50% 100%}
.zettelstapel>*{min-width:0}
@media (max-width:900px){
  .schicht>figure .kerbe{white-space:normal;max-width:94%;font-size:.74rem;line-height:1.15;padding:6px 10px 5px 8px;--e:11px}
}
/* Kompass: das Bild liegt als eigene Ebene unter der Zeichnung (genau im äusseren Ring), damit die bewegten Linien es nicht neu zeichnen lassen */
.hk__karte{position:relative}
.hk__karte .hk__grund{position:absolute;left:16.667%;top:12.366%;width:66.667%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;pointer-events:none}
.hk__svg{position:relative}

/* ---------- «Was führt Sie zu uns?»: Titel, Bild und Antwort passen zusammen auf einen Bildschirm (das Bild richtet sich nach der Fensterhöhe) ---------- */
@media (min-width:901px){
  .rkf{--bw:min(62vw,1000px,max(360px,(100svh - 312px - 5vw) * 1.702))}
  .rk__titel{font-size:clamp(1.7rem,3vw,2.8rem)}
  .rk__namen{margin-top:clamp(8px,1vw,14px)}
  .rk__namen button{padding:6px 2px 8px;font-size:clamp(1rem,1.3vw,1.3rem)}
  .rk{margin-top:clamp(14px,1.6vw,24px);padding-block:10px clamp(16px,1.8vw,26px)}
  .rk__text{margin-top:clamp(14px,1.6vw,24px)}
  .rk__text h3.d2{font-size:clamp(1.45rem,2.3vw,2.2rem)}
  .rk__text .lead{margin-top:8px;font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.45}
  .rk__text .knoepfe{margin-top:clamp(12px,1.4vw,20px)}
}
.gz__p b,.stp__p>b{-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5;hyphenate-limit-chars:12 5 5}

/* ---------- DURCHGANG 09.10.2026, 19 Uhr (Roberts Bildschirmfotos) ---------- */
/* Kein Bild kommt mehr mit der Maus nach vorn (Robert: «niemals wieder benutzen»): die beiden Regeln für .schicht und .polas--drei sind gelöscht. */
/* Abschluss jeder Seite: Frage und Knöpfe mittig */
.ausklang .wrap{flex-direction:column;justify-content:center;text-align:center;gap:clamp(18px,2vw,28px)}
.ausklang .knoepfe{justify-content:center}
/* Bildfeld: drei Fotos füllen die Spalte ganz, eines breit oben, zwei darunter */
.mos{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(10px,1.1vw,16px);height:100%;min-height:clamp(420px,44vw,700px)}
.mos>figure{display:block;margin:0;min-height:0;height:100%}
.mos>figure:first-child{grid-column:1/-1}
.mos .frei__b{width:100%;height:100%;border-radius:clamp(18px,1.9vw,28px)}
@media (max-width:900px){.mos{height:auto;min-height:0;aspect-ratio:1/1.06;margin-top:30px}}
.gz__p b:last-child{grid-row:1/3;align-self:center}
/* Schichtung: feine Goldlinie aussen um den Rand, damit sich die Bilder vom Grund abheben */
.schicht .frei__b{box-shadow:0 0 0 clamp(4px,.45vw,7px) var(--rand-f,var(--russ)),0 0 0 calc(clamp(4px,.45vw,7px) + 1.5px) rgba(210,179,132,.62),0 36px 46px -24px rgba(0,0,0,.95)}
.hell .schicht .frei__b{box-shadow:0 0 0 clamp(4px,.45vw,7px) var(--rand-f),0 0 0 calc(clamp(4px,.45vw,7px) + 1px) rgba(109,67,31,.38),0 34px 44px -26px rgba(var(--ld),.72)}

/* ---------- Gutscheine (Fassung 15): breites Bild, darüber liegt unten eine Platte im Holz der Leiste mit dem Gourmetaufenthalt (ohne Karte im Raum) ---------- */
.gpl__bild{box-shadow:inset 0 0 0 1px rgba(var(--lh),.16),0 50px 60px -40px #000}
.gpl{position:relative;z-index:2;width:min(calc(100% - 2 * clamp(12px,4vw,70px)),1180px);margin:clamp(-96px,-6.4vw,-44px) auto 0;padding:clamp(20px,2.4vw,36px) clamp(22px,3vw,48px) clamp(18px,2.2vw,32px);border-radius:28px;color:var(--creme);background:var(--platte);
  box-shadow:inset 0 1px 0 rgba(255,228,196,.32),inset 0 0 0 1px rgba(210,179,132,.45),inset 0 -2px 0 rgba(0,0,0,.45),0 34px 44px -24px rgba(0,0,0,.95)}
.gpl__kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 30px;padding-bottom:clamp(14px,1.6vw,22px);border-bottom:3px double rgba(210,179,132,.42)}
.gpl__kopf h3{font-family:var(--titel);font-weight:700;font-size:clamp(1.8rem,3.2vw,3rem);line-height:1;color:var(--licht)}
.gpl__kopf .mono{margin-top:10px;color:var(--gold2)}
.gpl__preis{font-family:var(--titel);font-weight:700;font-size:clamp(1.35rem,2.2vw,2.1rem);line-height:1.1;color:var(--kerze);white-space:nowrap}
.gpl__zeilen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.gpl__zeilen li{padding:clamp(14px,1.6vw,22px) clamp(14px,2vw,30px) 0;font-family:var(--titel);font-weight:700;font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.32;opacity:0;transform:translateY(14px);transition:opacity .7s var(--e2),transform 1s var(--e1);transition-delay:calc(.35s + var(--n,0) * 140ms)}
.gpl__zeilen li:first-child{padding-left:0}
.gpl__zeilen li+li{border-left:1px solid rgba(210,179,132,.28)}
.gpl.da .gpl__zeilen li,.still .gpl__zeilen li{opacity:1;transform:none}
@media (max-width:900px){.gpl{width:calc(100% - 20px);margin-top:-26px;border-radius:22px}.gpl__zeilen{grid-template-columns:minmax(0,1fr)}.gpl__zeilen li,.gpl__zeilen li:first-child{padding:12px 0 0}.gpl__zeilen li+li{border-left:0;border-top:1px solid rgba(210,179,132,.2);margin-top:12px}.gpl__preis{white-space:normal}}
.ausklang .wrap{gap:clamp(30px,3.4vw,48px)}
.karte__fuss{margin-top:clamp(44px,4.8vw,72px)}
/* Bildfeld: feine Goldlinie um jedes Foto, damit es sich vom dunklen Grund abhebt */
.mos .frei__b{box-shadow:0 0 0 1.5px rgba(210,179,132,.6),0 0 0 6px rgba(0,0,0,.22),0 34px 44px -26px #000}
.hell .mos .frei__b{box-shadow:0 0 0 1.5px rgba(109,67,31,.4),0 30px 44px -28px rgba(var(--ld),.7)}
/* Gutscheine auf hellem Grund (Abschnitt hebt sich vom dunklen Abschluss ab), der Knopf sitzt in der Platte: keine zweite Knopfreihe vor dem Abschluss */
#gutschein{padding-bottom:clamp(60px,6.6vw,104px)}
.hell .gpl__bild{box-shadow:inset 0 0 0 1px rgba(var(--ld),.16),0 50px 60px -40px rgba(var(--ld),.8)}
.hell .gpl{box-shadow:inset 0 1px 0 rgba(255,228,196,.32),inset 0 0 0 1px rgba(210,179,132,.45),inset 0 -2px 0 rgba(0,0,0,.45),0 34px 44px -24px rgba(42,26,14,.75)}
.gpl__fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 30px;margin-top:clamp(18px,2vw,28px);padding-top:clamp(16px,1.8vw,24px);border-top:1px solid rgba(210,179,132,.28)}
.gpl__fuss p{font-family:var(--titel);font-size:clamp(1rem,1.25vw,1.2rem);color:var(--creme)}
.gpl__fuss p a{font-weight:700;color:var(--licht);white-space:nowrap;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ---------- Angaben als Kasten (Stuben, Feste): Platte im Holz der Leiste mit feinem Goldrahmen innen, vier Felder durch Goldlinien getrennt ---------- */
.ort .koord--4{position:relative;row-gap:0;margin-top:clamp(20px,2.4vw,36px);padding:clamp(9px,.9vw,13px);border-radius:26px;background:var(--platte);
  box-shadow:inset 0 1px 0 rgba(255,228,196,.32),inset 0 0 0 1px rgba(210,179,132,.5),inset 0 -2px 0 rgba(0,0,0,.45),0 36px 46px -26px rgba(0,0,0,.9)}
.hell .ort .koord--4{box-shadow:inset 0 1px 0 rgba(255,228,196,.32),inset 0 0 0 1px rgba(210,179,132,.5),inset 0 -2px 0 rgba(0,0,0,.45),0 36px 46px -26px rgba(42,26,14,.75)}
.ort .koord--4::before{content:'';position:absolute;inset:clamp(6px,.6vw,9px);border:1px solid rgba(210,179,132,.42);border-radius:19px;pointer-events:none}
.ort .koord--4::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;transform:rotate(45deg);background:var(--gold2);box-shadow:0 0 0 5px #3d2015}
.ort .koord--4 div,.ort .koord--4 div+div,.ort .koord--4 div:nth-child(3){padding:clamp(18px,2.1vw,32px) clamp(18px,2.3vw,36px);border-left:0}
.ort .koord--4 div:nth-child(even){border-left:1px solid rgba(210,179,132,.3)}
.ort .koord--4 div:nth-child(n+3){border-top:1px solid rgba(210,179,132,.3)}
.ort .koord--4 dt,.hell .ort .koord--4 dt{color:var(--gold2)}
.ort .koord--4 dd,.hell .ort .koord--4 dd,.ort--dunkel .koord--4 dd{margin-top:9px;color:var(--creme)}
@media (max-width:900px){.ort .koord--4::after{display:none}.ort .koord--4 div:nth-child(even){border-left:0}.ort .koord--4 div+div,.ort .koord--4 div:nth-child(3){border-top:1px solid rgba(210,179,132,.3)}}

/* ---------- Herkunft als Instrument (Fassung 16): Messingring, Nadel schwingt zum gewählten Ort, links ein Kasten mit Angaben und Wegweiser ---------- */
.hk__rand{fill:none;stroke:url(#hk-messing);stroke-width:24}
.hk__randlinie{fill:none;stroke:#1a0d05;stroke-opacity:.7;stroke-width:1.2}
.hk--geraet .hk__ringe circle{transform:none;transition:none;stroke-opacity:.42}
.hk--geraet .hk__ringe circle:last-child{stroke-opacity:0}
.hk--geraet .hk__ticks line{stroke:var(--licht);stroke-opacity:.7;opacity:1;transition:none}
.hk__himmel text{font-family:var(--titel);font-weight:700;font-size:19px;fill:var(--licht)}
.hk--geraet .hk__karte{opacity:0;transform:translateY(40px) scale(.94) rotate(-14deg);transition:opacity .9s var(--e2),transform 1.6s var(--e3)}
.hk--geraet.da .hk__karte,.still .hk--geraet .hk__karte{opacity:1;transform:none}
.hk--geraet .hk__karte .hk__grund{left:18.095%;top:13.978%;width:63.81%;transition:opacity 1.2s var(--e1) .3s}
.hk__nadel{position:absolute;z-index:1;left:calc(50% - 2.381%);top:calc(50% - 33.602%);width:4.762%;height:53.763%;transform-origin:50% 62.5%;transform:rotate(-150deg);opacity:0;transition:transform 1.5s cubic-bezier(.3,1.45,.42,1),opacity .6s;will-change:transform;pointer-events:none}
.hk__nadel svg{display:block;width:100%;height:100%}
.hk.fertig .hk__nadel,.still .hk__nadel{opacity:1}
.hk.da:not(.fertig) .hk__nadel{transition:transform 2.4s cubic-bezier(.2,1.2,.3,1),opacity .6s}
.hk--geraet .hk__svg{z-index:2}
.hk__hof{fill:none;stroke:var(--licht);stroke-width:1.5;transform-box:fill-box;transform-origin:50% 50%;transform:scale(.4);opacity:0;transition:transform .7s var(--e1),opacity .4s}
.hk__o.an .hk__hof{transform:none;opacity:.9}
.hk--geraet .hk__punkt{transition-delay:calc(.5s + var(--i) * 90ms)}
.hk--geraet .hk__o text{transition-delay:calc(.8s + var(--i) * 90ms)}
.hk--geraet.fertig .hk__o *{transition-delay:0s}
.hk--geraet .hk__mitte{fill:#2a180a;stroke:url(#hk-messing);stroke-width:5}
.hk__kasten{position:relative;padding:clamp(22px,2.6vw,40px) clamp(22px,2.8vw,44px) clamp(16px,1.8vw,26px);border-radius:28px;color:var(--creme);background:var(--platte);
  box-shadow:inset 0 1px 0 rgba(255,228,196,.32),inset 0 0 0 1px rgba(210,179,132,.5),inset 0 -2px 0 rgba(0,0,0,.45),0 40px 50px -28px rgba(0,0,0,.95)}
.hk__kasten::before{content:'';position:absolute;inset:clamp(7px,.7vw,10px);border:1px solid rgba(210,179,132,.4);border-radius:20px;pointer-events:none}
.hk__kasten .hk__texte{min-height:clamp(230px,22vw,300px)}
.hk__kasten .hk__km b{font-size:clamp(3.6rem,7.4vw,7rem)}
.hk__kasten .hk__weiser{margin-top:clamp(14px,1.6vw,22px);padding:clamp(6px,.6vw,10px) 0 0;border-radius:0;background:none;box-shadow:none;border-top:3px double rgba(210,179,132,.42)}
@media (min-width:901px){.hk--geraet{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
@media (max-width:900px){.hk--geraet .hk__karte{margin-bottom:10px}}

/* ---------- Zu Gast waren hier schon: vier Bildkarten in einer Reihe, alle gleich hoch, sie kommen eine nach der anderen von links ---------- */
.gst__reihe{display:flex;align-items:flex-start;gap:clamp(12px,1.5vw,24px)}
.gst__k{flex:var(--f) 1 0;min-width:0;display:block}
.gst__b{position:relative;display:block;aspect-ratio:var(--q);overflow:hidden;border-radius:clamp(16px,1.8vw,26px);background:#120a04;box-shadow:0 0 0 1.5px rgba(210,179,132,.6),0 0 0 7px #2a180a,0 0 0 8px rgba(210,179,132,.3),0 40px 46px -28px #000}
.gst__b img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 2.2s var(--e1)}
.gst__k.da .gst__b img,.still .gst__b img{transform:none}
.gst__fakt{position:absolute;left:clamp(10px,1vw,14px);bottom:clamp(10px,1vw,14px);padding:8px 14px 7px;border-radius:999px;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte);background:linear-gradient(180deg,#fbf3e2,#e7d7c0 50%,#d0bb9c);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(109,67,31,.4),0 10px 16px -8px rgba(0,0,0,.8)}
.gst__t{padding:clamp(20px,2vw,28px) 4px 0}
.gst__t .mono{color:var(--gold2);font-size:10.5px;line-height:1.5}
.gst__t h3{margin-top:8px;font-family:var(--titel);font-weight:700;font-size:clamp(1.3rem,1.9vw,1.85rem);line-height:1.1;color:var(--licht)}
.gst__t p:not(.mono){margin-top:10px;max-width:38ch;font-size:clamp(.98rem,1.08vw,1.06rem);line-height:1.5}
.gst__t small{display:block;margin-top:8px;font-size:.86rem;opacity:.62}
[data-r="vonlinks"]{opacity:0;transform:translate3d(-90px,0,0) rotate(-2.5deg);transform-origin:0 100%;transition:opacity .7s var(--e2),transform 1.25s cubic-bezier(.2,1.1,.3,1);transition-delay:0s}
.gst__fuss{max-width:92ch;margin:clamp(26px,3vw,44px) auto 0;font-size:.86rem;text-align:center}
@media (max-width:900px){
  .gst__reihe{overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--rand) * -1);padding:10px var(--rand) 18px;scrollbar-width:none}
  .gst__reihe::-webkit-scrollbar{display:none}
  .gst__k{flex:none;width:calc(var(--f) * 62vw);scroll-snap-align:center}
}
.ort .koord--4::after{display:none}
@media (max-width:900px){.hk__kasten .hk__texte{min-height:0}}

/* ---------- Gäste wie in einer Galerie (Fassung 17): Messingrahmen mit hellem Passepartout, darunter ein graviertes Messingschild, über jedem Bild ein Lichtkegel ---------- */
.gst{overflow:hidden}
.gst__reihe{gap:clamp(20px,2.6vw,44px);padding-top:clamp(10px,1.4vw,22px)}
.gst__k{position:relative}
.gst__k::before{content:'';position:absolute;z-index:0;left:-14%;right:-14%;top:-9%;height:74%;background:radial-gradient(52% 58% at 50% 34%,rgba(243,205,148,.2),rgba(243,205,148,.06) 55%,transparent 74%);pointer-events:none}
.gst__b{z-index:1;box-sizing:border-box;border-radius:2px;overflow:visible;padding:clamp(12px,1.5vw,24px);border:clamp(8px,.9vw,13px) solid #b78f51;border-image:linear-gradient(135deg,#f8e2b6,#c39a57 24%,#6a451b 48%,#e3c283 70%,#8a5f2a 88%,#f0d6a2) 1;
  background:linear-gradient(180deg,#fdf8ee,#efe3cf);box-shadow:0 0 0 1px #1a0d05,inset 0 0 0 1px rgba(60,36,12,.55),inset 0 3px 8px rgba(42,26,14,.28),0 46px 50px -30px #000,0 14px 18px -10px rgba(0,0,0,.7)}
.gst__b img,.gst__k.da .gst__b img{transform:none;transition:none;box-shadow:0 0 0 1px rgba(42,26,14,.6),0 0 0 3px #fbf5ea,0 0 0 4px rgba(183,143,81,.8)}
.gst__schild{position:relative;z-index:1;width:fit-content;max-width:100%;margin:clamp(22px,2.4vw,34px) auto 0;padding:11px clamp(26px,2.6vw,38px) 10px;border-radius:3px;text-align:center;color:#2a180a;
  background:radial-gradient(circle at 11px 50%,#4a2f10 0 2.2px,rgba(255,240,205,.7) 2.4px 3px,transparent 3.4px),radial-gradient(circle at calc(100% - 11px) 50%,#4a2f10 0 2.2px,rgba(255,240,205,.7) 2.4px 3px,transparent 3.4px),linear-gradient(160deg,#f6dfae,#cba660 32%,#a67c3d 58%,#e8cb8c 84%,#b68c4c);
  box-shadow:inset 0 1px 0 rgba(255,250,230,.75),inset 0 -1px 0 rgba(60,35,10,.55),0 0 0 1px rgba(26,13,5,.7),0 10px 16px -8px #000}
.gst__schild h3{font-family:var(--titel);font-weight:700;font-size:clamp(1.02rem,1.3vw,1.3rem);line-height:1.12;letter-spacing:.015em;color:#2a180a;text-shadow:0 1px 0 rgba(255,245,215,.6)}
.gst__schild b{display:block;margin-top:5px;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#4a2f10}
.gst__t{position:relative;z-index:1;padding:clamp(14px,1.5vw,20px) 4px 0;text-align:center}
.gst__t .mono{margin-inline:auto;max-width:34ch}
.gst__t p:not(.mono){margin-inline:auto;max-width:36ch;font-family:var(--titel);font-size:clamp(1rem,1.12vw,1.1rem);line-height:1.5}
.gst__t small{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);opacity:.75}
@media (max-width:900px){.gst__k::before{display:none}.gst__reihe{gap:18px}}
@media (max-width:900px){.gst__schild{padding-inline:24px}.gst__schild h3{font-size:.98rem}}

/* Kompass leichter (Robert: «zu stark, zu künstlich mit dem Gold»): schmaler, matter Ring, feine Nadel, leise Striche; Zahlen links hell statt orange */
.hk__rand{stroke-width:9;opacity:.92}
.hk__randlinie{stroke-opacity:.5;stroke-width:.8}
.hk--geraet .hk__ticks line{stroke:var(--papier);stroke-opacity:.38}
.hk__himmel text{font-size:15px;fill:var(--papier);opacity:.78}
.hk--geraet .hk__ringe circle{stroke:var(--papier);stroke-opacity:.2}
.hk--geraet .hk__ringnamen text{fill:var(--papier);opacity:.6}
.hk--geraet .hk__mitte{stroke-width:2;fill:#24150a}
.hk--geraet .hk__z{color:#cdb78e;fill:#cdb78e}
.hk--geraet .hk__punkt{fill:var(--creme)}
.hk--geraet .hk__o.an .hk__punkt{fill:var(--licht)}
.hk--geraet .hk__okm{fill:var(--licht)}
.hk__kasten .hk__km,.hk__kasten .hk__km b{color:var(--creme)}
.hk__kasten .hk__km i{color:var(--creme);opacity:.9}
.hk__kasten .hk__weiser button[aria-pressed="true"] em{color:var(--licht)}

/* Gastgeber im selben Rahmen wie die Gäste: Messingrahmen, helles Passepartout, graviertes Schild darunter */
.gg2__rahmen{box-sizing:border-box;padding:clamp(14px,1.8vw,28px);border:clamp(9px,1vw,14px) solid #b78f51;border-image:linear-gradient(135deg,#f8e2b6,#c39a57 24%,#6a451b 48%,#e3c283 70%,#8a5f2a 88%,#f0d6a2) 1;background:linear-gradient(180deg,#fdf8ee,#efe3cf);
  box-shadow:0 0 0 1px #1a0d05,inset 0 0 0 1px rgba(60,36,12,.55),inset 0 3px 8px rgba(42,26,14,.28),0 56px 60px -34px rgba(42,26,14,.85),0 16px 20px -12px rgba(42,26,14,.6)}
.gg2__rahmen .gg2__karte{border-radius:0;box-shadow:0 0 0 1px rgba(42,26,14,.6),0 0 0 3px #fbf5ea,0 0 0 4px rgba(183,143,81,.8)}
.gg2__bild .gst__schild{margin-top:clamp(24px,2.6vw,38px)}
.gg2__bild .gst__schild h3{font-size:clamp(1.15rem,1.5vw,1.5rem)}
.gg2__foto-von{margin-top:12px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--balken);opacity:.8}

/* Gäste: Texte unter den Bildern grösser und heller, damit man sie gut lesen kann */
.gst__t .mono{font-size:11.5px;letter-spacing:.14em;line-height:1.6;color:#e6cf9f}
.gst__t p:not(.mono){margin-top:12px;max-width:34ch;font-size:clamp(1.12rem,1.32vw,1.3rem);line-height:1.5;color:#fff6e6}
.gst__t small{margin-top:12px;font-size:11px;letter-spacing:.12em;color:#e6cf9f;opacity:.95}

/* Kompass: Kilometer stehen in derselben Zeile wie der Name (nie auf dem Ring), ein feiner Faden führt vom Punkt zum Rand unter seinem Namen */
.hk--geraet .hk__okm{font-size:13px;letter-spacing:.08em;fill:var(--gold2);opacity:.75;transition:opacity .4s,fill .4s}
.hk--geraet .hk__o.an .hk__okm{fill:var(--licht);opacity:1}
.hk__faden{stroke:var(--papier);stroke-opacity:.22;stroke-width:1;stroke-dasharray:1 5;stroke-linecap:round;transition:stroke-opacity .4s}
.hk__o.an .hk__faden{stroke:var(--licht);stroke-opacity:.9;stroke-dasharray:none}
.hk--geraet.da .hk__o text{opacity:.72}
/* Gastgeber: das Zeichen des Hauses steht gross oben rechts neben der Anrede */
.gg2__brief{position:relative}
.gg2__zeichen{position:absolute;right:0;top:clamp(-18px,-1vw,-6px);width:clamp(84px,8vw,128px);height:auto;color:var(--gold)}
.gg2__fuss{grid-template-columns:minmax(0,1fr)}
@media (max-width:900px){.gg2__zeichen{width:64px;top:-6px}}

/* Gutschein-Platte: die drei Zeilen stehen mittig in ihrem Feld und sind grösser und heller */
.gpl__zeilen li,.gpl__zeilen li:first-child{display:grid;place-items:center;text-align:center;padding:clamp(18px,2vw,28px) clamp(14px,2vw,30px) clamp(4px,.6vw,8px);font-size:clamp(1.12rem,1.42vw,1.38rem);line-height:1.3;color:#fff6e6}
.gpl__zeilen{align-items:stretch}
/* Kompass: Platz links, damit kein Name unter den Kasten läuft */
@media (min-width:901px){.hk--geraet .hk__karte{margin-left:clamp(30px,5vw,90px)}}
.gpl__zeilen li,.gpl__zeilen li:first-child{padding-bottom:clamp(18px,2vw,28px)}
.gpl__fuss{margin-top:0}

/* ===== TEMPO (09.10.2026): Fenster-Fotos laden erst, wenn der Abschnitt naht, und werden weit weg nicht mitgezeichnet (siehe bilder.js) ===== */
.lader .bruch:not(.nah) .bruch__bild img{display:none}
.lader .bruch.weg .bruch__bild{visibility:hidden}
/* Butzen-Muster als fertige Kachel statt SVG im Stil (gleiches Bild): ein SVG-Muster über ganze Abschnitte muss der Browser bei jedem Neuzeichnen rechnen (Lehre Doldenhorn: lange Bilder beim Scrollen von 15 auf 0) */
.butzen{background-image:url("../img/butzen-07.png?v=c43612cd");background-size:56px 56px}
.fuss::before{background-image:url("../img/butzen-09.png?v=c1bc2af5");background-size:56px 56px}

/* Gastgeber: schwarzer Galerierahmen statt Messing (Robert 10.10.2026: «moderner, Oldschool-Vibe, aber nicht kitschig»).
   Mattschwarzes Holz mit feiner Kante, breites helles Passepartout mit Schrägschnitt, Schild auf der rotbraunen Platte des Hauses (Robert 10.10.2026). */
.gg2__rahmen{padding:clamp(26px,3.4vw,54px);border:clamp(10px,1.05vw,15px) solid #141110;border-image:none;border-radius:1px;
  background:#f7f2e9;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 5px 9px -5px rgba(20,14,10,.38),inset 0 -2px 5px -3px rgba(20,14,10,.18),0 0 0 1px #070605,0 1px 0 1px rgba(255,255,255,.04),0 40px 50px -30px rgba(26,16,8,.55),0 12px 18px -12px rgba(26,16,8,.45)}
.gg2__rahmen .gg2__karte{box-shadow:0 0 0 1px rgba(20,17,16,.22),0 0 0 4px #fbf8f2,0 0 0 5px rgba(20,17,16,.12),inset 0 1px 3px rgba(20,17,16,.12)}
.gg2__bild .gst__schild{--h:clamp(64px,4.9vw,76px);--kw:calc(var(--h) * 31 / 72);display:flex;flex-direction:column;justify-content:center;height:var(--h);padding:0 clamp(16px,1.8vw,26px);border-radius:0;color:var(--blatt);
  background:linear-gradient(rgba(255,226,186,.4),rgba(255,226,186,.4)) 0 calc(var(--h) * 5 / 72 - .5px)/100% 1px no-repeat,linear-gradient(rgba(255,226,186,.4),rgba(255,226,186,.4)) 0 calc(var(--h) * 67 / 72 - .5px)/100% 1px no-repeat,linear-gradient(180deg,#7a4b24,var(--balken) 55%,#613b1b);
  box-shadow:none;filter:drop-shadow(0 12px 10px rgba(42,26,14,.32)) drop-shadow(0 2px 2px rgba(42,26,14,.25))}
/* Klassische Schildform: an beiden Seiten gerundet mit kleiner Spitze, gravierte Linie läuft innen mit */
.gg2__bild .gst__schild::before,.gg2__bild .gst__schild::after{content:'';position:absolute;top:0;bottom:0;width:calc(var(--kw) + 1px);background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 72' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%237a4b24'/><stop offset='.55' stop-color='%236d431f'/><stop offset='1' stop-color='%23613b1b'/></linearGradient></defs><path fill='url(%23g)' d='M32,0 L20,0 C10,0 4,10 4,22 C4,29 2,33 0,36 C2,39 4,43 4,50 C4,62 10,72 20,72 L32,72 Z'/><path fill='none' stroke='%23ffe2ba' stroke-opacity='.4' stroke-width='1' vector-effect='non-scaling-stroke' d='M32,5 L20,5 C12.5,5 8.5,13 8.5,22 C8.5,29.5 6.6,33.5 5,36 C6.6,38.5 8.5,42.5 8.5,50 C8.5,59 12.5,67 20,67 L32,67'/></svg>") 0 0/100% 100% no-repeat}
.gg2__bild .gst__schild::before{left:calc(1px - var(--kw) - 1px)}
.gg2__bild .gst__schild::after{right:calc(1px - var(--kw) - 1px);transform:scaleX(-1)}
.gg2__bild .gst__schild h3{color:var(--blatt);text-shadow:0 1px 0 rgba(0,0,0,.35);letter-spacing:.03em}
.gg2__bild .gst__schild b{color:var(--licht);opacity:.85;letter-spacing:.24em}
.gg2__foto-von{color:var(--tinte);opacity:.55}

/* 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.3rem,2.9vw,2.85rem);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:15px;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:.95rem;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:15px;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.05rem,1.55vw,1.5rem);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:.95rem;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.6rem,2.4vw,2.3rem);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:11.5px;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.15rem,1.7vw,1.7rem);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:11.5px;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.1rem,1.35vw,1.4rem);line-height:1.2}
.fuss__ko-t small{display:block;margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--k-a)}
.fuss__ko-t em{display:block;margin-top:6px;font-style:normal;font-size:13.5px;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.5rem}.fuss__haus-t::before,.fuss__haus-t::after{display:none}.fuss__sl{gap:16px}}
.fuss--kette{--k-l:201,133,67;--k-t:var(--licht);--k-a:var(--kerze);--k-c1:#3b2513;--k-c2:var(--karte);--k-kn:linear-gradient(180deg,#fae3bf,#f3cd94 30%,#d9a066 60%,#a36a33);--k-kt:var(--tinte);--k-r:var(--r-l)}
.fuss--kette .fuss__z{height:clamp(58px,5.4vw,76px)}
/* 17.10.2026 Robert: «Den Text bitte mittig in den Abschnitt.» Der Satz steht jetzt mittig zwischen der Doppellinie am Zeichen und der Linie darunter (oben fehlt die halbe Zeichenhöhe, darum oben ein Viertel weniger, unten ein Viertel mehr). */
.fuss--kette .fuss__inschrift{padding-top:calc(clamp(20px,2.4vw,32px) - clamp(14.5px,1.35vw,19px) - 1px);padding-bottom:calc(clamp(20px,2.4vw,32px) + clamp(14.5px,1.35vw,19px) + 1px)}

/* ---------- 15.10.2026: «Tisch reservieren» oben links raus; Willkommen mit grösseren Bildern rechts ---------- */
@media (min-width:1121px){.paar--bildgross{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:clamp(40px,4.6vw,80px)}}

/* ---------- 15.10.2026: Stuben-Kachel der Startseite als Haus im Schnitt (Giebel mit Zeichen, zwei Stockwerke, Balken, Karte mit Punktlinie) ---------- */
.hs{position:relative;margin-top:clamp(6px,1vw,14px)}
.hs__giebel{position:relative;height:clamp(46px,4.4vw,64px);margin:0 clamp(10px,1.2vw,18px) -1px}
.hs__giebel svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hs__giebel path{fill:none;stroke:var(--gold2);stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.75}
.hs__giebel path+path{opacity:.35}
.hs__zeichen{position:absolute;left:50%;top:0;translate:-50% -46%;display:grid;place-items:center;width:clamp(50px,4.6vw,64px);aspect-ratio:1;border-radius:50%;background:var(--platte);
  box-shadow:inset 0 0 0 1px rgba(210,179,132,.55),inset 0 1px 0 rgba(255,228,196,.3),0 10px 18px -8px rgba(0,0,0,.8);color:var(--gold2)}
.hs__zeichen svg{width:62%;height:auto}
.hs__haus{position:relative;padding:clamp(26px,2.8vw,42px) clamp(24px,2.8vw,46px) clamp(22px,2.4vw,34px);border-radius:8px 8px 26px 26px;background:var(--platte);color:var(--creme);
  box-shadow:inset 0 1px 0 rgba(255,228,196,.32),inset 0 0 0 1px rgba(210,179,132,.45),inset 0 -2px 0 rgba(0,0,0,.45),0 2px 0 #150905,0 36px 46px -26px rgba(0,0,0,.9)}
.hs__stock{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:clamp(14px,2vw,30px);align-items:baseline}
.hs__k{font-family:var(--mono);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold2)}
.hs__n{margin:0;text-wrap:balance;font-family:var(--titel);font-weight:700;font-size:clamp(1.25rem,1.75vw,1.75rem);line-height:1.18}
.hs__n b{font-weight:700}
.hs__balken{position:relative;height:7px;margin:clamp(18px,2vw,28px) 0;border-block:1px solid rgba(210,179,132,.42)}
.hs__balken::before,.hs__balken::after{content:'';position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;transform:rotate(45deg);background:var(--gold2)}
.hs__balken::before{left:-3px}.hs__balken::after{right:-3px}
.hs__karte{margin-top:clamp(22px,2.4vw,34px);padding:clamp(14px,1.5vw,20px) clamp(16px,1.8vw,26px);border-radius:16px;background:rgba(0,0,0,.24);box-shadow:inset 0 1px 3px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,228,196,.1)}
.hs__karte p{margin:0;display:flex;align-items:baseline;gap:12px}
.hs__karte p+p{margin-top:10px}
.hs__karte span{font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold2);white-space:nowrap}
.hs__karte i{flex:1;min-width:20px;border-bottom:1px dotted rgba(210,179,132,.5);translate:0 -4px}
.hs__karte b{font-family:var(--titel);font-weight:700;font-size:clamp(1.05rem,1.3vw,1.3rem);white-space:nowrap}
@media (max-width:900px){.hs__stock{grid-template-columns:minmax(0,1fr);gap:8px}.hs__karte span{white-space:normal}}

/* ---------- 15.10.2026: Sprachwahl oben links auf der Platte der Eck-Knöpfe: «DE» mit Pfeil, Liste klappt darunter auf; übrige Sprachen folgen nach der Übersetzung ---------- */
.sprache{padding:0;overflow:visible;cursor:pointer}
.sprache summary{display:flex;align-items:center;gap:10px;height:100%;padding:0 20px 0 22px;list-style:none;cursor:pointer}
.sprache summary::-webkit-details-marker{display:none}
.sprache summary svg{transition:transform .4s var(--e2)}
.sprache[open] summary svg{transform:rotate(180deg)}
.sprache__liste{position:absolute;left:0;top:calc(100% + 10px);min-width:190px;margin:0;padding:8px;list-style:none;border-radius:20px;background:var(--platte);
  box-shadow:inset 0 1px 0 rgba(255,228,196,.32),inset 0 0 0 1px rgba(210,179,132,.45),0 24px 34px -18px rgba(0,0,0,.85)}
.sprache__liste a,.sprache__liste span{display:flex;align-items:baseline;gap:14px;padding:10px 14px;border-radius:12px;font-family:var(--sans,inherit);font-size:14px;letter-spacing:0;text-transform:none;color:rgba(247,236,220,.55)}
.sprache__liste b{min-width:1.8em;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;color:var(--gold2)}
.sprache__liste a[aria-current="true"]{color:var(--creme);background:rgba(0,0,0,.22)}
.sprache__liste span{cursor:default}

/* 15.10.2026, Nachtrag: Sprachwahl so gross wie «Zimmer buchen», drei Sprachen sichtbar (DE, EN, FR nach den Gästen im Berner Oberland), Pfeil klappt alle sechs auf */
.glanz--r,.sprache{min-width:204px;justify-content:center}
.sprache summary{justify-content:center;gap:14px;padding:0 20px}
.sprache__drei{display:inline-flex;align-items:center;gap:8px}
.sprache__drei b{font-weight:500;color:var(--creme);box-shadow:inset 0 -1px 0 var(--gold2);padding:5px 1px}
.sprache__drei span{color:rgba(247,236,220,.5)}
.sprache__drei i{font-style:normal;opacity:.35}
.sprache summary>svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.6;opacity:.8}
.sprache__liste{min-width:100%}

/* ZIMMER ALTAR (15.10.2026, Robert: Variante 19, «alle Bilder schliessen oben und unten gleich ab»), zaltar() in bau.py
   links zwei Bilder übereinander, Mitte und rechts je ein hohes; Oberkante und Unterkante aller Bilder auf einer Linie, Namen in einer Zeile darunter */
.zal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);gap:clamp(14px,1.8vw,28px);margin-top:clamp(34px,4.4vw,70px)}
.zal__sp{display:flex;flex-direction:column;min-width:0}
.zal__f{height:clamp(520px,46vw,760px);display:flex;flex-direction:column;min-height:0}
.zal__b{position:relative;display:block;flex:1 1 0;min-height:0;overflow:hidden;border-radius:var(--r-l);background:var(--leinen)}
.zal__b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--e1)}
@media (hover:hover){.zal__b:hover img{transform:scale(1.05)}}
.zal__n{display:block;padding-top:14px;color:inherit;text-decoration:none}
.zal__f--zwei .zal__n{padding:12px 0 clamp(18px,2vw,28px)}
.zal__n b{display:block;font:700 clamp(1.25rem,1.7vw,1.7rem)/1.1 var(--titel);color:var(--tinte)}
.zal__n small{display:block;margin-top:6px;font:400 .92rem/1.4 var(--sans);color:rgba(42,26,14,.66)}
.zal__n--m{text-align:center}.zal__n--m b{font-size:clamp(1.6rem,2.5vw,2.4rem)}
@media (max-width:900px){
  .zal{grid-template-columns:minmax(0,1fr)}
  .zal__f{height:auto}.zal__b{flex:none;aspect-ratio:4/3}
  .zal__n--m{text-align:left}
}

/* SCHILD STUBEN OFFEN (15.10.2026, Robert zum hängenden Schild neben «Kommen Sie herein.»: «sieht ziemlich scheisse aus»)
   kein Giebel, kein Medaillon an Schnüren, keine dunkle Platte: die Angaben stehen offen auf dem dunklen Grund, Zeilen mit feinen Linien, mittig zur Höhe der hellen Tafel */
.hs--offen{align-self:start;margin:clamp(18px,2vw,30px) 0 0}
.hs--offen .hs__z{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);gap:clamp(14px,2vw,30px);align-items:baseline;padding:clamp(14px,1.5vw,22px) 0;border-top:1px solid rgba(210,179,132,.28)}
.hs--offen .hs__z:last-child{border-bottom:1px solid rgba(210,179,132,.28)}
.hs--offen .hs__n{color:var(--creme);font-size:clamp(1.3rem,1.85vw,1.85rem);line-height:1.15}
.hs--offen .hs__z--klein{padding:clamp(11px,1.1vw,15px) 0}
.hs--offen .hs__w{margin:0;font-family:var(--titel);font-weight:700;font-size:clamp(1.05rem,1.3vw,1.3rem);color:var(--creme)}
@media (max-width:900px){.hs--offen .hs__z{grid-template-columns:minmax(0,1fr);gap:6px}}

/* ZIMMER RANDLOS (15.10.2026 abends, Robert: Nr. 12 aus der zweiten Runde), zrandlos() in bau.py
   vier Hochformate ohne Fuge und ohne Rundung von Rand zu Rand, Namen in einer Zeile darunter */
.zrl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(34px,4.4vw,70px)}
.zrl__z{display:block;min-width:0;color:inherit;text-decoration:none}
.zrl__b{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--leinen)}
.zrl__b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--e1)}
@media (hover:hover){.zrl__z:hover img{transform:scale(1.05)}}
.zrl__n{display:block;padding:16px clamp(12px,1.4vw,22px) 0}
.zrl__n b{display:block;font:700 clamp(1.2rem,1.6vw,1.6rem)/1.1 var(--titel);color:var(--tinte)}
.zrl__p{white-space:nowrap}
.zrl__n small{display:block;margin-top:6px;font:400 .9rem/1.4 var(--sans);color:rgba(42,26,14,.66)}
@media (max-width:900px){.zrl{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}.zrl__n small{font-size:.82rem}}

/* ---------- ZIMMER WINKEL (15.10.2026, zimmer.html, Nr. 1 aus runde-2.html): drei Bilder als Winkel um den Text ---------- */
.zimmer--winkel{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:clamp(14px,1.6vw,24px);align-items:stretch}
.zimmer--winkel.zimmer--um{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr)}
.zimmer--winkel .zimmer__b,.zimmer--winkel .zwinkel{grid-column:1/-1;grid-row:1/3;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}
.zwinkel>.frei:nth-child(1){grid-column:1/3;grid-row:1}
.zwinkel>.frei:nth-child(2){grid-column:3;grid-row:1}
.zwinkel>.frei:nth-child(3){grid-column:1;grid-row:2}
.zwinkel>.frei:nth-child(2) .frei__b,.zwinkel>.frei:nth-child(3) .frei__b{aspect-ratio:auto!important;height:100%}
.zimmer--um .zwinkel>.frei:nth-child(1){grid-column:2/4}
.zimmer--um .zwinkel>.frei:nth-child(2){grid-column:1}
.zimmer--um .zwinkel>.frei:nth-child(3){grid-column:3}
.zimmer--winkel .zimmer__t{grid-column:2/4;grid-row:2;align-self:center;position:relative;padding:clamp(8px,2.6vw,44px)}
.zimmer--winkel.zimmer--um .zimmer__t{grid-column:1/3}
/* 17.10.2026 Robert: Knöpfe bei Hochzeitsstube und Hymmelrich gingen nicht. Die alte Regel .zimmer--um .zimmer__b{order:2} legte das Bildgefüge über den Text. */
.zimmer--winkel .zimmer__b{order:0}
.zimmer--winkel .zimmer__t{z-index:1}
@media (max-width:900px){
  .zimmer--winkel,.zimmer--winkel.zimmer--um{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto}
  .zimmer--winkel .zimmer__b,.zimmer--winkel .zwinkel{grid-row:1/3}
  .zwinkel>.frei:nth-child(1),.zimmer--um .zwinkel>.frei:nth-child(1){grid-column:1/3;grid-row:1}
  .zwinkel>.frei:nth-child(2),.zimmer--um .zwinkel>.frei:nth-child(2){grid-column:1;grid-row:2}
  .zwinkel>.frei:nth-child(3),.zimmer--um .zwinkel>.frei:nth-child(3){grid-column:2;grid-row:2}
  .zwinkel>.frei:nth-child(2) .frei__b,.zwinkel>.frei:nth-child(3) .frei__b{aspect-ratio:4/3!important;height:auto}
  .zimmer--winkel .zimmer__t,.zimmer--winkel.zimmer--um .zimmer__t{grid-column:1/-1;grid-row:3;padding:10px 0 0}
}

/* ===== BEGRÜSSUNG BLOCK 17.10.2026: vier Fotos als geschlossener Block neben dem Text (Robert wählte Nr. 11, begruessung.html) ===== */
.rh-block{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr 1.15fr;gap:8px;align-self:stretch;min-height:clamp(560px,48vw,760px);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 40px 60px -34px rgba(var(--ld),.65);background:var(--papier)}
.rh-block > span{position:relative;overflow:hidden;background:var(--leinen)}
.rh-block img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rh-block__a{grid-area:1/1/3/2}.rh-block__b{grid-area:1/2/2/3}.rh-block__c{grid-area:2/2/3/3}.rh-block__d{grid-area:3/1/4/3}
@media (max-width:900px){.rh-block{min-height:520px}}

/* ===== BEGRÜSSUNG VON ALLEN SEITEN 17.10.2026 (Robert: «kannst du die Bilder so von allen Seiten reinkommen lassen. Beim Betreten des Abschnitts das erste Mal.»
   → «das muss noch flüssiger passieren» → am Scrollen: «viel zu schnell. Das muss richtig luxuriös, elegant und edel sein.»)
   Die vier Fotos des Blocks schweben je von ihrer Seite herein: Terrasse von links, Schild von oben, Gitter von rechts, Butzenscheiben von unten. Deckend von Anfang an,
   nach der Uhr (2,4 s, sanfter Anfang, ruhiges Ausgleiten, kein Nachfedern; 3,2 s war Robert eine Spur zu langsam), das Foto zoomt dabei in 3 s von 112 % auf 100 %. Kein Warten:
   jedes Foto startet, sobald es am unteren Rand auftaucht (10 % Vorlauf), nur beim ersten Mal, keine Staffel. bewegung.js setzt .rh-warte und .los je Foto.
   Ohne Skript, bei «weniger Bewegung», ?nomotion und im Druck steht alles. Der Text liegt darüber, das linke Foto schiebt sich unter ihm herein. ===== */
#ankommen{overflow-x:clip}
#ankommen .paar>div:first-child{position:relative;z-index:1}
.rh-block[data-seiten]{position:relative;isolation:isolate;overflow:visible;box-shadow:none;background:none;--rh-w:clamp(70px,8vw,140px);--rh-k:cubic-bezier(.33,0,.12,1)}
.rh-block[data-seiten]::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--papier);box-shadow:0 40px 60px -34px rgba(var(--ld),.65)}
.rh-block[data-seiten]>span{border-radius:0}
.rh-block[data-seiten]>.rh-block__a{border-top-left-radius:var(--r-xl)}
.rh-block[data-seiten]>.rh-block__b{border-top-right-radius:var(--r-xl)}
.rh-block[data-seiten]>.rh-block__d{border-bottom-left-radius:var(--r-xl);border-bottom-right-radius:var(--r-xl)}
@media (max-width:700px){.rh-block[data-seiten]{--rh-w:48px}}
.rh-warte>span{transition:transform 2.4s var(--rh-k)}
html:not(#a) .rh-warte>span img{transition:transform 3s var(--rh-k)}
.rh-warte>.rh-block__a:not(.los){transform:translate3d(calc(-1*var(--rh-w)),0,0)}
.rh-warte>.rh-block__b:not(.los){transform:translate3d(0,calc(-1*var(--rh-w)),0)}
.rh-warte>.rh-block__c:not(.los){transform:translate3d(var(--rh-w),0,0)}
.rh-warte>.rh-block__d:not(.los){transform:translate3d(0,var(--rh-w),0)}
html:not(#a) .rh-warte>span:not(.los) img{transform:scale(1.12)}
.rh-warte::before{transition:opacity 1.6s var(--e1)}
.rh-warte:not(.rh-gelandet)::before{opacity:0}
.rh-ruhe>span,html:not(#a) .rh-ruhe>span img,.rh-ruhe::before{transition:none!important}
@media (prefers-reduced-motion:reduce){.rh-block[data-seiten] *,.rh-block[data-seiten]::before{animation:none!important;transition:none!important;transform:none!important;opacity:1!important}}
@media print{.rh-block[data-seiten] *,.rh-block[data-seiten]::before{transition:none!important;transform:none!important;opacity:1!important}}

/* ---------- 17.10.2026 Robert: «bei allen Footern den Text mittig in den Abschnitt». Zeichen, Inschrift und Kontaktzeile stehen mit gleichem Abstand
   zur oberen Kante des Fusses und zum Band darunter (vorher oben 95, unten 54 px bei 1440). ---------- */
.fuss.fuss--kette,.naht--fuss+.fuss.fuss--kette{padding-top:clamp(48px,5.2vw,76px)}
.fuss--kette .fuss__band{margin-top:clamp(48px,5.2vw,76px)}

/* ---------- AUSKLANG 17.10.2026 (Robert: «luxuriöser, edler, eleganter, besser zum Stil passend»): breites Foto des Hauses im Goldfaden,
   unten darüber die Platte im Holz der Leiste wie Auftakt und Gutschein: Zeichen, Frage, Doppellinie, Knöpfe. Nichts bewegt sich ausser dem Erscheinen. ---------- */
.ausklang--edel{background:var(--russ);padding-block:clamp(56px,6.4vw,104px) clamp(64px,7vw,112px)}
.ausklang--edel .wrap{display:block;max-width:1240px;text-align:center}
.ak__bild{position:relative;margin:0;aspect-ratio:21/8;overflow:hidden;border-radius:var(--r-l);
  box-shadow:0 0 0 1px rgba(210,179,132,.5),0 0 0 7px var(--russ),0 0 0 8px rgba(210,179,132,.22),0 50px 60px -40px #000}
.ak__bild[data-r]{transform:none}
.ak__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ak__platte{position:relative;z-index:2;width:min(calc(100% - 2 * clamp(12px,4vw,70px)),760px);margin:clamp(-120px,-8vw,-48px) auto 0;
  padding:clamp(26px,2.8vw,40px) clamp(24px,3.4vw,56px) clamp(28px,3vw,44px);border-radius:28px;color:var(--creme);background:var(--platte);
  box-shadow:inset 0 1px 0 rgba(255,228,196,.32),inset 0 0 0 1px rgba(210,179,132,.45),inset 0 -2px 0 rgba(0,0,0,.45),0 34px 44px -24px rgba(0,0,0,.95)}
.ak__platte::before{content:"";position:absolute;inset:9px;border-radius:21px;border:1px solid rgba(210,179,132,.22);pointer-events:none}
.ak__z{display:block;width:auto;height:clamp(40px,3.4vw,52px);margin:0 auto;color:var(--gold2);filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.ausklang--edel .ak__platte p{margin:clamp(14px,1.4vw,20px) 0 0;padding-bottom:clamp(18px,2vw,28px);border-bottom:3px double rgba(210,179,132,.42);
  font-family:var(--titel);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.18;text-wrap:balance;color:var(--licht);text-shadow:0 -1px 0 rgba(0,0,0,.6)}
.ausklang--edel .knoepfe{justify-content:center;margin-top:clamp(20px,2.2vw,30px)}
@media (max-width:900px){.ak__bild{aspect-ratio:4/3}.ak__platte{width:calc(100% - 20px);margin-top:-34px;border-radius:22px}.ak__platte::before{border-radius:15px;inset:7px}}