/* Walk on the Wild Side · Neubau 28.10.2026. Form vom Haus (Eckschild: Nacht, Goldlinie, Creme der Plakate), Niveau von Tasty (Tiefe, Dichte, Hochschweben).
   Bewegung nur über transform und opacity, nativer Scroll. Konzept: _kette/06-konzepter/KONZEPT-2026-10-28.md */
@font-face{font-family:"Prata";src:url(schrift/prata-latin.woff2) format("woff2");font-display:block}
@font-face{font-family:"Hanken";src:url(schrift/hanken-latin.woff2) format("woff2");font-weight:300 700;font-display:swap}

:root{
  --nacht:#130E0D; --nacht2:#1C1513; --nacht3:#261E1A; --nacht4:#33281F;
  --creme:#F2E9DC; --creme2:#E7DCCB; --creme3:#D9CBB6;
  --gold:#D8B264; --gold-l:rgba(216,178,100,.24); --gold-ll:rgba(216,178,100,.12);
  --rot:#F0323F; --blau:#1A00AA; --plakatrot:#D21C0A;
  --text:#EDE4D8; --text2:rgba(237,228,216,.74); --text3:rgba(237,228,216,.52);
  --dunkel:#1B1512; --dunkel2:rgba(27,21,18,.72);
  --titel:"Prata",Georgia,serif; --lauf:"Hanken","Helvetica Neue",Arial,sans-serif;
  --k:cubic-bezier(.22,.68,.26,1); --k2:cubic-bezier(.2,.62,.24,1);
  --schatten:0 30px 70px -24px rgba(0,0,0,.78), 0 10px 24px -12px rgba(0,0,0,.5);
  --schatten-k:0 18px 40px -18px rgba(0,0,0,.7);
  --rand:14px; --rand-g:18px;
  --innen:min(1240px, 92vw);
}
*{box-sizing:border-box}
html{background:var(--nacht);color:var(--text);font:400 17px/1.6 var(--lauf);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;scroll-behavior:auto}
body{margin:0;overflow-x:clip;background:var(--nacht)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400}
figure{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--nacht)}

/* ---------- Schrift */
.titel{font-family:var(--titel);font-weight:400;letter-spacing:-.005em;line-height:1.06}
.t-gross{font-size:clamp(40px,6.4vw,88px);line-height:1.02}
.t-kap{font-size:clamp(34px,4.4vw,60px)}
.t-mittel{font-size:clamp(26px,3vw,38px)}
.t-klein{font-size:clamp(21px,2.1vw,27px);line-height:1.2}
.etikett{font:500 11.5px/1 var(--lauf);letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.text{color:var(--text2);max-width:52ch}
.text b{font-weight:400;color:var(--text)}
.hell .text{color:rgba(27,21,18,.74)} .hell .text b{color:var(--dunkel)}
.hell{background:var(--creme);color:var(--dunkel)}
.hell .etikett{color:#A07F3A}
.kz{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.kz .uhr{font-family:var(--titel);font-size:21px;white-space:nowrap;color:var(--gold);letter-spacing:.02em}
.kz .was{font:500 11.5px/1 var(--lauf);letter-spacing:.17em;text-transform:uppercase;color:var(--text3)}
.hell .kz .was{color:rgba(27,21,18,.5)}
.kz i{display:block;width:34px;height:1px;background:var(--gold);opacity:.7}

.innen{width:var(--innen);margin:0 auto}

/* ---------- Tiefe: Platte, Kachel, Knopf (Form des Eckschilds: Kasten mit Goldlinie) */
.platte{background:var(--nacht2);border-radius:var(--rand-g);box-shadow:inset 0 0 0 1px var(--gold-l),var(--schatten);position:relative}
.platte.hell{background:var(--creme);box-shadow:inset 0 0 0 1px rgba(160,127,58,.35),var(--schatten)}
.kachel{position:relative;border-radius:var(--rand);overflow:hidden;box-shadow:var(--schatten);background:var(--nacht3);transform:translateZ(0)}
.kachel img,.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto{position:relative;overflow:hidden;background:var(--nacht3) center/cover no-repeat;background-image:var(--lq)}
.kachel{background-image:var(--lq);background-size:cover;background-position:center}
.foto img,.kachel img{transform:scale(1.12);transform-origin:center;transition:transform 1.7s var(--k)}
.da .foto img,.da .kachel img,.foto.da img,.kachel.da img{transform:scale(1)}
.leise{transition:transform 2.8s var(--k)}
.leise:hover{transform:translateY(-6px);transition-duration:2.2s}

.knopf{display:inline-flex;align-items:center;gap:16px;height:56px;padding:0 8px 0 26px;border-radius:14px;background:var(--nacht3);color:var(--text);
  box-shadow:inset 0 0 0 1px var(--gold-l),inset 0 1px 0 rgba(255,255,255,.06),0 18px 34px -16px rgba(0,0,0,.8);font:500 12.5px/1 var(--lauf);letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;
  transition:transform 2.2s var(--k),box-shadow 2.2s var(--k);cursor:pointer;border:0}
.knopf i{width:40px;height:40px;border-radius:50%;background:var(--gold);color:var(--nacht);display:grid;place-items:center;flex:none;box-shadow:0 6px 14px -6px rgba(0,0,0,.7)}
.knopf i svg{width:17px;height:17px;transition:transform 1.6s var(--k)}
.knopf:hover{transform:translateY(-3px);transition-duration:1.6s} .knopf:hover i svg{transform:translateX(3px)}
.knopf.rot{background:var(--rot);color:var(--creme);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 20px 40px -16px rgba(240,50,63,.55)}
.knopf.rot i{background:var(--creme);color:var(--rot)}
.knopf.hellk{background:var(--creme);color:var(--dunkel);box-shadow:inset 0 0 0 1px rgba(160,127,58,.35),0 18px 34px -16px rgba(0,0,0,.4)}
.knopf.hellk i{background:var(--dunkel);color:var(--creme)}
.knopf.klein{height:44px;padding-left:18px;gap:12px;font-size:11.5px} .knopf.klein i{width:32px;height:32px} .knopf.klein i svg{width:14px;height:14px}
.knoepfe{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.weiter{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--lauf);letter-spacing:.15em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--gold-l);padding-bottom:6px}
.weiter svg{width:15px;height:15px;transition:transform 1.4s var(--k)} .weiter:hover svg{transform:translateX(4px)}
.hell .weiter{color:#8F6E2E;border-color:rgba(143,110,46,.3)}

/* ---------- Bewegung: Hochschweben, Schlitz, Fläche, Staffel, Schleier */
.auf .sw,.sw.auf{opacity:0;transform:translateY(64px);transition:transform 1.25s var(--k),opacity .9s var(--k);transition-delay:calc(var(--i,0)*.11s)}
.da .sw,.sw.da{opacity:1;transform:none}
.auf .flaeche > *{opacity:0;transform:translateY(56px);transition:transform 1.25s var(--k),opacity .9s var(--k)}
.da .flaeche > *{opacity:1;transform:none}
.auf .staffel > *{opacity:0;transform:translateY(56px);transition:transform 1.2s var(--k),opacity .8s var(--k);transition-delay:calc(var(--n,0)*.13s)}
.da .staffel > *{opacity:1;transform:none}
.zl .z{display:block;overflow:hidden;padding:0 .08em;margin:0 -.08em}
.zl .z>span{display:block;transform:translateY(112%);transition:transform 1.25s var(--k);transition-delay:calc(var(--i,0)*.11s)}
.da .zl .z>span,.zl.da .z>span{transform:none}
.schleier{position:absolute;inset:0;background:var(--nacht);opacity:.6;transition:opacity 1.9s var(--k2);pointer-events:none;z-index:1}
.da .schleier{opacity:0}
.ruhig .sw,.ruhig .flaeche>*,.ruhig .staffel>*,.ruhig .zl .z>span{opacity:1!important;transform:none!important;transition:none!important}
.ruhig .schleier{opacity:0!important} .ruhig .foto img,.ruhig .kachel img{transform:none!important}
@media (prefers-reduced-motion:reduce){.sw,.flaeche>*,.staffel>*,.zl .z>span{opacity:1!important;transform:none!important;transition:none!important}.schleier{display:none}.foto img,.kachel img{transform:none!important}}

/* ---------- Leiste */
.leiste{position:fixed;inset:0 0 auto 0;z-index:40;height:76px;display:flex;align-items:center;transform:translateY(0);transition:transform .9s var(--k),background .6s;background:var(--nacht);box-shadow:inset 0 -1px 0 var(--gold-ll)}
.leiste.weg{transform:translateY(-110%)}
.leiste .innen{display:flex;align-items:center;gap:30px}
.leiste .logo{display:block;height:38px;color:var(--rot);flex:none} .leiste .logo svg{height:100%;width:auto;display:block}
.leiste nav{display:flex;gap:26px;margin-left:auto}
.leiste nav a{font:500 11.5px/1 var(--lauf);letter-spacing:.16em;text-transform:uppercase;color:var(--text2);padding:8px 0;position:relative}
.leiste nav a.aktiv,.leiste nav a:hover{color:var(--text)}
/* Leuchtschrift (Wahl Robert 31.10.2026, Fassung 15): das aktive Wort glüht wie eine Leuchtröhre */
.leiste nav a{color:rgba(237,228,216,.55);transition:color .5s,text-shadow .5s}
.leiste nav a.aktiv,.leiste nav a:hover{color:#FFE2A8;text-shadow:0 0 6px rgba(255,190,90,.9),0 0 16px rgba(255,170,60,.5)}
.leiste .knopf{margin-left:10px}
.logo svg path{fill:currentColor}

/* ---------- Kapitel-Grundmass */
.kap{padding:clamp(72px,9vw,120px) 0;position:relative}
.kap + .kap{padding-top:0}
.kopf{max-width:60ch}
.kopf .text{margin-top:20px}
.kopf .knoepfe{margin-top:30px}

/* ---------- 1 Auftakt: Das Licht geht an */
.auftakt{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--nacht)}
.auftakt .at-bild{position:absolute;inset:0 0 0 18%;background:var(--nacht3) center/cover no-repeat;background-image:var(--lq)}
.auftakt .at-bild img{width:100%;height:100%;object-fit:cover;object-position:62% 38%;transform:scale(1.08);transition:transform 2.6s var(--k2)}
.auftakt.da .at-bild img{transform:scale(1)}
.auftakt .at-hof{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(19,14,13,1) 0%,rgba(19,14,13,1) 16%,rgba(19,14,13,.86) 30%,rgba(19,14,13,.4) 52%,rgba(19,14,13,.05) 70%,rgba(19,14,13,0) 82%),linear-gradient(0deg,rgba(19,14,13,.9) 0%,rgba(19,14,13,0) 42%)}
.auftakt .schleier{z-index:3}
.auftakt .innen{position:relative;z-index:4;padding:140px 0 70px}
.at-logo{display:block;width:clamp(120px,14vw,180px);color:var(--rot);margin-bottom:34px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
.at-logo svg{width:100%;height:auto;display:block}
.at-titel{font-size:clamp(42px,6.6vw,92px);line-height:1;text-shadow:0 6px 40px rgba(0,0,0,.55);max-width:11ch}
/* Unterlängen (g in «magst») nicht abschneiden: der Schlitz reicht tiefer, der Zeilenabstand bleibt (Robert 29.10.2026) */
.at-titel .zl .z{padding-bottom:.18em;margin-bottom:-.18em}
/* auch in allen anderen Titeln (Robert 29.10.2026: «das g ist abgeschnitten», «Die lange Tafel.») */
.zl .z{padding-bottom:.2em;margin-bottom:-.2em}
.auftakt:not(.da) .at-titel .zl .z>span{transform:translateY(135%)}
.at-satz{margin-top:24px;max-width:46ch;font-size:clamp(17px,1.5vw,20px);color:var(--text);text-shadow:0 2px 24px rgba(0,0,0,.7)}
.at-zeile{margin-top:22px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.at-zeile .etikett{color:var(--gold)} .at-zeile .trenner{width:1px;height:14px;background:var(--gold-l)}
.at-zeile .ort{font:500 11.5px/1 var(--lauf);letter-spacing:.17em;text-transform:uppercase;color:var(--text2)}
.auftakt .knoepfe{margin-top:34px}
.at-weiter{position:absolute;right:4vw;bottom:34px;z-index:4;font-family:var(--titel);font-size:16px;color:var(--text3);letter-spacing:.02em}

/* ---------- 2 Das Plakat im Mosaik */
.mosaik{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(230px,29vw,340px);gap:14px}
.mosaik .kachel{min-height:0}
.mo-a{grid-column:1;grid-row:1/3}
.mo-plakat{grid-column:2/4;grid-row:1/3}
.mo-b{grid-column:4;grid-row:1} .mo-c{grid-column:4;grid-row:2}
.mo-d{grid-column:1/3;grid-row:3} .mo-e{grid-column:3;grid-row:3} .mo-f{grid-column:4;grid-row:3}
.plakat{background:var(--creme);color:var(--dunkel);border-radius:var(--rand);box-shadow:inset 0 0 0 1px rgba(160,127,58,.3),var(--schatten);padding:clamp(26px,3.4vw,46px);display:flex;flex-direction:column;position:relative;overflow:hidden}
.plakat .logo{display:block;width:64px;color:var(--rot);margin-bottom:auto} .plakat .logo svg{width:100%;height:auto;display:block}
.plakat h2{font-size:clamp(28px,3.1vw,44px);line-height:1.04;margin-top:22px}
.plakat .text{margin-top:16px;color:rgba(27,21,18,.74);max-width:44ch;font-size:16px}
.plakat .fakten{margin-top:20px;display:grid;grid-template-columns:minmax(0,1fr);gap:9px;padding-top:16px;border-top:1px solid rgba(160,127,58,.3)}
.plakat .fakten div{font-size:14.5px;line-height:1.45;color:rgba(27,21,18,.8);display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;align-items:baseline}
.plakat .fakten .etikett{color:#A07F3A}
.plakat .fakten .zahl{font-family:var(--titel);font-size:26px;line-height:1;color:var(--dunkel)}
/* Die Bar seit 29.10.2026: Bildwand von Rand zu Rand, in der Mitte das Eckschild (Wahl Robert: Fassung 4 mit dem Schild von 12). Nur transform, deckend. */
.wand{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:clamp(220px,21vw,300px) minmax(clamp(380px,32vw,460px),auto) clamp(220px,21vw,300px);gap:6px;
  transform-origin:50% 50%;transition:transform 2.2s cubic-bezier(.22,1,.36,1)}
.wand .kachel{border-radius:4px;transition:transform 1.5s cubic-bezier(.22,1,.36,1)} .wand .kachel img{position:absolute;inset:0}
.wand .wd-allein{grid-column:1;grid-row:2}
.eckschild{grid-column:2/6;grid-row:2;border-radius:4px;min-width:0;background:var(--nacht2);color:var(--text);box-shadow:inset 0 0 0 1px var(--gold-ll),var(--schatten);
  transition:transform 1.5s cubic-bezier(.22,1,.36,1)}
.eckschild>*{position:relative;z-index:1}
.eckschild .logo{flex:none}
.eckschild h2{font-size:clamp(40px,5vw,76px);line-height:.98;margin-top:22px}
.eckschild h2 .z{padding-bottom:.2em;margin-bottom:-.2em}
.es-unten{margin-top:22px}
.es-fakten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(26px,2.6vw,36px)}
.es-fakten b{display:block;font-family:var(--titel);font-weight:400;font-size:clamp(30px,3vw,44px);line-height:1;color:var(--gold);margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--gold-l)}
.es-fakten p{font-size:16px;line-height:1.55;color:var(--text2)}
.eckschild .text{margin:0;color:var(--text2);font-size:clamp(17px,1.35vw,19.5px);line-height:1.62;max-width:68ch}
.eckschild .fakten{margin-top:0;border-color:var(--gold-l)} .eckschild .fakten div{color:var(--text);font-size:15px} .eckschild .fakten .etikett{color:var(--gold)}
.es-linie{position:absolute!important;inset:0;width:100%;height:100%;z-index:0!important;pointer-events:none;overflow:visible}
.es-linie rect{width:calc(100% - 18px);height:calc(100% - 18px);fill:none;stroke:var(--gold);stroke-width:1.2;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 2.6s cubic-bezier(.22,1,.36,1) .3s}
.da .es-linie rect{stroke-dashoffset:0}
.auf .wand{transform:scale(1.06)} .da .wand{transform:none}
.auf .eckschild{transform:translateY(60px)} .da .eckschild{transform:none}
.bar-wand .ueber{margin-top:clamp(56px,7vw,90px)}
.ruhig .wand,.ruhig .eckschild{transform:none!important} .ruhig .es-linie rect{stroke-dashoffset:0}
@media (max-width:900px){
  .wand{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;margin:0 16px}
  .wand .kachel{grid-column:auto;grid-row:auto;aspect-ratio:3/4}
  .wand .wd-allein,.wand .wd-ende{grid-column:1/-1;aspect-ratio:16/10}
  .eckschild{grid-column:1/-1;grid-row:auto}
  .es-fakten{grid-template-columns:minmax(0,1fr)}
  .eckschild h2{font-size:clamp(28px,8.2vw,44px)}
}
.ueber{margin:clamp(56px,7vw,90px) auto 0;text-align:center;font-family:var(--titel);font-size:clamp(22px,2.4vw,30px);color:var(--text2);max-width:30ch}
.ueber.hellu{color:rgba(27,21,18,.62)}

/* ---------- 3 Das Gespräch */
.gespraech{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4.5vw,72px);align-items:start}
.ge-bild{aspect-ratio:3/4}
.ge-fragen{margin-top:34px;display:grid;gap:4px}
.ge-frage{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:baseline;gap:16px;padding:16px 0;border-top:1px solid var(--gold-ll)}
.ge-frage:last-child{border-bottom:1px solid var(--gold-ll)}
.ge-frage .etikett{color:var(--text3)}
.wahl{display:flex;flex-wrap:wrap;gap:6px 18px}
.wahl button{background:none;border:0;padding:4px 0;font-family:var(--titel);font-size:clamp(19px,1.9vw,24px);color:var(--text3);cursor:pointer;position:relative;transition:color .5s}
.wahl button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--k)}
.wahl button.an{color:var(--text)} .wahl button.an::after{transform:none}
.wahl button:hover{color:var(--text)}
.ge-antwort{margin-top:30px;display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:24px;align-items:center}
.ge-antwort .etikett{display:block;margin-bottom:12px}
.ge-satz{font-family:var(--titel);font-size:clamp(22px,2.3vw,30px);line-height:1.2;min-height:2.4em}
.ge-satz .z{display:block;overflow:hidden}.ge-satz .z>span{display:block;transition:transform 1.1s var(--k)}
.ge-satz.wechsel .z>span{transform:translateY(112%);transition:none}
.ge-glas{aspect-ratio:3/4;border-radius:var(--rand);overflow:hidden;box-shadow:var(--schatten);position:relative;background:var(--nacht3)}
.ge-glas .foto{position:absolute;inset:0;transform:translateY(100%);transition:transform 1.2s var(--k)}
.ge-glas .foto.an{transform:none;z-index:2}
.ge-glas .foto.war{transform:none;z-index:1}
.ge-glas .foto img{transform:none}
.ge-zitat{margin-top:34px;padding-left:22px;border-left:1px solid var(--gold-l);font-family:var(--titel);font-size:clamp(19px,1.9vw,24px);color:var(--text2);max-width:38ch}
.gespraech .knoepfe{margin-top:34px}
/* Drinks: «Das Gespräch» und «Wie Momo arbeitet» als ein Weg (Robert 29.10.2026, Fassung 01). Goldlinie mittig, Stationen im Zickzack;
   die mittlere Linie läuft in den Satz «Und so entsteht daraus ein Drink.», darunter gleich die Techniken, kein Leerraum dazwischen. */
.g-kopf{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,4.5vw,72px);align-items:end;margin-bottom:clamp(34px,4vw,54px)}
.g-kopf .text,.g-kopf .titel.t-kap + .text{margin-top:20px}
.g-kopf .ge-zitat{margin:0 0 6px;font-size:clamp(21px,2.3vw,30px);color:var(--text);max-width:none}
.w1-seite .kachel img{transform:none}
.w1-weg{position:relative}
.w1-linie{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--gold-ll)}
.w1-linie i{position:absolute;inset:0;background:var(--gold);transform:scaleY(0);transform-origin:top}
.w1-st{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.w1-st + .w1-st{margin-top:-56px}
.w1-st .kachel{aspect-ratio:4/3;width:min(100%,470px)}
.w1-l .kachel{justify-self:end} .w1-r .kachel{order:2}
.w1-satz{max-width:32ch} .w1-r .w1-satz{text-align:right;justify-self:end}
.w1-satz .etikett{display:block;margin-bottom:10px}
.w1-satz .titel{font-size:clamp(24px,2.6vw,34px);line-height:1.15;text-wrap:balance}
.w1-satz .text{margin-top:10px;font-size:15px}
.w1-punkt{position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--nacht);box-shadow:inset 0 0 0 2px var(--gold-l);transition:background .5s,box-shadow .5s}
.w1-st.an .w1-punkt{background:var(--gold);box-shadow:0 0 0 5px var(--gold-ll)}
.w1-seite#gespraech{padding-bottom:0} .w1-seite#technik{padding-top:0}
.w1-bruecke{padding:clamp(44px,5vw,72px) 0 clamp(64px,7vw,96px)} .w1-bruecke .w1-linie{bottom:auto;height:calc(clamp(44px,5vw,72px) + 30px)}
.w1-bruecke .ueber{position:relative;margin:0 auto;padding:16px 28px;background:var(--nacht);width:max-content;max-width:min(30ch,86vw)}
@media (max-width:900px){
  .g-kopf{grid-template-columns:minmax(0,1fr)}
  .w1-linie{left:6px} .w1-st,.w1-st + .w1-st{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:34px;padding-left:30px}
  .w1-bruecke{padding-left:30px} .w1-bruecke .ueber{margin:0;text-align:left;padding:10px 0;background:none}
  .w1-st .kachel{width:100%} .w1-r .kachel{order:0} .w1-r .w1-satz{text-align:left;justify-self:start} .w1-punkt{left:6px;top:20px}
}
.ge-zitat small{display:block;margin-top:10px;font:500 11.5px/1 var(--lauf);letter-spacing:.17em;text-transform:uppercase;color:var(--text3)}

/* ---------- 3 An der Theke seit 29.10.2026: der Weg nach unten (Fassung 13). Fünf Fotos im Zickzack, die Goldlinie läuft beim Scrollen mit. */
.th-kopf{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,4.5vw,72px);align-items:end;margin-bottom:clamp(44px,5vw,70px)}
.th-kopf .ge-zitat{margin:0 0 6px;font-size:clamp(22px,2.4vw,32px);color:var(--text);max-width:none}
.th-weg{position:relative}
.th-linie{position:absolute;left:50%;top:0;bottom:28px;width:1px;background:var(--gold-ll)}
.th-linie i{position:absolute;inset:0;background:var(--gold);transform:scaleY(0);transform-origin:top}
.th-st{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.th-st + .th-st{margin-top:-56px}
.th-st .kachel{aspect-ratio:4/3;width:min(100%,470px)}
.th-l .kachel{justify-self:end} .th-r .kachel{order:2}
.th-satz{max-width:30ch}
.th-r .th-satz{text-align:right;justify-self:end}
.th-satz .titel{font-size:clamp(24px,2.6vw,34px);line-height:1.15;text-wrap:balance}
.th-zu{margin-top:10px;font-size:15px;line-height:1.55;color:var(--text2);text-wrap:pretty}
.th-punkt{position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--nacht);box-shadow:inset 0 0 0 2px var(--gold-l);transition:background .5s,box-shadow .5s}
.th-st.an .th-punkt{background:var(--gold);box-shadow:0 0 0 5px var(--gold-ll)}
.th-fuss{margin-top:clamp(40px,5vw,64px);display:flex;justify-content:center}
/* Wie beim Rivage (Karriere, Ende der Goldlinie): die Linie endet im Knopf «Alle Drinks». Kommt sie an, leuchtet der Knopf golden auf und hebt sich,
   dann fliegt «Und irgendwann schaust du nach oben.» von unten herein (29.10.2026 abends). */
