/*
 * Philli's CaféLädchen — Layout & Komponenten
 * Art Direction v2 „Sonnenhaus"
 * ─────────────────────────────────────────────
 * Scharfe Kanten, Haarlinien statt Schatten,
 * asymmetrisches Editorial-Raster, ein helles Thema.
 */

/* ═══════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 768px)  { .container { padding-inline: 3rem; } }
@media (min-width: 1200px) { .container { padding-inline: var(--gutter-lg); } }

.container--default { max-width: var(--content-default); }
.container--narrow  { max-width: var(--content-narrow); }

main { flex: 1 0 auto; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: var(--section-y-sm); }
.section--offset { background: var(--color-surface-offset); }
.section--sand   { background: var(--color-surface-offset-2); }

.section--sage {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.section--sage h1, .section--sage h2, .section--sage h3 { color: var(--color-text-inverse); }
.section--sage .lead, .section--sage p { color: var(--color-text-inverse); }
.section--sage .eyebrow { color: var(--color-text-inverse); }
.section--sage a { color: var(--color-text-inverse); border-color: rgb(253 251 247 / 0.4); }

/* Editorial-Raster — Text startet auf Spalte 2/3, nie alles mittig */
.editorial {
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 900px) {
  .editorial {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-10);
  }
  .editorial__label { grid-column: 1 / 3; }
  .editorial__body  { grid-column: 3 / 9; }
  .editorial__aside { grid-column: 9 / 13; }
  .editorial__wide  { grid-column: 3 / 13; }
}

/* Spannen im 12-Spalten-Raster — für freie Kompositionen.
   Unter 900 px ist alles einspaltig, das ist Absicht. */
.cols { display: grid; gap: var(--space-8); }
@media (min-width: 900px) {
  .cols { grid-template-columns: repeat(var(--grid-columns), 1fr); gap: var(--space-10); }
  .col-2  { grid-column: span 2; }
  .col-3  { grid-column: span 3; }
  .col-4  { grid-column: span 4; }
  .col-5  { grid-column: span 5; }
  .col-6  { grid-column: span 6; }
  .col-7  { grid-column: span 7; }
  .col-8  { grid-column: span 8; }
  .col-9  { grid-column: span 9; }
  .col-12 { grid-column: span 12; }
  .col-start-2 { grid-column-start: 2; }
  .col-start-3 { grid-column-start: 3; }
}

.grid { display: grid; gap: var(--space-6); }
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 940px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--gap-lg { gap: var(--space-10); }
}

.stack-sm > * + * { margin-top: var(--space-2); }
.stack > * + * { margin-top: var(--space-4); }
.grid > div > h3 { margin-bottom: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-8); }

/* ═══════════════════════════════════════════════
   TYPO-HELFER
   ═══════════════════════════════════════════════ */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin: 0;
}

.display-hero {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-weight: 500;
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
  text-wrap: balance;
}

.display-xl {
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3.125rem);   /* 30→50px */
  line-height: 1.1;
  max-width: 26ch;
}

.lead {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 46ch;
}

.muted { color: var(--color-text-muted); }

.quote {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--text-xl);
  line-height: 1.35;
  max-width: 30ch;
}

.signature {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 40;
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-primary-deep);
}

.meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Eukalyptus-Trenner zwischen Abschnitten */
.divider-leaf {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-primary-light);
}
.divider-leaf::before,
.divider-leaf::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--color-divider);
}
.divider-leaf svg { width: 22px; height: 22px; }

/* ═══════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--transition-interactive),
              color var(--transition-interactive),
              border-color var(--transition-interactive);
}

/* Größen — mehr als drei braucht die Seite nicht */
.btn--sm { padding: 0.55rem 1.15rem; font-size: var(--text-xs); }
.btn--lg { padding: 1rem 2rem; font-size: var(--text-base); }
.btn--full { width: 100%; }

/* Zustände — so sorgfältig wie die Startseite (Regel aus der Art Direction) */
.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--color-surface-offset);
  border-color: var(--color-divider);
  color: var(--color-text-faint);
  cursor: not-allowed;
  pointer-events: none;
}
.btn[data-loading="true"] { color: transparent; pointer-events: none; position: relative; }
.btn[data-loading="true"]::after {
  content: '';
  position: absolute;
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  color: var(--color-text-inverse);
  animation: btn-spin 700ms linear infinite;
}
.btn--ghost[data-loading="true"]::after { color: var(--color-text); }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn[data-loading="true"]::after { animation-duration: 1600ms; }
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
/* Explizite Rahmenfarbe im Hover: sonst greift die Basis-Regel
   `a:hover { border-color: var(--color-text) }` und zeichnet eine
   dunkle Linie um den gefüllten Button. */
.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-text-inverse); border-color: transparent; }

/* Backstein: maximal EIN Element pro Bildschirm */
.btn--brick { background: var(--color-accent); color: var(--color-text-inverse); }
.btn--brick:hover { background: var(--color-accent-hover); color: var(--color-text-inverse); border-color: transparent; }

.btn--ghost {
  border-color: var(--color-border);
  color: var(--color-text);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--color-text); color: var(--color-text); background: transparent; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary-deep);
  border-bottom: 1px solid var(--color-primary-light);
  padding-bottom: 2px;
}
.link-arrow svg { width: 14px; height: 14px; transition: transform var(--transition-interactive); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ═══════════════════════════════════════════════
   HEADER + NAVIGATION
   ═══════════════════════════════════════════════ */

/* Logo-Block im normalen Seitenfluss — er scrollt einfach weg.
   Vorher wurde seine Höhe animiert: das verschob den Seiteninhalt,
   verschob damit die Scroll-Position und löste die Umschaltung erneut
   aus — das war das Zittern. Jetzt ändert sich keine Höhe mehr. */
.header-hero {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: var(--space-6) var(--space-4);
}
.brand--full { border: none; }
.brand--full .brand__logo { width: auto; height: 148px; }

/* Kein Ausblenden, keine Höhenanimation: der Logo-Block scrollt einfach
   aus dem Bild. Ein scroll-getriebenes Fade hatte das Logo bereits beim
   Laden blass gemacht und eine leere Fläche über der Navigation erzeugt. */

/* Klebende Leiste: konstante Höhe — kein Reflow, kein Aufschwingen */
/* Platz für die Kopfzeile, bis main.js sie einsetzt — sonst rutscht die
   ganze Seite nach dem ersten Zeichnen um 60 bzw. 255 px nach unten
   (Layout-Verschiebung, CLS 0,07 auf jeder Seite; SEO-Audit 19.10.2026). */
[data-site-header] { display: block; min-height: 255px; }
@media (max-width: 1023px) { [data-site-header] { min-height: 60px; } }

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgb(250 246 239 / 0.86);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: border-color 280ms var(--ease), background 280ms var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--color-divider);
  background: rgb(250 246 239 / 0.94);
}

.header-sentinel { height: 1px; margin-bottom: -1px; pointer-events: none; }

/* Leiste: Marke · Navigation · Aktionen — Navigation bleibt immer zentriert */
.header-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.brand--compact {
  justify-self: start;
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease), visibility 280ms;
}
.site-header.is-stuck .brand--compact {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-desktop { grid-column: 2; }
.header-actions { grid-column: 3; justify-self: end; }

@media (max-width: 1023px) {
  /* Mobile/tablet starts directly with the compact brand bar.
     The large original-logo introduction is desktop-only. */
  .header-hero { display: none; }
  .header-bar { grid-template-columns: 1fr auto; }
  .header-actions { grid-column: 2; }
  .brand--compact {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* ── Wortmarke ─────────────────────────────── */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-primary);
  border: none;
  flex-shrink: 0;
}
.brand:hover { color: var(--color-primary-deep); }
.brand__mark { width: 34px; height: 34px; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__text small {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 3px;
}
.brand__text span {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 40;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

/* ── Desktop-Navigation ───────────────────── */
.nav-desktop { display: none; }
@media (min-width: 1024px) { .nav-desktop { display: block; } }

.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; }
@media (min-width: 1240px) { .nav-list { gap: var(--space-1); } }
.nav-item { position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: none;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;   /* „Über uns“ nie zweizeilig */
  transition: background var(--transition-fast), color var(--transition-fast);
}
/* Schmale Desktops (1024–1239 px): sechs Menüpunkte mit Pfeil passen nur etwas enger */
@media (min-width: 1024px) and (max-width: 1239px) { .nav-link { padding-inline: var(--space-3); } }
.nav-link:hover,
.nav-item:focus-within > .nav-link {
  background: var(--color-primary-wash);
  color: var(--color-primary-deep);
}
.nav-link[aria-current="page"] {
  background: var(--color-primary-wash);
  color: var(--color-primary-deep);
  font-weight: 600;
}
.nav-link__chevron { width: 11px; height: 11px; opacity: 0.5; transition: transform var(--transition-fast); }
.nav-item:hover .nav-link__chevron,
.nav-item:focus-within .nav-link__chevron { transform: rotate(180deg); opacity: 1; }

/* ── Dropdowns ─────────────────────────────── */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 244px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  padding: var(--space-2);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-interactive),
              transform var(--transition-interactive),
              visibility var(--transition-interactive);
}
.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown,
.nav-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-dropdown a {
  display: block;
  padding: 0.55rem var(--space-3);
  border: none;
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-dropdown a:hover { background: var(--color-primary-wash); color: var(--color-primary-deep); }

/* Café → Speisekarte: Gruppen mit ihren Abschnitten als Ausklapper rechts
   neben dem Eintrag. Zwei Spalten (Frühstück | Getränke). */
.nav-karte { position: relative; }
.nav-karte__kopf { display: flex !important; align-items: center; justify-content: space-between; gap: var(--space-3); }
.nav-karte__kopf::after {
  content: ''; width: 6px; height: 6px;
  border-right: 1.6px solid currentColor; border-top: 1.6px solid currentColor;
  transform: rotate(45deg); opacity: 0.6;
}
.nav-dropdown .nav-karte__spalten {
  position: absolute;
  top: calc(-1 * var(--space-2) - 1px);
  left: calc(100% + var(--space-2));
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--space-2) var(--space-5);
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity var(--transition-interactive), transform var(--transition-interactive),
              visibility var(--transition-interactive);
}
/* Brücke über die Lücke, damit die Maus auf dem Weg nicht abreißt */
.nav-dropdown .nav-karte__spalten::before {
  content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: var(--space-3);
}
.nav-dropdown .nav-karte:hover > .nav-karte__spalten,
.nav-dropdown .nav-karte:focus-within > .nav-karte__spalten { opacity: 1; visibility: visible; transform: none; }
.nav-dropdown .nav-karte:hover > .nav-karte__kopf { background: var(--color-primary-wash); color: var(--color-primary-deep); }
.nav-karte__gruppe ul { list-style: none; margin: 0; padding: 0; }
.nav-dropdown .nav-karte__gruppe a { padding: 0.35rem var(--space-3); white-space: nowrap; }
.nav-dropdown a.nav-karte__gruppe-titel {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-primary-deep);
  margin-bottom: var(--space-1);
}

