/* Kulinar Feinkost – Hauptstyles */

/* Basis-Reset */
html,body{margin:0}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);-webkit-text-size-adjust:100%}
[hidden]{display:none!important}

/* Layout: ein Feinkost-Tresen als Seite – heller Leinengrund, olivgrüne Bänder für Speisekarte & Catering, runde Platten als Bildsprache.
   Bewusst ein einziges helles Erscheinungsbild in den Markenfarben von Flyer & Karte. */
:root{
  color-scheme: light;
  --linen:#f3f0ea;      /* Grund aus Flyer */
  --paper:#fbfaf6;
  --olive:#5a6b3e;      /* Markengrün */
  --olive-deep:#3f4c2a;
  --olive-soft:#dfe3d1;
  --bark:#4a3a2c;       /* Speisekarten-Braun */
  --ink:#24201b;
  --muted:#6e6558;
  --sun:#f6d65a;        /* „Bis 11 Uhr“-Gelb */
  --line:#d8d1c3;
  --f-display:"Marcellus", "Cormorant Garamond", Georgia, serif;
  --f-body:"Questrial", "Helvetica Neue", Arial, sans-serif;
  --f-script:"Pinyon Script", "Snell Roundhand", cursive;
  --f-mono:"Courier Prime", "Courier New", monospace;
  --wrap:1180px;
  --gutter-l:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--linen);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.12;text-wrap:balance;margin:0;color:var(--bark)}
p{margin:0}
.eyebrow{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--olive)}
.script{font-family:var(--f-script);font-weight:400;color:var(--olive);line-height:1}

/* Header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.brand img{height:52px;width:auto}
.nav{display:flex;gap:28px;align-items:center}
.nav a{text-decoration:none;font-size:.95rem;color:var(--bark)}
.nav a:hover{color:var(--olive)}
.nav a.btn-solid,.nav a.btn-solid:hover{color:var(--paper)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;text-decoration:none;font-family:var(--f-body);font-size:.95rem;border:1.5px solid var(--olive);transition:background .2s,color .2s}
.btn-solid{background:var(--olive);color:var(--paper)}
.btn-solid:hover{background:var(--olive-deep);border-color:var(--olive-deep)}
.btn-ghost{color:var(--olive);background:transparent}
.btn-ghost:hover{background:var(--olive);color:var(--paper)}
.btn svg{width:18px;height:18px;flex:none}
.menu-toggle{display:none;background:none;border:0;padding:8px;color:var(--bark);cursor:pointer}
.menu-toggle svg{width:26px;height:26px}

/* Hero */
.hero{position:relative;overflow:hidden;padding-block:72px 96px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:24px;min-width:0;position:relative;z-index:2}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.6rem);color:var(--ink)}
.hero h1 .script{display:block;font-size:1.15em;margin-top:.1em}
.hero-lede{font-size:1.12rem;color:var(--muted);max-width:34em}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-facts{display:flex;flex-wrap:wrap;gap:28px;padding-top:12px;border-top:1px solid var(--line);margin-top:8px}
.hero-facts div{display:flex;flex-direction:column}
.hero-facts b{font-family:var(--f-display);font-weight:400;font-size:1.6rem;color:var(--bark)}
.hero-facts span{font-size:.85rem;color:var(--muted)}
.hero-visual{position:relative;padding:8px 0 28px;min-width:0}
.arch{position:relative;width:100%;max-width:420px;margin:0 auto;aspect-ratio:4/5;border-radius:999px 999px 28px 28px;overflow:hidden;background:var(--olive-soft);box-shadow:0 30px 60px rgba(60,50,30,.22)}
.arch video,.arch img{width:100%;height:100%;object-fit:cover;display:block}
.arch::after{content:"";position:absolute;inset:10px;border-radius:inherit;border:1.5px solid color-mix(in srgb,var(--paper) 70%,transparent);pointer-events:none}
.hero-card{position:absolute;left:0;bottom:0;width:38%;max-width:190px;margin:0;background:var(--paper);padding:8px 8px 10px;border-radius:14px;box-shadow:0 16px 32px rgba(60,50,30,.22);transform:rotate(-5deg)}
.hero-card img{border-radius:8px;aspect-ratio:1/1;object-fit:cover;width:100%;height:auto}
.hero-card figcaption{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bark);text-align:center;padding-top:6px}
.hero-visual .badge{position:absolute;right:2%;top:6%;background:var(--sun);color:var(--bark);width:112px;height:112px;border-radius:50%;display:grid;place-content:center;text-align:center;font-family:var(--f-display);font-size:1.05rem;line-height:1.15;transform:rotate(8deg);box-shadow:0 10px 24px rgba(60,50,30,.18)}
.hero-visual .badge small{display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.deco-branch{position:absolute;pointer-events:none;opacity:.85}

/* Intro */
.intro{padding-block:88px;background:var(--paper);border-block:1px solid var(--line)}
.intro .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.intro h2{font-size:clamp(2rem,3.4vw,2.8rem)}
.intro-text{display:flex;flex-direction:column;gap:18px;color:var(--muted);min-width:0}
.intro .wrap + .wrap{display:block}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;border-top:1px solid var(--line)}
.pillar{padding:28px 28px 0 0;display:flex;flex-direction:column;gap:10px}
.pillar + .pillar{padding-left:28px;border-left:1px solid var(--line)}
.pillar h3{font-size:1.35rem}
.pillar p{color:var(--muted);font-size:.98rem}
.pillar svg{width:34px;height:34px;color:var(--olive)}