.th-fuss .knoepfe{position:relative;z-index:3}
.th-fuss .knopf{position:relative}
.th-fuss .knopf::after{content:"";position:absolute;inset:-1px;border-radius:15px;box-shadow:inset 0 0 0 1px var(--gold);opacity:0;transition:opacity 1s ease;pointer-events:none}
#drinks.frei .th-fuss .knopf{transform:translateY(-4px)}
#drinks.frei .th-fuss .knopf::after{opacity:1}
#drinks>.ueber{opacity:0;transform:translateY(110px);transition:opacity .8s ease .25s,transform 1.3s cubic-bezier(.16,1,.3,1) .25s}
#drinks.frei>.ueber{opacity:1;transform:none}
.ruhig #drinks>.ueber{opacity:1!important;transform:none!important}
.ruhig .th-linie i{transform:none}
@media (max-width:900px){
  .th-kopf{grid-template-columns:minmax(0,1fr);gap:24px}
  .th-linie{left:6px}
  .th-st,.th-st + .th-st{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:34px;padding-left:30px}
  .th-st .kachel{width:100%} .th-r .kachel{order:0}
  .th-r .th-satz{text-align:left;justify-self:start}
  .th-punkt{left:6px;top:20px}
}

/* ---------- Fenster: Bild steht, Seite zieht darüber */
.fenster{position:relative;height:118vh;clip-path:inset(0);margin:clamp(72px,9vw,120px) 0}
.fenster .foto{position:sticky;top:0;height:100vh;width:100%}
.fenster .foto img{transform:none}
.fenster .fe-hof{position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 52%,rgba(19,14,13,.46),rgba(19,14,13,.08) 70%,rgba(19,14,13,0))}
.fenster .fe-satz{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 6vw;font-family:var(--titel);font-size:clamp(30px,4.4vw,62px);line-height:1.08;color:var(--creme);text-shadow:0 4px 30px rgba(0,0,0,.6)}
.fenster .fe-satz .zl{max-width:18ch}
.kap + .fenster,.kap + .fk{margin-top:0}
/* Mosaik (Wahl Robert 29.10.2026): das Bild zur Eröffnung in zwölf Stücken, die aus verschiedenen Tiefen steigen und sich zum Bild schliessen. Nur transform. */
/* Seit 29.10.2026 abends schneller und ohne Warten (Robert: «alle ein bisschen schneller und smoother»): kurze Welle von oben Mitte, 1,2 s, weich auslaufend. */
.gewoelbe{position:relative;height:100vh;min-height:620px;margin:0}
/* Laufband unter dem Gewölbe statt des breiten Balkens: schmal, Gold auf Nacht, feine Goldkanten (wie das Band bei Dirty Chicken) */
.wb-band{position:relative;height:44px;overflow:hidden;display:flex;align-items:center;background:var(--nacht2);box-shadow:inset 0 1px 0 var(--gold-l),inset 0 -1px 0 var(--gold-l)}
.wb-band-zug{display:flex;flex:none;animation:wbBand 70s linear infinite;will-change:transform}
.wb-band-zug p{display:flex;align-items:center;flex:none;margin:0;white-space:nowrap}
.wb-band span{padding:0 clamp(20px,2.4vw,36px);font:500 12px/1 var(--lauf);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.wb-band i{flex:none;width:5px;height:5px;background:var(--gold);opacity:.6;transform:rotate(45deg)}
@keyframes wbBand{to{transform:translateX(-50%)}}
.ruhig .wb-band-zug{animation:none}
.wb-band + .fk{margin-top:0}
@media (max-width:760px){.wb-band{height:38px}.wb-band span{font-size:11px;letter-spacing:.24em;padding:0 18px}}
.gw-feld{position:absolute;inset:0;overflow:hidden}
.gw-t{position:absolute;left:calc(var(--c)*25%);top:calc(var(--r)*33.3333%);width:calc(25% + 1px);height:calc(33.3333% + 1px);overflow:hidden;background:var(--nacht3);
  transform:translateY(var(--v)) scale(.97);transition:transform 1.2s cubic-bezier(.22,1,.36,1) var(--d,0s)}
.gewoelbe.da .gw-t{transform:none}
.gw-t::after{content:"";position:absolute;inset:0;border:3px solid var(--nacht)}
.gewoelbe .gw-satz .zl .z>span{transition-delay:calc(.55s + var(--i,0)*.11s)}
.gw-t img{position:absolute;max-width:none;width:calc(400% - 4px);height:calc(300% - 3px);left:calc(var(--c)*-100% - var(--c)*1px);top:calc(var(--r)*-100% - var(--r)*1px);object-fit:cover;filter:brightness(.72)}
.gw-satz{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:0 4vw;font-family:var(--titel);font-size:clamp(48px,8.4vw,128px);line-height:1.02;color:var(--creme);text-shadow:0 4px 34px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.5);text-wrap:balance}
/* Schatten hinter dem Satz wie bei den Fenstern (Robert 29.10.2026); erst wenn die Stücke stehen, damit nichts unter ihm läuft */
.gw-feld::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(58% 46% at 50% 52%,rgba(19,14,13,.62),rgba(19,14,13,.18) 70%,rgba(19,14,13,0));
  opacity:0;transition:opacity 1s ease 1.4s}
.gewoelbe.da .gw-feld::after{opacity:1}
.ruhig .gw-feld::after{opacity:1;transition:none}
.ruhig .gw-t{transform:none!important;transition:none!important}

/* ---------- 5 Seit 2017: die Zeile an der Theke (hell) */
.hell.kap{padding:clamp(72px,9vw,120px) 0}
.theke{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,60px);align-items:stretch}
.jahre{display:grid;gap:0}
.jahr{display:grid;grid-template-columns:120px minmax(0,1fr);gap:6px 22px;padding:20px 0;border-top:1px solid rgba(160,127,58,.3);align-items:start}
.jahr:first-child{border-top:0;padding-top:0} .jahr:last-child{padding-bottom:0}
.jahr .zahl{grid-row:1/3}
.jahr .zahl{font-family:var(--titel);font-size:clamp(44px,5vw,72px);line-height:1;color:var(--dunkel)}
.jahr .etikett{display:block;margin:6px 0 2px}
.jahr p{font-size:15.5px;line-height:1.55;color:rgba(27,21,18,.74)}
.theke-bild{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px}
.theke-bild .kachel{aspect-ratio:auto;min-height:280px}
.wert{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;background:var(--dunkel);color:var(--creme);border-radius:var(--rand);padding:18px 22px;box-shadow:var(--schatten)}
.wert .zahl{font-family:var(--titel);font-size:52px;line-height:1}
.wert .etikett{color:var(--gold);display:block;margin-bottom:5px}
.wert p{font-size:14.5px;color:var(--text2)}

/* ---------- Fenster in der festgelegten Grösse (Robert 29.10.2026, Mass wie Culinarium): Ausschnitt höchstens 67 % der Bildschirmhöhe, Bild und Satz stehen fest, die Seite zieht darüber */
.fk{position:relative;height:min(67vh,624px);clip-path:inset(0);-webkit-clip-path:inset(0);margin:clamp(72px,9vw,120px) 0;background:var(--nacht)}
.fk .foto{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;visibility:hidden}
.fk.an .foto{visibility:visible}
.fk .foto img{transform:none}
.fk .fe-hof{position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 52%,rgba(19,14,13,.5),rgba(19,14,13,.1) 70%,rgba(19,14,13,0))}
.fk .fe-satz{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 6vw;font-family:var(--titel);font-size:clamp(34px,4.8vw,68px);line-height:1.08;color:var(--creme);text-shadow:0 4px 30px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.5)}
.fk .fe-satz .zl{max-width:18ch}
.fk + .chronik{padding-top:clamp(56px,7vw,96px)}   /* Luft unter dem Bildfenster (Robert 01.11.2026) */
.gewoelbe:has(+ .fk){margin-bottom:0}
.gewoelbe + .fk{margin-top:0}
@media (max-width:760px){.fk{height:58svh}.fk .fe-satz{font-size:38px}}

/* ---------- 5b Seit 2017 als Schachbrett (Wahl Robert 29.10.2026): Fotos und Jahre im geschlossenen Raster, Fugen wie im Mosaik */
.chronik{position:relative;background:var(--nacht);padding:clamp(72px,9vw,120px) 0 0}
.fenster + .chronik{padding-top:0}
.ch-kopf{text-align:center;margin-bottom:clamp(36px,4.4vw,60px)}
.ch-kopf .kz{justify-content:center}
.ch-kopf .titel{color:var(--creme);font-size:clamp(44px,6.6vw,96px)}
.ch-brett{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(46vh,auto);gap:6px;background:var(--nacht)}
.ch-brett .foto{height:100%;min-height:46vh}
.ch-z{padding:clamp(22px,2.6vw,40px);display:flex;flex-direction:column;justify-content:flex-end}
.ch-jz{display:block;font-family:var(--titel);font-size:clamp(46px,5vw,76px);line-height:1;margin-bottom:14px;color:var(--dunkel)}
.ch-z .etikett{display:block;margin-bottom:10px}
.ch-z p{font-size:15px;line-height:1.58;color:rgba(27,21,18,.74);max-width:44ch}
.ch-nz{background:var(--nacht2);box-shadow:inset 0 0 0 1px var(--gold-l);justify-content:center}
.ch-nz .ch-jz{font-size:clamp(90px,10vw,150px);color:var(--gold);margin-bottom:12px}
.ch-nz .etikett{color:var(--gold)} .ch-nz p{color:var(--text2);font-size:14.5px}
.chronik .ueber{margin-top:clamp(56px,7vw,90px)}
@media (max-width:760px){.ch-brett{grid-template-columns:1fr 1fr}}

/* ---------- Die lange Tafel als Speisenfolge (Wahl Robert 29.10.2026, Fassung 3): links drei Kacheln, in der Mitte die Karte im Rahmen des Eckschilds
   mit den vier Punkten wie Gänge einer gedruckten Menükarte, rechts die Tafel von oben. Links und rechts gleich breit, die Mitte kaum breiter. */
.tk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr) minmax(0,1fr);gap:14px;align-items:stretch}
.innen.tk{width:min(1560px,96vw);min-height:calc(100vh - 56px);min-height:calc(100svh - 56px)}
#tafel{padding-top:28px}
.fenster:has(+ #tafel),.fk:has(+ #tafel),.fk:has(+ #klassiker){margin-bottom:0}   /* kein dunkler Balken zwischen Fenster und hellem Abschnitt (Drinks 30.10.2026) */
#tafel .ueber{margin-top:clamp(44px,4.6vw,68px)}
#tafel{padding-bottom:clamp(44px,4.6vw,68px)}
.tk-links{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:14px}
.tk-links .kachel{height:100%;min-height:180px}
.tk-rechts{height:100%;min-height:520px}
.tk-links .kachel,.tk-rechts{position:relative}
.tk-links .kachel img,.tk-rechts img{position:absolute;inset:0;width:100%;height:100%}
.tk-karte{position:relative;background:#120D0C;border-radius:var(--rand-g);box-shadow:inset 0 0 0 1px rgba(216,178,100,.55),var(--schatten);padding:11px}
.tk-rahmen{height:100%;border:1px solid rgba(216,178,100,.28);border-radius:12px;padding:clamp(26px,2.6vw,40px) clamp(18px,2vw,30px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.tk-karte .kz{justify-content:center;margin-bottom:16px}
.tk-karte .titel{font-size:clamp(36px,3.5vw,52px);line-height:1.04}
.tk-zier{display:block;width:40px;height:1px;background:var(--gold);margin:18px auto}
.tk-karte .text{font-size:15px;line-height:1.7;color:var(--text2);max-width:36ch;margin:0 auto}
.tk-gaenge{margin-top:22px;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.tk-gang{padding:16px 12px 15px}
.tk-gang:nth-child(odd){border-right:1px solid rgba(216,178,100,.3)}
.tk-gang:nth-child(-n+2){border-bottom:1px solid rgba(216,178,100,.3)}
.tk-gang .etikett{display:block;font-family:var(--titel);font-size:clamp(19px,1.6vw,23px);letter-spacing:.01em;text-transform:none;line-height:1.1;color:var(--gold);margin-bottom:8px}
.tk-gang p{font-size:13.5px;line-height:1.55;color:var(--text2);max-width:22ch;margin:0 auto}
.tk-karte .knoepfe{margin-top:22px;justify-content:center}
@media (max-width:900px){
  .tk{grid-template-columns:1fr} .innen.tk{min-height:0}
  .tk-karte{order:1} .tk-rechts{order:2;min-height:0;aspect-ratio:4/5} .tk-links{order:3;grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}
  .tk-links .kachel{min-height:0;height:auto;aspect-ratio:3/4}
  .tk-gang p{font-size:14.5px}
}

/* ---------- 6 Lauter: der Flyer auf dem Tresen */
.lauter{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,3fr);gap:clamp(24px,3.5vw,54px);align-items:center}
.flyer{background:var(--creme);color:var(--blau);border-radius:10px;box-shadow:0 40px 80px -30px rgba(0,0,0,.85),0 10px 24px -10px rgba(0,0,0,.5);padding:14px;transform:rotate(-2deg);position:relative}
.flyer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;border-radius:10px 0 0 10px;background:repeating-linear-gradient(180deg,var(--plakatrot) 0 14px,var(--creme) 14px 24px);opacity:.9}
.flyer .foto{aspect-ratio:3/4;border-radius:6px;overflow:hidden}
.flyer .fl-unten{padding:16px 6px 6px 12px}
.flyer .fl-reihe{font:500 11px/1 var(--lauf);letter-spacing:.17em;text-transform:uppercase;color:var(--plakatrot)}
.flyer .fl-name{font-family:var(--titel);font-size:clamp(22px,2.2vw,28px);line-height:1.05;margin-top:8px;color:var(--blau)}
.flyer .fl-datum{margin-top:8px;font-size:14px;color:rgba(26,0,170,.75)}
.lauter-bilder{display:grid;gap:14px}
.lauter-bilder .kachel{aspect-ratio:4/5}
.lauter .setliste{margin-top:26px;display:grid;gap:0}
/* 23:00 Lauter seit 29.10.2026: Flyer links gross, rechts Text mit Zeitleiste 21 bis 1 Uhr (Wahl Robert: Fassung 9). Nur transform. */
.lu{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5vw,80px);align-items:center}
.lu-flyer{max-width:520px;width:100%;justify-self:center} .da .lu-flyer.sw,.ruhig .lu-flyer.sw{transform:rotate(-2deg)!important}
.lu-r h2{font-size:clamp(40px,4.8vw,72px);line-height:1.02} .lu-r h2 .z{padding-bottom:.18em;margin-bottom:-.18em}
.lu-r .text{font-size:clamp(17px,1.35vw,19.5px);line-height:1.62;margin-top:22px}
.lu-r .knoepfe{margin-top:30px}
.lu-zeit{margin-top:30px} .lu-zeit .etikett{display:block;margin-bottom:16px}
.lu-strahl{position:relative;height:46px;border-top:1px solid var(--gold-ll)}
.lu-strahl>i{position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 2.4s cubic-bezier(.22,1,.36,1) .5s}
.da .lu-strahl>i{transform:none} .ruhig .lu-strahl>i{transform:none}
.lu-strahl span{position:absolute;top:-6px;left:calc(var(--x) * 25%);width:0}
.lu-strahl span::before{content:"";position:absolute;left:-5px;top:0;width:10px;height:10px;border-radius:50%;background:var(--nacht);box-shadow:inset 0 0 0 2px var(--gold)}
.lu-strahl b{position:absolute;top:20px;left:0;transform:translateX(-50%);white-space:nowrap;font-family:var(--titel);font-weight:400;font-size:18px;color:var(--text)}
.lu-strahl span:first-of-type b{transform:none} .lu-strahl span:last-of-type b{transform:translateX(-100%)}
.lu-bilder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(28px,3vw,40px)}
.lu-bilder .kachel{aspect-ratio:4/3} .lu-bilder .kachel img{position:absolute;inset:0}
@media (max-width:900px){.lu{grid-template-columns:minmax(0,1fr)}}
.setliste div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;padding:9px 0;border-top:1px solid var(--gold-ll);font-size:15px;color:var(--text2)}
.setliste div:last-child{border-bottom:1px solid var(--gold-ll)}
.setliste b{font-weight:400;color:var(--text)} .setliste span{font-family:var(--titel);color:var(--gold)}

/* ---------- 8 Die lange Tafel */
.tafel{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.tafel-bilder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.tafel-bilder .kachel:first-child{grid-column:1/3;aspect-ratio:16/10}
.tafel-bilder .kachel{aspect-ratio:1}
.tafel .kopf{padding-left:clamp(0px,2vw,30px);border-left:1px solid var(--gold-ll)}
.zeilen{margin-top:26px;display:grid;gap:0}
.zeilen div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid var(--gold-ll);font-size:15.5px;color:var(--text2)}
.zeilen div:last-child{border-bottom:1px solid var(--gold-ll)}
.zeilen .etikett{padding-top:4px}

/* ---------- 9 Im selben Haus: drei Schilder */
.schilder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.schild{padding:16px;display:grid;grid-template-columns:140px minmax(0,1fr);gap:22px;align-items:center;color:var(--text)}
.schild.breit{grid-column:1/3;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:30px}
.schild .kachel{aspect-ratio:1;border-radius:10px}
.schild.breit .kachel{aspect-ratio:4/3}
.schild h3{font-size:clamp(24px,2.4vw,34px)}
.schild.breit h3{font-size:clamp(28px,3vw,42px)}
.schild .etikett{display:block;margin-bottom:10px}
.schild .text{margin-top:10px;font-size:15.5px}
.schild .weiter{margin-top:18px}
.schild .sh-text{padding:10px 10px 10px 0}

/* ---------- Fuss: Bis 2 Uhr */
.fuss{padding:clamp(72px,9vw,120px) 0 40px;border-top:1px solid var(--gold-ll)}
.fuss-oben{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,60px);align-items:stretch}
.fuss-bild{aspect-ratio:auto;min-height:440px;height:100%}
.fuss-rechts{display:grid;grid-template-rows:auto minmax(0,1fr);gap:28px}
.fuss .logo{display:block;width:110px;color:var(--rot)} .fuss .logo svg{width:100%;height:auto;display:block}
.zeiten{display:grid;gap:0;margin-top:22px}
.zeiten div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;padding:11px 0;border-top:1px solid var(--gold-ll);font-size:16px;color:var(--text2)}
.zeiten div:last-child{border-bottom:1px solid var(--gold-ll)}
.zeiten div.heute{color:var(--text)} .zeiten div.heute b{color:var(--gold)}
.zeiten b{font-family:var(--titel);font-weight:400;font-size:21px;color:var(--text);white-space:nowrap}
.zeiten .jetzt{font:500 11px/1 var(--lauf);letter-spacing:.17em;text-transform:uppercase;color:var(--gold);margin-left:10px}
.fuss-spalten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-self:end}
.fuss-spalten .etikett{display:block;margin-bottom:12px}
.fuss-spalten p,.fuss-spalten a{font-size:15.5px;line-height:1.7;color:var(--text2)}
.fuss-spalten a:hover{color:var(--text)}
.fuss-spalten nav{display:grid}
.fuss-unten{margin-top:40px;padding-top:20px;border-top:1px solid var(--gold-ll);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--text3)}
.fuss-unten a{color:var(--text3)} .fuss-unten a:hover{color:var(--text)}

/* ---------- Unterseiten: Seitenkopf */
.sk{position:relative;height:min(82vh,760px);min-height:520px;display:flex;align-items:flex-end;overflow:hidden}
.sk .foto{position:absolute;inset:0}
.sk .foto img{object-position:var(--pos,50% 40%)}
.sk .sk-hof{position:absolute;inset:0;background:linear-gradient(0deg,rgba(19,14,13,.96) 0%,rgba(19,14,13,.55) 36%,rgba(19,14,13,.08) 70%,rgba(19,14,13,.25) 100%)}
.sk .innen{position:relative;z-index:2;padding:130px 0 56px}
.sk .text{margin-top:18px;color:var(--text);text-shadow:0 2px 20px rgba(0,0,0,.6);max-width:50ch}
.sk .at-titel{max-width:14ch}
/* Kopf der Drinks-Seite seit 29.10.2026: zwei Reihen Fotos laufen langsam gegeneinander, vorn das Schild mit Goldlinie (Wahl Robert: Fassung 6). Nur transform. */
.sk-g{position:relative;overflow:hidden;background:var(--nacht);min-height:min(100vh,900px);min-height:min(100svh,900px);display:grid;place-items:center}
.dg-reihen{position:absolute;inset:0;display:grid;grid-template-rows:1fr 1fr;gap:8px;padding:8px 0}
.dg-r{overflow:hidden}
.dg-zug{display:flex;gap:8px;height:100%;width:max-content;animation:dgLauf 90s linear infinite;will-change:transform}
.dg-r2 .dg-zug{animation-direction:reverse}
.dg-f{position:relative;margin:0;overflow:hidden;width:clamp(240px,22vw,340px);height:100%;border-radius:6px;background:var(--nacht3) center/cover no-repeat;background-image:var(--lq)}
.dg-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62)}
@keyframes dgLauf{to{transform:translateX(calc(-50% - 4px))}}
.ruhig .dg-zug{animation:none}
.dg-schild{position:relative;z-index:2;background:var(--nacht2);border-radius:6px;box-shadow:inset 0 0 0 1px var(--gold-ll),0 50px 100px -30px rgba(0,0,0,.9);
  padding:clamp(36px,4vw,64px) clamp(36px,5vw,80px);text-align:center;display:grid;justify-items:center;margin:100px 4vw 50px;max-width:1000px}
