/* ==========================================================================
   Antalya Kebab Haus — Elevated Luxury Components
   Glassmorphism, obsidian dark theme, ambient glows, high-end food cards
   ========================================================================== */

/* ---------- Wordmark / Logo ---------- */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.wordmark:hover {
  transform: scale(1.03);
}
/* Mirrors the real shop sign: red "ANTAL_A" with a green "Y",
   and "Kebab Haus" in the same green. */
.wordmark__main {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.85rem;
  letter-spacing: 0.05em;
  color: var(--color-red);
  text-shadow: 0 2px 14px rgba(229, 56, 59, 0.45);
}
.wordmark__y {
  color: var(--color-green-ink);
  text-shadow: 0 2px 14px var(--color-green-glow);
}
.wordmark__sub {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-green-ink);
  margin-top: 4px;
  text-shadow: 0 1px 8px var(--color-green-glow);
}
@media (min-width: 860px) {
  .wordmark__main {
    font-size: 2.45rem;
    letter-spacing: 0.06em;
  }
  .wordmark__sub {
    font-size: 1.05rem;
    letter-spacing: 0.34em;
    margin-top: 5px;
  }
}
.wordmark--lg .wordmark__main { font-size: 3rem; }
.wordmark--lg .wordmark__sub { font-size: 1.15rem; letter-spacing: 0.36em; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-line-gold);
  box-shadow: var(--shadow-soft);
  transition: padding var(--dur-fast) var(--ease-out);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  gap: var(--space-md);
  padding-block: 0.5rem;
}
.main-nav {
  display: none;
  align-items: center;
  gap: var(--space-xl);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-md);
  letter-spacing: 0.03em;
}
.main-nav a {
  text-decoration: none;
  padding: 0.4rem 0;
  color: var(--color-ink-muted);
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-red), var(--color-gold));
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.main-nav a:hover, .main-nav a[aria-current="page"] {
  color: var(--color-ink);
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}
@media (min-width: 860px) {
  .main-nav { display: flex; }
  .nav-toggle { display: none; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--fill-subtle);
  padding: 3px;
  backdrop-filter: blur(10px);
}
.lang-toggle button {
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xs);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill);
  color: var(--color-ink-soft);
  transition: all var(--dur-fast) var(--ease-out);
}
.lang-toggle button[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--color-red) 0%, var(--color-red-dark) 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(229, 56, 59, 0.4);
}

/* Hell/Dunkel toggle — shows the icon of the mode you'd switch TO. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--fill-subtle);
  color: var(--color-ink);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { background: var(--fill-subtle-hover); color: var(--color-gold-ink); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle__sun { display: none; }
.theme-toggle__moon { display: block; }
.theme-toggle.is-dark .theme-toggle__sun { display: block; }
.theme-toggle.is-dark .theme-toggle__moon { display: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--fill-subtle);
  color: var(--color-ink);
  transition: background var(--dur-fast) var(--ease-out);
}
.nav-toggle:hover { background: var(--fill-subtle-hover); }
.nav-toggle svg { width: 22px; height: 22px; }

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  padding: var(--space-xs) 0 var(--space-md);
  font-family: var(--font-display);
  font-weight: 700;
  border-top: 1px solid var(--color-line);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  padding: 0.8rem var(--space-sm);
  text-decoration: none;
  border-radius: var(--radius-sm);
  background: var(--fill-subtle);
  color: var(--color-ink-muted);
  transition: all var(--dur-fast) var(--ease-out);
}
.mobile-nav a:hover {
  background: rgba(229, 56, 59, 0.15);
  color: var(--color-ink);
  padding-left: calc(var(--space-sm) + 4px);
}
@media (min-width: 860px) {
  .mobile-nav, .nav-toggle { display: none !important; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  padding-block: var(--space-2xl) var(--space-xl);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  filter: brightness(0.7) contrast(1.1);
  transition: transform 10s ease-out;
}
.hero:hover .hero__media img {
  transform: scale(1);
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(180deg, rgba(12, 11, 14, 0.6) 0%, rgba(12, 11, 14, 0.85) 60%, var(--color-bg) 100%),
    radial-gradient(ellipse at center, rgba(229, 56, 59, 0.2) 0%, transparent 70%);
}
.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
}
/* The hero always sits on a dark scrim over the photo, in both themes, so
   its text and the ghost button keep light colours instead of following
   the page ink — which would turn dark-on-dark in the light theme. */
