/* ==========================================================================
   Frittenliebe Bilk
   Inhaltsverzeichnis:
   1. Tokens & Reset
   2. Typografie & Utility-Klassen
   3. Buttons
   4. Navigation
   5. Hero
   6. USP-Leiste
   7. Werte-Sektion
   8. Über uns
   9. Ablauf ("So läuft's ab")
   10. Speisekarte (Karten, Preisliste, Dips)
   11. Galerie & Lightbox
   12. Bewertungen
   13. CTA-Banner
   14. Anfahrt
   15. FAQ
   16. Kontakt & Öffnungszeiten-Tabelle
   17. Footer
   18. Back-to-top
   19. Scroll-Reveal-Animationen
   20. Responsive Breakpoints
   21. Druckansicht
   ========================================================================== */

/* ---------- 1. Tokens & Reset ---------- */

:root {
  /* Seite ist immer hell: Dark-Mode-Farben aus normalize.css neutralisieren */
  color-scheme: light;
  --surface-1: #fdfaf9;
  --surface-2: #f8e9e4;
  --surface-3: #f3d3c7;
  --surface-4: #edc7ba;
  --text-1: #2c1710;
  --text-2: #7a5c4a;
  --color-bg:        #fdfaf9;   /* fast Weiß, kein Cremeton mehr */
  --color-surface:   #f8e9e4;   /* helles Koralle/Terrakotta statt Creme */
  --color-surface-2: #f3d3c7;   /* etwas kräftigeres Koralle für Verläufe */
  --color-accent:    #e8491c;   /* kräftiges Paprika-/Tomatenrot-Orange */
  --color-accent-strong: #b52f12;  /* dunkleres Rot für große Flächen/Hover */
  --color-accent-2:  #2d7d46;   /* frisches Grün, Kräuter/vegan */
  --color-ink:       #2c1710;
  --color-text:      #2c1710;
  --color-muted:     #7a5c4a;
  --color-border:    #edc7ba;
  --color-open:      #2d7d46;
  --color-closed:    #b52f12;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-width: 1180px;
  --radius: var(--radius-2, 8px);
  --radius-sm: var(--radius-1, 4px);
}

* { box-sizing: border-box; }

/* Einblend-Animationen (reveal-right) dürfen nie seitliches Scrollen erzeugen */
html, body { overflow-x: clip; }

/* Tabellen-Styling aus normalize.css zurücksetzen (sonst dunkel im Dark-Mode) */
.hours-table,
.burger-table {
  width: 100%;
  max-width: none;
  background: transparent;
  border: none;
  border-radius: 0;
}
.hours-table :is(thead, tbody, tr, th, td),
.burger-table :is(thead, tbody, tr, th, td) {
  background: transparent;
  border-radius: 0;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  color: var(--color-ink);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---------- 2. Typografie & Utility-Klassen ---------- */

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-accent);
  color: #fff;
  padding: var(--size-2) var(--size-4);
  z-index: 200;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

.section-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--font-size-0);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--size-2);
}

.section-title {
  font-size: clamp(1.9rem, 3vw + 1rem, 2.6rem);
  margin-bottom: var(--size-3);
}

.section-lead {
  max-width: 56ch;
  color: var(--color-muted);
  font-size: var(--font-size-2);
}

