/* ==========================================================================
   MOLTEN – Smash Burger
   Grund = exakt das Schwarz aus dem Video (5,5,5), sonst sieht man die
   Bildkante. Akzent ist Cheddar, Schrift ist Brötchenkrume statt Weiß.
   ========================================================================== */
:root {
  --grund: #050505;
  --grund-warm: #0f0a06;
  --kaese: #ffb31a;
  --kaese-tief: #f08400;
  --kaese-schein: rgba(255, 179, 26, .35);
  --krume: #f2e4c9;
  --krume-leise: #a99880;
  --linie: rgba(242, 228, 201, .13);

  --schrift-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --schrift-text: 'Instrument Sans', system-ui, sans-serif;
  --schrift-serif: 'Instrument Serif', 'Times New Roman', serif;

  --rand: clamp(18px, 5vw, 48px);
  --breit: 1180px;
  --schwung: cubic-bezier(.18, 1.12, .28, 1);
  --raus: cubic-bezier(.16, 1, .3, 1);
  --ruhig: 420ms var(--raus);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--krume);
  font: 400 1rem/1.6 var(--schrift-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--kaese); outline-offset: 4px; border-radius: 6px; }

.sprung {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  padding: .6rem 1rem; background: var(--kaese); color: #120a02; border-radius: 999px;
  font-weight: 600; text-decoration: none;
}
.sprung:focus { top: 1rem; }

.karte, .besuch { scroll-margin-top: 70px; }
.rahmen { width: min(100% - 2 * var(--rand), var(--breit)); margin-inline: auto; }

/* --- Typo ----------------------------------------------------------------- */
.ueber {
  display: flex; align-items: center; gap: .8rem;
  margin: 0 0 1rem;
  font: 600 .7rem/1.2 var(--schrift-text);
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--kaese);
}
.ueber::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; flex: none; }
.titel {
  margin: 0;
  font-family: var(--schrift-display);
  font-weight: 900;
  font-size: clamp(2.9rem, 5.6vw, 4.6rem);
  line-height: 1.02;                 /* Umlaute brauchen Platz zur Zeile darüber */
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--krume);
  text-wrap: balance;
}
.titel--mittel { font-size: clamp(2.3rem, 4vw, 3.4rem); }
.anriss {
  margin: 1.1rem 0 0;
  max-width: 34ch;
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  color: var(--krume-leise);
  text-wrap: pretty;
}

/* Das Wort „Käse" tropft */
.kaese {
  position: relative; display: inline-block;
  color: var(--kaese);
  text-shadow: 0 0 28px rgba(255,179,26,.18);
}
.kaese__tropfen { position: absolute; left: 0; right: 0; top: 86%; height: 0; pointer-events: none; }
.kaese__tropfen i {
  position: absolute; top: 0; width: .11em; border-radius: 0 0 1em 1em;
  background: linear-gradient(var(--kaese), var(--kaese-tief));
  transform-origin: top; transform: scaleY(0);
  animation: tropfen 1.6s var(--schwung) forwards;
}
.kaese__tropfen i::after {
  content: ''; position: absolute; left: 50%; bottom: -.07em; width: .2em; height: .2em;
  margin-left: -.1em; border-radius: 50%; background: var(--kaese-tief);
}
.kaese__tropfen i:nth-child(1) { left: 12%; height: .2em; animation-delay: .9s; }
.kaese__tropfen i:nth-child(2) { left: 40%; height: .34em; animation-delay: 1.05s; }
.kaese__tropfen i:nth-child(3) { left: 64%; height: .14em; animation-delay: 1.2s; }
.kaese__tropfen i:nth-child(4) { left: 85%; height: .26em; animation-delay: 1.32s; }
@keyframes tropfen {
  0% { transform: scaleY(0); }
  70% { transform: scaleY(1.08); }
  100% { transform: scaleY(1); }
}

