/* =====================================================================
   site/theme.css — DIE EINZIGE DESIGN-DATEI, DIE DU PRO PROJEKT ÄNDERST.
   ---------------------------------------------------------------------
   Flyer-Look: flach & dunkel. Weißer/heller Text auf dunklem Grund,
   keine Papier-/Mehl-Textur (nur die feinen „Sprinkles" im Body-Hintergrund
   bleiben), keine Pinsel-Smears an Buttons. Header/Footer sind schwarz mit
   weißem Rosin-Logo.
   Wird VOR engine.css geladen (definiert die Variablen zuerst).
   ===================================================================== */
:root {
  /* === Markenfarben === */
  --orange: #FFBD1A;       /* Flyer-Gelb: aktive Chips, CTAs, Preise-Akzent */
  --orange-dark: #F0B429;  /* Preise (kräftiges Gold, gut auf Dunkel) */
  --ink: #F4F1EC;          /* primärer heller Text */
  --muted: #B7B3BC;        /* sekundäre Hinweise / Beschreibungen */
  --green: #A1CD34;        /* Vegan/Geöffnet, Beschreibungen (wie Flyer) */
  --green-dark: #25321E;   /* tiefes Kräutergrün */
  --red: #EF334C;          /* Signalrot */
  --yellow: #FFF127;       /* helle Angebots-Hervorhebung */
  --paper: #211C2A;        /* dunkler Tafel-Hintergrund (= Kartenfarbe) */
  --black: #14101B;        /* Header/Footer schwarz */
  --header-bg: #14101B;    /* dunkel */
  --line: rgba(244, 241, 236, 0.14); /* dezente helle Trenner */

  /* === Flächen-Tints (Tag-Pillen) === */
  --tag-default-bg: #332B3D;
  --tag-veg-bg: #314225;
  --tag-hot-bg: #542333;

  /* === Typografie === */
  --head: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --body: "Open Sans", "Roboto", "Helvetica Neue", sans-serif;
  --accent-script: "Caveat", "Pacifico", cursive;

  /* === Layout-Maße === */
  --maxw: 640px;
  --header-h: 143px;

  /* === Marken-Bilder ===
     --bg-deco = die feinen Mehl-Sprinkles im Seiten-Hintergrund (BLEIBEN).
     Die Smear-/Torn-/Mehl-Variablen werden nur noch als Fallback definiert,
     damit engine.css' var(--…) auflöst — die Optik überschreiben wir unten. */
  --paper-texture: url("../assets/generated/flour-texture-seamless.png?v=12106f9e");
  --bg-deco:       url("../assets/generated/flour-texture-seamless.png?v=12106f9e");
  --underline:     url("../assets/generated/flour-border-bottom.png?v=dbba3ced");
  --torn-mask:     url("../assets/torn-mask.svg");
  --smear-primary: url("../assets/flyer_elements/smear_orange.webp?v=02c53744");
  --smear-danger:  url("../assets/flyer_elements/smear_red.webp?v=78507082");
  --smear-success: url("../assets/flyer_elements/smear_green.webp?v=05419be7");
  --smear-ink:     url("../assets/flyer_elements/smear_ink.webp?v=6bc51c28");
}

/* =====================================================================
   1 · Header / Footer / Legal-Header — SCHWARZ, weißes Logo, helle Schrift
   ===================================================================== */
.site-header {
  background: var(--black) !important;
  box-shadow: none !important;
}
.site-header::after { display: none !important; content: none !important; }
.site-header .header-brand { color: var(--ink) !important; }
.site-header .nav-link { color: var(--muted) !important; }
.site-header .nav-link:hover,
.site-header .nav-link:focus-visible {
  color: var(--ink) !important;
  border-bottom-color: var(--orange) !important;
}

.site-footer {
  background: var(--black) !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}
