/* ==========================================================================
   LOVE KEBAB — Döner mit Liebe · Essen-Rüttenscheid
   Design tokens extracted from the brand logo. Do not deviate.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  /* Accent — hot pink (logo glove / "KEBAB" lettering) */
  --accent-50:#faf0f3;  --accent-100:#f2d9e1; --accent-200:#f9a4c0;
  --accent-300:#f66a98; --accent-400:#f23170; --accent-500:#dd0e52;
  --accent-600:#bb0c45; --accent-700:#950937; --accent-800:#690727;
  --accent-900:#3b0718;

  /* Gold (logo ring, fries) */
  --gold-50:#faf7ef;  --gold-100:#f4ebd7; --gold-200:#fcdfa2;
  --gold-300:#f9cb66; --gold-400:#f7b72b; --gold-500:#e29d08;
  --gold-600:#c08507; --gold-700:#996a06; --gold-800:#6c4b04;
  --gold-900:#3b2b07;

  /* Neutrals — warm black / cream */
  --neutral-0:#ffffff;  --neutral-50:#fbf4eb; --neutral-100:#f0e9df;
  --neutral-300:#b8b0a3; --neutral-500:#6b6459; --neutral-700:#332f2a;
  --neutral-800:#1c1a17; --neutral-900:#0a0908;

  --brown-500:#6d3c20;
  --whatsapp:#25d366;

  /* Semantic */
  --bg-dark: var(--neutral-900);
  --bg-dark-2: #12100d;
  --bg-card-dark: #181512;
  --bg-light: var(--neutral-50);
  --text-on-dark: var(--neutral-50);
  --text-muted-dark: rgba(251, 244, 235, 0.66);
  --text-on-light: var(--neutral-800);
  --text-muted-light: var(--neutral-500);
  --line-dark: rgba(251, 244, 235, 0.09);
  --line-light: rgba(28, 26, 23, 0.1);

  /* Type */
  --font-display: 'Anton', 'Arial Narrow', 'Impact', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --fs-display: clamp(3.25rem, 7.2vw + 1rem, 6.75rem);
  --fs-h2: clamp(2.375rem, 3.6vw + 1.2rem, 4.25rem);
  --fs-h3: clamp(1.625rem, 1.2vw + 1.2rem, 2.25rem);
  --fs-h4: 1.25rem;
  --fs-lead: clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;
  --fs-mono: 0.75rem;

  /* 8px spacing scale */
  --sp-1: 0.5rem;  --sp-2: 1rem;   --sp-3: 1.5rem; --sp-4: 2rem;
  --sp-5: 2.5rem;  --sp-6: 3rem;   --sp-8: 4rem;   --sp-10: 5rem;
  --sp-12: 6rem;   --sp-16: 8rem;

  --section-pad: clamp(5.5rem, 7vw + 3rem, 9.5rem);

  /* Shape / elevation */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-lift: 0 2px 6px rgba(10, 9, 8, 0.05), 0 22px 48px -18px rgba(10, 9, 8, 0.25);
  --shadow-lift-dark: 0 26px 52px -16px rgba(0, 0, 0, 0.6);

  /* Layout */
  --nav-height: 96px;
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ------------------------------------------------------------ reset/base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-on-dark);
  background: var(--bg-dark);
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
address { font-style: normal; }
strong { font-weight: 600; }

::selection { background: var(--accent-500); color: var(--neutral-0); }

:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------- utilities */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-2);
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background: var(--accent-500);
  color: var(--neutral-0);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: var(--sp-2); }

.section { padding-block: var(--section-pad); }
.section--light { background: var(--bg-light); color: var(--text-on-light); }
.section--dark { background: var(--bg-dark); color: var(--text-on-dark); }

/* values → contact are both light with no color break between them (the
   dark gallery section that used to sit here is gone) — their default
   padding stacked into an oversized gap, so tighten just this seam */
.values { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.values + .contact { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-600);
  margin-bottom: var(--sp-2);
}
.eyebrow::before {
  content: '';
  width: 30px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  opacity: 0.85;
}
.section--dark .eyebrow { color: var(--gold-400); }

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
  text-wrap: balance;
  margin-bottom: var(--sp-3);
}
.section--light .section-title { color: var(--neutral-800); }

.section-body {
  font-size: var(--fs-lead);
  line-height: 1.75;
  max-width: 54ch;
  color: var(--text-muted-light);
}
.section-body + .section-body { margin-top: var(--sp-2); }
.section--dark .section-body { color: var(--text-muted-dark); }

.section-header {
  text-align: center;
  margin-bottom: clamp(var(--sp-6), 6vw, var(--sp-10));
}
.section-header .eyebrow { justify-content: center; }
.section-header .section-title { margin-bottom: 0; }
.section-header--left { text-align: left; }
.section-header--left .eyebrow { justify-content: flex-start; }

/* ---------------------------------------------------- image placeholders */
.img-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  min-height: 260px;
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(-45deg,
      rgba(251, 244, 235, 0.025) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, rgba(247, 183, 43, 0.07), rgba(221, 14, 82, 0.05) 55%, transparent),
    var(--bg-card-dark);
  outline: 1.5px dashed rgba(251, 244, 235, 0.28);
  outline-offset: -14px;
  color: rgba(251, 244, 235, 0.55);
  text-align: center;
  padding: var(--sp-3);
}
.img-placeholder svg { opacity: 0.6; }

.ph-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ph-sub {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  opacity: 0.6;
  margin-top: -0.375rem;
}