.hero .btn--ghost {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}
.hero .btn--ghost:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.22);
  border-color: #FFFFFF;
}
.hero__ribbon {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(244, 162, 97, 0.14);
  border: 1px solid rgba(244, 162, 97, 0.45);
  /* on the dark scrim in both themes, so it keeps the warm amber */
  color: #F0B36B;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-md);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
}
.hero h1 {
  font-size: clamp(2.4rem, 6.5vw, var(--fs-3xl));
  max-width: 16ch;
  line-height: 1.08;
  color: #FFFFFF;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
}
.hero p.lede {
  max-width: 52ch;
  font-size: var(--fs-md);
  margin-top: var(--space-sm);
  /* light in both themes — this sits on the dark scrim over the photo */
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.6;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: var(--space-lg);
}

/* ---------- Sticky mobile action bar ---------- */
.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 400;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--color-line-gold);
  box-shadow: 0 -8px 26px rgba(38, 30, 22, 0.12);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.action-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 64px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  border-right: 1px solid var(--color-line);
  transition: all var(--dur-fast) var(--ease-out);
}
.action-bar a:last-child { border-right: 0; }
.action-bar a svg { width: 22px; height: 22px; color: var(--color-gold); transition: transform var(--dur-fast) var(--ease-out); }
.action-bar a:hover svg { transform: scale(1.15); }
/* Solid red rather than a translucent tint: over the light bar the tint
   faded to pale pink and the white label vanished. As the primary call to
   action it should read as a filled button in both themes anyway. */
.action-bar a.is-primary {
  background: linear-gradient(180deg, var(--color-red) 0%, var(--color-red-dark) 100%);
  color: #FFFFFF;
  border-right-color: transparent;
}
.action-bar a.is-primary svg { color: #FFFFFF; }
@media (min-width: 860px) {
  .action-bar { display: none; }
}
body.has-action-bar { padding-bottom: 64px; }
@media (min-width: 860px) {
  body.has-action-bar { padding-bottom: 0; }
}

/* ---------- Info grid & Cards ---------- */
.info-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .info-grid { grid-template-columns: repeat(3, 1fr); }
}
.info-card {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft);
  transition: all var(--dur-med) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.info-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-red), var(--color-gold));
  opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.info-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-line-gold);
  box-shadow: var(--shadow-lift), var(--glow-gold);
}
.info-card:hover::before { opacity: 1; }

.info-card__icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(229, 56, 59, 0.2) 0%, rgba(244, 162, 97, 0.1) 100%);
  border: 1px solid rgba(244, 162, 97, 0.3);
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}
.info-card__icon svg { width: 24px; height: 24px; }
.info-card h3 { font-size: var(--fs-md); margin-bottom: 0.5rem; color: var(--color-ink); }
.info-card p { color: var(--color-ink-soft); font-size: var(--fs-sm); }
.info-card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; font-size: var(--fs-sm); }
.info-card dt { color: var(--color-ink-soft); font-weight: 500; }
.info-card dd { color: var(--color-ink); font-weight: 600; font-family: var(--font-mono); }
.info-card .closed-day { color: var(--color-red-ink); font-weight: 700; }

