/* ===========================================================
   Goldene Gabel — Musterbetrieb-Demo (eigener warmer Look)
   Bewusst ANDERS als liyoli (Tiefnacht) und City-Grill (Amber):
   warmes Creme/Terrakotta/Waldgrün, Serifen-Headlines.
   =========================================================== */

/* Fonts: selbst-gehostet von der Hauptseite (absolute Pfade) */
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(/assets/fonts/fraunces-6.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:400 500; font-display:swap;
  src:url(/assets/fonts/fraunces-3.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(/assets/fonts/inter-13.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0323,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  /* Helles Creme-Design fest verankern: native UI (Formularfelder, Select-Popups,
     Scrollbars) im Light-Modus rendern, egal ob das System auf Dunkel steht —
     verhindert den spiegelbildlichen E1-Bug (dunkle Controls auf hellem Design). */
  color-scheme: light;

  --cream:      #faf5ec;   /* Papier/Creme Hintergrund */
  --cream-2:    #f3ebdc;   /* leicht dunkler */
  --ink:        #2b241d;   /* warmes Dunkelbraun (Text) */
  --ink-soft:   #6b5e4f;   /* gedämpft */
  --ink-mute:   #97887457;
  --terra:      #b4552d;   /* Terrakotta (Primär-Akzent) */
  --terra-dk:   #8f3f1e;
  --forest:     #3f5c43;   /* Waldgrün (Sekundär) */
  --forest-dk:  #2c4230;
  --gold:       #c98a3c;   /* warmes Messing-Gold */
  --line:       rgba(43,36,29,0.12);
  --line-2:     rgba(43,36,29,0.20);
  --surface:    #ffffff;
  --shadow:     0 22px 50px -24px rgba(43,36,29,0.40);
  --shadow-sm:  0 8px 24px -12px rgba(43,36,29,0.30);
  --radius:     16px;
  --radius-sm:  10px;
  --maxw:       1120px;
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; }
img { max-width:100%; display:block; }
a { color:inherit; }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:600; line-height:1.12; margin:0; color:var(--ink); }
p { margin:0 0 1rem; }
button { font-family:inherit; cursor:pointer; }
:focus-visible { outline:3px solid var(--terra); outline-offset:2px; border-radius:4px; }

.container { max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,4vw,2rem); }
.eyebrow { display:inline-flex; align-items:center; gap:0.5em; font-family:var(--font-body);
  font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:600;
  color:var(--terra); }
.muted { color:var(--ink-soft); }

/* ---------- DEMO-BANNER (oben, unübersehbar aber dezent) ---------- */
.demo-banner { position:sticky; top:0; z-index:60; background:var(--forest-dk); color:#f4ecdd;
  font-size:0.82rem; text-align:center; padding:0.5rem 1rem; letter-spacing:0.01em;
  display:flex; align-items:center; justify-content:center; gap:0.6rem; flex-wrap:wrap; }
.demo-banner strong { color:#fff; }
.demo-banner a { color:#f0d9a8; text-decoration:underline; text-underline-offset:2px; }
.demo-banner .dot { width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none;
  animation:ggpulse 2.2s var(--ease) infinite; }
@keyframes ggpulse { 0%,100%{opacity:.5} 50%{opacity:1} }

/* ---------- HEADER / NAV ---------- */
.site-head { position:sticky; top:32px; z-index:50; background:rgba(250,245,236,0.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0.85rem clamp(1rem,4vw,2rem); max-width:var(--maxw); margin:0 auto; }
.brand { display:flex; align-items:center; gap:0.7rem; text-decoration:none; }
.brand .fork { width:30px; height:30px; flex:none; color:var(--terra); }
.brand-name { font-family:var(--font-display); font-weight:600; font-size:1.32rem; letter-spacing:0.01em; line-height:1; }
.brand-sub { font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-soft); }
.nav-links { display:flex; align-items:center; gap:1.4rem; list-style:none; margin:0; padding:0; }
.nav-links a { text-decoration:none; font-size:0.94rem; font-weight:500; color:var(--ink-soft);
  transition:color .2s var(--ease); }
.nav-links a:hover { color:var(--terra); }
.nav-cta { background:var(--terra); color:#fff; border:none; border-radius:999px;
  padding:0.6rem 1.2rem; font-size:0.9rem; font-weight:600; text-decoration:none;
  transition:transform .2s var(--ease), background .2s var(--ease); white-space:nowrap; }
.nav-cta:hover { background:var(--terra-dk); transform:translateY(-1px); }
.nav-burger { display:none; background:none; border:1px solid var(--line-2); border-radius:10px;
  width:44px; height:44px; align-items:center; justify-content:center; color:var(--ink); }
.nav-burger svg { width:22px; height:22px; }

/* ---------- HERO ---------- */
.hero { position:relative; overflow:hidden; }
.hero-inner { display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center; padding:clamp(2.5rem,6vw,5rem) 0 clamp(2rem,5vw,4rem); }
.hero-copy h1 { font-size:clamp(2.4rem,5.6vw,4.2rem); letter-spacing:-0.01em; }
.hero-copy h1 em { font-style:italic; color:var(--terra); }
.hero-lead { font-size:clamp(1.05rem,1.8vw,1.28rem); color:var(--ink-soft); max-width:46ch; margin-top:1rem; }
.hero-badges { display:flex; flex-wrap:wrap; gap:0.7rem; margin:1.6rem 0; }
.hero-badge { display:inline-flex; align-items:center; gap:0.45rem; background:var(--cream-2);
  border:1px solid var(--line); border-radius:999px; padding:0.42rem 0.9rem; font-size:0.85rem;
  color:var(--ink-soft); }
.hero-badge svg { width:16px; height:16px; color:var(--gold); }
.hero-actions { display:flex; flex-wrap:wrap; gap:0.8rem; margin-top:0.4rem; }
.btn { display:inline-flex; align-items:center; gap:0.5rem; border-radius:999px; padding:0.85rem 1.5rem;
  font-size:1rem; font-weight:600; text-decoration:none; border:1px solid transparent;
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }
.btn svg { width:18px; height:18px; }
.btn-primary { background:var(--terra); color:#fff; }
.btn-primary:hover { background:var(--terra-dk); transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover { border-color:var(--terra); color:var(--terra); }
.hero-figure { position:relative; }
.hero-figure img { border-radius:var(--radius); box-shadow:var(--shadow); aspect-ratio:4/3; object-fit:cover; width:100%; }
.hero-rating { position:absolute; bottom:-18px; left:-14px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; padding:0.7rem 1rem; box-shadow:var(--shadow-sm);
  display:flex; align-items:center; gap:0.7rem; }
.hero-rating .stars { color:var(--gold); font-size:1.05rem; letter-spacing:2px; }
.hero-rating .rnum { font-family:var(--font-display); font-weight:600; font-size:1.25rem; }
.hero-rating .rsub { font-size:0.76rem; color:var(--ink-soft); }

/* Öffnungs-Status-Pill */
.open-pill { display:inline-flex; align-items:center; gap:0.5rem; font-size:0.85rem; font-weight:600;
  color:var(--forest-dk); background:#e7efe4; border:1px solid #cadcc6; border-radius:999px; padding:0.35rem 0.85rem; }
.open-pill .live { width:8px; height:8px; border-radius:50%; background:#4f8a54; box-shadow:0 0 0 0 #4f8a5488;
  animation:livePulse 2s infinite; }
@keyframes livePulse { 0%{box-shadow:0 0 0 0 #4f8a5466} 70%{box-shadow:0 0 0 8px #4f8a5400} 100%{box-shadow:0 0 0 0 #4f8a5400} }

/* ---------- SECTION-GRUNDgerüst ---------- */
.section { padding:clamp(3rem,7vw,5.5rem) 0; scroll-margin-top:96px; }
#top,#speisekarte,#reservierung,#info,#galerie { scroll-margin-top:96px; }
.section-head { max-width:640px; margin:0 auto clamp(2rem,4vw,3rem); text-align:center; }
.section-head h2 { font-size:clamp(1.9rem,4vw,2.8rem); }
.section-head p { color:var(--ink-soft); margin-top:0.7rem; font-size:1.05rem; }
.section-alt { background:var(--cream-2); }

/* ---------- SPEISEKARTE + SUCHE ---------- */
.menu-tools { display:flex; flex-wrap:wrap; gap:0.8rem; align-items:center; justify-content:center;
  margin-bottom:1.8rem; }
.menu-search { position:relative; flex:1 1 320px; max-width:440px; }
.menu-search svg { position:absolute; left:0.9rem; top:50%; transform:translateY(-50%);
  width:19px; height:19px; color:var(--ink-soft); }
.menu-search input { width:100%; padding:0.8rem 1rem 0.8rem 2.6rem; border:1px solid var(--line-2);
  border-radius:999px; font-size:1rem; background:var(--surface); color:var(--ink); }
.menu-search input:focus { border-color:var(--terra); outline:none; box-shadow:0 0 0 3px rgba(180,85,45,0.14); }
.syn-toggle { display:inline-flex; align-items:center; gap:0.5rem; font-size:0.9rem; color:var(--ink-soft);
  user-select:none; cursor:pointer; }
.syn-toggle input { width:18px; height:18px; accent-color:var(--terra); cursor:pointer; }
.menu-cats { display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center; margin-bottom:1.6rem; }
.cat-chip { border:1px solid var(--line-2); background:var(--surface); color:var(--ink-soft);
  border-radius:999px; padding:0.45rem 1rem; font-size:0.9rem; font-weight:500; transition:all .18s var(--ease); }
.cat-chip.is-active { background:var(--forest); color:#fff; border-color:var(--forest); }
.cat-chip:hover:not(.is-active) { border-color:var(--terra); color:var(--terra); }

/* ---------- KATEGORIE-BLÖCKE im Pflege-Modus (Kategorie-Verwaltung) ---------- */
.menu-cat-block { margin-bottom:2.2rem; }
.menu-cat-head { display:flex; align-items:center; justify-content:space-between; gap:0.8rem; margin-bottom:0.9rem; }
.menu-cat-head h3 { font-family:var(--font-display); font-weight:600; font-size:1.3rem; }
.cat-menu-btn { flex:0 0 auto; width:38px; height:38px; min-width:38px; border-radius:10px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink-soft); font-size:1.25rem; line-height:1; cursor:pointer;
  display:none; align-items:center; justify-content:center; transition:all .18s var(--ease); }
body.edit-mode .cat-menu-btn { display:inline-flex; }
.cat-menu-btn:hover { background:var(--terra); color:#fff; border-color:var(--terra); }
.menu-card-add { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.4rem;
  min-height:120px; cursor:pointer; color:var(--ink-soft); border:2px dashed var(--line-2); background:rgba(180,85,45,0.04);
  border-radius:var(--radius-sm); font-family:var(--font-body); font-weight:600; font-size:0.92rem;
  transition:all .18s var(--ease); }
.menu-card-add:hover { background:rgba(180,85,45,0.1); color:var(--terra); border-color:var(--terra); }
.menu-card-add .add-plus { font-size:2rem; line-height:1; color:var(--terra); }

.menu-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }
.dish { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:0.3rem; transition:box-shadow .2s var(--ease), transform .2s var(--ease), padding .15s var(--ease); }
.dish:hover { box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.dish-top { display:flex; align-items:baseline; justify-content:space-between; gap:0.6rem; flex-wrap:wrap; }
.dish-name { font-family:var(--font-display); font-weight:600; font-size:1.12rem; }
.dish-price { font-family:var(--font-display); font-weight:600; font-size:1.08rem; color:var(--terra); white-space:nowrap; margin-left:auto; }
/* Pflege-Modus: rechts Platz für den ⋮-Button reservieren, damit er NIE Namen/Preis berührt
   (auch bei langen Preisen/Namen, Mobil+Desktop) — Kachel-Padding wächst, .dish-top bricht bei
   Bedarf zweizeilig (flex-wrap), Preis bleibt durch margin-left:auto immer rechtsbündig darunter. */
body.edit-mode .dish { padding-right:2.7rem; }
.dish-desc { font-size:0.9rem; color:var(--ink-soft); }
.dish-tags { display:flex; flex-wrap:wrap; gap:0.35rem; margin-top:0.4rem; }
.dish-tag { font-size:0.68rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--forest-dk);
  background:#eaf0e7; border-radius:6px; padding:0.15rem 0.5rem; }
.dish-add { align-self:flex-start; margin-top:0.6rem; background:var(--cream-2); border:1px solid var(--line-2);
  color:var(--ink); border-radius:999px; padding:0.45rem 1rem; font-size:0.86rem; font-weight:600;
  display:inline-flex; align-items:center; gap:0.4rem; transition:all .18s var(--ease); }
.dish-add svg { width:15px; height:15px; }
.dish-add:hover { background:var(--terra); color:#fff; border-color:var(--terra); }
.menu-empty { text-align:center; color:var(--ink-soft); padding:2rem; grid-column:1/-1; }
.menu-empty b { color:var(--ink); }

/* Inline-Editor ⋮ */
.dish-edit { position:absolute; top:0.5rem; right:0.5rem; width:30px; height:30px; border-radius:8px;
  border:none; background:var(--cream-2); color:var(--ink-mute); display:none; align-items:center; justify-content:center;
  z-index:2; box-shadow:0 1px 3px rgba(43,36,29,0.12); }
.dish-edit svg { width:18px; height:18px; }
body.edit-mode .dish-edit { display:inline-flex; }
body.edit-mode .dish-edit:hover { background:var(--cream-2); color:var(--terra); }
.edit-fab { position:fixed; bottom:1.2rem; left:1.2rem; z-index:55; display:inline-flex; align-items:center; gap:0.5rem;
  background:var(--forest); color:#fff; border:none; border-radius:999px; padding:0.7rem 1.1rem; font-size:0.88rem;
  font-weight:600; box-shadow:var(--shadow-sm); transition:bottom .28s var(--ease); }
.edit-fab svg { width:17px; height:17px; }
body.edit-mode .edit-fab { background:var(--terra); }

/* ---------- WARENKORB / BESTELL-DRAWER ---------- */
.cart-fab { position:fixed; bottom:1.2rem; right:1.2rem; z-index:55; background:var(--terra); color:#fff;
  border:none; border-radius:999px; padding:0.85rem 1.2rem; font-weight:600; display:inline-flex; align-items:center;
  gap:0.55rem; box-shadow:var(--shadow); transition:transform .2s var(--ease), bottom .28s var(--ease); }
/* Savebar sichtbar (unten) -> beide FABs nach oben ausweichen, damit sie nicht verdeckt/blockiert werden */
body:has(.gg-savebar.is-visible) .edit-fab,
body:has(.gg-savebar.is-visible) .cart-fab { bottom:calc(1.2rem + var(--gg-savebar-h, 64px)); }
.cart-fab:hover { transform:translateY(-2px); }
.cart-fab svg { width:19px; height:19px; }
.cart-count { background:#fff; color:var(--terra); border-radius:999px; min-width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:700; padding:0 6px; }

.overlay { position:fixed; inset:0; z-index:70; background:rgba(43,36,29,0.5); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s var(--ease); }
.overlay.is-open { opacity:1; visibility:visible; }
.drawer { position:fixed; top:0; right:0; z-index:71; height:100%; width:min(420px,92vw); background:var(--cream);
  box-shadow:-20px 0 60px -20px rgba(0,0,0,0.4); transform:translateX(100%); transition:transform .32s var(--ease), width .2s var(--ease);
  display:flex; flex-direction:column; }
.drawer.is-open { transform:translateX(0); }
/* Betreiber-Sicht (Bon + Tablet nebeneinander) braucht mehr Breite als der normale Warenkorb */
.drawer.is-wide { width:min(760px,94vw); }
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding:1.2rem 1.3rem;
  border-bottom:1px solid var(--line); }
.drawer-head h3 { font-size:1.3rem; }
.drawer-close { background:none; border:none; color:var(--ink-soft); width:38px; height:38px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center; }
.drawer-close svg { width:22px; height:22px; }
.drawer-close:hover { background:var(--cream-2); color:var(--ink); }
.drawer-body { flex:1; overflow-y:auto; padding:1rem 1.3rem; }
.cart-line { display:flex; align-items:center; gap:0.8rem; padding:0.7rem 0; border-bottom:1px solid var(--line); }
.cart-line-info { flex:1; min-width:0; }
.cart-line-name { font-weight:600; font-size:0.95rem; }
.cart-line-price { font-size:0.85rem; color:var(--ink-soft); }
.qty { display:inline-flex; align-items:center; gap:0.4rem; }
.qty button { width:28px; height:28px; border-radius:8px; border:1px solid var(--line-2); background:var(--surface);
  color:var(--ink); font-size:1.1rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.qty button:hover { border-color:var(--terra); color:var(--terra); }
.qty span { min-width:20px; text-align:center; font-weight:600; }
.cart-empty { text-align:center; color:var(--ink-soft); padding:2.5rem 1rem; }
.drawer-foot { border-top:1px solid var(--line); padding:1.1rem 1.3rem; background:var(--cream-2); }
.cart-total { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:0.9rem; }
.cart-total .lbl { color:var(--ink-soft); }
.cart-total .val { font-family:var(--font-display); font-weight:600; font-size:1.5rem; }
.drawer-foot .btn-primary { width:100%; justify-content:center; }
.drawer-note { font-size:0.76rem; color:var(--ink-soft); text-align:center; margin-top:0.7rem; }

/* ---------- BON-VORSCHAU (80mm) ---------- */
.receipt-wrap { display:flex; flex-direction:column; align-items:center; gap:1rem; padding:1rem 0; }
.receipt { width:280px; flex:0 0 280px; background:#fff; color:#1c1c1c; font-family:"Courier New",ui-monospace,monospace;
  font-size:12.5px; line-height:1.5; padding:16px 18px; box-shadow:var(--shadow);
  border-radius:3px; position:relative; }
.receipt::before,.receipt::after { content:""; position:absolute; left:0; right:0; height:8px;
  background:repeating-linear-gradient(-45deg,#fff 0 6px,transparent 6px 12px); }
.receipt::before { top:-8px; } .receipt::after { bottom:-8px; transform:scaleY(-1); }
.receipt h4 { font-family:inherit; text-align:center; font-size:15px; letter-spacing:1px; margin:0 0 2px; color:#1c1c1c; }
.receipt .r-sub { text-align:center; font-size:11px; margin-bottom:8px; }
.receipt .r-hr { border-top:1px dashed #999; margin:8px 0; }
.receipt .r-row { display:flex; justify-content:space-between; gap:8px; }
.receipt .r-row .r-q { flex:none; }
.receipt .r-tot { display:flex; justify-content:space-between; font-weight:700; font-size:14px; }
.receipt .r-foot { text-align:center; font-size:10.5px; margin-top:8px; }
.demo-stamp { display:inline-flex; align-items:center; gap:0.5rem; font-size:0.82rem; color:var(--terra-dk);
  background:#f7e6dd; border:1px dashed var(--terra); border-radius:999px; padding:0.4rem 1rem; }

/* ---------- KUNDEN-STATUSANSICHT (Bestellung ansehen, Normal-Modus) ---------- */
.order-status-view { text-align:center; padding:1rem 0.2rem; }
.order-status-view .status-num { font-weight:600; color:var(--ink-soft); font-size:0.9rem; margin-bottom:0.4rem; }
.order-status-view .status-icon { font-size:2.6rem; line-height:1; display:block; margin-bottom:0.4rem; }
.order-status-view .status-icon.is-pending { animation:ggStatusPulse 1.6s ease-in-out infinite; }
@keyframes ggStatusPulse { 0%,100%{opacity:1} 50%{opacity:0.45} }
.order-status-view h3 { font-size:1.35rem; margin-bottom:0.3rem; }
.status-progress { display:flex; align-items:center; justify-content:center; gap:0.4rem; margin:0.9rem 0; }
.status-dot { width:11px; height:11px; border-radius:50%; background:var(--line-2); transition:background .3s var(--ease); }
.status-dot.is-active { background:var(--terra); box-shadow:0 0 0 4px rgba(180,85,45,0.18); }
.status-dot.is-done { background:var(--forest); }
.status-line { flex:0 0 32px; height:2px; background:var(--line-2); }
.status-line.is-done { background:var(--forest); }

/* ---------- BETREIBER-SICHT (Bestellung ansehen, Pflege-Modus) ---------- */
.order-op-view { display:flex; flex-direction:column; gap:1.2rem; align-items:center; }
.op-tablet { max-width:280px; }
.op-tablet img { width:100%; border-radius:8px; }
.op-tablet-cap { font-size:0.78rem; color:var(--ink-soft); text-align:center; margin-top:0.5rem; }
@media (min-width:760px) {
  .order-op-view { flex-direction:row; align-items:flex-start; justify-content:center; }
}

/* ---------- RESERVIERUNGS-WIDGET ---------- */
.resv { max-width:720px; margin:0 auto; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.resv-head { background:var(--forest); color:#f4ecdd; padding:1.1rem 1.4rem; }
.resv-head h3 { color:#fff; font-size:1.35rem; }
.resv-head p { margin:0.2rem 0 0; font-size:0.9rem; color:#dfe8db; }
.resv-body { padding:1.4rem; }
.resv-step { margin-bottom:1.4rem; }
.resv-label { font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600;
  color:var(--ink-soft); margin-bottom:0.6rem; display:flex; align-items:center; gap:0.5rem; }
.resv-label .num { width:22px; height:22px; border-radius:50%; background:var(--terra); color:#fff;
  font-size:0.75rem; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
.chip-row { display:flex; flex-wrap:wrap; gap:0.5rem; }
.rchip { border:1px solid var(--line-2); background:var(--cream); color:var(--ink); border-radius:10px;
  padding:0.55rem 0.9rem; font-size:0.95rem; font-weight:500; min-width:44px; text-align:center; transition:all .16s var(--ease); }
.rchip:hover:not(:disabled) { border-color:var(--terra); }
.rchip.is-sel { background:var(--terra); color:#fff; border-color:var(--terra); }
.rchip:disabled { opacity:0.4; cursor:not-allowed; text-decoration:line-through; }
.resv-date { display:flex; gap:0.5rem; overflow-x:auto; padding-bottom:0.3rem; }
.dchip { flex:none; border:1px solid var(--line-2); background:var(--cream); border-radius:10px;
  padding:0.5rem 0.75rem; text-align:center; min-width:66px; transition:all .16s var(--ease); }
.dchip:hover:not(.is-sel) { border-color:var(--terra); }
.dchip.is-sel { background:var(--forest); color:#fff; border-color:var(--forest); }
.dchip .dow { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; opacity:0.8; }
.dchip .dnum { font-family:var(--font-display); font-weight:600; font-size:1.15rem; line-height:1.1; }
.dchip .dmon { font-size:0.7rem; opacity:0.8; }
.slot-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:0.5rem; }
.resv-fields { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; }
.resv-fields .full { grid-column:1/-1; }
.field label { display:block; font-size:0.82rem; color:var(--ink-soft); margin-bottom:0.3rem; font-weight:500; }
.field input,.field textarea { width:100%; padding:0.7rem 0.85rem; border:1px solid var(--line-2);
  border-radius:10px; font-size:0.98rem; font-family:inherit; background:var(--cream); color:var(--ink); }
.field input:focus,.field textarea:focus { border-color:var(--terra); outline:none; box-shadow:0 0 0 3px rgba(180,85,45,0.14); }
.resv-summary { background:var(--cream-2); border:1px solid var(--line); border-radius:12px; padding:0.9rem 1.1rem;
  margin:1rem 0 1.2rem; font-size:0.95rem; display:none; }
.resv-summary.show { display:block; }
.resv-summary b { color:var(--terra-dk); }
.resv-submit { width:100%; justify-content:center; }
.resv-hint { font-size:0.78rem; color:var(--ink-soft); text-align:center; margin-top:0.7rem; }

/* Demo-Bestätigungsansicht */
.confirm-view { text-align:center; padding:2rem 1.4rem; }
.confirm-view .check { width:64px; height:64px; margin:0 auto 1rem; border-radius:50%; background:#e7efe4;
  color:var(--forest-dk); display:flex; align-items:center; justify-content:center; }
.confirm-view .check svg { width:34px; height:34px; }
.confirm-view h3 { font-size:1.6rem; margin-bottom:0.5rem; }
.confirm-detail { background:var(--cream-2); border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem;
  max-width:380px; margin:1.2rem auto; text-align:left; font-size:0.95rem; }
.confirm-detail .row { display:flex; justify-content:space-between; padding:0.25rem 0; }
.confirm-detail .row .k { color:var(--ink-soft); }

/* ---------- INFO / ÖFFNUNGSZEITEN / KONTAKT ---------- */
.info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; }
.info-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.5rem; }
.info-card h3 { font-size:1.2rem; margin-bottom:0.8rem; display:flex; align-items:center; gap:0.5rem; }
.info-card h3 svg { width:20px; height:20px; color:var(--terra); }
/* Kopfzeile Überschrift + ⋮-Button (Öffnungszeiten/Telefon editierbar, Nils-Auftrag 03.07.) */
.info-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:0.6rem; }
.info-card-head h3 { margin-bottom:0; }
.info-card-head .cat-menu-btn { margin-top:0.1rem; }
.hours-row { display:flex; justify-content:space-between; padding:0.3rem 0; font-size:0.95rem; border-bottom:1px solid var(--line); }
.hours-row:last-child { border-bottom:none; }
.hours-row.today { color:var(--terra-dk); font-weight:600; }
.info-card address { font-style:normal; color:var(--ink-soft); line-height:1.7; }
.info-card .fic { font-size:0.78rem; color:var(--ink-soft); margin-top:0.6rem; }
#demoCall { text-decoration:none; }

/* ---------- GALERIE ---------- */
.gallery { display:grid; grid-template-columns:2fr 1fr 1fr; gap:0.8rem; }
.gallery img { border-radius:12px; height:100%; object-fit:cover; aspect-ratio:1; }
.gallery .g-big { grid-row:span 2; aspect-ratio:auto; }

/* ---------- FOOTER ---------- */
.site-foot { background:var(--forest-dk); color:#d8e0d4; padding:clamp(2.5rem,5vw,3.5rem) 0 2rem; }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; margin-bottom:2rem; }
.site-foot h4 { color:#fff; font-size:1.1rem; margin-bottom:0.8rem; }
.site-foot a { color:#d8e0d4; text-decoration:none; }
.site-foot a:hover { color:#f0d9a8; text-decoration:underline; }
.foot-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.5rem; font-size:0.94rem; }
.foot-demo { border-top:1px solid rgba(255,255,255,0.15); padding-top:1.4rem; font-size:0.82rem;
  color:#bcc7b7; display:flex; flex-wrap:wrap; gap:0.5rem 1.4rem; align-items:center; }
.foot-demo .tag { background:rgba(201,138,60,0.2); color:#f0d9a8; border-radius:6px; padding:0.2rem 0.6rem; }
.back-link { display:inline-flex; align-items:center; gap:0.5rem; }
.back-link svg { width:16px; height:16px; }

/* Toast (Demo-Feedback) — pointer-events:none auf dem Toast selbst, damit er NIE Klicks auf
   FABs/Buttons darunter blockiert; nur der Rückgängig-Aktionsbutton bleibt klickbar. */
.toast { position:fixed; bottom:1.4rem; left:50%; transform:translate(-50%,140%); z-index:430;
  background:var(--ink); color:var(--cream); padding:0.8rem 1.3rem; border-radius:12px; font-size:0.92rem;
  box-shadow:var(--shadow); transition:transform .35s var(--ease), bottom .28s var(--ease); max-width:90vw;
  text-align:center; pointer-events:none; }
.toast.show { transform:translate(-50%,0); }
.toast .toast-action { pointer-events:auto; }
/* Savebar sichtbar (unten) -> Toast höher setzen, damit sich beide nie überlappen/blockieren */
body:has(.gg-savebar.is-visible) .toast { bottom:calc(1.4rem + var(--gg-savebar-h, 64px)); }
.toast-action { background:var(--terra); color:#fff; border:none; cursor:pointer; font-weight:700;
  font-size:0.82rem; padding:0.4rem 0.85rem; border-radius:999px; margin-left:0.7rem; }
.toast-action:hover { background:var(--terra-dk); }

/* ============================================================
   PFLEGE-MODUS — Portiert aus City-Grill vendor/edit-mode.js
   (Kategorie-/Gericht-Verwaltung, Modal, Popover, Badge, Save-
   Leiste). Persistenz FLÜCHTIG (in-memory) auf dieser Beispielseite
   — siehe gg.js PFLEGE_PERSISTENZ.
   ============================================================ */

/* Badge oben: Pflege-Modus aktiv */
.gg-badge { position:fixed; top:0; left:0; right:0; z-index:400; display:flex; align-items:center;
  gap:0.8rem; flex-wrap:wrap; padding:0.6rem 1.1rem; font-size:0.86rem; color:#fff;
  background:linear-gradient(90deg, var(--terra), var(--terra-dk)); box-shadow:0 6px 18px rgba(0,0,0,0.25); }
.gg-badge strong { font-weight:700; }
.gg-badge-dot { width:10px; height:10px; border-radius:50%; background:var(--gold); flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(201,138,60,0.3); }
.gg-badge > span:nth-child(2) { flex:1 1 auto; min-width:180px; }
.gg-badge-exit { background:#fff; color:var(--terra-dk); border:none; cursor:pointer; font-weight:600;
  font-size:0.82rem; padding:0.45rem 0.9rem; border-radius:999px; min-height:38px; white-space:nowrap; }
.gg-badge-exit:hover { background:var(--cream-2); }
body.edit-mode { padding-top:44px; }
body.edit-mode .demo-banner { top:44px; }
body.edit-mode .site-head { top:76px; }

/* Kontextmenü (Popover) */
.edit-pop { position:absolute; z-index:500; min-width:220px; background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:0.35rem; }
.edit-pop-item { display:flex; align-items:center; gap:0.6rem; width:100%; background:none; border:none;
  cursor:pointer; text-align:left; color:var(--ink); font-family:var(--font-body); font-size:0.92rem;
  padding:0.7rem 0.7rem; min-height:44px; border-radius:8px; }
.edit-pop-item:hover { background:var(--cream-2); }
.edit-pop-item.is-danger { color:#b23a2c; }
.edit-pop-item.is-danger:hover { background:#f7e6dd; }
.epi-ic { font-size:1.05rem; width:20px; text-align:center; flex:0 0 auto; }

/* Modal */
.gg-modal-back { position:fixed; inset:0; z-index:600; background:rgba(43,36,29,0.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:1.2rem; }
body.gg-modal-open { overflow:hidden; }
.gg-modal { width:100%; max-width:480px; max-height:90vh; overflow:auto; background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow);
  display:flex; flex-direction:column; }
/* Kopf + Fuß sticky statt im normalen Fluss: bei langem Inhalt (z. B. 7-Tage-Öffnungszeiten-Editor
   auf kleinen Viewports) scrollt NUR .gg-modal-body weg; die Aktions-Buttons im Fuß bleiben immer
   sichtbar/erreichbar, ohne dass man erst zum Ende scrollen muss (QC-Fund 03.07.: WebKit 390x664
   zeigte Fuß-Buttons bei bottom>innerHeight, weil sie im scrollenden Fluss lagen statt fixiert). */
.gg-modal-head { display:flex; align-items:center; justify-content:space-between; gap:0.6rem;
  padding:1.1rem 1.3rem; border-bottom:1px solid var(--line);
  flex:0 0 auto; position:sticky; top:0; z-index:1; background:var(--surface); }
.gg-modal-head h3 { font-size:1.15rem; }
.gg-modal-x { background:none; border:none; color:var(--ink-soft); font-size:1.7rem; line-height:1;
  cursor:pointer; width:44px; height:44px; border-radius:10px; }
.gg-modal-x:hover { color:var(--ink); background:var(--cream-2); }
.gg-modal-body { padding:1.2rem 1.3rem; display:flex; flex-direction:column; gap:1rem; }
.gg-modal-foot { display:flex; gap:0.6rem; justify-content:flex-end; flex-wrap:wrap;
  padding:1rem 1.3rem; border-top:1px solid var(--line); background:var(--cream-2);
  flex:0 0 auto; position:sticky; bottom:0; z-index:1; }
.gg-modal-foot .btn { min-height:46px; padding:0.7rem 1.3rem; border-radius:999px; font-size:0.94rem; font-weight:600; }
.btn-danger { background:#b23a2c; color:#fff; }
.btn-danger:hover { background:#8f2e22; }

/* Formularfelder im Modal */
.gg-field { display:flex; flex-direction:column; gap:0.4rem; }
.gg-field > label, .gg-field > span:first-child, .gg-label-row { font-weight:600; font-size:0.9rem; color:var(--ink); }
.gg-label-row { display:flex; align-items:baseline; justify-content:space-between; gap:0.6rem; }
.gg-counter { font-weight:400; font-size:0.78rem; color:var(--ink-soft); }
.gg-input { width:100%; box-sizing:border-box; font-size:16px; font-family:var(--font-body); color:var(--ink);
  background:var(--cream); border:1.5px solid var(--line-2); border-radius:10px; padding:0.75rem 0.85rem;
  transition:border-color .18s, box-shadow .18s; }
.gg-input:focus { outline:none; border-color:var(--terra); box-shadow:0 0 0 3px rgba(180,85,45,0.16); }
.gg-textarea { min-height:70px; resize:vertical; line-height:1.4; }
.gg-input-error { border-color:#b23a2c !important; box-shadow:0 0 0 3px rgba(178,58,44,0.18) !important; }
.gg-err { color:#b23a2c; font-size:0.82rem; }
.gg-hint { font-size:0.8rem; color:var(--ink-soft); margin:0.1rem 0 0; }
.gg-static { color:var(--ink-soft); background:var(--cream); border:1.5px solid var(--line-2); border-radius:10px;
  padding:0.7rem 0.85rem; }
.gg-radio-row { display:flex; gap:1rem; flex-wrap:wrap; }
.gg-radio-row label { display:flex; align-items:center; gap:0.4rem; font-size:0.92rem; color:var(--ink); cursor:pointer; }

/* Öffnungszeiten-Editor (Modal-Inhalt): 7 Zeilen Von/Bis + Ruhetag-Schalter. Zwei Reihen
   (Tag+Ruhetag oben, Zeitfelder darunter) statt einer engen Zeile -> bricht auf schmalen
   Viewports (390px) nicht in den nicht-sichtbaren Bereich aus (QC-Fund 03.07., WebKit-Test:
   "Bis"-Feld ragte bei einzeiligem Layout über den Viewport-Rand hinaus). Nach .gg-input
   platziert, damit .gg-hours-input dessen width:100% zuverlässig mit fester Breite überschreibt
   (gleiche Spezifität — spätere Regel gewinnt). */
.gg-hours-row { padding:0.6rem 0; border-bottom:1px solid var(--line); }
.gg-hours-row:last-child { border-bottom:none; }
.gg-hours-row-top { display:flex; align-items:center; justify-content:space-between; gap:0.7rem; margin-bottom:0.5rem; }
.gg-hours-day { font-weight:600; font-size:0.9rem; }
.gg-hours-times { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.gg-hours-input { width:5.2rem; max-width:40%; flex:0 0 auto; text-align:center; padding:0.5rem 0.4rem; }
.gg-hours-sep { font-size:0.85rem; color:var(--ink-soft); flex:0 0 auto; }
.gg-hours-row.is-closed .gg-hours-times { opacity:0.35; pointer-events:none; }
.gg-hours-closed-toggle { display:flex; align-items:center; gap:0.4rem; font-size:0.85rem; color:var(--ink-soft); cursor:pointer; flex:0 0 auto; white-space:nowrap; }
.gg-hours-row.is-error { background:rgba(178,58,44,0.06); border-radius:8px; }
.gg-hours-err { display:block; color:#b23a2c; font-size:0.8rem; margin-top:0.4rem; }

/* Speichern-Leiste */
/* pointer-events:none solange NICHT is-visible: die Leiste kann (bei umbrechendem Inhalt auf
   schmalen Viewports) höher als ihr "bottom:-100px" hoch sein und würde sonst trotz optischer
   Unsichtbarkeit Klicks auf FABs/Buttons darunter abfangen (realer Bug, per Test gefunden). */
.gg-savebar { position:fixed; left:0; right:0; bottom:-160px; z-index:420; display:flex; align-items:center;
  justify-content:space-between; gap:0.9rem; flex-wrap:wrap; padding:0.9rem 1.3rem; background:var(--surface);
  border-top:2px solid var(--terra); box-shadow:0 -10px 30px rgba(0,0,0,0.15); transition:bottom .28s var(--ease);
  pointer-events:none; }
.gg-savebar.is-visible { bottom:0; pointer-events:auto; }
.gg-savebar-msg { font-weight:600; color:var(--terra-dk); font-size:0.92rem; }
.gg-savebar-actions { display:flex; gap:0.6rem; flex-wrap:wrap; }
.gg-savebar-actions .btn { min-height:44px; padding:0.6rem 1.1rem; border-radius:999px; font-size:0.9rem; font-weight:600; }
@media (max-width:860px) { .gg-savebar.is-visible { bottom:0; } }
/* Auf sehr schmalen Viewports (<400px) bricht die Savebar auf bis zu 3 Zeilen um (Meldungstext +
   2 Buttons je eigene Zeile) -> kann >150px hoch werden. FABs/Cart/Toast brauchen dafür deutlich
   mehr Ausweich-Puffer als die vorherigen 96px (per Test mit 390px-Viewport gemessen: ~168px real). */
@media (max-width:420px) {
  .gg-savebar { justify-content:center; text-align:center; padding:0.8rem 1rem; }
  .gg-savebar-msg { flex:1 1 100%; }
  .gg-savebar-actions { flex:1 1 100%; justify-content:center; }
}

/* Pflege-Hinweis (flüchtig-Modus) im Badge */
.gg-badge-vola { font-size:0.78rem; opacity:0.92; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-figure { order:-1; }
  .foot-grid { grid-template-columns:1fr; gap:1.4rem; }
  .gallery { grid-template-columns:1fr 1fr; }
  .gallery .g-big { grid-row:auto; }
}
@media (max-width:640px) {
  .nav-links { display:none; }
  .nav-burger { display:inline-flex; }
  .nav.mobile-open .nav-links { display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; background:var(--cream); border-bottom:1px solid var(--line); padding:1rem 1.4rem; gap:1rem; }
  .resv-fields { grid-template-columns:1fr; }
  .hero-rating { left:8px; bottom:8px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ============ Bewerbungs-Demo-Modal (WhatsApp-Preview) ============ */
.apply-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.apply-modal[hidden] { display: none; }
.apply-backdrop { position: absolute; inset: 0; background: rgba(43,36,29,0.55); backdrop-filter: blur(3px); }
.apply-sheet { position: relative; z-index: 1; width: min(92vw, 420px); background: var(--surface); border-radius: 18px;
  box-shadow: var(--shadow); padding: 1.4rem 1.4rem 1.5rem; border: 1px solid var(--line); }
.apply-x { position: absolute; top: 0.6rem; right: 0.8rem; background: none; border: none; font-size: 1.6rem; line-height: 1;
  color: var(--ink-soft); cursor: pointer; }
.apply-wa-head { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: #128c4b; margin-bottom: 0.8rem; font-size: 0.95rem; }
.apply-wa-ico { font-size: 1.1rem; }
.apply-bubble { background: #dcf8c6; color: #1f2a1f; border-radius: 14px 14px 14px 4px; padding: 0.9rem 1rem;
  font-size: 0.95rem; line-height: 1.55; box-shadow: var(--shadow-sm); }
.apply-note { color: var(--ink-soft); font-size: 0.85rem; margin: 1rem 0 1rem; }