.section--light .img-placeholder {
  background:
    repeating-linear-gradient(-45deg,
      rgba(28, 26, 23, 0.028) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, rgba(226, 157, 8, 0.09), rgba(221, 14, 82, 0.05) 55%, transparent),
    var(--neutral-100);
  outline-color: rgba(28, 26, 23, 0.26);
  color: var(--neutral-500);
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 48px;
  padding: 0.8125rem 1.875rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition:
    background-color 0.25s var(--ease-soft),
    color 0.25s var(--ease-soft),
    border-color 0.25s var(--ease-soft),
    box-shadow 0.35s var(--ease-soft),
    transform 0.35s var(--ease-soft);
}
.btn:active { transform: translateY(0) scale(0.98); }

.btn--gold {
  background: var(--gold-400);
  color: var(--neutral-900);
  box-shadow: 0 4px 22px -6px rgba(247, 183, 43, 0.5);
}
.btn--gold:hover {
  background: var(--gold-300);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(247, 183, 43, 0.6);
}

.btn--cta {
  background: var(--accent-500);
  color: var(--neutral-0);
}
.btn--cta:hover {
  background: var(--accent-400);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -8px rgba(221, 14, 82, 0.65);
}

.btn--outline {
  background: transparent;
  color: var(--text-on-dark);
  border: 1.5px solid rgba(251, 244, 235, 0.35);
}
.btn--outline:hover {
  border-color: var(--gold-400);
  color: var(--gold-200);
  transform: translateY(-2px);
}

.btn--whatsapp {
  background: var(--whatsapp);
  color: #06281a;
  margin-top: var(--sp-3);
}
.btn--whatsapp:hover {
  background: #3fe07c;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -8px rgba(37, 211, 102, 0.55);
}

.btn--sm { min-height: 44px; padding: 0.625rem 1.5rem; font-size: var(--fs-sm); }
.btn--lg { min-height: 56px; padding: 1rem 2.375rem; font-size: 1.0625rem; }

/* ------------------------------------------------------------- navigation */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
}

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--nav-height);
  padding-inline: var(--container-pad);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.4s var(--ease-soft),
    border-color 0.4s var(--ease-soft),
    backdrop-filter 0.4s var(--ease-soft);
}

.nav--scrolled {
  background: rgba(10, 9, 8, 0.85);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--line-dark);
}

.nav-links {
  display: flex;
  gap: clamp(1.25rem, 2.4vw, 2.375rem);
  justify-self: start;
}

.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(251, 244, 235, 0.85);
  transition: color 0.25s var(--ease-soft);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 8px;
  height: 2px;
  background: var(--accent-400);
  border-radius: 2px;
  transition: right 0.3s var(--ease-out);
}
.nav-links a:hover { color: var(--neutral-0); }
.nav-links a:hover::after { right: 0; }

.nav-logo {
  grid-column: 2;
  justify-self: center;
  display: flex;
  border-radius: 50%;
  transition: transform 0.3s var(--ease-soft);
}
.nav-logo:hover { transform: scale(1.06) rotate(-3deg); }
.nav-logo-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 0 0 2px rgba(247, 183, 43, 0.6),
    0 4px 16px rgba(0, 0, 0, 0.5);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-self: end;
  grid-column: 3;
}

.nav-call {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: rgba(251, 244, 235, 0.85);
  transition: color 0.25s, background-color 0.25s, transform 0.25s var(--ease-soft);
}
.nav-call:hover {
  color: var(--gold-400);
  background: rgba(247, 183, 43, 0.12);
  transform: translateY(-1px);
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  height: 40px;
  padding: 0 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(251, 244, 235, 0.22);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: border-color 0.25s var(--ease-soft), background-color 0.25s var(--ease-soft);
}
.lang-toggle:hover { border-color: rgba(251, 244, 235, 0.5); }
.lang-option {
  color: rgba(251, 244, 235, 0.45);
  transition: color 0.25s var(--ease-soft);
}
.lang-option.is-active { color: var(--gold-400); }
.lang-sep { color: rgba(251, 244, 235, 0.25); font-size: 0.9em; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  z-index: 1001;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-on-dark);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------- mobile nav overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 28px;
  background: var(--neutral-900);
  transform: translateY(-100%);
  transition: transform 0.4s var(--ease-soft);
}
.nav-overlay.is-open { transform: translateY(0); }

.nav-overlay-top {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-overlay-logo { height: 40px; width: 40px; border-radius: 50%; }
.nav-overlay-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--text-on-dark);
  font-size: 1.6rem;
  line-height: 1;
  transition: color 0.2s var(--ease-soft);
}
.nav-overlay-close:hover { color: var(--gold-400); }

.nav-overlay-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: var(--sp-5);
}
.nav-overlay-links a {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--text-on-dark);
  font-size: clamp(2.4rem, 12vw, 3.4rem);
  line-height: 1.1;
  transition: color 0.2s var(--ease-soft);
}
.nav-overlay-links a:hover,
.nav-overlay-links a.is-active { color: var(--gold-400); }

.nav-overlay .btn { align-self: flex-start; }

body.nav-open { overflow: hidden; }

@media (min-width: 821px) {
  .nav-overlay { display: none !important; }
}

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
  padding-top: var(--nav-height);
  overflow: visible;
}

.hero-texture {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 44% at 72% 42%, rgba(221, 14, 82, 0.15), transparent 70%),
    radial-gradient(32% 36% at 16% 80%, rgba(226, 157, 8, 0.1), transparent 70%),
    radial-gradient(60% 50% at 50% 0%, rgba(28, 26, 23, 0.65), transparent 80%);
  pointer-events: none;
}