/* Mobil: eingerückt unter „Speisekarte“ */
.nav-karte--mobil .nav-karte__spalten { padding-left: var(--space-4); }
.nav-karte--mobil .nav-karte__gruppe { margin-top: var(--space-2); }
.nav-mobile__sub .nav-karte--mobil .nav-karte__gruppe a { padding-block: 0.3rem; }
.nav-mobile__sub a.nav-karte__gruppe-titel { color: var(--color-text); font-weight: 600; }

/* ── Header-Aktionen ──────────────────────── */
.header-actions { display: flex; align-items: center; gap: var(--space-3); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-text);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.icon-btn:hover { background: var(--color-primary-wash); color: var(--color-primary-deep); }
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn > .fa-regular, .icon-btn > .fa-solid { font-size: 17px; line-height: 1; }

/* Reservieren: Symbol statt Knopf, auf allen Breiten. Salbei gefüllt,
   weil es die eine Handlung ist, die vom Kopf aus am häufigsten gemeint
   ist. Die Beschriftung erscheint beim Überfahren und bei Tastaturfokus. */
.icon-btn--reservieren { background: var(--color-primary); color: var(--color-text-inverse); }
.icon-btn--reservieren:hover { background: var(--color-primary-deep); color: var(--color-text-inverse); }
.icon-btn--reservieren svg { width: 22px; height: 22px; }

[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, -3px);
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--color-text);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms var(--ease), transform 140ms var(--ease);
  z-index: 2;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
/* Am rechten Rand würde die Beschriftung abgeschnitten — dort rechtsbündig. */
@media (max-width: 1023px) {
  [data-tooltip]::after { left: auto; right: 0; transform: translateY(-3px); }
  [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { transform: none; }
}

/* ── Shopsuche ──────────────────────────────────
   Auf allen Breiten eine Lupe neben dem Warenkorb. Ein Klick öffnet
   die Suchzeile unter der Leiste. Die Dropdowns der Navigation liegen
   darüber, nicht darunter. */
.search-toggle { display: inline-flex; }
.search-toggle[aria-expanded="true"] { background: var(--color-primary-wash); color: var(--color-primary-deep); }

.header-search { display: none; position: relative; z-index: 0; padding-bottom: var(--space-3); }
.header-search.is-open { display: block; animation: suche-auf 180ms var(--ease) both; }
@keyframes suche-auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .header-search.is-open { animation: none; } }
.header-bar { position: relative; z-index: 1; }

.site-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 34rem;
  margin-inline: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  transition: border-color var(--transition-fast);
}
.site-search:hover { border-color: var(--color-primary-light); }
.site-search:focus-within {
  border-color: var(--color-primary);
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 1px;
}
.site-search__icon {
  display: inline-flex;
  padding-left: 0.9rem;
  color: var(--color-text-muted);
  pointer-events: none;
}
.site-search__icon svg { width: 17px; height: 17px; }
.site-search__input {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.6rem;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--color-text);
  appearance: none;
}
.site-search__input::placeholder { color: var(--color-text-faint); }
.site-search__input:focus { outline: none; }
.site-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  margin-right: 0.3rem;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6 6 18' stroke='%236e675f' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-search__submit {
  margin: 3px;
  padding: 0.4rem 1rem;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-inverse, #fff);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.site-search__submit:hover { background: var(--color-primary-deep); }
/* iOS zoomt bei Feldern unter 16 px hinein — auf dem Telefon also 16 px. */
@media (max-width: 1023px) { .site-search__input { font-size: 1rem; } }

.site-search--drawer { max-width: none; margin: var(--space-6) 0 var(--space-5); }

.nav-toggle { display: inline-flex; }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* ═══════════════════════════════════════════════
   MOBILE-DRAWER
   ═══════════════════════════════════════════════ */

.nav-mobile { position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; }
.nav-mobile.is-open { visibility: visible; }

.nav-mobile__scrim {
  position: absolute; inset: 0;
  background: rgb(34 31 27 / 0.32);
  opacity: 0;
  transition: opacity var(--transition-interactive);
}
.nav-mobile.is-open .nav-mobile__scrim { opacity: 1; }

.nav-mobile__panel {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: min(90vw, 420px);
  background: var(--color-bg);
  box-shadow: var(--shadow-overlay);
  padding: var(--space-5) var(--space-6) var(--space-8);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 420ms var(--ease);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.nav-mobile.is-open .nav-mobile__panel { transform: translateX(0); }

.nav-mobile__head { display: flex; align-items: center; justify-content: space-between; }

/* Café / Lädchen als zwei große Einstiege */
.nav-entries { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.nav-entry {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  min-height: 124px;
  padding: var(--space-4);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  transition: background var(--transition-interactive);
}
.nav-entry:hover { background: var(--color-primary-hover); color: var(--color-text-inverse); }
.nav-entry--alt { background: var(--color-primary-deep); }
.nav-entry--alt:hover { background: #33473f; color: var(--color-text-inverse); }
.nav-entry strong {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.1;
}
.nav-entry small { font-size: var(--text-xs); opacity: 0.82; line-height: 1.4; }

.nav-mobile__list { list-style: none; padding: 0; border-top: var(--hairline); }
.nav-mobile__list > li { border-bottom: var(--hairline); }

.nav-mobile__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.nav-mobile__row > a {
  flex: 1;
  padding: var(--space-4) 0;
  border: none;
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
}
.nav-mobile__row > a[aria-current="page"] { color: var(--color-primary-deep); }

.nav-mobile__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
}
.nav-mobile__expand svg { width: 15px; height: 15px; transition: transform var(--transition-interactive); }
.nav-mobile__expand[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-mobile__sub { list-style: none; padding: 0 0 var(--space-3); display: none; }
.nav-mobile__sub.is-open { display: block; }
.nav-mobile__sub a {
  display: block;
  padding: 0.45rem 0 0.45rem var(--space-4);
  border: none;
  border-left: 1px solid var(--color-divider);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.nav-mobile__sub a:hover { color: var(--color-primary-deep); border-left-color: var(--color-primary); }

/* Der Reservieren-Knopf im Menü: volle Breite, direkt unter den
   Menüpunkten. `margin-top: auto` sitzt weiterhin auf der Fußzeile — so
   bleibt der Knopf am Menü und die Zeiten bleiben unten. */
.nav-mobile__aktion { margin-top: var(--space-6); }
.nav-mobile__aktion .btn { width: 100%; justify-content: center; }

.nav-mobile__meta { margin-top: auto; padding-top: var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); }
.nav-mobile__meta a { border: none; color: var(--color-primary-deep); }

body.is-locked { overflow: hidden; }

/* ═══════════════════════════════════════════════
   HERO (Startseite)
   ═══════════════════════════════════════════════ */

.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 7rem) clamp(4rem, 8vw, 8rem);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--wash-sun);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero__grid { display: grid; gap: var(--space-10); align-items: end; }
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: repeat(12, 1fr); }
  .hero__copy  { grid-column: 1 / 8; }
  .hero__aside { grid-column: 9 / 13; padding-bottom: var(--space-3); }
}

.hero__eyebrow { margin-bottom: var(--space-6); }

/* Ganze Sätze brauchen die Satz-Skala, nicht die Wort-Skala.
   --text-hero bleibt kurzen Statements vorbehalten. */
.hero h1 {
  font-size: clamp(2.5rem, 1.1rem + 4.6vw, 4.5rem);
  max-width: 17ch;
}
.hero__lead { margin-top: var(--space-8); }
.hero__actions { margin-top: var(--space-10); }

/* Öffnungs-Status */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}
.status__dot {
  width: 7px; height: 7px;
  border-radius: var(--radius-full);
  background: var(--color-success);
  flex-shrink: 0;
}
.status--closed .status__dot { background: var(--color-text-faint); }

/* Bild mit Passepartout-Rahmen */
.frame {
  border: var(--frame);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface);
}
.frame--45 { aspect-ratio: 4 / 5; }
.frame--32 { aspect-ratio: 3 / 2; }
.frame--43 { aspect-ratio: 4 / 3; }
.frame img { width: 100%; height: 100%; object-fit: cover; }

