/* ===========================================================================
   Dönerschmiede Wald-Michelbach
   Gestaltung: Werkstatt / Industrie – Stahl, Warnstreifen, Schablonenschrift.
   Farben stammen aus dem Logo: Orange, Anthrazit, Creme.
   =========================================================================== */

:root {
  /* Marke */
  --orange:        #F0591F;
  --orange-hell:   #FF7A3D;
  --orange-dunkel: #C4400F;
  --anthrazit:     #2E3338;
  --creme:         #F3DEC0;

  /* Flächen */
  --bg:            #131517;
  --bg-2:          #191C1F;
  --bg-3:          #202427;
  --stahl:         #2A2F33;
  --linie:         rgba(243, 222, 192, .14);
  --linie-stark:   rgba(243, 222, 192, .28);

  /* Schrift */
  --text:          #F5F1EA;
  --text-leise:    #A9A49C;
  --display:       'Oswald', 'Haettenschweiler', 'Arial Narrow', system-ui, sans-serif;
  --body:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --radius:        3px;
  --breite:        1180px;
  --header-h:      150px;
}

/* --- Grundlagen ---------------------------------------------------------- */

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.05;
  margin: 0;
}

sup { font-size: .62em; letter-spacing: .04em; color: var(--text-leise); font-weight: 400; }

::selection { background: var(--orange); color: #fff; }

.wrap { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 22px; }

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

/* Sprungmarke für Tastatur-Navigation */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--orange); color: #fff; padding: 10px 18px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .08em;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--orange-hell); outline-offset: 3px; }

/* --- Wiederkehrende Bauteile --------------------------------------------- */

/* Warnstreifen – das Leitmotiv der Seite */
.warnstreifen {
  height: 10px;
  background: repeating-linear-gradient(
    -45deg,
    var(--orange) 0 14px,
    var(--anthrazit) 14px 28px
  );
}
.warnstreifen--duenn { height: 6px; opacity: .85; }

/* Stahlplatten-Hintergrund mit Nietenkanten */
.stahl {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18)),
    var(--stahl);
  position: relative;
}

/* Abschnitts-Kopf: Nummer + Titel, wie ein Bauteil-Stempel */
.abschnitt { padding: 76px 0; position: relative; }
#signature, #lieferung { overflow: hidden; }
.abschnitt--dunkel  { background: var(--bg-2); }
.abschnitt--tief    { background: #0F1113; }

.kopf { margin-bottom: 44px; }
.kopf__nummer {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 13px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 12px;
}
.kopf__nummer::before {
  content: ''; width: 34px; height: 2px; background: var(--orange);
}
.kopf__titel { font-size: clamp(30px, 5vw, 48px); }
.kopf__text  { color: var(--text-leise); max-width: 60ch; margin-top: 14px; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display); font-weight: 600; font-size: 16px;
  text-transform: uppercase; letter-spacing: .09em;
  padding: 14px 30px; border: 2px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: transform .12s ease, background .2s, color .2s, border-color .2s;
}
.knopf:active { transform: translateY(1px); }
.knopf--voll { background: var(--orange); color: #fff; }
.knopf--voll:hover { background: var(--orange-hell); }
.knopf--rand { border-color: var(--linie-stark); color: var(--text); }
.knopf--rand:hover { border-color: var(--orange); color: var(--orange); }
.knopf--klein { padding: 10px 20px; font-size: 14px; }

/* Status-Plakette „jetzt geöffnet / geschlossen" */
.status {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  padding: 7px 15px; border-radius: 999px; border: 1px solid;
}
.status__punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status--auf  { color: #7BD88F; border-color: rgba(123,216,143,.4); background: rgba(123,216,143,.08); }
.status--auf  .status__punkt { background: #7BD88F; box-shadow: 0 0 0 0 rgba(123,216,143,.7); animation: puls 2s infinite; }
.status--zu   { color: #E8836B; border-color: rgba(232,131,107,.4); background: rgba(232,131,107,.08); }
.status--zu   .status__punkt { background: #E8836B; }

@keyframes puls {
  0%   { box-shadow: 0 0 0 0 rgba(123,216,143,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(123,216,143,0); }
  100% { box-shadow: 0 0 0 0 rgba(123,216,143,0); }
}

/* --- Kopfleiste ---------------------------------------------------------- */

.topleiste {
  background: var(--anthrazit);
  font-size: 13.5px;
  border-bottom: 1px solid rgba(0,0,0,.4);
}
.topleiste__innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 9px 22px; max-width: var(--breite); margin: 0 auto;
}
.topleiste__ort { color: var(--text-leise); display: flex; align-items: center; gap: 8px; }
.topleiste__tel { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.topleiste__tel:hover { color: var(--orange-hell); }

.kopfleiste {
  position: sticky; top: 0; z-index: 90;
  background: rgba(19,21,23,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
  transition: box-shadow .25s;
}
.kopfleiste--gescrollt { box-shadow: 0 8px 30px rgba(0,0,0,.5); }

/* Kopf: Logo mittig oben als Schild, Navigation darunter */
.kopfleiste__innen {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: var(--breite); margin: 0 auto; padding: 0 22px 14px;
}

/* Logo freigestellt, mittig oben. Kein zusätzlicher Rahmen/Schein nötig –
   das Design trägt sich auf dem dunklen Grund selbst (Orange auf Weiß/Navy
   mit genug Kontrast). */
.marke { display: block; padding: 10px 8px 0; }
/* Logo hat einen weißen Grund (bewusst so gewählt, wirkt wie ein Emblem/Schild
   statt freigestellt auf dunklem Untergrund zu schweben). Abgerundete Ecken
   und ein feiner Rand, damit die weiße Fläche gestaltet statt zufällig wirkt. */
.marke__bild {
  height: 118px; width: auto; transition: height .25s ease;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.55));
}
.kopfleiste--gescrollt .marke__bild { height: 54px; }

.navi { display: flex; align-items: center; gap: 4px; }
.navi a {
  font-family: var(--display); font-size: 15px; text-transform: uppercase;
  letter-spacing: .08em; padding: 9px 13px; color: var(--text-leise);
  border-radius: var(--radius); transition: color .18s, background .18s;
}
.navi a:hover, .navi a.aktiv { color: var(--orange); background: rgba(240,89,31,.08); }

.burger {
  display: none; background: none; border: 1px solid var(--linie-stark);
  border-radius: var(--radius); padding: 9px 11px; cursor: pointer;
  position: absolute; right: 22px; top: 18px;
}
.burger span {
  display: block; width: 21px; height: 2px; background: var(--text);
  transition: transform .25s, opacity .2s;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobilnavi {
  display: none; flex-direction: column; gap: 2px;
  background: var(--bg-2); border-bottom: 1px solid var(--linie); padding: 12px 22px 20px;
}
.mobilnavi.offen { display: flex; }
.mobilnavi a {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .08em;
  padding: 13px 4px; border-bottom: 1px solid var(--linie); font-size: 17px;
}
.mobilnavi .knopf { margin-top: 16px; }

/* --- Bühne (Hero) -------------------------------------------------------- */

.buehne {
  position: relative; overflow: hidden;
  padding: 68px 0 78px;
  background:
    radial-gradient(1100px 520px at 78% 12%, rgba(240,89,31,.20), transparent 62%),
    radial-gradient(760px 420px at 8% 90%, rgba(240,89,31,.09), transparent 60%),
    var(--bg);
}
/* ===========================================================================
   Schwebende Freisteller (Burger, Döner, Spieß, Pizzastück, drehende Pizza)
   ---------------------------------------------------------------------------
   Liegen als Hintergrundbild auf leeren Flächen – fehlt eine Datei, bleibt die
   Fläche einfach leer statt ein kaputtes Bildsymbol zu zeigen.
   Dateien gehören nach assets/img/deko/ .

   Bewusst mit FESTEN Pixelwerten pro Haltepunkt statt vw/clamp: Größe und
   Position sind für Handy, Tablet und Desktop jeweils fest verdrahtet, damit
   sich nichts fließend "verrechnet" und auf ungewöhnlichen Bildschirmgrößen
   verrutscht. Drei Zustände, keine Zwischenwerte:
     Desktop (> 1100px) – groß, neben dem Inhalt vertikal zentriert
     Tablet  ( 701–1100px) – mittelgroß, oben in der Ecke des Abschnitts
     Handy   (<= 700px)  – klein, oben in der Ecke, am Rand angeschnitten
   Auf Handy/Tablet sitzen sie bewusst im oberen Rand-Polster jedes Abschnitts,
   also immer VOR dem eigentlichen Text – so ist Überlappung ausgeschlossen,
   unabhängig davon wie viele Zeilen der Text auf dem jeweiligen Gerät braucht.
   =========================================================================== */

.deko {
  position: absolute; z-index: 1; pointer-events: none;
  background-repeat: no-repeat; background-position: center;
  background-size: contain;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.55));
}
.deko--links  { left: -24px; }
.deko--rechts { right: -24px; }

/* Zwei getrennte Bewegungsarten, die sich nicht in die Quere kommen:
   .deko--bob   schwebt sanft (Döner, Spieß, Burger, Pizzastück)
   .deko--dreht dreht sich gleichmäßig im Uhrzeigersinn (die ganze Pizza) */
.deko--bob   { animation: schweben-mitte 7s ease-in-out infinite; }
.deko--dreht { animation: drehen 46s linear infinite; filter: drop-shadow(0 16px 30px rgba(0,0,0,.5)); }

/* Desktop: vertikal zentriert im jeweiligen Abschnitt */
.deko--mitte { top: 50%; transform: translateY(-50%); }

@keyframes schweben-mitte {
  0%, 100% { transform: translateY(-50%) translate3d(0, 0, 0)     rotate(0deg); }
  33%      { transform: translateY(-50%) translate3d(0, -16px, 0) rotate(-1.4deg); }
  66%      { transform: translateY(-50%) translate3d(0, 9px, 0)   rotate(1.1deg); }
}
@keyframes schweben-oben {
  0%, 100% { transform: translate3d(0, 0, 0)    rotate(0deg); }
  33%      { transform: translate3d(0, -9px, 0) rotate(-1.2deg); }
  66%      { transform: translate3d(0, 6px, 0)  rotate(1deg); }
}
@keyframes drehen {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Jedes Motiv einzeln: eigene Bilddatei, eigene feste Größe je Haltepunkt. */
.deko--doener  { background-image: url('../img/deko/haehnchendoener.png'); }
.deko--spiess  { background-image: url('../img/deko/spiess-rechts.png'); }
.deko--burger  { background-image: url('../img/deko/cheeseburger.png'); }
.deko--stueck  { background-image: url('../img/deko/pizzastueck.png'); }
.deko--pizza   { background-image: url('../img/deko/sucukpizza.png'); }

/* --- Desktop-Maße (> 1100px) --- */
.deko--doener, .deko--spiess { width: 260px; height: 320px; }
.deko--burger                { width: 250px; height: 260px; }
.deko--stueck                { width: 220px; height: 220px; }
.deko--pizza                 { width: 260px; height: 260px; }

.deko--doener { animation-delay: -1.4s; }
.deko--spiess { animation-delay: -4.1s; }
.deko--burger { animation-delay: -2.6s; }
.deko--stueck { animation-delay: -5.2s; }

/* --- Tablet (701–1100px): mittelgroß, oben in der Ecke --- */
@media (max-width: 1100px) and (min-width: 701px) {
  .deko--mitte { top: 18px; transform: none; }
  .deko--bob.deko--mitte { animation-name: schweben-oben; }

  .deko--doener, .deko--spiess { width: 150px; height: 185px; }
  .deko--burger                { width: 148px; height: 154px; }
  .deko--stueck                { width: 128px; height: 128px; }
  .deko--pizza                 { width: 150px; height: 150px; }
}

/* --- Handy (<= 700px): klein, oben in der Ecke, Rand leicht angeschnitten --- */
@media (max-width: 700px) {
  .deko--mitte { top: 12px; transform: none; }
  .deko--bob.deko--mitte { animation-name: schweben-oben; }
  .deko { opacity: .88; }

  .deko--links  { left: -16px; }
  .deko--rechts { right: -16px; }

  .deko--doener, .deko--spiess { width: 92px; height: 113px; }
  .deko--burger                { width: 90px; height: 94px; }
  .deko--stueck                { width: 80px; height: 80px; }
  .deko--pizza                 { width: 92px; height: 92px; }

  /* Döner in der Bühne: ohne den Spieß daneben nicht mehr an der Kante
     angeschnitten, sondern mittig über der Überschrift – wirkt sonst wie
     ein Zufallsschnipsel am Bildrand. */
  .buehne .deko--doener { left: 0; right: 0; margin: 0 auto; }
}

@media (min-width: 1101px) {
  .deko--burger.deko--mitte,
  .deko--stueck.deko--mitte { top: 64px; transform: none; }

  /* Burger bei den Spezialitäten: viel weiter links, näher an Überschrift
     und Text statt am nackten Seitenrand hängend. max() statt reinem calc():
     die reine Rechnung (100% - Inhaltsbreite)/2 kann bei schmaleren Desktop-
     Fenstern nahe null oder sogar negativ werden – dann hängt das Bild
     wieder über den Rand hinaus, genau das Problem, das hier auftrat.
     Mit max() bleibt IMMER mindestens 200px Abstand zum Rand, unabhängig
     von der Fensterbreite, und auf breiten Bildschirmen wächst der Abstand
     zusätzlich mit. Dazu kein CSS-Schlagschatten mehr; das Bild hat seinen
     eigenen weichen Schatten schon eingebaut. */
  /* Alle schwebenden Bilder gleich weit vom Rand weg, statt wie vorher jedes
     mit eigenem Abstand am Fensterrand zu kleben und angeschnitten zu werden.
     max() sorgt dafuer, dass der Abstand auch bei schmaleren Desktop-Fenstern
     nie unter 200px faellt; auf breiten Bildschirmen waechst er mit. */
  .deko--rechts.deko--mitte {
    right: max(200px, calc((100% - var(--breite)) / 2 + 60px));
  }
  .deko--links.deko--mitte {
    left: max(200px, calc((100% - var(--breite)) / 2 + 60px));
  }
  /* Die Bilder bringen ihren eigenen weichen Schatten schon mit – ein
     zusaetzlicher CSS-Schlagschatten macht daraus nur einen zweiten,
     versetzten Schatten. */
  .deko { filter: none; }
}

/* ===========================================================================
   3D-Drehspieß (Three.js) – ersetzt den flachen Spieß-Platzhalter rechts.
   Positionierung folgt demselben Dreier-Raster wie .deko oben; die eigentliche
   Bewegung (Drehung, Funken) kommt aus assets/js/spiess-3d.js per Three.js/GSAP,
   hier steht nur Lage und Größe des Behälters.
   =========================================================================== */

.spiess3d {
  position: absolute; z-index: 1; pointer-events: none;
  right: -24px; top: 50%; transform: translateY(-50%);
  width: 300px; height: 380px;
}
.spiess3d canvas { width: 100%; height: 100%; display: block; }

/* warmer Schein hinter dem Spieß, passend zum Bühnenlicht */
.spiess3d::before {
  content: ''; position: absolute; inset: -20%; z-index: -1;
  background: radial-gradient(ellipse at 50% 60%, rgba(240,89,31,.38), transparent 70%);
  filter: blur(8px);
}

@media (max-width: 1100px) and (min-width: 701px) {
  .spiess3d { top: 18px; transform: none; width: 180px; height: 228px; }
}
@media (max-width: 700px) {
  /* Auf dem Handy ist neben dem Döner kein Platz mehr für den Spieß, ohne
     dass beide Motive zerschnitten und übereinander wirken – bleibt hier weg. */
  .spiess3d { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .deko { animation: none; }
}
@media print {
  .deko { display: none !important; }
}

/* Ruhezone: reserviert oben in jedem Abschnitt mit Deko-Motiv exakt so viel
   Platz, dass das Bild dort vollständig hineinpasst, bevor der Text beginnt. */
@media (max-width: 1100px) and (min-width: 701px) {
  .buehne                { padding-top: 224px; }
  #signature .wrap        { padding-top: 178px; }
  #lieferung .wrap        { padding-top: 152px; }
}
@media (max-width: 700px) {
  .buehne                { padding-top: 142px; }
  #signature .wrap        { padding-top: 112px; }
  #lieferung .wrap        { padding-top: 96px; }
}
.buehne__innen {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.buehne__marke {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 13px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--creme); opacity: .75; margin-bottom: 18px;
}
.buehne__marke::before, .buehne__marke::after {
  content: ''; width: 26px; height: 1px; background: var(--orange);
}
.buehne h1 {
  font-size: clamp(42px, 7.6vw, 82px);
  line-height: .96; margin-bottom: 20px;
}
.buehne h1 em {
  font-style: normal; color: var(--orange);
  display: block;
}
.buehne__text {
  color: var(--text-leise); font-size: 17.5px; max-width: 52ch;
  margin: 0 auto 30px;
}
.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; justify-content: center; }
.buehne__fakten {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
  padding-top: 24px; border-top: 1px solid var(--linie);
  font-size: 14px; color: var(--text-leise); max-width: 760px; margin: 0 auto;
}
.buehne__fakten > span { display: inline-flex; align-items: center; gap: 8px; }
.buehne__fakten > span > span { display: inline; }
.buehne__fakten svg { color: var(--orange); flex: none; }


/* --- Merkmale ------------------------------------------------------------ */

.merkmale {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--linie);
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.merkmal {
  background: var(--bg-2); padding: 30px 26px;
  display: flex; flex-direction: column; gap: 10px;
  transition: background .25s;
}
.merkmal:hover { background: var(--bg-3); }
.merkmal svg { color: var(--orange); }
.merkmal h3 { font-size: 18px; letter-spacing: .05em; }
.merkmal p { margin: 0; font-size: 14.5px; color: var(--text-leise); line-height: 1.6; }

/* --- Signature Dishes ---------------------------------------------------- */

.signature { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sig-karte {
  position: relative; padding: 26px 22px 24px;
  background: linear-gradient(165deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s;
}
.sig-karte::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: repeating-linear-gradient(-45deg, var(--orange) 0 8px, transparent 8px 16px);
}
.sig-karte:hover { transform: translateY(-4px); border-color: rgba(240,89,31,.45); }
.sig-karte__preis {
  font-family: var(--display); font-size: 27px; color: var(--orange); margin-bottom: 6px;
}
.sig-karte h3 { font-size: 20px; margin-bottom: 9px; }
.sig-karte p { margin: 0; font-size: 14px; color: var(--text-leise); line-height: 1.6; }

/* --- Speisekarte --------------------------------------------------------- */

.filter {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px;
  padding-bottom: 26px; border-bottom: 1px solid var(--linie);
}
.filter button {
  font-family: var(--display); font-size: 14px; text-transform: uppercase;
  letter-spacing: .07em; padding: 9px 17px; cursor: pointer;
  background: transparent; color: var(--text-leise);
  border: 1px solid var(--linie); border-radius: 999px;
  transition: all .18s;
}
.filter button:hover { color: var(--text); border-color: var(--linie-stark); }
.filter button.aktiv { background: var(--orange); border-color: var(--orange); color: #fff; }

.karte-block { margin-bottom: 58px; scroll-margin-top: calc(var(--header-h) + 20px); }
.karte-block__kopf {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.karte-block__kopf h3 { font-size: 27px; color: var(--creme); }
.karte-block__kopf::after {
  content: ''; flex: 1 1 60px; height: 1px; background: var(--linie); min-width: 40px;
}
.karte-block__hinweis {
  font-size: 14px; color: var(--text-leise); font-style: italic; margin: 0 0 22px;
}

.gerichte { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 40px; }

/* Ein Gericht: Name links, Punktlinie, Preis rechts – wie auf einem Beleg */
.gericht {
  display: grid; grid-template-columns: 1fr auto;
  gap: 4px 14px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px dashed var(--linie);
}
/* Bestellnummer wie im Imbiss – eigenes Feld vor dem Namen, Zahlen bleiben
   gleich breit (tabular-nums), damit die Karte nicht wackelt. */
.gericht__nummer {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 27px; height: 27px; padding: 0 5px; margin-right: 10px;
  vertical-align: middle; transform: translateY(-1px);
  background: var(--bg); color: var(--orange);
  border: 1.5px solid var(--orange);
  border-radius: 5px;
  font-family: var(--display); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.pizza-tabelle th[scope="row"] .gericht__nummer { margin-right: 8px; }

/* Produktfoto in der Karte. Nur Gerichte mit Bild bekommen die dritte Spalte
   davor; alle anderen bleiben unveraendert zweispaltig, damit die Karte nicht
   halb bebildert und halb leer wirkt. Das Bild ueberspannt Name und
   Beschreibungszeile, sitzt also mittig zum ganzen Eintrag. */
.gericht--bild { grid-template-columns: 74px 1fr auto; }
.gericht__bild {
  grid-row: 1 / span 2; grid-column: 1;
  align-self: center; justify-self: center;
  width: 74px; height: 74px;
  object-fit: contain;
}
.gericht--bild .gericht__text { grid-column: 2 / -1; }

/* Handy: Bild, Name und Preis passen nebeneinander nicht mehr auf eine Zeile –
   lange Namen wie „Chicken Nuggets 10er (10 Stück)" brechen sonst auf fünf
   Zeilen um. Deshalb hier nur noch zwei Spalten: Bild links, rechts daneben
   Name, Preis und Beschreibung untereinander. */
@media (max-width: 700px) {
  .gericht--bild { grid-template-columns: 62px 1fr; }
  .gericht__bild { width: 62px; height: 62px; align-self: start; }
  .gericht--bild .gericht__preise { grid-column: 2; justify-content: flex-start; }
  .gericht--bild .gericht__text   { grid-column: 2; }
}

.gericht__name {
  font-family: var(--display); font-size: 18px; font-weight: 600;
  text-transform: none; letter-spacing: .01em; color: var(--text);
}
.gericht__preise { display: flex; gap: 16px; align-items: baseline; white-space: nowrap; }
.gericht__preis {
  font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--orange);
}
.gericht__preis small {
  display: block; font-family: var(--body); font-size: 11px; font-weight: 500;
  color: var(--text-leise); text-transform: uppercase; letter-spacing: .07em;
  text-align: right; margin-bottom: 1px;
}
.gericht__text {
  grid-column: 1 / -1; margin: 3px 0 0;
  font-size: 14px; color: var(--text-leise); line-height: 1.55;
}

/* Zusatz-Beläge unter einer Kategorie */
.extras {
  margin-top: 20px; padding: 18px 22px;
  background: rgba(240,89,31,.06);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.extras h4 {
  font-size: 14px; letter-spacing: .12em; color: var(--orange); margin-bottom: 10px;
}
.extras ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.extras li {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 14.5px; color: var(--text-leise);
}
.extras li b { color: var(--text); font-weight: 600; white-space: nowrap; }

/* Pizza-Preistabelle */
.pizza-tabelle-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pizza-tabelle {
  width: 100%; border-collapse: collapse; min-width: 480px;
  font-size: 15px;
}
.pizza-tabelle th, .pizza-tabelle td {
  padding: 13px 14px; text-align: right; border-bottom: 1px solid var(--linie);
}
.pizza-tabelle th:first-child, .pizza-tabelle td:first-child { text-align: left; }
.pizza-tabelle thead th {
  font-family: var(--display); font-size: 15px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--creme); border-bottom-color: var(--linie-stark);
}
.pizza-tabelle thead th span {
  display: block; font-family: var(--body); font-size: 11.5px; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--text-leise); margin-top: 2px;
}
.pizza-tabelle td { color: var(--text-leise); }
.pizza-tabelle tr.basis td { color: var(--text); font-weight: 600; }
.pizza-tabelle tr.basis td:not(:first-child) {
  font-family: var(--display); font-size: 19px; color: var(--orange);
}

.belaege { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 26px; }
.belag-gruppe {
  padding: 16px 18px; background: var(--bg-3);
  border: 1px solid var(--linie); border-radius: var(--radius);
}
.belag-gruppe h4 { font-size: 14px; letter-spacing: .12em; color: var(--orange); margin-bottom: 7px; }
.belag-gruppe p { margin: 0; font-size: 14px; color: var(--text-leise); line-height: 1.6; }

/* Allergen-Legende */
.legende {
  margin-top: 12px; padding: 26px 28px;
  background: var(--bg-3); border: 1px solid var(--linie); border-radius: var(--radius);
}
.legende h3 { font-size: 17px; margin-bottom: 16px; color: var(--creme); }
.legende__spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 40px; }
.legende h4 {
  font-size: 12.5px; letter-spacing: .12em; color: var(--orange); margin-bottom: 8px;
}
.legende ul { list-style: none; margin: 0; padding: 0; font-size: 13.5px; color: var(--text-leise); }
.legende li { padding: 2px 0; }
.legende li b { color: var(--text); font-family: var(--display); margin-right: 6px; }

/* --- Logo-Band zwischen Speisekarte und Lieferung ------------------------- */

.logoband {
  position: relative; overflow: hidden;
  padding: 72px 0 78px;
  background:
    radial-gradient(760px 420px at 50% 62%, rgba(240,89,31,.20), transparent 68%),
    #101214;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.logoband__innen {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 22px;
}
.logoband__bild {
  height: clamp(200px, 27vw, 340px); width: auto;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.55));
}
.logoband__zeile {
  margin: -4px 0 0;
  font-family: var(--display); font-size: 14px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-leise);
}

@media (max-width: 560px) {
  .logoband { padding: 52px 0 56px; }
  .logoband__zeile { letter-spacing: .14em; font-size: 12.5px; }
  .logoband__innen .knopf { width: 100%; }
}

/* --- Lieferung ----------------------------------------------------------- */

.zonen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.zone {
  position: relative; padding: 28px 24px;
  background: var(--bg-3); border: 1px solid var(--linie);
  border-radius: var(--radius);
}
.zone__nr {
  position: absolute; top: 18px; right: 20px;
  font-family: var(--display); font-size: 46px; line-height: 1;
  color: rgba(243,222,192,.07);
}
.zone__wert { font-family: var(--display); font-size: 32px; color: var(--orange); }
.zone__wert small { font-size: 15px; color: var(--text-leise); display: block; letter-spacing: .1em; text-transform: uppercase; }
.zone__kosten {
  display: inline-block; margin: 12px 0 16px; padding: 5px 12px;
  background: rgba(240,89,31,.12); border: 1px solid rgba(240,89,31,.3);
  border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--orange-hell);
}
.zone ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.zone li {
  font-size: 13.5px; color: var(--text-leise);
  padding: 4px 10px; background: rgba(243,222,192,.05);
  border-radius: 3px;
}
.liefer-hinweis {
  margin-top: 26px; padding: 18px 22px;
  border: 1px dashed var(--linie-stark); border-radius: var(--radius);
  font-size: 14.5px; color: var(--text-leise);
}
.liefer-hinweis b { color: var(--text); }

/* --- Kontakt / Zeiten ---------------------------------------------------- */

.kontakt-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.info-block { margin-bottom: 30px; }
.info-block h3 {
  font-size: 17px; letter-spacing: .1em; color: var(--orange); margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.info-block p { margin: 0 0 6px; color: var(--text-leise); }
.info-block a:hover { color: var(--orange-hell); }

.zeiten { list-style: none; margin: 0; padding: 0; }
.zeiten li {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 11px 0; border-bottom: 1px dashed var(--linie);
  font-size: 15px;
}
.zeiten li.heute { color: var(--text); }
.zeiten li.heute .zeiten__tag { color: var(--orange); font-weight: 700; }
.zeiten__tag { color: var(--text-leise); }
.zeiten__wert { font-family: var(--display); font-size: 16px; letter-spacing: .03em; }
.zeiten li.ruhetag .zeiten__wert { color: var(--text-leise); }

.karte-einbettung {
  border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
  min-height: 380px; height: 100%; background: var(--bg-3);
}
.karte-einbettung iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; filter: grayscale(.35) contrast(1.05); }

/* Platzhalter, solange die Karte noch nicht geladen wurde */
.karte-platzhalter {
  min-height: 380px; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 34px 30px; text-align: center;
  background:
    repeating-linear-gradient(-45deg, rgba(243,222,192,.03) 0 12px, transparent 12px 24px),
    var(--bg-3);
}
.karte-platzhalter svg { color: var(--orange); }
.karte-platzhalter h3 { font-size: 19px; color: var(--creme); }
.karte-platzhalter p { margin: 0; max-width: 42ch; font-size: 14px; color: var(--text-leise); }
.karte-platzhalter .knopf { margin-top: 6px; }
.karte-platzhalter__fein { font-size: 13px !important; }
.karte-platzhalter__fein a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }

/* --- Fußbereich ---------------------------------------------------------- */

.fuss { background: #0D0F10; padding: 56px 0 0; border-top: 1px solid var(--linie); }
.fuss__raster {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px;
}
.fuss__marke img { height: 100px; width: auto; margin-bottom: 18px; }
.fuss p { color: var(--text-leise); font-size: 14.5px; margin: 0 0 8px; }
.fuss h4 {
  font-size: 14px; letter-spacing: .13em; color: var(--creme); margin-bottom: 16px;
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss ul li { margin-bottom: 9px; }
.fuss ul a { color: var(--text-leise); font-size: 14.5px; }
.fuss ul a:hover { color: var(--orange); }
.fuss__unten {
  border-top: 1px solid var(--linie); padding: 20px 0 26px;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  flex-wrap: wrap; font-size: 13.5px; color: var(--text-leise);
}
.fuss__unten a:hover { color: var(--orange); }

/* Ruftaste am unteren Rand, nur auf kleinen Bildschirmen */
.rufleiste {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: var(--anthrazit); border-top: 1px solid rgba(0,0,0,.5);
  padding: 10px 14px; gap: 10px;
  box-shadow: 0 -6px 24px rgba(0,0,0,.45);
}
.rufleiste .knopf { flex: 1; padding: 12px 14px; font-size: 15px; }

/* --- Rechtstexte (Impressum / Datenschutz) ------------------------------- */

.rechtstext { padding: 54px 0 130px; max-width: 860px; }
.rechtstext h1 { font-size: clamp(30px, 5vw, 44px); margin-bottom: 8px; }
.rechtstext h2 {
  font-size: 21px; margin: 40px 0 12px; color: var(--creme);
  padding-bottom: 8px; border-bottom: 1px solid var(--linie);
}
.rechtstext h3 { font-size: 16px; margin: 24px 0 8px; color: var(--orange); letter-spacing: .06em; }
/* Rechtstexte werden am Stück gelesen – heller und luftiger als der
   übrige Fließtext, sonst strengt das über mehrere Bildschirme an. */
.rechtstext p, .rechtstext li { color: #C6C1B8; font-size: 16px; line-height: 1.75; }
.rechtstext strong { color: var(--text); }
.rechtstext ul { padding-left: 20px; }
.rechtstext li { margin-bottom: 6px; }
.rechtstext a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.rechtstext .zurueck {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .09em;
  font-size: 14px; color: var(--text-leise);
}
.rechtstext .zurueck:hover { color: var(--orange); }
.hinweis-kasten {
  padding: 16px 20px; margin: 18px 0;
  background: rgba(240,89,31,.08); border-left: 3px solid var(--orange);
  font-size: 14.5px;
}
.hinweis-kasten b { color: var(--text); }

/* --- Einblenden beim Scrollen --------------------------------------------
   Übernimmt jetzt GSAP/ScrollTrigger (assets/js/main.js, einblenden()) statt
   CSS-Transition + IntersectionObserver – .zeigen ist nur noch ein Marker,
   den GSAP als Selektor abgreift, trägt selbst keine Optik mehr. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .status__punkt { animation: none !important; }
  * { transition-duration: .01ms !important; }
}

/* --- Anpassung an kleinere Bildschirme ----------------------------------- */

@media (max-width: 1000px) {
  .merkmale { grid-template-columns: repeat(2, 1fr); }
  .signature { grid-template-columns: repeat(2, 1fr); }
  .zonen { grid-template-columns: 1fr; }
  .kontakt-raster { grid-template-columns: 1fr; }
  .fuss__raster { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .navi { display: none; }
  .burger { display: block; }
  .gerichte { grid-template-columns: 1fr; gap: 0; }
  .belaege { grid-template-columns: 1fr; }
  .legende__spalten { grid-template-columns: 1fr; }
  .rufleiste { display: flex; }
  body { padding-bottom: 68px; }
}

@media (max-width: 560px) {
  .abschnitt { padding: 54px 0; }
  .merkmale { grid-template-columns: 1fr; }
  .signature { grid-template-columns: 1fr; }
  .fuss__raster { grid-template-columns: 1fr; gap: 30px; }
  .topleiste__ort { display: none; }
  .topleiste__innen { justify-content: center; }
  .buehne__knoepfe .knopf { width: 100%; }
  .marke__bild { height: 72px; }
  .kopfleiste--gescrollt .marke__bild { height: 44px; }
}

/* --- Druckfassung der Speisekarte ---------------------------------------- */

@media print {
  .kopfleiste, .topleiste, .buehne, .merkmale, .rufleiste, .fuss,
  .filter, .warnstreifen, #lieferung, #kontakt, #signature { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .gericht__name, .gericht__preis, .karte-block__kopf h3 { color: #000; }
  .gericht { break-inside: avoid; border-bottom: 1px dotted #999; }
  .gerichte { grid-template-columns: 1fr 1fr; }
  .abschnitt { padding: 0; }
}


/* --- Feuerband am unteren Rand -------------------------------------------
   Aufbau in drei Lagen, damit es nicht nach einzelnen Flecken aussieht:
     1. Glut   – durchgehender Streifen auf der Kante, schließt alle Lücken
     2. Körper – viele schmale Zungen, die sich überlappen; ein SVG-Filter
                 verwirbelt die Ränder, sonst blieben es runde Blasen
     3. Funken – wenige aufsteigende Punkte
   Die Stärke steuert --feuer (0 bis 1), gesetzt aus main.js.
   ------------------------------------------------------------------------ */

.flammen {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 165px; z-index: 80; pointer-events: none; overflow: hidden;
  opacity: var(--feuer, 0);
  transition: opacity .5s ease;
}

/* 1 – Glutbett: durchgehend, damit zwischen den Zungen keine Löcher bleiben */
.flammen__glut {
  position: absolute; left: -2%; right: -2%; bottom: 0; height: 34px;
  background:
    linear-gradient(to top, rgba(255,206,140,.9) 0%, rgba(240,89,31,.55) 45%, rgba(240,89,31,0) 100%),
    repeating-linear-gradient(90deg,
      rgba(255,190,110,.5) 0 40px, rgba(240,89,31,.22) 40px 90px);
  filter: blur(7px);
  mix-blend-mode: screen;
  animation: glimmen 5s ease-in-out infinite alternate;
}

/* 2 – Flammenkörper */
.flammen__koerper {
  position: absolute; inset: 0;
  filter: blur(7px) url(#feuer-verzerrung);
  mix-blend-mode: screen;
  opacity: .88;
  /* unten kräftig, nach oben schnell schwächer – so bleibt Text lesbar,
     der gerade am unteren Bildrand steht */
  -webkit-mask-image: linear-gradient(to top, #000 14%, rgba(0,0,0,.5) 42%, rgba(0,0,0,.16) 66%, transparent 88%);
          mask-image: linear-gradient(to top, #000 14%, rgba(0,0,0,.5) 42%, rgba(0,0,0,.16) 66%, transparent 88%);
}
.flammen__koerper span {
  position: absolute; bottom: -26px;
  border-radius: 48% 52% 42% 42% / 68% 68% 32% 32%;
  background: radial-gradient(ellipse at 50% 100%,
              #FFE0AC 0%, #FFAE4E 22%, #F76A1C 48%, #D8480F 68%, rgba(180,55,10,0) 84%);
  transform-origin: 50% 100%;
  animation: zuengeln var(--dauer, 2.4s) ease-in-out infinite;
  animation-delay: var(--versatz, 0s);
}

/* 3 – Funken */
.flammen__funken span {
  position: absolute; bottom: 8px;
  width: 3px; height: 3px; border-radius: 50%;
  background: #FFCE8C;
  box-shadow: 0 0 6px 1px rgba(255,180,100,.85);
  opacity: 0;
  animation: aufsteigen var(--dauer, 6s) linear infinite;
  animation-delay: var(--versatz, 0s);
}

@keyframes zuengeln {
  0%, 100% { transform: translateY(0)     scale(1, 1)      skewX(0deg);   opacity: .72; }
  20%      { transform: translateY(-20px) scale(.88, 1.24) skewX(-3deg);  opacity: 1; }
  45%      { transform: translateY(-8px)  scale(1.06, .93) skewX(2deg);   opacity: .84; }
  68%      { transform: translateY(-26px) scale(.82, 1.32) skewX(4deg);   opacity: .97; }
  85%      { transform: translateY(-12px) scale(1.02, 1.04) skewX(-2deg); opacity: .88; }
}

@keyframes glimmen {
  from { opacity: .75; transform: translateX(-6px); }
  to   { opacity: 1;   transform: translateX(6px); }
}

@keyframes aufsteigen {
  0%       { opacity: 0;   transform: translate(0, 0) scale(1); }
  12%      { opacity: .95; }
  70%      { opacity: .55; }
  100%     { opacity: 0;   transform: translate(var(--drift, 14px), -130px) scale(.4); }
}

/* Über der Ruftaste bleiben, damit sie bedienbar bleibt */
@media (max-width: 820px) {
  .flammen { bottom: 68px; height: 120px; }
}

/* Der animierte Verwirbelungsfilter kostet auf schwächeren Geräten spürbar
   Rechenzeit. Auf kleinen Bildschirmen bleibt nur die Weichzeichnung –
   mit den schmalen Zungen sieht das immer noch nach Feuer aus. */
@media (max-width: 700px) {
  .flammen__koerper { filter: blur(6px); }
}

/* Auf den Rechtstexten brennt es nur schwach – dort wird gelesen */
.rechtstext-seite .flammen { height: 120px; }

@media (prefers-reduced-motion: reduce) {
  .flammen__koerper span,
  .flammen__glut { animation: none; }
  .flammen__funken { display: none; }
}

@media print { .flammen, .feuer-filter { display: none !important; } }

/* Der Filter selbst darf nichts einnehmen */
.feuer-filter { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- Kennzeichnung „NEU" und Nachtexte ------------------------------------ */

.neu {
  display: inline-block; vertical-align: middle;
  margin-right: 8px; padding: 2px 8px 3px;
  background: var(--orange); color: #fff;
  font-family: var(--display); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  border-radius: 2px; line-height: 1.5;
}
.neu--klein { margin: 0 0 0 6px; padding: 1px 6px 2px; font-size: 10px; }
.filter button.aktiv .neu { background: rgba(0,0,0,.32); }

.belaege__titel {
  margin: 26px 0 -8px; font-size: 15px; letter-spacing: .1em; color: var(--creme);
}

/* Absatz unter einer Kategorie, z. B. der Instagram-Hinweis */
.nachtext {
  margin-top: 24px; padding: 20px 24px;
  background: var(--bg-3); border: 1px dashed var(--linie-stark);
  border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.nachtext p { margin: 0; font-size: 14.5px; color: var(--text-leise); max-width: 74ch; }