/* oversized outlined ghost word along the hero bottom */
.hero-ghost {
  position: absolute;
  bottom: clamp(1.5rem, 5vh, 3.5rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(5rem, 13.5vw, 12.5rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(251, 244, 235, 0.9);
  pointer-events: none;
  user-select: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--sp-3), 3vh, var(--sp-4));
  width: 100%;
  margin-inline: auto;
  padding-inline: 0;
  padding-block: clamp(var(--sp-3), 4vh, var(--sp-6)) clamp(var(--sp-8), 12vh, var(--sp-12));
}

/* image + overlaid headline */
.hero-stage {
  position: relative;
  width: 100%;
  max-width: none;
  margin-inline: auto;
}

.hero-content {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: clamp(0.5rem, 5%, 2.5rem);
  transform: translateX(-50%);
  max-width: min(64%, 720px);
  text-align: center;
  width: 100%;
}

.hero-kicker {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.6vw, 1.375rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: var(--sp-2);
}
html.js .hero-kicker { opacity: 0; animation: fadeUp 0.8s var(--ease-expo) 0.55s forwards; }

/* headline entrance */
.hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.98;
  margin-bottom: clamp(var(--sp-2), 3vh, var(--sp-3));
}
.hero-title .line {
  display: block;
  overflow: hidden;
  padding-block: 0.04em; /* keep descenders from clipping */
}
.hero-title .word {
  display: inline-block;
  margin-right: 0.16em;
}
.hero-title .word:last-child { margin-right: 0; }
html.js .hero-title .word {
  transform: translateY(118%);
  animation: wordUp 0.9s var(--ease-expo) forwards;
  animation-delay: calc(0.2s + var(--i) * 90ms);
}
.hero-title .word--accent { color: var(--accent-500); }

/* hero image */
.hero-visual {
  position: relative;
  width: 100%;
  margin-top: clamp(-140px, -10svh, -60px);
}

@media (min-width: 861px) {
  .hero-visual {
    margin-top: 0;
    transform: translateY(clamp(-260px, -11.5vw, -120px));
  }
}

.hero-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1536 / 1024;
  overflow: hidden;
  will-change: transform, opacity;
}
html.js .hero-image-wrap { opacity: 0; animation: heroImageIn 1.1s var(--ease-expo) 0.45s forwards; }
.hero-image {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 128%;
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%);
}

@media (max-width: 860px) {
  /* keep the desktop overlay treatment — headline sits on top of the
     photo as a big background, just resized/cropped for a taller frame */
  .hero { min-height: auto; }
  .hero-inner { flex: none; padding-bottom: clamp(0.5rem, 2vh, 1rem); }
  .hero-ghost { bottom: calc(0.25rem + 10px); }
  .hero-visual { margin-top: -20px; }
  .hero-image-wrap { aspect-ratio: 4 / 5; }
  .hero-image {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: none;
  }
  .hero-content {
    max-width: 92%;
  }
  .hero-content::before {
    content: "";
    position: absolute;
    inset: -16% -12%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(60% 70% at 50% 38%, rgba(15, 13, 11, 0.65), rgba(15, 13, 11, 0) 78%);
  }
}

/* --------------------------------------------------------------- marquee */
.marquee {
  position: relative;
  z-index: 1;
  width: 100% !important;
  background: var(--accent-500);
  color: var(--neutral-50);
  margin-block: 0;
  transform: none !important;
  rotate: none !important;
  skew: none !important;
  box-shadow: 0 14px 34px -14px rgba(221, 14, 82, 0.55);
  overflow: hidden;
  isolation: isolate;
}
.marquee-group { transform: none !important; }

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 19.5s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-group {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  padding: 0.875rem 1.125rem;
  flex-shrink: 0;
}
.marquee-group span {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.marquee-group i {
  font-style: normal;
  color: var(--gold-300);
  font-size: 0.9em;
}

/* ------------------------------------------------------------------ story */
.story { overflow: clip; }
.story .container { overflow: hidden; box-sizing: border-box; }

/* stacked, full-width: text block on top, photo wheel spans the full
   section width below it — not a side-by-side two-column layout */
.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--sp-6), 5vw, var(--sp-10));
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.story-content .section-body {
  max-width: none;
}

.story-content,
.story-image {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* story image contained within page padding */
.story-image {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  container-type: inline-size;
  container-name: story-photo;
}
.img-placeholder--story {
  width: 100% !important;
  max-width: 100% !important;
  min-height: clamp(380px, 40vw, 540px);
  border-radius: var(--radius-lg);
  margin: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  box-shadow: var(--shadow-lift);
}

.story-photo {
  width: 100%;
  height: clamp(380px, 40vw, 540px);
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

/* continuous left-scrolling photo wheel — never pauses, including on hover.
   8 items in the track (4 photos, duplicated once) animate translateX(-50%);
   since the duplicate makes the track exactly 2x one photo-set's width,
   -50% always lands it back on an identical frame, so the loop is seamless. */
.story-carousel {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: var(--bg-light);
}
.story-carousel-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  gap: 10px;
  animation: story-wheel-scroll 18s linear infinite;
}
.story-carousel-item {
  flex: 0 0 auto;
  /* sized off the carousel's own column (cqw), not the page viewport — now
     that the wheel spans the full section width, this shows ~2 frames at
     once on desktop (a real "wheel") while staying one big frame on mobile */
  width: clamp(403px, 60cqw, 845px);
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius-lg) - 6px);
  overflow: hidden;
}
.story-carousel-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes story-wheel-scroll {
  to { transform: translateX(-50%); }
}

.story-stats {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(var(--sp-2), 3.5vw, var(--sp-6));
  margin-top: clamp(var(--sp-4), 4vw, var(--sp-6));
  padding-top: clamp(var(--sp-3), 3vw, var(--sp-4));
  border-top: 1px solid var(--line-light);
}
.story-stats li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  text-align: center;
}
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.6vw + 1.1rem, 2.375rem);
  color: var(--accent-500);
  line-height: 1;
}
.stat-label {
  font-size: var(--fs-xs);
  color: var(--text-muted-light);
  max-width: 16ch;
  line-height: 1.45;
}