/* ---------- Category teaser grid ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}
@media (min-width: 700px) {
  .cat-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
}
.cat-card {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/5;
  text-decoration: none;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
  transition: all var(--dur-med) var(--ease-out);
}
.cat-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--color-gold);
  box-shadow: var(--shadow-lift), var(--glow-gold);
}
.cat-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.cat-card:hover img {
  transform: scale(1.1);
}
.cat-card::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(12, 11, 14, 0.1) 20%, rgba(12, 11, 14, 0.75) 75%, rgba(12, 11, 14, 0.95) 100%);
}
.cat-card span {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 2;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-md);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cat-card span::after {
  content: "→";
  font-size: 1.1em;
  color: var(--color-gold);
  opacity: 0;
  transform: translateX(-8px);
  transition: all var(--dur-fast) var(--ease-out);
}
.cat-card:hover span::after {
  opacity: 1;
  transform: translateX(0);
}

/* ---------- Team block ---------- */
.team-block {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .team-block { grid-template-columns: 1.15fr 1fr; }
}
.team-block__media {
  position: relative;
}
.team-block__media::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: calc(var(--radius-lg) + 6px);
  background: linear-gradient(135deg, var(--color-red-glow), var(--color-gold-glow));
  z-index: 0;
  filter: blur(15px);
  opacity: 0.6;
}
.team-block__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lift);
  aspect-ratio: 4/3;
  object-fit: cover;
}
.team-block__text {
  position: relative;
  z-index: 1;
}
.team-block__text h2 { margin-bottom: var(--space-xs); }
.team-block__text p { color: var(--color-ink-muted); line-height: 1.7; }

.zone-table td.num {
  font-family: var(--font-mono);
  font-weight: 800;
  white-space: nowrap;
  text-align: right;
}
.zone-table td:first-child { line-height: 1.4; }
.zone-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 560px) {
  .zone-table thead { display: none; }
  .zone-table, .zone-table tbody, .zone-table tr, .zone-table td { display: block; width: 100%; }
  .zone-table tr {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-line);
  }
  .zone-table td { border: 0; padding: 0.1rem 0; }
  .zone-table td.num {
    display: inline-block;
    width: auto;
    text-align: left;
    margin-right: var(--space-sm);
    color: var(--color-gold);
  }
}

/* ---------- Kundenlieblinge (favorite dishes) ---------- */
.favorites-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-md);
}
@media (min-width: 580px) {
  .favorites-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .favorites-grid { grid-template-columns: repeat(4, 1fr); }
}
.dish-card {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  backdrop-filter: var(--glass-blur);
  transition: all var(--dur-med) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.dish-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-line-gold);
  box-shadow: var(--shadow-lift), var(--glow-red);
}
.dish-card__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.dish-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.dish-card:hover .dish-card__media img {
  transform: scale(1.08);
}
.dish-card__price {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: linear-gradient(135deg, var(--color-red) 0%, var(--color-red-dark) 100%);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: var(--fs-xs);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(229, 56, 59, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.dish-card__body {
  padding: var(--space-sm) var(--space-md) var(--space-md);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.dish-card__body h3 { font-size: var(--fs-md); margin-bottom: 0.3rem; color: var(--color-ink); }
.dish-card__body p {
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-sm);
  line-height: 1.5;
  flex: 1;
}
.dish-card__link {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xs);
  color: var(--color-green-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.dish-card__link:hover { color: var(--color-green-dark); }

/* ---------- Delivery table ---------- */
.delivery-layout {
  display: grid;
  gap: var(--space-lg);
}
@media (min-width: 800px) {
  .delivery-layout { grid-template-columns: 1fr 1fr; }
}
.fee-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.fee-table th, .fee-table td {
  text-align: left;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-sm);
}
.fee-table th {
  font-family: var(--font-display);
  font-weight: 800;
  background: var(--fill-subtle);
  color: var(--color-gold);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
}
.fee-table td {
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
}
.area-chips {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: var(--space-sm);
}
.area-chip {
  background: var(--color-green-tint);
  border: 1px solid var(--color-green);
  color: var(--color-green-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  transition: all var(--dur-fast) var(--ease-out);
}
.area-chip:hover {
  background: var(--color-green);
  border-color: var(--color-green-ink);
  transform: translateY(-2px);
}

/* ---------- Map ---------- */
.map-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
}
/* Platzhalter, solange die Karte noch nicht geladen wurde. */
.map-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  min-height: 320px;
  padding: var(--space-lg) var(--space-md);
  background: var(--glass-bg-card);
  color: var(--color-ink-muted);
}
.map-consent svg { width: 40px; height: 40px; color: var(--color-red); }
.map-consent__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-md);
  color: var(--color-ink);
}
.map-consent__text {
  max-width: 46ch;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.map-frame iframe { width: 100%; height: 380px; border: 0; display: block; filter: invert(90%) hue-rotate(180deg) contrast(1.1); }

/* ---------- Footer ---------- */
/* The footer stays dark on purpose — it anchors the light page. That means
   it needs light-on-dark colours of its own rather than the page ink. */
.site-footer {
  background: #1A1512;
  border-top: 1px solid var(--color-line-gold);
  color: #D8D1C6;
  padding-block: var(--space-2xl) var(--space-lg);
  position: relative;
}
.site-footer a { color: #D8D1C6; transition: color var(--dur-fast) var(--ease-out); }
.site-footer a:hover { color: var(--color-gold-bright); }
.footer-grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.footer-grid h3 {
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-gold-bright);
  margin-bottom: var(--space-sm);
}
.footer-grid ul { display: grid; gap: 0.6rem; font-size: var(--fs-sm); }
.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: var(--space-md);
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #F3EFE8;
  transition: all var(--dur-fast) var(--ease-out);
}
.footer-social a:hover {
  background: var(--color-red);
  color: #FFFFFF;
  border-color: var(--color-red);
  box-shadow: 0 0 20px rgba(229, 56, 59, 0.5);
  transform: translateY(-3px);
}
.footer-social svg { width: 20px; height: 20px; }