/* ---------- 3. Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2);
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--font-size-1);
  border: 1px solid transparent;
  transition: transform 0.2s var(--ease-squish-2, ease), box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.btn--primary {
  background: var(--color-accent);
  color: #fff;
}
.btn--primary:hover { box-shadow: var(--shadow-3); background: var(--color-accent-strong); }

.btn--ghost {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.btn--ghost:hover { background: rgba(255,255,255,0.18); }

.btn--outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-ink);
}
.btn--outline:hover { border-color: var(--color-accent); color: var(--color-accent); }

.btn--on-dark {
  background: #fff;
  color: var(--color-ink);
}
.btn--on-dark:hover { box-shadow: var(--shadow-3); }

.btn__bag-icon { width: 18px; height: 18px; flex-shrink: 0; }

.btn--whatsapp {
  margin-top: var(--size-6);
  background: #25d366;
  color: #0b2e1b;
}
.btn--whatsapp svg { width: 18px; height: 18px; }
.btn--whatsapp:hover { box-shadow: var(--shadow-3); background: #21bd5a; }

.btn--insta {
  margin-top: var(--size-6);
  margin-left: var(--size-2);
  background: linear-gradient(45deg, #f58529, #dd2a7b 55%, #8134af);
  color: #fff;
}
.btn--insta svg { width: 18px; height: 18px; }
.btn--insta:hover { box-shadow: var(--shadow-3); }
@media (max-width: 480px) {
  .btn--insta { margin-left: 0; margin-top: var(--size-3); }
}

.btn--lg { padding: 1rem 1.9rem; font-size: var(--font-size-2); }

.btn__phone-icon {
  width: 17px; height: 17px;
  flex-shrink: 0;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--size-1);
  margin-top: var(--size-4);
  font-weight: 600;
  color: var(--color-accent);
  border-bottom: 1px solid transparent;
  transition: gap 0.2s ease;
}
.link-arrow:hover { gap: var(--size-2); }

/* ---------- 4. Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 253, 251, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow 0.3s ease;
}
.nav.is-scrolled {
  box-shadow: var(--shadow-2);
}

.nav__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--size-3) var(--size-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-4);
}

.nav__logo-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 0.55rem;
  vertical-align: middle;
  box-shadow: 0 0 0 2px var(--color-accent);
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--color-ink);
  white-space: nowrap;
}
.nav__logo span { color: var(--color-accent); }
.nav__logo small { font-family: var(--font-body); font-weight: 600; font-size: 0.6em; color: var(--color-muted); margin-left: 0.2em; }

/* Hamburger-Menü (auf allen Bildschirmgrößen) */
.nav__menu {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  display: none;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 18px 40px rgba(44, 23, 16, 0.12);
}
.nav__menu.is-open { display: block; animation: menu-in 0.2s ease; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nav__menu-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--size-5) var(--size-5) var(--size-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--size-6);
}
.nav__group { display: flex; flex-direction: column; }
.nav__group-title {
  font-size: var(--font-size-00, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--size-2);
}
.nav__group a {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: var(--font-size-3);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.nav__group a:last-child { border-bottom: none; }
.nav__group a:hover { color: var(--color-accent); padding-left: 0.3rem; }
.nav__group a[aria-current="page"],
.nav__group a.is-active { color: var(--color-accent); }
@media (max-width: 720px) {
  .nav__menu-inner { grid-template-columns: 1fr; gap: var(--size-4); max-height: calc(100vh - 80px); overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__menu.is-open { animation: none; }
}

.nav__insta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--size-3);
  padding: var(--size-3) var(--size-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.nav__insta svg { width: 26px; height: 26px; color: #dd2a7b; flex-shrink: 0; }
.nav__insta strong { color: var(--color-accent); }
.nav__insta:hover { border-color: var(--color-accent); }

/* Kopfbereich der Unterseiten */
.page-hero {
  position: relative;
  overflow: hidden;
  background: #120806;
  color: #fff;
  padding: var(--size-9) var(--size-5) var(--size-8);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 85% 40%, rgba(232,73,28,0.35), transparent 60%);
}
.page-hero__inner { position: relative; max-width: var(--max-width); margin: 0 auto; }
.page-hero__crumbs { font-size: var(--font-size-0); color: rgba(255,255,255,0.7); margin-bottom: var(--size-3); }
.page-hero__crumbs a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.page-hero__title { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: var(--size-3); max-width: 16ch; }
.page-hero__lead { color: rgba(255,255,255,0.85); font-size: var(--font-size-3); max-width: 52ch; }
.page-hero__logo {
  position: absolute;
  right: max(var(--size-5), calc((100vw - var(--max-width)) / 2));
  top: 50%;
  width: clamp(150px, 18vw, 230px);
  height: auto;
  transform: translateY(-50%) rotate(-4deg);
}
@media (max-width: 760px) {
  .page-hero__logo { display: none; }
}

.nav__actions { display: flex; align-items: center; gap: var(--size-3); }

.nav__toggle {
  display: flex;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.nav__toggle span {
  display: block;
  width: 18px; height: 2px;
  margin: 0 auto;
  background: var(--color-ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 5. Hero ---------- */

.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

.hero { background: #120806; }
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 861px) {
  /* Hochkant-Video wird breit gezogen: leicht weichzeichnen, damit es nicht pixelig wirkt */
  .hero__video { filter: blur(3px) saturate(1.15); transform: scale(1.06); }
}
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 40%, rgba(12,5,3,0.55), transparent 60%),
    linear-gradient(100deg, rgba(12,5,3,0.94) 0%, rgba(20,8,4,0.86) 42%, rgba(60,16,6,0.55) 75%, rgba(120,30,10,0.35) 100%);
}
@media (max-width: 860px) {
  .hero__bg {
    background: linear-gradient(180deg, rgba(12,5,3,0.72) 0%, rgba(12,5,3,0.82) 55%, rgba(12,5,3,0.94) 100%);
  }
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--size-8);
  padding-right: var(--size-5);
}

.hero__logo {
  display: block;
  width: clamp(170px, 22vw, 260px);
  height: auto;
  margin: 0 0 var(--size-3) -10px;
}

.hero__clip {
  margin: 0;
  width: clamp(220px, 22vw, 290px);
  transform: rotate(2.5deg);
}
.hero__clip-video {
  display: block;
  width: 100%;
  aspect-ratio: 380 / 640;
  object-fit: cover;
  border-radius: var(--radius);
  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  background: #1a0f0a;
}
.hero__clip figcaption {
  margin-top: var(--size-3);
  font-size: var(--font-size-0);
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  text-align: center;
}
.hero__inner .hero__content { margin: 0; }
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; padding-right: 0; }
  .hero__clip { display: none; }
}

.hero__content {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--size-9) var(--size-5);
  max-width: 640px;
}

.hero__eyebrow {
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--font-size-0);
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--size-3);
}

.hero__title {
  color: #fff;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  margin-bottom: var(--size-4);
}

.hero__sub {
  font-size: var(--font-size-3);
  color: rgba(255,255,255,0.9);
  max-width: 52ch;
  margin-bottom: var(--size-5);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-5);
  margin-bottom: var(--size-6);
}

