/* ===============================================
   Alstercafé · Editorial Premium Design
   =============================================== */

:root {
  /* Helles Design erzwingen — verhindert Auto-Dark-Mode mancher Browser,
     der das warme Creme-Design sonst matschig-dunkel invertiert. */
  color-scheme: only light;

  /* Color */
  --espresso:  #2A1810;
  --bean:      #3D2415;
  --coffee:    #5C3C20;
  --warm:      #8B5A35;
  --cream:     #FAF5EC;
  --paper:     #FFFCF4;
  --linen:     #F1E7D3;
  --sand:      #E8D9BD;
  --gold:      #B8893E;
  --gold-soft: #D4B380;
  --gold-text: #8A6420; /* AA-konformes Gold für kleinen Fließtext (5.2:1 auf Paper) */
  --ink:       #1F140C;
  --muted:     #786152;
  --line:      #E0D2B8;
  --line-soft: #EFE5D2;

  /* Motion — Luxus bewegt sich langsam und mit Kontrolle */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   600ms;
  --dur-reveal: 550ms;

  /* Shadow — weiches Licht, keine schweren Schatten */
  --shadow-xs: 0 1px 2px rgba(42, 24, 16, 0.04);
  --shadow-sm: 0 6px 16px -8px rgba(42, 24, 16, 0.14);
  --shadow:    0 24px 60px -32px rgba(42, 24, 16, 0.22);
  --shadow-lg: 0 40px 100px -40px rgba(42, 24, 16, 0.28);

  /* Layout */
  --max:    1240px;
  --gutter: clamp(20px, 4vw, 32px);
  --radius-xs: 3px;
  --radius:    6px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
img { max-width: 100%; display: block; }
a {
  color: var(--coffee);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--bean); }

/* Focus — sichtbar nur bei Tastatur-Navigation */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection { background: var(--gold-soft); color: var(--bean); }

/* Custom Scrollbar (WebKit + Firefox) */
* { scrollbar-color: var(--coffee) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--coffee);
  border: 2px solid var(--paper);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--bean); }

/* Skip-to-Content (Accessibility) */
.skip-link {
  position: absolute;
  left: -10000px;
  top: 12px;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--bean);
  color: var(--paper);
  border-radius: 999px;
  font: 600 .82rem 'Inter', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.skip-link:focus {
  left: 12px;
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Subtile Papier-Textur auf Cream-Hintergründen */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .18;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 0.165 0 0 0 0 0.082 0 0 0 0 0.063 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}
@media (prefers-reduced-motion: reduce) { body::before { display: none; } }
header, footer, main, .topbar, .cookie-banner, .edit-fab, .notice-banner { position: relative; z-index: 2; }

/* (Spotlight entfernt — wirkt zu „designer-try-hard") */

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  color: var(--bean);
  letter-spacing: -0.018em;
  line-height: 1.06;
  margin: 0 0 .35em;
  font-variation-settings: "opsz" 96, "SOFT" 50;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); font-weight: 400; letter-spacing: -0.024em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 500; }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.012em; }
p  { margin: 0 0 1em; text-wrap: pretty; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ===== ICONS ===== */
.ico { width: 26px; height: 26px; color: currentColor; flex-shrink: 0; }
.ico-sm { width: 18px; height: 18px; }
.ico-card { width: 38px; height: 38px; color: var(--coffee); }

/* ===== EYEBROW ===== */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--coffee);
  margin: 0 0 22px;
}
.eyebrow.gold { color: var(--gold-text); } /* AA-konform auf hellem Grund */
.eyebrow .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: 'Fraunces', serif;
  font-size: .76rem; font-style: italic; font-weight: 400;
  letter-spacing: 0;
  opacity: .7;
  transition: opacity var(--dur-base) var(--ease-out);
}
.reveal.in .eyebrow .num { opacity: 1; }
.eyebrow .num.light { color: var(--gold-text); }
/* Auf dunklen Kapiteln bleibt das helle Gold (hoher Kontrast auf Bean) */
.chapter-dark .eyebrow.gold,
.chapter-dark .eyebrow .num.light { color: var(--gold-soft); }

/* ===== TOPBAR ===== */
.topbar {
  background: var(--espresso);
  color: var(--linen);
  font-size: .85rem;
  letter-spacing: .04em;
}
.topbar-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 16px;
  padding: 9px 28px;
}
.topbar-link { display: inline-flex; align-items: center; gap: 8px; color: var(--linen); }
.topbar-link:hover { color: var(--gold-soft); }
.topbar-sep { color: var(--gold-soft); opacity: .5; }

/* ===== HEADER ===== */
.site-header,
.admin-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 252, 244, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled,
.admin-header.is-scrolled {
  background: rgba(255, 252, 244, 0.92);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-xs);
}
.nav-container {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter); gap: 18px;
  transition: padding var(--dur-base) var(--ease-out);
}
.is-scrolled .nav-container { padding-top: 12px; padding-bottom: 12px; }
.brand {
  display: flex; align-items: center; gap: 14px;
  color: var(--bean);
  transition: opacity var(--dur-base) var(--ease-out);
}
.brand:hover { opacity: .8; }
.brand-logo {
  width: 46px; height: 46px;
  border-radius: 50%; object-fit: cover;
  background: var(--bean);
  transition: transform var(--dur-base) var(--ease-out);
}
.is-scrolled .brand-logo { width: 38px; height: 38px; }
.brand-logo.small { width: 38px; height: 38px; }
.brand-name {
  font-family: 'Fraunces', serif;
  font-weight: 500; font-style: italic;
  font-size: 1.5rem;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 36;
}
.admin-pill {
  margin-left: 12px;
  padding: 4px 10px;
  background: var(--bean);
  color: var(--paper);
  border-radius: 999px;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-style: normal;
}

.primary-nav { display: flex; gap: 26px; align-items: center; }
/* Sprach-Umschalter (DE/EN) — dezente Pille am Ende der Navigation. */
.lang-toggle {
  font-family: 'Inter', sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--bean);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  line-height: 1;
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.lang-toggle:hover,
.lang-toggle:focus-visible {
  border-color: var(--gold);
  color: var(--gold-text);
  outline: none;
}
@media (min-width: 981px) and (max-width: 1120px) {
  .primary-nav { gap: 18px; }
  .primary-nav a { font-size: .92rem; }
}
.primary-nav a {
  color: var(--bean);
  font-size: .9rem;
  letter-spacing: .02em;
  position: relative;
  padding: 4px 0;
  transition: color var(--dur-base) var(--ease-out);
}
.primary-nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -4px;
  height: 1px; background: var(--gold);
  transition: right var(--dur-base) var(--ease-out);
}
.primary-nav a:hover { color: var(--coffee); }
.primary-nav a:hover::after,
.primary-nav a.is-active::after { right: 0; }

.nav-toggle {
  display: none;
  background: none; border: 0;
  width: 48px; height: 48px;
  cursor: pointer; padding: 12px;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block; height: 1.5px;
  background: var(--bean);
  margin: 6px 0;
  transform-origin: center;
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 980px) {
  .nav-toggle { display: block; position: relative; z-index: 1002; }
  .nav-toggle[aria-expanded="true"] span { background: var(--paper); }

  .primary-nav {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    background: var(--bean);
    padding: 120px var(--gutter) calc(80px + env(safe-area-inset-bottom, 0));
    margin: 0;
    border: 0;
    box-shadow: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
    z-index: 1001;
  }
  .primary-nav.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .primary-nav a {
    display: block;
    width: 100%;
    padding: 18px 0;
    border: 0;
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-variation-settings: "opsz" 80;
    font-size: clamp(1.7rem, 7vw, 2.4rem);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--paper);
    line-height: 1.15;
    opacity: 0.92;
    transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .primary-nav a:hover,
  .primary-nav a:focus-visible { opacity: 1; color: var(--gold-soft); outline: none; }
  .primary-nav a::after { display: none; }
  .primary-nav a.is-active { color: var(--gold-soft); opacity: 1; }
  .primary-nav .nav-shop {
    margin-top: 16px;
    font-size: clamp(0.9rem, 3.4vw, 1rem);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    opacity: 0.7;
  }

  /* Wenn Menue offen ist: Body-Scroll sperren */
  body.menu-open { overflow: hidden; }
  /* Header bleibt über dem Menue sichtbar (Brand + X-Toggle) */
  .site-header { z-index: 1002; }
  body.menu-open .site-header { background: transparent; box-shadow: none; }
  body.menu-open .brand-name,
  body.menu-open .brand-logo { filter: brightness(0) invert(1); }
}

.admin-actions { display: flex; gap: 18px; align-items: center; }
.user-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .82rem;
  color: var(--bean);
  letter-spacing: .02em;
  font-family: 'Inter', sans-serif;
}
.user-badge::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4FAE5A;
  box-shadow: 0 0 0 3px rgba(79, 174, 90, 0.18);
}
@media (max-width: 720px) {
  .user-badge { display: none; }
}

/* Live-Sync-Pille: zeigt der Inhaberin, ob Aenderungen gerade live auf
   alle Geraete synchronisiert werden. */
.sync-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .02em;
  font-family: 'Inter', sans-serif;
  color: var(--bean);
  white-space: nowrap;
}
.sync-pill .sync-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); flex: none;
}
.sync-pill.is-live {
  color: #2f7d3a; border-color: rgba(79, 174, 90, 0.45); background: rgba(79, 174, 90, 0.10);
}
.sync-pill.is-live .sync-dot {
  background: #4FAE5A; box-shadow: 0 0 0 3px rgba(79, 174, 90, 0.18);
}
.sync-pill.is-connecting .sync-dot { background: #C9A24B; }
.sync-pill.is-offline {
  color: #9A3412; border-color: rgba(194, 65, 12, 0.40); background: rgba(194, 65, 12, 0.08);
}
.sync-pill.is-offline .sync-dot { background: #C2410C; }
/* Auf kleinen Screens nur den farbigen Punkt zeigen (spart Platz, kein Overflow). */
@media (max-width: 720px) {
  .sync-pill { padding: 7px; gap: 0; }
  .sync-pill .sync-text { display: none; }
}

/* ===== BUTTONS ===== */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--bean);
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  min-height: 48px; /* Touch-Target iOS HIG */
  font-family: 'Inter', sans-serif;
  font-weight: 500; font-size: .9rem;
  letter-spacing: .06em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  cursor: pointer; text-align: center;
  position: relative;
  isolation: isolate;
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.08), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(0) scale(.98); }

.btn-primary {
  --btn-bg: var(--bean);
  --btn-fg: var(--paper);
}
.btn-primary:hover {
  --btn-bg: var(--espresso);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn-gold {
  --btn-bg: var(--gold);
  --btn-fg: var(--bean);
}
.btn-gold:hover {
  --btn-bg: #c79b48;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn-link {
  background: transparent;
  color: var(--bean);
  padding: 12px 2px;
  min-height: auto;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--bean);
  letter-spacing: .04em;
}
.btn-link::after { display: none; }
.btn-link:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
  transform: none;
}
.btn-link.light { color: var(--linen); border-bottom-color: var(--gold-soft); }
.btn-link.light:hover { color: var(--gold-soft); border-bottom-color: var(--gold-soft); }

/* ===== PAGE-HERO (Sub-Pages) ===== */
.page-hero {
  padding: clamp(80px, 10vw, 130px) 0 clamp(40px, 6vw, 60px);
  background:
    radial-gradient(900px 400px at 50% 0%, rgba(184, 137, 62, 0.08), transparent 60%),
    var(--paper);
}

/* Editorial Page-Hero (Ueber Uns) — riesiges Wasserzeichen + Jahres-Linie */
.page-hero-editorial {
  position: relative;
  overflow: hidden;
  padding: clamp(110px, 14vw, 180px) 0 clamp(60px, 8vw, 100px);
  /* Explizit, opak und hell — kein Verlauf, der irgendwo dunkel wirken koennte */
  background: var(--paper);
}
.page-hero-editorial > .container { position: relative; z-index: 1; }
.page-hero-watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-3deg);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(8rem, 22vw, 22rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--bean);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  font-variation-settings: "opsz" 144;
}
.page-hero-editorial h1 {
  font-size: clamp(3rem, 7vw, 5.6rem);
  line-height: 0.95;
  font-variation-settings: "opsz" 144;
}
/* Auf schmalen Screens das Wasserzeichen dezenter halten, damit
   Ueberschrift und Lead klar lesbar bleiben (kein matschiger Kopf). */
@media (max-width: 700px) {
  .page-hero-watermark { opacity: 0.035; font-size: clamp(6rem, 30vw, 11rem); }
}
.page-hero-editorial h1 em {
  font-style: italic;
  color: var(--gold);
}
.page-hero-meta {
  display: flex; align-items: center; gap: 16px;
  margin: 28px 0 14px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--bean);
}
.page-hero-year { letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.page-hero-year-line {
  flex: 0 0 80px;
  height: 1.5px;
  background: var(--gold);
  opacity: 0.7;
}
.page-hero h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 400;
  margin: 14px 0 24px;
  letter-spacing: -0.024em;
}
.page-breadcrumb {
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 28px;
  font-weight: 500;
}
.page-breadcrumb a { color: var(--coffee); }
.page-breadcrumb a:hover { color: var(--bean); }
.page-breadcrumb span {
  display: inline-block;
  margin: 0 8px;
  color: var(--gold-soft);
}
.page-lead {
  max-width: 640px;
  font-size: 1.1rem;
  color: var(--muted);
  margin: 0 0 8px;
  line-height: 1.6;
}

/* aktiver Nav-Link */
.primary-nav a.is-active { color: var(--gold); }
.primary-nav a.is-active::after { right: 0; }

/* ===== LANDING ===== */
.hero-landing { padding-bottom: 0; }

/* Today-Feature: heutiger Mittagstisch ganz prominent */
.today-feature {
  background:
    radial-gradient(900px 400px at 50% 0%, rgba(184, 137, 62, 0.18), transparent 60%),
    linear-gradient(160deg, var(--bean) 0%, var(--espresso) 100%);
  color: var(--linen);
  padding: clamp(60px, 8vw, 100px) 0;
  position: relative;
}
.today-feature::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.today-feature-inner {
  text-align: center;
  max-width: 720px;
}
.today-feature-inner .eyebrow {
  justify-content: center;
}
.today-feature-kicker {
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 18px;
  font-weight: 500;
}
.today-feature-dish {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--paper);
  line-height: 1.25;
  margin: 0 auto 14px;
  max-width: 640px;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 96;
}
.today-feature-side {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: rgba(241, 231, 211, .7);
  font-size: 1.1rem;
  margin: 0 0 36px;
  letter-spacing: -0.005em;
}
.today-feature-cta {
  display: flex; gap: 24px; justify-content: center; align-items: center; flex-wrap: wrap;
  margin-top: 18px;
}

/* Geschlossen / leer */
.today-feature[data-state="closed"] .today-feature-cta,
.today-feature[data-state="empty"]  .today-feature-cta { display: none; }
.today-feature[data-state="closed"] .today-feature-dish,
.today-feature[data-state="empty"]  .today-feature-dish {
  color: rgba(241, 231, 211, .85);
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.landing-cards { background: var(--paper); }

/* STICKY HEUTE-BAR (Startseite) */
.sticky-today {
  position: fixed;
  bottom: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0));
  left: 50%;
  transform: translateX(-50%) translateY(0);
  display: flex; align-items: center; gap: 14px;
  background: var(--bean);
  color: var(--paper);
  padding: 12px 20px 12px 22px;
  border-radius: 999px;
  box-shadow: 0 18px 40px -16px rgba(42, 24, 16, 0.55);
  z-index: 100;
  max-width: calc(100vw - 32px);
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  animation: stickySlide var(--dur-base) var(--ease-out);
}
@keyframes stickySlide {
  from { transform: translateX(-50%) translateY(120%); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
.sticky-today-tag {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 700;
  flex-shrink: 0;
}
.sticky-today-dish {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--paper);
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sticky-today-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gold);
  color: var(--bean);
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.sticky-today-cta:hover { transform: scale(1.04); color: var(--bean); }
.sticky-today-close {
  background: transparent; border: 0;
  color: var(--paper); opacity: 0.5;
  font-size: 1.3rem; line-height: 1;
  cursor: pointer; padding: 4px 8px;
  flex-shrink: 0;
}
.sticky-today-close:hover { opacity: 1; }
@media (max-width: 560px) {
  .sticky-today { padding: 10px 14px 10px 16px; gap: 10px; }
  .sticky-today-tag { display: none; }
  .sticky-today-dish { max-width: 160px; font-size: .92rem; }
  .sticky-today-cta { padding: 7px 12px; font-size: .78rem; }
}

/* Counter-Animation Style */
.counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  min-width: 1.2ch;
  color: var(--gold);
}

/* STAMP-STYLE-Button — Hover dreht leicht, Schatten wird tiefer */
.btn-stamp {
  position: relative;
  font-size: 1.02rem;
  padding: 18px 32px;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 24px -12px rgba(42, 24, 16, 0.35);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}
.btn-stamp:hover {
  transform: translateY(-2px) rotate(-1.2deg);
  box-shadow: 0 14px 32px -10px rgba(42, 24, 16, 0.5);
}
.btn-stamp:active { transform: translateY(0) rotate(-0.4deg); }

/* BRÖTCHEN-BESTELLSERVICE */
.order-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: start;
}
.order-fieldset { border: 0; padding: 0; margin: 0 0 40px; }
.order-legend {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--bean);
  margin-bottom: 8px;
  display: flex; align-items: baseline; gap: 12px;
  padding: 0;
}
.order-legend .num {
  font-style: italic;
  color: var(--gold);
  font-size: 1.1rem;
}
.order-hint { color: var(--muted); font-size: .92rem; margin: 0 0 22px; }

.broetchen-list { list-style: none; padding: 0; margin: 0; }
.broetchen-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
  transition: padding-left var(--dur-base) var(--ease-out);
}
.broetchen-row:first-child { border-top: 1px solid var(--line-soft); }
.broetchen-row.is-active { padding-left: 10px; }
.broetchen-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.broetchen-name {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.12rem;
  color: var(--bean);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.broetchen-badge {
  font-family: 'Inter', sans-serif;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #4a6f47;
  background: rgba(124, 161, 119, 0.14);
  padding: 3px 8px;
  border-radius: 999px;
}
.broetchen-desc { color: var(--muted); font-size: .88rem; line-height: 1.4; }

/* Mengen-Stepper */
.qty-stepper {
  display: inline-flex; align-items: center;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  overflow: hidden;
}
.qty-btn {
  width: 44px; height: 44px;
  border: 0; background: transparent;
  font-size: 1.4rem; line-height: 1;
  color: var(--bean);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.qty-btn:hover { background: var(--cream); }
.qty-btn:active { background: var(--linen); }
.qty-value {
  min-width: 34px; text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: 1rem;
  color: var(--bean);
}
.broetchen-row.is-active .qty-stepper { border-color: var(--gold); }
.broetchen-row.is-active .qty-value { color: var(--gold); }

/* Warenkorb-Sidebar */
.order-summary { position: sticky; top: 96px; }
.order-summary-card {
  background: var(--bean);
  color: var(--linen);
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 30px 70px -38px rgba(42, 24, 16, 0.6);
}
.order-summary-eyebrow {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-soft); font-weight: 700; margin: 0 0 12px;
}
.order-summary-count {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1; margin: 0 0 20px;
  color: var(--paper);
  font-variation-settings: "opsz" 144;
}
.order-summary-count #order-count { font-variant-numeric: tabular-nums; }
.order-summary-unit { font-style: italic; font-size: .5em; color: var(--gold-soft); }
.order-summary-list { list-style: none; padding: 0; margin: 0 0 18px; }
.order-summary-list li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(241, 231, 211, 0.12);
  font-size: .92rem;
}
.order-summary-qty { color: var(--gold-soft); font-variant-numeric: tabular-nums; font-weight: 600; }
.order-summary-empty { color: rgba(241, 231, 211, 0.5); font-style: italic; border-bottom: 0 !important; }
.order-min-note {
  font-size: .82rem; margin: 0 0 18px;
  color: rgba(241, 231, 211, 0.6);
}
.order-min-note.is-met { color: #9ed3a0; }
.order-min-note.is-below { color: var(--gold-soft); }
.order-submit { width: 100%; justify-content: center; }
.order-submit:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }
.order-summary-fineprint {
  font-size: .76rem; line-height: 1.5;
  color: rgba(241, 231, 211, 0.5);
  margin: 16px 0 0;
}
@media (max-width: 900px) {
  /* Auswahl zuerst, Warenkorb mit Submit darunter — klarer linearer Fluss */
  .order-grid { grid-template-columns: 1fr; gap: 28px; }
  .order-summary { position: static; }
}

/* .quotes-eyebrow wird noch von .reviews-Block verwendet (Markup-Stand
   nach Reviews-Refactor) — daher hier behalten, .landing-quotes selbst
   wurde mit den Fake-Quotes entfernt. */
.quotes-eyebrow {
  text-align: center;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 40px;
}
.quotes-eyebrow .num { color: var(--gold); margin-right: 8px; }

.landing-visit {
  background: var(--bean);
  color: var(--linen);
}
.landing-visit h2 { color: var(--paper); }
.landing-visit-inner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 50px;
  align-items: end;
}
.landing-visit .hours-list { margin: 0; }
.landing-visit .hours-list li {
  color: var(--linen);
  border-color: rgba(241, 231, 211, .15);
  font-size: 1rem;
}
.landing-visit .hours-list .time { color: var(--gold-soft); }
.landing-visit-cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
@media (max-width: 980px) {
  .landing-visit-inner { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .landing-visit-cta { flex-direction: row; align-items: center; flex-wrap: wrap; }
}

/* Landing-Visit Tagline */
.landing-visit-tag {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold-soft);
  margin: 8px 0 0;
  letter-spacing: -0.005em;
}

/* Persoenliche Begruessung — Maria als Mensch */
/* Brutalist Section-Shout: Riesiges Hintergrundwort als editorial Akzent */
.section-shout {
  position: absolute;
  top: 50%;
  left: -2vw;
  transform: translateY(-50%);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(8rem, 22vw, 22rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--bean);
  opacity: 0.05;
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
  font-variation-settings: "opsz" 144;
  user-select: none;
}
.section-shout.shout-light  { color: var(--gold); opacity: 0.08; }
.section-shout.shout-on-dark { color: var(--paper); opacity: 0.06; }
.today-feature, .landing-visit, .landing-closer { position: relative; overflow: hidden; }
.today-feature > .container,
.landing-greeting > .container,
.landing-visit > .container,
.landing-closer > .container { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .section-shout { font-size: clamp(6rem, 30vw, 14rem); left: -4vw; }
}

.landing-greeting {
  padding: clamp(70px, 9vw, 110px) 0;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.landing-greeting::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}
.landing-greeting-inner {
  max-width: 720px;
  text-align: center;
}
.landing-greeting .eyebrow { justify-content: center; }
.greeting-line {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  color: var(--bean);
  line-height: 1.05;
  margin: 8px 0 32px;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
.greeting-text {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 580px;
  margin: 0 auto 36px;
  text-align: left;
}
/* Editorial Drop-Cap auf dem ersten Buchstaben */
.greeting-text::first-letter {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 4.2rem;
  line-height: 1;
  float: left;
  margin: 6px 12px 0 0;
  padding-top: 6px;
  color: var(--bean);
  font-variation-settings: "opsz" 144;
}
.greeting-signature {
  display: flex; flex-direction: column; align-items: center;
  margin: 28px 0 0;
  gap: 6px;
}
.greeting-signature-name {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
.greeting-signature-role {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-top: 4px;
}

/* Warmer Abschluss am Ende der Startseite */
.landing-closer {
  padding: clamp(64px, 9vw, 100px) 0;
  text-align: center;
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(184, 137, 62, 0.08), transparent 60%),
    var(--cream);
}
.landing-closer-quote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--bean);
  max-width: 720px;
  margin: 0 auto 24px;
  line-height: 1.4;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 96;
}
.landing-closer-quote em { color: var(--gold); font-style: italic; }
.landing-closer-quote { font-size: clamp(1.8rem, 4.2vw, 3rem); line-height: 1.18; max-width: 820px; }
.landing-closer-note {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--muted);
  margin: 0 auto 36px;
  max-width: 720px;
  transform: rotate(-1.2deg) translateX(140px);
  display: inline-block;
}
.landing-closer-sign {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--bean);
  margin: 12px 0 0;
  font-weight: 400;
  line-height: 1.45;
  display: inline-block;
  text-align: left;
}
.landing-closer-sign em { color: var(--gold); font-style: italic; }
.closer-sign-line {
  display: block;
  width: 64px; height: 1.5px;
  background: var(--bean);
  margin: 0 auto 16px;
  transform: rotate(-2deg);
  opacity: 0.6;
}
@media (max-width: 760px) {
  .landing-closer-note { transform: rotate(-1.2deg); }
}

/* Croque-Highlight auf Speisekarte-Seite */
.menu-croque {
  margin-top: 64px;
  padding: clamp(36px, 5vw, 56px);
  background:
    radial-gradient(800px 300px at 100% 0%, rgba(184, 137, 62, 0.16), transparent 60%),
    var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-align: center;
}
.menu-croque h2 { margin: 8px 0 16px; }
.menu-croque p { color: var(--muted); max-width: 580px; margin: 0 auto 28px; line-height: 1.6; }

/* Belegte-Brötchen-CTA-Banner */
.menu-broetchen-cta {
  margin-top: 20px;
  padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 48px);
  background: var(--bean);
  color: var(--linen);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.menu-broetchen-cta .eyebrow { color: var(--gold-soft); justify-content: flex-start; }
