/* ============================================================
   RESTAURANT SHAYAN – Design-System „Shab" (Nacht)
   Warmes, tiefes Espresso-Schwarz · Safran-Gold · Granatapfel
   Helle „Tageslicht"-Sektionen für Speisekarte & Formulare
   ============================================================ */

/* Schriften werden in src/base.njk per <link> geladen (Bunny Fonts, EU, mit display=swap).
   Kein @import: der würde eine zusätzliche Anfrage-Kette erzeugen und das Rendern verzögern. */

/* ---------- Design-Tokens ---------- */
:root {
  /* Dunkle Basis – warm, nicht blau */
  --night: #16110c;            /* Seiten-Hintergrund: Espresso-Schwarz */
  --night-deep: #0f0b07;       /* Footer, Topbar */
  --night-soft: #1f1812;       /* Karten & Flächen auf dunklem Grund */
  --night-edge: #33291f;       /* Ränder auf dunklem Grund */

  /* Helle Sektionen */
  --paper: #faf5ea;
  --paper-2: #f3ebdb;
  --ink: #241c12;
  --ink-soft: #6d6152;
  --line: #e4d9c4;

  /* Akzente */
  --saffron: #d8b268;
  --saffron-bright: #e8c98e;
  --saffron-deep: #a98a44;   /* nur dekorativ: Rahmen, Verläufe, Trennlinien */
  --saffron-ink: #836627;    /* Text & Icons auf hellem Grund – 4,6:1 auf --paper */
  --pomegranate: #b34a5e;
  --pomegranate-deep: #8e3346;

  /* Text auf dunklem Grund */
  --cream: #f2e8d5;
  --cream-soft: rgba(242, 232, 213, 0.72);
  --cream-faint: rgba(242, 232, 213, 0.6);

  --font-display: "Marcellus", "Georgia", serif;
  --font-body: "Alegreya Sans", "Segoe UI", sans-serif;

  --fs-hero: clamp(1.9rem, 5vw, 3.4rem);
  --fs-h2: clamp(1.7rem, 3.4vw, 2.5rem);
  --fs-h3: 1.25rem;

  --header-h: 4.9rem;

  --radius: 14px;
  --container: 1160px;
  --shadow-dark: 0 14px 40px rgba(0, 0, 0, 0.45);
  --shadow-light: 0 6px 22px rgba(36, 28, 18, 0.1);
}

/* ---------- Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1.5rem); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--cream);
  overflow-wrap: break-word;
  background:
    radial-gradient(1100px 500px at 85% -100px, rgba(216, 178, 104, 0.07), transparent 60%),
    var(--night);
}
img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }
a { color: var(--saffron); text-underline-offset: 3px; }
a:hover { color: var(--saffron-bright); }

h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 400; line-height: 1.15;
  margin: 0 0 0.5em; color: var(--cream); letter-spacing: 0.01em;
  /* Keine Silbentrennung in Überschriften – ein Wort soll nie mit Bindestrich
     umbrechen. Lange Wörter brechen notfalls ohne Trennstrich um, damit auf
     schmalen Bildschirmen trotzdem nichts über den Rand läuft. */
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: break-word;
  /* Verteilt mehrzeilige Überschriften gleichmäßig statt eine einzelne
     Restzeile stehen zu lassen. */
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--saffron); color: var(--night); padding: 0.6rem 1rem; z-index: 100; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