.caption {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════
   SEITENKOPF (Unterseiten)
   ═══════════════════════════════════════════════ */

.page-head {
  padding-block: clamp(2.5rem, 5vw, 5rem) clamp(2.5rem, 4vw, 4rem);
  border-bottom: var(--hairline);
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 100%;
  background: var(--wash-sun);
  opacity: 0.6;
  pointer-events: none;
}
.page-head > * { position: relative; }
.page-head h1 { font-size: var(--text-3xl); max-width: 24ch; }
/* Shop-Unterseiten (Produkt, Kategorie): Ecwid liefert dort die eigentliche
   Überschrift, der Seitenkopf wird zum Absatz — sieht aber gleich aus. */
.page-head p[data-shop-kopf] {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-head);
  color: var(--color-text);
  text-wrap: balance;
  font-size: var(--text-3xl);
  max-width: 24ch;
  margin: 0;
}
.page-head .lead { margin-top: var(--space-5); max-width: 54ch; }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  list-style: none; padding: 0;
}
.breadcrumb a { color: var(--color-text-muted); border: none; }
.breadcrumb a:hover { color: var(--color-primary-deep); }

/* ═══════════════════════════════════════════════
   PANELS, KARTEN, PLATZHALTER
   ═══════════════════════════════════════════════ */

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  padding: var(--space-8);
}

/* Karte ohne Schatten — Haarlinie und Flächenwechsel */
.card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  transition: border-color var(--transition-interactive),
              background var(--transition-interactive);
}
a.card { border-bottom-width: 1px; }
.card:hover { border-color: var(--color-primary-light); background: var(--color-bg); }
.card h3 { margin-bottom: var(--space-2); }
.card__meta { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Shop-Kategorien: die vorhandene .card, links ein quadratisches Bild.
   Auf dem Handy steht nur ein Vorschaubild neben Name und Stichworten,
   der Text läuft darunter über die volle Breite — acht Vollbilder
   untereinander wären ein sehr langer Weg bis zum Storefront. */
.kategorie {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kopf" "text";
  column-gap: var(--space-5);
  row-gap: var(--space-3);
  align-content: start;
  height: 100%;
}
.kategorie--bild {
  grid-template-columns: 5.5rem minmax(0, 1fr);
  grid-template-areas: "bild kopf" "text text";
  align-items: center;
}
.kategorie__bild { grid-area: bild; aspect-ratio: 1 / 1; }
.kategorie__kopf { grid-area: kopf; }
.kategorie__kopf h3 { margin-bottom: var(--space-1); }
.kategorie__text {
  grid-area: text;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text);
  max-width: none;
}
.kategorie:hover .kategorie__bild { border-color: var(--color-primary-light); }
@media (min-width: 1100px) {
  .kategorie--bild {
    grid-template-columns: 10rem minmax(0, 1fr);
    grid-template-areas: "bild kopf" "bild text";
    align-items: start;
  }
}

/* Markenkarten bleiben die vorhandene .card-Komponente. Das Logo dient nur
   als schnelle Wiedererkennung; der ausgeschriebene Name bleibt die
   zugängliche und verlässliche Bezeichnung. */
.brand-card {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  min-height: 8.5rem;
}
.brand-card__mark {
  width: 5.5rem;
  height: 3.75rem;
  display: grid;
  place-items: center;
  padding: var(--space-2);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
}
.brand-card__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-card__mark--own img { color: var(--color-primary); }
/* Marken ohne offiziell verfuegbares Logo bekommen eine ruhige
   Buchstabenmarke, damit die Rasterkante nicht bricht. */
.brand-card__mark--letter {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes-small);
  font-size: var(--text-lg);
  color: var(--color-primary-deep);
  background: var(--color-primary-wash);
  border-color: var(--color-primary-light);
}
.brand-card__copy { min-width: 0; }
.brand-card__copy h3 {
  overflow-wrap: anywhere;
}
@media (max-width: 399px) {
  .brand-card {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--space-4);
  }
  .brand-card__mark { width: 4.5rem; }
}

/* Definitionsliste, z. B. Öffnungszeiten */
.rows { border-top: var(--hairline); }
.rows > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: var(--hairline);
  font-size: var(--text-sm);
}
.rows dt, .rows > div > span:first-child { color: var(--color-text-muted); }
.rows dd, .rows > div > span:last-child { font-weight: 600; text-align: right; }

/* `.rows` normally uses Rauch for its labels. On a sage surface that is only
   1.1:1 and effectively disappears — visible in the "Altes Häuschen" facts
   on an actual phone. On sage, both columns use the measured inverse text
   color (5.07:1); hierarchy comes from weight, never from low contrast. */
.section--sage .rows {
  border-top-color: rgb(253 251 247 / 0.42);
}
.section--sage .rows > div {
  border-bottom-color: rgb(253 251 247 / 0.42);
}
.section--sage .rows dt,
.section--sage .rows > div > span:first-child,
.section--sage .rows dd,
.section--sage .rows > div > span:last-child {
  color: var(--color-text-inverse);
}

/* Platzhalter — wird schrittweise entfernt */
.placeholder {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: 62ch;
}
.placeholder__tag {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary-deep);
}
.placeholder ul { margin-top: var(--space-3); }

/* Embed-Slots (Ecwid, Resmio, Maps, Trustpilot) */
.embed-slot {
  min-height: 260px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding: var(--space-8);
}
.embed-slot strong { display: block; color: var(--color-text); margin-bottom: 4px; }

/* Häuschen als blasses Wasserzeichen */
.haeuschen-watermark {
  position: absolute;
  right: -2%;
  bottom: -8%;
  width: min(420px, 42%);
  opacity: 0.1;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.haeuschen {
  width: min(340px, 74%);
  margin-inline: auto;
  mix-blend-mode: multiply;
}

/* ═══════════════════════════════════════════════
   PROSE (Rechtsseiten, Langtexte)
   ═══════════════════════════════════════════════ */

.prose { max-width: 72ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-12);
  padding-bottom: var(--space-3);
  border-bottom: var(--hairline);
}
.prose h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-primary-deep);
  margin-top: var(--space-8);
}
.prose p, .prose li { font-size: var(--text-sm); line-height: 1.7; }
.prose ul, .prose ol { padding-left: var(--space-5); }
.prose li + li { margin-top: var(--space-1); }
.prose .stand { font-size: var(--text-xs); color: var(--color-text-muted); }

.prose .address-block {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.8;
}
.prose .highlight-box {
  background: var(--color-primary-wash);
  border-left: 2px solid var(--color-primary);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
}
.prose .warning-box {
  background: var(--color-accent-wash);
  border-left: 2px solid var(--color-accent);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
}
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.prose th {
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.prose td { padding: var(--space-3); border-bottom: var(--hairline); }
.prose .table-scroll { overflow-x: auto; }
.prose .widerruf-form {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.8;
}
/* Ausfülllinien im Widerrufsformular: fluide statt fester Pixelbreiten —
   200–400 px sprengten sonst den 390-px-Bildschirm. */
.prose .form-line {
  display: inline-block;
  border-bottom: 1px solid var(--color-border);
  margin: var(--space-2) 0;
  min-height: 24px;
  max-width: 100%;
  vertical-align: bottom;
}
.prose .form-line--sm { width: min(200px, 100%); }
.prose .form-line--md { width: min(260px, 100%); }
.prose .form-line--lg { width: min(300px, 100%); }
.prose .form-line--xl { width: min(400px, 100%); }

/* Lange URLs in Rechtstexten (PayPal, Datenschutzlinks) brechen sonst nicht
   und schieben die ganze Seite auf. */
.prose p, .prose li, .prose td, .prose strong, .prose a { overflow-wrap: anywhere; }

/* Rechts-Subnavigation */
.legal-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.legal-nav a {
  padding: 0.4rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}
.legal-nav a:hover { border-color: var(--color-primary); color: var(--color-primary-deep); }
.legal-nav a[aria-current="page"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */

.site-footer {
  background: var(--color-surface-offset-2);
  padding-block: clamp(3rem, 6vw, 6rem) var(--space-6);
}
.footer-grid { display: grid; gap: var(--space-10); }
@media (min-width: 760px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; gap: var(--space-8); }
}
.footer-col h4 {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  /* Rauch reaches only 4.30:1 on Sandstein. Salbei Tief reaches 6.31:1. */
  color: var(--color-primary-deep);
  margin-bottom: var(--space-5);
}
.footer-col ul { list-style: none; padding: 0; }
.footer-col li + li { margin-top: var(--space-3); }
.footer-col a { font-size: var(--text-sm); color: var(--color-text); border: none; }
.footer-col a:hover { color: var(--color-primary-deep); }
.footer-col p { font-size: var(--text-sm); color: var(--color-primary-deep); }

.footer-brand .brand { margin-bottom: var(--space-5); }
.footer-brand .brand__mark { width: 38px; height: 38px; }
.footer-hours strong { display: block; color: var(--color-text); font-weight: 600; }

.footer-bottom {
  margin-top: clamp(3rem, 5vw, 5rem);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-primary-deep);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer-bottom a { color: var(--color-primary-deep); border: none; }
.footer-bottom a:hover { color: var(--color-primary-deep); }

/* ═══════════════════════════════════════════════
   MARKE
   Original-Aquarelllogo: oben im Header groß und
   zentriert sowie im Footer jeder Seite.
   Kompaktmarke (assets/logo-mark.svg): in der
   eingeklappten Leiste — dort ist der feine
   Schriftzug des Originals nicht mehr lesbar.
   ═══════════════════════════════════════════════ */

.footer-brand .brand__logo { width: auto; height: 132px; }



/* ═══════════════════════════════════════════════
   TERMINE & EVENTS
   ═══════════════════════════════════════════════ */

.events { border-top: var(--hairline); }

.event {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-6);
  border-bottom: var(--hairline);
}
@media (min-width: 720px) {
  .event {
    grid-template-columns: 10.5rem 1fr auto;
    gap: var(--space-8);
    align-items: baseline;
  }
}
.event__date {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary-deep);
  font-variant-numeric: tabular-nums;
}
.event__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.2;
}
.event__body { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); max-width: 56ch; }
.event__tag {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-wash);
  color: var(--color-primary-deep);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.event__tag--brick { background: var(--color-accent-wash); color: var(--color-accent-hover); }

