/* Design B: dark warm menu, thumbnails, bestseller, WhatsApp order buttons */
.design-toggle { left: calc(1rem + 8.4rem); }
.design-toggle[aria-pressed="true"] .dot { background: #e8b25a; }
#b-root { display: none; }
html[data-design="b"] #b-root { display: block; }
html[data-design="b"] main > .menu-section { display: none; }

html[data-design="b"] {
  --b-bg: #0c1026; --b-bg2: #121836; --b-cream: #f3e9d8; --b-muted: rgba(243,233,216,.64);
  --b-gold: #e8b25a; --b-red: #c62230; --b-line: rgba(243,233,216,.1);
}
#b-root {
  color: var(--b-cream);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(232,120,60,.16), transparent 60%),
    radial-gradient(900px 500px at 0% 40%, rgba(217,30,46,.10), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--b-bg) 0%, var(--b-bg2) 50%, var(--b-bg) 100%);
  overflow: hidden;
}
html[data-design="b"] .menu-jump { background: rgba(12,16,38,.96); border-bottom: 1px solid var(--b-line); }
html[data-design="b"] .menu-jump a { color: var(--b-muted); }
html[data-design="b"] .menu-jump a:hover, html[data-design="b"] .menu-jump a.is-active { color: var(--b-cream); }

.b-wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 3rem); }
.b-kicker { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--b-gold); font-weight: 600; margin: 0 0 .7rem; }
#b-root h2 { font-family: var(--display); font-weight: 500; font-style: italic; font-size: clamp(2.3rem, 6vw, 3.8rem); line-height: 1.02; margin: 0; color: var(--b-cream); }
.b-orn { display: flex; align-items: center; gap: .9rem; color: var(--b-gold); margin: 1.4rem 0 2.4rem; max-width: 320px; }
.b-orn span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,178,90,.6), transparent); }

/* Bestseller */
.b-best { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 4.5rem); }
.b-best-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .b-best-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .b-best-grid { grid-template-columns: repeat(4, 1fr); } }
.b-card { background: rgba(255,255,255,.035); border: 1px solid var(--b-line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, border-color .25s; }
.b-card:hover { transform: translateY(-4px); border-color: rgba(232,178,90,.35); }
.b-card-img { position: relative; aspect-ratio: 4/3; background: #1a2045; }
.b-card-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #1b2250, #2a1a2e); }
body.demo-photos-on .b-card-img::before { background: var(--img) center/cover; }
.b-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(12,16,38,.85)); }
.b-rank { position: absolute; z-index: 1; left: 1rem; top: .9rem; font-family: var(--display); font-style: italic; font-size: 1.6rem; color: var(--b-cream); }
.b-card-body { padding: 1.2rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.b-card-body h3 { margin: 0; font-family: var(--display); font-size: 1.55rem; font-weight: 600; line-height: 1.1; }
.b-card-body p { margin: 0; color: var(--b-muted); font-size: .9rem; line-height: 1.5; flex: 1; }
.b-strip { display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: center; margin: 2.4rem 0 0; padding: 1rem; border-top: 1px solid var(--b-line); border-bottom: 1px solid var(--b-line); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--b-muted); }
.b-strip span::before { content: ""; display: inline-block; width: 5px; height: 5px; transform: rotate(45deg); background: var(--b-gold); margin-right: .7rem; vertical-align: middle; }

/* Shared */
.b-dish-top { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.b-price { color: var(--b-gold); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: .98rem; }
.b-order { align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .8rem; border-radius: 999px; border: 1px solid rgba(238,58,69,.75); color: var(--b-cream); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background .2s, border-color .2s; }
.b-order::after { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.b-order:hover { background: var(--b-red); border-color: var(--b-red); }
.b-order--lg { background: var(--b-red); border-color: var(--b-red); padding: .62rem 1.1rem; margin-top: .4rem; }
.b-order--lg:hover { background: #dc2b39; }

/* Menu sections */
.b-sec { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--b-line); }
@media (min-width: 980px) {
  .b-sec { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .b-sec--flip .b-sec-visual { order: 2; }
  .b-sec-visual { position: sticky; top: calc(var(--header-h) + 52px); height: calc(100vh - var(--header-h) - 52px); max-height: 820px; }
}
.b-sec-visual { position: relative; min-height: 300px; overflow: hidden; display: flex; align-items: flex-end; }
.b-sec-img { position: absolute; inset: 0; background: linear-gradient(140deg, #1b2250, #301a28); }
body.demo-photos-on .b-sec-img { background: var(--img) center/cover; }
.b-sec-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,16,38,.1) 30%, rgba(12,16,38,.92)); }
.b-sec-cap { position: relative; padding: clamp(1.4rem, 4vw, 3rem); }
.b-sec-cap > p:last-child { color: var(--b-muted); margin: .8rem 0 0; max-width: 36ch; }
.b-sec-list { padding: clamp(1.6rem, 4vw, 3.5rem) clamp(1.1rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem); }
.b-sub { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--b-gold); font-weight: 600; margin: 2rem 0 .6rem; }
.b-sub:first-child { margin-top: 0; }
.b-sub:empty { display: none; }
.b-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .2rem 2rem; }
@media (min-width: 1280px) { .b-list { grid-template-columns: 1fr 1fr; } }
.b-dish { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--b-line); min-width: 0; }
.b-dish-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.b-dish h4 { margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--b-cream); overflow-wrap: anywhere; }
.b-note { margin: 0; color: var(--b-muted); font-size: .86rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.b-dish .b-order { margin-top: .25rem; }
.b-thumb { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 14px; position: relative; overflow: hidden; background: linear-gradient(140deg, #1d2452, #2b1b30); border: 1px solid var(--b-line); }
body.demo-photos-on .b-thumb:not(.b-thumb--none) { background: var(--img) center/cover; }
body.demo-photos-on .b-thumb:not(.b-thumb--none) .b-ph { display: none; }
.b-ph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-style: italic; font-size: 1.9rem; color: rgba(232,178,90,.55); }
.b-tag { font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .16rem .5rem; border-radius: 999px; border: 1px solid; line-height: 1.4; }
.b-tag--scharf { color: #ff7a6b; border-color: rgba(255,122,107,.45); }
.b-tag--vegetarisch { color: #9fd49a; border-color: rgba(159,212,154,.4); }
.b-tag--beliebt { color: var(--b-gold); border-color: rgba(232,178,90,.45); }
@media (max-width: 420px) { .b-thumb { flex-basis: 64px; width: 64px; height: 64px; } }
#b-root h3, #b-root h4 { color: var(--b-cream); }
html[data-design="b"] { scroll-behavior: auto; }
@media (min-width: 980px) { .b-sec--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.b-dish h4 { overflow-wrap: break-word; hyphens: manual; }
@media (min-width: 980px) { .b-sec-visual { position: relative; top: auto; height: auto; max-height: none; min-height: 560px; } }