:where(a, button, input, select, textarea, summary, details):focus-visible {
  outline: 3px solid var(--saffron);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
  margin: 0 0 0.8rem; color: var(--saffron);
}
.eyebrow .latin { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--saffron); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  padding: 0.8rem 1.7rem; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform 0.15s ease, background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(160deg, var(--saffron-bright), var(--saffron-deep)); color: #241500; box-shadow: 0 6px 18px rgba(216, 178, 104, 0.28); }
.btn-primary:hover { box-shadow: 0 8px 24px rgba(216, 178, 104, 0.42); color: #241500; }
.btn-outline { border-color: rgba(242, 232, 213, 0.4); color: var(--cream); background: transparent; }
.btn-outline:hover { border-color: var(--saffron); color: var(--saffron); }
.section-light .btn-outline { border-color: rgba(36, 28, 18, 0.35); color: var(--ink); }
.section-light .btn-outline:hover { border-color: var(--saffron-ink); color: var(--saffron-ink); }

/* ---------- Topbar & Header ---------- */
.topbar {
  background: var(--night-deep); color: var(--cream-soft);
  text-align: center; font-size: 0.85rem; padding: 0.45rem 1rem;
  border-bottom: 1px solid var(--night-edge);
}
.topbar a { color: var(--saffron); text-decoration: none; font-weight: 700; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(22, 17, 12, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--night-edge);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.7rem; }
.brand { display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; text-decoration: none; line-height: 1.1; }
/* Untertitel erst ab Tablet – auf schmalen Handys wird es neben dem Menü-Knopf zu eng */
.brand .untertitel { display: none; }
@media (min-width: 620px) {
  .brand .untertitel {
    display: block;
    font-family: var(--font-body);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--saffron);
  }
}
.brand .name { font-family: var(--font-display); font-size: 1.7rem; color: var(--cream); letter-spacing: 0.04em; }

.nav-toggle { display: none; background: none; border: 0; color: var(--cream); padding: 0.55rem; margin: -0.15rem; cursor: pointer; border-radius: 8px; }
.main-nav { display: flex; align-items: center; gap: 1.5rem; }
.main-nav a:not(.btn) {
  color: var(--cream-soft); text-decoration: none; font-weight: 500; font-size: 0.98rem;
  padding-block: 0.3rem; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.main-nav a:not(.btn):hover, .main-nav a[aria-current="page"]:not(.btn) { color: var(--saffron); border-bottom-color: var(--saffron); }
.main-nav .btn { padding: 0.55rem 1.3rem; font-size: 0.95rem; }

@media (max-width: 860px) {
  :root { --header-h: 3.5rem; }
  .nav-toggle { display: block; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--night-deep); border-bottom: 1px solid var(--night-edge);
    padding: 0.5rem 1.25rem 1rem;
  }
  .main-nav.open { display: flex; }
  .main-nav a:not(.btn) { padding: 0.85rem 0.2rem; border-bottom: 1px solid var(--night-edge); }
  .main-nav .btn { margin-top: 0.8rem; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.6rem, 6vw, 5rem); overflow: hidden; }
.hero .pattern {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(216, 178, 104, 0.1), transparent 42%),
    radial-gradient(circle at 90% 85%, rgba(179, 74, 94, 0.1), transparent 45%);
}
.hero .pattern::after {
  content: ""; position: absolute; inset: 0; opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23d8b268' stroke-width='0.8'%3E%3Cpath d='M36 6l7 23 23 7-23 7-7 23-7-23-23-7 23-7z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 75%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 75%);
}
.hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } }
.hero h1 em { font-style: normal; color: var(--saffron); }
.hero .lede { font-size: 1.2rem; color: var(--cream-soft); max-width: 34rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 1.6rem 0 1.4rem; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; font-size: 0.95rem; color: var(--saffron); font-weight: 500; padding: 0; margin: 0; list-style: none; }
.hero-facts a { color: inherit; text-decoration: none; }
.hero-facts a:hover { color: var(--saffron-bright); }
.hero-media { position: relative; }
.hero-media img { box-shadow: var(--shadow-dark); border: 1px solid var(--night-edge); }
.hero-media .badge {
  position: absolute; bottom: 1rem; left: 1rem;
  background: rgba(15, 11, 7, 0.85); color: var(--saffron);
  border: 1px solid rgba(216, 178, 104, 0.5);
  padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700;
  backdrop-filter: blur(6px);
}