/* --- Knöpfe ---------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.4rem;
  border-radius: 999px; border: 1.5px solid transparent;
  font: 600 .95rem/1 var(--schrift-text);
  text-decoration: none; white-space: nowrap;
  transition: transform 520ms var(--schwung), box-shadow 520ms var(--raus), background 240ms, color 240ms, border-color 240ms;
}
.knopf--kaese {
  background: var(--kaese); color: #160c02;
  box-shadow: 0 0 0 0 var(--kaese-schein);
}
.knopf--kaese:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -14px rgba(255,179,26,.55);
}
.knopf--rand { border-color: rgba(242,228,201,.32); color: var(--krume); }
.knopf--rand:hover { border-color: var(--kaese); color: var(--kaese); transform: translateY(-3px); }
.knopf:active { transform: translateY(0) scale(.97); transition-duration: 120ms; }
.taten { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }

/* --- Kopfzeile: liegt auf, wird beim Scrollen zur Glaspille ---------------- */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding: 0 var(--rand);
  transition: padding var(--ruhig);
}
.kopf::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 150%;
  background: linear-gradient(to bottom, rgba(5,5,5,.9), rgba(5,5,5,.4) 50%, transparent);
  pointer-events: none; transition: opacity var(--ruhig);
}
.kopf[data-gescrollt='ja'] { padding-top: 10px; }
.kopf[data-gescrollt='ja']::before { opacity: 0; }
.kopf__innen {
  position: relative;
  width: min(100%, var(--breit) + 40px); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 72px; padding-inline: 0;
  border: 1px solid transparent; border-radius: 999px;
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  transition: min-height var(--ruhig), padding var(--ruhig), background var(--ruhig),
              border-color var(--ruhig), box-shadow var(--ruhig),
              backdrop-filter var(--ruhig), -webkit-backdrop-filter var(--ruhig);
}
.kopf[data-gescrollt='ja'] .kopf__innen,
.kopf[data-menue='offen'] .kopf__innen {
  min-height: 58px; padding-inline: 1.1rem .5rem;
  background: linear-gradient(180deg, rgba(255,244,220,.08), rgba(255,244,220,.02) 50%, rgba(255,244,220,.05)), rgba(16,11,7,.55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-color: rgba(242,228,201,.16);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 18px 44px rgba(0,0,0,.55);
}

.marke { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.marke__zeichen { width: 30px; height: 33px; fill: var(--kaese); overflow: visible; flex: none; }
.marke__zeichen .tropfen { transform-origin: 50% 29px; transition: transform 700ms var(--schwung); }
.marke:hover .tropfen--1 { transform: scaleY(1.35); }
.marke:hover .tropfen--2 { transform: scaleY(1.5); transition-delay: 60ms; }
.marke:hover .tropfen--3 { transform: scaleY(2.2); transition-delay: 120ms; }
.marke__text { display: grid; line-height: 1; }
.marke__wort {
  font: 900 1.85rem/0.9 var(--schrift-display);
  letter-spacing: .05em; text-transform: uppercase;
}
.marke__unter {
  margin-top: .2rem;
  font: 600 .5rem/1 var(--schrift-text); letter-spacing: .32em; text-transform: uppercase;
  color: var(--krume-leise);
}

.navi { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.2rem); }
.navi a:not(.knopf) {
  position: relative; padding: .4rem 0;
  font: 800 1.12rem/1 var(--schrift-display); letter-spacing: .03em; text-transform: uppercase;
  text-decoration: none; color: var(--krume-leise);
  transition: color 200ms;
}
.navi a:not(.knopf)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  border-radius: 2px; background: var(--kaese);
  transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--schwung);
}
.navi a:not(.knopf):hover { color: var(--krume); }
.navi a:not(.knopf):hover::after { transform: scaleX(1); }
.navi__tat {
  min-height: 42px; padding: 0 1.1rem; border-radius: 10px;
  font: 800 1.05rem/1 var(--schrift-display); letter-spacing: .04em; text-transform: uppercase;
}

.menueknopf {
  display: none; position: relative; width: 44px; height: 44px; padding: 0;
  border-radius: 14px; border: 1px solid rgba(242,228,201,.2);
  background: rgba(242,228,201,.06); color: var(--krume); cursor: pointer;
}
.menueknopf span {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 1.6px; margin-left: -9px;
  background: currentColor; border-radius: 1px;
  transition: transform 280ms var(--raus), opacity 160ms;
}
.menueknopf span:nth-child(1) { transform: translateY(-6px); }
.menueknopf span:nth-child(3) { transform: translateY(6px); }
.kopf[data-menue='offen'] .menueknopf span:nth-child(1) { transform: rotate(45deg); }
.kopf[data-menue='offen'] .menueknopf span:nth-child(2) { opacity: 0; }
.kopf[data-menue='offen'] .menueknopf span:nth-child(3) { transform: rotate(-45deg); }

