/* ============================================================
   LA FAMIGLIA — "Dalla Brace / Aus der Glut"
   Dark-fire appetite-first restaurant. Bodolz am Bodensee.
   ============================================================ */

:root{
  --base:#1A120B;      /* charred oven mouth / page bg */
  --surface:#241811;   /* cards, menu slab, footer */
  --surface-2:#2C1E15; /* one notch up */
  --ember:#E0531E;     /* primary accent (decorative fills/borders) */
  --ember-ink:#C9430F; /* darker ember for button bg behind dark text (AA) */
  --flame:#F2A13B;     /* secondary accent / gradient partner */
  --terra:#A8543A;     /* dividers, secondary borders */
  --terra-lit:#D08A5E; /* eyebrow / small-text terra that clears AA on dark */
  --crema:#F3E7D3;     /* primary type on dark */
  --basil:#5E7D4F;     /* cool note (decorative) */
  --basil-lit:#8AB079; /* basil for small text / GF tags (AA on dark) */
  --tomato:#C0392B;    /* italian-red accent */
  --tomato-lit:#E0584A;/* brighter tomato for small accents */
  --smoke:#9A8569;     /* muted secondary text / placeholders */

  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --serif:'Piazzolla',Georgia,serif;
  --body:'Inter Tight',system-ui,sans-serif;

  --maxw:1180px;
  --rail:clamp(34px,4vw,58px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--base);
  color:var(--crema);
  font-family:var(--body);
  font-size:clamp(1rem,.97rem + .2vw,1.05rem);
  line-height:1.65;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

::selection{background:var(--ember);color:var(--base)}

.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--ember);color:var(--base);
  padding:.7rem 1.1rem;border-radius:0 0 .6rem 0;font-weight:600}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--flame);outline-offset:3px;border-radius:3px}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--body);
  text-transform:uppercase;letter-spacing:.22em;
  font-size:.72rem;font-weight:600;
  color:var(--terra-lit);margin:0 0 1rem;
  display:inline-flex;align-items:center;gap:.5rem;
}
/* small basil leaf glyph before each eyebrow — quiet Italian note */
.eyebrow::before{
  content:"";width:11px;height:11px;flex:none;border-radius:0 60% 0 60%;
  background:var(--basil-lit);transform:rotate(-12deg);
  box-shadow:inset -1px -1px 0 rgba(0,0,0,.18);
}
.h2{
  font-family:var(--display);
  font-weight:800;line-height:.98;letter-spacing:-.02em;
  font-size:clamp(2.1rem,1.4rem + 3vw,3.6rem);
  margin:0 0 1.2rem;color:var(--crema);
}
.h3{
  font-family:var(--display);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.4rem,1.1rem + 1.3vw,2rem);margin:0;
}
p{margin:0 0 1.1rem;max-width:58ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--body);font-weight:600;font-size:.96rem;
  padding:.85rem 1.5rem;border-radius:999px;
  border:1px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease),color .25s;
  will-change:transform;
}
.btn--ember{
  background:var(--ember);color:#160E07;font-weight:700;
  box-shadow:0 6px 24px -8px rgba(224,83,30,.6);
}
.btn--ember:hover{
  background:linear-gradient(100deg,var(--flame),#FFC36B);
  color:#160E07;
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 10px 32px -8px rgba(242,161,59,.7);
}
.btn--ghost{
  background:transparent;color:var(--crema);
  border-color:rgba(168,84,58,.6);
}
.btn--ghost:hover{border-color:var(--flame);color:var(--flame);transform:translateY(-2px)}

/* ============================================================
   OVEN RAIL (left spine)
   ============================================================ */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);
  z-index:40;pointer-events:none;
  display:none;
  border-right:1px solid rgba(168,84,58,.32);
  background:linear-gradient(180deg,rgba(36,24,17,.0),rgba(36,24,17,.55));
}
@media (min-width:1080px){.rail{display:block}}
.rail__glow{
  position:absolute;left:-1px;width:2px;height:160px;top:30%;
  background:linear-gradient(180deg,transparent,var(--ember),transparent);
  filter:blur(1px);transition:top .6s var(--ease),opacity .5s;
  box-shadow:0 0 18px 2px rgba(224,83,30,.55);
}
.rail__icon{
  position:absolute;left:50%;top:24px;transform:translateX(-50%);
  width:24px;height:24px;color:var(--flame);opacity:.85;
  transition:opacity .4s;
}
.rail__icon svg{width:100%;height:100%;display:block}
.rail__text{
  position:absolute;bottom:26px;left:50%;
  transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-family:var(--body);text-transform:uppercase;
  letter-spacing:.28em;font-size:.6rem;color:var(--smoke);
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.9rem clamp(1rem,3vw,2.2rem);
  transition:background .4s var(--ease),backdrop-filter .4s,box-shadow .4s,padding .3s;
}
.nav.is-stuck{
  background:rgba(26,18,11,.86);
  backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 1px 0 rgba(168,84,58,.25);
  padding-top:.65rem;padding-bottom:.65rem;
}
@media (min-width:1080px){.nav{padding-left:calc(var(--rail) + 1.4rem)}}

.brand{display:flex;align-items:center;gap:.55rem}
.brand__leaf{width:26px;height:26px;flex:none}
.brand__name{
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:1.15rem;color:var(--crema);
}

.nav__links{display:none;gap:1.6rem}
@media (min-width:960px){.nav__links{display:flex}}
.nav__links a{
  font-size:.92rem;color:var(--crema);position:relative;padding:.2rem 0;opacity:.86;
  transition:opacity .25s,color .25s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:linear-gradient(90deg,var(--ember),var(--flame));
  transition:right .3s var(--ease);border-radius:2px;
}
.nav__links a:hover,.nav__links a.is-active{opacity:1;color:var(--flame)}
.nav__links a:hover::after,.nav__links a.is-active::after{right:0}

.nav__right{display:flex;align-items:center;gap:.8rem}

.status{
  display:none;align-items:center;gap:.45rem;
  font-family:var(--body);text-transform:uppercase;letter-spacing:.12em;
  font-size:.66rem;font-weight:600;color:var(--smoke);
  padding:.35rem .7rem;border:1px solid rgba(168,84,58,.4);border-radius:999px;
}
@media (min-width:760px){.status{display:inline-flex}}
.status__dot{width:8px;height:8px;border-radius:50%;background:var(--smoke);flex:none}
.status.is-open .status__dot{background:var(--basil);box-shadow:0 0 0 0 rgba(94,125,79,.6);animation:pulse 2.4s infinite}
.status.is-open .status__text{color:var(--crema)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(94,125,79,.55)}70%{box-shadow:0 0 0 7px rgba(94,125,79,0)}100%{box-shadow:0 0 0 0 rgba(94,125,79,0)}}

.nav__cta{display:none}
@media (min-width:560px){.nav__cta{display:inline-flex;padding:.6rem 1.1rem;font-size:.85rem}}

.nav__burger{
  display:flex;flex-direction:column;gap:5px;justify-content:center;
  width:44px;height:44px;background:transparent;border:1px solid rgba(168,84,58,.45);
  border-radius:10px;cursor:pointer;padding:0 11px;
}
@media (min-width:960px){.nav__burger{display:none}}
.nav__burger span{height:2px;background:var(--crema);border-radius:2px;transition:transform .3s,opacity .25s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile menu */
.mnav{
  position:fixed;inset:0;z-index:55;
  background:rgba(26,18,11,.97);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;justify-content:center;
  gap:.4rem;padding:5rem 2rem 2rem;
}
.mnav[hidden]{display:none}
.mnav a{
  font-family:var(--display);font-weight:700;font-size:1.7rem;
  color:var(--crema);padding:.55rem 0;border-bottom:1px solid rgba(168,84,58,.2);
}
.mnav a:last-child{border:none;margin-top:1rem;font-family:var(--body);font-size:1rem;align-self:flex-start}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:7rem clamp(1.2rem,5vw,3rem) 5rem;
  overflow:hidden;isolation:isolate;
}
@media (min-width:1080px){.hero{padding-left:calc(var(--rail) + clamp(1.2rem,5vw,3.5rem))}}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 32%;
  filter:saturate(1.1) contrast(1.06) brightness(.94)}
.hero__vignette{
  position:absolute;inset:0;
  /* lighter centre so the pinsa stays crave-worthy; only edges darken for legibility */
  background:
    radial-gradient(125% 95% at 50% 40%,transparent 0%,rgba(26,18,11,.18) 52%,rgba(26,18,11,.74) 100%),
    linear-gradient(180deg,rgba(26,18,11,.58) 0%,transparent 26%,transparent 60%,rgba(26,18,11,.80) 100%);
}
.hero__vignette::after{
  /* warm ember glow only in corners, screen-blended, food stays vivid */
  content:"";position:absolute;inset:0;
  background:radial-gradient(55% 38% at 6% 94%,rgba(224,83,30,.30),transparent 60%),
            radial-gradient(48% 36% at 96% 6%,rgba(242,161,59,.20),transparent 60%);
  mix-blend-mode:screen;
}
/* "aus der Glut" — ember breathing up from below the hero food */
.hero__ember{
  position:absolute;left:0;right:0;bottom:-12%;height:60%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 80% at 50% 100%,rgba(224,83,30,.34),rgba(242,161,59,.10) 42%,transparent 72%);
  mix-blend-mode:screen;animation:emberBreathe 5.5s ease-in-out infinite;
}
@keyframes emberBreathe{0%,100%{opacity:.55;transform:translateY(6px) scale(1)}50%{opacity:1;transform:translateY(0) scale(1.04)}}
.sparks{position:absolute;inset:0;z-index:-1;pointer-events:none}

.hero__inner{position:relative;max-width:18ch}
.hero__eyebrow{
  font-family:var(--body);text-transform:uppercase;letter-spacing:.3em;
  font-size:.78rem;font-weight:600;color:var(--flame);margin:0 0 1.1rem;
}
.hero__title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(4rem,2.2rem + 13vw,9rem);
  line-height:.86;letter-spacing:-.035em;margin:0;
  text-transform:lowercase;color:var(--crema);
  text-shadow:0 4px 40px rgba(0,0,0,.5);
}
.flame{
  position:relative;
  /* living-coal read: dark ember -> bright flame -> dark ember */
  background:linear-gradient(95deg,#B5360C 0%,var(--ember) 28%,#FFC152 52%,var(--ember) 74%,#B5360C 100%);
  background-size:230% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:shimmer 4.2s ease-in-out infinite;
}
/* keep the period in crema so only the word burns */
.flame .dot{
  -webkit-text-fill-color:var(--crema);color:var(--crema);
  -webkit-background-clip:initial;background-clip:initial;background:none;
}
@keyframes shimmer{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.hero__claim{
  font-family:var(--serif);font-size:clamp(1.05rem,.95rem + .7vw,1.4rem);
  color:var(--crema);margin:1.4rem 0 2rem;max-width:30ch;
}
.hero__claim em{font-style:italic}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem}

.hero__new{
  position:absolute;left:clamp(1.2rem,5vw,3rem);bottom:1.6rem;
  font-size:.78rem;letter-spacing:.04em;color:var(--smoke);margin:0;
}
@media (min-width:1080px){.hero__new{left:calc(var(--rail) + clamp(1.2rem,5vw,3.5rem))}}

.hero__cue{
  position:absolute;right:clamp(1.2rem,5vw,3rem);bottom:1.6rem;
  width:26px;height:42px;border:1px solid rgba(243,231,211,.4);border-radius:14px;
  display:none;
}
@media (min-width:760px){.hero__cue{display:block}}
.hero__cue span{
  position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;
  background:var(--flame);animation:cue 1.8s var(--ease) infinite;
  box-shadow:0 0 8px var(--ember);
}
@keyframes cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}80%{transform:translateY(16px);opacity:0}100%{opacity:0}}

/* ---- mobile hero: sell the food + name, give the stack room ---- */
@media (max-width:560px){
  /* a touch shorter than full svh so there's no giant empty pinsa band below the CTAs */
  .hero{min-height:92svh;padding-top:7rem;padding-bottom:5.5rem;justify-content:center}
  /* keep the topping/centre of the pinsa in frame on the tall mobile crop */
  .hero__bg img{object-position:center 42%;filter:saturate(1.12) contrast(1.06) brightness(.98)}
  /* stronger, narrower scrim behind the text so the headline + claim stay legible
     while the pinsa below the fold stays bright and crave-worthy */
  .hero__vignette{
    background:
      linear-gradient(180deg,rgba(26,18,11,.78) 0%,rgba(26,18,11,.42) 30%,transparent 56%,transparent 70%,rgba(26,18,11,.88) 100%),
      radial-gradient(140% 80% at 30% 30%,rgba(26,18,11,.30),transparent 60%);
  }
  .hero__inner{max-width:none}
  .hero__title{text-shadow:0 3px 28px rgba(0,0,0,.7)}
  .hero__eyebrow{margin-bottom:1rem}
  .hero__claim{margin:1.2rem 0 2rem;max-width:24ch;text-shadow:0 2px 14px rgba(0,0,0,.6)}
  .hero__actions{gap:.7rem}
  .hero__actions .btn{flex:1 1 auto;min-width:0;min-height:48px}
  /* keep the 'Neu in Bodolz' line clear of the CTAs on short viewports */
  .hero__new{bottom:1.1rem;font-size:.72rem;max-width:80%}
}

/* ============================================================
   OVEN STRIP (marquee)
   ============================================================ */
.strip{
  position:relative;overflow:hidden;
  background:var(--surface);
  border-top:1px solid rgba(168,84,58,.3);
  border-bottom:1px solid rgba(168,84,58,.3);
  padding:1.1rem 0;
}
.strip__mouth{
  position:absolute;left:50%;top:0;bottom:0;width:48%;transform:translateX(-50%);
  background:radial-gradient(60% 120% at 50% 50%,rgba(242,161,59,.30),rgba(224,83,30,.12) 45%,transparent 78%);
  pointer-events:none;z-index:1;
}
.strip__track{display:flex;width:max-content;will-change:transform;animation:drift 40s linear infinite}
.strip:hover .strip__track{animation-play-state:paused}
.strip__set{display:flex;align-items:center;flex:none}
.strip__set span{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1rem,.9rem + .8vw,1.5rem);
  color:var(--terra-lit);padding:0 1.4rem;white-space:nowrap;
}
.strip__set i{color:var(--flame);font-style:normal;opacity:.85}
/* center words glow via mask gradient overlay */
.strip::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--surface) 0%,transparent 18%,transparent 82%,var(--surface) 100%);
}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   LAYOUT WRAP for content sections
   ============================================================ */
.about,.gal,.menu,.feiern{
  position:relative;
  padding:clamp(4rem,8vw,7.5rem) clamp(1.2rem,5vw,3rem);
}
@media (min-width:1080px){
  .about,.gal,.menu,.feiern{padding-left:calc(var(--rail) + clamp(1.2rem,5vw,3.5rem))}
}
/* heat-gradient divider at the TOP of each section (opens on embers) */
.about::before,.gal::before,.menu::before,.feiern::before{
  content:"";position:absolute;top:0;left:0;right:0;height:150px;pointer-events:none;z-index:0;
  background:radial-gradient(70% 100% at 50% 0%,rgba(224,83,30,.10),transparent 72%);
}
/* and a matching ember seam at the BOTTOM (closes on embers) — sustains the oven rhythm */
.about::after,.gal::after,.menu::after,.feiern::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:130px;pointer-events:none;z-index:0;
  background:radial-gradient(60% 100% at 50% 100%,rgba(224,83,30,.09),rgba(242,161,59,.03) 45%,transparent 72%);
}
.about>*,.gal>*,.menu>*,.feiern>*{position:relative;z-index:1}

.sec-head{max-width:var(--maxw);margin:0 auto 2.6rem}

/* ============================================================
   ÜBER UNS
   ============================================================ */
.about{
  display:grid;grid-template-columns:1fr;gap:2.4rem;align-items:center;align-content:start;
  max-width:1320px;margin:0 auto;
}
@media (min-width:880px){
  .about{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-content:center}
}
.about__text{max-width:54ch}
.about__quote em{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.2rem,1rem + 1vw,1.6rem);
  color:var(--flame);display:block;line-height:1.4;
  padding:.6rem 0 .6rem 1.1rem;border-left:2px solid var(--ember);margin:1.4rem 0;
}
.about__quote{max-width:none}
.about__sign{display:flex;align-items:center;gap:.5rem;font-family:var(--serif);font-style:italic;color:var(--basil-lit);margin:1.6rem 0 0;font-size:1.1rem}
.about__media{position:relative}
.about__media img{
  width:100%;height:auto;border-radius:14px;
  aspect-ratio:16/9;object-fit:cover;
  filter:saturate(1.05) brightness(.9) contrast(1.05);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}
@media (min-width:880px){
  .about__media{margin-right:clamp(-3rem,-4vw,-1rem)}
  .about__media img{border-radius:14px 0 0 14px}
}
.about__rim{
  position:absolute;inset:0;border-radius:14px;pointer-events:none;
  box-shadow:inset 0 0 60px 10px rgba(26,18,11,.5);
  background:radial-gradient(60% 50% at 100% 50%,rgba(224,83,30,.16),transparent 60%);
}

/* ============================================================
   GALERIE — staggered plating
   ============================================================ */
.gal{max-width:1320px;margin:0 auto}
.gal__grid{
  display:grid;gap:clamp(.8rem,2vw,1.4rem);
  grid-template-columns:repeat(2,1fr);
  max-width:var(--maxw);margin:0 auto;
}
@media (min-width:760px){
  .gal__grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr}
}
.gal__item{
  position:relative;margin:0;border-radius:12px;overflow:hidden;
  background:var(--surface);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.85);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.gal__item img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;
  filter:saturate(1.04) brightness(.92) contrast(1.04);
  transition:transform .6s var(--ease),filter .4s;
}
.gal__item--big{grid-column:span 2}
@media (min-width:760px){
  .gal__item--big{grid-column:span 2;grid-row:span 2}
  .gal__item--big img{aspect-ratio:auto}
  .gal__item:nth-child(3){margin-top:clamp(0px,2vw,28px)}
  .gal__item:nth-child(5){margin-top:clamp(0px,2vw,28px)}
}
.gal__item figcaption{
  position:absolute;left:0;right:0;bottom:0;
  font-family:var(--serif);font-style:italic;font-size:.92rem;color:var(--crema);
  padding:1.4rem .9rem .8rem;
  background:linear-gradient(0deg,rgba(26,18,11,.92),transparent);
}
/* featured hero-tile caption reads like a plated special */
.gal__item figcaption.is-feature{
  font-style:normal;font-family:var(--display);font-weight:700;
  font-size:clamp(1.05rem,.9rem + .8vw,1.5rem);line-height:1.1;
  padding:2.2rem 1.2rem 1.1rem;
  background:linear-gradient(0deg,rgba(26,18,11,.95),rgba(26,18,11,.4) 55%,transparent);
}
.cap-kicker{
  display:block;font-family:var(--body);font-style:normal;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;font-size:.66rem;
  color:var(--flame);margin-bottom:.35rem;
}
.gal__item::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(60% 60% at 50% 45%,rgba(224,83,30,.28),transparent 65%);
  transition:opacity .4s;mix-blend-mode:screen;
}
@media (hover:hover){
  .gal__item:hover{transform:translateY(-4px);box-shadow:0 26px 50px -20px rgba(224,83,30,.4)}
  .gal__item:hover img{transform:scale(1.05)}
  .gal__item:hover::after{opacity:1}
}

/* ============================================================
   SPEISEKARTE
   ============================================================ */
.menu{max-width:none;margin:0;background:var(--surface)}
.menu>*{max-width:1320px;margin-inline:auto}
.menu__note{font-size:.9rem;color:var(--smoke);max-width:60ch;margin:0 auto;text-align:center}
.sec-head{text-align:center}
.sec-head .eyebrow{color:var(--terra)}

/* signature popeye — half-out-of-grid */
.signature{
  position:relative;max-width:760px;margin:0 auto 3rem;
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--surface-2),var(--surface));
  border:1.5px solid var(--ember);border-radius:18px;
  padding:1.6rem 1.6rem 1.6rem 1.4rem;
  box-shadow:0 0 0 1px rgba(224,83,30,.15),0 30px 60px -30px rgba(224,83,30,.45),inset 0 0 50px rgba(224,83,30,.06);
}
.signature::before{
  content:"";position:absolute;inset:-2px;border-radius:20px;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 80% at 30% 50%,rgba(224,83,30,.3),transparent 60%);
  filter:blur(14px);opacity:.7;
}
.signature__seal{flex:none;width:84px;height:84px;color:var(--ember)}
.signature__seal svg{width:100%;height:100%}
.signature__sealtext{font-family:var(--body);font-size:7px;letter-spacing:.08em;fill:var(--flame);fill-opacity:.7;text-transform:uppercase}
.signature__price{font-family:var(--serif);font-size:28px;fill:var(--ember);text-anchor:middle;font-weight:600}
.signature__body{flex:1 1 200px;min-width:0}
.signature__tag{
  font-family:var(--body);text-transform:uppercase;letter-spacing:.2em;
  font-size:.66rem;font-weight:600;color:var(--flame);margin:0 0 .25rem;
}
.signature__name{font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:clamp(1.6rem,1.3rem + 1.6vw,2.4rem);margin:0;color:var(--crema)}
.signature__desc{font-size:.95rem;color:var(--crema);margin:.2rem 0 .35rem;max-width:none}
.signature__gf{font-size:.78rem;color:var(--basil-lit);margin:0;display:inline-flex;align-items:center;gap:.4rem}
.signature__gf::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--basil-lit)}
.signature__chip{
  font-family:var(--serif);font-weight:600;font-size:1.5rem;margin:0;
  background:var(--ember);color:#1A120B;padding:.35rem 1rem;border-radius:999px;
  box-shadow:0 6px 20px -6px rgba(224,83,30,.6);
}

/* menu columns */
.menu__cols{
  max-width:var(--maxw);margin:0 auto;
  column-count:1;column-gap:clamp(2rem,5vw,4rem);
}
@media (min-width:780px){.menu__cols{column-count:2}}
.menu__cat{break-inside:avoid;margin-bottom:2.4rem;display:inline-block;width:100%}
.menu__cat--wide{column-span:all;margin-top:.5rem}
@media (max-width:779px){.menu__cat--wide{column-span:none}}

.cat{
  font-family:var(--serif);font-variant:small-caps;letter-spacing:.06em;
  font-size:1.15rem;font-weight:600;color:var(--flame);
  margin:0 0 1rem;padding-bottom:.5rem;
  border-bottom:1px solid rgba(168,84,58,.35);
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
}
.cat__sub{font-variant:normal;font-style:italic;font-size:.72rem;color:var(--basil-lit);letter-spacing:0;font-weight:400}

.items{list-style:none;margin:0;padding:0}
.items li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.5rem 0;border-bottom:1px dotted rgba(154,133,105,.28);
}
.items li:last-child{border-bottom:none}
.it-name{font-size:.98rem;color:var(--crema);line-height:1.35}
.it-name em{display:block;font-style:italic;font-family:var(--serif);font-size:.85rem;color:var(--smoke);max-width:38ch}
.it-name em.it-sub{display:block}
.it-price{
  font-family:var(--serif);font-weight:600;font-size:1rem;color:var(--crema);white-space:nowrap;flex:none;
}
/* standard pinsa price — quiet serif, same as other categories (.it-price) */
.sear{
  font-family:var(--serif);font-weight:600;font-size:1rem;color:var(--crema);
  white-space:nowrap;flex:none;
}
.items--pinsa{columns:1}
@media (min-width:560px){.items--pinsa{columns:2;column-gap:2.4rem}}
.items--pinsa li{break-inside:avoid}
.items--pinsa .is-sig .it-name em:first-child{display:inline;font-family:var(--serif);font-style:italic;color:var(--flame);font-size:1rem}
/* ONLY the signature gets the glowing sear chip — keeps it special */
.is-sig .sear{
  background:var(--ember);color:#160E07;font-weight:700;
  padding:.18rem .7rem;border-radius:999px;
  box-shadow:0 4px 16px -6px rgba(224,83,30,.6);
}
.it-extra{font-style:italic;opacity:.85}
/* inline Popeye row points to the signature card instead of duplicating its price */
.sig-link{
  font-family:var(--body);font-size:.78rem;font-weight:600;white-space:nowrap;flex:none;
  color:var(--flame);letter-spacing:.02em;transition:color .25s;
}
.sig-link:hover{color:#FFC36B}
.is-sig{background:radial-gradient(120% 100% at 100% 50%,rgba(224,83,30,.10),transparent 70%);border-radius:8px}

.two-col{columns:1}
@media (min-width:560px){.two-col{columns:2;column-gap:2.4rem}}
.two-col li{break-inside:avoid}

/* ---------- BAR sub-slab ---------- */
.bar{
  max-width:var(--maxw);margin:3rem auto 0;
  background:var(--base);border:1px solid rgba(168,84,58,.3);
  border-radius:18px;padding:clamp(1.4rem,3vw,2.4rem);
  box-shadow:inset 0 0 60px rgba(0,0,0,.4);
}
.bar__head{margin-bottom:1.4rem}
.bar__head .eyebrow{margin-bottom:.5rem}
.bar__tabs{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem;
  border-bottom:1px solid rgba(168,84,58,.25);padding-bottom:.9rem;
}
.bar__tab{
  font-family:var(--body);font-weight:500;font-size:.85rem;
  background:transparent;color:var(--smoke);
  border:1px solid rgba(168,84,58,.3);border-radius:999px;
  padding:.45rem 1rem;cursor:pointer;
  transition:color .25s,border-color .25s,background .3s;
}
@media (max-width:560px){
  .bar__tab{min-height:44px;padding:.6rem 1.1rem}
}
.bar__tab:hover{color:var(--crema);border-color:var(--terra)}
.bar__tab.is-on{
  color:#1A120B;background:linear-gradient(100deg,var(--ember),var(--flame));
  border-color:transparent;font-weight:600;
}
.bar__panel{animation:fade .35s var(--ease)}
.bar__panel[hidden]{display:none}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ============================================================
   FEIERN
   ============================================================ */
.feiern{
  background:var(--surface-2);
  display:grid;grid-template-columns:1fr;gap:2.4rem;align-items:center;align-content:start;
}
.feiern>*{max-width:1320px;width:100%;margin-inline:auto}
@media (min-width:880px){
  .feiern{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);
    max-width:1320px;margin:0 auto;align-content:center}
  .feiern>*{max-width:none}
}
.feiern__media img{
  width:100%;border-radius:14px;aspect-ratio:4/3;object-fit:cover;
  filter:saturate(1.05) brightness(.92) contrast(1.05);
  box-shadow:0 26px 50px -26px rgba(0,0,0,.8);
}
.feiern__text{max-width:54ch}
.caps{list-style:none;margin:1.6rem 0 2rem;padding:0;display:flex;flex-wrap:wrap;gap:1.6rem}
.caps li{display:flex;flex-direction:column}
.caps strong{
  font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--flame);
  text-shadow:0 0 24px rgba(242,161,59,.35);
}
.caps span{font-size:.85rem;color:var(--smoke)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  position:relative;background:var(--surface);overflow:hidden;isolation:isolate;
  padding:clamp(4rem,7vw,6rem) clamp(1.2rem,5vw,3rem) 2.4rem;
  border-top:1px solid rgba(168,84,58,.3);
}
@media (min-width:1080px){.foot{padding-left:calc(var(--rail) + clamp(1.2rem,5vw,3.5rem))}}
.foot__mouth{
  position:absolute;left:0;right:0;bottom:-30%;height:60%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%,rgba(224,83,30,.28),rgba(242,161,59,.08) 40%,transparent 72%);
}
.foot__top{
  display:grid;gap:2.4rem;max-width:1320px;margin:0 auto 3rem;
}
@media (min-width:760px){.foot__top{grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.5rem)}}
.foot__col .eyebrow{margin-bottom:1rem}
.foot__addr{font-style:normal;font-size:1.05rem;line-height:1.6;color:var(--crema);margin-bottom:1.1rem}
.foot__muted{color:var(--smoke);font-size:.9rem}
.foot__lines,.foot__links{display:flex;flex-direction:column;gap:.5rem;max-width:none}
.foot__lines a{color:var(--flame);font-weight:600;transition:color .25s;width:fit-content}
.foot__lines a:hover{color:#FFC36B}
.foot__links a{color:var(--crema);position:relative;width:fit-content;transition:color .25s}
.foot__links a:hover{color:var(--flame)}
/* >=44px tap targets for the primary call/email/social actions on mobile */
@media (max-width:560px){
  .foot__lines a,.foot__links a{padding:.4rem 0;min-height:44px;display:flex;align-items:center}
}
.foot__hint{font-size:.8rem;color:var(--smoke);margin-top:1rem;line-height:1.5}
.foot__hours{display:flex;flex-direction:column;gap:.35rem;max-width:none}
.foot__hours span{font-size:.95rem;color:var(--crema)}
.foot__hours strong{color:var(--flame)}
.foot__map{margin-top:1rem;border-radius:12px;overflow:hidden;border:1px solid rgba(168,84,58,.3);aspect-ratio:16/10}
.foot__map iframe{width:100%;height:100%;border:0;filter:grayscale(.25) saturate(.85) brightness(.85) contrast(1.05)}

.foot__sign{
  position:relative;
  font-family:var(--display);font-weight:800;text-transform:lowercase;
  font-size:clamp(3rem,9vw,8rem);line-height:.9;letter-spacing:-.04em;
  text-align:center;margin:1rem 0 .5rem;
  /* confident sign-off: bright flame top -> warm terra, never fades to nothing */
  background:linear-gradient(180deg,var(--flame) 0%,var(--ember) 48%,var(--terra) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.foot__legal{text-align:center;font-size:.78rem;color:var(--smoke);margin:0 auto;max-width:none}

/* ============================================================
   REVEAL (scroll-in)
   ============================================================ */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* gallery tiles set down like plates, staggered */
.gal .gal__item{opacity:0;transform:translateY(22px) scale(.985);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.gal.is-in .gal__item{opacity:1;transform:none}
.gal.is-in .gal__item:nth-child(1){transition-delay:.04s}
.gal.is-in .gal__item:nth-child(2){transition-delay:.12s}
.gal.is-in .gal__item:nth-child(3){transition-delay:.20s}
.gal.is-in .gal__item:nth-child(4){transition-delay:.28s}
.gal.is-in .gal__item:nth-child(5){transition-delay:.36s}

/* section eyebrow 'ignites' to flame colour as it enters */
.reveal .eyebrow{color:var(--terra-lit);transition:color .7s var(--ease)}
.reveal.is-in .eyebrow{animation:ignite 1.1s var(--ease) both}
@keyframes ignite{0%{color:var(--terra-lit)}35%{color:#FFC36B;text-shadow:0 0 14px rgba(242,161,59,.5)}100%{color:var(--terra-lit);text-shadow:none}}

/* ============================================================
   REDUCED MOTION / noanim
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .flame{animation:none}
  .strip__track{animation:none}
  .hero__cue span{animation:none;opacity:1;transform:none}
  .hero__ember{animation:none;opacity:.7}
  .status.is-open .status__dot{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .gal .gal__item{opacity:1;transform:none;transition:none}
  .reveal.is-in .eyebrow{animation:none}
  *{scroll-behavior:auto!important}
}
.noanim .flame,.noanim .strip__track,.noanim .hero__cue span,.noanim .status__dot,.noanim .hero__ember{animation:none!important}
.noanim .hero__ember{opacity:.7}
.noanim .reveal{opacity:1!important;transform:none!important;transition:none!important}
.noanim .gal .gal__item{opacity:1!important;transform:none!important;transition:none!important}
.noanim .reveal.is-in .eyebrow{animation:none!important}