/* Dicke Butz — Produktionsstylesheet.
   Schriften: assets/css/schriften.css (lokal, kein Google). */
/* ============================================================
   DICKE BUTZ — Editorial Build
   Archivo Black (Display) · Cutive (Kontrast) · Montserrat (Copy)
   Ersatz für Nexa Rust Sans Black / American Typewriter / Brandon Grotesque
   ============================================================ */
:root{
  --ink:#0B0A09;
  --bone:#F4EEE3;
  --dim:#8E877D;
  --rust:#b5562c;
  --rust-t:#d87444;   /* helleres Rust für Kleintext, Kontrast 6:1 */
  --bronze:#d6964a;
  --mint:#6ba293;
  --forest:#004943;
  --pink:#EC008C;
  --cream:#F2E8D2;
  --chili:#AB0900;
  --e:cubic-bezier(.16,.84,.28,1);
  --pad:clamp(1.1rem,4.5vw,4.5rem);
  --mat:clamp(8px,.62vw,12px);   /* Passepartout zwischen Foto und Rahmen */
  --i-rays:url('../img/logo/rays.png');
  --i-base:url('../img/logo/base.png');
  /* Nur der Beschnitt der vorhandenen Wortmarke — nichts hinzugefuegt. */
  /* Vollstaendiges Markenzeichen — aus den Originalebenen zusammengesetzt.
     Ueberall dort, wo das Logo als EIN Bild steht, wird diese Datei
     verwendet. Die Einzelebenen darueber bleiben nur fuer die
     Startanimation im Hero noetig. */
  --i-db:url('../brand/dicke-butz/dicke-butz-logo.png');
  --i-cbody:url('../img/logo/cbody.png');
  --i-cmono:url('../img/logo/cmono.png');
  --i-cmous:url('../img/logo/cmous.png');
  --i-ring:url('../img/logo/ring.png');
  --i-butz:url('../brand/butzeria/butzeria-logo.png');
  --i-voka1:url('../img/logo/voka1-neon.png');
  --i-voka2:url('../img/logo/voka2-neon.png');
  --i-voka3:url('../img/logo/voka3-neon.png');
  --i-voka:url('../brand/voka/voka-logo-neon.png');
  --i-ukii:url('../brand/urban-kitchen-ii/urban-kitchen-ii-logo.png');
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--bone);
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--rust);color:#fff}

.backdrop{position:fixed;inset:0;z-index:-2;background:var(--ink);transition:background-color .9s var(--e)}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.42;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}