@media (max-width: 999px) {
  .menueknopf { display: block; }
  .navi {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: .2rem;
    padding: .8rem; border-radius: 26px;
    background: rgba(16,11,7,.94); border: 1px solid rgba(242,228,201,.14);
    box-shadow: 0 24px 50px rgba(0,0,0,.6);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity 260ms, transform 420ms var(--schwung), visibility 0s 260ms;
  }
  .kopf[data-menue='offen'] .navi { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .navi a:not(.knopf) { padding: .95rem .8rem; font-size: .85rem; }
  .navi a:not(.knopf)::after { display: none; }
  .navi__tat { margin-top: .4rem; min-height: 50px; }
}

/* --- Bühne ------------------------------------------------------------------ */
.buehne { position: relative; height: 560vh; }
.buehne__klebe { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.buehne__leinwand { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.phase {
  position: absolute; z-index: 2;
  left: max(var(--rand), calc((100vw - var(--breit)) / 2));
  top: 50%; transform: translateY(-50%);
  width: clamp(280px, 30vw, 430px);
  will-change: opacity, transform;
}
.phase[aria-hidden='true'] { pointer-events: none; }
.phase--schmelz, .phase--plan { opacity: 0; }

/* Auftritt der Hero-Texte: gestaffelt, mit Schwung */
.phase--hero > * { animation: auftritt 1.1s var(--schwung) both; }
.phase--hero > :nth-child(1) { animation-delay: .1s; }
.phase--hero > :nth-child(2) { animation-delay: .22s; }
.phase--hero > :nth-child(3) { animation-delay: .36s; }
.phase--hero > :nth-child(4) { animation-delay: .48s; }
@keyframes auftritt {
  from { opacity: 0; transform: translateY(34px) scale(.96); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* Etiketten am Bauplan (Desktop); Lage wird per Skript gesetzt */
.lagen { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 2; pointer-events: none; counter-reset: lage; }
.lagen li {
  position: absolute; left: 0; top: 0; width: 300px;
  counter-increment: lage; opacity: 0;
  display: grid; gap: .15rem;
  will-change: transform, opacity;
}
.lagen b {
  font: 800 1.35rem/1 var(--schrift-display); letter-spacing: .03em; text-transform: uppercase;
  color: var(--krume);
}
.lagen b::before {
  content: counter(lage, decimal-leading-zero);
  margin-right: .5rem;
  font: italic 400 1.05rem/1 var(--schrift-serif); letter-spacing: 0; color: var(--kaese);
  vertical-align: .05em; text-transform: none;
}
.lagen span { font-size: .84rem; line-height: 1.35; color: var(--krume-leise); }
.lagen--knapp span { display: none; }
.lagen--knapp b { font-size: 1.2rem; }

/* Kapitelleiste links: wo man im Ablauf steht */
.kapitel {
  --fort: 0;
  position: absolute; z-index: 2; list-style: none; margin: 0; padding: 0 0 0 1.1rem;
  left: max(var(--rand), calc((100vw - var(--breit)) / 2));
  bottom: clamp(28px, 6vh, 56px);
  display: grid; gap: .7rem;
}
.kapitel::before, .kapitel::after {
  content: ''; position: absolute; left: 0; top: .2rem; bottom: .2rem; width: 1px; background: var(--linie);
}
.kapitel::after { background: var(--kaese); transform-origin: top; transform: scaleY(var(--fort)); }
.kapitel li {
  display: flex; align-items: baseline; gap: .7rem;
  font: 600 .68rem/1 var(--schrift-text); letter-spacing: .22em; text-transform: uppercase;
  color: var(--krume-leise); opacity: .45;
  transition: opacity 500ms var(--raus), color 500ms var(--raus), transform 700ms var(--raus);
}
.kapitel li i { font: italic 400 1.15rem/1 var(--schrift-serif); letter-spacing: 0; color: inherit; }
.kapitel li[data-aktiv] { opacity: 1; color: var(--krume); transform: translateX(6px); }
.kapitel li[data-aktiv] i { color: var(--kaese); }

/* Handy: statt neun Etiketten eine Zeile unten, die mitläuft */
.lage-jetzt {
  display: none; position: absolute; z-index: 2;
  left: var(--rand); right: var(--rand); bottom: max(22px, env(safe-area-inset-bottom));
  margin: 0; padding: .85rem 1rem; border-radius: 18px;
  background: rgba(16,11,7,.72); border: 1px solid var(--linie);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transition: opacity 300ms;
}
.lage-jetzt em { font: italic 400 1.05rem/1 var(--schrift-serif); color: var(--kaese); margin-right: .5rem; }
.lage-jetzt b { font: 800 1.2rem/1 var(--schrift-display); text-transform: uppercase; letter-spacing: .03em; }
.lage-jetzt span { display: block; margin-top: .3rem; font-size: .84rem; color: var(--krume-leise); }

.scrollhinweis {
  display: none;
  position: absolute; z-index: 2; bottom: 28px;
  left: max(var(--rand), calc((100vw - var(--breit)) / 2));
  display: flex; flex-direction: row-reverse; align-items: center; gap: .8rem;
  font: 600 .66rem/1 var(--schrift-text); letter-spacing: .22em; text-transform: uppercase;
  color: var(--krume-leise); text-decoration: none; white-space: nowrap;
  animation: auftritt 1s 1s var(--schwung) both;
}
.scrollhinweis i {
  width: 4px; height: 26px; border-radius: 4px; background: var(--kaese);
  transform-origin: top; animation: rinnsal 1.8s 1.6s var(--raus) infinite;
}
.scrollhinweis:hover { color: var(--krume); }
@keyframes rinnsal {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(16px); opacity: 0; }
}

@media (max-width: 899px) {
  .phase {
    left: var(--rand); right: var(--rand); width: auto;
    top: calc(84px + 1vh); transform: none;
  }
  .phase .anriss { max-width: 40ch; }
  .titel { font-size: clamp(2.5rem, 11vw, 3.4rem); }
  .titel--mittel { font-size: clamp(2rem, 8.6vw, 2.6rem); }
  .phase .taten { margin-top: 1.1rem; }
  .phase .taten .knopf { flex: 1 1 0; padding-inline: .8rem; }
  .phase--plan .knopf { display: none; }
  .lagen { display: none; }
  .lage-jetzt { display: block; }
  .scrollhinweis { display: none; }
  .kapitel { display: none; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .phase .anriss { display: none; }
}

/* --- Auswahl: Abschnitt bleibt stehen, die Burger fahren beim Scrollen seitlich durch --- */
.auswahl { position: relative; height: 340vh; scroll-margin-top: 0; }     /* Höhe setzt das Skript */
.auswahl__klebe {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 64px;
}
.auswahl__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.auswahl__kopf .kopfzeile { margin-bottom: 0; }
.band__steuer { display: flex; align-items: center; flex: none; }
.band__zahl { display: flex; align-items: baseline; gap: .35rem; font: italic 400 1.15rem/1 var(--schrift-serif); color: var(--krume-leise); font-variant-numeric: lining-nums tabular-nums; }
.band__zahl b { font: italic 400 2.6rem/1 var(--schrift-serif); color: var(--kaese); }
.band__zahl span { opacity: .5; }

.band {
  position: relative; margin-top: clamp(.5rem, 2vh, 1.5rem);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.band__spur {
  /* ein Burger füllt fast den Schirm: Breite nach der Höhe, damit Text darunter Platz hat */
  --breite: min(86vw, calc((100svh - 310px) * 1.0), 820px);
  display: flex; gap: 14vw;
  width: max-content;
  padding: 0 calc(50vw - var(--breite) / 2);
  transform: translate3d(var(--fahrt, 0px), 0, 0);
  will-change: transform;
}

.wahl {
  --naehe: 1;              /* 1 = steht in der Mitte, 0 = weit weg; setzt das Skript */
  flex: 0 0 var(--breite);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  text-decoration: none; color: var(--krume);
}
.wahl__burger {
  position: relative; aspect-ratio: var(--seite);
  container-type: size;                  /* cqh = Höhe des Burgers, für den Hub */
  width: calc(82% * var(--seite) / .86);
  margin: 0 auto 1.2rem;
  /* nur transform und opacity: läuft auf dem Grafikchip, ohne Neuzeichnen */
  transform: translate3d(0, calc((1 - var(--naehe)) * 26px), 0) scale(calc(.74 + var(--naehe) * .26));
  transform-origin: 50% 80%;
  opacity: calc(.32 + var(--naehe) * .68);
}
/* warmer Schein hinter dem Burger */
.wahl__burger::before {
  content: ''; position: absolute; inset: 10% -10% 0; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,179,26,.22), transparent);
  opacity: 0; transform: scale(.7);
  transition: opacity 700ms var(--raus), transform 900ms var(--raus);
}
/* Schatten auf dem Boden */
.wahl__burger::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: -5%; height: 9%; z-index: 0;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.85), transparent);
  transition: transform 900ms var(--raus), opacity 700ms;
}
/* Aufgehen: --hub kommt vom Scrollen (0 … 1, genau in der Mitte voll),
   --h vom Überfahren (weich animiert). Sichtbar ist das Größere von beiden. */
@property --h { syntax: '<number>'; inherits: true; initial-value: 0; }
.wahl { --hub: 0; --h: 0; --auf: max(var(--hub), var(--h)); transition: --h 650ms cubic-bezier(.22, 1, .36, 1); }
.wahl:hover, .wahl:focus-visible { --h: 1; }
.wahl__burger img {
  --dreh: 0deg;
  position: absolute; left: var(--x); width: var(--b); top: calc(var(--r) * 1%);
  max-width: none; height: auto; pointer-events: none;
  transform: translate3d(0, calc(var(--d) * 1cqh * var(--auf)), 0) rotate(calc(var(--dreh) * var(--auf)));
  backface-visibility: hidden;
}
.wahl__burger img:nth-child(odd) { --dreh: -2deg; }
.wahl__burger img:nth-child(even) { --dreh: 2deg; }
.wahl__burger img:last-child { --dreh: 0deg; }
.wahl__burger::before { opacity: var(--auf); transform: scale(calc(.7 + var(--auf) * .3)); transition: none; }
.wahl__burger::after { transform: scaleX(calc(1 - var(--auf) * .18)); opacity: calc(1 - var(--auf) * .3); transition: none; }

.wahl h3, .wahl p, .wahl__fuss { opacity: calc(.25 + var(--naehe) * .75); }
.wahl h3 { margin: 0 0 .5rem; font: 900 clamp(2.2rem, 4.4vw, 3.6rem)/1 var(--schrift-display); text-transform: uppercase; letter-spacing: .01em; }
.wahl h3 small { display: block; margin-top: .45rem; font: italic 400 1rem/1 var(--schrift-serif); letter-spacing: 0; text-transform: none; color: var(--kaese); }
.wahl p { margin: 0 auto; max-width: 44ch; font-size: 1rem; line-height: 1.5; color: var(--krume-leise); }
.wahl__fuss { margin-top: .9rem; display: flex; align-items: center; justify-content: center; gap: 1rem; }
.wahl__tat { font-size: .82rem; font-weight: 600; color: var(--krume-leise); transition: color 240ms; white-space: nowrap; }
.wahl__tat i { display: inline-block; font-style: normal; transition: transform 500ms var(--schwung); }
.wahl:hover .wahl__tat { color: var(--kaese); }
.wahl:hover .wahl__tat i { transform: translateX(6px); }

.band__fortschritt { position: relative; height: 2px; margin-top: 1.4rem; border-radius: 2px; background: var(--linie); overflow: hidden; }
.band__fortschritt i { position: absolute; inset: 0 auto 0 0; width: 20%; border-radius: 2px; background: var(--kaese); transform: translateX(calc(var(--stand, 0) * 400%)); }

@media (max-width: 760px) {
  .auswahl__kopf { flex-direction: column; align-items: flex-start; }
  .band__steuer { display: none; }
  .band__spur { --breite: min(84vw, calc((100svh - 300px) * 1.02)); gap: 18vw; }
  .auswahl__klebe { padding-top: 64px; }
  .band { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%); }
  .wahl h3 { font-size: 2.1rem; }
  .wahl p { font-size: .9rem; }
}