.menu-broetchen-cta .eyebrow .num { color: var(--gold); }
.menu-broetchen-cta h2 { color: var(--paper); margin: 6px 0 12px; }
.menu-broetchen-cta p { color: rgba(241, 231, 211, 0.75); max-width: 460px; margin: 0; line-height: 1.6; }
.menu-broetchen-cta .btn { flex-shrink: 0; }
@media (max-width: 700px) {
  .menu-broetchen-cta { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* Reservation-Page eigener Background */
.reservation-page { background: linear-gradient(140deg, var(--bean), var(--espresso)); }
.lunch-page { background: linear-gradient(160deg, var(--bean) 0%, var(--espresso) 100%); }

/* ===== APP SPLASH ===== */
.app-splash {
  position: fixed; inset: 0;
  z-index: 9999;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: opacity .5s var(--ease-out);
}
.app-splash-logo {
  width: 64px; height: 64px;
  border-radius: 50%;
  opacity: 0;
  animation: splash-in .9s var(--ease-out) forwards;
}
.app-splash.is-leaving {
  opacity: 0;
}
@keyframes splash-in {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* ===== HERO ===== */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 600px at 100% 0%, rgba(184, 137, 62, 0.10), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  overflow: hidden;
  padding: 0;
}

/* Riesiges "Est. 2004" als Wasserzeichen rechts oben */
.hero-est {
  position: absolute;
  top: 8%;
  right: -3vw;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(6rem, 14vw, 14rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--bean);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
  font-variation-settings: "opsz" 144;
  transform: rotate(-4deg);
}

/* Marquee-Ticker am unteren Hero-Rand */
.hero-ticker {
  position: relative;
  background: var(--bean);
  color: var(--linen);
  overflow: hidden;
  border-top: 1px solid rgba(241, 231, 211, 0.12);
  border-bottom: 1px solid rgba(241, 231, 211, 0.12);
  z-index: 3;
}
.hero-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  white-space: nowrap;
  padding: 22px 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.55rem);
  animation: marquee 45s linear infinite;
  font-variation-settings: "opsz" 48;
}
.hero-ticker-track > span:nth-child(even) {
  color: var(--gold);
  font-style: normal;
  font-size: 0.85em;
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ticker-track { animation: none; }
}
.hero-ticker:hover .hero-ticker-track {
  animation-play-state: paused;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(1px 1px at 25% 30%, var(--sand), transparent 2px),
    radial-gradient(1px 1px at 75% 60%, var(--sand), transparent 2px),
    radial-gradient(1px 1px at 45% 80%, var(--sand), transparent 2px);
  background-size: 200px 200px, 250px 250px, 180px 180px;
  opacity: .5; pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent, var(--paper));
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
  padding-top: clamp(70px, 9vw, 110px);
  padding-bottom: clamp(90px, 11vw, 130px);
}
/* Live-Status-Pille (Aktuell geöffnet / geschlossen) */
.live-status {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 18px;
  padding: 8px 16px;
  background: rgba(255, 252, 244, 0.6);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 500 .82rem 'Inter', sans-serif;
  letter-spacing: .02em;
  color: var(--coffee);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fade-in var(--dur-base) var(--ease-out) .2s backwards;
}
.live-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #999;
}
.live-status[data-state="open"] {
  border-color: rgba(74, 168, 91, 0.32);
  color: #2c6d3a;
  background: rgba(74, 168, 91, 0.08);
}
.live-status[data-state="open"] .live-status-dot {
  background: #4aa85b;
  box-shadow: 0 0 0 0 rgba(74, 168, 91, .5);
  animation: pulse-green 2.4s var(--ease-in-out) infinite;
}
.live-status[data-state="closed"] {
  border-color: rgba(146, 64, 56, 0.22);
  color: #8d3f37;
  background: rgba(179, 56, 44, 0.05);
}
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 168, 91, .35); }
  50%      { box-shadow: 0 0 0 6px rgba(74, 168, 91, 0); }
}

.hero-text h1 {
  display: flex; flex-direction: column;
  font-family: 'Fraunces', serif;
  margin: 12px 0 32px;
  font-size: clamp(3.4rem, 8.6vw, 6.5rem);
  line-height: .92;
  letter-spacing: -0.032em;
  font-variation-settings: "opsz" 144;
}
.hero-text h1 .head-1,
.hero-text h1 .head-2,
.hero-text h1 .head-3 {
  display: block;
  opacity: 0;
  transform: translateY(20px);
  animation: hero-line var(--dur-reveal) var(--ease-out) forwards;
}
.hero-text h1 .head-1 { animation-delay: 80ms; }
.hero-text h1 .head-2 { animation-delay: 200ms; }
.hero-text h1 .head-3 {
  color: var(--coffee);
  font-weight: 400;
  margin-top: .08em;
  font-style: italic;
  font-variation-settings: "opsz" 144;
  animation-delay: 340ms;
}
.hero-text h1 .head-3 em { font-style: italic; }
@keyframes hero-line {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-text h1 .head-1,
  .hero-text h1 .head-2,
  .hero-text h1 .head-3 { opacity: 1; transform: none; animation: none; }
}
.hero-text .lead {
  max-width: 520px;
  font-size: 1.08rem;
  color: var(--muted);
  margin-bottom: 36px;
  line-height: 1.6;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }

/* Mocambo-Partner-Badge */
.hero-partner {
  display: inline-flex; align-items: center; gap: 14px;
  margin: 36px 0 0;
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  animation: fade-in 1s var(--ease-out) 1.2s backwards;
}
.hero-partner-line {
  width: 36px; height: 1px;
  background: var(--gold-soft);
  flex-shrink: 0;
}
.hero-partner em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.05em;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--coffee);
  margin-left: 4px;
}
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Hero-Visual — Editorial-Mark statt Illustration */
.hero-visual {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 360px;
}
.hero-mark {
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  text-align: center;
  padding: 38px 32px 34px;
  border: 1.5px solid var(--bean);
  border-radius: 50% / 12%;
  position: relative;
  background:
    radial-gradient(180px 80px at 50% 0%, rgba(184, 137, 62, 0.08), transparent 70%),
    transparent;
  transform: rotate(-3deg);
  transition: transform var(--dur-slow) var(--ease-out);
  animation: fade-in 1.2s var(--ease-out) .4s backwards;
  max-width: 320px;
  margin: 0 auto;
}
.hero-mark::before,
.hero-mark::after {
  content: '';
  position: absolute;
  border: 1px solid var(--bean);
  border-radius: inherit;
  opacity: 0.35;
  pointer-events: none;
}
.hero-mark::before { inset: 6px; }
.hero-mark::after  { inset: -10px; opacity: 0.18; }
.hero-mark:hover { transform: rotate(0deg) scale(1.02); }
.hero-mark-logo {
  width: 140px; height: 140px;
  border-radius: 50%;
  background: var(--bean);
  object-fit: cover;
}
.hero-mark-meta {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--bean);
  font-weight: 600;
}
.hero-mark-line { display: block; }
.hero-mark-line:first-child::before { content: 'Est. 2004  ·  '; color: var(--gold); }
.hero-mark-big {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--bean);
  margin: 6px 0;
  font-variation-settings: "opsz" 96;
}
@media (max-width: 760px) {
  .hero-mark { padding: 28px 24px; max-width: 280px; transform: rotate(-2deg); }
  .hero-mark-logo { width: 110px; height: 110px; }
}
/* (Cup-Illustration entfernt — Hero arbeitet jetzt mit Editorial-Typografie) */

/* ===== SECTION ===== */
.section {
  padding: clamp(72px, 9vw, 130px) 0;
  position: relative;
  /* Performance: Browser muss Sektionen ausserhalb des Viewports
     nicht rendern → schnellerer initialer Paint, weniger Speicher */
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}
.hero, .page-hero, .topbar, .site-header, .site-footer {
  /* Above-the-fold: niemals "skip" rendern */
  content-visibility: visible;
}

.section-head { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.section-head .eyebrow { justify-content: center; }
.section-sub {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 580px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .section { padding: 64px 0; }
  .section-head { margin-bottom: 44px; }
}

/* ===== MITTAGSTISCH ===== */
.lunch {
  background:
    radial-gradient(800px 400px at 80% 100%, rgba(184, 137, 62, 0.15), transparent 60%),
    linear-gradient(160deg, var(--bean) 0%, var(--espresso) 100%);
  color: var(--linen);
  position: relative;
}
.lunch::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 40%, rgba(255,255,255,.04) 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.04) 1px, transparent 2px);
  background-size: 80px 80px;
  pointer-events: none;
}
.lunch .container { position: relative; }
.lunch-head { text-align: center; max-width: 700px; margin: 0 auto 42px; }
.lunch-head h2 { color: var(--paper); }
.lunch-head .eyebrow { justify-content: center; }
.lunch-meta {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--gold-soft);
  font-size: 1rem;
  letter-spacing: .04em;
  margin: 0;
}

.lunch-today {
  max-width: 760px; margin: 0 auto 56px;
  text-align: center;
  padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 48px);
  border: 1px solid rgba(212, 179, 128, 0.28);
  border-radius: var(--radius-md);
  background:
    radial-gradient(800px 200px at 50% 0%, rgba(212, 179, 128, 0.10), transparent 60%),
    rgba(255, 252, 244, 0.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 244, 0.04),
    0 30px 80px -40px rgba(0, 0, 0, 0.5);
  position: relative;
}
.lunch-today::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}
.lunch-today-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px;
  border: 1px solid rgba(212, 179, 128, 0.4);
  border-radius: 999px;
  color: var(--gold-soft);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 24px;
  font-weight: 600;
}
.lunch-today-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 137, 62, 0.25);
}
@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 137, 62, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(184, 137, 62, 0); }
}
.lunch-today-dish {
  font-family: 'Fraunces', serif;
  font-weight: 400; font-style: italic;
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  color: var(--paper);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 820px;
  margin: 0 auto 18px;
  font-variation-settings: "opsz" 144;
}
.lunch-today-side {
  color: rgba(241, 231, 211, .8);
  margin-bottom: 28px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
}
.lunch-today .btn-gold { margin-top: 8px; }

.lunch-empty {
  max-width: 600px; margin: 0 auto 40px; text-align: center;
  padding: 28px;
  border: 1px dashed rgba(212, 179, 128, 0.3);
  border-radius: var(--radius);
}
.lunch-empty-text {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 1.1rem; color: rgba(241, 231, 211, .85);
  margin: 0;
  line-height: 1.5;
}
.lunch-empty-text a {
  color: var(--gold);
  border-bottom: 1px solid rgba(184, 137, 62, .5);
  text-decoration: none;
  white-space: nowrap;
}
.lunch-empty-text a:hover { color: var(--gold-soft); border-bottom-color: var(--gold-soft); }

.lunch-week {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
}
.lunch-week.lunch-week-empty {
  display: block;
  grid-template-columns: none;
}
.lunch-week-empty-card {
  padding: 36px 32px;
  border: 1px dashed rgba(212, 179, 128, 0.4);
  border-radius: 14px;
  background: rgba(255, 252, 244, 0.04);
  text-align: center;
}
.lunch-week-empty-title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--gold-soft);
  line-height: 1.3;
  margin: 0 0 10px;
}
.lunch-week-empty-text {
  color: rgba(241, 231, 211, .75);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.55;
}
.lunch-week-empty-text a {
  color: var(--gold);
  border-bottom: 1px solid rgba(184, 137, 62, .5);
  text-decoration: none;
  white-space: nowrap;
}
.lunch-day {
  padding: 24px 20px 22px;
  border: 1px solid rgba(241, 231, 211, .10);
  border-radius: 14px;
  background: rgba(255, 252, 244, 0.025);
  display: flex; flex-direction: column;
  min-height: 200px;
  position: relative;
  transition:
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.lunch-day:hover {
  border-color: rgba(212, 179, 128, 0.4);
  background: rgba(255, 252, 244, 0.045);
  transform: translateY(-3px);
}
.lunch-day-head {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(241, 231, 211, .12);
}
.lunch-day-name {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  color: var(--gold-soft);
  line-height: 1;
  font-variation-settings: "opsz" 96;
}
.lunch-day-date {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(241, 231, 211, .45);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.lunch-day.is-today { border-color: var(--gold); background: rgba(184, 137, 62, 0.06); }
.lunch-day.is-today .lunch-day-name { color: var(--gold); }
.lunch-day-body {
  font-family: 'Fraunces', serif;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--paper);
  display: flex; flex-direction: column; gap: 6px;
}
.lunch-day-side {
  font-size: .85rem;
  font-style: italic;
  color: rgba(241, 231, 211, .65);
}
.lunch-pending,
.lunch-closed {
  font-style: italic;
  color: rgba(241, 231, 211, .4);
  font-size: .9rem;
}
.lunch-note {
  text-align: center;
  color: rgba(241, 231, 211, .55);
  font-size: .88rem;
  max-width: 540px;
  margin: 0 auto;
}

/* ===== ABOUT ===== */
.about { background: var(--paper); }
.about-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 70px; align-items: start;
}
.about-text .lead-soft { font-size: 1.06rem; color: var(--muted); margin-bottom: 32px; }
.features {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 28px;
}
.features li {
  display: flex; gap: 14px; align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.features .ico { color: var(--gold); width: 26px; height: 26px; }
.features strong {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--bean);
}
.about-aside {
  position: sticky; top: 120px;
  padding: 44px 40px;
  background:
    radial-gradient(600px 200px at 0% 0%, rgba(184, 137, 62, 0.06), transparent 60%),
    var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.about-aside::before {
  content: '\201E';
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 4rem;
  line-height: .8;
  color: var(--gold-soft);
  margin-bottom: 8px;
}
.about-aside blockquote {
  margin: 0; padding: 0;
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 400;
  font-style: italic;
  color: var(--bean);
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 48;
}
.about-aside blockquote em { color: var(--gold); }

/* ===== SPEISEKARTE ===== */
.menu { background: var(--paper); }
.menu-cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px;
}
.menu-col { position: relative; }
.menu-col-num {
  position: absolute;
  top: -56px; right: -8px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 1;
  color: var(--bean);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.02em;
}
.menu-col-head {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 1;
}
.menu-col-head .ico { color: var(--gold); }
.menu-col-head h3 { margin: 0; font-size: 1.4rem; }
.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-list li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 5px;
  transition: padding-left var(--dur-base) var(--ease-out);
}
.menu-list li:last-child { border-bottom: 0; }
.menu-list li:hover { padding-left: 8px; }
.menu-list strong {
  font-family: 'Fraunces', serif;
  font-weight: 500; font-size: 1.08rem;
  color: var(--bean);
  letter-spacing: -0.005em;
  position: relative;
  display: inline-block;
}
.menu-list strong::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: -2px;
  height: 1px;
  background: var(--gold);
  transition: right var(--dur-base) var(--ease-out);
}
.menu-list li:hover strong::after { right: 30%; }
.menu-list span {
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.5;
}

/* ===== RESERVIERUNG ===== */
.reservation {
  background:
    radial-gradient(800px 500px at 0% 0%, rgba(184, 137, 62, 0.18), transparent 60%),
    linear-gradient(140deg, var(--bean), var(--espresso));
  color: var(--linen);
}
.reservation h2 { color: var(--paper); }
.reservation-grid {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: 70px; align-items: start;
}
.reservation-intro p { color: rgba(241, 231, 211, .85); margin-bottom: 26px; }

.reservation-form {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(32px, 4vw, 44px);
  box-shadow: var(--shadow);
}
.reservation-form label {
  display: block;
  margin-bottom: 16px;
  font-size: .8rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.reservation-form label > span { display: block; margin-bottom: 8px; }
.reservation-form em { color: var(--gold); font-style: normal; }
.reservation-form input,
.reservation-form select,
.reservation-form textarea {
  width: 100%;
  font: 400 1rem 'Inter', sans-serif;
  text-transform: none; letter-spacing: 0;
  color: var(--ink);
  background: var(--paper);
  border: none;
  border-bottom: 1.5px solid var(--line);
  border-radius: 0;
  padding: 14px 0;
  transition:
    border-color var(--dur-base) var(--ease-out),
    padding var(--dur-base) var(--ease-out);
}
.reservation-form input:focus,
.reservation-form select:focus,
.reservation-form textarea:focus {
  outline: none;
  border-bottom-color: var(--bean);
  border-bottom-width: 1.5px;
}
.reservation-form input:focus-visible,
.reservation-form select:focus-visible,
.reservation-form textarea:focus-visible {
  outline: none;
  box-shadow: 0 1px 0 var(--gold);
  border-bottom-color: var(--gold);
}
.reservation-form textarea { resize: vertical; min-height: 60px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-row.three { grid-template-columns: repeat(3, 1fr); }
.reservation-form label.checkbox {
  display: flex; align-items: flex-start; gap: 12px;
  text-transform: none; letter-spacing: 0;
  font-size: .85rem; color: var(--muted);
  font-weight: 400;
}
.reservation-form label.checkbox input { width: auto; margin-top: 4px; }
.reservation-form label.checkbox span { display: inline; margin: 0; }
.form-submit {
  width: 100%; margin-top: 14px;
  position: relative;
  transition: all var(--dur-base) var(--ease-out);
}
.form-submit.is-loading,
.order-submit.is-loading {
  pointer-events: none;
  color: transparent !important;
}
.form-submit.is-loading::before,
.order-submit.is-loading::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--paper);
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.form-submit.is-success,
.order-submit.is-success {
  background: #2e7d32 !important;
  border-color: #2e7d32 !important;
}
.form-status {
  margin-top: 14px;
  font-size: .9rem;
  min-height: 1.2em;
  line-height: 1.5;
  transition: color var(--dur-base) var(--ease-out);
}
.form-status.error { color: #b3382c; }
.form-status.ok    { color: #2e7d32; }

/* ===== KONTAKT (kombiniert mit Öffnungszeiten) ===== */
.contact { background: var(--cream); }
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: 60px; align-items: stretch;
}
.contact-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin: 26px 0 32px;
}
.col-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.col-value {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  color: var(--bean);
  line-height: 1.5;
  margin: 0 0 10px;
}
.col-value a { color: var(--bean); }
.col-link {
  display: inline-block;
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.col-link:hover { color: var(--bean); border-bottom-color: var(--bean); }
.social { display: flex; gap: 18px; flex-wrap: wrap; }
.social a {
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bean);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line);
}
.social a:hover { border-bottom-color: var(--gold); color: var(--gold); }

.hours-inline { padding-top: 28px; border-top: 1px solid var(--line); }
.hours-list { list-style: none; padding: 0; margin: 6px 0 0; }
.hours-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  color: var(--bean);
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list .time { color: var(--coffee); font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.map-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  min-height: 460px;
  position: relative;
}
.map-card iframe { width: 100%; height: 100%; min-height: 460px; border: 0; }
@media (max-width: 760px) {
  .map-card { min-height: 320px; }
  .map-card iframe { min-height: 320px; }
}

/* ===== FOOTER ===== */
.site-footer {
  background: var(--espresso);
  color: var(--linen);
  padding: 64px 0 0;
  border-top: 1px solid rgba(212, 179, 128, 0.08);
  position: relative;
  overflow: hidden;
}
/* Riesiger Footer-Wordmark — laeuft am unteren Rand entlang, abgeschnitten */
.site-footer::after {
  content: 'Alstercafé';
  display: block;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(7rem, 24vw, 24rem);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--linen);
  opacity: 0.10;
  text-align: center;
  margin: 16px 0 -2.5vw;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  font-variation-settings: "opsz" 144;
}
.footer-grid {
  display: grid; grid-template-columns: 1fr 1.4fr 1fr;
  gap: 40px; align-items: center;
}
.footer-brand {
  display: flex; align-items: center; gap: 16px;
  font-size: .88rem;
  color: rgba(241, 231, 211, .55);
  letter-spacing: .02em;
}
.footer-brand strong {
  color: var(--linen);
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}
.footer-nav {
  display: flex; flex-wrap: wrap;
  gap: 8px 24px; justify-content: center;
}
.footer-nav a {
  color: var(--linen);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
  transition: opacity var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.footer-nav a:hover { opacity: 1; color: var(--gold-soft); }
.footer-meta {
  text-align: right;
  font-size: .76rem;
  color: rgba(241, 231, 211, .4);
  margin: 0;
  letter-spacing: .08em;
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  flex-wrap: wrap;
}

/* ===== REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto; /* nach Reveal entfernen, spart Speicher */
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; will-change: auto; }
}

/* ===== COOKIE BANNER ===== */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow);
  animation: cookie-rise .35s ease-out;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@keyframes cookie-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cookie-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px; align-items: center;
  padding: 18px 28px;
}
.cookie-text {
  font-size: .92rem;
  color: var(--ink);
  line-height: 1.5;
}
.cookie-text strong {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  color: var(--bean);
  margin-right: 6px;
}
.cookie-text a { color: var(--gold); border-bottom: 1px solid var(--gold); }
.cookie-text a:hover { color: var(--bean); }
.cookie-actions { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }
.cookie-decline {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 12px 22px;
  border-radius: 999px;
}
.cookie-decline:hover { border-color: var(--bean); color: var(--bean); }
.cookie-accept { padding: 12px 22px; }
@media (max-width: 760px) {
  .cookie-inner { grid-template-columns: 1fr; gap: 14px; }
  .cookie-actions { width: 100%; }
  .cookie-actions .btn { flex: 1; }
}

/* ===== MAP PLACEHOLDER ===== */
.map-card { position: relative; }
.map-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  background:
    repeating-linear-gradient(45deg, var(--cream), var(--cream) 12px, var(--linen) 12px, var(--linen) 13px);
  text-align: center;
  z-index: 1;
}
.map-ph-title {
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  color: var(--bean);
  margin: 0 0 10px;
}
.map-ph-text {
  color: var(--muted);
  font-size: .92rem;
  max-width: 360px;
  margin: 0 auto 22px;
}
.map-ph-link {
  display: block;
  margin-top: 14px;
  font-size: .85rem;
  color: var(--gold);
  letter-spacing: .04em;
}
.map-ph-link:hover { color: var(--bean); }

/* ===== LEGAL PAGES ===== */
.legal-main { background: var(--paper); padding: 60px 0 80px; min-height: calc(100vh - 320px); }
.legal-article { max-width: 820px; }
/* Lange deutsche Komposita (z. B. „Datenschutzerklärung") und URLs/E-Mails
   müssen auf schmalen Handys umbrechen, sonst schieben sie die Seite breit. */