.hero__rating {
  display: flex;
  align-items: center;
  gap: var(--size-2);
  font-size: var(--font-size-1);
  color: rgba(255,255,255,0.92);
}
.hero__stars { color: #ffd166; letter-spacing: 2px; }

.hero__status {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2);
  font-size: var(--font-size-0);
  font-weight: 600;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  color: #fff;
}
.hero__status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #9aa0a6;
  flex-shrink: 0;
}
.hero__status[data-open="true"] .hero__status-dot { background: #4ade80; }
.hero__status[data-open="false"] .hero__status-dot { background: #f87171; }

/* Großer Bestell-Knopf im Hero */
.btn--order {
  display: inline-flex;
  align-items: center;
  gap: var(--size-3);
  margin-bottom: var(--size-4);
  padding: 1.15rem 2rem;
  background: #fff;
  color: var(--color-accent-strong);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 800;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(40, 10, 2, 0.35);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn--order:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(40, 10, 2, 0.45);
}
.btn--order:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn__order-icon { width: 26px; height: 26px; flex-shrink: 0; }
.btn__order-arrow { transition: transform 0.2s ease; }
.btn--order:hover .btn__order-arrow { transform: translateX(4px); }
@media (max-width: 720px) {
  .btn--order {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 1rem 1.1rem;
    font-size: 1.1rem;
    white-space: normal;
    text-align: center;
  }
  .btn__order-arrow { display: none; }
  .hero__actions .btn { max-width: 100%; }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-3);
}

/* ---------- 6. USP bar ---------- */

.usp {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.usp__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--size-8) var(--size-5);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--size-6);
}
.usp__icon {
  display: inline-flex;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  margin-bottom: var(--size-3);
}
.usp__icon svg { width: 26px; height: 26px; }
.usp__title { font-weight: 700; margin-bottom: var(--size-1); }
.usp__text { color: var(--color-muted); font-size: var(--font-size-0); }
@media (min-width: 860px) {
  .usp__item:nth-child(2) { transform: translateY(22px); }
  .usp__item:nth-child(3) { transform: translateY(-10px); }
  .usp__item:nth-child(4) { transform: translateY(34px); }
}

/* ---------- 7. Werte ---------- */

.values { position: relative; overflow: hidden; padding: var(--size-10) var(--size-5); background: var(--color-bg); }
.values__deco {
  position: absolute;
  right: -30px;
  bottom: -20px;
  width: 220px;
  height: 220px;
  color: var(--color-accent);
  opacity: 0.09;
  transform: rotate(8deg);
  pointer-events: none;
}
.values__inner { position: relative; z-index: 1; max-width: var(--max-width); margin: 0 auto; }
.values__header { max-width: 62ch; margin-bottom: var(--size-8); }
.values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--size-6);
}
.values__item h3 {
  position: relative;
  font-size: var(--font-size-3);
  margin-bottom: var(--size-3);
  padding-top: var(--size-4);
}
.values__item h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
}
.values__item p { color: var(--color-muted); font-size: var(--font-size-0); }
@media (min-width: 860px) {
  .values__item:nth-child(1) { transform: translateY(18px); }
  .values__item:nth-child(3) { transform: translateY(-14px); }
  .values__item:nth-child(4) { transform: translateY(10px); }
}

/* ---------- 8. About ---------- */

.about { padding: var(--size-10) var(--size-5); background: var(--color-surface); }
.about__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--size-9);
  align-items: center;
}
.about__media {
  position: relative;
}
.about__media-block {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 60%;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}
@media (min-width: 860px) {
  .about__media-block { transform: rotate(-2deg); box-shadow: var(--shadow-3); }
  .about__media::before {
    content: "";
    position: absolute;
    inset: var(--size-5) calc(-1 * var(--size-5)) calc(-1 * var(--size-5)) var(--size-5);
    border: 3px solid var(--color-accent);
    border-radius: var(--radius);
    transform: rotate(2deg);
    z-index: 0;
  }
  .about__text { margin-top: var(--size-8); }
}
.about__text h2 { margin-bottom: var(--size-4); }
.about__text p { color: var(--color-muted); margin-bottom: var(--size-3); max-width: 54ch; }

/* ---------- 9. Ablauf ---------- */

.process { padding: var(--size-10) var(--size-5); }
.process__inner { max-width: var(--max-width); margin: 0 auto; }
.process__header { max-width: 62ch; margin-bottom: var(--size-8); }
.process__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--size-6);
  counter-reset: step;
}
.process__step {
  position: relative;
  padding: var(--size-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.process__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  margin-bottom: var(--size-4);
}
.process__step h3 { font-size: var(--font-size-3); margin-bottom: var(--size-2); }
.process__step p { color: var(--color-muted); font-size: var(--font-size-0); }

/* ---------- 10. Menu ---------- */

.menu {
  background: var(--color-surface);
  padding: var(--size-10) var(--size-5);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.menu__inner { max-width: var(--max-width); margin: 0 auto; }
.menu__header { max-width: 62ch; margin-bottom: var(--size-8); }


.menu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--size-5);
  margin-bottom: var(--size-9);
}
.menu__card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s var(--ease-squish-2, ease), box-shadow 0.25s ease;
}
.menu__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-4);
}
.menu__card-media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.menu__card-media--burger { object-position: 85% 20%; }
.menu__card-body { display: flex; flex-direction: column; flex: 1; padding: var(--size-4); }
.menu__card h3 { font-size: var(--font-size-3); }
.menu__card p { padding: var(--size-2) 0 var(--size-3); color: var(--color-muted); font-size: var(--font-size-0); }
.menu__card-price { margin-top: auto; font-weight: 700; color: var(--color-accent); }

/* Sprungmarken zu den Kategorien */
.menu__jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-2);
  margin-bottom: var(--size-6);
}
.menu__jump a {
  padding: 0.45rem 0.95rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--font-size-0);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.menu__jump a:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Komplette Karte */
.menu-board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--size-5);
  align-items: start;
}
.menu-board__col { display: grid; gap: var(--size-5); }
.menu-block {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--size-5) var(--size-6);
  scroll-margin-top: 96px;
}
.menu-board__col[id] { scroll-margin-top: 96px; }
.menu-block--wide { grid-column: 1 / -1; }
.menu-block__title {
  font-size: var(--font-size-4);
  margin-bottom: var(--size-1);
}
.menu-block__sub {
  font-size: var(--font-size-0);
  color: var(--color-muted);
  margin-bottom: var(--size-2);
}

