/* ============================================================
   Bep's Viet — Design System v0.1
   Màu lấy từ 00_BRAND_INFO/PHAN_TICH_PHONG_CACH_THUONG_HIEU.md
   (ước lượng bằng mắt — chờ chị hút mã HEX chính xác từ Canva)
   ============================================================ */

:root {
  --bg: #121009;          /* đen ánh nâu, không đen tuyệt đối */
  --bg-soft: #1a1610;     /* nền band xen kẽ */
  --gold: #c9a24b;        /* vàng champagne — tiêu đề, CTA, logo accent */
  --gold-soft: #d8b564;
  --gold-muted: #a89573;  /* tông đất ấm — chi tiết phụ, giá */
  --cream: #ede6d6;       /* chữ mô tả — trắng ngà */
  --cream-dim: #b8ad97;   /* chữ phụ, tiếng Anh italic */
  --line: rgba(184, 173, 151, 0.24); /* đường viền phụ, bớt cảm giác mạ vàng */
  --serif: "Palatino Nova", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
  --maxw: 900px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Nhảy tới #nhóm-món phải dừng DƯỚI cả header dính lẫn thanh nhóm món dính
   (--header-h do order.js đo thật, xem chú thích bên đó) */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h, 57px) + 54px); }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-soft); }

/* ───────── header ───────── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  background: rgba(18, 16, 9, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex; align-items: center;
  flex: 0 0 auto; white-space: nowrap;
}
.brand-logo { width: 164px; height: auto; display: block; }
.mobile-tools { display: none; }

.site-header nav a {
  display: inline-flex; align-items: center; margin-left: 8px;
  padding: 8px 12px; border: 1px solid transparent; border-radius: 999px;
  font-size: 0.95rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream-dim); transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.16s ease;
}
.site-header nav a.on, .site-header nav a:hover { color: var(--gold); border-color: var(--line); background: rgba(201,162,75,0.08); }
.site-header nav a:active { transform: scale(0.97); }

.site-header nav a.nav-cta {
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 8px 16px;
  transition: background 0.25s, color 0.25s;
}
.site-header nav a.nav-cta:hover { background: var(--gold); color: var(--bg); }

.center-note { border-left: none; text-align: center; padding-left: 0; }

/* ───────── hero ───────── */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  padding: 64px 24px 70px;
  background: radial-gradient(ellipse at 50% 38%, rgba(201,162,75,0.12), transparent 34%),
    radial-gradient(ellipse at 50% 30%, rgba(201,162,75,0.08), transparent 65%);
}

/* Một quầng sáng mỏng như ánh đèn ấm sau lời chào — không thêm ảnh nền. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 118px;
  left: 50%;
  width: min(720px, 92vw);
  height: 360px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(201,162,75,0.16), rgba(201,162,75,0.04) 34%, transparent 70%);
  filter: blur(18px);
  opacity: 0.72;
  pointer-events: none;
}

/* Ánh trăng mỏng sau logo trung tâm — lạnh hơn nền vàng để tạo chiều sâu. */
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 148px;
  left: 50%;
  width: min(430px, 78vw);
  height: 250px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(237,230,214,0.1), rgba(237,230,214,0.025) 42%, transparent 72%);
  filter: blur(22px);
  opacity: 0.8;
  pointer-events: none;
}

.hero-kicker {
  letter-spacing: 0.35em; text-transform: uppercase;
  font-size: 0.8rem; color: var(--cream-dim); margin-bottom: 30px;
}

.hero-logo {
  display: block;
  width: min(590px, 92%);
  margin: 0 auto 26px;
}

.hero-welcome {
  max-width: 560px; margin: -6px auto 28px;
  font-size: 1.02rem; color: var(--cream);
  letter-spacing: 0.03em; line-height: 1.7;
}
.hero-welcome .d-en { padding-left: 0; font-size: 0.82rem; opacity: 0.58; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.hero-tag {
  color: var(--cream); font-style: italic;
  letter-spacing: 0.2em; margin: 6px 0 26px;
}

.btn {
  display: inline-block; padding: 12px 30px;
  border: 1px solid var(--gold); color: var(--gold);
  border-radius: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.85rem;
  transition: background-color 0.25s ease, color 0.25s ease,
    border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover:not(:disabled) { background: var(--gold-soft); color: var(--bg); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.22); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn.ghost { border-color: var(--line); }
.d-en-inline { font-style: italic; text-transform: none; letter-spacing: 0.04em; opacity: 0.75; }

/* Hero actions — trong mờ, bo nhẹ như một lớp kính trên nền thương hiệu. */
.hero > p:not(.hero-kicker) .btn {
  min-width: min(100%, 430px);
  border-radius: 14px;
  background: rgba(25, 20, 11, 0.42);
  box-shadow: inset 0 1px 0 rgba(237, 230, 214, 0.06),
    0 14px 30px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hero > p:not(.hero-kicker) .btn:hover:not(:disabled) {
  background: rgba(201, 162, 75, 0.12);
  color: var(--cream);
  box-shadow: inset 0 1px 0 rgba(237, 230, 214, 0.1),
    0 12px 26px rgba(0, 0, 0, 0.24);
}
.hero > p:not(.hero-kicker) .btn:focus-visible {
  outline: 1px solid var(--gold-soft);
  outline-offset: 4px;
  background: rgba(201, 162, 75, 0.1);
  box-shadow: 0 0 18px rgba(201, 162, 75, 0.16);
}
.hero > p:not(.hero-kicker) .btn:active:not(:disabled) {
  background: rgba(201, 162, 75, 0.18);
  border-color: var(--gold-soft);
  color: var(--cream);
  box-shadow: 0 0 22px rgba(201, 162, 75, 0.2);
}
.hero > p.hero-second .btn {
  background: rgba(201, 162, 75, 0.055);
  border-color: rgba(201, 162, 75, 0.48);
  color: var(--gold-soft);
  box-shadow: inset 0 1px 0 rgba(237, 230, 214, 0.05),
    0 10px 24px rgba(0, 0, 0, 0.16);
}
.hero > p.hero-second .btn:hover:not(:disabled) { background: rgba(201, 162, 75, 0.14); }

.hero > p.hero-kicker,
.hero > .hero-logo,
.hero > .hero-welcome,
.hero > p:not(.hero-kicker) { position: relative; z-index: 1; }

/* CTA dưới Signature — cùng một khung kính bo góc với hai thanh Hero. */
.signature-cta { margin-top: 28px; }
.signature-cta .btn {
  min-width: min(100%, 430px);
  border-radius: 14px;
  background: rgba(25, 20, 11, 0.32);
  border-color: rgba(201, 162, 75, 0.48);
  color: var(--gold-soft);
  box-shadow: inset 0 1px 0 rgba(237, 230, 214, 0.05),
    0 10px 24px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.signature-cta .btn:hover:not(:disabled) {
  background: rgba(201, 162, 75, 0.14);
  color: var(--cream);
  box-shadow: inset 0 1px 0 rgba(237, 230, 214, 0.1),
    0 12px 26px rgba(0, 0, 0, 0.24);
}
.signature-cta .btn:active:not(:disabled) {
  background: rgba(201, 162, 75, 0.18);
  border-color: var(--gold-soft);
  color: var(--cream);
  box-shadow: 0 0 22px rgba(201, 162, 75, 0.2);
}

/* Chuyển động chỉ được bật khi effects.js đã sẵn sàng — JS lỗi thì chữ vẫn hiện. */
.motion-ready .hero-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; transition-delay: var(--hero-delay, 0ms); }
.motion-ready .hero-reveal.is-visible { opacity: 1; transform: none; }

/* ───────── bands (sections trang chủ) ───────── */

.band {
  position: relative; max-width: min(1120px, calc(100% - 48px));
  margin: clamp(28px, 4vw, 56px) auto;
  padding: clamp(82px, 9vw, 118px) 30px;
  text-align: center; overflow: hidden;
  border: 1px solid rgba(184,173,151,0.2); border-radius: 24px;
  background: linear-gradient(145deg, rgba(25,22,15,0.76), rgba(18,16,9,0.92));
  box-shadow: 0 22px 54px rgba(0,0,0,0.2), inset 0 1px 0 rgba(237,230,214,0.045);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.band:hover, .band:focus-within {
  border-color: rgba(201,162,75,0.42);
  box-shadow: 0 24px 58px rgba(0,0,0,0.24), 0 0 28px rgba(201,162,75,0.05), inset 0 1px 0 rgba(237,230,214,0.06);
}
.band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(201,162,75,0.055), transparent 48%); }
.band > * { position: relative; z-index: 1; }
.band.alt { background: linear-gradient(145deg, rgba(30,25,16,0.82), rgba(18,16,9,0.94)); }
.band.alt::before { background: radial-gradient(ellipse at 50% 30%, rgba(201,162,75,0.07), transparent 54%); }
.band.alt > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }

#philosophie, #signature {
  border-color: rgba(201,162,75,0.34);
  background: radial-gradient(ellipse at 50% 10%, rgba(201,162,75,0.09), transparent 48%), linear-gradient(145deg, rgba(30,25,16,0.86), rgba(18,16,9,0.94));
}
#reservierung, #bestellen-home {
  border-color: rgba(201,162,75,0.28);
  background: radial-gradient(ellipse at 50% 22%, rgba(201,162,75,0.07), transparent 50%), linear-gradient(145deg, rgba(27,23,15,0.8), rgba(18,16,9,0.94));
}
#mittag {
  isolation: isolate;
  background-image: linear-gradient(rgba(18,16,9,0.52), rgba(18,16,9,0.72)), url("assets/sections/mittagstisch-bg-v2.jpg");
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
#kontakt {
  isolation: isolate;
  background-image: linear-gradient(rgba(18,16,9,0.38), rgba(18,16,9,0.68)), url("assets/sections/besuchen-bg-v2.jpg");
  background-position: center 54%; background-size: cover; background-repeat: no-repeat;
}
#anfahrt, #ihre-stimme { background: linear-gradient(145deg, rgba(24,21,15,0.7), rgba(18,16,9,0.92)); }

/* Bestellen: một quầng champagne mỏng nâng nút hành động, không biến nút thành mảng vàng nặng. */
#bestellen-home { isolation: isolate; }
#bestellen-home .order-btns { position: relative; }
#bestellen-home .order-btns::before {
  content: ''; position: absolute; z-index: 0; inset: -34px 13%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(220,184,99,0.16) 0%, rgba(201,162,75,0.06) 36%, transparent 72%);
  filter: blur(12px);
}
#bestellen-home .order-btns .btn { position: relative; z-index: 1; }
#bestellen-home .order-btns .btn.solid {
  background: linear-gradient(135deg, rgba(181,143,55,0.78), rgba(216,177,88,0.84));
  box-shadow: 0 0 26px rgba(201,162,75,0.11), inset 0 1px 0 rgba(255,238,185,0.22);
}
#bestellen-home .order-btns .btn.solid:hover,
#bestellen-home .order-btns .btn.solid:focus-visible {
  background: linear-gradient(135deg, rgba(201,162,75,0.9), rgba(230,198,119,0.94));
  box-shadow: 0 0 32px rgba(201,162,75,0.2), 0 8px 18px rgba(0,0,0,0.2);
}

