/* Schriften selbst gehostet, kein Request an Google. Das ist der Punkt: eine
   Arokora-Beispielseite darf nicht das Gegenteil dessen vorführen, was Arokora
   verkauft. Latin-Subset, woff2, OFL-lizenziert. */
@font-face{font-family:'Archivo';src:url('../fonts/archivo-var-latin.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-var-latin.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'DM Mono';src:url('../fonts/dm-mono-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ==========================================================
   FARINA · Pizzeria e Pasta
   Eine Umgebung: Schamottstein mit Olivstich, Mehlweiß, Glut als Licht.
   ========================================================== */

:root{
  --canvas:#13150F;
  --canvas-deep:#0E100B;
  --panel:#1C1F16;
  --panel-2:#242819;
  --hairline:#333827;
  --hairline-strong:#4A5138;
  --accent:#A8331F;
  --accent-hover:#C4402B;
  --accent-ink:#E2694E;
  --accent-muted:rgba(196,64,43,.24);
  --ember:#E8A24A;
  --text-primary:#F3ECDC;
  --text-secondary:#B8B29F;

  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  /* eine Spacing-Skala, 8px Basis */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem;
  --s6:4rem; --s7:6rem; --s8:8rem; --s9:12rem;

  --gutter:clamp(1.25rem,4vw,3.5rem);
  --measure:64rem;

  --e1:cubic-bezier(.2,.7,.2,1);
  --e2:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  overflow-x:hidden;
  overflow-x:clip;              /* clip MUSS zweitens stehen */
  scroll-behavior:auto;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font:400 clamp(1rem,.96rem + .2vw,1.0625rem)/1.65 var(--body);
  letter-spacing:.005em;
  overflow-wrap:break-word;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

::selection{background:var(--accent);color:#FFF8EC}

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

.skip{
  position:fixed;left:var(--s2);top:-4rem;z-index:200;
  background:var(--accent);color:#FFF8EC;padding:.7rem 1.1rem;border-radius:.5rem;
  text-decoration:none;transition:top .25s var(--e1);
}
.skip:focus-visible{top:var(--s2)}

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

/* ---------- Umgebung hinter allem ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env-glow{
  position:absolute;inset:-25%;
  background:
    radial-gradient(38% 30% at 22% 18%,rgba(232,162,74,.085),transparent 70%),
    radial-gradient(44% 34% at 82% 74%,rgba(168,51,31,.075),transparent 72%),
    radial-gradient(60% 50% at 50% 50%,rgba(60,70,44,.10),transparent 78%);
  animation:envdrift 96s linear infinite;
  animation-delay:-31s;
}
@keyframes envdrift{
  0%{transform:translate3d(-2.5%,-1.5%,0) scale(1.04)}
  50%{transform:translate3d(2.5%,2%,0) scale(1.10)}
  100%{transform:translate3d(-2.5%,-1.5%,0) scale(1.04)}
}
.env-dust{position:absolute;inset:0;width:100%;height:100%;opacity:.5}

/* ---------- Lader ---------- */
.loader{
  position:fixed;inset:0;z-index:150;display:grid;place-items:center;
  background:var(--canvas);color:var(--text-secondary);
  transition:opacity .7s var(--e1),visibility .7s;
}
.loader.gone{opacity:0;visibility:hidden}
.loader-mark{display:grid;place-items:center;gap:var(--s2);position:relative}
.ring{width:56px;height:56px;transform:rotate(-90deg);color:var(--accent-ink)}
.ring circle{transition:stroke-dashoffset .18s linear}
.loader-word{
  font:600 .82rem/1 var(--mono);letter-spacing:.42em;text-indent:.42em;
  color:var(--text-secondary);text-transform:uppercase;
}

/* ---------- Navigation ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .45s var(--e1),border-color .45s var(--e1),backdrop-filter .45s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(14,16,11,.88);border-bottom-color:var(--hairline)}
.nav-in{
  max-width:88rem;margin:0 auto;padding:var(--s2) var(--gutter);
  display:flex;align-items:center;gap:var(--s3);
}
.logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto}
.logo-mark{width:26px;height:26px;color:var(--text-primary);flex:none}
.logo-ember{fill:var(--accent-hover)}
.logo:hover .logo-ember{fill:var(--ember)}
.logo-ember{transition:fill .35s var(--e1)}
.logo-word{
  font:600 1.18rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;
  font-variation-settings:"SOFT" 30;
}
.menu{display:flex;align-items:center;gap:var(--s3)}
.menu a:not(.btn){
  font:500 .84rem/1 var(--body);letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-secondary);text-decoration:none;padding:.45rem 0;position:relative;
  transition:color .3s var(--e1);
}
.menu a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent-ink);
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--e2);
}
.menu a:not(.btn):hover{color:var(--text-primary)}
.menu a:not(.btn):hover::after{transform:scaleX(1)}

.burger{display:none;align-items:center;gap:.55rem;background:none;border:0;cursor:pointer;padding:.5rem .2rem}
.burger-lines{display:block;width:22px}
.burger-lines i{display:block;height:1.5px;background:var(--text-primary);border-radius:2px;transition:transform .4s var(--e2),opacity .3s}
.burger-lines i+i{margin-top:6px}
.burger-label{font:500 .8rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.burger[aria-expanded="true"] .burger-lines i:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-lines i:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* ---------- Knöpfe ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 1.5rem;border-radius:2px;text-decoration:none;border:1px solid transparent;
  font:500 .86rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;position:relative;overflow:hidden;
  transition:background .38s var(--e1),color .38s var(--e1),border-color .38s var(--e1),transform .38s var(--e2);
}
.btn-accent{background:var(--accent);color:#FFF8EC}
.btn-accent:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn-accent:active{transform:translateY(0)}
.btn-ghost{border-color:var(--hairline-strong);color:var(--text-primary)}
.btn-ghost:hover{border-color:var(--text-primary);background:rgba(243,236,220,.06);transform:translateY(-2px)}
.nav-cta{padding:.7rem 1.15rem}

/* ==========================================================
   HERO
   ========================================================== */
/* 600vh: jedes Textband braucht rund 90vh Scrollweg, damit es mehrere
   Flicks lang lesbar bleibt. Vom Flick-Test bestätigt, nicht geschätzt. */
.hero{position:relative;height:600vh;z-index:1}
.hero-stage{
  position:sticky;top:0;left:0;
  height:100vh;          /* Fallback */
  height:100lvh;
  width:100%;overflow:hidden;background:var(--canvas-deep);
}

.poster{
  position:absolute;inset:0;background-size:cover;background-position:50% 46%;
  transition:opacity .9s var(--e1);
}
#hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s var(--e1);
  will-change:transform;transform:translateZ(0);
}
/* Die zweite Bildebene der Zwei-Bild-Reise. Ihre Deckkraft wird pro Frame aus
   dem Scrollfortschritt geschrieben, deshalb darf hier keine Transition
   dazwischenfunken: die .poster-Regel oben blendet in 0,9s, was jede
   Einzelschreibung verschleppen und die Fahrt zaeh machen wuerde. */
.poster-arrival{transition:none;will-change:transform,opacity}
.poster{will-change:transform}
.hero-stage.video-ready #hero-video{opacity:1}
.hero-stage.video-ready .poster{opacity:0}
.hero-stage.video-failed #hero-video{display:none}

.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,11,8,0) 34%,rgba(10,11,8,.64) 100%),
    linear-gradient(to bottom,rgba(10,11,8,.55) 0%,rgba(10,11,8,0) 34%);
}