.story-image-tag {
  position: absolute;
  top: 1.25rem;
  left: -0.75rem;
  padding: 0.4375rem 1rem;
  background: var(--gold-400);
  color: var(--neutral-900);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transform: rotate(-2.5deg);
  box-shadow: 0 8px 20px -6px rgba(226, 157, 8, 0.5);
}

/* ----------------------------------------------------------- menu preview */
.menu-preview {
  background:
    radial-gradient(46% 38% at 82% 0%, rgba(221, 14, 82, 0.08), transparent 70%),
    var(--bg-dark);
}

.menu-carousel { position: relative; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(var(--sp-2), 2vw, var(--sp-3));
}

.menu-arrow {
  display: none;
  align-items: center;
  justify-content: center;
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform 0.45s var(--ease-out),
    border-color 0.45s var(--ease-soft),
    box-shadow 0.45s var(--ease-soft);
}
.product-card:hover {
  transform: translateY(-7px);
  border-color: rgba(221, 14, 82, 0.5);
  box-shadow: var(--shadow-lift-dark);
}

.product-media {
  position: relative;
  aspect-ratio: 4 / 3.4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background:
    repeating-linear-gradient(-45deg,
      rgba(251, 244, 235, 0.02) 0 14px, transparent 14px 28px),
    radial-gradient(70% 70% at 50% 38%, rgba(247, 183, 43, 0.1), transparent 70%),
    #1e1a15;
  border-bottom: 1px solid var(--line-dark);
  color: rgba(251, 244, 235, 0.4);
}
.product-media .ph-label { font-size: 0.6875rem; letter-spacing: 0.12em; }
.product-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0.75rem;
  object-fit: contain;
  object-position: center;
}
.product-icon {
  width: clamp(52px, 4.5vw, 64px);
  height: auto;
  transition: transform 0.45s var(--ease-out);
}
.product-card:hover .product-icon { transform: translateY(-4px) scale(1.08); }

.product-body { padding: var(--sp-3) var(--sp-3) var(--sp-4); }

.product-name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  margin-bottom: 0.4375rem;
  /* the card itself is always dark (--bg-card-dark), regardless of
     whether it sits in a --light or --dark section, so pin this to a
     light color instead of inheriting the section's text color */
  color: var(--text-on-dark);
}

.product-desc {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-muted-dark);
}

.product-price {
  display: block;
  margin-top: 0.65rem;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gold-400);
}

.product-price.tbd {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xs);
  color: var(--text-muted-dark);
}
.section--light .product-price.tbd { color: var(--text-muted-light); }

/* ------------------------------------------------------------- legal pages (Impressum / Datenschutz) */
.legal-content-inner {
  max-width: 68ch;
  min-height: 30vh;
}
.legal-content-inner .section-body { margin-top: var(--sp-2); }

.legal-content h2 {
  font-family: var(--font-body);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--neutral-800);
  letter-spacing: -0.01em;
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-2);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--neutral-800);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-1);
}
.legal-content address { font-style: normal; }
.legal-content ul {
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: var(--text-muted-light);
  margin: var(--sp-2) 0;
  padding-left: 1.25rem;
}
.legal-content li { margin-bottom: 0.4rem; }
.legal-content a { color: var(--accent-500); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover { color: var(--accent-600); }

/* flagged placeholder callout — must be resolved/removed before publishing */
.legal-todo {
  margin: var(--sp-2) 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--gold-50);
  border: 1px solid var(--gold-300);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--neutral-700);
}
.legal-todo strong { color: var(--accent-600); }

/* ------------------------------------------------------------- menu page */
.menu-hero {
  padding-top: calc(var(--nav-height) + var(--sp-8));
  padding-bottom: var(--sp-6);
  background: var(--bg-dark);
  color: var(--text-on-dark);
  text-align: center;
}
.menu-hero-inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.menu-hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
}
.menu-hero-sub { color: var(--text-muted-dark); font-size: var(--fs-lead); max-width: 46ch; }

.menu-jump {
  position: sticky;
  top: var(--nav-height);
  z-index: 500;
  background: rgba(10, 9, 8, 0.92);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid var(--line-dark);
  overflow-x: auto;
  scrollbar-width: none;
}
.menu-jump::-webkit-scrollbar { display: none; }
.menu-jump-inner {
  display: flex;
  gap: 0.625rem;
  padding: 0.85rem var(--container-pad);
  width: max-content;
  min-width: 100%;
}
.menu-jump-link {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  color: var(--text-muted-dark);
  border: 1px solid rgba(251, 244, 235, 0.14);
  transition: color 0.25s var(--ease-soft), border-color 0.25s var(--ease-soft), background-color 0.25s var(--ease-soft);
}
.menu-jump-link:hover, .menu-jump-link.is-active {
  color: var(--neutral-900);
  background: var(--gold-400);
  border-color: var(--gold-400);
}

/* ---------------------------------------------------- menu category photo
   one or two representative cutout photos per category — float on the
   section's own background (transparent PNGs, never cropped) instead of a
   picture on every single item (see menu.html / menu.json) */
.menu-cat--photo .menu-cat-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 6vw, var(--sp-10));
  align-items: center;
}
.menu-cat--photo.menu-cat--reverse .menu-cat-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr); }
.menu-cat--reverse .menu-cat-photo-group { order: 2; }
.menu-cat--reverse .menu-cat-content { order: 1; }

