/* Public site styles — consume tokens.css. No colours/sizes hardcoded here that
   belong in tokens. Photo-resilient, type-led, calm. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.65;
    transition: background var(--t), color var(--t);
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: var(--link); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.wrap--narrow { max-width: var(--wrap-narrow); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: var(--surface); padding: 10px 14px; border-radius: 8px; z-index: 100; }

/* Georgian second-voice label */
.ka { font-family: var(--serif); color: var(--gold); font-size: .95em; letter-spacing: .02em; }
.eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; color: var(--muted); font-family: var(--sans); font-weight: 600; }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(1.3) blur(8px);
    border-bottom: 1px solid var(--line-soft);
}
.site-header__bar { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); line-height: 1.05; }
.brand__mark { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 10px; background: #F9F2E6; padding: 3px; box-shadow: var(--shadow-sm); }
.brand__text { display: inline-flex; flex-direction: column; }
.brand__name { font-family: var(--serif); font-size: 1.15rem; }
.brand__ka { font-size: .74rem; color: var(--gold); letter-spacing: .04em; }
@media (max-width: 400px) { .brand__mark { width: 36px; height: 36px; } .brand__name { font-size: 1.02rem; } }
.footer-mark { width: 58px; height: 58px; border-radius: 11px; background: #F9F2E6; padding: 4px; display: block; margin-bottom: 12px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
/* Direct children only. `.nav a` also matched the address, phone, mail, social and CTA links
   inside the mobile panel and outranked their own rules on specificity, so each of them wore
   menu-item padding, size and opacity it was never meant to have. */
.nav > a { text-decoration: none; color: var(--text); font-size: .92rem; padding: 8px 12px; border-radius: 8px; opacity: .85; }
.nav > a:hover, .nav > a[aria-current="page"] { opacity: 1; color: var(--accent); }
.hcontrols { display: flex; gap: 4px; align-items: center; }
.iconbtn { background: transparent; border: 1px solid var(--line); color: var(--text); border-radius: 8px; min-width: 38px; height: 38px; cursor: pointer; font: inherit; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; }
.iconbtn:hover { border-color: var(--accent); color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 6px; }
.header-login { flex: 0 0 auto; text-decoration: none; }
.navtoggle { display: none; }
.nav__head, .nav__foot, .nav__contact { display: none; }   /* only inside the mobile off-canvas panel */
.navtoggle__bars { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 18px; }
.navtoggle__bars span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; }

/* Mobile nav — premium off-canvas panel */
@media (max-width: 860px) {
    .navtoggle { display: inline-flex; }
    .header-actions { margin-left: auto; }
    /* backdrop-filter on the header creates a containing block that would trap the
       position:fixed off-canvas panel to the header's height — drop it on mobile so
       the panel spans the full viewport; give the header a solid background instead. */
    .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
    .nav {
        position: fixed; inset: 0 0 0 auto;
        width: min(86vw, 340px);
        background: var(--surface); color: var(--text);
        flex-direction: column; gap: 0; padding: 0; margin: 0;
        transform: translateX(100%); transition: transform var(--t);
        box-shadow: -18px 0 50px rgba(20, 16, 12, .28);
        border-left: 1px solid var(--line-soft);
        overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .nav.is-open { transform: translateX(0); }
    .nav__head {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 17px 20px; border-bottom: 1px solid var(--line-soft);
        position: sticky; top: 0; background: var(--surface); z-index: 1;
    }
    .nav__brand { display: flex; flex-direction: column; font-family: var(--serif); font-size: 1.02rem; line-height: 1.2; color: var(--text); }
    .nav__brand .ka { font-size: .72rem; }
    .nav__close {
        flex: 0 0 auto; width: 38px; height: 38px; border-radius: 8px; cursor: pointer;
        background: transparent; border: 1px solid var(--line); color: var(--text);
        font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
    }
    .nav__close:hover { border-color: var(--accent); color: var(--accent); }
    .nav > a {
        display: flex; align-items: center; justify-content: space-between;
        padding: 15px 20px; font-size: 1.06rem; font-family: var(--serif);
        color: var(--text); opacity: 1; border-radius: 0; border-bottom: 1px solid var(--line-soft);
    }
    /* The contact block brings its own top rule; without this the two stack into a double line. */
    .nav > a:last-of-type { border-bottom: 0; }
    .nav > a[aria-current="page"] { color: var(--accent); }
    .nav > a[aria-current="page"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }
    .nav__foot { display: flex; gap: 10px; padding: 18px 20px; margin-top: auto; border-top: 1px solid var(--line-soft); }
    .nav__cta {
        flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
        padding: 12px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .92rem;
        border: 1px solid var(--line); color: var(--text); font-family: var(--sans);
    }
    .nav__cta:hover { border-color: var(--accent); color: var(--accent); }
    /* contact + social inside the off-canvas panel */
    .nav__contact { display: block; padding: 16px 20px; border-top: 1px solid var(--line-soft); }
    .nav__addr { font-family: var(--serif); color: var(--muted); margin: 0 0 10px; line-height: 1.5; font-size: .96rem; }
    /* Grid rather than flex: the mail address is long enough to wrap in a 340px panel, and a
       second flex line would slide back under the icon. A fixed icon column keeps every
       wrapped line aligned with the first. */
    .nav__cline {
        display: grid; grid-template-columns: 16px 1fr; align-items: start; gap: 10px;
        padding: 6px 0; color: var(--text); text-decoration: none;
        font-family: var(--sans); font-size: .93rem; line-height: 1.45; overflow-wrap: anywhere;
    }
    .nav__cline svg { color: var(--gold); margin-top: 2px; }
    .nav__cline:hover { color: var(--accent); }
    .nav__social { display: flex; gap: 10px; margin-top: 14px; }
    .nav__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); }
    .nav__social a:hover { color: var(--accent); border-color: var(--accent); }
    /* An SVG is a flex item with no intrinsic width to defend, so it shrinks to 0 and the
       button renders as an empty ring. The phone and mail icons sit in a grid column and are
       safe; these two did not, which is exactly why only they were blank. */
    .nav__social a svg { flex: 0 0 auto; }
    .nav-backdrop {
        position: fixed; inset: 0; background: rgba(20, 16, 12, .5);
        opacity: 0; pointer-events: none; transition: opacity var(--t); z-index: 39;
        -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    }
    .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }
}

