/* ============================================================
   Colonia Kebap Haus — Köln Sülz & Klettenberg
   Branding: Rot + Gold + Weiß (Kölner Wappen). Appetitlich, kölsch.
   ============================================================ */
:root{
  --red:#C8202D;
  --red-dk:#8E1419;
  --gold:#F4A91F;
  --gold-dk:#D98E00;
  --ink:#1A1614;
  --char:#23201d;
  --cream:#FBF3E7;
  --paper:#ffffff;
  --warm:#2a1a12;
  --display:'Anton',Impact,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --script:'Pacifico',cursive;
  --maxw:1200px;
  --ease:cubic-bezier(.22,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
section{position:relative}
.accent{color:var(--red)}
.script{font-family:var(--script);font-weight:400}
.script.gold{color:var(--gold)}

h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:.98;text-transform:uppercase;color:var(--ink)}
.h2{font-size:clamp(2.2rem,5vw,3.8rem);margin-bottom:.35em}
.kicker{font-family:var(--body);font-weight:800;text-transform:uppercase;letter-spacing:.2em;font-size:.8rem;color:var(--red);margin-bottom:1rem}
.kicker.light{color:var(--gold)}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);max-width:60ch}
.light h2,.light h3,.light.h2,.lead.light{color:#fff}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--body);font-weight:800;font-size:1rem;padding:.95em 1.7em;border-radius:999px;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s;text-transform:uppercase;letter-spacing:.03em}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 12px 28px -10px rgba(244,169,31,.7)}
.btn-gold:hover{transform:translateY(-3px);background:var(--gold-dk);box-shadow:0 18px 36px -10px rgba(244,169,31,.85)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 12px 28px -10px rgba(200,32,45,.6)}
.btn-red:hover{transform:translateY(-3px);background:var(--red-dk)}
.btn-ghost-dark{border:2px solid rgba(26,22,20,.25);color:var(--ink)}
.btn-ghost-dark:hover{border-color:var(--red);color:var(--red)}

/* ---------- Progress + Nav ---------- */
.progress-bar{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--red),var(--gold));z-index:200;transition:width .1s linear}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:14px 28px;transition:background .4s,box-shadow .4s,padding .4s}
.nav.scrolled{background:rgba(251,243,231,.92);backdrop-filter:blur(12px);box-shadow:0 2px 14px rgba(26,22,20,.12);padding:8px 28px}
.brand{display:flex;align-items:center;gap:12px}
.brand-wappen{width:34px;height:41px;flex:none}
.brand-txt{display:flex;flex-direction:column;line-height:.9}
.brand-txt b{font-family:var(--display);font-size:1.35rem;color:var(--red);letter-spacing:.04em}
.brand-txt i{font-style:normal;font-weight:700;font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ink)}
.nav.scrolled .brand-txt b,.scene ~ * .nav{color:var(--red)}
.nav-links{display:flex;gap:26px}
.nav-links a{font-weight:700;font-size:.95rem;color:#fff;opacity:.9;transition:.25s;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.nav.scrolled .nav-links a{color:var(--ink);text-shadow:none;opacity:.8}
.nav-links a:hover{color:var(--gold);opacity:1}
.nav.scrolled .nav-links a:hover{color:var(--red)}
.nav-cta{padding:.6em 1.3em;font-size:.9rem}

.dots{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:13px}
.dots a{width:12px;height:12px;display:grid;place-items:center}
.dots span{width:9px;height:9px;border-radius:50%;background:var(--ink);opacity:.3;transition:.3s var(--ease)}
.dots a.active span{opacity:1;background:var(--red);transform:scale(1.5)}

/* ---------- Reveals ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   DÖNER-SZENE (Hero + gepinnte Story)
   ============================================================ */
.scene{height:700vh;background:radial-gradient(120% 100% at 50% 42%,#85111a 0%,#6b0d17 46%,#3a070e 100%)}
.scene-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.scene-glow{position:absolute;width:80vmin;height:80vmin;left:50%;top:52%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(244,169,31,.38),rgba(200,32,45,.16) 45%,transparent 70%);filter:blur(20px);z-index:0;animation:glowpulse 6s ease-in-out infinite}
@keyframes glowpulse{50%{transform:translate(-50%,-50%) scale(1.08);opacity:.85}}
.scene-grain{position:absolute;inset:0;z-index:1;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none}

.scene-title{position:absolute;z-index:6;top:6vh;left:50%;transform:translateX(-50%);text-align:center;width:92%;pointer-events:none}
.scene-title .eyebrow{font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:.8rem;color:var(--gold);margin-bottom:14px}
.scene-title h1{font-family:var(--display);font-size:clamp(2.6rem,7.5vw,5.6rem);color:#fff;line-height:.86;text-shadow:0 4px 24px rgba(0,0,0,.7)}
.scene-title h1 .line2{color:var(--gold)}
.scene-title .hero-sub{margin-top:16px;font-size:clamp(1.1rem,2vw,1.5rem);color:rgba(255,255,255,.9);font-weight:500}
.scene-title .script{font-size:1.4em;color:var(--gold);vertical-align:-.1em}

/* Döner */
.doener-wrap{position:relative;z-index:4;width:min(96vh,940px);height:min(96vh,940px);display:grid;place-items:center;transform:scale(.8);will-change:transform}
.scene-static .doener-wrap{transform:none}
/* Ohne Scroll-Steuerung (mobil / reduzierte Bewegung / kein GSAP): Standbild statt Sequenz */
.scene-static .doener-3d canvas{display:none}
.scene-static .doener-3d .doener-fallback{display:block;width:100%;height:100%;object-fit:contain}
.doener-plate{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.doener-tilt{position:relative;z-index:5;width:100%;height:100%;display:grid;place-items:center;transform-style:preserve-3d;will-change:transform;transition:transform .25s ease-out}
/* Turntable-Video: Döner dreht sich echt um sich selbst — frei schwebend, kein Teller-Clip (der Video-Hintergrund verschmilzt mit dem Szenen-Braun) */
.doener-3d{width:112%;aspect-ratio:1;border-radius:0;overflow:visible;box-shadow:none;background:transparent;animation:bob 5s ease-in-out infinite}
/* Die Frames sind jetzt freigestellt (transparenter Hintergrund) -> keine Maske noetig,
   der Doener schwebt frei auf dem roten Szenen-Hintergrund. */
.doener-3d canvas{width:100%;height:100%;object-fit:contain;display:block}
.doener-3d .doener-fallback{display:none}
@keyframes bob{50%{transform:translateY(-12px)}}

.steam{position:absolute;z-index:6;top:-6%;left:50%;transform:translateX(-50%);width:50%;height:40%;pointer-events:none}
.steam span{position:absolute;bottom:0;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.5);filter:blur(7px);animation:steam 4s ease-in infinite}
.steam span:nth-child(1){left:25%;animation-delay:0s}
.steam span:nth-child(2){left:50%;animation-delay:1.3s}
.steam span:nth-child(3){left:72%;animation-delay:2.4s}
@keyframes steam{0%{opacity:0;transform:translateY(0) scale(.6)}25%{opacity:.7}100%{opacity:0;transform:translateY(-120px) scale(2.4)}}

/* Zutaten-Callouts */
.ingr{position:absolute;z-index:7;display:flex;flex-direction:column;gap:6px;background:linear-gradient(150deg,rgba(42,17,12,.92),rgba(18,9,7,.9));-webkit-backdrop-filter:blur(11px) saturate(1.2);backdrop-filter:blur(11px) saturate(1.2);padding:22px 32px 22px 36px;border-radius:18px;border:1px solid rgba(244,169,31,.32);box-shadow:0 20px 46px -18px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.07);opacity:0;transform:translateY(20px) scale(.92);transition:opacity .7s var(--ease),transform .7s var(--ease);max-width:400px;overflow:hidden}
.ingr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--gold),var(--red))}
.ingr b{font-family:var(--display);font-weight:400;letter-spacing:.025em;text-transform:uppercase;font-size:2.1rem;color:var(--gold);line-height:1.04}
.ingr i{font-style:normal;font-size:1.18rem;font-weight:500;letter-spacing:.005em;line-height:1.42;color:rgba(255,255,255,.92);margin-top:3px}
.ingr-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffd984,var(--gold));box-shadow:0 0 0 4px rgba(244,169,31,.22),0 0 16px 3px rgba(244,169,31,.65)}
.ingr-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid rgba(244,169,31,.7);animation:ingrPulse 2.1s ease-out infinite}
@keyframes ingrPulse{0%{transform:scale(.55);opacity:.95}100%{transform:scale(2);opacity:0}}
.ingr.show{opacity:1;transform:none;animation:ingrGlow 1.7s var(--ease) .08s}
@keyframes ingrGlow{0%{box-shadow:0 20px 46px -18px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.07)}28%{box-shadow:0 20px 46px -18px rgba(0,0,0,.75),0 0 32px 1px rgba(244,169,31,.6),inset 0 1px 0 rgba(255,255,255,.07)}100%{box-shadow:0 20px 46px -18px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.07)}}
@media (prefers-reduced-motion:reduce){.ingr-dot::after{animation:none}.ingr.show{animation:none}}
.ingr-1{top:8%;left:2%}.ingr-1 .ingr-dot{top:50%;right:-22px}
.ingr-2{top:24%;right:-8%}.ingr-2 .ingr-dot{top:50%;left:-22px}
.ingr-3{top:22%;left:-10%}.ingr-3 .ingr-dot{top:50%;right:-22px}
.ingr-4{bottom:6%;left:-4%}.ingr-4 .ingr-dot{top:0;right:-20px}
.ingr-5{bottom:2%;right:-4%}.ingr-5 .ingr-dot{top:0;left:-20px}

.scene-caption{position:absolute;z-index:6;bottom:9vh;left:50%;transform:translateX(-50%);text-align:center;width:92%;opacity:0;transition:opacity .6s var(--ease)}
.scene-caption h2{color:#fff;font-size:clamp(1.6rem,3.6vw,2.8rem)}
.scene-caption h2 .accent{color:var(--gold)}
.scene-caption p{color:rgba(255,255,255,.7);margin-top:6px}

.scroll-hint{position:absolute;z-index:6;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.sh-line{width:1.5px;height:38px;background:rgba(255,255,255,.25);overflow:hidden}
.sh-line i{display:block;width:100%;height:40%;background:var(--gold);animation:sd 1.8s ease-in-out infinite}
@keyframes sd{0%{transform:translateY(-100%)}100%{transform:translateY(250%)}}

/* Fallback ohne GSAP / reduced / mobile: alles sichtbar */
.scene-static .scene-caption{opacity:1}
.scene-static .ingr{opacity:1;transform:none}

/* ---------- MENÜ ---------- */
.menu{padding:120px 0;background:var(--cream);position:relative;overflow:hidden}
/* Inhalt der Karte liegt IMMER über der Schatten-Figur */
.menu>.wrap,.menu .swipe-menu{position:relative;z-index:2}

/* ---- Akt 2: Kölsch-Pixelfigur läuft am unteren Rand mit ---- */
.shop-figure{position:absolute;left:0;top:0;z-index:6;width:100%;height:100vh;pointer-events:none;overflow:visible}
.shop-figure .fig{position:absolute;left:1.5vw;bottom:14px;width:clamp(58px,9vh,72px);height:clamp(88px,26vh,108px);transform:translateX(0)}
.fig .pix{width:100%;height:100%;transform-origin:50% 100%}
.fig .pix-svg{width:100%;height:100%;display:block;image-rendering:pixelated;filter:drop-shadow(0 5px 5px rgba(0,0,0,.3))}
.fig .p-leg{transform-box:fill-box;transform-origin:50% 14%}
.fig .p-head{transform-box:fill-box;transform-origin:50% 100%}
.fig .p-arm,.fig .p-beer{transform-box:fill-box;transform-origin:20% 100%}

/* Gehen: Beine schwingen + leichtes Wippen */
.fig.walking .pix{animation:pixBob .46s ease-in-out infinite}
.fig.walking .p-legL{animation:pixLegA .46s ease-in-out infinite}
.fig.walking .p-legR{animation:pixLegB .46s ease-in-out infinite}
.fig.walking .p-arm,.fig.walking .p-beer{animation:pixArmWalk .46s ease-in-out infinite}
@keyframes pixLegA{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-18deg)}}
@keyframes pixLegB{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}
@keyframes pixBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes pixArmWalk{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

/* Stehenbleiben: guckt hoch zur Karte, dreht sich ab und zu um, prostet */
.fig.looking .pix{animation:pixTurn 3.2s steps(1,end) infinite}
.fig.looking .p-head{animation:pixLookUp 3.2s ease-in-out infinite}
.fig.looking .p-arm{animation:pixCheers 3.2s ease-in-out infinite}
.fig.looking .p-beer{animation:pixCheers 3.2s ease-in-out infinite}
@keyframes pixTurn{0%,48%{transform:scaleX(1)}50%,98%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
@keyframes pixLookUp{0%,14%{transform:rotate(0)}34%,82%{transform:rotate(-16deg)}100%{transform:rotate(0)}}
@keyframes pixCheers{0%,24%{transform:translateY(0) rotate(0)}52%,80%{transform:translateY(-3px) rotate(-24deg)}100%{transform:translateY(0) rotate(0)}}
@media (prefers-reduced-motion:reduce){.shop-figure{display:none}}
.menu-note{color:#8a7a66;max-width:60ch;margin-bottom:2.5rem}
.menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.menu-cat h3{font-family:var(--display);font-size:1.7rem;color:var(--red);display:flex;align-items:center;gap:12px;margin-bottom:18px;text-transform:uppercase}
.cat-ic{font-size:1.5rem}
.menu-list{list-style:none;display:grid;gap:4px}
.menu-list li{display:flex;align-items:baseline;gap:8px;padding:9px 0;border-bottom:1px dashed rgba(26,22,20,.14)}
.mi-name{font-weight:700;color:var(--ink)}
.mi-name em{font-style:normal;font-weight:400;color:#8a7a66;font-size:.9em}
.mi-dots{flex:1}
.mi-price{font-family:var(--display);color:var(--red);font-size:1.15rem}
.mi-price::after{content:" €";font-size:.7em}
.menu-list.light .mi-name{color:#fff}
.menu-list.light .mi-name em{color:rgba(255,255,255,.6)}
.menu-list.light li{border-color:rgba(255,255,255,.16)}
.menu-list.light .mi-price{color:var(--gold)}

/* ---------- STEINOFEN ---------- */
.steinofen{padding:120px 0;background:var(--red);position:relative;overflow:hidden}
.steinofen::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 80% 20%,rgba(244,169,31,.25),transparent 60%)}
.steinofen-grid{position:relative;display:grid;grid-template-columns:1.3fr .7fr;gap:50px;align-items:center}
.steinofen-card{background:#fff;border-radius:20px;padding:44px 32px;text-align:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.4)}
.big-wappen{width:90px;height:108px;margin:0 auto 18px}
.steinofen-card p{font-family:var(--script);font-size:2rem;color:var(--red);line-height:1}
.steinofen-card span{display:block;margin-top:10px;color:#8a7a66;font-size:.9rem}

/* ---------- STANDORT ---------- */
.standort{padding:120px 0;background:var(--cream)}
.standort-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.info{margin:1.5rem 0 2rem}
.info-row{display:flex;gap:18px;padding:14px 0;border-bottom:1px solid rgba(26,22,20,.1)}
.info-row b{flex:none;width:140px;font-family:var(--display);font-size:1rem;text-transform:uppercase;color:var(--red)}
.info-row span{color:var(--ink)}
.info-row i{font-style:normal;color:#a99}
.standort-cta{display:flex;gap:14px;flex-wrap:wrap}
.map{position:relative;height:380px;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,#e9dcc4,#d6c4a2);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);background-size:38px 38px}
.map-pin{position:relative;z-index:2;width:64px;height:64px;border-radius:50% 50% 50% 0;background:var(--red);transform:rotate(-45deg);display:grid;place-items:center;box-shadow:0 14px 24px -8px rgba(0,0,0,.5)}
.map-wappen{width:30px;height:36px;transform:rotate(45deg)}
.map-label{position:absolute;z-index:2;bottom:24px;background:#fff;padding:.5em 1.1em;border-radius:999px;font-weight:700;font-size:.9rem;box-shadow:0 8px 18px -8px rgba(0,0,0,.4)}

/* ---------- FOOTER ---------- */
.footer{background:var(--ink);color:rgba(255,255,255,.7);padding:56px 0 0}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:36px}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-brand .brand-txt b{color:#fff}
.footer-brand .brand-txt i{color:var(--gold)}
.footer-claim{font-size:.95rem}
.footer-legal{display:flex;gap:20px}
.footer-legal a:hover{color:var(--gold)}
.footer-base{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;text-align:center;font-size:.84rem;opacity:.6}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .nav-links{display:none}
  .dots{display:none}
  .shop-figure{display:none}
  .menu-cols{grid-template-columns:1fr;gap:40px}
  .steinofen-grid,.standort-grid{grid-template-columns:1fr;gap:34px}
  .scene{height:auto}
  .scene-pin{position:static;height:auto;min-height:100vh;padding:120px 0 60px;flex-direction:column;gap:30px}
  .scene-title{position:static;transform:none}
  .doener-wrap{width:min(82vw,420px);height:min(82vw,420px)}
  .ingr{position:static;max-width:none;opacity:1;transform:none;width:100%}
  .ingr-dot{display:none}
  .scene-caption{position:static;transform:none;opacity:1;margin-top:10px}
  .scroll-hint{display:none}
  .scene-static .doener-wrap ~ .ingr,.ingr{margin:0}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   Swipebare Speisekarte (horizontal, mehrere Ansichten)
   ============================================================ */
.swipe-menu{ margin-top: clamp(26px,4vw,44px); }
.sm-tabs{ display:flex; gap:10px; overflow-x:auto; padding:4px 0 14px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.sm-tabs::-webkit-scrollbar{ display:none; }
.sm-tab{ flex:0 0 auto; cursor:pointer; font-family:var(--body); font-weight:700; font-size:.9rem; color:var(--ink); background:#fff; border:2px solid rgba(200,32,45,.18); border-radius:999px; padding:9px 16px; transition:all .25s var(--ease); white-space:nowrap; }
.sm-tab:hover{ border-color:var(--red); }
.sm-tab.active{ background:var(--red); color:#fff; border-color:var(--red); box-shadow:0 8px 22px -10px rgba(200,32,45,.7); }

.sm-viewport{ position:relative; }
.sm-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; outline:none; }
.sm-track::-webkit-scrollbar{ display:none; }
.sm-slide{ flex:0 0 100%; scroll-snap-align:center; display:flex; justify-content:center; padding:8px clamp(14px,4vw,40px) 22px; box-sizing:border-box; }

/* --- Scroll-getriebener horizontaler Pin-Modus (Desktop) --- */
body.menu-pinned .swipe-menu{ position:relative; overflow:hidden; }
body.menu-pinned .sm-track{ overflow:visible; scroll-snap-type:none; scroll-behavior:auto; will-change:transform; }
body.menu-pinned .sm-slide{ flex:0 0 min(940px,88vw); scroll-snap-align:none; }
body.menu-pinned .sm-arrow{ display:none; }
body.menu-pinned .sm-tabs{ pointer-events:none; }
/* Karte kompakter, damit sie komplett in den Viewport passt */
body.menu-pinned .sm-slide{ padding-top:4px; padding-bottom:10px; align-items:center; }
body.menu-pinned .sm-card-head{ padding:15px clamp(20px,3vw,34px) 10px; }
body.menu-pinned .sm-card-head h3{ font-size:clamp(1.5rem,3.4vw,2.05rem); }
body.menu-pinned .sm-ic{ font-size:1.5rem; margin-bottom:2px; }
body.menu-pinned .sm-sub{ margin-top:4px; font-size:.82rem; }
body.menu-pinned .sm-list{ padding:9px clamp(20px,3vw,34px) 12px; }
body.menu-pinned .sm-list li{ padding:4px 0; }
body.menu-pinned .sm-list--tight li{ padding:2.5px 0; }
body.menu-pinned .sm-list .n{ font-size:.94rem; }
body.menu-pinned .sm-list .p{ font-size:1.04rem; }
body.menu-pinned .sm-two{ padding:4px clamp(20px,3vw,34px) 12px; }

.sm-card{ width:100%; max-width:880px; background:linear-gradient(180deg,#ffffff,#fff7ea); border-radius:20px; border:1px solid rgba(200,32,45,.12); box-shadow:0 30px 70px -38px rgba(40,12,6,.6); overflow:hidden; position:relative; }
.sm-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:6px; background:linear-gradient(90deg,var(--gold),var(--red),var(--gold)); }
.sm-card-head{ position:relative; padding:30px clamp(22px,3vw,38px) 16px; background:radial-gradient(130% 130% at 0% 0%, rgba(244,169,31,.14), transparent 62%); border-bottom:2px dashed rgba(200,32,45,.22); }
.sm-ic{ font-size:2rem; display:block; line-height:1; margin-bottom:6px; }
.sm-card-head h3{ font-family:var(--display); font-size:clamp(1.9rem,4.5vw,2.7rem); color:var(--red); line-height:1; letter-spacing:.01em; text-transform:uppercase; margin:0; }
.sm-sub{ display:block; margin-top:8px; color:#7a6b5e; font-size:.9rem; }

.sm-list{ list-style:none; margin:0; padding:16px clamp(22px,3vw,38px) 26px; }
.sm-list li{ display:flex; align-items:flex-end; gap:8px; padding:9px 0; }
.sm-list--tight li{ padding:6px 0; }
.sm-list .n{ display:flex; flex-direction:column; font-weight:700; color:var(--ink); font-size:1.02rem; }
.sm-list--tight .n{ font-size:.95rem; }
.sm-list .n em{ font-style:normal; font-weight:500; color:#8a7a6c; font-size:.8em; margin-top:2px; line-height:1.3; }
.sm-list .ld{ flex:1; border-bottom:2px dotted rgba(120,90,60,.35); transform:translateY(-5px); min-width:16px; }
.sm-list .p{ font-family:var(--display); font-size:1.12rem; color:var(--red); white-space:nowrap; letter-spacing:.02em; }
.sm-list .p::after{ content:" €"; font-size:.66em; }

.sm-two{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(20px,3vw,40px); padding:6px clamp(22px,3vw,38px) 22px; }
.sm-two .sm-list{ padding:4px 0 2px; }
.sm-grp{ font-family:var(--display); text-transform:uppercase; color:var(--red); letter-spacing:.03em; font-size:1.05rem; margin:14px 0 2px; border-bottom:2px solid rgba(200,32,45,.15); padding-bottom:6px; }
.sm-grp-note{ font-family:var(--body); font-weight:600; font-size:.7rem; color:#9b8a7c; text-transform:none; }

.sm-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:52px; height:52px; border-radius:50%; border:none; cursor:pointer; background:var(--red); color:#fff; font-size:1.15rem; display:grid; place-items:center; box-shadow:0 12px 30px -12px rgba(200,32,45,.85); transition:transform .2s var(--ease), opacity .2s; }
.sm-arrow:hover{ transform:translateY(-50%) scale(1.09); }
.sm-arrow:disabled{ opacity:.28; cursor:default; transform:translateY(-50%); }
.sm-prev{ left:clamp(6px,2vw,30px); }
.sm-next{ right:clamp(6px,2vw,30px); }

.sm-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.sm-hint{ color:#9b8a7c; font-size:.82rem; letter-spacing:.28em; text-transform:uppercase; }
.sm-count{ font-family:var(--display); color:var(--ink); font-size:1.1rem; }
.sm-count b{ color:var(--red); }

@media (max-width:760px){
  .sm-two{ grid-template-columns:1fr; }
  .sm-arrow{ display:none; }
  .sm-card-head h3{ font-size:1.8rem; }
}

/* ============================================================
   Standortkarte (OSM) · Allergen-Legende · Sticky Bestell-Button
   ============================================================ */
.map-frame{width:100%;height:100%;border:0;display:block}
.map-route{position:absolute;bottom:14px;right:14px;z-index:2;box-shadow:0 10px 26px -10px rgba(0,0,0,.55)}

.allergen{max-width:880px;margin:16px auto 0;padding:0 clamp(14px,4vw,40px)}
.allergen>summary{cursor:pointer;font-weight:700;color:var(--red);font-size:.92rem;list-style:none;display:inline-flex;align-items:center;gap:8px}
.allergen>summary::-webkit-details-marker{display:none}
.allergen>summary::before{content:"＋";font-weight:700}
.allergen[open]>summary::before{content:"−"}
.allergen-body{margin-top:10px}
.allergen-body p{color:#6a5c4e;font-size:.82rem;line-height:1.7;margin:0 0 8px}
.allergen-body b{color:var(--ink)}
.allergen-note{font-style:italic;color:#8a7a6c}

/* ============================================================
   Finale: Wappen löst sich auf -> Besucht uns (schwarz)
   ============================================================ */
.finale{background:#000;color:#fff;position:relative}
.finale-hero{position:relative;height:100vh;overflow:hidden;background:#000;display:grid;place-items:center}
.finale-stage{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.finale-stage #wappenCanvas{width:100%;height:100%;object-fit:cover;display:block}
.finale-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.finale-stage.ready .finale-fallback{display:none}
/* Text erscheint hinter/nach dem sich auflösenden Wappen */
.finale-headline{position:relative;z-index:2;text-align:center;padding:0 24px;opacity:0;transform:translateY(24px);will-change:opacity,transform}
.finale-kicker{font-family:var(--body);font-weight:800;text-transform:uppercase;letter-spacing:.26em;font-size:clamp(.72rem,1.4vw,.9rem);color:var(--gold);margin-bottom:1rem}
.finale-h2{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.95;font-size:clamp(2.6rem,7vw,6rem);color:#fff}
.finale-h2 .script{text-transform:none;display:inline-block;margin-top:.12em;font-size:1.06em}

.finale-visit{background:#000;padding:clamp(40px,7vw,90px) 0 clamp(60px,9vw,120px)}
.finale-visit-inner{max-width:1080px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center}
.finale-info{display:flex;flex-direction:column;gap:18px}
.fv-row{display:flex;flex-direction:column;gap:3px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.12)}
.fv-row b{font-family:var(--body);font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--gold)}
.fv-row span{font-size:1.12rem;color:rgba(255,255,255,.92)}
.fv-row a{color:#fff;border-bottom:1px solid rgba(244,169,31,.5)}
.finale-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;border:0;padding:0}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.finale-map{position:relative;height:clamp(300px,42vw,440px);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.1)}
.finale-map .map-frame{width:100%;height:100%;border:0;display:block;filter:grayscale(.25) contrast(1.05)}
@media (max-width:820px){
  .finale-visit-inner{grid-template-columns:1fr;gap:26px}
  .finale-hero{height:82vh}
}
@media (prefers-reduced-motion:reduce){
  .finale-headline{opacity:1;transform:none}
}

.sticky-order{display:none}
@media(max-width:760px){
  .sticky-order{display:flex;position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:90;align-items:center;justify-content:center;gap:10px;padding:15px 18px;border-radius:15px;background:linear-gradient(135deg,var(--gold),var(--gold-dk));color:#241006;font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;font-size:1.15rem;text-decoration:none;box-shadow:0 16px 38px -10px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.05);border:1.5px solid rgba(255,255,255,.28)}
  .sticky-order svg{flex:0 0 auto}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}