.site-footer::before { display: none !important; content: none !important; }
.site-footer h3,
.site-footer .foot-name { color: var(--ink) !important; }
.site-footer address a,
.site-footer .footer-links a { color: rgba(244, 241, 236, 0.85) !important; }
.site-footer address a:hover,
.site-footer .footer-links a:hover,
.site-footer a:focus-visible {
  color: var(--orange) !important;
  text-decoration: underline !important;
}
.site-footer .foot-copy { color: rgba(244, 241, 236, 0.5) !important; }
.footer-social a {
  border-color: rgba(244, 241, 236, 0.25) !important;
  color: var(--ink) !important;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  border-color: var(--orange) !important;
  background: var(--orange) !important;
  color: var(--black) !important;
}

.legal-bar {
  background: var(--black) !important;
  box-shadow: none !important;
}
.legal-bar::after { display: none !important; content: none !important; }
.legal-bar .legal-brand span { color: var(--ink) !important; }
.legal-bar .legal-back { color: var(--muted) !important; }
.legal-bar .legal-back:hover,
.legal-bar .legal-back:focus-visible { color: var(--orange) !important; }

/* =====================================================================
   2 · Karten — flach, dunkel (= Hintergrundfarbe), eckig. KEIN Mehl/Papier,
   kein Schatten, keine Drehung, keine gerissenen Kanten.
   ===================================================================== */
.card-wrapper {
  filter: none !important;
  transform: none !important;
}
.card-wrapper::before,
.card-wrapper::after { display: none !important; content: none !important; }
.card::before, .visit-col::before, .about-card::before, .legal-card::before,
.card::after, .visit-col::after, .about-card::after, .legal-card::after {
  display: none !important;
  content: none !important;
}
.card, .visit-col, .about-card, .legal-card {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;      /* eckig */
  box-shadow: none !important;
  transform: none !important;
}
.card-wrapper:hover .card,
.card-wrapper:hover .visit-col,
.card-wrapper:hover .about-card { transform: none !important; }

/* =====================================================================
   3 · Kategorieleiste + Chips — flach, KEIN Mehl
   ===================================================================== */
.catnav { background: transparent !important; }
.catnav::before,
.catnav::after { display: none !important; content: none !important; }
.chip::before,
.chip::after { display: none !important; content: none !important; }
.chip {
  background: rgba(244, 241, 236, 0.06) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
}
.chip:hover { background: rgba(244, 241, 236, 0.12) !important; }
.chip.is-active {
  background: var(--orange) !important;
  color: var(--black) !important;
  border-color: var(--orange) !important;
}

/* Mobil: horizontale Kategorie-Leiste unabhängig scrollen (kein Seiten-Back-Swipe) */
.catnav-list {
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: 1rem;
}
.catnav-list > li { scroll-snap-align: start; }

/* Desktop: Kategorieleiste ist eine eigenständig scrollbare Seitenleiste —
   die (lange) Liste wird nicht mehr abgeschnitten und scrollt UNABHÄNGIG vom
   Seiteninhalt, damit man jede Kategorie erreichen/auswählen kann. */
@media (min-width: 768px) {
  .catnav {
    max-height: calc(100vh - var(--header-h) - 2.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(244, 241, 236, 0.28) transparent;
    padding-right: 4px;
  }
  .catnav-list { scroll-snap-type: none; }
  .catnav::-webkit-scrollbar { width: 8px; }
  .catnav::-webkit-scrollbar-thumb {
    background: rgba(244, 241, 236, 0.22);
    border-radius: 4px;
  }
  .catnav::-webkit-scrollbar-thumb:hover { background: rgba(244, 241, 236, 0.42); }
  .catnav::-webkit-scrollbar-track { background: transparent; }
}

/* =====================================================================
   4 · Suchfeld — flach, dunkel, KEIN Mehl
   ===================================================================== */
.search-field { filter: none !important; }
.search-field::before,
.search-field::after { display: none !important; content: none !important; }
.search-field {
  background: rgba(244, 241, 236, 0.06) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
}
.menu-search-input { color: var(--ink) !important; }
.menu-search-input::placeholder { color: var(--muted) !important; }
.search-field-icon { color: var(--orange) !important; }

/* =====================================================================
   5 · Buttons / Status / Badges — KEINE Pinsel-Smears, solide Farben
   ===================================================================== */
.btn, .hero-btn {
  background-image: none !important;
  background-color: var(--orange) !important;
  color: var(--black) !important;
  border-radius: 8px !important;
}
.btn-route, .hero-btn--order {
  background-image: none !important;
  background-color: transparent !important;
  color: #fff !important;
  border: 1.5px solid rgba(244, 241, 236, 0.32) !important;
}
.btn:hover, .hero-btn:hover { filter: brightness(1.06); }

/* Öffnungsstatus: nur farbiger Text + Punkt (kein Smear-Balken) */
.status {
  background-image: none !important;
  background: none !important;
  padding-inline: 0 !important;
  color: var(--ink) !important;
}
.status.is-open { color: var(--green) !important; }
.status.is-open .status-dot { background: var(--green) !important; }
.status.is-closed { color: var(--red) !important; }
.status.is-closed .status-dot { background: var(--red) !important; }

/* News-Badges + „Nach oben"-Button: solide statt Smear */
.news-badge, .news-badge-orange {
  background-image: none !important;
  background: var(--orange) !important;
  color: var(--black) !important;
  border-radius: 6px !important;
}
.totop {
  background-image: none !important;
  background: var(--orange) !important;
  color: var(--black) !important;
  border-radius: 8px !important;
}
.totop:hover { background: var(--orange-dark) !important; }

/* =====================================================================
   6 · Abschnitts-Titel — Mehl-Unterstrich → dezente orange Linie
   ===================================================================== */
.section-title::after {
  background: var(--orange) !important;
  width: 60px !important;
  height: 3px !important;
  border-radius: 2px !important;
}

/* Rechtsseiten-Karte: keine Schräglage */
main.legal .card-wrapper { transform: none !important; }

/* Mobil: Sprungziel unter Header UND Kategorieleiste legen, damit das
   Kategorie-Foto beim Anspringen nicht hinter der Leiste verschwindet. */
@media (max-width: 767px) {
  #menu .card-wrapper,
  .cat,
  #speisekarte { scroll-margin-top: calc(var(--header-h) + 92px) !important; }
}

/* =====================================================================
   7 · Dekoration mit den echten Rosin-Assets (freigestellte Food-Props,
   Besteck, Blätter, „Hausgemacht"-Stempel). Dezent an den Rändern, hinter
   dem Inhalt (pointer-events:none), damit nichts die Lesbarkeit stört.
   ===================================================================== */
:root {
  --deco-fork:   url("../assets/food/deco-fork.png?v=6d4c626a");
  --deco-lemon:  url("../assets/food/deco-lemon.png?v=a0200ad7");
  --deco-tomato: url("../assets/food/deco-tomato.png?v=3ddcf260");
  --deco-mint:   url("../assets/food/deco-mint.png?v=3b3a19b5");
  --deco-leaves: url("../assets/food/deco-leaves.png?v=f57c2fac");
  --stamp-brot:  url("../assets/food/stamp-brot.png?v=8af584ed");
  --badge-vegan: url("../assets/food/badge-vegan.png?v=291951cd");
}

/* Hero: Minze + Zitrone als kleines, symmetrisches Eck-Garnitur-Paar oben
   (Flyer-Anmutung). Bewusst NUR in den oberen Ecken — dort ist bei jeder
   Hero-Höhe (mobil/Desktop) sicher Platz, ohne je mit Titel/Buttons weiter
   unten zu kollidieren. (Die Gabel wurde entfernt: ihr Foto ist sehr lang/
   schmal (Seitenverhältnis 0.46) — bei fixer Breite wird sie automatisch
   riesig hoch und wirkte auf breiten Screens wie ein freischwebendes,
   unmotiviertes Objekt.) */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--deco-mint), var(--deco-lemon);
  background-repeat: no-repeat, no-repeat;
  background-position: left 4% top 2%, right 4% top 2%;
  background-size: 60px auto, 56px auto;
  opacity: 0.9;
}