/* ═══════════════════════════════════════════════
   JOURNAL (Blog)
   ═══════════════════════════════════════════════ */

.post {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border: none;
}
.post .frame { margin-bottom: var(--space-1); }
.post__meta {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.post__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text);
  transition: color var(--transition-fast);
}
.post:hover .post__title { color: var(--color-primary-deep); }
.post:hover .frame { border-color: var(--color-primary-light); }
.post__excerpt { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Artikel-Layout */
.article { max-width: 42rem; margin-inline: auto; }
.article > * + * { margin-top: var(--space-5); }
.article h2 { font-size: var(--text-xl); margin-top: var(--space-10); }
.article p { font-size: var(--text-base); line-height: 1.75; max-width: none; }
.article .lead { font-size: var(--text-lg); color: var(--color-text); max-width: none; }
.article figure { margin-block: var(--space-10); }
.article blockquote {
  border-left: 2px solid var(--color-primary);
  padding-left: var(--space-5);
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--text-lg);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════
   INSTAGRAM-FEED
   ═══════════════════════════════════════════════ */

.ig-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 700px)  { .ig-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .ig-grid { grid-template-columns: repeat(6, 1fr); gap: var(--space-4); } }

.ig-tile {
  position: relative;
  aspect-ratio: 1;
  border: var(--frame);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-offset);
  border-bottom-width: 1px;
}
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.ig-tile:hover { border-color: var(--color-primary-light); }

.ig-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.ig-handle {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary-deep);
  border: none;
}

/* Hinweis zu Einbettungen / Zustimmung */
.consent-note {
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  max-width: 62ch;
}

/* ═══════════════════════════════════════════════
   BADGES & TAGS
   Pillen sind neben Buttons das einzige runde
   Element auf der Seite (Art Direction, Regel 5).
   ═══════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-wash);
  color: var(--color-primary-deep);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: none;
}
.badge--neutral { background: var(--color-surface-offset); color: var(--color-text-muted); }
.badge--brick   { background: var(--color-accent-wash);  color: var(--color-accent-hover); }
/* Als Text zwingend die tiefen Varianten: --color-success auf seiner
   eigenen Wäsche erreicht nur 4,1:1 und fällt damit durch. */
.badge--success { background: var(--color-success-wash);  color: var(--color-success-deep); }
.badge--warning { background: var(--color-warning-wash);  color: var(--color-warning-deep); }
.badge--outline { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-muted); }

/* ═══════════════════════════════════════════════
   HINWEISE
   Fläche + 2px Kante links, kein Icon-Zoo.
   Global verfügbar; .prose erbt dieselbe Optik.
   ═══════════════════════════════════════════════ */

.notice {
  border-left: 2px solid var(--color-primary);
  background: var(--color-primary-wash);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 68ch;
}
.notice > * + * { margin-top: var(--space-2); }
.notice strong { display: block; }
.notice--warning { border-left-color: var(--color-warning); background: var(--color-warning-wash); }
.notice--error   { border-left-color: var(--color-error);   background: var(--color-error-wash); }
.notice--success { border-left-color: var(--color-success); background: var(--color-success-wash); }
.notice--brick   { border-left-color: var(--color-accent);  background: var(--color-accent-wash); }
.notice--quiet   { border-left-color: var(--color-border);  background: var(--color-surface-offset); color: var(--color-text-muted); }

/* ═══════════════════════════════════════════════
   TABELLEN
   Kopfzeile als Eyebrow, Haarlinien statt Gitter.
   ═══════════════════════════════════════════════ */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.table td { padding: var(--space-3); border-bottom: var(--hairline); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: none; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table caption {
  caption-side: bottom;
  padding-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: left;
}

/* ═══════════════════════════════════════════════
   SPEISE- & GETRÄNKEKARTE
   Zwei ruhige Aufmacher statt eines Bildes pro Gericht:
   visuelle Orientierung, ohne aus der Karte eine Galerie
   und aus 129 Positionen eine endlose Bilderstrecke zu machen.
   ═══════════════════════════════════════════════ */

.menu-sprungmarken { margin-block: var(--space-6) var(--space-12); }
.menu-gruppe {
  scroll-margin-top: 0;   /* Abstand zur Leiste regelt main.js / html scroll-padding */
}
.menu-gruppe + .menu-gruppe {
  margin-top: var(--section-y-sm);
  padding-top: var(--section-y-sm);
  border-top: var(--hairline);
}
.menu-gruppe__kopf {
  align-items: center;
  margin-bottom: var(--space-12);
}
.menu-abschnitt + .menu-abschnitt { margin-top: var(--space-12); }
.menu-abschnitt__titel {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes-small);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.25;
}
/* Eine Zeile ohne Bild bleibt exakt wie vorher. Erst mit Bild wird aus der
   Zelle ein zweispaltiges Raster — so kostet die neue Möglichkeit nichts,
   solange Andrea sie nicht nutzt. */
.menu-position--bild {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.menu-position__bild {
  display: block;
  width: 6rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.menu-position__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease;
}
.menu-position__bild:hover img { transform: scale(1.035); }
.menu-position__bild:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
.menu-position__text { min-width: 0; }

/* Abschnittskopf mit Bild: Passepartout links, Überschrift rechts. Ohne Bild
   wird dieser Block nie gerendert — der textliche Kopf bleibt unverändert. */
.menu-abschnitt__kopf {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}
.menu-abschnitt__bild {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.menu-abschnitt__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms ease;
}
.menu-abschnitt__bild:hover img { transform: scale(1.02); }
.menu-abschnitt__bild:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
.menu-abschnitt__text { min-width: 0; }

/* ── Aufpreise ───────────────────────────────────
   Ein Upgrade ist keine Bestellung für sich. Drei Mittel, alle leise:
   eine Zeile „Dazu wählbar" über dem Block, ein Eukalyptus-Strich an der
   linken Kante und ein Name in normaler Strichstärke statt fett. Kein
   Farbfeld, keine zweite Tabelle — die Karte soll ruhig bleiben. */

/* Ab 640 px ist die Karte eine echte Tabelle; darunter wird jede Zeile zu
   einer Karte und braucht andere Regeln (weiter unten). Deshalb steht die
   Tischfassung ausdrücklich in ihrer eigenen Abfrage — sonst gewinnt sie
   über Spezifität auch auf dem Telefon und rückt doppelt ein. */
@media (min-width: 640px) {
  .menu-tabelle tr.menu-zeile--aufpreis-kopf td {
    padding-bottom: 0;
    border-bottom: none;
    border-left: 2px solid var(--color-primary-light);
    padding-left: calc(var(--space-3) + var(--space-4));
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .menu-tabelle tr.menu-zeile--aufpreis td {
    border-bottom: none;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  .menu-tabelle tr.menu-zeile--aufpreis td:first-child {
    border-left: 2px solid var(--color-primary-light);
    padding-left: calc(var(--space-3) + var(--space-4));
  }
  /* Die letzte Zeile eines Aufpreis-Blocks bekommt die Trennlinie zur
     nächsten Position zurück — sonst kleben Block und Folgegericht.
     Welche das ist, sagt content.js; `:has()` wäre kürzer, aber diese
     Karte soll auch auf älteren Geräten im Gastraum stimmen. */
  .menu-tabelle tr.menu-zeile--aufpreis-ende td {
    padding-bottom: var(--space-3);
    border-bottom: var(--hairline);
  }
}
.menu-position__name { color: var(--color-text); }

@media (max-width: 767px) {
  /* Auf dem Telefon steht das Bild über der Überschrift und nutzt die
     ganze Breite — nebeneinander wären beide zu klein zum Lesen. */
  .menu-abschnitt__kopf {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

@media (max-width: 639px) {
  /* Eine dreispaltige Preistabelle zwingt auf dem Telefon zum seitlichen
     Schieben. Hier wird jede Position zu einer kompakten, beschrifteten
     Zeile: Gericht oben, Kennzeichnung und Preis darunter. Desktop bleibt
     eine echte Tabelle. */
  .menu-tabelle thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .menu-tabelle,
  .menu-tabelle tbody,
  .menu-tabelle tr,
  .menu-tabelle td { display: block; width: 100%; }
  .menu-tabelle tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-4);
    padding-block: var(--space-4);
    border-bottom: var(--hairline);
  }
  .menu-tabelle td {
    padding: 0;
    border: 0;
  }
  .menu-tabelle td:first-child { grid-column: 1 / -1; }
  /* Die Blockregel für Tabellenzellen oben ist spezifischer — hier holen wir
     das Raster für Bildzeilen bewusst zurück, sonst rutscht das Bild auf dem
     Telefon über den Text und die Karte wird doppelt so lang. */
  .menu-tabelle td.menu-position--bild {
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
  }
  .menu-position__bild { width: 5.25rem; }
  .menu-tabelle td.num {
    display: block;
    text-align: left;
    white-space: normal;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }
  .menu-tabelle td.num:last-child { text-align: right; color: var(--color-text); }
  .menu-tabelle td.num--leer { display: none; }   /* kein Preis eingetragen → keine leere „Preis:“-Zeile */
  .menu-tabelle td.num::before {
    content: attr(data-label) ": ";
    font-weight: 400;
    color: var(--color-text-muted);
  }

  /* Aufpreise: In der Kartenansicht trägt die Zeile selbst Rahmen und
     Abstände — die Einrückung muss deshalb hier noch einmal gesetzt
     werden, sonst steht der Block bündig unter dem Gericht. */
  .menu-tabelle tr.menu-zeile--aufpreis-kopf,
  .menu-tabelle tr.menu-zeile--aufpreis {
    border-left: 2px solid var(--color-primary-light);
    padding-left: var(--space-4);
    border-bottom: none;
  }
  .menu-tabelle tr.menu-zeile--aufpreis-kopf {
    padding-block: var(--space-4) 0;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .menu-tabelle tr.menu-zeile--aufpreis { padding-block: var(--space-3); }
  .menu-tabelle tr.menu-zeile--aufpreis-ende {
    padding-bottom: var(--space-4);
    border-bottom: var(--hairline);
  }
  .menu-tabelle tr.menu-zeile--aufpreis-kopf td,
  .menu-tabelle tr.menu-zeile--aufpreis td { padding-left: 0; border-left: none; }
}

/* ═══════════════════════════════════════════════
   FORMULARE
   Scharfe Kanten, Rahmen statt Füllung, Fokus als
   Salbei-Ring. Fehler stehen als Text unter dem
   Feld — nie nur als rote Umrandung (Farbe allein
   ist keine Information).
   ═══════════════════════════════════════════════ */

.form { max-width: 40rem; }
.form > * + * { margin-top: var(--space-6); }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field-row { display: grid; gap: var(--space-6); }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }

.label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.label .req { color: var(--color-accent); margin-left: 2px; }
.label .opt {
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: var(--space-2);
  font-size: var(--text-xs);
}

.input, .textarea, .select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  appearance: none;
}
.textarea { min-height: 9.5rem; resize: vertical; }

.select {
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236e675f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  cursor: pointer;
}

.input::placeholder, .textarea::placeholder { color: var(--color-text-faint); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-primary-light); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  border-color: var(--color-primary);
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 1px;
}

.input[disabled], .textarea[disabled], .select[disabled] {
  background: var(--color-surface-offset);
  border-color: var(--color-divider);
  color: var(--color-text-faint);
  cursor: not-allowed;
}
.input[readonly] { background: var(--color-surface-offset); }

/* Fehler: Rahmen, Wäsche UND Text darunter */
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: var(--color-error);
  background: var(--color-error-wash);
}
.input[aria-invalid="true"]:focus-visible,
.textarea[aria-invalid="true"]:focus-visible,
.select[aria-invalid="true"]:focus-visible { outline-color: var(--color-error); }

.hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-error);
}
.field-error::before { content: '↑'; line-height: 1.3; }
.field-error[hidden] { display: none; }

/* Checkbox & Radio — eigener Kasten, damit die Kante scharf bleibt */
.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
  cursor: pointer;
}
.check input {
  appearance: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  flex-shrink: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.check input[type="radio"] { border-radius: var(--radius-full); }
.check:hover input { border-color: var(--color-primary-light); }
.check input:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.2 4.3 8.5 11 1.5' stroke='%23fdfbf7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.check input[type="radio"]:checked {
  background-image: none;
  box-shadow: inset 0 0 0 4px var(--color-surface);
}
.check input[aria-invalid="true"] { border-color: var(--color-error); background-color: var(--color-error-wash); }
.check a { font-size: inherit; }

.check-group { display: flex; flex-direction: column; gap: var(--space-3); }
fieldset { border: none; }
legend { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-3); }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-2);
}
.form-actions .hint { flex: 1 1 16rem; }

/* Rückmeldung nach dem Absenden */
.form-message { display: none; }
.form-message.is-visible { display: block; }

/* ═══════════════════════════════════════════════
   LEERE ZUSTÄNDE & LADEN
   ═══════════════════════════════════════════════ */

.empty {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}
.empty svg { width: 30px; height: 30px; color: var(--color-primary-light); margin: 0 auto var(--space-5); }
.empty h3 { margin-bottom: var(--space-2); }
.empty p { color: var(--color-text-muted); font-size: var(--text-sm); max-width: 40ch; margin-inline: auto; }
.empty .btn-row { justify-content: center; margin-top: var(--space-6); }

.skeleton {
  background: linear-gradient(90deg,
    var(--color-surface-offset) 0%,
    var(--color-surface) 50%,
    var(--color-surface-offset) 100%);
  background-size: 220% 100%;
  border-radius: var(--radius-xs);
  animation: skeleton 1.5s ease-in-out infinite;
}
.skeleton--text { height: 0.85em; margin-block: 0.35em; }
.skeleton--text.is-short { width: 55%; }
.skeleton--title { height: 1.6em; width: 70%; margin-bottom: var(--space-4); }
.skeleton--image { aspect-ratio: 4 / 5; width: 100%; border-radius: var(--radius-sm); }
@keyframes skeleton { to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--color-surface-offset); }
}

/* ═══════════════════════════════════════════════
   SCHRITT 07 · ZUSTIMMUNG
   Eigene Leiste, unten, nie über dem Hero.
   „Nur notwendige" ist derselbe Button-Typ wie
   „Alle akzeptieren" — gleiche Größe, gleiche
   Farbe, gleiche Reihe. Keine Dark Patterns.
   ═══════════════════════════════════════════════ */

.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-consent);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  transform: translateY(102%);
  transition: transform var(--transition-slow);
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.consent.is-in { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

body.has-consent-banner { padding-bottom: var(--consent-h); }

.consent__inner {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-6);
}
@media (min-width: 900px) {
  .consent:not(.consent--expanded) .consent__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-10);
  }
}

.consent__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes-small);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: var(--tracking-head);
  margin-bottom: var(--space-2);
}
.consent__title:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.consent__text p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 68ch;
  line-height: 1.6;
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
/* Bis 480 px sitzen drei Buttons nebeneinander nicht mehr lesbar —
   dann volle Breite untereinander, gleiche Reihenfolge, gleiche Gewichtung. */
@media (max-width: 479px) {
  .consent__actions { display: grid; gap: var(--space-2); }
  .consent__actions .btn { width: 100%; }
}

.consent__settings {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-2) var(--space-1);
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}
@media (min-width: 900px) {
  .consent__settings { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
}
.consent__cat .check { align-items: flex-start; }
/* Titel und „immer aktiv" bilden EINE Zeile — als Block darunter sah der
   Zusatz aus wie ein eingerückter zweiter Punkt statt wie ein Vermerk. */
.consent__cat strong { display: inline; }
.consent__cat small {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.consent__always {
  display: inline-block;
  margin-left: var(--space-2);
  font-style: normal;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary-deep);
}

/* Widerruf im Footer — sieht aus wie die Rechtslinks daneben,
   ist aber ein Button, weil es keine Seite öffnet. */
.footer-bottom .consent-reopen {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-primary-light);
}
.footer-bottom .consent-reopen:hover { color: var(--color-primary-deep); }

/* ═══════════════════════════════════════════════
   SCHRITT 07 · EINBETTUNGEN
   Ein Slot, vier Zustände: gesperrt, ladend,
   live, gescheitert. Nie eine leere Fläche.
   ═══════════════════════════════════════════════ */

/* Sobald echter Inhalt drinsteht, verschwindet der gestrichelte
   Platzhalterrahmen — sonst rahmt er das fertige Widget ein. */
.embed-slot--live,
.embed-slot--failed {
  display: block;
  min-height: 0;
  border: none;
  background: none;
  padding: 0;
  text-align: left;
}
.embed-slot--busy {
  display: block;
  text-align: left;
  border-style: solid;
  border-color: var(--color-divider);
}

.embed-ph {
  max-width: 52ch;
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  text-align: center;
}
.embed-ph strong {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes-small);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
}
.embed-ph p { color: var(--color-text-muted); line-height: 1.6; }
.embed-ph .hint { font-size: var(--text-xs); max-width: 46ch; }
.embed-ph .btn-row { margin-top: var(--space-2); }

.embed-loading { width: 100%; }
.embed-loading .skeleton--title { max-width: 18rem; }

.embed-frame {
  display: block;
  width: 100%;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.embed-frame--resmio { height: 640px; }
.embed-frame--maps   { height: 420px; }
@media (max-width: 599px) {
  .embed-frame--resmio { height: 700px; }
  .embed-frame--maps   { height: 320px; }
}

/* ── Karte: statisch zuerst ────────────────────────────────────
   Das Bild liegt lokal. Kein Schlüssel, kein Fremd-Request,
   kein Cookie — und für „Waldpfad 3" die ehrlichere Lösung. */
.map-static {
  display: block;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-offset);
}
.map-static img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}
@media (max-width: 599px) {
  .map-static img { aspect-ratio: 4 / 3; }
}
.map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
}

/* ═══════════════════════════════════════════════
   SCHRITT 07 · SHOP
   ═══════════════════════════════════════════════ */

