/* ==========================================================================
   Mochi & Matcha — das eine CSS-Artefakt des Designs "mochi-und-matcha"
   (TASK-298, Gate-Entscheid 1: Tokens als Daten + ein Artefakt pro Site).

   Herkunft: Design-Lauf 1, signiert 2026-08-16. Referenz-Artefakt liegt in
   docs/design-exports/matcha-boba/ (JSX + CSS + Prototyp + Handoff).

   Portiert, nicht kopiert: das Export-CSS gestaltet den mm-*-Klassenraum
   seines eigenen JSX. Der Renderer gibt den site-*-Kontrakt aus
   (packages/site-ui) — die Schnittmenge beider Räume ist leer. Dieses
   Artefakt trägt die Gestaltung des signierten Laufs auf den DOM, den
   ComposeSite tatsächlich rendert. Was ohne zusätzliches Markup nicht
   erreichbar ist, steht am Dateiende unter "Bekannte Struktur-Lücken" —
   sichtbar offen statt still weggelassen.

   Kontrakt:
   - Die Daten-Farb-Tokens setzt der Renderer als Inline-Style-Block nach
     diesem <link> — dieses Artefakt konsumiert sie nur. Je Marken-Rolle
     (primaer, sekundaer, akzent) sind es sechs, weil dieselbe Farbe als
     Fläche und als Schrift zwei verschiedene Zusagen sind (P-346 Regel 3):
       --farbe-X            die rohe Marken-Farbe, nur als Fläche
       --farbe-auf-X        die Schrift, die auf dieser Fläche AA hält
       --farbe-gegen-X      das Extrem gegenüber der Auf-Farbe; eine Fläche
                            darf dorthin gemischt werden, ohne ihrer eigenen
                            Schrift näher zu kommen
       --farbe-tinte-X      die Marken-Farbe als Schrift, geführt gegen den
                            hellen Tinten-Grund des Designs
       --farbe-dunst-X      die blasse Fläche aus der Marken-Farbe
       --farbe-auf-dunst-X  die marken-nahe Schrift, die darauf AA hält
     Welchen Grund das Design für seine Tinte zusagt, steht in
     app/(intern)/templates/registry.ts unter `tinte`. CSS kann mischen,
     aber nicht messen — jede Kontrast-Zusage entsteht deshalb dort, wo
     gerechnet wird, und nicht hier. Grundiert eine Regel eine Fläche,
     setzt sie ihre Tinte als eigenes Property, das die Kinder erben
     (P-1202). Der Name endet auf -auf-flaeche und traegt davor das
     Praefix des Designs; jedes Artefakt fuehrt genau einen solchen
     Namen, sonst erben Kinder aus zwei Ketten.
   - Die Schrift-Tokens (--schrift-marke, --schrift-text) definiert das
     Artefakt selbst (ARTIFACT_FONT_TOKENS).
   - Die Flächen-Werte unten müssen dem surfaces-Eintrag des Designs in
     app/templates/registry.ts entsprechen.

   Mobile-first wie im Export: Basis = 390er Ansicht, ab 760px und 1080px
   wird aufgebaut.
   ========================================================================== */

/* --- 1 · Schrift, selbst gehostet (Regelwerk §6) ------------------------- */