.bands{position:absolute;inset:0}
.band{
  position:absolute;inset:0;display:grid;align-content:start;justify-items:start;
  padding:calc(env(safe-area-inset-top,0px) + 16vh) var(--gutter) 0;
  opacity:0;pointer-events:none;text-shadow:var(--tshadow);
}
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 78% 52% at 50% 22%,rgba(5,6,4,.70) 0%,rgba(5,6,4,.46) 46%,rgba(5,6,4,0) 76%);
}
.band-inner{position:relative;max-width:46rem;width:100%}
.band-line{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(2.3rem,6.6vw,5rem);line-height:1.02;letter-spacing:-.015em;
  font-variation-settings:"SOFT" 20,"WONK" 0;
}
.band .w{display:inline-block;white-space:pre}
.band .c{display:inline-block;will-change:transform,opacity}

/* Auftritt a: Word-Punch mit Überschwinger (Band 1, echot den Hitzeschlag) */
.band[data-entrance="punch"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(.62 + (.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
.band[data-entrance="punch"] .w.em{--ov:.24;--sd:.16;--ss:2.6}

/* Auftritt b: Approach-from-depth (Band 2, echot den Vorwärtsschub) */
.band[data-entrance="depth"] .band-line{
  --kc:var(--k,0);
  opacity:var(--kc);
  transform:scale(calc(.84 + .16*var(--kc)));
  transform-origin:8% 50%;
}
.band[data-entrance="depth"] .band-soft{
  position:absolute;inset:0;filter:blur(11px);opacity:calc(1 - var(--k,0));
}

/* Auftritt c: Halves parting (Band 3, die Zeile teilt sich wie die zwei Wege) */
.band[data-entrance="halves"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.4,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)));
}

