/* =============================================================
   Zülfi’s — Sektionstypen des Redesigns „Appetit"
   Setzt tokens.css und components.css voraus.

   Leitidee: nie zwei gleiche Layout-Muster hintereinander. Jede Klasse
   hier ist ein eigenes Muster, keine Variante einer anderen.
   Vorbild ist die Weihnachts-Site (siehe _docs/redesign/benchmark-weihnachten.md),
   übersetzt ins Helle: statt dunkler Bühne für helles Essen jetzt helle
   Bühne, auf der die dunklen Studiofotos als Flächen wirken.
   ============================================================= */

/* ---------- Typografische Momente ---------- */
.riese{
  font-family:var(--font-display);font-weight:900;
  font-size:var(--fs-riese);line-height:.86;letter-spacing:-.035em;
  text-wrap:balance;
}
.gross{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--fs-gross);
  line-height:var(--lh-display);letter-spacing:var(--ls-display);
  text-wrap:balance;
}
.skript{
  font-family:var(--font-script);font-weight:400;
  font-size:clamp(2rem,1.2rem + 3.4vw,3.6rem);line-height:1;
  /* Nicht in Orange: die dünne Schreibschrift kam damit auf hellem Grund
     auf 2,76:1. Curry-700 erreicht dort 4,96 bis 5,78:1. */
  color:var(--curry-700);padding-block:.1em;display:block;
}
.skript--klein{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.2rem)}
.sauce{color:var(--ketchup-600)}

/* Brush-Strich unter einem Wort — unverändert aus der Weihnachts-Site */
.mark{position:relative;display:inline-block;white-space:nowrap}
.mark::after{
  /* Zweimal nachgezogen. Ursprünglich -.1em: Der Strich begann oberhalb
     der Grundlinie und zog quer durch die Buchstaben. Dann -.16em, der
     Wert der Weihnachts-Site — dort sitzt er richtig, hier stand er aber
     immer noch im Schriftbild. Grund: Die Weihnachts-Site setzt .mark in
     einem deutlich kleineren Grad und in einer anderen Schrift, Playfair
     hat eine tiefer liegende Grundlinie. Jetzt -.3em, gemessen am Satz
     statt am fremden Wert. Die Weihnachts-Site bleibt unberührt, sie
     lädt diese Datei gar nicht. */
  content:"";position:absolute;left:-.06em;right:-.06em;bottom:-.3em;height:.28em;
  background:var(--accent);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 26' preserveAspectRatio='none'%3E%3Cpath d='M4.2 18.1c31-6.9 63.4-10.6 96.2-11.9 43.6-1.7 87.3.9 130.8-1.4 28.1-1.5 56-4.6 83.6-9.4-17.4 8.9-36.3 14-55.6 16.6-45.1 6.1-90.9 2.6-136.3 2.3-38.4-.2-76.8 1.6-114.7 8.8-3.1.6-5.5-1.1-5.7-3.6-.1-.6.6-1.2 1.7-1.4z'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 26' preserveAspectRatio='none'%3E%3Cpath d='M4.2 18.1c31-6.9 63.4-10.6 96.2-11.9 43.6-1.7 87.3.9 130.8-1.4 28.1-1.5 56-4.6 83.6-9.4-17.4 8.9-36.3 14-55.6 16.6-45.1 6.1-90.9 2.6-136.3 2.3-38.4-.2-76.8 1.6-114.7 8.8-3.1.6-5.5-1.1-5.7-3.6-.1-.6.6-1.2 1.7-1.4z'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}

/* Die Grundregeln der Hero-Komponente (.held und alles darunter) sind nach
   hero.css umgezogen. Grund: Die Weihnachtsseite nutzt seit dem Umbau
   dieselbe Komponente, lädt aber bewusst kein sektionen.css — ihr eigenes
   Gestaltungssystem würde sich sonst verändern. Eine Komponente gehört in
   eine Datei; was hier bleibt, sind nur die Abwandlungen für diese Seiten
   (.held--geteilt, .held__titel--catering). */

/* Status-Pille „Jetzt geöffnet" */
.pille{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:34px;padding:.35rem .9rem;margin-bottom:1rem;
  border-radius:var(--radius-pill);background:var(--white);
  border:1px solid var(--line);
  font-family:var(--font-head);font-size:.84rem;font-weight:600;
}
.pille::before{content:"";width:8px;height:8px;border-radius:50%;background:#1F7A4D;flex:0 0 auto}
.pille--zu::before{background:var(--ink-700)}

/* ---------- 2 · Laufband ---------- */
.laufband{
  overflow:hidden;background:var(--navy);color:var(--cream);
  padding-block:clamp(.9rem,2vw,1.4rem);
  -webkit-user-select:none;user-select:none;
}
.laufband__spur{display:flex;width:max-content;animation:laufen 48s linear infinite}
.laufband:hover .laufband__spur,
.laufband:focus-within .laufband__spur{animation-play-state:paused}
.laufband__teil{
  display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.4rem);
  padding-right:clamp(1.2rem,3vw,2.4rem);
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.5rem,1rem + 2.2vw,2.8rem);letter-spacing:-.015em;white-space:nowrap;
}
.laufband__teil span::after{
  content:"·";margin-left:clamp(1.2rem,3vw,2.4rem);color:var(--curry-500);
}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .laufband__spur{animation:none;flex-wrap:wrap;width:auto}
  .laufband__teil:nth-child(2){display:none}
}

/* ---------- 3 · Editorial-Spread: Bild und Typo im Wechsel ---------- */
.spreads{display:grid;gap:clamp(3rem,7vw,6rem);margin-top:clamp(2.25rem,5vw,4rem)}
.spread{display:grid;gap:clamp(1.25rem,3vw,2.5rem);align-items:center}
.spread__bild{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-card)}
.spread__bild img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .6s var(--ease)}
.spread:hover .spread__bild img{transform:scale(1.03)}
.spread__nr{
  font-family:var(--font-display);font-weight:900;line-height:.8;
  font-size:clamp(3.4rem,2rem + 6vw,8rem);letter-spacing:-.05em;
  color:var(--curry-700);margin-bottom:.1em;
}
.spread__titel{margin-bottom:.5rem}
.spread__text{color:var(--text-muted);max-width:42ch}
.spread__preis{
  display:inline-block;margin-top:1.1rem;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.8rem,1.3rem + 1.8vw,2.6rem);line-height:1;
  color:var(--ketchup-600);
}
@media (min-width:780px){
  .spread{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(2.5rem,5vw,4.5rem)}
  .spread--gedreht .spread__bild{order:2}
  /* Jedes zweite Bild läuft aus dem Satzspiegel heraus — wie .people__photo
     auf der Weihnachts-Site. */
  .spread--weit .spread__bild{
    margin-left:calc(-1 * ((100vw - min(var(--shell),100vw)) / 2 + var(--gutter)));
    border-start-start-radius:0;border-end-start-radius:0;
  }
  .spread--gedreht.spread--weit .spread__bild{
    margin-left:0;
    margin-right:calc(-1 * ((100vw - min(var(--shell),100vw)) / 2 + var(--gutter)));
    border-radius:var(--radius-lg);
    border-start-end-radius:0;border-end-end-radius:0;
  }
}

/* ---------- 4 · Appetit-Band: Vollbild mit einer Riesenzeile ---------- */
.appetitband{
  position:relative;display:grid;align-items:center;overflow:hidden;
  background:var(--navy);
  /* Deutlich höher als zuvor (42 vh): Das Band trägt eine Schau-Zeile in
     --fs-riese über einem Foto. Auf knapp vierhundert Pixeln stand die
     Schrift fast randlos im Bild und das Motiv war nur zu erahnen. */
  min-height:clamp(440px,74vh,820px);
  padding-block:clamp(2rem,6vh,4.5rem);
}
@media (max-width:759px){
  .appetitband{min-height:clamp(380px,62vh,620px)}
}
.appetitband__bild{position:absolute;inset:0}
.appetitband__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
/* Ohne Abdeckung erreicht die weiße Zeile über hellen Pommes nur 1,2:1.
   Mobil deckt ein vertikaler Verlauf, ab 760 px einer von links. */