@font-face {
  font-family: 'Archivo';
  src: url('./fonts/Archivo-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* --- 2 · Tokens ---------------------------------------------------------- */

:root {
  /* Kontrakt-Tokens des Style-Layers */
  --schrift-marke: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-text: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /*
   * Neutralbasis "Reinweiß" — signierte Variante des Laufs. Das ist eine
   * Style-Layer-Entscheidung, keine Tenant-Angabe: der Design-Lauf führt sie
   * ausdrücklich als schaltbare Basis (Kühlgrau/Salbei/Papier im Export).
   * Deshalb feste Werte, keine Ableitung aus den Daten-Tokens.
   */
  --mm-flaeche: #ffffff;
  --mm-band: #f4f4f4;
  --mm-band-hell: #fafafa;
  --mm-linie: #e8e8e8;
  --mm-linie-stark: #d9d9d9;
  --mm-linie-kraeftig: #c4c4c4;

  /*
   * Primärfamilie "Matcha Stone" — aus dem Daten-Token abgeleitet, damit die
   * Tenant-Farbe wirklich durchgreift. Die Mischungen sind auf die signierte
   * Primärfarbe #5F7A4F kalibriert und treffen deren Export-Werte auf 6/255
   * (im Browser nachgemessen, 2026-08-16). Ausgeliefert wird seit dem
   * 19.08.2026 das um einen Hauch abgedunkelte #5A744A, weil dieselbe Farbe
   * auf den Nebenrouten als Schrift steht — die Mischungen verschieben sich
   * damit um bis zu weitere 5/255 vom Export weg. Begründung am Ort der
   * Farbe (app/(intern)/templates/registry.ts).
   */
  --mm-gruen: var(--farbe-primaer);
  /*
   * Tiefere FLÄCHE (Zeiger-Zustand): mischt Richtung --farbe-gegen-primaer,
   * also von der Auf-Farbe weg — dabei kann der Kontrast zur Schrift nur
   * steigen. Ein Mischen gegen festes Schwarz schöbe die Fläche bei einer
   * dunklen Marken-Farbe auf ihre eigene weiße Schrift zu.
   */
  --mm-gruen-dunkel: color-mix(in srgb, var(--farbe-primaer) 74%, var(--farbe-gegen-primaer));
  /*
   * Die Marken-Farbe als SCHRIFT auf --mm-band. Das ist nicht dieselbe Farbe
   * wie oben und darf es nicht sein: eine sehr helle Marken-Farbe grundiert
   * tadellos und ist als Schrift unsichtbar. Der Kontrakt führt die Tinte
   * gegen die dunkelste Textfläche des Designs.
   */
  --mm-gruen-tinte: var(--farbe-tinte-primaer);
  --mm-gruen-tinte-tief: color-mix(in srgb, var(--farbe-tinte-primaer) 78%, var(--mm-tinte));
  /* Blasse Fläche + ihr markennaher Text — beide vom Kontrakt, beide gemessen. */
  --mm-gruen-hell: var(--farbe-dunst-primaer);
  --mm-gruen-kontur: color-mix(in srgb, var(--farbe-primaer) 32%, #ffffff);
  --mm-gruen-scheibe: color-mix(in srgb, var(--farbe-primaer) 82%, #ffffff);
  --mm-gruen-glanz: color-mix(in srgb, var(--farbe-primaer) 70%, #ffffff);

  /*
   * Sekundärfamilie "Mochi Rosé" — analog aus dem Sekundär-Token. Flächen und
   * Linien treffen den Export auf 5/255.
   *
   * Die Kleinschrift auf Rosé-Flächen kommt seit dem 19.08.2026 als
   * --farbe-auf-dunst-sekundaer aus dem Kontrakt statt aus einer eigenen
   * Mischung. Der signierte Ton war ohnehin nicht mischbar (gesättigter als
   * sein Grundton, und Beimischen erhöht die Sättigung nie) — entscheidend ist
   * aber, dass eine selbst gemischte Schrift auf einer selbst gemischten
   * Fläche für keinen der beiden Werte eine Kontrast-Zusage hatte.
   */
  --mm-rose: var(--farbe-sekundaer);
  --mm-rose-hell: var(--farbe-dunst-sekundaer);
  --mm-rose-linie: color-mix(in srgb, var(--farbe-sekundaer) 60%, #ffffff);
  --mm-rose-kontur: color-mix(in srgb, var(--farbe-sekundaer) 88%, var(--farbe-gegen-sekundaer));
  --mm-rose-tinte: var(--farbe-tinte-sekundaer);
  --mm-rose-tinte-tief: color-mix(in srgb, var(--farbe-tinte-sekundaer) 72%, var(--mm-tinte));

  /*
   * Rückmeldung nach dem Absenden. Feste Werte wie die Neutralbasis, und aus
   * demselben Grund: ein Fehler darf nicht nach der Marke aussehen, sondern
   * muss überall gleich lesen. Das Rot stammt aus dem signierten Lauf; das
   * Grün ergänzt es, weil der Lauf den Erfolgsfall als eigene Bildschirm-
   * fläche zeigt und keine Meldung dafür führt. Beide Paare sind gegen ihre
   * eigene Fläche gemessen (19.08.2026): Fehler 6,47:1, Erfolg 5,75:1.
   */
  --mm-fehler: #8c3a34;
  --mm-fehler-flaeche: #fbe9e7;
  --mm-erfolg: #2f6a43;
  --mm-erfolg-flaeche: #e9f5ee;

  /* Text und Signal — Neutralbasis, feste Werte des signierten Stands. */
  --mm-tinte: #23281f;
  --mm-text: #5c6355;
  --mm-text-leise: #5f5f5f;
  --mm-text-grau: #606060;
  --mm-nav-text: #4c5344;

  /* Fußzeile */
  --mm-fuss: #23281f;
  --mm-fuss-linie: #3a3f33;
  --mm-fuss-text: #c9c9c9;
  --mm-fuss-leise: #a29c8f;

  /* Radien */
  --mm-r-pille: 999px;
  --mm-r-gross: 26px;
  --mm-r-karte: 22px;
  --mm-r-mittel: 18px;
  --mm-r-klein: 16px;
  --mm-r-feld: 12px;
  --mm-r-chip: 10px;

  /* Abstände */
  --mm-raum-1: 6px;
  --mm-raum-2: 10px;
  --mm-raum-3: 14px;
  --mm-raum-4: 22px;
  --mm-raum-5: 34px;
  --mm-raum-6: 48px;
  --mm-raum-7: 64px;
  --mm-rand: 20px;
  --mm-bahn: 1200px;

  /* Komponentenrahmen — signierte Variante "Aus" (Style-Layer-Schalter). */
  --mm-rb: 1px;
  --mm-rf: var(--mm-linie);
  --mm-rr: transparent;

  /* Bewegung */
  --mm-zeit: 0.16s;
  --mm-kurve: ease;
}

/* --- 3 · Grundlage ------------------------------------------------------- */

.site-root,
.site-root *,
.site-root *::before,
.site-root *::after {
  box-sizing: border-box;
}

.site-root {
  font-family: var(--schrift-text);
  color: var(--mm-tinte);
  background: var(--mm-flaeche);
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/*
 * Grundton eines Links, bewusst ohne Spezifität (:where zählt null): jede
 * Komponente, die ihre Farbe selbst führt — Marke, Navigationspunkt,
 * Fußzeilen-Link, Knopf — übersteuert ihn allein dadurch, dass sie ihre
 * Klasse nennt. Als `.site-root a` geschrieben trug diese Regel 0-1-1 und
 * schlug damit still jede Ein-Klassen-Regel; das war der Port-Fehler, den
 * P-1213 misst.
 */
:where(.site-root a) {
  color: var(--mm-gruen-tinte-tief);
  text-decoration: none;
}

:where(.site-root a):hover {
  color: var(--mm-gruen-tinte);
}

.site-root :focus-visible {
  outline: 2px solid var(--mm-gruen-tinte-tief);
  outline-offset: 3px;
  border-radius: 6px;
}

.site-root img {
  max-width: 100%;
}

.site-root h1,
.site-root h2,
.site-root h3,
.site-root h4,
.site-root p,
.site-root dl,
.site-root dd,
.site-root figure {
  margin: 0;
}

.site-root ul,
.site-root ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Bahn ohne Wrapper-Markup: die Kerne setzen ihre Inhalte direkt in die
 * <section>. Der Abschnitt trägt deshalb die volle Breite (Bandfarbe), die
 * direkten Kinder tragen die Inhaltsbahn.
 */
.site-root main > section {
  padding: 52px 0 60px;
}

.site-root main > section > * {
  max-width: var(--mm-bahn);
  margin-inline: auto;
  padding-inline: var(--mm-rand);
}

/* Bandrhythmus des signierten Laufs, Abschnitt für Abschnitt gesetzt. */
.site-menu,
.site-updates,
.site-coupons,
.site-reservation,
.site-loyalty {
  background: var(--mm-band);
  border-top: 1px solid var(--mm-linie);
}

.site-hours,
.site-contact,
.site-catering,
.site-newsletter {
  background: var(--mm-flaeche);
}

.site-contact,
.site-catering,
.site-newsletter {
  border-top: 1px solid var(--mm-linie);
}

.site-countdown {
  background: var(--mm-band);
  border-top: 1px solid var(--mm-linie);
}

.site-spotlight {
  background: var(--mm-gruen);
  /*
   * Wer grundiert, liefert die Tinte mit ([[P-1202]]). Die Kinder dieser
   * Sektion tragen keinen eigenen Grund — stünde --farbe-auf-primaer direkt
   * bei ihnen, wäre die Zuordnung zum Grund nur eine Behauptung, die keine
   * Prüfung mehr nachvollziehen kann.
   */
  --mm-auf-flaeche: var(--farbe-auf-primaer);
  color: var(--mm-auf-flaeche);
  overflow: hidden;
}

/* Sektions-Überschriften — im Export „mm-titel". */
.site-menu__heading,
.site-hours__heading,
.site-updates__heading,
.site-countdown__heading,
.site-coupons__heading,
.site-contact__heading,
.site-catering__heading,
.site-reservation__heading,
.site-loyalty__heading,
.site-newsletter__heading,
.site-spotlight__heading {
  font-size: clamp(25px, 6.4vw, 40px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--mm-tinte);
  text-wrap: pretty;
}

.site-spotlight__heading {
  color: var(--mm-auf-flaeche);
  letter-spacing: -0.02em;
}

/*
 * Einleitender Absatz unter der Überschrift — im Export „mm-lauftext".
 * Die Zeilenlänge ist begrenzt, nicht die Kastenbreite: ein Formular darunter
 * darf die volle Bahn nehmen.
 */
.site-contact__intro,
.site-catering__intro,
.site-reservation__intro,
.site-loyalty__intro,
.site-newsletter__intro {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mm-text);
  max-width: 44ch;
  margin-top: var(--mm-raum-3);
  text-wrap: pretty;
}

/* --- 4 · Knöpfe und knopfartige Links ------------------------------------ */

.site-hero__cta,
.site-countdown__cta,
.site-popup__cta,
.site-coupons__copy,
.site-consent-banner__dismiss,
.site-nav__toggle,
.site-form__submit,
.site-loyalty__karte-link,
.site-menu__anreisser-link,
.site-reservation__anreisser-link,
.site-contact__anreisser-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--schrift-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  padding: 16px 26px;
  min-height: 48px;
  border-radius: var(--mm-r-pille);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition:
    background var(--mm-zeit) var(--mm-kurve),
    border-color var(--mm-zeit) var(--mm-kurve),
    transform 0.12s var(--mm-kurve);
}

/* Vollflächig (Primär-Aktion) */
.site-hero__cta,
.site-countdown__cta,
.site-popup__cta,
.site-consent-banner__dismiss,
.site-form__submit,
.site-loyalty__karte-link {
  background: var(--mm-gruen);
  border-color: var(--mm-gruen);
  color: var(--farbe-auf-primaer);
}

.site-hero__cta:hover,
.site-countdown__cta:hover,
.site-popup__cta:hover,
.site-consent-banner__dismiss:hover,
.site-form__submit:hover,
.site-loyalty__karte-link:hover {
  background: var(--mm-gruen-dunkel);
  border-color: var(--mm-gruen-dunkel);
  color: var(--farbe-auf-primaer);
}

.site-hero__cta:active,
.site-countdown__cta:active,
.site-popup__cta:active,
.site-consent-banner__dismiss:active,
.site-form__submit:active {
  transform: scale(0.97);
}

/*
 * Der Absende-Knopf während des Absendens: er bleibt stehen und behält seine
 * Farbe, nur der Zeiger und die Deckkraft sagen an, dass er gerade nichts
 * annimmt. Ein ausgegrauter Knopf verlöre die geprüfte Auf-Farbe.
 */
.site-form__submit:disabled,
.site-form__submit[aria-disabled='true'] {
  opacity: 0.62;
  cursor: not-allowed;
  transform: none;
}

/*
 * Ab dem zweiten Hero-CTA die Linien-Variante — der Export setzt genau eine
 * gefüllte Primär-Aktion, alles Weitere steht als Umriss daneben.
 */
.site-hero__cta:not(:first-child) {
  background: var(--mm-flaeche);
  color: var(--mm-tinte);
  border-color: var(--mm-linie-stark);
}

.site-hero__cta:not(:first-child):hover {
  background: var(--mm-flaeche);
  border-color: var(--mm-gruen);
  color: var(--mm-tinte);
}

/*
 * Umriss-Variante: die Anreißer verweisen auf eine eigene Seite und sind
 * dort die einzige Aktion — ohne konkurrierende Primär-Aktion daneben trägt
 * der Umriss besser als die Fläche.
 */
.site-menu__anreisser-link,
.site-reservation__anreisser-link,
.site-contact__anreisser-link {
  background: var(--mm-flaeche);
  color: var(--mm-tinte);
  border-color: var(--mm-linie-stark);
}

.site-menu__anreisser-link:hover,
.site-reservation__anreisser-link:hover,
.site-contact__anreisser-link:hover {
  background: var(--mm-flaeche);
  border-color: var(--mm-gruen);
  color: var(--mm-tinte);
}

/* Textknopf ohne Fläche — im Export „mm-knopf--text". */
.site-loyalty__neue-karte {
  align-self: flex-start;
  font-family: var(--schrift-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 14px 6px;
  min-height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--mm-gruen-tinte-tief);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-loyalty__neue-karte:hover {
  color: var(--mm-gruen-tinte);
}

/* Klein (Kopier-Knopf, Navigations-Umschalter) */
.site-coupons__copy,
.site-nav__toggle {
  font-size: 14px;
  padding: 14px 20px;
  min-height: 44px;
  background: var(--mm-flaeche);
  color: var(--mm-tinte);
  border-color: var(--mm-linie-stark);
}

.site-coupons__copy:hover,
.site-nav__toggle:hover {
  border-color: var(--mm-gruen);
}

/* --- 5 · Formular-Fundament ---------------------------------------------- */

/*
 * Alle fünf Formular-Kerne (Kontakt, Anfragen, Reservierung, Stempelkarte,
 * Newsletter) tragen denselben site-form-Block und unterscheiden sich nur in
 * ihren Feldern. Die Anatomie steht deshalb genau einmal hier; die Sektionen
 * weiter unten geben ihr nur noch Fläche und Raum.
 */

.site-form {
  display: flex;
  flex-direction: column;
  gap: var(--mm-raum-4);
  margin-top: var(--mm-raum-5);
  max-width: 620px;
}

/*
 * Auch als <fieldset> im Einsatz (die Slot-Auswahl der Reservierung), deshalb
 * die Rücksetzung — ein Fieldset bringt eigenen Rahmen und eigenen Innenraum
 * mit, die hier nichts zu suchen haben.
 */
.site-form__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  border: 0;
  padding: 0;
  min-width: 0;
}

/* Auch als <legend> im Einsatz, siehe oben. */
.site-form__label {
  padding: 0;
  font-family: var(--schrift-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mm-tinte);
}

.site-form__required {
  color: var(--mm-rose-tinte);
}

.site-form__hint {
  font-size: 13px;
  line-height: 1.4;
  color: var(--mm-text-leise);
  text-wrap: pretty;
}

.site-form__input,
.site-form__textarea {
  font-family: var(--schrift-text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--mm-tinte);
  background: var(--mm-flaeche);
  border: 1px solid var(--mm-linie-stark);
  border-radius: var(--mm-r-feld);
  padding: 14px 15px;
  min-height: 48px;
  width: 100%;
  transition: border-color var(--mm-zeit) var(--mm-kurve);
}

.site-form__textarea {
  line-height: 1.5;
  min-height: 132px;
  resize: vertical;
}

.site-form__input:focus,
.site-form__textarea:focus {
  border-color: var(--mm-gruen);
}

.site-form__input[aria-invalid='true'],
.site-form__textarea[aria-invalid='true'] {
  border-color: var(--mm-fehler);
}

.site-form__input:disabled,
.site-form__textarea:disabled {
  background: var(--mm-band);
  color: var(--mm-text-leise);
  cursor: not-allowed;
}

.site-form__input::placeholder,
.site-form__textarea::placeholder {
  color: var(--mm-text-leise);
}

.site-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-raum-3);
  align-items: center;
}

/*
 * Die Rückmeldung bringt ihre eigene Fläche mit, statt sich auf den Grund der
 * Sektion zu verlassen: dasselbe Formular steht auf Reinweiß und auf Band,
 * und eine Zusage, die nur auf einem der beiden gilt, ist keine.
 */
.site-form__feedback {
  border-radius: var(--mm-r-feld);
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-wrap: pretty;
}

.site-form__feedback--error {
  background: var(--mm-fehler-flaeche);
  --mm-auf-flaeche: var(--mm-fehler);
  color: var(--mm-auf-flaeche);
  border: 1px solid color-mix(in srgb, var(--mm-fehler) 24%, transparent);
}

.site-form__feedback--success {
  background: var(--mm-erfolg-flaeche);
  --mm-auf-flaeche: var(--mm-erfolg);
  color: var(--mm-auf-flaeche);
  border: 1px solid color-mix(in srgb, var(--mm-erfolg) 24%, transparent);
}

/* --- 6 · Shell: Ansage, Feiertag, Navigation ----------------------------- */

.site-announcement-bar {
  background: var(--mm-rose);
  --mm-auf-flaeche: var(--farbe-auf-sekundaer);
  color: var(--mm-auf-flaeche);
  padding: 13px var(--mm-rand);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mm-raum-2);
  flex-wrap: wrap;
  text-align: center;
}

.site-announcement-bar__text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--mm-auf-flaeche);
}