/* „Unser Brot ist Hausgemacht"-Stempel — NUR bei den Kategorien, die
   tatsächlich Brot verwenden (per Menütext geprüft: Döner-Info nennt es
   direkt; Currywurst/Bratwurst mit Brot; Schnitzel im Brot; Dönerfleisch auf
   geröstetem Brot; Falafel Brot). Alle anderen Kategorien (Lahmacun, Burger,
   Pide, Saucen, Pizza, Getränke, …) bekommen KEINEN Stempel. */
.cat-head { position: relative; }
#doener .cat-head::after,
#lahmacun .cat-head::after,
#burger .cat-head::after,
#wurst .cat-head::after,
#schnitzel .cat-head::after,
#pide .cat-head::after,
#spezial .cat-head::after,
#specials .cat-head::after,
#vegan .cat-head::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -6px;
  right: 0;
  width: 84px;
  height: 84px;
  pointer-events: none;
  background: var(--stamp-brot) no-repeat center / contain;
  transform: rotate(-11deg);
  opacity: 0.45;
}

/* Über uns: Blätter-Deko, oben rechts vor der Karte (an der Ecke).
   deco-leaves.png ist eng auf die sichtbaren Blattpixel zugeschnitten
   (420x235, Blatt beginnt exakt bei Zeile 0 — kein unsichtbarer Alpha-Rand
   mehr). Box-Seitenverhältnis MUSS zum Bild passen, sonst würde
   background-size:contain wieder unsichtbar „letterboxen"; zusätzlich
   background-position:top verankert die Bildoberkante an der Box-Oberkante,
   selbst bei Rundungsfehlern. */
.about { position: relative; }
.about::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -28px; /* = padding-top von .visit/.about (1.75rem) → kein Abstand zur Box davor */
  right: -6px;
  width: 104px;
  height: 58px; /* 104 / (420/235) — passend zum Bild-Seitenverhältnis */
  pointer-events: none;
  background: var(--deco-leaves) no-repeat top center / contain;
  opacity: 0.85;
}

/* Besuch & Bestellung: Tomate neben dem Abschnittstitel (über den Karten) */
.visit { position: relative; }
.visit .section-title { position: relative; }
.visit::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -20px;
  right: 3%;
  width: 66px;
  height: 66px;
  pointer-events: none;
  background: var(--deco-tomato) no-repeat center / contain;
  opacity: 0.9;
}

/* Desktop: Deko etwas größer / mehr Luft */
@media (min-width: 768px) {
  .hero::before { background-size: 76px auto, 70px auto; background-position: left 5% top 2%, right 5% top 2%; }
  #doener .cat-head::after,
  #wurst .cat-head::after,
  #schnitzel .cat-head::after,
  #spezial .cat-head::after,
  #vegan .cat-head::after { width: 104px; height: 104px; top: -10px; }
  .about::before { width: 150px; height: 84px; top: -36px; right: 2%; } /* = padding-top .about (2.25rem) auf Desktop; Höhe an Bild-Seitenverhältnis angepasst */
  .visit::before { width: 96px; height: 96px; }
}

/* =====================================================================
   8 · Desktop-Feinschliff — auf breiten Schirmen wirkte die Speisekarte
   „leer" (kleines, zentriertes Kategorie-Bild + zentrierte Gerichte in einer
   breiten Karte). Auf ≥768px daher das Flyer-Menü-Layout: linksbündige
   Kategorie-Köpfe (Bild NEBEN dem Titel) und Gerichte mit Name links / Preis
   rechts. Mobil bleibt alles wie gehabt (zentriert).
   ===================================================================== */