/* ---------- Sektionen ---------- */
.section { padding: clamp(3rem, 7vw, 5rem) 0; }
.section-head { max-width: 46rem; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head p { color: var(--cream-soft); }

/* Helle „Tageslicht"-Sektionen */
.section-light { background: var(--paper); color: var(--ink); }
.section-light h1, .section-light h2, .section-light h3, .section-light h4 { color: var(--ink); }
.section-light .section-head p { color: var(--ink-soft); }
.section-light .eyebrow .latin { color: var(--saffron-ink); }
.section-light a { color: var(--saffron-ink); }
.section-light a:hover { color: var(--pomegranate); }

/* Weicher Übergang dunkel → hell */
.section-light { border-top: 4px solid var(--saffron-deep); border-bottom: 4px solid var(--saffron-deep); }

/* ---------- Dish-Cards (auf dunklem Grund) ---------- */
.dish-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 1.6rem; }
.dish-card {
  background: var(--night-soft); border: 1px solid var(--night-edge); border-radius: var(--radius);
  overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.dish-card:hover { transform: translateY(-4px); border-color: rgba(216, 178, 104, 0.55); box-shadow: var(--shadow-dark); }
.dish-card img { border-radius: 0; aspect-ratio: 4 / 3; object-fit: cover; }
.dish-card .body { padding: 1.2rem 1.3rem 1.4rem; }
.dish-card h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; }
.dish-card .price { font-family: var(--font-body); font-weight: 700; color: var(--saffron); font-size: 1.02rem; white-space: nowrap; }
.dish-card p { margin: 0.3rem 0 0; color: var(--cream-soft); font-size: 0.97rem; }
.dish-card .tag {
  display: inline-block; margin-top: 0.7rem; font-size: 0.78rem; font-weight: 700;
  color: var(--saffron); border: 1px solid rgba(216, 178, 104, 0.45);
  border-radius: 999px; padding: 0.15rem 0.65rem;
}

/* ---------- Split-Layout (Bild + Text) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split img { box-shadow: var(--shadow-dark); border: 1px solid var(--night-edge); }
.split .content p { color: var(--cream-soft); }
.section-light .split .content p { color: var(--ink-soft); }
.section-light .split img { box-shadow: var(--shadow-light); border-color: var(--line); }

/* ---------- Feature-Grid & Info-Cards ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 1.4rem; }
/* Variante für sechs Karten: drei Spalten ergeben zwei volle Zeilen.
   Ohne diese Regel entstünden vier Spalten und eine halbleere zweite Zeile. */
@media (min-width: 900px) {
  .feature-grid.drei { grid-template-columns: repeat(3, 1fr); }
}
.feature {
  background: var(--night-soft); border: 1px solid var(--night-edge); border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
}
.feature .icon { width: 26px; height: 26px; color: var(--saffron); margin-bottom: 0.7rem; }
.feature h3 { font-size: 1.12rem; }
.feature p { margin: 0.2rem 0 0; color: var(--cream-soft); font-size: 0.96rem; }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1.4rem; }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-light); color: var(--ink); }
.info-card h3 { font-size: 1.15rem; display: flex; gap: 0.5rem; align-items: center; color: var(--ink); }
.info-card .icon { width: 22px; height: 22px; color: var(--saffron-ink); flex: none; }
.info-card p { margin: 0.2rem 0 0; color: var(--ink-soft); }
.info-card a { font-weight: 700; }

/* ---------- Zitate ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 1.4rem; }
blockquote.quote {
  margin: 0; background: var(--night-soft); border: 1px solid var(--night-edge);
  border-top: 3px solid var(--saffron); border-radius: var(--radius); padding: 1.5rem 1.4rem;
  color: var(--cream-soft); font-size: 1rem;
}
blockquote.quote footer { margin-top: 0.9rem; color: var(--saffron); font-weight: 700; font-size: 0.88rem; }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--night-edge); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 0.2rem; font-family: var(--font-display); font-size: 1.15rem; color: var(--cream);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--saffron); font-size: 1.5rem; line-height: 1; transition: transform 0.2s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.2rem; color: var(--cream-soft); padding-inline: 0.2rem; }
.section-light .faq details { border-color: var(--line); }
.section-light .faq summary { color: var(--ink); }
.section-light .faq summary::after { color: var(--saffron-ink); }
.section-light .faq details p { color: var(--ink-soft); }

/* ---------- Formulare (in hellen Sektionen) ---------- */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 4vw, 2.4rem); box-shadow: var(--shadow-light); color: var(--ink);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 700; font-size: 0.95rem; margin-bottom: 0.35rem; color: var(--ink); }
.field label .req { color: var(--pomegranate); }
.field input, .field select, .field textarea {
  width: 100%; max-width: 100%; font: inherit; font-size: max(1rem, 16px);
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: 0.75rem 0.85rem;
  min-height: 2.9rem;
}
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--saffron-deep); outline: none; box-shadow: 0 0 0 3px rgba(216, 178, 104, 0.3); }
.field .hint { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.25rem; }

/* Datums- und Zeitfelder haben in Safari eine feste Eigenbreite, die sich
   nicht schrumpfen lässt. In einem Raster (min-width: auto) sprengen sie
   dadurch die Spalte. Beides hier abstellen. */
.form-grid > * { min-width: 0; }
.field { min-width: 0; }
.field input[type="date"],
.field input[type="time"] {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  max-width: 100%;
}
.checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; }
.checks label { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; padding: 0.3rem 0; min-height: 2.5rem; }
.checks input { width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--saffron-deep); }
.form-note { font-size: 0.85rem; color: var(--ink-soft); }
.form-status { display: none; border-radius: 10px; padding: 1rem 1.2rem; font-weight: 500; margin-top: 1rem; }
.form-status.ok { display: block; background: rgba(96, 158, 96, 0.14); border: 1px solid #609e60; color: #2c5e2c; }
.form-status.err { display: block; background: rgba(179, 74, 94, 0.1); border: 1px solid var(--pomegranate); color: var(--pomegranate-deep); }
.honey { position: absolute !important; left: -9999px !important; }

/* ---------- Speisekarte ---------- */
.menu-nav {
  position: sticky; top: var(--header-h); z-index: 40;
  background: var(--paper); border-bottom: 1px solid var(--line);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.menu-nav ul { display: flex; gap: 0.2rem; list-style: none; margin: 0; padding: 0.4rem 1.25rem; max-width: var(--container); margin-inline: auto; }
.menu-nav a {
  display: block; white-space: nowrap; text-decoration: none; font-weight: 700; font-size: 0.92rem;
  color: var(--ink-soft); padding: 0.65rem 0.9rem; border-radius: 999px;
}
.menu-nav a:hover { color: var(--saffron-ink); background: var(--paper-2); }

.menu-section { padding-top: 1.4rem; scroll-margin-top: calc(var(--header-h) + 4.4rem); }
.menu-section h2 {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-bottom: 2px solid var(--saffron-deep); padding-bottom: 0.5rem; margin-bottom: 1.2rem;
}
.menu-list { list-style: none; margin: 0 0 2.2rem; padding: 0; }
.menu-item { padding: 0.75rem 0; }
.menu-item .row { display: flex; align-items: baseline; gap: 0.6rem; }
.menu-item .name { font-family: var(--font-display); font-size: 1.12rem; color: var(--ink); }
.menu-item .dots { flex: 1; border-bottom: 2px dotted var(--line); transform: translateY(-4px); }
.menu-item .price { font-weight: 700; color: var(--saffron-ink); white-space: nowrap; }
.menu-item .desc { margin: 0.25rem 0 0; color: var(--ink-soft); font-size: 0.95rem; max-width: 44rem; }
.badges { margin-top: 0.35rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.badges span { font-size: 0.73rem; font-weight: 700; border-radius: 999px; padding: 0.12rem 0.6rem; letter-spacing: 0.02em; }
.badge-v { background: rgba(96, 158, 96, 0.15); color: #2c5e2c; border: 1px solid rgba(96, 158, 96, 0.5); }
.badge-vg { background: rgba(96, 158, 96, 0.25); color: #1e4d1e; border: 1px solid rgba(96, 158, 96, 0.7); }
.badge-scharf { background: rgba(179, 74, 94, 0.12); color: var(--pomegranate-deep); border: 1px solid rgba(179, 74, 94, 0.5); }
.menu-hint { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem; font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 2rem; }

/* ---------- Pakete (Catering) ---------- */
.paket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1.6rem; }
.paket {
  background: var(--night-soft); border: 1px solid var(--night-edge); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.paket:hover { transform: translateY(-4px); border-color: rgba(216, 178, 104, 0.55); }
.paket img { border-radius: 0; aspect-ratio: 16 / 10; object-fit: cover; }
.paket .body { padding: 1.3rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.paket p { margin: 0; color: var(--cream-soft); font-size: 0.97rem; }
.paket ul { margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--cream-soft); font-size: 0.94rem; }
.paket ul li { margin-bottom: 0.25rem; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1.4rem; counter-reset: step; }
.step { position: relative; padding: 1.4rem 1.3rem 1.3rem; background: var(--night-soft); border: 1px solid var(--night-edge); border-radius: var(--radius); }
.step::before {
  counter-increment: step; content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: linear-gradient(160deg, var(--saffron-bright), var(--saffron-deep));
  color: #241500; font-weight: 700; margin-bottom: 0.7rem;
}
.step h3 { font-size: 1.1rem; }
.step p { margin: 0; color: var(--cream-soft); font-size: 0.95rem; }

/* ---------- CTA-Band ---------- */
.cta-band {
  background:
    radial-gradient(700px 300px at 15% 0%, rgba(216, 178, 104, 0.14), transparent 60%),
    linear-gradient(160deg, #241a10, var(--night-deep));
  border-block: 1px solid var(--night-edge);
  text-align: center; padding: clamp(2.6rem, 6vw, 4rem) 0;
}
.cta-band p { color: var(--cream-soft); max-width: 36rem; margin-inline: auto; }

/* ---------- Footer ---------- */
.site-footer { background: var(--night-deep); border-top: 1px solid var(--night-edge); padding: 3rem 0; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h2 { font-size: 1.05rem; color: var(--saffron); margin-bottom: 0.7rem; }
.footer-brand h2 { font-size: 1.5rem; color: var(--cream); }
.site-footer p, .site-footer li { color: var(--cream-faint); font-size: 0.95rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer a { color: var(--cream-soft); text-decoration: none; }
.site-footer a:hover { color: var(--saffron); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--night-edge); padding-top: 1.4rem;
  color: var(--cream-faint); font-size: 0.85rem;
}

/* ---------- Mobile Quick-Action-Bar ---------- */
.action-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  display: none; grid-template-columns: 1fr 1.2fr 1fr;
  background: rgba(15, 11, 7, 0.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--night-edge);
  padding: 0.5rem 0.6rem calc(0.5rem + env(safe-area-inset-bottom));
  gap: 0.5rem;
}
@media (max-width: 760px) {
  .action-bar { display: grid; }
  .site-footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}
.action-bar a {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  text-decoration: none; font-size: 0.75rem; font-weight: 700; color: var(--cream-soft);
  padding: 0.35rem 0.2rem; border-radius: 10px;
}
.action-bar a .icon { width: 20px; height: 20px; }
.action-bar a.primary { background: linear-gradient(160deg, var(--saffron-bright), var(--saffron-deep)); color: #241500; }

/* ---------- Scroll-Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .dish-card, .paket, .btn { transition: none; }
}

/* ---------- Print ---------- */
@media print {
  body { background: #fff; color: #000; }
  .topbar, .site-header, .action-bar, .menu-nav, .hero .pattern, .site-footer, .cta-band { display: none !important; }
  .section-light { border: 0; }
  .menu-item .price, .menu-section h2 { color: #000; }
  a { color: #000; text-decoration: none; }
}

/* ---------- Ergänzungen ---------- */
.quote .stars { color: var(--saffron); letter-spacing: 3px; margin-bottom: 0.5rem; }
.btn-ghost { color: var(--saffron); background: transparent; }
.btn-ghost:hover { color: var(--saffron-bright); }

.hero-hinweis { font-size: 0.95rem; color: var(--cream-soft); margin: 0.9rem 0 0; }
.hero-hinweis a { color: var(--saffron); }

.kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--saffron); }
.breadcrumb { font-size: 0.85rem; color: var(--cream-faint); margin-bottom: 0.9rem; }
.breadcrumb a { color: var(--cream-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--saffron); }

/* Features in hellen Sektionen */
.section-light .feature { background: #fff; border-color: var(--line); box-shadow: var(--shadow-light); }
.section-light .feature h3 { color: var(--ink); }
.section-light .feature p { color: var(--ink-soft); }
.section-light .feature .icon { color: var(--saffron-ink); }

/* Catering: ausklappbare Beispiel-Menüs & Enthalten-Box */
.paket-included {
  background: var(--night-soft); border: 1px solid rgba(216, 178, 104, 0.4);
  border-radius: var(--radius); padding: 1.1rem 1.4rem;
  max-width: 50rem; margin: 0 auto 2.2rem; text-align: center;
  color: var(--cream-soft); font-size: 0.97rem;
}
.paket-menu { margin: 0.5rem 0 1rem; border-top: 1px solid var(--night-edge); padding-top: 0.6rem; }
.paket-menu summary {
  cursor: pointer; list-style: none; font-weight: 700; font-size: 0.92rem;
  color: var(--saffron); display: flex; align-items: center; gap: 0.4rem;
}
.paket-menu summary::-webkit-details-marker { display: none; }
.paket-menu summary::before { content: "+"; font-size: 1.1rem; line-height: 1; }
.paket-menu[open] summary::before { content: "–"; }
.paket-menu p { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--cream-soft); }
.paket-menu strong { color: var(--cream); }


/* ============================================================
   MOBILE-FEINSCHLIFF – Abstände, Rahmen, Touch-Ziele
   ============================================================ */

/* Rechtstexte (Impressum, Datenschutz) */
.legal h1 { font-size: clamp(1.75rem, 5vw, 2.6rem); }
.legal h2 { font-size: 1.2rem; margin: 2.2rem 0 0.5rem; }
.legal h2:first-of-type { margin-top: 1.6rem; }
.legal p { margin: 0 0 0.9rem; color: var(--ink-soft); }
.legal a { word-break: break-word; }
.legal-stand { margin-top: 2.4rem; font-size: 0.85rem; opacity: 0.75; }

/* Topbar: auf schmalen Screens nur das Wesentliche */
.topbar { line-height: 1.5; }
.topbar .sep { opacity: 0.5; margin-inline: 0.25rem; }

/* Menü-Navigation: Scrollbalken ausblenden, sauber abschließen */
.menu-nav { scrollbar-width: none; }
.menu-nav::-webkit-scrollbar { display: none; }
.menu-nav ul { padding-inline: 1.25rem; }

/* Karten-Überschriften mit Preis dürfen umbrechen */
.dish-card h3 { flex-wrap: wrap; }

/* Hero-Bild auf Mobil nicht zu hoch */
@media (max-width: 900px) {
  .hero-media img { aspect-ratio: 16 / 10; object-fit: cover; }
}

@media (max-width: 700px) {
  /* Kopfbereiche der Unterseiten kompakter, damit der eigentliche Inhalt
     schon im ersten Bildschirm anfängt statt erst nach dem Scrollen. */
  .hero:not(.hero-bild) { padding-top: 1.6rem; padding-bottom: 1.4rem; }
  .hero:not(.hero-bild) .lede { font-size: 1.02rem; }
}

@media (max-width: 640px) {
  .container { padding-inline: 1.1rem; }

  /* Topbar: Adresse ausblenden, Öffnungszeiten + Telefon bleiben */
  .topbar .topbar-addr, .topbar .sep-addr { display: none; }
  .topbar { font-size: 0.8rem; }

  /* Buttons in CTA-Gruppen über die volle Breite – bessere Trefferfläche */
  .hero-ctas { gap: 0.7rem; }
  .hero-ctas .btn { flex: 1 1 100%; }

  /* Sektions-Abstände etwas kompakter */
  .section { padding: 2.6rem 0; }
  .section-head { margin-bottom: 1.6rem; }

  /* Rahmen der hellen Sektionen dünner – wirkt auf kleinen Screens ruhiger */
  .section-light { border-top-width: 3px; border-bottom-width: 3px; }

  /* Karten-Innenabstände */
  .dish-card .body { padding: 1.1rem 1.1rem 1.25rem; }
  .paket .body { padding: 1.1rem 1.1rem 1.35rem; }
  .feature { padding: 1.25rem 1.15rem; }
  .info-card { padding: 1.2rem 1.1rem; }
  blockquote.quote { padding: 1.25rem 1.15rem; }
  .step { padding: 1.2rem 1.1rem; }
  .menu-hint, .paket-included { padding: 1rem 1.1rem; }

  /* Grid-Abstände */
  .dish-grid, .paket-grid { gap: 1.1rem; }
  .feature-grid, .info-grid, .quote-grid, .steps { gap: 1rem; }

  /* Speisekarte: Zeilen luftiger, Preis bleibt in der Zeile */
  .menu-item { padding: 0.65rem 0; }
  .menu-item .name { font-size: 1.05rem; }
  .menu-section h2 { font-size: 1.5rem; }

  /* FAQ: größere Tap-Fläche */
  .faq summary { padding: 1rem 0.1rem; font-size: 1.05rem; }

  /* Footer */
  .site-footer { padding-top: 2.4rem; }
  .footer-bottom { flex-direction: column; gap: 0.4rem; }
}

@media (max-width: 380px) {
  .brand .name { font-size: 1.5rem; }
  .btn { padding: 0.75rem 1.2rem; font-size: 0.95rem; }
  .action-bar a { font-size: 0.7rem; }
}

/* Nie über den Bildschirmrand hinaus */
img, svg, video, table, pre { max-width: 100%; }


/* ============================================================
   HERO MIT HINTERGRUNDBILD (Startseite)

   Das Foto ist auf 2,11:1 zugeschnitten – oben die tote Wandfläche über dem
   Schriftzug, unten der Schatten unter den Tischen sind entfernt. Dadurch
   passt bei 1366 bis 1536 px das ganze Motiv in den Hero, bei Full HD noch
   gut vier Fünftel. Die Höhe folgt der Breite, damit das Verhältnis nah am
   Bild bleibt.

   Abgedunkelt wird in zwei Lagen: eine gleichmäßige Grundabdunkelung, damit
   der Text überall lesbar bleibt und das Motiv nur als Stimmung wirkt, und
   ein Verlauf nach unten bis auf den vollen Seitenhintergrund – sonst bricht
   die Kante zum nächsten Abschnitt sichtbar ab.
   ============================================================ */
.hero-bild {
  position: relative;
  display: grid;
  align-items: center;
  background: var(--night);
  min-height: clamp(24rem, 50vw, 46rem);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  overflow: hidden;
}

.hero-hintergrund { position: absolute; inset: 0; z-index: 0; }
.hero-hintergrund img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  border-radius: 0;
}

.hero-hintergrund::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(22, 17, 12, 0.30) 0%, rgba(22, 17, 12, 0) 16%, rgba(22, 17, 12, 0) 68%, rgba(22, 17, 12, 0.62) 89%, var(--night) 100%),
    rgba(22, 17, 12, 0.88);
}

.hero-inhalt { position: relative; z-index: 1; max-width: 40rem; }
.hero-bild h1 { margin-bottom: 0.6rem; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7); }
.hero-bild .lede { color: var(--cream); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7); max-width: 32rem; }
.hero-bild .eyebrow .latin { color: var(--saffron); }

/* Schmale Bildschirme: Das Bild wird zum Band unter der Kopfzeile, der Text
   steht darunter. Im Hochformat wäre nur ein Drittel der Bildbreite sichtbar
   und der Schriftzug immer angeschnitten. */
@media (max-width: 700px) {
  .hero-bild {
    display: block;
    min-height: 0;
    padding: 0 0 clamp(2rem, 7vw, 3rem);
  }
  .hero-hintergrund { position: relative; aspect-ratio: 1306 / 624; }
  .hero-hintergrund::after {
    background:
      linear-gradient(180deg, rgba(22, 17, 12, 0.28) 0%, rgba(22, 17, 12, 0) 40%, rgba(22, 17, 12, 0.70) 88%, var(--night) 100%),
      rgba(22, 17, 12, 0.34);
  }
  .hero-inhalt { max-width: none; padding-top: clamp(1.4rem, 5vw, 2rem); }
  .hero-bild h1, .hero-bild .lede { text-shadow: none; }
}