.footer-bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: #B7AE9F;
}

/* ---------- Menu page: category nav ---------- */
/* Every category is visible and tappable — no sideways scrolling.
   On phones the block sits inline at the top of the menu instead of
   sticking, because several wrapped rows pinned to the top would eat
   most of the screen. From tablet up it sticks, since two rows fit. */
.cat-nav-wrap {
  position: static;
  z-index: 300;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-line-gold);
  box-shadow: var(--shadow-soft);
}
@media (min-width: 860px) {
  .cat-nav-wrap {
    position: sticky;
    top: var(--header-height);
  }
}
.cat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-block: 0.8rem;
}
.cat-nav a {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0.4rem 1.2rem;
  border-radius: var(--radius-pill);
  background: var(--fill-subtle);
  border: 1px solid var(--glass-border);
  color: var(--color-ink-muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out);
}
@media (max-width: 560px) {
  .cat-nav a { padding: 0.4rem 0.85rem; }
}
.cat-nav a:hover {
  background: var(--fill-subtle-hover);
  color: #FFFFFF;
}
.cat-nav a.is-active {
  background: linear-gradient(135deg, var(--color-red) 0%, var(--color-red-dark) 100%);
  border-color: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  box-shadow: 0 4px 15px rgba(229, 56, 59, 0.4);
}

.menu-legend-note {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  background: var(--color-green-tint);
  border: 1px solid var(--color-green);
  color: var(--color-green-ink);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-sm);
  margin-block: var(--space-md);
}
.menu-legend-note svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-green-ink); }

/* ---------- Suche & Allergen-Filter ---------- */
.menu-filter {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-soft);
}
.menu-filter__search {
  position: relative;
  display: flex;
  align-items: center;
}
.menu-filter__icon {
  position: absolute;
  left: 0.8rem;
  width: 19px; height: 19px;
  color: var(--color-ink-soft);
  pointer-events: none;
}
.menu-filter__search input {
  width: 100%;
  min-height: var(--tap-min);
  padding: 0.6rem 2.8rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--fs-sm);
}
.menu-filter__search input::-webkit-search-cancel-button { display: none; }
.menu-filter__clear {
  position: absolute;
  right: 0.4rem;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--fill-subtle);
  color: var(--color-ink-muted);
}
.menu-filter__clear:hover { background: var(--fill-subtle-hover); }
.menu-filter__clear svg { width: 16px; height: 16px; }

.menu-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-sm);
}
.filter-chip {
  min-height: var(--tap-min);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--fill-subtle);
  color: var(--color-ink-muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  transition: all var(--dur-fast) var(--ease-out);
}
.filter-chip:hover { background: var(--fill-subtle-hover); }
.filter-chip.is-active {
  background: linear-gradient(135deg, var(--color-green) 0%, var(--color-green-dark) 100%);
  border-color: var(--color-green-bright);
  color: #FFFFFF;
  box-shadow: 0 4px 14px var(--color-green-glow);
}