.price-list { list-style: none; padding: 0; margin: var(--size-2) 0 0; }
.price-list__item {
  display: flex;
  align-items: baseline;
  gap: var(--size-2);
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--color-border);
  font-weight: 500;
}
.price-list__item:last-child { border-bottom: none; }
.price-list__name small {
  display: block;
  font-weight: 400;
  font-size: 0.8em;
  color: var(--color-muted);
}
.price-list__dots {
  flex: 1;
  min-width: var(--size-3);
  border-bottom: 1px dotted var(--color-muted);
  transform: translateY(-4px);
  opacity: 0.5;
}
.price-list__price {
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.burger-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--size-2);
  font-variant-numeric: tabular-nums;
}
.burger-table th,
.burger-table td {
  padding: 0.55rem 0.5rem;
  border-bottom: 1px dashed var(--color-border);
  text-align: right;
  white-space: nowrap;
}
.burger-table th[scope="row"] { text-align: left; font-weight: 500; white-space: normal; padding-left: 0; }
.burger-table thead th {
  font-size: var(--font-size-0);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  border-bottom: 2px solid var(--color-border);
}
.burger-table td { font-weight: 700; color: var(--color-accent); }
.burger-table td:last-child { color: var(--color-accent-strong); }
.burger-table tbody tr:last-child th,
.burger-table tbody tr:last-child td { border-bottom: none; }

.size-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--size-2);
  margin-top: var(--size-3);
}
.size-row div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--size-2);
  background: var(--color-surface);
  border-radius: var(--radius);
}
.size-row span { font-size: var(--font-size-0); color: var(--color-muted); }
.size-row strong { font-size: var(--font-size-3); color: var(--color-accent); font-variant-numeric: tabular-nums; }

/* Karte eingeklappt: nur die Burger sichtbar, Rest per Knopf */
.menu__collapse.is-collapsed .menu-board > :not(#karte-burger) { display: none; }
.menu__more {
  display: flex;
  justify-content: center;
  margin-top: var(--size-5);
}
.menu__toggle { display: inline-flex; align-items: center; gap: var(--size-2); cursor: pointer; border: none; }
.menu__toggle-icon { width: 20px; height: 20px; transition: transform 0.25s ease; }
.menu__toggle[aria-expanded="true"] .menu__toggle-icon { transform: rotate(180deg); }

.menu__note {
  margin: var(--size-6) 0 var(--size-5);
  font-size: var(--font-size-0);
  color: var(--color-muted);
}

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

.menu__cta { display: flex; justify-content: flex-start; gap: var(--size-3); flex-wrap: wrap; }

/* ---------- 11. Galerie & Lightbox ---------- */

.gallery { padding: var(--size-10) var(--size-5); }
.gallery__inner { max-width: var(--max-width); margin: 0 auto; }
.gallery__header { max-width: 62ch; margin-bottom: var(--size-8); }

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 240px;
  gap: var(--size-4);
}
.gallery__tile {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  background: var(--color-surface);
  transition: transform 0.25s var(--ease-squish-2, ease);
  position: relative;
}
.gallery__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery__tile:hover img { transform: scale(1.04); }
.gallery__tile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.gallery__tile--a { grid-column: span 2; }
.gallery__tile--a img { object-position: center 30%; }
.gallery__tile--b { grid-row: span 2; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--size-5);
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 10, 0.82);
}
.lightbox__panel {
  position: relative;
  max-width: 900px;
  width: 100%;
  background: var(--color-bg);
  border-radius: var(--radius);
  overflow: hidden;
}
.lightbox__media {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: #1a0f0a;
}
.lightbox__caption {
  padding: var(--size-4) var(--size-5);
  font-weight: 600;
  color: var(--color-ink);
}
.lightbox__close {
  position: absolute;
  top: var(--size-3);
  right: var(--size-3);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__close svg { width: 18px; height: 18px; }

/* ---------- 12. Reviews ---------- */

.reviews { padding: var(--size-10) var(--size-5); background: var(--color-surface); }
.reviews__inner { max-width: var(--max-width); margin: 0 auto; }
.reviews__header { max-width: 62ch; margin-bottom: var(--size-6); }

.reviews__summary {
  display: flex;
  align-items: center;
  gap: var(--size-5);
  margin-bottom: var(--size-8);
  padding: var(--size-5) var(--size-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  max-width: fit-content;
}
.reviews__score {
  font-family: var(--font-display);
  font-size: var(--font-size-7);
  color: var(--color-ink);
}
.reviews__stars { color: #e6a23c; letter-spacing: 2px; display: block; margin-bottom: var(--size-1); }
.reviews__score-meta p { color: var(--color-muted); font-size: var(--font-size-0); }

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--size-5);
}
.review {
  margin: 0;
  padding: var(--size-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.review p { font-size: var(--font-size-2); color: var(--color-ink); margin-bottom: var(--size-4); }
.review footer { font-size: var(--font-size-0); color: var(--color-muted); font-style: normal; }
.reviews__link { margin-top: var(--size-6); font-weight: 600; color: var(--color-accent); text-align: left; }

/* ---------- 13. CTA banner ---------- */

.cta-banner {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(100deg, rgba(75,22,10,0.88) 0%, rgba(150,40,15,0.74) 55%, rgba(90,26,12,0.88) 100%),
    url('assets/cta-currywurst.jpg') center 42% / cover no-repeat;
  color: #fff;
  padding: var(--size-9) var(--size-5);
}
.cta-banner__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
}
.cta-banner h2 { color: #fff; margin-bottom: var(--size-3); font-size: clamp(1.7rem, 3vw, 2.2rem); }
.cta-banner p { color: rgba(255,255,255,0.85); margin-bottom: var(--size-6); text-shadow: 0 1px 3px rgba(0,0,0,0.4); }

/* ---------- 14. Anfahrt ---------- */

.anfahrt { padding: var(--size-10) var(--size-5); }
.anfahrt__inner { max-width: var(--max-width); margin: 0 auto; }
.anfahrt__header { max-width: 62ch; margin-bottom: var(--size-8); }
.anfahrt__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--size-6);
}
.anfahrt__icon {
  display: inline-flex;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-accent);
  margin-bottom: var(--size-4);
}
.anfahrt__icon svg { width: 24px; height: 24px; }
.anfahrt__item h3 { font-size: var(--font-size-3); margin-bottom: var(--size-2); }
.anfahrt__item p { color: var(--color-muted); font-size: var(--font-size-0); }