/* ---------- Announcement ---------- */
.announce { background: var(--accent); color: #fff; text-align: center; font-size: .9rem; padding: 8px 16px; }
.announce a { color: #fff; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(48px, 9vw, 104px) 0 clamp(40px, 7vw, 88px); }
.hero__ka-watermark {
    position: absolute; right: -2%; top: 50%; transform: translateY(-50%);
    font-family: var(--serif); font-size: clamp(120px, 34vw, 460px); line-height: .8;
    color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--gold) 42%, transparent);
    opacity: .5; pointer-events: none; white-space: nowrap; z-index: 0; user-select: none;
}
.hero__inner { position: relative; z-index: 1; max-width: 720px; }
.hero__title { font-size: clamp(2.3rem, 6.2vw, 4.1rem); margin: .18em 0 .35em; }
.hero__intro { font-size: clamp(1.05rem, 2.3vw, 1.3rem); color: var(--muted); max-width: 34em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Photographic hero (homepage): a Georgian supra — the Adjaruli Khachapuri and a
   full table. Directional scrim (dark on the text side, lighter over the food on the
   right) keeps type legible while the dish stays the star. Content is left-aligned
   & bottom, not the banned centred-over-dimmed-photo cliché. */
.hero--photo {
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: clamp(460px, 74vh, 640px);
    color: #FBF8F2;
    padding-bottom: clamp(30px, 5vw, 58px);
    background:
        linear-gradient(90deg, rgba(19, 12, 7, .88) 0%, rgba(19, 12, 7, .64) 36%, rgba(19, 12, 7, .24) 64%, rgba(19, 12, 7, .04) 100%),
        linear-gradient(0deg, rgba(19, 12, 7, .74) 0%, rgba(19, 12, 7, .22) 40%, rgba(19, 12, 7, 0) 66%),
        #1c1610 url("/assets/img/hero-supra.webp") center / cover no-repeat;
}
.hero--photo .hero__inner { max-width: 640px; }
.hero--photo .hero__title { color: #FBF8F2; text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
.hero--photo .hero__intro { color: rgba(251, 248, 242, .94); text-shadow: 0 1px 12px rgba(0, 0, 0, .40); }
.hero--photo .eyebrow { color: #F1D79E; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
.hero--photo .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .6); }
.hero--photo .btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .14); }
@media (max-width: 700px) {
    .hero--photo {
        background-image:
            linear-gradient(0deg, rgba(19, 12, 7, .86) 0%, rgba(19, 12, 7, .42) 44%, rgba(19, 12, 7, .08) 74%),
            url("/assets/img/hero-supra-sm.webp");
        background-size: cover; background-position: center;
    }
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font: inherit; font-size: .98rem; font-weight: 600; cursor: pointer; padding: 13px 24px; border-radius: 999px; border: 1px solid transparent; transition: transform var(--t), background var(--t), border-color var(--t), color var(--t); }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-strong); }
.btn--ghost { border-color: var(--line); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Sections ---------- */
section { padding: clamp(44px, 7vw, 88px) 0; }
.section-head { max-width: 40em; margin-bottom: 34px; }
.section-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.section--surface { background: var(--surface); }

/* qvevri-curve divider (soft arc echoing the buried clay vessel) */
.qvevri-divider { height: 40px; background: radial-gradient(120% 100% at 50% 0, transparent 69%, var(--surface) 70%); }
.qvevri-divider--up { background: radial-gradient(120% 100% at 50% 100%, transparent 69%, var(--surface) 70%); }

/* ---------- Supra dish grid ---------- */
.supra { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.dishcard { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 20px; transition: transform var(--t), box-shadow var(--t); }
.section--surface .dishcard { background: var(--bg); }
.dishcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.dishcard__ka { color: var(--gold); font-family: var(--serif); font-size: .85rem; }
.dishcard__name { font-family: var(--serif); font-size: 1.25rem; margin: 2px 0 6px; }
.dishcard__desc { color: var(--muted); font-size: .92rem; margin: 0 0 12px; }
.dishcard__price { font-family: var(--serif); font-weight: 600; color: var(--accent); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.badge { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.badge--vegan { background: color-mix(in srgb, var(--enamel) 16%, transparent); color: var(--enamel); }
.badge--vegetarian { background: transparent; color: var(--enamel); border: 1px solid color-mix(in srgb, var(--enamel) 42%, transparent); }
.badge--spicy { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }

/* ---------- Feature bands ---------- */
.lede { font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-family: var(--serif); line-height: 1.4; max-width: 20em; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 60px); align-items: center; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

/* ---------- Info / contact ---------- */
.hours-list { list-style: none; padding: 0; margin: 0; }
.hours-list li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.hours-list b { font-weight: 600; }
/* "Feiertage: geöffnet" highlighted so guests notice we open on public holidays */
.hours-list li.hours-open span, .footer-hours li.hours-open span { color: var(--enamel); font-weight: 700; }
.site-footer .footer-hours li.hours-open span { color: #8FC79E; }
.feiertag-note { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; font-weight: 600; color: var(--enamel); background: color-mix(in srgb, var(--enamel) 10%, transparent); border: 1px solid color-mix(in srgb, var(--enamel) 32%, transparent); border-radius: 999px; padding: 8px 16px; font-size: .95rem; }
.feiertag-note span { font-weight: 800; }

/* ---------- Homepage location map (static, DSGVO-safe — opens Google only on click) ---------- */
.map-card { position: relative; display: block; margin-top: 36px; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line-soft); text-decoration: none; }
.map-card__img { width: 100%; height: auto; display: block; aspect-ratio: 2 / 1; object-fit: cover; }
.map-card__overlay { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: linear-gradient(0deg, rgba(19, 12, 7, .86), rgba(19, 12, 7, .12) 70%, transparent); color: #fff; }
.map-card__addr { font-family: var(--serif); font-size: 1.08rem; }
.map-card__btn { flex: 0 0 auto; font-weight: 600; font-size: .9rem; background: var(--accent); color: #fff; padding: 9px 17px; border-radius: 999px; transition: background var(--t), transform var(--t); }
.map-card:hover .map-card__btn { background: var(--accent-strong); transform: translateY(-1px); }
.map-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.map-attrib { font-size: .74rem; color: var(--muted); margin: 10px 0 0; }

/* ---------- Ratgeber / long-form article ---------- */
.article-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(18px, 3vw, 30px); }
.article-hero__title { font-size: clamp(2rem, 4.6vw, 3.1rem); margin: .12em 0 .3em; }
.article-hero__lead { font-size: clamp(1.1rem, 2.2vw, 1.35rem); color: var(--muted); font-family: var(--serif); line-height: 1.5; max-width: 34em; }
.breadcrumb { font-size: .82rem; color: var(--muted); margin: 8px 0 22px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current] { color: var(--text); }
.article { padding: clamp(28px, 4vw, 52px) 0 clamp(40px, 6vw, 72px); }
.article__title { font-size: clamp(1.9rem, 4.2vw, 2.8rem); margin: 0 0 .35em; }
.article__lead { font-size: clamp(1.08rem, 2.1vw, 1.28rem); color: var(--muted); font-family: var(--serif); line-height: 1.5; margin-bottom: 1.4em; }
.article__body { font-size: 1.05rem; line-height: 1.72; }
.article__body h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 1.7em 0 .5em; }
.article__body h3 { font-size: 1.2rem; margin: 1.4em 0 .4em; }
.article__body p { margin: 0 0 1.1em; }
.article__body ul, .article__body ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.article__body li { margin: .3em 0; }
.article__body a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.article__body a:hover { color: var(--accent); }
.article__body blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--gold); font-family: var(--serif); font-size: 1.15rem; }
.article__body table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .96rem; display: block; overflow-x: auto; }
.article__body th, .article__body td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.article__body thead th { background: var(--surface); font-family: var(--serif); font-weight: 600; border-bottom: 2px solid color-mix(in srgb, var(--gold) 40%, var(--line-soft)); }
.article__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0; }
.article__related { margin-top: 40px; }
.article__related h2, .rg-cluster__title { font-size: 1.5rem; margin-bottom: 18px; }
.rg-cluster { margin: 40px 0; }
.rg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.rg-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--surface); text-decoration: none; color: var(--text); transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.section--surface .rg-card { background: var(--bg); }
.rg-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--gold) 40%, var(--line-soft)); }
.rg-card__cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); font-weight: 600; }
.rg-card__title { font-family: var(--serif); font-size: 1.14rem; line-height: 1.25; }
.rg-card__teaser { font-size: .9rem; color: var(--muted); line-height: 1.5; }
.rg-card__more { margin-top: auto; font-size: .86rem; font-weight: 600; color: var(--accent); }
.rg-card--hub { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.faq { margin: 40px 0; }
.faq > h2 { font-size: 1.5rem; margin-bottom: 14px; }
.faq__item { border-bottom: 1px solid var(--line-soft); }
.faq__q { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; padding: 16px 32px 16px 0; cursor: pointer; position: relative; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; position: absolute; right: 4px; top: 13px; font-size: 1.4rem; color: var(--gold); }
.faq__item[open] .faq__q::after { content: "–"; }
.faq__a { padding: 0 0 16px; color: var(--muted); }
.faq__a p { margin: 0; }

/* ---------- Footer ---------- */
.site-footer { background: #100C09; color: #E7DFD2; padding: 60px 0 104px; margin-top: 40px; border-top: 3px solid var(--gold); }
.site-footer a { color: #E7DFD2; text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand__name { font-family: var(--serif); font-size: 1.18rem; color: #fff; margin: 4px 0 12px; display: flex; flex-direction: column; line-height: 1.25; }
.footer-brand__name .ka { font-size: .78rem; color: var(--gold); letter-spacing: .04em; }
.footer-addr { color: #C9BEAD; margin: 0 0 10px; font-size: .92rem; }
.footer-contact { margin: 0 0 16px; font-size: .92rem; }
.footer-h { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; color: #fff; margin: 0 0 16px; padding-bottom: 9px; position: relative; }
.footer-h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; background: var(--gold); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .92rem; }
.footer-hours { list-style: none; margin: 0; padding: 0; }
.footer-hours li { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .09); font-size: .9rem; }
.footer-hours b { color: #fff; font-weight: 600; }
.footer-note { color: #A99F90; font-size: .82rem; margin: 12px 0 0; }
.footer-social { display: flex; gap: 12px; margin-top: 4px; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); color: #E7DFD2; transition: color var(--t), border-color var(--t), background var(--t); }
.footer-social a:hover { color: var(--gold); border-color: var(--gold); background: rgba(255, 255, 255, .06); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .82rem; }
.footer-legal { margin: 0; opacity: .88; }

/* ---------- Studio signature ----------
   Authorship, not advertising. The words are the quiet part — 12px, wide tracking, uppercase,
   just over half opacity — and the logo is the only element at full strength. The opacity sits
   on the text span, never on the link, so the mark stays crisp.
   height AND width are both set: the <img> carries width/height attributes for layout
   stability, and those are presentational hints that would otherwise fight `height: 24px`. */
.signature { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; text-decoration: none; color: inherit; }
.signature__by {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .55;
    line-height: 1.3;
    transition: opacity var(--t);
}
/* 14px, not the 24px this started at. The lockup's height is set by the diamond, which
   overshoots the letters: the wordmark is only 74% of the image, so a 24px image put "bemuar"
   at 17.8px against the 9px cap height of the legal links beside it — twice their size. At
   14px the wordmark measures 10.4px and the two lines finally read as one row. */
.signature__mark { height: 14px; width: auto; display: block; }
.signature:hover .signature__by,
.signature:focus-visible .signature__by { opacity: .85; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 520px) {
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Persistent mobile CTA bar ---------- */
.mobilebar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; display: none; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(36,30,26,.10); }
.mobilebar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; text-decoration: none; color: var(--text); font-size: .72rem; }
.mobilebar a span:first-child { font-size: 1.15rem; }
.mobilebar a.is-accent { color: var(--accent); }
/* 72px, not 66: an item is 9px padding + a 30.36px glyph line + 3px gap + a 19px label line
   + 9px padding = 70.4, plus the top border. The old value let the bar cover the last few
   pixels of the page. */
@media (max-width: 860px) { .mobilebar { display: flex; } body { padding-bottom: 72px; } }
/* The icon has to occupy the same line box as the ☎ and ☰ glyphs beside it (1.15rem at the
   body's 1.65 line-height), or its label sits ~11px higher than the other two labels and the
   row looks broken. */
.mobilebar__wa { display: inline-flex; align-items: center; justify-content: center; height: 1.9rem; }
.mobilebar__wa svg { width: 22px; height: 22px; fill: #25D366; flex: 0 0 auto; }

/* ---------- Floating "reserve a table" invitation ----------
   Desktop only: below 861px the .mobilebar already carries the same WhatsApp action in the
   thumb zone, and a floating button there would be a second control doing the identical job.
   z-index stays under the off-canvas backdrop (39) — moot while it is desktop-only, but it
   keeps the stacking honest if the breakpoint ever moves. */
.wa-fab { display: none; }
@media (min-width: 861px) {
    .wa-fab {
        position: fixed; right: 22px; bottom: 22px; z-index: 35;
        display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
    }
}
.wa-fab__note {
    margin: 0; max-width: 240px;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line);
    /* square corner bottom-right: the bubble points at the button below it */
    border-radius: 16px 16px 4px 16px;
    padding: 10px 14px; font-size: .88rem; line-height: 1.35;
    box-shadow: 0 12px 32px rgba(20, 16, 12, .18);
    /* No entrance animation, deliberately. A delayed fade-in was tried both ways: `forwards`
       from opacity:0 leaves the text invisible forever if the animation never runs, and
       `backwards` does the same because it holds the hidden first frame for the whole delay —
       a stalled animation clock (throttled background tab, headless engine) never ends it.
       Both fail silently, and the invitation is the entire point of this component. It is a
       small quiet bubble; it does not need a reveal to earn its place. */
}
.wa-fab__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 999px;
    background: #25D366; box-shadow: 0 10px 26px rgba(37, 211, 102, .38);
    transition: transform var(--t), box-shadow var(--t);
}
/* An SVG is a flex item with no intrinsic width to defend: without this it collapses to zero
   and the button renders as an empty green disc. */
.wa-fab__btn svg { width: 30px; height: 30px; fill: #fff; flex: 0 0 auto; }
.wa-fab__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(37, 211, 102, .48); }

/* ---------- Speisekarte (menu page) ---------- */
/* Menu hero: a compact supra photo band so the table-QR landing feels premium at once. */
.menu-hero {
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: clamp(210px, 33vh, 320px);
    color: #FBF8F2;
    padding: 0 0 clamp(20px, 4vw, 32px);
    background:
        linear-gradient(0deg, rgba(20, 13, 8, .86) 0%, rgba(20, 13, 8, .42) 48%, rgba(20, 13, 8, .10) 100%),
        linear-gradient(90deg, rgba(20, 13, 8, .55) 0%, rgba(20, 13, 8, .12) 56%, rgba(20, 13, 8, 0) 100%),
        #1c1610 url("/assets/img/hero-supra.webp") center 42% / cover no-repeat;
}
.menu-hero .hero__title { color: #FBF8F2; text-shadow: 0 2px 22px rgba(0, 0, 0, .38); margin-bottom: .2em; }
.menu-hero .hero__intro { color: rgba(251, 248, 242, .93); margin-bottom: 0; text-shadow: 0 1px 10px rgba(0, 0, 0, .36); }
.menu-hero .eyebrow, .menu-hero .ka { color: #F1D79E; text-shadow: 0 1px 9px rgba(0, 0, 0, .4); }
/* PDF download button — on the dark hero (gold-tinted) and after the legend (ghost). */
.menu-hero__dl { margin: 18px 0 0; }
.menu-dl svg { width: 18px; height: 18px; flex: 0 0 auto; }
.menu-hero .menu-dl {
    color: #F1D79E; border-color: rgba(241, 215, 158, .55);
    background: rgba(20, 13, 8, .28); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.menu-hero .menu-dl:hover { color: #2A1207; border-color: #F1D79E; background: #F1D79E; }
.menu-dl-foot { text-align: center; margin: 8px 0 40px; }
@media (max-width: 700px) {
    .menu-hero {
        background-image:
            linear-gradient(0deg, rgba(20, 13, 8, .88) 0%, rgba(20, 13, 8, .46) 50%, rgba(20, 13, 8, .12) 100%),
            url("/assets/img/hero-supra-sm.webp");
        background-size: cover; background-position: center 42%;
    }
}

/* Elegant placeholder tile for dishes without a photo (serif monogram on warm stone). */
.ph-tile {
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(120% 120% at 30% 22%, color-mix(in srgb, var(--gold) 13%, var(--surface)), var(--line-soft));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 26%, transparent), var(--shadow-sm);
}
.ph-tile__mono { font-family: var(--serif); font-weight: 600; line-height: 1; color: color-mix(in srgb, var(--wine) 62%, var(--gold)); }
.mdish__photo.ph-tile .ph-tile__mono { font-size: 2.4rem; }
.dishcard__photo.ph-tile .ph-tile__mono { font-size: 3.2rem; }
/* Category drink icon inside the placeholder tile (drinks without a photo). */
.ph-tile__ic { width: 48%; height: 48%; color: color-mix(in srgb, var(--wine) 50%, var(--gold)); }
/* On the menu page (table-QR target) the header scrolls away and ONLY a slim category
   bar stays sticky — so filters never eat the mobile screen. */
.page-menu .site-header { position: static; }
/* ---------- outer band + contained control card (editorial-menu-card) ---------- */
.menu-tools { border-bottom: 1px solid var(--line-soft); padding: 16px 0 14px; }

.m-card {
    position: relative;
    display: grid;
    gap: 13px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    padding: 16px 16px 14px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
/* signature: hairline enamel-gold rule across the top edge */
.m-card::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg,
        transparent 0,
        color-mix(in srgb, var(--gold) 70%, transparent) 18%,
        color-mix(in srgb, var(--gold) 70%, transparent) 82%,
        transparent 100%);
}
/* ---------- compact toolbar: search-icon · diet · theme-icon ---------- */
.m-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* shared round icon button (search + theme) */
.iconbtn2 { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer; transition: color var(--t), border-color var(--t); }
.iconbtn2:hover { border-color: var(--accent); color: var(--accent); }
.iconbtn2:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.iconbtn2 svg { width: 19px; height: 19px; }
/* search: a magnifier that expands to a field on click */
.searchbox { flex: 0 0 auto; display: flex; align-items: center; min-width: 0; }
.searchbox__input { width: 0; min-width: 0; padding: 0; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--bg); color: var(--text); font: inherit; font-size: .95rem; opacity: 0; transition: width var(--t), opacity .2s, padding var(--t), margin var(--t); }
.searchbox__input::placeholder { color: var(--muted); }
.searchbox.is-open { flex: 1 1 100%; order: -1; }
.searchbox.is-open .searchbox__input { flex: 1 1 auto; width: auto; opacity: 1; margin-left: 8px; padding: 11px 14px; border-color: var(--line); }
.searchbox.is-open .searchbox__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
/* theme toggle — icon only (sun/moon), pushed to the right edge of the bar */
.theme-toggle { margin-left: auto; }
.theme-toggle__ic { width: 19px; height: 19px; }
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: inline; }

/* ---------- diet — quiet segmented control ---------- */
.m-diet { flex: 0 0 auto; }
.m-diet {
    display: inline-flex; gap: 4px; padding: 4px;
    background: color-mix(in srgb, var(--bg) 70%, var(--surface));
    border: 1px solid var(--line-soft); border-radius: 999px;
}
.m-diet .chip {
    font: inherit; font-family: var(--sans); font-size: .84rem;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid transparent; background: transparent; color: var(--muted);
    padding: 8px 16px; border-radius: 999px; white-space: nowrap;
    transition: color var(--t), background var(--t), border-color var(--t), box-shadow var(--t);
}
.m-diet .chip:hover { color: var(--text); }
.m-diet .chip.is-active {
    background: var(--surface); border-color: var(--line-soft);
    color: var(--accent); font-weight: 600; box-shadow: var(--shadow-sm);
}
.m-diet .chip.is-active::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.m-diet .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- (C) allergen ledger — collapsed by default ---------- */
.m-allergen { border-top: 1px solid var(--line-soft); padding-top: 11px; }
.m-allergen__toggle {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    font-family: var(--sans); font-weight: 600; font-size: .9rem; color: var(--link);
    padding: 5px 2px; border-radius: var(--r-sm);
}
.m-allergen__toggle::-webkit-details-marker { display: none; }
.m-allergen__toggle::marker { content: ""; }
.m-allergen__toggle:hover { color: var(--accent); }
.m-allergen__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.m-allergen__mark { width: 17px; height: 17px; flex: 0 0 auto; color: var(--gold); }
.m-allergen__text { flex: 1 1 auto; }
.m-allergen__chev { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); transition: transform var(--t); }
.m-allergen[open] .m-allergen__chev { transform: rotate(180deg); }
.m-allergen[open] .m-allergen__toggle { color: var(--accent); }
.m-allergen__body { padding-top: 8px; }
.m-allergen__body .muted { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--muted); max-width: var(--wrap-narrow); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ex-chip {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font-family: var(--sans); font-size: .82rem; color: var(--muted);
    border: 1px solid var(--line); background: var(--bg);
    padding: 7px 12px 7px 10px; border-radius: 999px;
    transition: color var(--t), border-color var(--t), background var(--t);
}
.ex-chip:hover { color: var(--text); border-color: var(--accent); }
.ex-chip .m-ex { width: 15px; height: 15px; margin: 0; flex: 0 0 auto; cursor: pointer; accent-color: var(--accent); }
.ex-chip:has(.m-ex:checked) {
    color: var(--accent-strong); font-weight: 600;
    border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}
.ex-chip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Cereals and nuts have to be named individually (Aa Weizen, Hc Walnüsse), so those
   letters sit under their group name with an "alle" chip in front of them. */
.ex-grp { margin-top: 14px; }
.ex-grp__hd { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.ex-grp .chips { margin-top: 7px; }

/* ---------- (D) sticky category rail — engraved index + pinned seam ---------- */
.catbar {
    position: sticky; top: 0; z-index: 35;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.35) blur(10px);
            backdrop-filter: saturate(1.35) blur(10px);
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line-soft));
}
.catbar__inner { display: flex; align-items: stretch; gap: 12px; padding-top: 0; padding-bottom: 0; }
/* pinned, non-scrolling Georgian seam (survives after toolbar scrolls away) */
.catbar__seam {
    flex: 0 0 auto; align-self: center;
    font-family: var(--serif); font-size: 1rem; letter-spacing: .02em;
    color: var(--gold);
    padding-right: 12px; border-right: 1px solid color-mix(in srgb, var(--gold) 26%, var(--line-soft));
}
.catnav {
    flex: 1 1 auto; min-width: 0;               /* correct horizontal-overflow guard */
    display: flex; gap: 2px; margin: 0; padding: 0;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    /* pure-CSS "more to scroll" edge-fade hint */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.catnav::-webkit-scrollbar { height: 0; }

a.chip--cat {
    position: relative; flex: 0 0 auto;
    padding: 13px 15px 12px; text-decoration: none; white-space: nowrap;
    font-family: var(--serif); font-size: .82rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
    transition: color var(--t);
}
/* cloisonné cell-wall hairline between labels */
a.chip--cat + a.chip--cat::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 16px; background: color-mix(in srgb, var(--gold) 40%, transparent);
}
a.chip--cat:hover { color: var(--text); }
a.chip--cat.is-active { color: var(--accent); }
/* the one bold move: a thin gold rule that draws in under the active tab */
a.chip--cat::after {
    content: ""; position: absolute; left: 15px; right: 15px; bottom: 6px; height: 2px;
    background: var(--gold); border-radius: 2px;
    transform: scaleX(0); transform-origin: left center; transition: transform var(--t);
}
a.chip--cat.is-active::after { transform: scaleX(1); }
a.chip--cat:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: var(--r-sm); }