.philosophy-content { position: relative; z-index: 2; max-width: 1040px; margin: 0 auto; }
.philosophy-band h2 { text-shadow: 0 4px 24px rgba(0,0,0,0.72); }
.philosophy-band .phil-de, .philosophy-band .phil-en, .philosophy-band .phil-values { position: relative; z-index: 2; }

.band h2, .menu-head h1, .legal h1 {
  color: var(--gold-soft); font-variant: small-caps; font-weight: 500;
  font-size: 2rem; letter-spacing: 0.11em; margin-bottom: 26px;
  text-shadow: 0 0 1px rgba(255, 235, 174, 0.5), 0 0 18px rgba(201, 162, 75, 0.16);
}

.band h2::after {
  content: ""; display: block; width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); margin: 16px auto 0; opacity: 0.72;
}

.motion-ready .scroll-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.62s ease-out, transform 0.62s ease-out; transition-delay: var(--reveal-delay, 0ms); }
.motion-ready .scroll-reveal.is-visible { opacity: 1; transform: none; }

.phil-tagline {
  font-style: italic; color: var(--gold-soft); font-size: 1.15rem;
  letter-spacing: 0.08em; margin: -6px auto 18px;
  text-shadow: 0 0 14px rgba(201, 162, 75, 0.18);
}
.phil-de { font-size: 1.12rem; max-width: 640px; margin: 0 auto 14px; }
.phil-values {
  position: relative; display: flex; flex-direction: column;
  gap: 34px; max-width: 1040px; margin: 52px auto 0; text-align: left;
}
.phil-values::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, rgba(201,162,75,0.62) 10%, rgba(138,122,94,0.42) 90%, transparent); transform: translateX(-50%); }
.phil-node { position: relative; display: flex; width: 50%; z-index: 1; }
.phil-node-left { align-self: flex-start; padding-right: 52px; justify-content: flex-end; }
.phil-node-right { align-self: flex-end; padding-left: 52px; justify-content: flex-start; }
.phil-node-left::after, .phil-node-right::after { content: ''; position: absolute; top: 43px; width: 52px; height: 1px; background: linear-gradient(90deg, rgba(201,162,75,0.08), rgba(201,162,75,0.48)); }
.phil-node-left::after { right: 0; }
.phil-node-right::after { left: 0; transform: scaleX(-1); }
.phil-node-marker { position: absolute; top: 22px; width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(201,162,75,0.82); border-radius: 50%; background: radial-gradient(circle, rgba(65,48,22,0.82), var(--bg) 68%); color: var(--gold); box-shadow: 0 0 0 6px rgba(18,16,9,0.9), 0 0 18px rgba(201,162,75,0.22); }
.phil-node-marker::before { content: ''; position: absolute; inset: -5px; border: 1px solid rgba(201,162,75,0.22); border-radius: inherit; animation: phil-halo 5.5s ease-in-out infinite; }
.phil-node-icon { position: relative; z-index: 1; font-family: var(--serif); font-size: 1.5rem; line-height: 1; text-shadow: 0 0 9px rgba(237,211,137,0.58); }
@keyframes phil-halo { 0%, 100% { opacity: 0.34; transform: scale(0.96); } 50% { opacity: 0.78; transform: scale(1.06); } }
.phil-node-left .phil-node-marker { right: -27px; }
.phil-node-right .phil-node-marker { left: -27px; }
.phil-value { position: relative; min-width: 0; width: min(100%, 390px); padding: 14px; border: 1px solid rgba(201,162,75,0.28); border-radius: 20px; background: linear-gradient(145deg, rgba(43,33,20,0.8), rgba(18,16,9,0.94)); box-shadow: 0 16px 34px rgba(0,0,0,0.24), inset 0 1px 0 rgba(237,230,214,0.05); }
.phil-value::before { content: '✦'; position: absolute; top: 12px; right: 16px; color: rgba(201,162,75,0.68); font-size: 0.8rem; }
.phil-value-image { position: relative; aspect-ratio: 1; margin-bottom: 16px; overflow: hidden; border: 1px solid rgba(201,162,75,0.24); border-radius: 14px; background: rgba(18,16,9,0.86); }
.phil-value-image::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(145deg, rgba(201,162,75,0.02), rgba(18,16,9,0.04)); }
.phil-value-image img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.02) sepia(0.08) hue-rotate(342deg) brightness(0.98) contrast(1.06); opacity: 1; transition: transform 0.7s ease, opacity 0.7s ease, filter 0.7s ease; }
.phil-value:hover .phil-value-image img { transform: scale(1.05); filter: saturate(1.1) sepia(0.05) hue-rotate(342deg) brightness(1.04) contrast(1.08); }
.phil-value h3 {
  margin: 2px 0 8px; padding-right: 20px;
  font-size: 1.04rem; color: var(--gold); letter-spacing: 0.09em;
  font-variant: small-caps; margin-bottom: 6px;
  border-bottom: 1px solid var(--line); padding-bottom: 5px;
}
.phil-value .d-de { padding-left: 0; }
.phil-value .d-de { line-height: 1.55; }
.phil-value .d-en { padding-left: 0; font-size: 0.8rem; line-height: 1.45; opacity: 0.54; }
.phil-en { font-style: italic; color: var(--cream-dim); max-width: 640px; margin: 0 auto; }
.band > .phil-en { font-size: 0.86rem; line-height: 1.5; opacity: 0.58; }

/* signature cards */

.sig-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px; margin: 34px auto; text-align: left;
}

.sig-card {
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid rgba(201,162,75,0.42); border-radius: 10px; padding: 30px 26px 26px;
  background: linear-gradient(145deg, rgba(25,22,15,0.98), rgba(15,14,10,0.98));
  box-shadow: 0 18px 48px rgba(0,0,0,0.28), inset 0 1px 0 rgba(237,230,214,0.035);
}
.sig-card { transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; }
.sig-card:hover { transform: translateY(-3px); box-shadow: 0 22px 60px rgba(0,0,0,0.38), inset 0 1px 0 rgba(237,230,214,0.055); border-color: rgba(216,181,100,0.62); }
.sig-card-image { position: relative; isolation: isolate; margin: -30px -26px 24px; aspect-ratio: 1.26; overflow: hidden; border-radius: 8px 8px 0 0; background: #17130d; }
/* Khung ảnh là NÚT mở modal (30.08 — khách mobile bấm thẳng vào ảnh): reset kiểu button */
button.sig-card-image { display: block; width: calc(100% + 52px); padding: 0; border: 0; font: inherit; color: inherit; cursor: pointer; text-align: inherit; }
.sig-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease, filter 0.55s ease; }
.sig-card:hover .sig-card-image img { transform: scale(1.035); filter: saturate(1.06); }
.sig-card-image::after {
  content: ''; position: absolute; z-index: 2; inset: 0; padding: 1px;
  border-radius: inherit; pointer-events: none; opacity: 0.52;
  background: conic-gradient(from 0deg, transparent 0deg 294deg, rgba(126,211,221,0.15) 316deg, rgba(237,230,214,0.72) 338deg, rgba(201,162,75,0.56) 348deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: signature-image-edge 9s linear infinite;
}
@keyframes signature-image-edge { to { transform: rotate(360deg); } }
.sig-nr { font-size: 0.75rem; letter-spacing: 0.25em; color: var(--cream-dim); text-transform: uppercase; }
.sig-card h3 { color: var(--gold); font-weight: 500; font-size: 1.25rem; margin: 6px 0 10px; }
.sig-card .d-de { font-size: 0.92rem; }
.sig-card .d-en { font-size: 0.88rem; }
.sig-price {
  color: var(--gold-muted); margin-top: 12px; letter-spacing: 0.05em;
  display: flex; align-items: center; justify-content: space-between;
}
.sig-price .add-btn { margin-left: 12px; }
.sig-more { border: 0; border-bottom: 1px solid rgba(237,230,214,0.26); padding: 0 0 4px; background: transparent; color: var(--cream); font: inherit; font-size: 0.82rem; cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease; }
.sig-more:hover, .sig-more:focus-visible { color: var(--gold); border-color: var(--gold); outline: none; }

.signature-dialog { width: min(900px, calc(100% - 28px)); max-width: 900px; padding: 0; border: 1px solid rgba(201,162,75,0.7); border-radius: 14px; color: var(--cream); background: #17130d; box-shadow: 0 28px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(237,230,214,0.04); }
.signature-dialog::backdrop { background: rgba(7,6,4,0.78); backdrop-filter: blur(6px); }
.signature-dialog-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); min-height: 500px; }
.signature-dialog-image { width: 100%; height: 100%; min-height: 500px; object-fit: cover; }
.signature-dialog-copy { position: relative; padding: 42px 38px 34px; display: flex; flex-direction: column; justify-content: center; }
.signature-dialog-copy h3 { color: var(--gold); font-size: clamp(1.65rem, 3vw, 2.25rem); font-weight: 500; margin: 6px 0 20px; }
.signature-story { line-height: 1.7; }
.signature-story.d-en { opacity: 0.62; }
.signature-detail-grid { display: grid; gap: 18px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.signature-detail-grid p { margin: 5px 0 0; line-height: 1.5; }
.signature-detail-grid .d-en { opacity: 0.6; }
.signature-label { color: var(--gold-muted); font-size: 0.73rem; letter-spacing: 0.14em; text-transform: uppercase; }
.signature-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.signature-dialog-footer .sig-price { margin: 0; font-size: 1.12rem; }
.signature-add { white-space: nowrap; flex: 0 0 auto; width: auto; height: auto; margin-left: 0; border-radius: 999px; padding: 12px 20px; font-size: 0.9rem; line-height: 1.2; }
.signature-close { position: absolute; z-index: 2; top: 12px; right: 16px; width: 34px; height: 34px; border: 1px solid rgba(237,230,214,0.28); border-radius: 50%; background: rgba(18,16,9,0.75); color: var(--cream); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.signature-close:hover, .signature-close:focus-visible { color: var(--gold); border-color: var(--gold); outline: none; }

@media (max-width: 680px) {
  .signature-dialog { max-height: calc(100% - 24px); overflow: auto; }
  .signature-dialog-inner { display: block; }
  .signature-dialog-image { display: block; height: min(46vh, 380px); min-height: 0; }
  .signature-dialog-copy { padding: 28px 22px 24px; }
  .signature-dialog-copy h3 { margin-bottom: 14px; }
  .signature-dialog-footer { align-items: stretch; flex-direction: column; }
  .signature-dialog-footer .sig-price { justify-content: flex-start; }
  .signature-add { width: 100%; }
}

.center { text-align: center; margin-top: 10px; }

/* contact */

.contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px; text-align: left; margin-top: 10px;
}
.contact-grid h3 { color: var(--gold); font-weight: 500; margin-bottom: 12px; font-variant: small-caps; letter-spacing: 0.06em; }
.contact-grid p { margin-bottom: 12px; }

table.hours { border-collapse: collapse; width: 100%; }
table.hours td { padding: 8px 12px 8px 0; border-bottom: 1px solid rgba(184,173,151,0.14); vertical-align: top; }
table.hours td:last-child { text-align: right; white-space: nowrap; color: var(--gold-muted); }

/* ───────── speisekarte ───────── */

.menu-page { max-width: var(--maxw); margin: 0 auto; padding: 50px 24px 80px; }
.menu-head { text-align: center; margin-bottom: 26px; }
.menu-head .hero-tag { margin-bottom: 0; }

.menu-nav-wrap {
  position: sticky; top: var(--header-h, 57px); z-index: 40;
  margin-bottom: 40px;
  background: rgba(18,16,9,0.94); backdrop-filter: blur(8px);
  border-block: 1px solid var(--line);
}
.menu-nav {
  display: flex; gap: 7px; overflow-x: auto;
  padding: 11px 34px;
  scrollbar-width: none;
}
.menu-nav-wrap::before, .menu-nav-wrap::after {
  position: absolute; top: 50%; z-index: 2;
  display: grid; place-items: center; width: 25px; height: 34px;
  transform: translateY(-50%); pointer-events: none;
  color: rgba(237,230,214,0.84); font-family: Georgia, serif; font-size: 1.85rem;
  line-height: 1; opacity: 0;
  background: linear-gradient(90deg, rgba(18,16,9,0.98), rgba(18,16,9,0.58), transparent);
  text-shadow: 0 0 7px rgba(126,211,221,0.34), 0 0 12px rgba(201,162,75,0.38);
  transition: opacity 0.3s ease;
}
.menu-nav-wrap::before { content: '\2039'; left: 0; }
.menu-nav-wrap::after {
  content: '\203A'; right: 0; justify-items: end;
  background: linear-gradient(270deg, rgba(18,16,9,0.98), rgba(18,16,9,0.58), transparent);
}
.menu-nav-wrap.has-left::before, .menu-nav-wrap.has-right::after { opacity: 0.92; }
.menu-nav::-webkit-scrollbar { display: none; }
.menu-nav a {
  flex: 0 0 auto; padding: 7px 14px;
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cream-dim); border: 1px solid transparent; border-radius: 999px;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.16s ease;
}
.menu-nav a.is-active {
  color: var(--gold);
  border-color: rgba(201,162,75,0.55);
  background: rgba(201,162,75,0.10);
  box-shadow: inset 0 0 0 1px rgba(237,230,214,0.04);
}
.menu-nav a:hover, .menu-nav a:focus-visible {
  color: var(--gold); border-color: var(--line); background: rgba(201,162,75,0.08); outline: none;
}
.menu-nav a:active { transform: scale(0.97); }