.menu-cat-photo-group {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.menu-cat-photo-group img {
  width: auto;
  max-width: 420px;
  max-height: 520px;
  object-fit: contain;
  margin-inline: auto;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.4));
}
.section--light .menu-cat-photo-group img { filter: drop-shadow(0 20px 28px rgba(28, 26, 23, 0.22)); }

/* two photos in one category (e.g. Bowl, Love Friet) — stacked one above
   the other, each shown large, instead of a single forced "the" dish, so
   the variety inside a category still reads without going back to a
   photo per item */
.menu-cat-photo-group.has-2 {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: clamp(1rem, 4vw, 2.5rem);
}
.menu-cat-photo-group.has-2 img { width: auto; max-width: 300px; max-height: 380px; margin-inline: auto; }

/* four photos in one category (Bowl, once all variants have a shot) —
   simple 2x2 grid instead of the has-2 stack, sits above the dish list
   on every viewport (no bookend reordering trick). */
.menu-cat-photo-group.has-4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(0.75rem, 3vw, 1.5rem);
}
.menu-cat-photo-group.has-4 img { width: auto; max-width: 220px; max-height: 260px; margin-inline: auto; }

/* three photos in one category (Teller / Lahmacun / Currywurst) — two up
   top, the third centered full-width below, same sizing as the 2x2 grid. */
.menu-cat-photo-group.has-3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(0.75rem, 3vw, 1.5rem);
}
.menu-cat-photo-group.has-3 img { width: auto; max-width: 220px; max-height: 260px; margin-inline: auto; }
.menu-cat-photo-group.has-3 img:not(:last-child) { transform: translateY(40px); }
.menu-cat-photo-group.has-3 img:last-child {
  grid-column: 1 / -1;
  max-width: 340px;
  max-height: 400px;
  margin-block: 1.25rem;
  transform: rotate(90deg);
}

.menu-cat-content { min-width: 0; }
.menu-cat-content .list-grid { grid-template-columns: 1fr; }

.list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-6);
}
.list-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-dark);
}
.list-row-line { display: flex; align-items: baseline; gap: 0.5rem; }
.list-row-name { font-weight: 600; }
.list-row-leader {
  flex: 1 1 auto;
  min-width: 12px;
  transform: translateY(-0.35em);
  border-bottom: 1px dotted rgba(251, 244, 235, 0.32);
}
.list-row-price { font-family: var(--font-mono); font-weight: 600; color: var(--gold-600); white-space: nowrap; }
.list-row-price.tbd { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-xs); color: var(--text-muted-dark); }
.list-row-desc { font-size: var(--fs-sm); font-style: italic; color: var(--text-muted-dark); max-width: 54ch; }
.section--dark .list-row-price { color: var(--gold-400); }
.section--light .list-row { border-bottom-color: var(--line-light); }
.section--light .list-row-leader { border-bottom-color: rgba(28, 26, 23, 0.22); }
.section--light .list-row-price.tbd { color: var(--text-muted-light); }
.section--light .list-row-desc { color: var(--text-muted-light); }

/* secondary price list inside a menu-cat section, without its own jump-nav
   entry (e.g. the fries topping list under Love Friet) */
.menu-sublist {
  margin-top: clamp(var(--sp-8), 6vw, var(--sp-12));
  padding-top: clamp(var(--sp-6), 5vw, var(--sp-8));
  border-top: 1px solid var(--line-light);
}
.section--dark .menu-sublist { border-top-color: var(--line-dark); }
.menu-sublist-heading {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-600);
  margin-bottom: var(--sp-4);
}
.section--dark .menu-sublist-heading { color: var(--gold-400); }

.nav-links a.is-active { color: var(--neutral-0); }
.nav-links a.is-active::after { right: 0; }

.menu-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-top: clamp(var(--sp-5), 5vw, var(--sp-8));
  text-align: center;
}
.menu-note {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  color: rgba(251, 244, 235, 0.5);
  max-width: 52ch;
}

/* ----------------------------------------------------------------- values */
.values-carousel { position: relative; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--sp-2), 2.5vw, var(--sp-3));
}

/* asymmetric bento (desktop/tablet only — see @media 821px below): big
   fries photo panel (4:5 portrait, fixed % width so its own aspect-ratio
   gives it a definite height) + a right-hand column that flex-stretches to
   match that height, split 1:2 between sauces and wings. Plain flexbox on
   purpose — a grid item spanning multiple fr rows with its height driven
   by aspect-ratio is inconsistently supported (notably breaks in Safari),
   where this stretch-and-split pattern is basic, universally-supported
   flexbox. Below 821px .values-grid becomes the swipeable carousel (see
   @media 820px) and .values-right-col switches to display:contents so its
   two cards rejoin as flat, flush swipeable siblings there. */
@media (min-width: 821px) {
  .values-grid--bento {
    display: flex;
    align-items: stretch;
    gap: clamp(var(--sp-2), 2.5vw, var(--sp-3));
  }
  .values-grid--bento .value-card--photo-lg {
    flex: 0 0 46%;
    min-width: 0;
  }
  .values-right-col {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    gap: clamp(var(--sp-2), 2.5vw, var(--sp-3));
  }
  .values-right-col .value-card--photo-xs { flex: 1 1 0; }
  .values-right-col .value-card--photo-sm { flex: 1 1 0; }
}

.values-arrow {
  display: none;
  align-items: center;
  justify-content: center;
}