.site-holiday-banner {
  background: var(--mm-rose-hell);
  --mm-auf-flaeche: var(--farbe-auf-dunst-sekundaer);
  color: var(--mm-auf-flaeche);
  border-bottom: 1px solid var(--mm-rose-linie);
  padding: 12px var(--mm-rand);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mm-raum-2);
}

.site-holiday-banner__text {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--mm-auf-flaeche);
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--mm-flaeche) 90%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--mm-linie);
  max-width: var(--mm-bahn);
  margin-inline: auto;
  padding: 0 var(--mm-rand);
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--mm-raum-3);
  flex-wrap: wrap;
}

.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--mm-tinte);
}

.site-nav__brand:hover {
  color: var(--mm-tinte);
}

.site-nav__brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
}

.site-nav__toggle {
  margin-left: auto;
  order: 2;
}

/*
 * Mobil ist die Punkte-Liste zu, bis der Umschalter sie öffnet ([data-open]
 * auf der Nav). Ab 760px steht sie dauerhaft in der Zeile.
 */
.site-nav__list {
  display: none;
  order: 4;
  flex-basis: 100%;
  flex-direction: column;
  gap: 2px;
  padding: var(--mm-raum-3) 0 var(--mm-raum-4);
  border-top: 1px solid var(--mm-linie);
}