/* tapped category headings clear the sticky bar (matches the bar height) */
[id^="cat-"] { scroll-margin-top: 66px; }

/* Desktop: show ALL categories at once (wrap instead of horizontal scroll) so none stay
   hidden off-screen; the phone keeps the compact single scrolling rail. */
@media (min-width: 861px) {
    .catbar__seam { display: none; }   /* reclaim width so all category chips fit in two rows */
    .catnav { flex-wrap: wrap; overflow-x: visible; -webkit-mask-image: none; mask-image: none; gap: 3px 4px; padding: 3px 0; }
    a.chip--cat + a.chip--cat::before { display: none; }
    a.chip--cat { padding: 6px 11px; font-size: .74rem; letter-spacing: .05em; }
    .mcat, [id^="cat-"] { scroll-margin-top: 92px; }   /* clear the wrapped sticky category bar */
}

/* mobile — flawless down to 320px */
@media (max-width: 560px) {
    .menu-tools { padding: 12px 0 12px; }
    .m-card { padding: 14px 13px 13px; gap: 11px; border-radius: var(--r-sm); }
    /* phone toolbar: row 1 = search-icon … theme-icon, row 2 = diet segmented (centered) */
    .m-diet { flex: 1 1 100%; order: 3; justify-content: center; }
    .m-diet .chip { padding: 9px 14px; }
    .catbar__inner { gap: 10px; }
}
@media (max-width: 360px) {
    .m-diet .chip { padding: 11px 10px; font-size: .8rem; }
    .ex-chip { font-size: .8rem; }
    .catbar__seam { display: none; }   /* reclaim horizontal rail room at the 320px floor */
}
@media (prefers-reduced-motion: reduce) {
    .m-search, .m-field__icon, .m-diet .chip, .m-allergen__chev, .m-allergen__toggle,
    .ex-chip, a.chip--cat, a.chip--cat::after { transition: none; }
}