/* Speisekarte */
.menu{background:var(--olive);color:var(--paper);padding-block:96px;position:relative;overflow:hidden}
.menu h2,.menu h3{color:var(--paper)}
.menu .eyebrow{color:var(--sun)}
.menu-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.menu-head h2{font-size:clamp(2.4rem,4.6vw,3.8rem)}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{font-family:var(--f-mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;padding:10px 18px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--paper) 45%,transparent);background:transparent;color:var(--paper);cursor:pointer}
.tab[aria-selected="true"]{background:var(--paper);color:var(--olive-deep);border-color:var(--paper)}
.menu-card{background:var(--paper);color:var(--ink);border-radius:18px;padding:40px 44px;box-shadow:0 30px 60px rgba(20,25,10,.25)}
.menu-panel{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
.dish{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding-block:18px;border-bottom:1px dashed var(--line);align-items:baseline}
.dish h3{font-family:var(--f-mono);font-weight:700;font-size:1.02rem;letter-spacing:.05em;text-transform:uppercase;color:var(--bark);min-width:0}
.dish .price{font-family:var(--f-display);font-size:1.4rem;color:var(--olive-deep);font-variant-numeric:tabular-nums;white-space:nowrap}
.dish .desc{grid-column:1/-1;font-size:.92rem;color:var(--muted)}
.dish .opt{grid-column:1/-1;display:flex;justify-content:space-between;font-size:.86rem;color:var(--muted);font-family:var(--f-mono)}
.tag{display:inline-block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--olive-soft);color:var(--olive-deep);margin-left:8px;vertical-align:2px}
.tag.sun{background:var(--sun);color:var(--bark)}
.menu-note{margin-top:22px;font-size:.88rem;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between}
.menu .deco-branch{width:320px;right:-70px;top:-40px;opacity:.25;filter:brightness(2) saturate(0)}

/* Catering */
.catering{padding-block:104px}
.catering .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.cat-photo{border-radius:18px;overflow:hidden;aspect-ratio:4/5;max-width:100%;position:relative}
.cat-photo img{width:100%;height:100%;object-fit:cover}
.cat-photo figcaption{position:absolute;left:16px;bottom:16px;background:var(--paper);color:var(--bark);font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.cat-copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.cat-copy h2{font-size:clamp(2.2rem,4vw,3.4rem)}
.cat-copy > p{color:var(--muted);max-width:36em}
.platters{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:6px}
.platter{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px 24px 18px}
.platter h3{font-size:1.45rem;margin-bottom:12px}
.platter table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.platter td{padding:9px 0;border-top:1px solid var(--line);font-size:.95rem}
.platter td:last-child{text-align:right;font-family:var(--f-display);font-size:1.2rem;color:var(--olive-deep)}
.platter td small{color:var(--muted)}

/* Aus unserer Küche */
.kitchen{background:var(--paper);border-block:1px solid var(--line);padding-block:96px}
.kitchen-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.kitchen-head h2{font-size:clamp(2.2rem,4vw,3.4rem)}
.kitchen-head p{color:var(--muted);max-width:30em}
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}
.reel{margin:0;position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/5;max-height:420px;width:100%;background:var(--olive-soft)}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.reel figcaption{position:absolute;left:14px;bottom:14px;background:var(--paper);color:var(--bark);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,17%,210px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.gallery figure{margin:0;scroll-snap-align:start;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/5;background:var(--olive-soft);transition:box-shadow .3s}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery figure:hover{box-shadow:0 14px 28px rgba(60,50,30,.18)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{position:absolute;inset:auto 0 0;padding:24px 10px 9px;background:linear-gradient(transparent,rgba(30,25,15,.65));color:#fff;font-size:.82rem;line-height:1.3}
.gal-nav{display:flex;gap:8px}
.gal-btn{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--olive);background:transparent;color:var(--olive);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s}
.gal-btn:hover{background:var(--olive);color:var(--paper)}
.gal-btn svg{width:18px;height:18px}
.gal-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:8px 0 14px}
.gal-head span{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.insta-cta{display:flex;justify-content:center;margin-top:16px}

/* Kontakt */
.contact{padding-block:104px}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:stretch}
.contact h2{font-size:clamp(2.2rem,4vw,3.4rem);margin-bottom:28px}
.contact-list{display:flex;flex-direction:column;gap:0;list-style:none;padding:0;margin:0}
.contact-list li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;padding-block:18px;border-top:1px solid var(--line)}
.contact-list li:last-child{border-bottom:1px solid var(--line)}
.ico{width:44px;height:44px;border-radius:50%;background:var(--olive);color:var(--paper);display:grid;place-items:center}
.ico svg{width:20px;height:20px}
.contact-list .k{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.contact-list .v{font-size:1.15rem;color:var(--ink)}
.contact-list a.v{text-decoration:none;border-bottom:1px solid var(--line)}
.contact-list a.v:hover{border-color:var(--olive)}
.hours{display:grid;grid-template-columns:auto 1fr;gap:4px 24px;font-variant-numeric:tabular-nums;margin-top:4px}
.hours dt{color:var(--muted)}
.hours dd{margin:0}
.visit{background:var(--olive-deep);color:var(--paper);border-radius:18px;padding:44px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;position:relative;overflow:hidden;min-width:0}
.visit h3{color:var(--paper);font-size:2rem}
.visit p{color:color-mix(in srgb,var(--paper) 80%,transparent)}
.visit .script{color:var(--sun);font-size:3rem}
.visit .btn{border-color:var(--paper);color:var(--paper)}
.visit .btn:hover{background:var(--paper);color:var(--olive-deep)}
.visit .btn-solid{background:var(--paper);color:var(--olive-deep)}
.visit .btn-solid:hover{background:var(--sun);border-color:var(--sun)}
.visit .deco-branch{width:240px;right:-40px;bottom:-40px;opacity:.3;transform:rotate(-30deg)}
.visit .row{display:flex;flex-wrap:wrap;gap:12px;position:relative}

/* Footer */
footer{background:var(--bark);color:color-mix(in srgb,var(--paper) 75%,transparent);padding-block:44px;font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--paper)}
footer .script{color:var(--paper);font-size:2.2rem}