/* --- Karte: gesetzt wie eine gedruckte Speisekarte --------------------------- */
.karte {
  position: relative;
  padding-block: clamp(4rem, 9vh, 6rem);
  background: linear-gradient(to bottom, var(--grund) 0, var(--grund-warm) 140px, var(--grund-warm) calc(100% - 140px), var(--grund) 100%);
}
.kopfzeile { margin-bottom: clamp(2rem, 5vh, 3rem); }
.kopfzeile .anriss { max-width: 46ch; }

/* Preise: Serife, Cent hochgestellt */
.preis, .zeile__preis {
  font: 400 1.55rem/1 var(--schrift-serif); color: var(--kaese);
  font-variant-numeric: lining-nums; white-space: nowrap;
}
.preis sup, .zeile__preis sup { font-size: .55em; vertical-align: .6em; margin-left: .04em; }

/* feiner gezeichneter Pfeil statt Textzeichen */
.pfeil {
  display: inline-block; width: 15px; height: 15px; vertical-align: -.15em; margin-left: .3rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h13m-5-5 5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h13m-5-5 5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 600ms var(--raus);
}
.pfeil--raus { transform: rotate(-45deg); }

.speisekarte { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.speisekarte__gruppe {
  margin: 2.6rem 0 .2rem;
  font: 600 .7rem/1 var(--schrift-text); letter-spacing: .24em; text-transform: uppercase; color: var(--krume-leise);
}
.speisekarte__gruppe:first-child { margin-top: 0; }
.zeile {
  position: relative; display: block;
  padding: 1.15rem 0 1.2rem;
  border-bottom: 1px solid var(--linie);
  text-decoration: none; color: var(--krume);
}
.zeile::after {                   /* goldene Linie läuft beim Überfahren durch */
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--kaese), rgba(255,179,26,.2));
  transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--raus);
}
.zeile__kopf { display: flex; align-items: baseline; gap: .9rem; }
.zeile__name {
  font: 900 clamp(1.6rem, 2.5vw, 2.15rem)/1 var(--schrift-display); text-transform: uppercase; letter-spacing: .01em;
  transition: color 300ms, transform 700ms var(--raus);
}
.zeile__marke { font: italic 400 1.1rem/1 var(--schrift-serif); color: var(--kaese); transition: transform 700ms var(--raus); }
.zeile__preis { margin-left: auto; color: var(--krume); transition: color 300ms; }
.zeile__text { display: block; margin-top: .45rem; max-width: 50ch; font-size: .92rem; line-height: 1.5; color: var(--krume-leise); transition: transform 700ms var(--raus); }
.zeile:hover::after, .zeile:focus-visible::after, .zeile[data-aktiv]::after { transform: scaleX(1); }
.zeile:hover .zeile__name, .zeile:focus-visible .zeile__name { color: var(--kaese); transform: translateX(12px); }
.zeile:hover .zeile__marke, .zeile:hover .zeile__text { transform: translateX(12px); }
.zeile:hover .zeile__preis, .zeile:focus-visible .zeile__preis { color: var(--kaese); }
.zeile--klein { padding-block: .85rem .9rem; }
.zeile--klein .zeile__name { font-size: clamp(1.2rem, 1.7vw, 1.45rem); }
.zeile--klein .zeile__preis { font-size: 1.3rem; }
.speisekarte__tat { margin-top: 2.2rem; }