.menu-list { padding: 24px 0 8px; }
.mcat { padding: 14px 0; scroll-margin-top: 66px; }
.mcat__title { font-size: clamp(1.5rem, 3vw, 2rem); padding-bottom: 8px; position: relative; margin-bottom: 6px; }
.mcat__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; background: var(--gold); border-radius: 2px; }
/* Multi-column dish grid: the long card reads compact & organised, like a printed menu.
   1 column on phones, 2 on tablets, up to 3 on desktop (auto-fill). */
.mcat__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); column-gap: clamp(20px, 3.4vw, 46px); }
@media (max-width: 560px) { .mcat__grid { grid-template-columns: 1fr; } }
.mdish { display: flex; gap: 16px; align-items: flex-start; padding: 18px 2px; border-bottom: 1px solid var(--line-soft); }
.mdish__photo { width: 84px; height: 84px; object-fit: cover; border-radius: 13px; flex: 0 0 auto; box-shadow: var(--shadow-sm); }
.mdish__body { flex: 1 1 auto; min-width: 0; }
.dishcard__photo { width: 100%; height: 168px; object-fit: cover; border-radius: 12px; margin-bottom: 14px; display: block; }
.mdish.is-soldout { opacity: .58; }
/* name · · · · price on one baseline; price is flush-right on every card so the whole
   price column lines up cleanly, like a printed menu. */
