/* ==========================================================================
   Jonny's Tacos - Design System
   "Nachtmarkt": logo orange on charcoal, poster typography, grain.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;600;700;800;900&family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --ink:        #0B0A09;
  --ink-2:      #131010;
  --ink-3:      #1C1817;
  --line:       rgba(245,238,227,.13);
  --cream:      #F5EEE3;
  --cream-2:    rgba(245,238,227,.66);
  --cream-3:    rgba(245,238,227,.40);
  --amber:      #F2700C;
  --amber-hot:  #FF8A33;
  --chili:      #C4361E;
  --lime:       #A8C24C;

  --display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --serif:   'Instrument Serif', Georgia, serif;
  --body:    'Manrope', 'Segoe UI', Helvetica, sans-serif;

  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1400px;
  --r: 4px;
  --ease: cubic-bezier(.22,.61,.36,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(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-size:clamp(.98rem,.35vw + .9rem,1.06rem);
  line-height:1.72;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Film grain over everything -------------------------------------------- */
body::after{
  content:''; position:fixed; inset:-50%; z-index:9999; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}   16%{transform:translate(-3%,-4%)}
  33%{transform:translate(2%,-2%)}    50%{transform:translate(-2%,3%)}
  66%{transform:translate(3%,2%)}     83%{transform:translate(-3%,1%)}
}
@media (prefers-reduced-motion: reduce){ body::after{ animation:none; } }

/* height:auto is required because every <img> now carries intrinsic
   width/height attributes (prevents layout shift / CLS). */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--amber); color:var(--ink); }

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

/* Layout ----------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(4.5rem,9vw,9rem); position:relative; }
.section--tight{ padding-block:clamp(3rem,6vw,5.5rem); }

/* Typography ------------------------------------------------------------- */
.display{
  font-family:var(--display);
  font-weight:800;
  line-height:.86;
  letter-spacing:-.005em;
  text-transform:uppercase;
  margin:0;
}
h1.display{ font-size:clamp(3.4rem,13vw,11rem); }
h2.display{ font-size:clamp(2.5rem,7vw,5.6rem); }
h3.display{ font-size:clamp(1.7rem,3.2vw,2.9rem); }

/* Size modifiers so heading LEVEL (SEO) stays independent of heading SIZE. */
.display.display--xl{ font-size:clamp(3.4rem,13vw,11rem); }
.display.display--lg{ font-size:clamp(2.5rem,7vw,5.6rem); }
.display.display--md{ font-size:clamp(1.7rem,3.2vw,2.9rem); }

.script{
  font-family:var(--serif); font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:0;
}
.amber{ color:var(--amber); }

.lede{ font-size:clamp(1.02rem,.45vw + .95rem,1.22rem); color:var(--cream-2); line-height:1.78; max-width:62ch; }
.lede strong{ color:var(--cream); font-weight:600; }

/* Buttons ---------------------------------------------------------------- */
.btn{
  --bg:var(--amber); --fg:var(--ink);
  display:inline-flex; align-items:center; gap:.7rem;
  padding:1.05rem 1.9rem;
  background:var(--bg); color:var(--fg);
  font-family:var(--body); font-weight:700; font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--bg); border-radius:100px;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--cream); transform:translateY(101%);
  transition:transform .45s var(--ease);
}
.btn:hover{ color:var(--ink); }
.btn:hover::before{ transform:translateY(0); }
.btn .arw{ transition:transform .4s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }

.btn--ghost{ --bg:transparent; --fg:var(--cream); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--cream); }