/* rechts: der Burger der Zeile unter der Maus */
.speisekarte__bild { position: sticky; top: 120px; margin: 0; aspect-ratio: 1; }
.speisekarte__bild::before {
  content: ''; position: absolute; inset: 6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,179,26,.16), transparent);
}
.speisekarte__bild::after {
  content: ''; position: absolute; left: 18%; right: 18%; bottom: 4%; height: 7%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.9), transparent);
}
.speisekarte__bild img {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: 50% 88%;
  opacity: 0; transform: translate3d(0, 28px, 0) scale(.92) rotate(-4deg);
  transition: opacity 500ms var(--raus), transform 1100ms var(--raus);
}
.speisekarte__bild img[data-aktiv] { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .speisekarte { grid-template-columns: 1fr; }
  .speisekarte__bild { display: none; }
  .zeile__kopf { flex-wrap: wrap; row-gap: .3rem; }
}

/* --- Besuch ------------------------------------------------------------------ */
.besuch { padding-block: clamp(3.5rem, 8vh, 5.5rem); }
.besuch__raster { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.besuch__raster > div:first-child { padding-right: 1.5rem; }
.adresse, .zeiten {
  display: flex; flex-direction: column;
  padding: 1.3rem 0 0; border-top: 1px solid var(--linie);
}
.adresse { position: relative; text-decoration: none; }
.adresse::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--kaese); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--raus); }
.adresse:hover::after { transform: scaleX(1); }
.adresse:hover .adresse__zeile { color: var(--kaese); }
.adresse__zeile { transition: color 300ms; }
.adresse:hover .pfeil { transform: rotate(-45deg) translate(3px, 0); }
.adresse__kopf { font: 600 .7rem/1 var(--schrift-text); letter-spacing: .24em; text-transform: uppercase; color: var(--kaese); margin-bottom: 1rem; }
.adresse__zeile { font: 800 1.6rem/1.05 var(--schrift-display); text-transform: uppercase; }
.adresse__tat { margin-top: auto; padding-top: 1.4rem; font-size: .85rem; font-weight: 600; color: var(--krume-leise); transition: color 200ms; }
.adresse:hover .adresse__tat { color: var(--kaese); }
.zeiten dl { margin: 0; display: grid; gap: .1rem; }
.zeiten dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0; border-bottom: 1px solid var(--linie); font-size: .9rem; }
.zeiten dt { color: var(--krume-leise); }
.zeiten dd { margin: 0; font: italic 400 1.1rem/1 var(--schrift-serif); white-space: nowrap; font-variant-numeric: lining-nums; }
.zeiten dl div[data-heute] dt, .zeiten dl div[data-heute] dd { color: var(--kaese); }
.zeiten__jetzt { margin: .9rem 0 0; font-size: .82rem; color: var(--krume-leise); }
.zeiten__jetzt b { color: var(--krume); font-weight: 600; }
.zeiten__jetzt i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .45rem; background: #6c6c6c; vertical-align: .05em; }
.zeiten__jetzt[data-offen='ja'] i { background: #8fd16a; box-shadow: 0 0 0 4px rgba(143,209,106,.18); }

@media (max-width: 960px) {
  .besuch__raster { grid-template-columns: 1fr 1fr; }
  .besuch__raster > div:first-child { grid-column: 1 / -1; padding: 0 0 1rem; }
}
@media (max-width: 560px) {
  .besuch__raster { grid-template-columns: 1fr; }
  .taten .knopf { flex: 1 1 auto; }
}

/* --- Fuß ----------------------------------------------------------------------- */
.fuss { border-top: 1px solid var(--linie); padding-top: 1.6rem; }
.fuss__zeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.4rem; }
.marke--klein .marke__zeichen { width: 22px; height: 24px; }
.marke--klein .marke__wort { font-size: 1.25rem; }
.fuss__links { display: flex; gap: 1.4rem; }
.fuss__links a { font-size: .85rem; color: var(--krume-leise); text-decoration: none; padding: .5rem 0; transition: color 200ms; }
.fuss__links a:hover { color: var(--kaese); }