.appetitband__bild::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,35,64,.9) 0%,rgba(14,35,64,.74) 46%,rgba(14,35,64,.6) 100%);
}
.appetitband__text{
  position:relative;padding:clamp(1.5rem,4vw,3.5rem);
  font-size:clamp(2.2rem,1.1rem + 4.6vw,6.5rem);
  color:var(--cream);max-width:12ch;
  text-shadow:0 2px 6px rgba(0,0,0,.45),0 10px 40px rgba(0,0,0,.4);
}
@media (min-width:760px){
  .appetitband__bild::after{
    background:linear-gradient(94deg,rgba(14,35,64,.95) 0%,rgba(14,35,64,.92) 42%,rgba(14,35,64,.84) 60%,rgba(14,35,64,.56) 76%,rgba(14,35,64,.2) 90%,rgba(14,35,64,0) 100%);
  }
  .appetitband__text{max-width:10ch}
}

/* ---------- 5 · Curry-Fläche: der laute helle Moment ---------- */
.curryflaeche{
  position:relative;overflow:hidden;
  background:var(--curry-500);color:var(--on-curry);
  padding-block:var(--luft-m);
}
.curryflaeche::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(85% 75% at 86% 10%,rgba(255,255,255,.4),transparent 58%);
}
.curryflaeche__inner{position:relative;display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:center}
.curryflaeche .eyebrow{color:rgba(20,47,78,.72)}
.curryflaeche__zahlen{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);margin-top:1.75rem}
.curryflaeche__zahl{line-height:1}
.curryflaeche__zahl b{
  display:block;font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.2rem,1.4rem + 3.2vw,4rem);letter-spacing:-.03em;
}
.curryflaeche__zahl span{font-size:var(--fs-sm);font-weight:600;opacity:.78}
.curryflaeche__bild{margin:0;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 26px 50px -30px rgba(20,47,78,.6)}
.curryflaeche__bild img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* Freisteller statt Foto.
   Die Loaded Fries liegen mit echtem Alphakanal vor (1200 × 671, die Tinte
   reicht bis 8 px an den Rand). Die Regel darüber zwang sie in 3:2 und
   schnitt mit object-fit:cover links und rechts ab; Eckenradius, overflow
   und der Kasten-Schatten zeichneten zusätzlich ein Rechteck hinter das
   transparente Bild — genau der Rahmen, der nicht da sein soll.

   Hier also: keine Rundung, kein Beschnitt, kein Kasten. Der Schatten
   kommt von drop-shadow und folgt damit dem Alphakanal — er sitzt an der
   Schale, nicht an einem unsichtbaren Rechteck.
   Catering nutzt dieselbe Klasse mit einem normalen Foto (RGB) und behält
   den Rahmen; deshalb der Modifier statt einer Änderung an der Grundregel. */
.curryflaeche__bild--frei{border-radius:0;overflow:visible;box-shadow:none;background:none}
.curryflaeche__bild--frei img{
  width:100%;height:auto;aspect-ratio:auto;object-fit:contain;
  filter:drop-shadow(0 22px 30px rgba(20,47,78,.3));
}
@media (min-width:860px){
  .curryflaeche__inner{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(2.5rem,5vw,4rem)}
  .curryflaeche--bildlinks .curryflaeche__bild{order:-1}
}
/* Pills auf Curry — Rahmen statt Fläche, damit die Fläche ruhig bleibt */
.pillenliste{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.pillenliste li{
  padding:.5rem 1rem;border-radius:var(--radius-pill);
  border:1.5px solid rgba(20,47,78,.3);font-size:.92rem;font-weight:600;
}

/* ---------- 6 · Bestelltafel: Speisen als typografische Liste ---------- */
.tafel{display:grid;gap:clamp(1.75rem,4vw,2.75rem)}
.tafel__gruppe > .h3{
  display:flex;align-items:center;gap:.9rem;margin-bottom:.9rem;
  font-family:var(--font-head);font-size:.84rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-700);
}
.tafel__gruppe > .h3::after{content:"";flex:1;height:1px;background:var(--line)}
.tafel__zeile{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:.1rem 1rem;
  padding-block:.62rem;border-bottom:1px solid var(--line);
  font-family:var(--font-head);font-weight:600;
  font-size:clamp(1rem,.95rem + .3vw,1.18rem);
}
/* Auf schmalen Displays rutscht ein langer Name ganz auf eine eigene Zeile,
   der Preis folgt rechtsbündig darunter — sonst steht er mitten im Namen. */
.tafel__zeile{align-items:center}
@media (max-width:520px){
  .tafel__name{flex:1 1 100%}
  .tafel__preis,.tafel__marke{margin-left:auto}
  .tafel__marke{margin-top:.35rem}
}
.tafel__zeile:last-child{border-bottom:0}
.tafel__name{min-width:0}
.tafel__hinweis{
  display:block;font-family:var(--font-sans);font-weight:400;
  font-size:.86rem;color:var(--text-muted);margin-top:.1rem;
}
/* Auf der Hauptseite stehen keine Gerichtpreise. Statt eines Preises rechts
   trägt die Zeile eine Marke wie „Klassiker" oder „Scharf" — und nur dann,
   wenn es etwas zu sagen gibt. */
.tafel__marke{
  flex:0 0 auto;align-self:center;
  padding:.22rem .7rem;border-radius:var(--radius-pill);
  background:var(--paper-100);border:1px solid var(--line);
  font-family:var(--font-head);font-size:.7rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--curry-700);
  white-space:nowrap;
}
.tafel__marke--scharf{
  background:var(--ketchup-600);border-color:var(--ketchup-600);color:var(--on-ketchup);
}
.tafel__preis{font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}
/* Vorschaubild folgt auf Desktop dem Zeiger. Ohne feinen Zeiger (Touch)
   passiert nichts — dort führt der Tipp direkt zur ganzen Speisekarte. */
.tafel__vorschau{display:none}
@media (hover:hover) and (pointer:fine){
  .tafel__vorschau{
    display:block;position:fixed;z-index:60;pointer-events:none;
    width:190px;border-radius:var(--radius);overflow:hidden;
    box-shadow:0 22px 44px -20px rgba(20,47,78,.65);
    opacity:0;transform:translate(-50%,-50%) scale(.94);
    transition:opacity .18s var(--ease),transform .18s var(--ease);
  }
  .tafel__vorschau.ist-sichtbar{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .tafel__vorschau img{width:100%;aspect-ratio:3/2;object-fit:cover}
}
@media (prefers-reduced-motion:reduce){ .tafel__vorschau{transition:none} }

/* ---------- 7 · Story: Seit 2007 ---------- */
.story{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.story__bild{position:relative;margin:0}
.story__bild picture{display:block;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-card)}
.story__bild img{width:100%;aspect-ratio:3/2;object-fit:cover}
.story__credit{
  margin-top:.7rem;font-family:var(--font-head);font-size:.74rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);
}
.story__text > p + p{margin-top:1rem}
.story__text p{color:var(--text-muted);max-width:46ch}
/* Initiale */
.story__text .initial::first-letter{
  float:left;font-family:var(--font-display);font-weight:900;
  font-size:3.6em;line-height:.76;margin:.06em .1em 0 0;color:var(--navy);
}
.story__zitat{
  margin-top:1.6rem;padding-left:1.2rem;border-left:3px solid var(--accent);
  /* Kein font-style:italic: Von Playfair ist nur der aufrechte Schnitt
     geladen, der Browser würde die Kursive schrägstellen statt sie zu
     setzen — bei dieser Strichstärke sieht man das. */
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.25rem,1.05rem + .9vw,1.7rem);line-height:1.3;
  color:var(--navy)!important;max-width:34ch!important;
}
@media (min-width:900px){
  .story{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2.5rem,5vw,4.5rem)}
  .story--bildlinks .story__bild{
    margin-left:calc(-1 * ((100vw - min(var(--shell),100vw)) / 2 + var(--gutter)));
  }
  .story--bildlinks .story__bild picture{
    border-start-start-radius:0;border-end-start-radius:0;
  }
  .story--bildlinks .story__credit{
    padding-left:calc((100vw - min(var(--shell),100vw)) / 2 + var(--gutter));
  }
}