/* Header ----------------------------------------------------------------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(11,10,9,.82);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--line);
}
.hdr__in{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  height:clamp(68px,7vw,88px);
}
.brand{ display:flex; align-items:center; gap:.7rem; flex:none; }
.brand img{ height:clamp(36px,3.8vw,50px); width:auto; }
.brand b{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.05rem,1.5vw,1.35rem); line-height:.9; letter-spacing:.01em;
  display:block; max-width:6ch;
}
.brand b i{ font-style:normal; color:var(--amber); display:block; }
@media (max-width:520px){ .brand b{ display:none; } }

.nav{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.2rem); }
.nav a{
  font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-2); position:relative; padding-block:.4rem;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--amber); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav a:hover{ color:var(--cream); }
.nav a:hover::after,
.nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.nav a[aria-current="page"]{ color:var(--amber); }

.hdr__cta{ display:inline-flex; }
.hdr__cta .btn{ padding:.8rem 1.4rem; font-size:.72rem; }

/* Burger */
.burger{
  display:none; width:44px; height:44px; border:1px solid var(--line);
  border-radius:100px; background:transparent; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px; flex:none;
}
.burger i{ display:block; width:16px; height:1.5px; background:var(--cream); transition:transform .35s var(--ease), opacity .25s; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:1100px){
  .nav, .hdr__cta{ display:none; }
  .burger{ display:flex; }
}

/* Mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:99; background:var(--ink);
  padding:calc(clamp(68px,7vw,88px) + 2rem) var(--pad) 3rem;
  display:flex; flex-direction:column; justify-content:space-between;
  transform:translateY(-100%); transition:transform .6s var(--ease);
  overflow-y:auto; visibility:hidden;
}
.drawer.is-open{ transform:translateY(0); visibility:visible; }
.drawer nav{ display:flex; flex-direction:column; gap:.2rem; }
.drawer nav a{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.9rem,8vw,3.2rem); line-height:1.1; color:var(--cream);
  border-bottom:1px solid var(--line); padding-block:.5rem;
}
.drawer nav a[aria-current="page"]{ color:var(--amber); }
.drawer__foot{ padding-top:2.5rem; color:var(--cream-3); font-size:.85rem; display:grid; gap:.35rem; }
.drawer__foot a:hover{ color:var(--amber); }

/* Hero ------------------------------------------------------------------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); animation:kenburns 24s var(--ease) forwards; }
@keyframes kenburns{ to{ transform:scale(1); } }
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 85% at 20% 100%, rgba(242,112,12,.22), transparent 60%),
    linear-gradient(to top, var(--ink) 2%, rgba(11,10,9,.72) 38%, rgba(11,10,9,.45) 70%, rgba(11,10,9,.72) 100%);
}
.hero__in{ position:relative; z-index:1; width:100%; padding-bottom:clamp(3rem,7vw,6rem); padding-top:8rem; }
.hero h1{ font-size:clamp(4rem,17vw,15rem); }
.hero h1 .l2{ display:block; color:var(--amber); }
.hero__tag{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.1rem,2.6vw,2rem); color:var(--cream);
  margin:.9rem 0 0; letter-spacing:.01em;
}
.hero__row{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 2rem;
  margin-top:clamp(1.75rem,4vw,2.75rem);
}
.socials{ display:flex; gap:.65rem; }
.socials a{
  width:46px; height:46px; border:1px solid var(--line); border-radius:100px;
  display:grid; place-items:center; overflow:hidden;
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
/* Die Icon-Dateien sind selbst kreisrund – sie füllen den Kreis komplett aus.
   margin:0 ist nötig, weil .ftr__logo img im Footer einen Abstand vererbt. */
.socials a img{ width:100%; height:100%; margin:0; border-radius:100px; object-fit:cover; }
.socials a:hover{ border-color:var(--amber); background:rgba(242,112,12,.12); transform:translateY(-3px); }