@media (min-width: 768px) {
  .cat-head {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1.4rem !important;
    text-align: left !important;
  }
  .cat-img { width: 132px !important; height: 132px !important; }
  .cat-heading { text-align: left !important; }
  .cat-info { text-align: left !important; }

  .item {
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 0.6rem !important;
    text-align: left !important;
  }
  .item-main { align-items: flex-start !important; text-align: left !important; }
  .item-price { margin-left: auto !important; }
}

/* =====================================================================
   9 · Header ab 768px als EINE Reihe — nicht erst ab 1024px.
   engine.css lässt den Header bis 1024px in der 3-zeiligen Mobil-Anordnung
   (Logo-Zeile / Status-Zeile / Nav-Zeile, ~150px hoch), obwohl der Rest der
   Seite (Speisekarte, Menü-Layout) bereits ab 768px auf Desktop umschaltet.
   Dieser Bruch ist genau das „nur fürs Handy" — Header und Inhalt wechseln
   an unterschiedlichen Breakpoints. Header jetzt SYNCHRON ab 768px in einer
   Zeile (Logo · Nav · Status/Bestellen), wie sonst erst ab 1024px.
   ===================================================================== */
@media (min-width: 768px) {
  :root { --header-h: 74px !important; }
  .site-header {
    flex-wrap: nowrap !important;
    gap: 1rem !important;
    padding-block: 0.55rem !important;
    padding-inline: max(1.5rem, calc((100% - var(--maxw-wide)) / 2)) !important;
  }
  .header-logo { margin-right: 0 !important; }
  .header-nav { flex-basis: auto !important; order: 1 !important; margin: 0 auto !important; }
  .header-contact { display: flex !important; align-items: center !important; gap: 0.7rem !important; order: 2 !important; }
  #open-status { order: 0 !important; flex-basis: auto !important; max-width: none !important; margin: 0 !important; }
  .contact-actions { order: 0 !important; }
}

/* Speisekarte zweispaltig sobald Platz da ist → Name/Preis liegen näher
   beieinander (kein riesiger Zwischenraum), wie im Flyer. */
@media (min-width: 900px) {
  .items { columns: 2 !important; column-gap: 2.6rem !important; }
  .item { break-inside: avoid; -webkit-column-break-inside: avoid; }
  .cat-info { column-span: all; }

  /* Hero auf Desktop etwas präsenter (nicht so schmal wirken) */
  .hero { max-width: 780px !important; padding-top: 3rem !important; padding-bottom: 2.5rem !important; }
  .hero-logo { max-width: 500px !important; }
  .hero-title { font-size: 2.6rem !important; }
}

/* =====================================================================
   10 · Allergen-Legende — Buchstaben→Bedeutung (§44 LMIV), Wortlaut 1:1 vom
   Flyer, als echte TABELLE (Code | Bedeutung) statt umbrechender Fließtext-
   Liste. Auf zwei 7-Zeilen-Tabellen aufgeteilt, die ab Desktop nebeneinander
   stehen. .allergen-note ist ein Wrapper (Intro-Satz + Tabellen + Kontakt-
   Hinweis) — Kursiv/Muted nur auf den beiden Sätzen.
   ===================================================================== */
.allergen-note { font-style: normal !important; }
.allergen-intro,
.allergen-contact {
  font-style: italic;
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0 0 0.7rem;
}
.allergen-contact { margin: 0.9rem 0 0; }

.allergen-tables {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}
.allergen-table {
  border-collapse: collapse;
  font-size: 0.82rem;
  flex: 1 1 240px;
}
.allergen-table tr { border-bottom: 1px solid var(--line); }
.allergen-table tr:last-child { border-bottom: none; }
.allergen-table th,
.allergen-table td {
  padding: 0.32rem 0.5rem 0.32rem 0;
  text-align: left;
  font-weight: 400;
  vertical-align: top;
}
.allergen-table th {
  width: 1.6em;
  font-weight: 700;
  color: var(--ink);
}
.allergen-table td { color: var(--muted); }