.mdish__head { display: flex; align-items: baseline; gap: 6px; }
.mdish__name { font-size: 1.24rem; font-family: var(--serif); margin: 0; }
/* Article number from the printed card. Tabular figures so the digits line up down the list,
   and a quieter weight than the dish name — it is there to be ordered by, not read by. */
.mdish__no { color: var(--gold); font-weight: 600; margin-right: .45em; font-variant-numeric: tabular-nums; }
.mdish__no--v { margin-right: .35em; font-size: .95em; }
.mdish__lead { flex: 1 1 auto; min-width: 16px; height: 0; border-bottom: 2px dotted var(--line); position: relative; top: -.26em; opacity: .7; }
.mdish__price { flex: 0 0 auto; font-family: var(--serif); font-weight: 600; color: var(--accent); font-size: 1.16rem; text-align: right; white-space: nowrap; }
.mdish__var { display: block; font-size: .92rem; line-height: 1.45; }   /* each drink size on its own line so long variant prices never overflow the cell */
.soldout { font-family: var(--sans); font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
.mdish__desc { color: var(--muted); font-size: .96rem; margin: 6px 0 0; line-height: 1.55; }
.mdish__tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 9px; }
.codes { font-size: .72rem; color: var(--muted); border: 1px solid var(--line); padding: 2px 7px; border-radius: 6px; letter-spacing: .05em; }
.codes--add { font-style: italic; }
@media (max-width: 560px) { .mdish__photo { width: 74px; height: 74px; } .mdish { gap: 13px; padding: 15px 2px; } }
.m-empty { text-align: center; color: var(--muted); padding: 40px 0; font-style: italic; }