.site-nav__item {
  display: flex;
}

.site-nav[data-open='true'] .site-nav__list {
  display: flex;
}

.site-nav__link {
  font-size: 16px;
  color: var(--mm-nav-text);
  padding: 14px 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--mm-band);
}

.site-nav__link:hover {
  color: var(--mm-gruen-tinte-tief);
}

.site-nav__language {
  order: 3;
}

.site-language-switcher {
  display: flex;
}

.site-language-switcher__list {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--mm-band);
  border-radius: var(--mm-r-pille);
  padding: 3px;
}

.site-language-switcher__item {
  display: flex;
}

.site-language-switcher__link {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--mm-text-leise);
  padding: 7px 11px;
  border-radius: var(--mm-r-pille);
}

.site-language-switcher__link:hover {
  color: var(--mm-tinte);
}

.site-language-switcher__link[data-active='true'] {
  background: var(--mm-flaeche);
  color: var(--mm-tinte);
  box-shadow: 0 1px 2px rgba(35, 40, 31, 0.08);
}

/* --- 7 · Hero ------------------------------------------------------------ */

.site-hero {
  max-width: var(--mm-bahn);
  margin-inline: auto;
  padding: 34px var(--mm-rand) 52px;
  display: grid;
  gap: var(--mm-raum-5);
  align-items: center;
}

.site-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--mm-raum-4);
  animation: mm-rise 0.6s ease both;
  order: 2;
}

.site-hero__logo {
  display: flex;
}

.site-hero__logo img,
.site-hero__logo svg {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

.site-hero__headline {
  font-size: clamp(28px, 7.4vw, 46px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--mm-tinte);
  text-wrap: pretty;
}

.site-hero__tagline {
  font-size: 16px;
  line-height: 1.6;
  color: var(--mm-text);
  max-width: 46ch;
  text-wrap: pretty;
}

.site-hero__ctas {
  display: flex;
  gap: var(--mm-raum-2);
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--mm-linie);
}

/* Bildseite: Rosé-Kreis hinter dem gerahmten Bild (Export §6). */
.site-hero__media {
  position: relative;
  padding: 26px 20px 40px 0;
  order: 1;
}

.site-hero__media::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--mm-rose-hell);
}

.site-hero__image {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--mm-r-gross);
  aspect-ratio: 5 / 6;
  object-fit: cover;
  display: block;
  background: var(--mm-band);
  box-shadow: 0 18px 40px -28px rgba(35, 40, 31, 0.35);
}

/* --- 8 · Speisekarte ----------------------------------------------------- */

.site-menu__categories {
  position: sticky;
  top: 64px;
  z-index: 10;
  margin: var(--mm-raum-4) auto var(--mm-raum-5);
  padding-block: 12px;
  background: color-mix(in srgb, var(--mm-band) 93%, transparent);
  backdrop-filter: blur(12px);
  display: flex;
  gap: var(--mm-raum-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.site-menu__categories::-webkit-scrollbar {
  display: none;
}

.site-menu__category-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  cursor: pointer;
  font-family: var(--schrift-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--mm-tinte);
  background: var(--mm-flaeche);
  border: 1px solid var(--mm-linie-stark);
  border-radius: var(--mm-r-pille);
  padding: 13px 20px;
  min-height: 44px;
  transition: border-color var(--mm-zeit) var(--mm-kurve);
}

.site-menu__category-button:hover {
  border-color: var(--mm-gruen);
}

/* Punkt vor der aktiven Kategorie — im Export „mm-tab__punkt". */
.site-menu__category-button[aria-pressed='true']::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mm-gruen);
  display: block;
}