.menu-filter__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: var(--space-sm);
}
.menu-filter__count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
}
.menu-filter__reset {
  min-height: 36px;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-red);
  background: transparent;
  color: var(--color-red-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
}
.menu-filter__reset:hover { background: var(--color-red-tint); }
.menu-filter__note {
  margin-top: var(--space-2xs);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
  max-width: 70ch;
}

.menu-filter__empty {
  text-align: center;
  padding: var(--space-lg) 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink-muted);
}
.menu-filter__hidden-note {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-md);
  background: var(--color-gold-glow);
  color: var(--color-ink);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* Count of this exact line already on the Bestellzettel. */
.price-btn { position: relative; }
.price-btn[data-qty]::after {
  content: attr(data-qty) "×";
  position: absolute;
  top: -7px;
  right: -5px;
  min-width: 21px;
  height: 21px;
  padding-inline: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--color-green-bright) 0%, var(--color-green) 100%);
  color: #0C0B0E;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.68rem;
  box-shadow: 0 2px 8px var(--color-green-glow);
}

.menu-category {
  scroll-margin-top: calc(var(--header-height) + 70px);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-line);
}
.menu-category__banner {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-soft);
  min-height: 160px;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--glass-border);
}
@media (min-width: 700px) {
  .menu-category__banner { min-height: 220px; }
}
.menu-category__banner img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.75);
}
.menu-category__banner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 11, 14, 0.1) 0%, rgba(12, 11, 14, 0.7) 60%, rgba(12, 11, 14, 0.95) 100%);
}
.menu-category__banner-text {
  position: relative;
  z-index: 1;
  padding: var(--space-md) var(--space-lg);
  color: #fff;
}
.menu-category__banner-text h2 {
  color: #FFFFFF;
  font-size: var(--fs-2xl);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}
.menu-category__note {
  font-size: var(--fs-sm);
  color: var(--color-gold);
  margin-top: 0.3rem;
  max-width: 60ch;
  font-weight: 500;
}

.menu-item {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-md);
  margin-bottom: 0.6rem;
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  backdrop-filter: var(--glass-blur);
  transition: all var(--dur-fast) var(--ease-out);
}
.menu-item:hover {
  border-color: var(--color-line-gold);
  background: var(--color-surface-hover);
  box-shadow: var(--shadow-soft);
}
.menu-item__thumb {
  width: 82px;
  height: 82px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
@media (min-width: 700px) {
  .menu-item__thumb { width: 104px; height: 104px; }
}

.menu-item__body { flex: 1; min-width: 0; }
.menu-item__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.menu-item__nr {
  font-family: var(--font-mono);
  color: var(--color-gold);
  font-weight: 700;
  font-size: var(--fs-xs);
  background: var(--color-gold-glow);
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
}
.menu-item__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-md);
  color: var(--color-ink);
}
.menu-item__tags { display: inline-flex; gap: 0.35rem; }
.menu-item__tag {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-green-tint);
  border: 1px solid var(--color-green);
  color: var(--color-green-ink);
}
.menu-item__tag--scharf {
  background: var(--color-red-tint);
  border-color: rgba(229, 56, 59, 0.4);
  color: var(--color-red-ink);
}
.menu-item__desc {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  margin-top: 0.3rem;
  line-height: 1.4;
}
.badge-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.35rem;
  border-radius: 6px;
  background: var(--fill-subtle);
  border: 1px solid var(--glass-border);
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
}
.badge:hover {
  background: var(--color-red-tint);
  color: var(--color-red-ink);
  border-color: var(--color-red);
}

.menu-item__prices {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Size + price + add, all in one target, so "klein" and "groß" read at a
   glance and each is its own tap target. */
.price-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--tap-min);
  padding: 0.35rem 0.5rem 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--fill-subtle);
  color: var(--color-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.price-btn:hover {
  background: var(--fill-subtle-hover);
  border-color: var(--color-green);
  transform: translateY(-1px);
}
.price-btn__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0C0B0E;
  background: var(--color-green-bright);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
}
.price-btn__amount {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--color-gold);
}
.price-btn__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--color-red) 0%, var(--color-red-dark) 100%);
  box-shadow: 0 3px 10px rgba(229, 56, 59, 0.45);
}
.price-btn.is-added {
  border-color: var(--color-green-bright);
  background: var(--color-green-tint);
}
.price-btn.is-added .price-btn__plus {
  background: linear-gradient(135deg, var(--color-green-bright) 0%, var(--color-green) 100%);
  box-shadow: 0 3px 10px var(--color-green-glow);
}