.dg-schild>*:not(svg){position:relative}
.dg-schild h1{font-size:clamp(52px,7.2vw,112px);line-height:.98;letter-spacing:-.01em;color:var(--creme)} .dg-schild h1 .z{padding-bottom:.2em;margin-bottom:-.2em}
.dg-schild .text{font-size:clamp(18px,1.5vw,22px);line-height:1.55;color:var(--text);max-width:46ch;margin-top:22px}
.dg-linie{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.dg-linie rect{width:calc(100% - 20px);height:calc(100% - 20px);fill:none;stroke:var(--gold);stroke-width:1.2;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 2.6s cubic-bezier(.22,1,.36,1) .4s}
.sk-g.da .dg-linie rect,.ruhig .dg-linie rect{stroke-dashoffset:0}
@media (max-width:900px){.dg-schild{margin:100px 16px 40px}.dg-schild h1{font-size:clamp(46px,13vw,72px)}}

/* Zwei Spalten, Text und Bild */
.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.zwei.links-bild .kachel{aspect-ratio:4/5}
.zwei .kachel{aspect-ratio:4/5}
.drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.karte{padding:16px 16px 24px;display:grid;gap:16px}
.karte .kachel{aspect-ratio:4/3;border-radius:10px}
.karte h3{font-size:clamp(22px,2.2vw,28px);padding:0 6px}
.karte .text{font-size:15px;padding:0 6px}
.karte .etikett{display:block;padding:0 6px}

/* Klassiker-Zeilen mit Glas */
.klassiker{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,60px);align-items:center}
.klassiker .kachel{aspect-ratio:3/4}
.liste{display:grid}
.liste > div{padding:18px 0;border-top:1px solid var(--gold-ll);display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.liste > div:last-child{border-bottom:1px solid var(--gold-ll)}
.liste h3{font-size:clamp(22px,2.2vw,28px)}
.liste p{font-size:15.5px;color:var(--text2);max-width:52ch}
.hell .liste p{color:rgba(27,21,18,.74)} .hell .liste>div{border-color:rgba(160,127,58,.3)}
.hell .zeilen div{color:rgba(27,21,18,.74);border-color:rgba(160,127,58,.3)} .hell .zeilen a{color:#8F6E2E}
.hell .zeiten div{color:rgba(27,21,18,.74);border-color:rgba(160,127,58,.3)} .hell .zeiten b{color:var(--dunkel)}
.vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

/* Karte für einen Abend: das Blatt */
.blatt{background:var(--creme);color:var(--dunkel);border-radius:10px;box-shadow:var(--schatten);padding:clamp(28px,3.5vw,48px);position:relative;max-width:520px}
.blatt .etikett{color:#A07F3A}
.blatt h3{font-size:clamp(30px,3vw,40px);margin-top:10px}
.blatt .posten{margin-top:24px;display:grid;gap:0}
.blatt .posten div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:12px 0;border-top:1px solid rgba(160,127,58,.3);align-items:baseline}
.blatt .posten b{font-family:var(--titel);font-weight:400;font-size:19px}
.blatt .posten p{font-size:13.5px;color:rgba(27,21,18,.68);grid-column:1/3}
.blatt .posten span{font-family:var(--titel);font-size:18px;white-space:nowrap}
.blatt small{display:block;margin-top:20px;font-size:12.5px;color:rgba(27,21,18,.55)}

/* Programm: die Woche */
.woche{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tag{padding:16px;display:grid;gap:16px;grid-template-rows:auto auto auto 1fr;align-content:start}
.tag .kachel{aspect-ratio:4/5;border-radius:10px}
.tag .zahl{font-family:var(--titel);font-size:clamp(34px,3.4vw,46px);line-height:1;padding:0 6px}
.tag .etikett{padding:0 6px;display:block;margin-top:-6px}
.tag .text{font-size:15px;padding:0 6px 6px}

/* Setliste gross mit Plakatwechsel */
.session{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,60px);align-items:start}
.session .flyer{transform:rotate(1.5deg);position:sticky;top:110px}
.session .flyer .foto{position:relative}
.session .flyer .foto img{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--k)}
.session .flyer .foto img.an{opacity:1}
.setliste.gross div{grid-template-columns:110px minmax(0,1fr) auto;cursor:pointer;padding:13px 0}
.setliste.gross div.an b{color:var(--gold)}
.setliste.gross small{font-size:13px;color:var(--text3)}

/* Gäste hinterm Tresen */
.gaeste{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px}
.gast{padding:12px 12px 18px;display:grid;gap:12px}
.gast .kachel{aspect-ratio:3/4;border-radius:8px}
.gast .etikett{padding:0 4px;display:block}
.gast h3{font-size:19px;padding:0 4px;line-height:1.15}
.gast p{font-size:13.5px;color:var(--text2);padding:0 4px;line-height:1.5}

/* Formular als Schild */
.formular{padding:clamp(24px,3vw,40px);display:grid;gap:16px}
.formular .reihe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.formular label{display:grid;gap:8px}
.formular label span{font:500 11px/1 var(--lauf);letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.formular input,.formular select,.formular textarea{width:100%;background:var(--nacht);border:0;border-radius:10px;padding:14px 16px;color:var(--text);box-shadow:inset 0 0 0 1px var(--gold-ll);outline:0;transition:box-shadow .5s}
.formular input:focus,.formular select:focus,.formular textarea:focus{box-shadow:inset 0 0 0 1px var(--gold)}
.formular textarea{min-height:120px;resize:vertical}
.formular select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.formular .fuss-f{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
/* Anfragen links: Telefon und Instagram gross in der Titelschrift, die Spalte reicht bis zum Fuss des Formulars */
#anfragen .zwei>.fr-alinks{align-self:stretch;display:flex;flex-direction:column}
#anfragen .fr-alinks .zeilen{flex:1;display:flex;flex-direction:column;margin-top:clamp(28px,3vw,44px)}
#anfragen .fr-alinks .zeilen div{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:clamp(18px,2vw,28px) 0;border-color:var(--gold-l)}
#anfragen .fr-alinks .zeilen .etikett{padding-top:0}
#anfragen .fr-alinks .zeilen a{font-family:var(--titel);font-size:clamp(26px,2.7vw,46px);overflow-wrap:anywhere;line-height:1.05;color:var(--creme);letter-spacing:-.005em;transition:color .6s var(--k)}
#anfragen .fr-alinks .zeilen a:hover{color:var(--gold)}
#anfragen .fuss-f .knopf{margin-inline:auto} #anfragen .fuss-f .hinweis{flex-basis:100%}
.formular .hinweis{font-size:13px;color:var(--text3)}
.formular .dank{display:none;font-family:var(--titel);font-size:clamp(22px,2.3vw,30px);color:var(--text)}
.formular.fertig .dank{display:block} .formular.fertig .feld,.formular.fertig .fuss-f{display:none}

/* Fragen zum Aufklappen */
.fragen{display:grid}
.fragen details{border-top:1px solid var(--gold-ll)}
.fragen details:last-child{border-bottom:1px solid var(--gold-ll)}
.fragen summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;gap:16px;padding:18px 0;font-family:var(--titel);font-size:clamp(20px,2vw,26px)}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary i{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--gold-l);position:relative}
.fragen summary i::before,.fragen summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1px;background:var(--gold);transform:translate(-50%,-50%)}
.fragen summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .6s var(--k)}
.fragen details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.fragen details p{padding:0 0 20px;color:var(--text2);max-width:60ch}
.fragen details p a{color:var(--gold)}

/* Menschen: zwei Platten mit Weg */
.leute{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.person{padding:16px;display:grid;gap:18px}
.person .kachel{aspect-ratio:4/3;border-radius:10px}
.person h3{font-size:clamp(26px,2.6vw,34px);padding:0 8px}
.person .etikett{display:block;padding:0 8px;margin-top:-8px}
.person .text{padding:0 8px;font-size:15.5px}
.weg:not(.leiste){display:grid;padding:0 8px 8px}
.weg:not(.leiste) div{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;padding:8px 0;border-top:1px solid var(--gold-ll);font-size:14px;color:var(--text2)}
.weg:not(.leiste) span{font-family:var(--titel);color:var(--gold);font-size:15px}

/* Raum-Mosaik mit Sätzen (Das Haus) */
.raum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.raum figure{display:grid;grid-template-rows:auto auto;gap:12px}
.raum .kachel{aspect-ratio:3/4}
.raum figcaption{font-size:14.5px;color:var(--text2);padding:0 4px;line-height:1.5}
.raum figure:nth-child(1){grid-column:1/3} .raum figure:nth-child(1) .kachel{aspect-ratio:4/3}
.raum figure:nth-child(4){grid-column:2/4} .raum figure:nth-child(4) .kachel{aspect-ratio:4/3}

/* Stimmen */
.stimmen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stimme{padding:26px 28px;display:grid;gap:14px;align-content:start}
.stimme .zahl{font-family:var(--titel);font-size:clamp(40px,4.4vw,60px);line-height:1}
.stimme .etikett{display:block}
.stimme p{font-size:15px;color:var(--text2)}

/* Rechtstexte */
.recht{max-width:68ch}
.recht h2{font-size:clamp(24px,2.4vw,32px);margin:40px 0 12px}
.recht p{color:var(--text2);margin-bottom:12px}

/* ---------- Handy und schmale Fenster */
@media (max-width:1100px){
  .lauter{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .lauter-bilder{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-column:1/3} .lauter-bilder .kachel{aspect-ratio:4/3}
}
@media (max-width:900px){
  .leiste nav{display:none}
  .leiste .innen{gap:16px} .leiste .knopf{margin-left:auto}
  .mosaik{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-rows:auto}
  .mo-plakat{grid-column:1/3;grid-row:1} .mo-a{grid-column:1;grid-row:2;aspect-ratio:3/4} .mo-b{grid-column:2;grid-row:2;aspect-ratio:3/4}
  .mo-d{grid-column:1/3;grid-row:3;aspect-ratio:16/9} .mo-c{grid-column:1;grid-row:4;aspect-ratio:1} .mo-e{grid-column:2;grid-row:4;aspect-ratio:1} .mo-f{display:none}
  .gespraech,.theke,.tafel,.zwei,.klassiker,.session,.fuss-oben{grid-template-columns:minmax(0,1fr)}
  .ge-bild{aspect-ratio:4/3} .ge-frage{grid-template-columns:minmax(0,1fr);gap:8px} .ge-antwort{grid-template-columns:minmax(0,1fr) 120px}
  .jahres,.jahre{grid-template-columns:minmax(0,1fr)} .jahr{padding:16px 0;border-right:0;border-top:1px solid rgba(160,127,58,.3)} .jahr + .jahr{padding-left:0} .jahr:first-child{border-top:0;padding-top:0}
  .lauter{grid-template-columns:minmax(0,1fr)} .lauter-bilder{grid-column:auto}
  .flyer{transform:rotate(-1.2deg);max-width:420px;margin:10px auto 0}
  .schilder{grid-template-columns:minmax(0,1fr)} .schild.breit{grid-column:auto;grid-template-columns:minmax(0,1fr)} .schild{grid-template-columns:minmax(0,1fr)}
  .schild .kachel,.schild.breit .kachel{aspect-ratio:16/10}
  .fuss-bild{aspect-ratio:16/10;min-height:0;height:auto}
  .drei,.woche,.stimmen,.leute,.vier{grid-template-columns:minmax(0,1fr)}
  .raum{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .raum figure:nth-child(1),.raum figure:nth-child(4){grid-column:auto} .raum figure:nth-child(1) .kachel,.raum figure:nth-child(4) .kachel{aspect-ratio:3/4}
  .formular .reihe{grid-template-columns:minmax(0,1fr)}
  .session .flyer{position:static}
  .fenster{height:100vh} .fenster .foto{height:84vh}
  .gw-satz{font-size:11.5vw}
  .tafel .kopf{padding-left:0;border-left:0}
}
@media (max-width:560px){
  .auftakt .innen{padding:120px 0 56px}
  .auftakt .at-bild{inset:0} .auftakt .at-bild img{object-position:0% 50%}
  .auftakt .at-hof{background:linear-gradient(0deg,rgba(19,14,13,1) 0%,rgba(19,14,13,.92) 38%,rgba(19,14,13,.5) 58%,rgba(19,14,13,.1) 78%,rgba(19,14,13,.3) 100%)}
  .at-logo{width:100px;margin-bottom:26px}
  .at-titel{font-size:clamp(38px,11vw,48px)}
  .at-weiter{display:none}
  .kz .uhr{font-size:19px}
  .plakat .fakten{grid-template-columns:minmax(0,1fr)}
  .ge-antwort{grid-template-columns:minmax(0,1fr)} .ge-glas{aspect-ratio:4/3}
  .wahl button{font-size:19px}
  .tafel-bilder .kachel:first-child{aspect-ratio:4/3}
  .zeilen div{grid-template-columns:minmax(0,1fr);gap:4px}
  .fuss-spalten{grid-template-columns:minmax(0,1fr)}
  .gaeste{grid-template-columns:minmax(0,1fr)}
  .raum{grid-template-columns:minmax(0,1fr)}
  .setliste div{grid-template-columns:84px minmax(0,1fr)} .setliste.gross div{grid-template-columns:84px minmax(0,1fr)} .setliste.gross small{grid-column:2}
  .knopf{height:52px}
}

/* ---------- Fuss «Drei Fenster in einer Fassade» (Wahl Robert 29.10.2026, Fassung 3 aus _varianten/fuss-15) */

.f2 .hoch{transform:translateY(70px);transition:transform 1.25s var(--k);transition-delay:calc(var(--n,0)*.1s)}
.f2.da .hoch{transform:none}
.f2 .logo{display:block;color:var(--rot)} .f2 .logo svg{width:100%;height:auto;display:block}
.f2 .z-cu{display:block;width:clamp(170px,16vw,220px);height:auto}
.f2 .z-dc{display:block;width:clamp(112px,10vw,140px);height:auto}
.f2 .n-et{display:block;margin-top:18px}
.f2 .n-satz{font-size:15px;line-height:1.6;color:var(--text2);margin-top:8px;max-width:38ch}
.f2 .weiter{margin-top:16px}
.f2 .besuch .etikett{display:block;margin-bottom:12px}
.f2 .besuch p{font-size:15.5px;line-height:1.7;color:var(--text2)} .f2 .besuch p+p{margin-top:10px}
.f2 .besuch a:hover{color:var(--text)}
.f2 .zeiten{margin-top:18px}
.f2 .zeiten b{padding-right:.55em}
.f2 .kachel img{transition:transform 1.7s var(--k)}
.f2 a .kachel img{transition:transform 1.7s var(--k)}
.f2 a:hover .kachel img{transform:scale(1.04)}
.f2 .f-nav{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:56px;padding-top:24px;border-top:1px solid var(--gold-ll)}
.f2 .f-nav a{font:500 12px/1 var(--lauf);letter-spacing:.15em;text-transform:uppercase;color:var(--text2)} .f2 .f-nav a:hover{color:var(--text)}
.f2 .fuss-unten{margin-top:22px}

.f03 .f03-reihe{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2vw,28px)}
.f03 .f03-f{display:grid;grid-template-rows:auto 1fr;gap:22px}
.f03 .f03-f .kachel{height:clamp(300px,32vw,440px)}
.f03 .f03-u{display:grid;align-content:start;gap:0}
.f03 .f03-logo{width:96px;margin-bottom:16px}
.f03 .f03-u .n-satz{font-size:14.5px;margin-top:14px}
.f03 a.f03-f .f03-u{display:flex;flex-direction:column;align-items:flex-start;height:100%}
.f03 a.f03-f .f03-u .weiter{margin-top:auto;padding-top:16px}
.f03 .f03-wsu{height:100%} .f03 .f03-wsu .zeiten{align-self:end}
.f03 .jetzt{display:none}
.f03 .f03-wsu{grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start}
.f03 .f03-wsu .zeiten{margin-top:0}
.f03 .f03-unten{margin-top:clamp(36px,4vw,50px);padding-top:26px;border-top:1px solid var(--gold-l)}
.f03 .f03-unten .besuch{display:grid;grid-template-columns:auto minmax(0,1.2fr) minmax(0,1fr);gap:clamp(36px,6vw,90px);align-items:start}
.f03 .f03-unten .besuch p+p{margin-top:0}

@media (max-width:860px){.f03 .f03-reihe,.f03 .f03-wsu,.f03 .f03-unten .besuch{grid-template-columns:minmax(0,1fr)}}

/* Fuss: Korrektur Robert 29.10.2026 abends: kein «Bis 2 Uhr · Besuch», kein «heute»-Satz, weniger Luft unter dem Band, Dirty-Chicken-Logo mittig */
.f03.fuss{padding-top:clamp(40px,4.4vw,60px)}
.f03 a.f03-f .f03-u .z-dc{align-self:center}
/* Fuss: Logo-Kacheln der Nachbarn (Robert 29.10.2026), gleiche Höhe, Logos mittig */
.f03 .f03-marke{display:flex;align-items:center;justify-content:center;width:100%;height:clamp(110px,10vw,136px);border-radius:var(--rand);box-shadow:var(--schatten-k)}
.f03 .f03-mcu{background:#3A3845} .f03 .f03-mdc{background:#8953A9}
.f03 .f03-marke .z-cu{width:70%;max-width:240px;height:auto}
.f03 .f03-marke .z-dc{width:auto;height:78%;align-self:center}
.f03 a.f03-f .f03-u .n-satz{margin-top:18px}
/* Fuss: das Foto der Bar hat am rechten Rand 5 px weissen Rand (google-46), etwas breiter, damit er nicht zu sehen ist (Robert 29.10.2026) */
.f03 .f03-ws .kachel img{width:101.5%;max-width:none}

/* Im selben Haus · Vitrine (Robert 29.10.2026, Fassung 7 aus _varianten/imhaus-edel): warmes Licht von oben, die Bilder stehen auf einer Goldkante
   und spiegeln sich; die Links stehen auf einer Linie. Stand davor wild.css.vor-vitrine-2026-10-29 */
.vitrine{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,4vw,70px);margin-top:50px;padding:0 clamp(0px,2vw,40px)}
.vi-stueck{display:flex;flex-direction:column;color:var(--text)}
.vi-bild{position:relative}
.vi-licht{position:absolute;left:-20%;right:-20%;top:-26%;height:70%;background:radial-gradient(closest-side,rgba(255,196,120,.2),rgba(255,196,120,0));pointer-events:none}
.vi-f{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--nacht3) center/cover no-repeat;background-image:var(--lq);box-shadow:0 40px 70px -30px rgba(0,0,0,.95);
  transform:translateY(-70px);transition:transform 1.5s cubic-bezier(.22,1,.36,1)}
/* Auftritt (Robert 29.10.2026): alle drei gleichzeitig, von Anfang an sichtbar, von oben auf die Kante; kein Einblenden, keine Staffel. Start, sobald die Bilder am unteren Rand auftauchen */
.vitrine.da .vi-f{transform:none}
.vi-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 2s cubic-bezier(.22,1,.36,1)}
.vitrine.da .vi-f img{transform:none}
.vi-stueck:hover .vi-f img{transform:scale(1.035)}
.vi-spiegel{position:relative;height:clamp(70px,7vw,110px);overflow:hidden;border-top:1px solid rgba(216,178,100,.55);-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.vi-spiegel img{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;opacity:.3;
  transform:translateY(70px) scaleY(-1);transition:transform 1.5s cubic-bezier(.22,1,.36,1)}
/* Wie im Spiegel: das Bild senkt sich auf die Goldkante, die Spiegelung steigt im selben Takt von unten herauf; beide treffen sich an der Kante (Robert 29.10.2026) */
.vitrine.da .vi-spiegel img{transform:scaleY(-1)}
.vi-text{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:6px}
.vi-text .etikett{display:block;margin-bottom:16px;font:500 10.5px/1 var(--lauf);letter-spacing:.32em;color:rgba(237,228,216,.62)} /* Creme statt Gold, weiter gesperrt (Robert 29.10.2026, Fassung 12 aus _varianten/imhaus-etikett) */
.vi-text .titel{font-size:clamp(30px,2.9vw,44px);line-height:1.04}
.vi-text .text{margin:14px auto 24px;max-width:40ch;font-size:16px;line-height:1.62}
.vi-text .weiter{margin-top:auto}
.ruhig .vi-f,.ruhig .vi-f img{transform:none} .ruhig .vi-spiegel img{transform:scaleY(-1)}
@media (prefers-reduced-motion:reduce){.vi-f{transform:none!important;opacity:1!important}.vi-spiegel img{transform:scaleY(-1)!important;opacity:.3!important}}
@media (max-width:760px){.vitrine{grid-template-columns:minmax(0,1fr);gap:56px;padding:0}.vi-spiegel{height:60px}}

/* ---------- Bewegung wie im Culinarium (Robert 29.10.2026: «so schwach, man merkt das irgendwie kaum»). Jedes Bild, jede Zeile, jeder Block tritt einzeln auf,
   sobald er selbst ins Bild kommt (wild.js setzt .einz, dann .ein). Bilder steigen im Rahmen hoch und zoomen hinein. In Ruhe bleibt jeder Bildausschnitt genau wie vorher (kein Gleiten mit Vorzoom).
   Nur transform, translate, scale, opacity. Stand davor *.vor-bewegung-2026-10-29 */
html.einzeln .einz.blk{transition:transform 1.7s var(--k),opacity 1.1s var(--k)!important;transition-delay:calc(var(--e,0)*.07s)!important}
html.einzeln .einz.blk:not(.ein){opacity:0;transform:translateY(96px)}
html.einzeln .zl.einz .z>span{transition:transform 1.45s var(--k)!important;transition-delay:calc(var(--e,0)*.07s + var(--i,0)*.12s)!important}
html.einzeln .zl.einz:not(.ein) .z>span{transform:translateY(118%)}
html.einzeln .bild.einz img{transition:transform 2.8s var(--k2)!important;transition-delay:calc(var(--e,0)*.07s)!important}
html.einzeln .bild.einz:not(.ein) img{transform:scale(1.24)}
html.einzeln .bild.einz.heben{transition:translate 1.7s var(--k);transition-delay:calc(var(--e,0)*.07s)}
html.einzeln .bild.einz.heben:not(.ein){translate:0 110px}
.auftakt .at-bild img{transform:scale(1.2);transition:transform 3.2s var(--k2)}
.auftakt.da .at-bild img{transform:scale(1)}
.ruhig .auftakt .at-bild img{transform:none;transition:none}
@media (max-width:860px){html.einzeln .bild.einz.heben:not(.ein){translate:0 64px}html.einzeln .einz.blk:not(.ein){transform:translateY(60px)}}

/* ---------- Feiern (Robert 30.10.2026: Angebote der Bar aus «Wild Side Angebote.pdf»). Jeder Abschnitt mit eigener Bewegung, nur transform und opacity.
   Verläufe liegen in den Bildrahmen und bewegen sich mit, nie über etwas Bewegtem. Stand davor *.vor-angebote-2026-10-30 */
.fenster:has(+ #bar){margin-bottom:0}
#musik.kap,#anfragen.kap{padding-top:clamp(72px,9vw,120px)}
.fr-kopf{position:relative;height:100vh;height:100svh;min-height:620px;max-height:1100px;overflow:hidden;background:var(--nacht);display:flex;align-items:flex-end}
.fr-trip{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fr-t{position:relative;overflow:hidden;background:var(--nacht3) center/cover;background-image:var(--lq);transform:translateY(calc(14vh + var(--n)*7vh));opacity:0;
  transition:transform 1.9s var(--k),opacity 1.2s var(--k);transition-delay:calc(var(--n)*.14s)}
.fr-t img{width:100%;height:100%;object-fit:cover}
.fr-t::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(19,14,13,.97) 0%,rgba(19,14,13,.62) 34%,rgba(19,14,13,.06) 66%,rgba(19,14,13,.3) 100%)}
.fr-kopf.da .fr-t{transform:none;opacity:1}
.fr-kopf .innen{position:relative;z-index:2;padding:0 0 clamp(48px,7vh,84px)}
.fr-kopf h1{font-size:clamp(64px,10.5vw,156px);line-height:.98;color:var(--creme);margin-top:18px}
.fr-kopf .text{margin-top:22px;font-size:clamp(18px,1.45vw,21px);line-height:1.55;color:var(--text);max-width:58ch;opacity:0;transform:translateY(40px);transition:transform 1.4s var(--k) .7s,opacity 1s var(--k) .7s}
.fr-kopf .fr-et{display:inline-block;opacity:0;transform:translateY(24px);transition:transform 1.2s var(--k) .3s,opacity 1s var(--k) .3s}
.fr-kopf.da .text,.fr-kopf.da .fr-et{opacity:1;transform:none}

/* Wie viele seid ihr: Goldlinie zieht sich, die Bänder fahren aus */
.fr-strahl{margin-top:clamp(40px,5vw,64px);position:relative}
.fr-linie{height:1px;background:var(--gold-ll);position:relative}
.fr-linie i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--k) .1s}
.fr-strahl.da .fr-linie i{transform:none}
.fr-marken{position:relative;height:56px}
.fr-marken span{position:absolute;top:0;left:calc(var(--x)*100%);transform:translateX(-50%);padding-top:16px}
.fr-marken span:first-child{transform:none} .fr-marken span:last-child{transform:translateX(-100%)}
.fr-marken span::before{content:"";position:absolute;top:-5px;left:50%;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:var(--nacht);box-shadow:inset 0 0 0 1.5px var(--gold)}
.fr-marken span:first-child::before{left:0;margin-left:0} .fr-marken span:last-child::before{left:auto;right:0}
.fr-marken b{font:400 clamp(20px,1.8vw,26px)/1 var(--titel);color:var(--creme);white-space:nowrap}
.fr-marken span:last-child b{font:500 11.5px/1 var(--lauf);letter-spacing:.17em;text-transform:uppercase;color:var(--gold);display:block;padding-top:6px}
.fr-baender{display:grid;gap:10px;margin-top:8px}
.fr-band{position:relative;display:block;padding:22px 0 22px calc(var(--a)*100%);border-radius:var(--rand);transition:background .6s}
.fr-band:hover{background:var(--gold-ll)}
.fr-band i{position:absolute;top:0;left:calc(var(--a)*100%);width:calc((var(--b) - var(--a))*100%);height:4px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform 1.4s var(--k);transition-delay:calc(.6s + var(--n)*.22s)}
.fr-band .etikett,.fr-band .fr-bu{display:block;opacity:0;transform:translateY(18px);transition:transform 1.1s var(--k),opacity .9s var(--k);transition-delay:calc(.9s + var(--n)*.22s)}
.fr-band .fr-bu{font:400 clamp(24px,2.3vw,32px)/1.1 var(--titel);color:var(--creme);margin-top:10px}
.fr-strahl.da .fr-band i{transform:none} .fr-strahl.da .fr-band .etikett,.fr-strahl.da .fr-band .fr-bu{opacity:1;transform:none}
.fr-band:last-child{padding-left:0;text-align:right}

/* Wie viele seid ihr: die Karte der Formate wie die Preisliste der Bar, daneben die Empore (Robert 30.10.2026, Fassung 10) */
.fr-wraster{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:stretch}
.fr-wkarte{position:relative;border-radius:10px;padding:clamp(36px,4.4vw,64px);box-shadow:var(--schatten);transform:translateY(80px) rotate(-1.4deg);opacity:0;transition:transform 1.6s var(--k),opacity 1s var(--k)}
.fr-wkarte.da{transform:none;opacity:1}
.fr-wkarte.da .fr-rahmen rect{stroke-dashoffset:0}
.fr-wkopf{max-width:720px} .fr-wkopf .text{margin-top:22px}
.fr-wzeilen{margin-top:clamp(30px,3vw,46px)}
.fr-wz{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:end;padding:18px 0;border-top:1px solid rgba(160,127,58,.3);color:inherit}
.fr-wn .etikett{display:block;color:#8F6E2E} .fr-wn b{display:block;font-size:clamp(26px,2.4vw,38px);margin-top:8px;color:var(--dunkel)}
.fr-wp{height:1px;margin-bottom:12px;background:repeating-linear-gradient(90deg,#B8934A 0 2px,transparent 2px 7px);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--k);transition-delay:calc(.8s + var(--n)*.2s)}
.fr-wg{font-size:clamp(22px,2vw,30px);color:var(--dunkel);white-space:nowrap;transition:color .4s}
.fr-wkarte.da .fr-wp{transform:none}
.fr-wz:hover .fr-wg{color:var(--plakatrot)}
.fr-wbild{border-radius:var(--rand);box-shadow:var(--schatten);transform:translateY(160px);opacity:0;transition:transform 1.9s var(--k) .15s,opacity 1.1s var(--k) .15s}
.fr-wbild.da{transform:none;opacity:1}

/* Privates Dinner: acht Bilder Wand an Wand, mittendrin Titel und Knopf; darunter Satz und Gänge (Robert 30.10.2026, Fassung 7) */
.fr-dwand{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:clamp(170px,16vw,250px) minmax(clamp(170px,16vw,250px),auto) clamp(170px,16vw,250px);gap:6px}
.fr-dwf{opacity:0;transform:translateY(calc(60px + var(--n)*14px));transition:transform 1.5s var(--k),opacity 1s var(--k);transition-delay:calc(var(--n)*.08s)}
.fr-dwf:first-child{border-radius:var(--rand) 0 0 0} .fr-dwf:nth-child(4){border-radius:0 var(--rand) 0 0} .fr-dwf:nth-child(5){border-radius:0 0 0 var(--rand)} .fr-dwf:nth-child(8){border-radius:0 0 var(--rand) 0}
.fr-dwtext{grid-area:2/2/3/4;background:var(--nacht2);box-shadow:inset 0 0 0 1px var(--gold-l);display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,3vw,46px);opacity:0;transform:scale(.94);transition:transform 1.3s var(--k) .5s,opacity .9s var(--k) .5s}
.fr-dwtext .t-kap{font-size:clamp(30px,3vw,48px)} .fr-dwtext .knoepfe{margin-top:22px}
.fr-dwand.da .fr-dwf,.fr-dwand.da .fr-dwtext{opacity:1;transform:none}
.fr-dwunten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);margin-top:clamp(40px,5vw,64px);align-items:start}
.fr-dwunten .text{margin:0}
.fr-dwg{border-top:1px solid var(--gold-l)}
.fr-dwg>div{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--gold-l);opacity:0;transform:translateY(30px);transition:transform 1.1s var(--k),opacity .8s var(--k);transition-delay:calc(.5s + var(--n)*.14s)}
.da .fr-dwg>div{opacity:1;transform:none}
.fr-dwg p{margin:0;font:400 clamp(20px,1.7vw,25px)/1.25 var(--titel);color:var(--creme)}
@media (max-width:860px){
  .fr-wraster,.fr-dwunten{grid-template-columns:1fr} .fr-wbild{aspect-ratio:4/3}
  .fr-dwand{grid-template-columns:1fr 1fr;grid-template-rows:none} .fr-dwand>*{grid-area:auto!important;aspect-ratio:1} .fr-dwtext{grid-column:1/-1!important;aspect-ratio:auto!important}
  .fr-dwg>div{grid-template-columns:minmax(0,1fr);gap:6px}
}
.ruhig .fr-wkarte,.ruhig .fr-wbild,.ruhig .fr-wp,.ruhig .fr-dwf,.ruhig .fr-dwtext,.ruhig .fr-dwg>div{opacity:1!important;transform:none!important;transition:none!important}

/* Privates Dinner: zwei Bilder aus verschiedenen Tiefen, daneben die gedruckte Menükarte, um die sich die Goldlinie zieht */
.fr-dinner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:stretch}
.fr-dbilder{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;align-items:end}
.fr-dbilder .kachel{height:100%;transform:translateY(120px);opacity:0;transition:transform 1.8s var(--k),opacity 1.1s var(--k)}
.fr-dbilder .fr-d2{height:100%;transform:translateY(220px);transition-delay:.18s}
.fr-dbilder.da .kachel{transform:none;opacity:1}
.fr-menue{position:relative;border-radius:10px;padding:clamp(32px,4vw,58px);box-shadow:var(--schatten);transform:translateY(90px) rotate(-1.6deg);opacity:0;transform-origin:30% 100%;
  transition:transform 1.8s var(--k) .1s,opacity 1.1s var(--k) .1s}
.fr-menue.da{transform:none;opacity:1}
.fr-rahmen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fr-rahmen rect{width:calc(100% - 16px);height:calc(100% - 16px);fill:none;stroke:#B8934A;stroke-width:1.1;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 2.6s cubic-bezier(.22,1,.36,1) .7s}
.fr-menue.da .fr-rahmen rect{stroke-dashoffset:0}
.fr-menue .text{margin-top:20px}
.fr-menue .t-kap{font-size:clamp(34px,3.5vw,50px)}
.fr-gaenge{margin:28px 0 30px;display:grid}
.fr-gaenge div{position:relative;display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;align-items:baseline;padding:16px 0;opacity:0;transform:translateY(26px);
  transition:transform 1.2s var(--k),opacity .9s var(--k);transition-delay:calc(1s + var(--n)*.16s)}
.fr-gaenge div::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(160,127,58,.4);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--k);transition-delay:calc(1s + var(--n)*.16s)}
.fr-gaenge p{font:400 clamp(19px,1.7vw,23px)/1.3 var(--titel);color:var(--dunkel)}
.fr-menue.da .fr-gaenge div{opacity:1;transform:none} .fr-menue.da .fr-gaenge div::before{transform:none}

/* Die lange Tafel: Bild der Empore, drei grosse Zahlen aus dem Schlitz */
.fr-tafel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.fr-tbild .kachel{aspect-ratio:4/5;max-height:86vh;width:100%}
.fr-zahlen{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:22px;margin:34px 0 32px}
.fr-zahl{position:relative;padding-top:20px;overflow:hidden}
.fr-zahl::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--k);transition-delay:calc(var(--n)*.18s)}
.fr-zahl b{display:block;white-space:nowrap;font-size:clamp(36px,4vw,60px);line-height:1;color:var(--gold);transform:translateY(110%);transition:transform 1.4s var(--k);transition-delay:calc(.2s + var(--n)*.18s)}
.fr-zahl .etikett{display:block;margin-top:14px;color:var(--text3);line-height:1.5;opacity:0;transition:opacity 1s var(--k);transition-delay:calc(.5s + var(--n)*.18s)}
.fr-zahlen.da .fr-zahl::before,.fr-zahlen.da .fr-zahl b{transform:none} .fr-zahlen.da .fr-zahl .etikett{opacity:1}

/* Die ganze Bar: Text und zwei Bilder, darunter die drei Kategorien als Treppe */
.fr-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.fr-mkopf{margin-top:34px;padding-top:28px;border-top:1px solid var(--gold-l)}
.fr-mkopf .titel{margin-top:12px} .fr-mkopf .text{margin-top:14px}
.fr-bbild{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:stretch}
.fr-bbild .kachel{aspect-ratio:3/4;transform:translateY(160px);opacity:0;transition:transform 1.9s var(--k),opacity 1.1s var(--k)}
.fr-bbild .fr-b2{aspect-ratio:auto;transition-delay:.2s;transform:translateY(80px)}
.fr-bbild.da .kachel{transform:none;opacity:1}
.fr-treppe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:end;margin-top:clamp(40px,5vw,72px)}
.fr-stufe{background:var(--nacht2);border-radius:var(--rand-g);box-shadow:inset 0 0 0 1px var(--gold-l),var(--schatten);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:12px;
  min-height:calc(300px + var(--n)*56px);transform:translateY(calc(150px + var(--n)*40px));opacity:0;transition:transform 1.7s var(--k),opacity 1s var(--k);transition-delay:calc(var(--n)*.17s)}
.fr-stufe:last-child{box-shadow:inset 0 0 0 1px var(--gold),0 30px 80px -24px rgba(216,178,100,.22),var(--schatten)}
.fr-stufe h3{font-size:clamp(23px,2.1vw,29px);color:var(--creme)}
.fr-stufe p{font-size:14.5px;color:var(--text2);line-height:1.6}
.fr-preis{margin-top:auto;padding-top:20px;border-top:1px solid var(--gold-l);display:flex;align-items:baseline;gap:12px}
.fr-preis b{font-size:clamp(44px,4.4vw,64px);line-height:1;color:var(--gold)}
.fr-preis small{font-size:13px;color:var(--text3)}
.fr-treppe.da .fr-stufe{transform:none;opacity:1}

/* Budget: zwei Beträge, daneben die Preisliste der Bar, Punktlinien ziehen sich zum Preis */
.fr-budget{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:center}
.fr-rechnung{margin-top:30px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:stretch}
.fr-rechnung div{background:#FBF6EE;border-radius:var(--rand);box-shadow:inset 0 0 0 1px rgba(160,127,58,.35),0 20px 40px -24px rgba(60,40,20,.35);padding:22px 22px 24px}
.fr-rechnung b{display:block;white-space:nowrap;margin-top:14px;font-size:clamp(28px,2.7vw,42px);line-height:1;color:var(--dunkel)}
.fr-rechnung i{align-self:center;font:400 34px/1 var(--titel);font-style:normal;color:#A07F3A}
.fr-klein{margin-top:18px;font-size:14px;color:rgba(27,21,18,.6)}
.fr-liste{background:var(--nacht);color:var(--text);border-radius:var(--rand-g);box-shadow:inset 0 0 0 1px var(--gold-l),var(--schatten);padding:clamp(30px,3.6vw,52px)}
.fr-liste .etikett{color:var(--gold)}
.fr-liste h3{font-size:clamp(30px,3vw,42px);margin-top:12px;color:var(--creme)}
.fr-posten{margin:26px 0 20px;display:grid}
.fr-posten div{display:grid;grid-template-columns:auto minmax(20px,1fr) auto;gap:12px;align-items:baseline;padding:11px 0}
.fr-posten span{font-size:16px;color:var(--text)}
.fr-posten i{height:1px;align-self:end;margin-bottom:6px;background-image:radial-gradient(circle,var(--gold) 1px,transparent 1.2px);background-size:7px 2px;background-repeat:repeat-x;opacity:.7;
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--k);transition-delay:calc(.2s + var(--n)*.09s)}
.fr-posten b{font:400 20px/1 var(--titel);color:var(--gold);white-space:nowrap;opacity:0;transform:translateY(10px);transition:transform .9s var(--k),opacity .8s var(--k);transition-delay:calc(.7s + var(--n)*.09s)}
.fr-posten.da i{transform:none} .fr-posten.da b{opacity:1;transform:none}
.fr-liste small{font-size:13px;color:var(--text3)}

/* Musik: eine goldene Schallwelle zeichnet sich, die drei Bilder steigen auf verschiedenen Höhen darauf (Wahl Robert 30.10.2026, Fassung 8) */
.fr-mkopf2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:end}
.fr-mkopf2 .text{font-size:18px}
@media (max-width:900px){.fr-mkopf2{grid-template-columns:minmax(0,1fr);gap:18px}}
.fr-mwelle{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,4vw,64px);align-items:start;margin-top:clamp(44px,5vw,70px)}
.fr-mwspur{position:absolute;left:-4vw;right:-4vw;top:clamp(110px,13vw,190px);height:clamp(120px,14vw,200px);overflow:hidden}
.fr-mwsvg{width:100%;height:100%;display:block;fill:none;stroke:var(--gold);stroke-width:1.5;vector-effect:non-scaling-stroke}
.fr-mwdeck{position:absolute;inset:-2px 0;background:var(--nacht);transition:transform 2.2s cubic-bezier(.22,1,.36,1)}
.fr-mwelle.da .fr-mwdeck{transform:translateX(101%)}
.fr-mwp{position:relative;z-index:1;transform:translateY(90px);transition:transform 1.5s cubic-bezier(.22,1,.36,1);transition-delay:calc(.8s + var(--n)*.2s)}
.fr-mwp:nth-of-type(2){margin-top:clamp(70px,9vw,140px)} .fr-mwp:nth-of-type(3){margin-top:clamp(28px,4vw,56px)}
.fr-mwelle.da .fr-mwp{transform:none}
.fr-mwb{position:relative;margin:0;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--nacht3) var(--lq) center/cover;box-shadow:var(--schatten)}
.fr-mwb img{width:100%;height:100%;object-fit:cover;display:block}
.fr-mwp .etikett{display:block;margin-top:22px}
.fr-mwp h3{font-size:clamp(22px,2.1vw,31px);line-height:1.13;margin-top:10px;color:var(--text);text-wrap:balance}
.ruhig .fr-mwdeck{transform:translateX(101%)!important;transition:none!important} .ruhig .fr-mwp{transform:none!important;transition:none!important}
@media (max-width:760px){.fr-mwelle{grid-template-columns:minmax(0,1fr);gap:44px}.fr-mwspur{display:none}.fr-mwp:nth-of-type(n){margin-top:0}}

/* Grosse Events: geschlossenes Raster, Theke hoch links, Platte mit Text rechts oben, Loge und Gläser darunter (Wahl Robert 30.10.2026, Fassung 7 aus events-15b) */
.fr-erraster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;gap:clamp(16px,2vw,28px)}
.fr-erf{position:relative;margin:0;overflow:hidden;border-radius:6px;background:var(--nacht3) var(--lq) center/cover}
.fr-erf img{width:100%;height:100%;object-fit:cover;display:block}
.fr-er-a{grid-column:1;grid-row:1/3;height:100%}
.fr-erplatte{grid-column:2/4;grid-row:1;padding:clamp(28px,3.4vw,50px);display:flex;align-items:center}
.fr-er-b,.fr-er-c{aspect-ratio:1/1}
.fr-erraster>*{transform:translateY(50px) scale(.95);transition:transform 1.5s cubic-bezier(.22,1,.36,1)}
.fr-erraster>.fr-er-a{transition-delay:.15s} .fr-erraster>.fr-er-b{transition-delay:.3s} .fr-erraster>.fr-er-c{transition-delay:.45s}
.fr-erraster.da>*,.ruhig .fr-erraster>*{transform:none}
.fr-etext .t-kap{margin-top:4px}
.fr-etext .text{margin-top:22px;font-size:18px}
.fr-etext .fr-klein{color:var(--text3);margin-top:14px}
@media (max-width:760px){.fr-erraster{grid-template-columns:repeat(2,minmax(0,1fr))}.fr-er-a{grid-column:1/3;grid-row:auto;aspect-ratio:4/5;height:auto}.fr-erplatte{grid-column:1/3;grid-row:auto}}

/* Anfragen: das Team-Bild rechts, links unten die dunkle Tafel mit dem Satz; die Tafel läuft beim Scrollen schneller als das Bild (Fassung 13, 30.10.2026) */
.fr-team{position:relative;padding-bottom:clamp(60px,7vw,110px)}
.fr-tb{width:82%;margin-left:auto}
.fr-tbild{position:relative;overflow:hidden;border-radius:var(--rand-g);background:var(--nacht3) center/cover;background-image:var(--lq);aspect-ratio:16/10}
.fr-tbild img{width:100%;height:100%;object-fit:cover}
.fr-ttafel{position:absolute;left:0;bottom:0;width:min(560px,50%);background:var(--nacht3);border-radius:var(--rand-g);padding:clamp(28px,3.4vw,52px);box-shadow:inset 0 0 0 1px var(--gold-l),var(--schatten);
  transform:translateY(calc((1 - var(--p,1))*180px));will-change:transform}
.fr-ttafel .titel{margin-top:16px;font-size:clamp(34px,3.8vw,62px);line-height:1.04;color:var(--creme)}
.fr-team.da .zl .z>span{transform:none;transition-delay:calc(.35s + var(--i,0)*.13s)}

@media (max-width:900px){
  .fr-dinner,.fr-tafel,.fr-bar,.fr-budget{grid-template-columns:minmax(0,1fr)}
  .fr-treppe{grid-template-columns:minmax(0,1fr)}
  .fr-stufe{min-height:0}
  .fr-dbilder .kachel{height:auto;aspect-ratio:3/4}.fr-dbilder .fr-d2{height:auto;margin-top:30%}
  .fr-zahlen{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .fr-band,.fr-band:last-child{padding-left:0;text-align:left}
  .fr-tb{width:100%}.fr-ttafel{position:relative;width:auto;margin:-40px 16px 0;transform:none}.fr-team{padding-bottom:0}
  .fr-gaenge div{grid-template-columns:minmax(0,1fr);gap:6px}
}
@media (max-width:760px){.fr-marken span:last-child b{display:none}.fr-trip{gap:3px}.fr-kopf h1{font-size:clamp(54px,15vw,80px)}.fr-zahl b{font-size:34px}.fr-rechnung{grid-template-columns:minmax(0,1fr)}.fr-rechnung i{justify-self:center}}
.ruhig .fr-t,.ruhig .fr-dbilder .kachel,.ruhig .fr-menue,.ruhig .fr-gaenge div,.ruhig .fr-bbild .kachel,.ruhig .fr-stufe,.ruhig .fr-huelle,.ruhig .fr-team,.ruhig .fr-kopf .text,.ruhig .fr-kopf .fr-et,
.ruhig .fr-band .etikett,.ruhig .fr-band .fr-bu,.ruhig .fr-posten b,.ruhig .fr-zahl .etikett{opacity:1!important;transform:none!important;transition:none!important}
.ruhig .fr-linie i,.ruhig .fr-band i,.ruhig .fr-zahl::before,.ruhig .fr-zahl b,.ruhig .fr-posten i,.ruhig .fr-gaenge div::before{transform:none!important;transition:none!important}
.ruhig .fr-rahmen rect{stroke-dashoffset:0}

/* 30.10.2026: Lichtschein der Vitrinen (.vi-licht, ±20 %) ragte am Handy 56 px über den Bildschirm, die Seite wurde 446 px breit; nur dieser Abschnitt schneidet seitlich am Bildschirmrand ab */
.kap:has(.vi-licht){overflow-x:clip}


/* Drinks · «Das Gespräch» und «Wie Momo arbeitet» als ein Faden, «Frage und Antwort» (Wahl Robert 30.10.2026, Fassung 02 aus _varianten/drinks-faden).
   Bewegung über --p (0 → 1, gesetzt in wild.js, während der Schritt ins Bild kommt); nur transform und opacity. */
.gx [data-p]{--p:0}
.gx .foto img{transform:none}
.gx .foto{border-radius:var(--rand);box-shadow:var(--schatten)}
.gx .etikett{display:block;margin-bottom:12px}
.gx p.titel,.gx h3.titel{color:var(--text);text-wrap:balance}
.ww{opacity:.18;transition:opacity .45s ease} .ww.an{opacity:1}
/* Einstieg: links Kopf, Satz und Momos Worte als eine Spalte, rechts Momo hinter der Bar, beide gleich hoch */
.t2-einstieg{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,5vw,84px);align-items:stretch}
.t2-spalte{display:flex;flex-direction:column;justify-content:center}
.t2-spalte>.text{margin-top:26px;font-size:18px;max-width:46ch}
.t2-s0{margin-top:clamp(40px,4.4vw,64px);padding:6px 0 6px clamp(22px,2.4vw,36px);border-left:1px solid var(--gold)}
.t2-momo{font-size:clamp(30px,3.1vw,48px);line-height:1.12}
.t2-bild{min-height:min(84vh,780px);overflow:hidden;border-radius:var(--rand);box-shadow:var(--schatten)}
.t2-bild .foto{height:100%;border-radius:0;box-shadow:none;transform:scale(calc(1.1 - .1 * var(--p)));will-change:transform}
.t2-s0 small{display:block;margin-top:20px;font:500 11px/1 var(--lauf);letter-spacing:.17em;text-transform:uppercase;color:var(--text3)}
.t2-zeile{position:relative;padding-left:clamp(56px,6vw,84px)}
.t2-zeile::before{content:"";position:absolute;left:0;top:calc(.6em + 34px);width:clamp(36px,4vw,60px);height:1px;background:var(--gold)}
.t2-stimme{font-size:clamp(36px,4.2vw,62px);line-height:1.08;max-width:22ch}
.t2-s1,.t2-s2,.t2-s3,.t2-s5,.t2-s6,.t2-s7{margin-top:clamp(90px,10vw,140px)}
/* Antwort 1: vier Drinks legen sich auf den Tisch */
.t2-vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(36px,4vw,56px)}
.t2-karte{aspect-ratio:3/4;transform:translateY(calc((1 - var(--p)) * (120px + var(--j) * 40px))) rotate(calc((1 - var(--p)) * var(--r)));will-change:transform}
/* Antwort 2: drei Gläser kommen nacheinander von unten hoch, darunter klar, cremig, spritzig */
.t2-drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);margin-top:clamp(36px,4vw,56px)}
.t2-glas{--t:clamp(0,calc(var(--p) * 2.2 - var(--j) * .55),1);transform:translateY(calc((1 - var(--p)) * (120px + var(--j) * 60px)));will-change:transform}
.t2-maske{aspect-ratio:4/5;overflow:hidden;border-radius:var(--rand);box-shadow:var(--schatten);background:var(--nacht2)}
.t2-maske .foto{height:100%;border-radius:0;box-shadow:none}
.t2-glas .titel{margin-top:18px;font-size:clamp(28px,2.8vw,40px);opacity:var(--t)}
/* Antwort 3: über die Flaschen fahren */
.t2-s3{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,4vw,64px);align-items:center}
.t2-s3 .t2-zeile{grid-column:1;grid-row:1}
.t2-fahrt{grid-column:2;height:min(84vh,780px);overflow:hidden;border-radius:var(--rand);box-shadow:var(--schatten)}
.t2-fahrt .foto{height:118%;border-radius:0;box-shadow:none;transform:translateY(calc((var(--p) - 1) * 15%)) scale(1.06);will-change:transform}
/* Übergang */
.t2-t{padding-top:clamp(90px,10vw,140px)}
.t2-mitte{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center}
.t2-mitte i{height:1px;background:var(--gold);transform:scaleX(var(--p));will-change:transform}
.t2-mitte i:first-child{transform-origin:right} .t2-mitte i:last-child{transform-origin:left}
.t2-mitte .titel{font-size:clamp(28px,3.2vw,46px);color:var(--text2)}
.t2-bkopf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(30px,5vw,80px);align-items:end;margin-top:clamp(44px,5vw,70px)}
.t2-bkopf .text{font-size:18px;max-width:46ch}
.t2-bkopf .z{white-space:nowrap}
/* Technik 1: zwei Bilder, das zweite kommt von unten nach */
.t2-kz{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(30px,5vw,80px);align-items:end}
.t2-kz .text{font-size:16px;max-width:46ch;padding-bottom:8px}
/* Milk Washing: ein grosses Bild links, rechts zwei übereinander, die nacheinander von unten nachkommen */
.t2-paar{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:1fr 1fr;gap:14px;height:min(92vh,860px);margin-top:clamp(32px,3.4vw,48px)}
.t2-p1{grid-row:1/3;height:100%} .t2-p2{height:100%;transform:translateY(calc((1 - var(--p)) * (140px + var(--j) * 90px)));will-change:transform}
/* Technik 2: das Bild klappt von oben herunter */
/* Fat Washing: das Bild kommt von unten herein */
.t2-s6{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,5vw,80px);align-items:center}
.t2-hoch{height:min(80vh,740px);transform:translateY(calc((1 - var(--p)) * 200px));will-change:transform}
.t2-hoch .foto{height:100%}
.t2-s6 .text{margin-top:22px;font-size:16px;max-width:46ch;padding-left:clamp(56px,6vw,84px)}
/* Technik 3: gegossen, eine Linie, im Glas */
/* Enzyme: vier Bilder Wand an Wand, im Wechsel breit und schmal, sie steigen nacheinander */
.t2-vierer{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-top:clamp(32px,3.4vw,48px)}
.t2-e{height:min(58vh,540px);transform:translateY(calc((1 - var(--p)) * (90px + var(--j) * 50px)));will-change:transform}
.t2-e:nth-child(1),.t2-e:nth-child(4){grid-column:span 7} .t2-e:nth-child(2),.t2-e:nth-child(3){grid-column:span 5}
@media (max-width:760px){
  .gx [data-p]{--p:1!important}
  .t2-einstieg,.t2-s3,.t2-bkopf,.t2-s6{grid-template-columns:1fr} .t2-bild{min-height:0;aspect-ratio:4/5} .t2-vierer{grid-template-columns:1fr 1fr} .t2-vierer .t2-e{grid-column:auto;height:auto;aspect-ratio:4/5}
  .t2-vier{grid-template-columns:1fr 1fr} .t2-kz{grid-template-columns:1fr} .t2-paar{grid-template-columns:1fr 1fr;height:auto} .t2-p1{grid-column:1/3;grid-row:auto;aspect-ratio:4/5} .t2-p2{aspect-ratio:4/5}
  .t2-s3 .t2-zeile,.t2-fahrt{grid-column:auto;grid-row:auto} .t2-fahrt{height:auto;aspect-ratio:4/5} .t2-hoch{height:auto;aspect-ratio:4/5}
  .t2-zeile{padding-left:0} .t2-zeile::before{display:none} .t2-s6 .text{padding-left:0}
}