.shop-skeleton {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
@media (max-width: 699px) { .shop-skeleton { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Warenkorb-Zähler in der Kopfzeile */
.icon-btn { position: relative; }
.cart-count {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
}

/* Ecwid an „Sonnenhaus" annähern.
   Alles bleibt unter #ecwid-storefront gekapselt: das Fremd-Theme
   darf keine Tokens überschreiben und nichts außerhalb anfassen. */
#ecwid-storefront {
  --ecwid-primary-color: var(--color-primary);
  font-family: var(--font-body);
  /* Volle Breite erzwingen. Ecwid schrumpft die Kontoseite ab der Größe „l“
     auf 832 px, misst sich dann als kleiner, nimmt „l“ wieder weg, wächst —
     und so weiter, 60-mal pro Sekunde: sichtbares Flackern auf dem Desktop
     (28.09.2026, /shop/account bei 1280–1920 px). */
  width: 100% !important;
}
#ecwid-storefront .ec-store,
#ecwid-storefront .ec-size,
#ecwid-storefront .ec-wrapper { font-family: var(--font-body); }

#ecwid-storefront .form-control--button,
#ecwid-storefront .ec-store button.form-control--button,
#ecwid-storefront .details-product-purchase__place button {
  border-radius: var(--radius-full);
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
}
#ecwid-storefront .form-control--button:hover,
#ecwid-storefront .details-product-purchase__place button:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

#ecwid-storefront .grid-product__title-inner,
#ecwid-storefront .product-details__product-title,
#ecwid-storefront .grid-category__title-inner {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes-small);
  font-weight: 500;
  letter-spacing: var(--tracking-head);
  color: var(--color-text);
}

#ecwid-storefront .grid-product__image,
#ecwid-storefront .grid-category__image,
#ecwid-storefront .ec-store img { border-radius: var(--radius-xs); }

#ecwid-storefront .ec-link,
#ecwid-storefront a { color: var(--color-primary-deep); }

#ecwid-storefront .ec-store__content-wrapper,
#ecwid-storefront .ec-store__categories-page { background: transparent; }

#ecwid-storefront .form-control__text,
#ecwid-storefront .form-control__select {
  border-radius: var(--radius-xs);
  border-color: var(--color-border);
}

/* Ecwids eigenes schwebendes Warenkorb-Symbol bleibt aus —
   wir haben eines in der Kopfzeile, zwei wären ein Widerspruch. */
.ec-minicart, .ec-cart-widget--floating { display: none !important; }

/* ═══════════════════════════════════════════════
   SCHRITT 07 · INSTAGRAM-KACHELN
   ═══════════════════════════════════════════════ */

.ig-tile { position: relative; }
.ig-tile--skeleton { border-color: var(--color-divider); }
.ig-tile--skeleton .skeleton { width: 100%; height: 100%; border-radius: 0; }
.ig-tile__badge {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-full);
  background: rgb(34 31 27 / 0.62);
  color: var(--color-text-inverse);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Aufklappbare interaktive Karte auf kontakt.html.
   Zugeklappt bleibt die Seite ruhig; wer sie braucht, findet sie. */
.map-more {
  margin-top: var(--space-8);
  border-top: var(--hairline);
  padding-top: var(--space-5);
  max-width: 68ch;
}
.map-more > summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary-deep);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
}
.map-more > summary::-webkit-details-marker { display: none; }
.map-more > summary::before {
  content: '+';
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  line-height: 1;
}
.map-more[open] > summary::before { content: '–'; }
.map-more > summary:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.map-more .embed-slot { margin-top: var(--space-5); }

/* Auf sehr schmalen Geräten frisst eine dritte volle Schaltfläche
   rund 60 px Höhe, ohne eine Entscheidung zu sein. „Einstellungen"
   wird dort zum Textlink — die beiden echten Entscheidungen
   („Alle akzeptieren" / „Nur notwendige") bleiben unverändert
   gleich groß, gleich gefärbt und gleich gewichtet. */
@media (max-width: 479px) {
  .consent__inner { padding-block: var(--space-5); gap: var(--space-4); }
  .consent__text p { font-size: var(--text-xs); line-height: 1.55; }
  .consent__actions .btn--ghost {
    border-color: transparent;
    background: none;
    padding-block: var(--space-2);
    min-height: 40px;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--color-primary-deep);
  }
}

/* ═══════════════════════════════════════════════
   SCHRITT 07 · BEWERTUNGEN
   Eigene Darstellung aus data/bewertungen.json.
   Kein Fremd-Widget, kein Request, keine Zustimmung.
   ═══════════════════════════════════════════════ */

.reviews { margin-top: var(--space-10); }

.reviews__head { max-width: 68ch; }
.reviews__source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.reviews__what {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.reviews__score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.reviews__score strong { color: var(--color-text); }

.reviews__grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px)  { .reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .reviews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.review {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.review blockquote {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text);
  /* Anführungszeichen als Zeichen, nicht als Grafik — sie gehören
     zur Typografie, nicht zur Dekoration. */
  quotes: '\201E' '\201C';
  flex: 1;
}
.review blockquote::before { content: open-quote; }
.review blockquote::after  { content: close-quote; }
.review figcaption {
  display: grid;
  gap: 2px;
  padding-top: var(--space-4);
  border-top: var(--hairline);
  font-size: var(--text-xs);
}
.review figcaption strong { color: var(--color-text); font-size: var(--text-sm); }
.review figcaption span { color: var(--color-text-muted); }

.stars { display: inline-flex; gap: 2px; }
.stars .star { width: 15px; height: 15px; fill: var(--color-border); flex: none; }
.stars .star.is-on { fill: var(--color-sun); stroke: var(--color-warning); stroke-width: 0.6; }

.reviews__foot { margin-top: var(--space-8); }
.reviews__foot .hint { margin-top: var(--space-3); max-width: 68ch; }

@media print {
  .reviews__foot .btn { display: none; }
}

/* Google Customer Reviews: Händler-Siegel für ONLINE-Bestellungen.
   Das offizielle Siegel selbst kommt von Google; alle Zustände davor
   verwenden ausschließlich bestehende Sonnenhaus-Komponenten. */
.gcr-slot { margin-top: var(--space-8); }
.gcr-slot > .empty { max-width: none; }
.gcr-slot--live {
  min-height: 80px;
  display: flex;
  align-items: center;
}
.reviews-archive {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--hairline);
  max-width: 68ch;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.reviews-archive .link-arrow { margin-left: var(--space-1); }

/* ═══════════════════════════════════════════════
   VORSCHAU-LEISTE (Schritt 08)
   Erscheint ausschließlich mit ?vorschau=1, also nur
   für Andrea aus dem Editor heraus. Bewusst Backstein:
   eine Vorschau darf nicht wie die echte Seite aussehen.
   Steht im Fluss über dem Kopf und scrollt mit weg — fest
   oben verdeckte sie auf dem Handy Menü und Pop-up-Knöpfe.
   ═══════════════════════════════════════════════ */

.vorschau-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--gutter);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  text-align: center;
}
.vorschau-bar strong { font-weight: 600; }
.vorschau-bar a { color: var(--color-text-inverse); text-decoration: underline; }
.vorschau-bar a:hover { border-color: transparent; }
@media print { .vorschau-bar { display: none; } }

/* Listen aus Editor-Texten (Aufzählung / nummeriert) */
.text-liste { margin: 0.35em 0 0.35em 1.25em; padding: 0; }
ul.text-liste { list-style: disc; }
ol.text-liste { list-style: decimal; }
.text-liste > li { display: list-item; margin: 0.1em 0; padding: 0; }
.text-liste > li::before { content: none; }

/* Kopfzeile auf dem Telefon: fünf Symbole (Suche, Konto, Warenkorb,
   Reservieren, Menü) plus Marke müssen ab 320 px in eine Zeile passen. */
@media (max-width: 1023px) {
  .header-bar { gap: var(--space-2); }
  .header-actions { gap: 2px; }
  .header-actions .icon-btn { width: 36px; height: 36px; }
}
@media (max-width: 419px) {
  .site-header > .container { padding-inline: 14px; }
  .header-actions .icon-btn { width: 34px; height: 34px; }
  .icon-btn--reservieren svg { width: 20px; height: 20px; }
}
@media (max-width: 359px) {
  .brand--compact .brand__text { display: none; }
}

/* ═══════════════════════════════════════════════
   STELLENANGEBOTE (aktuelles.html#jobs)
   Eine Stelle = ein Panel. Sichtbar: Titel, Eckdaten-Pillen, erster
   Absatz und der Weg zur Bewerbung. Der Rest klappt unter „Details“
   auf — so bleiben drei Stellen auf dem Telefon überschaubar.
   ═══════════════════════════════════════════════ */

.jobs { display: grid; gap: var(--space-6); max-width: 64rem; }
.jobs__intro { max-width: 60ch; color: var(--color-text-muted); }
.jobs__intro p + p { margin-top: var(--space-3); }

.job {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-primary-light);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
}
@media (min-width: 720px) { .job { padding: var(--space-8); } }
.job:target { border-left-color: var(--color-primary); }

.job__titel { font-size: var(--text-xl); }
.job__pillen { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.job__pillen .badge { white-space: normal; }
.job__lead { margin-top: var(--space-4); max-width: 65ch; }

.job__details { margin-top: var(--space-5); border-top: var(--hairline); padding-top: var(--space-4); }
.job__details > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary-deep);
}
.job__details > summary::-webkit-details-marker { display: none; }
.job__details > summary::before {
  content: '+';
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-full);
  line-height: 1;
}
.job__details[open] > summary::before { content: '–'; }
.job__details > summary:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.job__inhalt { margin-top: var(--space-4); }
.job__inhalt > p { max-width: 65ch; }
.job__inhalt > p + p { margin-top: var(--space-3); }

.job__bloecke { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
@media (min-width: 720px) { .job__bloecke { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-10); } }
.job__block-titel {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-primary-light);
  margin-bottom: var(--space-3);
}
.job__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.job__liste li { position: relative; padding-left: 1.25rem; font-size: var(--text-sm); }
.job__liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary-light);
}
/* „Das bieten wir dir“ als Fläche — das ist der Teil, der überzeugt. */
.job__block:last-child:nth-child(4) {
  background: var(--color-primary-wash);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
}
.job__block:last-child:nth-child(4) .job__liste li::before { background: var(--color-primary); }