/* Auftritt d: Word-by-word rise, gestaffelte Ruhe (Settle) */
.band[data-entrance="rise"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*26px));
}
.band-sub{
  margin:var(--s3) 0 0;max-width:34rem;
  font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--text-primary);
  opacity:var(--ks,0);
  transform:translateY(calc((1 - var(--ks,0))*14px));
}
.btn-row{
  display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);
  opacity:var(--kb,0);
  transform:translateY(calc((1 - var(--kb,0))*14px));
}
.band .btn{text-shadow:none}
.band.band-settle .btn-row{pointer-events:none}
.band.band-settle.cta-live .btn-row{pointer-events:auto}

/* HUD-Chip: die einzige weichgezeichnete Fläche der Seite, für Lesbarkeit auf bewegtem Bild */
.hud{
  position:absolute;left:var(--gutter);bottom:2.2rem;margin:0;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem .8rem;border-radius:10px;
  background:rgba(8,9,6,.55);border:1px solid rgba(120,126,96,.3);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font:500 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-primary);text-shadow:0 1px 3px rgba(5,6,4,.85);
  opacity:0;transition:opacity .6s var(--e1);
}
.hero-stage.hud-on .hud{opacity:1}
.hud-dot{width:6px;height:6px;border-radius:50%;background:var(--ember);flex:none;position:relative}
.hud-dot::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;background:var(--ember);opacity:.35;
  animation:emberpulse 4.5s var(--e1) infinite;animation-delay:-1.6s;
}
@keyframes emberpulse{0%,100%{opacity:.12;transform:scale(.7)}50%{opacity:.42;transform:scale(1.15)}}

.static-note{
  position:absolute;right:var(--gutter);bottom:2.2rem;margin:0;max-width:20rem;
  font:500 .7rem/1.5 var(--mono);letter-spacing:.06em;color:var(--text-secondary);
  text-align:right;text-shadow:0 1px 3px rgba(5,6,4,.9);
}
@media (max-width:700px){
  .static-note{
    left:var(--gutter);right:var(--gutter);max-width:none;text-align:center;
    font-size:.66rem;
  }
}

/* Scroll-Hinweis, nur Desktop */
.cue{
  position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);
  display:grid;justify-items:center;gap:.6rem;
  font:500 .68rem/1 var(--mono);letter-spacing:.28em;text-transform:uppercase;
  color:var(--text-secondary);text-shadow:0 1px 3px rgba(5,6,4,.9);
  transition:opacity .5s var(--e1);
}
.cue i{display:block;width:1px;height:38px;background:linear-gradient(to bottom,var(--text-secondary),transparent);position:relative;overflow:hidden}
.cue i::after{
  content:"";position:absolute;left:0;top:0;width:1px;height:12px;background:var(--ember);
  animation:cuefall 2.6s var(--e1) infinite;animation-delay:-.8s;
}
@keyframes cuefall{0%{transform:translateY(-14px);opacity:0}30%{opacity:1}100%{transform:translateY(38px);opacity:0}}
.nav.scrolled ~ main .cue,.hero-stage.intro-done .cue{opacity:0}

/* Touch-Knopf: am kleinen Viewport verankert, sonst versteckt ihn die Adressleiste */
.touch-start{
  display:none;
  position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);
  width:64px;height:64px;border-radius:50%;
  background:rgba(19,21,15,.72);border:1px solid var(--hairline-strong);
  cursor:pointer;place-items:center;
  transition:opacity .5s var(--e1),transform .4s var(--e2),background .4s var(--e1);
}
.touch-start .tri{
  width:0;height:0;border-left:13px solid var(--text-primary);
  border-top:8.5px solid transparent;border-bottom:8.5px solid transparent;margin-left:4px;
}
.touch-start .halo{
  position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--accent-ink);
  animation:halo 2.8s var(--e1) infinite;animation-delay:-.6s;
}
@keyframes halo{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.85);opacity:0}}
.touch-start.gone{opacity:0;pointer-events:none;transform:translateX(-50%) scale(.9)}

@media (pointer:coarse){
  .cue{display:none}
  .touch-start{display:grid}
}
@media (max-width:700px){ .cue{display:none} }
/* Hochkant zeigt der mittige Ausschnitt nur Mauerwerk. Der Bildausschnitt
   wandert nach rechts, damit Bogen und Feuer im Bild bleiben. */
@media (max-width:700px){
  .poster{background-position:66% 48%}
  #hero-video{object-position:66% 48%}
}
@supports (height:100svh){
  .touch-start{top:calc(100svh - 64px - 2.2rem - env(safe-area-inset-bottom,0px));bottom:auto}
  .hud{top:calc(100svh - 2.2rem - 2.1rem - env(safe-area-inset-bottom,0px));bottom:auto}
  .static-note{top:calc(100svh - 2.2rem - 3.6rem - env(safe-area-inset-bottom,0px));bottom:auto}
}
/* Auf dem Handy teilen sich Chip, Hinweis und Abspielknopf denselben unteren
   Streifen. Der Chip wandert nach oben, der Hinweis über den Knopf. */