.value-card {
  /* grid/flex items default to min-width/height:auto, which resolves to
     their content's min-content size — for a card containing a large
     intrinsic image that can blow the track way past its fr share and
     break the whole grid's width. Force them back down to their track. */
  min-width: 0;
  min-height: 0;
  background: var(--neutral-0);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  padding: clamp(var(--sp-4), 3.5vw, var(--sp-6)) clamp(var(--sp-3), 3vw, var(--sp-4));
  text-align: center;
  box-shadow: 0 1px 3px rgba(28, 26, 23, 0.04);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-soft);
}
.value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-50);
  color: var(--accent-600);
  margin-bottom: var(--sp-3);
  transition: transform 0.45s var(--ease-out);
}
.value-card:hover .value-icon { transform: scale(1.1) rotate(-4deg); }
.value-card:nth-child(2) .value-icon { background: var(--gold-100); color: var(--gold-700); }
.value-card:nth-child(3) .value-icon { background: var(--accent-500); color: var(--neutral-0); }

.value-title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--neutral-800);
  margin-bottom: 0.625rem;
}

.value-desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted-light);
  max-width: 30ch;
  margin-inline: auto;
}

/* -------------------------------------------------- values: photo panel
   Portrait 4:5 spec card: cutout product shot (transparent PNG) sitting on
   a designed dark card background (same diagonal-stripe + warm-wash motif
   as .img-placeholder), with copy stacked below it — no scrim needed since
   there's no busy photo behind the text. */
.value-card--photo {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: left;
  background:
    repeating-linear-gradient(-45deg,
      rgba(251, 244, 235, 0.025) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, rgba(247, 183, 43, 0.1), rgba(221, 14, 82, 0.06) 55%, transparent),
    var(--bg-card-dark);
}
/* the fries card spans both grid rows, so its aspect-ratio is what drives
   the whole right column's height (see .values-grid--bento above) */
.value-card--photo-lg { aspect-ratio: 4 / 5; }
/* wings/sauces only fill their own row — no aspect-ratio of their own */
.value-card--photo-sm,
.value-card--photo-xs { min-height: 0; }
.value-card-img {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center 60%;
  padding: clamp(var(--sp-3), 3vw, var(--sp-4)) clamp(var(--sp-3), 3vw, var(--sp-4)) 0;
  transition: transform 0.6s var(--ease-out);
}
.value-card--photo:hover .value-card-img { transform: scale(1.04); }

/* wings: rotating crossfade of real product shots, same flex slot as the
   fries img above (grows to fill the space above the copy block). */
.value-card-rotator {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 120px;
  padding: clamp(var(--sp-2), 2.5vw, var(--sp-3)) clamp(var(--sp-3), 3vw, var(--sp-4)) 0;
  /* lets the rotated image below be sized off this box's own height
     (100cqh) regardless of the box being wider than it is tall */
  container-type: size;
}
.value-card-rotator-img {
  position: absolute;
  inset: clamp(var(--sp-2), 2.5vw, var(--sp-3)) clamp(var(--sp-3), 3vw, var(--sp-4)) 0;
  width: calc(100% - 2 * clamp(var(--sp-3), 3vw, var(--sp-4)));
  height: calc(100% - clamp(var(--sp-2), 2.5vw, var(--sp-3)));
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
}
/* rotating a non-square box 90deg swaps its visual footprint (wide+short
   becomes narrow+tall), which either overflows past the card or clips
   into the text below. Squaring the box to the rotator's own height
   first means the 90deg turn leaves the footprint unchanged — it just
   spins the photo in place, no layout shift. */
.value-card--photo-sm .value-card-rotator-img {
  animation: valuesRotate2 6s infinite;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: 100cqh;
  height: 100cqh;
  margin: calc(-50cqh) 0 0 calc(-50cqh);
  transform: rotate(90deg);
}
.value-card--photo-sm .value-card-rotator-img:nth-child(1) { animation-delay: 0s; }
.value-card--photo-sm .value-card-rotator-img:nth-child(2) { animation-delay: 3s; }
/* two-slide crossfade (tray photo + bowl photo) — same visible/gap ratio
   as the old three-slide valuesRotate3, just rescaled to a 2-slot cycle */
@keyframes valuesRotate2 {
  0%, 100% { opacity: 0; }
  6% { opacity: 1; }
  44% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes valuesRotate3 {
  0%, 100% { opacity: 0; }
  4% { opacity: 1; }
  29% { opacity: 1; }
  33% { opacity: 0; }
}

/* sauces: curved sliding showcase of menu photos — bigger tiles than the
   wings rotator, running the full width of the card and continuously
   sliding off toward the right (mirrors the marqueeScroll mechanic used
   elsewhere, just reversed), each tile riding a shallow arc via --i/--n
   so the strip reads as a gentle curve rather than a flat row. */
.value-card-slideshow {
  --arc-amp: 14px;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 90px;
  overflow: hidden;
  /* headroom for the arc so a tile riding the top of the curve never
     clips against this box's own edge (was cutting into the dessert
     photo before) */
  padding-block: var(--arc-amp);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.value-card-slideshow-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  gap: calc(clamp(1.25rem, 3.5vw, 2rem) + 20px);
  padding-inline: clamp(var(--sp-2), 2.5vw, var(--sp-3));
  animation: valuesSlideRight 12s linear infinite;
}
.value-card-slideshow-img {
  flex-shrink: 0;
  height: clamp(64px, 12vw, 96px);
  width: auto;
  max-width: 120px;
  object-fit: contain;
  transform: translateY(calc(-1 * var(--arc-amp) * sin(180deg * var(--i) / (var(--n) - 1))));
}
@keyframes valuesSlideRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0%); }
}
.value-card-photo-content {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0 clamp(var(--sp-3), 3vw, var(--sp-4)) clamp(var(--sp-3), 3vw, var(--sp-4));
}
.value-card-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.value-card-headline {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.04;
  font-size: clamp(1.5rem, 1.6vw + 1.1rem, 2.375rem);
  color: var(--neutral-0);
}
/* continuously scrolling strip of real fries variants, mirrors the hero
   .marquee mechanic (duplicated group, translateX(-50%) loop) but scoped
   small/muted to sit quietly under the headline on the dark spec card */