/* Page hero (subpages) --------------------------------------------------- */
.phero{
  position:relative; overflow:hidden;
  min-height:clamp(420px,62vh,700px);
  display:flex; align-items:flex-end;
  padding-top:clamp(9rem,16vw,14rem); padding-bottom:clamp(3.5rem,7vw,6rem);
}
.phero.is-plain{ min-height:clamp(320px,42vh,460px); }
.phero__bg{ position:absolute; inset:0; z-index:0; }
.phero__bg img{ width:100%; height:100%; object-fit:cover; }
.phero__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, var(--ink), rgba(11,10,9,.78) 45%, rgba(11,10,9,.6));
}
.phero__in{ position:relative; z-index:1; width:100%; }
.phero.is-plain{ background:var(--ink-2); border-bottom:1px solid var(--line); }

/* Marquee ---------------------------------------------------------------- */
.marquee{
  border-block:1px solid var(--line); background:var(--ink-2);
  overflow:hidden; padding-block:.9rem; display:flex;
}
.marquee__track{ display:flex; gap:2.5rem; white-space:nowrap; animation:slide 34s linear infinite; padding-right:2.5rem; }
.marquee span{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.1rem,2.2vw,1.7rem); letter-spacing:.02em; color:var(--cream-2);
  display:flex; align-items:center; gap:2.5rem;
}
.marquee span::after{ content:''; width:.4em; height:.4em; border-radius:50%; background:var(--amber); flex:none; }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* Editorial intro -------------------------------------------------------- */
.intro{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(2rem,4vw,4rem); }
@media (min-width:940px){ .intro{ grid-template-columns:minmax(0,.36fr) minmax(0,.64fr); align-items:start; } }
.intro__mark img{ width:min(100%,300px); opacity:.92; }
.intro__body p{ margin:0 0 1.4rem; }
.intro__body p:last-child{ margin-bottom:0; }
.intro__body p:first-child::first-letter{
  float:left; font-family:var(--display); font-weight:800; font-size:4.4em;
  line-height:.74; padding:.06em .1em 0 0; color:var(--amber);
}

/* CTA band --------------------------------------------------------------- */
.band{ position:relative; overflow:hidden; border-block:1px solid var(--line); background:var(--ink-2); }
.band__in{ position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem; padding-block:clamp(2.5rem,5vw,4rem); }
.band h2{ max-width:16ch; }
.band::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(70% 140% at 88% 50%, rgba(242,112,12,.18), transparent 70%);
  pointer-events:none;
}

/* Split feature ---------------------------------------------------------- */
.split{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media (min-width:940px){
  .split{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .split--rev .split__media{ order:2; }
}
.split__media img{ width:100%; height:100%; object-fit:cover; border-radius:var(--r); }
.frame{ position:relative; }
.frame::after{
  content:''; position:absolute; inset:0; border:1px solid var(--line); border-radius:var(--r);
  transform:translate(14px,14px); pointer-events:none; transition:transform .6s var(--ease);
}
.frame:hover::after{ transform:translate(6px,6px); }

/* Photo collage ---------------------------------------------------------- */
.collage{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.collage img{ width:100%; height:100%; object-fit:cover; border-radius:var(--r); }
.collage .c1{ grid-column:1 / span 4; aspect-ratio:4/3; }
.collage .c2{ grid-column:5 / span 2; aspect-ratio:3/4; align-self:end; }
.collage .c3{ grid-column:1 / span 2; aspect-ratio:1/1; }
.collage .c4{ grid-column:3 / span 4; aspect-ratio:16/10; }

/* Gallery rail ----------------------------------------------------------- */
.rail{
  display:flex; align-items:flex-start; gap:clamp(.75rem,1.4vw,1.1rem);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline:var(--pad); padding-bottom:1.25rem;
  scrollbar-width:none; cursor:grab;
}
.rail::-webkit-scrollbar{ display:none; }
.rail.is-drag{ cursor:grabbing; scroll-snap-type:none; }
.rail figure{
  margin:0; flex:0 0 auto; scroll-snap-align:center;
  width:clamp(240px,32vw,420px); overflow:hidden; border-radius:var(--r);
  background:var(--ink-3);
}
.rail figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .8s var(--ease), filter .6s; filter:saturate(.95); }
.rail figure:hover img{ transform:scale(1.05); filter:saturate(1.1); }
.rail figure:nth-child(even){ margin-top:clamp(1rem,3vw,2.75rem); }

.railhead{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:clamp(1.75rem,3.5vw,3rem); }
.railnav{ display:flex; gap:.6rem; align-items:center; }
.railnav button{
  width:48px; height:48px; border-radius:100px; border:1px solid var(--line);
  background:transparent; color:var(--cream); cursor:pointer; display:grid; place-items:center;
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s;
}
.railnav button:hover{ border-color:var(--amber); background:var(--amber); color:var(--ink); }

/* Masonry gallery -------------------------------------------------------- */
.grid-gal{ columns:2; column-gap:clamp(.75rem,1.4vw,1.1rem); }
@media (min-width:760px){ .grid-gal{ columns:3; } }
@media (min-width:1180px){ .grid-gal{ columns:4; } }
.grid-gal figure{
  margin:0 0 clamp(.75rem,1.4vw,1.1rem); break-inside:avoid;
  border-radius:var(--r); overflow:hidden; background:var(--ink-3);
}
.grid-gal img{ width:100%; height:auto; transition:transform .8s var(--ease), filter .6s; filter:saturate(.95) brightness(.94); }
.grid-gal figure:hover img{ transform:scale(1.04); filter:saturate(1.1) brightness(1); }

/* Menu ------------------------------------------------------------------- */
.menu-grid{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); align-items:start; }
@media (min-width:920px){ .menu-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.mcard{ border-top:2px solid var(--amber); padding-top:1.5rem; }
.mcard > h2,
.mcard > h3{ margin:0 0 1.5rem; }
.mitem{ padding-block:1.15rem; border-bottom:1px solid var(--line); }
.mitem:last-child{ border-bottom:0; padding-bottom:0; }
.mitem h3,
.mitem h4{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.15rem,1.9vw,1.5rem); line-height:1.1; margin:0 0 .5rem; letter-spacing:.01em;
}
.mitem p{ margin:0; color:var(--cream-2); font-size:.95rem; line-height:1.7; }
.mitem--plain h3,
.mitem--plain h4{ margin:0; }

.chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin:.35rem 0 0; padding:0; }
.chips li{
  list-style:none; border:1px solid var(--line); border-radius:100px;
  padding:.55rem 1.1rem; font-size:.85rem; color:var(--cream-2);
  transition:border-color .3s var(--ease), color .3s;
}
.chips li:hover{ border-color:var(--amber); color:var(--cream); }
.note{ font-size:.9rem; color:var(--cream-3); margin:1.1rem 0 0; font-style:italic; }

.sublabel{
  font-size:.7rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--amber); margin:1.75rem 0 .75rem;
}

/* Price table ------------------------------------------------------------ */
.prices{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin:0; }
@media (min-width:760px){ .prices{ grid-template-columns:repeat(3,1fr); } }
.prices > div{ background:var(--ink-2); padding:clamp(1.5rem,3vw,2.25rem); }
.prices dt{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-3); margin-bottom:.6rem; }
.prices dd{
  margin:0; font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.5rem,2.8vw,2.15rem); line-height:1; color:var(--amber);
}

/* Google-Maps-Karte (Standorte) ----------------------------------------- */
.map{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:var(--r); overflow:hidden; background:var(--ink-2);
}
@media (max-width:720px){ .map{ aspect-ratio:4/3; } }
.map iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block;
}