/* Narrow phones: give the price buttons their own full-width row and let
   them share it evenly, so "klein" and "groß" still sit side by side
   instead of stacking. */
@media (max-width: 560px) {
  .menu-item { flex-wrap: wrap; }
  .menu-item__prices {
    width: 100%;
    justify-content: stretch;
    gap: 0.5rem;
  }
  /* min-width:0 lets them shrink past their content width, otherwise the
     flex row wraps and they stack again. */
  .price-btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.3rem 0.35rem;
  }
  .price-btn__label { font-size: 0.66rem; padding: 0.12rem 0.36rem; }
  .price-btn__plus { width: 24px; height: 24px; font-size: 1rem; }
}

/* ---------- Review banner ---------- */
.review-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  background: linear-gradient(135deg, rgba(244, 162, 97, 0.12) 0%, rgba(229, 56, 59, 0.12) 100%);
  border: 1px solid var(--color-line-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-block: var(--space-xl);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-lift);
}
.review-banner__text { max-width: 48ch; }
.review-banner h2 { font-size: var(--fs-xl); margin-bottom: 0.3rem; color: var(--color-ink); }
.review-banner p { color: var(--color-ink-muted); }

/* ---------- Legend accordion ---------- */
.legend {
  margin-block: var(--space-xl);
}
.legend details {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: 0.8rem;
  backdrop-filter: var(--glass-blur);
}
.legend summary {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-gold);
  cursor: pointer;
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
}
.legend-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 1.4rem;
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
}
@media (min-width: 640px) {
  .legend-grid { grid-template-columns: 1fr 1fr; }
}
.legend-grid dt {
  font-family: var(--font-mono);
  font-weight: 800;
  display: inline-block;
  min-width: 1.8em;
  color: var(--color-red-ink);
}
.legend-grid dd { color: var(--color-ink-muted); }

/* ---------- Bestellzettel (order pad / receipt) ---------- */
.notepad-fab {
  position: fixed;
  right: var(--space-md);
  bottom: calc(var(--space-md) + 64px);
  z-index: 450;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, var(--color-red) 0%, var(--color-red-dark) 100%);
  color: #FFFFFF;
  border-radius: var(--radius-pill);
  padding: 0.85rem 1.4rem;
  box-shadow: 0 10px 35px rgba(229, 56, 59, 0.5);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.notepad-fab:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 40px rgba(229, 56, 59, 0.7);
}
.notepad-fab svg { width: 22px; height: 22px; }
.notepad-fab__count {
  /* A filled chip, so it needs the bright amber — --color-gold is the
     darker text-safe tone and would be near-black on near-black here. */
  background: var(--color-gold-bright);
  color: #0C0B0E;
  font-weight: 900;
  border-radius: 50%;
  min-width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
}
@media (min-width: 860px) {
  .notepad-fab { bottom: var(--space-md); }
}
.notepad-fab.is-empty { display: none; }

.notepad-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 600;
  display: none;
}
.notepad-overlay.is-open { display: block; }

.notepad-panel {
  position: fixed;
  z-index: 601;
  left: 0; right: 0; bottom: 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: 1px solid var(--color-line-gold);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.8);
  transform: translateY(100%);
  transition: transform var(--dur-med) var(--ease-out);
  padding-top: 14px;
}
.notepad-panel.is-open { transform: translateY(0); }
@media (min-width: 860px) {
  .notepad-panel {
    left: auto;
    top: 0; bottom: 0;
    right: 0;
    width: min(440px, 100%);
    max-height: none;
    border-radius: 0;
    transform: translateX(100%);
  }
  .notepad-panel.is-open { transform: translateX(0); }
}