.value-card-fries-marquee {
  position: relative;
  overflow: hidden;
  margin-top: 0.25rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.value-card-fries-track {
  display: flex;
  width: max-content;
  /* same px/s pace on every card — fries sets the 16s baseline pace;
     wings/sauces get their own --duration (set inline per card) worked
     out from their actual (shorter/longer) text so all three scroll at
     the same visual speed instead of the same loop time */
  animation-name: marqueeScroll;
  animation-duration: var(--duration, 16s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.value-card-fries-group {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  padding-right: 1.125rem;
  flex-shrink: 0;
}
.value-card-fries-group span {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--accent-400);
  white-space: nowrap;
}
.value-card-fries-group i {
  font-style: normal;
  color: var(--gold-400);
  font-size: 0.8em;
}

/* ------------------------------------------------ values: compact cards */
.value-card--compact {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-align: left;
  padding: clamp(var(--sp-3), 2.5vw, var(--sp-4));
}
.value-card--compact .value-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  margin-bottom: 0;
  background: var(--gold-100);
  color: var(--gold-700);
}
.value-card--compact .value-title { font-size: 1.0625rem; margin-bottom: 0.375rem; }
.value-card--compact .value-desc { margin-inline: 0; max-width: none; }

/* ---------------------------------------------------------------- contact */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(var(--sp-4), 5vw, var(--sp-8));
  align-items: start;
}

.contact-address { display: flex; flex-direction: column; gap: var(--sp-2); }
.contact-address p {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
}
.contact-address a {
  color: var(--accent-600);
  font-weight: 600;
  transition: color 0.2s;
}
.contact-address a:hover { color: var(--accent-400); }

.contact-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-50);
  color: var(--accent-600);
  margin-top: 0.125rem;
}

.hours { margin-top: var(--sp-4); }

.hours-title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--neutral-800);
  margin-bottom: var(--sp-2);
}

.hours-table {
  width: 100%;
  max-width: 400px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.hours-table tr { border-bottom: 1px solid var(--line-light); }
.hours-table tr:last-child { border-bottom: none; }
.hours-table th {
  text-align: left;
  font-weight: 500;
  color: var(--text-muted-light);
  padding: 0.625rem 1rem 0.625rem 0;
}
.hours-table td {
  text-align: right;
  padding: 0.625rem 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--neutral-700);
}
.hours-table tr.is-today th,
.hours-table tr.is-today td {
  color: var(--accent-600);
  font-weight: 600;
}
.hours-table tr.is-today th::after {
  content: ' · heute';
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hours-table tr.is-closed td {
  color: var(--neutral-500);
  font-style: italic;
}
.hours-table tr.is-closed.is-today th,
.hours-table tr.is-closed.is-today td {
  color: var(--accent-600);
}

.hours-note {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted-light);
}

.contact-map {
  position: relative;
  min-height: 500px;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-light);
  box-shadow: var(--shadow-lift);
  background: var(--neutral-100);
}
.contact-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ----------------------------------------------------------------- footer */
.site-footer {
  background: var(--bg-dark);
  border-top: 1px solid var(--line-dark);
  padding-top: clamp(var(--sp-6), 6vw, var(--sp-8));
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  padding-bottom: clamp(var(--sp-4), 5vw, var(--sp-6));
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.footer-logo {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(247, 183, 43, 0.45);
}
.footer-legal {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-muted-dark);
}

.footer-nav {
  display: flex;
  gap: clamp(var(--sp-2), 2.5vw, var(--sp-3));
  justify-content: center;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted-dark);
  transition: color 0.2s;
}
.footer-nav a:hover { color: var(--neutral-0); }

.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding-block: var(--sp-3);
}
.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: rgba(251, 244, 235, 0.45);
}
.footer-legal-links { display: flex; gap: var(--sp-3); }
.footer-legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color 0.2s;
}
.footer-legal-links a:hover { color: var(--neutral-0); }

.footer-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-3);
}
.footer-credit { color: inherit; }
.footer-credit a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  opacity: 0.75;
  transition: opacity 0.2s, color 0.2s;
}
.footer-credit a:hover { opacity: 1; color: var(--neutral-0); }

/* -------------------------------------------------------------- scroll top */
.scroll-top {
  position: fixed;
  bottom: var(--sp-3);
  right: var(--sp-3);
  z-index: 900;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-500);
  color: var(--neutral-0);
  border-radius: 50%;
  box-shadow: 0 6px 22px rgba(10, 9, 8, 0.45);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 0.3s var(--ease-soft),
    transform 0.3s var(--ease-soft),
    background-color 0.25s;
}
.scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top:hover { background: var(--accent-400); }