.legal-article h1, .legal-article h2, .legal-article h3,
.legal-article p, .legal-article li { overflow-wrap: break-word; hyphens: auto; }
.legal-article h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 18px; }
.legal-lead { color: var(--muted); font-style: italic; font-family: 'Fraunces', serif; margin-bottom: 40px; }
.legal-article section { margin-bottom: 36px; }
.legal-article h2 {
  font-size: 1.4rem;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.legal-article h3 { font-size: 1.05rem; margin: 22px 0 8px; color: var(--coffee); }
.legal-article p, .legal-article li { font-size: 1rem; color: var(--ink); }
.legal-article ul { padding-left: 20px; margin: 0 0 14px; }
.legal-article li { margin-bottom: 6px; }
.legal-article strong { color: var(--bean); }
.legal-article a { color: var(--gold); border-bottom: 1px solid transparent; }
.legal-article a:hover { border-bottom-color: var(--gold); }
.legal-source {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .85rem;
  font-style: italic;
}
.legal-revoke { margin-top: 30px; }
.legal-links { padding-left: 20px; }
.legal-links li { margin-bottom: 12px; line-height: 1.6; }

/* ===== NOTICE BANNER ===== */
.notice-banner {
  background: var(--gold);
  color: var(--bean);
  font-size: .92rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.notice-inner {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 28px;
}
.notice-tag {
  flex-shrink: 0;
  background: var(--bean);
  color: var(--cream);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.notice-banner p { margin: 0; line-height: 1.5; }

/* Webshop-Link in der Hauptnavigation */
.nav-shop {
  padding: 8px 16px !important;
  background: var(--gold);
  color: var(--bean) !important;
  border-radius: 999px;
  font-weight: 600 !important;
  font-size: .82rem !important;
  letter-spacing: .04em;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.nav-shop::after { display: none; }
.nav-shop:hover {
  background: #c79b48;
  transform: translateY(-1px);
}
@media (max-width: 980px) {
  .nav-shop {
    border-radius: 0;
    padding: 18px var(--gutter) !important;
    text-align: left;
  }
}

/* Edit-Mode-Button im Admin-Header */
/* ============================================
   ADMIN AREA
   ============================================ */
.admin-body { background: var(--cream); min-height: 100vh; display: flex; flex-direction: column; }
.admin-main { flex: 1; }

/* LOGIN */
.admin-login {
  display: flex; align-items: center; justify-content: center;
  padding: 80px 24px;
  min-height: calc(100vh - 200px);
  animation: admin-fade-in var(--dur-base) var(--ease-out);
}
/* Eigener Name, damit diese reine Opacity-Variante nicht das gleichnamige
   fade-in (mit Slide-up) der Hero-Elemente überschreibt. */
@keyframes admin-fade-in { from { opacity: 0; } to { opacity: 1; } }
.login-card {
  width: 100%; max-width: 460px;
  background:
    radial-gradient(800px 200px at 50% 0%, rgba(184, 137, 62, 0.06), transparent 60%),
    var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 56px 44px 44px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}
.lock-ico { color: var(--gold); margin: 0 auto 18px; display: block; }
.login-card h1 { font-size: 1.9rem; margin-bottom: 10px; }
.login-sub { color: var(--muted); margin-bottom: 30px; font-size: .95rem; }
.login-card form { text-align: left; }
.login-card label {
  display: block;
  margin-bottom: 18px;
  font-size: .76rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.login-card label > span { display: block; margin-bottom: 8px; }
.login-card input {
  width: 100%;
  font: 400 1rem 'Inter', sans-serif;
  text-transform: none; letter-spacing: 0;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color .2s var(--ease-out);
}
.login-card input:focus { outline: none; border-color: var(--bean); }
.login-card .form-submit { width: 100%; margin-top: 8px; }
.login-help {
  margin: 22px 0 0;
  font-size: .85rem;
  color: var(--muted);
  text-align: center;
}

.pw-wrap { position: relative; }
.pw-toggle {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  width: 36px; height: 36px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: color .2s var(--ease-out), background .2s var(--ease-out);
}
.pw-toggle:hover { color: var(--bean); background: var(--cream); }
.pw-wrap input { padding-right: 48px !important; }

.login-demo {
  margin: 28px 0 0;
  padding: 18px 20px;
  background: var(--cream);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: left;
}
.login-demo > strong {
  display: block;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  font-weight: 600;
}
/* DASHBOARD */
.admin-dashboard { padding: 50px 0 100px; }

/* Overview – Dashboard-Startansicht */
.admin-overview {
  margin-top: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  padding: clamp(22px, 4vw, 38px);
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.overview-card {
  display: flex; align-items: center; gap: 16px;
  width: 100%;
  padding: 18px 18px;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  text-align: left;
  color: var(--bean);
  font-family: 'Inter', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.overview-card:hover,
.overview-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold-soft);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  outline: none;
}
.overview-card:active { transform: translateY(0); }

.overview-card-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  color: var(--bean);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.overview-card-icon .ico { width: 22px; height: 22px; }
.overview-card:hover .overview-card-icon,
.overview-card:focus-visible .overview-card-icon {
  background: var(--linen);
  color: var(--gold);
}

.overview-card-body {
  flex: 1;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.overview-card-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--bean);
  line-height: 1.3;
}
.overview-card-desc {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.4;
}

.overview-card-badge {
  flex-shrink: 0;
  background: var(--gold);
  color: var(--paper);
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: .02em;
  min-width: 22px;
  text-align: center;
}
.overview-card-arrow {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.overview-card:hover .overview-card-arrow,
.overview-card:focus-visible .overview-card-arrow {
  color: var(--gold);
  transform: translateX(3px);
}

/* Kurzanleitung-Box auf der Übersicht (zugeklappt per Default) */
.overview-help {
  margin: 8px 0 26px;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  padding: 16px 20px;
}
.overview-help > summary {
  cursor: pointer;
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  color: var(--bean);
  font-weight: 500;
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  -webkit-tap-highlight-color: transparent;
}
.overview-help > summary::-webkit-details-marker { display: none; }
.overview-help > summary::before {
  content: '?';
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
  background: var(--gold); color: var(--paper);
  border-radius: 50%; font-size: .85rem; font-weight: 700;
  font-family: 'Inter', sans-serif;
}
.overview-help > summary::after {
  content: '▾';
  margin-left: auto; color: var(--muted);
  transition: transform var(--dur-base) var(--ease-out);
}
.overview-help[open] > summary::after { transform: rotate(180deg); }
.overview-help-steps {
  margin: 16px 0 0; padding-left: 0; list-style: none;
  counter-reset: help;
}
.overview-help-steps li {
  position: relative;
  padding: 8px 0 8px 40px;
  color: var(--muted);
  line-height: 1.55;
  counter-increment: help;
}
.overview-help-steps li::before {
  content: counter(help);
  position: absolute; left: 0; top: 8px;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); border: 1px solid var(--gold-soft);
  border-radius: 50%; color: var(--bean);
  font-weight: 700; font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.overview-help-steps strong { color: var(--bean); }
.overview-help-steps em { font-style: italic; color: var(--gold); }
.overview-help-note {
  margin: 14px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: .9rem; color: var(--muted); line-height: 1.55;
}

/* Kurz-Hilfe oben in einem Panel */
.panel-help {
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 0 0 22px;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--muted);
}
.panel-help strong { color: var(--bean); }

/* Aufklappbare Hilfe pro Bereich — goldener „?"-Knopf, Inhalt eingeklappt.
   Gibt jedem Panel einen „Hilfe"-Knopf, ohne die Oberfläche vollzustellen. */
.help-box {
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  padding: 11px 16px;
  margin: 0 0 20px;
}
.help-box > summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  font-family: 'Fraunces', serif;
  font-size: .98rem; font-weight: 500; color: var(--bean);
  -webkit-tap-highlight-color: transparent;
}
.help-box > summary::-webkit-details-marker { display: none; }
.help-box > summary::before {
  content: '?';
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  background: var(--gold); color: var(--paper);
  border-radius: 50%; font-size: .8rem; font-weight: 700;
  font-family: 'Inter', sans-serif;
}
.help-box > summary::after {
  content: '▾'; margin-left: auto; color: var(--muted);
  transition: transform var(--dur-base) var(--ease-out);
}
.help-box[open] > summary::after { transform: rotate(180deg); }
.help-box-body {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: .92rem; line-height: 1.6; color: var(--muted);
}
.help-box-body strong { color: var(--bean); }
.help-box-body ul { margin: 8px 0 0; padding-left: 18px; }
.help-box-body li { margin: 5px 0; }
.help-box-body p { margin: 0 0 8px; }
.help-box-body p:last-child { margin-bottom: 0; }

/* Workspace – Back-Link */
.admin-workspace { margin-top: 20px; }
.back-to-overview {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  cursor: pointer;
  margin-bottom: 22px;
  transition:
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.back-to-overview:hover,
.back-to-overview:focus-visible {
  color: var(--bean);
  border-color: var(--gold-soft);
  background: var(--paper);
  outline: none;
}

/* Auf Mobile etwas groesser fuer's Daumen-Tappen (Apple-HIG 44px). */
@media (max-width: 720px) {
  .back-to-overview {
    padding: 11px 18px 11px 14px;
    font-size: .92rem;
    margin-bottom: 18px;
  }
}


/* Welcome / Stats */
.admin-welcome {
  display: grid; grid-template-columns: 1fr auto;
  gap: 40px; align-items: end;
  margin-bottom: 32px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.admin-welcome h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 10px; }
.admin-sub { color: var(--muted); max-width: 540px; margin: 0; font-size: 1rem; }
.admin-sub em { font-style: italic; color: var(--bean); }

/* Tabs */
.admin-tabs {
  display: flex; gap: 2px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab {
  background: transparent;
  border: 0;
  padding: 16px 20px;
  font-family: 'Inter', sans-serif;
  font-size: .88rem;
  letter-spacing: .04em;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  transition:
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.admin-tab:hover { color: var(--bean); }
.admin-tab.is-active {
  color: var(--bean);
  border-bottom-color: var(--gold);
  font-weight: 600;
}
.tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px;
  background: var(--gold);
  color: var(--paper);
  font-size: .68rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
}

.admin-panel { display: none; }
.admin-panel.is-active { display: block; view-transition-name: panel; }

/* Panel-Title oben in jedem Bereich — damit Maria auf Mobile (Tabs
   ausgeblendet) klar sieht, wo sie ist. */
.panel-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 500;
  color: var(--bean);
  margin: 0 0 14px;
  letter-spacing: -0.012em;
}

/* Konto-Tab "Erweiterte Einstellungen"-Collapsible: versteckt die
   3 selten benoetigten Karten (Mitarbeiter / Aktivitaet / Texte-
   Reset) hinter einem Toggle, damit Maria nicht scrollen muss bis
   sie zur "Gefahrenzone" durchblaettert. Passwort + Konto-Info
   stehen weiterhin oben sichtbar. */
.account-advanced {
  margin: 22px 0 0;
}
.account-advanced > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  font-size: .88rem;
  color: var(--muted);
  font-weight: 500;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.account-advanced > summary::-webkit-details-marker { display: none; }
.account-advanced > summary::before {
  content: '+';
  font-size: 1.2rem;
  line-height: 1;
  color: var(--gold);
  font-weight: 400;
}
.account-advanced[open] > summary::before { content: '−'; }
.account-advanced[open] > summary { color: var(--bean); background: var(--paper); }
.account-advanced > summary:hover { color: var(--bean); }
.account-advanced .panel-card { margin-top: 18px; }
@keyframes panel-fade-in  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes panel-fade-out { to { opacity: 0; transform: translateY(-6px); } }
::view-transition-old(panel) { animation: panel-fade-out var(--dur-fast) var(--ease-out) forwards; }
::view-transition-new(panel) { animation: panel-fade-in  var(--dur-base) var(--ease-out) forwards; }

/* Panel toolbar (week navigation + actions) */
.panel-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.week-switch {
  display: flex; align-items: center; gap: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px;
}
.week-nav {
  background: transparent;
  border: 0; cursor: pointer;
  width: 36px; height: 36px;
  border-radius: 999px;
  font-size: 1.2rem;
  color: var(--bean);
  font-family: 'Inter', sans-serif;
  transition: background .2s var(--ease-out);
}
.week-nav:hover { background: var(--cream); }
.week-label {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 12px; min-width: 170px;
}
.week-kw {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem; font-weight: 500;
  color: var(--bean);
}
.week-range { font-size: .82rem; color: var(--muted); }
.week-switch .btn-link {
  border-bottom: 0;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 14px;
  margin-left: 4px;
  color: var(--muted);
}
.week-switch .btn-link:hover { color: var(--bean); }

.toolbar-actions { display: flex; gap: 18px; flex-wrap: wrap; }
.toolbar-actions .btn-link {
  font-size: .82rem;
  letter-spacing: .08em;
  padding: 8px 0;
  border-bottom-style: dashed;
}
.toolbar-actions .btn-link.danger { color: #B53A2E; border-bottom-color: #B53A2E; }
.toolbar-actions .btn-link.danger:hover { color: #8A2A20; border-bottom-color: #8A2A20; }

/* Panel cards (Notice, Account) */
.panel-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 40px;
  max-width: 760px;
}
.panel-card h3 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}
.panel-card-sub {
  color: var(--muted);
  font-size: .95rem;
  margin-bottom: 22px;
}
.panel-card label {
  display: block;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 16px;
}
.panel-card label > span { display: block; margin-bottom: 8px; }
.panel-card textarea {
  width: 100%;
  font: 400 1rem 'Inter', sans-serif;
  text-transform: none; letter-spacing: 0;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  resize: vertical; min-height: 90px;
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.panel-card textarea:focus {
  outline: none; border-color: var(--bean); background: var(--paper);
}

.account-list {
  margin: 0 0 32px;
  display: grid; gap: 16px;
}
.account-list > div {
  display: grid; grid-template-columns: 180px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.account-list dt {
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.account-list dd {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  color: var(--bean);
}
.account-list dd em { font-style: italic; color: var(--muted); font-size: .92rem; }

.panel-card h4 { font-family: 'Inter', sans-serif; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.help-steps { margin: 0 0 28px; padding-left: 22px; color: var(--muted); }
.help-steps li { margin-bottom: 10px; }
.help-steps strong { color: var(--bean); }

.account-actions {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}

/* Konto-Formulare (Passwort, Mitarbeiter) */
.account-form { display: grid; gap: 14px; margin-top: 14px; }
.account-form label {
  display: block;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.account-form label > span { display: block; margin-bottom: 6px; }
.account-form input {
  width: 100%;
  font: 400 1rem 'Inter', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.account-form input:focus {
  outline: none;
  border-color: var(--bean);
  background: var(--paper);
}
.account-form-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin-top: 6px;
}
.account-form-actions .save-status { margin: 0; }
.account-hint {
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(184, 137, 62, 0.08);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  font-size: .88rem;
  color: var(--coffee);
  line-height: 1.5;
}

/* Aktivitäts-Log */
.activity-log { list-style: none; padding: 0; margin: 18px 0 0; }
.activity-empty {
  padding: 18px 0; color: var(--muted); font-style: italic; font-family: 'Fraunces', serif;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}
.activity-item {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 14px; align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.activity-when {
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.activity-action {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--bean);
}
.activity-who { font-size: .82rem; color: var(--muted); }
@media (max-width: 540px) {
  .activity-item { grid-template-columns: 1fr; gap: 4px; }
}

/* Anfragen (Reservierungen) */
.anfragen-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.anfragen-count {
  background: var(--linen);
  color: var(--bean);
  font-size: .78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}
.anfragen-list {
  list-style: none; padding: 0; margin: 16px 0 0;
  display: flex; flex-direction: column; gap: 14px;
}
.anfragen-empty {
  padding: 30px 0;
  color: var(--muted);
  font-style: italic;
  font-family: 'Fraunces', serif;
  text-align: center;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.anfrage-item {
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 18px 20px;
  transition: border-color var(--dur-base) var(--ease-out);
}
.anfrage-item:hover { border-color: var(--gold-soft); }
.anfrage-item.is-done { opacity: .65; background: var(--paper); }
.anfrage-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.anfrage-name {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--bean);
}
.anfrage-pers {
  color: var(--muted);
  font-size: .92rem;
  margin-left: 4px;
}
.anfrage-tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--linen);
  color: var(--muted);
}
.anfrage-tag.is-new {
  background: var(--gold);
  color: var(--paper);
}
.anfrage-when {
  margin: 4px 0 10px;
  color: var(--bean);
  font-size: .96rem;
}
.anfrage-contact {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: .9rem;
  margin-bottom: 10px;
}
.anfrage-contact a {
  color: var(--bean);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 1px;
}
.anfrage-contact a:hover { color: var(--gold); }
.anfrage-msg {
  margin: 8px 0 0;
  padding: 12px 14px;
  background: var(--paper);
  border-left: 3px solid var(--gold-soft);
  border-radius: 0 8px 8px 0;
  color: var(--bean);
  font-size: .92rem;
  white-space: pre-wrap;
}
.anfrage-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: .8rem;
  color: var(--muted);
}
.anfrage-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Anfrage- & Bestell-Aktionen · klare Knoepfe statt winziger Text-Links.
   Maria soll auf einen Blick sehen, was die Haupt- und was die Neben-
   Aktion ist (primary green vs. danger outline). */
.anfrage-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  min-height: 40px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .02em;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--bean);
  cursor: pointer;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.anfrage-btn:hover { border-color: var(--bean); }
.anfrage-btn-mark.is-primary {
  background: #2F7D3D;
  color: #FFFCF4;
  border-color: #2F7D3D;
}
.anfrage-btn-mark.is-primary:hover { background: #246130; border-color: #246130; }
.anfrage-btn-mark.is-primary .ico { color: currentColor; }
.anfrage-btn-del {
  color: #B53A2E;
  border-color: rgba(181, 58, 46, 0.32);
}
.anfrage-btn-del:hover {
  background: rgba(181, 58, 46, 0.08);
  border-color: #B53A2E;
  color: #8A2A20;
}
.anfrage-btn .ico { width: 16px; height: 16px; }

/* Mitgliederbereich · Gruppen-Labels ueber Tile-Sektionen.
   Editorial-aufrechtes Fraunces, leise, gibt Struktur ohne
   Dashboard-Theater. */
.overview-group-label {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--bean);
  margin: 28px 0 14px;
  letter-spacing: -0.01em;
}
.overview-group-label:first-of-type { margin-top: 4px; }

/* Mehr Pop fuer Tiles mit Badge (= neue Anfragen/Bestellungen).
   Goldener Hairline-Rahmen statt dezenter Linie. */
.overview-card:has(.overview-card-badge:not([hidden])) {
  border-color: var(--gold-soft);
  background: var(--paper);
  box-shadow: 0 2px 10px -4px rgba(184, 137, 62, 0.18);
}
.overview-card-badge { font-variant-numeric: tabular-nums; }

/* Quiet Utility-Link unter dem Tile-Grid fuer "Texte bearbeiten" —
   da, wo Maria ihn findet wenn sie ihn braucht, aber nicht
   konkurriert mit den Haupt-Aktionen. */
.overview-utility {
  margin: 36px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.overview-utility-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  transition: color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.overview-utility-link:hover {
  color: var(--bean);
  background: var(--cream);
}
.overview-utility-link .ico { color: var(--gold); width: 16px; height: 16px; }

/* Schlanke Begruessung statt Dashboard-Layout (Stats sind weg). */
.admin-welcome-slim {
  display: block;
  grid-template-columns: none;
  gap: 0;
  margin-bottom: 22px;
  padding-bottom: 18px;
}
.admin-welcome-slim h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--bean);
}
.admin-welcome-slim .admin-sub { font-size: .95rem; max-width: 480px; }

/* User-Badge auf Mobile ausblenden — Maria weiss, dass sie eingeloggt
   ist, das E-Mail-Pillchen ist im Header nur Rauschen. */
@media (max-width: 720px) {
  .admin-actions .user-badge { display: none; }
}

/* Admin-Header auf Mobile: ohne Anpassung lief die Zeile
   (Logo + Wortmarke + Pille + Vorschau + Abmelden = 533px) weit ueber
   den Handy-Rand hinaus, die ganze Seite liess sich seitlich scrollen
   und "Abmelden" war abgeschnitten. Hier wird kompakt umgebaut. */
@media (max-width: 600px) {
  /* Pille ist redundant — die H1 "Mitgliederbereich" steht direkt darunter. */
  .admin-header .admin-pill { display: none; }
  .admin-header .nav-container { gap: 10px; }
  .admin-header .brand { gap: 10px; }
  .admin-header .brand-logo { width: 36px; height: 36px; }
  .admin-header .brand-name { font-size: 1.2rem; }
  .admin-actions { gap: 14px; }
  .admin-actions .btn-link { font-size: .82rem; gap: 6px; }
  .admin-actions .btn-link .ico-sm { width: 16px; height: 16px; }
}
/* Sehr schmale Geraete (≤360px): Wortmarke weicht, Logo bleibt als Anker. */
@media (max-width: 360px) {
  .admin-header .brand-name { display: none; }
}

/* "Mehr"-Dropdown in der Wochenplan-Toolbar — versteckt fortge-
   schrittene Aktionen (Sicherungskopie, Woche leeren) hinter
   einem Klick, damit "Vorwoche kopieren" als Haupt-Aktion klar
   sichtbar ist. */
.toolbar-more {
  position: relative;
  display: inline-block;
}
.toolbar-more > summary {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  list-style: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .82rem;
  color: var(--muted);
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.toolbar-more > summary::-webkit-details-marker { display: none; }
.toolbar-more > summary::after {
  content: '⌄';
  font-size: 1rem;
  line-height: 1;
  margin-top: -2px;
  transition: transform .2s var(--ease-out);
}
.toolbar-more[open] > summary { color: var(--bean); background: var(--cream); }
.toolbar-more[open] > summary::after { transform: rotate(180deg); }
.toolbar-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 10;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 36px -18px rgba(42, 24, 16, 0.28);
  min-width: 220px;
  padding: 6px;
  display: flex; flex-direction: column;
}
.toolbar-more-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .88rem;
  color: var(--bean);
}
.toolbar-more-menu button:hover { background: var(--cream); }
.toolbar-more-menu button.is-danger { color: #B53A2E; }
.toolbar-more-menu button.is-danger:hover { background: rgba(181, 58, 46, 0.08); }
.toolbar-more-menu .ico { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 540px) {
  .toolbar-more-menu { right: auto; left: 0; }
}

/* Tab-Navigation im Workspace auf Mobile ausblenden — Maria nutzt
   sowieso "Zurueck zur Uebersicht" + neue Tile-Auswahl, die 8
   horizontal scrollbaren Tabs sind dort nur visueller Krach. Desktop:
   weiterhin als Quick-Switcher fuer Power-User sichtbar. */
@media (max-width: 720px) {
  .admin-tabs { display: none; }
}

/* Akzentfarbe als collapsible -- Maria aendert die Brand-Farbe
   praktisch nie. Im Bilder-Panel als kleines "Akzentfarbe aendern
   (selten noetig)"-Details verstecken, damit es nicht ablenkt. */
.design-collapsed {
  margin-top: 20px;
  border-top: 1px solid var(--line-soft);
  padding-top: 20px;
}
.design-collapsed > summary {
  cursor: pointer;
  font-size: .92rem;
  color: var(--muted);
  padding: 8px 0;
  list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.design-collapsed > summary::-webkit-details-marker { display: none; }
.design-collapsed > summary::before {
  content: '+';
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
}
.design-collapsed[open] > summary::before { content: '−'; }
.design-collapsed[open] > summary { color: var(--bean); }
.design-row-inline { padding-top: 14px; }

/* Empty-States freundlicher — wenn Maria das erste Mal einloggt
   sind alle Listen leer. Das soll einladend wirken, nicht klinisch. */
.anfragen-empty,
.orders-empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--muted);
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 14px;
  margin: 8px 0;
  line-height: 1.5;
}
.anfragen-empty::before,
.orders-empty::before {
  content: '';
  display: block;
  width: 40px; height: 40px;
  margin: 0 auto 12px;
  background: var(--cream);
  border-radius: 50%;
  border: 1px solid var(--line);
}

/* Brand im Admin-Header ist bewusst keine Verlinkung — Maria soll
   nicht versehentlich den Admin verlassen. Aussehen muss aber wie
   Brand-Block bleiben (kein Hover, kein Cursor-Pointer). */
.brand.brand-static {
  cursor: default;
  text-decoration: none;
}
.brand.brand-static:hover { background: transparent; }

/* Brötchen-Sorten-Editor im Admin */
.broetchen-editor { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.broetchen-edit-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}
.broetchen-edit-fields {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  gap: 10px;
  align-items: center;
}
.broetchen-edit-fields input[type="text"] {
  width: 100%;
  font: 400 .95rem 'Inter', sans-serif;
  color: var(--bean);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 9px 12px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.broetchen-edit-fields input[type="text"]:focus { outline: none; border-color: var(--gold); }
.broetchen-edit-veg {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; color: var(--muted); white-space: nowrap; cursor: pointer;
}
.broetchen-edit-remove {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line);
  border-radius: 50%; color: var(--muted); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.broetchen-edit-remove:hover { color: #b3382c; border-color: rgba(179, 56, 44, 0.4); }
@media (max-width: 640px) {
  .broetchen-edit-fields { grid-template-columns: 1fr; gap: 8px; }
}

/* Dringlichkeits-Pille (Heute / Morgen / Vergangen) */
.pickup-badge {
  display: inline-block;
  margin-left: 10px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  vertical-align: middle;
}
.pickup-badge.is-today { background: var(--gold); color: var(--paper); }
.pickup-badge.is-soon  { background: rgba(184, 137, 62, 0.16); color: var(--gold); }
.pickup-badge.is-past  { background: rgba(120, 97, 82, 0.14); color: var(--muted); }

/* Bestellpositionen im Admin */
.order-line-list {
  list-style: none; padding: 0; margin: 0 0 12px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 18px;
}
.order-line-list li {
  font-size: .9rem;
  color: var(--bean);
  padding: 4px 0;
}
.order-line-qty {
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}
@media (max-width: 540px) {
  .anfrage-head { flex-direction: column; align-items: flex-start; }
  .anfrage-meta { flex-direction: column; align-items: flex-start; }
}

/* Mitarbeiter-Liste */
.user-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  border-top: 1px solid var(--line-soft);
}
.user-list-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.user-list-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.user-list-email {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  color: var(--bean);
  font-weight: 500;
}
.user-list-tag {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  padding: 3px 8px;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
}
.user-remove {
  margin-top: 0;
  width: 32px; height: 32px;
}
.panel-card-danger { border-color: rgba(179, 56, 44, 0.25); }
.panel-card-danger h3 { color: #b3382c; }

/* ===== ADMIN: SPEISEKARTE EDITOR ===== */
.panel-card.wide { max-width: 1000px; }

.menu-cats {
  display: grid;
  gap: 24px;
  margin-bottom: 24px;
}
/* ---- Speisekarten-Editor (Sektionen-Modell) ---- */
.menu-toolbar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.menu-intro-field, .menu-foot-field { margin: 0 0 20px; }
.menu-intro-field label, .menu-foot-field label { display: block; }
.menu-intro-field span, .menu-foot-field span {
  display: block; margin-bottom: 6px;
  font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.menu-intro-field input, .menu-foot-field input {
  width: 100%;
  font: 400 .95rem 'Inter', sans-serif;
  color: var(--ink); background: var(--cream);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px;
}
.menu-intro-field input:focus, .menu-foot-field input:focus {
  outline: none; border-color: var(--bean); background: var(--paper);
}

.menu-sections { display: flex; flex-direction: column; gap: 20px; }
.menu-section {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.menu-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.menu-section-title {
  flex: 1; min-width: 0;
  font: 500 1.15rem 'Fraunces', serif;
  color: var(--bean); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 8px 12px;
}
.menu-section-title:focus { outline: none; border-color: var(--bean); }
.menu-section-icon {
  flex-shrink: 0;
  font: 400 .9rem 'Inter', sans-serif;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 8px 10px; background: var(--paper); color: var(--bean); cursor: pointer;
}
.menu-section-remove { margin-top: 0 !important; flex-shrink: 0; }
.menu-section-note {
  width: 100%;
  font: 400 .88rem 'Inter', sans-serif;
  color: var(--muted); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 8px 12px; margin-bottom: 14px;
}
.menu-section-note:focus { outline: none; border-color: var(--bean); background: #fff; }

.menu-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.menu-item-row {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.menu-item-row:hover { border-color: var(--gold-soft); }
.menu-item-row.is-dragging { opacity: .35; transform: scale(.98); }
.menu-item-row.is-drop-target { border-color: var(--gold); box-shadow: 0 4px 18px -8px rgba(184, 137, 62, .4); }
.gallery-tile-edit.is-dragging { opacity: .35; }
.gallery-tile-edit.is-drop-target { outline: 2px solid var(--gold); outline-offset: -2px; }

.drag-handle {
  flex-shrink: 0;
  width: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--muted);
  cursor: grab; letter-spacing: -1px; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.drag-handle:active { cursor: grabbing; }
.drag-handle:hover { color: var(--bean); }
.menu-item-fields {
  flex: 1; min-width: 0;
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 2fr;
  gap: 8px;
}
.menu-item-fields input {
  width: 100%;
  font: 400 .92rem 'Inter', sans-serif;
  text-transform: none; letter-spacing: 0;
  color: var(--ink); background: var(--cream);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 8px 10px;
  transition: border-color .2s var(--ease-out);
}
.menu-item-fields input:focus { outline: none; border-color: var(--bean); background: var(--paper); }
.menu-item-remove { margin-top: 0 !important; flex-shrink: 0; width: 32px; height: 32px; }
.menu-add-item, .menu-add-section { font-size: .85rem !important; }
.menu-add-section { margin: 4px 0 18px; }
@media (max-width: 620px) {
  .menu-item-row { flex-wrap: wrap; }
  .menu-item-fields { grid-template-columns: 1fr 1fr; }
  .menu-item-fields input:nth-child(3) { grid-column: 1 / -1; }
}

.btn-icon {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
  margin-top: 18px;
}
.btn-icon:hover { color: #B53A2E; border-color: #B53A2E; }

.menu-add {
  font-size: .85rem !important;
  letter-spacing: .04em !important;
  border-bottom-style: dashed;
}

/* ===== INLINE-BEARBEITUNGSMODUS ===== */
body.is-editing [data-editable] {
  outline: 1px dashed transparent;
  outline-offset: 4px;
  border-radius: 2px;
  transition:
    outline-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
  cursor: text;
  position: relative;
}
body.is-editing [data-editable]:hover {
  outline-color: var(--gold-soft);
  background-color: rgba(184, 137, 62, 0.04);
}
body.is-editing [data-editable]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  background-color: rgba(184, 137, 62, 0.06);
}
body.is-editing [data-editable]::before {
  content: 'Bearbeiten';
  position: absolute;
  top: -22px; left: 0;
  font: 600 .62rem 'Inter', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
body.is-editing [data-editable]:hover::before,
body.is-editing [data-editable]:focus::before {
  opacity: 1;
}

/* Floating Edit-FAB */
.edit-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0));
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.edit-fab > * { pointer-events: auto; }

.edit-fab-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: var(--bean);
  color: var(--paper);
  border: 1px solid var(--bean);
  border-radius: 999px;
  font: 600 .8rem 'Inter', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.edit-fab-trigger:hover {
  background: var(--espresso);
  transform: translateY(-2px);
}
.edit-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(184, 137, 62, .5);
  animation: pulse-gold 2.4s var(--ease-in-out) infinite;
}

.edit-fab-menu {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  min-width: 280px;
  max-width: 360px;
  box-shadow: var(--shadow-lg);
  animation: edit-fab-rise var(--dur-base) var(--ease-out);
}
@keyframes edit-fab-rise {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.edit-fab-status {
  margin: 0 0 16px;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--muted);
}
.edit-fab-status[data-kind="ok"]    { color: #2e7d32; }
.edit-fab-status[data-kind="error"] { color: #b3382c; }
.edit-fab-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.edit-fab-menu .btn { min-height: 36px; padding: 8px 14px; font-size: .78rem; }
.edit-fab-menu .btn-link { color: var(--muted); border-bottom-color: transparent; padding: 6px 4px; }
.edit-fab-menu .btn-link:hover { color: #b3382c; border-bottom-color: #b3382c; }

@media (max-width: 540px) {
  .edit-fab { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0)); }
  .edit-fab-menu { min-width: auto; max-width: calc(100vw - 24px); }
  .edit-fab-trigger { padding: 10px 16px; font-size: .72rem; }
  .edit-fab-label { display: none; }
}

/* ===== ADMIN: DESIGN STUDIO ===== */
.design-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 36px;
  padding: 28px 0;
  border-top: 1px solid var(--line-soft);
}
.design-row:first-of-type { border-top: 0; padding-top: 8px; }
.design-info h4 {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--bean);
  margin: 0 0 6px;
}
.design-info p { color: var(--muted); font-size: .88rem; line-height: 1.55; margin: 0; }
.design-control { min-width: 0; }

.image-slot { display: flex; flex-direction: column; gap: 12px; position: relative; }

/* Upload-Loading-Overlay direkt am Slot — sonst sieht Maria sekunden-
   lang nichts und tippt vielleicht erneut. */
.image-slot.is-uploading .image-preview {
  position: relative;
  pointer-events: none;
}
.image-slot.is-uploading .image-preview::after {
  content: 'Wird hochgeladen …';
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 252, 244, 0.92);
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  color: var(--bean);
  border-radius: inherit;
  z-index: 2;
  animation: upload-pulse 1.4s ease-in-out infinite;
}
.image-slot.is-uploading .image-actions { opacity: .4; pointer-events: none; }
.image-slot.is-uploading::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: 10px;
  border: 2px solid var(--gold);
  border-top-color: transparent;
  animation: upload-spin 0.9s linear infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes upload-pulse { 0%,100% { opacity: 1; } 50% { opacity: .65; } }
@keyframes upload-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .image-slot.is-uploading::before { animation: none; }
  .image-slot.is-uploading .image-preview::after { animation: none; }
}

/* Galerie-Button-Loading-State */
.upload-btn.is-uploading {
  pointer-events: none;
  opacity: .6;
  position: relative;
}
.upload-btn.is-uploading::after {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  margin-left: 8px;
  border: 2px solid var(--gold);
  border-top-color: transparent;
  border-radius: 50%;
  animation: upload-spin 0.9s linear infinite;
  vertical-align: -3px;
}
.image-preview {
  width: 100%; max-width: 360px;
  background:
    repeating-linear-gradient(45deg, var(--cream), var(--cream) 6px, var(--linen) 6px, var(--linen) 7px);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  aspect-ratio: 1;
  position: relative;
}
.image-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-empty {
  color: var(--muted);
  font-size: .85rem;
  letter-spacing: .04em;
  padding: 0 16px;
  text-align: center;
}
.image-default-tag {
  position: absolute;
  bottom: 10px; left: 10px;
  padding: 4px 10px;
  background: rgba(42, 24, 16, 0.85);
  color: var(--paper);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 999px;
  font-weight: 600;
}
.image-actions {
  display: flex; gap: 18px; flex-wrap: wrap;
}
.upload-btn {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Galerie-Grid im Editor */
.gallery-grid-edit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
  max-width: 480px;
}
.gallery-tile-edit {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream);
  border: 1px solid var(--line);
}
.gallery-tile-edit img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-remove {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px;
  border: 0; padding: 0;
  border-radius: 50%;
  background: rgba(42, 24, 16, 0.85);
  color: var(--paper);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.gallery-tile-edit:hover .gallery-remove,
.gallery-remove:focus-visible { opacity: 1; }
.gallery-counter {
  margin-left: 14px;
  font-size: .82rem;
  color: var(--muted);
  letter-spacing: .04em;
}

/* Color-Picker */
.color-picker { display: flex; flex-direction: column; gap: 18px; }
.color-presets { display: flex; gap: 10px; flex-wrap: wrap; }
.color-chip {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c, var(--gold));
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.color-chip:hover { transform: scale(1.08); }
.color-chip.is-active {
  border-color: var(--bean);
  outline: 2px solid var(--paper);
  outline-offset: -5px;
}
.color-custom {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .88rem; color: var(--muted);
  cursor: pointer;
}
.color-custom input[type="color"] {
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--paper);
  padding: 2px;
}

@media (max-width: 760px) {
  .design-row { grid-template-columns: 1fr; gap: 14px; padding: 20px 0; }
  .gallery-grid-edit { max-width: 100%; }
  .image-preview { max-width: 100%; }
}

/* ===== HOMEPAGE: Hero-Photo ===== */
.hero-photo {
  width: 320px;
  height: 320px;
  max-width: 80vw;
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.hero-photo::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,252,244,0.06);
  pointer-events: none;
}

/* ===== HOMEPAGE: About-Photo ===== */
.about-photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

/* ===== HOMEPAGE: Galerie ===== */
.section.gallery { background: var(--cream); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 200px;
  gap: 12px;
}
.gallery-item {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  grid-column: span 2;
}
.gallery-item.is-feature {
  grid-column: span 4;
  grid-row: span 2;
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.gallery-item:hover img { transform: scale(1.04); }

/* Empty-State (nur fuer den Inhaber sichtbar) — klare Handlungsaufforderung */
.gallery-empty-cta {
  grid-column: 1 / -1;
  grid-row: span 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  padding: 48px 32px;
  background: var(--paper);
  border: 2px dashed var(--gold-soft);
  border-radius: var(--radius);
  text-align: center;
  text-decoration: none;
  color: var(--bean);
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.gallery-empty-cta:hover {
  border-color: var(--gold);
  background: var(--cream);
  transform: translateY(-2px);
}
.gallery-empty-icon {
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--paper);
  font-size: 2.2rem; line-height: 1; font-weight: 300;
  font-family: 'Inter', sans-serif;
}
.gallery-empty-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--bean);
}
.gallery-empty-desc {
  font-size: .94rem;
  color: var(--muted);
  max-width: 480px;
  line-height: 1.55;
}
.gallery-empty-link {
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

@media (max-width: 760px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery-item, .gallery-item.is-feature { grid-column: span 2; grid-row: auto; }
  .gallery-empty-cta { padding: 36px 24px; }
  .hero-photo { width: 280px; height: 280px; }
}

/* ===== ADMIN: HOURS EDITOR ===== */
.hours-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.hours-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px; align-items: center;
}
.hours-row input {
  width: 100%;
  font: 400 1rem 'Inter', sans-serif;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 13px;
  transition: border-color .2s var(--ease-out);
}
.hours-row input:focus { outline: none; border-color: var(--bean); background: var(--paper); }
.hours-row .btn-icon { margin-top: 0; }

@media (max-width: 760px) {
  .menu-item-row { flex-direction: column; }
  .menu-item-fields { grid-template-columns: 1fr; }
  .btn-icon { margin-top: 0; align-self: flex-end; }
  .hours-row { grid-template-columns: 1fr 1fr; }
  .hours-row .btn-icon { grid-column: 1 / -1; justify-self: end; }
}

/* DAY GRID */
.day-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.day-grid > .day-card:nth-child(7) { grid-column: 1 / -1; }

.day-card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 22px 22px 18px;
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.day-card:hover,
.day-card:focus-within {
  border-color: var(--gold-soft);
  box-shadow: var(--shadow-sm);
}
.day-card.is-today {
  border-color: var(--gold-soft);
  background:
    linear-gradient(180deg, rgba(184, 137, 62, 0.05), transparent 28%),
    var(--paper);
}
.day-card.is-closed { background: var(--cream); }
.day-card.is-closed .day-field { opacity: .5; }
.day-card.is-spillover {
  border-color: var(--gold-soft);
  background:
    linear-gradient(180deg, rgba(184, 137, 62, 0.06), transparent 30%),
    var(--paper);
  margin-bottom: 6px;
  position: relative;
}
.day-card.is-spillover::before {
  content: 'Aus laufender Woche';
  position: absolute;
  top: 14px; right: 16px;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.day-card.is-closed textarea,
.day-card.is-closed input[type="text"] { pointer-events: none; }

.day-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.day-name {
  font-family: 'Fraunces', serif;
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--bean);
  letter-spacing: -0.01em;
}
.day-date {
  margin-left: 10px;
  font-size: .82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
.day-pill {
  background: var(--gold);
  color: var(--paper);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.day-field { display: block; margin-bottom: 10px; }
.day-field-label {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 5px;
  letter-spacing: 0;
  text-transform: none;
}
.day-field textarea,
.day-field input[type="text"] {
  width: 100%;
  font: 400 1rem 'Inter', sans-serif;
  color: var(--bean);
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 11px 14px;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.day-field textarea { resize: vertical; min-height: 60px; line-height: 1.45; }
.day-field textarea::placeholder,
.day-field input[type="text"]::placeholder { color: rgba(120, 97, 82, 0.55); }
.day-field textarea:focus,
.day-field input[type="text"]:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--paper);
}

/* Geschlossen-Schalter (Toggle-Switch) */
.day-toggle {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: .9rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.day-toggle input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.day-toggle-track {
  flex-shrink: 0;
  width: 36px; height: 20px;
  background: var(--line);
  border-radius: 999px;
  position: relative;
  transition: background-color var(--dur-base) var(--ease-out);
}
.day-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--paper);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(42, 24, 16, 0.18);
  transition: transform var(--dur-base) var(--ease-out);
}
.day-toggle input:checked + .day-toggle-track { background: var(--gold); }
.day-toggle input:checked + .day-toggle-track .day-toggle-thumb { transform: translateX(16px); }
.day-toggle input:focus-visible + .day-toggle-track { box-shadow: 0 0 0 3px rgba(184, 137, 62, 0.25); }
.day-toggle-text { line-height: 1.3; }
.day-card.is-closed .day-toggle-text { color: var(--bean); font-weight: 500; }

/* SAVE BAR */
.save-bar {
  position: sticky; bottom: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0));
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 16px 22px;
  background: rgba(255, 252, 244, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.save-bar.inline {
  position: static;
  margin-top: 22px;
  box-shadow: none;
  background: var(--cream);
  backdrop-filter: none;
  border-radius: var(--radius-md);
  padding: 18px 24px;
}
.save-status { margin: 0; font-size: .9rem; color: var(--muted); }
.save-status.ok { color: #2e7d32; }
.save-status.error { color: #c0392b; }
.save-actions { display: flex; gap: 14px; align-items: center; }

/* ADMIN INFO */
.admin-info {
  margin-top: 50px;
  padding: 28px 32px;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.admin-info h3 { margin: 0 0 14px; font-size: 1.05rem; color: var(--bean); }
.admin-info ul { margin: 0; padding-left: 20px; color: var(--muted); }
.admin-info li { margin-bottom: 8px; font-size: .94rem; }

.admin-footer {
  background: var(--espresso);
  color: rgba(241, 231, 211, .6);
  padding: 22px 0;
  text-align: center;
  font-size: .85rem;
}
.admin-footer p { margin: 0; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; text-align: left; }
  .hero-visual { min-height: 320px; }
  .about-grid, .reservation-grid, .contact-grid { grid-template-columns: 1fr; gap: 50px; }
  .about-aside { position: static; }
  .menu-cols { grid-template-columns: 1fr 1fr; gap: 40px; }
  .lunch-week { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 22px; }
  .footer-brand { justify-content: center; }
  .footer-meta { text-align: center; justify-content: center; }
  .admin-welcome { grid-template-columns: 1fr; gap: 24px; }
  .panel-toolbar { flex-direction: column; align-items: stretch; gap: 14px; }
  .toolbar-actions { justify-content: flex-start; }
  .day-grid { grid-template-columns: 1fr; }
  .account-list > div { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 760px) {
  .menu-cols { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  .form-row, .form-row.three { grid-template-columns: 1fr; }
  .lunch-week { grid-template-columns: 1fr 1fr; }
  .contact-cols { grid-template-columns: 1fr; }
  .topbar-sep { display: none; }
  .save-bar { flex-direction: column; align-items: stretch; }
  .save-actions { justify-content: space-between; }
  .overview-grid { grid-template-columns: 1fr; gap: 10px; }
  .admin-overview { border-radius: 18px; }
  .overview-card { padding: 16px 14px; gap: 14px; }
  .overview-card-icon { width: 44px; height: 44px; }
  .overview-card-icon .ico { width: 20px; height: 20px; }
  .overview-card-title { font-size: .98rem; }
  .overview-card-desc { font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .steam { animation: none; }
  .lunch-today-tag::before { animation: none; }
  html { scroll-behavior: auto; }
}

/* ===== 404 ERROR PAGE ===== */
.error-page {
  min-height: 100vh;
  display: flex; align-items: center;
  background:
    radial-gradient(900px 500px at 50% 30%, rgba(184, 137, 62, 0.12), transparent 60%),
    var(--paper);
  padding: 80px var(--gutter);
}
.error-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.error-headline {
  display: flex; flex-direction: column;
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  line-height: .98;
  letter-spacing: -0.028em;
  color: var(--bean);
  margin: 12px 0 28px;
}
.error-headline em { font-style: italic; color: var(--coffee); }
.error-lead { color: var(--muted); font-size: 1.1rem; max-width: 520px; margin: 0 auto 36px; }
.error-cta { display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 60px; }
.error-meta { font-size: .82rem; color: var(--muted); letter-spacing: .04em; }

/* ===== PRINT STYLESHEET ===== */
@media print {
  /* Hide: Page-Chrome + interaktive Overlays + dekorative Elemente.
     NICHT in dieser Liste: .lunch, .reservation (sind auf den
     gleichnamigen Sub-Pages der gesamte Hauptinhalt — bei Hide
     blieb die Druckseite leer). Wer wirklich nur den Lunch von
     der Startseite drucken will, kann sich .today-feature
     auskommentieren. */
  body::before, .topbar, .site-header, .site-footer, .cookie-banner,
  .notice-banner, .edit-fab, .nav-toggle,
  .live-status, .hero-cta, .hero-visual, .map-card, .social, .map-placeholder,
  .footer-meta, .col-link, .skip-link, .edition-strip, .app-splash,
  .hero-ticker, .hero-coord, .hero-est, .sticky-today, .chapter-mark,
  .page-hero-watermark, .section-shout, .ornament,
  .reservation-form, .order-form {
    display: none !important;
  }
  body { background: white; color: black; font-size: 11pt; }
  body::after { content: '© Alstercafé · Ifflandstr. 45 · 22087 Hamburg · 040 / 22 69 28 91'; display: block; padding: 18pt 0; text-align: center; font-size: 8pt; color: #666; border-top: 1px solid #ccc; margin-top: 40pt; }
  .section { padding: 24pt 0; page-break-inside: avoid; }
  .section.menu, .section.about, .section.contact { display: block; }
  h1, h2, h3 { color: black; page-break-after: avoid; }
  .menu-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24pt; }
  .menu-list li { padding: 6pt 0; border-bottom: 1px dotted #ccc; }
  .menu-list strong { color: black; }
  .menu-list span { color: #666; }
  a, a:visited { color: black; text-decoration: none; }
  a[href^="http"]:after { content: ' (' attr(href) ')'; font-size: 0.85em; color: #888; }
  a[href^="mailto"]:after, a[href^="tel"]:after { content: ''; }
  /* Wichtig: .reveal hat im Standard-Stylesheet opacity:0 fuer Scroll-Animation.
     Im Druck immer voll sichtbar — sonst waere praktisch der gesamte Content
     unsichtbar, weil .reveal auf fast jedem Block sitzt. */
  .reveal { opacity: 1 !important; transform: none !important; display: revert !important; }
  .container { max-width: 100%; padding: 0; }
  .hours-list li { display: flex; justify-content: space-between; padding: 4pt 0; border-bottom: 1px dotted #ccc; }
}

/* ===== FAQ SECTION ===== */
.faq { background: var(--paper); }
.faq-list {
  max-width: 760px;
  margin: 0 auto;
}
.faq-item {
  border-top: 1px solid var(--line);
  padding: 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--bean);
  transition: color var(--dur-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary:hover { color: var(--coffee); }
.faq-summary::after {
  content: '+';
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--coffee);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.faq-item[open] .faq-summary::after {
  content: '−';
  transform: rotate(180deg);
  border-color: var(--gold);
  color: var(--gold);
}
.faq-content {
  padding: 0 0 24px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 1rem;
  max-width: 580px;
}
.faq-content p { margin: 0 0 .8em; }
.faq-content p:last-child { margin: 0; }

/* Polish: native scroll feel auf iOS, dezente Scrollbar */
html { -webkit-overflow-scrolling: touch; }
body { overflow-x: hidden; }

/* Konsistenter Body-Padding bei festen Elementen */
@supports (padding: max(0px)) {
  .topbar-inner { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  .nav-container { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
}

/* ===============================================
   PREMIUM POLISH · Editorial Mikro-Details
   ===============================================
   Konsequente Restraint: weniger sichtbare Effekte,
   mehr fühlbare Qualitaet. Nichts hier soll laut
   sein — alles dient dem Gesamtton. */

/* A. Scroll-Progress-Hairline ganz oben
   Premium-Signal aus der Editorial-Welt: zeigt sehr ruhig
   wie weit man im Stueck ist. Wird per JS eingehaengt. */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  z-index: 999;
  pointer-events: none;
}
.scroll-progress-fill {
  height: 100%;
  width: var(--scroll-pct, 0%);
  background: linear-gradient(90deg, var(--gold-soft), var(--gold) 60%, var(--bean));
  transform-origin: left center;
  transition: width 80ms linear;
  box-shadow: 0 0 12px rgba(184, 137, 62, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress-fill { transition: none; }
}

/* B. Button-Shimmer · einmaliger weicher Glanz beim Hover
   Wirkt nur auf gefuellte CTAs, nie auf btn-link. */
.btn-primary,
.btn-gold,
.btn-stamp {
  overflow: hidden;
}
.btn-primary::before,
.btn-gold::before,
.btn-stamp::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 252, 244, 0.22) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  pointer-events: none;
  z-index: 0;
}
.btn-primary:hover::before,
.btn-gold:hover::before,
.btn-stamp:hover::before {
  animation: btn-shimmer 900ms var(--ease-out) 1;
}
@keyframes btn-shimmer {
  to { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary::before,
  .btn-gold::before,
  .btn-stamp::before { display: none; }
}
/* Inhalt der Buttons ueber dem Shimmer halten */
.btn > * { position: relative; z-index: 1; }

/* C. Editorialer Ornament-Divider · Hairline · Glyph · Hairline
   Bringt zwischen Sektionen ruhige typografische Pausen rein. */
.ornament {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  border: 0;
  margin: 0;
  padding: clamp(28px, 4vw, 44px) var(--gutter);
  background: transparent;
  color: var(--gold);
  height: auto;
}
.ornament::before,
.ornament::after {
  content: '';
  flex: 1 1 auto;
  max-width: 220px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 50%, transparent);
}
.ornament-glyph {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0.4em;
  color: var(--gold);
  opacity: 0.7;
  font-variation-settings: "opsz" 48;
  flex: 0 0 auto;
}
.ornament.on-dark { color: var(--gold-soft); }
.ornament.on-dark::before,
.ornament.on-dark::after {
  background: linear-gradient(90deg, transparent, rgba(241, 231, 211, 0.18) 50%, transparent);
}
.ornament.on-dark .ornament-glyph { color: var(--gold-soft); opacity: 0.5; }

/* D. Refined Nav-Underline · weiche Transform-basierte Animation
   Ersetzt das alte right-Property fuer butterweiches Easing. */
@media (min-width: 981px) {
  .primary-nav a::after {
    left: 0; right: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .primary-nav a:hover::after,
  .primary-nav a.is-active::after {
    transform: scaleX(1);
  }
}

/* E. Subtiles Hero-Watermark-Parallax · per JS gesetzt
   Wird per CSS-Variable --hero-parallax-y gefuettert. */
.hero-est {
  transform: rotate(-4deg) translate3d(0, var(--hero-parallax-y, 0px), 0);
  transition: transform 60ms linear;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero-est { transform: rotate(-4deg); transition: none; }
}

/* F. Refined Card-Tiefe · weichere Schatten, weniger sprunghaft */
.teaser-card {
  transition:
    transform var(--dur-slow) var(--ease-out),
    border-color var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
}
.teaser-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 var(--line) inset,
    0 30px 60px -32px rgba(42, 24, 16, 0.28),
    0 12px 24px -16px rgba(184, 137, 62, 0.18);
}

/* G. Image-Film-Filter · sehr dezent
   Hauch Kontrast, minimal entsaettigt — wirkt wie Print. */
.gallery-item img,
.hero-mark-logo,
.brand-logo {
  filter: contrast(1.02) saturate(0.97);
}

/* H. Refined Focus-Ring · doppelte Hairline statt harter Outline */
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--paper),
    0 0 0 4px var(--gold);
  border-radius: var(--radius-xs);
}
/* Auf dunklen Hintergruenden: invertierter Doppel-Ring */
.lunch :focus-visible,
.reservation :focus-visible,
.today-feature :focus-visible,
.landing-visit-dark :focus-visible,
.site-footer :focus-visible,
.menu-broetchen-cta :focus-visible {
  box-shadow:
    0 0 0 2px var(--bean),
    0 0 0 4px var(--gold-soft);
}

/* I. Refined Sticky-Today · cleaneres Glass, weicheres Licht */
.sticky-today {
  background: rgba(42, 24, 16, 0.92);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(212, 179, 128, 0.18);
  box-shadow:
    0 24px 50px -22px rgba(42, 24, 16, 0.55),
    0 1px 0 rgba(255, 252, 244, 0.04) inset;
}

/* K. Hinweis: .ed-link CSS-Klasse war ungenutzt — entfernt.
   J. Quote-Card-Refinements wurden mit den Fake-Quotes selbst entfernt. */

/* L. Refined Typography · ruhigere Display-Rhythmik
   Fraunces auf grossen Groessen optisch lichter, mit besseren Ligaturen. */
.hero-text h1,
.lunch-today-dish,
.greeting-signature-name,
.greeting-line,
.landing-closer-quote {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "dlig" 1, "ss01" 1;
}
.hero-text h1 .head-3 { letter-spacing: -0.028em; }

/* M. Refined Eyebrow-Punkt · zentrierter Vertical-Align */
.eyebrow .num { position: relative; top: -1px; }

/* N. Footer-Wordmark dezenter · gleicht den Gold-Ton ab */
.site-footer::after {
  opacity: 0.07;
  background: linear-gradient(180deg, var(--linen) 0%, transparent 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* O. Section-Padding zwischen Ornament und Folge-Sektion entspannen */
.ornament + .section,
.ornament + section { padding-top: clamp(36px, 5vw, 64px); }

/* P. Refined Brand-Hover · sanfte Skalierung mit Drehung
   Maerchenhaft subtil, nicht spielerisch. */
.brand:hover .brand-logo {
  transform: rotate(-4deg) scale(1.03);
}
.brand-logo {
  transition: transform var(--dur-slow) var(--ease-out), width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out);
}

/* Q. Refined Topbar · 1px Hairline am unteren Rand verbindet sauber zum Header */
.topbar { border-bottom: 1px solid rgba(212, 179, 128, 0.08); }

/* R. Refined Hero-Ticker · etwas zurueckgenommen, weicher Verlauf an den Raendern
   Verhindert den harten Beginn-Cut beim Marquee. */
.hero-ticker { position: relative; }
.hero-ticker::before,
.hero-ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 90px;
  pointer-events: none;
  z-index: 2;
}
.hero-ticker::before { left: 0;  background: linear-gradient(90deg, var(--bean), transparent); }
.hero-ticker::after  { right: 0; background: linear-gradient(-90deg, var(--bean), transparent); }
@media (max-width: 560px) {
  .hero-ticker::before, .hero-ticker::after { width: 40px; }
}

/* S. Refined Hours-Liste auf Dark-Sektionen · feinere Hairline */
.landing-visit .hours-list li,
.lunch .hours-list li {
  border-color: rgba(241, 231, 211, 0.10);
}

/* T. Refined Menue-Card · sanfter Hover-Glow von links */
.menu-list li { transition: padding-left var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); }
.menu-list li:hover { background: linear-gradient(90deg, rgba(184, 137, 62, 0.05), transparent 80%); padding-left: 14px; }

/* U. Refined Reservierungs-Formular · animierter Underline-Sweep beim Focus */
.reservation-form label {
  position: relative;
}
.reservation-form input,
.reservation-form select,
.reservation-form textarea {
  position: relative;
  background-image:
    linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--line), var(--line));
  background-size: 0% 1.5px, 100% 1.5px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  border-bottom: 0;
  transition:
    background-size var(--dur-base) var(--ease-out),
    padding var(--dur-base) var(--ease-out);
}
.reservation-form input:focus,
.reservation-form select:focus,
.reservation-form textarea:focus {
  border-bottom: 0;
  box-shadow: none;
  background-size: 100% 1.5px, 100% 1.5px;
}
.reservation-form input:focus-visible,
.reservation-form select:focus-visible,
.reservation-form textarea:focus-visible {
  box-shadow: none;
  background-size: 100% 1.5px, 100% 1.5px;
}

/* V. Refined Today-Feature-Dish · etwas groesser und Lichter
   Das heutige Tagesgericht ist der wichtigste Inhalt der Startseite. */
.today-feature-dish {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.018em;
}
.today-feature-kicker {
  font-size: .72rem;
  letter-spacing: .28em;
}

/* W. Refined Page-Hero-Eyebrow auf Sub-Pages · centrierter Ton */
.page-hero-editorial .eyebrow {
  margin-bottom: 16px;
  letter-spacing: .28em;
}

/* X. Refined Footer · Hairline zwischen Brand und Nav-Reihe */
.site-footer {
  padding: 64px 0 0;
}
.footer-grid { position: relative; }
.footer-grid::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 179, 128, 0.18), transparent);
}
@media (max-width: 1080px) {
  .footer-grid::before { display: none; }
}

/* Y. Refined Brand-Name · feiner Spacing-Tweak fuer den Wortmark */
.brand-name {
  letter-spacing: -0.018em;
  font-variation-settings: "opsz" 48;
}

/* Z. Refined Lunch-Today-Tag · etwas runderer Glow */
.lunch-today-tag {
  background: rgba(212, 179, 128, 0.06);
}

/* ===============================================
   GRAND OVERHAUL · Magazine Edition
   ===============================================
   Hier wird die Seite zu einer richtigen Druck-
   Ausgabe: Edition-Strip, Cinema-Hero, Kapitel-
   Marker, Pull-Quote-Spread, Sign-Off "Fin." */

/* ---------- EDITION-STRIP ----------
   Schmaler Streifen ueber der Topbar: Datum + Standort.
   (Vol/No-Theater wurde bewusst entfernt — kein realer Bezug.) */
.edition-strip {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: .82rem;
  color: var(--muted);
  position: relative;
  z-index: 3;
}
.edition-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px var(--gutter);
  flex-wrap: wrap;
}
.edition-cell { display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; }
.edition-cell em {
  font-style: italic;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-variation-settings: "opsz" 48;
}
.edition-date::first-letter { text-transform: uppercase; }
@media (max-width: 720px) {
  .edition-place { display: none; }
  .edition-inner { justify-content: center; gap: 16px; font-size: .76rem; }
}

/* ---------- HERO · Cinematic ----------
   Standzeile riesig ueber die volle Breite, darunter Spread
   mit Lead-Text links und Standort-Aside rechts. Wie ein
   Magazin-Cover. */
.hero-cinematic { padding: 0 0 0; }
.hero-cinematic .hero-masthead {
  padding-top: clamp(60px, 9vw, 110px);
  padding-bottom: clamp(20px, 3vw, 36px);
  position: relative;
  z-index: 1;
}
.hero-cinematic .hero-eyebrow {
  margin: 0 0 18px;
  letter-spacing: .3em;
}
.hero-cinema-h1 {
  display: flex; flex-direction: column;
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(3.8rem, 12vw, 10rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  margin: 8px 0 0;
  color: var(--bean);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "ss01" 1;
  text-wrap: balance;
}
.hero-cinema-h1 .head-1,
.hero-cinema-h1 .head-2,
.hero-cinema-h1 .head-3 {
  display: block;
  opacity: 0;
  transform: translateY(28px);
  animation: hero-line var(--dur-reveal) var(--ease-out) forwards;
}
.hero-cinema-h1 .head-1 { animation-delay: 80ms; }
.hero-cinema-h1 .head-2 { animation-delay: 220ms; }
.hero-cinema-h1 .head-3 {
  color: var(--coffee);
  font-style: italic;
  margin-top: 0.04em;
  animation-delay: 360ms;
  letter-spacing: -0.05em;
}
.hero-cinema-h1 .head-2 em {
  font-style: italic;
  color: var(--gold);
  background-image: linear-gradient(180deg, transparent 62%, rgba(184, 137, 62, 0.18) 62%, rgba(184, 137, 62, 0.18) 92%, transparent 92%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-cinema-h1 .head-1,
  .hero-cinema-h1 .head-2,
  .hero-cinema-h1 .head-3 { opacity: 1; transform: none; animation: none; }
}

.hero-cinematic .hero-spread {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 0.85fr;
  gap: clamp(40px, 6vw, 90px);
  padding-top: clamp(36px, 5vw, 60px);
  padding-bottom: clamp(70px, 9vw, 110px);
  align-items: end;
}
.hero-spread-text .lead {
  max-width: 540px;
  font-size: clamp(1.05rem, 1.6vw, 1.18rem);
  color: var(--muted);
  margin: 0 0 30px;
  line-height: 1.62;
}
/* Editorial Drop-Cap auf dem Lead */
.hero-spread-text .lead::first-letter {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 3.6rem;
  line-height: 1;
  float: left;
  margin: 6px 12px 0 0;
  padding-top: 2px;
  color: var(--bean);
  font-style: italic;
  font-variation-settings: "opsz" 144;
}

/* Hero-Coord-Aside · Standort-Daten als Editorial Datenblock */
.hero-coord {
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 28px 28px 22px;
  background: rgba(255, 252, 244, 0.5);
  border: 1px solid var(--line);
  border-radius: 4px;
  position: relative;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  color: var(--bean);
  letter-spacing: .02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 28px 60px -34px rgba(42, 24, 16, 0.22);
}
.hero-coord::before {
  content: '';
  position: absolute;
  top: -1px; left: 14px; right: 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}
.hero-coord-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.hero-coord-row:last-of-type { border-bottom: 0; padding-bottom: 6px; }
.hero-coord-label {
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  flex-shrink: 0;
}
.hero-coord-value {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--bean);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.hero-coord-mark {
  display: flex; align-items: center; gap: 14px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.hero-coord-logo {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--bean);
  flex-shrink: 0;
  object-fit: cover;
}
.hero-coord-stamp {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: .92rem;
  color: var(--bean);
  letter-spacing: -0.005em;
}
@media (max-width: 920px) {
  .hero-cinematic .hero-spread { grid-template-columns: 1fr; gap: 36px; }
  .hero-coord { max-width: 420px; }
}
@media (max-width: 760px) {
  .hero-cinematic .hero-masthead { padding-top: clamp(40px, 7vw, 60px); }
  .hero-cinema-h1 { font-size: clamp(3.2rem, 14vw, 5.4rem); }
}

/* ---------- CHAPTER-MARKS ----------
   Riesige Roman-Numeral-Ecke-Marker pro Sektion.
   Sehr ruhig, sehr gross — wie Kapitel in einem Buch. */
.chapter { position: relative; }
.chapter-mark {
  position: absolute;
  top: clamp(20px, 3vw, 38px);
  right: clamp(20px, 4vw, 56px);
  z-index: 1;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1;
  color: var(--gold);
  opacity: 0.5;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
  pointer-events: none;
  user-select: none;
}
.chapter-mark::before {
  content: '№ ';
  font-size: 0.36em;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--muted);
  vertical-align: top;
  margin-right: 2px;
  position: relative;
  top: 0.3em;
}
.chapter-dark .chapter-mark { color: var(--gold-soft); opacity: 0.55; }
.chapter-dark .chapter-mark::before { color: rgba(241, 231, 211, 0.4); }

/* Fin. Marker fuer Closer-Sektion · subtiler, lateinisch */
@media (max-width: 760px) {
  .chapter-mark { top: 14px; right: 16px; font-size: 2.2rem; opacity: 0.35; }
}

/* ---------- PULL-QUOTE SPREAD ----------
   Statt drei kleiner Karten: eine riesige Headline-Quote
   mit grossem typografischen Anfuehrungszeichen, darunter
   zwei kleinere zur Balance. */
.landing-pullquote {
  padding: clamp(80px, 11vw, 140px) 0;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.landing-pullquote .quotes-eyebrow { text-align: left; margin-bottom: 30px; }
.pullquote-hero {
  position: relative;
  margin: 0 0 clamp(56px, 8vw, 110px);
  max-width: 980px;
}
.pullquote-mark {
  display: block;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(7rem, 14vw, 14rem);
  line-height: 0.5;
  color: var(--gold);
  opacity: 0.8;
  margin: 0 0 -.2em -.08em;
  font-variation-settings: "opsz" 144;
}
.pullquote-text {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5.6vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.026em;
  color: var(--bean);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "ss01" 1;
  text-wrap: balance;
}
.pullquote-text em {
  font-style: italic;
  color: var(--coffee);
}
.pullquote-cite {
  margin: clamp(22px, 3vw, 36px) 0 0;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.pullquote-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.pullquote-small {
  margin: 0;
}
.pullquote-small blockquote {
  margin: 0 0 14px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.32;
  color: var(--bean);
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 96;
}
.pullquote-small figcaption {
  font-family: 'Inter', sans-serif;
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
@media (max-width: 760px) {
  .pullquote-row { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- CLOSER · Editorial Sign-Off ----------
   Riesige Schlusszeile mit Fin.-Marker. */
.chapter-finis .landing-closer-quote {
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: -0.024em;
  max-width: 920px;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.chapter-finis .landing-closer-quote em {
  background-image: linear-gradient(180deg, transparent 62%, rgba(184, 137, 62, 0.18) 62%, rgba(184, 137, 62, 0.18) 92%, transparent 92%);
}

/* ---------- CUSTOM CURSOR ----------
   Dot + Ring, magnetisch auf CTAs. Premium-Signal, aber
   sehr ruhig. Nur Desktop mit fine pointer + no reduced-motion. */
@media (hover: hover) and (pointer: fine) {
  .has-custom-cursor { cursor: none; }
  .has-custom-cursor a, .has-custom-cursor button { cursor: none; }
  .custom-cursor,
  .custom-cursor-ring {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9998;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
    mix-blend-mode: multiply;
  }
  .custom-cursor {
    width: 6px; height: 6px;
    background: var(--bean);
    border-radius: 50%;
    transition: width 200ms var(--ease-out), height 200ms var(--ease-out), background-color 200ms var(--ease-out);
  }
  .custom-cursor-ring {
    width: 36px; height: 36px;
    border: 1px solid var(--bean);
    border-radius: 50%;
    opacity: 0.4;
    transition:
      width 280ms var(--ease-spring),
      height 280ms var(--ease-spring),
      opacity 280ms var(--ease-out),
      border-color 280ms var(--ease-out),
      background-color 280ms var(--ease-out);
  }
  .custom-cursor.is-hover { width: 0; height: 0; }
  .custom-cursor-ring.is-hover {
    width: 56px; height: 56px;
    border-color: var(--gold);
    background: rgba(184, 137, 62, 0.12);
    opacity: 1;
  }
  .custom-cursor.is-on-dark { background: var(--gold-soft); mix-blend-mode: normal; }
  .custom-cursor-ring.is-on-dark { border-color: var(--gold-soft); mix-blend-mode: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .custom-cursor, .custom-cursor-ring { display: none; }
  .has-custom-cursor, .has-custom-cursor a, .has-custom-cursor button { cursor: auto; }
}

/* ---------- SMOOTH-SCROLL ----------
   Etwas weichere Standard-Scroll-Animation per CSS. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- HERO-EST ANPASSEN AUF VOLLE BREITE ----------
   Das Wasserzeichen Est. 2004 sitzt jetzt hinter dem
   cinematic Hero, nicht mehr nur in der rechten Spalte. */
.hero-cinematic .hero-est {
  top: clamp(60px, 8vw, 110px);
  right: -2vw;
  opacity: 0.045;
}

/* ---------- HERO-PARTNER auf Cinematic groesser ---------- */
.hero-cinematic .hero-partner { margin-top: 26px; }
.hero-cinematic .hero-cta { gap: clamp(18px, 2.5vw, 26px); }

/* ---------- REFINED TODAY-FEATURE-DISH ueber Spread ----------
   Auf der Cinema-Seite wirkt der Heute-Dish jetzt noch
   prominenter. */
.chapter.today-feature { padding: clamp(80px, 10vw, 130px) 0; }
.chapter.today-feature .today-feature-dish {
  font-size: clamp(2.8rem, 6vw, 4.2rem);
}
.chapter.today-feature .today-feature-inner { max-width: 820px; }

/* ---------- HERO-SCROLL-HINT ----------
   Schwebt am unteren Rand der Hero-Sektion. Diskret. */
.hero-scroll-hint {
  position: absolute;
  bottom: 80px;
  right: clamp(20px, 4vw, 56px);
  z-index: 4;
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
  pointer-events: none;
  animation: hero-scroll-hint-in 1.6s var(--ease-out) 1.4s backwards;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.hero-scroll-hint.is-hidden {
  opacity: 0;
  transform: translateY(8px);
}
.hero-scroll-line {
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, transparent, var(--gold));
  animation: hero-scroll-line 2.4s var(--ease-in-out) infinite;
  transform-origin: top center;
}
.hero-scroll-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1;
}
@keyframes hero-scroll-hint-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 0.7; transform: translateY(0); }
}
@keyframes hero-scroll-line {
  0%   { transform: scaleY(0.3); transform-origin: top center; opacity: 0.3; }
  50%  { transform: scaleY(1);   transform-origin: top center; opacity: 1; }
  51%  { transform: scaleY(1);   transform-origin: bottom center; }
  100% { transform: scaleY(0.3); transform-origin: bottom center; opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-hint, .hero-scroll-line { animation: none; }
}
@media (max-width: 760px) {
  .hero-scroll-hint { display: none; }
}

/* ---------- PAGE-TRANSITION GUARD ----------
   Verhindert weissen Flash beim Fade-Out: html-Background
   stimmt mit Body-Background ueberein. */
html { background: var(--paper); }

/* ===============================================
   GRAND OVERHAUL II · Mehr Drama
   =============================================== */

/* ---------- SPREAD-GRID statt Teaser-Cards ----------
   Asymmetrisches Magazin-Layout: erste Karte als grosse
   Cover-Story, andere drei als Sidebar-Stack. */
.landing-cards-spread { background: var(--paper); }
.landing-cards-spread .section-head h2 em { font-style: italic; color: var(--coffee); }

.spread-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(20px, 3vw, 36px);
  margin-top: clamp(40px, 6vw, 70px);
  align-items: stretch;
}
.spread-grid > .spread-card-hero {
  grid-row: span 3;
}
.spread-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 3.5vw, 44px) clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 36px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition:
    transform var(--dur-slow) var(--ease-out),
    border-color var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
  min-height: 180px;
}
.spread-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.spread-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold-soft);
  box-shadow:
    0 32px 64px -36px rgba(42, 24, 16, 0.28),
    0 14px 28px -18px rgba(184, 137, 62, 0.22);
}
.spread-card:hover::after { transform: scaleX(1); }
.spread-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4rem, 7vw, 7rem);
  line-height: 0.8;
  color: var(--gold);
  opacity: 0.35;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  pointer-events: none;
  user-select: none;
  margin: 0 0 12px;
  display: block;
}
.spread-card:hover .spread-num {
  opacity: 0.8;
  transform: translateY(-4px) rotate(-3deg);
}
.spread-card-body { display: flex; flex-direction: column; flex: 1; gap: 10px; }
.spread-kicker {
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0;
}
.spread-card h3 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  line-height: 1.05;
  margin: 0 0 8px;
  letter-spacing: -0.018em;
  color: var(--bean);
  font-variation-settings: "opsz" 96;
}
.spread-card h3 em { font-style: italic; color: var(--coffee); }
.spread-card p {
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 36ch;
}
.spread-link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bean);
  font-weight: 600;
  position: relative;
}
.spread-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.spread-card:hover .spread-link::after { transform: scaleX(1); }
.spread-link .ico { transition: transform var(--dur-base) var(--ease-out); }
.spread-card:hover .spread-link .ico { transform: translateX(6px); }

/* Cover-Story: groesser, kraeftiger, mit Akzent-Background */
.spread-card-hero {
  background:
    radial-gradient(900px 300px at 0% 0%, rgba(184, 137, 62, 0.10), transparent 60%),
    var(--cream);
  border-color: var(--gold-soft);
  padding: clamp(40px, 5vw, 60px) clamp(36px, 4.5vw, 56px);
}
.spread-card-hero .spread-num {
  font-size: clamp(7rem, 11vw, 11rem);
  color: var(--bean);
  opacity: 0.5;
}
.spread-card-hero h3 {
  font-size: clamp(2.6rem, 4.4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.024em;
  font-variation-settings: "opsz" 144;
}
.spread-card-hero p { font-size: 1.05rem; max-width: 38ch; }
.spread-card-hero .spread-link { font-size: .82rem; }

@media (max-width: 900px) {
  .spread-grid { grid-template-columns: 1fr; }
  .spread-grid > .spread-card-hero { grid-row: auto; }
  .spread-card-hero h3 { font-size: clamp(2.2rem, 7vw, 2.8rem); }
  .spread-card-hero .spread-num { font-size: clamp(5rem, 18vw, 7rem); }
}

/* ---------- SUB-PAGE HERO · CHAPTER-MARK ----------
   Auch jede Sub-Page (Mittagstisch, Speisekarte, ...) kriegt
   ihren editorialen Kapitel-Marker. */
.page-hero-editorial { position: relative; }
.page-hero-editorial::after {
  content: attr(data-page-num);
  position: absolute;
  top: clamp(40px, 6vw, 80px);
  right: clamp(20px, 4vw, 56px);
  z-index: 2;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1;
  color: var(--gold);
  opacity: 0.55;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
  pointer-events: none;
  user-select: none;
}
.page-hero-editorial[data-page-num]::after { display: block; }
.page-hero-editorial:not([data-page-num])::after { display: none; }

/* ---------- LUNCH-PAGE · Cinematic ----------
   Mittagstisch-Seite wird zur richtigen Druck-Spread.
   Kapitel-Marker als Fixpunkt im Hintergrund. */
.lunch.chapter { padding: clamp(70px, 9vw, 130px) 0; }
.lunch .chapter-mark {
  color: var(--gold-soft);
  opacity: 0.5;
  font-size: clamp(3.4rem, 6vw, 6rem);
}
.lunch .chapter-mark::before { color: rgba(241, 231, 211, 0.4); }

.lunch-today-dish {
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "ss01" 1;
}

/* ---------- HERO-CHAR-REVEAL ----------
   Char-by-Char-Animation auf den Hero-Lines. JS umwickelt
   jeden Buchstaben mit span.hero-char und jedes Wort mit
   span.hero-word (nowrap), damit die Zeile nicht mitten
   im Wort bricht. */
.hero-cinema-h1 .hero-word {
  display: inline-block;
  white-space: nowrap;
}
.hero-cinema-h1 .hero-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  animation: hero-char-up 700ms var(--ease-out) forwards;
  animation-delay: calc(var(--char-i, 0) * 22ms + var(--char-base, 0ms));
}
.hero-cinema-h1 .head-1 .hero-char { --char-base: 80ms; }
.hero-cinema-h1 .head-2 .hero-char { --char-base: 320ms; }
.hero-cinema-h1 .head-3 .hero-char { --char-base: 620ms; }
@keyframes hero-char-up {
  to { opacity: 1; transform: translateY(0); }
}
/* Sobald JS die Chars erstellt hat, die Block-Animation deaktivieren */
.hero-cinema-h1.is-char-revealed .head-1,
.hero-cinema-h1.is-char-revealed .head-2,
.hero-cinema-h1.is-char-revealed .head-3 {
  opacity: 1;
  transform: none;
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-cinema-h1 .hero-char { opacity: 1; transform: none; animation: none; }
}