.notepad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-line);
}
.notepad-header h2 { font-size: var(--fs-lg); color: var(--color-ink); }
.notepad-close {
  width: var(--tap-min); height: var(--tap-min);
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--fill-subtle);
  color: var(--color-ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.notepad-close:hover { background: var(--fill-subtle-hover); }

.notepad-disclaimer {
  margin: var(--space-xs) var(--space-md);
  font-size: var(--fs-xs);
  color: var(--color-gold);
  font-style: italic;
}

.notepad-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-md);
  font-family: var(--font-mono);
}
.notepad-empty {
  text-align: center;
  color: var(--color-ink-soft);
  padding: var(--space-lg) 0;
  font-family: var(--font-body);
  font-style: italic;
}
.ticket-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px dashed var(--color-line);
}
.ticket-line__name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticket-line__qty {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.ticket-line__qty button {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--fill-subtle-hover);
  color: var(--color-ink);
  font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  transition: background var(--dur-fast) var(--ease-out);
}
.ticket-line__qty button:hover { background: var(--fill-subtle-hover); }
.ticket-line__price { font-weight: 800; font-size: var(--fs-sm); color: var(--color-gold); white-space: nowrap; }
.ticket-line__remove {
  border: 0; background: transparent; color: var(--color-ink-soft);
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--dur-fast) var(--ease-out);
}
.ticket-line__remove:hover { color: var(--color-red); }

.notepad-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--color-ink);
  padding: var(--space-sm) var(--space-md);
  border-top: 2px solid var(--color-gold);
  background: var(--fill-subtle);
}
.notepad-total__amount { color: var(--color-gold); }

/* Abholung vs. Lieferung — a two-option switch rather than a dropdown,
   so both choices are visible at a glance on a phone. */
.notepad-mode {
  padding: 0 var(--space-md) var(--space-sm);
}
.notepad-mode__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
  margin-bottom: 0.4rem;
}
.notepad-mode__switch {
  display: flex;
  gap: 0.5rem;
}
.notepad-mode__switch button {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--fill-subtle);
  color: var(--color-ink-soft);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.notepad-mode__switch button svg { width: 18px; height: 18px; flex-shrink: 0; }
.notepad-mode__switch button:hover { background: var(--fill-subtle-hover); }
.notepad-mode__switch button.is-active {
  background: linear-gradient(135deg, var(--color-green) 0%, var(--color-green-dark) 100%);
  border-color: var(--color-green-bright);
  color: #FFFFFF;
  box-shadow: 0 4px 14px var(--color-green-glow);
}

.notepad-address {
  padding: 0 var(--space-md) var(--space-sm);
}
.notepad-address label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
  margin-bottom: 0.3rem;
}
.notepad-address textarea,
.notepad-address input[type="text"],
.notepad-address select {
  width: 100%;
  min-height: var(--tap-min);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--fs-sm);
  line-height: 1.4;
  margin-bottom: var(--space-2xs);
}
.notepad-address textarea { resize: vertical; }
.notepad-address select { cursor: pointer; }
.notepad-address label { margin-top: 0.2rem; }

.notepad-sums {
  padding: var(--space-2xs) var(--space-md) 0;
}
.notepad-sums__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  padding-block: 0.15rem;
}
.notepad-sums__row .notepad-total__amount,
.notepad-sums__row .notepad-fee__amount { font-weight: 700; color: var(--color-ink); }
.notepad-sums .notepad-total { padding-inline: 0; }
.notepad-address__hint {
  font-size: 0.72rem;
  color: var(--color-ink-soft);
  margin-top: 0.4rem;
  line-height: 1.45;
}
.notepad-address__error {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-red-ink);
  margin-top: 0.4rem;
}

.notepad-notes {
  padding: 0 var(--space-md) var(--space-sm);
}
.notepad-notes label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
  margin-bottom: 0.3rem;
}
.notepad-notes textarea {
  width: 100%;
  resize: vertical;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.notepad-footer {
  position: relative;
  padding: var(--space-sm) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom, 0));
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  border-top: 1px solid var(--color-line);
}
.notepad-footer > * { flex: 1 1 auto; }
.notepad-footer__order { flex: 1 0 100%; }