.skip{position:fixed;left:-9999px;top:0;z-index:120;background:var(--rust);color:#fff;padding:.9rem 1.4rem;font-weight:700}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:3px solid var(--bronze);outline-offset:4px}

/* ---------- Typografie ---------- */
.dsp{font-family:'Archivo Black','Arial Black',sans-serif;font-weight:400;text-transform:uppercase;
  line-height:.8;letter-spacing:-.028em}
.mega{font-size:clamp(3.4rem,20vw,17rem)}
.big{font-size:clamp(2.6rem,10vw,8rem)}
.mid{font-size:clamp(1.7rem,4.6vw,3.6rem);line-height:.92}
.mono{font-family:'Cutive',Georgia,serif;text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;line-height:1.7}
.mono-lg{font-family:'Cutive',Georgia,serif;font-size:clamp(.95rem,1.5vw,1.15rem);line-height:1.75}
p{max-width:60ch}
.copy{font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.75;color:var(--dim)}
.vert{writing-mode:vertical-rl;text-orientation:mixed}

/* ---------- Cursor ---------- */
.cur,.cur-r{position:fixed;top:0;left:0;z-index:110;pointer-events:none;border-radius:50%;mix-blend-mode:difference;display:none}
.cur{width:7px;height:7px;background:#fff;margin:-3.5px 0 0 -3.5px}
.cur-r{width:38px;height:38px;border:1px solid rgba(255,255,255,.75);margin:-19px 0 0 -19px;
  transition:width .3s var(--e),height .3s var(--e),margin .3s var(--e),border-color .3s}
.cur-r.hot{width:74px;height:74px;margin:-37px 0 0 -37px;border-color:#fff}
@media (hover:hover) and (pointer:fine){ .cur,.cur-r{display:block} body{cursor:none} a,button{cursor:none} }

/* ---------- Kopfzeile ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:80;display:flex;align-items:center;gap:1rem;
  padding:clamp(.8rem,2vw,1.5rem) var(--pad);mix-blend-mode:difference}
.top .mark{width:44px;flex:none}
.top .wm{font-family:'Archivo Black',sans-serif;font-size:.9rem;letter-spacing:.02em;text-transform:uppercase;line-height:1;color:#fff}
.top .wm em{font-style:normal;display:block;font-family:'Cutive',serif;font-size:.56rem;letter-spacing:.24em;margin-top:.28rem;opacity:.7}
.top .right{margin-left:auto;display:flex;align-items:center;gap:clamp(.6rem,1.6vw,1.3rem)}
.lang{display:flex;gap:.15rem;font-family:'Cutive',serif;font-size:.72rem;letter-spacing:.14em}
.lang button{padding:.4rem .35rem;color:rgba(255,255,255,.5);transition:color .25s}
.lang button.on{color:#fff;text-decoration:underline;text-underline-offset:4px}
.menub{display:flex;align-items:center;gap:.6rem;font-family:'Cutive',serif;font-size:.75rem;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;padding:.6rem 0;min-height:44px}
.menub .bars{width:26px;display:grid;gap:5px}
.menub .bars i{height:2px;background:#fff;display:block;transition:transform .4s var(--e),opacity .3s}
.menub[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menub[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.menub[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Menü ---------- */
.menu{position:fixed;inset:0;z-index:75;background:var(--ink);display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(5rem,10vh,7rem) var(--pad) clamp(1.5rem,4vh,2.5rem);
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--e);overflow-y:auto}
.menu[data-open="true"]{clip-path:inset(0 0 0 0)}
.menu-houses{display:grid;gap:clamp(.4rem,1.2vw,1rem);align-content:center}
.mh{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1.2rem;padding:clamp(.7rem,1.6vw,1.1rem) 0;
  border-top:1px solid rgba(244,238,227,.18);min-height:56px}
.mh:last-of-type{border-bottom:1px solid rgba(244,238,227,.18)}
.mh .n{font-family:'Archivo Black',sans-serif;font-size:clamp(1.9rem,6.4vw,4.6rem);text-transform:uppercase;
  line-height:.88;letter-spacing:-.02em;transition:transform .45s var(--e),color .35s}
.mh .adr{font-family:'Cutive',serif;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-left:auto}
.mh:hover .n,.mh:focus-visible .n{transform:translateX(clamp(.5rem,1.6vw,1.6rem))}
.mh[data-b="butzeria"]:hover .n{color:var(--pink)}
.mh[data-b="voka"]:hover .n{color:var(--rust)}
.mh[data-b="ukii"]:hover .n{color:#8FBE68}
.menu-links{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:clamp(1.5rem,4vh,2.6rem)}
.menu-links a{font-family:'Cutive',serif;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);transition:color .25s;padding:.6rem 0;min-height:44px;display:inline-flex;align-items:center}
.menu-links a:hover{color:var(--bone)}
.menu-foot{display:flex;flex-wrap:wrap;gap:.4rem 2rem;align-items:end;justify-content:space-between;
  font-family:'Cutive',serif;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* ============================ HERO ============================ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(6rem,14vh,9rem) var(--pad) clamp(1.2rem,4vh,2.4rem);overflow:hidden}
.ring{position:absolute;left:52%;top:34%;width:min(1150px,132vw);aspect-ratio:1;z-index:0;pointer-events:none;
  transform:translate(-50%,-50%);opacity:.075;
  background:var(--i-ring) center/contain no-repeat;
  -webkit-mask-image:radial-gradient(circle,rgba(0,0,0,.3) 14%,#000 36%,rgba(0,0,0,.3) 58%,transparent 74%);
          mask-image:radial-gradient(circle,rgba(0,0,0,.3) 14%,#000 36%,rgba(0,0,0,.3) 58%,transparent 74%);
  animation:spin 170s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.hero-edge{position:absolute;left:calc(var(--pad) * .28);top:26vh;z-index:2;color:var(--dim);opacity:.75;letter-spacing:.3em}
/* Ab Laptop aufwärts nimmt die Fotografie deutlich weniger Breite ein.
   Je Marke bleibt genau ein Leitbild gross: Butzeria die Gästereihe,
   VOKA die Yaprak-Platte. Alles andere tritt zurück. */
@media(max-width:900px){.hero-edge{display:none}}
.hero-type{position:relative;z-index:2;margin-left:calc(var(--pad) * -1);width:calc(100% + var(--pad) * 2)}
.hero-type .l{display:block;padding-left:var(--pad);white-space:nowrap}
.hero-type .l2{margin-top:-.07em;padding-left:calc(var(--pad) + 21vw)}
.hero-type .lw{display:block;overflow:hidden}
.hero-type .lw > span{display:block;transform:translateY(102%);transition:transform 1.1s var(--e)}
.hero.on .hero-type .lw > span{transform:none;transition-delay:3.56s}
.hero.on .hero-type .l2 .lw > span{transition-delay:3.68s}
.hero.set .hero-type .lw > span{transform:none;transition:none}
/* Claim und Häuserzeile folgen zuletzt */
/* Der Hero blendet Claim und Haeuserliste ueber die Intro-Sequenz ein, nicht
   ueber den Reveal-Beobachter. Die drei Regeln muessen dieselbe Gewichtung
   haben — sonst gewinnt die erste (ID-Selektor) dauerhaft und beides bleibt
   unsichtbar. Deshalb ueberall #hero. */
#hero .rv{opacity:0;transform:translateY(30px)}
#hero.hero.on .rv{opacity:1;transform:none;transition:opacity .8s var(--e) 3.95s,transform .8s var(--e) 3.95s}
#hero.hero.set .rv{opacity:1;transform:none;transition:none}
.hero-type .l2 .lw > span{transition-delay:.12s}

.mark3{position:absolute;z-index:3;right:clamp(.5rem,4vw,6rem);top:clamp(10vh,15vh,18vh);
  width:clamp(150px,23vw,330px);aspect-ratio:1052/950;cursor:pointer}
/* Ruhige dunkle Fläche hinter dem Signet, damit es sich immer gegen die
   grosse Typografie behauptet — liegt hinter den Logoebenen, aber über dem Hero. */
.mark3::before{content:"";position:absolute;inset:-20% -16%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(11,10,9,.94),rgba(11,10,9,.62) 58%,transparent 100%)}
.mark3 span{position:absolute;inset:0;background-position:center;background-size:contain;background-repeat:no-repeat}
.mark3 .r{background-image:var(--i-rays)}
.mark3 .b{background-image:var(--i-base)}
.mark3 .cb{background-image:var(--i-cbody)}
.mark3 .cg{background-image:var(--i-cmono);transform-origin:56.7% 30.6%}
.mark3 .cm{background-image:var(--i-cmous);transform-origin:51.8% 44.6%}
.top .mark-i{display:block;width:auto;height:38px;aspect-ratio:680/614;
  background:var(--i-db) center/contain no-repeat}
.sting-stage span:not(.s-w){position:absolute;inset:0;background-position:center;background-size:contain;background-repeat:no-repeat}
.s-r{background-image:var(--i-rays)}
.s-cb{background-image:var(--i-cbody)}
.s-cg{background-image:var(--i-cmono);transform-origin:56.7% 30.6%}
.s-cm{background-image:var(--i-cmous);transform-origin:51.8% 44.6%}
.finale .fin-cow .fc{position:absolute;inset:0;display:block;background-position:center;background-size:contain;background-repeat:no-repeat}
.finale .fin-cow .b{background-image:var(--i-cbody)}
.finale .fin-cow .g{background-image:var(--i-cmono)}
.finale .fin-cow .m{background-image:var(--i-cmous)}
/* Logos werden nie gestreckt: contain, und die Box folgt dem
   Seitenverhaeltnis der Datei. */
.plate .lg{display:block;height:74px;width:clamp(120px,26vw,190px);
  background-position:center;background-size:contain;background-repeat:no-repeat}
.plate img,.top img,.karte-kopf img{width:auto;height:auto;max-width:100%;object-fit:contain}
.lg-butz{background-image:var(--i-butz);width:clamp(90px,18vw,120px)}
.plate .lg-db{position:relative;width:auto;height:clamp(74px,15vw,104px);
  aspect-ratio:680/614;background:var(--i-db) center/contain no-repeat}
.lg-db i{display:none}
/* --- Butzeria: schräg von links unten, Overshoot, kurze Gegenbewegung --- */
.lg-butz{opacity:0;transform:translate(-20%,16%) rotate(-6.5deg)}
.lg-butz.in{animation:bzIn .82s linear forwards}
@keyframes bzIn{
  0%{opacity:0;transform:translate(-20%,16%) rotate(-6.5deg);animation-timing-function:cubic-bezier(.34,0,.28,1)}
  16%{opacity:1}
  54%{transform:translate(3.2%,-2.6%) rotate(2.6deg);animation-timing-function:cubic-bezier(.24,.9,.28,1)}
  72%{transform:translate(-1.1%,.8%) rotate(-1deg)}
  85%{transform:translate(.4%,-.3%) rotate(.35deg) scale(1.015)}
  93%{transform:scale(.995)}
  100%{opacity:1;transform:none}}

/* --- VOKA: Segmente schieben sich langsam zusammen, danach ein Lichtreflex --- */
.voka-mark{position:relative;display:block}
.voka-mark .v-seg,.voka-mark .v-shine{position:absolute;inset:0;display:block;
  background-position:center;background-size:contain;background-repeat:no-repeat}
.voka-mark .v-seg{opacity:0}
.voka-mark .v1{background-image:var(--i-voka1);transform:translateX(-8%)}
.voka-mark .v2{background-image:var(--i-voka2);transform:translateX(7%)}
.voka-mark .v3{background-image:var(--i-voka3);transform:translateX(-5%)}
.voka-mark.in .v1{animation:vkSeg 1.6s cubic-bezier(.16,.72,.18,1) .05s forwards}
.voka-mark.in .v2{animation:vkSeg 1.6s cubic-bezier(.16,.72,.18,1) .26s forwards}
.voka-mark.in .v3{animation:vkSeg 1.5s cubic-bezier(.16,.72,.18,1) .46s forwards}
@keyframes vkSeg{from{opacity:0}to{opacity:1;transform:none}}
.voka-mark .v-shine{opacity:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(102deg,transparent 40%,rgba(255,232,205,.85) 50%,transparent 60%);
  background-size:280% 100%;background-position:135% 0;
  -webkit-mask-image:var(--i-voka);mask-image:var(--i-voka);
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.voka-mark.in .v-shine{animation:vkShine 1.7s cubic-bezier(.35,0,.2,1) 1.75s 1}
@keyframes vkShine{0%{opacity:0;background-position:135% 0}
  12%{opacity:1}82%{opacity:1}100%{opacity:0;background-position:-55% 0}}
.lg-voka{background-image:var(--i-voka)}
.lg-ukii{background-image:var(--i-ukii)}
.mark3 .r{z-index:1;opacity:0;transform:scale(.55) rotate(-70deg)}
.mark3 .b{z-index:2;opacity:0;transform:translateY(26%) scale(.9)}
.mark3 .cb{z-index:3;opacity:0;transform:translateY(-90%) scale(.9)}
.mark3 .cg{z-index:4;opacity:0;transform:translateY(-150%)}
.mark3 .cm{z-index:5;opacity:0;transform:translateY(-180%) rotate(-22deg)}
.hero.on .mark3 .r{animation:aR .55s var(--e) .05s forwards, glow 5s ease-in-out 4.1s infinite}
/* Endzustand: Logo steht fertig, ohne den Aufbau zu wiederholen */
.hero.set .mark3 .r{opacity:.92;transform:none;animation:glow 5s ease-in-out infinite}
.hero.set .mark3 .b,.hero.set .mark3 .cb,.hero.set .mark3 .cg,.hero.set .mark3 .cm{opacity:1;transform:none;animation:none}
.hero.on .mark3 .b{animation:aB .5s var(--e) .3s forwards}
/* Takt: Strahlen .05–.60 · Pause · Kuh .72–1.72 · Pause · Brille 1.86–2.60 · Pause · Bart 2.74–3.48 · Impact */
.hero.on .mark3 .cb{animation:aC 1s linear .72s forwards}
.hero.on .mark3 .cg{animation:aG .74s linear 1.86s forwards}
.hero.on .mark3 .cm{animation:aM .74s linear 2.74s forwards}
.hero.on .mark3{animation:aShake .16s steps(3,end) 3.48s 1}
/* Easter Egg: nach dem Intro rutscht die Brille beim Hover kurz herunter */
.mark3.ready:hover .cg{animation:monoPeek 1.15s var(--e)}
@keyframes aR{to{opacity:.92;transform:none}}
@keyframes aB{to{opacity:1;transform:none}}
@keyframes aC{
  0%{opacity:0;transform:translateY(-90%) scale(.93);animation-timing-function:cubic-bezier(.5,0,.75,.4)}
  10%{opacity:1}
  52%{transform:translateY(0) scale(1.02);animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  68%{transform:translateY(-9%) scale(.99);animation-timing-function:cubic-bezier(.55,0,.8,.45)}
  84%{transform:translateY(0) scale(1.01);animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  92%{transform:translateY(-2.6%)}
  100%{opacity:1;transform:none}}
/* Brille: fällt separat, schießt minimal über das Ziel, rastet ein */
@keyframes aG{
  0%{opacity:0;transform:translateY(-190%) rotate(-8deg);animation-timing-function:cubic-bezier(.42,0,.75,.4)}
  10%{opacity:1}
  56%{transform:translateY(6%) rotate(2deg);animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  74%{transform:translateY(-2.2%) rotate(-.8deg)}
  88%{transform:translateY(.8%) rotate(.3deg)}
  100%{opacity:1;transform:none}}
/* Schnurrbart: fällt separat, dreht im Flug, überschwingt, rastet unter der Nase ein */
@keyframes aM{
  0%{opacity:0;transform:translateY(-215%) rotate(-23deg);animation-timing-function:cubic-bezier(.42,0,.78,.4)}
  10%{opacity:1}
  55%{transform:translateY(6.5%) rotate(6deg);animation-timing-function:cubic-bezier(.2,.82,.3,1)}
  74%{transform:translateY(-2.4%) rotate(-2.4deg)}
  88%{transform:translateY(.9%) rotate(.9deg)}
  100%{opacity:1;transform:none}}
/* Impact: wenige Pixel, kein Cartoon */
@keyframes aShake{
  0%{transform:translate(0,0)}20%{transform:translate(-3px,2px)}
  45%{transform:translate(3px,-2px)}70%{transform:translate(-2px,-1px)}
  85%{transform:translate(1px,1px)}100%{transform:translate(0,0)}}
@keyframes monoPeek{
  0%{transform:none}22%{transform:translateY(4px)}
  55%{transform:translateY(4px)}100%{transform:none}}
@keyframes flick{0%{filter:none}22%{filter:drop-shadow(0 0 26px rgba(240,190,120,.95)) brightness(1.45)}100%{filter:none}}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 4px rgba(214,150,74,.3))}50%{filter:drop-shadow(0 0 15px rgba(228,172,96,.7))}}

.hero-bottom{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.2rem,3vw,3rem);align-items:end;margin-top:clamp(1.4rem,4vh,3rem);
  border-top:1px solid rgba(244,238,227,.18);padding-top:clamp(1rem,2.5vh,1.6rem)}
.claim{font-family:'Archivo Black',sans-serif;text-transform:uppercase;line-height:.92;letter-spacing:-.015em;
  font-size:clamp(1.15rem,2.9vw,2.5rem)}
.claim em{font-style:normal;color:var(--rust)}
.hero-houses{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;margin-top:clamp(.8rem,2vh,1.3rem)}
.hh{display:inline-flex;align-items:baseline;gap:.5rem;font-family:'Cutive',serif;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);transition:color .3s;
  padding:.55rem 0;min-height:44px}
.hh b{font-family:'Archivo Black',sans-serif;font-size:.86rem;letter-spacing:0;color:var(--bone);transition:color .3s}
.hh:hover{color:var(--bone)}
.hh[data-b="butzeria"]:hover b{color:var(--pink)}
.hh[data-b="voka"]:hover b{color:var(--rust)}
.hh[data-b="ukii"]:hover b{color:#8FBE68}
.scrollcue{justify-self:end;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-family:'Cutive',serif;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.scrollcue i{display:block;width:1px;height:clamp(28px,5vh,54px);
  background:linear-gradient(var(--bronze),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.35);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ---------- Laufband ---------- */
.band{border-block:1px solid rgba(244,238,227,.2);overflow:hidden;white-space:nowrap;padding:.85rem 0}
.band div{display:inline-block;animation:slide 42s linear infinite}
.band span{font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:clamp(.95rem,1.9vw,1.5rem);
  letter-spacing:-.01em;padding:0 1.1rem}
.band span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--bronze)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================ KAPITEL ============================ */
.chapter{position:relative;padding:clamp(4rem,12vh,9rem) var(--pad);overflow:hidden}
#butzeria{background:var(--ink)}
#voka{background:linear-gradient(180deg,var(--ink) 0,#160A07 14%,#160A07 86%,var(--ink) 100%)}
#ukii{background:linear-gradient(180deg,var(--ink) 0,#0E1A08 12%,#0E1A08 88%,var(--ink) 100%)}
.chno{font-family:'Archivo Black',sans-serif;line-height:.75;letter-spacing:-.04em;
  font-size:clamp(5rem,22vw,20rem);color:transparent;-webkit-text-stroke:2.5px currentColor;opacity:.62}
.eyebrow{display:flex;align-items:center;gap:.8rem;font-family:'Cutive',serif;font-size:.7rem;
  letter-spacing:.24em;text-transform:uppercase}
.eyebrow::before{content:"";width:clamp(20px,4vw,54px);height:1px;background:currentColor;flex:none}
.stmt{font-family:'Archivo Black',sans-serif;text-transform:uppercase;line-height:.86;letter-spacing:-.02em;
  font-size:clamp(1.6rem,5.2vw,4.4rem)}
.golink{display:inline-flex;align-items:center;gap:.7rem;font-family:'Cutive',serif;font-size:.78rem;
  letter-spacing:.2em;text-transform:uppercase;padding:.8rem 0;min-height:44px}
.golink u{text-decoration:none;position:relative;display:inline-block;transition:transform .45s var(--e)}
.golink u::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e)}
.golink i{font-style:normal;display:inline-block;transition:transform .45s var(--e)}
.golink:hover u,.golink:focus-visible u{transform:translateX(.35rem)}
.golink:hover u::after,.golink:focus-visible u::after{transform:scaleX(1);transform-origin:left}
.golink:hover i,.golink:focus-visible i{transform:translateX(.8rem)}

/* Bild-Platzhalter — Motive im Markup dokumentiert */
.frame{position:relative;overflow:hidden;display:grid;place-items:center;padding:1.4rem;border:1px solid currentColor;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 2px,transparent 2px 11px)}
.frame::before{content:"FOTO";position:absolute;top:.6rem;left:.7rem;font-family:'Cutive',serif;font-size:.6rem;
  letter-spacing:.24em;opacity:.75}
.frame::after{content:"";position:absolute;inset:.45rem;border:1px dashed currentColor;opacity:.28;pointer-events:none}
.frame p{font-family:'Cutive',serif;font-size:.68rem;letter-spacing:.13em;line-height:1.9;text-transform:uppercase;
  text-align:center;opacity:.85;max-width:26ch}
.plate{background:var(--bone);padding:1rem 1.2rem;display:inline-grid;place-items:center}
/* Markenarchitektur: der Zusatz steht deutlich kleiner unter dem Logo,
   mit Abstand — kein Claim, nur die Zugehoerigkeit. */
.byline{font-family:'Cutive',serif;font-size:.66rem;letter-spacing:.22em;text-transform:none;
  color:var(--bone);opacity:.55;margin-top:.75rem;line-height:1.6}

/* ---------- Fotografie ----------
   Eine gefuellte Bildflaeche verliert Rahmen, Raster und Beschriftung —
   ab hier traegt das Foto die Flaeche allein. */
.frame.shot{padding:0;border-color:transparent;background:#0a0908}
/* ---------- Editorial-Rahmen ----------
   Eine haarfeine Bone-Linie aussen, dazwischen schwarzer Raum: das Foto
   berührt den Rahmen nie. Wirkt wie ein gerahmter Print, nicht wie eine Card. */
.shot.pp{border:1px solid var(--bone);border-color:var(--bone);background:#000}
.shot.pp > picture{inset:var(--mat)}
/* Solange eine Fläche noch kein Foto hat, gilt ihr Seitenverhältnis nicht —
   sonst stehen bildschirmhohe leere Kästen in der Seite. */
.frame:not(.shot){aspect-ratio:auto!important;min-height:clamp(7.5rem,13vw,11rem)}
.frame.shot::before,.frame.shot::after{display:none}
.frame.shot > p{display:none}
.frame.shot > picture{position:absolute;inset:0;display:block}
picture > img{display:block;width:100%;height:100%;object-fit:cover}

/* randabfallendes Band — laeuft bewusst aus dem Satzspiegel heraus */
.bleed2{margin-inline:calc(var(--pad) * -1);display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);height:clamp(15rem,42vw,34rem)}
.bleed2 figure{position:relative;overflow:hidden;margin:0;background:#0a0908}
/* Das Bild bekommt etwas mehr Hoehe als sein Rahmen, damit die Parallaxe
   verschieben kann, ohne oben oder unten eine Kante freizulegen. */
.bleed2 figure > picture{position:absolute;left:0;right:0;top:-8%;height:116%;display:block}
.bleed2 figure.pp > picture{left:var(--mat);right:var(--mat);height:auto;
  top:calc(var(--mat) - 22px);bottom:calc(var(--mat) - 22px)}
.bleed2 figure + figure::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:rgba(244,238,227,.22);z-index:2}
.bleed2 figure.pp + figure.pp::before{display:none}


/* -- 01 BUTZERIA -- */
#butzeria .word{position:relative;z-index:2;margin-left:calc(var(--pad) * -1);padding-left:var(--pad);
  color:var(--pink);white-space:nowrap}
#butzeria .grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.2rem,3vw,3.5rem);
  align-items:start;margin-top:clamp(1.2rem,3vh,2.4rem)}
/* Die Bilder liegen jetzt im Karussell — die Textspalte behaelt ihr Mass */
#butzeria .grid{grid-template-columns:minmax(0,7fr)}
#ukii .ukgrid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
#butzeria .chno{color:var(--pink);text-align:left}
#butzeria .stmt{color:var(--pink);margin-top:clamp(1.4rem,4vh,2.6rem)}
/* 01-C: randabfallendes Band mit den Gästen — laut, breit, mittendrin.
   01-D: kleinerer Tisch-Ausschnitt, der versetzt über die Bandkante läuft. */
/* Duo: ungleiche Spalten, das quadratische Bild links steht höher als das quere rechts */
/* Zweites People-Bild: läuft links aus dem Satzspiegel heraus */
/* Cinematischer Abbinder über die volle Breite */
#butzeria .stmt span{color:var(--bone)}

/* -- 02 VOKA -- */
#voka{text-align:center}
#voka .stage{position:relative;max-width:1200px;margin-inline:auto}
#voka .fr-wide{aspect-ratio:16/9;color:var(--rust)}
#voka .word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;color:var(--bone);
  pointer-events:none;text-shadow:0 10px 60px rgba(0,0,0,.9)}