.legend { padding: 18px 0 40px; }
.legend details { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.legend summary { cursor: pointer; padding: 14px 16px; font-weight: 600; }
.legend__grid { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 4px 16px 18px; }
@media (min-width: 620px) { .legend__grid { grid-template-columns: 1fr 1fr; } }
.legend__grid h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); margin-bottom: 8px; }
.legend__grid ul { list-style: none; margin: 0; padding: 0; font-size: .85rem; color: var(--muted); }
.legend__grid li { margin-bottom: 4px; }
.legend__grid b { color: var(--text); }
.legend__grp { color: var(--text); margin-bottom: 6px; }
.legend__grp > ul { margin-top: 3px; padding-left: 12px; border-left: 1px solid var(--line); }


/* ============================================================
   PHOTO PAGES — Galerie / Feiern-Catering / Home / Über uns
   (owner-supplied photography; classes namespaced .gal-/.cater-/.home-/.abt-)
   ============================================================ */

/* ===== from build agent: C:\Users\Bemua\Desktop\georgische spezialitäten\theme\public\ueber-uns.php ===== */
/* === Über uns — photo figures (prefix: .abt-) === */
.abt-figure {
    margin: 22px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.abt-figure__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
    border-radius: var(--r);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow);
    background: var(--surface);
}
.abt-figure__cap {
    font-family: var(--serif);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--muted);
}
.abt-figure__cap .ka {
    color: var(--gold);
    font-style: normal;
}
@media (max-width: 760px) {
    .abt-figure {
        margin-top: 18px;
    }
    .abt-figure__img {
        aspect-ratio: 4 / 3;
    }
}

/* Lead photo under a text hero (Weine / Vegan / Georgische Küche). */
.leadphoto { padding: clamp(20px, 4vw, 44px) 0 0; }
.leadphoto figure { margin: 0; }
.leadphoto__img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line-soft); box-shadow: var(--shadow); }
.leadphoto figcaption { margin-top: 11px; font-family: var(--serif); font-size: .92rem; color: var(--muted); }
.leadphoto figcaption .ka { color: var(--gold); }
@media (max-width: 560px) { .leadphoto__img { aspect-ratio: 4 / 3; } }

/* Brand signature — the logo on a cream plate matching its own background, so it sits
   cleanly on any section (the plate carries the logo's cream, no blend-mode needed). */
.brandsig { text-align: center; }
.brandsig__card { display: inline-block; background: #F9F2E6; border-radius: var(--r); padding: clamp(18px, 4vw, 40px) clamp(26px, 6vw, 70px); box-shadow: var(--shadow-sm); border: 1px solid color-mix(in srgb, var(--gold) 20%, #F9F2E6); }
.brandsig__logo { display: block; margin: 0 auto; width: min(300px, 62vw); height: auto; }

/* ===== from build agent: C:\Users\Bemua\Desktop\georgische spezialitäten\theme\public\catering.php ===== */
/* ---- Feiern & Catering: photographic hero + gallery (.cater-) ---- */

/* Photographic hero band */
.cater-hero{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cater-hero__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  z-index: 0;
}
.cater-hero__scrim{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(20,12,10,.42) 0%, rgba(20,12,10,.30) 40%, rgba(20,12,10,.66) 100%),
    linear-gradient(90deg, rgba(20,12,10,.30) 0%, rgba(20,12,10,0) 55%);
}
.cater-hero__inner{
  position: relative;
  z-index: 2;
}
/* Text stays legible over the photo (light, theme-independent) */
.cater-hero .eyebrow{ color: rgba(255,255,255,.86); }
.cater-hero .hero__title{ color: #fff; }
.cater-hero .hero__intro{ color: rgba(255,255,255,.90); }
.cater-hero .ka{ color: var(--gold); }
.cater-hero__ka{
  z-index: 1;
  color: rgba(255,255,255,.10);
}
/* Ghost button needs light treatment over the dark scrim */
.cater-hero .btn--ghost{
  color: #fff;
  border-color: rgba(255,255,255,.55);
  background: transparent;
}
.cater-hero .btn--ghost:hover{
  border-color: #fff;
  background: rgba(255,255,255,.10);
}

/* Celebration gallery */
.cater-gallery{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: 14px;
}
.cater-shot{
  position: relative;
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line-soft);
  background: var(--surface);
}
.cater-shot img{
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}
.cater-shot--wide{ grid-column: span 2; }
.cater-shot--wide img{ aspect-ratio: 16 / 9; }
.cater-shot__cap{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 16px 14px;
  color: #fff;
  font-family: var(--serif);
  font-size: .98rem;
  line-height: 1.3;
  background: linear-gradient(180deg, rgba(20,12,10,0) 0%, rgba(20,12,10,.72) 78%, rgba(20,12,10,.82) 100%);
}
.cater-shot__eyebrow{
  display: block;
  margin-bottom: 3px;
  font-family: var(--sans);
  font-size: .70rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

@media (max-width: 860px){
  .cater-gallery{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .cater-gallery{ grid-template-columns: 1fr; }
  .cater-shot--wide{ grid-column: auto; }
  .cater-shot--wide img{ aspect-ratio: 4 / 3; }
}

/* ===== from build agent: C:\Users\Bemua\Desktop\georgische spezialitäten\theme\public\home.php ===== */
/* ===== Caucasus atmosphere band (homepage + reusable): full-bleed Georgian
   landscape with a directional scrim; roots the restaurant in its origin. ===== */
.kaukasus-band {
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: clamp(340px, 52vh, 480px);
    padding: clamp(34px, 6vw, 66px) 0;
    color: #FBF8F2;
    background:
        linear-gradient(90deg, rgba(18, 12, 7, .80) 0%, rgba(18, 12, 7, .50) 44%, rgba(18, 12, 7, .12) 76%, rgba(18, 12, 7, .02) 100%),
        linear-gradient(0deg, rgba(18, 12, 7, .72) 0%, rgba(18, 12, 7, .24) 38%, rgba(18, 12, 7, 0) 64%),
        #1c1610 url("/assets/img/kaukasus.webp") center / cover no-repeat;
}
.kaukasus-band__inner { max-width: 600px; }
.kaukasus-band__title { color: #FBF8F2; margin: .14em 0 .32em; text-shadow: 0 2px 22px rgba(0, 0, 0, .42); }
.kaukasus-band__lede { color: rgba(251, 248, 242, .94); font-size: clamp(1.02rem, 2.1vw, 1.2rem); line-height: 1.55; max-width: 40em; text-shadow: 0 1px 12px rgba(0, 0, 0, .40); }
.kaukasus-band .eyebrow { color: #F1D79E; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
@media (max-width: 700px) {
    .kaukasus-band {
        background-image:
            linear-gradient(0deg, rgba(18, 12, 7, .86) 0%, rgba(18, 12, 7, .46) 48%, rgba(18, 12, 7, .08) 82%),
            url("/assets/img/kaukasus-sm.webp");
        background-size: cover; background-position: center;
    }
}
/* --roots: same band component, the family's traditional Georgian kitchen (Über uns). */
.kaukasus-band--roots {
    background-image:
        linear-gradient(90deg, rgba(18, 12, 7, .84) 0%, rgba(18, 12, 7, .56) 44%, rgba(18, 12, 7, .16) 76%, rgba(18, 12, 7, .04) 100%),
        linear-gradient(0deg, rgba(18, 12, 7, .78) 0%, rgba(18, 12, 7, .28) 40%, rgba(18, 12, 7, 0) 66%),
        url("/assets/img/lokal/roots.webp");
}
@media (max-width: 700px) {
    .kaukasus-band--roots {
        background-image:
            linear-gradient(0deg, rgba(18, 12, 7, .88) 0%, rgba(18, 12, 7, .48) 48%, rgba(18, 12, 7, .10) 82%),
            url("/assets/img/lokal/roots-sm.webp");
    }
}

/* ===== Home: Feiern & Catering teaser ===== */
.home-feiern__figure { margin: 0; }
.home-feiern__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
}

/* ===== Home: understated internal staff-login band ===== */
.home-intern {
    padding-block: clamp(18px, 3.5vw, 30px);
    border-top: 1px solid var(--line-soft);
}
.home-intern__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}
.home-intern__text { min-width: 0; }
.home-intern__title {
    margin: 0;
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}
.home-intern__note {
    margin: 3px 0 0;
    font-size: .95rem;
    color: var(--muted);
}
.home-intern__btn { flex: 0 0 auto; }
@media (max-width: 520px) {
    .home-intern__inner { align-items: flex-start; }
    .home-intern__btn { width: 100%; text-align: center; }
}

/* ===== from build agent: C:\Users\Bemua\Desktop\georgische spezialitaeten\app\Controllers\GalleryController.php, C:\Users\Bemua\Desktop\georgische spezialitaeten\theme\public\galerie.php ===== */
/* Galerie (.gal-) */
.gal-hero{position:relative;overflow:hidden;isolation:isolate;min-height:clamp(320px,52vh,520px);display:flex;align-items:flex-end;}
.gal-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;z-index:-2;}
.gal-hero__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(24,12,14,.28) 0%,rgba(24,12,14,.52) 58%,rgba(24,12,14,.80) 100%);}
.gal-hero__ka{position:absolute;right:-.04em;bottom:-.22em;z-index:-1;font-family:var(--serif);font-size:clamp(5rem,20vw,15rem);line-height:.8;color:rgba(255,255,255,.10);pointer-events:none;user-select:none;white-space:nowrap;}
.gal-hero__inner{padding-block:clamp(2rem,6vw,4rem);}
.gal-hero .eyebrow{color:rgba(255,255,255,.85);}
.gal-hero .eyebrow .ka{color:var(--gold);}
.gal-hero__title{color:#fff;margin:.15em 0 .35em;}
.gal-hero__intro{color:rgba(255,255,255,.92);max-width:56ch;}
.gal-feature{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.4rem,4vw,3rem);align-items:center;}
.gal-feature--reverse .gal-feature__media{order:2;}
.gal-feature__media{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line-soft);background:var(--surface);}
.gal-feature__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--t) ease;}
.gal-feature__media:hover img{transform:scale(1.03);}
.gal-feature__text p:first-child{margin-top:0;}
.gal-masonry{columns:3 260px;column-gap:18px;}
.gal-figure{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 18px;border-radius:var(--r);overflow:hidden;background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--shadow-sm);}
.gal-figure img{display:block;width:100%;height:auto;transition:transform var(--t) ease;}
.gal-figure:hover img{transform:scale(1.035);}
.gal-figure figcaption{padding:.65rem .85rem .8rem;font-family:var(--sans);font-size:.86rem;line-height:1.45;color:var(--muted);}
.gal-figure figcaption b{display:block;margin-bottom:.12rem;font-family:var(--serif);font-weight:600;font-size:1rem;color:var(--text);}
.gal-figure figcaption .ka{color:var(--gold);}
.gal-cta{text-align:center;}
.gal-cta .section-head{align-items:center;}
.gal-cta .lede{margin-inline:auto;max-width:48ch;}
.gal-cta .hero__cta{justify-content:center;}
@media (max-width:760px){.gal-feature{grid-template-columns:1fr;}.gal-feature--reverse .gal-feature__media{order:0;}}
@media (max-width:560px){.gal-masonry{columns:1;}}
@media (prefers-reduced-motion:reduce){.gal-figure img,.gal-feature__media img{transition:none;}.gal-figure:hover img,.gal-feature__media:hover img{transform:none;}}

/* ===== Home: vegan block on a photograph of the dish it describes =====
   The page runs cream on cream from the hero to the footer; one dark band gives the eye
   somewhere to land, and a claim about vegan cooking is more convincing next to the food. */
.section--photo {
    position: relative;
    isolation: isolate;
    background-image: var(--bg);
    background-size: cover;
    background-position: center 60%;
    color: var(--on-dark, #FBF8F2);
}
.section--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* darker where the text sits, so the photograph still reads as a photograph */
    background: linear-gradient(100deg, rgba(30, 12, 15, .93) 0%, rgba(30, 12, 15, .82) 42%, rgba(30, 12, 15, .45) 100%);
}
.section--photo__in { padding-block: clamp(40px, 6vw, 76px); }
.section--photo h2 { color: #FBF8F2; }
.section--photo p { color: rgba(251, 248, 242, .88); }
.section--photo .eyebrow { color: var(--gold-pale, #E4C77E); }
.section--photo .ka { color: var(--gold-pale, #E4C77E); }
.section--photo .lede { color: #FBF8F2; }
.section--photo .btn--primary { background: var(--gold, #AD8130); border-color: var(--gold, #AD8130); color: #241E1A; }
.section--photo .btn--primary:hover { background: #C9A24B; border-color: #C9A24B; }
@media (max-width: 760px) {
    .section--photo::before { background: rgba(30, 12, 15, .9); }
}

/* ===== Home: Feiern — two rooms, both in a fixed frame =====
   height:auto is the fix, not a tweak. The width/height attributes on an <img> map to CSS
   width and height as presentational hints; the stylesheet overrode width but not height, so
   the 1020 px hint survived, beat aspect-ratio, and stretched the photo into a narrow strip
   1020 px tall. Anywhere an <img> carries both attributes and CSS sets width, set height too. */
.home-feiern__figure { margin: 0; display: grid; gap: 12px; }
.home-feiern__img { height: auto; }
.home-feiern__img--sm { display: none; }
@media (min-width: 900px) {
    .home-feiern__figure { grid-template-columns: 1fr 1fr; }
    .home-feiern__img { aspect-ratio: 3 / 4; }
    .home-feiern__img--sm { display: block; }
}