.fuss__demo { margin: 0; padding: 0 0 1.1rem; text-align: center; font-size: .78rem; color: var(--krume-leise); }
.recht a { color: var(--kaese); }

/* Agentursignatur — Anthracite Studio (Komponente: anthracite-signatur.js) */
.fuss__sig {
  border-top: 1px solid var(--linie);
  padding-block: 1.8rem calc(clamp(3.5rem, 9vh, 6rem) + env(safe-area-inset-bottom));
  display: flex; justify-content: center;
  color: var(--krume-leise);
}
.fuss__sig .as-signatur { --as-h: 24px; }

/* --- Unterseiten --------------------------------------------------------------- */
.recht { padding: 130px 0 4rem; }
.recht h1 { margin-bottom: 1.4rem; }
.recht p, .recht li { color: var(--krume-leise); max-width: 66ch; }
.recht a { text-underline-offset: .2em; transition: color .2s; }
.recht a:hover { color: var(--kaese); }
.recht h2 { font: 800 1.4rem/1.1 var(--schrift-display); text-transform: uppercase; margin: 2rem 0 .6rem; color: var(--krume); }
.hinweis { padding: 1rem 1.2rem; border-radius: 16px; border: 1px dashed rgba(255,179,26,.5); color: var(--kaese) !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .kaese__tropfen i { transform: scaleY(1); }
}

.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }