/* ============================================================
   FORK & FIRE Catering — Basis
   Tokens, Typografie, Kopf, Fuß, Bewegung
   ============================================================ */

:root{
  --ink:      #0B0B0C;
  --ink-2:    #131316;
  --paper:    #F2EFE9;
  --paper-2:  #E9E5DC;
  --white:    #FFFFFF;
  --red:      #D3010F;
  --muted:    #625C51;                 /* 5,77:1 auf --paper */
  --muted-l:  rgba(255,255,255,.62);
  --line:     rgba(11,11,12,.16);
  --line-l:   rgba(255,255,255,.18);

  --serif: "Fraunces", "Georgia", "Times New Roman", serif;
  --sans:  "Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --pad: max(20px, min(6vw, 96px));
  --sec: clamp(56px, 7.2vw, 168px);
  --gut: clamp(22px, 2.4vw, 44px);
  --flow: 16px;
  --flow-lg: 32px;

  /* Typo-Skala — eine Quelle fuer alle Groessen */
  --t-display: clamp(3rem, 8.4vw, 9rem);
  --t-h2:      clamp(1.95rem, 3.8vw, 3.6rem);
  --t-h3:      clamp(1.3rem, 1.6vw, 1.55rem);
  --t-lead:    clamp(1.08rem, 1.5vw, 1.32rem);
  --t-body:    clamp(1.05rem, .95vw, 1.14rem);
  --t-fine:    .76rem;
  --t-kicker:  .68rem;
  --cell: clamp(18px, 2vw, 30px);       /* Innenabstand in Rasterzellen */
  --wrap: 1560px;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);

  --hdr-h: 74px;
  --dock-h: 58px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