/* Programm · Die Woche (Wahl Robert 30.10.2026, woche-mix15 Fassung 5): Titel auf der Stecktafel, drei Deckel mit Goldring. Stand davor *.vor-woche-tafel-2026-10-30 */
.wo-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wo-tafel{--wb:clamp(15px,2vw,26px);position:relative;width:max-content;max-width:100%;margin:0 auto clamp(48px,6vw,90px);border-radius:14px;padding:calc(var(--wb) * 2);
 background:linear-gradient(160deg,#4A3520,#2A1D12 45%,#3B2A18);box-shadow:inset 0 0 0 1px rgba(232,196,120,.55),inset 0 0 0 3px #1A120B,inset 0 0 0 4px rgba(232,196,120,.3),0 0 50px -14px rgba(255,190,100,.14),var(--schatten)}
/* Kinoschild, leise (Robert 30.10.2026: «zu viel … luxuriös und edel»): kleine Birnen gehen einmal nacheinander an und bleiben ruhig warm, kein Lauflicht */
.wo-birne{position:absolute;width:clamp(7px,.75vw,11px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 40% 35%,#9C7A44,#5A3E1C 70%);box-shadow:0 0 0 2px #140E09,0 0 0 3px rgba(232,196,120,.25)}
.wo-birne::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FFFBEA,#FFD889 45%,#E8A043 100%);box-shadow:0 0 5px 1px rgba(255,214,140,.45),0 0 12px 3px rgba(255,180,90,.12);opacity:0;transition:opacity 1.2s linear;transition-delay:calc(.4s + var(--j) * .04s)}
.wo.da .wo-birne::after{opacity:.85}
.ruhig .wo-birne::after{opacity:.85}
.wo-rillen{position:relative;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),inset 0 10px 30px rgba(0,0,0,.6);padding:clamp(24px,3.4vw,52px) clamp(28px,4.4vw,70px);background:#0E0B0A repeating-linear-gradient(to bottom,#0E0B0A 0 13px,#16110F 13px 15px)}
.wo-rillen p{margin:0;font:600 clamp(28px,4vw,62px)/1.55 var(--lauf);letter-spacing:.14em;color:#FFF8EC;white-space:nowrap;text-shadow:0 0 12px rgba(255,236,205,.12)}
.wo-rillen p.rot{color:var(--rot);text-shadow:0 0 14px rgba(255,60,70,.18)}
.wo-rillen span{display:inline-block;opacity:0;transform:translateY(-14px);transition:transform .45s cubic-bezier(.3,1.5,.5,1),opacity .2s linear;transition-delay:calc(var(--b) * .035s)}
.wo.da .wo-rillen span,.ruhig .wo-rillen span{opacity:1;transform:none}
.wo-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,52px)}
.wo-spalte{text-align:center}
.wo-spalte .text{margin:14px auto 0;max-width:36ch;font-size:15.5px}
.wo-spalte .etikett{display:block;margin-top:10px}
.wo-name{font-size:clamp(34px,3.6vw,52px);line-height:1.02;color:var(--text)}
.wo-deckel{position:relative;width:min(100%,310px);aspect-ratio:1;margin:0 auto 24px;border-radius:50%;background:var(--nacht2);box-shadow:var(--schatten)}
.wo-bild{position:absolute;inset:13%;margin:0;overflow:hidden;border-radius:50%;background:var(--nacht3) var(--lq) center/cover}
.wo-bild img{width:100%;height:100%;object-fit:cover;display:block}
.wo-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(calc(var(--r,0) * 1deg))}
.wo-ring circle{fill:none;stroke:var(--gold);stroke-width:1} .wo-ring circle:first-of-type{stroke-width:1.4}
.wo-ring text{fill:var(--gold);font:500 11.5px var(--lauf)}
@media (max-width:760px){
  .wo-reihe{grid-template-columns:minmax(0,1fr);gap:56px}
  .wo-rillen p{font-size:clamp(22px,7.4vw,34px)}
}
/* Die Woche: der Deckendruck des Kirchengewölbes der Bar als Tapete hinter dem Abschnitt (Wahl Robert 30.10.2026, woche-wand Fassung 1). Steht still. */
.wo-tapete{isolation:isolate}
.wo-tapete::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(19,14,13,.74),rgba(19,14,13,.82)),url(bild/decke-2017-1600.webp) center/cover}
.wo-tapete::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--nacht),transparent 14%,transparent 86%,var(--nacht))}

/* Drinks, Klassiker: Fassung 3 «Das Band» (Robert 30.10.2026). Kein Rahmen vorab, jedes Glas schwebt einzeln hoch, eins nach dem anderen. Stand davor wild.css.vor-klassiker-band-2026-10-30 */
.kl-kopf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,5vw,80px);align-items:end;margin-bottom:clamp(44px,6vw,80px)}
.kl-kopf .text{margin:0 0 6px;font-size:17px}
.kl-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:0 6px;height:clamp(420px,72vh,720px)}
.kl-f{position:relative;overflow:hidden;margin:0;border-radius:4px;background:var(--nacht3) var(--lq) center/cover}
.kl-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kl-band.auf .kl-f{opacity:0;transform:translate3d(0,120px,0);transition:transform 1.5s var(--k),opacity 1s var(--k);transition-delay:calc(var(--n)*.32s)}
.kl-band.da .kl-f{opacity:1;transform:none}
.kl-liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,2.6vw,40px);margin-top:34px}
.kl-liste>div{border-top:1px solid rgba(160,127,58,.32);padding-top:20px}
.kl-liste h3.titel{font-size:clamp(26px,2.5vw,34px);line-height:1.08;color:var(--dunkel);text-wrap:balance}
.kl-liste .text{font-size:15.5px;margin-top:8px}
.ruhig .kl-band .kl-f{opacity:1!important;transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.kl-band .kl-f{opacity:1!important;transform:none!important;transition:none!important}}
@media (max-width:760px){.kl-kopf{grid-template-columns:1fr;gap:6px}.kl-band{grid-template-columns:1fr 1fr;height:auto}.kl-f{aspect-ratio:3/4}.kl-liste{grid-template-columns:1fr 1fr}}

/* DJ-Abende als Kontaktbogen (Wahl Robert 30.10.2026, _varianten/session-15 Fassung 7) */
.sp{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:var(--nacht3) var(--lq) center/cover}
.sp img{width:100%;height:100%;object-fit:cover;display:block}
.kb-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,5vw,80px);align-items:start}
.kb-raster .text{margin-top:22px}
.kb-raster .kb-gross{background:var(--creme);border-radius:10px;padding:14px;box-shadow:var(--schatten);opacity:0;transform:translateY(50px) rotate(-1.5deg);transition:transform 1.2s var(--k),opacity .8s}
.da .kb-raster .kb-gross{opacity:1;transform:rotate(-1.5deg)}
.kb-raster .kb-bild{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:6px}
.kb-raster .kb-bild .sp{position:absolute;inset:0;border-radius:0;opacity:0;transform:translateY(8%);transition:transform .8s var(--k),opacity .5s}
.kb-raster .kb-bild .sp.an{opacity:1;transform:none}
.kb-raster .kb-bild .sp.raus{opacity:0;transform:translateY(-6%)}
.kb-raster .kb-unten{padding:16px 6px 4px}
.kb-raster .kb-unten .etikett{color:var(--plakatrot)}
.kb-raster .kb-name{font-size:clamp(24px,2.4vw,32px);color:var(--blau);margin-top:8px;line-height:1.1}
.kb-raster .kb-dat{color:rgba(26,0,170,.75);font-size:14px;margin-top:6px}
.kb-raster .kb-bogen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 14px;margin-top:34px}
.kb-raster .kb-k{cursor:pointer;opacity:0;transform:translateY(30px);transition:transform .9s var(--k),opacity .6s;transition-delay:calc(var(--n)*.07s + .3s)}
.da .kb-raster .kb-k{opacity:1;transform:none}
.kb-raster .kb-k .sp{box-shadow:var(--schatten-k);outline:1px solid transparent;outline-offset:4px;transition:outline-color .3s}
.kb-raster .kb-k.an .sp{outline-color:var(--gold)}
.kb-raster .kb-k p{font:400 14px var(--titel);color:var(--text3);margin-top:8px}
.kb-raster .kb-k.an p{color:var(--gold)}
.ruhig .kb-raster .kb-gross,.ruhig .kb-raster .kb-k{opacity:1!important;transition:none!important}
.ruhig .kb-raster .kb-k{transform:none!important}
@media (max-width:760px){.kb-raster{grid-template-columns:1fr}}

/* Drinks, Fenster «Jeder Drink ein Unikat.»: Schatten hinter dem Satz, damit er auf dem hellen Bild gut lesbar ist (Robert 30.10.2026) */
.fk[aria-label="Jeder Drink ein Unikat."] .fe-hof{background:radial-gradient(34% 38% at 50% 52%,rgba(19,14,13,.86),rgba(19,14,13,.5) 55%,rgba(19,14,13,.12) 100%)}
.fk[aria-label="Jeder Drink ein Unikat."] .fe-satz{text-shadow:0 2px 6px rgba(0,0,0,.75),0 6px 40px rgba(0,0,0,.85)}

/* Programm, Kopf «Die Plakatwand» (Wahl Robert 30.10.2026, _varianten/programm-hero-20 Fassung 3): acht Plakate als Wand, quer darüber das Band */
.pw{position:relative;overflow:hidden;background:#050404;height:100vh;height:100dvh;min-height:560px}   /* schliesst genau mit dem Bildschirm unten ab (Robert 30.10.2026) */
.pw-wand{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:1fr 1fr;gap:4px;background:#050404}
.pw-f{position:relative;margin:0;overflow:hidden;background:var(--nacht3) center/cover no-repeat;background-image:var(--lq);transform:translateY(40px) scale(.94);transition:transform 1.3s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--d)*.09s)}
.pw-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pw.da .pw-f,.ruhig .pw-f{transform:none}
.pw-band{position:absolute;left:0;right:0;bottom:clamp(40px,8vh,90px);z-index:3;background:var(--nacht);padding:clamp(28px,3.4vw,48px) 0;box-shadow:0 -1px 0 var(--gold-l),0 1px 0 var(--gold-l)}
.pw-band .innen{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(30px,4vw,70px);align-items:end}
.pw .pw-t{font-size:clamp(72px,11vw,176px);line-height:.98;letter-spacing:-.01em;color:var(--creme)}
.pw .pw-t .z{padding-bottom:.2em;margin-bottom:-.2em}
.pw .pw-s{font-size:clamp(18px,1.5vw,22px);line-height:1.55;color:var(--text);max-width:46ch;margin:0 0 .8em}
.pw + .fk{margin-top:0}
@media (max-width:900px){
  .pw-wand{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,1fr)}
  .pw-band .innen{grid-template-columns:1fr;gap:14px}
  .pw .pw-t{font-size:clamp(64px,19vw,110px)}
}

/* Programm, Fenster «Erst der Drink, dann die Musik.»: das ganze Bild leicht abgedunkelt, damit die Schilder nicht so knallen und die Schrift gut lesbar ist (Robert 30.10.2026) */
.fk[aria-label="Erst der Drink, dann die Musik."] .fe-hof{background:radial-gradient(40% 34% at 50% 52%,rgba(19,14,13,.85),rgba(19,14,13,.55) 55%,rgba(19,14,13,0) 100%),rgba(19,14,13,.5)}
.fk[aria-label="Erst der Drink, dann die Musik."] .fe-satz{text-shadow:0 2px 6px rgba(0,0,0,.8),0 6px 40px rgba(0,0,0,.9)}   /* Schatten hinter dem Satz (Robert 30.10.2026) */