.site-menu__group {
  display: flex;
  flex-direction: column;
  gap: var(--mm-raum-4);
  scroll-margin-top: 130px;
}

/* Gruppentitel mit auslaufender Linie (Export „mm-gruppe__linie"). */
.site-menu__group-heading {
  display: flex;
  align-items: center;
  gap: var(--mm-raum-3);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mm-tinte);
}

.site-menu__group-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--mm-linie-stark);
}

.site-menu__group-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mm-text-grau);
  max-width: 60ch;
}

.site-menu__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--mm-raum-4);
}

.site-menu__item {
  background: var(--mm-flaeche);
  border: var(--mm-rb) solid var(--mm-rf);
  box-shadow: 0 0 0 1px var(--mm-rr);
  border-radius: var(--mm-r-karte);
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: var(--mm-raum-3);
  transition:
    transform 0.18s var(--mm-kurve),
    border-color var(--mm-zeit) var(--mm-kurve);
}

.site-menu__item:hover {
  transform: translateY(-3px);
  border-color: var(--mm-gruen-kontur);
}

.site-menu__item-media {
  height: 176px;
  border-radius: var(--mm-r-klein);
  overflow: hidden;
  background: var(--mm-band);
}

.site-menu__item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.site-menu__item-body {
  display: flex;
  flex-direction: column;
  gap: var(--mm-raum-1);
  flex: 1 1 auto;
}

.site-menu__item-name {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--mm-tinte);
}

.site-menu__item-allergens {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mm-text);
  margin-left: 5px;
}

.site-menu__item-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mm-text-grau);
  margin-top: 6px;
}

/*
 * Preiszeile mit Punktführung: der Preis steht als eigener Absatz nach dem
 * Textkörper, die Führung entsteht über sein ::before (Export
 * „mm-artikel__fuell").
 */
.site-menu__item-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: auto;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  color: var(--mm-tinte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.site-menu__item-price::before {
  content: '';
  flex: 1;
  border-bottom: 1px dotted var(--mm-linie-stark);
  transform: translateY(-4px);
}

.site-menu__allergen-legend {
  margin-top: var(--mm-raum-6);
  padding: 24px;
  background: var(--mm-flaeche);
  border: var(--mm-rb) solid var(--mm-rf);
  box-shadow: 0 0 0 1px var(--mm-rr);
  border-radius: var(--mm-r-karte);
}

.site-menu__allergen-heading {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mm-tinte);
  margin-bottom: 10px;
}

.site-menu__allergen-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 26px;
  list-style: decimal inside;
}

.site-menu__allergen-entry {
  font-size: 14px;
  color: var(--mm-text);
}

.site-menu__allergen-disclaimer {
  margin-top: var(--mm-raum-3);
  font-size: 13px;
  line-height: 1.6;
  color: var(--mm-text-leise);
}

/* --- 9 · Anreißer -------------------------------------------------------- */

/*
 * Wenn Speisekarte, Reservierung oder Kontakt auf einer eigenen Seite stehen,
 * bleibt an ihrer Stelle auf der Startseite ein Anreißer: Überschrift, ein
 * Satz, ein Weg dorthin. Die Sektion behält den Grund ihrer vollen Ausgabe
 * (siehe Bandrhythmus) — nur der Inhalt ist kürzer, nicht der Abschnitt ein
 * anderer.
 */

.site-menu--anreisser,
.site-reservation--anreisser,
.site-contact--anreisser {
  padding-block: 44px;
}

.site-menu__anreisser,
.site-reservation__anreisser,
.site-contact__anreisser {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mm-raum-3);
}

.site-menu__anreisser-text,
.site-reservation__anreisser-text,
.site-contact__anreisser-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mm-text);
  max-width: 44ch;
  text-wrap: pretty;
}

.site-menu__anreisser-link,
.site-reservation__anreisser-link,
.site-contact__anreisser-link {
  margin-top: var(--mm-raum-1);
}

/* --- 10 · Spotlight ------------------------------------------------------ */

.site-spotlight__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--mm-raum-5);
  margin-top: var(--mm-raum-5);
}

.site-spotlight__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mm-raum-3);
  text-align: center;
}

/* Leuchtende Scheibe hinter dem Bild (Export §8, Bühne + Glanz). */
.site-spotlight__item-image {
  position: relative;
  height: 260px;
  width: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 24px 36px rgba(18, 26, 14, 0.38));
  background:
    radial-gradient(
      circle at 50% 50%,
      var(--mm-gruen-scheibe) 0%,
      var(--mm-gruen-scheibe) 34%,
      transparent 35%
    ),
    radial-gradient(
      circle at 50% 50%,
      var(--mm-gruen-glanz) 0%,
      color-mix(in srgb, var(--mm-gruen-glanz) 90%, transparent) 46%,
      transparent 72%
    );
  animation: mm-puls 9s ease-in-out infinite;
}

.site-spotlight__item-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mm-raum-2);
}

.site-spotlight__item-name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--mm-auf-flaeche);
}

/*
 * Der Export dämpft diesen Absatz gegen die Überschrift. Als `opacity: 0.86`
 * ging das nicht: die Fläche ist die freie Betriebs-Farbe, und für die sagt
 * der Kontrakt genau 4,5:1 zu — die Dämpfung zog die zugesagten 5,21:1 auf
 * 4,36:1 herunter, unsichtbar für jeden Wächter ([[P-1210]]). Ein gemessener
 * gedämpfter Festwert löst es hier nicht: über den Eingabe-Bereich hält eine
 * Mischung aus Tinte und Grund erst ab rund 98 % noch AA (bei 95 % sind es
 * 4,48:1 auf `#00807f`), und das ist keine Dämpfung mehr. Die Abstufung
 * trägt deshalb der Schriftgrad, nicht die Farbe.
 */
.site-spotlight__item-description {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mm-auf-flaeche);
  max-width: 44ch;
  text-wrap: pretty;
}

.site-spotlight__item-price {
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  color: var(--mm-auf-flaeche);
  font-variant-numeric: tabular-nums;
  border: 1px solid color-mix(in srgb, var(--mm-auf-flaeche) 45%, transparent);
  border-radius: var(--mm-r-pille);
  padding: 11px 18px;
}