@media (max-width:700px){
  .hud{
    left:var(--gutter);transform:none;
    top:calc(env(safe-area-inset-top,0px) + 4.9rem);bottom:auto;
  }
  .static-note{bottom:6.6rem;top:auto}
}
@supports (height:100svh){
  @media (max-width:700px){
    .hud{top:calc(env(safe-area-inset-top,0px) + 4.9rem);bottom:auto}
    .static-note{
      top:calc(100svh - 64px - 2.2rem - 4.4rem - env(safe-area-inset-bottom,0px));
      bottom:auto;
    }
  }
}
/* flache Fenster: kleine Overlays haben keinen Platz */
@media (max-height:560px){.hud,.cue,.static-note{display:none}}

/* ==========================================================
   ABSCHNITTE
   ========================================================== */
main{position:relative;z-index:1}
.sec{position:relative;padding:var(--s8) 0;background:var(--canvas)}
.sec::before{content:"";position:absolute;inset:0;background:inherit;z-index:-1}
.wrap{max-width:76rem;margin:0 auto;padding:0 var(--gutter);position:relative}
.wrap-narrow{max-width:52rem}

.kicker{
  margin:0 0 var(--s2);font:500 .72rem/1 var(--mono);
  letter-spacing:.3em;text-transform:uppercase;color:var(--accent-ink);
}
h2{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.012em;line-height:1.06}
h3{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.01em}
.h-lead,.h-hold,.h-karte,.h-fragen,.h-besuch,.h-res{font-size:clamp(2rem,4.6vw,3.5rem)}
.lede{
  margin:var(--s3) 0 0;max-width:40rem;font-size:clamp(1.02rem,1.5vw,1.18rem);
  color:var(--text-secondary);
}
[data-split] .w{display:inline-block;white-space:pre}
[data-split] .w{
  --kc:0;opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*18px));
  transition:opacity .7s var(--e1),transform .8s var(--e2);
}
.in [data-split] .w,[data-split].in .w{--kc:1}
.wbr-wide{display:inline}
@media (max-width:760px){.wbr-wide{display:none}}

/* ---------- Der Weg des Mehls, mit dem Zeitband ---------- */
.sec-weg{padding-bottom:var(--s6)}
@media (min-width:980px){
  .sec-weg .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:0 var(--s7);align-items:end}
  .sec-weg .kicker{grid-column:1/-1}
  .sec-weg .lede{margin-top:0;padding-bottom:.4rem}
  .sec-weg .timeline{grid-column:1/-1}
}
.timeline{position:relative;margin-top:var(--s7);padding-left:clamp(3rem,7vw,5.5rem)}
.tl-svg{
  position:absolute;left:clamp(.9rem,2.4vw,2rem);top:.4rem;bottom:.4rem;width:8px;height:auto;
  color:var(--hairline-strong);
}
.tl-path{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--off,900)}
.tl-marks{list-style:none;margin:0;padding:0;display:grid;gap:var(--s6)}
.tl-mark{position:relative;opacity:0;transform:translateY(16px);transition:opacity .7s var(--e1),transform .8s var(--e2)}
.tl-mark.lit{opacity:1;transform:none}
.tl-glyph{
  position:absolute;left:calc(-1*clamp(3rem,7vw,5.5rem) + clamp(.9rem,2.4vw,2rem) - 12px);
  top:-.15rem;width:32px;height:32px;color:var(--accent-ink);
  background:var(--canvas);border-radius:50%;padding:2px;
}
.tl-time{
  margin:0;font:500 .78rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-secondary);
}
.tl-say{
  margin:.45rem 0 0;font-family:var(--display);font-weight:600;
  font-size:clamp(1.4rem,2.8vw,2.1rem);line-height:1.1;
}