.job__aktion { margin-top: var(--space-6); }
.job__bewerbung { max-width: 65ch; margin-bottom: var(--space-4); }
.job__kontakt { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }

/* Sprunglinks ohne JavaScript (Fallback): Überschrift direkt unter der Leiste.
   Mit JavaScript übernimmt main.js (springeZu) und rechnet genauer. */
.section[id]        { scroll-margin-top: calc(var(--section-y) * -1); }
.section--tight[id] { scroll-margin-top: calc(var(--section-y-sm) * -1); }

/* Schlusssatz unter den Öffnungszeiten (Café-Seite) */
/* Volle Breite wie die Tabelle darüber (auch die Absätze selbst) */
.zeiten-hinweis { margin-top: var(--space-8); max-width: none; color: var(--color-text-muted); }
.zeiten-hinweis p { max-width: none; }
.zeiten-hinweis p + p { margin-top: var(--space-4); }
.zeiten-hinweis:empty { display: none; }

/* ═══════════════════════════════════════════════
   PARTNER AUS DER REGION (Café-Seite)
   ═══════════════════════════════════════════════ */
.partner-kopf { display: grid; gap: var(--space-4); max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.partner-raster { display: grid; gap: var(--space-6); }
@media (min-width: 760px) { .partner-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); } }
.partner-karte {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--transition-interactive);
}
.partner-karte:hover { border-color: var(--color-primary-light); }
.partner-karte__bild { display: block; aspect-ratio: 3 / 2; background: var(--color-surface); border-bottom: 1px solid var(--color-divider); }
.partner-karte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.partner-karte__text { display: grid; gap: var(--space-3); padding: var(--space-6); align-content: start; flex: 1; }
@media (min-width: 720px) { .partner-karte__text { padding: var(--space-8); } }
.partner-karte__ort { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary-deep); font-weight: 600; }
.partner-karte h3 { margin: 0; }
.partner-karte__text .link-arrow { justify-self: start; margin-top: var(--space-2); }

/* ═══════════════════════════════════════════════
   SPEISEKARTE — Abschnitte „Extras“ (Darstellung im Editor)
   Bewusst leiser als die Gerichte: kleine Schrift, gedämpfte Farbe,
   mehrspaltig, kein Bild, keine Tabellenköpfe.
   ═══════════════════════════════════════════════ */
.menu-abschnitt--extras {
  background: var(--color-surface-offset);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-5) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
@media (min-width: 720px) { .menu-abschnitt--extras { padding: var(--space-6) var(--space-8) var(--space-5); } }
.menu-extras__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-4); }
.menu-extras__titel {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
.menu-extras__hinweis { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; max-width: none; }
.menu-extras { list-style: none; padding: 0; margin: 0; columns: 1; column-gap: var(--space-10); }
@media (min-width: 640px)  { .menu-extras { columns: 2; } }
@media (min-width: 1100px) { .menu-extras { columns: 3; } }
.menu-extras__punkt { break-inside: avoid; padding-block: 0.3rem; border-bottom: 1px dotted var(--color-divider); }
.menu-extras__zeile { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.menu-extras__name { color: var(--color-text); }
.menu-extras__kennung { font-size: 0.7em; color: var(--color-text-muted); margin-left: 0.2em; letter-spacing: 0.02em; }
.menu-extras__preis { font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-extras__info { display: block; font-size: var(--text-xs); line-height: 1.4; }

/* Extras mit Zwischenüberschriften: Gruppen nebeneinander, je eine kurze Liste */
.menu-extras-gruppen { display: grid; gap: var(--space-6) var(--space-10); }
@media (min-width: 640px)  { .menu-extras-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .menu-extras-gruppen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.menu-extras--einspaltig { columns: 1 !important; }
.menu-extras__gruppentitel {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes-small);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
/* Gruppe in einem Abschnitt („Unsere Lieblingsfrühstücke“, „Schwarztee“):
   eigene Überschrift mit feinem Strich, optional ein Satz darunter. */
.menu-tabelle tr.menu-zeile--zwischentitel th {
  padding: var(--space-8) var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-primary-light);
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes-small);
  font-size: var(--text-lg);
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--color-primary-deep);
  text-align: left;
}
.menu-tabelle tr.menu-zeile--zwischentitel:first-child th { padding-top: var(--space-4); }
.menu-gruppe__titel { display: block; }
.menu-gruppe__titel::before { content: ''; display: inline-block; width: 0.45em; height: 0.45em; margin-right: 0.5em;
  border-radius: 50%; background: var(--color-accent); vertical-align: 0.15em; }
.menu-gruppe__text { display: block; margin-top: var(--space-1); font-family: var(--font-body); font-size: var(--text-sm);
  font-variation-settings: normal; color: var(--color-text-muted); letter-spacing: 0; }
@media (max-width: 639px) {
  .menu-tabelle tr.menu-zeile--zwischentitel { display: block; border-bottom: 0; }
  .menu-tabelle tr.menu-zeile--zwischentitel th { display: block; padding-inline: 0; }
}

/* Café → Speisekarte: Link zur Allergen- & Zusatzstoffliste unten im Ausklapper */
.nav-karte__fuss { grid-column: 1 / -1; border-top: 1px solid var(--color-divider); margin-top: var(--space-1); padding-top: var(--space-2); }
.nav-dropdown a.nav-karte__pdf { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); padding: 0.35rem var(--space-3); white-space: nowrap; }
.nav-dropdown a.nav-karte__pdf::before {
  content: 'PDF'; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
  border: 1px solid currentColor; border-radius: 3px; padding: 0 0.25rem; line-height: 1.5;
}
.nav-mobile__pdf::after { content: ' · PDF'; color: var(--color-text-muted); font-size: 0.85em; }