/* --- 11 · Öffnungszeiten ------------------------------------------------- */

.site-hours__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--mm-r-pille);
  padding: 12px 16px;
  margin-top: var(--mm-raum-4);
}

.site-hours__status::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: block;
  flex: 0 0 auto;
  background: currentColor;
}

.site-hours__status[data-open='true'] {
  color: var(--farbe-auf-dunst-primaer);
  background: var(--mm-gruen-hell);
}

.site-hours__status[data-open='true']::before {
  background: var(--mm-gruen);
  animation: mm-punkt 2.4s ease-out infinite;
}

.site-hours__status[data-open='false'] {
  color: var(--farbe-auf-dunst-sekundaer);
  background: var(--mm-rose-hell);
}

.site-hours__holiday {
  margin-top: var(--mm-raum-3);
  background: var(--mm-rose-hell);
  border-radius: var(--mm-r-mittel);
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--farbe-auf-dunst-sekundaer);
  max-width: 460px;
}

.site-hours__week {
  margin-top: var(--mm-raum-5);
  background: var(--mm-flaeche);
  border: var(--mm-rb) solid var(--mm-rf);
  box-shadow: 0 0 0 1px var(--mm-rr);
  border-radius: var(--mm-r-karte);
  padding: 4px 22px;
  max-width: 560px;
}

.site-hours__day {
  display: flex;
  align-items: baseline;
  gap: var(--mm-raum-3);
  padding: 15px 0;
  border-bottom: 1px solid var(--mm-band);
}

.site-hours__day:last-child {
  border-bottom: 0;
}

.site-hours__day-label {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--mm-tinte);
}

.site-hours__day-range {
  margin: 0 0 0 auto;
  font-size: 15px;
  line-height: 1;
  color: var(--mm-text);
  font-variant-numeric: tabular-nums;
}

.site-hours__day[data-today] .site-hours__day-label,
.site-hours__day[data-today] .site-hours__day-range {
  color: var(--mm-gruen-tinte-tief);
  font-weight: 600;
}

/* --- 12 · Aktuelles ------------------------------------------------------ */

.site-updates__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--mm-raum-4);
  margin-top: var(--mm-raum-5);
}

.site-updates__post {
  background: var(--mm-flaeche);
  border: var(--mm-rb) solid var(--mm-rf);
  box-shadow: 0 0 0 1px var(--mm-rr);
  border-radius: var(--mm-r-karte);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px;
}

.site-updates__post-date {
  order: 1;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-rose-tinte-tief);
}

.site-updates__post-title {
  order: 2;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--mm-tinte);
}

.site-updates__post-body {
  order: 3;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mm-text);
}

/* --- 13 · Countdown ------------------------------------------------------ */

.site-countdown__description {
  margin-top: var(--mm-raum-3);
  font-size: 15px;
  line-height: 1.6;
  color: var(--mm-text);
  max-width: 44ch;
  text-wrap: pretty;
}

.site-countdown__digits {
  display: flex;
  gap: var(--mm-raum-2);
  flex-wrap: wrap;
  margin-top: var(--mm-raum-5);
}

.site-countdown__digit {
  min-width: 84px;
  background: var(--mm-flaeche);
  border: var(--mm-rb) solid var(--mm-rf);
  box-shadow: 0 0 0 1px var(--mm-rr);
  border-radius: var(--mm-r-mittel);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.site-countdown__digit-value {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--mm-tinte);
  font-variant-numeric: tabular-nums;
}

.site-countdown__digit-label {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-text-leise);
}

.site-countdown__cta {
  margin-top: var(--mm-raum-5);
  align-self: flex-start;
}

/* --- 14 · Aktionen / Coupons --------------------------------------------- */

.site-coupons__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--mm-raum-4);
  margin-top: var(--mm-raum-5);
}

.site-coupons__item {
  background: var(--mm-flaeche);
  border: var(--mm-rb) solid var(--mm-rf);
  box-shadow: 0 0 0 1px var(--mm-rr);
  border-radius: var(--mm-r-karte);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: var(--mm-raum-3);
}

.site-coupons__discount {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--farbe-auf-dunst-sekundaer);
  background: var(--mm-rose-hell);
  border-radius: var(--mm-r-pille);
  padding: 9px 14px;
}

.site-coupons__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--mm-tinte);
}

.site-coupons__description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mm-text);
}

.site-coupons__code-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
}

.site-coupons__code {
  font-family: var(--schrift-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--mm-tinte);
  background: var(--mm-band);
  border: 1px dashed var(--mm-linie-kraeftig);
  border-radius: var(--mm-r-chip);
  padding: 14px 16px;
}

.site-coupons__valid-until {
  font-size: 13px;
  line-height: 1.4;
  color: var(--mm-text-leise);
}

/* --- 15 · Kontakt, Anfragen und Reservierung ----------------------------- */

/*
 * Die Anatomie der Formulare steht in Abschnitt 5. Hier steht nur, wie viel
 * Platz jedes Formular in seinem Abschnitt bekommt und was an Feldern
 * hinzukommt, das es sonst nirgends gibt.
 */

.site-contact__form,
.site-catering__form,
.site-reservation__form,
.site-loyalty__form,
.site-newsletter__form {
  margin-top: var(--mm-raum-5);
}

/* Die Anfrage hat die meisten Felder — sie darf die breitere Bahn nehmen. */
.site-catering__form {
  max-width: 720px;
}

/* Der Newsletter fragt zwei Angaben ab und bleibt schmal wie im Export. */
.site-newsletter__form {
  max-width: 460px;
}

/*
 * Die Einwilligung ist Kleintext, aber der Datenschutz-Link darin erbt seine
 * Farbe vom Absatz (der Kern setzt color: inherit). Ohne Unterstreichung wäre
 * er im Fließtext gar nicht als Link erkennbar — dieses Artefakt nimmt Links
 * sonst die Unterstreichung.
 */
.site-newsletter__einwilligung {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mm-text-leise);
  max-width: 46ch;
  text-wrap: pretty;
}

.site-newsletter__einwilligung a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Reservierung: die Auswahl der Uhrzeit. */
.site-reservation__slots {
  gap: var(--mm-raum-2);
}

.site-reservation__slot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--mm-raum-1);
}

.site-reservation__slot {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--mm-flaeche);
  border: 1px solid var(--mm-linie-stark);
  border-radius: var(--mm-r-pille);
  padding: 12px 17px;
  min-height: 44px;
  transition: border-color var(--mm-zeit) var(--mm-kurve);
}