/* ---------- REFINED TODAY-FEATURE ON DARK ----------
   Auf der Cinema-Seite traegt das Tagesgericht jetzt
   noch mehr Drama: groessere Eyebrow, breiterer Atem. */
.chapter.today-feature {
  background:
    radial-gradient(1200px 500px at 50% 0%, rgba(184, 137, 62, 0.22), transparent 60%),
    linear-gradient(160deg, var(--bean) 0%, var(--espresso) 100%);
}
.chapter.today-feature::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ---------- LANDING-VISIT · Refined Dramatic ---------- */
.chapter.landing-visit-dark {
  padding: clamp(80px, 10vw, 140px) 0;
}
.chapter.landing-visit-dark h2 {
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-variation-settings: "opsz" 144;
  line-height: 0.96;
  letter-spacing: -0.024em;
}

/* ---------- FOOTER-CREDIT ----------
   Subtle "edited in Hohenfelde"-Zeile unter dem Wordmark */
.site-footer .footer-grid + .footer-credit {
  text-align: center;
  margin: 32px 0 6px;
  position: relative;
  z-index: 2;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: .82rem;
  color: rgba(241, 231, 211, 0.4);
  letter-spacing: 0.02em;
}
.footer-credit em { color: var(--gold-soft); font-style: italic; }

/* ===============================================
   GRAND OVERHAUL III · Magazin Vollausbau
   =============================================== */

/* ---------- CHAPTER-RAIL · Floating Magazin-Index ----------
   Rechts schwebende, vertikale Liste der Kapitel. Zeigt
   aktive Section per JS, ist klickbar zum Springen. */
.chapter-rail {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.chapter-rail.is-visible { opacity: 1; }
.chapter-rail-item {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 6px 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: .82rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-decoration: none;
  opacity: 0.4;
  transition:
    opacity var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    gap var(--dur-base) var(--ease-out);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chapter-rail-label {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateX(8px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.chapter-rail-mark {
  display: inline-block;
  width: 18px; height: 1px;
  background: var(--bean);
  transition: width var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.chapter-rail-item:hover { opacity: 1; color: var(--bean); }
.chapter-rail-item:hover .chapter-rail-label,
.chapter-rail-item.is-active .chapter-rail-label {
  opacity: 1;
  transform: translateX(0);
}
.chapter-rail-item.is-active {
  opacity: 1;
  color: var(--gold);
}
.chapter-rail-item.is-active .chapter-rail-mark {
  width: 36px;
  background: var(--gold);
}
@media (max-width: 980px) { .chapter-rail { display: none; } }

/* Auf dunklen Sektionen das Rail invertieren */
.chapter-rail.is-on-dark .chapter-rail-item { color: var(--linen); }
.chapter-rail.is-on-dark .chapter-rail-mark { background: var(--linen); }
.chapter-rail.is-on-dark .chapter-rail-item.is-active { color: var(--gold-soft); }
.chapter-rail.is-on-dark .chapter-rail-item.is-active .chapter-rail-mark { background: var(--gold-soft); }

/* ---------- SPEISEKARTE · Editorial Spread ----------
   Jede Kategorie wird zur eigenen breit ausgespielten Page,
   mit Mega-Nummer links und Items rechts in zwei Spalten. */
.menu-cols {
  display: flex; flex-direction: column;
  gap: clamp(70px, 10vw, 130px);
  margin-top: clamp(60px, 8vw, 100px);
}
.menu-col {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) 2fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
  padding-top: clamp(40px, 5vw, 60px);
  border-top: 1px solid var(--line);
  position: relative;
}
.menu-col:first-child { border-top: 0; padding-top: 0; }
.menu-col-num {
  position: static;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(6rem, 14vw, 13rem);
  line-height: 0.85;
  color: var(--gold);
  opacity: 0.4;
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 144;
  pointer-events: none;
  user-select: none;
  display: block;
  margin: 0 0 12px;
}
.menu-col-head {
  display: flex; flex-direction: column; gap: 14px;
  padding-bottom: 0;
  margin-bottom: 0;
  border: 0;
  align-items: flex-start;
}
.menu-col-head .ico {
  width: 32px; height: 32px;
  color: var(--gold);
  margin-bottom: 8px;
}
.menu-col-head h3 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  margin: 0;
  letter-spacing: -0.024em;
  color: var(--bean);
  line-height: 0.95;
  font-variation-settings: "opsz" 144;
}
.menu-col-body { display: contents; }
.menu-col .menu-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(28px, 4vw, 56px);
  column-gap: clamp(28px, 4vw, 56px);
}
.menu-col .menu-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 4px;
}
.menu-col .menu-list li:last-child { border-bottom: 0; }
.menu-col .menu-list strong { font-size: 1.06rem; }
@media (max-width: 880px) {
  .menu-col { grid-template-columns: 1fr; gap: 24px; }
  .menu-col .menu-list { grid-template-columns: 1fr; }
}

/* ---------- ÜBER UNS · Article-Editorial-Treatment ----------
   Drop-Cap, refined spacing, refined feature-list. */
.about-text .lead-soft:first-of-type::first-letter {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-style: italic;
  font-size: 5rem;
  line-height: 0.9;
  float: left;
  margin: 6px 14px 0 0;
  padding-top: 4px;
  color: var(--gold);
  font-variation-settings: "opsz" 144;
}
.about-text .lead-soft strong { color: var(--bean); font-weight: 500; }
.about-text .lead-soft {
  font-size: 1.12rem;
  line-height: 1.72;
  color: var(--ink);
  margin-bottom: 26px;
}

/* Pull-Quote-Aside auf Über-Uns: groesseres Anfuehrungszeichen, gold */
.about-aside {
  padding: clamp(36px, 5vw, 56px);
  background:
    radial-gradient(800px 200px at 0% 0%, rgba(184, 137, 62, 0.12), transparent 60%),
    var(--cream);
}
.about-aside::before {
  font-size: 6.5rem;
  line-height: 0.6;
  color: var(--gold);
  opacity: 0.7;
  margin-bottom: -10px;
}
.about-aside blockquote {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.32;
  letter-spacing: -0.014em;
  font-variation-settings: "opsz" 96;
}
.about-aside blockquote em { color: var(--gold); font-style: italic; }
.about-aside blockquote p { margin: 0; }

/* Features-Liste editorialer: kleine Nummer + groessere Typo */
.about-text .features { gap: 22px 32px; margin-top: 24px; }
.about-text .features li {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.about-text .features strong {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.06rem;
  font-variation-settings: "opsz" 48;
}

/* ---------- REFINED ABOUT-SECTION on Sub-Page ----------
   Padding hoch, mehr Atem. */
.section.about {
  padding: clamp(70px, 9vw, 130px) 0;
}

/* ---------- FAQ-SECTION REFINED ----------
   Editorial: jede FAQ wird zu einer kleinen Magazin-Frage. */
.faq-summary {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.45rem);
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 96;
}
.faq-item { padding: 4px 0; }
.faq-item:hover .faq-summary { color: var(--gold); }

/* ---------- REFINED LANDING-VISIT INNER ---------- */
.landing-visit-inner h2 {
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "ss01" 1;
}

/* ---------- REFINED RESERVATION-PAGE ----------
   Form wirkt jetzt wie ein Ticket: dichter, premium. */
.reservation.chapter { padding: clamp(70px, 9vw, 130px) 0; }
.reservation-form {
  border-radius: 2px;
  padding: clamp(40px, 5vw, 60px);
  background: var(--paper);
  position: relative;
}
.reservation-form::before {
  content: '';
  position: absolute;
  top: -1px; left: 14px; right: 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}

/* ---------- SMOOTH-SCROLL-FALLBACK ----------
   Wenn JS smooth-scroll laeuft, CSS smooth-behavior off. */
html.has-js-scroll { scroll-behavior: auto; }

/* ===============================================
   GRAND OVERHAUL IV · Animation & Flourish
   =============================================== */

/* ---------- SVG-FLOURISH-DIVIDER ----------
   Hand-drawn Linie zwischen Sections, die per
   IntersectionObserver eingezeichnet wird. */
.flourish {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  height: 28px;
  color: var(--gold);
  opacity: 0.55;
}
.flourish path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1600ms var(--ease-out);
}
.flourish.is-drawn path { stroke-dashoffset: 0; }
.ornament .flourish { max-width: 220px; }
@media (prefers-reduced-motion: reduce) {
  .flourish path { stroke-dashoffset: 0; transition: none; }
}

/* ---------- ANIMATED EM-HIGHLIGHT ----------
   Der gold-Rechteck-Hintergrund unter "Sie da" wird jetzt
   in-view animiert: Background-Size waechst von 0% auf 100%. */
.hero-cinema-h1 .head-2 em,
.chapter-finis .landing-closer-quote em {
  background-image: linear-gradient(180deg, transparent 62%, rgba(184, 137, 62, 0.32) 62%, rgba(184, 137, 62, 0.32) 92%, transparent 92%);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 1000ms var(--ease-out) 800ms;
  padding: 0 0.04em;
}
.hero-cinema-h1.is-char-revealed .head-2 em,
.chapter-finis.is-em-drawn .landing-closer-quote em {
  background-size: 100% 100%;
}
@media (prefers-reduced-motion: reduce) {
  .hero-cinema-h1 .head-2 em,
  .chapter-finis .landing-closer-quote em {
    background-size: 100% 100%;
    transition: none;
  }
}

/* ---------- BRAND-INK-STAMP ----------
   Der Logo-Mark "tropft" beim Page-Load sanft auf:
   leichte Bleed-Blur + Rotation, das wirkt wie ein Stempel. */
.brand-logo {
  animation: brand-stamp 1400ms var(--ease-out) backwards;
}
@keyframes brand-stamp {
  0% {
    opacity: 0;
    transform: scale(0.84) rotate(-12deg);
    filter: blur(8px);
  }
  60% {
    opacity: 1;
    filter: blur(0.5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo { animation: none; }
}

/* ---------- DOTTED-LEADER-Animation in Hours-Liste ----------
   Editorial: Punkte zwischen "Mo - Fr" und "06:30 - 15:00",
   die beim Scroll in den View animiert werden. */
.hours-list li {
  position: relative;
  align-items: baseline;
  gap: 12px;
}
.hours-list li > span:first-child::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background-image: radial-gradient(circle, currentColor 1px, transparent 1.4px);
  background-size: 8px 2px;
  background-position: 0 50%;
  background-repeat: repeat-x;
  margin: 0 6px;
  opacity: 0.18;
  align-self: center;
  display: inline-block;
  min-width: 30px;
}
/* Auf hellen Hintergruenden: dunkler dots */
.hours-inline .hours-list li > span:first-child::after { opacity: 0.22; color: var(--bean); }
/* In den Spreads ist span:first-child kein flex-item, daher Override */
.landing-visit .hours-list li,
.contact .hours-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
}
.landing-visit .hours-list li > span:first-child,
.contact .hours-list li > span:first-child {
  display: contents;
}

/* ---------- ANIMATED MENU-LIST-Leader ----------
   Dotted leader zwischen Item-Name und (fehlendem) Preis
   wirkt premium auf Speisekarte. */
.menu-list li {
  position: relative;
}
.menu-list strong {
  display: inline;
  background:
    radial-gradient(circle, var(--line) 1px, transparent 1.4px) 0 100% / 8px 2px repeat-x;
  background-clip: padding-box;
}
/* Die Dotted-Leader sollten nicht stoeren — sind eigentlich
   schon zu viel. Drum dezent: nur opacity am Hover */
.menu-list strong {
  background-image: none;
}

/* ---------- REFINED STICKY HEADER ----------
   Beim Scrollen: Brand-Name wird italic, Spacing weiter,
   wirkt wie eine Kolumne. */