/* mobile: chu thanh nhom mon to hon cho de bam — thanh van cuon ngang nen khong tran le */
@media (max-width: 560px) {
  .menu-nav { gap: 8px; padding: 12px 32px; }
  .menu-nav a {
    padding: 9px 16px;
    font-size: 0.95rem; letter-spacing: 0.08em;
  }
  .menu-nav-wrap::before, .menu-nav-wrap::after { width: 24px; height: 40px; font-size: 2rem; }
}

.menu-group { margin-bottom: 58px; }
.menu-signatures, .menu-group, #bestellen, #allergene { scroll-margin-top: calc(var(--header-h, 57px) + 54px); }

.menu-signatures {
  margin: 0 0 72px;
  padding: 34px 0 8px;
  border-block: 1px solid var(--line);
}
.menu-signatures-head { text-align: center; margin-bottom: 28px; }
.menu-signatures-head h2 { margin-bottom: 6px; }
.menu-signatures-head .d-en { padding-left: 0; }
.menu-sig-grid { margin: 0; }
.menu-sig-card { display: flex; flex-direction: column; min-height: 100%; }
.menu-sig-copy { display: flex; flex: 1; flex-direction: column; padding: 18px 18px 16px; }
.menu-sig-card .sig-more { margin-top: auto; align-self: flex-start; }
.menu-sig-card .sig-price { margin-top: 16px; }

.group-title {
  color: var(--gold); font-variant: small-caps; font-weight: 500;
  font-size: 1.6rem; letter-spacing: 0.07em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px; margin-bottom: 24px;
}
h3.group-title { font-size: 1.25rem; margin-top: 40px; border-bottom-style: dotted; }

/* ───────── huy hieu hologram tieu de nhom (chi chot 07.09.2026) ─────────
   Huy hieu TRON, vanh chuyen sac hologram that (conic-gradient cyan -> bac ha ->
   champagne -> vang cam -> hong -> tim), quang sang da sac, ben trong la bieu
   tuong RIENG cua tung nhom mon. Ve bang SVG nhung thang trong CSS: khong file
   anh, 0 KB tai them. CHI o dong tieu de — vung danh sach mon giu nen sach de
   gia va ma Allergien luon ro. */