/* ---------- 15. FAQ ---------- */

.faq { padding: var(--size-10) var(--size-5); background: var(--color-surface); }
.faq__inner { max-width: 860px; margin: 0 auto; }
.faq__header { margin-bottom: var(--size-7); }
.faq__list { display: flex; flex-direction: column; gap: var(--size-3); }
.faq__item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-4);
  padding: var(--size-5) var(--size-6);
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--font-size-2);
  color: var(--color-ink);
  cursor: pointer;
}
.faq__icon {
  position: relative;
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  background: var(--color-accent);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.faq__icon::before { width: 14px; height: 2px; }
.faq__icon::after { width: 2px; height: 14px; transition: transform 0.25s ease; }
.faq__question[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.faq__answer p {
  overflow: hidden;
  min-height: 0;
  padding: 0 var(--size-6);
  color: var(--color-muted);
  transition: padding 0.3s ease;
}
.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
}
.faq__item.is-open .faq__answer p {
  padding: 0 var(--size-6) var(--size-5);
}

/* ---------- 16. Contact ---------- */

.contact { padding: var(--size-10) var(--size-5); }
.contact__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--size-9);
  align-items: start;
}
.contact__list { display: grid; gap: var(--size-5); margin-top: var(--size-6); margin-bottom: var(--size-7); }
.contact__list dt { font-weight: 700; margin-bottom: var(--size-1); }
.contact__list dd { margin: 0; color: var(--color-muted); }
.contact__list a { color: var(--color-accent); font-weight: 600; }

.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-0);
}
.hours-table caption {
  padding: 0;
  text-align: left;
  font-weight: 700;
  font-family: var(--font-body);
  margin-bottom: var(--size-3);
  color: var(--color-ink);
}
.hours-table tr { border-bottom: 1px solid var(--color-border); }
.hours-table tr:last-child { border-bottom: none; }
.hours-table th, .hours-table td {
  padding: var(--size-2) 0;
  text-align: left;
  font-weight: 400;
  color: var(--color-muted);
}
.hours-table th { color: var(--color-ink); font-weight: 500; }
.hours-table tr[data-today="true"] th,
.hours-table tr[data-today="true"] td {
  color: var(--color-accent);
  font-weight: 700;
}

.contact__map {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  min-height: 360px;
}
.contact__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
}

/* Karte erst nach Klick laden (Zwei-Klick-Lösung) */
.map-consent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--size-3);
  height: 100%;
  min-height: 360px;
  padding: var(--size-6);
  background:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(122,92,74,0.12) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(122,92,74,0.12) 47px 48px),
    var(--color-surface);
}
.map-consent__icon { width: 36px; height: 36px; color: var(--color-accent); }
.map-consent__title { font-weight: 700; color: var(--color-ink); }
.map-consent__text { font-size: var(--font-size-0); color: var(--color-muted); max-width: 46ch; }
.map-consent__text a { color: var(--color-accent); text-decoration: underline; }
.map-consent__actions { display: flex; flex-wrap: wrap; gap: var(--size-3); margin-top: var(--size-2); }