/* Embed ------------------------------------------------------------------ */
.embed{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--ink-2); }
.embed iframe{ display:block; width:100%; border:0; }
.embed--ig{ max-width:420px; width:100%; }
.embed--ig iframe{ height:452px; background:#fff; }

/* Follow / embed split */
.follow{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center; justify-items:center; }
@media (min-width:940px){ .follow{ grid-template-columns:minmax(0,420px) minmax(0,1fr); justify-items:stretch; } }
.follow__card{ border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.75rem,3.5vw,2.5rem); background:var(--ink-2); }
.handle{
  display:flex; align-items:center; gap:1rem; padding:1rem 0;
  border-bottom:1px solid var(--line); color:var(--cream-2);
  transition:color .3s var(--ease), padding-left .3s var(--ease);
}
.handle:last-child{ border-bottom:0; }
.handle:hover{ color:var(--amber); padding-left:.4rem; }
.handle img{ width:26px; height:26px; flex:none; }
.handle span{ font-weight:600; letter-spacing:.02em; }
.handle .arw{ margin-left:auto; }

/* Legal ------------------------------------------------------------------ */
.legal{ display:grid; gap:clamp(2rem,4vw,3.5rem); }
@media (min-width:1000px){ .legal{ grid-template-columns:250px minmax(0,1fr); align-items:start; } }
.legal__nav{ position:sticky; top:120px; display:grid; gap:.15rem; align-content:start; }
.legal__nav a{
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream-3); padding:.65rem 0; border-bottom:1px solid var(--line);
  transition:color .3s var(--ease), padding-left .3s var(--ease);
}
.legal__nav a:hover{ color:var(--amber); padding-left:.5rem; }
@media (max-width:999px){ .legal__nav{ position:static; } }

.doc{ scroll-margin-top:120px; }
.doc h2{ margin:0 0 1.25rem; }
.doc h3{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.15; margin:2.5rem 0 .6rem; color:var(--cream);
}
.doc p{ margin:0 0 1.1rem; color:var(--cream-2); max-width:72ch; }
.doc ul{ margin:0 0 1.1rem; padding-left:1.1rem; color:var(--cream-2); }
.doc li{ margin-bottom:.35rem; }
.doc .addr{ color:var(--cream); font-style:normal; margin:0 0 1.1rem; line-height:1.85; }
.doc .addr a:hover{ color:var(--amber); }
.doc hr{ border:0; border-top:1px solid var(--line); margin:2.25rem 0; }
.doc + .doc{ margin-top:clamp(3.5rem,7vw,6rem); }
.doc__head{ border-top:2px solid var(--amber); padding-top:1.5rem; margin-bottom:2rem; }

/* Footer ----------------------------------------------------------------- */
.ftr{ background:var(--ink-2); border-top:1px solid var(--line); padding-block:clamp(3.5rem,7vw,6rem) 2rem; position:relative; overflow:hidden; }
.ftr::before{
  content:''; position:absolute; inset:auto 0 -30% 0; height:60%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(242,112,12,.15), transparent 70%);
  pointer-events:none;
}
.ftr > .wrap{ position:relative; z-index:2; }
.ftr__in{ position:relative; display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:900px){ .ftr__in{ grid-template-columns:1.2fr .8fr .9fr; } }
@media (min-width:1280px){ .ftr__in{ max-width:1020px; } }
.ftr__logo img{ width:min(220px,60%); margin-bottom:1.5rem; }
.ftr h4{ font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--amber); margin:0 0 1.25rem; }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.ftr__contact a, .ftr__links a{ color:var(--cream-2); transition:color .3s var(--ease); }
.ftr__contact a:hover, .ftr__links a:hover{ color:var(--amber); }
.ftr .socials{ margin-top:1.5rem; }
.ftr__meta{
  position:relative; margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.75rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  font-size:.78rem; color:var(--cream-3);
}
.ftr__meta a:hover{ color:var(--amber); }
.ftr__ing{
  position:absolute; right:2%; bottom:15%; width:min(220px,16vw);
  opacity:.6; pointer-events:none; z-index:0;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 45%, #000 55%, transparent 100%);
          mask-image:radial-gradient(70% 70% at 50% 45%, #000 55%, transparent 100%);
}
@media (max-width:1280px){ .ftr__ing{ display:none; } }

/* Reveal ----------------------------------------------------------------- */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.09s; }
.reveal[data-d="2"]{ transition-delay:.18s; }
.reveal[data-d="3"]{ transition-delay:.27s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* Hero load stagger */
.hload{ opacity:0; transform:translateY(30px); animation:rise .95s var(--ease) forwards; }
.hload[data-d="1"]{ animation-delay:.15s; }
.hload[data-d="2"]{ animation-delay:.3s; }
.hload[data-d="3"]{ animation-delay:.45s; }
.hload[data-d="4"]{ animation-delay:.6s; }
@keyframes rise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .hload{ opacity:1; transform:none; animation:none; } }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--amber); color:var(--ink); padding:.85rem 1.4rem; font-weight:700;
}
.skip:focus{ left:1rem; top:1rem; }