.site-reservation__slot:has(.site-reservation__slot-input:checked) {
  border-color: var(--mm-gruen);
  background: var(--mm-gruen-hell);
}

/*
 * Ausgebuchte Zeiten bleiben lesbar stehen, statt zu verschwinden: der Gast
 * soll sehen, dass es die Uhrzeit gibt und sie vergeben ist. Der gestrichelte
 * Rand trägt die Aussage zusätzlich zur Farbe.
 */
.site-reservation__slot:has(.site-reservation__slot-input:disabled) {
  background: var(--mm-band);
  border-style: dashed;
  border-color: var(--mm-linie-stark);
}

.site-reservation__slot-input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--mm-gruen);
}

.site-reservation__slot-label {
  font-family: var(--schrift-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--mm-tinte);
  cursor: pointer;
}

.site-reservation__slot-input:disabled + .site-reservation__slot-label {
  color: var(--mm-text-leise);
  cursor: default;
}

.site-reservation__slot-note {
  font-weight: 400;
  color: var(--mm-text-leise);
}

/* --- 16 · Stempelkarte und Newsletter ------------------------------------ */

/* Kennzahlen des Programms — im Export „mm-fakten". */
.site-loyalty__facts {
  display: flex;
  flex-direction: column;
  gap: var(--mm-raum-3);
  margin-top: var(--mm-raum-5);
  padding-top: var(--mm-raum-3);
  border-top: 1px solid var(--mm-linie);
  max-width: 620px;
}

.site-loyalty__fact {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.site-loyalty__fact-label {
  min-width: 132px;
  font-family: var(--schrift-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--mm-tinte);
}

.site-loyalty__fact-value {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--mm-text);
}

/*
 * Die eigene Karte des Gasts. Der Hinweis, dass der Zugang nur auf diesem
 * Gerät liegt, ist der wichtigste Satz des Abschnitts — deshalb steht er auf
 * der Rosé-Fläche und nicht als Fußnote darunter.
 */
.site-loyalty__karte {
  margin-top: var(--mm-raum-5);
  padding: 20px 22px;
  background: var(--mm-rose-hell);
  --mm-auf-flaeche: var(--farbe-auf-dunst-sekundaer);
  color: var(--mm-auf-flaeche);
  border-radius: var(--mm-r-mittel);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mm-raum-3);
  max-width: 460px;
}

.site-loyalty__karte-hinweis {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mm-auf-flaeche);
  text-wrap: pretty;
}

/* --- 17 · Popup ---------------------------------------------------------- */

.site-popup {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(35, 40, 31, 0.5);
  display: grid;
  place-items: center;
  padding: 20px;
}

.site-popup__panel {
  position: relative;
  width: 440px;
  max-width: 100%;
  background: var(--mm-flaeche);
  border: 6px solid var(--mm-rose);
  border-radius: var(--mm-r-karte);
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--mm-rose-kontur),
    0 24px 48px -26px rgba(20, 26, 16, 0.6);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 22px;
}

.site-popup__image {
  width: 100%;
  height: 214px;
  object-fit: cover;
  border-bottom: 1px solid var(--mm-linie);
  display: block;
}

.site-popup__panel > *:not(.site-popup__image):not(.site-popup__close) {
  margin-inline: 18px;
}

.site-popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.94);
  border: 0;
  border-radius: 50%;
  font-size: 0;
  color: transparent;
}

.site-popup__close::before,
.site-popup__close::after {
  content: '';
  grid-area: 1 / 1;
  width: 15px;
  height: 1.5px;
  background: var(--mm-tinte);
  display: block;
}

.site-popup__close::before {
  transform: rotate(45deg);
}

.site-popup__close::after {
  transform: rotate(-45deg);
}

.site-popup__panel h2 {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--mm-tinte);
}

.site-popup__panel p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mm-text);
  text-wrap: pretty;
}

.site-popup__cta {
  align-self: flex-start;
}

/* --- 18 · Fußzeile ------------------------------------------------------- */

.site-footer {
  background: var(--mm-fuss);
  padding: 48px var(--mm-rand) 24px;
  display: grid;
  gap: var(--mm-raum-5);
  max-width: none;
}

.site-footer > * {
  max-width: var(--mm-bahn);
  width: 100%;
  margin-inline: auto;
}

.site-footer__contact,
.site-footer__legal {
  display: flex;
  flex-direction: column;
}

.site-footer__heading {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-fuss-leise);
  margin-bottom: var(--mm-raum-2);
}

.site-footer__company {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: var(--mm-raum-2);
}

.site-footer__address,
.site-footer__phone,
.site-footer__email {
  display: block;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mm-fuss-text);
}

.site-footer__phone,
.site-footer__email {
  color: #ffffff;
}

.site-footer__phone:hover,
.site-footer__email:hover,
.site-footer__legal-link:hover {
  color: #ffffff;
}

.site-footer__legal-list {
  display: flex;
  gap: var(--mm-raum-4);
  flex-wrap: wrap;
}

.site-footer__legal-link {
  font-size: 14px;
  color: #ffffff;
  padding: 6px 0;
}

/* --- 19 · Consent-Banner ------------------------------------------------- */

.site-consent-banner {
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: var(--mm-flaeche);
  border-top: 1px solid var(--mm-linie-stark);
  padding: 18px var(--mm-rand);
  display: flex;
  align-items: center;
  gap: var(--mm-raum-4);
  flex-wrap: wrap;
  box-shadow: 0 -14px 30px -24px rgba(35, 40, 31, 0.5);
}

.site-consent-banner__text {
  flex: 1 1 320px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mm-text);
  text-wrap: pretty;
}

.site-consent-banner__link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- 20 · Rechtsseiten und Neben-Routen ---------------------------------- */

.site-legal-page {
  max-width: 820px;
  margin-inline: auto;
  padding: 34px var(--mm-rand) 48px;
  display: flex;
  flex-direction: column;
  gap: var(--mm-raum-4);
}

.site-legal-page__title {
  font-size: clamp(26px, 6vw, 30px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--mm-tinte);
}

.site-legal-page__section {
  display: flex;
  flex-direction: column;
  gap: var(--mm-raum-2);
}

.site-legal-page__heading {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mm-tinte);
}

.site-legal-page__content {
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--mm-text);
  text-wrap: pretty;
}

/* --- 21 · Bewegung ------------------------------------------------------- */

@keyframes mm-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes mm-punkt {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--farbe-primaer) 45%, transparent);
  }
  70% {
    box-shadow: 0 0 0 7px transparent;
  }
}

@keyframes mm-puls {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.03);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-root *,
  .site-root *::before,
  .site-root *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 22 · Ab 760px (Tablet) ---------------------------------------------- */

@media (min-width: 760px) {
  :root {
    --mm-rand: 32px;
  }

  .site-root main > section {
    padding: 68px 0 76px;
  }

  .site-nav {
    min-height: 72px;
    flex-wrap: nowrap;
  }

  .site-nav__toggle {
    display: none;
  }

  .site-nav__list {
    display: flex;
    order: 1;
    flex-basis: auto;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    margin-left: 8px;
    padding: 0;
    border-top: 0;
  }

  .site-nav__language {
    margin-left: auto;
  }

  .site-nav__link {
    font-size: 15px;
    padding: 0;
    min-height: 0;
    border-bottom: 0;
  }

  .site-menu__categories {
    top: 72px;
  }

  .site-hero {
    grid-template-columns: 1fr 1fr;
    gap: var(--mm-raum-6);
    padding: 52px var(--mm-rand) 72px;
  }

  .site-hero__content {
    order: 1;
  }

  .site-hero__media {
    order: 2;
  }

  .site-spotlight__item-image {
    height: 340px;
  }

  .site-updates__list {
    grid-template-columns: 1.25fr 1fr;
  }

  .site-hours__week {
    padding: 6px 26px;
  }

  .site-coupons__item {
    padding: 26px 28px;
  }

  .site-menu__allergen-legend {
    padding: 26px 28px;
  }

  /*
   * Zwei Spalten in der Fußzeile. Die Inhaltsbahn wandert dafür von den
   * Kindern auf den Fuß selbst — sonst zentrierte sich jede Spalte für sich
   * und die dunkle Fläche verlöre ihren randlosen Lauf.
   */
  .site-footer {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--mm-raum-6);
    padding: 48px max(var(--mm-rand), (100% - var(--mm-bahn)) / 2) 24px;
  }

  .site-footer > * {
    max-width: none;
    margin-inline: 0;
  }

  /*
   * Die längeren Formulare stellen ihre Felder nebeneinander. Freitext,
   * Aktionen und Rückmeldung bleiben über die volle Breite — ein halbbreites
   * Textfeld lädt nicht zum Schreiben ein, und eine halbbreite Meldung sähe
   * aus, als gehöre sie zum Feld daneben.
   */
  .site-contact__form,
  .site-catering__form,
  .site-reservation__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--mm-raum-4);
  }

  .site-contact__form > .site-form__actions,
  .site-catering__form > .site-form__actions,
  .site-reservation__form > .site-form__actions,
  .site-contact__form > .site-form__feedback,
  .site-catering__form > .site-form__feedback,
  .site-reservation__form > .site-form__feedback,
  .site-contact__form > .site-form__field:has(.site-form__textarea),
  .site-catering__form > .site-form__field:has(.site-form__textarea),
  .site-reservation__form > .site-form__field:has(.site-form__textarea),
  .site-reservation__form > .site-reservation__slots {
    grid-column: 1 / -1;
  }

  .site-legal-page {
    padding: 40px var(--mm-rand) 52px;
  }
}

/* --- 23 · Ab 1080px (Desktop) -------------------------------------------- */

@media (min-width: 1080px) {
  :root {
    --mm-rand: 40px;
  }

  .site-root main > section {
    padding: 84px 0 96px;
  }

  .site-nav {
    min-height: 78px;
    gap: 36px;
  }

  .site-nav__list {
    gap: 26px;
  }

  .site-nav__brand {
    font-size: 18px;
  }

  .site-nav__brand img {
    width: 46px;
    height: 46px;
  }

  .site-menu__categories {
    top: 78px;
  }

  .site-hero {
    grid-template-columns: 1.02fr 0.98fr;
    gap: 60px;
    padding: 66px var(--mm-rand) 92px;
  }

  .site-hero__tagline {
    font-size: 17px;
  }

  .site-menu__items {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .site-menu__item {
    padding: 20px 22px 22px;
  }

  .site-menu__item-media {
    height: 196px;
  }

  .site-menu__group-heading {
    font-size: 20px;
  }

  .site-spotlight__item-image {
    height: 404px;
  }

  .site-countdown__digit {
    min-width: 92px;
    padding: 20px 14px;
  }

  .site-countdown__digit-value {
    font-size: 34px;
  }

  .site-footer {
    padding: 64px max(var(--mm-rand), (100% - var(--mm-bahn)) / 2) 28px;
  }

  .site-consent-banner {
    padding: 20px var(--mm-rand);
  }
}

/* --- 24 · Druck ---------------------------------------------------------- */

@media print {
  .site-nav,
  .site-consent-banner,
  .site-popup,
  .site-announcement-bar,
  .site-menu__categories {
    display: none !important;
  }

  .site-root {
    background: #ffffff;
  }

  .site-root main > section {
    padding: 24px 0;
    break-inside: avoid;
  }
}

/* ==========================================================================
   Bekannte Struktur-Lücken gegenüber dem signierten Export

   Diese Gestaltungs-Elemente des Laufs brauchen DOM, das die Sektions-Kerne
   heute nicht ausgeben. Sie fehlen hier bewusst und sichtbar; ihr Nachtrag
   läuft als Stufe-0-Ticket gegen packages/site-ui, nie als Fork
   (Runbook Stufe 3 · Import-Plan §6).

   - Sektionskopf: Kicker über und Fußnote neben dem Titel (alle
     Abschnitte) — TASK-1052.
   - Hero: Ortsmarke, Hervorhebung in der Überschrift, rundes Siegel,
     Adress-Chip — TASK-1053.
   - Hero: Faktenzeile (Öffnungs-Pille, Abholzeit, Mindestwert) — TASK-1054,
     getrennt, weil dafür ein Daten-Kontrakt fehlt und nicht nur DOM.
   - Aktuelles: Karte mit Beitragsbild; updates_posts trägt keine Bildspalte
     — TASK-1055.
   - Speisekarte: Anzahl der Gerichte je Gruppe — TASK-1056.
   - Spotlight: Strahlenkranz und gestrichelter Ring — TASK-1057; von den
     fünf Deko-Ebenen des Laufs tragen hier zwei (Scheibe, Glanz) als
     Bild-Hintergrund.
   - Einblenden beim Scrollen: der Kern setzt keine Sichtbarkeits-Klasse
     — TASK-1058.
   - Stempelkarte und Newsletter: der Lauf stellt den Abschnittskopf neben
     den Inhalt. Dafür fehlt ein Element, das den Inhaltsteil als Einheit
     fasst; ein Raster auf dem <section> würde die Überschrift neben die
     Einleitung setzen statt neben Karte und Formular — TASK-1141. Beide
     Abschnitte stehen deshalb hier einspaltig.
   ========================================================================== */