/* ------------------------------------------------------ reveal on scroll */
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.85s var(--ease-expo) var(--d, 0ms),
    transform 0.85s var(--ease-expo) var(--d, 0ms);
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------------- keyframes */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wordUp {
  to { transform: translateY(0); }
}
@keyframes heroImageIn {
  from { opacity: 0; transform: translateY(28px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes marqueeScroll {
  to { transform: translateX(-50%); }
}

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

  html.js .hero-kicker,
  html.js .hero-title .word,
  html.js .hero-image-wrap {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .marquee-track { animation: none !important; }
  .value-card-fries-track { animation: none !important; }
  .value-card-rotator-img { animation: none !important; opacity: 0 !important; }
  .value-card-rotator-img:first-child { opacity: 1 !important; }
  .value-card-slideshow-track { animation: none !important; }
  .story-carousel-track { animation: none !important; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .hero-inner {
    gap: var(--sp-5);
  }
}

@media (max-width: 1024px) and (min-width: 861px) {
  .hero-inner {
    padding-bottom: var(--sp-10);
  }
}

@media (max-width: 1024px) {
  .hero-ghost { font-size: clamp(4rem, 12vw, 8rem); }

  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .story-grid { gap: var(--sp-6); }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-map { min-height: 420px; }
}

@media (max-width: 900px) {
  /* category photo(s) stack above the dish list; reversed sections go back
     to the same top-to-bottom order as everything else on mobile */
  .menu-cat--photo .menu-cat-inner,
  .menu-cat--photo.menu-cat--reverse .menu-cat-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .menu-cat--reverse .menu-cat-photo-group,
  .menu-cat--reverse .menu-cat-content { order: initial; }
  .menu-cat-photo-group img { max-width: 280px; max-height: 340px; }

  /* two-photo categories (Taschen/Wrap Gerichte, Love Friet): instead
     of both photos stacking together above the dish list, bookend the
     section — first photo on top, dish list in the middle, second photo
     at the bottom. display:contents dissolves the photo-group wrapper so
     its two images become direct items of menu-cat-inner and can be
     ordered independently around menu-cat-content. */
  .menu-cat-photo-group.has-2 {
    display: contents;
  }
  .menu-cat-photo-group.has-2 img {
    max-width: 280px;
    max-height: 340px;
    margin-inline: auto;
  }
  .menu-cat-photo-group.has-2 img:first-child { order: 1; }
  .menu-cat-inner:has(.menu-cat-photo-group.has-2) .menu-cat-content { order: 2; }
  .menu-cat-photo-group.has-2 img:last-child { order: 3; }

  /* four-photo category (Bowl): keep the simple 2x2 grid above the dish
     list rather than the has-2 bookend trick — four images don't split
     cleanly into "first/last". */
  .menu-cat-photo-group.has-4 img { max-width: 140px; max-height: 170px; }

  /* three-photo category (Teller / Lahmacun / Currywurst): same reasoning
     as has-4 — keep the 2-up-plus-centered grid instead of bookending. */
  .menu-cat-photo-group.has-3 img { max-width: 140px; max-height: 170px; }
  .menu-cat-photo-group.has-3 img:last-child { max-width: 220px; max-height: 255px; }

  /* "Frisch gemacht, wie es sein sollte." — keep the story heading on one
     line instead of the default balanced 2-line wrap; scales with the
     viewport so it still fits down to narrow phones. */
  .story-content .section-title {
    font-size: clamp(1.05rem, 5.2vw, 2.375rem);
    white-space: nowrap;
  }
}

@media (max-width: 820px) {
  :root { --nav-height: 80px; }

  .nav { grid-template-columns: 44px 1fr auto; }
  .nav-toggle { display: flex; grid-column: 1; }
  .nav-logo { grid-column: 2; }
  .nav-logo-img { width: 60px; height: 60px; }
  .nav-actions { grid-column: 3; gap: 0.35rem; }
  .nav-actions .btn--cta { display: none; }
  .lang-toggle { height: 36px; padding: 0 0.55rem; font-size: 0.7rem; }
  .nav-order { min-height: 36px; height: 36px; padding: 0 0.9rem; font-size: 0.75rem; }

  .nav-links { display: none; }

  .story-grid { grid-template-columns: 1fr; }
  .img-placeholder--story {
    min-height: clamp(300px, 55vw, 440px);
    border-radius: var(--radius-lg);
    margin: 0;
  }
  .story-photo { height: clamp(300px, 55vw, 440px); }

  /* values become a swipeable, arrow-driven, auto-advancing carousel */
  .values-grid {
    display: flex;
    grid-template-columns: none;
    max-width: 100%;
    margin-inline: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .values-grid::-webkit-scrollbar { display: none; }
  /* the desktop right-column wrapper drops out of layout entirely so its
     two cards (sauce, wings) rejoin the carousel as flat flex children */
  .values-right-col { display: contents; }
  .value-card {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
  .value-card--photo { aspect-ratio: 4 / 5; }
  .value-card--compact { min-height: 300px; align-items: center; }
  .values-arrow {
    display: flex;
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--neutral-0);
    color: var(--neutral-800);
    border: 1px solid var(--line-light);
    box-shadow: var(--shadow-lift);
  }
  .values-arrow--prev { left: -4px; }
  .values-arrow--next { right: -4px; }

  .footer-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--sp-3);
  }
  .footer-brand { flex-direction: column; text-align: center; }
  .footer-nav { flex-wrap: wrap; }
  .footer-bottom-inner { flex-direction: column; text-align: center; gap: 0; }
  .footer-right { justify-content: center; margin-top: var(--sp-1); }
}

@media (max-width: 700px) {
  /* menu preview becomes a swipeable, arrow-driven, auto-advancing carousel */
  .product-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .product-grid::-webkit-scrollbar { display: none; }
  .product-card {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
  .menu-arrow {
    display: flex;
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--bg-card-dark);
    color: var(--neutral-50);
    border: 1px solid var(--line-dark);
    box-shadow: var(--shadow-lift-dark);
  }
  .menu-arrow--prev { left: -4px; }
  .menu-arrow--next { right: -4px; }

  .hero-trust {
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
  }

  .list-grid { grid-template-columns: 1fr; }
  .menu-hero { padding-top: calc(var(--nav-height) + var(--sp-4)); }
}

@media (max-width: 420px) {
  .marquee-group span { font-size: 1rem; }
}