#voka .side{position:absolute;top:0;bottom:0;display:grid;place-items:center;color:var(--rust-t)}
#voka .side.l{left:calc(var(--pad) * -1)} #voka .side.r{right:calc(var(--pad) * -1)}
#voka .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,3rem);
  text-align:left;margin-top:clamp(1.6rem,5vh,3.4rem)}
#voka .chno{color:var(--rust);opacity:.4;text-align:left}
#voka .eyebrow{justify-content:center}

/* -- 03 URBAN KITCHEN II -- */
#ukii{color:var(--cream)}
#ukii .slant{position:absolute;left:-8%;right:-8%;top:clamp(4.5rem,13vh,10rem);height:clamp(90px,16vh,190px);
  background:var(--chili);transform:rotate(-3.5deg);z-index:0;opacity:.92}
#ukii .word{position:relative;z-index:2;color:var(--cream);white-space:nowrap}
#ukii .w2{padding-left:clamp(2rem,22vw,20rem);margin-top:-.05em}
#ukii .ukgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.2rem,3vw,3.5rem);align-items:start}
/* Drei ungleiche Spalten — bewusst keine gleich grossen Kacheln */
#ukii .shots{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);
  gap:clamp(1rem,2.6vw,2.4rem);margin-top:clamp(2.4rem,6vh,4.5rem);
  width:82%;margin-inline:auto}
#ukii .shots .frame{aspect-ratio:1;color:var(--cream)}
#ukii .shots .frame:nth-child(2){aspect-ratio:4/5}
/* Leitbild: der gemeinsame Tisch. Gross, aber nie ueber die volle Breite. */
#ukii .uk-lead{position:relative;overflow:hidden;aspect-ratio:3/2;color:var(--cream);
  width:70%;margin:clamp(3rem,8vh,6rem) auto 0}
/* Paar: Grill breit, Sushi hochkant und tiefer gesetzt */
#ukii .uk-pair{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(1rem,2.6vw,2.4rem);width:74%;margin:clamp(3rem,8vh,6rem) auto 0;align-items:start}
#ukii .uk-pair .frame{aspect-ratio:3/2;color:var(--cream)}
#ukii .uk-pair .frame + .frame{aspect-ratio:3/4;margin-top:clamp(1.4rem,5vw,4rem)}
/* Sozialer Abbinder, nach rechts gerueckt */
#ukii .uk-social{position:relative;overflow:hidden;aspect-ratio:16/9;color:var(--cream);
  width:58%;margin:clamp(3rem,8vh,6rem) 0 0 auto}
/* Kleiner Akzent in der Textspalte */
#ukii .uk-note{position:relative;overflow:hidden;aspect-ratio:4/5;color:var(--cream);
  width:72%;margin-top:clamp(1.6rem,4vh,2.6rem)}
#ukii .shots .frame:nth-child(2){margin-top:clamp(1rem,4vw,3.4rem)}
#ukii .shots .frame:nth-child(3){margin-top:clamp(-1.6rem,-3vw,-.5rem)}
#ukii .chno{color:var(--cream);opacity:.38}
/* Die Adresszeile bricht auf zwei Zeilen um; das Logoschild braucht dadurch
   etwas mehr Abstand, sonst sitzt die Unterlänge auf der Cremefläche. */
#ukii .plate{margin-top:clamp(1.7rem,3.6vh,2.5rem)!important}
#ukii .bar-a{height:clamp(26px,4vh,44px);margin:clamp(1.4rem,4vh,2.6rem) 0;position:relative;overflow:hidden;opacity:.5}
#ukii .barcode{position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,var(--cream) 0 3px,transparent 3px 7px,var(--cream) 7px 8px,transparent 8px 15px,var(--cream) 15px 20px,transparent 20px 23px)}

/* ---------- Manifest ---------- */
#manifest{padding:clamp(4rem,12vh,9rem) var(--pad)}
#manifest .quote{font-family:'Archivo Black',sans-serif;text-transform:uppercase;line-height:.9;
  letter-spacing:-.02em;font-size:clamp(1.5rem,4.6vw,3.6rem);max-width:18ch}
#manifest .quote em{font-style:normal;color:transparent;-webkit-text-stroke:1.4px var(--bronze)}
#manifest .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.4rem,3vw,4rem);margin-top:clamp(1.6rem,4vh,3rem)}
#manifest .rule .v b{color:var(--bone);display:block;font-family:'Archivo Black',sans-serif;font-weight:400;
  text-transform:uppercase;font-size:1rem;letter-spacing:-.01em;margin-bottom:.25rem}

/* ---------- Drei Türen ---------- */
.doors{border-top:1px solid rgba(244,238,227,.18)}
.door{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(.8rem,2.5vw,2.4rem);align-items:center;
  padding:clamp(1.4rem,4.5vh,2.8rem) var(--pad);border-bottom:1px solid rgba(244,238,227,.18);
  transition:background-color .5s var(--e),color .5s var(--e)}
.door .no{font-family:'Cutive',serif;font-size:.68rem;letter-spacing:.2em;opacity:.65}
.door .t{font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:-.02em;line-height:.9;
  font-size:clamp(1.5rem,5vw,3.4rem);display:block;transition:transform .5s var(--e)}
.door .d{font-size:.9rem;color:var(--dim);margin-top:.5rem;max-width:52ch;display:block;transition:color .5s}
.door .ar{font-family:'Archivo Black',sans-serif;font-size:clamp(1.4rem,3vw,2.4rem);transition:transform .5s var(--e)}
.door:hover,.door:focus-visible{background:var(--bone);color:var(--ink)}
.door:hover .d,.door:focus-visible .d{color:#4a443c}
.door:hover .t,.door:focus-visible .t{transform:translateX(clamp(.4rem,1.4vw,1.4rem))}
.door:hover .ar,.door:focus-visible .ar{transform:translateX(.9rem)}
.door.invest:hover,.door.invest:focus-visible{background:var(--forest);color:var(--cream)}
.door.invest:hover .d,.door.invest:focus-visible .d{color:rgba(242,232,210,.78)}

/* ---------- Kontakt / Fuß ---------- */
#kontakt{padding:clamp(4rem,12vh,8rem) var(--pad) clamp(2rem,6vh,4rem)}
.kg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.6rem,4vw,4rem);margin-top:clamp(1.4rem,4vh,2.6rem)}
.kline{display:grid;grid-template-columns:clamp(90px,12vw,150px) 1fr;gap:1rem;padding:.85rem 0;border-top:1px solid rgba(244,238,227,.16)}
.kline .k{font-family:'Cutive',serif;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);padding-top:.3rem}
.kline a{border-bottom:1px solid transparent;transition:border-color .3s}
.kline a:hover{border-color:currentColor}
.social{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;margin-top:1.2rem;font-family:'Cutive',serif;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.social a{color:var(--dim);transition:color .3s;padding:.55rem 0;min-height:44px;display:inline-flex;align-items:center}
.social a:hover{color:var(--bone)}
footer{padding:clamp(1.6rem,4vh,2.6rem) var(--pad) clamp(2rem,5vh,3rem);border-top:1px solid rgba(244,238,227,.18)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.4rem 2rem}
.fgrid small{font-family:'Cutive',serif;font-size:.68rem;letter-spacing:.1em;line-height:2.1;color:var(--dim);display:block}
.fgrid b{font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;font-size:.76rem;
  letter-spacing:.04em;color:var(--bone);display:block;margin-bottom:.5rem}
.fgrid nav a{display:block}
.fgrid .linkbtn{display:block;background:none;border:0;padding:.35rem 0;min-height:44px;cursor:pointer;
  font:inherit;color:inherit;letter-spacing:inherit;text-align:left;transition:color .3s}
.fgrid .linkbtn:hover{color:var(--bronze)}
.fgrid .linkbtn:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.fgrid a{transition:color .3s}
.fgrid a:hover{color:var(--bronze)}

/* ============ 2 · Eigene Bewegungssprache je Marke ============ */
/* Butzeria: schnell, hart, seitlich — Flash */
#butzeria .rv{transform:translate(-16px,12px);transition:opacity .38s cubic-bezier(.2,.95,.2,1),transform .38s cubic-bezier(.2,.95,.2,1)}
/* VOKA: langsam, weich, aus der Unschärfe — Nacht */
#voka .rv{transform:translateY(16px);filter:blur(9px);transition:opacity 1.5s ease,transform 1.5s ease,filter 1.5s ease}
#voka .rv.in{filter:blur(0)}
/* Urban Kitchen II: federnd, energetisch, leicht schief — Collage */
#ukii .rv{transform:translateY(30px) scale(.94) rotate(-.7deg);transition:opacity .58s cubic-bezier(.2,1.35,.3,1),transform .58s cubic-bezier(.2,1.35,.3,1)}

/* ============ 3 · VOKA ============ */
#voka .stage{max-width:none}
#voka .vstage{position:relative;margin-top:clamp(1.2rem,3.5vh,2.4rem)}
#voka .fr-wide{position:relative;z-index:2;margin-inline:calc(var(--pad) * -1);aspect-ratio:2/1;
  color:var(--rust)}
#voka .fr-wide:not(.shot){aspect-ratio:auto;min-height:clamp(9rem,17vw,13rem)}
#voka .word{position:absolute;left:50%;top:0;transform:translate(-50%,-90%);z-index:1;color:var(--bone);
  font-size:clamp(4rem,21vw,17rem);text-shadow:none;pointer-events:none}
#voka .side{z-index:3;top:0;bottom:0}
#voka .side.l{left:.6rem} #voka .side.r{right:.6rem}
.stmt-en{font-family:'Archivo Black',sans-serif;text-transform:uppercase;line-height:.88;letter-spacing:-.02em;
  font-size:clamp(1.5rem,5.4vw,4.2rem);margin-top:clamp(1.6rem,5vh,3.2rem)}
.stmt-en em{font-style:normal;color:var(--rust-t)}
.stmt-sub{font-family:'Cutive',serif;font-size:clamp(.8rem,1.4vw,1rem);letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-top:.9rem}

/* ============ 4 · Manifest ============ */
.mani{margin:clamp(1.6rem,5vh,3.4rem) 0 clamp(1.4rem,4vh,2.6rem)}
.mline{font-family:'Archivo Black',sans-serif;text-transform:uppercase;line-height:.8;letter-spacing:-.03em;
  font-size:clamp(2.4rem,12.5vw,10rem);max-width:none}
.mline span{display:block}
.mline .ol{color:transparent;-webkit-text-stroke:2px var(--bronze)}
.mline.m2{padding-left:clamp(1rem,16vw,14rem);margin-top:.06em}
.mline.m3{margin-top:.06em}
.mfoot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.4rem,3vw,4rem);
  border-top:1px solid rgba(244,238,227,.16);padding-top:clamp(1.2rem,3vh,2rem)}
.creed{color:var(--bronze);margin-top:1.2rem;letter-spacing:.16em;line-height:2}

/* ============ 5 · Drei eigenständige Bereiche ============ */
.biz{padding:clamp(3.4rem,10vh,7rem) var(--pad);position:relative}
/* FRANCHISE — strukturiert, Bewegung nach aussen */
.fr-block{border-top:1px solid rgba(244,238,227,.18)}
.fr-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(1.4rem,4vh,2.4rem);
  border-top:1px solid rgba(244,238,227,.18)}
.fr-cols div{padding:clamp(1rem,2.6vh,1.7rem) clamp(.8rem,2vw,1.6rem) clamp(1rem,2.6vh,1.7rem) 0;
  border-right:1px solid rgba(244,238,227,.18);position:relative;overflow:hidden}
.fr-cols div:last-child{border-right:0}
.fr-cols div::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--bronze);transition:width .7s var(--e)}
.fr-cols div:hover::after{width:100%}
.fr-cols .k{font-family:'Cutive',serif;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);display:block;margin-bottom:.5rem}
.fr-cols .v{font-size:.92rem;color:var(--dim)}
.fr-out{display:inline-flex;align-items:center;gap:1rem;margin-top:clamp(1.2rem,3vh,2rem);
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:clamp(1.1rem,2.6vw,1.9rem);letter-spacing:-.01em;min-height:44px}
.fr-out .line{display:block;height:1px;width:clamp(40px,12vw,190px);background:currentColor;transition:width .6s var(--e)}
.fr-out:hover .line,.fr-out:focus-visible .line{width:clamp(90px,26vw,420px)}
.fr-out i{font-style:normal;transition:transform .6s var(--e)}
.fr-out:hover i,.fr-out:focus-visible i{transform:translateX(1.2rem)}
/* INVEST — minimal, dunkel, ruhig */
.inv-block{background:#070908;border-block:1px solid rgba(107,162,147,.28)}
.inv-block .lbl{font-family:'Cutive',serif;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mint)}
.inv-block h2{font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.3rem,3.4vw,2.4rem);line-height:1;margin:clamp(1rem,2.6vh,1.6rem) 0}
.inv-link{display:inline-block;margin-top:clamp(1.2rem,3vh,2rem);font-family:'Cutive',serif;font-size:.74rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--mint);border-bottom:1px solid rgba(107,162,147,.5);
  padding:.7rem 0;min-height:44px;transition:color .4s,border-color .4s}
.inv-link:hover,.inv-link:focus-visible{color:var(--bone);border-color:var(--bone)}
/* CREW — laut, hell, energetisch */
.crew-block{background:var(--bone);color:var(--ink);overflow:hidden}
.crew-block h2{font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:-.03em;line-height:.84;
  font-size:clamp(2.4rem,11vw,8.5rem)}
.crew-block .lbl{font-family:'Cutive',serif;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--rust)}
.crew-block p{color:#4a443c;font-size:.98rem;margin-top:1rem;max-width:56ch}
.crew-roll{border-block:2px solid var(--ink);overflow:hidden;white-space:nowrap;margin:clamp(1.2rem,3vh,2rem) calc(var(--pad) * -1);padding:.5rem 0}
.crew-roll div{display:inline-block;animation:slide 26s linear infinite}
.crew-roll span{font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:clamp(.9rem,2vw,1.4rem);padding:0 .9rem}
/* Auf breiten Schirmen war ein ganzer Durchlauf schmaler als das Fenster —
   dadurch stand dieselbe Rolle zweimal nebeneinander. Mehr Abstand macht
   einen Durchlauf breiter als jeden ueblichen Bildschirm; die Verdopplung
   bleibt fuer die Endlosschleife noetig, ist aber nicht mehr zu sehen. */
@media(min-width:901px){.crew-roll span{padding:0 clamp(2.2rem,3.4vw,4.2rem)}}
.crew-roll span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--ink)}
.crew-cta{display:inline-flex;align-items:center;gap:.8rem;background:var(--ink);color:var(--bone);
  padding:1rem 1.6rem;font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:clamp(.95rem,2vw,1.3rem);
  letter-spacing:-.01em;transition:transform .4s var(--e),background .4s;min-height:44px}
.crew-cta:hover,.crew-cta:focus-visible{transform:translate(6px,-4px);background:var(--rust);color:#fff}

/* ============ 7 · Footer-Finale ============ */
/* ============ 6b · Newsletter ============
   Nüchtern: Typo, eine Linie, ein Feld, ein Button. Keine Trinksymbolik. */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.news{border-top:1px solid rgba(244,238,227,.18);padding:clamp(2.4rem,7.5vh,5.5rem) var(--pad)}
.news-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(1.6rem,5vw,5rem);align-items:end}
.news h2{font-family:'Archivo Black',sans-serif;text-transform:uppercase;line-height:.8;
  letter-spacing:-.03em;font-size:clamp(2.4rem,9vw,7rem);color:var(--bone)}
.news h2 em{font-style:normal;display:block;color:var(--bronze)}
.news-sub{font-family:'Cutive',serif;font-size:clamp(.72rem,1.15vw,.88rem);letter-spacing:.15em;
  text-transform:uppercase;line-height:2.1;color:var(--bone);opacity:.72;
  margin-top:clamp(.9rem,2.4vh,1.5rem);max-width:40ch}
.nform{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;
  border-bottom:1px solid rgba(244,238,227,.5);transition:border-color .3s}
.nform:focus-within{border-bottom-color:var(--bronze)}
.nform input{background:none;border:0;color:var(--bone);width:100%;min-height:48px;
  font-family:'Cutive',serif;font-size:clamp(.8rem,1.35vw,.97rem);letter-spacing:.15em;
  text-transform:uppercase;padding:.9rem .1rem}
.nform input::placeholder{color:rgba(244,238,227,.5)}
.nform input:focus-visible{outline:2px solid var(--bronze);outline-offset:5px}
.nform button{background:none;border:0;color:var(--bronze);cursor:pointer;white-space:nowrap;min-height:48px;
  font-family:'Cutive',serif;font-size:clamp(.72rem,1.15vw,.88rem);letter-spacing:.2em;
  text-transform:uppercase;padding:.9rem 0 .9rem 1.4rem;display:inline-flex;gap:.7rem;align-items:center}
.nform button i{font-style:normal;transition:transform .35s var(--e)}
.nform button:hover i,.nform button:focus-visible i{transform:translateX(.5rem)}
.nform button:focus-visible{outline:2px solid var(--bronze);outline-offset:5px}
.news-legal{font-family:'Cutive',serif;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  line-height:2;color:var(--bone);opacity:.6;margin-top:1.1rem;max-width:46ch}
.news-legal a{color:var(--bone);opacity:1;text-decoration:underline;text-underline-offset:3px}
.news-state{margin-top:1.3rem}
.news-state:empty{display:none}
.news-state b{display:block;font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  letter-spacing:-.01em;line-height:.95;font-size:clamp(1.4rem,3.6vw,2.6rem);color:var(--bone)}
.news-state span{display:block;font-family:'Cutive',serif;font-size:.72rem;letter-spacing:.15em;
  text-transform:uppercase;line-height:2;color:var(--bone);opacity:.7;margin-top:.6rem}
.news-state.note b{font-family:'Cutive',serif;font-size:clamp(.78rem,1.5vw,.95rem);
  letter-spacing:.15em;line-height:1.9;color:var(--bronze)}

/* ============ 8 · Cookie-Consent ============
   Alle drei Wege sind gleich gewichtet — kein Dark Pattern. */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:130;background:#0F0D0B;
  border-top:1px solid rgba(244,238,227,.22);padding:clamp(1rem,2.4vh,1.6rem) var(--pad);
  transform:translateY(110%);transition:transform .5s var(--e);
  max-height:88vh;overflow-y:auto;overscroll-behavior:contain}
.cbar.on{transform:none}
.cbar-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1rem,3vw,3rem);
  align-items:center;max-width:1500px;margin-inline:auto}
.cbar h2{font-family:'Archivo Black',sans-serif;text-transform:uppercase;line-height:.9;
  letter-spacing:-.02em;font-size:clamp(1.1rem,2.6vw,1.7rem);color:var(--bone)}
.cbar h2 em{font-style:normal;color:var(--bronze);display:block}
.cbar p{font-family:'Montserrat',sans-serif;font-size:.82rem;line-height:1.75;color:var(--bone);
  opacity:.78;margin-top:.7rem;max-width:70ch}
.cbar p a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.cbtns{display:flex;flex-wrap:wrap;gap:.6rem;align-items:stretch}
.cbtn{font-family:'Cutive',serif;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.9rem 1.3rem;min-height:48px;border:1px solid var(--bone);color:var(--bone);
  background:none;cursor:pointer;white-space:nowrap;transition:background .3s,color .3s}
.cbtn:hover,.cbtn:focus-visible{background:var(--bone);color:var(--ink)}
.cbtn:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

.cmodal{position:fixed;inset:0;z-index:140;display:none;place-items:center;padding:var(--pad);
  background:rgba(6,5,4,.86)}
.cmodal.on{display:grid}
.cbox{background:#0F0D0B;border:1px solid rgba(244,238,227,.25);width:min(680px,100%);
  max-height:86vh;overflow-y:auto;padding:clamp(1.3rem,3.5vw,2.4rem)}
.cbox h2{font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:clamp(1.1rem,3vw,1.6rem);
  letter-spacing:-.02em;color:var(--bone)}
.copt{border-top:1px solid rgba(244,238,227,.16);padding:1.1rem 0;display:grid;
  grid-template-columns:1fr auto;gap:.6rem 1.2rem;align-items:start}
.copt:first-of-type{margin-top:1.2rem}
.copt b{font-family:'Cutive',serif;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone)}
.copt small{grid-column:1/-1;font-family:'Montserrat',sans-serif;font-size:.78rem;line-height:1.7;
  color:var(--bone);opacity:.7;display:block}
.copt input{appearance:none;width:52px;height:28px;border:1px solid rgba(244,238,227,.5);
  background:none;cursor:pointer;position:relative;flex:none}
.copt input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  background:var(--bone);transition:transform .25s var(--e),background .25s}
.copt input:checked{border-color:var(--bronze)}
.copt input:checked::after{transform:translateX(24px);background:var(--bronze)}
.copt input:disabled{opacity:.55;cursor:not-allowed}
.copt input:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.cbox .cbtns{margin-top:1.6rem}
@media(max-width:900px){
  .news-in{grid-template-columns:1fr}
  .cbar-in{grid-template-columns:1fr}
  .cbtns .cbtn{flex:1 1 100%;text-align:center}
}

.finale{position:relative;overflow:hidden;padding:clamp(2.6rem,8vh,6rem) var(--pad) clamp(2rem,6vh,4rem);
  border-top:1px solid rgba(244,238,227,.18)}
.finale .fin-ring{position:absolute;right:-14vw;top:50%;transform:translateY(-50%);width:min(760px,86vw);
  aspect-ratio:1;opacity:.09;background:var(--i-ring) center/contain no-repeat;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle,#000 34%,transparent 72%);mask-image:radial-gradient(circle,#000 34%,transparent 72%)}
.finale .fin-cow{position:absolute;right:clamp(-3rem,-2vw,0rem);bottom:-10%;width:min(280px,34vw);aspect-ratio:1052/950;opacity:.85;pointer-events:none;z-index:1}
.finale .fin{position:relative;z-index:2;font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  line-height:.8;letter-spacing:-.035em;font-size:clamp(2.6rem,11.5vw,11rem);margin-right:0}
.finale .fin em{font-style:normal;color:var(--rust)}
.finale .fin-sub{position:relative;z-index:2;margin-top:clamp(1rem,3vh,1.8rem);font-family:'Cutive',serif;
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity 1s var(--e),transform 1s var(--e)}
.rv.in{opacity:1;transform:none}
.par{will-change:transform}

/* ============================================================
   MOBIL — eigenständig, nicht gestaucht
   ============================================================ */
@media(min-width:1200px){.hero-type .l2{padding-left:calc(var(--pad) + 31vw)}}
@media(max-width:900px){
  .mark3{position:relative;right:auto;top:auto;width:min(230px,52vw);margin:0 0 clamp(1rem,3vh,2rem) auto}
  /* Mobil: kompakter getaktet, aber jedes Teil landet weiterhin einzeln und sichtbar */
  .hero.on .mark3 .r{animation-duration:.45s}
  .hero.on .mark3 .cb{animation-duration:.8s;animation-delay:.57s}
  .hero.on .mark3 .cg{animation-duration:.6s;animation-delay:1.49s}
  .hero.on .mark3 .cm{animation-duration:.6s;animation-delay:2.21s}
  .hero.on .mark3{animation-delay:2.81s}
  .hero{justify-content:center;padding-top:clamp(5rem,12vh,7rem)}
  .hero-bottom{grid-template-columns:1fr}
  .scrollcue{justify-self:start;flex-direction:row;align-items:center;margin-top:.8rem}
  .scrollcue i{width:34px;height:1px;background:linear-gradient(90deg,var(--bronze),transparent);animation:none}
  #butzeria .grid,#ukii .ukgrid{grid-template-columns:1fr}
  /* Reihenfolge auf dem Handy: Marke, Zusatz, Claim, Adresse, CTA — dann Bilder.
     Der laengere Fliesstext folgt zuletzt. */
  #butzeria .grid > div,#ukii .ukgrid > div:last-child{display:flex;flex-direction:column}
  #butzeria .plate,#ukii .plate{order:1;align-self:flex-start;
    margin-top:clamp(.9rem,2.5vh,1.4rem)!important}
  #butzeria .byline,#ukii .byline{order:2}
  #butzeria .stmt{order:3;margin-top:clamp(1.2rem,3.5vh,2rem)}
  #butzeria .mono,#ukii .ukgrid > div:last-child .mono{order:4}
  #butzeria .grid > div > div:last-child,
  #ukii .ukgrid > div:last-child > div:last-child{order:5}
  #butzeria .copy,#ukii .copy{order:6;margin-top:clamp(1.2rem,3vh,1.8rem)}
  .par{transform:none!important}           /* keine Parallaxe auf kleinen Geraeten */
  .rv{transition-duration:.45s!important}  /* kurze, gleichmässige Einblendung */
  :root{--mat:clamp(5px,1.5vw,7px)}
  #voka .cols{grid-template-columns:1fr}
  #voka .side{display:none}
  #ukii .shots{grid-template-columns:1fr;width:auto}
  #ukii .shots .frame{margin-top:0!important;aspect-ratio:4/3}
  #ukii .shots .frame:nth-child(2){aspect-ratio:4/5}
  #ukii .uk-lead{width:auto;aspect-ratio:4/5}
  #ukii .uk-pair{grid-template-columns:1fr;width:auto}
  #ukii .uk-pair .frame + .frame{margin-top:0;aspect-ratio:3/4}
  #ukii .uk-social{width:auto;aspect-ratio:4/3}
  #ukii .uk-note{width:auto}
  #ukii .shots .frame:not(.shot){aspect-ratio:auto!important}
  #ukii .w2{padding-left:clamp(1rem,10vw,4rem)}
  #manifest .cols,.kg{grid-template-columns:1fr}
  .door{grid-template-columns:1fr auto;gap:.4rem 1rem}
  .door .no{grid-column:1/-1}
  .chno{font-size:clamp(4.5rem,26vw,10rem)}
  #voka .word{font-size:clamp(3.4rem,24vw,7rem);transform:translate(-50%,-93%)}
  #voka .fr-wide{aspect-ratio:4/5}
  #voka .fr-wide:not(.shot){aspect-ratio:auto;min-height:clamp(7.5rem,26vw,10rem)}
  .bleed2{grid-template-columns:1fr;height:auto}
  .bleed2 figure{aspect-ratio:4/3}
  .bleed2 figure + figure::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .mline.m2{padding-left:clamp(.6rem,8vw,4rem)}
  .mfoot{grid-template-columns:1fr}
  .fr-cols{grid-template-columns:1fr}
  .fr-cols div{border-right:0;border-bottom:1px solid rgba(244,238,227,.18);padding-right:0}
  .finale .fin{margin-right:0}
  /* Die Unterzeile bricht um, statt unter dem Markenmotiv zu verschwinden */
  .finale .fin-sub{max-width:64%}
  .finale .fin-cow{width:min(150px,30vw);bottom:2%;opacity:.5}
}
@media(max-width:520px){
  .hero-type .l2{padding-left:calc(var(--pad) + 10vw)}
  .top .wm em{display:none}
  .mh .adr{margin-left:0;flex-basis:100%}
  .kline{grid-template-columns:1fr;gap:.2rem}
  .kline .k{padding-top:0}
  .frame p{font-size:.62rem;letter-spacing:.1em}
  .mega{font-size:clamp(3.2rem,19vw,6rem)}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .hero-type .lw > span{transform:none}
  .mark3 .r{opacity:.92;transform:none}
  .mark3 .b,.mark3 .cb,.mark3 .cg,.mark3 .cm{opacity:1;transform:none}
  .par{transform:none!important}
  html{scroll-behavior:auto}
  .lg-butz{opacity:1;transform:none}
  .voka-mark .v-seg{opacity:1;transform:none}
  .voka-mark .v-shine{display:none}
  .sting{display:none!important}
  #voka .rv{filter:none}
}

#invest .inv-shot{position:relative;overflow:hidden;aspect-ratio:4/3;color:var(--bone);
  margin-top:clamp(3rem,9vh,7rem)}
@media(min-width:901px){#invest .inv-shot{width:34%}}
@media(max-width:900px){#invest .inv-shot{width:88%;margin-inline:auto}}
@media(max-width:700px){#invest .inv-shot{display:none}}

@media(min-width:901px){
  /* Je Marke ein Leitbild, das gross bleibt — aber nie ueber die volle Breite.
     Alles andere tritt deutlich zurueck, damit wieder Schwarz sichtbar wird. */          /* Leitbild */
  #voka .fr-wide{width:74%;margin-inline:auto}              /* Leitbild */
  #voka .bleed2{width:64%;margin-inline:auto}
  /* Schwarzraum zwischen den Bildern */
  #voka .bleed2{margin-top:clamp(3rem,7vh,5.5rem)}
}

/* ============ 5b · Franchise & Investment ============
   Bewusst anders als die Restaurantkapitel: kaum Bild, kaum Text,
   viel Schwarz, sehr grosse Typografie. Opportunity statt Experience. */
.biz-num{font-family:'Archivo Black',sans-serif;line-height:.75;letter-spacing:-.04em;
  font-size:clamp(3.4rem,13vw,11rem);color:transparent;
  -webkit-text-stroke:2px var(--nc,var(--bone));opacity:.5}
.biz-eye{font-family:'Cutive',serif;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  margin-top:clamp(.6rem,1.6vh,1rem)}
.inv-block h2.biz-h{font-size:clamp(2.4rem,10.5vw,9rem);letter-spacing:-.035em;line-height:.82;
  color:var(--bone);margin-top:clamp(1.2rem,3.5vh,2.4rem);max-width:none}
.biz-h{font-family:'Archivo Black',sans-serif;text-transform:uppercase;line-height:.82;
  letter-spacing:-.035em;font-size:clamp(2.4rem,10.5vw,9rem);color:var(--bone);
  margin-top:clamp(1.2rem,3.5vh,2.4rem)}
.biz-h em{font-style:normal;display:block}
.biz-sub{font-family:'Cutive',serif;font-size:clamp(.74rem,1.15vw,.9rem);letter-spacing:.16em;
  text-transform:uppercase;line-height:2.2;color:var(--bone);opacity:.7;
  margin-top:clamp(1.2rem,3vh,2rem);max-width:40ch}

/* Drei Begriffe, darunter je eine sehr kleine Zeile */
.biz-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.4rem,3vw,3.5rem);margin-top:clamp(3rem,9vh,7rem)}
.biz-three b{display:block;font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1;font-size:clamp(1.2rem,3.2vw,2.4rem);color:var(--bone)}
.biz-three span{display:block;font-family:'Montserrat',sans-serif;font-size:.82rem;line-height:1.75;
  color:var(--bone);opacity:.62;margin-top:.7rem;max-width:26ch}

/* Typografischer Abschluss statt Button */
.biz-cta{display:block;margin-top:clamp(4rem,12vh,9rem);text-decoration:none}
.biz-cta .pre{font-family:'Cutive',serif;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone);opacity:.55;display:block}
.biz-cta .go{display:flex;align-items:baseline;gap:clamp(.8rem,2vw,1.8rem);margin-top:clamp(.8rem,2vh,1.4rem);
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.3rem,4.6vw,3.4rem);color:var(--bone);transition:color .35s}
.biz-cta .go i{font-style:normal;transition:transform .4s var(--e)}
.biz-cta:hover .go i,.biz-cta:focus-visible .go i{transform:translateX(1rem)}
.biz-cta .rule{display:block;height:1px;background:var(--bone);opacity:.5;
  margin-top:clamp(.8rem,2vh,1.3rem);max-width:min(100%,52rem)}
.biz-cta:focus-visible{outline:2px solid var(--bone);outline-offset:8px}

/* Expansionsdiagramm — feine Bone-Linien, kleine Punkte, keine Karte */
.exmap{margin-top:clamp(3rem,9vh,7rem);max-width:min(100%,58rem)}
.exmap svg{display:block;width:100%;height:auto}
.exmap .cap{font-family:'Cutive',serif;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone);opacity:.55;margin-top:.9rem}

/* Signaturlinie zwischen Franchise und Investment */
.sigline{position:relative;height:clamp(9rem,22vh,16rem);display:grid;place-items:center;
  background:var(--ink)}
.sigline::before{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--bone);opacity:.35}
.sigline span{writing-mode:vertical-rl;white-space:nowrap;font-family:'Cutive',serif;font-size:.6rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--bone);opacity:.4;background:var(--ink);padding:.9rem 0}

/* Die eine Zahl */
.oneno{margin-top:clamp(3.5rem,10vh,8rem)}
.oneno b{display:block;font-family:'Archivo Black',sans-serif;letter-spacing:-.045em;line-height:.8;
  font-size:clamp(4.5rem,22vw,15rem);color:var(--bone)}
.oneno span{display:block;font-family:'Cutive',serif;font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bone);opacity:.6;margin-top:clamp(1rem,2.4vh,1.6rem);line-height:2.2}

/* Mittelverwendung: drei Worte, keine Zahlen */
.usewords{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,4vw,4rem);margin-top:clamp(1.4rem,4vh,2.6rem)}
.usewords b{font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:-.03em;
  line-height:1;font-size:clamp(1.6rem,6vw,4.4rem);color:var(--bone);opacity:.9}

/* Vertraulichkeit */
.privacy{margin-top:clamp(5rem,15vh,11rem)}
.privacy .s{font-family:'Cutive',serif;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone);opacity:.55;display:block}
.privacy .l{display:block;font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  letter-spacing:-.03em;line-height:.9;font-size:clamp(1.8rem,7vw,5.4rem);color:var(--bone);
  margin-top:clamp(.8rem,2vh,1.4rem)}
.privacy p{font-family:'Montserrat',sans-serif;font-size:.86rem;line-height:1.8;color:var(--bone);
  opacity:.62;margin-top:clamp(1.2rem,3vh,2rem);max-width:52ch}

/* Investorenformular — klein, ruhig, klappt auf */
.invform{margin-top:clamp(2rem,5vh,3.4rem);max-width:44rem}
.invform[hidden]{display:none}
.invform .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,2vw,1.6rem)}
.invform label{display:block;font-family:'Cutive',serif;font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone);opacity:.55;margin-top:clamp(1rem,2.4vh,1.5rem)}
.invform input,.invform select,.invform textarea{width:100%;background:none;color:var(--bone);
  border:0;border-bottom:1px solid rgba(244,238,227,.4);padding:.7rem 0;min-height:44px;
  font-family:'Montserrat',sans-serif;font-size:.92rem;transition:border-color .3s}
.invform textarea{resize:vertical;min-height:5.5rem}
.invform select{appearance:none;cursor:pointer}
.invform select option{background:#0F0D0B;color:var(--bone)}
.invform :is(input,select,textarea):focus{border-bottom-color:var(--bone);outline:none}
.invform :is(input,select,textarea):focus-visible{outline:2px solid var(--bone);outline-offset:4px}
.invform button{margin-top:clamp(1.6rem,4vh,2.6rem);background:none;cursor:pointer;
  border:1px solid var(--bone);color:var(--bone);min-height:48px;padding:.9rem 1.6rem;
  font-family:'Cutive',serif;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  transition:background .3s,color .3s}
.invform button:hover,.invform button:focus-visible{background:var(--bone);color:var(--ink)}
.invform .hint{font-family:'Cutive',serif;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  line-height:2;color:var(--bone);opacity:.45;margin-top:1rem;max-width:46ch}

@media(max-width:900px){
  .biz-three{grid-template-columns:1fr;gap:clamp(1.6rem,5vh,2.6rem)}
  .invform .row{grid-template-columns:1fr}
  .sigline{height:clamp(7rem,16vh,10rem)}
}

/* ============ 3c · Editorial-Karussell ============
   Native Scroll-Snap: wischen funktioniert auf dem Handy von selbst,
   die Pfeile scrollen um genau eine Slide. Keine Bibliothek. */
.slider{margin-top:clamp(2.6rem,7vh,5rem)}
.slider .track{display:flex;gap:var(--sgap,clamp(.9rem,2vw,1.8rem));
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:.2rem}
.slider .track::-webkit-scrollbar{display:none}
/* Abschliessender Freiraum, damit auch die letzte Slide an den linken Rand
   schnappen kann — sonst laeuft der Zaehler nie bis zur letzten Nummer. */
.slider .track::after{content:"";flex:0 0 calc(100% - var(--sw,60%) - var(--sgap,1rem));
  pointer-events:none}
.slider .track:focus-visible{outline:2px solid var(--bone);outline-offset:6px}
.slider .slide{flex:0 0 var(--sw,60%);scroll-snap-align:start;margin:0;position:relative;
  aspect-ratio:var(--sar,4/3);overflow:hidden;background:#000;
  border:1px solid var(--sfr,var(--bone))}
.slider .slide > picture{position:absolute;inset:var(--mat);display:block}
.slider .sui{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  margin-top:clamp(1rem,2.4vh,1.6rem);border-top:1px solid var(--sfr,var(--bone));
  border-top-color:color-mix(in srgb,var(--sfr,var(--bone)) 35%,transparent);
  padding-top:clamp(.7rem,1.8vh,1.1rem)}
.slider .scount{font-family:'Cutive',serif;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sac,var(--bone));display:flex;gap:.5rem;align-items:baseline}
.slider .scount span{opacity:.5}
.slider .snav{display:flex;gap:.5rem}
.slider .sbtn{width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid var(--sfr,var(--bone));color:var(--bone);
  font-size:1rem;line-height:1;transition:background .3s,color .3s,opacity .3s}
.slider .sbtn:hover:not(:disabled),.slider .sbtn:focus-visible{background:var(--bone);color:var(--ink)}
.slider .sbtn:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.slider .sbtn:disabled{opacity:.3;cursor:default}

/* Butzeria: breitere Slides, quer, Pink als Akzent */
.bz-slider{--sw:46%;--sar:4/3;--sac:var(--pink);--sgap:clamp(1rem,2.2vw,2rem);
  width:86%;margin-inline:auto}
/* Urban Kitchen II: schmalere Slides, anderes Format, Cream als Akzent */
.uk-slider{--sw:48%;--sar:3/2;--sac:var(--cream);--sfr:var(--cream);
  --sgap:clamp(1.2rem,2.8vw,2.6rem);width:84%;margin-inline:auto}
.uk-slider .sui{flex-direction:row-reverse}

@media(max-width:900px){
  .bz-slider,.uk-slider{width:auto;margin-inline:0}
  .bz-slider{--sw:82%} .uk-slider{--sw:82%;--sar:4/3}
}
@media(prefers-reduced-motion:reduce){.slider .track{scroll-behavior:auto}}

/* ============ 3d · Events ============
   Eigener Geschäftsbereich, gleiche Handschrift: viel Schwarz, grosse Typo,
   kleine Bilder. Kein Eventagentur-Look. */
#events{padding:clamp(3.4rem,10vh,7rem) var(--pad);border-top:1px solid rgba(244,238,227,.16)}
.ev-eye{font-family:'Cutive',serif;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--bronze)}
.ev-h{font-family:'Archivo Black',sans-serif;text-transform:uppercase;line-height:.82;
  letter-spacing:-.035em;font-size:clamp(2.2rem,9.5vw,8rem);color:var(--bone);
  margin-top:clamp(1rem,3vh,2rem)}
.ev-h em{font-style:normal;display:block}
.ev-kinds{font-family:'Cutive',serif;font-size:clamp(.68rem,1.05vw,.82rem);letter-spacing:.2em;
  text-transform:uppercase;line-height:2.2;color:var(--bone);opacity:.6;
  margin-top:clamp(1.2rem,3vh,2rem)}

.ev-loc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(1.6rem,5vw,5.5rem);align-items:start;
  margin-top:clamp(3.4rem,9vh,6.5rem);padding-top:clamp(2rem,5vh,3.4rem);
  border-top:1px solid rgba(244,238,227,.16)}
.ev-loc .no{font-family:'Cutive',serif;font-size:.66rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--bone);opacity:.45}
.ev-loc h3{font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:-.025em;
  line-height:.9;font-size:clamp(1.5rem,4.6vw,3.2rem);color:var(--bone);margin-top:.7rem}
.ev-loc h3 em{font-style:normal;display:block;color:var(--evc,var(--bone))}
.ev-loc .adr{font-family:'Cutive',serif;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone);opacity:.55;margin-top:.9rem}
.ev-claim{font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:-.02em;
  line-height:1;font-size:clamp(1rem,2.4vw,1.7rem);color:var(--evc,var(--bone));
  margin-top:clamp(1.4rem,3.5vh,2.2rem);opacity:.9}
.ev-facts{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:clamp(1.2rem,3vh,1.8rem)}
.ev-facts span{font-family:'Cutive',serif;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone);border:1px solid rgba(244,238,227,.35);padding:.5rem .8rem}
.ev-acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.6rem,4vh,2.6rem)}
.ev-acts a{font-family:'Cutive',serif;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone);text-decoration:none;border:1px solid var(--bone);
  min-height:48px;display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.3rem;
  transition:background .3s,color .3s}
.ev-acts a:hover,.ev-acts a:focus-visible{background:var(--bone);color:var(--ink)}
.ev-acts a:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.ev-acts a.ghost{border-color:rgba(244,238,227,.4)}
/* Eine Location ohne Vorschaubild bekommt die volle Breite — es bleibt
   kein leerer Bildkasten stehen. */
.ev-loc.ev-solo{grid-template-columns:minmax(0,1fr)}
.ev-shot{position:relative;overflow:hidden;aspect-ratio:4/3;background:#000;
  border:1px solid var(--bone);width:83%;margin-left:auto}
@media(max-width:900px){.ev-shot{width:66%;margin-top:clamp(1rem,3vh,1.8rem)}}
/* Auf dem Telefon zaehlen Name, Adresse, Kapazitaet und die beiden Aktionen.
   Das Vorschaubild bringt dort keinen Mehrwert und kostet Ladezeit. */
@media(max-width:700px){.ev-shot{display:none}}
.ev-shot > picture{position:absolute;inset:var(--mat);display:block}

/* Ein gemeinsames Formular fuer alle drei Häuser */
.ev-form-wrap{margin-top:clamp(3.4rem,9vh,6.5rem);padding-top:clamp(2rem,5vh,3.4rem);
  border-top:1px solid rgba(244,238,227,.16)}
.ev-form{max-width:52rem;margin-top:clamp(1.4rem,3.5vh,2.4rem)}
.ev-form .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,2vw,1.6rem)}
.ev-form label{display:block;font-family:'Cutive',serif;font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone);opacity:.55;margin-top:clamp(1rem,2.4vh,1.5rem)}
.ev-form input,.ev-form select,.ev-form textarea{width:100%;background:none;color:var(--bone);
  border:0;border-bottom:1px solid rgba(244,238,227,.4);padding:.85rem 0;min-height:48px;
  font-family:'Montserrat',sans-serif;font-size:.92rem;transition:border-color .3s}
.ev-form textarea{resize:vertical;min-height:5.5rem}
.ev-form select{appearance:none;cursor:pointer}
.ev-form select option{background:#0F0D0B;color:var(--bone)}
.ev-form :is(input,select,textarea):focus{border-bottom-color:var(--bone);outline:none}
.ev-form :is(input,select,textarea):focus-visible{outline:2px solid var(--bone);outline-offset:4px}
.ev-form button{margin-top:clamp(1.6rem,4vh,2.6rem);background:none;cursor:pointer;
  border:1px solid var(--bone);color:var(--bone);min-height:48px;padding:.9rem 1.6rem;
  font-family:'Cutive',serif;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.7rem;transition:background .3s,color .3s}
.ev-form button:hover,.ev-form button:focus-visible{background:var(--bone);color:var(--ink)}
.ev-form .hint{font-family:'Cutive',serif;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  line-height:2;color:var(--bone);opacity:.45;margin-top:1rem;max-width:48ch}

@media(max-width:900px){
  .ev-loc{grid-template-columns:1fr}
  .ev-form .row{grid-template-columns:1fr}
  .ev-acts a{flex:1 1 100%;justify-content:center}
}


/* ============ 6b · Reservierung ============
   Ein Ort fuer die Buchung. Der Button oben fuehrt immer zur bestehenden
   Buchungsseite; das eingebettete Widget laedt erst nach Zustimmung. */
#reservierung{padding:clamp(3.4rem,10vh,7rem) var(--pad);
  border-top:1px solid rgba(244,238,227,.16)}
.rs-acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.8rem,4.5vh,3rem)}
.rs-acts a{font-family:'Cutive',serif;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone);text-decoration:none;border:1px solid var(--bone);
  min-height:48px;display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.3rem;
  transition:background .3s,color .3s}
.rs-acts a:hover,.rs-acts a:focus-visible{background:var(--bone);color:var(--ink)}
.rs-acts a:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.rs-acts a.ghost{border-color:rgba(244,238,227,.35);color:var(--bone)}
.rs-acts a.ghost:hover,.rs-acts a.ghost:focus-visible{background:rgba(244,238,227,.1);color:var(--bone)}
/* Der Rahmen erscheint nur, wenn wirklich etwas darin steht — sonst bleibt
   an dieser Stelle einfach Schwarz und keine reservierte Leerflaeche. */
.rs-embed:empty{display:none}
.rs-embed{margin-top:clamp(2.4rem,6vh,4rem);max-width:52rem;
  border:1px solid rgba(244,238,227,.22);background:transparent}
/* Hoehe erst, wenn der Fremdinhalt geladen ist. Kein weisser Grund, kein
   Sprung im Aufbau, keine leere Box, falls nie etwas kommt. */
.rs-embed iframe{display:block;width:100%;height:0;border:0;background:transparent;
  color-scheme:dark}
.rs-embed.geladen iframe{height:760px}
.rs-gate{padding:clamp(1.4rem,4vw,2.4rem)}
.rs-gate p{font-family:'Montserrat',sans-serif;font-size:.9rem;line-height:1.8;
  color:var(--bone);opacity:.8;max-width:52ch;margin:0}
.rs-gate .hint{font-family:'Cutive',serif;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;line-height:2;opacity:.45;margin-top:1rem;max-width:48ch}
.rs-gate button{margin-top:1.2rem;background:none;cursor:pointer;color:var(--bone);
  border:1px solid var(--bone);font-family:'Cutive',serif;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;min-height:48px;padding:.8rem 1.4rem;
  transition:background .3s,color .3s}
.rs-gate button:hover,.rs-gate button:focus-visible{background:var(--bone);color:var(--ink)}
.rs-note{font-family:'Cutive',serif;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  line-height:2.1;color:var(--bone);opacity:.45;margin-top:clamp(1.6rem,4vh,2.6rem);max-width:52ch}
.rs-note a{color:inherit}
/* Reservierungsknopf in der Kopfzeile — auf dem Telefon steckt er im Menue,
   damit oben nur Sprache und Menue stehen. */
.resb{display:none}
@media(min-width:901px){
  .resb{display:inline-flex;align-items:center;font-family:'Cutive',serif;font-size:.68rem;
    letter-spacing:.2em;text-transform:uppercase;color:var(--bone);text-decoration:none;
    border:1px solid rgba(244,238,227,.5);padding:.55rem 1rem;min-height:40px;
    margin-right:.9rem;transition:background .3s,color .3s}
  .resb:hover,.resb:focus-visible{background:var(--bone);color:var(--ink)}
}
@media(max-width:900px){
  .rs-acts a{flex:1 1 100%;justify-content:center}
  .rs-embed iframe{min-height:640px}
}


/* ============ 1b · Dicke Butz (American BBQ) ============
   Das Stammhaus. Bewusst ohne Bildstrecke: es liegt kein authentisches
   Fotomaterial vor, und Pizza- oder Doenerbilder waeren hier schlicht falsch.
   Traegt deshalb typografisch — grosse Aussage, viel Schwarz. */
#dickebutz .chno{color:var(--bronze);opacity:.55;text-align:left}
#dickebutz .word{color:var(--bone)}
#dickebutz .stmt{margin-top:clamp(1.6rem,4.5vh,3rem)}
#dickebutz .db-claim{font-family:'Cutive',serif;font-size:clamp(.76rem,1.25vw,.95rem);
  letter-spacing:.17em;text-transform:uppercase;line-height:2.15;color:var(--bone);
  opacity:.62;margin-top:clamp(1.4rem,3.5vh,2.4rem);max-width:44ch}
#dickebutz .db-adr{display:flex;flex-wrap:wrap;gap:.4rem 2.6rem;
  margin-top:clamp(1.2rem,3vh,2rem)}
#dickebutz .db-adr span{font-family:'Cutive',serif;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bronze)}

/* ---- Speisekarten: eine ruhige Leiste, kein Kachelfeld ---- */
.menus{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.6rem,4vh,2.6rem)}
.menus > *{font-family:'Cutive',serif;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone);text-decoration:none;
  border:1px solid var(--mc,rgba(244,238,227,.42));min-height:48px;
  display:inline-flex;align-items:center;gap:.7rem;padding:.75rem 1.2rem;
  transition:background .3s,color .3s}
.menus a:hover,.menus a:focus-visible{background:var(--mc,var(--bone));color:var(--ink)}
.menus a:focus-visible{outline:2px solid var(--mc,var(--bone));outline-offset:3px}
.menus em{font-style:normal;opacity:.55;letter-spacing:.14em}
@media(max-width:900px){.menus > *{flex:1 1 100%;justify-content:center}}


/* ---- VOKA: die Wortmarke stieg bisher in die Kapitelzeile hinein.
   Sie darf weiter von der Bildkante angeschnitten werden, aber erst
   unterhalb von Nummer und Eyebrow. Weniger Auftrieb, etwas mehr Luft. ---- */
#voka .vstage{margin-top:calc(clamp(1.2rem,3.5vh,2.4rem) + clamp(3.2rem,9.6vw,9.8rem))}
#voka .word{transform:translate(-50%,-55%)}
#voka .karten{margin-top:clamp(2rem,5vh,3.4rem);justify-content:flex-start}
/* Die Kapitelzeile brach in zwei Zeilen um ("... STREET / FOOD"). */
#voka .eyebrow{justify-content:flex-start;width:max-content;max-width:100%}
@media(min-width:901px){#voka .eyebrow{white-space:nowrap}}
@media(max-width:900px){
  #voka .vstage{margin-top:calc(clamp(1.2rem,3.5vh,2.4rem) + clamp(3.2rem,11vw,5.5rem))}
  #voka .word{transform:translate(-50%,-58%)}
}

/* ============ 6d · Speisekarten-Ansicht ============
   Dunkles Overlay im Markendesign. Keine weisse PDF-Flaeche auf der
   Seite: die Seiten liegen als Bilder vor und werden erst beim Oeffnen
   geladen. Blaettern ueber dieselbe Scroll-Snap-Technik wie die uebrigen
   Strecken — Wischen funktioniert damit von selbst. */
.karte{position:fixed;inset:0;z-index:120;background:#070706;
  display:grid;grid-template-rows:auto 1fr;opacity:0;transition:opacity .28s var(--e)}
.karte.on{opacity:1}
.karte[hidden]{display:none}
.karte-kopf{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem);
  padding:clamp(.7rem,1.6vh,1.1rem) var(--pad);
  border-bottom:1px solid rgba(244,238,227,.16)}
.karte-titel{font-family:'Cutive',serif;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone);margin:0;flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.karte-zaehler{font-family:'Cutive',serif;font-size:.7rem;letter-spacing:.16em;
  color:var(--bone);opacity:.55;margin:0;flex:none}
.karte-zaehler b{font-weight:400;opacity:1}
.karte-pdf{font-family:'Cutive',serif;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone);text-decoration:none;flex:none;
  border:1px solid rgba(244,238,227,.4);padding:.55rem .9rem;min-height:44px;
  display:inline-flex;align-items:center;gap:.5rem;transition:background .3s,color .3s}
.karte-pdf:hover,.karte-pdf:focus-visible{background:var(--bone);color:var(--ink)}
.karte-zu{flex:none;width:44px;height:44px;display:grid;place-items:center;
  background:none;border:1px solid rgba(244,238,227,.4);color:var(--bone);
  font-size:1rem;cursor:pointer;transition:background .3s,color .3s}
.karte-zu:hover,.karte-zu:focus-visible{background:var(--bone);color:var(--ink)}
.karte :is(button,a):focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.karte-buehne{display:flex;overflow-x:auto;overflow-y:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch}
.karte-buehne::-webkit-scrollbar{display:none}
.karte-seite{flex:0 0 100%;scroll-snap-align:center;display:grid;place-items:center;
  padding:clamp(.8rem,2.5vh,2rem) clamp(.8rem,3vw,3rem)}
.karte-seite img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  object-fit:contain;cursor:zoom-in;user-select:none;-webkit-user-drag:none}
.karte-seite.gross{place-items:start center;overflow:auto}
.karte-seite.gross img{max-width:none;max-height:none;width:min(1600px,190%);cursor:zoom-out}
.karte-pfeil{position:fixed;top:50%;transform:translateY(-50%);z-index:2;
  width:46px;height:46px;display:grid;place-items:center;background:rgba(11,10,9,.8);
  border:1px solid rgba(244,238,227,.4);color:var(--bone);cursor:pointer;
  transition:background .3s,color .3s,opacity .3s}
.karte-pfeil:hover{background:var(--bone);color:var(--ink)}
.karte-pfeil[disabled]{opacity:.2;pointer-events:none}
.karte-links{left:clamp(.5rem,1.5vw,1.4rem)} .karte-rechts{right:clamp(.5rem,1.5vw,1.4rem)}
.karte-hinweis{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);margin:0;
  font-family:'Cutive',serif;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone);opacity:.35;pointer-events:none}
body.karte-offen{overflow:hidden}
@media(max-width:900px){
  .karte-pfeil{display:none}                /* auf dem Telefon wird gewischt */
  .karte-kopf{gap:.6rem;padding-inline:clamp(.8rem,4vw,1.2rem)}
  .karte-titel{font-size:.62rem;letter-spacing:.16em}
  .karte-pdf span{display:none}
  .karte-pdf{padding:.55rem .75rem}
}

/* ---- Kartenknoepfe in den Markenbereichen ----
   Dieselbe Sprache wie die Event- und Reservierungsknoepfe, nur kompakter. */
.karten{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:clamp(1.4rem,3.5vh,2.2rem)}
.karten > *{font-family:'Cutive',serif;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone);background:none;text-decoration:none;
  border:1px solid var(--kc,rgba(244,238,227,.42));min-height:44px;cursor:pointer;
  display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1rem;
  transition:background .3s,color .3s}
.karten > *:hover,.karten > *:focus-visible{background:var(--kc,var(--bone));color:var(--ink)}
.karten i{font-style:normal}
.karten em{font-style:normal;opacity:.6;letter-spacing:.14em}
@media(max-width:900px){.karten > *{flex:1 1 100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.karte{transition:none}}

/* ============ 6c · Markenreise ============
   Ein Slider erzaehlt die Konzepte der Reihe nach. Vor jeder Marke steht
   ein Kapitel-Slide mit dem Originallogo — schwarz, gross, ruhig, kein
   Foto. Technik und Bedienung sind dieselben wie bei den bestehenden
   Bildstrecken: Scroll-Snap, Pfeile, Wischen, Zaehler. */
.mk-slider{--sw:34%;--sar:4/3;--sac:var(--bronze);--sgap:clamp(1rem,2.2vw,2rem);
  width:88%;margin-inline:auto;margin-top:clamp(2rem,5vh,3.4rem)}
.mk-slider .slide{background:#000}
/* Kapitel-Slide */
.mk-marke{background:var(--ink)!important;border-color:var(--mkc,var(--bone))!important}
.mk-in{position:absolute;inset:var(--mat);display:grid;align-content:center;justify-items:center;
  gap:clamp(.5rem,1.4vh,.9rem);padding:clamp(1rem,3vw,2rem);text-align:center}
.mk-nr{font-family:'Archivo Black',sans-serif;font-size:clamp(1.6rem,4vw,2.8rem);
  line-height:1;letter-spacing:-.02em;color:transparent;
  -webkit-text-stroke:1.5px var(--mkc,var(--bone));opacity:.55;margin:0}
/* Die Originallogos tragen dunkle Bestandteile ("by DICKE BUTZ"), die auf
   Schwarz verschwinden. Sie stehen deshalb auf derselben Bone-Plakette wie
   in den Markenkapiteln — am Logo selbst wird nichts veraendert. */
.mk-logo{display:block;width:min(70%,240px);aspect-ratio:var(--mkar,470/247);
  background-position:center;background-size:contain;background-repeat:no-repeat;
  background-color:var(--bone);background-origin:content-box;
  padding:clamp(.7rem,2.2vw,1.2rem);box-sizing:content-box}
.mk-logo-voka{background-image:var(--i-voka);--mkar:470/247}
.mk-logo-butzeria{background-image:var(--i-butz);--mkar:430/496;width:min(46%,150px)}
.mk-logo-ukii{background-image:var(--i-ukii);--mkar:470/283}
.mk-logo-db{background-image:var(--i-db);--mkar:680/614;width:min(52%,180px)}
.mk-kap,.mk-ort{font-family:'Cutive',serif;font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mkc,var(--bone));opacity:.75;margin:0}
.mk-dach{border-color:rgba(244,238,227,.55)!important}
.mk-dach .mk-ort,.mk-dach .mk-kap{color:var(--bone)}
.mk-dach .mk-kap{opacity:.5}
@media(max-width:900px){
  .mk-slider{--sw:82%;--sar:4/3;width:auto;margin-inline:0}
  .mk-logo{width:min(64%,200px)}
  .mk-logo-butzeria{width:min(42%,130px)}
}


/* ============ 7 · VOKA, Position des Kapitels ============
   Die Wortmarke lag absolut positioniert und mittig ueber dem Bild.
   Dadurch stand sie bei jeder Fensterbreite an einer anderen Stelle und
   wanderte gegenueber den uebrigen Kapiteln. Sie steht jetzt im normalen
   Fluss, linksbuendig an derselben Kante wie Kapitelnummer und
   Kapitelzeile, und ueber dem Bild statt darin.
   Die Bilder des Kapitels bleiben unveraendert. */
#voka .vstage{margin-top:clamp(1.4rem,3.5vh,2.6rem)}
#voka .word{position:static;left:auto;top:auto;transform:none;
  display:block;text-align:left;pointer-events:none;
  margin:0 0 clamp(.9rem,2.4vh,1.8rem);
  font-size:clamp(3.4rem,19vw,15rem);line-height:.82}
#voka .fr-wide .side{position:absolute;top:0;bottom:0;z-index:3;
  display:grid;place-items:center;color:var(--bone);opacity:.85;
  text-shadow:0 2px 14px rgba(0,0,0,.8)}
#voka .fr-wide .side.l{left:.7rem;right:auto}
#voka .fr-wide .side.r{right:.7rem;left:auto}
@media(max-width:900px){
  #voka .vstage{margin-top:clamp(1rem,3vh,2rem)}
  #voka .word{transform:none;font-size:clamp(3rem,21vw,7rem);
    margin-bottom:clamp(.7rem,2vh,1.2rem)}
  #voka .fr-wide .side{display:none}
}


/* ============ 8 · Speisekarten-Uebersicht ============ */
#speisekarten{padding:clamp(3.4rem,10vh,7rem) var(--pad);
  border-top:1px solid rgba(244,238,227,.16)}
.sk-liste{margin-top:clamp(1.8rem,4.5vh,3rem);display:grid;gap:clamp(1.4rem,3.5vh,2.4rem)}
.sk-gruppe{display:grid;gap:.7rem;padding-top:clamp(1rem,2.5vh,1.6rem);
  border-top:1px solid rgba(244,238,227,.14)}
.sk-gruppe:first-child{border-top:0;padding-top:0}
.sk-marke{margin:0;font-family:'Cutive',serif;font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--kc,var(--bone))}
.sk-gruppe .karten{margin-top:0}


/* ============ 9 · Bewegung der verbliebenen Bilder ============
   Alles laeuft ueber transform und opacity, nie ueber Layoutwerte —
   dadurch entsteht kein Neuberechnen und kein Ruckeln. Logos sind
   ausdruecklich ausgenommen: sie bleiben ruhig und scharf. */

/* Aufdecken beim Eintritt ins Bild: das Motiv schiebt sich im Rahmen
   sanft nach oben und wird klar. Der Rahmen selbst bewegt sich nicht. */
.reveal{overflow:hidden}
.reveal > picture,.reveal > img{
  transform:translate3d(0,6%,0) scale(1.06);opacity:0;
  transition:transform 1200ms cubic-bezier(.16,.84,.28,1),
             opacity 900ms cubic-bezier(.16,.84,.28,1)}
.reveal.sichtbar > picture,.reveal.sichtbar > img{
  transform:translate3d(0,0,0) scale(1);opacity:1}

/* Sehr langsamer Ken-Burns in der Markenreise — nur auf Fotos,
   nicht auf den Kapitel-Slides mit den Logos. */
.mk-slider .slide:not(.mk-marke) img{
  animation:kenburns 24s ease-in-out infinite alternate;
  transform-origin:center 55%;will-change:transform}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.035)}}

/* Winzige Reaktion auf die Maus, nur am Rechner und nur beim Leitbild. */
.maus > picture{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
@media(hover:none){.maus > picture{transform:none!important}}

@media(prefers-reduced-motion:reduce){
  .reveal > picture,.reveal > img{transform:none;opacity:1;transition:none}
  .mk-slider .slide:not(.mk-marke) img{animation:none}
  .maus > picture{transform:none!important;transition:none}
}


/* ---------- 8 · Franchise: VOKA by Dicke Butz + Anfrageformular ----------
   Das Logo ist die Originaldatei, nur per contain skaliert, auf der
   Bone-Plakette (dunkle Logoteile verschwinden sonst auf Schwarz).
   Keine Animation am Logo. Das Formular nutzt die Stile von .ev-form. */
.fr-konzept{display:flex;align-items:center;gap:clamp(1.2rem,3.5vw,3rem);
  margin-top:clamp(2.6rem,7vh,4.6rem);padding:clamp(1.4rem,3.5vh,2.2rem) 0;
  border-top:1px solid rgba(244,238,227,.16);border-bottom:1px solid rgba(244,238,227,.16)}
.fr-logo{flex:0 0 auto;display:block;width:clamp(150px,22vw,260px);aspect-ratio:470/247;
  background:var(--bone) var(--i-voka) center/contain no-repeat;background-origin:content-box;
  padding:clamp(.7rem,1.8vw,1.1rem);box-sizing:content-box}
.fr-konzept-txt{min-width:0}
.fr-konzept-eye{font-family:'Cutive',serif;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bronze);margin:0 0 .6rem}
.fr-konzept-h{font-family:'Archivo Black',sans-serif;text-transform:uppercase;line-height:.95;
  letter-spacing:-.02em;font-size:clamp(1.6rem,4.2vw,3.2rem);margin:0}
.fr-konzept-h em{display:block;font-style:normal;font-family:'Cutive',serif;text-transform:none;
  letter-spacing:.12em;font-size:clamp(.8rem,1.4vw,1rem);opacity:.7;margin-top:.55rem}
.fr-konzept-sub{font-family:'Montserrat',sans-serif;font-size:.9rem;line-height:1.75;opacity:.78;
  margin:.9rem 0 0;max-width:46ch}
.fr-form-wrap{scroll-margin-top:5rem}
#franchise-anfrage{scroll-margin-top:6rem}
.ev-form .hint a{color:inherit}
@media(max-width:640px){
  .fr-konzept{flex-direction:column;align-items:flex-start}
  .fr-logo{width:min(62vw,240px)}
}

/* VOKA: Kennzeichnung als Franchise-Konzept (kein bestehendes Restaurant) */
.v-status{display:inline-block;margin-top:clamp(1rem,3vh,1.8rem);padding:.55rem .9rem;
  border:1px solid var(--rust-t);color:var(--rust-t);font-size:.64rem;letter-spacing:.22em;
  text-transform:uppercase;line-height:1.5}

/* Kapitel 03 · Dicke Butz Schillerstrasse: exakt dieselben Regeln wie Kapitel 01 */
#dickebutz-schiller .chno{color:var(--bronze);opacity:.55;text-align:left}
#dickebutz-schiller .word{color:var(--bone)}
#dickebutz-schiller .stmt{margin-top:clamp(1.6rem,4.5vh,3rem)}
#dickebutz-schiller .db-adr{display:flex;flex-wrap:wrap;gap:.4rem 2.6rem;
  margin-top:clamp(1.2rem,3vh,2rem)}
#dickebutz-schiller .db-adr span{font-family:'Cutive',serif;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bronze)}
#dickebutz-schiller .db-adr a{color:inherit;text-decoration:none}
#dickebutz-schiller .db-adr a:hover{text-decoration:underline}
.fr-alle{font-family:'Cutive',serif;font-size:clamp(.72rem,1.2vw,.86rem);letter-spacing:.16em;
  text-transform:uppercase;line-height:2;color:var(--bone);opacity:.7;margin-top:clamp(1.4rem,3.5vh,2.2rem);max-width:60ch}

/* Alle Logos ohne helle Flaeche (Kundenwunsch 21.09.2026): Dicke Butz,
   Butzeria, VOKA, Urban Kitchen II. Die Logodateien sind transparent und
   werden nicht veraendert. */
.plate,.plate.plate-frei{background:none;padding:0}
.mk-logo,.fr-logo{background-color:transparent;padding:0}
.fr-logo-butz{background-color:transparent;background-image:var(--i-butz);aspect-ratio:430/496;
  width:clamp(96px,12vw,150px);padding:0}
.fr-konzept-butz + .fr-konzept{margin-top:0;border-top:0}

/* Urban Kitchen II: E-Mail-Adresse in normaler Schreibweise, damit sie mobil in eine Zeile passt */
.golink.uk-mail{text-transform:none;letter-spacing:.06em;word-break:break-word}
.golink.uk-mail u{text-transform:none}

/* Schnellzugriff im oberen Balken, links neben dem Logo (Kundenwunsch 21.09.2026).
   Nur mit genug Platz; darunter oben im Menue. */
.topnav{display:none}
@media(min-width:1400px){
  .topnav{display:flex;align-items:center;gap:clamp(.7rem,1.1vw,1.3rem);margin-left:clamp(1rem,1.8vw,2.2rem)}
  .topnav a{font-family:'Cutive',serif;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
    color:#fff;text-decoration:none;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;
    opacity:.82;transition:opacity .25s}
  .topnav a:hover,.topnav a:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:4px}
  .menu-quick{display:none}
}
.menu-quick{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;padding-bottom:clamp(1rem,2.5vh,1.6rem);
  margin-bottom:clamp(1rem,2.5vh,1.6rem);border-bottom:1px solid rgba(244,238,227,.16)}
.menu-quick a{font-family:'Cutive',serif;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
@media(min-width:1400px){.menu-quick{display:none}}
@media(min-width:1400px){.top .wm{white-space:nowrap;flex:none}}

/* ---------- Hausinfo: in jedem Hauskapitel derselbe Aufbau ----------
   Adresse · Telefon · Oeffnungszeiten · Lunch Pass (· E-Mail), darunter
   Speisekarte / Mittagslunch / Lunch Pass und Reservieren / Route. */
.haus-info{margin-top:clamp(1.4rem,3.5vh,2.2rem);max-width:40rem;position:relative;z-index:2}
.haus-info dl{margin:0;display:grid;gap:0}
.haus-info dl > div{display:grid;grid-template-columns:clamp(96px,11vw,140px) 1fr;gap:1rem;
  padding:.7rem 0;border-top:1px solid rgba(244,238,227,.14)}
.haus-info dl > div:last-child{border-bottom:1px solid rgba(244,238,227,.14)}
.haus-info dt{font-family:'Cutive',serif;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--hc,var(--bronze));padding-top:.25rem}
.haus-info dd{margin:0;font-family:'Montserrat',sans-serif;font-size:.86rem;line-height:1.65;color:var(--bone);opacity:.88}
.haus-info dd a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(244,238,227,.3)}
.haus-info dd a:hover{border-bottom-color:currentColor}
.haus-info .karten{margin-top:clamp(1.1rem,2.6vh,1.6rem)}
.haus-links{display:flex;flex-wrap:wrap;gap:.2rem 2rem;margin-top:clamp(.9rem,2.2vh,1.4rem)}
.haus-links .golink{color:inherit}
@media(max-width:560px){
  .haus-info dl > div{grid-template-columns:1fr;gap:.15rem}
}
@media(max-width:900px){
  #butzeria .haus-info,#ukii .haus-info{order:7}
}

/* VOKA im Franchise-Bereich: Buchstaben-Innenraeume transparent, 'by Dicke Butz' als Neon (26.09.2026) */
.fr-logo:not(.fr-logo-butz){background-image:url('../brand/voka/voka-logo-neon.png')}

/* Kopfleiste: beim Scrollen dunkler Hintergrund, damit Logo und Menue nicht ueber dem Text liegen (26.09.2026) */
.top{transition:background-color .25s ease,box-shadow .25s ease}
.top.solid{mix-blend-mode:normal;background-color:rgba(11,10,9,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.07)}