/* ===== Mediterrane Animationen ===== */
:root{--olive-green:#8a9a3c;--leaf:#5f6f38;--leaf-light:#93a06c;--olive-black:#2b2430}
.scroll-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--olive);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.top{transition:box-shadow .3s ease}
.top .wrap{transition:min-height .3s ease}
.brand img{transition:height .3s ease}
.top.scrolled{box-shadow:0 8px 24px rgba(60,50,30,.08)}
.top.scrolled .wrap{min-height:60px}
.top.scrolled .brand img{height:42px}

.hero-deco{position:absolute;inset:0;pointer-events:none;z-index:1}
.float-olive{position:absolute;width:var(--s,26px);height:auto;will-change:transform}
.float-olive svg{display:block;width:100%;height:auto;animation:bob var(--t,6s) ease-in-out infinite;animation-delay:var(--dl,0s);filter:drop-shadow(0 6px 8px rgba(40,35,20,.18))}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-10px) rotate(calc(var(--r,0deg) + 8deg))}}

.branch{position:absolute;pointer-events:none;z-index:3;overflow:visible;will-change:transform}
.branch-a{width:min(68%,330px);top:-8%;left:-8%}
.branch-b{width:min(48%,240px);right:-8%;bottom:0}
.branch .wood{fill:url(#gWood)}
.branch .bark-hl{fill:none;stroke:#a68c6c;stroke-width:.8;opacity:.5}
.branch .grow{fill:none;stroke:#fff;stroke-width:16;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s cubic-bezier(.5,0,.2,1) .15s forwards}
.branch .grow.g2{animation-delay:.75s;animation-duration:.9s}
.branch .grow.g3{animation-delay:.95s;animation-duration:.9s}
.branch .grow.g4{animation-delay:.55s;animation-duration:.8s}
.branch .pedicel{fill:none;stroke:#6a5a3c;stroke-width:1.1;stroke-linecap:round;opacity:0;animation:fade .4s ease 1.8s forwards}
.branch .leaf{fill:url(#gLeafTop)}
.branch .leaf.u{fill:url(#gLeafUnder)}
.branch .rib{fill:none;stroke:#d9dec5;stroke-width:.7;opacity:.55}
.branch .leaf.u + .rib{stroke:#f4f5ec;opacity:.8}
.branch .lf{transform-box:fill-box;transform-origin:0% 50%;transform:scale(0) rotate(-20deg);animation:leaf .8s cubic-bezier(.3,1.4,.5,1) forwards;animation-delay:var(--d)}
.branch .ol{transform-box:fill-box;transform-origin:50% 0%;transform:scale(0);animation:pop .6s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:var(--d)}
.branch{filter:drop-shadow(0 8px 10px rgba(40,35,20,.18))}
@keyframes fade{to{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes leaf{to{transform:scale(1) rotate(0)}}
@keyframes pop{to{transform:scale(1)}}
.sway{transform-origin:15% 90%;animation:sway 7s ease-in-out 2.2s infinite}
.branch-b .sway{transform-origin:90% 80%;animation-duration:8s}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.5deg)}}

.hero-copy > *{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-copy > *:nth-child(2){animation-delay:.12s}
.hero-copy > *:nth-child(3){animation-delay:.24s}
.hero-copy > *:nth-child(4){animation-delay:.36s}
.hero-copy > *:nth-child(5){animation-delay:.48s}
.arch{animation:arch-in 1.2s cubic-bezier(.2,.7,.2,1) both}
.hero-card{animation:card-in 1s cubic-bezier(.2,.7,.2,1) .5s both}
@keyframes rise{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
@keyframes arch-in{from{clip-path:inset(100% 0 0 0 round 999px 999px 28px 28px)}to{clip-path:inset(0 0 0 0 round 999px 999px 28px 28px)}}
@keyframes card-in{from{transform:translateY(30px) rotate(-12deg);opacity:0}to{transform:rotate(-5deg);opacity:1}}
.hero-visual .badge{animation:badge-in .8s cubic-bezier(.3,1.6,.5,1) 1.2s both}
@keyframes badge-in{from{transform:scale(0) rotate(-30deg)}to{transform:scale(1) rotate(8deg)}}
.parallax{will-change:transform}

/* Scroll-Effekte (nur Browser mit Scroll-Timeline, sonst statisch) */
@supports (animation-timeline: view()){
  .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
  .dish{animation:slide linear both;animation-timeline:view();animation-range:entry 0% cover 20%}
  @keyframes reveal{from{transform:translateY(48px) scale(.97);opacity:.55}to{transform:none;opacity:1}}
  @keyframes zoom{from{transform:scale(1.12)}to{transform:scale(1)}}
  @keyframes slide{from{transform:translateX(-14px);opacity:.6}to{transform:none;opacity:1}}
}
@media (max-width: 760px){
  .branch-a{width:52%;left:-6%}
  .branch-b{width:38%}
  .float-olive.hide-sm{display:none}
}
@media (prefers-reduced-motion: reduce){
  .branch .grow{stroke-dashoffset:0}.branch .pedicel{opacity:1}
  .branch .lf,.branch .ol{transform:none}
  .hero-copy > *,.arch,.hero-card,.hero-visual .badge{opacity:1}
}

/* Allergen-Hinweis */
.allergy{margin-top:28px;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;background:var(--sun);color:var(--bark);border-radius:18px;padding:24px 28px;box-shadow:0 20px 40px rgba(20,25,10,.22);position:relative;overflow:hidden}
.allergy .a-ico{width:58px;height:58px;border-radius:50%;background:var(--paper);display:grid;place-items:center;color:var(--olive-deep);flex:none}
.allergy .a-ico svg{width:30px;height:30px}
.allergy h3{font-family:var(--f-display);color:var(--bark);font-size:1.5rem;margin:0 0 4px}
.allergy p{margin:0;color:var(--bark);max-width:46em;min-width:0}
.allergy .btn{border-color:var(--bark);color:var(--bark);white-space:nowrap}
.allergy .btn:hover{background:var(--bark);color:var(--sun)}
.allergy.pre{transform:translateX(-110%) rotate(-2deg);opacity:0}
.allergy.in{transition:transform 1s cubic-bezier(.2,.9,.25,1.05),opacity .6s ease;transform:none;opacity:1}
.allergy.in .a-ico{animation:wiggle 1s ease .9s}
.allergy.in .a-text > *{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.allergy.in .a-text p{animation-delay:.55s}
.allergy.in .a-text h3{animation-delay:.4s}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-5deg)}}
@media (max-width:760px){.allergy{grid-template-columns:1fr;gap:14px;padding:22px 20px}.allergy .a-ico{width:46px;height:46px}.allergy .a-ico svg{width:24px;height:24px}.allergy .btn{justify-content:center}}
@media (prefers-reduced-motion: reduce){.allergy.pre{transform:none;opacity:1}}

/* Responsive */
@media (max-width: 960px){
  .hero .wrap,.intro .wrap,.catering .wrap,.contact .wrap{grid-template-columns:1fr}
  .hero{padding-block:40px 64px}
  .hero-visual{max-width:520px;margin:0 auto;width:100%}
  .menu-panel{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .pillar,.pillar + .pillar{padding:22px 0;border-left:0;border-bottom:1px solid var(--line)}
  .cat-photo{aspect-ratio:16/10}
  .reels{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}
@media (max-width: 760px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px var(--gutter-r) 16px var(--gutter-l)}
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:12px;justify-content:center}
  .menu-toggle{display:block}
  .menu-card{padding:24px 20px}
  .platters{grid-template-columns:1fr}
  .reels{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .reel{scroll-snap-align:start}
  .gallery{grid-auto-columns:42%}
  .hero-visual .badge{width:92px;height:92px;font-size:.9rem}
  .visit{padding:32px 24px}
}