/* Programm: Fenster ohne dunklen Balken zu den Nachbarn (Plakatwand → Fenster → Woche, Gäste → Fenster → Feste; Robert 30.10.2026) */
.fk:has(+ #woche),.fk:has(+ #feste){margin-bottom:0}

/* Drinks, Karte: Fassung 4 «Das Schachbrett» (Robert 30.10.2026). Glas und Drink im Wechsel, Wand an Wand, die Felder steigen schräg nacheinander. */
#karte{--k3:cubic-bezier(.22,1,.36,1)}
.ka-kopf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,5vw,80px);align-items:end;margin-bottom:clamp(44px,6vw,80px)}
.ka-kopf .knoepfe{margin-top:28px}
.ka-brett{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:0 6px}
.ka-x{aspect-ratio:4/5}
.ka-brett.auf .ka-x{opacity:0;transform:translate3d(0,100px,0);transition:transform 1.4s var(--k3),opacity .9s var(--k3);transition-delay:calc(var(--d)*.16s)}
.ka-brett.da .ka-x{opacity:1;transform:none}
.ka-f{position:relative;overflow:hidden;margin:0;height:100%;border-radius:4px;background:var(--nacht3) var(--lq) center/cover}
.ka-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Kacheln: Fassung 2 «Rosa und Rot im Wechsel» (Robert 30.10.2026), Farben der echten Karte «Drunk in Love» (Rosa #FEE1E6, Rot #D30625 gemessen) */
/* Robert 30.10.2026: «rot mitte rosa unten» */
.ka-d{height:100%;background:#D30625;border-radius:4px;padding:clamp(22px,2.6vw,40px);display:flex;flex-direction:column;justify-content:flex-end}
.ka-d .titel{color:#FEE1E6;font-size:clamp(28px,2.8vw,42px);line-height:1.08}
.ka-d p{font-size:14.5px;line-height:1.55;margin-top:10px;color:rgba(254,225,230,.8)}
.ka-d span{display:block;margin-top:12px;font:400 20px/1 var(--titel);color:#FEE1E6}
.ka-x:nth-child(n+5 of .ka-x) .ka-d{background:#FEE1E6}
.ka-x:nth-child(n+5 of .ka-x) .ka-d .titel,.ka-x:nth-child(n+5 of .ka-x) .ka-d span{color:#D30625} .ka-x:nth-child(n+5 of .ka-x) .ka-d p{color:rgba(160,20,50,.72)}
.ka-klein{display:block;margin-top:28px;font-size:12.5px;color:var(--text);opacity:.55}
.ruhig .ka-brett .ka-x{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){.ka-brett .ka-x{opacity:1;transform:none;transition:none}}
@media (max-width:760px){.ka-kopf{grid-template-columns:1fr;gap:18px}.ka-brett{grid-template-columns:1fr 1fr}.ka-d{padding:16px}.ka-d .titel{font-size:22px}.ka-d p{font-size:12.5px}}

/* Gastschichten als verdeckte Karten (Wahl Robert 30.10.2026, _varianten/gaeste-15b Fassung 23): die Reihe kommt ins Bild,
   eine Karte nach der anderen dreht sich von der schwarzen Rückseite auf das Foto, darunter erscheint, wer es ist. Nur transform und opacity. */
.vk-kopf{max-width:660px;margin-bottom:clamp(40px,5vw,70px)} .vk-kopf .text{margin-top:22px}
.vk-reihe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.vk-p{perspective:1200px}
.vk-karte{position:relative;aspect-ratio:4/5;transform-style:preserve-3d;transform:rotateY(180deg);transition:transform 1.1s cubic-bezier(.45,.05,.2,1);transition-delay:calc(var(--n)*.3s + .2s)}
.vk-reihe.da .vk-karte{transform:none}
.vk-rueck,.vk-vorn{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:10px}
.vk-bild{position:relative;margin:0;height:100%;overflow:hidden;border-radius:10px;background:var(--nacht3) var(--lq) center/cover;box-shadow:var(--schatten)}
.vk-bild img{width:100%;height:100%;object-fit:cover;display:block}
.vk-rueck{transform:rotateY(180deg);background:#0B0807;box-shadow:inset 0 0 0 8px #0B0807,inset 0 0 0 9px var(--gold),var(--schatten);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:500 10.5px var(--lauf);letter-spacing:.24em;color:var(--gold)}
.vk-rueck b{font:400 clamp(20px,2vw,30px) var(--titel);letter-spacing:.04em;color:var(--rot)}
.vk-satz{opacity:0;transform:translateY(12px);transition:transform .7s var(--k),opacity .5s;transition-delay:calc(var(--n)*.3s + .9s)}
.vk-reihe.da .vk-satz{opacity:1;transform:none}
.vk-satz .etikett{display:block;margin-top:16px}
.vk-satz h3{font-size:clamp(21px,1.9vw,27px);line-height:1.1;margin-top:8px;color:var(--text)}
.vk-satz p{font-size:14px;color:var(--text2);margin-top:8px;line-height:1.5}
.ruhig .vk-reihe *{transition:none!important}
@media (max-width:760px){.vk-reihe{grid-template-columns:1fr 1fr}}
.fk[aria-label="Momo mixt für den ganzen Tisch."] .fe-hof{background:radial-gradient(40% 34% at 50% 52%,rgba(19,14,13,.8),rgba(19,14,13,.5) 55%,rgba(19,14,13,.1) 100%)}
.fk[aria-label="Momo mixt für den ganzen Tisch."] .fe-satz{text-shadow:0 2px 6px rgba(0,0,0,.8),0 6px 40px rgba(0,0,0,.9)}   /* Schatten hinter dem Satz (Robert 30.10.2026) */
.fk:has(+ #bar){margin-bottom:0}
.fk:has(+ #ablauf){margin-bottom:0}   /* Fenster vor «So geht es» liegt direkt auf der hellen Fläche (30.10.2026) */

/* ---------- Programm · Unterwegs (Wahl Robert 30.10.2026, Fassung 4 «Die Markise»): Markise rollt aus, links fünf Fotos Wand an Wand, rechts der Text gross */
.uw-m{padding-top:0!important}
.uw-markise{height:110px;margin-bottom:clamp(40px,5vw,72px)}
.uw-tuch{height:100%;background:repeating-linear-gradient(90deg,var(--rot) 0 70px,var(--creme) 70px 140px);transform:scaleY(.05);transform-origin:50% 0;transition:transform 1.3s cubic-bezier(.34,1.4,.64,1);
 -webkit-mask:radial-gradient(35px 22px at 35px 100%,transparent 98%,#000) 0 0/70px 100%;mask:radial-gradient(35px 22px at 35px 100%,transparent 98%,#000) 0 0/70px 100%}
.uw-m.da .uw-tuch,.ruhig .uw-tuch{transform:none}
/* Banderole über dem Beginn der Markise, wie bei Dirty Chicken (Robert 30.10.2026): schmal, im Rot und Creme der Markise mit Naht oben und unten, die Feste laufen langsam durch */
.uw-markise{position:relative}
.uw-markise .uw-band{position:absolute;z-index:2;left:0;right:0;top:0;height:40px;overflow:hidden;display:flex;align-items:center;background:linear-gradient(#F4505B,var(--rot) 46%,#D62533);
 box-shadow:inset 0 1px 0 rgba(255,236,226,.5),inset 0 -1px 0 rgba(120,10,20,.45),0 10px 18px -12px rgba(60,6,10,.6);opacity:0;transition:opacity .6s ease .2s}
.uw-markise .uw-band::before,.uw-markise .uw-band::after{content:"";position:absolute;left:0;right:0;height:0;border-top:1.5px dashed rgba(242,233,220,.7)}
.uw-markise .uw-band::before{top:5px} .uw-markise .uw-band::after{bottom:5px}
.uw-m.da .uw-markise .uw-band,.ruhig .uw-markise .uw-band{opacity:1}
.uw-markise .uw-band-zug{display:flex;flex:none;animation:uw-band 70s linear infinite;will-change:transform}
.uw-markise .uw-band-zug p{display:flex;align-items:center;flex:none;margin:0;white-space:nowrap}
.uw-markise .uw-band span{padding:0 clamp(20px,2.4vw,36px);font:600 12.5px/1 var(--lauf);letter-spacing:.28em;text-transform:uppercase;color:var(--creme);text-shadow:0 1px 0 rgba(120,10,20,.35)}
.uw-markise .uw-glas{width:13px;height:17px;flex:none;fill:none;stroke:var(--creme);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes uw-band{to{transform:translateX(-50%)}}
.ruhig .uw-markise .uw-band-zug{animation:none}
@media (prefers-reduced-motion:reduce){.uw-markise .uw-band-zug{animation:none}}
@media (max-width:900px){.uw-markise .uw-band{height:34px}.uw-markise .uw-band span{font-size:11px;letter-spacing:.22em;padding:0 16px}}
.uw-stand{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,76px);align-items:stretch}
.uw-wand{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:repeat(6,1fr);gap:5px;min-height:660px;border-radius:var(--rand-g);overflow:hidden;box-shadow:var(--schatten)}
.uw-f{margin:0;overflow:hidden;background:var(--nacht3) var(--lq) center/cover;transform:translateY(calc(60px + var(--n) % 3 * 45px)) scale(.94);transition:transform 1.4s var(--k);transition-delay:calc(var(--n)*.09s)}
.uw-f img{width:100%;height:100%;object-fit:cover}
.uw-m.da .uw-f,.ruhig .uw-f{transform:none}
.uw-a{grid-column:1;grid-row:1/5} .uw-e{grid-column:1;grid-row:5/7} .uw-b{grid-column:2;grid-row:1/3} .uw-c{grid-column:2;grid-row:3/5} .uw-d{grid-column:2;grid-row:5/7}
.uw-text{align-self:center}
.uw-text .text{color:var(--text);font-size:clamp(17px,1.35vw,19.5px);line-height:1.7;max-width:56ch}
.uw-text .zeilen{margin-top:30px}
.uw-text .zeilen div{grid-template-columns:150px minmax(0,1fr);font-size:clamp(16px,1.2vw,17.5px);line-height:1.5;color:var(--text);padding:15px 0;border-color:var(--gold-l)}
.uw-text .zeilen .etikett{font-size:12.5px;line-height:1.45;padding-top:3px}
@media (max-width:900px){
 .uw-markise{height:70px}
 .uw-stand{grid-template-columns:1fr}
 .uw-wand{min-height:0;height:120vw}
 .uw-text .zeilen div{grid-template-columns:1fr;gap:4px}
}
.uw-wand{grid-template-rows:repeat(6,minmax(0,1fr));min-height:620px}
.uw-f{min-height:0;position:relative} .uw-f img{position:absolute;inset:0}
@media (max-width:900px){.uw-wand{min-height:0;height:120vw}}
#klassiker + #karte{padding-top:clamp(72px,9vw,120px)}   /* Abstand zum hellen Klassiker-Abschnitt (Robert 30.10.2026: «oben viel zu nah die Schrift am Abschnitt darüber») */

/* ---------- Feiern · «So geht es» als Goldlinie (Wahl Robert 30.10.2026, Fassung 3 aus _varianten/ablauf-15). Vier Bilder, darunter die Linie,
   die sich beim Scrollen zieht; jede Station leuchtet, sobald die Linie sie erreicht (wild.js). Stand davor *.vor-ablauf-goldlinie-2026-10-30 */
.gl-kopf{max-width:760px;margin:0 auto;text-align:center} .gl-kopf .kz{justify-content:center}
.gl-weg{position:relative;margin-top:clamp(44px,5vw,76px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,30px)}
.gl-linie{position:absolute;left:0;right:0;top:var(--lt,0);height:1px;background:rgba(160,127,58,.32)}
.gl-linie i{position:absolute;inset:0;background:#B8934A;transform:scaleX(var(--p,0));transform-origin:left}
.gl-b{position:relative;margin:0;overflow:hidden;aspect-ratio:4/5;border-radius:var(--rand);background:var(--nacht3) var(--lq) center/cover;opacity:.4;transform:translateY(26px) scale(.96);transition:transform 1.2s var(--k),opacity .9s var(--k)}
.gl-b img{width:100%;height:100%;object-fit:cover;display:block}
.gl-p{display:block;width:13px;height:13px;border-radius:50%;margin:28px 0 22px;background:var(--creme);box-shadow:inset 0 0 0 2px rgba(160,127,58,.32);position:relative;z-index:1;transition:background .5s,box-shadow .5s}
.gl-st h3{font-size:clamp(26px,2.4vw,36px);line-height:1.1}
.gl-st p{margin-top:10px;font-size:16.5px;line-height:1.6;color:rgba(27,21,18,.74);max-width:46ch}
.gl-st h3,.gl-st p{opacity:.35;transition:opacity .8s var(--k)}
.gl-st.an .gl-b{opacity:1;transform:none} .gl-st.an h3,.gl-st.an p{opacity:1}
.gl-st.an .gl-p{background:#B8934A;box-shadow:0 0 0 6px rgba(184,147,74,.18)}
.ruhig .gl-b,.ruhig .gl-st h3,.ruhig .gl-st p{opacity:1!important;transform:none!important;transition:none!important}
@media (max-width:900px){.gl-weg{grid-template-columns:1fr 1fr;row-gap:36px}.gl-linie{display:none}}
@media (max-width:760px){.gl-weg{grid-template-columns:1fr}}

/* ---------- Feiern · Weg 2 Budget «Vor der Rückbar» (Wahl Robert 30.10.2026, Fassung 6 aus _varianten/budget-15) */
.rb-raster{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.rb-bild{border-radius:var(--rand-g);overflow:hidden;box-shadow:var(--schatten)}
.rb-f{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--nacht3) var(--lq) center/cover}
.rb-f img{width:100%;height:100%;object-fit:cover;transform:scale(1.16);will-change:transform}
.rb-raster .text{margin-top:20px;max-width:34em}
.rb-betraege{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px;padding-top:24px;border-top:1px solid var(--gold-l)}
.rb-betraege b{display:block;margin-top:12px;font-size:clamp(32px,3.2vw,48px);line-height:1;color:var(--creme);white-space:nowrap}
.rb-klein{margin-top:18px;font-size:14px;color:var(--text3)}
.rb-liste{margin-top:34px}
.rb-liste h3{font-size:clamp(28px,2.8vw,40px);margin-top:12px;color:var(--creme)}
.rb-posten{margin:16px 0 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));column-gap:36px}
.rb-p{display:grid;grid-template-columns:auto minmax(16px,1fr) auto;gap:12px;align-items:baseline;padding:9px 0}
.rb-p span{font-size:15px;color:var(--text);white-space:nowrap}
.rb-p i{height:1px;align-self:end;margin-bottom:6px;background-image:radial-gradient(circle,var(--gold) 1px,transparent 1.2px);background-size:7px 2px;background-repeat:repeat-x;opacity:.7}
.rb-p b{font-size:20px;line-height:1;color:var(--gold);white-space:nowrap}
.rb-liste small{font-size:13px;color:var(--text3)}
@media (max-width:900px){.rb-raster{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.rb-betraege{grid-template-columns:minmax(0,1fr)}}
.ruhig .rb-f img{transform:none!important}
@media (prefers-reduced-motion:reduce){.rb-f img{transform:none!important}}

/* Feiern · Die lange Tafel als Platte (Robert 30.10.2026, Fassung 14 aus _varianten/empore-15): Bild und Text auf einer Platte mit Goldlinie, die Zahlen als Fuss.
   Die Platte steigt als Ganzes, das Bild darin zoomt aus der Nähe zurück. Nur transform, deckend. */
.fr-plplatte{position:relative;background:var(--nacht2);border-radius:18px;padding:clamp(18px,2vw,26px);box-shadow:inset 0 0 0 1px rgba(216,178,100,.42),var(--schatten);transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
.fr-plg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4.5vw,64px);align-items:center}
.fr-plbild{position:relative;margin:0;border-radius:var(--rand);overflow:hidden;background:var(--nacht3) var(--lq) center/cover;aspect-ratio:1/1;width:100%;max-width:560px;transform:translateZ(0)}
.fr-plbild img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 2.4s cubic-bezier(.22,1,.36,1)}
.fr-plt{padding:clamp(10px,2vw,30px) clamp(10px,2vw,30px) clamp(10px,2vw,30px) 0}
.fr-plt .text{max-width:54ch}
.fr-plt .knoepfe{margin-top:6px}
.fr-plfuss{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(18px,2vw,26px);border-top:1px solid rgba(216,178,100,.42)}
.fr-plz{padding:24px clamp(16px,2.4vw,34px) 8px}
.fr-plz+.fr-plz{border-left:1px solid rgba(216,178,100,.42)}
.fr-plz b{display:block;font-size:clamp(36px,4.4vw,66px);line-height:1;color:var(--gold);white-space:nowrap}
.fr-plz .etikett{display:block;margin-top:12px;color:var(--text3);line-height:1.5}
.fr-pl:not(.da) .fr-plplatte{transform:translateY(120px) scale(.96)}
.fr-pl:not(.da) .fr-plbild img{transform:scale(1.22)}
@media (max-width:900px){.fr-plg{grid-template-columns:minmax(0,1fr)}.fr-plbild{max-width:none}.fr-plt{padding:4px 6px 10px}.fr-plz{padding:18px 10px 6px}.fr-plz b{font-size:30px}}
@media (max-width:600px){.fr-plz{padding:16px 8px 4px}}
.ruhig .fr-plplatte,.ruhig .fr-plbild img{transform:none!important;transition:none!important}
#budget.kap{padding-bottom:clamp(32px,4vw,56px)}   /* Robert 30.10.2026: Abstand zur Musik kleiner */

/* Drinks, Karte: Kopf als Felder im Schachbrett, Fassung 2 «Die echte Karte» (Robert 30.10.2026). Foto der echten Karte, Titelfeld Nacht, Feld Rosa mit Knopf. */
.kb .ka-x{transition-delay:calc((var(--d) + 2)*.16s)}
.ka-brett .kb-k{border-radius:4px;padding:clamp(28px,3.2vw,52px);display:flex;flex-direction:column;justify-content:flex-end}
.ka-brett.auf .kb-k{opacity:0;transform:translate3d(0,100px,0);transition:transform 1.4s var(--k3),opacity .9s var(--k3);transition-delay:calc(var(--d)*.16s)}
.ka-brett.da .kb-k{opacity:1;transform:none}
.ka-brett .kb-s2{grid-column:span 2}
.ka-brett .kb-bild{padding:0;aspect-ratio:4/5}
.ka-brett .kb-bild .ka-f{height:100%}
.kb .kz{margin-bottom:18px}
.ka-brett .kb-g{font-size:clamp(44px,5.2vw,80px);line-height:1}
.kb .tx{font-size:clamp(16px,1.15vw,18px);line-height:1.62;max-width:56ch}
.kb .knoepfe{margin-top:28px}
.ka-brett .kb-ab{margin-top:24px}
.ka-brett .kb-nacht{background:var(--nacht2)}
.ka-brett .kb-nacht .titel{color:var(--creme)} .ka-brett .kb-nacht .tx{color:var(--text);opacity:.86}
.ka-brett .kb-rosa{background:#FEE1E6}
.ka-brett .kb-rosa .tx{color:rgba(120,14,36,.86)}
.ruhig .ka-brett .kb-k{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){.ka-brett .kb-k{opacity:1;transform:none;transition:none}}
@media (max-width:760px){.ka-brett .kb-k{grid-column:span 2;padding:26px 22px}.ka-brett .kb-bild{grid-column:span 2}}

/* ---------- Feiern · Die ganze Bar: das Schild an der Tür (Fassung 3, 30.10.2026) */
.fr-soben .fr-bkopf .text{margin-top:22px}
.fr-soben{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:start}
.fr-haken{position:relative;padding-top:120px;max-width:440px;margin:0 auto;width:100%;transform-origin:50% 0;transform:rotate(-9deg) translateY(-30px)}
.fr-haken.da{transform:none;transition:transform 2.2s cubic-bezier(.3,1.25,.4,1)}
.fr-schnur{position:absolute;top:0;width:2px;height:150px;background:var(--gold-l)}
.fr-sl{left:22%;transform-origin:50% 0;transform:rotate(14deg)} .fr-sr{right:22%;transform-origin:50% 0;transform:rotate(-14deg)}
.fr-schild{position:relative;background:var(--creme);color:var(--dunkel);border-radius:16px;padding:clamp(30px,3.6vw,48px) clamp(24px,3vw,40px);text-align:center;
 box-shadow:inset 0 0 0 6px var(--creme),inset 0 0 0 7px var(--plakatrot),0 40px 70px -26px rgba(0,0,0,.9)}
.fr-schild .etikett{color:var(--plakatrot)}
.fr-schild .titel{font-size:clamp(34px,3.6vw,52px);line-height:1.04;margin:16px 0 18px}
.fr-schild small{font:500 12px/1 var(--lauf);letter-spacing:.18em;text-transform:uppercase;color:var(--dunkel2)}
.fr-sreihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);margin-top:clamp(50px,6vw,90px)}
.fr-sf{position:relative;margin:0 0 24px;aspect-ratio:4/5;overflow:hidden;border-radius:var(--rand);background:var(--nacht3) var(--lq) center/cover;box-shadow:var(--schatten-k)}
.fr-sf img{width:100%;height:100%;object-fit:cover;display:block}
.fr-sk .etikett{display:block}
.fr-sk h3{font-size:clamp(23px,2.1vw,29px);color:var(--creme);margin-top:12px;line-height:1.1}
.fr-sk p{font-size:14.5px;color:var(--text2);line-height:1.6;margin-top:12px}
.fr-spreis{display:flex;align-items:baseline;gap:10px;margin-top:20px}
.fr-spreis b{white-space:nowrap;font-size:clamp(34px,3.4vw,48px);color:var(--gold);line-height:1}
.fr-spreis small{font:500 11px/1 var(--lauf);letter-spacing:.14em;text-transform:uppercase;color:var(--text3)}
@media (max-width:900px){.fr-soben,.fr-sreihe{grid-template-columns:minmax(0,1fr)}}
.ruhig .fr-haken{transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.fr-haken{transform:none!important;transition:none!important}}
/* Die ganze Bar: die drei Kategorien schweben nacheinander hoch, das Foto zoomt dabei in seinen Rahmen (Robert 30.10.2026) */
.fr-sk{transform:translateY(140px);transition:transform 1.5s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--n,0)*.14s)}
.fr-sreihe.da .fr-sk{transform:none}
.fr-sf img{transform:scale(1.12);transition:transform 2s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--n,0)*.14s)}
.fr-sreihe.da .fr-sf img{transform:none}
.ruhig .fr-sk,.ruhig .fr-sf img{transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.fr-sk,.fr-sf img{transform:none!important;transition:none!important}}
/* Banderole edler (Robert 30.10.2026: «das muss seriöser und edler aussehen … es geht um die banderole»): Nacht statt Knallrot, feine Goldlinien statt Strichelung, Schrift in Gold */
.uw-markise .uw-band{height:38px;background:var(--nacht);box-shadow:0 10px 24px -14px rgba(0,0,0,.8)}
.uw-markise .uw-band::before,.uw-markise .uw-band::after{border-top:1px solid var(--gold-l)}
.uw-markise .uw-band::before{top:4px} .uw-markise .uw-band::after{bottom:4px}
.uw-markise .uw-band span{font:500 11px/1 var(--lauf);letter-spacing:.32em;color:var(--gold);text-shadow:none}
.uw-markise .uw-glas{width:11px;height:14px;stroke:var(--gold);stroke-width:1.6;opacity:.8}
.uw-markise .uw-band-zug{animation-duration:90s}
/* Bildwand nur noch eine Reihe (Wunsch der Bar 30.10.2026: «layout etwas cleaner, zu viele Bilder») */
.bar-wand .wand.wd-eine{grid-template-rows:minmax(clamp(380px,32vw,460px),auto)}
.bar-wand .wd-eine .wd-allein,.bar-wand .wd-eine .eckschild{grid-row:1}
@media (max-width:900px){.bar-wand .wand.wd-eine{grid-template-rows:none}.bar-wand .wd-eine .kachel{grid-column:1/-1;aspect-ratio:16/10}.bar-wand .wd-eine .wd-allein,.bar-wand .wd-eine .eckschild{grid-row:auto}}
/* Die Bar seit 31.10.2026 (Wahl Robert: Fassung 4 aus _varianten/bar-15c): links das Eckschild, rechts zwei Querbilder übereinander. Alles unter .bw4. */
.bw4 .bw4-g{display:grid;grid-template-columns:1.32fr 1fr;gap:10px;min-height:clamp(560px,46vw,680px)}
.bw4 .bw4-r{display:grid;grid-template-rows:1fr 1fr;gap:10px}
.bw4 .bw4-b{border-radius:6px;min-height:0;transition:transform 1.5s var(--k);transition-delay:calc(.2s + var(--n,0)*.22s)}
.bw4 .bw4-b img{position:absolute;inset:0}
.bw4:not(.da) .bw4-b{transform:scale(.84)}
.bw4 .bw4-s{position:relative;overflow:hidden;border-radius:6px;background:var(--nacht2);color:var(--text);padding:clamp(28px,3.6vw,52px);display:flex;flex-direction:column;justify-content:center;min-width:0;
  container-type:inline-size;box-shadow:inset 0 0 0 1px var(--gold-ll),var(--schatten);transition:transform 1.5s var(--k)}
.bw4:not(.da) .bw4-s{transform:translateY(60px)}
.bw4 .bw4-s>*{position:relative;z-index:1}
.bw4 .bw4-logo{display:block;width:64px;color:var(--rot);flex:none} .bw4 .bw4-logo svg{width:100%;height:auto;display:block}
.bw4 .bw4-t{font-size:clamp(34px,min(5vw,10.4cqi),76px);line-height:.98;margin-top:22px}
.bw4 .bw4-t .z{padding-bottom:.2em;margin-bottom:-.2em}
.bw4 .bw4-x{margin:22px 0 0;color:var(--text2);font-size:clamp(17px,1.35vw,19.5px);line-height:1.62;max-width:62ch}
/* Wer, Wo, Wann (Robert 31.10.2026: «nochmal anders gestalten»): drei Felder nebeneinander, oben eine Goldlinie, dazwischen feine Goldfugen;
   das Wort oben, der Text darunter, alles an derselben Oberkante. Schmal: untereinander, Fugen waagrecht. */
.bw4 .bw4-f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,2.8vw,40px);border-top:1px solid var(--gold-l)}
.bw4 .bw4-f>div{padding:clamp(18px,1.8vw,24px) clamp(14px,1.6vw,24px) 0;border-left:1px solid var(--gold-l);transition:transform 1.3s var(--k);transition-delay:calc(.6s + var(--n,0)*.14s)}
.bw4 .bw4-f>div:first-child{padding-left:0;border-left:0}
.bw4:not(.da) .bw4-f>div{transform:translateY(40px)}
.bw4 .bw4-f b{display:block;font-family:var(--titel);font-weight:400;font-size:clamp(28px,2.6vw,38px);line-height:1;color:var(--gold)}
.bw4 .bw4-f p{margin-top:14px;font-size:15.5px;line-height:1.55;color:var(--text2)}
@container (max-width:540px){
  .bw4 .bw4-f{grid-template-columns:1fr}
  .bw4 .bw4-f>div{padding:18px 0;border-left:0;border-bottom:1px solid var(--gold-l)} .bw4 .bw4-f>div:last-child{border-bottom:0;padding-bottom:0}
}
.ruhig .bw4 .bw4-s,.ruhig .bw4 .bw4-b,.ruhig .bw4 .bw4-f>div{transform:none!important;transition:none!important}
@media (max-width:900px){
  .bw4 .bw4-g{grid-template-columns:1fr;min-height:0} .bw4 .bw4-r{grid-template-rows:none}
  .bw4 .bw4-b{aspect-ratio:4/3}
}
/* Feiern, Anfragen: der Instagram-Name bleibt immer auf einer Zeile und wird nur so klein wie nötig (Robert 31.10.2026: «nur das R in der zweiten Reihe … das geht nicht») */
#anfragen .fr-alinks{container-type:inline-size}
#anfragen .fr-alinks .zeilen a[href*="instagram"]{white-space:nowrap;overflow-wrap:normal;font-size:clamp(18px,min(2.7vw,6.2cqi),46px)}

.fk:has(+ #seit2017){margin-bottom:0}   /* Das Haus: kein dunkler Balken zwischen Fenster und hellem Abschnitt (Robert 31.10.2026) */

/* ---------- Besuch · Reservieren «Sechs Hocker» (Wahl Robert 31.10.2026, Fassung 2). Hocker antippen = so viele Plätze; «+» lässt einen Hocker von links
   einfliegen, beim neunten wird das «+» zum Hocker; «Mehr als 9? Tafel» macht aus der Theke die lange Tafel mit Stühlen. Knopf mittig.
   Stand davor: *.vor-hocker-plus-2026-10-31 und *.vor-reservieren-hocker-2026-10-31 */
.rh .rh-t{font-size:clamp(52px,7.4vw,112px);line-height:1;margin:0}
.rh-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:30px clamp(30px,5vw,80px);align-items:end}
.rh-kopf .text{margin-top:22px;max-width:46ch;font-size:clamp(17px,1.35vw,20px);line-height:1.6}
.rh-kopf .text a{color:var(--gold)}
.rh-zahl{display:grid;justify-items:end;gap:14px;text-align:right}
.rh-zahl b{font-weight:400;font-size:clamp(44px,5vw,76px);line-height:1;color:var(--gold);white-space:nowrap}
.rh-zahl b.rh-tick{animation:rhTick .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes rhTick{from{transform:translateY(-10px);opacity:.3}to{transform:none;opacity:1}}

/* Bühne: Theke und Tafel liegen übereinander, eine ist sichtbar */
.rh-buehne{display:grid;margin-top:clamp(36px,4vw,56px)}
.rh-theke,.rh-tafel{grid-area:1/1;transition:transform 1s var(--k),opacity .7s var(--k)}
.rh-tafel{opacity:0;transform:translateY(60px) scale(.96);pointer-events:none;visibility:hidden;transition:transform 1s var(--k),opacity .7s var(--k),visibility 0s 1s}
.rh-form.rh-an-tafel .rh-theke{opacity:0;transform:translateY(40px);pointer-events:none}
.rh-form.rh-an-tafel .rh-tafel{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:.15s,.15s,0s}

/* Theke mit Hockern */
.rh-theke{position:relative;padding-top:26px}
.rh-theke::before{content:"";display:block;height:20px;border-radius:6px 6px 0 0;background:var(--nacht3);box-shadow:inset 0 1px 0 rgba(216,178,100,.25)}
.rh-licht{position:absolute;left:0;right:0;top:46px;height:2px;background:var(--gold);transform:scaleX(0);transition:transform 1.6s var(--k) .2s;box-shadow:0 0 18px rgba(216,178,100,.7)}
.rh.da .rh-licht{transform:scaleX(1)}
.rh-hocker{--b:clamp(26px,6.2vw,80px);display:flex;justify-content:space-between;gap:4px;padding:22px clamp(0px,2.4vw,40px) 0;min-height:150px}
.rh-h{flex:0 0 var(--b);width:var(--b);position:relative;display:grid;justify-items:center;align-content:start;gap:10px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;
 opacity:0;transform:translateY(-50px);transition:transform 1s cubic-bezier(.3,1.4,.5,1),opacity .6s var(--k);transition-delay:calc(.4s + var(--n,0) * .1s)}
.rh.da .rh-h{opacity:1;transform:none}
.rh-h svg{width:min(100%,64px);height:auto;overflow:visible}
.rh-sitz{fill:var(--nacht3);stroke:rgba(216,178,100,.4);stroke-width:1.5;transition:fill .5s,stroke .5s}
.rh-bein{fill:none;stroke:rgba(216,178,100,.4);stroke-width:2.2;stroke-linecap:round;transition:stroke .5s}
.rh-h b{font:500 12px/1 var(--lauf);letter-spacing:.14em;color:var(--text3);transition:color .5s}
.rh-h.an .rh-sitz{fill:var(--gold);stroke:var(--gold)} .rh-h.an .rh-bein{stroke:var(--gold)} .rh-h.an b{color:var(--gold)}
.rh-h:hover .rh-sitz{stroke:var(--gold)}
.rh-h:focus-visible{outline:2px solid var(--creme);outline-offset:4px;border-radius:8px}
.rh-plus{position:relative;display:block;width:min(100%,64px);aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(216,178,100,.5);
 font-size:0;color:var(--gold);transition:background .5s,color .5s,transform .6s cubic-bezier(.3,1.5,.5,1)}
.rh-h.rh-mehr:hover .rh-plus{background:var(--gold);color:var(--nacht);transform:scale(1.06)}
/* Neuer Hocker fliegt von links ein; der neunte wächst aus dem «+» */
.rh-h.rh-flug{animation:rhFlug 1s cubic-bezier(.25,1.2,.4,1) both}
@keyframes rhFlug{from{transform:translateX(var(--weg,-60vw)) rotate(-14deg);opacity:0}55%{opacity:1}to{transform:none;opacity:1}}
.rh-h.rh-wird{animation:rhWird .7s cubic-bezier(.3,1.5,.5,1) both}
@keyframes rhWird{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.rh-h.rh-geht{animation:rhGeht .35s ease both;pointer-events:none}
@keyframes rhGeht{to{transform:scale(.4);opacity:0}}

/* Tafel mit Stühlen, von oben gesehen */
.rh-tisch{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"oben knoepfe" "platte knoepfe" "unten knoepfe";gap:12px clamp(16px,2vw,30px);align-items:center;padding:6px 0 4px}
.rh-reihe{display:flex;justify-content:space-evenly;gap:6px;min-height:40px}
.rh-reihe.oben{grid-area:oben;align-items:flex-end} .rh-reihe.unten{grid-area:unten;align-items:flex-start}
.rh-platte{grid-area:platte;height:clamp(64px,7vw,96px);border-radius:12px;background:var(--nacht3);box-shadow:inset 0 0 0 1px var(--gold-l),var(--schatten-k);position:relative}
.rh-platte::after{content:"";position:absolute;left:4%;right:4%;top:50%;height:1px;background:var(--gold);opacity:.45}
.rh-stuhl{flex:0 0 auto;width:clamp(22px,3.4vw,44px);height:clamp(20px,2.8vw,36px);border-radius:7px;background:var(--gold);position:relative}
.rh-stuhl::before{content:"";position:absolute;left:8%;right:8%;height:5px;border-radius:3px;background:var(--gold);top:-9px}
.rh-reihe.unten .rh-stuhl::before{top:auto;bottom:-9px}
.rh-stuhl.rh-flug{animation:rhFlug .9s cubic-bezier(.25,1.2,.4,1) both}
.rh-tknopf{grid-area:knoepfe;display:grid;gap:12px}
.rh-tknopf button{width:52px;height:52px;padding:0;display:grid;border-radius:50%;border:0;background:none;color:var(--gold);cursor:pointer;box-shadow:inset 0 0 0 1.5px rgba(216,178,100,.5);transition:background .5s,color .5s,opacity .5s}
.rh-tknopf button:hover:not(:disabled){background:var(--gold);color:var(--nacht)}
.rh-tknopf button:disabled{opacity:.25;cursor:default}

/* Umschalten Theke/Tafel */
.rh-wechsel{display:flex;justify-content:flex-end;min-height:48px;margin-top:22px}
.rh-wechsel button{display:none;border:0;background:none;padding:12px 0;font:500 12px/1 var(--lauf);letter-spacing:.17em;text-transform:uppercase;color:var(--text2);cursor:pointer}
.rh-wechsel button b{font:400 26px/1 var(--titel);letter-spacing:0;text-transform:none;color:var(--gold);margin-left:10px;vertical-align:-4px;border-bottom:1px solid rgba(216,178,100,.5)}
.rh-form.rh-neun:not(.rh-an-tafel) .rh-zur-tafel{display:block;animation:rhWird .7s cubic-bezier(.3,1.5,.5,1) both}
.rh-form.rh-an-tafel .rh-zur-theke{display:block}

.rh-felder{margin-top:clamp(36px,4vw,56px);display:grid;grid-template-columns:1.1fr .8fr .6fr 1fr 1.4fr;gap:14px}
.rh-form label{display:grid;gap:8px;min-width:0}
.rh-form label>span{font:500 11px/1 var(--lauf);letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.rh-form input:not([type=hidden]),.rh-form select{width:100%;min-width:0;background:var(--nacht);border:0;border-radius:10px;padding:15px 16px;color:var(--text);font:inherit;font-size:17px;
 box-shadow:inset 0 0 0 1px var(--gold-ll);outline:0;transition:box-shadow .5s}
.rh-form input:focus,.rh-form select:focus{box-shadow:inset 0 0 0 1px var(--gold)}
.rh-form select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
 background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.rh-fuss{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin-top:clamp(36px,4vw,52px)}
.rh-fuss .hinweis{font-size:13px;color:var(--text3)}
.rh-form .dank{display:none;margin:30px 0 0;text-align:center;font-family:var(--titel);font-size:clamp(24px,2.4vw,32px);color:var(--text)}
.rh-form.fertig .rh-weg{display:none!important} .rh-form.fertig .dank{display:block}
@media (max-width:900px){.rh-felder{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:760px){
  .rh-kopf{grid-template-columns:minmax(0,1fr)} .rh-zahl{justify-items:start;text-align:left}
  .rh-hocker{gap:4px;padding:18px 0 0;min-height:110px} .rh-h b{font-size:10px;letter-spacing:.06em} .rh-plus{font-size:20px}
  .rh-felder{grid-template-columns:minmax(0,1fr)}
  .rh-tisch{grid-template-columns:minmax(0,1fr);grid-template-areas:"oben" "platte" "unten" "knoepfe"} .rh-tknopf{grid-auto-flow:column;justify-content:center}
}
.ruhig .rh-h,.ruhig .rh-licht,.ruhig .rh-stuhl{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
/* Plus und Minus als zwei gezeichnete Striche, genau in der Mitte (kein Schriftzeichen) */
.rh-plus::before,.rh-plus::after{content:"";position:absolute;left:50%;top:50%;width:38%;height:2px;margin:-1px 0 0 -19%;border-radius:1px;background:currentColor}
.rh-plus::after{transform:rotate(90deg)} .rh-minus::after{display:none}
.rh-tknopf .rh-plus{width:100%;box-shadow:none;background:none!important}
@media (max-width:900px){.rh-felder{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.rh-h,.rh-licht,.rh-stuhl,.rh-theke,.rh-tafel{transition:none!important;animation:none!important}.rh-h,.rh-licht{opacity:1!important;transform:none!important}}

/* ---------- Das Haus · «Wer hinter der Bar steht» als zwei Steckbriefe (Wahl Robert 31.10.2026, _varianten/haus-15 Fassung 2).
   Bild gross, die Platte schiebt sich über die Bildkante und läuft beim Scrollen etwas schneller (--sb aus wild.js); Momo gespiegelt. */
.sb-zeile{display:grid;grid-template-columns:7fr 5fr;align-items:center;margin-bottom:clamp(40px,5vw,70px);--sb:1}
.sb-zeile:last-child{margin-bottom:0}
.sb-bild{grid-column:1;grid-row:1;position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:var(--rand-g);box-shadow:var(--schatten);background:var(--nacht3) center/cover;background-image:var(--lq)}
.sb-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 2.4s var(--k)}
.sb-zeile.da .sb-bild img{transform:none}
.sb-platte{grid-column:2;grid-row:1;margin-left:-90px;padding:clamp(26px,3vw,44px);z-index:2;transform:translateY(calc((1 - var(--sb))*90px))}
.sb-r{grid-template-columns:5fr 7fr}.sb-r .sb-bild{grid-column:2}.sb-r .sb-platte{grid-column:1;margin:0 -90px 0 0}
.sb-name{font-size:clamp(30px,3.2vw,46px);line-height:1.04}
.sb-platte .etikett{display:block;margin-top:14px}.sb-platte .text{margin-top:18px}
.sb-weg{margin-top:26px;border-top:1px solid var(--gold-l)}
.sb-weg>div{display:grid;grid-template-columns:82px 1fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--gold-l);align-items:baseline}
.sb-weg span{font-family:var(--titel);font-size:24px;color:var(--gold);line-height:1}
.sb-weg p{font-size:15.5px;color:var(--text2);line-height:1.5}
@media (max-width:760px){
  .sb-zeile,.sb-r{grid-template-columns:minmax(0,1fr)}
  .sb-bild,.sb-r .sb-bild{grid-column:1;grid-row:1}
  .sb-platte,.sb-r .sb-platte{grid-column:1;grid-row:2;margin:-50px 14px 0;transform:none}
}
.ruhig .sb-platte{transform:none}.ruhig .sb-bild img{transform:none;transition:none}

/* Besuch · «Wo» als dunkle Visitenkarte mit handgezeichneter Karte und Strassenschild (Wahl Robert 31.10.2026: Fassung 6 + Karte + Schild wie 11). Alles unter .wo-karte, nur transform. */
.wo-karte .innen{perspective:1600px}
.wo-karte .wk-karte{background:var(--nacht2);color:var(--text);border-radius:8px;box-shadow:inset 0 0 0 1px var(--gold-l),var(--schatten);padding:clamp(30px,4.6vw,72px);
  transition:transform 1.4s var(--k)}
.wo-karte:not(.da) .wk-karte{transform:translateY(140px)}   /* schwebt deckend von unten herein, klappt nicht mehr (Robert 31.10.2026) */
.wo-karte .wk-o{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(30px,4vw,64px);align-items:center}
.wo-karte .wk-logo{display:block;width:clamp(90px,10vw,150px);color:var(--rot)} .wo-karte .wk-logo svg{display:block;width:100%;height:auto}
.wo-karte .wk-txt{min-width:0;container-type:inline-size}
.wo-karte .wk-t{font-size:clamp(30px,min(7vw,10.4cqi),108px);line-height:.98;color:var(--creme);margin:0}
.wo-karte .wk-t .z{padding-bottom:.16em;margin-bottom:-.16em}
.wo-karte .wk-satz{margin:clamp(20px,2vw,28px) 0 0;color:var(--text2);font-size:clamp(17px,1.35vw,20px);line-height:1.62;max-width:56ch}
.wo-karte .wk-u{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,4vw,64px);align-items:stretch;margin-top:clamp(34px,4vw,60px);
  padding-left:calc(clamp(90px,10vw,150px) + clamp(30px,4vw,64px))}
.wo-karte .wk-l{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-width:0}
.wo-karte .wk-z{margin-top:0}
.wo-karte .wk-z div{color:var(--text2);border-color:var(--gold-l)} .wo-karte .wk-z a{color:var(--gold)} .wo-karte .wk-z .etikett{color:var(--gold)}
.wo-karte .wk-plan{position:relative;margin:0;align-self:center;min-width:0}
.wo-karte .wk-plan figcaption{margin-top:10px;font:400 11px/1.3 var(--lauf);letter-spacing:.04em;color:var(--text3);text-align:left}
/* die Karte, mit dem Stift gezogen */
.wo-karte .kk{display:block;width:100%;height:auto;overflow:hidden}
.wo-karte .kk path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.wo-karte .kk-str{stroke:rgba(237,228,216,.34);stroke-width:1.4}
.wo-karte .kk-haupt{stroke:rgba(237,228,216,.6);stroke-width:2.4}
.wo-karte .kk-wir{stroke:var(--creme);stroke-width:2.2}
.wo-karte .kk-zwei{stroke-width:1;opacity:.55}
.wo-karte .kk-bahn{stroke:var(--gold);stroke-width:1.6;stroke-dasharray:7 5}
.wo-karte .kk-kringel{stroke:var(--rot);stroke-width:2.6}
.wo-karte .kk-halt circle{fill:var(--gold);stroke:none} .wo-karte .kk-halt text{font:600 11px/1 var(--lauf);fill:var(--nacht)}
.wo-karte .kk-punkt{fill:var(--creme)}
.wo-karte .kk text{font-family:var(--titel)}
.wo-karte .kk-name{font-size:15px;font-style:italic;fill:var(--creme);letter-spacing:.02em}
.wo-karte .kk-hell{fill:rgba(237,228,216,.62);font-size:13px}
.wo-karte .kk-ort{font-size:16px;fill:var(--gold)}
.wo-karte .kk-klein{font:500 11px/1 var(--lauf)!important;letter-spacing:.12em;text-transform:uppercase;fill:rgba(237,228,216,.62)}
/* das Strassenschild an der Ecke, klappt herunter wie in Fassung 11 */
.wo-karte .wk-schild{position:absolute;left:calc(var(--ex) + 7%);top:calc(var(--ey) + 15%);display:flex;flex-direction:column;align-items:flex-start;gap:6px;perspective:700px}
.wo-karte .wk-pfosten{position:absolute;z-index:0;left:-6px;top:-16px;width:8px;height:3000px;border-radius:4px 4px 0 0;background:#7E7872;box-shadow:inset 2px 0 0 rgba(255,255,255,.22),inset -2px 0 0 rgba(0,0,0,.35)}
.wo-karte .wk-s{position:relative;z-index:1}
.wo-karte .wk-karte{overflow:hidden}
.wo-karte .wk-s{margin:0;display:inline-flex;align-items:center;gap:.5em;background:#FBF7F0;color:#141110;border-radius:5px;white-space:nowrap;
  box-shadow:inset 0 0 0 2.5px #FBF7F0,inset 0 0 0 4.5px #141110,0 16px 30px -16px rgba(0,0,0,.8);font:600 clamp(12px,1.15vw,17px)/1 var(--lauf);letter-spacing:-.01em;
  padding:.4em .66em .44em;transform-origin:50% 0;transition:transform 1.8s cubic-bezier(.3,1.7,.45,1) .9s}
.wo-karte .wk-a b{font-weight:600;padding-left:.5em;border-left:2px solid #141110}
.wo-karte .wk-c{font-size:clamp(10.5px,.9vw,13px);transition-delay:1.2s}
.wo-karte:not(.sd) .wk-s{transform:rotateX(-92deg)}
@media (max-width:1150px){.wo-karte .wk-u{padding-left:0;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
@media (max-width:600px){.wo-karte .wk-schild{position:static;margin:0 0 16px} .wo-karte .wk-s{font-size:15px} .wo-karte .wk-c{font-size:12px}}
@media (max-width:900px){.wo-karte .wk-o,.wo-karte .wk-u{grid-template-columns:minmax(0,1fr)} .wo-karte .wk-logo{width:90px}}
.ruhig .wo-karte .wk-karte,.ruhig .wo-karte .wk-s{transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.wo-karte .wk-karte,.wo-karte .wk-s{transform:none!important;transition:none!important}}

/* Haus · Was andere sagen: Flaschenetiketten in den Farben der Quellen (Robert 31.10.2026, Fassung 9 aus _varianten/stimmen-15 + Logos und CI) */
.et9{position:relative;margin-top:clamp(44px,5vw,72px)}
.et9-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.4vw,56px);overflow:hidden;padding-top:20px}
.et9-et{height:100%;border-radius:50% 50% 6px 6px / 22% 22% 6px 6px;padding:12px;box-shadow:var(--schatten);transform:translateY(105%);transition:transform 1.5s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--n)*.18s)}
#stimmen.da .et9-et,.ruhig .et9-et{transform:none}
.et9-in{height:100%;border-radius:50% 50% 4px 4px / 21% 21% 4px 4px;box-shadow:inset 0 0 0 1px var(--l1),inset 0 0 0 5px var(--grund),inset 0 0 0 6px var(--l2);
 padding:clamp(48px,5vw,72px) clamp(20px,2.4vw,34px) clamp(30px,3vw,44px);display:grid;gap:18px;justify-items:center;align-content:start;text-align:center}
.et9-logo{display:grid;place-items:center;height:clamp(36px,3.2vw,46px);width:100%}
.et9-logo img{display:block;width:auto;height:clamp(30px,2.8vw,40px);max-width:78%}
.et9-in .etikett{color:var(--klein);line-height:1.6;margin-top:-6px}
.et9-in>i{width:46px;height:1px;background:var(--l1)}
.et9-z{font-size:clamp(84px,8.4vw,132px);line-height:.95;color:var(--zahl)}
.et9-in p{margin:0;font-size:16px;line-height:1.6;color:var(--satz);max-width:26ch}
.et9-kante{display:block;height:2px;background:var(--gold);box-shadow:0 1px 0 rgba(0,0,0,.5)}
.et9-leer{visibility:hidden}
#stimmen{padding-top:clamp(96px,11vw,150px)}
#stimmen .kz{justify-content:center} #stimmen .t-kap{text-align:center}
.et9-presse{margin:clamp(56px,6vw,90px) 0 0;text-align:center}
.et9-presse p{margin:0 auto;max-width:none;font-family:var(--titel);font-size:clamp(24px,2.6vw,40px);line-height:1.38;color:var(--creme)}
.et9-presse p::before{content:'«';color:var(--gold)} .et9-presse p::after{content:'»';color:var(--gold)}
/* Falstaff: schwarze Wortmarke auf Weiss */
.et9-falstaff{--grund:#FFFFFF;--l1:#111;--l2:rgba(0,0,0,.35);--klein:#111;--zahl:#000;--satz:#3B3B3B;background:#FFFFFF}
.et9-falstaff .et9-logo img{height:clamp(34px,3.2vw,46px)}
/* Google: Weiss, die vier Farben als Leiste, gelbe Sterne */
.et9-google{--grund:#FFFFFF;--l1:#111;--l2:rgba(0,0,0,.35);--klein:#5F6368;--zahl:#202124;--satz:#5F6368;background:#FFFFFF}
.et9-google .et9-in>i:first-of-type{width:92px;height:3px;background:linear-gradient(90deg,#4285F4 0 25%,#EA4335 25% 50%,#FBBC04 50% 75%,#34A853 75%)}
.et9-sterne{position:relative;display:inline-block;margin-top:-6px;font-size:22px;letter-spacing:4px;line-height:1;color:#DADCE0}
.et9-sterne::before{content:'★★★★★';position:absolute;left:0;top:0;width:96%;overflow:hidden;white-space:nowrap;color:#FBBC04}
/* NeoTaste: Grün auf Nachtblau */
.et9-neo{--grund:#1C1D28;--l1:#53F293;--l2:rgba(83,242,147,.35);--klein:#53F293;--zahl:#53F293;--satz:rgba(255,255,255,.78);background:#1C1D28}
@media (max-width:760px){.et9-leer{display:none}.et9-reihe{grid-template-columns:minmax(0,1fr);overflow:visible}.et9-et{transform:translateY(80px)}}

/* «Wo» feiner (Robert 31.10.2026: «Textfelder, Überschriften, Logo … alles ästhetischer»): Logo so hoch wie der Titel und oben bündig,
   Hausnummer in Gold, Angaben als ruhige Tafel in der Titelschrift, Kartenschrift mit Freistellung gegen die Linien. */
.wo-karte .wk-o{align-items:start}
.wo-karte .wk-logo{width:clamp(96px,11.6vw,172px);margin-top:clamp(8px,1.1vw,16px)}
.wo-karte .wk-t{letter-spacing:-.012em}
.wo-karte .wk-nr{color:var(--gold)}
.wo-karte .wk-satz{padding-top:clamp(18px,1.8vw,26px);margin-top:clamp(22px,2.2vw,32px);border-top:1px solid var(--gold-l);max-width:52ch}
.wo-karte .wk-u{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);padding-left:0;gap:clamp(36px,5vw,84px)}
.wo-karte .wk-z div{grid-template-columns:96px minmax(0,1fr);gap:18px;padding:15px 0;align-items:baseline;border-color:var(--gold-ll)}
.wo-karte .wk-z div:first-child{border-top-color:var(--gold-l)} .wo-karte .wk-z div:last-child{border-bottom-color:var(--gold-l)}
.wo-karte .wk-z .etikett{padding-top:0;font-size:10.5px;letter-spacing:.2em;color:rgba(216,178,100,.82)}
.wo-karte .wk-z div>span:last-child{font-family:var(--titel);font-size:clamp(17px,1.3vw,19.5px);line-height:1.35;color:var(--creme);letter-spacing:.005em}
.wo-karte .wk-z a{color:var(--gold);white-space:nowrap;transition:color .5s var(--k)} .wo-karte .wk-z a:hover{color:var(--creme)}
.wo-karte .kk text{paint-order:stroke;stroke:var(--nacht2);stroke-width:5px;stroke-linejoin:round}
.wo-karte .kk-halt text{stroke:none}
@media (max-width:1150px){.wo-karte .wk-u{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:900px){.wo-karte .wk-u{grid-template-columns:minmax(0,1fr)} .wo-karte .wk-logo{width:96px;margin-top:0}}
@media (max-width:420px){.wo-karte .wk-z div{grid-template-columns:minmax(0,1fr);gap:6px} .wo-karte .wk-z a{white-space:normal}}
.wo-karte .wk-nb{white-space:nowrap}
.wo-karte .wk-plan figcaption{max-width:55%}
@media (max-width:600px){.wo-karte .wk-plan figcaption{max-width:none;padding-left:12px}}

/* Kopf der Seite «Das Haus» seit 31.10.2026 (Wahl Robert: Fassung 5 «Das Licht der Theke», _varianten/haus-hero-15b, dazu «Tapete in den Hintergrund»):
   oben das Gewölbe, der Titel auf der gelben Lichtkante der Theke, darunter sein Spiegelbild. Hinten die Tapete aus dem Sonnenmedaillon des Gewölbes, steht still. */
.th{position:relative;overflow:hidden;background:var(--nacht);display:flex;flex-direction:column;min-height:100vh;min-height:100svh;--ht:clamp(54px,8vw,128px)}
.th::before{content:"";position:absolute;inset:0;background:url(bild/haus-tapete.svg) 0 0/150px 150px repeat;opacity:.1;pointer-events:none}
.th>*{position:relative;z-index:1}
.th .th-o{position:relative;width:100%;flex:1 1 0;min-height:30vh;min-height:30svh;margin-top:90px;border-radius:0;overflow:hidden;background:var(--nacht3);box-shadow:var(--schatten)}
.th .th-b{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:translate3d(0,-30px,0);opacity:0;transition:transform 1.6s var(--k),opacity 1.2s var(--k)}
.th.da .th-b{transform:none;opacity:1}
.th .th-m{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(28px,4vh,44px) 0 clamp(40px,6vh,70px)}
.th .th-t{font-size:var(--ht);line-height:.98;letter-spacing:-.012em;color:var(--creme)}
.th .th-t .z{display:inline-block;margin-right:.24em;padding-bottom:.2em;margin-bottom:-.2em}
.th .th-t .z:last-child{margin-right:0}
.th .zl .z>span{transition-delay:calc(.5s + var(--i,0)*.11s)}
.th .th-kante{width:min(1000px,88vw);height:3px;margin-top:6px;border-radius:2px;background:#F4D35E;box-shadow:0 0 14px 2px rgba(244,211,94,.55),0 0 46px 6px rgba(244,190,70,.22);transform:scaleX(0);transition:transform 1.4s var(--k) 1.1s}
.th.da .th-kante{transform:none}
.th .th-spiegel{height:calc(var(--ht) * .62);overflow:hidden;opacity:0;transition:opacity 1.4s ease 1.8s;-webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%)}
.th.da .th-spiegel{opacity:.2}
.th .th-spiegel .th-t{transform:scaleY(-1);transform-origin:50% 0;margin-top:calc(var(--ht) * .98);color:#F4D35E}
.th .th-spiegel .z>span{transform:none!important}
.th .th-s{margin-top:0;max-width:64ch;font-size:clamp(17px,1.4vw,21px);line-height:1.6;color:var(--text);transition-delay:2s}
@media (max-width:760px){.th{--ht:clamp(46px,13vw,64px)}.th .th-t .z{display:block;margin-right:0}.th .th-spiegel{display:none}.th .th-o{min-height:26vh;margin-top:84px}}
.ruhig .th .th-b{opacity:1;transform:none}.ruhig .th .th-kante{transform:none}

/* ---------- Besuch: Kopf «Das Licht geht an» (Wahl Robert 31.10.2026, _varianten/besuch-hero-15c Fassung 5).
   Sechs Fotos Kante an Kante im Halbdunkel, das Licht geht eins nach dem anderen an (nur opacity), darüber das dunkle Band. */
.lw{position:relative;overflow:hidden;background:#050404;height:min(100svh,920px);min-height:600px}
.lw .lw-wand{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr 1fr;gap:4px}
.lw .lw-f{position:relative;margin:0;overflow:hidden;background:var(--nacht3) center/cover no-repeat;background-image:var(--lq)}
.lw .lw-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lw .lw-f::after{content:"";position:absolute;inset:0;background:#0b0807;opacity:.86;transition:opacity .7s var(--k) calc(var(--d) * .3)}
.lw.da .lw-f::after,.ruhig .lw .lw-f::after{opacity:0}
.lw .lw-band{position:absolute;left:0;right:0;top:54%;transform:translateY(-50%);z-index:4;background:var(--nacht);padding:clamp(24px,2.8vw,40px) 0;box-shadow:0 -1px 0 var(--gold-l),0 1px 0 var(--gold-l)}
.lw .lw-band .innen{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(30px,4vw,70px);align-items:end}
.lw .lw-t{font-size:clamp(84px,9vw,150px);line-height:.98;letter-spacing:-.01em;color:var(--creme);white-space:nowrap}
.lw .lw-t .z{padding-bottom:.2em;margin-bottom:-.2em}
.lw .lw-s{font-size:clamp(18px,1.45vw,21px);line-height:1.55;color:var(--text);max-width:42ch;margin:0 0 .9em}
@media (max-width:860px){
 .lw .lw-wand{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,1fr)}
 .lw .lw-band .innen{grid-template-columns:1fr;gap:10px}
 .lw .lw-t{font-size:clamp(60px,17vw,90px)}
 .lw .lw-s{margin:0;font-size:17px}
}
.wo-karte .wk-t .z{padding:.06em .16em .24em;margin:-.06em -.16em -.24em}

/* Besuch · «Wann» als Leuchtschild (Fassung 15 aus _varianten/wann-15, Wahl Robert 31.10.2026). Alles unter #wann. */
#wann.wann{overflow:clip}
#wann .w-hoch{transform:translateY(70px);transition:transform 1.25s var(--k);transition-delay:calc(var(--n,0)*.1s)}
#wann.da .w-hoch{transform:none}
#wann .w-satz{margin-top:22px}
#wann .kachel img{transform:none}
#wann .w15-g{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,80px);align-items:center}
#wann .w15-schild{position:relative;background:#0A0807;border:3px solid #E8C25A;border-radius:4px;padding:clamp(28px,3.6vw,52px);text-align:center;margin-top:6px;box-shadow:var(--schatten)}
#wann .w15-licht{position:absolute;inset:-3px;border-radius:4px;pointer-events:none;box-shadow:0 0 0 3px #F6D27A,0 0 30px 4px rgba(246,210,122,.5),inset 0 0 26px rgba(246,210,122,.25);opacity:0;transition:opacity 1.2s ease .9s}
#wann.da .w15-licht{opacity:1}
#wann .w15-wild{display:block;font:500 13px/1 var(--lauf);letter-spacing:.32em;text-transform:uppercase;color:#E8C25A}
#wann .w15-t{font-size:clamp(36px,4.4vw,64px);color:var(--creme);margin:18px 0 10px}
#wann .w15-zt{text-align:left;max-width:520px;margin:0 auto}
#wann .w15-zt div{border-color:rgba(232,194,90,.22)}
#wann .w15-zt div.heute b,#wann .w15-zt .jetzt{color:#E8C25A}
#wann .w15-bild{aspect-ratio:3/4}
@media (prefers-reduced-motion:reduce){#wann .w-hoch{transform:none;transition:none}#wann .w15-licht{transition:none}}
@media (max-width:800px){#wann .w15-g{grid-template-columns:1fr}#wann .w15-bild{max-height:70vh;aspect-ratio:4/5}}

/* Fenster direkt unter dem Kopf «Das Haus» (31.10.2026): ohne Abstand oben und unten, keine Balken */
.th + .fk{margin-top:0}
.fk:has(+ #raum){margin-bottom:0}

/* Das Haus · «Was bisher geschah.» Fassung 4 «Filmstreifen» (Robert 31.10.2026, _varianten/jahre-30): Streifen mit Lochrand zieht von rechts ein, Jahre darunter */
#seit2017 .film-breit{width:min(1520px,95vw);margin:46px auto 0}
#seit2017 .film-streifen{background:#0B0807;padding:40px 0;position:relative;overflow:hidden;border-radius:6px;box-shadow:var(--schatten)}
#seit2017 .film-streifen::before,#seit2017 .film-streifen::after{content:"";position:absolute;left:0;right:0;height:12px;background:repeating-linear-gradient(90deg,transparent 0 12px,#E9DFCF 12px 26px,transparent 26px 34px);opacity:.85}
#seit2017 .film-streifen::before{top:14px} #seit2017 .film-streifen::after{bottom:14px}
#seit2017 .film-zug{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:0 14px;transition:transform 2.4s var(--k)}
#seit2017 .film-streifen:not(.da) .film-zug{transform:translateX(42%)}
#seit2017 .film-nr{display:block;font:500 10.5px/1 var(--lauf);letter-spacing:.16em;color:var(--gold);margin:0 0 9px}
#seit2017 .film-b{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:3px;background:var(--nacht3) var(--lq) center/cover}
#seit2017 .film-b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#seit2017 .film-txt{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:34px 14px 0}
#seit2017 .film-j{transition:transform 1.4s var(--k) calc(var(--n)*.09s)}
#seit2017 .film-j:not(.da){transform:translateY(70px)}
#seit2017 .film-z{display:block;font-family:var(--titel);font-size:clamp(40px,3.4vw,56px);line-height:1;color:var(--gold);margin:0 0 14px;letter-spacing:-.01em;font-feature-settings:"lnum" 1}
#seit2017 .film-j p{font-size:clamp(15.5px,1.08vw,17.5px);line-height:1.6;color:var(--text2)}
.ruhig #seit2017 .film-zug,.ruhig #seit2017 .film-j{transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){#seit2017 .film-zug,#seit2017 .film-j{transform:none!important;transition:none!important}}
@media (max-width:900px){#seit2017 .film-zug,#seit2017 .film-txt{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Besuch · Reservieren (Robert 31.10.2026): Pfeile im Feld «Plätze» und Kalender-Zeichen hell auf dunkel; voller Abstand zum hellen Abschnitt «Wo» darüber */
.rh-form input,.rh-form select{color-scheme:dark;accent-color:var(--gold)}
.kap + .kap.rh{padding-top:clamp(72px,9vw,120px)}

/* ---------- Titel: Luft über den Buchstaben (Robert 31.10.2026: «die Zeilen sind oben abgeschnitten … zieht sich über alle Seiten»).
   Der Schlitz schnitt bei engem Zeilenabstand die Oberkante von B, 2, U, E, W ab. Mehr Innenraum oben, gleich viel Gegenrand: Abstände bleiben. */
.zl .z{padding-top:.14em;margin-top:-.14em}

/* ---------- Auswahl, Kalender und Uhrzeit im Stil des Hauses (Master Website-Bau 2.9 Punkt 11, Robert 31.10.2026). Verhalten: Auswahl-Block in wild.js
   (Baustein Grand Beau-Rivage über Salt & Silver). Wild Side: Cremekarte wie die Plakate der Bar mit doppelter Goldkante, Zahlen in Prata, gewählt dunkel mit Creme, heute mit Goldring. */
.hwahl{position:relative;display:block;width:100%;min-width:0;margin:0!important;padding:0!important;font:inherit;letter-spacing:normal!important;text-transform:none!important;color:inherit}
.formular label span.hwahl,.rh-form label>span.hwahl{font:inherit;letter-spacing:normal;text-transform:none;color:inherit}
.hwahl-nativ{position:absolute!important;inset:0;width:100%!important;height:100%!important;opacity:0!important;pointer-events:none!important}
.hwahl-knopf{-webkit-appearance:none;appearance:none;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:0;margin:0;border:0;background:none;text-align:left;cursor:pointer;line-height:1.3;font:inherit}
.hwahl-knopf b{font-weight:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hwahl-knopf svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.6;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.hwahl--offen .hwahl-knopf svg{transform:rotate(180deg)}
.hwahl-knopf:focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--gold)!important}
.hwahl-liste{position:fixed;z-index:2147483000;max-height:min(52vh,420px);overflow:auto;overscroll-behavior:contain;margin:0;padding:10px;list-style:none;border-radius:18px;
  background:var(--creme);color:var(--dunkel);text-align:left;
  box-shadow:inset 0 0 0 1px rgba(160,127,58,.55),inset 0 0 0 5px var(--creme),inset 0 0 0 6px rgba(160,127,58,.3),0 34px 50px -24px rgba(0,0,0,.8),0 10px 18px -10px rgba(0,0,0,.5);
  opacity:0;transform:translateY(-8px) scale(.98);transform-origin:50% 0;transition:opacity .3s cubic-bezier(.32,.72,0,1),transform .45s cubic-bezier(.16,1,.3,1);outline:0}
.hwahl-liste.hwahl-oben{transform-origin:50% 100%;transform:translateY(8px) scale(.98)}
.hwahl-liste.hwahl-auf{opacity:1;transform:none}
.hwahl-liste li{position:relative;display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:11px;font:400 21px/1.2 var(--titel);color:var(--dunkel);cursor:pointer;transition:background .2s,color .2s}
.hwahl-liste li+li::before{content:'';position:absolute;left:16px;right:16px;top:0;height:1px;background:rgba(160,127,58,.2)}
.hwahl-liste li i{width:7px;height:7px;flex:none;rotate:45deg;box-shadow:inset 0 0 0 1px rgba(160,127,58,.6);transition:background .25s}
.hwahl-liste li.hwahl-hier{background:rgba(160,127,58,.12)}
.hwahl-liste li[aria-selected=true]{background:var(--nacht);color:var(--creme)}
.hwahl-liste li[aria-selected=true] i{background:var(--gold);box-shadow:none}
.hwahl-liste li[aria-selected=true]::before,.hwahl-liste li[aria-selected=true]+li::before{opacity:0}
.hwahl-liste li[aria-disabled=true]{opacity:.4;cursor:default}

.zw-nativ{pointer-events:none}
.zw-nativ::-webkit-calendar-picker-indicator{display:none}
.zw-knopf{position:absolute;z-index:2;margin:0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.zw-knopf:focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--gold);border-radius:10px}
:where([role="dialog"]).zw{position:absolute;z-index:2147483000;box-sizing:border-box;padding:16px 16px 14px;border-radius:20px;background:var(--creme);color:var(--dunkel);text-align:center;
  box-shadow:inset 0 0 0 1px rgba(160,127,58,.55),inset 0 0 0 5px var(--creme),inset 0 0 0 6px rgba(160,127,58,.3),0 34px 50px -24px rgba(0,0,0,.8),0 10px 18px -10px rgba(0,0,0,.5);
  opacity:0;transform:translateY(-8px) scale(.98);transform-origin:50% 0;transition:opacity .3s cubic-bezier(.32,.72,0,1),transform .45s cubic-bezier(.16,1,.3,1)}
.zw--fest{position:fixed}
.zw--oben{transform-origin:50% 100%;transform:translateY(8px) scale(.98)}
.zw--auf{opacity:1;transform:none}
.zw--date{width:min(352px,calc(100vw - 20px))}
.zw__kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 4px 12px}
.zw__monat{margin:0;font:400 24px/1.1 var(--titel);color:var(--dunkel)}
.zw__monat b{font-weight:400}
.zw__pfeil{display:grid;place-items:center;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:50%;cursor:pointer;color:var(--creme);background:var(--nacht);box-shadow:0 6px 12px -7px rgba(0,0,0,.6);transition:transform .3s cubic-bezier(.32,.72,0,1),background .3s}
.zw__pfeil:hover{background:var(--rot)}
.zw__pfeil svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zw__pfeil--zur svg{transform:rotate(180deg)}
.zw__tage,.zw__raster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.zw__tage{padding:10px 0 6px;border-top:1px solid rgba(160,127,58,.3)}
.zw__tage span{font:500 10.5px/1 var(--lauf);letter-spacing:.14em;text-transform:uppercase;color:#8F6E2E}
.zw__tag{display:grid;place-items:center;aspect-ratio:1;margin:0;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;font:400 19px/1 var(--titel);font-variant-numeric:lining-nums;color:var(--dunkel);transition:background .2s,color .2s}
.zw__tag:hover,.zw__tag:focus-visible{outline:0;background:rgba(160,127,58,.16)}
.zw__tag--heute{box-shadow:inset 0 0 0 1.5px var(--gold)}
.zw__tag[aria-pressed=true]{background:var(--nacht);color:var(--creme);box-shadow:inset 0 0 0 1.5px var(--gold)}
.zw__tag[disabled]{opacity:.28;cursor:default;background:none}
.zw--time{padding:12px}
.zw__zeit{display:flex;align-items:stretch;justify-content:center;gap:6px}
.zw__spalte{display:flex;flex-direction:column;gap:2px;width:74px;max-height:238px;overflow:auto;overscroll-behavior:contain;padding:2px;scrollbar-width:thin}
.zw__z{flex:none;margin:0;padding:9px 0;border:0;border-radius:11px;background:none;cursor:pointer;font:400 20px/1 var(--titel);color:var(--dunkel);transition:background .2s,color .2s}
.zw__z:hover,.zw__z:focus-visible{outline:0;background:rgba(160,127,58,.16)}
.zw__z[aria-selected=true]{background:var(--nacht);color:var(--creme)}
.zw__punkt{align-self:center;font:400 22px/1 var(--titel);font-style:normal;color:#8F6E2E}
.dt-feld{position:relative}
.dt-nativ{color:transparent!important;-webkit-text-fill-color:transparent;caret-color:transparent}
.dt-nativ::-webkit-datetime-edit,.dt-nativ::-webkit-datetime-edit-fields-wrapper{color:transparent;-webkit-text-fill-color:transparent}
.dt-nativ::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer}
.dt-anz{position:absolute;display:flex;align-items:center;margin:0;pointer-events:none;white-space:nowrap;overflow:hidden;box-sizing:border-box}
.dt-anz--leer{opacity:.55}
/* Kalender-Zeichen rechts im Datumsfeld, in Gold (das des Browsers ist ausgeblendet) */
.dt-feld:has(> input[type=date])::after{content:"";position:absolute;right:16px;bottom:0;height:var(--dt-h,52px);width:18px;pointer-events:none;
  background:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8B264' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.hwahl-liste,:where([role="dialog"]).zw{transition:none}}
/* Besuch · Wo: Knopf «Auf der Karte» mittig in seinem Bereich (Robert 31.10.2026) */
.wo-karte .wk-l .knoepfe{flex:1;display:flex;align-items:center;justify-content:center;margin:0}

/* ---------- Besuch · «Gut zu wissen» an der Goldlinie (Fassung 9 aus _varianten/fragen-15, Wahl Robert 31.10.2026). Die Linie wächst mit dem Scrollen,
   die Fragen stehen abwechselnd links und rechts, am Ende läuft die Linie in den Knopf zur Feiern-Seite (Robert: «statt dass das im Nichts endet»).
   Stand davor: *.vor-fragen-goldlinie-2026-10-31 */
.fg-kopf{display:grid;justify-items:center;text-align:center}
.fg .fg-t{font-size:clamp(52px,7.4vw,112px);line-height:1;margin:0}
.fg-weg{position:relative;margin-top:clamp(50px,6vw,90px);display:grid;gap:clamp(26px,3vw,44px)}
.fg-weg::before{content:"";position:absolute;left:50%;top:0;bottom:28px;width:1px;background:var(--gold-ll)}
.fg-linie{position:absolute;left:50%;top:0;bottom:28px;width:1px;background:var(--gold);transform-origin:top;transform:scaleY(0);box-shadow:0 0 12px rgba(216,178,100,.6)}
.fg-p{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(40px,6vw,100px)}
.fg-p>div{opacity:0;transform:translateY(40px);transition:transform 1.1s var(--k),opacity .8s var(--k)}
.fg-p.l>div{grid-column:1;text-align:right} .fg-p.r>div{grid-column:2}
.fg-p.da>div{opacity:1;transform:none}
.fg-punkt{position:absolute;left:50%;top:14px;width:13px;height:13px;margin-left:-6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px var(--nacht),0 0 16px rgba(216,178,100,.7);transform:scale(0);transition:transform .7s cubic-bezier(.3,1.5,.5,1)}
.fg-p.da .fg-punkt{transform:scale(1)}
.fg-p h3{margin:0;font-weight:400;font-size:clamp(24px,2.4vw,34px);line-height:1.15}
.fg-p p{margin:12px 0 0;color:var(--text2);font-size:clamp(16px,1.25vw,18px);line-height:1.6;max-width:44ch}
.fg-p.l p{margin-left:auto}
.fg-p p a{color:var(--gold)}
/* Ende: die Linie läuft in den Knopf */
.fg-ende{position:relative;z-index:1;display:grid;justify-items:center;padding-top:clamp(40px,5vw,70px)}
.fg-ende .fg-punkt{top:0}
.fg-ende .knopf{opacity:0;transform:translateY(30px) scale(.94);transition:transform 1s cubic-bezier(.3,1.4,.5,1),opacity .7s var(--k)}
.fg-ende.da .fg-punkt{transform:scale(1)}
.fg-ende.da .knopf{opacity:1;transform:none}
@media (max-width:760px){
  .fg-weg::before,.fg-linie,.fg-punkt{left:8px}
  .fg-p{grid-template-columns:minmax(0,1fr);padding-left:34px} .fg-p.l>div,.fg-p.r>div{grid-column:1;text-align:left} .fg-p.l p{margin-left:0}
  .fg-ende{justify-items:start;padding-left:34px} .fg-ende .fg-punkt{left:8px}
}
.ruhig .fg-p>div,.ruhig .fg-punkt,.ruhig .fg-ende .knopf{opacity:1!important;transform:none!important;transition:none!important}
.ruhig .fg-linie{transform:none!important}
@media (prefers-reduced-motion:reduce){.fg-p>div,.fg-punkt,.fg-ende .knopf{opacity:1!important;transform:none!important;transition:none!important}.fg-linie{transform:none!important}}

/* Die ganze Bar ab 30 (Robert 31.10.2026: «von 20 direkt bei 30 … aus dem Tisch wird die gezeichnete 3D-Bar») */
.rh-buehne{position:relative}
.rh-bar{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(16px,2vw,30px);align-items:center;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(60px) scale(.96);transition:transform 1s var(--k),opacity .7s var(--k),visibility 0s 1s}
.rh-form.rh-an-bar .rh-bar{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:.15s,.15s,0s}
.rh-form.rh-an-bar .rh-theke{opacity:0;transform:translateY(40px);pointer-events:none}
.rh-barbild{height:100%;min-width:0} .rh-bar .rh-tknopf{grid-area:auto} .rh-barbild svg{display:block;width:100%;height:100%;overflow:visible}
.rh-strich{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--k) calc(var(--d)*1ms + 250ms)}
.rh-fein{stroke-width:1;opacity:.45} .rh-flasche{stroke-width:1.2;opacity:.75}
.rh-platte3{fill:var(--nacht3);fill-opacity:0;transition:stroke-dashoffset 1.1s var(--k) calc(var(--d)*1ms + 250ms),fill-opacity .8s ease 1.2s}
.rh-kante{stroke-width:2.4;filter:drop-shadow(0 0 6px rgba(216,178,100,.7))}
.rh-sitz3{fill:var(--gold);fill-opacity:0;transition:stroke-dashoffset 1.1s var(--k) calc(var(--d)*1ms + 250ms),fill-opacity .6s ease calc(var(--d)*1ms + 900ms)}
.rh-form.rh-an-bar .rh-strich{stroke-dashoffset:0} .rh-form.rh-an-bar .rh-platte3,.rh-form.rh-an-bar .rh-sitz3{fill-opacity:1}
@media (max-width:640px){.rh-bar{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:12px} .rh-bar .rh-tknopf{justify-content:center} .rh-barbild{overflow:hidden} .rh-barbild svg{overflow:hidden}}
.ruhig .rh-strich{transition:none!important}
@media (prefers-reduced-motion:reduce){.rh-bar,.rh-strich,.rh-platte3,.rh-sitz3{transition:none!important}}
/* Satz im Kopf geht mit dem Kopf auf, nicht erst, wenn er selbst im Blick ist (bei 1000 × 650 stand er sonst unsichtbar unten) */
.th.da .th-s{opacity:1;transform:none}

/* ---------- Bilder ohne Unschärfe (Robert 31.10.2026): kein verschwommenes Vorschaubild mehr, jedes Bild erscheint erst ganz geladen und blendet weich auf.
   Der Kopf jeder Seite bleibt dunkel, bis alle seine Bilder fertig sind, dann geht er auf. */
[style*="--lq"]:has(img){--lq:none!important}
img.lad:not(.geladen){opacity:0!important}
img.blende{animation:wild-bild-ein .7s cubic-bezier(.22,1,.36,1) backwards}
@keyframes wild-bild-ein{from{opacity:0}}
/* Erster Blick komplett (Robert 31.10.2026): die Seite bleibt unsichtbar, bis alle Bilder im ersten Bild geladen sind (wild.js setzt .offen), Rückfall nach 3 s */
html.js:not(.offen) body{animation:wild-erst 3s steps(1,end) both}
@keyframes wild-erst{from{visibility:hidden}to{visibility:visible}}
#auftakt .th-b,#auftakt .fr-t{opacity:1!important}   /* Kopfbilder Haus/Feiern: Bewegung bleibt, aber ab dem ersten Moment voll da */
@media (prefers-reduced-motion:reduce){img.blende{animation:none}}

/* ---------- Besuch: Strassenschild klappt erst, wenn es selbst im Bild steht (wild.js setzt .sd), ohne lange Wartezeit */
.wo-karte .wk-s{transition-delay:.15s}
.wo-karte .wk-c{transition-delay:.45s}
/* Hero-Titel sofort (Robert 31.10.2026): fährt beim Öffnen direkt hoch, wartet nicht auf die Bilder, kurz und flüssig */
html.js #auftakt .titel .zl .z>span{transition:transform .8s cubic-bezier(.2,.75,.25,1) calc(var(--i,1)*.07s - .07s)!important;will-change:transform}
html.js #auftakt .titel .zl:not(.sofort) .z>span{transform:translateY(118%)!important}
html.js #auftakt .titel .zl.sofort .z>span{transform:none!important}

/* Das Haus · «Dein Platz» (Wahl Robert 31.10.2026, _varianten/platz Fassung 1): vier Plätze nebeneinander, Hochformat in normaler Grösse,
   darunter Überschrift und Satz. Die Spalten steigen nacheinander deckend von unten auf. */
.pz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,40px);margin-top:clamp(30px,3.6vw,52px)}
.pz-s{transform:translateY(90px);transition:transform 1.4s var(--k);transition-delay:calc(var(--n)*.14s)}
.pz.da .pz-s,.ruhig .pz-s{transform:none}
.pz-b{position:relative;aspect-ratio:4/5;border-radius:var(--rand-g);overflow:hidden;box-shadow:var(--schatten);margin-bottom:22px}
.pz-f{position:absolute;inset:0;margin:0;overflow:hidden;background:var(--nacht3) center/cover;background-image:var(--lq)}
.pz-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pz-s h3.titel{font-size:clamp(24px,2.2vw,32px);line-height:1.12;margin:0 0 12px}
.pz-s .text{margin:0;font-size:15.5px}
@media (max-width:900px){.pz{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}}
@media (max-width:560px){.pz{grid-template-columns:1fr}}

/* ---------- Startseite «Lauter»: das Plakat steigt von unten herein, wenn es selbst ins Bild kommt (Robert 01.11.2026), deckend, ohne Einblenden */
#lauter .lu-flyer.sw{opacity:1!important;transform:translateY(200px) rotate(-2deg)!important;transition:transform 1.5s cubic-bezier(.22,1,.36,1)!important}
#lauter .lu-flyer.sw.hoch,.ruhig #lauter .lu-flyer.sw{transform:rotate(-2deg)!important}
@media (max-width:760px){#lauter .lu-flyer.sw{transform:translateY(120px) rotate(-1.2deg)!important}#lauter .lu-flyer.sw.hoch{transform:rotate(-1.2deg)!important}}