/* v0.2-18: Tageskarte mit Gerichten — eigener Block über der Speisekarte */
.menu-tageskarte { background: var(--color-surface-offset, #f3ede3); border-radius: var(--radius-lg, 16px);
  padding: clamp(1.25rem, 3vw, 2.5rem); margin-bottom: var(--space-10, 2.5rem); }
.menu-tageskarte__kopf { margin-bottom: var(--space-4, 1rem); }
.menu-tageskarte .menu-abschnitt__titel:empty { display: none; }

/* v0.2-22: Sorten („Zur Wahl“) — Varianten desselben Gerichts, ohne
   Aufpreis. Gleiche Einrückung wie „Dazu wählbar“, aber warmer Strich,
   damit man die beiden Blöcke auseinanderhält. */
.menu-tabelle tr.menu-zeile--variante-kopf td,
.menu-tabelle tr.menu-zeile--variante td:first-child { border-left-color: var(--color-accent, #b0553a) !important; }
.menu-tabelle tr.menu-zeile--variante-kopf td { color: var(--color-accent, #b0553a); }
@media (max-width: 639px) {
  .menu-tabelle tr.menu-zeile--variante-kopf,
  .menu-tabelle tr.menu-zeile--variante { border-left-color: var(--color-accent, #b0553a); }
}

/* ═══════════════════════════════════════════════
   POP-UP (v0.2-23) — Editor → Pop-ups, Logik in content.js
   Handy: Karte von unten, Bild oben. Ab 760 px: Bild links, Text rechts.
   ═══════════════════════════════════════════════ */
html.popup-offen { overflow: hidden; }
.popup {
  position: fixed; inset: 0; z-index: calc(var(--z-consent) + 5);
  display: grid; place-items: end center;
  padding: var(--space-3);
}
@media (min-width: 640px) { .popup { place-items: center; padding: var(--space-6); } }
.popup__hintergrund {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--color-text) 46%, transparent);
  opacity: 0; transition: opacity 240ms var(--ease);
}
.popup__karte {
  position: relative;
  width: min(100%, 30rem);
  max-height: calc(100dvh - 2 * var(--space-3));
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-overlay);
  opacity: 0; transform: translateY(18px);
  transition: opacity 260ms var(--ease), transform 320ms var(--ease);
}
.popup.is-offen .popup__hintergrund { opacity: 1; }
.popup.is-offen .popup__karte { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .popup__hintergrund, .popup__karte { transition: none; }
}
.popup__bild { aspect-ratio: 3 / 2; background: var(--color-surface-offset); }
.popup__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.popup__inhalt { padding: var(--space-6) var(--space-6) var(--space-8); display: grid; gap: var(--space-3); justify-items: start; }
.popup__inhalt .eyebrow { margin: 0; }
.popup__titel {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); line-height: 1.08; letter-spacing: -0.01em;
  color: var(--color-text); padding-right: var(--space-8);
}
.popup__karte--bild .popup__titel { padding-right: 0; }
.popup__text { color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.6; }
.popup__text > * { margin: 0 0 var(--space-3); }
.popup__text > :last-child { margin-bottom: 0; }
.popup__knopf { margin-top: var(--space-2); }
.popup__zu {
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: var(--radius-full); cursor: pointer;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  color: var(--color-text);
  box-shadow: 0 1px 6px rgba(34, 31, 27, .14);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.popup__zu:hover { background: var(--color-surface); transform: scale(1.05); }
.popup__zu:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.popup__zu svg { width: 20px; height: 20px; }
@media (min-width: 760px) {
  .popup__karte--bild { width: min(100%, 52rem); display: grid; grid-template-columns: 1fr 1fr; }
  .popup__karte--bild .popup__bild { aspect-ratio: auto; min-height: 100%; }
  .popup__karte--bild .popup__inhalt { align-content: center; padding: var(--space-10) var(--space-8); }
  .popup__karte--bild .popup__titel { padding-right: var(--space-6); }
}

/* Hervorhebung an Gerichten („Sehr beliebt!“, „Neu!“, „Empfehlung des Hauses“ …) */
.menu-hervor { display: inline-block; margin-left: var(--space-2); padding: 0.1em 0.65em; border-radius: var(--radius-full);
  background: var(--color-accent); color: #fff; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.02em;
  line-height: 1.6; vertical-align: 0.12em; white-space: nowrap; }

/* „Vegan möglich“ (v0.2-30): gestrichelt wie in der Druckkarte */
.badge--vm { border-style: dashed; border-color: var(--color-primary); color: var(--color-primary); }

/* Farbvarianten der Hervorhebung (v0.2-47) */
.menu-hervor--grau  { background: #e6e3de; color: #45433f; }
.menu-hervor--gruen { background: #cfe1d5; color: #2f4a3f; }

/* ═══ Feiern im Alten Häuschen (feiern.html) ═══════════════════════ */
.feiern-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.feiern-foto { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-xl, 24px); }
.feiern-intro .stack > * + * { margin-top: var(--space-4); }
.feiern-punkte { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; gap: var(--space-3); }
.feiern-punkte li { display: flex; gap: var(--space-3); align-items: baseline; }
.feiern-punkte i { color: var(--color-primary); width: 1.2em; flex: 0 0 auto; text-align: center; }
.schritte { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-12) 0 0; }
.schritt { background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-lg, 16px); padding: var(--space-6); }
.schritt .nr { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #f6dccb; color: #b0553a;
  font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; margin-bottom: var(--space-3); }
.schritt h3 { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; margin: 0 0 var(--space-2); }
.schritt p { margin: 0; color: var(--color-text-muted); }
.feiern-form-karte { background: #fffcf7; border: 1px solid var(--color-border); border-radius: var(--radius-xl, 24px);
  padding: var(--space-10); max-width: 54rem; margin-top: var(--space-8); }
.feiern-form-karte .form { max-width: none; }
.feiern-form-karte fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.feiern-form-karte fieldset > * + * { margin-top: var(--space-6); }
.feiern-form-karte fieldset + fieldset { margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--color-border); }
.feiern-form-karte legend { float: left; width: 100%; font-family: var(--font-display); font-size: 1.5rem; color: var(--color-primary-deep, #3d544b); padding: 0; margin: 0 0 var(--space-2); }
.feiern-form-karte legend + * { clear: both; }
.field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.wahl { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wahl label { position: relative; display: inline-flex; }
.wahl input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.wahl span { display: inline-block; padding: 0.55rem 1rem; border: 1px solid var(--color-border); border-radius: 999px; background: #fff;
  font-size: var(--text-sm); line-height: 1.3; transition: background-color .15s, border-color .15s; }
.wahl label:hover span { border-color: var(--color-primary-light, #8aa59a); }
.wahl input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.wahl input:checked + span { background: #e3ede6; border-color: var(--color-primary); color: var(--color-primary-deep, #3d544b); font-weight: 650; }
.wahl input:checked + span::before { content: "✓ "; }
.wahl input[aria-invalid="true"] + span { border-color: var(--color-error); }
@media (min-width: 640px) { .feiern-form-karte .field-row:not(.field-row--3) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .feiern-intro, .schritte { grid-template-columns: 1fr; }
  .feiern-foto { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .field-row--3 { grid-template-columns: 1fr 1fr !important; }
  .field-row--3 > .field:first-child { grid-column: 1 / -1; }
  .feiern-form-karte { padding: var(--space-6) var(--space-5, 1.25rem); }
}
.feiern-form-karte .field, .feiern-form-karte .field-row > *, .feiern-form-karte .input, .feiern-form-karte .textarea { min-width: 0; max-width: 100%; }
.feiern-form-karte input[type="date"], .feiern-form-karte input[type="time"] { min-height: 2.9rem; }

/* Feier-Anfrage in Schritten (js/feiern.js) */
.feiern-stepper { list-style: none; padding: 0; margin: 0 0 var(--space-8); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); counter-reset: none; }
.feiern-stepper button { all: unset; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; gap: var(--space-2); cursor: pointer;
  padding-top: var(--space-3); border-top: 3px solid var(--color-divider); font-size: var(--text-xs); color: var(--color-text-muted); }
.feiern-stepper button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.feiern-stepper button:disabled { cursor: default; color: var(--color-text-faint); }
.feiern-stepper b { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid var(--color-border);
  background: #fff; font-weight: 600; font-size: var(--text-xs); }
.feiern-stepper .is-fertig button { border-top-color: var(--color-primary-light); color: var(--color-primary-deep); }
.feiern-stepper .is-fertig b { background: var(--color-primary-wash); border-color: var(--color-primary-light); }
.feiern-stepper .is-aktiv button { border-top-color: var(--color-primary); color: var(--color-primary-deep); font-weight: 650; }
.feiern-stepper .is-aktiv b { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }
@media (max-width: 640px) { .feiern-stepper li:not(.is-aktiv) span { display: none; } }

.form.is-schritte .form-schritt > legend:focus { outline: none; }
.form.is-schritte .form-schritt { animation: schritt-ein .25s ease-out; }
@keyframes schritt-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .form.is-schritte .form-schritt { animation: none; } }
.form.is-schritte fieldset + fieldset { margin-top: 0; padding-top: 0; border-top: 0; }

.wahl--kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.wahl--kacheln label { display: flex; }
.wahl--kacheln span { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  text-align: center; border-radius: var(--radius-lg, 16px); padding: var(--space-4) var(--space-3); min-height: 5.5rem; hyphens: manual; }
.wahl--kacheln i { font-size: 1.3rem; color: var(--color-primary); }
.wahl--kacheln input:checked + span::before { content: none; }
.wahl--kacheln input:checked + span { box-shadow: inset 0 0 0 1px var(--color-primary); }

.feiern-hinweis { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md, 10px); background: var(--color-primary-wash);
  color: var(--color-primary-deep); font-size: var(--text-sm); border-left: 3px solid var(--color-primary); }
.feiern-hinweis--sanft { background: var(--color-surface-offset); color: var(--color-text); border-left-color: var(--color-primary-light); }

.zaehler { display: flex; align-items: stretch; gap: var(--space-2); }
.zaehler .input { flex: 1 1 auto; text-align: center; -moz-appearance: textfield; }
.zaehler .input::-webkit-inner-spin-button, .zaehler .input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.zaehler__knopf { flex: 0 0 2.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-md, 10px); background: #fff;
  font-size: 1.25rem; line-height: 1; color: var(--color-primary-deep); cursor: pointer; }
.zaehler__knopf:hover { border-color: var(--color-primary-light); }
.zaehler__knopf:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.feiern-zusammenfassung { background: var(--color-surface-offset); border-radius: var(--radius-lg, 16px); padding: var(--space-4) var(--space-5, 1.25rem); }
.feiern-zusammenfassung__titel { margin: 0 0 var(--space-3); font-weight: 650; font-size: var(--text-sm); }
.feiern-zusammenfassung dl { margin: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.feiern-zusammenfassung dl > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline; }
.feiern-zusammenfassung dt { color: var(--color-text-muted); }
.feiern-zusammenfassung dd { margin: 0; overflow-wrap: anywhere; }
.feiern-zusammenfassung .link-btn { all: unset; cursor: pointer; color: var(--color-primary-deep); text-decoration: underline; font-size: var(--text-xs); }
.feiern-zusammenfassung .link-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.form.is-schritte .form-actions { display: grid; grid-template-columns: auto 1fr auto; }
.form.is-schritte .form-actions #feiernZurueck { grid-column: 1; grid-row: 1; }
.form.is-schritte .form-actions #feiernWeiter, .form.is-schritte .form-actions #feiernSenden { grid-column: 3; grid-row: 1; }
.form.is-schritte .form-actions .hint { grid-column: 1 / -1; grid-row: 2; }


/* ── Häufige Fragen (faq.html) ─────────────────────────────── */
.faq-sprung { margin-bottom: var(--space-8); }
.faq-gruppe + .faq-gruppe { margin-top: var(--space-12); }
.faq-gruppe { scroll-margin-top: calc(var(--header-h, 4.5rem) + 1rem); }
.faq-liste { margin-top: var(--space-4); border-top: var(--hairline); max-width: 52rem; }
.faq { border-bottom: var(--hairline); scroll-margin-top: calc(var(--header-h, 4.5rem) + 1rem); }
.faq > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-4);
  min-height: 44px;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::before {
  content: '+';
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  margin-top: 2px;
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-full);
  color: var(--color-primary-deep);
  line-height: 1;
}
.faq[open] > summary::before { content: '–'; }
.faq > summary:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.faq__frage { font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; line-height: 1.45; margin: 0; }
.faq__antwort { padding: 0 0 var(--space-5) calc(24px + var(--space-3)); max-width: 65ch; }
.faq__antwort > * + * { margin-top: var(--space-3); }
.faq__antwort ul { padding-left: 1.1em; list-style: disc; }
.faq__antwort li + li { margin-top: var(--space-1); }
.faq__antwort a { color: var(--color-primary-deep); text-decoration: underline; text-underline-offset: 2px; }

/* Orte im Café: bei genau vier Orten 2 × 2 statt 3 + 1 (v0.2-68) */
@media (min-width: 940px) {
  [data-content="cafe-raeume"].grid--3:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}

/* Küchenzeiten nach Tagen (v0.2-69) */
.rows__kopf { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--color-primary-deep, #3d544b); }
[data-content="kuechenzeiten"] > .rows__kopf:first-child { margin-top: 0; }

/* Im Editor ausgeblendete Abschnitte und ihre Menüpunkte (js/content.js) */
[data-ausgeblendet] { display: none !important; }