.site-header.is-scrolled .brand-name {
  font-style: italic;
  letter-spacing: -0.024em;
  font-variation-settings: "opsz" 36;
}
.site-header.is-scrolled .nav-container {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ---------- REFINED CHAPTER-MARK-Drama ----------
   Beim ersten Sichtbarwerden zeichnet sich der Marker
   subtil auf — alle Numerals starten gedimmt und gewinnen
   Opazitaet beim Sichtbarwerden. */
.chapter-mark {
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
  transition: opacity 1.4s var(--ease-out), transform 1.4s var(--ease-out);
}
.chapter.is-mark-in .chapter-mark {
  opacity: 0.5;
  transform: translateY(0) scale(1);
}
.chapter.is-mark-in.chapter-dark .chapter-mark { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) {
  .chapter-mark { opacity: 0.5; transform: none; transition: none; }
  .chapter.chapter-dark .chapter-mark { opacity: 0.55; }
}

/* ---------- REFINED HERO-CTA STAMP-MICRO-ROTATION ----------
   Beim Klick wirkt der Primary-Button wie ein gestempelter
   Abdruck — minimale Rotation als Press-Feedback. */
.btn-stamp:active { transform: translateY(0) rotate(-1.4deg) scale(.98); }

/* ---------- CHAPTER-RAIL · Active-Pulse-Glow ----------
   Wenn das aktive Item wechselt, kurzer Gold-Glow-Puls
   auf dem Mark. Wird per JS via .is-pulse-Klasse getriggert. */
.chapter-rail-item.is-pulse .chapter-rail-mark {
  animation: rail-pulse 700ms var(--ease-out) 1;
}
@keyframes rail-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(184, 137, 62, 0.4); }
  100% { box-shadow: 0 0 0 12px rgba(184, 137, 62, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-rail-item.is-pulse .chapter-rail-mark { animation: none; }
}

/* ---------- HERO-CTA REFINED ARROW-DRAW ----------
   Beim Hover auf Online-bestellen-Button wandert die
   Arrow-Icon nach rechts UND der Underline-Sweep zieht mit. */
.btn-primary .ico,
.btn-gold .ico,
.btn-stamp .ico {
  transition: transform var(--dur-base) var(--ease-out);
}
.btn-primary:hover .ico,
.btn-gold:hover .ico,
.btn-stamp:hover .ico {
  transform: translateX(4px);
}

/* ---------- REFINED IMAGE TONE ----------
   Warm-Brown Duotone-Overlay auf Galerie-Bildern.
   Wirkt wie Print-Halbton. */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.gallery-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(140deg, rgba(184, 137, 62, 0.08), rgba(42, 24, 16, 0.12));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.gallery-item img {
  transition: transform 1.2s var(--ease-out), filter 1.2s var(--ease-out);
  filter: contrast(1.06) saturate(0.92);
}
.gallery-item:hover img {
  transform: scale(1.04);
  filter: contrast(1.1) saturate(1);
}

/* ---------- REFINED RESERVE-PAGE Form als Ticket ----------
   Perforation-Hairline am oberen + unteren Rand. */
.reservation-form::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 14px; right: 14px;
  height: 1px;
  background:
    repeating-linear-gradient(90deg, var(--line) 0, var(--line) 6px, transparent 6px, transparent 12px);
}

/* ===============================================
   GRAND OVERHAUL V · Editorial-Vollausbau Teil 2
   =============================================== */

/* ---------- 404 · EDITORIAL ERRATA ----------
   Riesige 404 als Watermark, Errata-Strip, Fin.-Marker.
   Wirkt wie eine Errata-Seite in einer Druckausgabe. */
.error-editorial {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: clamp(80px, 12vw, 160px) var(--gutter);
  background:
    radial-gradient(1200px 600px at 50% 20%, rgba(184, 137, 62, 0.10), transparent 60%),
    var(--paper);
}
.error-watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-3deg);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(14rem, 36vw, 36rem);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--bean);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  font-variation-settings: "opsz" 144;
  z-index: 0;
}
.error-inner { position: relative; z-index: 1; max-width: 720px; text-align: left; }
.error-issue {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: .92rem;
  color: var(--muted);
  margin: 0 0 28px;
  letter-spacing: 0.02em;
}
.error-issue-dot { color: var(--gold); opacity: 0.7; }
.error-headline {
  display: flex; flex-direction: column;
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  line-height: 0.94;
  letter-spacing: -0.028em;
  color: var(--bean);
  margin: 8px 0 32px;
  font-variation-settings: "opsz" 144;
}
.error-headline em {
  font-style: italic;
  color: var(--coffee);
}
.error-line {
  display: block;
  opacity: 0;
  transform: translateY(20px);
  animation: hero-line 900ms var(--ease-out) forwards;
}
.error-line:nth-child(1) { animation-delay: 100ms; }
.error-line:nth-child(2) { animation-delay: 260ms; }
.error-line:nth-child(3) { animation-delay: 420ms; }
.error-lead {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.6;
  max-width: 580px;
  margin: 0 0 40px;
}
.error-cta {
  display: flex; gap: 22px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 50px;
}
.error-fin {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--muted);
  opacity: 0.6;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
}
.error-meta {
  font-size: .76rem;
  color: var(--muted);
  letter-spacing: .04em;
  margin: 0;
  font-family: 'Inter', sans-serif;
  opacity: 0.8;
}
@media (prefers-reduced-motion: reduce) {
  .error-line { opacity: 1; transform: none; animation: none; }
}

/* ---------- H2 LINE-REVEAL ueber die ganze Seite ----------
   Alle h2 in section-head und vergleichbaren Stellen
   reveal sich line-by-line beim Sichtbarwerden. */
.h2-reveal {
  overflow: hidden;
}
.h2-reveal .h2-line {
  display: block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.h2-reveal.in .h2-line {
  opacity: 1;
  transform: translateY(0);
}
.h2-reveal.in .h2-line:nth-child(1) { transition-delay: 60ms; }
.h2-reveal.in .h2-line:nth-child(2) { transition-delay: 200ms; }
.h2-reveal.in .h2-line:nth-child(3) { transition-delay: 340ms; }
@media (prefers-reduced-motion: reduce) {
  .h2-reveal .h2-line { opacity: 1; transform: none; transition: none; }
}

/* ---------- COOKIE-BANNER · Editorial Notice ----------
   Wirkt wie ein gedruckter Hinweis am unteren Seitenrand,
   keine moderne Cookie-Wall. */
.cookie-banner {
  border-top: 2px solid var(--bean);
  border-bottom: 0;
  background:
    radial-gradient(800px 200px at 50% 0%, rgba(184, 137, 62, 0.06), transparent 60%),
    var(--paper);
}
.cookie-banner::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  margin: 6px 12px 0;
}
.cookie-inner {
  padding: 24px 32px 26px;
}
.cookie-text {
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  line-height: 1.6;
}
.cookie-text strong {
  display: block;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--bean);
  margin: 0 0 4px;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 48;
}
.cookie-accept {
  font-size: .8rem;
  letter-spacing: .06em;
  padding: 13px 24px;
}
.cookie-decline {
  font-size: .8rem;
  letter-spacing: .06em;
  padding: 13px 22px;
}

/* ---------- PRESS-STAMP-INK-Bleed bei Klick ----------
   Beim Aktiv-Klick auf primary/gold/stamp wirkt der Button
   wie ein nasser Stempel-Druck: kurzer Dunkel-Halo. */
.btn-primary,
.btn-gold,
.btn-stamp {
  position: relative;
}
.btn-primary:active::after,
.btn-gold:active::after,
.btn-stamp:active::after {
  background: radial-gradient(120% 120% at 50% 50%, rgba(42, 24, 16, 0.18), transparent 60%);
  opacity: 1;
}

/* ---------- REFINED LIVE-STATUS ----------
   Live-Status-Pille im Hero kriegt jetzt einen subtilen
   pulsierenden Halo-Rand. */
.live-status[data-state="open"] {
  box-shadow: 0 0 0 1px rgba(74, 168, 91, 0.12), 0 12px 24px -16px rgba(74, 168, 91, 0.3);
}

/* ---------- REFINED HEADER-BRAND on Hover Mark ----------
   Beim Hover auf Brand-Logo rotiert es subtil, das Stempel-
   Gefuehl bleibt erhalten. */
.brand-logo {
  transition: transform var(--dur-slow) var(--ease-spring), filter var(--dur-base) var(--ease-out);
}
.brand:hover .brand-logo {
  transform: rotate(-6deg) scale(1.04);
}

/* ---------- BIGGER TODAY-FEATURE-KICKER ----------
   Tagesgericht im Hero-Kontext groesser, dramatischer. */
.today-feature-inner h2,
.today-feature-inner .today-feature-dish {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
}
.today-feature-kicker {
  font-size: .76rem;
}

/* ===============================================
   GRAND OVERHAUL VI · Sub-Page-Drama
   =============================================== */

/* ---------- MITTAGSTISCH · Today-Card als Editorial Spread ----------
   Statt centered Card: asymmetrischer Magazin-Spread.
   Tagname links als kleine Spalte, Gericht riesig italic rechts. */
.lunch-today {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  max-width: 1080px;
  text-align: left;
  padding: clamp(48px, 6vw, 80px) clamp(32px, 5vw, 60px);
}
.lunch-today-tag {
  align-self: start;
  margin-bottom: 18px;
  border-color: rgba(212, 179, 128, 0.36);
  letter-spacing: .28em;
  font-size: .68rem;
}
.lunch-today-dish {
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  text-align: left;
  margin: 0 0 14px;
  line-height: 1;
}
.lunch-today-side {
  text-align: left;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  margin: 0 0 32px;
}
.lunch-today .btn-gold { margin-top: 0; }
.lunch-today-meta {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 22px 0;
  border-top: 1px solid rgba(212, 179, 128, 0.20);
  border-bottom: 1px solid rgba(212, 179, 128, 0.20);
  margin-top: 4px;
}
.lunch-today-meta-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(241, 231, 211, 0.55);
}
.lunch-today-meta-row em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--gold-soft);
  font-weight: 400;
}
@media (max-width: 760px) {
  .lunch-today { grid-template-columns: 1fr; gap: 14px; text-align: center; padding: 36px 24px; }
  .lunch-today-dish, .lunch-today-side { text-align: center; }
}

/* ---------- BROETCHEN-Bestellseite · Editorial-Refined ----------
   Items mit kleiner Italic-Nummer, refined stepper. */
.broetchen-list {
  counter-reset: broetchen;
  border-top: 1px solid var(--line);
}
.broetchen-row {
  position: relative;
  counter-increment: broetchen;
  padding: 22px 0 22px 56px;
  border-bottom: 1px solid var(--line);
  border-top: 0;
  transition: padding var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.broetchen-row::before {
  content: counter(broetchen, decimal-leading-zero);
  position: absolute;
  left: 0; top: 24px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--gold);
  opacity: 0.5;
  letter-spacing: -0.01em;
  line-height: 1;
  font-variation-settings: "opsz" 96;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.broetchen-row:hover {
  background: linear-gradient(90deg, rgba(184, 137, 62, 0.05), transparent 80%);
  padding-left: 64px;
}
.broetchen-row:hover::before { opacity: 1; transform: translateX(-2px); }
.broetchen-row.is-active::before { opacity: 1; color: var(--gold); }
.broetchen-name {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--bean);
  font-variation-settings: "opsz" 96;
}
.broetchen-desc {
  margin-top: 4px;
  font-size: .9rem;
  letter-spacing: 0.005em;
}
.qty-stepper {
  border-color: var(--line);
  background: transparent;
}
.qty-stepper:hover { border-color: var(--gold-soft); }
.qty-btn { font-family: 'Fraunces', serif; font-weight: 400; font-size: 1.6rem; }
.qty-value { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; font-size: 1.2rem; }

/* Order-Legend etwas grosser, italic */
.order-legend {
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.024em;
}
.order-legend .num {
  font-size: 1.4rem;
  opacity: 0.55;
}

/* ---------- KONTAKT · Editorial Address-Datablock ----------
   Adresse als editorialer Block, mit grosser Fraunces-Schrift. */
.contact-info-block {
  background:
    radial-gradient(800px 200px at 0% 0%, rgba(184, 137, 62, 0.06), transparent 60%),
    var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(36px, 5vw, 56px);
  position: relative;
}
.contact-info-block::before {
  content: '';
  position: absolute;
  top: -1px; left: 14px; right: 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}
.contact-cols {
  margin: 0 0 32px;
  gap: clamp(28px, 4vw, 56px);
}
.contact-col { font-style: normal; margin: 0; }
.col-label {
  margin: 0 0 8px !important;
  font-size: .66rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.contact-col .col-value {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--bean);
  font-variation-settings: "opsz" 96;
}
.contact-col .col-value a:hover { color: var(--gold); }
.hours-inline { padding-top: 32px; border-top: 1px solid var(--line); }
.hours-inline .col-label { margin-bottom: 16px !important; }
.hours-inline .hours-list li {
  padding: 14px 0;
  font-size: 1.1rem;
}
.hours-inline .hours-list li > span:first-child {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--bean);
  font-variation-settings: "opsz" 48;
}
.hours-inline .hours-list .time {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--coffee);
  font-size: 1.1rem;
  letter-spacing: -0.005em;
}

/* Social-Links · refined Wipe-Underline */
.social a {
  position: relative;
  font-family: 'Fraunces', serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: .98rem;
  color: var(--bean);
  border-bottom: 0;
  padding-bottom: 4px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-position: 0 100%;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  transition: color var(--dur-base) var(--ease-out), background-size var(--dur-slow) var(--ease-out);
}
.social a:hover { color: var(--gold); background-size: 100% 2px; }

/* ---------- REFINED RESERVATION-FORM ----------
   Headlines im Form etwas groesser. */
.reservation-form label > span {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: .78rem;
  letter-spacing: .14em;
  font-variation-settings: "opsz" 48;
  font-weight: 400;
}

/* ---------- REFINED PAGE-LEAD ----------
   Lead-Text auf Sub-Pages mit groesserer Fraunces-Behandlung. */
.page-lead {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.5;
  color: var(--muted);
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.005em;
}

/* ===============================================
   GRAND OVERHAUL VII · Footer & Sub-Page Politur
   =============================================== */

/* ---------- FOOTER · Editorial 3-Spalten-Magazin-Standfuss ----------
   Aufgeteilt in Adresse | Hours | Navigation. Bottom-Strip
   mit Edition-No und Issue-Vol als Pagina. */
.site-footer {
  padding: clamp(60px, 8vw, 100px) 0 0;
  background: var(--espresso);
  position: relative;
  overflow: hidden;
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.3fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
  text-align: left;
  position: relative;
  z-index: 2;
  padding-bottom: clamp(40px, 5vw, 60px);
}
.footer-brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  color: rgba(241, 231, 211, 0.75);
}
.footer-brand .brand-logo {
  width: 56px; height: 56px;
}
.footer-brand strong {
  display: block;
  font-size: 1.6rem;
  letter-spacing: -0.016em;
  font-variation-settings: "opsz" 96;
  margin-bottom: 6px;
  color: var(--linen);
}
.footer-brand p {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.02rem;
  color: rgba(241, 231, 211, 0.62);
  line-height: 1.4;
}
.footer-col {
  display: flex; flex-direction: column;
  gap: 14px;
}
.footer-col-label {
  font-family: 'Inter', sans-serif;
  font-size: .66rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 600;
  margin: 0 0 4px;
}
.footer-col .footer-line {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(241, 231, 211, 0.10);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: .98rem;
  color: var(--linen);
  letter-spacing: -0.005em;
}
.footer-col .footer-line:last-child { border-bottom: 0; }
.footer-col .footer-line .time {
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
  font-size: .96rem;
}
.footer-col a {
  color: var(--linen);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: .98rem;
}
.footer-col a:hover { color: var(--gold-soft); }
.footer-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
}
.footer-nav a {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(241, 231, 211, 0.66);
  padding: 8px 0;
  border-bottom: 1px solid rgba(241, 231, 211, 0.08);
}
.footer-nav a:hover { color: var(--gold-soft); }
.footer-bottom-strip {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(212, 179, 128, 0.16);
  padding: 20px 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-family: 'Inter', sans-serif;
  font-size: .76rem;
  color: rgba(241, 231, 211, 0.5);
  letter-spacing: 0.08em;
}
.footer-bottom-strip em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: .92rem;
  color: var(--gold-soft);
  letter-spacing: 0.02em;
  font-variation-settings: "opsz" 48;
}
.footer-bottom-strip .footer-bottom-meta { margin: 0; }
.footer-meta { display: none; } /* alte Position wird ersetzt */
.site-footer .footer-credit { margin: 0 0 14px; }

@media (max-width: 980px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: left;
  }
  .footer-bottom-strip { justify-content: center; text-align: center; }
}

/* Footer-Wordmark dezenter (war 0.10), passt jetzt zum Boden */
.site-footer::after {
  margin-top: 0;
  font-size: clamp(8rem, 22vw, 22rem);
  opacity: 0.08;
}

/* ---------- PAGE-HERO-WATERMARK Parallax ----------
   Watermark auf Sub-Page-Heroes scrollt mit subtilem Versatz. */
.page-hero-watermark {
  transform: translate(-50%, -50%) rotate(-3deg) translate3d(0, var(--hero-parallax-y, 0px), 0);
  transition: transform 60ms linear;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .page-hero-watermark { transform: translate(-50%, -50%) rotate(-3deg); transition: none; }
}

/* ---------- SPEISEKARTE · Croque & Brötchen-CTA als Editorial-Spreads ----------
   Beide Calls-To-Action werden zu kleinen Spreads mit Mega-Typo. */
.menu-croque {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 90px) clamp(36px, 5vw, 64px);
  text-align: left;
  background:
    radial-gradient(900px 300px at 100% 0%, rgba(184, 137, 62, 0.18), transparent 60%),
    var(--cream);
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
  margin-top: clamp(60px, 8vw, 100px);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: end;
}
.menu-croque::before {
  content: '№ I';
  position: absolute;
  top: 24px; right: 32px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(2rem, 3.4vw, 3rem);
  color: var(--bean);
  opacity: 0.18;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
.menu-croque > div { max-width: none; }
.menu-croque .eyebrow { margin-bottom: 24px; }
.menu-croque h2 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 0.96;
  letter-spacing: -0.024em;
  margin: 0 0 18px;
  font-variation-settings: "opsz" 144;
}
.menu-croque p {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--coffee);
  margin: 0 0 24px;
  max-width: 36ch;
  font-variation-settings: "opsz" 48;
}
@media (max-width: 760px) {
  .menu-croque { grid-template-columns: 1fr; padding: 36px 28px; }
  .menu-croque::before { font-size: 2rem; top: 16px; right: 20px; }
}

/* Belegte-Brötchen-CTA-Banner als dunkle Spread */
.menu-broetchen-cta {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: end;
  padding: clamp(48px, 6vw, 80px) clamp(36px, 5vw, 60px);
  margin-top: clamp(40px, 5vw, 60px);
}
.menu-broetchen-cta::before {
  content: '№ II';
  position: absolute;
  top: 24px; right: 32px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(2rem, 3.4vw, 3rem);
  color: var(--gold-soft);
  opacity: 0.28;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
.menu-broetchen-cta h2 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.024em;
  margin: 0 0 16px;
  font-variation-settings: "opsz" 144;
}
.menu-broetchen-cta p {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.55;
  color: rgba(241, 231, 211, 0.78);
  margin: 0;
  max-width: 36ch;
  font-variation-settings: "opsz" 48;
}
.menu-broetchen-cta .btn { align-self: end; justify-self: end; }
@media (max-width: 760px) {
  .menu-broetchen-cta { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- ÜBER-UNS · Aside-Foto-Slot-Placeholder ----------
   Wenn kein Bild da ist: ein editorialer Slot mit Crop-Marken,
   der zeigt wo Maria spaeter ein Bild hochlaedt. */
.about-aside {
  position: relative;
}
.about-aside-photo-slot {
  margin: 32px -8px -12px;
  height: 280px;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(184, 137, 62, 0.06) 14px, rgba(184, 137, 62, 0.06) 15px),
    rgba(255, 252, 244, 0.4);
  border: 1px solid var(--line);
  border-radius: 2px;
  position: relative;
  display: flex;
  align-items: center; justify-content: center;
}
.about-aside-photo-slot::before,
.about-aside-photo-slot::after {
  content: '';
  position: absolute;
  width: 22px; height: 22px;
  border-color: var(--gold);
  border-style: solid;
  border-width: 0;
}
.about-aside-photo-slot::before {
  top: -1px; left: -1px;
  border-top-width: 1px;
  border-left-width: 1px;
}
.about-aside-photo-slot::after {
  bottom: -1px; right: -1px;
  border-bottom-width: 1px;
  border-right-width: 1px;
}
.about-aside-photo-slot-label {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: .88rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-align: center;
  max-width: 220px;
  line-height: 1.4;
}
.about-aside-photo-slot-label em { color: var(--gold); font-style: italic; }

/* ---------- REFINED PAGE-HERO-EDITORIAL ----------
   Padding auf Sub-Pages etwas hoher, Lead etwas weiter unten. */
.page-hero-editorial > .container > .page-lead {
  margin-top: 24px;
  max-width: 640px;
}
.page-hero-editorial h1 em {
  background-image: linear-gradient(180deg, transparent 64%, rgba(184, 137, 62, 0.16) 64%, rgba(184, 137, 62, 0.16) 92%, transparent 92%);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 0.04em;
}

/* ===============================================
   GRAND OVERHAUL VIII · Splash, Coupon, Sticky
   =============================================== */

/* ---------- SPLASH-Stempel ----------
   Splash zeigt jetzt einen animierten Kreis-Stempel:
   AC-Monogram, "Est. 2004"-Ring, Zentral-Hairlines. */
.app-splash {
  background:
    radial-gradient(600px 300px at 50% 50%, rgba(184, 137, 62, 0.06), transparent 60%),
    var(--paper);
}
.app-splash-mark {
  width: 180px;
  height: 180px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.app-splash-mark svg { width: 100%; height: 100%; }
.app-splash-mark .splash-ring {
  fill: none;
  stroke: var(--bean);
  stroke-width: 1;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: splash-ring-draw 1400ms var(--ease-out) 200ms forwards;
}
.app-splash-mark .splash-ring-inner {
  fill: none;
  stroke: var(--gold);
  stroke-width: 0.7;
  stroke-dasharray: 540;
  stroke-dashoffset: 540;
  animation: splash-ring-draw 1400ms var(--ease-out) 400ms forwards;
}
.app-splash-mark .splash-mono {
  fill: var(--bean);
  opacity: 0;
  transform: scale(0.92);
  transform-origin: center;
  animation: splash-mono-in 700ms var(--ease-spring) 900ms forwards;
}
.app-splash-mark .splash-est-arc {
  fill: var(--gold);
  font-family: 'Inter', sans-serif;
  font-size: 5.2px;
  font-weight: 600;
  letter-spacing: 1.8px;
  opacity: 0;
  animation: splash-est-in 600ms var(--ease-out) 1200ms forwards;
}
@keyframes splash-ring-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes splash-mono-in {
  to { opacity: 1; transform: scale(1); }
}
@keyframes splash-est-in {
  to { opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .app-splash-mark .splash-ring,
  .app-splash-mark .splash-ring-inner { stroke-dashoffset: 0; animation: none; }
  .app-splash-mark .splash-mono { opacity: 1; transform: none; animation: none; }
  .app-splash-mark .splash-est-arc { opacity: 0.9; animation: none; }
}

/* Wenn das Splash schliesst — soft fade-out */
.app-splash.is-leaving { opacity: 0; transition: opacity 600ms var(--ease-out); }

/* ---------- RESERVATION als COUPON ----------
   Form wirkt wie eine alte Theater-Reservierungs-Karte:
   gold Perforation oben+unten, "STEMPEL"-Akzente. */
.reservation-form {
  background:
    radial-gradient(900px 200px at 0% 0%, rgba(184, 137, 62, 0.05), transparent 60%),
    var(--paper);
  border: 1px solid var(--gold-soft);
  border-radius: 2px;
  box-shadow:
    0 60px 80px -60px rgba(42, 24, 16, 0.5),
    inset 0 0 0 6px var(--paper),
    inset 0 0 0 7px rgba(184, 137, 62, 0.18);
  padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 44px);
}
.reservation-form-coupon-header {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 18px;
  margin: 0 0 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.reservation-form-coupon-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: .66rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0;
}
.reservation-form-coupon-eyebrow em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.2rem;
  letter-spacing: -0.005em;
  color: var(--bean);
  text-transform: none;
  font-weight: 400;
  margin-left: 8px;
  font-variation-settings: "opsz" 48;
}
.reservation-form-coupon-stamp {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1.5px solid var(--gold);
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  transform: rotate(-2deg);
}
.reservation-form::before {
  content: '';
  position: absolute;
  top: -1px; left: 14px; right: 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}

/* ---------- RESERVATION-Hero Drama ----------
   Auf der Reservation-Page der Hero etwas dramatischer. */
.reservation-page::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(184, 137, 62, 0.10) 1px, transparent 2px),
    radial-gradient(circle at 30% 70%, rgba(184, 137, 62, 0.10) 1px, transparent 2px);
  background-size: 60px 60px, 80px 80px;
  pointer-events: none;
  opacity: 0.7;
}
.reservation-page .reservation-intro {
  position: relative;
}
.reservation-intro p {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: rgba(241, 231, 211, 0.85);
  margin-bottom: 22px;
  font-variation-settings: "opsz" 48;
}

/* ---------- STICKY-TODAY refined dramatic ----------
   Bigger drama, eleganter Glas, italic Dish. */
.sticky-today {
  padding: 14px 22px 14px 24px;
  gap: 18px;
  border-radius: 4px;
  border: 1px solid rgba(212, 179, 128, 0.22);
  background: rgba(42, 24, 16, 0.92);
  box-shadow:
    0 28px 60px -24px rgba(42, 24, 16, 0.65),
    inset 0 1px 0 rgba(255, 252, 244, 0.06);
  max-width: min(720px, calc(100vw - 32px));
}
.sticky-today-tag {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: .82rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--gold-soft);
  flex-shrink: 0;
  font-variation-settings: "opsz" 48;
}
.sticky-today-tag::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 8px;
  vertical-align: 1px;
  box-shadow: 0 0 0 0 rgba(184, 137, 62, 0.4);
}
.sticky-today-dish {
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  max-width: 380px;
}
.sticky-today-cta {
  background: var(--gold);
  color: var(--bean);
  font-family: 'Inter', sans-serif;
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 2px;
}
.sticky-today-cta:hover { background: var(--gold-soft); transform: translateY(-1px); color: var(--bean); }

/* ---------- ADMIN-LOGIN als Editorial-Card ----------
   Member-Bereich-Login wirkt jetzt wie eine Press-Karte. */
.login-card {
  border-radius: 2px;
  border: 1px solid var(--gold-soft);
  padding: clamp(48px, 6vw, 64px) clamp(36px, 5vw, 48px);
  background:
    radial-gradient(800px 200px at 50% 0%, rgba(184, 137, 62, 0.08), transparent 60%),
    var(--paper);
  box-shadow:
    0 60px 80px -60px rgba(42, 24, 16, 0.4),
    inset 0 0 0 6px var(--paper),
    inset 0 0 0 7px rgba(184, 137, 62, 0.18);
}
.login-card::before {
  content: '';
  position: absolute;
  top: -1px; left: 14px; right: 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}
.login-card h1 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(2rem, 4vw, 2.6rem);
  letter-spacing: -0.018em;
  font-variation-settings: "opsz" 144;
}