/* ---------- Mehl, Ruhe, Feuer ---------- */
.sec-steps{padding-top:var(--s6)}
.sec-steps .wrap{display:grid;gap:var(--s8)}
.step{display:grid;gap:var(--s4);align-items:center}
@media (min-width:820px){
  .step{grid-template-columns:1.15fr .85fr;gap:var(--s6)}
  .step-b{grid-template-columns:.85fr 1.15fr}
  .step-b .step-media{order:2}
  .step-b .step-text{order:1}
  .step-a{margin-right:clamp(0px,6vw,7rem)}
  .step-b{margin-left:clamp(0px,6vw,7rem)}
  .step-c{margin-right:clamp(0px,3vw,3.5rem)}
}
.step-media{position:relative;overflow:hidden;background:var(--panel)}
.step-media img{
  width:100%;aspect-ratio:3/2;object-fit:cover;
  transform:scale(1.06);transition:transform 1.4s var(--e2);
}
.step.in .step-media img{transform:scale(1);animation:kenburns 26s ease-in-out infinite alternate;animation-delay:-6s}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.045) translate3d(-1%,-.6%,0)}}
.step-cover{position:absolute;inset:0;background:var(--canvas);transform:translateY(0);transition:transform 1.1s var(--e2)}
.step.in .step-cover{transform:translateY(101%)}
.step-no{
  margin:0 0 var(--s1);font:500 .78rem/1 var(--mono);letter-spacing:.28em;color:var(--accent-ink);
}
.step-text h3{font-size:clamp(1.7rem,3.4vw,2.6rem);margin-bottom:var(--s2)}
.step-text p{margin:0;color:var(--text-secondary);max-width:34rem}
.step-text{opacity:0;transform:translateY(20px);transition:opacity .8s var(--e1) .18s,transform .9s var(--e2) .18s}
.step.in .step-text{opacity:1;transform:none}

/* ---------- Die 48 Stunden ---------- */
.sec-hold{background:var(--canvas-deep);text-align:center;overflow:hidden}
.sec-hold .kicker{color:var(--ember)}
.sec-hold .h-hold{margin-inline:auto;max-width:22ch}
.hold-stage{position:relative;margin:var(--s6) auto var(--s4);width:min(320px,72vw)}
.dough{width:100%;height:auto;overflow:visible;position:relative;z-index:1}
.dough-g{
  transform-box:fill-box;transform-origin:50% 100%;
  transform:scale(calc(.66 + .34*var(--hold,0)));
  animation:breathe 7s ease-in-out infinite;animation-delay:-2.2s;
}
.dough-body{fill:url(#dg)}
@keyframes breathe{0%,100%{translate:0 0}50%{translate:0 -3px}}
.dough-hi{stroke:rgba(255,255,255,.55);stroke-width:3.5;opacity:calc(.2 + .45*var(--hold,0))}
.dough-shadow{
  fill:#000;opacity:calc(.28 + .24*var(--hold,0));
  transform:scaleX(calc(.7 + .3*var(--hold,0)));transform-box:fill-box;transform-origin:50% 50%;
}
.hold-stage::after{
  content:"";position:absolute;left:50%;top:52%;width:74%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(232,162,74,.20) 0%,rgba(232,162,74,0) 68%);
  opacity:calc(.25 + .75*var(--hold,0));
}
.hold-clock{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;
  font:500 clamp(2rem,6vw,3rem)/1 var(--mono);color:var(--canvas-deep);
  letter-spacing:-.02em;z-index:2;
}
.hold-unit{font-size:.5em;margin-left:.12em;opacity:.65}
.hold-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:.95rem 2rem;border:1px solid var(--hairline-strong);background:transparent;border-radius:2px;
  cursor:pointer;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none;
  font:500 .86rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .4s var(--e1),color .4s var(--e1);
}
.hold-btn:hover{border-color:var(--text-primary)}
.hold-btn.is-done{cursor:default;border-color:var(--accent);color:#FFF8EC}
.hold-btn.is-done:hover{border-color:var(--accent)}
.hold-fill{
  position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--accent);
  transform:scaleX(var(--hold,0));transform-origin:left;z-index:-1;
}
.hold-label{position:relative}
.hold-hint{margin:var(--s2) 0 0;font:500 .74rem/1.5 var(--mono);letter-spacing:.12em;color:var(--text-secondary)}
.hold-facts{
  list-style:none;margin:var(--s5) auto 0;padding:0;max-width:34rem;display:grid;gap:var(--s2);text-align:left;
}
/* Ungelöst sind es drei wartende Haarlinien, kein Loch. Der Text kommt
   erst mit dem Durchhalten, springt aber nichts, weil der Platz schon steht. */
.hold-facts li{
  padding-left:var(--s3);border-left:1px solid var(--hairline);
  color:transparent;transform:translateX(-10px);min-height:1.65em;
  transition:color .7s var(--e1),transform .8s var(--e2),border-color .7s var(--e1);
}
.hold-facts li.lit{color:var(--text-secondary);transform:none;border-left-color:var(--accent-ink)}
.hold-end{
  margin:var(--s4) 0 0;font-family:var(--display);font-weight:600;
  font-size:clamp(1.3rem,2.6vw,1.9rem);opacity:0;transform:translateY(12px);
  transition:opacity .8s var(--e1),transform .9s var(--e2);
}
.hold-end.lit{opacity:1;transform:none}