/* ==========================================================================
   Catering-Formular
   Nutzt ausschließlich die vorhandenen Design-Tokens; keine bestehende
   Regel wird verändert.
   ========================================================================== */

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.fwrap{ max-width:900px; }

.cform__trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.cform__set{ border:0; margin:0 0 clamp(1.75rem,3.5vw,2.75rem); padding:0; }
.cform__legend{
  display:block; width:100%; padding:0 0 1.1rem;
  font-size:.7rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--amber); border-bottom:1px solid var(--line); margin-bottom:1.5rem;
}
.cform__legend abbr{ color:var(--cream-3); }

.cform__grid{ display:grid; gap:1.25rem clamp(1rem,2vw,1.5rem); }
@media (min-width:680px){
  .cform__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .field--wide{ grid-column:1 / -1; }
}

.field{ display:flex; flex-direction:column; gap:.5rem; min-width:0; }
/* :not(.opt) – die Checkbox-Zeile ist ebenfalls ein direktes label-Kind,
   soll aber als Fließtext gesetzt bleiben. */
.field > label:not(.opt){
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-2);
}
.field abbr{ color:var(--amber); text-decoration:none; border:0; }

.field input,
.field textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--cream);
  background:var(--ink); border:1px solid var(--line); border-radius:var(--r);
  padding:.95rem 1.1rem; transition:border-color .3s var(--ease), background .3s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; min-height:9rem; line-height:1.7; }
.field input::placeholder,
.field textarea::placeholder{ color:var(--cream-3); }
.field input:hover,
.field textarea:hover{ border-color:rgba(245,238,227,.26); }
.field input:focus,
.field textarea:focus{ outline:none; border-color:var(--amber); background:var(--ink-3); }
.field input[type="date"],
.field input[type="time"]{ min-height:3.2rem; }
.field input::-webkit-calendar-picker-indicator{ filter:invert(1); opacity:.5; cursor:pointer; }
.field input::-webkit-calendar-picker-indicator:hover{ opacity:1; }

.field__hint{ margin:0; font-size:.78rem; color:var(--cream-3); text-align:right; }
.field__err{ margin:0; font-size:.82rem; line-height:1.5; color:#FF7A5E; }
.field__err:empty{ display:none; }

.field.is-bad input,
.field.is-bad textarea{ border-color:var(--chili); background:rgba(196,54,30,.07); }

.cform__err{ margin:0 0 1.25rem; font-size:.92rem; }

/* Auswahlkarten -------------------------------------------------------- */
.picks{ display:grid; gap:.9rem; }
@media (min-width:680px){ .picks{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.pick{ display:block; cursor:pointer; position:relative; }
.pick input{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer;
}
.pick__body{
  display:flex; flex-direction:column; gap:.45rem; height:100%;
  border:1px solid var(--line); border-radius:var(--r);
  padding:1.2rem 1.3rem; background:var(--ink);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.pick:hover .pick__body{ border-color:rgba(245,238,227,.3); }
.pick__title{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:1.1rem; line-height:1.15; letter-spacing:.01em; color:var(--cream);
}
.pick__note{ font-size:.86rem; line-height:1.6; color:var(--cream-2); }
.pick input:checked + .pick__body{ border-color:var(--amber); background:rgba(242,112,12,.08); }
.pick input:checked + .pick__body .pick__title{ color:var(--amber); }
.pick input:focus-visible + .pick__body{ outline:2px solid var(--amber); outline-offset:3px; }
.picks.is-bad .pick__body{ border-color:var(--chili); }

/* Checkbox-Pillen ------------------------------------------------------- */
.opts{ display:flex; flex-wrap:wrap; gap:.6rem; margin:0; padding:0; list-style:none; }
.opt{ display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; }
.opt input{
  -webkit-appearance:none; appearance:none; margin:0; flex:none;
  /* padding:0 ist nötig: .field input setzt ein Innenabstand-Padding,
     das die Box sonst über die 1.1rem hinaus aufbläht. */
  padding:0;
  width:1.1rem; height:1.1rem; min-width:1.1rem; border:1px solid var(--line); border-radius:3px;
  background:var(--ink); cursor:pointer; position:relative;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.opt input:checked{ background:var(--amber); border-color:var(--amber); }
.opt input:checked::after{
  content:''; position:absolute; left:.3rem; top:.1rem;
  width:.28rem; height:.55rem; border:solid var(--ink);
  border-width:0 2px 2px 0; transform:rotate(45deg);
}
.opt input:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

.opts .opt{
  border:1px solid var(--line); border-radius:100px; padding:.55rem 1.1rem;
  font-size:.88rem; color:var(--cream-2);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.opts .opt:hover{ border-color:var(--amber); color:var(--cream); }
.opts .opt:has(input:checked){ border-color:var(--amber); color:var(--cream); background:rgba(242,112,12,.08); }

.field--check{ margin-bottom:1.5rem; }
.opt--check{ align-items:flex-start; gap:.75rem; }
.opt--check input{ margin-top:.28rem; }
.opt--check span{ font-size:.92rem; line-height:1.65; color:var(--cream-2); }
.opt--check a{ color:var(--amber); text-decoration:underline; text-underline-offset:3px; }
.opt--check a:hover{ color:var(--cream); }
.field--check.is-bad .opt--check input{ border-color:var(--chili); }

/* Schieberegler "Anzahl Gäste" ------------------------------------------ */
.field--range > label{ margin-bottom:.25rem; }

.range{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--ink); padding:1.1rem clamp(1rem,2.5vw,1.4rem) 1.2rem;
}

.range__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; margin-bottom:.35rem;
}
.range__value{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1; color:var(--amber);
  font-variant-numeric:tabular-nums;
}
.range__max{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-3); white-space:nowrap;
}

/* Der Regler selbst – Spur per Gradient, Fortschritt über --pct ---------- */
.range input[type="range"]{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; height:44px;      /* 44px Touchfläche */
  margin:0; padding:0; background:transparent; border:0;
  cursor:pointer; touch-action:pan-y;
}
.range input[type="range"]:focus{ outline:none; }

.range input[type="range"]::-webkit-slider-runnable-track{
  height:6px; border-radius:100px;
  background:linear-gradient(to right,
    var(--amber) 0 var(--pct,0%), rgba(245,238,227,.15) var(--pct,0%) 100%);
}
.range input[type="range"]::-moz-range-track{
  height:6px; border-radius:100px; background:rgba(245,238,227,.15);
}
.range input[type="range"]::-moz-range-progress{
  height:6px; border-radius:100px; background:var(--amber);
}

.range input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:24px; height:24px; margin-top:-9px; border-radius:50%;
  background:var(--cream); border:3px solid var(--amber);
  box-shadow:0 2px 10px rgba(0,0,0,.5);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.range input[type="range"]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%;
  background:var(--cream); border:3px solid var(--amber);
  box-shadow:0 2px 10px rgba(0,0,0,.5);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.range input[type="range"]:hover::-webkit-slider-thumb{ transform:scale(1.12); }
.range input[type="range"]:hover::-moz-range-thumb{ transform:scale(1.12); }
.range input[type="range"]:active::-webkit-slider-thumb{ transform:scale(1.2); }
.range input[type="range"]:active::-moz-range-thumb{ transform:scale(1.2); }
.range input[type="range"]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 4px rgba(242,112,12,.35);
}
.range input[type="range"]:focus-visible::-moz-range-thumb{
  box-shadow:0 0 0 4px rgba(242,112,12,.35);
}
@media (prefers-reduced-motion: reduce){
  .range input[type="range"]::-webkit-slider-thumb{ transition:none; }
  .range input[type="range"]::-moz-range-thumb{ transition:none; }
}

/* Skala unter dem Regler -------------------------------------------------- */
.range__scale{
  position:relative; height:1.1rem; margin:.1rem .75rem 0;
  font-size:.7rem; color:var(--cream-3); font-variant-numeric:tabular-nums;
}
.range__scale span{ position:absolute; top:0; transform:translateX(-50%); }
.range__scale span:first-child{ transform:none; }
.range__scale span:last-child{ transform:translateX(-100%); }

/* Preisstaffel ------------------------------------------------------------ */
.tiers{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem; margin:1rem 0 0; padding:0; list-style:none;
}
@media (min-width:620px){ .tiers{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.tiers li{
  border:1px solid var(--line); border-radius:var(--r);
  padding:.6rem .7rem; text-align:center; background:var(--ink-2);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.tiers li span{
  display:block; font-size:.66rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cream-3); margin-bottom:.2rem;
}
.tiers li b{
  display:block; font-size:.82rem; font-weight:600; color:var(--cream-2);
  line-height:1.3;
}
.tiers li.is-on{ border-color:var(--amber); background:rgba(242,112,12,.1); }
.tiers li.is-on span{ color:var(--amber); }
.tiers li.is-on b{ color:var(--cream); }

/* Preisschätzung -------------------------------------------------------- */
.quote{
  border:1px solid var(--line); border-left:2px solid var(--amber); border-radius:var(--r);
  background:var(--ink); padding:clamp(1.2rem,2.5vw,1.6rem) clamp(1.3rem,3vw,1.9rem);
  margin:0 0 1.75rem;
}
.quote__label{
  margin:0 0 .5rem; font-size:.7rem; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--amber);
}
.quote__value{
  margin:0; font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1; color:var(--cream);
}
.quote__note{ margin:.75rem 0 0; font-size:.82rem; line-height:1.6; color:var(--cream-3); }

/* Button / Ladezustand --------------------------------------------------- */
.cform__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.75rem; }
.cform__req{ margin:0; font-size:.78rem; color:var(--cream-3); }
.cform__req abbr{ color:var(--amber); text-decoration:none; }

.cform__spin{
  display:none; width:1em; height:1em; flex:none; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:cspin .7s linear infinite;
}
@keyframes cspin{ to{ transform:rotate(360deg); } }

.cform.is-busy #cf-submit{ pointer-events:none; opacity:.72; }
.cform.is-busy .cform__spin{ display:block; }
.cform.is-busy .arw{ display:none; }
@media (prefers-reduced-motion: reduce){ .cform__spin{ animation-duration:2s; } }

.cform__status{ margin:1rem 0 0; font-size:.86rem; color:var(--cream-3); }
.cform__status:empty{ display:none; }

/* Erfolgsmeldung --------------------------------------------------------- */
.done{
  border:1px solid var(--line); border-top:2px solid var(--amber); border-radius:var(--r);
  background:var(--ink); padding:clamp(2rem,4vw,3rem);
}
.done h3{ margin:0 0 1rem; }
.done .lede{ margin:0; }
.done__note{ margin:1.25rem 0 0; font-size:.86rem; line-height:1.6; color:var(--cream-3); }
.done__note:empty{ display:none; }
.done:focus{ outline:none; }