/* ===============================================
   GRAND OVERHAUL IX · Mobile-Nav, Inputs, Wochengrid
   =============================================== */

/* ---------- MOBILE-NAV als Editorial-Cover ----------
   Wenn das Burger-Menue offen ist, sieht es aus wie eine
   Magazin-Cover-Innenseite: groesse italic Links mit
   Roman-Numerals + Issue-Header. */
@media (max-width: 980px) {
  .primary-nav {
    background:
      radial-gradient(900px 400px at 80% 20%, rgba(184, 137, 62, 0.16), transparent 60%),
      linear-gradient(160deg, var(--bean) 0%, var(--espresso) 100%);
    padding: 140px var(--gutter) calc(80px + env(safe-area-inset-bottom, 0));
    counter-reset: navitem;
  }
  .primary-nav::before {
    content: 'Index';
    position: absolute;
    top: 80px;
    left: var(--gutter);
    right: var(--gutter);
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(212, 179, 128, 0.18);
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: .92rem;
    letter-spacing: 0.02em;
    color: var(--gold-soft);
    opacity: 0.7;
  }
  .primary-nav a {
    counter-increment: navitem;
    position: relative;
    padding: 14px 0 14px 48px;
    border: 0;
    border-bottom: 1px solid rgba(212, 179, 128, 0.10);
    text-transform: none;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.8rem, 8vw, 2.6rem);
    letter-spacing: -0.018em;
    font-variation-settings: "opsz" 144;
    color: var(--linen);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), color 200ms var(--ease-out);
  }
  .primary-nav a::before {
    content: counter(navitem, upper-roman);
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-soft);
    opacity: 0.55;
    line-height: 1;
    width: 36px;
  }
  .primary-nav a::after { display: none; }
  .primary-nav.open a {
    opacity: 0.92;
    transform: translateY(0);
  }
  .primary-nav.open a:nth-child(1) { transition-delay: 100ms; }
  .primary-nav.open a:nth-child(2) { transition-delay: 160ms; }
  .primary-nav.open a:nth-child(3) { transition-delay: 220ms; }
  .primary-nav.open a:nth-child(4) { transition-delay: 280ms; }
  .primary-nav.open a:nth-child(5) { transition-delay: 340ms; }
  .primary-nav.open a:nth-child(6) { transition-delay: 400ms; }
  .primary-nav.open a:nth-child(7) { transition-delay: 460ms; }
  .primary-nav a:hover,
  .primary-nav a.is-active { color: var(--gold-soft); opacity: 1; }
  .primary-nav a:hover::before,
  .primary-nav a.is-active::before { opacity: 1; color: var(--gold); }

  /* Sprach-Umschalter (DE/EN) im mobilen Menü sichtbar machen: heller Text
     auf dem dunklen Drawer, großes Tap-Target, linksbündig zu den Einträgen. */
  .primary-nav .lang-toggle {
    display: inline-flex;
    align-items: center;
    margin: 30px 0 0 48px;
    min-height: 44px;
    padding: 10px 22px;
    font-size: .9rem;
    letter-spacing: .16em;
    color: var(--linen);
    background: rgba(212, 179, 128, 0.12);
    border: 1px solid rgba(212, 179, 128, 0.5);
  }
  .primary-nav .lang-toggle:hover,
  .primary-nav .lang-toggle:focus-visible {
    color: var(--espresso);
    background: var(--gold-soft);
    border-color: var(--gold-soft);
    outline: none;
  }

  /* Webshop-Link als ausgestellte Box */
  .primary-nav .nav-shop {
    margin-top: 24px;
    padding: 18px 0 18px 48px;
    font-family: 'Inter', sans-serif;
    font-size: clamp(.88rem, 3.4vw, 1.02rem);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 500;
    font-style: normal;
    color: var(--gold-soft);
    background: transparent;
    border-radius: 0;
  }
  .primary-nav .nav-shop::before { content: 'Ext.'; }

  /* Fuss-Linie mit Adresse + Telefon */
  .primary-nav::after {
    content: 'Ifflandstr. 45 · 040 22 69 28 91';
    position: absolute;
    bottom: calc(40px + env(safe-area-inset-bottom, 0));
    left: var(--gutter);
    right: var(--gutter);
    padding-top: 18px;
    border-top: 1px solid rgba(212, 179, 128, 0.18);
    font-family: 'Inter', sans-serif;
    font-size: .76rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(241, 231, 211, 0.5);
    text-align: center;
  }
}

/* ---------- RESERVATION-FORM Inputs als Coupon-Slots ----------
   Inputs wirken wie ausgeschnittene Felder mit Hairline-Border
   und animated underline-fill beim Focus. */
.reservation-form .form-row,
.reservation-form > label {
  position: relative;
  margin-bottom: 4px;
}
.reservation-form label {
  margin-bottom: 22px;
}
.reservation-form label > span {
  display: block;
  margin-bottom: 10px;
  padding-left: 2px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: .82rem;
  letter-spacing: 0.02em;
  color: var(--coffee);
  text-transform: none;
  font-variation-settings: "opsz" 48;
}
.reservation-form label > span em {
  color: var(--gold);
  font-style: italic;
  margin-left: 2px;
}
.reservation-form input,
.reservation-form select,
.reservation-form textarea {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--bean);
  padding: 10px 2px 14px;
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.005em;
}
.reservation-form input::placeholder,
.reservation-form textarea::placeholder {
  color: rgba(120, 97, 82, 0.42);
  font-style: italic;
}
.reservation-form input:focus,
.reservation-form select:focus,
.reservation-form textarea:focus {
  color: var(--bean);
}
.reservation-form .form-row {
  display: grid;
  gap: clamp(20px, 3vw, 30px);
  margin-bottom: 8px;
}
.reservation-form label.checkbox {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: .88rem;
  color: var(--muted);
  margin-top: 14px;
}

/* ---------- MITTAGSTISCH Wochengrid als Editorial-Tabelle ----------
   Statt brave 7er-Card-Grid: refined Stack mit Tabellenrhythmus. */
.lunch-week:not(.lunch-week-empty) {
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  padding: 4px;
}
.lunch-day {
  padding: 22px 18px 24px;
  border: 1px solid rgba(241, 231, 211, .10);
  border-radius: 4px;
  background: rgba(255, 252, 244, 0.025);
  transition:
    border-color var(--dur-slow) var(--ease-out),
    background-color var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.lunch-day-head {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(241, 231, 211, .12);
}
.lunch-day-name {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.018em;
  color: var(--gold-soft);
  line-height: 1;
  font-variation-settings: "opsz" 144;
}
.lunch-day-date {
  display: block;
  margin-top: 6px;
  font-family: 'Inter', sans-serif;
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(241, 231, 211, .42);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.lunch-day.is-today {
  border-color: var(--gold);
  background:
    radial-gradient(600px 200px at 0% 0%, rgba(184, 137, 62, 0.12), transparent 60%),
    rgba(184, 137, 62, 0.06);
  transform: translateY(-2px);
}
.lunch-day.is-today .lunch-day-name {
  color: var(--gold);
  background-image: linear-gradient(180deg, transparent 64%, rgba(184, 137, 62, 0.24) 64%, rgba(184, 137, 62, 0.24) 92%, transparent 92%);
  background-position: 0 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0 0.06em;
}
.lunch-day-body {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 1.08rem;
  line-height: 1.32;
  color: var(--paper);
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 48;
}
.lunch-day-side {
  margin-top: 8px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: .88rem;
  color: rgba(241, 231, 211, .58);
  font-variation-settings: "opsz" 48;
}
.lunch-pending,
.lunch-closed {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: .9rem;
  color: rgba(241, 231, 211, .35);
}
.lunch-note {
  text-align: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: rgba(241, 231, 211, .55);
  font-size: .98rem;
  letter-spacing: -0.005em;
  margin: 22px auto 0;
  max-width: 540px;
  font-variation-settings: "opsz" 48;
}
.lunch-note a {
  color: var(--gold);
  background-image: linear-gradient(var(--gold-soft), var(--gold-soft));
  background-position: 0 100%;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  font-style: italic;
}
.lunch-note a:hover { color: var(--gold-soft); }

@media (max-width: 1080px) {
  .lunch-week:not(.lunch-week-empty) { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
  .lunch-week:not(.lunch-week-empty) { grid-template-columns: 1fr 1fr; }
}

/* ===============================================
   GRAND OVERHAUL X · Übergänge, Speisekarte, Admin
   =============================================== */

/* ---------- CHAPTER-CURTAIN ----------
   An jeder chapter-Section sitzt am oberen Rand eine
   Gold-Hairline, die beim Sichtbarwerden von links nach
   rechts einzeichnet. Subtiler Magazin-Trenner. */
.chapter::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1400ms var(--ease-out);
  z-index: 3;
  pointer-events: none;
}
.chapter.is-mark-in::before { transform: scaleX(1); }
.chapter.chapter-dark::before {
  background: linear-gradient(90deg, transparent, var(--gold-soft) 30%, var(--gold-soft) 70%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .chapter::before { transform: scaleX(1); transition: none; }
}

/* ---------- SPEISEKARTE Hover-Item-Spread ----------
   Bei Hover: Name lift, Beschreibung wird kraeftiger,
   gold-Hairline zeichnet sich am linken Rand. */
.menu-col .menu-list li {
  position: relative;
  padding: 18px 0 18px 20px;
  border-bottom: 1px solid var(--line-soft);
  transition:
    padding var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}
.menu-col .menu-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 30%; bottom: 30%;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.menu-col .menu-list li:hover {
  padding-left: 28px;
  background: linear-gradient(90deg, rgba(184, 137, 62, 0.04), transparent 70%);
}
.menu-col .menu-list li:hover::before {
  transform: scaleY(1);
}
.menu-col .menu-list strong {
  display: block;
  margin-bottom: 4px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.12rem;
  color: var(--bean);
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 96;
  transition: color var(--dur-base) var(--ease-out);
}
.menu-col .menu-list strong::after { display: none; }
.menu-col .menu-list span {
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.5;
  transition: color var(--dur-base) var(--ease-out);
}
.menu-col .menu-list li:hover strong { color: var(--gold); }
.menu-col .menu-list li:hover span { color: var(--coffee); }

/* ---------- ADMIN-LOGIN refined Editorial ----------
   Das Login-Karte sieht jetzt aus wie eine Press-Karte. */
.admin-login {
  background:
    radial-gradient(1000px 400px at 50% 0%, rgba(184, 137, 62, 0.07), transparent 60%),
    var(--cream);
}
.login-card {
  text-align: left;
}
.login-card-eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 24px;
  font-family: 'Inter', sans-serif;
  font-size: .66rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.login-card-eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--gold);
}
.login-card h1 {
  margin: 0 0 12px;
}
.login-card h1 em {
  font-style: italic;
  color: var(--gold);
  background-image: linear-gradient(180deg, transparent 64%, rgba(184, 137, 62, 0.18) 64%, rgba(184, 137, 62, 0.18) 92%, transparent 92%);
  background-position: 0 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0 0.04em;
}
.login-lead {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 30px;
  font-variation-settings: "opsz" 48;
}
#login-form label {
  display: block;
  margin-bottom: 18px;
}
#login-form label > span {
  display: block;
  margin-bottom: 8px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: .82rem;
  color: var(--coffee);
  font-variation-settings: "opsz" 48;
}
#login-form input,
.login-card #login-form input {
  width: 100%;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--bean);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 2px 12px;
  transition: border-color var(--dur-base) var(--ease-out);
  font-variation-settings: "opsz" 48;
}
#login-form input:focus,
.login-card #login-form input:focus {
  outline: none;
  border-bottom-color: var(--gold);
}
.login-card .login-stamp {
  position: absolute;
  bottom: 20px; right: 20px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: .76rem;
  color: var(--muted);
  opacity: 0.55;
  letter-spacing: 0.02em;
}
.login-card .login-stamp em {
  color: var(--gold);
  font-style: italic;
  font-variation-settings: "opsz" 48;
}

/* ---------- ADMIN-OVERVIEW refined Editorial ----------
   Die Overview-Karte oben sieht jetzt aus wie das Editor-
   Dashboard einer Tageszeitung. */
.admin-overview {
  border-radius: 4px;
  padding: clamp(32px, 4vw, 48px);
  background:
    radial-gradient(800px 300px at 100% 0%, rgba(184, 137, 62, 0.06), transparent 60%),
    var(--paper);
  border: 1px solid var(--gold-soft);
  box-shadow:
    0 40px 80px -50px rgba(42, 24, 16, 0.32),
    inset 0 0 0 6px var(--paper),
    inset 0 0 0 7px rgba(184, 137, 62, 0.12);
}
.admin-overview::before {
  content: '';
  position: absolute;
  top: -1px; left: 14px; right: 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}
.admin-welcome h2,
.admin-overview h2 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -0.018em;
  font-variation-settings: "opsz" 144;
  margin: 0 0 8px;
}

/* ===============================================
   GRAND OVERHAUL XI · Topbar, Legal, Dashboard-Tabs
   =============================================== */

/* ---------- TOPBAR-LIVE-STATUS ----------
   Direkt in der Topbar ein "Geöffnet"-Indicator mit Gold-Puls.
   Wird per JS gefuellt und zwischen den anderen Topbar-Items
   gesetzt. */
.topbar-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: .82rem;
  letter-spacing: 0.02em;
  color: var(--gold-soft);
  font-variation-settings: "opsz" 48;
}
.topbar-live::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(184, 137, 62, 0.5);
}
.topbar-live.is-closed { color: rgba(241, 231, 211, 0.6); }
.topbar-live.is-closed::before {
  background: rgba(241, 231, 211, 0.4);
  animation: none;
  box-shadow: none;
}
.topbar-live em {
  font-style: italic;
  color: var(--linen);
  margin: 0 4px;
}
@media (max-width: 720px) {
  .topbar-live { display: none; }
}

/* ---------- LEGAL-PAGES als Editorial-Articles ----------
   Impressum und Datenschutz wirken jetzt wie ein
   Magazin-Article mit Drop-Cap, italic h2, refined Spacing. */
.legal-main {
  padding: clamp(50px, 7vw, 100px) 0 clamp(60px, 8vw, 100px);
  background:
    radial-gradient(900px 300px at 0% 0%, rgba(184, 137, 62, 0.05), transparent 60%),
    var(--paper);
}
.legal-article {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.legal-article h1 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.024em;
  font-variation-settings: "opsz" 144;
  margin: 0 0 18px;
}
.legal-article h1 em { color: var(--gold); }
.legal-lead {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 50px;
  font-variation-settings: "opsz" 48;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.legal-article section {
  margin-bottom: 44px;
  position: relative;
}
.legal-article section + section { padding-top: 8px; }
.legal-article h2 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  letter-spacing: -0.018em;
  margin: 0 0 18px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--bean);
  font-variation-settings: "opsz" 96;
}
.legal-article h3 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.12rem;
  color: var(--coffee);
  margin: 28px 0 10px;
  font-variation-settings: "opsz" 48;
}
.legal-article p, .legal-article li {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}
.legal-article p { margin: 0 0 14px; }
.legal-article strong {
  color: var(--bean);
  font-weight: 500;
}
.legal-article a {
  color: var(--bean);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-position: 0 100%;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur-slow) var(--ease-out), color var(--dur-base) var(--ease-out);
  border: 0;
}
.legal-article a:hover { color: var(--gold); background-size: 100% 2px; }
.legal-source {
  margin-top: 60px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: .92rem;
  color: var(--muted);
  font-variation-settings: "opsz" 48;
}

/* ---------- ADMIN-DASHBOARD Tabs als Magazin-Index ----------
   Tabs werden zu nummerierten Kapitel-Buttons mit italic
   Fraunces statt brave Caps. */
.admin-tabs {
  counter-reset: tab;
}
.admin-tab {
  counter-increment: tab;
  position: relative;
  padding: 10px 20px 10px 44px !important;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.02rem !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  font-variation-settings: "opsz" 96;
  color: var(--coffee);
  border-radius: 2px;
  transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.admin-tab::before {
  content: counter(tab, upper-roman);
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--gold);
  opacity: 0.55;
  line-height: 1;
}
.admin-tab.is-active {
  color: var(--bean);
  background: rgba(184, 137, 62, 0.08);
}
.admin-tab.is-active::before { opacity: 1; color: var(--gold); }
.admin-tab:hover { color: var(--bean); }

/* ---------- EDIT-MODE FAB · Refined Press-Karte ----------
   Der schwebende Button "Texte bearbeiten" wirkt jetzt
   nicht mehr wie ein gewoehnlicher Aktion-Button, sondern
   wie eine kleine Press-Karte am Bildschirmrand. */
.edit-fab {
  border-radius: 4px !important;
  background: var(--paper) !important;
  color: var(--bean) !important;
  border: 1px solid var(--gold-soft) !important;
  padding: 10px 16px 10px 14px !important;
  box-shadow:
    0 24px 50px -22px rgba(42, 24, 16, 0.45),
    inset 0 0 0 4px var(--paper),
    inset 0 0 0 5px rgba(184, 137, 62, 0.18) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
}
.edit-fab::before {
  content: '№';
  margin-right: 8px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--gold);
  text-transform: none;
  font-variation-settings: "opsz" 48;
}
.edit-fab:hover {
  background: var(--cream) !important;
  border-color: var(--gold) !important;
  transform: translateY(-1px);
}
.edit-fab.is-editing {
  background: var(--gold) !important;
  color: var(--bean) !important;
  border-color: var(--gold) !important;
}
.edit-fab.is-editing::before { color: var(--bean); }

/* ---------- NOTICE-BANNER refined ----------
   Hinweis-Banner sieht jetzt aus wie eine Press-Mitteilung. */
.notice-banner {
  background:
    radial-gradient(800px 200px at 0% 0%, rgba(255, 255, 255, 0.20), transparent 60%),
    var(--gold);
  color: var(--bean);
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  position: relative;
}
.notice-banner::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background:
    repeating-linear-gradient(90deg, var(--bean) 0, var(--bean) 6px, transparent 6px, transparent 12px);
  opacity: 0.3;
}
.notice-inner { padding: 14px 28px; gap: 18px; }
.notice-tag {
  background: var(--bean);
  color: var(--gold-soft);
  font-family: 'Inter', sans-serif;
  font-size: .62rem;
  letter-spacing: .28em;
  padding: 5px 11px;
  font-weight: 700;
  border-radius: 2px;
}
.notice-banner p {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.02rem;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 48;
  margin: 0;
}

/* ===============================================
   GRAND OVERHAUL XII · Order-Slip, Save-Bar, Ticker
   =============================================== */

/* ---------- BROETCHEN Cart-Summary als Order-Slip ----------
   Das Warenkorb-Sidebar wirkt jetzt wie ein gedruckter
   Bestellzettel mit Perforation und italic Item-Liste. */
.order-summary-card {
  border-radius: 4px;
  background:
    radial-gradient(800px 200px at 0% 0%, rgba(184, 137, 62, 0.16), transparent 60%),
    linear-gradient(160deg, var(--bean) 0%, var(--espresso) 100%);
  padding: clamp(28px, 4vw, 40px) clamp(24px, 3.5vw, 32px);
  box-shadow:
    0 40px 80px -40px rgba(42, 24, 16, 0.65),
    inset 0 0 0 6px var(--bean),
    inset 0 0 0 7px rgba(212, 179, 128, 0.22);
}
.order-summary-card::before {
  content: '';
  position: absolute;
  top: -1px; left: 14px; right: 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}
.order-summary-card::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 14px; right: 14px;
  height: 1px;
  background:
    repeating-linear-gradient(90deg, var(--gold-soft) 0, var(--gold-soft) 4px, transparent 4px, transparent 9px);
  opacity: 0.35;
}
.order-summary-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 600;
  margin: 0 0 16px;
}
.order-summary-count {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 4rem);
  line-height: 1;
  margin: 0 0 20px;
  color: var(--paper);
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.024em;
}
.order-summary-count #order-count { font-variant-numeric: tabular-nums; }
.order-summary-unit {
  font-style: italic;
  font-size: 0.42em;
  color: var(--gold-soft);
  margin-left: 6px;
  letter-spacing: 0.02em;
  font-variation-settings: "opsz" 48;
}
.order-summary-list {
  border-top: 1px solid rgba(212, 179, 128, 0.14);
  border-bottom: 1px solid rgba(212, 179, 128, 0.14);
  padding: 14px 0;
  margin: 0 0 18px;
}
.order-summary-list li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(212, 179, 128, 0.06);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: var(--linen);
  font-variation-settings: "opsz" 48;
}
.order-summary-list li:last-child { border-bottom: 0; }
.order-summary-qty {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .04em;
}
.order-summary-qty::before { content: '× '; opacity: 0.5; }
.order-summary-empty {
  color: rgba(241, 231, 211, 0.4) !important;
  font-style: italic;
  border-bottom: 0 !important;
}
.order-min-note {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: .92rem;
  margin: 0 0 22px;
  color: rgba(241, 231, 211, 0.55);
  font-variation-settings: "opsz" 48;
}
.order-min-note.is-met { color: #b6dab6; }
.order-min-note.is-below { color: var(--gold-soft); }
.order-submit {
  width: 100%;
  padding: 16px 24px;
  font-size: .76rem;
  letter-spacing: .24em;
  border-radius: 2px;
}
.order-summary-fineprint {
  margin: 18px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: .76rem;
  line-height: 1.5;
  color: rgba(241, 231, 211, 0.42);
  letter-spacing: 0.02em;
}

/* ---------- ADMIN SAVE-BAR als Press-Notiz ----------
   Sticky Save-Bar wirkt jetzt wie eine schwebende
   Editorial-Notiz mit Gold-Hairline + Doppel-Border. */
.save-bar {
  border-radius: 4px;
  background: rgba(255, 252, 244, 0.96);
  border: 1px solid var(--gold-soft);
  padding: 14px 22px;
  box-shadow:
    0 24px 50px -22px rgba(42, 24, 16, 0.32),
    inset 0 0 0 4px var(--paper),
    inset 0 0 0 5px rgba(184, 137, 62, 0.12);
}
.save-bar::before {
  content: '';
  position: absolute;
  top: -1px; left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}
.save-status {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: .98rem;
  color: var(--coffee);
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 48;
}
.save-status.ok { color: #2e7d32; }
.save-status.error { color: #b3382c; }
.save-actions .btn {
  padding: 11px 22px;
  font-size: .76rem;
  letter-spacing: .22em;
  border-radius: 2px;
}

/* ---------- HERO-TICKER refined editorial ----------
   Marquee-Items italic Fraunces statt brave Inter. */
.hero-ticker-track {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  letter-spacing: -0.005em;
  color: var(--linen);
  font-variation-settings: "opsz" 96;
}
.hero-ticker-track > span:nth-child(even) {
  color: var(--gold);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.82em;
  opacity: 0.7;
}

/* ---------- RESERVATION Form-Submit als Stempel-Button ----------
   Submit wirkt jetzt wie ein grosser Theater-Stempel. */
.reservation-form .form-submit {
  margin-top: 24px;
  padding: 18px 32px;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  letter-spacing: .28em;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 2px;
  background: var(--bean);
  color: var(--paper);
  border: 1px solid var(--bean);
  box-shadow: 0 18px 40px -22px rgba(42, 24, 16, 0.5);
  position: relative;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.reservation-form .form-submit::before {
  content: '↗';
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--gold);
  letter-spacing: 0;
  text-transform: none;
  font-variation-settings: "opsz" 48;
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.reservation-form .form-submit:hover {
  transform: translateY(-2px) rotate(-0.8deg);
  background: var(--espresso);
  box-shadow: 0 22px 50px -18px rgba(42, 24, 16, 0.6);
}
.reservation-form .form-submit:hover::before {
  transform: translateY(-50%) translateX(4px);
  color: var(--gold-soft);
}
.reservation-form .form-submit:active {
  transform: translateY(0) rotate(-1.4deg) scale(.98);
}

/* ---------- HEAD-NAV-CONTAINER refined: subtle border-bottom transition ---------- */
.site-header.is-scrolled .nav-container {
  border-bottom-color: rgba(184, 137, 62, 0.12);
}

/* ===============================================
   GRAND OVERHAUL XIII · TOC, Live-Clock, Tipp-Karte
   =============================================== */

/* ---------- SPEISEKARTE-SIDEBAR-TOC ----------
   Schwebt links neben den Menue-Kategorien, zeigt
   per JS welche Kategorie gerade sichtbar ist. */
.menu-toc {
  position: sticky;
  top: 120px;
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 22px 18px;
  border-left: 1px solid var(--line);
  align-self: start;
  margin-right: clamp(24px, 3vw, 40px);
  max-width: 220px;
}
.menu-toc-label {
  font-family: 'Inter', sans-serif;
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 6px;
}
.menu-toc a {
  display: flex; align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--muted);
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
  font-variation-settings: "opsz" 48;
}
.menu-toc a::before {
  content: attr(data-num);
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--gold);
  opacity: 0.5;
  flex-shrink: 0;
  width: 18px;
  text-transform: uppercase;
}
.menu-toc a:hover { color: var(--bean); }
.menu-toc a:hover::before { opacity: 1; }
.menu-toc a.is-active {
  color: var(--gold);
}
.menu-toc a.is-active::before { opacity: 1; }
.menu-toc-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  align-items: start;
}
@media (max-width: 980px) {
  .menu-toc { display: none; }
  .menu-toc-wrap { grid-template-columns: 1fr; }
}

/* ---------- HERO-COORD-Aside Live-Clock ----------
   In das hero-coord-aside kommt jetzt eine Uhrzeit-Zeile,
   die per JS jede Minute aktualisiert wird. */
.hero-coord-clock {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 4px;
}
.hero-coord-clock-label {
  font-family: 'Inter', sans-serif;
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.hero-coord-clock-time {
  display: inline-flex; align-items: baseline;
  gap: 8px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--bean);
  letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
  font-variation-settings: "opsz" 96;
}
.hero-coord-clock-time::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(184, 137, 62, 0.4);
}
.hero-coord-clock.is-closed .hero-coord-clock-time::before {
  background: rgba(120, 97, 82, 0.5);
  animation: none;
  box-shadow: none;
}

/* ---------- RESERVATION Tipp-Karte ----------
   In der Reservation-Intro-Spalte ergaenzen wir eine
   "Was ist gut zu wissen?"-Karte mit einigen Hinweisen. */
.reservation-tips {
  margin-top: 36px;
  padding: 26px 24px;
  border: 1px solid rgba(212, 179, 128, 0.28);
  border-radius: 2px;
  background: rgba(255, 252, 244, 0.04);
  position: relative;
}
.reservation-tips::before {
  content: '';
  position: absolute;
  top: -1px; left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft) 50%, transparent);
}
.reservation-tips-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 700;
  margin: 0 0 14px;
}
.reservation-tips-list {
  list-style: none;
  margin: 0; padding: 0;
}
.reservation-tips-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(212, 179, 128, 0.10);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1rem;
  color: rgba(241, 231, 211, 0.85);
  line-height: 1.4;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 48;
}
.reservation-tips-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.reservation-tips-list li::before {
  content: attr(data-mark);
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--gold);
  margin-top: 4px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.reservation-tips-list li em {
  color: var(--gold-soft);
  font-style: italic;
}

/* ---------- HERO-COORD-Aside ergaenzte Reihen ----------
   Der hero-coord-Datenblock kriegt jetzt noch eine
   "Stammgaeste"-Zeile fuer Drama. */
.hero-coord-row.is-accent {
  background: rgba(184, 137, 62, 0.06);
  margin: 0 -8px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 2px;
}
.hero-coord-row.is-accent .hero-coord-label {
  color: var(--gold);
}

/* ===============================================
   MOBILE-POLITUR · Dichtere Padding-Rhythmik
   =============================================== */

/* Dunkle Sektionen sollen am Boden nicht riesig leer stehen */
@media (max-width: 760px) {
  .chapter.landing-visit-dark {
    padding: 56px 0 48px;
  }
  .chapter.today-feature {
    padding: 56px 0 48px;
  }
  .chapter.landing-greeting {
    padding: 56px 0 40px;
  }
  .ornament { padding: 14px var(--gutter); }
  .chapter.landing-cards { padding: 48px 0; }
  .landing-pullquote { padding: 48px 0; }
  .chapter-finis.landing-closer { padding: 48px 0 56px; }

  /* Chapter-Mark auf Mobile noch dezenter, damit er bei kurzen
     Sektionen nicht ueber den Content laeuft */
  .chapter-mark { font-size: 1.8rem; opacity: 0.3; top: 12px; right: 14px; }

  /* Pull-Quote-Hero etwas kompakter */
  .pullquote-hero { margin-bottom: 40px; }
  .pullquote-mark { font-size: 5.4rem; line-height: 0.5; margin: 0 0 -.18em -.04em; }
  .pullquote-text { font-size: clamp(1.8rem, 8vw, 2.6rem); line-height: 1.05; }

  /* Closer-Quote weniger gigantisch */
  .chapter-finis .landing-closer-quote {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
    line-height: 1.12;
  }
  .landing-closer-sign { font-size: 1rem; }
}

/* ===============================================
   MOBILE-POLITUR PART 2 · Hero-Drama, Brand-Animation
   =============================================== */

/* ---------- BRAND-WORDMARK Letter-by-Letter Reveal ----------
   Beim ersten Paint zeichnen sich die Buchstaben von "Alstercafé"
   nacheinander ein. Subtile Eleganz im Header. */
.brand-name {
  display: inline-block;
  overflow: hidden;
}
.brand-name .bn-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  animation: brand-name-char-in 600ms var(--ease-out) forwards;
  animation-delay: calc(var(--bn-i, 0) * 35ms + 200ms);
}
@keyframes brand-name-char-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-name .bn-char { opacity: 1; transform: none; animation: none; }
}

/* ---------- MOBILE-HERO CTA refined ----------
   Auf Mobile soll der Primary-Button die volle Breite einnehmen,
   damit er als klarer Call-to-Action wirkt. */
@media (max-width: 640px) {
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-top: 28px;
  }
  .hero-cta .btn-primary,
  .hero-cta .btn-stamp {
    width: 100%;
    justify-content: center;
    padding: 18px 28px;
    font-size: 1rem;
    letter-spacing: 0.06em;
  }
  .hero-cta .btn-link {
    text-align: center;
    align-self: center;
    margin-top: 4px;
  }
}

/* ---------- MOBILE Hero-Cinema h1 etwas tighter ----------
   Auf Mobile war der h1 von 3.8rem an immer noch ein wenig viel
   fuer kurze Viewports — wir tighten leicht. */
@media (max-width: 640px) {
  .hero-cinema-h1 {
    font-size: clamp(2.8rem, 13vw, 4.2rem);
    line-height: 0.92;
  }
  .hero-cinematic .hero-masthead {
    padding-top: clamp(36px, 7vw, 60px);
    padding-bottom: clamp(14px, 3vw, 24px);
  }
  .hero-cinematic .hero-spread {
    padding-top: clamp(28px, 5vw, 48px);
    padding-bottom: clamp(48px, 7vw, 80px);
  }
}

/* ---------- HERO-COORD-Aside Mobile-optimiert ---------- */
@media (max-width: 920px) {
  .hero-coord {
    margin: 0;
    max-width: none;
    padding: 22px 22px 18px;
  }
  .hero-coord-clock-time { font-size: 1.2rem; }
  .hero-coord-row { padding-bottom: 10px; }
  .hero-coord-mark { padding-top: 12px; }
  .hero-coord-logo { width: 38px; height: 38px; }
  .hero-coord-stamp { font-size: .88rem; }
}
@media (max-width: 480px) {
  .hero-coord { padding: 16px 18px 14px; gap: 10px; }
  .hero-coord-row { padding-bottom: 8px; }
  .hero-coord-value { font-size: .96rem; }
  .hero-coord-mark { display: none; }
}

/* ---------- LIVE-STATUS-Pille refined ----------
   Groessere pulsierende Aura beim "open"-Zustand. */
.live-status[data-state="open"] {
  position: relative;
  box-shadow:
    0 0 0 1px rgba(74, 168, 91, 0.18),
    0 12px 30px -16px rgba(74, 168, 91, 0.42);
}
/* Halo um den Live-Status entfernt: der grüne Punkt pulsiert bereits —
   ein zweiter, gleichzeitig pulsierender Ring war doppelt gemoppelt. */

/* ---------- MOBILE Hero-Partner-Block kompakter ---------- */
@media (max-width: 640px) {
  .hero-partner { margin-top: 22px; font-size: .68rem; letter-spacing: 0.24em; }
  .hero-partner-line { width: 24px; }
}

/* ---------- MOBILE-POLITUR III · Section-Shouts dezenter ----------
   Auf Mobile waren die riesigen Hintergrund-Worte ("FAMILIE",
   "MITTAG", "HOHENFELDE") teilweise sichtbar und wirkten eher
   wie Artefakte als bewusste Akzente. Kleiner und weiter
   nach links damit sie wirklich nur am Rand peeken. */
@media (max-width: 760px) {
  .section-shout {
    font-size: clamp(5rem, 24vw, 11rem);
    left: -8vw;
    opacity: 0.035;
  }
  .section-shout.shout-light { opacity: 0.06; }
  .section-shout.shout-on-dark { opacity: 0.04; }
  /* „Hohenfelde" ist ein langes Wort: bei negativem left wird das erste „H"
     am Rand abgeschnitten und es liest sich wie „Iohenfelde". Daher hier
     positiver left-Start (das „H" ist voll sichtbar) — der Wortausklang
     läuft rechts aus und wird vom overflow:hidden der Sektion sauber
     abgeschnitten. */
  .section-shout.shout-on-dark { left: 6vw; right: auto; font-size: clamp(5rem, 20vw, 10rem); }
}

/* ---------- MOBILE Hero-Ticker tighter ---------- */
@media (max-width: 640px) {
  .hero-ticker-track {
    font-size: clamp(0.92rem, 4.6vw, 1.15rem);
    padding: 16px 0;
    gap: 24px;
  }
  .hero-ticker::before,
  .hero-ticker::after { width: 36px; }
}

/* ---------- MOBILE Today-Feature-Inner kompakter ---------- */
@media (max-width: 640px) {
  .today-feature-inner { padding: 0 6px; }
  .today-feature-kicker {
    margin-bottom: 12px;
    font-size: .66rem;
    letter-spacing: 0.22em;
  }
  .chapter.today-feature .today-feature-dish {
    font-size: clamp(1.9rem, 7.5vw, 2.6rem);
    line-height: 1.1;
  }
  .today-feature-side { margin-bottom: 24px; }
  .today-feature-cta { gap: 16px; flex-direction: column; }
  .today-feature-cta .btn { width: 100%; justify-content: center; }
}

/* ---------- MOBILE Family-Greeting dichter ---------- */
@media (max-width: 640px) {
  .greeting-line {
    font-size: clamp(1.7rem, 7.5vw, 2.4rem);
    margin: 6px 0 24px;
  }
  .greeting-text {
    font-size: 1rem;
    line-height: 1.65;
  }
  .greeting-text::first-letter {
    font-size: 3.4rem;
    margin: 6px 10px 0 0;
  }
  .greeting-signature { margin-top: 22px; }
  .greeting-signature-name { font-size: clamp(2rem, 8vw, 2.6rem); }
}

/* ---------- MOBILE Spread-Cards (Cards-Section) Spacing ---------- */
@media (max-width: 640px) {
  .spread-grid { gap: 14px; }
  .spread-card { padding: 24px 22px 22px; }
  .spread-card-hero { padding: 28px 24px 24px; }
  .spread-num { font-size: clamp(3rem, 14vw, 5rem); margin-bottom: 8px; }
  .spread-card-hero .spread-num { font-size: clamp(4.4rem, 18vw, 6.4rem); }
  .spread-card h3 { font-size: clamp(1.5rem, 6.5vw, 1.9rem); }
  .spread-card-hero h3 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .spread-card p { font-size: .94rem; margin-bottom: 16px; }
}

/* ---------- MOBILE Pull-Quote (Was Gäste sagen) ---------- */
@media (max-width: 640px) {
  .landing-pullquote .quotes-eyebrow { margin-bottom: 18px; }
  .pullquote-hero { margin-bottom: 36px; }
  .pullquote-mark {
    font-size: 4.4rem;
    margin: 0 0 -.18em -.04em;
  }
  .pullquote-text {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    line-height: 1.1;
  }
  .pullquote-cite { margin-top: 16px; font-size: .72rem; }
  .pullquote-row { padding-top: 26px; gap: 22px; }
  .pullquote-small blockquote { font-size: 1.05rem; }
}

/* ---------- MOBILE Landing-Visit (Hohenfelde) ---------- */
@media (max-width: 640px) {
  .chapter.landing-visit-dark h2 {
    font-size: clamp(2rem, 8vw, 2.8rem);
    line-height: 1.02;
  }
  .landing-visit-tag { font-size: .96rem; }
  .landing-visit .hours-list li {
    font-size: .98rem;
    padding: 10px 0;
  }
  .landing-visit-cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .landing-visit-cta .btn { justify-content: center; }
}

/* ---------- HERO-EST Watermark mobile dezenter ---------- */
@media (max-width: 640px) {
  .hero-est {
    opacity: 0.025;
    right: -8vw;
    font-size: clamp(5rem, 22vw, 10rem);
  }
}

/* ===============================================
   MOBILE-POLITUR IV · Sub-Pages
   =============================================== */

/* ---------- MOBILE Page-Hero ---------- */
@media (max-width: 640px) {
  .page-hero-editorial {
    padding: clamp(70px, 11vw, 110px) 0 clamp(36px, 6vw, 60px);
  }
  .page-hero-editorial h1 {
    font-size: clamp(2.4rem, 10vw, 3.8rem);
    line-height: 0.98;
  }
  .page-hero-editorial::after {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    top: clamp(28px, 5vw, 60px);
    right: clamp(14px, 4vw, 32px);
  }
  .page-hero-watermark {
    opacity: 0.035;
    font-size: clamp(5rem, 22vw, 9rem);
  }
  .page-lead { font-size: 1.05rem; }
  .page-hero-meta { gap: 12px; margin: 20px 0 12px; }
  .page-hero-year-line { flex-basis: 50px; }
}

/* ---------- MOBILE Mittagstisch Today-Card ---------- */
@media (max-width: 640px) {
  .lunch.chapter { padding: 50px 0; }
  .lunch-today {
    padding: 36px 24px;
    gap: 16px;
    margin: 0 0 40px;
  }
  .lunch-today-tag {
    font-size: .62rem;
    letter-spacing: 0.24em;
    padding: 6px 12px;
    margin-bottom: 14px;
  }
  .lunch-today-dish {
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.04;
    margin-bottom: 12px;
  }
  .lunch-today-side {
    font-size: 1rem;
    margin-bottom: 22px;
  }
  .lunch-today .btn-gold {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
  }
  .lunch-week:not(.lunch-week-empty) {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .lunch-day {
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
    padding: 16px 18px;
    min-height: auto;
  }
  .lunch-day-head {
    flex-shrink: 0;
    width: 88px;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .lunch-day-name { font-size: 1.2rem; }
  .lunch-day-date { font-size: .62rem; margin-top: 4px; }
  .lunch-day-body { font-size: .98rem; flex: 1; }
  .lunch-day-side { font-size: .82rem; }
}

/* ---------- MOBILE Kontakt-Block ---------- */
@media (max-width: 640px) {
  .section.contact.chapter { padding: 50px 0; }
  .contact-info-block { padding: 28px 22px; }
  .contact-cols { grid-template-columns: 1fr; gap: 22px; margin: 0 0 24px; }
  .contact-col .col-value {
    font-size: 1.2rem;
    line-height: 1.36;
  }
  .col-label { font-size: .62rem; letter-spacing: 0.24em; }
  .hours-inline { padding-top: 24px; }
  .hours-inline .hours-list li { font-size: 1rem; padding: 11px 0; }
  .social { gap: 14px; flex-wrap: wrap; }
  .social a { font-size: .88rem; }
  .map-card { min-height: 280px; }
  .map-card iframe { min-height: 280px; }
}

/* ---------- MOBILE Reservierungs-Form ---------- */
@media (max-width: 640px) {
  .reservation.chapter { padding: 50px 0; }
  .reservation-form { padding: 28px 22px; }
  .reservation-form-coupon-header {
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 22px;
  }
  .reservation-form-coupon-eyebrow { font-size: .62rem; letter-spacing: 0.22em; }
  .reservation-form-coupon-eyebrow em { font-size: 1.05rem; }
  .reservation-form-coupon-stamp { font-size: .58rem; padding: 5px 10px; letter-spacing: 0.2em; }
  .reservation-form label > span { font-size: .76rem; }
  .reservation-form input,
  .reservation-form select,
  .reservation-form textarea {
    font-size: 1.06rem;
    padding: 9px 2px 12px;
  }
  .reservation-form .form-submit {
    padding: 16px 28px;
    font-size: .76rem;
    letter-spacing: 0.24em;
  }
  .reservation-form .form-submit::before { font-size: 1.2rem; right: 16px; }
  .reservation-intro p { font-size: 1.02rem; }
  .reservation-tips { padding: 22px 20px; margin-top: 28px; }
  .reservation-tips-list li { font-size: .96rem; padding: 10px 0; }
}

/* ---------- MOBILE Speisekarte ---------- */
@media (max-width: 640px) {
  .section.menu.chapter { padding: 50px 0; }
  .menu-cols { gap: 50px; margin-top: 36px; }
  .menu-col {
    padding-top: 30px;
    gap: 18px;
  }
  .menu-col-num {
    font-size: clamp(4rem, 18vw, 7rem);
    line-height: 0.82;
    margin-bottom: 6px;
  }
  .menu-col-head .ico { width: 26px; height: 26px; margin-bottom: 4px; }
  .menu-col-head h3 {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
    line-height: 0.98;
  }
  .menu-col .menu-list li { padding: 14px 0 14px 18px; }
  .menu-col .menu-list li:hover { padding-left: 24px; }
  .menu-col .menu-list strong { font-size: 1.06rem; }
  .menu-col .menu-list span { font-size: .88rem; }

  .menu-croque,
  .menu-broetchen-cta {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 18px;
  }
  .menu-croque h2,
  .menu-broetchen-cta h2 {
    font-size: clamp(2rem, 8vw, 2.8rem);
    line-height: 1;
  }
  .menu-croque p,
  .menu-broetchen-cta p { font-size: 1.02rem; }
  .menu-croque::before,
  .menu-broetchen-cta::before {
    font-size: 1.8rem; top: 16px; right: 18px;
  }
  .menu-broetchen-cta .btn { width: 100%; justify-content: center; }
}

/* ---------- MOBILE Brötchen-Bestellseite ---------- */
@media (max-width: 640px) {
  .section.order-section.chapter { padding: 50px 0; }
  .order-grid { gap: 32px; }
  .order-legend {
    font-size: clamp(1.4rem, 6.5vw, 1.9rem);
    line-height: 1.02;
  }
  .broetchen-row {
    padding: 18px 0 18px 44px;
    gap: 14px;
    flex-wrap: wrap;
  }
  .broetchen-row::before {
    font-size: 1.1rem;
    top: 20px;
  }
  .broetchen-info { flex: 1 1 60%; min-width: 0; }
  .broetchen-name { font-size: 1.08rem; }
  .broetchen-desc { font-size: .82rem; }
  .qty-stepper { flex-shrink: 0; }
  .qty-btn { width: 38px; height: 38px; font-size: 1.2rem; }
  .order-summary-card { padding: 26px 22px; }
  .order-summary-count {
    font-size: clamp(2.4rem, 11vw, 3.4rem);
  }
}

/* ===============================================
   MIKRO-POLITUR · Clock-Tick, Sticky-Today, Topbar
   =============================================== */

/* ---------- LIVE-CLOCK Minuten-Tick-Animation ----------
   Wenn die Uhrzeit wechselt, soll der Time-Text kurz
   gold aufleuchten — Hinweis darauf dass es live ist. */
.hero-coord-clock-time { transition: color 600ms var(--ease-out); }
.hero-coord-clock-time.is-tick { color: var(--gold); }

/* ---------- STICKY-TODAY mobile besseres Fitting ---------- */
@media (max-width: 480px) {
  .sticky-today {
    padding: 11px 14px 11px 16px;
    gap: 10px;
    max-width: calc(100vw - 24px);
  }
  .sticky-today-dish {
    max-width: 140px;
    font-size: .92rem;
  }
  .sticky-today-cta {
    padding: 7px 12px;
    font-size: .68rem;
    letter-spacing: 0.16em;
  }
}
@media (max-width: 380px) {
  .sticky-today-dish { max-width: 100px; }
}

/* ---------- TOPBAR-LIVE auch zwischen 720-880px sichtbar ---------- */
@media (max-width: 880px) {
  .topbar-live { font-size: .76rem; }
  .topbar-inner { gap: 4px 12px; }
}
@media (max-width: 640px) {
  .topbar-live { display: inline-flex; font-size: .72rem; }
  .topbar-link { font-size: .76rem; }
}
@media (max-width: 480px) {
  .topbar-live em { font-size: .8rem; }
  .topbar { font-size: .76rem; }
  .topbar-inner { padding: 7px var(--gutter); }
}

/* ---------- RESERVATION-TIPP-Karte Mobile dichter ---------- */
@media (max-width: 480px) {
  .reservation-tips { padding: 18px 16px; margin-top: 22px; }
  .reservation-tips-eyebrow { font-size: .58rem; letter-spacing: 0.24em; }
  .reservation-tips-list li {
    grid-template-columns: 1fr;
    gap: 4px;
    font-size: .92rem;
    padding: 8px 0;
  }
  .reservation-tips-list li::before { font-size: .6rem; }
}

/* ---------- CLOSER "Fin." als Buch-Ende ----------
   Chapter-Mark in der Closer-Sektion wird ausgeblendet. */
.chapter-finis .chapter-mark { display: none; }

/* "(Tun viele.)" als eigener Block, ruhig zentriert.
   WICHTIG: display:block sonst rutscht es neben den Sign-Off
   und das Layout faellt zusammen. */
.landing-closer-note {
  display: block;
  transform: none;
  margin: -4px auto 32px;
  max-width: 480px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  color: var(--muted);
  text-align: center;
  opacity: 0.85;
}

/* Sign-Off auch als Block, sonst kollidieren die zwei
   inline-block-Paragraphen. */
.landing-closer-sign {
  display: block;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}
.closer-sign-line {
  display: block;
  margin: 0 auto 16px;
}

/* ---------- Brötchen Order-Form Editorial-Inputs ----------
   Konsistent zur Reservierungs-Form: italic Fraunces,
   Hairline-Underline, kein Box-Style. */
.order-form label > span {
  display: block;
  margin-bottom: 6px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: .78rem;
  color: var(--coffee);
  font-variation-settings: "opsz" 48;
}
.order-form label > span em {
  color: var(--gold);
  font-style: italic;
}
.order-form input[type="text"],
.order-form input[type="tel"],
.order-form input[type="email"],
.order-form input[type="date"],
.order-form input[type="time"],
.order-form textarea,
.order-form select {
  width: 100%;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--bean);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 2px 10px;
  transition: border-color var(--dur-base) var(--ease-out);
  font-variation-settings: "opsz" 48;
}
.order-form input::placeholder,
.order-form textarea::placeholder {
  color: rgba(120, 97, 82, 0.42);
  font-style: italic;
}
.order-form input:focus,
.order-form textarea:focus,
.order-form select:focus {
  outline: none;
  border-bottom-color: var(--gold);
}
.order-form label {
  display: block;
  margin-bottom: 18px;
}
.order-form label.checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: .88rem;
  color: var(--muted);
}
.order-form label.checkbox input {
  width: auto;
  margin-top: 4px;
  border: 1px solid var(--line);
}
.order-form .order-submit {
  margin-top: 14px;
}

/* ===============================================
   BEWERTUNGEN · ehrliche Verlinkung zu externen Plattformen
   statt erfundener Zitate. Drei Cards (Tripadvisor / Google /
   Instagram), klare Conversion-Pfade nach extern.
   =============================================== */
.landing-reviews {
  padding: clamp(80px, 11vw, 140px) 0;
  background: var(--paper);
}
.reviews-h2 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.026em;
  color: var(--bean);
  margin: 0 0 24px;
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
}
.reviews-h2 em {
  font-style: italic;
  color: var(--coffee);
  background-image: linear-gradient(180deg, transparent 62%, rgba(184, 137, 62, 0.18) 62%, rgba(184, 137, 62, 0.18) 92%, transparent 92%);
  padding: 0 0.04em;
}
.reviews-lead {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--muted);
  max-width: 580px;
  margin: 0 0 clamp(36px, 5vw, 56px);
  line-height: 1.55;
  font-variation-settings: "opsz" 48;
}
.reviews-cta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
}
.reviews-card {
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 3.5vw, 40px) clamp(24px, 3vw, 32px);
  min-height: 180px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition:
    transform var(--dur-slow) var(--ease-out),
    border-color var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
}
.reviews-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.reviews-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold-soft);
  box-shadow:
    0 30px 60px -32px rgba(42, 24, 16, 0.28),
    0 12px 24px -16px rgba(184, 137, 62, 0.18);
}
.reviews-card:hover::after { transform: scaleX(1); }
.reviews-card-platform {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--bean);
  letter-spacing: -0.018em;
  font-variation-settings: "opsz" 96;
  margin-bottom: 32px;
}
.reviews-card-action {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bean);
  font-weight: 600;
}
.reviews-card:hover .reviews-card-action { color: var(--gold); }
.reviews-card-action .ico { transition: transform var(--dur-base) var(--ease-out); }
.reviews-card:hover .reviews-card-action .ico { transform: translateX(4px); }

@media (max-width: 880px) {
  .reviews-cta-grid { grid-template-columns: 1fr; }
  /* min-width:0 verhindert, dass die Karte als Grid-Item über ihre Spur
     hinauswächst (sonst horizontaler Overflow auf sehr schmalen Handys). */
  .reviews-card { min-height: auto; padding: 24px 22px; flex-direction: row; align-items: center; gap: 16px; min-width: 0; }
  .reviews-card-platform { font-size: 1.4rem; margin-bottom: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
}

/* ===============================================
   HERO-PHONE-CTA · Alman-Deutsche-Zielgruppe
   Aeltere/konservative Gaeste rufen lieber an als digital
   zu bestellen. Telefonnummer als gleichwertiger CTA im Hero.
   =============================================== */
.hero-cta-phone {
  display: inline-flex; align-items: center; gap: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.hero-cta-phone .ico { color: var(--gold); }
@media (max-width: 540px) {
  .hero-cta { gap: 14px 22px; }
  .hero-cta-phone { width: 100%; padding-top: 4px; }
}

/* ===============================================
   PERFORMANCE · backdrop-filter auf Mobile abschalten
   GPU-Compositing pro Frame ist auf aelteren iPhones / Android-
   Mid-Range das groesste Frust-Symptom ("Seite ist langsam").
   Auf Desktop bleibt der Blur-Effekt erhalten.
   =============================================== */
@media (max-width: 760px) {
  .admin-header,
  .live-status,
  .save-bar,
  .sticky-today,
  .cookie-banner,
  .hero-coord {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Etwas mehr Opacity damit der fehlende Blur den Hintergrund
     nicht durchscheinen laesst. */
  .admin-header { background: rgba(255, 252, 244, 0.96); }
  .live-status { background: rgba(255, 252, 244, 0.92); }
  .sticky-today { background: rgba(42, 24, 16, 0.98); }
  .hero-coord { background: rgba(255, 252, 244, 0.85); }
}

/* ===============================================
   ECHTE FRÜHSTÜCKSKARTE · Maria's PDF, vollständig
   Lesbares Restaurant-Menü-Layout mit Preisen.
   =============================================== */
.karte-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 52px);
  margin-bottom: clamp(36px, 5vw, 64px);
}
.karte-grid-drinks { margin-top: clamp(12px, 2vw, 28px); }
.karte-block {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: clamp(24px, 3vw, 38px) clamp(22px, 2.8vw, 34px);
  position: relative;
}
.karte-block::before {
  content: '';
  position: absolute;
  top: -1px; left: 22px; right: 22px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}
.karte-block-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 6px;
}
.karte-block-head .ico { color: var(--gold); width: 26px; height: 26px; flex-shrink: 0; }
.karte-block-head h2 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  color: var(--bean);
  margin: 0;
  letter-spacing: -0.012em;
}
.karte-block-note {
  font-size: .82rem;
  color: var(--muted);
  margin: 0 0 18px;
  font-style: italic;
}
.karte-list { list-style: none; padding: 0; margin: 0; }
.karte-list > li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.karte-list > li:first-child { padding-top: 8px; }
.karte-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.karte-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px;
}
.karte-name {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.06rem;
  color: var(--bean);
  letter-spacing: -0.004em;
  line-height: 1.3;
}
.karte-tag {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #4a6f47;
  background: rgba(124, 161, 119, 0.14);
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 6px;
}
.karte-preis {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--gold-text);
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.karte-desc {
  margin: 5px 0 0;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 52ch;
}
/* Kompakt-Liste (Extras): Name + Preis in einer Zeile, keine Beschreibung */
.karte-list-compact > li {
  padding: 9px 0;
}
.karte-list-compact .karte-name { font-weight: 400; font-size: 1rem; }
/* Unterpreise (Dreher-Frühstück-Varianten) */
.karte-subprices {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}
.karte-subprices li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px;
  padding: 5px 0;
  font-size: .92rem;
  color: var(--bean);
  border-bottom: 1px dotted var(--line);
}
.karte-subprices li:last-child { border-bottom: 0; }
/* Heiße Getränke: klein/groß Preispaar */
.karte-size-head {
  display: flex; justify-content: flex-end; gap: 28px;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.karte-preis-pair {
  display: inline-flex; gap: 18px;
  flex-shrink: 0;
}
.karte-preis-pair > span {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  text-align: right;
}
.karte-fussnote {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 0 clamp(40px, 6vw, 72px);
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
@media (max-width: 820px) {
  .karte-grid { grid-template-columns: 1fr; }
}

/* ===============================================
   KEIN KURSIV mehr · Maria-Feedback (21.06.2026)
   Fraunces bleibt komplett erhalten, aber die "geschwungenen"
   italic-Schnitte werden ueberall auf aufrecht gestellt.
   Schluss-Override schlaegt alle vorherigen italic-Rules.
   =============================================== */
*, *::before, *::after { font-style: normal !important; }