/* Berghotel Gasterntal · Selden bei Kandersteg — Designstudie von Tasty Studios
   Farbwelt «Tal»: jeder Ton an einem Foto des Hauses oder des Tals gemessen (_recherche/farben.json).
   Bewegung nur über transform und opacity, nativer Scroll, ein bewegtes Element pro Blick (Regel 55). */

/* ---------- Schriften: Titel nach der DIN des Hauses (Barlow Semi Condensed), Lesetext Instrument Sans, kleine Marken DM Mono ---------- */
@font-face{font-family:'Barlow Semi';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlowsemi-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Semi';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlowsemi-500.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')}
/* Ersatzschriften in gleicher Laufweite, damit beim Laden nichts springt (gemessen mit _qa/laufweite.js) */
@font-face{font-family:'Barlow Ersatz';src:local('Arial Bold'),local('Arial-BoldMT'),local('Arial');size-adjust:82.5%;ascent-override:120%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:'Sans Ersatz';src:local('Arial');size-adjust:99%}

:root{
  --grund:#1d2224;     /* Talwand im Regen */
  --zwei:#2c3136;      /* Talwand, zweiter Ton */
  --tief:#14181a;      /* dunkelster Grund: Fuss, Menü */
  --karte:#262b2f;
  --tanne:#3b4423;     /* Tannen am Hang */
  --holz:#d6bb96;      /* helles Balkonholz: Linien, Betonung auf Dunkel */
  --papier:#e9ecec;    /* aufgehellt aus der Kander #c7cfd3 */
  --kander:#c7cfd3;
  --blatt:#f6f8f8;
  --tinte:#1a1f21;
  --laden:#c5000f;     /* Fensterläden in der Sonne: nur als Punkt */
  --ld:29,34,36; --lh:233,236,236;
  --titel:'Barlow Semi','Barlow Ersatz','DIN Alternate','Arial Narrow',sans-serif;
  --sans:'Instrument Sans','Sans Ersatz',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --e1:cubic-bezier(.16,1,.3,1); --e2:cubic-bezier(.32,.72,0,1); --e3:cubic-bezier(.19,1,.22,1);
  --rand:clamp(20px,4.6vw,76px); --max:1480px;
  --abschnitt:clamp(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(--grund);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{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(--holz);color:var(--tinte)}
:focus-visible{outline:2px solid var(--holz);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 (Fels, Schiefer, Papier) ---------- */
.fl{position:relative;padding-block:var(--abschnitt);overflow-x:clip}
.fl--zwei{background:var(--zwei)}
.fl--grund{background:var(--grund)}
.fl--tief{background:var(--tief)}
.hell{background:var(--papier);color:var(--tinte)}
/* Muster des Hauses, Ton in Ton: der Ausschnitt der Balkonbretter am Giebel */
.laube{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='92'%3E%3Cg fill='%23d6bb96' fill-opacity='.045'%3E%3Cpath d='M22 14 30 46 22 78 14 46z'/%3E%3Ccircle cx='22' cy='6' r='3'/%3E%3Ccircle cx='22' cy='86' r='3'/%3E%3C/g%3E%3C/svg%3E")}

/* ---------- Schrift ---------- */
h1,h2,h3,h4{font-family:var(--titel);font-weight:600;letter-spacing:-.012em}
.d1{font-size:clamp(2.9rem,6.7vw,6.3rem);line-height:1}
.d2{font-size:clamp(2.2rem,4.7vw,4.3rem);line-height:1.04}
.d2--lang{font-size:clamp(2.05rem,3.9vw,3.7rem);line-height:1.05}
.d3{font-size:clamp(1.6rem,2.5vw,2.3rem);line-height:1.1}
.d4{font-size:clamp(1.3rem,1.6vw,1.5rem);line-height:1.16}
/* Betonung über Farbe, nie kursiv */
.akz{color:var(--holz)}
.hell .akz{color:var(--tanne)}
.lead{font-size:clamp(1.12rem,1.5vw,1.34rem);line-height:1.52}
.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}
/* Schreibschrift des Hauses, aus seinen Unterlagen nachgezeichnet */
.hand{display:block;fill:currentColor;height:clamp(46px,5.2vw,74px);width:auto;max-width:100%}

/* Zeilen-Maske: grosse Überschriften fahren zeilenweise aus einem Schlitz hoch */
.z{display:block;overflow:hidden;padding-block:.08em .17em;margin-block:-.08em -.17em}
.z>span{display:block;transform:translateY(114%);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}
/* Aufgehen: Bilder kommen ruhig aus der Tiefe (blenden auf und wachsen leicht), danach wandert jedes Bild beim Scrollen sacht in seinem Rahmen */
[data-r="bild"],[data-r="schweb"],[data-r="rechts"],[data-r="links"]{transform:translateY(clamp(90px,12vw,170px)) scale(.95);transform-origin:50% 100%;transition:opacity 1.2s var(--e1),transform 1.7s var(--e3);transition-delay:calc(var(--i,0)*220ms)}
/* Reihen: Bilder steigen nacheinander von weit unten herauf und werden dabei grösser */
.reihe [data-r="schweb"]{transform:translateY(clamp(90px,12vw,170px)) scale(.95);transform-origin:50% 100%;transition:opacity 1.2s var(--e1),transform 1.7s var(--e3);transition-delay:calc(var(--i,0)*220ms)}
/* Hereinschieben: ein Bild schiebt sich frei von der Seite herein */
[data-r="bild"].da,[data-r="schweb"].da,.reihe [data-r="schweb"].da,[data-r="rechts"].da,[data-r="links"].da{opacity:1;transform:none}
/* Wandern: ein Stück bewegt sich beim Scrollen etwas schneller oder langsamer als die Seite (data-tempo) */
[data-tempo]{will-change:transform}
/* 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}

/* ---------- 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;letter-spacing:.17em;text-transform:uppercase;color:var(--tinte);
  background:linear-gradient(#f7f9f9,#e0e5e6 55%,#c7cfd3);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #9da2a3,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(#3f474c,#1d2224);box-shadow:inset 0 1px 0 #6f797f,inset 0 -2px 0 #0d1011}
.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,.55),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(#485056,#2c3136 55%,#1d2224);box-shadow:inset 0 1px 0 #7b858c,inset 0 -2px 0 #0d1011,0 12px 22px -12px rgba(29,34,36,.7)}
.kn--dunkel i{background:linear-gradient(#f7f9f9,#c7cfd3);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #9da2a3}
.kn--dunkel svg{stroke:var(--tinte)}
.kn--dunkel::after{background:linear-gradient(100deg,transparent,rgba(214,187,150,.3),transparent)}
.kn--klein{height:46px;padding:0 6px 0 20px;font-size:11px}
.kn--klein i{width:34px;height:34px}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* runde Tasten: Pfeile, Schliessen */
.rund{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--papier);background:linear-gradient(#485056,#1d2224);box-shadow:inset 0 1px 0 #7b858c,inset 0 -2px 0 #0d1011,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)}
/* Reiter und Auswahl: matt eingelassene Spur, flache helle Tasten, gewählt = dunkel mit feinem Holzrand */
.reiter{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:7px;border-radius:999px;background:rgba(var(--ld),.09);box-shadow:inset 0 1px 3px rgba(var(--ld),.28),inset 0 0 0 1px rgba(var(--ld),.08)}
.reiter button{height:50px;min-width:58px;padding:0 22px;border-radius:999px;font-family:var(--titel);font-weight:600;font-size:1.2rem;color:var(--tinte);background:linear-gradient(#fbfcfc,#e3e8e9);box-shadow:inset 0 0 0 1px rgba(var(--ld),.12),0 6px 12px -8px rgba(var(--ld),.55);transition:transform .4s var(--e2)}
.reiter button:hover{transform:translateY(-1px)}
.reiter button[aria-selected="true"],.reiter button[aria-pressed="true"]{color:var(--papier);background:linear-gradient(#485056,#1d2224);box-shadow:inset 0 0 0 1px var(--holz),0 8px 14px -8px rgba(var(--ld),.7)}
/* auf dunklem Grund umgekehrt: Spur dunkel, gewählt = hell */
.dunkel-reiter{background:rgba(0,0,0,.28);box-shadow:inset 0 1px 3px rgba(0,0,0,.55),inset 0 0 0 1px rgba(var(--lh),.1)}
.dunkel-reiter button{color:rgba(var(--lh),.86);background:none;box-shadow:none}
.dunkel-reiter button[aria-selected="true"]{color:var(--tinte);background:linear-gradient(#f7f9f9,#e0e5e6 55%,#c7cfd3);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #9da2a3,0 8px 14px -8px rgba(0,0,0,.7)}

/* ---------- 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;letter-spacing:.15em;text-transform:uppercase;
  background:linear-gradient(180deg,#3f474c,#1d2224) padding-box,
    conic-gradient(from calc(var(--ga) - var(--go)),transparent,var(--holz) var(--gp),#fff calc(var(--gp)*2),var(--kander) 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)}
.glanz.weg{transform:translateY(-190%)}
.punkt{flex:none;width:8px;height:8px;border-radius:50%;background:var(--laden)}
@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:#101314;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}.v-219 .rahmen__k{aspect-ratio:21/9}
/* Gleiten: das Bild ist etwas grösser als sein Rahmen und wandert darin (Lage und Grösse setzt main.js im Takt des Scrollens) */
.gleit{transform:scale(1.16);transition:none!important}
/* Eigene Grafik-Lage nur, solange das Bild in der Nähe des Fensters ist (main.js setzt .wach): sonst hält jedes der gut zwanzig Bilder dauerhaft
   eine grosse Lage im Grafikspeicher, auch weit ausserhalb des Bildes (09.10.2026: 83 Lagen, ~225 MB am Rechner). Bewegung bleibt gleich. */
.gleit.wach{will-change:transform;backface-visibility:hidden}
/* Einkerbung als Namensschild in der Bildecke: immer lesbar, immer gleich weit vom Rand. Nur auf grossen Bildern */
.kerbe{--f:var(--grund);--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:600;font-size:clamp(1.15rem,1.5vw,1.5rem);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--zwei .kerbe{--f:var(--zwei)}.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:#101314}
.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:600;font-size:clamp(1.3rem,1.7vw,1.6rem);line-height:1.15}
.frei small{display:block;margin-top:4px;font-size:1rem;opacity:.74}
button.frei{cursor:zoom-in;width:100%}

/* ---------- 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 28px 0 22px;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,#3f474c,#1f2426);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 16px 30px -18px rgba(0,0,0,.9)}
.nav__logo{display:flex;align-items:center}
.nav__logo svg{height:36px;width:auto;fill:var(--papier)}
.nav__links{display:flex;gap:clamp(16px,1.8vw,30px)}
.nav__links a{font-family:var(--mono);font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:rgba(var(--lh),.8);padding:10px 0;position:relative;transition:color .4s;white-space:nowrap}
.nav__links a::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--holz);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(#f7f9f9,#c7cfd3);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #9da2a3}
.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:600;font-size:clamp(2.3rem,10vw,3.6rem);line-height:1.16;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 von der Strasse aus. Titel oben links im Dunkel der Tannen, Leiste zum Buchen unten ---------- */
.auftakt{position:relative;min-height:100svh;display:flex;overflow:hidden;isolation:isolate;background:#0d1011}
.auftakt__haus{position:absolute;inset:-7% 0;z-index:-1;will-change:transform}
.auftakt__haus picture{display:block;width:100%;height:100%}
.auftakt__kopf{will-change:transform,opacity}
.auftakt__haus img{width:100%;height:100%;object-fit:cover;object-position:44% 52%;transform:scale(1.07);transition:transform 3.2s var(--e1)}
.auftakt.da .auftakt__haus img{transform:none}
.auftakt__t{width:100%;display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding-top:clamp(116px,15vh,170px);padding-bottom:clamp(40px,4.4vw,64px)}
/* weicher Hof hinter der Schrift: eigene Lage, blendet ein, sobald die Zeilen stehen (nie auf der rollenden Zeile selbst) */
.auftakt__kopf{position:relative;width:fit-content;max-width:100%}
.auftakt h1{position:relative;color:#f4f6f6}
.auftakt__hof{position:absolute;z-index:-1;left:-90px;top:-70px;right:-140px;bottom:-90px;background:radial-gradient(58% 60% at 40% 46%,rgba(8,12,10,.66),transparent 74%);opacity:0;transition:opacity 1.6s var(--e1) .5s;pointer-events:none}
.auftakt.da .auftakt__hof{opacity:1}
.auftakt__satz{margin-top:16px;max-width:34ch;font-size:clamp(1.12rem,1.5vw,1.34rem);line-height:1.5;color:#f4f6f6;text-shadow:0 1px 14px rgba(6,10,8,.95),0 0 30px rgba(6,10,8,.7)}
/* Leiste zum Buchen: runder heller Balken mit Tiefe. Ein feines Licht läuft um den Rand, ein Lichtstreifen zieht durch,
   die Felder kommen der Reihe nach und heben sich beim Darüberfahren. Als Erstes steht die Saison. */
.leiste{position:relative;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.05fr) minmax(0,1.05fr) minmax(0,1.3fr) auto;align-items:stretch;gap:4px;width:min(1180px,100%);padding:10px;border-radius:52px;border:1.5px solid transparent;color:var(--tinte);
  background:linear-gradient(#feffff,#eef1f2 44%,#d2d8da) padding-box,
    conic-gradient(from var(--ga),#fff,#c7cfd3 10%,var(--holz) 20%,#fff 29%,#9da2a3 46%,#fff 60%,var(--holz) 72%,#c7cfd3 86%,#fff) border-box;
  box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 #a7adaf,inset 0 -16px 20px -16px rgba(29,34,36,.26),0 3px 0 #7c8386,0 7px 0 rgba(13,16,17,.35),0 38px 56px -24px rgba(0,0,0,.95);
  animation:ga 8s linear infinite;animation-play-state:paused}
.auftakt.da .leiste{animation-play-state:running}
.leiste__glanz{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:3}
.leiste__glanz::after{content:'';position:absolute;top:0;bottom:0;left:-30%;width:20%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent);transform:translateX(-140%) skewX(-18deg)}
.leiste:hover .leiste__glanz::after{animation:streif2 1.5s var(--e1)}
@keyframes streif{from{transform:translateX(-140%) skewX(-18deg)}to{transform:translateX(720%) skewX(-18deg)}}
@keyframes streif2{from{transform:translateX(-140%) skewX(-18deg)}to{transform:translateX(720%) skewX(-18deg)}}
.leiste__z{position:relative;display:grid;gap:5px;align-content:center;justify-items:start;padding:13px 24px 12px;border-radius:40px;text-align:left;min-width:0;transition:transform .5s var(--e2),background-color .4s,box-shadow .4s}
.leiste__z+.leiste__z::before{content:'';position:absolute;left:-2.5px;top:22%;bottom:22%;width:1px;background:rgba(var(--ld),.16);transition:opacity .3s}
button.leiste__z:hover,button.leiste__z[aria-expanded="true"],.leiste__gaeste:hover{background-color:#fff;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(var(--ld),.08),0 12px 20px -12px rgba(29,34,36,.65);transform:translateY(-2px)}
button.leiste__z:hover::before,button.leiste__z:hover+.leiste__z::before,button.leiste__z[aria-expanded="true"]::before,button.leiste__z[aria-expanded="true"]+.leiste__z::before,.leiste__gaeste:hover::before{opacity:0}
.leiste.da>.leiste__z,.leiste.da>.kn{animation:kommt 1.1s var(--e1) backwards;animation-delay:calc(.35s + var(--k,0)*.11s)}
@keyframes kommt{from{opacity:0;transform:translateY(16px)}}
.leiste span,.feld span{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--tanne)}
.leiste b{font-family:var(--titel);font-weight:600;font-size:clamp(1.2rem,1.55vw,1.42rem);line-height:1.1;display:flex;align-items:center;gap:9px;white-space:nowrap}
.leiste .kn{margin:0 2px 0 8px;align-self:center;height:60px;padding-left:30px}
.leiste .kn i{width:46px;height:46px}
/* Gäste: zwei runde Tasten, die Zahl dazwischen */
.stufen{display:flex;align-items:center;gap:10px}
.stufen button{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--papier);background:linear-gradient(#485056,#1d2224);box-shadow:inset 0 1px 0 #7b858c,inset 0 -2px 0 #0d1011,0 6px 10px -6px rgba(29,34,36,.8);transition:transform .4s var(--e2)}
.stufen button:hover{transform:translateY(-1px)}.stufen button:active{transform:translateY(1px)}
.stufen button[disabled]{opacity:.3;pointer-events:none}
.stufen svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8}
.stufen b{min-width:7.2ch;justify-content:center}
/* Kalender: eigenes Blatt im Stil der Seite statt des Fensters vom Browser */
.kal{position:absolute;z-index:30;left:0;bottom:calc(100% + 18px);width:368px;padding:20px 20px 16px;border-radius:30px;color:var(--papier);
  background:linear-gradient(180deg,#434b50,#22272a);box-shadow:inset 0 0 0 1px rgba(214,187,150,.36),inset 0 1px 0 rgba(255,255,255,.16),0 3px 0 #0d1011,0 44px 70px -30px #000;
  animation:kalauf .45s var(--e1)}
@keyframes kalauf{from{opacity:0;transform:translateY(12px) scale(.97)}}
.kal[hidden]{display:none}
.kal__kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.kal__kopf b{font-family:var(--titel);font-weight:600;font-size:1.5rem;line-height:1;white-space:nowrap}
.kal__kopf small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--holz);margin-bottom:6px}
.kal__pf{display:flex;gap:8px}
.kal__pf button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--tinte);background:linear-gradient(#f7f9f9,#c7cfd3);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #9da2a3,0 8px 12px -8px #000;transition:transform .4s var(--e2)}
.kal__pf button:hover{transform:translateY(-1px)}
.kal__pf button[disabled]{opacity:.25;pointer-events:none}
.kal__pf svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7}
.kal__woche,.kal__raster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.kal__woche span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--holz);text-align:center;padding-bottom:8px}
.kal__raster{row-gap:3px;padding:8px 0 4px;border-top:1px solid rgba(var(--lh),.14)}
.kal__raster button{position:relative;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;font-family:var(--titel);font-weight:600;font-size:1.14rem;color:var(--papier);transition:background-color .25s,transform .4s var(--e2)}
.kal__raster button:hover{background-color:rgba(var(--lh),.14)}
.kal__raster button[disabled]{color:rgba(var(--lh),.24);pointer-events:none}
.kal__raster button.zu{text-decoration:line-through;text-decoration-color:rgba(197,0,15,.8)}
.kal__raster button.zw{border-radius:0;background-color:rgba(214,187,150,.16)}
.kal__raster button.an,.kal__raster button.ab{color:var(--tinte);background:linear-gradient(#fdfefe,#dfe4e5 55%,#c7cfd3);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #9da2a3,0 8px 14px -8px #000}
.kal__raster button.heute::after{content:'';position:absolute;bottom:12%;width:4px;height:4px;border-radius:50%;background:var(--laden)}
.kal__fuss{margin-top:8px;padding-top:12px;border-top:1px solid rgba(var(--lh),.14);font-size:.9rem;line-height:1.4;opacity:.82}
.auftakt__handy{display:none}

/* ---------- 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--oben{align-items:start}
.paar--karte{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.paar--karte h2 .hand{height:clamp(72px,8.6vw,128px)}
.paar--sauna{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.paar--haus{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,4.4vw,76px)}
.paar--weg{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.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}
.mitte{text-align:center;max-width:860px;margin-inline:auto;margin-bottom:clamp(28px,3.4vw,48px)}
.mitte p{margin-top:18px}
.unter{margin-top:clamp(28px,3.4vw,48px)}

/* ---------- Bildpaar: ein grosses Bild, davor ein kleines, das beim Scrollen anders wandert ---------- */
.bildpaar{position:relative;padding:0 0 clamp(34px,5vw,74px) clamp(0px,3vw,50px)}
.bildpaar .klein{position:absolute;left:-1.5%;bottom:0;width:40%;z-index:2}
.bildpaar--r{padding:0 clamp(0px,3vw,50px) clamp(34px,5vw,74px) 0}
.bildpaar--r .klein{left:auto;right:-1.5%}
.bildpaar .klein .rahmen{background:var(--zwei);box-shadow:inset 0 0 0 1px rgba(var(--lh),.16),0 30px 44px -26px rgba(0,0,0,.85)}
.fl--grund .bildpaar .klein .rahmen{background:var(--grund)}
.unterschrift{margin-top:12px;font-size:.92rem;opacity:.7}
.unterschrift--r{text-align:right;font-family:var(--titel);font-weight:600;font-size:1.2rem;opacity:1;margin-top:14px}
/* Reihe: gleiche Bilder nebeneinander, steigen nacheinander herauf */
.reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,26px)}
.reihe .frei__b{aspect-ratio:4/3}
.reihe--4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* ---------- Das Haus: ein grosses Bild und zwei kleine, jedes mit seinem Namen ---------- */
.dreibild{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,1.3vw,20px)}
.dreibild>:first-child{grid-column:1/-1}
.dreibild .frei__b{aspect-ratio:4/3;position:relative}
.dreibild .frei .kerbe{font-size:clamp(1rem,1.25vw,1.28rem)}
@media (max-width:520px){.dreibild .frei .kerbe{font-size:.8rem;padding:7px 10px 6px 9px}}
.paar--haus h2{font-size:clamp(2.05rem,4.3vw,4.1rem)}
/* Sockel: Absender und Knöpfe in einem matten Balken statt lose untereinander */
.sockel{margin-top:30px;padding:8px;border-radius:38px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025));box-shadow:inset 0 0 0 1px rgba(214,187,150,.3),inset 0 1px 0 rgba(255,255,255,.14),0 30px 44px -32px #000}
.sockel__absender{display:flex;align-items:center;gap:20px;padding:14px 20px 16px}
.sockel__absender svg{flex:none;height:46px;width:auto;fill:var(--holz)}
.sockel__absender p{font-size:1rem;line-height:1.45;opacity:.88;padding-left:20px;border-left:1px solid rgba(var(--lh),.2)}
.sockel__knoepfe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.sockel__knoepfe .kn{height:60px;padding-left:30px}
.sockel__knoepfe .kn i{width:46px;height:46px}
/* derselbe Balken in hellem Graugrün (Bruchstein und Tannen des Hauses gemischt), Schrift dunkel */
.sockel.sockel--salbei{background:linear-gradient(180deg,#c3cab8,#a9b29d);box-shadow:inset 0 1px 0 #e3e8dc,inset 0 -2px 0 #7b8570,0 30px 44px -32px #000;color:var(--tinte)}
.sockel--salbei .sockel__absender svg{fill:var(--tanne)}
.sockel--salbei .sockel__absender p{opacity:.92;border-left-color:rgba(var(--ld),.28)}
.betrieb{margin-top:26px;padding-top:20px;border-top:1px solid rgba(var(--lh),.2);font-family:var(--titel);font-weight:600;font-size:1.22rem;line-height:1.3}
.hell .betrieb{border-color:rgba(var(--ld),.2)}

/* ---------- Was es hier nicht gibt und was dafür da ist: zwei Spalten in grosser Schrift ---------- */
.nicht{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.16fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center}
.nicht h3{font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--holz);margin-bottom:14px}
.nicht li{padding:16px 0 15px;border-top:1px solid rgba(var(--lh),.18)}
.nicht li b{display:block;font-family:var(--titel);font-weight:600;font-size:clamp(1.8rem,3.05vw,2.9rem);line-height:1.06;letter-spacing:-.012em}
.nicht li span{display:block;margin-top:6px;font-size:1rem;opacity:.76}

/* ---------- 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 52s linear infinite;animation-play-state:paused}
.laufband.laeuft .laufband__zug{animation-play-state:running}
.laufband span{display:flex;align-items:center;gap:28px;padding-right:28px;font-family:var(--titel);font-weight:600;font-size:1.3rem;white-space:nowrap;color:rgba(var(--lh),.9)}
.laufband span::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--laden)}
@keyframes lauf{to{transform:translateX(-50%)}}

/* ---------- Der Weg hinauf: eine Linie mit vier Halten, daneben die Uhr der Chluse ---------- */
.weglinie{position:relative;padding-left:46px}
.weglinie::before{content:'';position:absolute;left:11px;top:12px;bottom:12px;width:2px;background:var(--holz);opacity:.55;transform:scaleY(0);transform-origin:top;transition:transform 2.4s var(--e1)}
.weglinie.da::before{transform:none}
.halt{position:relative;padding-bottom:clamp(24px,2.6vw,36px)}
.halt:last-child{padding-bottom:0}
.halt::before{content:'';position:absolute;left:-42px;top:9px;width:16px;height:16px;border-radius:50%;background:var(--zwei);box-shadow:0 0 0 2px var(--holz)}
.halt--ziel::before{background:var(--laden);box-shadow:0 0 0 2px var(--papier)}
.halt h3{font-size:clamp(1.6rem,2.3vw,2.1rem);line-height:1.1}
.halt p{margin-top:8px;max-width:48ch;opacity:.86}
.uhr{background:var(--blatt);color:var(--tinte);border-radius:var(--r-l);padding:clamp(24px,3vw,44px);box-shadow:inset 0 1px 0 #fff,0 44px 64px -36px #000;text-align:center}
.uhr svg{width:min(100%,360px);height:auto;display:block;margin:0 auto}
.uhr__jetzt{margin-top:18px;font-family:var(--titel);font-weight:600;font-size:clamp(1.6rem,2.5vw,2.2rem);line-height:1.1}
.uhr__dann{margin-top:6px;font-size:1.02rem;opacity:.8}
.uhr__leg{display:flex;justify-content:center;gap:8px 26px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid rgba(var(--ld),.16);font-family:var(--titel);font-weight:600;font-size:1.16rem}
.uhr__leg i{display:inline-block;width:.8em;height:.8em;border-radius:50%;margin-right:8px;vertical-align:-.04em}
.chluse{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:20px;align-items:center;margin-top:clamp(22px,2.4vw,34px)}
.chluse img{border-radius:var(--r-m);aspect-ratio:3/4;object-fit:cover;width:100%}
.chluse p{font-size:1rem;opacity:.84}

/* ---------- 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:#0d1011;color:#f4f6f6}
.bruch__bild{position:fixed;inset:-8% 0;z-index:-1;will-change:transform}
.bruch__bild img{width:100%;height:100%;object-fit:cover}
.bruch .in{position:fixed;inset:0;display:grid;place-content:center;padding-inline:var(--rand)}
.bruch .in__t{position:relative}
.bruch .in__t::before{content:'';position:absolute;z-index:-1;left:-170px;right:-170px;top:-110px;bottom:-110px;background:radial-gradient(56% 58% at 50% 50%,rgba(8,12,10,.7),rgba(8,12,10,.4) 46%,transparent 76%);opacity:0;transition:opacity 1.4s var(--e1);pointer-events:none}
.bruch .in__t.da::before{opacity:1}
.bruch p{font-family:var(--titel);font-weight:600;font-size:clamp(1.9rem,4.4vw,4.1rem);line-height:1.05;letter-spacing:-.012em;margin:0 auto;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.bruch small{display:block;margin-top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,.7);opacity:.9}
.still .bruch .in__t::before{opacity:1;transition:none}

/* ---------- Zimmer: eine Frage, darunter die passenden Zeilen ---------- */
.stand{text-align:center;margin-top:16px;font-family:var(--titel);font-weight:600;font-size:1.2rem}
.zeilen{margin-top:22px;border-radius:var(--r-l);background:var(--blatt);color:var(--tinte);box-shadow:inset 0 0 0 1px rgba(var(--ld),.12),0 26px 44px -32px rgba(var(--ld),.6);padding:6px clamp(18px,2.4vw,34px)}
.zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;align-items:baseline;padding:18px 0;border-top:1px solid rgba(var(--ld),.14)}
.zeile:first-child,.zeile[hidden]+.zeile:not([hidden]){border-top:0}
.zeile[hidden]{display:none}
.zeile b{font-family:var(--titel);font-weight:600;font-size:clamp(1.3rem,1.9vw,1.75rem);line-height:1.14}
.zeile b small{display:block;font-family:var(--sans);font-weight:400;font-size:1rem;opacity:.72;margin-top:3px;letter-spacing:0}
.zeile em{font-family:var(--titel);font-style:normal;font-weight:600;font-size:clamp(1.2rem,1.7vw,1.55rem);white-space:nowrap}
.einblick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.3vw,20px);margin-top:clamp(30px,3.6vw,54px)}
.einblick .frei__b{aspect-ratio:4/3}
.einblick--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.hinweis{margin-top:22px;padding-top:18px;border-top:1px solid rgba(var(--ld),.18);font-size:1rem;opacity:.8;max-width:80ch}
.fl--zwei .hinweis,.fl--grund .hinweis{border-color:rgba(var(--lh),.18)}

/* ---------- Blatt: ein heller Bogen Papier auf dunklem Grund (Karte, Preise) ---------- */
.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 small{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;opacity:.66}
.gruppe{margin-top:30px;font-family:var(--titel);font-weight:600;font-size:clamp(1.5rem,2vw,1.85rem);line-height:1.1;color:var(--tanne)}
.gruppe small{font-family:var(--sans);font-weight:400;font-size:.98rem;color:var(--tinte);opacity:.74;letter-spacing:0;display:block;margin-top:4px}
.gruppe+.gang{margin-top:8px}
.gang{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 20px;padding:12px 0;border-bottom:1px solid rgba(var(--ld),.15)}
.gang b{font-family:var(--titel);font-weight:600;font-size:1.22rem;line-height:1.22}
.gang b small{font-family:var(--sans);font-weight:400;font-size:.98rem;opacity:.8;letter-spacing:0;margin-left:6px}
.gang--zimmer b small{display:block;margin:2px 0 0}
.gang em{font-family:var(--titel);font-style:normal;font-weight:600;font-size:1.22rem;line-height:1.22;white-space:nowrap;text-align:right}
.gang em small{font-family:var(--sans);font-weight:400;font-size:.9rem;opacity:.72;margin-right:8px}
.gang em span{display:block}
.gang>span{grid-column:1/-1;font-size:.98rem;line-height:1.45;opacity:.74}
.zwischen{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;opacity:.66}
.spalten3{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,62px);gap:2px 8px;padding:10px 0;border-bottom:1px solid rgba(var(--ld),.15);align-items:baseline}
.spalten3 b{font-family:var(--titel);font-weight:600;font-size:1.22rem;line-height:1.22}
.spalten3 b small{font-family:var(--sans);font-weight:400;font-size:.98rem;opacity:.8;margin-left:6px}
.spalten3 em{font-family:var(--titel);font-style:normal;font-weight:600;font-size:1.16rem;text-align:right}
.spalten3--kopf em{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.66}
.blatt__spalten{columns:2;column-gap:clamp(30px,4vw,64px)}
.blatt__spalten>section{break-inside:avoid}
.blatt__fuss{margin-top:26px;font-size:1rem;opacity:.82}
.blatt__satz{margin-top:28px;font-family:var(--titel);font-weight:600;font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.25}
/* 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:#101314}
.bogen__b img{width:100%;height:100%;object-fit:cover}
.bogen b{display:block;margin-top:14px;font-family:var(--titel);font-weight:600;font-size:1.3rem;line-height:1.15}
.bogen small{display:block;margin-top:3px;font-size:.98rem;opacity:.74}
/* Anlass: steht über der Karte und verschwindet nach dem Datum */
.anlass{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 40px;align-items:center;padding:clamp(22px,2.6vw,36px);border-radius:var(--r-l);background:linear-gradient(180deg,#3f474c,#262b2f);box-shadow:inset 0 0 0 1px rgba(214,187,150,.4),inset 0 1px 0 rgba(255,255,255,.12),0 34px 50px -34px #000;margin-bottom:clamp(30px,3.6vw,54px)}
.anlass small{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--holz);margin-bottom:8px}
.anlass p{margin-top:8px;max-width:60ch;opacity:.88}
.anlass[hidden]{display:none}

/* ---------- Grosse Zahlen: eigener dunkler Abschnitt, Ziffern steigen aus einer Linie ---------- */
.zahlen{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)}
.zahl{padding-inline:clamp(12px,2vw,36px)}
.zahl:first-child{padding-left:0}
.zahl+.zahl{border-left:1px solid rgba(var(--lh),.16)}
.zahl b{display:block;overflow:hidden;font-family:var(--titel);font-weight:600;font-size:clamp(3.2rem,8.6vw,9rem);line-height:.96;letter-spacing:-.02em;white-space:nowrap}
.zahl b span{display:block;transform:translateY(104%);transition:transform 1.5s var(--e1);transition-delay:calc(var(--i,0)*120ms)}
.zahl b small{font-size:.3em;letter-spacing:0;margin-left:.18em}
.zahlen.da .zahl b span{transform:none}
.zahl p{margin-top:14px;font-size:1rem;opacity:.84;max-width:26ch}

/* ---------- Lage eines Bildes über die volle Breite, eine helle Tafel liegt darüber ---------- */
.lage{position:relative}
.lage .rahmen__k{aspect-ratio:21/10}
.tafel{position:absolute;z-index:3;left:clamp(18px,3vw,48px);bottom:clamp(18px,3vw,48px);width:min(520px,calc(100% - 36px));padding:clamp(22px,2.6vw,38px);border-radius:var(--r-l);background:linear-gradient(#fbfcfc,#e3e8e9);color:var(--tinte);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #9da2a3,0 34px 50px -30px rgba(0,0,0,.85)}
.tafel p{margin-top:12px}
.tafel .knoepfe{margin-top:20px}
.werte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(18px,3vw,48px);border-top:1px solid rgba(var(--ld),.22);margin-top:clamp(34px,4vw,60px)}
.werte div{padding-top:22px}
.werte b{display:block;font-family:var(--titel);font-weight:600;font-size:clamp(2rem,3.5vw,3.3rem);line-height:1;white-space:nowrap}
.werte span{display:block;font-size:1rem;opacity:.78;padding-top:9px;max-width:26ch}
.fl--zwei .werte,.fl--grund .werte{border-color:rgba(var(--lh),.22)}
/* Galerie: alle Bilder gleich gross, jedes mit Namen darunter */
.galerie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.3vw,20px)}
.galerie .frei__b{aspect-ratio:4/5}

/* ---------- Saison: die Zahl der Tage, gelesen aus einer Stelle ---------- */
.saison{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,6.6fr);gap:clamp(28px,5vw,88px);align-items:end}
.schlussbild{margin-bottom:clamp(40px,5vw,80px)}
.saison__zahl{font-family:var(--titel);font-weight:600;font-size:clamp(6rem,17vw,17rem);line-height:.84;letter-spacing:-.03em}
.saison__wort{margin-top:14px;font-family:var(--titel);font-weight:600;font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.14;max-width:22ch}
/* Matte Kachel mit zwei Einkerbungen: oben links sitzt der Name, unten rechts sitzen die Knöpfe im Ausschnitt */
.kachel{--f:var(--grund);--e:26px;position:relative;border-radius:34px;padding:74px clamp(22px,2.6vw,38px) 92px;background:linear-gradient(180deg,#31373c,#282d31);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.045),0 44px 54px -36px #000}
.kachel .angaben{border-top:0}
.kachel .angabe:last-child{border-bottom:0}
.kachel__kopf,.kachel__kerbe{position:absolute;background:var(--f)}
.kachel__kopf::before,.kachel__kopf::after,.kachel__kerbe::before,.kachel__kerbe::after{content:'';position:absolute;width:var(--e);height:var(--e)}
.kachel__kopf{left:-1px;top:-1px;padding:3px 28px 16px 3px;border-radius:0 0 var(--e) 0;font-family:var(--titel);font-weight:600;font-size:clamp(1.35rem,1.8vw,1.7rem);line-height:1.2;white-space:nowrap}
.kachel__kopf::before,.kachel__kopf::after{background:radial-gradient(circle at 100% 100%,transparent calc(var(--e) - .5px),var(--f) var(--e))}
.kachel__kopf::before{left:0;top:100%}.kachel__kopf::after{left:100%;top:0}
.kachel__kerbe{right:-1px;bottom:-1px;display:flex;gap:12px;padding:16px 0 0 16px;border-radius:var(--e) 0 0 0}
.kachel__kerbe::before,.kachel__kerbe::after{background:radial-gradient(circle at 0 0,transparent calc(var(--e) - .5px),var(--f) var(--e))}
.kachel__kerbe::before{right:0;bottom:100%}.kachel__kerbe::after{right:100%;bottom:0}
/* dieselbe Kachel dunkel auf hellem Grund, ohne Ausschnitt unten */
.hell .kachel{--f:var(--papier);color:var(--papier);margin-top:clamp(30px,3.4vw,48px)}
.hell .kachel__kopf{color:var(--tinte)}
.kachel--kurz{padding-bottom:30px}
.kachel--kurz p+p{margin-top:12px;opacity:.9}
/* Karte als gedeckter Tisch: jede Rubrik ein eigener Zettel, zwei Stapel, dazwischen Polaroids */
.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>section>.gruppe{margin-top:0}
.zettel__pola{padding:clamp(6px,1vw,16px) 0}
.zettel__pola .pola{width:min(64%,400px);margin-inline:auto}
#karte .hinweis{margin-top:clamp(26px,3vw,44px)}
#karte [role="tabpanel"] .blatt__satz{margin-top:clamp(26px,3vw,44px)}
.polas.polas--vier{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:clamp(18px,2.4vw,36px) clamp(14px,2vw,30px)}
.polas.polas--vier figcaption{min-height:0}
.pola__b--ab img{height:114%}
.hell .pola{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(var(--ld),.07),0 26px 34px -20px rgba(var(--ld),.6)}
.angaben{border-top:3px double rgba(var(--lh),.3)}
.angabe{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid rgba(var(--lh),.16);align-items:baseline}
.angabe span{font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--holz)}
.angabe b{font-family:var(--titel);font-weight:600;font-size:clamp(1.3rem,1.8vw,1.65rem);line-height:1.2}
.angabe b small{display:block;font-family:var(--sans);font-weight:400;font-size:1rem;opacity:.76;margin-top:4px;letter-spacing:0}

/* ---------- Seitenkopf der Unterseiten: Titel links auf dem Muster des Hauses, rechts ein grosses Foto, das nach links in den Grund ausläuft ---------- */
.seitenkopf{position:relative;overflow:hidden;background:var(--zwei);padding-top:clamp(150px,15vw,220px);padding-bottom:clamp(54px,6vw,96px);isolation:isolate}
.seitenkopf__bild{position:absolute;z-index:-1;top:-9%;right:0;bottom:-9%;width:62%;will-change:transform}
.seitenkopf__bild img{width:100%;height:100%;object-fit:cover}
.seitenkopf h1{max-width:12ch}
.seitenkopf .lead{margin-top:20px;max-width:40ch;text-shadow:0 1px 16px rgba(20,24,26,.95)}
.seitenkopf h1.handtitel{max-width:none}
.seitenkopf h1 .hand{fill:var(--papier);height:clamp(72px,9vw,132px)}

/* ---------- Fuss: Satz des Hauses gross, die vier 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:600;font-size:clamp(2.3rem,6vw,5.8rem);line-height:1;letter-spacing:-.015em}
.fuss__unter{margin-top:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--holz)}
.fuss__ecke{flex:none;width:clamp(150px,22vw,330px);fill:var(--holz);opacity:.92}
.fuss__ecke svg{width:100%;height:auto;display:block}
.fuss__ecke svg+svg{margin-top:-2%}
.fuss__haeuser{display:grid;grid-template-columns:repeat(4,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,#3f474c,#22272a);box-shadow:inset 0 0 0 1px rgba(214,187,150,.32),inset 0 1px 0 rgba(255,255,255,.12),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:#101314}
.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.6vw,1.7rem);line-height:1.1}
.fh address{margin-top:8px;font-size:1rem;opacity:.78}
.fh .pfeil{margin-top:14px}
.pfeil{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;padding:8px 0;box-shadow:inset 0 -1px 0 rgba(var(--lh),.4)}
.pfeil svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.5}
.fuss__oben{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,3.4vw,64px);margin-top:clamp(42px,4.6vw,76px)}
.fuss h4{display:flex;align-items:center;gap:14px;margin-bottom:6px;font-size:1.2rem;color:var(--holz)}
.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),.86);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)}
.fl-text{display:block;padding:12px 0;font-size:1rem;line-height:1.3;color:rgba(var(--lh),.86)}
.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),.5)}

/* ---------- Buchen: Fenster mit zwei Reitern (Zimmer mit Datum und Gästen, Tisch und Sauna mit Telefon), feiner Innenrahmen ---------- */
dialog{color:var(--papier)}
dialog::backdrop{background:rgba(8,10,11,.72)}
dialog.buchen{width:min(940px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:var(--r-xl);background:var(--zwei);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(214,187,150,.34);border-radius:calc(var(--r-xl) - 10px);pointer-events:none;z-index:2}
.buchen__b{position:relative;min-height:320px;background:#101314}
.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 .hand{fill:var(--holz);height:38px;margin-bottom:14px}
.buchen .zu{position:absolute;z-index:3;right:22px;top:22px}
.buchen .reiter{margin-top:20px}
.buchen .reiter button{height:44px;font-size:1.08rem;padding:0 18px}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.feld{display:grid;gap:6px;justify-items:start;text-align:left;padding:14px 20px 13px;border-radius:22px;background:rgba(8,10,11,.42);box-shadow:inset 0 1px 3px rgba(0,0,0,.6),inset 0 0 0 1px rgba(var(--lh),.12);transition:box-shadow .3s,transform .5s var(--e2)}
button.feld:hover,button.feld[aria-expanded="true"]{box-shadow:inset 0 1px 3px rgba(0,0,0,.6),inset 0 0 0 1px var(--holz);transform:translateY(-1px)}
.feld span{color:var(--holz)}
.feld b{font-family:var(--titel);font-weight:600;font-size:1.3rem;line-height:1.1}
.feld .stufen button{color:var(--tinte);background:linear-gradient(#f7f9f9,#c7cfd3);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #9da2a3}
.buchen .kal{position:static;width:auto;grid-column:1/-1;box-shadow:inset 0 0 0 1px rgba(214,187,150,.36),inset 0 1px 0 rgba(255,255,255,.16)}
.feld--ganz{grid-column:1/-1}
.buchen form .kn{margin-top:18px;width:100%}
.buchen__zu{margin-top:14px;padding:12px 16px;border-radius:10px;background:rgba(197,0,15,.16);box-shadow:inset 0 0 0 1px rgba(197,0,15,.5);font-size:1rem;line-height:1.45}
.buchen__klein{margin-top:18px;padding-top:16px;border-top:1px solid rgba(var(--lh),.16);font-size:.98rem;line-height:1.55;opacity:.88}
.buchen__gross{display:block;margin-top:18px;font-family:var(--titel);font-weight:600;font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1.14}
.buchen [hidden]{display:none}
/* Bühne: ein Bild gross, darunter die Daumenreihe, Pfeile links und rechts */
dialog.buehne{width:min(1240px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:clamp(16px,2vw,28px);border:0;border-radius:var(--r-xl);background:var(--tief);box-shadow:0 60px 120px -40px #000}
.buehne__kopf{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px}
.buehne__bild{position:relative;border-radius:var(--r-l);overflow:hidden;background:#0b0d0e;aspect-ratio:3/2;max-height:66dvh;margin:0 auto}
.buehne__bild img{width:100%;height:100%;object-fit:contain}
.buehne__pfeile{position:absolute;inset:auto 16px 16px auto;display:flex;gap:10px}
.buehne__daumen{display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.buehne__daumen button{flex:none;width:104px;aspect-ratio:4/3;border-radius:12px;overflow:hidden;opacity:.55;transition:opacity .3s}
.buehne__daumen button[aria-current="true"]{opacity:1;box-shadow:inset 0 0 0 2px var(--holz)}
.buehne__daumen img{width:100%;height:100%;object-fit:cover}

/* ---------- 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:600;font-size:1.25rem}
.blatt h2{font-size:clamp(1.6rem,2.3vw,2.1rem);margin-top:34px;color:var(--tanne)}
.blatt h2:first-child{margin-top:0}
.blatt h2+p{margin-top:12px}
.blatt a:not(.kn){box-shadow:inset 0 -1px 0 currentColor}
.nachweis li{padding:12px 0;border-bottom:1px solid rgba(var(--ld),.14);font-size:1rem;line-height:1.45}
.nachweis b{font-family:var(--titel);font-weight:600;font-size:1.16rem}
.leer{padding:16px 18px;border-radius:10px;background:rgba(var(--ld),.06);box-shadow:inset 0 0 0 1px rgba(var(--ld),.16)}

/* ---------- Kleinere Schirme ---------- */
@media (max-width:1180px){
  .glanz{display:none}
  .leiste{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr) auto;border-radius:44px}
  .leiste__saison{grid-column:1/-1}
  .leiste__saison+.leiste__z::before{display:none}
  .fuss__haeuser{grid-template-columns:repeat(2,minmax(0,1fr))}
  .einblick--5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  body{font-size:17px}
  .nav{top:12px}
  .nav__insel{width:100%;justify-content:space-between;padding:0 8px 0 18px;height:60px}
  .nav__links{display:none}
  .burger{display:block}
  .paar,.paar--um,.paar--weg,.paar--haus,.paar--karte,.paar--sauna,.kopfzeile,.saison,.textseite,.buchen__in,.nicht{grid-template-columns:minmax(0,1fr)}
  .paar--um>:first-child{order:0}
  .kopfzeile{align-items:start;gap:16px}
  .einblick,.einblick--5,.galerie,.reihe--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reihe{grid-template-columns:minmax(0,1fr)}
  .reihe .frei__b{aspect-ratio:3/2}
  .reihe [data-r="schweb"],[data-r="bild"],[data-r="schweb"],[data-r="rechts"],[data-r="links"]{transform:translateY(70px) scale(.96)}
  .bildpaar,.bildpaar--r{padding:0 0 46px}
  .bildpaar .klein{left:0;width:46%}.bildpaar--r .klein{left:auto;right:0}
  .nicht__bild{order:-1;max-width:420px}
  .blatt__spalten{columns:1}
  .zahlen{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .zahl:nth-child(3){padding-left:0;border-left:0}
  .werte{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
  .werte b{white-space:normal;font-size:clamp(1.6rem,7vw,2.4rem)}
  .fuss__haeuser{grid-template-columns:minmax(0,1fr)}
  .fuss__oben{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fuss__ecke{width:120px}
  .buchen__b{min-height:170px}
  .textseite nav{position:static}
  .seitenkopf{padding-top:0;padding-bottom:44px}
  .seitenkopf__bild{position:relative;top:auto;bottom:auto;width:auto;aspect-ratio:4/3;margin-bottom:30px}
  .lage .rahmen__k{aspect-ratio:4/3}
  .tafel{position:relative;left:auto;bottom:auto;width:auto;margin:-40px 14px 0}
  .anlass{grid-template-columns:minmax(0,1fr)}
  /* Auftakt am Handy: erster Schirm nur Bild, Titel, Satz, zwei Knöpfe. Das Haus steht im Bild, die Schrift darunter auf dem Dunkel */
  .auftakt{display:block;min-height:0;background:var(--grund)}
  .auftakt__haus{position:relative;inset:auto;z-index:0;transform:none!important}
  .auftakt__kopf{transform:none!important;opacity:1!important}
  .seitenkopf__bild{transform:none!important}
  .auftakt__haus img{aspect-ratio:5/4;object-position:38% 55%}
  .auftakt__t{display:block;padding-block:24px 34px}
  .auftakt__hof,.leiste{display:none}
  .auftakt__satz{text-shadow:none}
  .auftakt__handy{display:flex;margin-top:22px}
  .bruch{height:54vh}
  .buehne__daumen button{width:84px}
  .nicht{gap:34px}
  .chluse{grid-template-columns:minmax(0,110px) minmax(0,1fr)}
}
@media (max-width:520px){
  .d1{font-size:clamp(2.5rem,12vw,3.4rem)}
  .auftakt h1{font-size:clamp(2rem,10.2vw,3.2rem)}
  .kn{height:52px;padding-left:22px;letter-spacing:.14em}
  .sockel__knoepfe{grid-template-columns:minmax(0,1fr)}
  .sockel__absender{flex-direction:column;align-items:flex-start;gap:12px}
  .sockel__absender p{padding-left:0;border-left:0}
  .knoepfe .kn{flex:1 1 auto}
  .fuss__oben{grid-template-columns:minmax(0,1fr)}
  .fuss__kopf{flex-direction:column;align-items:flex-start}
  .reiter{border-radius:28px}
  .reiter button{padding:0 16px}
  .zahl b{font-size:clamp(2.8rem,15vw,4.4rem)}
  .boegen{gap:18px 12px}
  .felder{grid-template-columns:minmax(0,1fr)}
  .blatt{padding:22px 18px}
  .zeile{grid-template-columns:minmax(0,1fr)}
  .angabe{grid-template-columns:minmax(0,1fr);gap:4px}
  .kachel{padding:66px 18px 18px;border-radius:28px}
  .kachel__kerbe{position:static;background:none;padding:14px 0 0;flex-direction:column}
  .kachel__kerbe::before,.kachel__kerbe::after{display:none}
  .kachel__kerbe .kn{width:100%}
  .spalten3{grid-template-columns:minmax(0,1fr) repeat(3,46px);gap:2px 4px}
  .spalten3 b{font-size:1.08rem}.spalten3 em{font-size:1.02rem}
  .saison__zahl{font-size:clamp(5rem,34vw,9rem)}
}
/* 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],.reihe [data-r],.linie,.zahl b span,.weglinie::before,.auftakt__haus img{transition:none;transform:none;opacity:1}
  .laufband__zug,.glanz,.leiste,.leiste__glanz::after,.leiste>*,.kal{animation:none!important}
  .kn::after{display:none}
}
.still .z>span,.still [data-r],.still .reihe [data-r],.still .linie,.still .zahl b span,.still .weglinie::before,.still .auftakt__haus img{transition:none;transform:none;opacity:1}
.still .auftakt__hof{opacity:1;transition:none}

/* =====================================================================
   FASSUNG 3 (08.10.2026 abends): Polaroids, Lampen, Etappen des Wegs, Bühne der Zimmer
   ===================================================================== */
.leiste{z-index:5}
/* ---------- Polaroid: weisser Rahmen, Bild quadratisch, Name darunter ---------- */
.pola{margin:0;padding:9px 9px 0;background:#f3f1ec;border-radius:5px;color:var(--tinte);box-shadow:inset 0 1px 0 #fff,0 24px 34px -20px rgba(0,0,0,.9);--w:0deg}
.pola__b{display:block;aspect-ratio:1/1.03;overflow:hidden;background:#101314}
.pola__b img{width:100%;height:100%;object-fit:cover}
.pola figcaption{padding:11px 4px 13px;text-align:center;font-family:var(--titel);font-weight:600;font-size:1.1rem;line-height:1.15}
.pola figcaption small{display:block;margin-top:3px;font-family:var(--sans);font-weight:400;font-size:.84rem;opacity:.72}
/* Stapel: unsauber gelegte Polaroids, die nacheinander von unten heraufschweben */
.stapel{position:relative;width:100%;aspect-ratio:1/1.2}
.stapel .pola{position:absolute;left:9%;right:9%;top:7%;opacity:0;transform:translate(var(--x),calc(var(--y) + 130%)) rotate(calc(var(--w)*-1.6));transition:transform 1.25s var(--e3),opacity .5s var(--e1);transition-delay:calc(var(--i)*.2s)}
.stapel.an .pola{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--w))}
/* Stapel samt Pfeilen ein kleines Stück nach links, damit er mittig zwischen den beiden Listen sitzt */
@media (min-width:901px){.nicht>[data-tempo]{position:relative;left:clamp(-44px,-2.4vw,-16px)}}
/* Reihe von Polaroids, leicht verdreht, steigen nacheinander herauf */
.polas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,28px) clamp(12px,1.4vw,22px);padding:6px 4px}
.polas .pola{opacity:0;transform:translateY(110px) rotate(calc(var(--w)*-1.5)) scale(.94);transition:transform 1.4s var(--e3),opacity .7s var(--e1);transition-delay:calc(var(--i)*.14s)}
.polas.an .pola{opacity:1;transform:rotate(var(--w))}
.polas.an .pola:hover{transform:translateY(-6px) rotate(0deg);transition-delay:0s;transition-duration:.6s}
.polas figcaption{min-height:4.1em}
/* ---------- Lampen: links geht alles flackernd aus, rechts geht alles an ---------- */
.nicht li[data-r]{opacity:1;transform:none}
.nicht__weg li b{color:inherit}
.nicht__da li{opacity:.14}
.nicht__da li b{color:#fff;text-shadow:0 0 30px rgba(214,187,150,.5)}
.nicht.an .nicht__weg li{animation:lampeaus .5s steps(1,end) forwards;animation-delay:calc(var(--i)*.24s + 1.15s)}
.nicht.an .nicht__da li{animation:lampean .55s steps(1,end) forwards;animation-delay:calc(var(--i)*.24s + 1.4s)}
@keyframes lampeaus{0%{opacity:1}9%{opacity:.3}15%{opacity:1}24%{opacity:.22}31%{opacity:.85}40%{opacity:.18}54%{opacity:.6}62%{opacity:.16}74%{opacity:.34}100%{opacity:.24}}
@keyframes lampean{0%{opacity:.14}10%{opacity:.75}16%{opacity:.18}27%{opacity:1}33%{opacity:.3}45%{opacity:1}51%{opacity:.55}60%{opacity:1}100%{opacity:1}}
.still .nicht__weg li{opacity:.24}.still .nicht__da li{opacity:1}
/* ---------- Der Weg: vier Etappen als hohe Bilder auf einer Höhe, darunter der Takt als Balken ---------- */
.reihe.etappen{grid-template-columns:repeat(4,minmax(0,1fr))}
.etappen .frei__b{aspect-ratio:3/4}
.etappe{text-align:left}
.etappe h3{margin-top:20px;font-size:clamp(1.55rem,2.1vw,2rem);line-height:1.1}
.etappe p{margin-top:9px;font-size:1rem;opacity:.86}
.takt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(34px,4vw,60px);padding:10px;border-radius:38px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025));box-shadow:inset 0 0 0 1px rgba(214,187,150,.3),inset 0 1px 0 rgba(255,255,255,.14),0 30px 44px -32px #000}
.takt>div{position:relative;display:grid;gap:7px;align-content:center;padding:16px 26px 18px}
.takt>div+div::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:1px;background:rgba(var(--lh),.18)}
.takt span{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--holz)}
.takt b{font-family:var(--titel);font-weight:600;font-size:clamp(1.5rem,2.3vw,2.2rem);line-height:1.08}
.takt small{font-size:.95rem;opacity:.78}
/* ---------- Die Zimmer: eine dunkle Bühne auf hellem Grund. Links das Bild gross, rechts die Wahl in grosser Schrift ---------- */
.zbuehne{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);border-radius:44px;overflow:hidden;isolation:isolate;color:var(--papier);background:linear-gradient(180deg,#30363b,#1d2224);box-shadow:inset 0 0 0 1px rgba(214,187,150,.34),0 60px 90px -50px rgba(29,34,36,.95)}
.zbuehne__bild{position:relative;min-height:clamp(500px,48vw,740px);background:#101314;overflow:hidden}
.zbuehne__bild button{position:absolute;inset:0;display:block;width:100%;opacity:0;pointer-events:none;cursor:zoom-in;transition:opacity 1s var(--e1)}
.zbuehne__bild button.an{opacity:1;pointer-events:auto}
.zbuehne__bild img{width:100%;height:100%;object-fit:cover;transform:scale(1.09);transition:transform 2.4s var(--e3)}
.zbuehne__bild button.an img{transform:none}
.zbuehne__name{position:absolute;z-index:2;left:22px;bottom:22px;display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 24px;border-radius:99px;pointer-events:none;color:var(--tinte);font-family:var(--titel);font-weight:600;font-size:1.3rem;background:linear-gradient(#fbfcfc,#dfe4e5 55%,#c7cfd3);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #9da2a3,0 14px 22px -12px #000}
.zbuehne__wahl{display:flex;flex-direction:column;padding:clamp(28px,3.4vw,56px) clamp(26px,3.2vw,52px)}
.zbuehne__wahl h3{margin-bottom:20px}
.zw{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%;padding:17px 0 15px;border-top:1px solid rgba(var(--lh),.16);text-align:left;font-family:var(--titel);font-weight:600;font-size:clamp(1.75rem,2.7vw,2.6rem);line-height:1.05;color:rgba(var(--lh),.42);transition:color .45s var(--e2)}
.zw small{font-family:var(--sans);font-weight:400;font-size:1rem;white-space:nowrap}
.zw:hover{color:rgba(var(--lh),.82)}
.zw[aria-expanded="true"]{color:var(--papier)}
.zw[aria-expanded="true"] small{color:var(--holz)}
.zw__mehr{padding:0 0 16px;animation:kalauf .6s var(--e1)}
.zw__mehr[hidden]{display:none}
.zw__mehr .gang{padding:9px 0;border-bottom:0;border-top:1px solid rgba(var(--lh),.09)}
.zw__mehr .gang b{font-size:1.1rem;font-weight:500}
.zw__mehr .gang em{font-size:1.1rem;font-weight:500;color:var(--holz)}
.zbuehne__wahl .knoepfe{margin-top:auto;padding-top:26px}
/* ---------- Zwei Bilder auf einer Höhe, verschieden breit ---------- */
.reihe.duo{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.duo>:nth-child(2) .frei__b{aspect-ratio:8/9}
@media (max-width:1180px){.reihe.etappen{grid-template-columns:repeat(2,minmax(0,1fr))}.etappen .frei__b{aspect-ratio:4/3}}
@media (max-width:900px){
  .nicht__da li{opacity:1;animation:none!important}
  .nicht__weg li{opacity:.3;animation:none!important}
  .stapel{max-width:380px;margin-inline:auto}
  .takt{grid-template-columns:minmax(0,1fr);border-radius:30px}
  .takt>div+div::before{left:20px;right:20px;top:0;bottom:auto;width:auto;height:1px}
  .zbuehne{grid-template-columns:minmax(0,1fr);border-radius:32px}
  .zbuehne__bild{min-height:0;aspect-ratio:4/3}
  .polas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reihe.duo{grid-template-columns:minmax(0,1fr)}
  .duo>:nth-child(2) .frei__b{aspect-ratio:3/2}
}
@media (max-width:520px){.reihe.etappen{grid-template-columns:minmax(0,1fr)}.zbuehne__name{left:14px;bottom:14px;height:46px;font-size:1.12rem}}
@media (prefers-reduced-motion:reduce){.pola,.nicht li{animation:none!important;transition:none!important;opacity:1!important;transform:rotate(var(--w))!important}}
.still .stapel .pola{opacity:1;transition:none;transform:translate(var(--x),var(--y)) rotate(var(--w))}
.still .polas .pola,.still .tisch__p .pola{opacity:1;transition:none;transform:rotate(var(--w))}

/* ---------- Kachel mit Tiefe (wie beim Carlton): das Bild schwebt über einem weichen Schatten, hebt sich beim Darüberfahren
   und bekommt einen feinen Ring, der Name darunter nimmt die Farbe an. Das Gleiten im Bild läuft weiter. ---------- */
.frei__b{width:100%;box-shadow:0 34px 40px -26px rgba(0,0,0,.92),0 2px 0 rgba(255,255,255,.06) inset;transform:translateZ(0);transition:transform .7s var(--e2),box-shadow .6s var(--e2)}
.hell .frei__b{box-shadow:0 34px 40px -26px rgba(var(--ld),.7)}
.frei b,.etappe h3{transition:color .4s}
button.frei__b{display:block;padding:0;cursor:zoom-in}
@media (hover:hover){
  .frei:hover .frei__b,.etappe:hover .frei__b{transform:translateY(-9px);box-shadow:0 50px 48px -30px #000}   /* Robert 17.10.2026: kein farbiger Rand mehr beim Anheben */
  .hell .frei:hover .frei__b{box-shadow:0 50px 48px -30px rgba(var(--ld),.8)}
  .frei:hover b,.etappe:hover h3{color:var(--holz)}
  .hell .frei:hover b{color:var(--tanne)}
}
.frei:active .frei__b,.etappe:active .frei__b{transform:scale(.985)}
.etappe h3{margin-top:26px}

/* Stapel durchblättern: das oberste Polaroid rutscht zur Seite und legt sich unter den Stapel (oder umgekehrt) */
.stapel.bedient .pola{transition:transform .55s var(--e2),opacity .3s;transition-delay:0s}
.stapel.an .pola.raus{transform:translate(calc(var(--x) + 112%),calc(var(--y) - 4%)) rotate(calc(var(--w) + 13deg))}
.stapel.an .pola.raus-l{transform:translate(calc(var(--x) - 112%),calc(var(--y) - 4%)) rotate(calc(var(--w) - 13deg))}
.stapel__pf{display:flex;justify-content:center;gap:12px;margin-top:6px;position:relative;z-index:3}
.stapel__pf .rund{width:54px;height:54px;color:var(--tinte);background:linear-gradient(#fbfcfc,#dfe4e5 55%,#c7cfd3);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #9da2a3,0 12px 20px -10px #000}

/* ---------- Takt der Chluse als heller Balken mit Tiefe, wie die Leiste zum Buchen: Licht läuft um den Rand, der Stand von jetzt sitzt als dunkle Taste darin ---------- */
.takt{position:relative;padding:10px;border-radius:52px;border:1.5px solid transparent;color:var(--tinte);
  background:linear-gradient(#feffff,#eef1f2 44%,#d2d8da) padding-box,conic-gradient(from var(--ga),#fff,#c7cfd3 10%,var(--holz) 20%,#fff 29%,#9da2a3 46%,#fff 60%,var(--holz) 72%,#c7cfd3 86%,#fff) border-box;
  box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 #a7adaf,inset 0 -16px 20px -16px rgba(29,34,36,.26),0 3px 0 #7c8386,0 7px 0 rgba(13,16,17,.35),0 38px 56px -24px rgba(0,0,0,.95);animation:ga 8s linear infinite}
.takt>div{padding:18px 30px 19px}
.takt>div+div::before{background:rgba(var(--ld),.16)}
.takt span{color:var(--tanne)}
.takt b{font-size:clamp(1.7rem,2.6vw,2.5rem)}
.takt small{opacity:.72}
.takt>.takt__jetzt{border-radius:42px;color:var(--papier);background:linear-gradient(#4b545a,#2c3136 55%,#1d2224);box-shadow:inset 0 1px 0 #8a949b,inset 0 -3px 0 #0d1011,0 14px 22px -12px rgba(29,34,36,.8)}
.takt>.takt__jetzt::before{display:none}
.takt__jetzt span{color:var(--holz)}
.takt__jetzt small{opacity:.84}
.takt:hover .leiste__glanz::after{animation:streif2 1.5s var(--e1)}
/* ---------- Zimmer auf der Startseite wie beim Carlton: drei hohe Bilder, Name gross darunter, das Bild führt zum Zimmer ---------- */
.zreihe{gap:clamp(16px,2.2vw,38px)}
.zreihe .frei__b{aspect-ratio:3/4;border-radius:30px}
.zreihe .frei a{display:block}
.zreihe .frei b{margin-top:24px;font-size:clamp(1.8rem,2.6vw,2.6rem);line-height:1.06}
.zreihe .frei small{margin-top:8px;font-size:clamp(1.02rem,1.15vw,1.14rem)}
/* ---------- Zimmer-Seite: jede Zimmerart hat ihren eigenen Abschnitt, Bild gross, Flächen im Wechsel ---------- */
.zart{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,88px);align-items:center}
.zart--um{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.zart--um>.zart__b{order:2}
.zart__b .frei__b{aspect-ratio:3/2;border-radius:34px}
.zart .preise{margin-top:26px;border-top:1px solid rgba(var(--lh),.2)}
.hell .zart .preise{border-color:rgba(var(--ld),.2)}
.zart .preise div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid rgba(var(--lh),.12);font-size:1.02rem}
.hell .zart .preise div{border-color:rgba(var(--ld),.12)}
.zart .preise span small{display:block;opacity:.7;font-size:.94rem}
.zart .preise em{font-style:normal;white-space:nowrap;font-family:var(--titel);font-weight:600;font-size:1.14rem}
@media (max-width:900px){.takt{border-radius:34px}.takt>.takt__jetzt{border-radius:26px}.zart,.zart--um{grid-template-columns:minmax(0,1fr)}.zart--um>.zart__b{order:0}.zreihe .frei__b{aspect-ratio:4/3}}
@media (prefers-reduced-motion:reduce){.takt{animation:none}}

.polas figcaption{font-size:1.24rem}
.polas figcaption small{font-size:.92rem}
.hell .frei__b{box-shadow:0 40px 44px -26px rgba(var(--ld),.78)}
/* ---------- Sauna als Bühne: das Bild füllt die ganze Fläche (Dunkel links ins Bild gerechnet), der Text steht darauf,
   ein Schalter unten rechts wechselt zwischen der alten Käserei und dem Vorraum ---------- */
.sbuehne{position:relative;display:flex;align-items:center;min-height:clamp(540px,50vw,740px);border-radius:44px;overflow:hidden;isolation:isolate;box-shadow:inset 0 0 0 1px rgba(214,187,150,.34),0 60px 90px -50px #000}
.sbuehne>.zbuehne__bild{position:absolute;inset:0;min-height:0;z-index:-1}
.sbuehne::after{content:'';position:absolute;inset:10px;border:1px solid rgba(214,187,150,.3);border-radius:34px;pointer-events:none}
.sbuehne__t{max-width:620px;padding:clamp(30px,4.6vw,76px);pointer-events:none;text-shadow:0 2px 22px rgba(0,0,0,.7)}
.sbuehne__t .knoepfe{pointer-events:auto;text-shadow:none}
.sbuehne__wahl{position:absolute;z-index:2;right:26px;bottom:26px}
.sbuehne__wahl button{height:46px;font-size:1.1rem;padding:0 20px}
@media (max-width:900px){.sbuehne{display:block;min-height:0;border-radius:30px}.sbuehne>.zbuehne__bild{position:relative;inset:auto;aspect-ratio:4/3;z-index:0}.sbuehne>.zbuehne__bild img{object-position:75% 50%}.sbuehne__t{padding:24px 22px 84px;text-shadow:none}.sbuehne__wahl{right:auto;left:22px;bottom:22px}.sbuehne::after{display:none}}

/* ---------- Zimmer-Seite, Fassung 2: jede Zimmerart ist eine Bühne über die ganze Breite. Das Bild gleitet in seinem Rahmen,
   eine helle Tafel mit Tiefe schwebt darüber und wandert beim Scrollen gegen das Bild ---------- */
.zstage{position:relative;margin-top:clamp(40px,5vw,84px)}
.zstage:first-child{margin-top:0}
.zstage__bild{display:block;width:100%;padding:0;cursor:zoom-in;aspect-ratio:16/9;border-radius:44px;overflow:hidden;background:#101314;box-shadow:0 0 0 1px rgba(var(--ld),.14),0 60px 80px -46px rgba(var(--ld),.95);transform:translateZ(0)}
.zstage__bild img{width:100%;height:100%;object-fit:cover}
.zstage__tafel{position:absolute;z-index:3;left:clamp(18px,3.4vw,58px);bottom:clamp(18px,3.4vw,58px);width:min(470px,calc(100% - 36px))}
.zstage--um .zstage__tafel{left:auto;right:clamp(18px,3.4vw,58px)}
.zstage__tafel>div{padding:clamp(24px,2.8vw,42px);border-radius:36px;border:1.5px solid transparent;color:var(--tinte);
  background:linear-gradient(#feffff,#eef1f2 44%,#d6dcde) padding-box,linear-gradient(140deg,#fff,var(--holz) 30%,#fff 55%,#9da2a3) border-box;
  box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 #a7adaf,0 3px 0 #7c8386,0 7px 0 rgba(13,16,17,.3),0 44px 60px -28px rgba(0,0,0,.9)}
.zstage__tafel h2{font-size:clamp(1.9rem,3vw,2.9rem);line-height:1.04}
.zstage__tafel .lead{margin-top:10px;font-size:1.12rem}
.zstage .preise{margin-top:20px;border-top:1px solid rgba(var(--ld),.2)}
.zstage .preise div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:11px 0;border-bottom:1px solid rgba(var(--ld),.12);font-size:1rem}
.zstage .preise span small{display:block;opacity:.7;font-size:.92rem}
.zstage .preise em{font-style:normal;white-space:nowrap;font-family:var(--titel);font-weight:600;font-size:1.1rem}
.zstage .knoepfe{margin-top:22px}
/* ---------- Angebote: das Package als zwei Nächte in zwei Häusern, daneben das Blatt mit den Preisen; darunter das ganze Hotel als Balken ---------- */
.zwei-naechte{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) minmax(0,1.15fr);gap:clamp(14px,1.8vw,30px);align-items:center}
.zwei-naechte .frei__b{aspect-ratio:4/5}
.zwei-naechte .und{font-family:var(--titel);font-weight:600;font-size:clamp(2.4rem,4vw,4rem);color:var(--holz);line-height:1}
.zwei-naechte .blatt{border-radius:30px}
.trenner{display:flex;align-items:center;gap:22px;margin:clamp(50px,6vw,96px) 0 clamp(34px,4vw,60px);color:var(--holz)}
.trenner i{flex:1;height:1px;background:currentColor;opacity:.4}
.trenner svg{height:34px;width:auto;fill:currentColor}
@media (max-width:1180px){.zwei-naechte{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.zwei-naechte .blatt{grid-column:1/-1}}
@media (max-width:900px){.zstage__bild{aspect-ratio:4/3;border-radius:30px}.zstage__tafel,.zstage--um .zstage__tafel{position:relative;left:auto;right:auto;bottom:auto;width:auto;margin:-44px 12px 0;transform:none!important}}

/* =====================================================================
   FASSUNG 4 (08.10.2026, 19:40): Seitenköpfe ohne graue Fläche, Takt kleiner, Karte als Tisch, Anlass als Karte
   ===================================================================== */
/* Seitenkopf: das Foto in voller Farbe über die ganze Breite, der Titel unten links mit einem weichen Hof dahinter (wie im Auftakt) */
.seitenkopf{display:flex;align-items:flex-end;min-height:clamp(480px,76svh,780px);padding-top:150px;padding-bottom:clamp(40px,5vw,84px);background:#0d1011;background-image:none}
.seitenkopf__bild{left:0;width:100%;top:-9%;bottom:-9%}
.seitenkopf>.wrap{position:relative;width:100%;isolation:isolate}
.seitenkopf>.wrap::before{content:'';position:absolute;z-index:-1;left:-200px;bottom:-160px;width:min(1180px,125%);height:210%;background:radial-gradient(60% 60% at 34% 60%,rgba(8,12,10,.9),rgba(8,12,10,.62) 46%,transparent 76%);pointer-events:none}
.seitenkopf .lead{max-width:36ch}
.seitenkopf__bild img{object-position:72% 50%}
.seitenkopf h1,.seitenkopf .lead{color:#f4f6f6}
.seitenkopf .lead{text-shadow:0 1px 16px rgba(6,10,8,.95)}
/* Takt: kleiner, ohne Lichtstreifen */
.leiste:hover .leiste__glanz::after,.takt:hover .leiste__glanz::after{animation:none}
.takt{max-width:1120px;margin-inline:auto;padding:8px;border-radius:44px}
.takt>div{padding:13px 24px 14px;gap:4px}
.takt b{font-size:clamp(1.2rem,1.65vw,1.55rem)}
.takt small{font-size:.9rem}
.takt>.takt__jetzt{border-radius:36px}
/* Karte auf der Startseite als gedeckter Tisch: das Blatt in der Mitte, links und rechts je drei Polaroids, die gegeneinander wandern */
.mitte h2 .hand{margin-inline:auto;height:clamp(84px,9.6vw,144px)}
.tisch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr) minmax(0,1fr);gap:clamp(16px,2.6vw,44px);align-items:center}
.tisch .blatt{position:relative;z-index:2;grid-column:2;grid-row:1/span 3}
/* Polaroids paarweise: links und rechts je eines auf derselben Höhe, jedes Paar fliegt herauf, sobald man bei ihm ankommt */
.tisch__p{grid-row:var(--z)}
.tisch__l{grid-column:1}.tisch__r{grid-column:3}
.tisch__p .pola{width:84%;opacity:0;transform:translateY(clamp(130px,17vw,240px)) rotate(calc(var(--w)*-2.4)) scale(.9);transition:transform 1.35s var(--e3),opacity .55s var(--e1)}
.tisch__r .pola{margin-left:auto;transition-delay:.09s}
.tisch__l.tisch__p--innen .pola{margin-left:auto}.tisch__r.tisch__p--innen .pola{margin-left:0}
.tisch__p.an .pola{opacity:1;transform:rotate(var(--w))}
.tisch__p.an .pola:hover{transform:translateY(-6px) rotate(0deg);transition-delay:0s;transition-duration:.6s}
.tisch__p figcaption{font-size:1.24rem}
.tisch__p figcaption small{font-size:.92rem}
/* Stoss: Polaroids wie hingelegt, überlappend von oben nach unten, je vier, jede Karte mit eigener Breite, Lage und Drehung */
.tisch--stoss{align-items:center}
.tisch--stoss .blatt{grid-row:1}
.stoss{display:flex;flex-direction:column;grid-row:1}
.stoss--l{grid-column:1}.stoss--r{grid-column:3}
.stoss__p{position:relative;z-index:var(--zi);width:var(--b);margin-left:var(--l);margin-top:var(--o)}
.stoss__p .pola{width:100%;margin:0}
.stoss__p:nth-child(even) .pola{transition-delay:.08s}
.stoss__p.an .pola:hover{transform:rotate(var(--w))}
.stoss__p figcaption{font-size:1.06rem;padding:9px 4px 11px}
.stoss__p figcaption small{font-size:.8rem}
.hinweis--mitte{max-width:none;text-align:center}
/* Karte mit Tiefe: heller Bogen mit feiner Holzkante und Sockel (Anlass, Tafeln) */
.anlass{grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3vw,48px);padding:clamp(22px,2.8vw,40px) clamp(24px,3.2vw,48px);border-radius:40px;border:1.5px solid transparent;color:var(--tinte);
  background:linear-gradient(#feffff,#eef1f2 44%,#d6dcde) padding-box,linear-gradient(140deg,#fff,var(--holz) 30%,#fff 55%,#9da2a3) border-box;
  box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 #a7adaf,0 3px 0 #7c8386,0 7px 0 rgba(13,16,17,.3),0 44px 60px -28px rgba(0,0,0,.9)}
.anlass__tag{display:flex;align-items:flex-end;gap:14px;padding-right:clamp(20px,3vw,48px);border-right:1px solid rgba(var(--ld),.18)}
.anlass__tag b{font-family:var(--titel);font-weight:600;font-size:clamp(4.4rem,8.6vw,8rem);line-height:.82;letter-spacing:-.03em;color:var(--tanne)}
.anlass__tag span{font-family:var(--titel);font-weight:600;font-size:1.25rem;line-height:1.2;padding-bottom:.3em}
.anlass p{opacity:.86}
.reiter--hell{padding:8px;background:linear-gradient(#feffff,#d6dcde);box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 #a7adaf,0 3px 0 #7c8386,0 22px 30px -16px #000}
.reiter--hell button{min-width:150px;background:none;box-shadow:none}
/* Abschnitt mit einem Foto des Hauses im Hintergrund (Dunkel ins Bild gerechnet), das beim Scrollen langsam mitwandert */
.hinter{isolation:isolate;overflow:hidden}
.hinter__bild{position:absolute;inset:0;z-index:-1}
.hinter__bild img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .seitenkopf{display:block;min-height:0;padding-top:0;background:var(--grund)}
  .seitenkopf__bild{top:auto;bottom:auto}
  .seitenkopf>.wrap::before{display:none}
  .zetteltisch{grid-template-columns:minmax(0,1fr)}
  .zettel__pola .pola{width:min(78%,360px)}
  .tisch{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tisch .blatt{grid-column:1/-1;grid-row:auto}
  .tisch__p{grid-column:auto;grid-row:auto}
  .tisch__p .pola,.tisch__p--innen .pola{width:auto;margin-left:0}
  .tisch__p .pola{transform:translateY(90px) rotate(calc(var(--w)*-2)) scale(.94)}
  .stoss{display:contents}
  .tisch--stoss .blatt{order:0}
  .stoss__p{order:1;width:auto;margin:0}
  .stoss__p:first-child{order:-1}
  .anlass{grid-template-columns:minmax(0,1fr)}
  .anlass__tag{border-right:0;padding-right:0}
}

/* Sauna-Bühne, Fassung 2: Text und Bild getrennt. Links eine dunkle Tafel mit dem Text, rechts das Bild in voller Farbe mit dem Schalter */
.sbuehne{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch;min-height:0;background:linear-gradient(180deg,#30363b,#1d2224)}
.sbuehne::after{display:none}
.sbuehne__t{max-width:none;align-self:center;pointer-events:auto;text-shadow:none;padding:clamp(30px,4vw,64px)}
.sbuehne__b{position:relative;min-height:clamp(480px,44vw,660px)}
.sbuehne__b>.zbuehne__bild{position:absolute;inset:0;min-height:0}
.sbuehne__wahl{background:rgba(13,16,17,.72)}
@media (max-width:900px){.sbuehne{grid-template-columns:minmax(0,1fr)}.sbuehne__b{min-height:0;aspect-ratio:4/3}.sbuehne__t{padding:26px 22px 30px}.sbuehne__wahl{left:14px;bottom:14px}}

/* ---------- Band zum Blättern (Baustein der Carlton-Seite): Titel links, Text daneben, Pfeile rechts; die Karten laufen bis an den Bildschirmrand ---------- */
.blaetter__kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:clamp(20px,3.4vw,60px);align-items:end;margin-bottom:clamp(26px,3vw,46px)}
.blaetter__kopf p{max-width:52ch}
.pfeile{display:flex;gap:10px}
.pfeile .rund{width:58px;height:58px;color:var(--tinte);background:linear-gradient(#fbfcfc,#dfe4e5 55%,#c7cfd3);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #9da2a3,0 14px 22px -12px rgba(var(--ld),.7)}
.pfeile .rund:disabled{opacity:.36;pointer-events:none}
.band{display:flex;gap:clamp(14px,1.8vw,28px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;
  --bund:max(var(--rand),calc((100vw - var(--max))/2 + var(--rand)));margin:-16px calc(-1*var(--bund)) -34px;padding:16px var(--bund) 64px;scroll-padding-inline:var(--bund)}
.band::-webkit-scrollbar{display:none}
.band.zieht{scroll-snap-type:none}
.band.senk{overflow-x:hidden}
.blaetter .band>*{flex:none;scroll-snap-align:start;width:clamp(280px,43vw,680px)}
.band img{pointer-events:none;-webkit-user-drag:none}
.band .frei__b{aspect-ratio:3/2}
.laufbalken{position:relative;z-index:1;height:1px;width:min(280px,44%);margin-left:auto;background:rgba(var(--lh),.22)}
.hell .laufbalken{background:rgba(var(--ld),.22)}
.laufbalken i{position:absolute;left:0;top:-1px;height:3px;width:30%;border-radius:2px;background:currentColor;will-change:transform}
@media (max-width:900px){.blaetter__kopf{grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}.pfeile .rund{width:50px;height:50px}}
@media (max-width:640px){.blaetter .band>*{width:82vw}}

/* ---------- Zwei Nächte: beide Fotos und das Blatt stehen auf einer Höhe und sind gleich hoch, die Namen laufen darunter ---------- */
@supports (grid-template-rows:subgrid){
  .zwei-naechte{grid-template-rows:auto auto auto;row-gap:0;align-items:stretch}
  .zwei-naechte>.frei{grid-row:1/span 3;display:grid;grid-template-rows:subgrid}
  .zwei-naechte>.und{grid-row:1;align-self:center}
  .zwei-naechte__blatt{grid-row:1;display:grid}
  .zwei-naechte__blatt>.blatt{display:flex;flex-direction:column;justify-content:center}
  @media (max-width:1180px){.zwei-naechte__blatt{grid-column:1/-1;grid-row:4;margin-top:clamp(18px,3vw,30px)}}
}

/* ---------- Devise: vier Polaroids grösser, sie liegen locker übereinander ---------- */
@media (min-width:901px){.paar--devise{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,70px)}}
@media (max-width:900px){.polas.polas--vier{padding-right:5%;margin-bottom:10px}}
.polas.polas--vier{gap:0;padding:0;align-items:start}
.polas--vier .pola{position:relative;width:108%}
.polas--vier .pola:nth-child(1){z-index:3}
.polas--vier .pola:nth-child(2){z-index:4;margin-left:-4%;margin-top:16%}
.polas--vier .pola:nth-child(3){z-index:1;margin-left:3%;margin-top:-26%}
.polas--vier .pola:nth-child(4){z-index:2;margin-left:-6%;margin-top:-9%}
.polas--vier.an .pola:hover{transform:rotate(var(--w))}

/* ---------- Luxus-Picknick: graugrüner Balken mit zwei Knöpfen ---------- */
.picknick{margin-top:clamp(30px,3.4vw,48px)}
.picknick__t{padding:18px 22px 20px}
.picknick__t p{margin-top:8px;font-size:1.14rem;line-height:1.45}
.picknick__t small{display:block;margin-top:6px;font-size:1rem;opacity:.8}

/* ---------- Feste: wie viele Gäste. Links das Fest, rechts die Nacht, aufgeteilt in Zimmer und Bettenlager im Verhältnis der Plätze ---------- */
.gaeste{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:clamp(14px,1.6vw,26px);margin-top:clamp(34px,4vw,60px)}
.gaeste__k{border-radius:34px;padding:clamp(24px,2.8vw,42px)}
.gaeste__k h3{font-size:clamp(1.35rem,1.8vw,1.7rem)}
.gaeste b{display:block;font-family:var(--titel);font-weight:600;line-height:.95;letter-spacing:-.02em;font-size:clamp(4rem,8vw,8rem);margin-top:12px}
.gaeste b i{font-style:normal}
.gaeste__k p{margin-top:12px;opacity:.86}
.gaeste__k--fest{color:var(--papier);background:linear-gradient(180deg,#3f474c,#262b2f);box-shadow:inset 0 0 0 1px rgba(214,187,150,.4),inset 0 1px 0 rgba(255,255,255,.12),0 34px 50px -34px rgba(var(--ld),.9)}
.gaeste__k--fest h3{color:var(--holz)}
.gaeste__k--nacht{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,54px);background:var(--blatt);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(var(--ld),.07),0 34px 50px -34px rgba(var(--ld),.6)}
.gaeste__teile{display:flex;gap:8px}
.gaeste__teil{min-width:0;display:flex;flex-direction:column;justify-content:flex-end;border-radius:22px;padding:clamp(16px,1.8vw,26px);background:linear-gradient(180deg,#c3cab8,#a9b29d);box-shadow:inset 0 1px 0 #e3e8dc,inset 0 -2px 0 #7b8570}
.gaeste__teil--lager{background:linear-gradient(180deg,#e6d3b6,#d2b78f);box-shadow:inset 0 1px 0 #f3e7d2,inset 0 -2px 0 #a88e68}
.gaeste__teil b{font-size:clamp(2.4rem,4.2vw,4.2rem);margin-top:0}
.gaeste__teil span{margin-top:8px;font-size:1rem;line-height:1.35}
@media (max-width:900px){.gaeste,.gaeste__k--nacht{grid-template-columns:minmax(0,1fr)}.gaeste__k{border-radius:28px}.gaeste__teil{min-height:150px}}

/* Kopfbild, dessen Hauptsache unten liegt (Gäste am Tisch im Garten) */
.seitenkopf__bild--unten img{object-position:50% 100%}

/* ---------- 09.10.2026 · Fuss wie bei Carlton-Europe und Ruedihus (Robert: «die Footer sollen so aussehen, auch mit einer Tapete im Hintergrund») ----------
   Lauftext an der Naht, Lauben-Muster als Grund (läuft nach unten aus), links Schriftzug mit Satz, in der Mitte das Kontaktfeld mit eingelassenen Feldern, rechts der Schriftzug als Siegel.
   Stand davor: _sicherung/vor-fuss-kontaktfeld/. Nur transform und opacity in Bewegung. */
.naht{position:relative;z-index:3;background:linear-gradient(180deg,#363d42,#272c30);box-shadow:inset 0 1px 0 rgba(214,187,150,.55),inset 0 -1px 0 rgba(214,187,150,.42),0 18px 30px -22px rgba(0,0,0,.85)}
.naht .laufband{margin:0;padding:clamp(10px,1vw,14px) 0;border:0;background:none}
.naht .laufband__zug{animation-duration:var(--t,52s)}
.naht .laufband span{font-weight:500;font-size:clamp(1.08rem,1.35vw,1.4rem);letter-spacing:.01em;gap:clamp(22px,2.6vw,44px);padding-right:clamp(22px,2.6vw,44px);color:var(--holz)}
.naht .laufband span:nth-child(even){color:var(--papier)}
.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='44' height='92'%3E%3Cg fill='%23d6bb96' fill-opacity='.075'%3E%3Cpath d='M22 14 30 46 22 78 14 46z'/%3E%3Ccircle cx='22' cy='6' r='3'/%3E%3Ccircle cx='22' cy='86' r='3'/%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,1fr) minmax(0,1.2fr) auto;align-items:center;gap:clamp(24px,3.4vw,64px)}
.fuss__logo{display:inline-block}
.fuss__logo svg{display:block;height:clamp(38px,3.6vw,52px);width:auto;fill:var(--papier)}
.fuss__marke .fuss__satz{margin-top:clamp(20px,2.4vw,34px);font-size:clamp(1.9rem,3.5vw,3.7rem);line-height:1.02}
.fuss__kontakt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(9px,.9vw,13px);margin:0;padding:clamp(11px,1.1vw,15px);border-radius:28px;background:linear-gradient(180deg,#444c52,#333a3f);box-shadow:inset 0 0 0 1px rgba(214,187,150,.3),inset 0 1px 0 rgba(255,255,255,.12),0 28px 40px -32px rgba(0,0,0,.85)}
.fuss__kontakt[data-r]{transform:none}
.fuss__kontakt>div{padding:clamp(14px,1.45vw,21px) clamp(15px,1.6vw,23px) clamp(15px,1.55vw,22px);border-radius:18px;background:linear-gradient(180deg,#0f1213,#151a1c 34%,#181d1f);box-shadow:inset 0 3px 6px -1px rgba(4,6,7,.68),inset 0 1px 0 rgba(4,6,7,.55),inset 0 0 0 1px rgba(4,6,7,.3),0 1px 0 rgba(255,255,255,.1)}
.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(--holz)}
.fuss__kontakt dd{margin:8px 0 0;font-family:var(--titel);font-weight:600;font-size:clamp(1.16rem,1.4vw,1.46rem);line-height:1.18;color:var(--papier)}
.fuss__kontakt dd small{display:block;margin-top:7px;font-family:var(--sans);font-weight:400;font-size:.86rem;line-height:1.35;color:rgba(var(--lh),.72)}
.fuss__kontakt a{white-space:nowrap;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--e1)}
.fuss__kontakt a:hover{background-size:100% 1px}
.fuss__ecke--siegel{width:auto;opacity:1;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.3vw,20px)}
.siegel{display:grid;place-items:center;align-content:center;width:clamp(150px,15vw,230px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 38%,#474f55,#1b2022 72%);box-shadow:inset 0 0 0 1px rgba(214,187,150,.7),inset 0 0 0 9px #1b2022,inset 0 0 0 10px rgba(214,187,150,.4),0 30px 40px -24px rgba(0,0,0,.9)}
.fuss__ecke--siegel .siegel svg{width:66%;height:auto;fill:var(--holz)}
.fuss__ecke--siegel .siegel svg+svg{margin-top:-2%}
.fuss__ecke--siegel small{font-family:var(--mono);font-size:clamp(8.5px,.78vw,11px);letter-spacing:.13em;text-transform:uppercase;color:var(--holz);white-space:nowrap}
@media (max-width:1100px){
  .fuss__kopf--drei{grid-template-columns:minmax(0,1fr) auto}
  .fuss__kontakt{grid-column:1/-1;grid-row:2}
}
@media (max-width:700px){
  .fuss__kopf--drei{grid-template-columns:minmax(0,1fr)}
  .fuss__ecke--siegel{display:none}
  .fuss__kontakt{grid-row:auto;padding:10px;gap:9px}
  .fuss__kontakt>div{padding:13px 14px 14px;border-radius:15px}
}
@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}
}

/* ---------- Studio (09.10.2026): Hinweis für Gäste unten am Rand, eigene Seiten aus dem Studio ---------- */
.hinweisband{position:fixed;z-index:58;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;padding:12px var(--rand);background:var(--tief);color:var(--papier);box-shadow:inset 0 1px 0 rgba(214,187,150,.35),0 -16px 30px -24px #000}
.hinweisband p{margin:0;font-size:1rem;line-height:1.45;flex:1;min-width:0}
.hinweisband a{text-decoration:underline;text-underline-offset:4px;margin-left:8px;white-space:nowrap}
.hinweisband button{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--papier);box-shadow:inset 0 0 0 1px rgba(var(--lh),.25);transition:background-color .3s}
.hinweisband button:hover{background:rgba(255,255,255,.1)}
.hinweisband button svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.5}
.hinweisband[hidden]{display:none}
.textseite--eigen{grid-template-columns:minmax(0,1fr);max-width:900px;margin:0 auto}
.textseite--eigen .blatt h2{margin-top:clamp(22px,2.6vw,36px)}
.textseite--eigen .blatt h2:first-child{margin-top:0}
.textseite--eigen .blatt p{margin-top:12px;max-width:72ch}
.textseite--eigen .blatt ul{margin-top:12px;padding-left:22px;list-style:disc}
.textseite--eigen .blatt li{margin-top:6px}
.abschnitt__bild{margin:18px 0 6px;border-radius:var(--r-m);overflow:hidden}
.abschnitt__bild img{width:100%;height:auto}

/* ---------- Leistung (09.10.2026): Lichtrand als gedrehte Lage, Fenster-Bilder erst bei Annäherung, Bilder ohne langen blassen Zustand ---------- */
/* Lichtrand: main.js setzt <i class="ring"> in Eck-Knopf, Leiste und Takt. Gedreht wird nur die Lage (transform), der Verlauf bleibt stehen;
   so malt der Browser nichts neu. Darunter steht der Rand wie bisher gemalt (ohne Skript sichtbar, Winkel 0). */
.glanz,.leiste,.takt{animation:none}
.ring{position:absolute;z-index:-1;inset:-1.5px;border-radius:inherit;overflow:hidden;pointer-events:none;
  --ring:conic-gradient(#fff,#c7cfd3 10%,var(--holz) 20%,#fff 29%,#9da2a3 46%,#fff 60%,var(--holz) 72%,#c7cfd3 86%,#fff);
  --fuell:linear-gradient(#feffff,#eef1f2 44%,#d2d8da);--innen:inset 0 2px 0 #fff,inset 0 -3px 0 #a7adaf,inset 0 -16px 20px -16px rgba(29,34,36,.26);--dauer:8s}
.ring::before{content:'';position:absolute;left:50%;top:50%;width:calc(100% + 40px);aspect-ratio:1;margin:calc(-50% - 20px) 0 0 calc(-50% - 20px);background:var(--ring);animation:dreh var(--dauer) linear infinite}
.ring::after{content:'';position:absolute;inset:1.5px;border-radius:inherit;background:var(--fuell);box-shadow:var(--innen)}
.glanz>.ring{inset:-1px;--dauer:3.6s;--fuell:linear-gradient(180deg,#3f474c,#1d2224);--innen:inset 0 0 0 1px rgba(var(--lh),.12);
  --ring:conic-gradient(from calc(0deg - var(--go)),transparent,var(--holz) var(--gp),#fff calc(var(--gp)*2),var(--kander) calc(var(--gp)*3),transparent calc(var(--gp)*4));
  transition:--go .8s cubic-bezier(.25,1,.5,1),--gp .8s cubic-bezier(.25,1,.5,1)}
.glanz>.ring::after{inset:1px}
.glanz:is(:hover,:focus-visible)>.ring{--gp:20%;--go:95deg}
.ruht>.ring::before,.auftakt:not(.da) .leiste>.ring::before{animation-play-state:paused}
@keyframes dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ring::before{animation:none}}
.still .ring::before{animation:none}
/* Fenster: das Bild steht fest über dem ganzen Schirm und gälte sonst sofort als sichtbar; bilder.js gibt es frei, sobald der Abschnitt naht */
.bruch:not(.nah) .bruch__bild img{display:none}
/* Fenster, die weit weg sind (main.js setzt .fern ab gut einer Fensterhöhe Abstand): ihre festen Lagen geben den Grafikspeicher frei. Sichtbar ändert sich nichts, der Ausschnitt ist ohnehin aus dem Bild. */
.bruch.fern .bruch__bild,.bruch.fern .in{visibility:hidden}
/* Bilder schweben weiter herauf, sind aber nach einer halben Sekunde voll da (vorher 1,2 s blass) */
[data-r="bild"],[data-r="schweb"],.reihe [data-r="schweb"],[data-r="rechts"],[data-r="links"]{transition-property:opacity,transform;transition-duration:.55s,1.7s;transition-timing-function:var(--e1),var(--e3)}
/* Exklusiv mieten: leichter Schatten hinter der Schrift, damit sie auf dem Foto lesbar bleibt (Robert 09.10.2026) */
.hinter .paar>div:first-child>:is(h2,p),.hinter .paar>div:first-child .pfeil{text-shadow:0 1px 2px rgba(6,10,8,.55),0 2px 14px rgba(6,10,8,.45)}

/* ---------- Seitenbau 13.10.2026: zweite Reihe im Menü am Handy (Luxus-Picknick, Der Weg hinunter, Das Tal, Vor Ihrer Anreise) ---------- */
.menue__mehr{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(var(--lh),.16)}
.menue__links .menue__mehr a{display:inline-block;font-size:1.3rem;line-height:1.3;padding:5px 0;color:rgba(var(--lh),.82);overflow:visible}
.menue__links .menue__mehr a[aria-current]{color:var(--holz)}
/* Chat der Rezeption (Stil kommt aus der Vorlage des Carlton-Europe): kein grüner Punkt am Bild der Familie (keine Status-Punkte, Tasty Studios 13.10.2026) */
.gast .gast__foto i,.gast__kopf .gast__foto i,.gast-knopf .gast__foto i{display:none}
/* Knöpfe, deren Schrift nicht in eine Zeile passt, brechen um statt abgeschnitten zu werden (Randprüfung _qa/rand.js, 13.10.2026): am Handy überall, im Sockel in jeder Breite */
.sockel__knoepfe .kn{white-space:normal;line-height:1.3;text-align:left}
@media (max-width:520px){.kn{white-space:normal;line-height:1.3;text-align:left;max-width:100%}}
/* Zimmermappe (mappe.html): Schriftzug hell (die Datei trägt Schwarz in der Gruppe), Vorschläge in zwei Spalten, damit der Gruss darüber im Bild bleibt (13.10.2026) */
.mappe__zug g,.mappe__zug path{fill:currentColor}
body.mappe .gast__vor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body.mappe .gast__vor button{align-items:flex-start;height:100%}

/* 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:214,187,150;--k-t:#efe3d0;--k-a:var(--holz);--k-c1:var(--zwei);--k-c2:var(--grund);--k-kn:linear-gradient(180deg,#f3e8d6,#e2cdaf 30%,#d6bb96 60%,#a68b66);--k-kt:var(--tinte);--k-r:var(--r-l)}
.fuss--kette .fuss__z{height:clamp(46px,4.4vw,62px)}.fuss--kette .fuss__ende-z{height:38px}

/* Fuss: Kontaktzeile mittig zwischen der Doppellinie der Inschrift und dem Band (Robert 17.10.2026 «dass der Text mittig sitzt, von der Höhe her»).
   Abstand darüber und darunter gleich, Gesamthöhe wie vorher. */
.fuss--kette .fuss__kz{margin-top:clamp(28px,2.8vw,40px)}
.fuss--kette .fuss__band{margin-top:clamp(28px,2.8vw,40px)}