/* ---------- Bild-Lightbox ---------- */
.js-zoom { cursor: zoom-in; }
.js-zoom:focus-visible { outline: 3px solid var(--color-red); outline-offset: 3px; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  /* Always a dark backdrop, in both themes — it makes the food pop and
     signals that the page behind is paused. */
  background: rgba(12, 9, 7, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}
.lightbox.is-open { opacity: 1; }
/* Must beat the .lightbox rule above: a class selector outranks the
   browser's own [hidden] { display: none }, so without this the closed
   overlay stays laid over the page at opacity 0 and eats every click. */
.lightbox[hidden] { display: none; }

.lightbox__figure {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  transform: scale(0.96);
  transition: transform var(--dur-med) var(--ease-out);
}
.lightbox.is-open .lightbox__figure { transform: scale(1); }

.lightbox__img {
  max-width: 100%;
  /* leave room for the caption and the close button */
  max-height: calc(100vh - 9rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}
.lightbox__caption {
  color: #F3EFE8;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-align: center;
  max-width: 60ch;
}
.lightbox__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: var(--tap-min);
  height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  transition: background var(--dur-fast) var(--ease-out);
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox__close svg { width: 22px; height: 22px; }

/* ---------- Legal placeholder pages ---------- */
.legal-content h2 { margin-top: var(--space-lg); font-size: var(--fs-lg); color: var(--color-ink); }
.legal-content p, .legal-content li { color: var(--color-ink-soft); }
.legal-content ul { padding-left: 1.2rem; list-style: disc; }

/* ---------- Hero Rating Badge ---------- */
.hero__rating {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-sm);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
}
.hero__stars {
  color: #FFB703;
  font-size: 1.1rem;
  letter-spacing: 2px;
  filter: drop-shadow(0 0 8px rgba(255, 183, 3, 0.6));
}
.hero__score {
  font-family: var(--font-mono);
  font-weight: 800;
  color: #FFFFFF;
  font-size: var(--fs-sm);
}
.hero__reviews {
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
  font-weight: 500;
}

/* ---------- Delivery Area Checker ---------- */
.delivery-checker {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft);
}
.delivery-checker__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--color-gold);
  margin-bottom: 0.5rem;
}
.delivery-checker__form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.delivery-checker__input {
  flex: 1;
  min-width: 220px;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.4);
  color: #FFFFFF;
  font-size: var(--fs-sm);
  font-family: var(--font-body);
}
.delivery-checker__input::placeholder { color: var(--color-ink-soft); }
.delivery-checker__result {
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
  padding: 0;
  transition: all var(--dur-fast) var(--ease-out);
}
.delivery-checker__result.is-success {
  padding: 0.75rem 1rem;
  background: rgba(42, 157, 143, 0.18);
  border: 1px solid rgba(42, 157, 143, 0.4);
  color: #4ECCD3;
}
.delivery-checker__result.is-info {
  padding: 0.75rem 1rem;
  background: rgba(244, 162, 97, 0.15);
  border: 1px solid rgba(244, 162, 97, 0.3);
  color: var(--color-gold);
}

/* ---------- Floating Back to Top Button ---------- */
.back-to-top {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 440;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(20, 18, 25, 0.85);
  border: 1px solid var(--color-line-gold);
  color: var(--color-gold);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  transition: all var(--dur-med) var(--ease-out);
  cursor: pointer;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.back-to-top:hover {
  background: var(--color-red);
  color: #FFFFFF;
  border-color: var(--color-red);
  box-shadow: 0 10px 30px rgba(229, 56, 59, 0.6);
  transform: translateY(-3px) scale(1.05);
}
.back-to-top svg { width: 22px; height: 22px; }

@media (max-width: 860px) {
  .back-to-top {
    bottom: calc(var(--space-md) + 64px);
    right: var(--space-sm);
  }
}

/* ---------- Notepad FAB Pulse Animation ---------- */
@keyframes fabPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); box-shadow: 0 0 35px rgba(229, 56, 59, 0.9); }
  100% { transform: scale(1); }
}
.notepad-fab.is-pulsing {
  animation: fabPulse 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}