html.lenis{ scroll-behavior:auto; }
html{
  scroll-padding-top:calc(var(--hdr-h) + 16px);
  -webkit-tap-highlight-color:rgba(211,1,15,.14);
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:400;
  font-size:var(--t-body); line-height:1.7; font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  /* clip statt hidden: clippt genauso, macht den Body aber nicht zum
     Scroll-Container - sonst funktioniert position:sticky nirgends. */
  overflow-x:clip;
}
body.is-locked{ overflow:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,p,figure,ol,ul,dl,dd{ margin:0; }
ol,ul{ list-style:none; padding:0; }
table{ border-collapse:collapse; width:100%; }
::selection{ background:var(--red); color:#fff; }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* Inhalt zentriert, Flächen bleiben randlos */
/* .mfold: ui.js wickelt Abschnitte mobil in <details>. Ohne den zweiten
   Selektor greift `main > section` dort nicht mehr und der Text klebt am Rand. */
main > section, main > .mfold > section, .cfacts, .foot{
  padding-inline:max(var(--pad), calc((100% - var(--wrap)) / 2));
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--ink); color:#fff; padding:1em 1.4em; font-size:12px; letter-spacing:.16em;
}
.skip:focus{ left:0; }

/* ── Typografie ──────────────────────────────────────── */
.display{
  font-family:var(--serif); font-weight:480;
  font-size:var(--t-display);
  line-height:.98; letter-spacing:-.01em;
}
.h2{
  font-family:var(--serif); font-weight:480;
  font-size:var(--t-h2);
  line-height:1.1; letter-spacing:-.008em;
}
.h2--light{ color:var(--white); }
h3{ font-family:var(--serif); font-weight:480; }

.kicker{
  font-size:var(--t-kicker); font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.4em;
}
.kicker--light{ color:var(--muted-l); }
.kicker::before{
  content:""; display:inline-block; width:24px; height:1px; background:var(--red);
  vertical-align:middle; margin-right:12px; transform:translateY(-1px);
}
.eyebrow{
  display:inline-block; color:inherit;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  padding:0; margin:0 0 clamp(16px,2.2vw,28px);
}
.eyebrow::before{
  content:""; display:inline-block; width:24px; height:1px; background:var(--red);
  vertical-align:middle; margin-right:12px; transform:translateY(-1px);
}
.lead{ font-size:var(--t-lead); line-height:1.5; max-width:46ch; }
.lead--light{ color:rgba(255,255,255,.78); }
.prose p{ margin:0 0 var(--flow); max-width:64ch; }
.prose p:last-child{ margin-bottom:0; }
.fine{ font-size:var(--t-fine); line-height:1.5; color:var(--muted); max-width:64ch; }
.price{
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ── Buttons und Links ───────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:48px; padding:1em 1.8em; font-size:.74rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  border:1px solid currentColor; border-radius:0; background:transparent;
  cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
  transition:color .16s linear, border-color .16s linear;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--red);
  transform:scaleY(0); transform-origin:bottom; transition:transform .35s var(--ease);
}
.btn:hover::after{ transform:scaleY(1); }
.btn:hover{ color:#fff; border-color:var(--red); }
.btn--solid{ background:var(--ink); color:#fff; border-color:var(--ink); }
/* currentColor statt fixem Schwarz: auf dunklen Sektionen war der Rahmen
   unsichtbar und der Button wirkte erst beim Hover wie ein Button. */
.btn--line{ border-color:currentColor; }
.btn--pill{ min-height:42px; padding:.8em 1.4em; }
.btn[disabled]{ opacity:.55; pointer-events:none; }

.link-ul{
  display:inline-block; font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid var(--red); padding:.5em 0 .4em;
  transition:color .16s linear;
}
.link-ul:hover{ color:var(--red); }

/* ── Loader ──────────────────────────────────────────── */
.loader{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:grid; place-content:center; justify-items:center; gap:18px;
  transition:transform .38s var(--ease), visibility 0s linear .4s;
}
.loader__mark{
  line-height:0;
  opacity:0; transform:translateY(12px); animation:fadeUp .8s var(--ease) .05s forwards;
}
.loader__mark img{ width:min(360px,62vw); height:auto; display:block; }
.loader__rule{ width:min(260px,52vw); height:1px; background:rgba(255,255,255,.18); overflow:hidden; }
.loader__rule i{ display:block; height:100%; background:var(--red); transform:scaleX(0); transform-origin:left; animation:grow .9s var(--ease-io) .18s forwards; }
.loader__sub{
  font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:rgba(255,255,255,.5);
  opacity:0; animation:fadeUp .8s var(--ease) .3s forwards;
}
.loader.is-done{ transform:translateY(-101%); visibility:hidden; }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }
@keyframes grow{ to{ transform:scaleX(1); } }

/* ── Kopfzeile ───────────────────────────────────────── */
.hdr{
  position:fixed; inset:0 0 auto; z-index:100; height:var(--hdr-h);
  display:flex; align-items:center; gap:var(--gut);
  padding-inline:max(var(--pad), calc((100% - var(--wrap)) / 2)); color:#fff;
  transition:height .4s var(--ease), background .4s var(--ease);
}
.hdr::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0));
  transition:opacity .3s var(--ease);
}
.hdr.is-stuck{ height:60px; background:var(--ink); }
.hdr.is-stuck::before{ opacity:0; }
/* Seiten ohne dunklen Hero: Kopfzeile von Anfang an gefuellt */
body.hdr-solid .hdr{ background:var(--ink); }
body.hdr-solid .hdr::before{ display:none; }

.mark{ display:flex; align-items:center; margin-right:auto; line-height:0; }
.mark img{ height:clamp(23px,2vw,29px); width:auto; display:block; }
.nav{ display:flex; gap:clamp(16px,1.8vw,32px); }
.nav a{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  position:relative; padding:6px 0; opacity:.84; transition:opacity .16s linear;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav a:hover{ opacity:1; }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.hdr__tel{
  display:none; align-items:center; gap:.6em;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  min-height:44px; padding:0 .2em;
}
.hdr__tel::before{ content:"↗"; color:var(--red); }

.burger{ display:none; width:44px; height:44px; border:0; background:none; cursor:pointer; padding:0; margin-right:-6px; }
.burger i{ display:block; width:22px; height:1px; background:currentColor; margin:5px auto; transition:transform .3s var(--ease); }
.burger[aria-expanded="true"] i:first-child{ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child{ transform:translateY(-3px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:99; background:var(--ink); color:#fff;
  display:flex; flex-direction:column;
  padding:calc(var(--hdr-h) + 8px) var(--pad) max(var(--pad), env(safe-area-inset-bottom));
  overflow:hidden;
  transform:translateY(-102%); visibility:hidden;
  transition:transform .55s var(--ease), visibility 0s linear .55s;
}
.drawer.is-open{ transform:none; visibility:visible; transition:transform .55s var(--ease); }
.drawer::after{
  content:"&"; position:absolute; right:-.08em; bottom:-.32em; z-index:0;
  font-family:var(--serif); font-style:italic; font-size:min(58vh,22rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.14); pointer-events:none;
}
.drawer nav{ position:relative; z-index:1; display:flex; flex-direction:column; margin-block:auto; }
.drawer nav a{
  font-family:var(--serif); font-weight:480; font-size:clamp(1.9rem,8vw,2.9rem); line-height:1.15;
  display:flex; align-items:baseline; gap:.7em; padding:.22em 0;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease) var(--d,0s), transform .5s var(--ease) var(--d,0s), color .16s linear;
}
.drawer.is-open nav a{ opacity:1; transform:none; }
.drawer nav a:active, .drawer nav a:hover{ color:var(--red); }
.drawer nav a small{
  font-family:var(--sans); font-size:.62rem; font-weight:600; letter-spacing:.2em; color:var(--red);
  min-width:2em;
}
.drawer__cta{
  position:relative; z-index:1; display:block; text-align:center;
  background:var(--red); color:#fff; border:0;
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:1.15em 1.5em; margin-top:var(--flow-lg);
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease) .32s, transform .5s var(--ease) .32s;
}
.drawer.is-open .drawer__cta{ opacity:1; transform:none; }
.drawer__legal{
  position:relative; z-index:1; display:flex; gap:1.6em; justify-content:center;
  margin-top:var(--flow-lg); font-size:.72rem; color:var(--muted-l);
  opacity:0; transition:opacity .5s var(--ease) .4s;
}
.drawer.is-open .drawer__legal{ opacity:1; }
.drawer__legal a:hover{ color:#fff; }

/* ── Aktionsleiste unten (nur Mobil) ─────────────────── */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:98;
  display:none; height:calc(var(--dock-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--ink); border-top:1px solid rgba(242,239,233,.22);
  opacity:0; transform:translateY(8px); transition:opacity .22s linear, transform .22s var(--ease);
}
.dock.is-on{ opacity:1; transform:none; }
.dock__a{
  flex:1 1 50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; color:#fff; text-align:center;
}
.dock__a + .dock__a{ border-left:1px solid rgba(242,239,233,.22); }
.dock__a b{ font-weight:500; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.dock__a s{ text-decoration:none; font-size:.68rem; color:var(--muted-l); }
.dock__a--red{ background:var(--red); border-left-color:var(--red); }

/* ── Fußzeile ────────────────────────────────────────── */
.foot{ background:var(--ink); color:#fff; padding-block:var(--sec) 0; }
.foot__cta{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--gut);
  flex-wrap:wrap; padding-bottom:var(--flow-lg); border-bottom:1px solid var(--line-l);
}
.foot__cta h2{
  font-family:var(--serif); font-weight:480; font-size:clamp(1.9rem,4.4vw,3.8rem);
  line-height:1.05; letter-spacing:-.01em; max-width:16ch;
}
.foot__cta h2 em{ font-style:italic; color:var(--red); }
.foot__cta .btn{ background:#fff; color:var(--ink); border-color:#fff; }
.foot__grid{
  display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  gap:var(--gut); padding-block:var(--flow-lg);
}
.foot__brandlogo{ width:min(150px,40vw); height:auto; }
.foot__brand p{ margin-top:var(--flow); font-size:.85rem; color:var(--muted-l); max-width:30ch; line-height:1.7; }
.foot__col h3{
  font-family:var(--sans); font-size:var(--t-kicker); font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted-l); margin-bottom:1em;
}
.foot__col p, .foot__col ul{ font-size:.9rem; line-height:2.1; color:rgba(255,255,255,.82); }
.foot__col a{ display:inline-block; padding:.1em 0; }
.foot__col a:hover{ color:var(--red); }
.foot__bar{
  display:flex; justify-content:space-between; align-items:center; gap:var(--gut); flex-wrap:wrap;
  padding-block:clamp(16px,2vw,24px); border-top:1px solid var(--line-l);
  font-size:.74rem; color:rgba(255,255,255,.5);
}
.foot__bar nav{ display:flex; gap:1.6em; }
.foot__bar a:hover{ color:#fff; }

/* ── Korn ────────────────────────────────────────────── */
.grain{
  position:fixed; inset:0; z-index:150; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* ── Bewegung ────────────────────────────────────────── */
.rv span{ display:block; overflow-x:visible; overflow-y:clip; padding:.08em 0 .14em; margin:-.08em 0 -.14em; }
.rv span i{ display:block; font-style:inherit; transform:translateY(118%); transition:transform .7s var(--ease) var(--d,0s); }
.rv.in span i{ transform:none; }
body.is-ready h1.rv span i{ transform:none; }

.reveal{ clip-path:inset(0 0 100% 0); transition:clip-path .75s var(--ease); }
.reveal.in{ clip-path:inset(0 0 0 0); }
.reveal img{ transform:scale(1.08); transition:transform .9s var(--ease); }
.reveal.in img{ transform:none; }

/* Raster verschieben sich nicht — sonst wandern die Trennlinien mit */
.fade{ opacity:0; transition:opacity .45s var(--ease); }
.fade.in{ opacity:1; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width:1080px){
  .nav{ display:none; }
  .burger{ display:block; }
  .hdr .btn--pill{ display:none; }
  .hdr__tel{ display:inline-flex; }
  .hdr .langsw{ border:0; margin-right:6px; }
  .hdr .langsw button + button{ border-left:0; }
  .foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--flow-lg); }
  .foot__brand{ grid-column:1 / -1; }
}
@media (max-width:767px){
  body{ padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom)); }
  .dock{ display:flex; }
  .hdr__tel{ display:none; }
  .fade{ transition-duration:.4s; }
  .fade,[style*="--d"]{ --d:0s !important; }
}
@media (max-width:560px){
  .foot__grid{ grid-template-columns:1fr; }
  .foot__cta .btn{ width:100%; }
  .foot__bar{ flex-direction:column; align-items:flex-start; gap:10px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .rv span i{ transform:none; }
  .reveal{ clip-path:none; }
  .reveal img{ transform:none; }
  .fade{ opacity:1; }
  .art path{ stroke-dashoffset:0; }
}

.cform .kicker{ color:rgba(255,255,255,.68); }

/* art.js zeichnet Strichgrafiken — ohne diese Basisregel rendert SVG sie
   per Default schwarz GEFUELLT (fill:#000, stroke:none) als Kleckse. */
.art svg{ width:100%; height:auto; display:block; overflow:visible; }
.art path{
  fill:none; stroke:currentColor; stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:0;
}

/* Platzreservierung gegen Layout-Shifts (JS-Injektion) */
#jArticle{ min-height:130vh; }
section#jGrid{ min-height:70vh; }
.article__hero{ aspect-ratio:1900/1069; }
.article__hero img,.jcard figure img{ width:100%; height:100%; object-fit:cover; }
.jcard figure{ aspect-ratio:16/10; }

/* fastrv: Unterseiten ohne Intro — Erst-Paint sofort komplett */
html.fastrv .rv span i{ transform:none; transition:none; }
html.fastrv .no-anim, html.fastrv .no-anim img{ transition:none !important; }
.no-anim, .no-anim img{ transition:none !important; }

/* ── Sprachumschalter: beide Sprachen sichtbar, Flaggen als Inline-SVG ── */
.langsw{ display:flex; border:1px solid var(--line-l); margin-right:14px; }
.langsw button{
  display:flex; align-items:center; gap:7px;
  background:none; border:0; color:inherit; cursor:pointer;
  font:inherit; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.55em .8em; opacity:.55;
  transition:opacity .3s var(--ease), background .3s var(--ease);
}
.langsw button + button{ border-left:1px solid var(--line-l); }
.langsw button:hover{ opacity:.85; }
.langsw button.is-active{ opacity:1; background:rgba(255,255,255,.1); }
.langsw .flag{ width:15px; height:10px; display:block; flex:0 0 auto; }
.langsw--drawer{ margin:0; border-color:rgba(255,255,255,.3); }
.langsw--drawer button + button{ border-left-color:rgba(255,255,255,.3); }
@media (max-width:1080px){
  .hdr .langsw button, .langsw button{
    min-height:44px; min-width:44px; padding:.55em .8em;
  }
}
@media (max-width:768px){ .hdr .langsw{ margin-right:8px; } }