.group-title {
  position: relative; isolation: isolate;
  padding-right: 76px;
}
.group-title::before {
  content: ''; position: absolute; z-index: -1;
  left: -16px; right: 4px; top: 0.6em; transform: translateY(-50%);
  height: 2.4em; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(201,162,75,0.058) 0%,
    rgba(201,162,75,0.060) 38%,
    rgba(143,199,196,0.050) 62%,
    rgba(201,162,75,0.036) 84%,
    rgba(201,162,75,0) 100%);
  filter: blur(10px);
}
.group-title::after {
  content: none; /* mac dinh KHONG hien — chi bat khi nhom do co bieu tuong */
  position: absolute; pointer-events: none;
  right: 2px; top: 0.62em; transform: translateY(-50%);
  width: 54px; height: 54px; box-sizing: border-box;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center, center, center;
  background-size: 58% 58%, 100% 100%, 100% 100%;
  box-shadow:
    0 0 10px rgba(201,162,75,0.34),
    0 0 20px rgba(201,162,75,0.22),
    0 0 32px rgba(143,199,196,0.14),
    inset 0 0 10px rgba(201,162,75,0.12);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.group-title:hover::after {
  transform: translateY(-50%) scale(1.06);
  box-shadow:
    0 0 14px rgba(201,162,75,0.52),
    0 0 28px rgba(201,162,75,0.36),
    0 0 44px rgba(143,199,196,0.22),
    inset 0 0 13px rgba(201,162,75,0.18);
}
h2.group-title {
  border-bottom: 0;
  background-image: linear-gradient(90deg,
    rgba(143,199,196,0.30), rgba(201,162,75,0.60) 28%, rgba(201,162,75,0.16) 66%, transparent);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
}

#suppen > .group-title::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='url(%23h)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0'/%3E%3Cstop offset='0.5' stop-color='%23F4E3B4'/%3E%3Cstop offset='1' stop-color='%23E7CE93'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23C9A24B' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M7 21h26c0 7.5-5.8 13-13 13S7 28.5 7 21z'/%3E%3Cpath d='M4 21h32'/%3E%3Cpath d='M15 14c-2.4-3 2.4-5 0-8'/%3E%3Cpath d='M25 14c-2.4-3 2.4-5 0-8'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side at 50% 50%, #0f0c06 0 73%, rgba(15,12,6,0.45) 80%, rgba(15,12,6,0) 83%),
    conic-gradient(from 200deg, #8FC7C4, #C9A24B 26%, #EBD9A6 48%, #C9A24B 70%, #8FC7C4 100%);
}
#kleine-koestlichkeiten > .group-title::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='url(%23h)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0'/%3E%3Cstop offset='0.5' stop-color='%23F4E3B4'/%3E%3Cstop offset='1' stop-color='%23E7CE93'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23C9A24B' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M11 31.5c-1.6-1.6-1.6-3.2 0-4.8L26 11.7c1.6-1.6 3.2-1.6 4.8 0s1.6 3.2 0 4.8L15.8 31.5c-1.6 1.6-3.2 1.6-4.8 0z'/%3E%3Cpath d='M16.5 26.5 21 22M13 23l4.5-4.5'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side at 50% 50%, #0f0c06 0 73%, rgba(15,12,6,0.45) 80%, rgba(15,12,6,0) 83%),
    conic-gradient(from 200deg, #8FC7C4, #C9A24B 26%, #EBD9A6 48%, #C9A24B 70%, #8FC7C4 100%);
}
#fresh-rolls-salads > .group-title::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='url(%23h)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0'/%3E%3Cstop offset='0.5' stop-color='%23F4E3B4'/%3E%3Cstop offset='1' stop-color='%23E7CE93'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23C9A24B' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M5 23h30c0 6.6-6.7 11.6-15 11.6S5 29.6 5 23z'/%3E%3Cpath d='M3 23h34'/%3E%3Cpath fill='url(%23f)' d='M21 22c0-7.4 5.4-12.8 12.8-12.8C33.8 16.6 28.4 22 21 22z'/%3E%3Cpath d='M23.5 20 32 12'/%3E%3Cpath fill='url(%23f)' d='M18.5 22c-2.2-4.4-6.6-6.6-11.2-5.4C8.4 21 12.8 23.2 18.5 22z'/%3E%3Ccircle cx='16' cy='14' r='3.6'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side at 50% 50%, #0f0c06 0 73%, rgba(15,12,6,0.45) 80%, rgba(15,12,6,0) 83%),
    conic-gradient(from 200deg, #8FC7C4, #C9A24B 26%, #EBD9A6 48%, #C9A24B 70%, #8FC7C4 100%);
}
#pho-soups > .group-title::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='url(%23h)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0'/%3E%3Cstop offset='0.5' stop-color='%23F4E3B4'/%3E%3Cstop offset='1' stop-color='%23E7CE93'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23C9A24B' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M6 22h27c0 7.3-6 13-13.5 13S6 29.3 6 22z'/%3E%3Cpath d='M3 22h33'/%3E%3Cpath d='M23 19 34 7M26.5 20.5 37 9'/%3E%3Cpath d='M13 16c-2.2-2.8 2.2-4.6 0-7.4'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side at 50% 50%, #0f0c06 0 73%, rgba(15,12,6,0.45) 80%, rgba(15,12,6,0) 83%),
    conic-gradient(from 200deg, #8FC7C4, #C9A24B 26%, #EBD9A6 48%, #C9A24B 70%, #8FC7C4 100%);
}
#fresh-herbal > .group-title::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='url(%23h)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0'/%3E%3Cstop offset='0.5' stop-color='%23F4E3B4'/%3E%3Cstop offset='1' stop-color='%23E7CE93'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23C9A24B' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M5 24h24c0 6.8-5.4 11.9-12 11.9S5 30.8 5 24z'/%3E%3Cpath d='M2.6 24h28.8'/%3E%3Cpath d='M26 21 36 6M29 22.6 38.6 8.4'/%3E%3Cpath d='M17 23.4c0-4.4 2.4-7 5-9s5-3.6 5-6.4'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side at 50% 50%, #0f0c06 0 73%, rgba(15,12,6,0.45) 80%, rgba(15,12,6,0) 83%),
    conic-gradient(from 200deg, #8FC7C4, #C9A24B 26%, #EBD9A6 48%, #C9A24B 70%, #8FC7C4 100%);
}
#the-rice-field > .group-title::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='url(%23h)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0'/%3E%3Cstop offset='0.5' stop-color='%23F4E3B4'/%3E%3Cstop offset='1' stop-color='%23E7CE93'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23C9A24B' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M8 21h24c0 7-5.4 12.2-12 12.2S8 28 8 21z'/%3E%3Cpath d='M5 21h30'/%3E%3Cpath d='M11 21c1.6-4.6 4.8-7 9-7s7.4 2.4 9 7'/%3E%3Cpath d='M22 13c1.2-4.4 4.4-6.6 8.4-6.6C30.4 10.8 27.2 13 22 13z'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side at 50% 50%, #0f0c06 0 73%, rgba(15,12,6,0.45) 80%, rgba(15,12,6,0) 83%),
    conic-gradient(from 200deg, #8FC7C4, #C9A24B 26%, #EBD9A6 48%, #C9A24B 70%, #8FC7C4 100%);
}
#the-grill > .group-title::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='url(%23h)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0'/%3E%3Cstop offset='0.5' stop-color='%23F4E3B4'/%3E%3Cstop offset='1' stop-color='%23E7CE93'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23C9A24B' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M20 22c-4.4 0-7.4-3-7.4-6.8 0-4.4 4.4-6 4.4-10.4 0 2.2 2.2 3.8 3.7 5.2 1.5-1.5 2.2-3 2.2-5.2 2.2 3 4.4 6 4.4 10.4C27.3 19 24.4 22 20 22z'/%3E%3Cpath d='M7 27h26M11 32h18'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side at 50% 50%, #0f0c06 0 73%, rgba(15,12,6,0.45) 80%, rgba(15,12,6,0) 83%),
    conic-gradient(from 200deg, #8FC7C4, #C9A24B 26%, #EBD9A6 48%, #C9A24B 70%, #8FC7C4 100%);
}
#claypot-heritage > .group-title::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='url(%23h)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0'/%3E%3Cstop offset='0.5' stop-color='%23F4E3B4'/%3E%3Cstop offset='1' stop-color='%23E7CE93'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23C9A24B' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M8 21h24v5a8 8 0 0 1-8 8h-8a8 8 0 0 1-8-8z'/%3E%3Cpath d='M9 21c0-5.4 4.9-8.6 11-8.6S31 15.6 31 21'/%3E%3Cpath d='M20 9v3.4'/%3E%3Cpath d='M6 24H3.6M34 24h2.4'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side at 50% 50%, #0f0c06 0 73%, rgba(15,12,6,0.45) 80%, rgba(15,12,6,0) 83%),
    conic-gradient(from 200deg, #8FC7C4, #C9A24B 26%, #EBD9A6 48%, #C9A24B 70%, #8FC7C4 100%);
}
#mixed-wok-noodles > .group-title::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='url(%23h)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0'/%3E%3Cstop offset='0.5' stop-color='%23F4E3B4'/%3E%3Cstop offset='1' stop-color='%23E7CE93'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23C9A24B' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M5 21h25c0 7-5.6 12.4-12.5 12.4S5 28 5 21z'/%3E%3Cpath d='M30 21h6.5'/%3E%3Cpath d='M8.5 18c3 3.2 6 3.2 9 0s6-3.2 9 0'/%3E%3Cpath d='M8.5 12c3 3.2 6 3.2 9 0s6-3.2 9 0'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side at 50% 50%, #0f0c06 0 73%, rgba(15,12,6,0.45) 80%, rgba(15,12,6,0) 83%),
    conic-gradient(from 200deg, #8FC7C4, #C9A24B 26%, #EBD9A6 48%, #C9A24B 70%, #8FC7C4 100%);
}
#mittagstisch > .group-title::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='url(%23h)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0'/%3E%3Cstop offset='0.5' stop-color='%23F4E3B4'/%3E%3Cstop offset='1' stop-color='%23E7CE93'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23C9A24B' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='13'/%3E%3Cpath fill='url(%23f)' d='M20 20a13 13 0 0 1 0-13 13 13 0 0 1 0 26z' opacity='.7'/%3E%3Cpath d='M20 11.5V20l6.5 3.6'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side at 50% 50%, #0f0c06 0 73%, rgba(15,12,6,0.45) 80%, rgba(15,12,6,0) 83%),
    conic-gradient(from 200deg, #8FC7C4, #C9A24B 26%, #EBD9A6 48%, #C9A24B 70%, #8FC7C4 100%);
}
#sweet-ending > .group-title::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='url(%23h)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0'/%3E%3Cstop offset='0.5' stop-color='%23F4E3B4'/%3E%3Cstop offset='1' stop-color='%23E7CE93'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23C9A24B' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle fill='url(%23f)' cx='13' cy='26' r='7.5'/%3E%3Ccircle fill='url(%23f)' cx='27' cy='26' r='7.5'/%3E%3Ccircle fill='url(%23f)' cx='20' cy='14' r='7.5'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side at 50% 50%, #0f0c06 0 73%, rgba(15,12,6,0.45) 80%, rgba(15,12,6,0) 83%),
    conic-gradient(from 200deg, #8FC7C4, #C9A24B 26%, #EBD9A6 48%, #C9A24B 70%, #8FC7C4 100%);
}
#beilagen > .group-title::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='url(%23h)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0'/%3E%3Cstop offset='0.5' stop-color='%23F4E3B4'/%3E%3Cstop offset='1' stop-color='%23E7CE93'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23C9A24B' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M9 23h22c0 6.6-5 11.6-11 11.6S9 29.6 9 23z'/%3E%3Cpath d='M6 23h28'/%3E%3Cpath d='M8 17.5 32 13M8.5 12 32 7.5'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side at 50% 50%, #0f0c06 0 73%, rgba(15,12,6,0.45) 80%, rgba(15,12,6,0) 83%),
    conic-gradient(from 200deg, #8FC7C4, #C9A24B 26%, #EBD9A6 48%, #C9A24B 70%, #8FC7C4 100%);
}
#getraenke > .group-title::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='url(%23h)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0'/%3E%3Cstop offset='0.5' stop-color='%23F4E3B4'/%3E%3Cstop offset='1' stop-color='%23E7CE93'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23C9A24B' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M12 13h16l-2.2 20.4a2 2 0 0 1-2 1.8h-7.6a2 2 0 0 1-2-1.8z'/%3E%3Cpath d='M10 13h20'/%3E%3Cpath d='M26 13 31 4.5'/%3E%3Cpath d='M13.4 22h13.2'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side at 50% 50%, #0f0c06 0 73%, rgba(15,12,6,0.45) 80%, rgba(15,12,6,0) 83%),
    conic-gradient(from 200deg, #8FC7C4, #C9A24B 26%, #EBD9A6 48%, #C9A24B 70%, #8FC7C4 100%);
}
#specialty-loose-teas > .group-title::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='url(%23h)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0'/%3E%3Cstop offset='0.5' stop-color='%23F4E3B4'/%3E%3Cstop offset='1' stop-color='%23E7CE93'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23C9A24B' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M9 19h17v5.5a8.5 8.5 0 0 1-17 0z'/%3E%3Cpath d='M10.6 19c0-4.6 3.6-7.4 6.9-7.4S24.4 14.4 24.4 19'/%3E%3Cpath d='M17.5 8.6v3'/%3E%3Cpath d='M26 21.5l7 3.4-7 3.4'/%3E%3Cpath d='M9 22.5a4.6 4.6 0 0 0-4.6 4.6'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side at 50% 50%, #0f0c06 0 73%, rgba(15,12,6,0.45) 80%, rgba(15,12,6,0) 83%),
    conic-gradient(from 200deg, #8FC7C4, #C9A24B 26%, #EBD9A6 48%, #C9A24B 70%, #8FC7C4 100%);
}
#refreshing-iced-teas > .group-title::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='url(%23h)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0'/%3E%3Cstop offset='0.5' stop-color='%23F4E3B4'/%3E%3Cstop offset='1' stop-color='%23E7CE93'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23C9A24B' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M13 11h14l-2 23.2a1.8 1.8 0 0 1-1.8 1.6h-6.4a1.8 1.8 0 0 1-1.8-1.6z'/%3E%3Cpath d='M11 11h18'/%3E%3Cpath d='M26 11 31 3'/%3E%3Cpath d='M16.6 17.4h5.4v5.4h-5.4z'/%3E%3Cpath d='M19.4 25h4.6v4.6h-4.6z'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side at 50% 50%, #0f0c06 0 73%, rgba(15,12,6,0.45) 80%, rgba(15,12,6,0) 83%),
    conic-gradient(from 200deg, #8FC7C4, #C9A24B 26%, #EBD9A6 48%, #C9A24B 70%, #8FC7C4 100%);
}
#vietnamese-coffee-culture > .group-title::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='url(%23h)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0'/%3E%3Cstop offset='0.5' stop-color='%23F4E3B4'/%3E%3Cstop offset='1' stop-color='%23E7CE93'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23C9A24B' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M12 24h16v7.4a4 4 0 0 1-4 4h-8a4 4 0 0 1-4-4z'/%3E%3Cpath d='M13.4 12.6h13.2V22H13.4z'/%3E%3Cpath d='M11 9.4h18'/%3E%3Cpath d='M20 22v2.6'/%3E%3Cpath d='M9.6 27h-2.2'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side at 50% 50%, #0f0c06 0 73%, rgba(15,12,6,0.45) 80%, rgba(15,12,6,0) 83%),
    conic-gradient(from 200deg, #8FC7C4, #C9A24B 26%, #EBD9A6 48%, #C9A24B 70%, #8FC7C4 100%);
}
#homemade-refreshments > .group-title::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='url(%23h)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0'/%3E%3Cstop offset='0.5' stop-color='%23F4E3B4'/%3E%3Cstop offset='1' stop-color='%23E7CE93'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23C9A24B' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M7 10h26L20 24.6z'/%3E%3Cpath d='M5.6 10h28.8'/%3E%3Cpath d='M20 24.6V33M13.6 33h12.8'/%3E%3Cpath d='M27.5 6.6 32.5 2'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side at 50% 50%, #0f0c06 0 73%, rgba(15,12,6,0.45) 80%, rgba(15,12,6,0) 83%),
    conic-gradient(from 200deg, #8FC7C4, #C9A24B 26%, #EBD9A6 48%, #C9A24B 70%, #8FC7C4 100%);
}
#bestellen > .group-title::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='url(%23h)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0'/%3E%3Cstop offset='0.5' stop-color='%23F4E3B4'/%3E%3Cstop offset='1' stop-color='%23E7CE93'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23C9A24B' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M9 14h22l-2.1 19.8a2.2 2.2 0 0 1-2.2 2H13.3a2.2 2.2 0 0 1-2.2-2z'/%3E%3Cpath d='M7 14h26'/%3E%3Cpath d='M15 14v-3.4a5 5 0 0 1 10 0V14'/%3E%3Cpath d='M12.6 21.5h14.8'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side at 50% 50%, #0f0c06 0 73%, rgba(15,12,6,0.45) 80%, rgba(15,12,6,0) 83%),
    conic-gradient(from 200deg, #8FC7C4, #C9A24B 26%, #EBD9A6 48%, #C9A24B 70%, #8FC7C4 100%);
}
#allergene > .group-title::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='url(%23h)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0'/%3E%3Cstop offset='0.5' stop-color='%23F4E3B4'/%3E%3Cstop offset='1' stop-color='%23E7CE93'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23C9A24B' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M20 4.5 31.5 8.6v8.6c0 7.9-4.8 13.6-11.5 16.5C13.3 30.8 8.5 25.1 8.5 17.2V8.6z'/%3E%3Cpath d='M20 13.4v7.2'/%3E%3Cpath d='M20 25.4v.3'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side at 50% 50%, #0f0c06 0 73%, rgba(15,12,6,0.45) 80%, rgba(15,12,6,0) 83%),
    conic-gradient(from 200deg, #8FC7C4, #C9A24B 26%, #EBD9A6 48%, #C9A24B 70%, #8FC7C4 100%);
}
#soft-drinks-bier-wein > .group-title::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='url(%23h)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0'/%3E%3Cstop offset='0.5' stop-color='%23F4E3B4'/%3E%3Cstop offset='1' stop-color='%23E7CE93'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='2' y1='38' x2='38' y2='2'%3E%3Cstop offset='0' stop-color='%23BFE3E0' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23C9A24B' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M10 15h16v17a3.4 3.4 0 0 1-3.4 3.4h-9.2A3.4 3.4 0 0 1 10 32z'/%3E%3Cpath d='M26 19.4h3.6a3.6 3.6 0 0 1 0 7.2H26'/%3E%3Cpath d='M10 15c0-3 2.2-4.2 4.4-4.2 0-2.4 2.2-3.4 4.4-2.6 1-2.2 4-2.4 5.2-.4 2.2-.4 4 1.2 4 3.4 0 1.6-.8 3-2 3.8'/%3E%3Cpath d='M13.4 21h9.2'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side at 50% 50%, #0f0c06 0 73%, rgba(15,12,6,0.45) 80%, rgba(15,12,6,0) 83%),
    conic-gradient(from 200deg, #8FC7C4, #C9A24B 26%, #EBD9A6 48%, #C9A24B 70%, #8FC7C4 100%);
}

.group-sub { color: var(--cream-dim); font-size: 0.75em; font-style: italic; font-variant: normal; letter-spacing: 0.04em; }

.intro { font-size: 0.95rem; margin-bottom: 20px; color: var(--cream); }

.dish { margin-bottom: 22px; }

.dish-line { display: flex; align-items: baseline; gap: 10px; }

.nr {
  flex: 0 0 auto; min-width: 2em;
  color: var(--cream-dim); font-size: 0.9rem; letter-spacing: 0.05em;
}

.dname {
  min-width: 0;
  color: var(--gold); font-size: 1.08rem; letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.signature-mark {
  position: relative; display: inline-grid; place-items: center;
  width: 1.45em; height: 1.45em; margin-left: 8px;
  border: 1px solid rgba(216,181,100,0.82); border-radius: 50%;
  color: #f4d98e; font-size: 0.76em; line-height: 1;
  vertical-align: -0.08em; overflow: hidden;
  background: radial-gradient(circle at 35% 28%, rgba(255,244,193,0.42), transparent 32%), rgba(201,162,75,0.10);
  box-shadow: 0 0 8px rgba(201,162,75,0.42), inset 0 0 7px rgba(237,230,214,0.12);
  animation: signature-holo 4.8s ease-in-out infinite;
}
.signature-mark::before {
  content: ''; position: absolute; inset: -45%;
  background: linear-gradient(115deg, transparent 35%, rgba(237,230,214,0.7) 48%, transparent 59%);
  transform: translateX(-65%) rotate(12deg);
  animation: signature-sheen 4.8s ease-in-out infinite;
}
.signature-mark span { position: relative; z-index: 1; text-shadow: 0 0 7px rgba(255,218,123,0.85); }
.vegetarian-mark {
  display: inline-grid; place-items: center;
  width: 1.2em; height: 1.35em; margin-left: 8px;
  color: #a7bd78; font-size: 0.82em; line-height: 1;
  vertical-align: -0.12em;
}
.vegetarian-mark .leaf-icon {
  position: relative; display: block;
  width: 0.76em; height: 1.08em;
  border: 1px solid rgba(167,189,120,0.76);
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #d2dc9b 0%, #829b5d 54%, #526c42 100%);
  transform: rotate(45deg) translate(-0.02em, -0.02em);
  box-shadow: inset 0 0 3px rgba(245,246,204,0.34);
}
.vegetarian-mark .leaf-icon::after {
  content: ''; position: absolute; left: 48%; top: 12%;
  width: 1px; height: 78%;
  background: rgba(38,56,27,0.64);
  transform: rotate(-45deg); transform-origin: center;
}
@keyframes signature-holo {
  0%, 100% { box-shadow: 0 0 8px rgba(201,162,75,0.38), inset 0 0 7px rgba(237,230,214,0.12); }
  50% { box-shadow: 0 0 15px rgba(201,162,75,0.72), 0 0 28px rgba(126,211,221,0.16), inset 0 0 9px rgba(237,230,214,0.22); }
}
@keyframes signature-sheen {
  0%, 35% { transform: translateX(-65%) rotate(12deg); opacity: 0; }
  52% { transform: translateX(65%) rotate(12deg); opacity: 0.8; }
  70%, 100% { transform: translateX(120%) rotate(12deg); opacity: 0; }
}

.allerg { color: var(--cream-dim); font-size: 0.68em; margin-left: 6px; letter-spacing: 0.05em; }

.leader { flex: 1 1 auto; border-bottom: 1px dotted rgba(184,173,151,0.30); transform: translateY(-4px); min-width: 20px; }

.price { flex: 0 0 auto; color: var(--gold-muted); letter-spacing: 0.04em; }

.d-de { font-size: 0.93rem; color: var(--cream); margin-top: 3px; padding-left: calc(2em + 10px); }
.d-en { font-size: 0.89rem; font-style: italic; color: var(--cream-dim); margin-top: 1px; padding-left: calc(2em + 10px); }
.sig-card .d-de, .sig-card .d-en, .intro + .dish .d-de { padding-left: 0; }
.menu-group .dish .d-de:only-of-type { }

.group-note {
  font-size: 0.85rem; color: var(--cream-dim);
  border-left: 2px solid var(--line);
  padding-left: 14px; margin: 18px 0;
}
.group-note.center-note {
  display: inline-block; max-width: 100%;
  border-left: 1px solid rgba(184,173,151,0.34);
  padding-left: 10px; padding-right: 10px;
  text-align: center;
}

/* allergen legend */

.allerg-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px 20px; font-size: 0.9rem; margin: 20px 0;
}
.allerg-grid b { color: var(--gold); margin-right: 6px; }
.allerg-grid i { color: var(--cream-dim); font-size: 0.85em; }

/* ───────── menü in bildern ───────── */

.hero-second { margin-top: 12px; }
.center-text { text-align: center; }

.bilder-stack {
  display: flex; flex-direction: column; gap: 26px;
  margin: 36px 0 56px;
}

.menu-bild {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line);
  box-shadow: 0 12px 44px rgba(0,0,0,0.5);
}
.motion-ready .menu-bild { opacity: 0; transition: opacity 0.7s ease-out; }
.motion-ready .menu-bild.is-loaded { opacity: 1; }

/* ───────── stimmen (reviews) ───────── */

.rating-line { font-size: 1.05rem; margin-bottom: 26px; }
.rating-line .stars { color: var(--gold); letter-spacing: 0.2em; }
.rating-line b { color: var(--gold); }
.rating-line .d-en { padding-left: 0; }

.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin: 10px auto 28px; text-align: left; }
.review-timeline {
  position: relative; display: flex; flex-direction: column; gap: 30px;
  max-width: 900px; margin: 44px auto 34px; text-align: left;
}
.review-timeline::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(201,162,75,0.62) 12%, rgba(184,173,151,0.28) 88%, transparent);
  box-shadow: 0 0 14px rgba(201,162,75,0.16);
}
.review-card {
  position: relative; width: calc(50% - 28px); border: 1px solid rgba(201,162,75,0.32);
  border-radius: 18px; padding: 26px 24px; margin: 0;
  background: linear-gradient(145deg, rgba(36,29,18,0.78), rgba(18,16,9,0.88));
  box-shadow: 0 18px 42px rgba(0,0,0,0.22), inset 0 1px 0 rgba(237,230,214,0.05);
  backdrop-filter: blur(3px);
}
.review-node-left { align-self: flex-start; }
.review-node-right { align-self: flex-end; }
.review-marker {
  position: absolute; top: 24px; width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid rgba(216,181,100,0.78); border-radius: 50%;
  background: radial-gradient(circle, rgba(74,56,27,0.9), rgba(18,16,9,0.96) 70%);
  color: var(--gold-soft); font-size: 1.22rem;
  text-shadow: 0 0 10px rgba(237,211,137,0.64);
  box-shadow: 0 0 0 5px rgba(18,16,9,0.9), 0 0 22px rgba(201,162,75,0.24);
}
.review-marker::after {
  content: ''; position: absolute; inset: -5px; border: 1px solid rgba(201,162,75,0.22);
  border-radius: inherit; animation: review-halo 5.5s ease-in-out infinite;
}
.review-node-left .review-marker { right: -52px; }
.review-node-right .review-marker { left: -52px; }
@keyframes review-halo { 0%, 100% { opacity: 0.3; transform: scale(0.96); } 50% { opacity: 0.76; transform: scale(1.06); } }
.review-card blockquote { font-style: italic; font-size: 1rem; margin-bottom: 14px; overflow-wrap: anywhere; }
.review-card figcaption { font-size: 0.85rem; color: var(--cream-dim); overflow-wrap: anywhere; }
.review-src { color: var(--gold); }
.review-timeline-end { display: grid; place-items: center; width: 54px; height: 54px; margin: 8px auto 0; border: 1px solid rgba(201,162,75,0.5); border-radius: 50%; color: var(--gold); background: var(--bg); box-shadow: 0 0 20px rgba(201,162,75,0.18); }
.review-timeline-end span { font-size: 1.1rem; text-shadow: 0 0 10px rgba(237,211,137,0.64); }
#stimmen { isolation: isolate; }
#stimmen::after {
  content: ''; position: absolute; z-index: 0; inset: 0;
  background: url("assets/reviews/guest-voices-hologram.png") center / cover no-repeat;
  opacity: 0.22; pointer-events: none; mix-blend-mode: screen;
}

/* ───────── google maps (click-to-load) ───────── */

.maps-card {
  margin-top: 40px; padding-top: 26px;
  border-top: 1px dotted var(--line);
  text-align: center;
}
.maps-card h3 {
  color: var(--gold); font-variant: small-caps; font-weight: 500;
  letter-spacing: 0.06em; margin-bottom: 14px; font-size: 1.25rem;
}
.maps-consent { font-size: 0.88rem; color: var(--cream-dim); margin-bottom: 16px; }
.maps-consent .d-en { padding-left: 0; }
.maps-card .order-btns { justify-content: center; }
.maps-card button.btn { font-family: var(--serif); cursor: pointer; background: transparent; }

/* ───────── feedback "Ihre Stimme" ───────── */

.fb-block {
  margin-top: 40px; padding-top: 30px;
  border-top: 1px dotted var(--line);
  max-width: 760px; margin-left: auto; margin-right: auto;
  text-align: left; color-scheme: dark;
}
.fb-block h3 {
  color: var(--gold); font-variant: small-caps; font-weight: 500;
  letter-spacing: 0.06em; margin-bottom: 14px; font-size: 1.25rem; text-align: center;
}
.fb-lead { color: var(--cream); margin-bottom: 26px; text-align: center; }
.fb-lead .d-en { padding-left: 0; }

.fb-rating {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  border: 1px dotted var(--line); padding: 14px 18px; margin-bottom: 26px;
}
.fb-rating-q { font-size: 0.9rem; color: var(--cream-dim); }
.fb-stars { display: inline-flex; gap: 4px; outline: none; }
.fb-stars:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.fb-star {
  background: none; border: 0; cursor: pointer; padding: 0 2px;
  font-size: 1.6rem; line-height: 1; color: rgba(201, 162, 75, 0.28);
  transition: color 0.15s ease, transform 0.15s ease;
}
.fb-star:hover { transform: translateY(-1px); }
.fb-star.on { color: var(--gold); }
.fb-rating-label { font-size: 0.85rem; color: var(--gold); font-style: italic; }
.fb-rating-label .d-en-inline { color: var(--cream-dim); }

.fb-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
.fb-opt { text-transform: none; letter-spacing: 0; font-style: italic; color: var(--cream-dim); }
.fb-msg-field { margin-bottom: 18px; }
.fb-msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.fb-msg-head label { margin-bottom: 0; }
.fb-expand {
  flex: 0 0 auto; padding: 5px 10px; border: 1px solid rgba(184,173,151,0.24);
  border-radius: 999px; background: transparent; color: var(--cream-dim);
  font: inherit; font-size: 0.78rem; letter-spacing: 0.04em; cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.fb-expand:hover, .fb-expand:focus-visible, .fb-expand.is-on {
  outline: none; color: var(--gold-soft); border-color: rgba(201,162,75,0.52);
  background: rgba(201,162,75,0.07); box-shadow: 0 0 14px rgba(201,162,75,0.1);
}
.fb-msg-field textarea {
  width: 100%; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--line);
  color: var(--cream); font-family: var(--serif); font-size: 1rem;
  border-radius: 10px; resize: vertical; min-height: 150px;
  transition: min-height 0.35s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.fb-msg-field.is-expanded textarea { min-height: 340px; }
.fb-msg-field textarea:focus { outline: 1px solid var(--gold); }
.fb-msg-field textarea::placeholder { color: rgba(184, 173, 151, 0.55); font-style: italic; }

.fb-check {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.85rem; color: var(--cream-dim); margin-bottom: 16px; cursor: pointer;
}
.fb-check input { margin-top: 4px; accent-color: var(--gold); flex: none; }
.fb-check .d-en { padding-left: 0; }

#fb-status { padding: 12px 16px; font-size: 0.95rem; margin: 12px 0; }
#fb-status .d-en { padding-left: 0; }

.fb-thanks { border: 1px solid var(--line); padding: 26px 24px; text-align: center; }
.fb-thanks-head { color: var(--gold); font-size: 1.25rem; margin-bottom: 12px; }
.fb-thanks .d-en { padding-left: 0; }
.fb-google-lead { margin-top: 18px; color: var(--cream); }
.fb-thanks .order-btns { justify-content: center; margin-top: 16px; }

.fb-google-note {
  margin-top: 22px; padding-top: 18px; border-top: 1px dotted var(--line);
  font-size: 0.9rem; color: var(--cream-dim); text-align: center;
}
.fb-google-note .d-en { padding-left: 0; }

.gmap {
  width: 100%; height: 380px; border: 1px solid var(--line);
  filter: grayscale(0.35) contrast(1.05);
  margin-bottom: 14px;
}

/* ───────── reservierung (widget đặt bàn) ───────── */

.res-page { max-width: var(--maxw); margin: 0 auto; padding: 34px 24px 90px; }

.crumbs {
  font-size: 0.88rem; color: var(--cream-dim);
  letter-spacing: 0.06em; margin-bottom: 46px;
}
.crumbs a { color: var(--cream-dim); }
.crumbs a:hover { color: var(--gold); }
.crumbs .sep { margin: 0 10px; color: var(--gold); opacity: 0.7; }

.res-head { text-align: center; margin-bottom: 40px; }
.res-head h1 {
  color: var(--gold); font-variant: small-caps; font-weight: 500;
  font-size: 2.4rem; letter-spacing: 0.08em; margin-bottom: 18px;
}
.res-head h1::after {
  content: ""; display: block; width: 60px; height: 1px;
  background: var(--gold); margin: 16px auto 0; opacity: 0.6;
}
.res-sub { font-size: 1.08rem; color: var(--cream); max-width: 640px; margin: 0 auto 6px; }
.res-sub-en { font-style: italic; color: var(--cream-dim); max-width: 640px; margin: 0 auto; }

.res-widget { max-width: 760px; margin: 34px auto 0; text-align: left; color-scheme: dark; }

.res-fields {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-bottom: 30px;
}
.res-field label {
  display: block; margin-bottom: 8px;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream-dim);
}
.res-field select, .res-field input {
  width: 100%; padding: 12px 14px;
  background: rgba(25, 20, 11, 0.42); border: 1px solid var(--line);
  color: var(--cream); font-family: var(--serif); font-size: 1rem;
  border-radius: 10px; appearance: none; -webkit-appearance: none;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.res-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a24b' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 36px;
}
.res-field input[type="date"] { min-height: 47px; }
.res-field select:focus, .res-field input:focus {
  outline: none; border-color: rgba(201,162,75,0.72);
  background: rgba(201,162,75,0.06);
  box-shadow: 0 0 0 3px rgba(201,162,75,0.08);
}

.res-slot-label {
  border-top: 1px solid var(--line);
  padding-top: 28px; margin-bottom: 4px;
  color: var(--cream);
}
.res-slot-label .d-en { padding-left: 0; }

.res-note {
  font-size: 0.92rem; color: var(--gold);
  border: 1px dotted var(--line); padding: 12px 16px; margin: 14px 0 4px;
}
.res-note .d-en { padding-left: 0; }
.res-note-hours { color: var(--cream-dim); font-size: 0.88em; }

.res-slots {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px; margin: 18px 0 26px;
}
.res-slot {
  padding: 13px 6px;
  background: rgba(25, 20, 11, 0.24); border: 1px solid var(--line);
  color: var(--cream); font-family: var(--serif); font-size: 0.98rem;
  letter-spacing: 0.06em; cursor: pointer; border-radius: 10px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.res-slot:hover { border-color: rgba(201,162,75,0.68); color: var(--gold-soft); background: rgba(201,162,75,0.06); transform: translateY(-1px); }
.res-slot.on {
  background: rgba(201, 162, 75, 0.16);
  border-color: var(--gold); color: var(--gold-soft);
  box-shadow: inset 0 1px 0 rgba(237,230,214,0.08), 0 8px 18px rgba(0,0,0,0.14);
}
.res-slot:active { transform: translateY(1px); }

.res-cta-row { text-align: center; margin: 10px 0 16px; }
.res-widget .btn.solid {
  min-width: 240px; padding: 13px 32px; border-radius: 14px;
  background: linear-gradient(145deg, var(--gold-soft), var(--gold));
  border-color: rgba(216,181,100,0.9);
  box-shadow: inset 0 1px 0 rgba(255,248,224,0.2), 0 12px 26px rgba(0,0,0,0.2);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease,
    transform 0.25s ease, box-shadow 0.25s ease;
}
.res-widget .btn.solid:hover:not(:disabled) {
  background: linear-gradient(145deg, #e2c37a, var(--gold-soft));
  border-color: #e2c37a; color: var(--bg);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,248,224,0.26), 0 16px 30px rgba(0,0,0,0.24);
}
.res-widget .btn.solid:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(255,248,224,0.14), 0 7px 14px rgba(0,0,0,0.2);
}
.btn.solid {
  background: var(--gold); color: var(--bg); border-color: var(--gold);
  cursor: pointer; font-family: var(--serif);
}
.btn.solid:hover:not(:disabled) { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--bg); }
.btn.solid:disabled {
  opacity: 0.45; cursor: not-allowed;
  background: transparent; color: var(--gold); border-style: dashed;
}

.res-hint, .res-alt { font-size: 0.85rem; color: var(--cream-dim); text-align: center; }
.res-hint { margin-bottom: 8px; }
.res-hint .d-en { padding-left: 0; }

/* bước 2 — Reservierung abschließen */

.res2-grid {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: 36px; align-items: start; text-align: left;
}
.res2-title {
  color: var(--gold); font-variant: small-caps; font-weight: 500;
  font-size: 1.5rem; letter-spacing: 0.06em; margin-bottom: 14px;
}
.res2-lead { margin-bottom: 22px; color: var(--cream); }
.res2-lead .d-en { padding-left: 0; }

.res2-fields {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; margin-bottom: 20px;
}

.res2-form .bv-privacy { margin: 4px 0 18px; }
.res-cta-row.left { text-align: left; }

.res2-gate-hint {
  font-size: 0.82rem; color: var(--cream-dim); margin: 10px 0 14px;
}
.res2-gate-hint b { color: var(--gold); }
.res2-gate-hint .d-en { padding-left: 0; }

#res-status { padding: 12px 16px; font-size: 0.95rem; margin: 12px 0; }
#res-status .d-en { padding-left: 0; }

.res2-form .res-alt { text-align: left; margin-top: 14px; }

.res2-side {
  border: 1px solid var(--line); background: var(--bg-soft);
  padding: 26px 24px;
}
.res2-side h4 {
  color: var(--gold); font-variant: small-caps; font-weight: 500;
  letter-spacing: 0.06em; font-size: 1.1rem; margin-bottom: 14px;
}
#res-summary {
  color: var(--cream); line-height: 1.7;
  padding-bottom: 18px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.res-link-btn {
  background: none; border: none; padding: 0;
  color: var(--cream); font-family: var(--serif); font-size: 0.95rem;
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.res-link-btn:hover { color: var(--gold); }
.res-link-btn .d-en-inline { font-size: 0.85em; }

/* ───────── bestellen ───────── */

.order-btns { display: flex; gap: 14px; flex-wrap: wrap; margin: 22px 0 14px; justify-content: flex-start; }
.band .order-btns { justify-content: center; }

.order-box { border: 1px solid var(--line); border-radius: 14px; padding: 28px 26px; background: var(--bg-soft); }

.delivery-block {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px dotted var(--line);
}
.delivery-head {
  color: var(--gold); font-variant: small-caps; letter-spacing: 0.07em;
  font-size: 1.15rem; margin-bottom: 8px;
}
.band .delivery-block { max-width: 640px; margin-left: auto; margin-right: auto; }
.band .delivery-head { text-align: center; }
.delivery-btn { font-size: 0.8rem; padding: 10px 22px; color: var(--cream) !important; }
#bestellen-home .order-btns .btn { border-radius: 14px; }
#bestellen-home .delivery-btn {
  border-radius: 12px;
  color: var(--cream) !important;
  background: rgba(25,20,11,0.42);
  transition: background-color 0.25s ease, border-color 0.25s ease,
    color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
#bestellen-home .delivery-btn:hover,
#bestellen-home .delivery-btn:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(201,162,75,0.58);
  background: rgba(201,162,75,0.08);
  color: var(--gold-soft) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

.order-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px 10px 18px;
  background: var(--bg-soft); color: var(--cream);
  border: 1px solid rgba(184,173,151,0.24); border-radius: 999px;
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.82rem;
  box-shadow: 0 12px 34px rgba(0,0,0,0.52);
  transition: background-color 0.25s ease, color 0.25s ease,
    border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.order-fab:hover { background: #211b11; color: var(--gold-soft); border-color: rgba(201,162,75,0.45); transform: translateY(-1px); box-shadow: 0 15px 38px rgba(0,0,0,0.58); }
.fab-label { white-space: nowrap; }
.fab-badge { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 50%; background: var(--gold); color: var(--bg); font-size: 0.72rem; letter-spacing: 0; }
.fab-mark { color: var(--gold); font-size: 0.82em; letter-spacing: 0; }
.motion-ready .order-fab { animation: fab-in 0.7s 0.25s ease-out both; }
.motion-ready .order-fab.cart-pop { animation: fab-pop 0.42s ease-out; }
@keyframes fab-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fab-pop { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.06); } }

/* ───────── giỏ đặt món ───────── */

.order-hint {
  max-width: 560px; margin: 18px auto 0;
  font-size: 0.92rem; color: var(--cream);
  border: 1px dotted var(--line); border-radius: 10px; padding: 12px 18px;
}
.order-hint .d-en { padding-left: 0; }
.hint-plus {
  display: inline-block; width: 22px; height: 22px; line-height: 20px;
  border: 1px solid var(--gold); border-radius: 50%;
  color: var(--gold); font-size: 0.8rem; text-align: center;
}

.add-btn {
  flex: 0 0 auto;
  width: 26px; height: 26px; margin-left: 10px;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--gold);
  font-size: 0.9rem; line-height: 1; cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.sig-price > .add-btn, .dish-line > .add-btn {
  position: relative;
  box-shadow: 0 0 0 1px rgba(201,162,75,0.08), 0 0 10px rgba(201,162,75,0.18);
  animation: plus-ring 6.5s ease-in-out infinite;
}
.sig-price > .add-btn::before, .dish-line > .add-btn::before {
  content: ''; position: absolute; z-index: -1; inset: -5px;
  border: 1px solid rgba(216,181,100,0.36); border-radius: 50%;
  opacity: 0.5; animation: plus-ring 6.5s ease-in-out infinite reverse;
  pointer-events: none;
}
@keyframes plus-ring {
  0%, 100% { opacity: 0.72; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.035); }
}
.add-btn:hover { background: var(--gold); color: var(--bg); }
.add-btn.added { background: var(--gold); color: var(--bg); transform: scale(1.25); }

/* nút ＋ topping Wahlweise dưới món (inklusive = +0 €, topping có giá = phụ thu) */
.dish-options {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch; gap: 8px 10px;
  margin-top: 8px; padding-left: calc(2em + 10px);
}
.opt-hint { grid-column: 1 / -1; font-size: 0.78rem; color: var(--cream-dim); letter-spacing: 0.05em; }
.add-btn.opt-btn {
  width: auto; height: auto; margin-left: 0;
  width: 100%; min-height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; padding: 5px 10px;
  font-size: 0.82rem; letter-spacing: 0.03em;
  line-height: 1.25; text-align: center;
}
.opt-btn .opt-vegetarian-mark {
  width: 1em; height: 1.1em; margin: 0 3px 0 0;
  font-size: 0.82em; vertical-align: -0.18em;
}
.opt-btn .opt-vegetarian-mark .leaf-icon {
  width: 0.64em; height: 0.88em;
}
.add-btn.opt-btn.added { transform: scale(1.08); }
.opt-btn .opt-price { color: var(--cream-dim); font-size: 0.9em; }
.opt-btn:hover .opt-price, .opt-btn.added .opt-price { color: inherit; }

#bv-overlay {
  display: none; position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,0.65);
  align-items: flex-end; justify-content: center;
}

#bv-panel {
  width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-bottom: none; border-radius: 18px 18px 0 0; padding: 26px 24px 20px;
  box-shadow: 0 -18px 52px rgba(0,0,0,0.38);
  animation: bv-sheet-in 0.3s ease-out both;
}
@keyframes bv-sheet-in { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
#bv-panel .group-title { font-size: 1.3rem; }

.bv-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dotted rgba(201,162,75,0.25); }
.bv-qty { display: flex; align-items: center; gap: 8px; }
.bv-qty button {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--gold);
  cursor: pointer; line-height: 1;
}
.bv-qty { gap: 6px; }
.bv-qty b { min-width: 1.2em; text-align: center; color: var(--cream); }
.bv-name { flex: 1; font-size: 0.95rem; }
.bv-price { color: var(--gold); white-space: nowrap; }
.bv-empty { color: var(--cream-dim); font-size: 0.95rem; padding: 10px 0; }

.bv-total { margin: 14px 0 16px; color: var(--cream); }
.bv-total b { color: var(--gold); }
.bv-hint { display: block; font-size: 0.8rem; color: var(--cream-dim); font-style: italic; }

.bv-pickup {
  margin: 4px 0 12px; font-size: 0.88rem;
  color: var(--gold); letter-spacing: 0.06em;
}
.bv-pickup .d-en { padding-left: 0; }

#bv-panel input, #bv-panel textarea {
  width: 100%; margin-bottom: 10px; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--cream); font-family: var(--serif); font-size: 0.95rem;
}
#bv-panel input:focus, #bv-panel textarea:focus { outline: 1px solid var(--gold); }

.bv-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.bv-actions .btn { min-height: 44px; }
.bv-direct-hint { font-size: 0.82rem; color: var(--cream-dim); margin-bottom: 10px; }
.bv-privacy { font-size: 0.8rem; color: var(--cream-dim); margin-bottom: 10px; }
.bv-privacy .d-en { padding-left: 0; }
.privacy-pledge { border-left: 2px solid var(--gold); padding-left: 16px; margin-bottom: 20px !important; }
.privacy-pledge .d-en { padding-left: 0; }
.bv-direct-hint .d-en { padding-left: 0; }
.bv-direct-hint b { color: var(--gold); }
#bv-status { padding: 10px 14px; font-size: 0.92rem; margin-bottom: 10px; border-radius: 8px; }
.bv-ok { border: 1px solid var(--gold); color: var(--gold); }
.bv-err { border: 1px solid #a05050; color: #d89090; }
.bv-thanks { margin: 14px 0 4px; overflow: hidden; border: 1px solid rgba(201,162,75,0.42); border-radius: 14px; background: #0f1216; box-shadow: 0 14px 34px rgba(0,0,0,0.26); }
.bv-thanks img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
#bv-panel button:disabled { opacity: 0.45; cursor: not-allowed; border-style: dashed; }

.bv-foot { display: flex; justify-content: space-between; }
.bv-foot button {
  background: none; border: none; color: var(--cream-dim);
  font-family: var(--serif); font-size: 0.85rem; cursor: pointer;
  text-decoration: underline;
}
.bv-foot button:hover { color: var(--gold); }

@media (min-width: 681px) {
  #bv-overlay { align-items: stretch; justify-content: flex-end; }
  #bv-panel {
    width: min(460px, 100%); max-height: none; height: 100%;
    border-top: none; border-right: none; border-bottom: none;
    border-radius: 18px 0 0 18px;
    animation-name: bv-drawer-in;
  }
  @keyframes bv-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
}

/* ───────── legal ───────── */

.legal { max-width: 700px; margin: 0 auto; padding: 60px 24px 90px; }
.legal h1 { margin-bottom: 30px; hyphens: auto; overflow-wrap: break-word; }
.legal h2 { color: var(--gold); font-weight: 500; font-size: 1.15rem; margin: 26px 0 8px; font-variant: small-caps; }
.legal p { margin-bottom: 12px; font-size: 0.95rem; }

/* ───────── instagram icon ───────── */

.ig-icon {
  width: 11px; height: 11px;
  vertical-align: -1px; margin-right: 5px;
  display: inline-block;
  color: #e1306c;            /* đỏ Instagram */
  stroke-width: 2.4;
}
.ig-link { white-space: nowrap; }

/* ───────── footer ───────── */

.site-footer {
  border-top: 1px solid var(--line);
  text-align: center; padding: 44px 24px 50px;
  font-size: 0.9rem; color: var(--cream-dim);
}
.foot-brand { color: var(--gold); font-variant: small-caps; font-size: 1.15rem; letter-spacing: 0.06em; margin-bottom: 10px; }
.foot-tag { font-style: italic; font-variant: normal; font-size: 0.85em; color: var(--cream-dim); }
.site-footer p { margin-bottom: 6px; }
.foot-legal { margin-top: 14px; }
.foot-credit {
  margin-top: 16px; font-size: 0.75rem;
  color: rgba(184, 173, 151, 0.55);
  letter-spacing: 0.08em; font-style: italic;
}

/* ───────── Menu 中文 / 한국어 (chị chốt 03.08.2026) ─────────
   Font CJK lấy từ CHÍNH MÁY KHÁCH — không tải Google Fonts hay bất kỳ nguồn
   ngoài nào. Đây không phải chuyện thẩm mỹ mà là giữ đúng lời hứa trong
   Datenschutzerklärung ("keine externen Schriftarten") và giữ trang nhẹ.
   Chữ Latin (tên món, giá) vẫn ăn font serif thương hiệu vì --serif đứng
   TRƯỚC trong danh sách — trình duyệt chỉ rơi xuống font CJK ở đúng những
   ký tự mà Palatino không có.                                              */

html[lang="zh-Hans"] body {
  font-family: var(--serif), "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC",
    STSong, SimSun, "PingFang SC", "Microsoft YaHei", sans-serif;
}
html[lang="ko"] body {
  font-family: var(--serif), "Nanum Myeongjo", AppleMyungjo, "Noto Serif KR",
    Batang, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

/* CJK không có khoảng hở tự nhiên giữa chữ như Latin: giãn dòng rộng hơn một
   chút, và bỏ letter-spacing (giãn chữ kiểu Latin làm chữ Hán/Hàn rời rạc) */
html[lang="zh-Hans"] .d-loc, html[lang="ko"] .d-loc { line-height: 1.75; }
html[lang="zh-Hans"] .dname-loc, html[lang="ko"] .dname-loc { letter-spacing: 0; }

/* Tên món dịch — đi SAU tên Latin, nhạt hơn một bậc để tên gốc vẫn dẫn mắt */
.dname-loc { font-size: 0.95em; color: var(--gold-soft); opacity: 0.92; }

/* Mô tả món trên trang dịch — cùng cỡ với .d-de của bản Đức */
.d-loc {
  font-size: 0.93rem; color: var(--cream); margin-top: 3px;
  padding-left: calc(2em + 10px);
}
.sig-card .d-loc, .intro + .dish .d-loc { padding-left: 0; }

/* Dòng "giá & allergen theo menu tiếng Đức" dưới tiêu đề trang */
.lang-note { font-size: 0.85rem; color: var(--cream-dim); font-style: italic; }

/* ───────── nút chuyển ngôn ngữ trên thanh nav ───────── */

.lang-switch { display: inline-flex; gap: 2px; margin-left: 22px; vertical-align: middle; }

.site-header nav .lang-switch a {
  margin-left: 0;
  padding: 3px 8px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: none;
  border: 1px solid transparent;
  border-radius: 2px;
}
.site-header nav .lang-switch a:hover { border-color: var(--line); }
.site-header nav .lang-switch a.on {
  color: var(--gold);
  border-color: var(--line);
  background: rgba(201, 162, 75, 0.08);
}

/* ───────── mobile ───────── */

@media (max-width: 560px) {
  body { font-size: 16px; }
  /* thanh nhom mon mobile cao 70px -> noi anchor phai lui theo, khong de nav che tieu de nhom */
  .menu-signatures, .menu-group, #bestellen, #allergene { scroll-margin-top: calc(var(--header-h, 57px) + 82px); }
  /* huy hieu hologram — ban dien thoai: nho lai, quang sang thu gon */
  .group-title { padding-right: 58px; }
  .group-title::after {
    width: 44px; height: 44px; right: 0;
    box-shadow:
      0 0 8px rgba(201,162,75,0.32),
      0 0 16px rgba(201,162,75,0.21),
      0 0 26px rgba(143,199,196,0.13),
      inset 0 0 9px rgba(201,162,75,0.11);
  }
  .group-title::before { height: 2.3em; left: -12px; right: 2px; }
  .res-page { padding: 28px 18px 76px; }
  .res-head { margin-bottom: 34px; }
  .res-head h1 { font-size: 2rem; letter-spacing: 0.1em; }
  .res-sub, .res-sub-en { font-size: 0.98rem; line-height: 1.65; }
  .res-widget { margin-top: 26px; }
  .res-fields { margin-bottom: 28px; }
  .res-field label { margin-bottom: 9px; }
  .res-field select, .res-field input { min-height: 48px; padding: 13px 14px; }
  .res-slot-label { padding-top: 25px; line-height: 1.6; }
  .res-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 28px; }
  .res-slot { min-height: 48px; padding: 12px 4px; }
  .res-cta-row { margin: 18px 0 20px; }
  .res-widget .btn.solid { width: 100%; min-width: 0; padding: 14px 22px; }
  .site-header {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 14px;
  }
  .brand-logo { width: 120px; }
  .hero-logo { width: min(500px, 84%); }
  #bv-panel { max-height: 88vh; padding: 24px 18px 18px; }
  .bv-row { gap: 8px; padding: 10px 0; }
  .bv-name { font-size: 0.9rem; }
  .bv-price { font-size: 0.9rem; }
  .bv-actions { gap: 8px; }
  .bv-actions .btn { flex: 1 1 100%; }
  .dish-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-left: calc(2em + 10px); }
  .add-btn.opt-btn { min-height: 40px; padding: 5px 7px; font-size: 0.76rem; white-space: normal; }
  .desktop-nav { display: none; }
  .mobile-tools { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
  .mobile-tools details { position: relative; }
  .mobile-tools summary {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 34px; list-style: none; cursor: pointer; user-select: none;
    color: var(--cream-dim); border: 1px solid var(--line); border-radius: 999px;
    padding: 5px 10px; font-size: 0.72rem; letter-spacing: 0.08em;
  }
  .mobile-tools summary::-webkit-details-marker { display: none; }
  .mobile-languages[open] > summary, .mobile-menu[open] > summary { color: var(--gold); border-color: rgba(201,162,75,0.55); }
  .mobile-languages > summary::after { content: "⌄"; margin-left: 5px; font-size: 0.9rem; }
  .lang-globe { margin-right: 5px; opacity: 0.8; flex: none; }
  .mobile-language-panel, .mobile-menu-panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 70;
    display: flex; flex-direction: column; min-width: 130px; padding: 8px;
    background: rgba(26,22,16,0.98); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 18px 38px rgba(0,0,0,0.46); backdrop-filter: blur(12px);
  }
  .mobile-language-panel a, .mobile-menu-panel a {
    display: block; padding: 10px 12px; color: var(--cream-dim); font-size: 0.84rem;
    white-space: nowrap; border-radius: 6px;
  }
  .mobile-language-panel a:hover, .mobile-menu-panel a:hover,
  .mobile-language-panel a.on, .mobile-menu-panel a.on { color: var(--gold); background: rgba(201,162,75,0.08); }
  .mobile-menu summary { width: 36px; padding: 5px; }
  .menu-bars { display: inline-flex; flex-direction: column; gap: 4px; }
  .menu-bars i { display: block; width: 17px; height: 1px; background: currentColor; transition: transform 0.25s ease, opacity 0.25s ease; }
  .mobile-menu[open] .menu-bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .mobile-menu[open] .menu-bars i:nth-child(2) { opacity: 0; }
  .mobile-menu[open] .menu-bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  .mobile-menu-panel { min-width: 190px; }
  .mobile-menu-panel a { font-size: 0.9rem; }
  .site-header nav {
    display: none;
  }
  .hero-img { max-height: 60vh; min-height: 340px; }
  .band {
    max-width: calc(100% - 24px); margin: 18px auto;
    padding: 50px 16px; border-radius: 18px;
  }
  #stimmen::after {
    background-size: 100% auto;
    background-position: center bottom;
    opacity: 0.18;
  }
  .philosophy-band { min-height: 0; padding-top: 64px; padding-bottom: 64px; }
  .philosophy-content { max-width: none; margin: 0; }
  .phil-values { gap: 28px; margin-top: 38px; padding-left: 24px; }
  .phil-values::before { left: 0; transform: none; }
  .phil-node, .phil-node-left, .phil-node-right { align-self: stretch; width: 100%; padding: 0 0 0 30px; justify-content: flex-start; }
  .phil-node-left::after, .phil-node-right::after { left: 0; right: auto; width: 30px; transform: none; }
  .phil-node-marker, .phil-node-left .phil-node-marker, .phil-node-right .phil-node-marker { left: -27px; right: auto; top: 18px; }
  .phil-value { width: 100%; padding: 12px; }
  .phil-value-image { width: 100%; max-width: 260px; }
  .d-de, .d-en, .d-loc { padding-left: 0; }
  .review-timeline { gap: 22px; margin-top: 34px; padding-left: 28px; }
  .review-timeline::before { left: 8px; transform: none; }
  .review-card, .review-node-left, .review-node-right { align-self: stretch; width: 100%; padding: 22px 18px; border-radius: 16px; }
  .review-node-left .review-marker, .review-node-right .review-marker { left: -43px; right: auto; top: 20px; width: 38px; height: 38px; font-size: 1rem; }
  .review-timeline-end { width: 46px; height: 46px; margin-left: -12px; }
  .vegetarian-mark { width: 1.5em; height: 1.55em; margin-left: 9px; font-size: 0.96em; }
  .vegetarian-mark .leaf-icon { width: 0.88em; height: 1.2em; filter: drop-shadow(0 0 4px rgba(167,189,120,0.48)) drop-shadow(0 0 8px rgba(201,162,75,0.2)); }
  .opt-btn .opt-vegetarian-mark { width: 1.2em; height: 1.3em; font-size: 0.92em; }
  .opt-btn .opt-vegetarian-mark .leaf-icon { width: 0.78em; height: 1.02em; }
  .dish-options { padding-left: 0; }
  .lang-switch { margin-left: 11px; }
  .site-header nav .lang-switch a { margin-left: 0; padding: 2px 6px; font-size: 0.74rem; letter-spacing: 0.02em; }
  .res-fields { grid-template-columns: 1fr; gap: 16px; }
  .res-slots { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .res2-grid { grid-template-columns: 1fr; gap: 24px; }
  .res2-grid .res2-side { order: -1; }
  .res2-fields { grid-template-columns: 1fr; gap: 16px; }
  .fb-fields { grid-template-columns: 1fr; gap: 16px; }
  .fb-rating { flex-direction: column; align-items: flex-start; }
  .sig-card:hover { transform: none; box-shadow: none; }
}

/* Phải đặt sau .add-btn: nút trong modal dùng chung class để giỏ hàng nhận click,
   nhưng phải giữ hình viên thuốc thay vì kích thước nút cộng tròn cạnh món. */
.signature-dialog .signature-add.add-btn {
  width: auto; height: auto; margin-left: 0; border-radius: 999px;
  padding: 12px 20px; line-height: 1.2;
}

@media (max-width: 680px) {
  .signature-dialog .signature-add.add-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}