/* ---------- 8 · Riesenzitat ---------- */
.stimmen__gross{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.9rem,1.1rem + 3.6vw,4.2rem);line-height:1.08;
  letter-spacing:-.025em;text-wrap:balance;max-width:20ch;
}
.stimmen__gross::before{content:"„"}
.stimmen__gross::after{content:"“"}
.stimmen__quelle{
  margin-top:1.1rem;font-family:var(--font-head);font-weight:600;
  font-size:var(--fs-sm);color:var(--text-muted);
}
.stimmen__klein{display:grid;gap:1rem;margin-top:clamp(2rem,4vw,3rem)}
.stimmen__klein blockquote{
  padding:clamp(1.1rem,2.4vw,1.6rem);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);
}
.stimmen__klein p{font-size:var(--fs-sm)}
.stimmen__klein footer{
  margin-top:.6rem;font-family:var(--font-head);font-weight:600;
  font-size:var(--fs-xs);color:var(--text-muted);
}
/* Nur als Link: Die Unterstreichung in Curry war als Link-Markierung zum
   Google-Profil gedacht. Steht die Wertung als bloßer Absatz da — und das
   tut sie, solange googleProfile in der config fehlt — sah sie klickbar
   aus, ohne es zu sein. */
a.stimmen__wertung{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;
  font-family:var(--font-head);font-weight:700;
  color:var(--navy);text-decoration:none;
  border-bottom:2px solid var(--curry-500);padding-bottom:.15rem;
}
@media (min-width:760px){ .stimmen__klein{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- 9 · Abschluss im Footer ---------- */
.abschluss{
  background:var(--navy);color:var(--cream);
  padding-block:clamp(2.5rem,6vw,4.5rem);
}
.abschluss__riese{
  font-family:var(--font-display);font-weight:900;line-height:.88;
  /* „Hunger?" ist kurz genug für den größten Grad der Seite. */
  font-size:clamp(3.4rem,1rem + 11vw,12rem);letter-spacing:-.045em;
  color:var(--curry-500);margin-bottom:1.5rem;
}
.abschluss__wege{display:grid;gap:1rem}
.abschluss__weg{
  display:flex;flex-direction:column;gap:.3rem;
  padding:clamp(1.1rem,2.4vw,1.6rem);text-decoration:none;color:var(--cream);
  background:var(--navy-soft);border:1px solid var(--line-dark);
  border-radius:var(--radius-lg);
  transition:transform .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease);
}
.abschluss__weg:hover{transform:translateY(-3px);border-color:var(--curry-500);background:#214a79}
.abschluss__weg b{font-family:var(--font-head);font-size:var(--fs-h3);font-weight:700}
.abschluss__weg span{font-size:var(--fs-sm);color:rgba(255,247,239,.74)}
.abschluss__weg em{
  margin-top:auto;padding-top:.8rem;font-style:normal;
  font-family:var(--font-head);font-weight:700;font-size:.88rem;color:var(--curry-500);
}
@media (min-width:760px){ .abschluss__wege{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ---------- 10 · Mobile Daumenleiste ---------- */
.daumen{
  position:fixed;z-index:90;inset-inline:0;bottom:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--white);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -8px 24px -16px rgba(20,47,78,.5);
  transform:translateY(110%);
  transition:transform .3s var(--ease);
}
.daumen.ist-da{transform:translateY(0)}
.no-js .daumen{transform:translateY(0)}
.daumen a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  min-height:58px;padding:.5rem .3rem;text-decoration:none;color:var(--navy);
  font-family:var(--font-head);font-size:.76rem;font-weight:700;
  letter-spacing:.03em;
}
.daumen a + a{border-left:1px solid var(--line)}
.daumen svg{width:21px;height:21px}
.daumen a:active{background:var(--paper-100)}
@media (min-width:820px){ .daumen{display:none} }
/* Platz schaffen, damit die Leiste nichts verdeckt */
@media (max-width:819px){ body{padding-bottom:62px} }

/* ---------- Reveals: nur für große Momente ---------- */
[data-zeig]{opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-zeig].ist-sichtbar{opacity:1;transform:none}
.no-js [data-zeig]{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  [data-zeig]{opacity:1;transform:none;transition:none}
  .spread:hover .spread__bild img{transform:none}
  .abschluss__weg:hover{transform:none}
}

@media print{
  .daumen,.laufband,.appetitband,.held__sticker{display:none!important}
  .held__schleier{display:none}
  .curryflaeche{background:none;color:#000}
}

/* =============================================================
   Hilfsklassen statt Inline-Styles
   ============================================================= */

/* Curry-Fläche */
.curryflaeche__lead{margin-top:1rem;max-width:44ch}
.curryflaeche__label{margin-top:1.6rem;margin-bottom:.4rem}

/* Bestelltafel und FAQ */
.tafel__ueber{margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.tafel__fuss{margin-top:1.25rem;font-size:var(--fs-sm);color:var(--text-muted)}
.tafel__knopf{margin-top:1.5rem}

/* Story */
.story__titel{margin-bottom:1rem}
.story--oben{align-items:start}

/* Appetit-Band als Catering-Teaser: mehr Höhe, Inhalt über die Shell-Breite */
/* Deutlich höher: Das Band trägt Überzeile, eine zweizeilige Schau-H2,
   drei Zahlen und einen Knopf — auf 52 vh drängte sich das alles zusammen
   und das Truck-Foto dahinter war kaum zu sehen. Jetzt fast der ganze
   Bildschirm, mit Luft oben und unten. */
/* Niedriger als zuvor (88vh, bis 900 px). Das Band trug dadurch viel
   leere Fläche unter dem Knopf; der Truck war zwar groß, aber unten und
   oben nur Himmel und Asphalt. Mit 68vh steht derselbe Inhalt dichter
   beieinander und man sieht mehr vom Fahrzeug statt mehr vom Umfeld. */
.appetitband--hoch{
  min-height:clamp(430px,68vh,690px);
  padding-block:clamp(2.5rem,6vh,4.5rem);
}
@media (max-width:759px){
  .appetitband--hoch{min-height:clamp(400px,62vh,620px)}
}
/* Der Truck steht im Bild rechts der Mitte. Bei object-position 50 %
   schnitt der Ausschnitt sein hinteres Ende ab — sichtbar war vor allem
   die Zugdeichsel. Weiter nach rechts geschoben zeigt denselben
   Ausschnitt mit dem ganzen Aufbau samt Ausgabefenster. */
.appetitband--hoch .appetitband__bild img{object-position:68% 52%}
@media (max-width:759px){
  .appetitband--hoch .appetitband__bild img{object-position:62% 52%}
}
.appetitband__breit{
  position:relative;max-width:var(--shell);width:100%;
  margin-inline:auto;padding-inline:var(--gutter);
  padding-block:clamp(2rem,5vw,3rem);
  color:var(--cream);
  text-shadow:0 2px 6px rgba(0,0,0,.45),0 10px 40px rgba(0,0,0,.4);
}
.appetitband__eyebrow{color:var(--curry-500)}
.appetitband__titel{color:var(--cream);max-width:14ch}
.appetitband__breit .curryflaeche__zahlen{color:var(--cream)}
.appetitband__knopf{margin-top:1.75rem}
/* Der Schatten des Bandtextes darf nicht auf den Knopf durchschlagen —
   er macht die Beschriftung unscharf und drückt den Kontrast. */
.appetitband__breit .btn{text-shadow:none}

/* Saison-Teaser: ruhig und mittig, der einzige zentrierte Block der Seite */
.saison{text-align:center}
.saison .lead{margin-inline:auto}
.saison .h2{margin-bottom:.8rem}
.saison__knopf{margin-top:1.5rem}

/* Senf-Band: Öffnungszeiten und Anfahrt */
.senfband{background:var(--senf-100)}
.senfband__titel{margin-bottom:.8rem}
.senfband__text{max-width:42ch}
.senfband__knopf{margin-top:1.25rem}
.senfband__adresse{
  font-family:var(--font-display);font-weight:800;font-style:normal;
  font-size:clamp(1.6rem,1.1rem + 1.8vw,2.4rem);line-height:1.15;
  letter-spacing:-.02em;
}
.senfband__adresse + .senfband__text{margin-top:1rem}

/* =============================================================
   Catering: eigene Bausteine
   ============================================================= */

/* ---------- Geteilter Hero ----------
   Die Truck- und Gästefotos stammen von der alten Website und haben
   höchstens 1280 px. Ein Vollbild-Hero über 1440 px müsste sie hochrechnen.
   Deshalb liegt das Foto hier auf gut der halben Breite — dort reicht die
   Auflösung auch auf feinen Displays. */
.held--geteilt{
  background:var(--bg);min-height:0;
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto;
}
.held--geteilt .held__bild{position:relative;inset:auto;min-height:clamp(230px,38vh,330px)}
.held--geteilt .held__bild img{object-position:50% 54%}
.held--geteilt .held__schleier{display:none}
.held--geteilt .held__inhalt{padding-block:clamp(1.75rem,4vw,2.75rem) clamp(1.5rem,3vw,2.25rem)}
@media (min-width:900px){
  .held--geteilt{
    grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
    grid-template-rows:none;align-items:center;
    min-height:clamp(480px,74vh,660px);
  }
  /* Die Spalte reicht von sich aus bis zum Viewport-Rand — ein negativer
     Rand würde sie darüber hinausschieben (gemessen 1580 px bei 1440 px). */
  .held--geteilt .held__bild{
    grid-column:2;height:100%;min-height:0;
    border-start-start-radius:var(--radius-lg);border-end-start-radius:var(--radius-lg);
    overflow:hidden;
  }
  /* Der Text bleibt am Satzspiegel, obwohl die Sektion über die volle
     Breite läuft: Einzug statt zentrierter Shell. */
  .held--geteilt .held__inhalt{
    grid-column:1;grid-row:1;padding-block:0;
    max-width:none;margin-inline:0;
    padding-left:calc((100vw - min(var(--shell),100vw)) / 2 + var(--gutter));
    padding-right:clamp(1.5rem,3vw,3rem);
  }
  .held--geteilt .held__copy{max-width:32rem}
  .held--geteilt .held__sticker{top:auto;bottom:clamp(1rem,3vw,2.5rem)}
}

/* Zitat-Badge im Hero */
.zitatband{
  margin-top:1.4rem;padding:.9rem 1.1rem;
  background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;
  max-width:36rem;
}
.zitatband p{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.02rem,.95rem + .4vw,1.22rem);line-height:1.35}
.zitatband footer{margin-top:.3rem;font-family:var(--font-head);font-size:var(--fs-xs);
  font-weight:600;color:var(--text-muted)}

/* ---------- Fakten als große Zahlen ---------- */
.zahlenreihe{display:flex;flex-wrap:wrap;gap:clamp(1.25rem,4vw,2.75rem);margin-top:1.6rem}
.zahlenreihe > *{line-height:1}
.zahlenreihe b{
  display:block;font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.9rem,1.3rem + 2.4vw,3.1rem);letter-spacing:-.03em;
}
.zahlenreihe span{font-size:var(--fs-sm);font-weight:600;color:var(--text-muted)}

/* ---------- Ablauf als Bildfolge ----------
   Drei Schritte, jeder mit eigenem Bild. Ohne JS stehen sie untereinander,
   ab 900 px nebeneinander — kein Scroll-Hijack, keine Bibliothek. */
.ablaufreihe{display:grid;gap:clamp(1.25rem,3vw,2rem);counter-reset:schritt}
@media (min-width:900px){ .ablaufreihe{grid-template-columns:repeat(3,minmax(0,1fr))} }
.ablaufreihe li{display:flex;flex-direction:column}
.ablaufreihe figure{margin:0 0 1rem;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-card)}
.ablaufreihe img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ablaufreihe__nr{
  font-family:var(--font-display);font-weight:900;line-height:.8;
  font-size:clamp(2.4rem,1.6rem + 2.6vw,4rem);letter-spacing:-.04em;
  color:var(--curry-700);margin-bottom:.25rem;
}
.ablaufreihe h3{margin-bottom:.35rem}
.ablaufreihe p{color:var(--text-muted);font-size:var(--fs-sm)}

/* ---------- Preise: der Bon als Hauptdarsteller ---------- */
.preisbuehne{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media (min-width:900px){
  .preisbuehne{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(2.5rem,5vw,4rem)}
}
.preisbuehne .bon{max-width:none;width:100%}
/* Der Betrag pro Person ist der Moment, auf den die Tabelle zuläuft.
   Er stand in Ketchup-Rot — das ist auf Imbiss und Catering eine dritte
   Farbe und damit gegen die Projektregel; rot an einem Preis liest sich
   außerdem wie eine Warnung. Jetzt Navy, mit einem orangen Strich
   darunter: Der Blick bleibt hängen, ohne dass eine Farbe dazukommt.
   Orange als Schriftfarbe scheidet hier aus — auf Weiß misst es 2,76:1
   und verfehlt damit auch die 3:1 für große Schrift. Navy: 13,58:1. */
.bon__pp{
  margin-top:1rem;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem);line-height:1;
  color:var(--navy);
  padding-bottom:.4rem;
  border-bottom:3px solid var(--accent);
  display:inline-block;
}
.bon__pp small{
  display:block;margin-top:.3rem;font-family:var(--font-sans);
  font-size:.76rem;font-weight:500;letter-spacing:.04em;color:var(--text-muted);
}

/* ---------- Anlässe: ein großes Feature, drei kleine ---------- */
.anlassbuehne{display:grid;gap:clamp(1rem,2.5vw,1.5rem)}
@media (min-width:880px){
  /* Feste Zuordnung statt automatischem Fluss — sonst bleibt die vierte
     Kachel einsam in einer halbleeren Zeile stehen. */
  .anlassbuehne{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr)) auto;
  }
  .anlassbuehne__gross{grid-column:1 / 3;grid-row:1 / 3}
  .anlassbuehne > a:nth-child(2){grid-column:3;grid-row:1}
  .anlassbuehne > a:nth-child(3){grid-column:3;grid-row:2}
  .anlassbuehne > a:nth-child(4){grid-column:1 / -1;grid-row:3;min-height:clamp(180px,20vw,240px)}
}
.anlassbuehne a{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(170px,22vw,230px);overflow:hidden;
  padding:clamp(1.1rem,2.4vw,1.6rem);
  border-radius:var(--radius-lg);text-decoration:none;color:var(--cream);
  background:var(--navy);
  transition:transform .3s var(--ease)}
.anlassbuehne a:hover{transform:translateY(-3px)}
.anlassbuehne__gross{min-height:clamp(240px,34vw,420px)!important}
.anlassbuehne img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
.anlassbuehne a:hover img{transform:scale(1.04)}
/* Auf schmalen Displays sind die Kacheln kompakt, der Text reicht fast bis
   zur Oberkante — gemessen 1,94:1 mit dem Desktop-Verlauf. Deshalb deckt er
   mobil durchgehend kräftig ab und wird erst ab 880 px luftiger. */
.anlassbuehne a::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(14,35,64,.95) 0%,rgba(14,35,64,.88) 46%,rgba(14,35,64,.74) 78%,rgba(14,35,64,.62) 100%);
}
@media (min-width:880px){
  .anlassbuehne a::after{
    background:linear-gradient(0deg,rgba(14,35,64,.95) 0%,rgba(14,35,64,.82) 38%,rgba(14,35,64,.42) 68%,rgba(14,35,64,.2) 100%);
  }
}
.anlassbuehne__text{position:relative;z-index:1}
.anlassbuehne h3{margin-bottom:.3rem}
.anlassbuehne p{color:rgba(255,247,239,.82);font-size:var(--fs-sm);max-width:36ch}
.anlassbuehne em{
  display:inline-block;margin-top:.7rem;font-style:normal;
  font-family:var(--font-head);font-weight:700;font-size:.86rem;color:var(--curry-500);
}
/* Die Weihnachtsfeier-Kachel übernimmt sichtbar den Look der Saison-Site */
.anlassbuehne__xmas{background:var(--navy-deep)}
/* War --gold (#FFCC00) als Gruß an die Weihnachts-Site. Auf Imbiss und
   Catering gelten nur Blau und Orange — der Verweis trägt jetzt dieselbe
   Akzentfarbe wie alles andere. */
.anlassbuehne__xmas em{color:var(--accent)}
.anlassbuehne__xmas::after{
  background:linear-gradient(0deg,rgba(14,35,64,.96) 0%,rgba(14,35,64,.86) 46%,rgba(20,47,78,.6) 100%);
}

/* ---------- Referenzen als Masonry ---------- */
.masonry{display:grid;gap:clamp(.6rem,1.5vw,1rem);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){ .masonry{grid-template-columns:repeat(4,minmax(0,1fr))} }
.masonry li{margin:0}
.masonry__bild{
  display:block;width:100%;padding:0;border:0;cursor:zoom-in;
  background:var(--navy-deep);border-radius:var(--radius);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.masonry__bild:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
.masonry__bild img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
/* unterschiedliche Formate statt acht gleicher Kacheln */
@media (min-width:760px){
  .masonry__gross{grid-column:span 2;grid-row:span 2}
  .masonry__gross img{aspect-ratio:1}
  .masonry__breit{grid-column:span 2}
  .masonry__breit img{aspect-ratio:16/10}
}
.masonry figcaption{
  margin-top:.4rem;font-family:var(--font-head);font-size:var(--fs-xs);
  font-weight:600;color:var(--text-muted);
}

/* ---------- Formular mit Bild daneben ---------- */
.anfragebuehne{display:grid;gap:clamp(1.5rem,4vw,2.5rem);align-items:start}
@media (min-width:980px){
  .anfragebuehne{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,4vw,3.5rem)}
  .anfragebuehne__bild{position:sticky;top:calc(var(--nav-h) + 1.5rem)}
}
.anfragebuehne__bild{margin:0;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-card)}
.anfragebuehne__bild img{width:100%;aspect-ratio:3/4;object-fit:cover}
.anfragebuehne__bild figcaption{
  padding:.8rem 1rem;background:var(--navy);color:var(--cream);font-size:var(--fs-sm);
}

/* Anlass als Auswahl-Pillen, weiterhin native Radios */
.anlasspillen{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;border:0;min-width:0}
.anlasspillen legend{
  font-family:var(--font-head);font-size:.92rem;font-weight:600;
  margin-bottom:.5rem;padding:0;
}
.anlasspillen label{position:relative;display:inline-flex}
.anlasspillen input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.anlasspillen span{
  display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.1rem;
  border:1.5px solid var(--line);border-radius:var(--radius-pill);
  background:var(--surface);font-size:.92rem;font-weight:600;
  transition:border-color .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease);
}
.anlasspillen input:hover + span{border-color:var(--brand)}
.anlasspillen input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.anlasspillen input:checked + span{
  background:var(--navy);color:var(--cream);border-color:var(--navy);
}

@media print{
  .anlassbuehne a::after,.masonry__bild{box-shadow:none}
  .held--geteilt .held__bild{display:none}
}

/* Der Schieberegler des Rechners ist ein Bedienelement — sein Griff braucht
   24 px (WCAG 2.5.8). Das Zahlenfeld daneben bleibt der Hauptweg. */
.rechner__slider{height:28px;cursor:pointer}
.rechner__slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:26px;height:26px;border-radius:50%;
  background:var(--accent);border:2px solid var(--navy);cursor:pointer;
}
.rechner__slider::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;
  background:var(--accent);border:2px solid var(--navy);cursor:pointer;
}

/* ---------- Checkliste als Briefing-Dokument ----------
   Nummeriert, mit Haken, auf weißem Papier. Eine Stufe sachlicher als die
   Curry-Flächen der Startseite — diese Seite richtet sich an Office- und
   HR-Verantwortliche. */
.briefing{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(1.4rem,3vw,2.2rem);
  box-shadow:var(--shadow-card);
}
.briefing + .briefing{margin-top:clamp(1rem,2.5vw,1.5rem)}
.briefing > .h3{
  padding-bottom:.7rem;margin-bottom:.9rem;
  border-bottom:2px solid var(--curry-500);
}
.briefing__liste{display:grid;gap:.5rem;counter-reset:punkt}
.briefing__liste li{
  position:relative;padding-left:2rem;counter-increment:punkt;
  font-size:var(--fs-sm);color:var(--text-muted);
}
.briefing__liste li::before{
  content:counter(punkt,decimal-leading-zero);
  position:absolute;left:0;top:.05em;
  font-family:var(--font-head);font-size:.76rem;font-weight:700;
  letter-spacing:.04em;color:var(--curry-700);
}
.briefing__liste strong{color:var(--text);font-weight:700}

/* Lange Überschriften im geteilten Hero (z. B. „Foodtruck-Catering für die
   Firmenfeier"): Der Grad ist so gerechnet, dass das längste Wortpaar in
   eine Zeile passt — 36 px bei 390 px Copy-Breite, 52 px bei 512 px.
   Mit dem Standardgrad brach die Zeile sechsmal um. */
.held__titel--catering{
  font-size:clamp(2.25rem,1.88rem + 1.52vw,3.25rem);
  line-height:1.02;
}
@media (min-width:820px){
  .held__titel--catering{font-size:clamp(2.4rem,1.88rem + 1.52vw,3.25rem)}
}

/* Script-Zeile über dem Abschluss — auf Navy, deshalb in Curry-Gelb
   (7,83:1) statt im Orange der hellen Flächen. */
.abschluss__skript{color:var(--curry-500);margin-bottom:-.15em}
.abschluss .skript{font-size:clamp(1.6rem,1.1rem + 2vw,2.8rem)}

/* ---------- Zweiteilige H1 ----------
   Der große Claim macht den Moment, die kleinere Zeile trägt die Keywords —
   beides innerhalb der H1, damit das wichtigste SEO-Signal nicht verloren geht.
   Dieselbe Idee wie der Hero der Weihnachts-Site, dort über zwei Zeilen im
   .claim verteilt. */
.held__claim{display:block}
.held__kurz{
  display:block;margin-top:.5em;
  font-family:var(--font-head);font-weight:600;
  font-size:clamp(.95rem,.86rem + .36vw,1.22rem);
  line-height:1.3;letter-spacing:0;
  color:var(--text-muted);text-wrap:balance;
}
.held__titel--catering .held__kurz{font-size:clamp(.9rem,.84rem + .26vw,1.08rem)}

/* ---------- Öffnungszeiten-Tabelle ---------- */
.zeiten{width:100%;max-width:26rem;border-collapse:collapse;margin-block:1.1rem}
.zeiten th,.zeiten td{
  padding:.46rem 0;text-align:left;
  border-bottom:1px solid rgba(20,47,78,.12);
  font-size:var(--fs-sm);
}
.zeiten th{font-family:var(--font-head);font-weight:600}
.zeiten td{text-align:right;font-variant-numeric:tabular-nums}
.zeiten tr:last-child th,.zeiten tr:last-child td{border-bottom:0}
.zeiten__zu{color:var(--text-muted)}
/* Der heutige Tag wird hervorgehoben — nicht allein über Farbe, sondern
   zusätzlich durch Fettung und das Wort „heute". */
.zeiten .ist-heute th,.zeiten .ist-heute td{
  font-weight:700;color:var(--curry-700);
}
.zeiten__heute{
  display:inline-block;margin-left:.45rem;padding:.08rem .45rem;
  border-radius:var(--radius-pill);background:var(--curry-700);color:#fff;
  font-family:var(--font-head);font-size:.62rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;vertical-align:.12em;
}
.footer__zeiten{
  margin-top:.5rem;font-family:var(--font-head);font-weight:600;
  font-size:var(--fs-sm);color:var(--cream);
}

/* =============================================================
   Liefergebiet als Radar
   Dunkelblaue Sektion, Grafik rechts. Ohne JavaScript steht alles
   im Endzustand da — den Startzustand setzt erst das Skript.
   ============================================================= */
.radar{background:var(--blue-900);color:var(--cream);padding-block:var(--section-y)}
.radar__inner{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center}
@media (min-width:980px){
  .radar__inner{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
}
.radar .eyebrow{color:var(--orange)}
/* „Bis zu 50 km rund um Bruchsal. Wir kommen zu euch." ist ein Versprechen,
   keine Beschriftung — und stand als einzige Aussage dieser Art in Lexend. */
.radar__titel{color:var(--cream);margin-bottom:.8rem}
.radar__titel em{font-style:normal;color:var(--orange)}
.radar__lead{color:rgba(255,247,239,.78);max-width:46ch}

/* Zonenliste */
.radar__zonen-liste{margin-top:clamp(1.5rem,3vw,2.25rem)}
.radar__zeile{
  display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:baseline;
  padding-block:.7rem;border-top:1px solid rgba(255,247,239,.16);
  transition:color .2s var(--ease);
  cursor:default;
}
.radar__zeile:last-child{border-bottom:1px solid rgba(255,247,239,.16)}
.radar__zeile b{
  flex:0 0 auto;min-width:6.5rem;
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-sm);
}
.radar__zeile span{color:rgba(255,247,239,.74);font-size:var(--fs-sm)}
.radar__zeile.ist-aktiv,.radar__zeile:hover{color:var(--orange)}
.radar__zeile.ist-aktiv span,.radar__zeile:hover span{color:var(--orange)}
.radar__knopf{margin-top:1.75rem}

/* Grafik */
.radar__figur{margin:0;position:relative}
.radar__svg{width:100%;max-width:720px;margin-inline:auto;height:auto;display:block;overflow:visible}
.radar__zentrum-text{
  font-family:var(--font-head);font-weight:700;font-size:26px;fill:#fff;
  letter-spacing:-.01em;
}
/* Die Grade stehen in SVG-Einheiten und werden mit der Grafik skaliert.
   Gemessen: Bei 1440 px ist die Grafik 644 px breit (Faktor 0,805), bei
   390 px nur 350 px (Faktor 0,438). Damit die Beschriftung überall
   mindestens 14 px groß ankommt, wächst der Grad nach unten mit. */
.radar__label{
  font-family:var(--font-head);font-weight:600;font-size:18px;fill:#fff;
  transition:fill .2s var(--ease);
}
.radar__marke-text{
  font-family:var(--font-head);font-weight:700;font-size:15px;fill:var(--orange);
  letter-spacing:.04em;
}
.radar__punkt{transition:fill .2s var(--ease),r .2s var(--ease)}
.radar__halo{transition:opacity .25s var(--ease)}
.radar__ort{cursor:pointer}
.radar__ort:focus{outline:none}
.radar__ort:focus-visible .radar__halo{opacity:.3}
.radar__ort:focus-visible .radar__punkt{fill:var(--orange);stroke:#fff;stroke-width:2.5}
.radar__ort:hover .radar__punkt,.radar__ort.ist-aktiv .radar__punkt{fill:var(--orange)}
.radar__ort:hover .radar__label,.radar__ort.ist-aktiv .radar__label{fill:var(--orange)}
.radar__ort:hover .radar__halo,.radar__ort.ist-aktiv .radar__halo{opacity:.26}
.radar__zone{transition:opacity .25s var(--ease)}
.radar__zone.ist-hervor{opacity:.26!important}

/* Statuszeile und Fußnoten */
.radar__status{
  min-height:2.6rem;margin-top:1rem;
  font-family:var(--font-head);font-weight:600;font-size:var(--fs-sm);
  color:var(--orange);text-align:center;
}
.radar__status b{color:#fff}
.radar__fuss{
  margin-top:.3rem;text-align:center;
  font-size:var(--fs-xs);color:rgba(255,247,239,.6);
}
.radar__wieder{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  margin-top:.6rem;padding:.5rem 1.1rem;
  background:transparent;border:1px solid rgba(255,247,239,.4);
  border-radius:var(--radius-pill);color:var(--cream);
  font-family:var(--font-head);font-size:.84rem;font-weight:600;cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.radar__wieder:hover{border-color:var(--orange);color:var(--orange)}
.radar__wieder[hidden]{display:none}

/* Startzustand — wird NUR von JavaScript gesetzt. Ohne Skript ist die
   Grafik sofort vollständig sichtbar. */
.radar.ist-bereit .radar__zentrum,
.radar.ist-bereit .radar__zone,
.radar.ist-bereit .radar__marke,
.radar.ist-bereit .radar__ort{opacity:0}
.radar.ist-bereit .radar__zentrum{transform:scale(.6);transform-origin:400px 400px}

@media (max-width:980px){
  .radar__label{font-size:24px}
  .radar__zentrum-text{font-size:34px}
  .radar__marke-text{font-size:20px}
}
@media (max-width:560px){
  .radar__label{font-size:33px}      /* 390 px → 14,5 px effektiv */
  .radar__zentrum-text{font-size:46px}
  .radar__marke-text{font-size:26px}
  .radar__punkt{r:9}
}
@media (max-width:380px){
  .radar__label{font-size:36px}      /* 360 px → 14,4 px effektiv */
}
@media (prefers-reduced-motion:reduce){
  .radar.ist-bereit .radar__zentrum,
  .radar.ist-bereit .radar__zone,
  .radar.ist-bereit .radar__marke,
  .radar.ist-bereit .radar__ort{opacity:1}
  .radar.ist-bereit .radar__zentrum{transform:none}
  .radar__wieder{display:none}
}
@media print{ .radar{background:#fff;color:#000} .radar__wieder{display:none} }

/* Drei nahe Orte treten auf schmalen Displays zurück — dort sind die
   Beschriftungen deutlich größer und würden sich sonst überlagern.
   In der Zonenliste links stehen sie weiterhin. */
@media (max-width:560px){ .radar__ort[data-eng]{display:none} }

/* Nur die Orte sind anklickbar. Ohne diese Regel liegen die Zonenflächen
   über ihnen und fangen jeden Mauszeiger ab — die Orte wären mit der Maus
   nicht erreichbar (per Tastatur schon, der Fehler fällt also leicht durch). */
.radar__zonen,.radar__ringe,.radar__marken,
.radar__welle,.radar__puls,.radar__truck,.radar__zentrum,.radar__faden{
  pointer-events:none;
}
.radar__orte{pointer-events:auto}

/* ---------- Zentrale Seiten: 404 und Danke ---------- */
.mitte{text-align:center}
.mitte .lead{margin-inline:auto}
.mitte__wege{margin-top:clamp(2rem,4vw,3rem);text-align:left}
.mitte__wege .abschluss__weg{background:var(--surface);border-color:var(--line);color:var(--text)}
.mitte__wege .abschluss__weg span{color:var(--text-muted)}
.mitte__wege .abschluss__weg em{color:var(--curry-700)}
.mitte__wege .abschluss__weg:hover{border-color:var(--accent);background:var(--surface-alt)}
.mitte__ruf{margin-top:1.5rem;font-family:var(--font-head);font-weight:600}
.mitte__ruf a{
  display:inline-block;min-height:24px;padding-block:.22rem;
  /* Orange erreicht auf Paper nur 2,58:1 — curry-700 kommt auf 5,41:1. */
  color:var(--curry-700);text-decoration:underline;text-underline-offset:3px;
}
.mitte .anfrage__danke-zeichen{margin-bottom:1.25rem}

/* ---------- Speisekarte: Gruppe mit Bild ----------
   Die Karte zeigte zuvor 2 Bilder auf der ganzen Seite, bei 13 vorhandenen
   Studiofotos. Weil dort keine Preise stehen dürfen, bleibt von einer
   Speisekarte sonst fast nichts übrig — sie muss ihren Wert über Appetit
   holen. Jede Gruppe bekommt deshalb ihr Gericht, abwechselnd links und
   rechts, damit beim Scrollen ein Rhythmus entsteht. */
/* Der Hero endet hart, und die erste Gruppe begann bisher exakt an seiner
   Unterkante — gemessen 0 px Luft. Die „Wurst im Brötchen" klebte damit am
   dunklen Band. Oben deshalb derselbe Atem wie bei den übrigen Sektionen. */
.karte{padding-top:clamp(3rem,7vw,6rem)}
.karte__gruppe{
  display:grid;gap:clamp(1.2rem,3vw,2.4rem);align-items:start;
}
/* 64 px zwischen zwei Gruppen waren zu wenig für Überschriften dieser Größe:
   Die nächste Gruppe begann, bevor die vorige ausgeklungen war. */
.karte__gruppe + .karte__gruppe{margin-top:clamp(2.5rem,6vw,5rem)}
.karte__bild{margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-alt)}
.karte__bild img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
@media (min-width:860px){
  .karte__gruppe{grid-template-columns:minmax(0,1fr) minmax(0,.78fr)}
  .karte__gruppe > .h2,.karte__gruppe > .lead,.karte__gruppe > .karte__liste{grid-column:1}
  .karte__bild{grid-column:2;grid-row:1 / span 3;position:sticky;top:calc(var(--nav-h) + 1.5rem)}
  /* Jede zweite Gruppe spiegeln */
  .karte__gruppe:nth-of-type(even){grid-template-columns:minmax(0,.78fr) minmax(0,1fr)}
  .karte__gruppe:nth-of-type(even) > .h2,
  .karte__gruppe:nth-of-type(even) > .lead,
  .karte__gruppe:nth-of-type(even) > .karte__liste{grid-column:2}
  .karte__gruppe:nth-of-type(even) .karte__bild{grid-column:1}
}

/* ---------- Speisekarte: Abschluss ----------
   Die Karte endete zuvor mit „Zurück zur Startseite". Wer wissen wollte,
   wann und wo es das Essen gibt, musste zurück auf die Startseite. */
.zeiten-kurz{background:var(--blue-900);color:#fff}
.zeiten-kurz__raster{display:grid;gap:clamp(1.5rem,4vw,3rem)}
@media (min-width:760px){ .zeiten-kurz__raster{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* [data-site="main"] .eyebrow setzt --curry-700 (dunkelbraun) und schlägt
   eine einfache Klasse. Auf Navy ergab das 1,9:1. Dieselbe Spezifität,
   später im Stylesheet — damit gewinnt die helle Fassung. */
[data-site] .eyebrow--hell{color:var(--orange)}
/* Auf dunklem Grund gilt die Rechnung andersherum: Dort trägt das helle
   Orange (4,92:1 gegen Navy), während das dunkle auf 2,49:1 fiele.
   Betrifft alle Abschnitte mit dunkler Fläche, nicht nur die, die
   zufällig --hell am Element stehen haben. */
.section--navy .eyebrow,.klassiker .eyebrow,.appetitband .eyebrow,
.held .eyebrow,.preisbuehne--dunkel .eyebrow{color:var(--orange)}
/* Das Senfband ist hell (--senf-100, #F7E9C6). Dort misst das Orange
   2,29:1 — die Stelle mit dem schwächsten Kontrast überhaupt. Bleibt
   auf Kundenwunsch beim Markenorange. */
.senfband .eyebrow{color:var(--accent-text)}
.zeiten-kurz__gross{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(1.5rem,1.1rem + 1.5vw,2.1rem);line-height:1.1;
  margin:.4rem 0 .6rem;
}
.zeiten-kurz__text{color:rgba(255,255,255,.82);max-width:34ch;margin:0}
.zeiten-kurz__tun{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.zeiten-kurz .btn--ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.75);color:#fff}
.zeiten-kurz .btn--ghost:hover{background:rgba(255,255,255,.2);border-color:#fff}

/* Die Schau-Überschriften stehen in der Karte in einer halbbreiten Spalte.
   In voller Größe brechen sie dort in drei Zeilen („Pommes / und / Wedges"). */
@media (min-width:860px){
  .karte__gruppe > .h2.gross{font-size:clamp(2rem,1.2rem + 2.2vw,3.2rem)}
}

/* ---------- Stimmen als Slider ----------
   Vier Bewertungen nebeneinander, seitlich scrollbar. Kein Selbstlauf:
   Ein automatisch weiterspringender Slider bräuchte nach WCAG 2.2.2 eine
   sichtbare Pause-Schaltfläche, und für vier Zitate ist das mehr Mechanik
   als Nutzen. Ohne JavaScript bleibt alles lesbar und erreichbar — die
   Spur ist dann einfach ein scrollbarer Bereich. */
.stimmen__kopf{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;
  justify-content:space-between;margin-bottom:clamp(1.25rem,3vw,2rem);
}
.stimmen__wertung{margin:.3rem 0 0;font-size:var(--fs-lead)}
.stimmen__wertung b{color:var(--curry-700);font-weight:800}
/* Die Pfeile standen fast auf der ersten Karte. Der Rahmen darunter
   bringt oben nur .75rem Polster mit, das reichte nicht. */
.stimmen__steuerung{display:flex;gap:.5rem;margin-bottom:clamp(1.25rem,2.5vw,2rem)}
.stimmen__knopf{
  width:48px;height:48px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--white);color:var(--navy);
  font-size:1.1rem;line-height:1;cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
.stimmen__knopf:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}
.stimmen__knopf:disabled{opacity:.35;cursor:default}

/* Scrollbar UND fokussierbar muss dasselbe Element sein — sonst meldet
   axe „scrollable-region-focusable": Wer nur mit der Tastatur arbeitet,
   erreicht den Bereich sonst nicht. Im ersten Entwurf lag das Scrollen auf
   der Liste und der Tabstopp auf dem Rahmen darum. */
.stimmen__rahmen{
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;
  /* Der Schatten der Karten reicht 40 px nach unten und 28 px zur Seite
     (--shadow-card: 0 18px 40px -28px). Mit nur 16 px Polster schnitt
     der Rahmen ihn unten ab — eine harte Kante quer durch den weichen
     Verlauf. Das Polster deckt jetzt den Schatten, der negative
     Außenabstand nimmt es optisch wieder zurück. */
  padding:.75rem 1.5rem 2.75rem;margin:-.75rem -1.5rem -1.25rem;
}
.stimmen__spur{
  display:flex;gap:clamp(1rem,2.4vw,1.75rem);
  margin:0;padding:0;list-style:none;
}
.stimme{
  flex:0 0 min(26rem,82%);scroll-snap-align:start;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(1.25rem,3vw,2rem);
  box-shadow:var(--shadow-card);
}
.stimme__text{margin:0}
.stimme__text p{
  margin:0 0 1rem;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.25rem,1rem + .9vw,1.7rem);line-height:1.25;
  color:var(--navy);
}
/* Enge Zeilen gehören zur Schaugröße. Am unteren Ende der Skala — mobil
   stehen beide Zitatformen bei 20 px — ist dieselbe Enge zu eng: 25 px
   Zeilenabstand bei 20 px Schrift liest sich gedrängt. Darum dort
   lockerer, oben bleibt es wie es war. */
@media (max-width:640px){
  .stimme__text p,.story__zitat{line-height:1.45}
}
.stimme__quelle{font-size:var(--fs-sm);color:var(--text-muted)}
.stimmen__alle{margin-top:clamp(1.75rem,4vw,2.5rem)}
/* Ein Knopf statt einer unterstrichenen Zeile. Die Zeile maß 282 × 20 px
   und war damit nicht nur unter der Mindest-Zielfläche von 24 px, sie
   sah neben den übrigen Handlungsaufrufen auch aus wie Fließtext. */
.stimmen__alle a{
  display:inline-flex;align-items:center;gap:.55em;
  min-height:48px;padding:.75rem 1.5rem;
  border-radius:var(--radius-pill);
  border:1.5px solid rgba(20,47,78,.22);
  background:var(--white);color:var(--navy);
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-sm);
  letter-spacing:.03em;text-decoration:none;
  transition:background-color var(--dur-s,.28s) var(--ease),
             border-color var(--dur-s,.28s) var(--ease);
}
.stimmen__alle a:hover{background:var(--surface-alt);border-color:rgba(20,47,78,.4)}
.stimmen__alle a::after{content:"↗";font-size:.95em;line-height:1}
@media (max-width:519px){
  .stimme{flex-basis:88%}
}


/* ============================================================
   Klassiker — eine durchgehende dunkle Bühne, zwei Akte
   ============================================================
   Davor standen hier zwei gleich große Kästen nebeneinander, einer hell,
   einer dunkel, mit zwei unterschiedlich belichteten Fotos und einer
   harten Kante dazwischen. Das war ein Raster, keine Komposition.

   Jetzt trägt eine einzige dunkelblaue Fläche beide Gerichte. Die Fotos
   sind so getont, dass ihre Ränder im Grund verschwinden (siehe
   tools/klassiker-buehne.py), die Kategorienamen stehen riesig dahinter,
   und der zweite Akt ist gespiegelt und tiefer eingerückt. */
.klassiker{
  background:var(--blue-900);color:#fff;overflow:hidden;
  /* Hing vorher an der Fensterhöhe (9vh) und ergab dadurch 81 px, während
     die Sektionen daneben auf 160 standen. Jetzt dieselbe Skala. */
  padding-block:var(--luft-m);
}
/* Feines Korn, damit die große Fläche nicht flach wirkt */
.klassiker::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
.klassiker{position:relative}
.klassiker > *{position:relative}
.klassiker__titel{color:#fff;max-width:22ch}
/* Akzentwort in der großen Überschrift: aufrecht statt kursiv, in Orange.
   Gemessen: Orange #EF7D00 auf Navy #142F4E = 4,92:1 — AA auch für
   Fließtextgröße. Auf weißem Grund käme dasselbe Orange nur auf 2,76:1
   und verfehlte sogar die 3:1 für große Schrift. Die Regel bleibt
   deshalb auf die dunkle Klassiker-Fläche beschränkt und gilt nicht
   allgemein für .h2. */
.klassiker .h2 em{font-style:normal;color:var(--orange)}

.akt{
  display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  margin-top:clamp(2.5rem,7vw,6rem);
}
/* Unter 1024 px steht alles untereinander. Der seitliche Abstand kam
   vorher nur aus der Desktop-Regel — die Liste klebte am Bildschirmrand.
   Das Bild bleibt bewusst randabfallend. */
.akt__text{padding-inline:var(--gutter)}
.akt > .shell{padding-inline:0}
@media (min-width:1024px){
  .akt{
    grid-template-columns:7fr 5fr;
    max-width:var(--shell);margin-inline:auto;
    padding-inline:var(--gutter);
  }
  /* Zweiter Akt gespiegelt und tiefer eingerückt */
  .akt--zwei{grid-template-columns:5fr 7fr;margin-top:clamp(4rem,10vw,9rem)}
  .akt--zwei .akt__buehne{order:2}
  .akt--zwei .akt__text{order:1}
}

/* ---------- Bühne: Riesenwort hinten, Gericht davor ---------- */
/* Das Polster oben ist der Platz, in dem das Riesenwort steht: Das Wort
   sitzt an der Oberkante der Bühne, das Gericht beginnt erst darunter.
   Gemessen war davon nur 39–45 % der Schrifttinte zu sehen — die Oberlängen
   und die Spitzen von u, r, s. Ein Wort liest man so nicht.
   Das Polster folgt deshalb dem Schriftgrad (rund 0,52 × Grad); sichtbar
   sind damit etwa vier Fünftel der Tinte, also alles bis kurz über die
   Grundlinie. Den Rest verdeckt das Gericht weiterhin — so war es gemeint. */
.akt__buehne{position:relative;display:grid;place-items:center;
  padding-top:clamp(2.35rem,1.05rem + 8.85vw,8.35rem)}
/* Das Riesenwort stand zunächst mittig hinter dem Gericht — und war damit
   vollständig verdeckt. Jetzt sitzt es am oberen Rand der Bühne und am
   äußeren Rand des Akts: Die Oberlängen schauen über das Gericht hinaus,
   der Rest verschwindet dahinter. Genau das war gemeint. */
.akt__riese{
  position:absolute;z-index:0;top:0;translate:0 -18%;
  font-family:var(--font-display);font-weight:900;line-height:.78;
  font-size:clamp(4.5rem,2rem + 17vw,16rem);letter-spacing:-.045em;
  color:rgba(255,255,255,.17);white-space:nowrap;pointer-events:none;
}
.akt--eins .akt__riese{left:-.06em}
.akt--zwei .akt__riese{right:-.06em}
/* Einheitliche Rahmung statt randlosem Übergang.
   Die Bilder werden nicht bearbeitet (Vorgabe des Kunden), ihre
   Hintergründe unterscheiden sich deshalb — links grauer Schiefer,
   rechts fast schwarz. Gleiches Seitenverhältnis, gleiche Rundung und
   ein feiner heller Rand binden sie trotzdem zu einem Paar. */
.akt__bild{
  position:relative;z-index:1;margin:0;
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  outline:1px solid rgba(255,255,255,.1);outline-offset:-1px;
}
.akt__bild img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
@media (min-width:1024px){
  /* Das Gericht darf über den Seitenrand hinausragen */
  /* Das Bild ragt weiterhin nach außen, aber mit sichtbarer Kante: Sie
     ist jetzt Teil der Gestaltung, nicht ein Fehler, den man verstecken
     müsste. Deshalb weniger weit als in der Fassung mit Vignette — ein
     gerahmtes Bild, das halb aus dem Bild läuft, wirkt abgeschnitten. */
  .akt--eins .akt__bild{margin-left:calc(-1 * var(--gutter) - 2vw);width:calc(100% + var(--gutter) + 2vw)}
  .akt--zwei .akt__bild{margin-right:calc(-1 * var(--gutter) - 2vw);width:calc(100% + var(--gutter) + 2vw)}
}

/* ---------- Gerichtsliste ---------- */
.akt__nr{
  font-family:var(--font-head);font-weight:800;font-size:var(--fs-sm);
  letter-spacing:.14em;color:var(--accent);margin:0 0 .3rem;
}
.akt__name{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);line-height:1;
  color:#fff;margin:0;
}
.akt__intro{color:rgba(255,255,255,.76);margin:.5rem 0 1.6rem;max-width:34ch}
.akt__liste{list-style:none;margin:0;padding:0}
.akt__liste li{padding:1rem 0;border-top:1px solid rgba(255,255,255,.16)}
.akt__liste li:first-child{border-top:0;padding-top:0}
.akt__gericht{
  margin:0;font-family:var(--font-head);font-weight:700;color:#fff;
  font-size:clamp(1.3rem,1.1rem + .7vw,1.75rem);line-height:1.2;
}
.akt__zeile{margin:.2rem 0 0;color:rgba(255,255,255,.7);max-width:38ch}
.akt__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 0}
.akt__tag{
  font-size:var(--fs-xs);letter-spacing:.04em;
  padding:.18rem .6rem;border-radius:var(--radius-pill);
  border:1px solid var(--accent);color:var(--accent);
}
.akt__tag--scharf{border-color:#FF8A7A;color:#FF8A7A}

/* ---------- Bewegung ---------- */
.akt__bild,.akt__riese,.akt__text > *{
  transition:opacity var(--dur-m,.6s) var(--ease),
             translate var(--dur-m,.6s) var(--ease);
}
/* Zwei Dinge auf einmal:
   · Das Einblenden läuft über `translate`, weil der Parallax die
     `transform`-Eigenschaft des Bildes belegt.
   · Der Ausgangszustand hängt an `.js`. Ohne diese Bedingung galt
     opacity:0 auch ohne JavaScript — gemessen mit javaScriptEnabled:
     false waren beide Gerichte unsichtbar. Die Klasse setzt ein
     Einzeiler im <head>, der nur mit JavaScript läuft. */
.js .akt:not(.ist-da) .akt__bild{opacity:0;translate:0 40px}
.js .akt:not(.ist-da) .akt__riese{opacity:0}
.js .akt:not(.ist-da) .akt__text > *{opacity:0;translate:0 16px}
@media (prefers-reduced-motion:reduce){
  .akt__bild,.akt__riese,.akt__text > *{transition:none}
  .js .akt:not(.ist-da) .akt__bild,
  .js .akt:not(.ist-da) .akt__riese,
  .js .akt:not(.ist-da) .akt__text > *{opacity:1;translate:none}
}

/* Freisteller in der Speisekarte: ohne Rahmen und ohne Hintergrund, sonst
   stünde das freigestellte Gericht in einem leeren Kasten. */
.karte__bild--frei{background:none;border-radius:0;overflow:visible}
.karte__bild--frei img{aspect-ratio:auto;object-fit:contain}


/* Die Bildunterschriften der Galerie standen direkt unter <li>.
   <figcaption> ist dort nicht erlaubt — es gehört in ein <figure>.
   Die Figur selbst soll im Raster nichts verändern, deshalb ohne
   eigene Außenabstände und als Block über die volle Breite. */
.masonry__figur{margin:0;display:block}


/* Der Teaser trägt jetzt zwei Wege: anfragen oder erst nachlesen.
   Nebeneinander auf breiten Schirmen, gestapelt auf schmalen. */
.saison__knopf{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:1rem 1.75rem}
.saison__mehr{
  display:inline-flex;align-items:center;gap:.45em;min-height:44px;
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-sm);
  color:var(--navy);text-underline-offset:4px;
}
.saison__mehr::after{content:"→";transition:transform .2s var(--ease)}
.saison__mehr:hover::after{transform:translateX(3px)}