/* ---------- Die Karte ---------- */
.karte-head{max-width:40rem;margin-bottom:var(--s6)}
.karte-grid{display:grid;gap:var(--s7)}
@media (min-width:860px){.karte-grid{grid-template-columns:1fr 1fr;gap:var(--s6)}}
.karte-fig{margin:0 0 var(--s4);overflow:hidden;background:var(--panel)}
.karte-fig img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.2s var(--e2)}
.karte-col:hover .karte-fig img{transform:scale(1.035)}
.karte-h{
  font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:var(--s3);
  padding-bottom:var(--s2);border-bottom:1px solid var(--hairline);
}
.menu-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.menu-list li{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:.6rem}
.mi-name{font-family:var(--display);font-weight:600;font-size:1.08rem}
.mi-rule{
  height:1px;background:repeating-linear-gradient(to right,var(--hairline-strong) 0 2px,transparent 2px 6px);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--e2);
}
.karte-col.in .mi-rule{transform:scaleX(1)}
.menu-list li:nth-child(2) .mi-rule{transition-delay:.07s}
.menu-list li:nth-child(3) .mi-rule{transition-delay:.14s}
.menu-list li:nth-child(4) .mi-rule{transition-delay:.21s}
.menu-list li:nth-child(5) .mi-rule{transition-delay:.28s}
.menu-list li:nth-child(6) .mi-rule{transition-delay:.35s}
.mi-price{font:500 .95rem/1 var(--mono);color:var(--text-primary)}
.mi-desc{grid-column:1/-1;margin:0;font-size:.92rem;color:var(--text-secondary)}
.karte-foot{margin:var(--s6) 0 0;font-size:.92rem;color:var(--text-secondary)}

/* ---------- Stimmen ---------- */
.sec-stimmen{background:var(--canvas-deep)}
.quotes{display:grid;gap:var(--s5);margin-top:var(--s4)}
@media (min-width:900px){.quotes{grid-template-columns:repeat(3,1fr);gap:var(--s4)}}
.quote{
  margin:0;padding:var(--s4);background:var(--panel);
  opacity:0;transform:translateY(22px) rotate(-.6deg);
  transition:opacity .8s var(--e1),transform .9s var(--e2),background .5s var(--e1);
}
.quote:nth-child(2){transform:translateY(22px) rotate(.5deg)}
.quote:nth-child(3){transform:translateY(22px) rotate(-.3deg)}
.quote.in{opacity:1;transform:none}
.quote:nth-child(2).in{transition-delay:.1s}
.quote:nth-child(3).in{transition-delay:.2s}
.quote:hover{background:var(--panel-2)}
.quote blockquote{
  margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.08rem,2vw,1.3rem);
  line-height:1.42;
}
.quote figcaption{
  margin-top:var(--s3);font:500 .74rem/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-secondary);
}

/* ---------- Fragen ---------- */
.faq{margin-top:var(--s6);border-top:1px solid var(--hairline)}
.fq{
  border-bottom:1px solid var(--hairline);position:relative;
  opacity:0;transform:translateY(14px);transition:opacity .7s var(--e1),transform .8s var(--e2);
}
.fq.in{opacity:1;transform:none}
.fq:nth-child(2).in{transition-delay:.06s}
.fq:nth-child(3).in{transition-delay:.12s}
.fq:nth-child(4).in{transition-delay:.18s}
.fq:nth-child(5).in{transition-delay:.24s}
.fq:nth-child(6).in{transition-delay:.3s}
.fq::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent-ink);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--e2);
}
.fq[open]::before{transform:scaleY(1)}
.fq summary{
  list-style:none;cursor:pointer;padding:var(--s3) var(--s4) var(--s3) var(--s3);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,2vw,1.28rem);
  transition:color .35s var(--e1),padding-left .45s var(--e2);
}
.fq summary::-webkit-details-marker{display:none}
.fq summary:hover{color:var(--accent-ink);padding-left:calc(var(--s3) + 6px)}
.fq summary i{
  flex:none;width:14px;height:14px;position:relative;
}
.fq summary i::before,.fq summary i::after{
  content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;background:currentColor;
  transition:transform .45s var(--e2);
}
.fq summary i::after{transform:rotate(90deg)}
.fq[open] summary i::after{transform:rotate(0)}
.fq-body{padding:0 var(--s4) var(--s4) var(--s3)}
.fq-body p{margin:0;color:var(--text-secondary);max-width:44rem}

/* ---------- Besuch ---------- */
.besuch-grid{display:grid;gap:var(--s6)}
@media (min-width:860px){.besuch-grid{grid-template-columns:1fr 1fr;gap:var(--s7)}}
.open-state{
  display:inline-flex;align-items:center;gap:.6rem;margin:var(--s4) 0 0;
  font:500 .76rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary);
}
.open-dot{width:8px;height:8px;border-radius:50%;background:var(--text-secondary);position:relative;flex:none}
.open-state.is-open .open-dot{background:#8FB25A}
.open-state.is-open .open-dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;background:#8FB25A;opacity:.3;
  animation:emberpulse 5s var(--e1) infinite;animation-delay:-2s;
}
.hours{list-style:none;margin:0;padding:0;display:grid;gap:0}
.hours li{
  display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;
  padding:var(--s2) 0;border-bottom:1px solid var(--hairline);
  opacity:0;transform:translateX(-14px);transition:opacity .6s var(--e1),transform .7s var(--e2);
}
.hours li.in{opacity:1;transform:none}
.hours li:nth-child(2).in{transition-delay:.07s}
.hours li:nth-child(3).in{transition-delay:.14s}
.hours li:nth-child(4).in{transition-delay:.21s}
.hours li span:last-child{font:500 .92rem/1 var(--mono);color:var(--text-secondary)}
.adr{margin:var(--s4) 0 0;font-style:normal;display:grid;gap:.4rem;color:var(--text-secondary)}
.adr a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--hairline-strong);transition:border-color .35s var(--e1),color .35s var(--e1)}
.adr a:hover{color:var(--accent-ink);border-bottom-color:var(--accent-ink)}

/* ---------- Reservierung ---------- */
.sec-res{background:var(--canvas-deep)}
.res-form{margin-top:var(--s6);display:grid;gap:var(--s3);opacity:0;transform:translateY(20px);transition:opacity .8s var(--e1),transform .9s var(--e2)}
.res-form.in{opacity:1;transform:none}
.f-row{display:grid;gap:var(--s3)}
@media (min-width:680px){
  .f-row{grid-template-columns:1fr 1fr}
  .f-row-3{grid-template-columns:1fr 1fr 1fr}
}
.field{display:grid;gap:.45rem}
.f-label{font:500 .72rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
.field input,.field textarea{
  width:100%;background:var(--panel);border:1px solid var(--hairline);color:var(--text-primary);
  padding:.8rem .9rem;border-radius:2px;font:400 1rem/1.4 var(--body);
  transition:border-color .35s var(--e1),background .35s var(--e1);
}
.field textarea{resize:vertical;min-height:5.5rem}
.field input::placeholder,.field textarea::placeholder{color:#7C7A6B}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent-ink);background:var(--panel-2)}
.field.bad input,.field.bad textarea{border-color:var(--accent-hover)}
.f-err{min-height:1.1rem;font:500 .74rem/1.1 var(--mono);color:var(--accent-ink)}
.btn-submit{margin-top:var(--s2);justify-self:start;position:relative}
.btn-submit::after{
  content:"";position:absolute;inset:-6px;border-radius:4px;pointer-events:none;
  box-shadow:0 0 34px 6px rgba(232,162,74,.35);opacity:0;
  animation:glowpulse 6s ease-in-out infinite;animation-delay:-2s;
}
@keyframes glowpulse{0%,100%{opacity:0}50%{opacity:.55}}
.res-note{margin:0;font-size:.86rem;color:var(--text-secondary)}
.res-done{
  margin:var(--s5) 0 0;padding:var(--s4);background:var(--panel);border-left:2px solid var(--accent-ink);
  font-family:var(--display);font-weight:400;font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.45;
}

/* ---------- Footer ---------- */
.foot{background:var(--canvas-deep);border-top:1px solid var(--hairline);padding:var(--s7) 0 var(--s5);position:relative;z-index:1}
.foot-grid{display:grid;gap:var(--s5)}
@media (min-width:820px){.foot-grid{grid-template-columns:1.2fr .8fr 1fr}}
.logo-foot{margin-right:0}
.foot-say{margin:var(--s2) 0 0;color:var(--text-secondary);font-size:.95rem}
.foot-nav{display:grid;gap:.6rem;align-content:start}
.foot-nav a{
  text-decoration:none;color:var(--text-secondary);font-size:.95rem;justify-self:start;
  border-bottom:1px solid transparent;transition:color .3s var(--e1),border-color .3s var(--e1);
}
.foot-nav a:hover{color:var(--text-primary);border-bottom-color:var(--accent-ink)}
.foot-contact{display:grid;gap:.4rem;color:var(--text-secondary);font-size:.95rem}
.foot-contact a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--hairline-strong)}
.foot-contact a:hover{color:var(--accent-ink);border-bottom-color:var(--accent-ink)}
.foot-disclosure{margin:var(--s6) 0 0;padding-top:var(--s4);border-top:1px solid var(--hairline);color:var(--text-secondary);font-size:.88rem;max-width:48rem}
.foot-copy{margin:var(--s2) 0 0;color:var(--text-secondary);font-size:.82rem}

/* ---------- 404 ---------- */
.err-page{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;padding:var(--s6) var(--gutter)}
.err-page h1{font-family:var(--display);font-weight:600;font-size:clamp(2.4rem,7vw,4.5rem);margin:0 0 var(--s3);line-height:1.05}
.err-page p{margin:0 0 var(--s5);color:var(--text-secondary);max-width:34rem}
.err-num{font:500 .8rem/1 var(--mono);letter-spacing:.32em;color:var(--accent-ink);margin:0 0 var(--s3)}

/* ==========================================================
   MOBIL
   ========================================================== */
@media (max-width:900px){
  .burger{display:inline-flex;margin-left:auto}
  .menu{
    position:fixed;inset:0 0 auto;top:0;padding:5.5rem var(--gutter) var(--s6);
    background:var(--canvas-deep);border-bottom:1px solid var(--hairline);
    flex-direction:column;align-items:stretch;gap:var(--s3);
    transform:translateY(-102%);transition:transform .55s var(--e2);
    z-index:-1;
  }
  .menu.open{transform:translateY(0)}
  .menu a:not(.btn){font-size:1.05rem;padding:.6rem 0;border-bottom:1px solid var(--hairline)}
  .nav-cta{margin-top:var(--s2);padding:.95rem 1.15rem}
  .band{padding-top:calc(env(safe-area-inset-top,0px) + 13vh)}
  .band-inner{max-width:100%}
}
@media (pointer:coarse){
  .btn,.hold-btn,.fq summary,.burger{min-height:44px}
  .btn,.hold-btn{display:inline-flex;align-items:center;justify-content:center}
  .menu a:not(.btn){min-height:44px;display:flex;align-items:center}
}
@media (max-width:520px){
  .sec{padding:var(--s7) 0}
  .menu-list li{grid-template-columns:1fr auto}
  .mi-rule{display:none}
}

/* Pausieren, wenn der Tab nicht sichtbar ist */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ==========================================================
   REDUZIERTE BEWEGUNG
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
  }
  .env-glow{animation:none}
  .step-media img{transform:none;animation:none}
  .step-cover{transform:translateY(101%)}
  .step-text,.tl-mark,.quote,.fq,.hours li,.res-form{opacity:1 !important;transform:none !important}
  .mi-rule{transform:scaleX(1)}
  [data-split] .w{--kc:1 !important}
  .band .w,.band .band-line{opacity:1 !important}
  .cue,.touch-start{display:none !important}
  .tl-path{stroke-dashoffset:0 !important}
  .hold-end{opacity:1 !important;transform:none !important}
  .hold-facts li{color:var(--text-secondary) !important;transform:none !important;border-left-color:var(--accent-ink)}
}


/* ---------- Hochformat: Bild als mittiges Band -------------------------
   Die Hero-Bilder sind 16:9. Auf einem hochkant gehaltenen Telefon (390x844)
   skalierte background-size:cover sie auf 1230px Breite und schnitt zwei
   Drittel weg -- sichtbar blieben 32 Prozent, bei MASSWERK die leere
   Wandmitte ohne Fenster und ohne Raumkanten.

   Verkleinert wird deshalb die BILDEBENE, nicht die Buehne: 75vw hoch zeigt
   rund drei Viertel der Bildbreite, auf jedem Geraet gleich viel, und ueber
   gleiche top/bottom-Abstaende sitzt das Band mittig im Bild. Die Buehne
   bleibt bildschirmhoch, damit die Textbaender ihren Platz behalten -- der
   Schlussblock mit Ueberschrift, Text und zwei Schaltflaechen braucht 439px
   und wuerde in einem 293px hohen Band abgeschnitten.

   Zentriert wird ueber top/bottom und bewusst nicht ueber transform: das
   Skript schreibt dort jeden Frame die Parallaxe hinein und wuerde eine
   Verschiebung sofort ueberschreiben. */
@media (max-width: 760px) and (orientation: portrait) {
  .poster, .poster-arrival, #hero-video{
    top: calc((100vh - 75vw) / 2);      /* Rueckfall */
    top: calc((100lvh - 75vw) / 2);
    bottom: calc((100vh - 75vw) / 2);
    bottom: calc((100lvh - 75vw) / 2);
    height: auto;
  }

  /* Der Text stuende sonst oberhalb des Bildbands. */
  .band{
    align-content: center;
    padding-top: calc(env(safe-area-inset-top, 0px) + 1rem);
    padding-bottom: 1rem;
  }
}