/* Hinweis: Probewebsite (oberhalb der Navigation) */
.probe-bar {
  background: #2c1710;
  color: #fff;
  font-size: var(--font-size-0);
  text-align: center;
  padding: 0.5rem var(--size-5);
  line-height: 1.4;
}
.probe-bar strong { color: #ffd166; }

/* Pause-Knopf für die Hero-Videos */
.hero__pause {
  position: absolute;
  right: var(--size-5);
  bottom: var(--size-5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--size-2);
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: var(--font-size-0);
  font-weight: 600;
  cursor: pointer;
}
.hero__pause:hover { background: rgba(0,0,0,0.65); }
.hero__pause:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero__pause svg { width: 16px; height: 16px; }

.reviews__disclaimer {
  margin-top: var(--size-5);
  font-size: var(--font-size-0);
  color: var(--color-muted);
  max-width: 70ch;
}

/* ---------- 17. Footer ---------- */

.footer {
  background: var(--color-ink);
  color: rgba(255,255,255,0.7);
  padding: var(--size-8) var(--size-5) var(--size-5);
}
.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--size-6);
  padding-bottom: var(--size-6);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer__logo-img {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 0 var(--size-3) -8px;
}
.footer__logo { font-family: var(--font-display); font-size: 1.2rem; color: #fff; margin-bottom: var(--size-3); }
.footer__logo span { color: #f2895a; }
.footer__brand p { margin-bottom: var(--size-1); font-size: var(--font-size-0); }
.footer__insta {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2);
  margin-top: var(--size-3);
  color: #fff;
  font-weight: 600;
  font-size: var(--font-size-0);
}
.footer__insta svg { width: 20px; height: 20px; }
.footer__insta:hover { color: #f2895a; }
.footer__links, .footer__legal { display: flex; flex-direction: column; gap: var(--size-2); font-size: var(--font-size-0); }
.footer__links a:hover, .footer__legal a:hover { color: #fff; }
.footer__probe {
  max-width: var(--max-width);
  margin: var(--size-4) auto 0;
  font-size: var(--font-size-0);
  color: rgba(255,255,255,0.45);
}

/* ---------- 18. Back to top ---------- */

.back-to-top {
  position: fixed;
  right: var(--size-5);
  bottom: var(--size-5);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-ink);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-3);
  cursor: pointer;
  z-index: 90;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top[hidden] { display: none; }
.back-to-top:hover { transform: translateY(-3px); }

/* ---------- 19. Scroll reveal ---------- */

.reveal-item, .reveal-left, .reveal-right, .reveal-scale {
  opacity: 0;
  transition: opacity 0.7s var(--ease-out-3, ease), transform 0.7s var(--ease-out-3, ease);
}
.reveal-item { transform: translateY(var(--size-4)); transition-delay: calc(var(--stagger-index, 0) * 90ms); }
.reveal-left { transform: translateX(-32px); }
.reveal-right { transform: translateX(32px); }
.reveal-scale { transform: scale(0.97); }

.reveal-item.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 20. Responsive ---------- */

@media (max-width: 980px) {
  .usp__inner { grid-template-columns: repeat(2, 1fr); }
  .values__grid { grid-template-columns: repeat(2, 1fr); }
  .menu-board { grid-template-columns: 1fr; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .reviews__grid { grid-template-columns: 1fr; }
  .process__steps { grid-template-columns: 1fr; }
  .anfahrt__grid { grid-template-columns: 1fr; }
  .about__inner, .contact__inner { grid-template-columns: 1fr; }
  .about__media { order: 2; }
  .footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .nav__actions .btn--primary { display: none; }
  .usp__inner { grid-template-columns: 1fr; }
  .values__grid { grid-template-columns: 1fr; }
  .menu__grid { grid-template-columns: 1fr; }
  .gallery__grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .gallery__tile--a { grid-column: span 1; }
  .menu-block { padding: var(--size-4); }
  .burger-table th, .burger-table td { padding: 0.5rem 0.3rem; font-size: var(--font-size-0); }
  .hero { min-height: 100vh; }
  .reviews__summary { flex-direction: column; align-items: flex-start; }
  .back-to-top { right: var(--size-4); bottom: var(--size-4); }
  .values__deco { width: 140px; height: 140px; right: -20px; bottom: -10px; }
}

/* ---------- 21. Druckansicht ---------- */

@media print {
  .nav, .hero__bg, .hero__video, .hero__clip, .gallery, .lightbox, .cta-banner, .back-to-top,
  .btn--whatsapp, .contact__map, .faq__icon, .values__deco { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  .hero { min-height: auto; color: #000; padding: 1rem 0; }
  .section-eyebrow, .review, .menu__card, .process__step { break-inside: avoid; }
}

/* ---------- Sektions-Hintergründe: jede Sektion mit eigenem Motiv ---------- */
:root {
  --bg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.09 0 0 0 0 0.06 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --bg-icons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23e8491c' stroke-opacity='0.16' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(18 14) rotate(-12 20 25)'%3E%3Cpath d='M8 22 L12 50 L30 50 L34 22 Z'/%3E%3Cpath d='M13 22 L11 6 M19 22 L18 2 M25 22 L27 4 M31 22 L33 8'/%3E%3C/g%3E%3Cg transform='translate(92 20) rotate(8 22 18)'%3E%3Cpath d='M4 18 Q4 2 22 2 Q40 2 40 18 Z'/%3E%3Cpath d='M2 24 Q8 20 14 24 Q20 28 26 24 Q32 20 38 24 Q42 26 44 24'/%3E%3Cpath d='M4 30 L40 30 Q40 38 32 38 L12 38 Q4 38 4 30 Z'/%3E%3C/g%3E%3Cg transform='translate(30 96) rotate(18 30 20)'%3E%3Cpath d='M4 14 Q4 4 14 4 L48 4 Q58 4 58 14 Q58 24 48 24 L14 24 Q4 24 4 14 Z'/%3E%3Cpath d='M16 8 L16 20 M28 8 L28 20 M40 8 L40 20'/%3E%3C/g%3E%3Cg transform='translate(112 104) rotate(-20 10 14)'%3E%3Cpath d='M10 2 Q20 16 10 26 Q0 16 10 2 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --bg-streets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='480' viewBox='0 0 720 480'%3E%3Cg fill='none' stroke='%23e8491c' stroke-linecap='round'%3E%3Cg stroke-opacity='0.13' stroke-width='16'%3E%3Cpath d='M-20 120 C180 100 300 170 740 140'/%3E%3Cpath d='M180 -20 C200 160 160 300 230 500'/%3E%3Cpath d='M-20 360 L740 330'/%3E%3Cpath d='M520 -20 C470 150 560 300 500 500'/%3E%3C/g%3E%3Cg stroke-opacity='0.12' stroke-width='5'%3E%3Cpath d='M-20 240 L300 250 L380 200 L740 230'/%3E%3Cpath d='M60 -20 L90 500'/%3E%3Cpath d='M360 -20 L340 500'/%3E%3Cpath d='M640 -20 L660 500'/%3E%3Cpath d='M230 420 L520 400'/%3E%3Cpath d='M400 60 L700 80'/%3E%3C/g%3E%3Cg stroke-opacity='0.2' stroke-width='2' stroke-dasharray='2 9'%3E%3Cpath d='M-20 300 C200 280 420 300 740 270'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23e8491c' fill-opacity='0.08'%3E%3Crect x='250' y='150' width='80' height='70' rx='4'/%3E%3Crect x='580' y='160' width='50' height='60' rx='4'/%3E%3Crect x='110' y='270' width='50' height='45' rx='4'/%3E%3Ccircle cx='430' cy='270' r='38'/%3E%3C/g%3E%3C/svg%3E");
  --bg-kiosk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='360' viewBox='0 0 420 360'%3E%3Cg fill='none' stroke='%23e8491c' stroke-opacity='0.15' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 110 L380 110 L360 60 L60 60 Z'/%3E%3Cpath d='M40 110 Q57 135 74 110 Q91 135 108 110 Q125 135 142 110 Q159 135 176 110 Q193 135 210 110 Q227 135 244 110 Q261 135 278 110 Q295 135 312 110 Q329 135 346 110 Q363 135 380 110'/%3E%3Cpath d='M100 60 L90 110 M160 60 L155 110 M210 60 L210 110 M260 60 L265 110 M320 60 L330 110'/%3E%3Cpath d='M60 125 L60 330 M360 125 L360 330'/%3E%3Cpath d='M60 200 L360 200'/%3E%3Cpath d='M50 210 L370 210'/%3E%3Cpath d='M60 330 L360 330'/%3E%3Cpath d='M150 30 L270 30 L270 58 L150 58 Z'/%3E%3Cpath d='M100 175 L100 200 M120 170 L120 200 M110 172 L110 200'/%3E%3Cpath d='M250 185 Q265 170 280 185 L280 200 L250 200 Z'/%3E%3Cpath d='M300 160 Q312 150 324 160 L324 200 L300 200 Z'/%3E%3Cpath d='M20 330 L400 330'/%3E%3C/g%3E%3C/svg%3E");
  --bg-awning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='56' viewBox='0 0 80 56'%3E%3Crect width='40' height='40' fill='%23e8491c'/%3E%3Crect x='40' width='40' height='40' fill='%23fdfaf9'/%3E%3Cpath d='M0 40 Q20 64 40 40 Z' fill='%23e8491c'/%3E%3Cpath d='M40 40 Q60 64 80 40 Z' fill='%23fdfaf9'/%3E%3Cpath d='M0 40 Q20 64 40 40 Q60 64 80 40' fill='none' stroke='%23b52f12' stroke-opacity='0.35' stroke-width='1.5'/%3E%3C/svg%3E");
  --bg-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='420' viewBox='0 0 1200 420' preserveAspectRatio='none'%3E%3Cpath d='M-20 300 C160 120 300 360 480 220 S820 60 960 220 S1150 300 1220 140' fill='none' stroke='%23e8491c' stroke-opacity='0.3' stroke-width='3' stroke-linecap='round' stroke-dasharray='1 14'/%3E%3Cpath d='M-20 340 C200 200 330 400 520 260 S840 110 1000 250 S1160 330 1220 200' fill='none' stroke='%23e8491c' stroke-opacity='0.1' stroke-width='40' stroke-linecap='round'/%3E%3C/svg%3E");
  --bg-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='200' viewBox='0 0 260 200'%3E%3Cg fill='%23e8491c' fill-opacity='0.1'%3E%3Cpath d='M20 190 L20 110 Q20 30 110 10 L118 36 Q70 52 66 100 L110 100 L110 190 Z'/%3E%3Cpath d='M150 190 L150 110 Q150 30 240 10 L248 36 Q200 52 196 100 L240 100 L240 190 Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Grundfläche: leichte Papierstruktur statt glatter Fläche */
body { background-image: var(--bg-grain); }

/* USP-Leiste: Imbiss-Icons (einzige Sektion mit Icon-Raster) */
.usp {
  background-color: var(--color-surface);
  background-image: var(--bg-icons);
  background-size: 160px 160px;
}

/* Speisekarte: gestreute Pommes, Pommestüte, Currywurst, Pommesgabel, Ketchup/Mayo, Flamme */
.menu {
  background-color: #fff7ef;
  background-image:
    linear-gradient(rgba(255,247,239,0.5), rgba(255,247,239,0.5)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E %3Cg stroke-linecap='round' stroke-linejoin='round'%3E %3Cg fill='%23f5b83d' fill-opacity='0.30' stroke='%23d9791f' stroke-opacity='0.35' stroke-width='1.6'%3E %3Crect x='22' y='18' width='9' height='46' rx='2' transform='rotate(-24 26 41)'/%3E %3Crect x='40' y='26' width='9' height='38' rx='2' transform='rotate(12 44 45)'/%3E %3Crect x='168' y='120' width='9' height='50' rx='2' transform='rotate(58 172 145)'/%3E %3Crect x='186' y='132' width='9' height='36' rx='2' transform='rotate(78 190 150)'/%3E %3Crect x='92' y='196' width='9' height='44' rx='2' transform='rotate(-62 96 218)'/%3E %3Crect x='220' y='20' width='9' height='34' rx='2' transform='rotate(30 224 37)'/%3E %3C/g%3E %3Cg transform='translate(120 26) rotate(10 22 30)' fill='none' stroke='%23e8491c' stroke-opacity='0.28' stroke-width='2.2'%3E %3Cpath d='M6 26 L12 62 L34 62 L40 26 Z'/%3E %3Cpath d='M13 26 L10 6 M19 26 L18 2 M25 26 L27 4 M32 26 L35 8'/%3E %3Cpath d='M16 40 Q23 46 30 40'/%3E %3C/g%3E %3Cg transform='translate(22 118) rotate(-16 38 14)' fill='none' stroke='%23b52f12' stroke-opacity='0.26' stroke-width='2.2'%3E %3Cpath d='M6 14 Q6 4 16 4 L60 4 Q70 4 70 14 Q70 24 60 24 L16 24 Q6 24 6 14 Z'/%3E %3Cpath d='M20 8 L20 20 M32 8 L32 20 M44 8 L44 20 M56 8 L56 20'/%3E %3C/g%3E %3Cg transform='translate(70 150) rotate(40 4 20)' fill='none' stroke='%23e8491c' stroke-opacity='0.3' stroke-width='2.2'%3E %3Cpath d='M4 40 L4 14 M1 14 L1 2 M7 14 L7 2 M1 14 L7 14'/%3E %3C/g%3E %3Cg transform='translate(196 196)' fill='none' stroke='%23e8491c' stroke-opacity='0.24' stroke-width='2.2'%3E %3Cpath d='M20 44 Q2 40 4 24 Q6 14 14 8 Q14 18 20 20 Q18 8 26 0 Q30 12 36 16 Q42 22 38 32 Q34 42 20 44 Z'/%3E %3C/g%3E %3Cg fill='%23e8491c' fill-opacity='0.14'%3E %3Cpath d='M112 104 Q118 112 118 117 A6 6 0 0 1 106 117 Q106 112 112 104 Z'/%3E %3Ccircle cx='238' cy='92' r='5'/%3E %3Ccircle cx='150' cy='232' r='4'/%3E %3C/g%3E %3Cg fill='%23fff' stroke='%23d9b98a' stroke-opacity='0.55' stroke-width='1.4'%3E %3Cpath d='M60 88 Q66 96 66 101 A6 6 0 0 1 54 101 Q54 96 60 88 Z'/%3E %3Ccircle cx='224' cy='112' r='4.5'/%3E %3Ccircle cx='18' cy='226' r='4'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E"),
    var(--bg-grain);
  background-size: auto, 260px 260px, auto;
}

/* Kontakt: Bestellblock — Linien + roter Rand */
.contact {
  background-color: #fffdfc;
  background-image:
    linear-gradient(90deg, transparent 0 calc(3% - 1px), rgba(232,73,28,0.35) calc(3% - 1px) 3%, transparent 3%),
    repeating-linear-gradient(180deg, transparent 0 35px, rgba(122,92,74,0.13) 35px 36px);
}

/* Anfahrt: gezeichneter Stadtplan-Ausschnitt */
.anfahrt {
  background-color: #f7ece6;
  background-image: var(--bg-streets), var(--bg-grain);
  background-size: 720px 480px, 220px 220px;
  background-position: center, 0 0;
}

/* Ablauf: gepunkteter Weg quer durch die Sektion */
.process {
  background-color: var(--color-bg);
  background-image: var(--bg-path), var(--bg-grain);
  background-size: 100% 100%, 220px 220px;
  background-repeat: no-repeat, repeat;
}

/* Über uns: warme Farbflächen + Zeichnung des Pavillons */
.about {
  background-color: #f6ddd3;
  background-image:
    var(--bg-kiosk),
    radial-gradient(ellipse 45% 60% at 8% 15%, rgba(232,73,28,0.18), transparent 70%),
    radial-gradient(ellipse 40% 50% at 95% 90%, rgba(181,47,18,0.14), transparent 70%),
    var(--bg-grain);
  background-size: 360px 309px, auto, auto, 220px 220px;
  background-position: right -30px bottom -12px, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}

/* Galerie: Rasterpunkte, die zur Mitte hin auslaufen */
.gallery {
  position: relative;
  background-color: var(--color-bg);
  background-image: radial-gradient(rgba(232,73,28,0.28) 1.6px, transparent 1.8px);
  background-size: 18px 18px;
}
.gallery > * { position: relative; z-index: 1; }
.gallery::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 65% at 50% 50%, var(--color-bg) 35%, rgba(253,250,249,0) 100%);
}

/* Bewertungen: große Anführungszeichen + weicher Lichtverlauf */
.reviews {
  background-color: var(--color-surface);
  background-image:
    var(--bg-quote),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,0.7), transparent 45%),
    var(--bg-grain);
  background-size: 300px 231px, auto, 220px 220px;
  background-position: right 5% top 36px, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
}

/* Werte: Markise oben wie an der Imbissbude */
.values {
  background-color: #fff6f2;
  background-image: var(--bg-awning), linear-gradient(180deg, rgba(232,73,28,0.08), transparent 45%), var(--bg-grain);
  background-size: 80px 56px, auto, 220px 220px;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: repeat-x, no-repeat, repeat;
  padding-top: calc(var(--size-10, 5rem) + 40px);
}

/* FAQ: feines Punkteraster wie Notizpapier */
.faq {
  background-color: var(--color-surface);
  background-image: radial-gradient(rgba(44,23,16,0.16) 1px, transparent 1.3px), var(--bg-grain);
  background-size: 24px 24px, 220px 220px;
}

@media (max-width: 720px) {
  .about { background-size: 260px 223px, auto, auto, 220px 220px; }
  .reviews { background-size: 160px 123px, auto, 220px 220px; }
  .contact { background-image: repeating-linear-gradient(180deg, transparent 0 35px, rgba(122,92,74,0.13) 35px 36px); }
}
@media print {
  body, .usp, .menu, .contact, .anfahrt, .process, .about, .gallery, .reviews, .values, .faq { background-image: none !important; }
}

/* ---------- Lokaler Einleitungstext (SEO) ---------- */
.intro { padding: var(--size-10) var(--size-5); background-color: var(--color-bg); }
.intro__inner { max-width: 860px; margin: 0 auto; }
.intro__inner p:not(.section-eyebrow) { color: var(--color-muted); font-size: var(--font-size-2); max-width: 68ch; }
.intro__inner p + p { margin-top: var(--size-4); }
.intro__inner a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.faq__answer a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }