/* molinaro.ch — storefront global styles (2026 redesign).

   Everything is scoped under `.shop` (the PublicLayout wrapper) so it never
   bleeds into the platform /admin shell, which uses base.css. Two deliberate
   exceptions are marked where they appear: the `.lightbox-*` rules and the
   `[hidden]` override.

   Colours are oklch, matching the design source exactly. Do not "simplify" them
   into hex — the palette is built on constant chroma/hue with lightness as the
   only variable, which is what keeps the greys neutral against the teal. */

/* ── Fonts: self-hosted ──────────────────────────────────────────────────────
   These are deliberately NOT loaded from fonts.googleapis.com. A Google Fonts
   request would make Google a subprocessor we must disclose (docs/COMPLIANCE.md)
   and would hand them every visitor's IP address, which for a Swiss site under
   revDSG is a disclosure we get nothing back for. 80 KB, served from our own
   origin, no third party involved. */
@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/instrument-serif-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/instrument-serif-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/instrument-serif-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Manrope ships as a variable font: one file covers 400–700, so asking for
   semibold costs no extra request. */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Design tokens (scoped to the storefront) ────────────────────────────── */
.shop {
    --paper:        oklch(0.975 0.008 238);   /* page background                  */
    --surface:      oklch(1 0 0);             /* cards                            */
    --input-bg:     oklch(0.98 0.006 238);

    --ink:          oklch(0.24 0.02 245);     /* headings, primary text           */
    --ink-soft:     oklch(0.42 0.016 243);    /* body copy                        */
    --muted:        oklch(0.51 0.016 243);    /* secondary copy                   */
    --muted-warm:   oklch(0.56 0.035 240);    /* eyebrows over light surfaces     */
    --muted-faint:  oklch(0.6 0.016 243);     /* placeholders, fine print         */

    --accent:       oklch(0.56 0.072 233);    /* molinaro teal — primary fill     */
    --accent-deep:  oklch(0.47 0.075 233);    /* hover on filled accent           */
    --accent-lift:  oklch(0.6 0.082 233);     /* hover on dark surfaces           */
    --accent-pale:  oklch(0.68 0.068 232);    /* numerals, dots on dark bands     */
    --accent-wash:  oklch(0.97 0.012 233);    /* CTA panel fill                   */
    --accent-edge:  oklch(0.87 0.03 233);     /* CTA panel border                 */

    --line:         oklch(0.91 0.014 240);
    --line-strong:  oklch(0.86 0.014 240);
    --line-header:  oklch(0.89 0.014 240);
    --pill-bg:      oklch(0.94 0.016 238);

    /* Inverted band (Einblick, Über-mich values, Werke CTA). */
    --band-bg:      oklch(0.24 0.02 245);
    --band-ink:     oklch(0.95 0.009 238);
    --band-ink-soft:oklch(0.79 0.014 240);
    --band-edge:    oklch(0.56 0.03 240);

    --error-bg:     oklch(0.96 0.03 25);
    --error-border: oklch(0.82 0.07 25);
    --error-ink:    oklch(0.44 0.13 25);
    --ok-bg:        oklch(0.96 0.04 150);
    --ok-border:    oklch(0.82 0.08 150);
    --ok-ink:       oklch(0.42 0.10 150);

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;

    --content-width: 1320px;
    --gutter: 48px;
    --header-height: 75px;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px oklch(0.2 0.02 245 / 0.05);
    --shadow:    0 1px 3px oklch(0.2 0.02 245 / 0.07);
    --shadow-md: 0 14px 34px -12px oklch(0.2 0.02 245 / 0.18);
    --shadow-lg: 0 30px 70px -22px oklch(0.2 0.02 245 / 0.26);

    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --font-sans:  'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
    background-color: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* The storefront is a light design — keep native form controls light even
       when the visitor's OS prefers dark. */
    color-scheme: light;
}

/* ── Base resets ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

.shop a { color: inherit; text-decoration: none; }
.shop img, .shop svg { display: block; max-width: 100%; }
.shop ::selection { background: oklch(0.6 0.08 233 / 0.25); }
.shop input, .shop textarea, .shop select, .shop button { font-family: inherit; }

/* The `hidden` attribute must beat any author `display` rule.
   The static storefront ships several elements hidden and lets JS reveal them
   once it has read localStorage — the cart drawer and its lines, the "added to
   cart" notice, the wishlist tiles on /merkliste, the no-results line, the
   Schnell-Anfrage panel and the form result messages. Each of those also carries
   a class that sets `display: flex|grid|block`, which silently wins over the UA
   stylesheet's `[hidden] { display: none }` — so without this the cart drawer
   renders open and empty on first paint. */
.shop [hidden] { display: none !important; }

/* The shop filter's tile wrapper must not become the grid item.
   .product-card is `display:flex; flex-direction:column` with `.product-card-body
   { flex:1 }` and `.product-card-foot { margin-top:auto }` — a design that only
   lines the "In den Warenkorb" buttons up when the CARD is the grid item stretched
   to row height. Wrapping it in a plain block for data-product-tile made the card
   content-height again and left every row with ragged bottoms. `display: contents`
   removes the wrapper from layout entirely while keeping it in the DOM for the JS
   filter to find. */
.shop [data-product-tile] { display: contents; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Focus: one visible ring everywhere, never removed without a replacement. */
.shop :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* …except a heading that only holds focus because the router put it there.
   `Routes.razor` carries <FocusOnNavigate Selector="h1">, which stamps
   tabindex="-1" on the page's h1 and focuses it after every navigation so a
   screen reader announces the new page. Chrome treats that programmatic focus as
   :focus-visible, so without this rule every page loads with a teal box drawn
   around its title. The focus itself must stay — it is the accessibility feature;
   only its ring is wrong here, because nothing was operated to earn it. */
.shop [tabindex="-1"]:focus,
.shop [tabindex="-1"]:focus-visible { outline: none; }

/* ── Typography ──────────────────────────────────────────────────────────── */
.shop h1, .shop h2, .shop h3 {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: -0.01em;
    margin: 0;
}
.shop h1 { font-size: clamp(2.75rem, 6vw, 5.125rem); line-height: 1; }
.shop h2 { font-size: clamp(1.875rem, 3.5vw, 2.875rem); line-height: 1.05; }
.shop h3 { font-size: 1.375rem; line-height: 1.2; }
.shop p  { margin: 0 0 var(--space-md); }
.shop p:last-child { margin-bottom: 0; }

.eyebrow {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 var(--space-md);
}
.eyebrow--muted { color: var(--muted-warm); }

/* The dashed lead-in the design puts before a hero eyebrow. */
.eyebrow--rule { display: inline-flex; align-items: center; gap: 8px; }
.eyebrow--rule::before {
    content: ""; width: 22px; height: 1px; background: currentColor;
}

.lead {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 58ch;
}

.underlink { color: var(--accent); font-weight: 600; }
.underlink:hover { color: var(--accent-deep); }

/* ── Layout primitives ───────────────────────────────────────────────────── */
.site-wrapper { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1; }

.container {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }

/* Heading row: title left, "see all" link right. */
.section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--space-lg); margin-bottom: var(--space-lg);
}
.section-head--center { display: block; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head-link { font-weight: 600; font-size: 0.875rem; white-space: nowrap; color: var(--accent); }
.section-head-link:hover { color: var(--accent-deep); }

/* Page opener shared by /werke, /leistungen, /shop and the legal pages. */
.page-head { padding: var(--space-2xl) 0 var(--space-lg); }
.page-head h1 { margin-bottom: var(--space-md); }

/* ── Buttons ─────────────────────────────────────────────────────────────────
   Every selector here is prefixed with `.shop` on purpose. The reset above says
   `.shop a { color: inherit }`, which is specificity (0,1,1) — a bare `.btn`
   (0,1,0) LOSES to it, so an <a class="btn"> silently inherited the page's text
   colour and rendered dark-on-dark: a filled button with invisible text. Prefixing
   makes these (0,2,0) and puts the button's own colour back in charge. Do not
   strip the prefix. */
.shop .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--font-sans); font-weight: 600; font-size: 0.9375rem;
    padding: 0.9375rem 1.625rem;
    border: 1px solid transparent; border-radius: var(--radius-pill);
    background: var(--ink); color: var(--paper);
    cursor: pointer; text-align: center;
    transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
                border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.shop .btn:hover { background: var(--accent); color: oklch(0.98 0.01 238); }
.shop .btn:active { transform: translateY(1px); }
.shop .btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.shop .btn-accent { background: var(--accent); color: oklch(0.98 0.01 238); font-weight: 700; }
.shop .btn-accent:hover { background: var(--accent-deep); color: oklch(0.98 0.01 238); }

.shop .btn-outline { background: transparent; color: var(--ink); border-color: oklch(0.32 0.016 243); }
.shop .btn-outline:hover { background: var(--ink); color: var(--paper); }

.shop .btn-quiet { background: transparent; color: oklch(0.32 0.016 243); padding-inline: 1.25rem; }
.shop .btn-quiet:hover { background: transparent; color: var(--accent); }

.shop .btn-lg { font-size: 1rem; padding: 1rem 2.125rem; font-weight: 700; }
.shop .btn-sm { font-size: 0.875rem; padding: 0.6875rem 1.125rem; }
.shop .btn-block { display: flex; width: 100%; }

/* On a dark band the outline has to be light or it disappears. */
.shop .btn-on-band { background: transparent; color: var(--band-ink); border-color: var(--band-edge); }
.shop .btn-on-band:hover { background: var(--band-ink); color: var(--ink); }

/* ── Pills / tags ────────────────────────────────────────────────────────── */
.pill {
    display: inline-flex; align-items: center;
    font-size: 0.8125rem; font-weight: 500;
    padding: 0.375rem 0.8125rem;
    border-radius: var(--radius-pill);
    background: var(--pill-bg); color: var(--ink-soft);
}
.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* "Unikat" states a fact about the piece; a merchandising badge ("Beliebt") is a
   claim the operator chose to make. The quieter treatment keeps the accent colour
   meaning "look at this" rather than being worn by every one-off product. */
.badge-quiet { background: var(--ink); }

.badge {
    position: absolute; top: 14px; left: 14px;
    font-size: 0.6875rem; font-weight: 700;
    letter-spacing: 0.09em; text-transform: uppercase;
    background: var(--accent); color: oklch(0.98 0.01 238);
    padding: 5px 10px; border-radius: var(--radius-pill);
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.card-link { display: block; transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease); }
.card-link:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: oklch(0.975 0.008 238 / 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line-header);
}
.header-inner {
    max-width: var(--content-width); margin-inline: auto;
    padding: 18px var(--gutter);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
}
.brand-link { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-mark { width: 38px; height: 38px; object-fit: contain; }
.brand-wordmark { font-family: var(--font-serif); font-size: 1.625rem; letter-spacing: 0.02em; line-height: 1; }

.site-nav { display: flex; gap: 30px; font-size: 0.875rem; font-weight: 500; }
.site-nav a { opacity: 0.8; transition: opacity 0.15s var(--ease), color 0.15s var(--ease); }
.site-nav a:hover { opacity: 1; }
/* NavLink's own active class — the router sets it, so it survives static SSR. */
.site-nav a.active { color: var(--accent); opacity: 1; }

.header-actions { display: flex; align-items: center; gap: var(--space-sm); }

.header-icon-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--radius-pill);
    color: var(--ink); transition: background-color 0.15s var(--ease);
}
.header-icon-link:hover { background: var(--pill-bg); }

/* Cart trigger: pill + live count badge. */
.cart-trigger {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 0.875rem; font-weight: 600;
    padding: 9px 15px 9px 18px;
    border: 1px solid oklch(0.32 0.016 243); border-radius: var(--radius-pill);
    background: transparent; color: var(--ink); cursor: pointer;
    transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.cart-trigger:hover { background: var(--ink); color: var(--paper); }
.cart-trigger-label { display: inline; }
.cart-count {
    min-width: 20px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: oklch(0.98 0.01 238);
    font-size: 0.75rem; font-weight: 700; border-radius: var(--radius-pill);
    opacity: 0.35; transition: opacity 0.15s var(--ease);
}
.cart-trigger:hover .cart-count { background: oklch(0.98 0.01 238); color: var(--accent); }
/* An item landing in the cart has to be visible even when the visitor's eyes are
   on the product, not the header. storefront.js adds this for 600 ms. */
.cart-trigger--pop .cart-count { animation: cart-pop 0.6s var(--ease); }
@keyframes cart-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.45); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .cart-trigger--pop .cart-count { animation: none; }
}

/* Hamburger — only ever visible below the nav breakpoint. */
.nav-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0 10px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
    background: transparent; cursor: pointer;
}
.hamburger-bar { display: block; height: 2px; background: var(--ink); border-radius: 2px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
    background: var(--paper);
    border-top: 1px solid var(--line-header);
    margin-top: var(--space-2xl);
}
.footer-inner {
    max-width: var(--content-width); margin-inline: auto;
    padding: 56px var(--gutter) 30px;
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px;
}

/* The "Folgen" column only exists once a social profile is set, so the track count
   has to change with it. It is a modifier class rather than an auto-fit repeat:
   auto-fit is only valid when every other track is definite, and the first column
   is 1.4fr — with an fr in the list the whole declaration is dropped and the footer
   collapses to a single column. */
.footer-inner.has-social { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; }
.footer-brand { font-family: var(--font-serif); font-size: 1.625rem; display: block; margin-bottom: 14px; }
.footer-blurb { font-size: 0.875rem; line-height: 1.6; color: var(--muted); max-width: 34ch; }
.footer-col-title {
    font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted-warm); font-weight: 600; margin-bottom: 14px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; font-size: 0.875rem; }
.footer-links a { color: var(--ink-soft); }
.footer-links a:hover { color: var(--accent); }
.footer-meta {
    max-width: var(--content-width); margin-inline: auto;
    padding: 20px var(--gutter) 34px;
    border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm);
    font-size: 0.8125rem; color: var(--muted-faint);
}

/* ── Floating "Anfrage senden" ───────────────────────────────────────────── */
.fab-inquiry {
    position: fixed; bottom: 26px; right: 26px; z-index: 60;
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--accent); color: oklch(0.98 0.01 238);
    font-weight: 700; font-size: 0.9375rem;
    padding: 15px 24px; border-radius: var(--radius-pill);
    box-shadow: 0 10px 30px oklch(0.56 0.072 233 / 0.4);
    transition: background-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.fab-inquiry:hover { background: var(--accent-lift); transform: translateY(-1px); }
.fab-inquiry-label { display: inline; }

/* ── Cart drawer ─────────────────────────────────────────────────────────── */
.drawer-scrim {
    position: fixed; inset: 0; z-index: 90;
    background: oklch(0.2 0.02 245 / 0.45);
    border: 0; padding: 0; cursor: pointer;
    animation: fade-in 0.2s var(--ease);
}
.cart-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 91;
    width: min(430px, 94vw);
    background: oklch(0.98 0.008 238);
    box-shadow: -24px 0 60px oklch(0.2 0.02 245 / 0.25);
    display: flex; flex-direction: column;
    animation: slide-in 0.28s var(--ease);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .drawer-scrim, .cart-drawer { animation: none; }
}

.cart-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 26px; border-bottom: 1px solid var(--line);
}
.cart-drawer-title { display: flex; align-items: baseline; gap: 10px; }
.cart-drawer-title strong { font-family: var(--font-serif); font-weight: 400; font-size: 1.625rem; }
.cart-drawer-title span { font-size: 0.8125rem; color: var(--muted); }
.cart-drawer-close {
    border: none; background: transparent; cursor: pointer;
    font-size: 1.5rem; line-height: 1; color: var(--ink-soft); padding: 4px;
}
.cart-drawer-close:hover { color: var(--ink); }

.cart-drawer-body { flex: 1; overflow-y: auto; padding: 8px 26px; }

.cart-drawer-empty { text-align: center; padding: 70px 20px; color: var(--muted); }
.cart-drawer-empty strong {
    display: block; font-family: var(--font-serif); font-weight: 400;
    font-size: 1.75rem; color: var(--ink-soft); margin-bottom: 8px;
}
.cart-drawer-empty p { font-size: 0.875rem; line-height: 1.6; margin-bottom: 22px; }

.cart-line {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 18px 0; border-bottom: 1px solid var(--line);
}
.cart-line-main { flex: 1; min-width: 0; }
.cart-line-title { font-weight: 700; font-size: 0.9375rem; margin-bottom: 2px; }
.cart-line-variant {
    font-size: 0.75rem; color: var(--muted-warm);
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px;
}
.cart-line-side { text-align: right; }
.cart-line-total { font-weight: 700; font-size: 0.9375rem; white-space: nowrap; }
.cart-line-remove {
    border: none; background: transparent; cursor: pointer;
    font-size: 0.75rem; color: var(--accent); padding: 6px 0 0; text-decoration: underline;
}

.qty-stepper {
    display: inline-flex; align-items: center;
    border: 1px solid var(--line-strong); border-radius: var(--radius-pill); overflow: hidden;
}
.qty-stepper button {
    border: none; background: transparent; cursor: pointer;
    width: 30px; height: 30px; font-size: 1.0625rem; color: var(--ink-soft);
}
.qty-stepper button:hover { background: var(--pill-bg); }
.qty-stepper span { min-width: 26px; text-align: center; font-size: 0.875rem; font-weight: 600; }

.cart-drawer-foot { padding: 22px 26px; border-top: 1px solid var(--line); }
.cart-drawer-sum {
    display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px;
}
.cart-drawer-sum span { font-size: 0.9375rem; color: var(--ink-soft); }
.cart-drawer-sum strong { font-family: var(--font-serif); font-weight: 400; font-size: 1.875rem; }
.cart-drawer-note { font-size: 0.75rem; color: var(--muted-faint); text-align: center; margin: 8px 0 0; }

/* ── Home: hero ──────────────────────────────────────────────────────────── */
.home-hero {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
    max-width: var(--content-width); margin-inline: auto;
    padding: 72px var(--gutter) 60px;
}
.home-hero h1 { margin-bottom: 26px; }
.home-hero .lead { max-width: 46ch; margin-bottom: 34px; }
.home-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.home-hero-figure {
    position: relative; aspect-ratio: 4 / 5;
    border-radius: var(--radius-sm); overflow: hidden;
}
.home-hero-figure img { width: 100%; height: 100%; object-fit: cover; }

.home-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line-header);
}
.home-stat { display: flex; flex-direction: column; gap: 6px; }
.home-stat-top { display: flex; align-items: center; gap: 10px; }
.home-stat-top svg { color: var(--accent); }
.home-stat-value { font-family: var(--font-serif); font-size: 2.125rem; line-height: 1; }
.home-stat-label { font-size: 0.8125rem; color: var(--muted); }

/* ── Home: Bereiche tiles ────────────────────────────────────────────────── */
.bereich-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bereich-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.bereich-card:hover { border-color: var(--accent); }
/* `contain`, not `cover`: these are background-free cut-outs sitting on white,
   and cropping one would cut the object itself rather than a backdrop. */
.bereich-card-figure {
    aspect-ratio: 1; background: var(--surface);
    display: flex; align-items: center; justify-content: center; padding: 12px;
}
.bereich-card-figure img { width: 100%; height: 100%; object-fit: contain; }
.bereich-card-body { padding: 16px 16px 18px; }
.bereich-card-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.bereich-card-text { font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }

/* ── Bands (dark inverted sections) ──────────────────────────────────────── */
.band { background: var(--band-bg); color: var(--band-ink); }
.band h2 { color: var(--band-ink); }
.band p { color: var(--band-ink-soft); }

.band-split { display: grid; grid-template-columns: 1fr 1fr; margin-block: var(--space-2xl); }
.band-split-figure { min-height: 460px; }
.band-split-figure img { width: 100%; height: 100%; object-fit: cover; }
.band-split-body {
    padding: 64px 56px; display: flex; flex-direction: column; justify-content: center;
}
.band-split-body .eyebrow { color: oklch(0.74 0.06 230); }
.band-split-body h2 { margin-bottom: 20px; }
.band-split-body p { font-size: 1rem; line-height: 1.7; max-width: 42ch; margin-bottom: 28px; }
.shop .band-split-body .btn { align-self: flex-start; }

/* ── Prozess ─────────────────────────────────────────────────────────────── */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.process-step { border-top: 1px solid var(--line-strong); padding-top: 20px; }
.process-num { font-family: var(--font-serif); font-size: 2.5rem; color: var(--accent); line-height: 1; margin-bottom: 12px; }
.process-title { font-weight: 700; font-size: 1.0625rem; margin-bottom: 8px; }
.process-text { font-size: 0.875rem; line-height: 1.55; color: var(--muted); }

/* ── Testimonials ────────────────────────────────────────────────────────── */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testimonial {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px; display: flex; flex-direction: column; gap: 16px;
}
.testimonial-stars { color: var(--accent-lift); font-size: 0.9375rem; letter-spacing: 2px; }
.testimonial-quote { font-size: 0.9375rem; line-height: 1.6; flex: 1; margin: 0; }
.testimonial-who { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.testimonial-avatar {
    width: 40px; height: 40px; border-radius: var(--radius-pill);
    background: oklch(0.88 0.02 240); color: oklch(0.42 0.028 240);
    display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.testimonial-name { font-weight: 600; font-size: 0.875rem; }

/* ── Closing CTA panel ───────────────────────────────────────────────────── */
.cta-panel {
    position: relative; overflow: hidden; text-align: center;
    background: var(--accent-wash); border: 1px solid var(--accent-edge);
    border-radius: var(--radius-xl); padding: 76px 56px;
}
/* Two soft discs bleeding off the corners. Decorative only, so they are
   pointer-transparent and invisible to assistive tech. */
.cta-panel::before, .cta-panel::after {
    content: ""; position: absolute; border-radius: var(--radius-pill);
    background: oklch(0.56 0.072 233 / 0.08); pointer-events: none;
}
.cta-panel::before { top: -80px; right: -60px; width: 280px; height: 280px; }
.cta-panel::after  { bottom: -110px; left: -50px; width: 240px; height: 240px;
                     background: oklch(0.56 0.072 233 / 0.06); }
.cta-panel-inner { position: relative; }
.cta-panel h2 { margin-bottom: 16px; }
.cta-panel .lead { margin-inline: auto; margin-bottom: 32px; max-width: 46ch; }
/* The eyebrow inside a CTA panel is flanked by rules on both sides. */
.cta-panel .eyebrow--rule { color: oklch(0.5 0.072 233); }
.cta-panel .eyebrow--rule::after {
    content: ""; width: 20px; height: 1px; background: currentColor;
}

/* Dark CTA strip (foot of /werke). */
.cta-strip {
    background: var(--band-bg); color: var(--band-ink); border-radius: var(--radius-lg);
    padding: 60px 56px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 30px; flex-wrap: wrap;
}
.cta-strip h2 { margin-bottom: 10px; }
.cta-strip p { color: var(--band-ink-soft); max-width: 46ch; margin: 0; }
.shop .cta-strip .btn { white-space: nowrap; }

/* ── /werke ──────────────────────────────────────────────────────────────── */
.werke-filters { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: var(--space-lg); }
.werke-chip {
    font-size: 0.875rem; font-weight: 600;
    padding: 9px 18px; border-radius: var(--radius-pill);
    border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft);
    transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.werke-chip:hover { border-color: var(--ink); }
.werke-chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* A row-major grid, NOT the CSS-columns masonry this used to be. Columns filled
   top-to-bottom PER COLUMN, so the tenth work sat at the top of the middle column
   and the whole list re-flowed on every "Mehr laden" — the newly loaded works
   landed scattered through the page instead of after the ones already read, and
   the link that jumps to the first new work threw the visitor upwards. Reading
   order now runs left→right, top→bottom, so nachladen appends a row at the end
   and the jump target is exactly where the previous page stopped.

   The price is a fixed crop: equal-height rows need a common picture shape. The
   uncropped picture is one click away in the lightbox, which is where a visitor
   looks at a work properly anyway. */
.werke-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    align-items: stretch;
}
.werke-card {
    display: flex; flex-direction: column;
    /* Every card is a scroll target: "Mehr laden" links to the first card of the
       batch it adds. Without this the header — sticky and translucent — would sit
       on top of the very card the visitor was sent to. */
    scroll-margin-top: calc(var(--header-height) + 16px);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 8px; overflow: hidden;
    transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.werke-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
/* The figure is a <button> so the lightbox is keyboard-reachable — reset the UA
   button chrome and let the picture fill it. */
.werke-card-figure {
    display: block; width: 100%; margin: 0; padding: 0;
    border: none; background: var(--pill-bg); cursor: zoom-in;
    /* The common shape every row is measured against. 4:3 because the archive is
       mostly landscape; a portrait work is centred and loses its edges rather
       than the row losing its alignment. */
    aspect-ratio: 4 / 3;
}
.werke-card-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Takes the leftover height so cards in a row end level even when one has a
   title and its neighbour is a bare picture. */
.werke-card-body { padding: 16px; flex: 1; }
.werke-card-cat {
    font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent); font-weight: 600; margin-bottom: 5px;
}
.werke-card-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.werke-card-text { font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }

.werke-more { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: var(--space-lg); }
.werke-more-count { font-size: 0.8125rem; color: var(--muted); }

/* ── /leistungen ─────────────────────────────────────────────────────────── */
.leistung-list { display: flex; flex-direction: column; gap: 26px; }
.leistung {
    display: grid; grid-template-columns: 1fr 1.3fr;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 12px; overflow: hidden;
}
/* Every second row puts the picture on the right. The figure keeps its DOM
   position (first) so the reading order stays picture-then-copy in a screen
   reader and on mobile, where the grid collapses to one column. */
.leistung:nth-child(even) { grid-template-columns: 1.3fr 1fr; }
.leistung:nth-child(even) .leistung-figure { order: 2; }
.leistung-figure { position: relative; min-height: 300px; background: var(--pill-bg); }
/* Absolutely positioned so the PICTURE never defines the row height — the copy
   column does. A portrait photo (651x1120) otherwise stretched its row to 915 px
   while its neighbours sat at 400, which reads as a broken layout rather than a
   tall picture. */
.leistung-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.leistung-body { padding: 44px 48px; display: flex; flex-direction: column; justify-content: center; }
.leistung-num { font-family: var(--font-serif); font-size: 1.875rem; color: var(--accent-pale); margin-bottom: 8px; }
.leistung-body h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 14px; }
.leistung-body p { font-size: 1rem; line-height: 1.65; color: var(--ink-soft); max-width: 52ch; margin-bottom: 20px; }
.leistung-body .pill-row { margin-bottom: 22px; }
.leistung-foot { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.leistung-price { font-weight: 700; font-size: 0.9375rem; }

.ways-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.way { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 40px; }
.way-letter { font-family: var(--font-serif); font-size: 2.5rem; color: var(--accent); margin-bottom: 12px; line-height: 1; }
.way h3 { font-family: var(--font-sans); font-weight: 700; font-size: 1.375rem; margin-bottom: 12px; }
.way p { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: 22px; }

/* ── /ueber-mich ─────────────────────────────────────────────────────────── */
.about-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-hero p { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); }
.about-portrait { aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--pill-bg); }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }

.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.value-dot { width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--accent-pale); margin-bottom: 16px; }
.value-title { font-weight: 700; font-size: 1.0625rem; margin-bottom: 8px; }
.value-text { font-size: 0.875rem; line-height: 1.6; color: var(--band-ink-soft); margin: 0; }

.timeline { display: flex; flex-direction: column; }
.timeline-row {
    display: grid; grid-template-columns: 120px 1fr; gap: 30px;
    padding: 24px 0; border-top: 1px solid var(--line-strong);
}
.timeline-when { font-family: var(--font-serif); font-size: 1.625rem; color: var(--accent); }
.timeline-title { font-weight: 700; font-size: 1.125rem; margin-bottom: 6px; }
.timeline-text { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px; }
.form-stack { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span, .field-label { font-size: 0.8125rem; font-weight: 600; }
.field-optional { font-weight: 400; color: var(--muted-faint); }

/* Matched by EXCLUSION, not by listing types. `input[type=text]` does not match
   `<input name="Name">` — the attribute selector needs the literal attribute, and
   an input's default type is text only in behaviour, not in the DOM. That left
   every type-less field on /kontakt and in the Schnell-Anfrage panel rendering as
   a bare browser input next to its styled neighbours. */
.shop input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=hidden]),
.shop textarea, .shop select {
    padding: 13px 15px;
    border: 1px solid var(--line-strong); border-radius: 8px;
    font-size: 0.9375rem; background: var(--input-bg); color: var(--ink);
    width: 100%;
}
.shop textarea { resize: vertical; min-height: 7rem; }
.shop input:focus, .shop textarea:focus, .shop select:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px oklch(0.6 0.08 233 / 0.15);
}
.shop input::placeholder, .shop textarea::placeholder { color: var(--muted-faint); }

.file-drop {
    display: flex; align-items: center; justify-content: center;
    min-height: 120px; padding: 20px; cursor: pointer;
    border: 2px dashed var(--line-strong); border-radius: var(--radius);
    background: var(--input-bg); text-align: center;
    transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.file-drop:hover, .file-drop.is-dragging { border-color: var(--accent); background: oklch(0.6 0.08 233 / 0.06); }
.file-drop-title { font-weight: 600; font-size: 0.875rem; margin-bottom: 3px; }
.file-drop-hint { font-size: 0.8125rem; color: var(--muted-faint); }
.file-drop-names { font-size: 0.8125rem; color: var(--accent); margin-top: 6px; }

.form-fineprint { font-size: 0.75rem; color: var(--muted-faint); text-align: center; margin: 0; }

/* Honeypot: off-screen for people, still "visible" to a naive bot. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: var(--space-md); border-radius: var(--radius); font-size: 0.9375rem; }
.alert-ok { background: var(--ok-bg); border: 1px solid var(--ok-border); color: var(--ok-ink); }
.alert-error { background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-ink); }

/* Contact page: sticky intro column beside the form. */
.contact-layout {
    display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start;
}
.contact-intro { position: sticky; top: calc(var(--header-height) + 32px); }
.contact-facts { display: flex; flex-direction: column; gap: 20px; }
.contact-fact { display: flex; gap: 14px; align-items: flex-start; }
.contact-fact-dot {
    width: 10px; height: 10px; border-radius: var(--radius-pill);
    background: var(--accent-pale); margin-top: 6px; flex-shrink: 0;
}
.contact-fact-title { font-weight: 700; font-size: 0.9375rem; margin-bottom: 2px; }
.contact-fact-value { font-size: 0.875rem; color: var(--muted); }

.form-done { text-align: center; padding: 40px 20px; }
.form-done-mark {
    width: 60px; height: 60px; border-radius: var(--radius-pill);
    background: var(--accent); color: oklch(0.98 0.01 238);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.875rem; margin: 0 auto 22px;
}
.form-done h2 { margin-bottom: 12px; }
.form-done p { color: var(--ink-soft); max-width: 40ch; margin: 0 auto 26px; }

/* ── Shop ────────────────────────────────────────────────────────────────── */
.shop-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; padding-bottom: var(--space-lg); }
.shop-search { flex: 1 1 240px; max-width: 320px; }
.shop-chips { display: flex; gap: 10px; flex-wrap: wrap; }
/* Shop chips filter client-side, so their selected state is a class storefront.js
   toggles rather than a server-rendered `aria-current` like the /werke chips. Same
   look, different mechanism — /werke is a plain GET per filter, the shop is not. */
.shop-chip {
    font-size: 0.875rem; font-weight: 600;
    padding: 9px 18px; border-radius: var(--radius-pill);
    border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft);
    cursor: pointer;
    transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.shop-chip:hover { border-color: var(--ink); }
.shop-chip--active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.product-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.product-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.product-card-figure { position: relative; aspect-ratio: 1; background: var(--pill-bg); }
.product-card-figure img { width: 100%; height: 100%; object-fit: cover; }
.product-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.product-card-cat {
    font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted-warm); font-weight: 600; margin-bottom: 6px;
}
.product-card-title { font-weight: 700; font-size: 1.0625rem; margin-bottom: 6px; }
.product-card-text { font-size: 0.8125rem; color: var(--muted); line-height: 1.45; margin-bottom: 16px; flex: 1; }
.product-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.product-price { font-family: var(--font-serif); font-size: 1.625rem; line-height: 1; }
.product-price-from { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--muted); }

.wishlist-toggle {
    position: absolute; top: 12px; right: 12px; z-index: 1;
    width: 36px; height: 36px; border-radius: var(--radius-pill);
    display: flex; align-items: center; justify-content: center;
    background: oklch(1 0 0 / 0.9); border: 1px solid var(--line);
    color: var(--ink-soft); cursor: pointer;
}
.wishlist-toggle:hover { color: var(--accent); border-color: var(--accent); }
/* Saved = a FILLED heart, not merely a tinted outline — the difference has to be
   legible at a glance on a grid of 20 products. */
.wishlist-toggle[aria-pressed="true"], .wishlist-toggle.is-saved { color: var(--accent); }
.wishlist-toggle[aria-pressed="true"] svg, .wishlist-toggle.is-saved svg { fill: currentColor; }

/* Product detail */
.product-detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-2xl); align-items: start; }
.product-gallery-main { border-radius: var(--radius); overflow: hidden; background: var(--pill-bg); }
/* `contain` never crops the piece itself — a sculpture cropped by a square frame
   is a different object. */
.product-gallery-main img { width: 100%; max-height: 70vh; object-fit: contain; }
.product-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.product-thumb {
    width: 72px; height: 72px; border-radius: var(--radius-sm); overflow: hidden;
    border: 1px solid var(--line); background: var(--surface); padding: 0; cursor: pointer;
}
/* Both hooks: the server renders aria-current on first paint, storefront.js
   toggles `is-selected` when the visitor picks another thumbnail. */
.product-thumb[aria-current="true"], .product-thumb.is-selected { border-color: var(--accent); }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-detail-price { font-family: var(--font-serif); font-size: 2.5rem; line-height: 1; margin-block: var(--space-md); }
.product-desc p { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: var(--space-xs); }
.product-buy { display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; margin-top: var(--space-lg); }
.section-note { font-size: 0.8125rem; color: var(--muted); margin: 0; }

/* A colour axis renders as a swatch: the fill IS the information, so the label
   lives in the accessible name rather than in visible text. */
.variant-swatch { width: 2.25rem; height: 2.25rem; padding: 0; border-radius: var(--radius-pill); }
.variant-swatch[aria-pressed="true"], .variant-swatch.is-selected {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}

/* Breadcrumb above a product. */
.breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
    padding-top: var(--space-lg); font-size: 0.8125rem; color: var(--muted);
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current="page"] { color: var(--ink); }
.variant-group { margin-bottom: var(--space-lg); }
.variant-group-title { font-size: 0.8125rem; font-weight: 600; margin-bottom: var(--space-sm); }
.variant-options { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.variant-option {
    font-size: 0.875rem; padding: 9px 16px; border-radius: var(--radius-pill);
    border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
}
.variant-option[aria-pressed="true"], .variant-option.is-selected {
    border-color: var(--accent); background: var(--accent); color: oklch(0.98 0.01 238);
}

.spec-list { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); font-size: 0.875rem; }
.spec-row { display: flex; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--line); }
.spec-label { color: var(--muted); }

.trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
.trust-item { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8125rem; }
.trust-item svg { color: var(--accent); flex-shrink: 0; }
.trust-item b { display: block; }
.trust-item span { color: var(--muted); }

.added-notice {
    display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
    margin-top: var(--space-md); padding: var(--space-md);
    background: var(--ok-bg); border: 1px solid var(--ok-border); color: var(--ok-ink);
    border-radius: var(--radius); font-size: 0.875rem;
}

/* ── Checkout / order status ─────────────────────────────────────────────── */
.checkout-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-2xl); align-items: start; }
.checkout-summary { position: sticky; top: calc(var(--header-height) + 24px); }
.checkout-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.checkout-table th { text-align: left; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: var(--space-sm); }
.checkout-table td { padding: var(--space-md) 0; border-top: 1px solid var(--line); vertical-align: top; }
.checkout-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-md); border-top: 2px solid var(--ink); margin-top: var(--space-md); }
.checkout-total strong { font-family: var(--font-serif); font-size: 1.875rem; }

.fulfillment-options { display: grid; gap: var(--space-md); }
.fulfillment-option { display: flex; gap: var(--space-md); padding: var(--space-md); border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.fulfillment-option:has(:checked) { border-color: var(--accent); background: oklch(0.6 0.08 233 / 0.05); }

.order-steps { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-block: var(--space-lg); }
.order-step { flex: 1 1 8rem; padding-top: var(--space-sm); border-top: 3px solid var(--line); font-size: 0.875rem; color: var(--muted); }
.order-step.is-done { border-top-color: var(--accent); color: var(--ink); font-weight: 600; }

/* ── Checkout + order status ─────────────────────────────────────────────────
   These two pages keep their original markup. They are the money path — orders,
   discount codes, gift cards, TWINT/invoice — and rewriting that markup to chase
   new class names would risk the one flow on the site that must not break. So the
   classes stay and are restyled onto the new tokens instead. */
.checkout-wrap, .order-status-wrap {
    max-width: 62rem; margin-inline: auto; padding-inline: var(--gutter);
}
.checkout-table-wrap, .order-table-wrap { overflow-x: auto; }
.checkout-table th { text-align: left; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: var(--space-sm); }
.checkout-table .col-price, .checkout-table .col-qty,
.checkout-table .col-total, .checkout-table .col-remove { text-align: right; }
.checkout-variant { display: block; font-size: 0.75rem; color: var(--muted-warm); text-transform: uppercase; letter-spacing: 0.08em; }
.checkout-remove { border: none; background: transparent; cursor: pointer; color: var(--accent); font-size: 0.8125rem; text-decoration: underline; }
.checkout-section-title { font-family: var(--font-sans); font-weight: 700; font-size: 1.0625rem; margin: var(--space-xl) 0 var(--space-md); }
.checkout-empty, .checkout-thanks { text-align: center; padding: var(--space-2xl) var(--space-lg); }
.checkout-thanks h1 { margin-bottom: var(--space-md); }
.checkout-status-link { display: inline-block; margin-top: var(--space-md); }

.checkout-form { display: flex; flex-direction: column; gap: var(--space-md); }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-label, .form-group > label { font-size: 0.8125rem; font-weight: 600; }
.form-control { width: 100%; }
.form-hint { font-size: 0.75rem; color: var(--muted-faint); }
.checkout-address { display: grid; gap: var(--space-md); }
.checkout-address-row { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-md); }

.fulfillment-options { display: grid; gap: var(--space-md); }
.fulfillment-option {
    display: flex; gap: var(--space-md); align-items: flex-start;
    padding: var(--space-md); border: 1px solid var(--line-strong);
    border-radius: var(--radius); cursor: pointer;
}
.fulfillment-option:has(:checked) { border-color: var(--accent); background: oklch(0.6 0.08 233 / 0.05); }
.fulfillment-title { font-weight: 700; font-size: 0.9375rem; }
.fulfillment-desc { font-size: 0.8125rem; color: var(--muted); }

.checkout-discount { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.checkout-discount-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.checkout-discount-row .form-control { flex: 1 1 12rem; }
.checkout-discount-ok { font-size: 0.8125rem; color: var(--ok-ink); }
.checkout-discount-err { font-size: 0.8125rem; color: var(--error-ink); }

.checkout-consent { margin-top: var(--space-lg); }
.consent-box { display: flex; gap: var(--space-sm); align-items: flex-start; }
.consent-label { font-size: 0.8125rem; line-height: 1.6; color: var(--ink-soft); }

.order-status-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-xl); }
.order-status-head { display: flex; flex-wrap: wrap; gap: var(--space-lg); justify-content: space-between; align-items: baseline; }
.order-steps { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-block: var(--space-lg); }
.order-step { flex: 1 1 8rem; padding-top: var(--space-sm); border-top: 3px solid var(--line); font-size: 0.875rem; color: var(--muted); }
.order-step.is-done, .order-step.done { border-top-color: var(--accent); color: var(--ink); font-weight: 600; }
.order-step-dot { display: none; }
.order-step-label { display: block; }
.order-cancelled { padding: var(--space-md); border-radius: var(--radius); background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-ink); }
.order-fulfillment { font-size: 0.9375rem; color: var(--ink-soft); }
.order-items { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.order-items td, .order-items th { padding: var(--space-sm) 0; border-top: 1px solid var(--line); text-align: left; }
.order-items .num { text-align: right; }

/* Legacy helpers still referenced by these two pages. */
.muted { color: var(--muted); }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.shop-error { padding: var(--space-md); border-radius: var(--radius); background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-ink); }
.cat-section { max-width: var(--content-width); margin-inline: auto; padding: var(--space-2xl) var(--gutter); }
.unsub-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-xl); }
.section-hint { font-size: 0.8125rem; color: var(--muted); }

/* ── Merkliste ───────────────────────────────────────────────────────────── */
.wishlist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* ── Empty states ────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: var(--space-2xl) var(--space-lg); color: var(--muted); }
.empty-state strong { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 1.75rem; color: var(--ink-soft); margin-bottom: var(--space-sm); }

/* ── Legal pages ─────────────────────────────────────────────────────────── */
.legal { max-width: 76ch; }
.legal h2 { font-family: var(--font-sans); font-weight: 700; font-size: 1.25rem; margin: var(--space-xl) 0 var(--space-sm); }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { font-size: 0.9375rem; line-height: 1.7; color: var(--ink-soft); }
.legal ul { padding-left: 1.25rem; margin: 0 0 var(--space-md); }
.legal li { margin-bottom: var(--space-xs); }
.legal-meta { font-size: 0.8125rem; color: var(--muted-faint); margin-top: var(--space-xl); }
/* Impressum: a definition list reads better than prose for a block of facts, and
   it gives each value its own addressable row. */
.legal-facts { display: grid; grid-template-columns: 12rem 1fr; gap: var(--space-sm) var(--space-md); margin: 0 0 var(--space-lg); }
.legal-facts dt { font-weight: 600; font-size: 0.9375rem; }
.legal-facts dd { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); }
/* A seeded placeholder the operator still has to replace. Deliberately loud —
   this is a legal page, and a silent "TODO: Strasse" going live is worse than
   an ugly one. */
.legal-todo { background: var(--error-bg); color: var(--error-ink); padding: 0.1em 0.4em; border-radius: var(--radius-sm); font-weight: 600; }

/* ── Schnell-Anfrage widget ──────────────────────────────────────────────── */
.quick-panel {
    position: fixed; bottom: 92px; right: 26px; z-index: 61;
    width: min(360px, calc(100vw - 32px));
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md);
}
.quick-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); }
.quick-panel-head h2 { font-family: var(--font-sans); font-weight: 700; font-size: 1.0625rem; }
.quick-panel-intro { font-size: 0.8125rem; color: var(--muted); margin: 0; }
.quick-close { border: none; background: transparent; cursor: pointer; font-size: 1.25rem; line-height: 1; color: var(--muted); }

/* ── Reveal-on-scroll ────────────────────────────────────────────────────── */
/* Only hide when JS is live (html.js is set synchronously in <head>), so content
   is never invisible to a visitor whose JS failed.
   The revealed class is `is-revealed` — that is what reveal.js adds, and it is the
   whole contract between the two files. Naming it anything else here leaves every
   `.reveal` section permanently at opacity 0 with no error anywhere. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.js .reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Lightbox ────────────────────────────────────────────────────────────────
   DELIBERATELY UNSCOPED (no `.shop` prefix): lightbox.js appends the overlay to
   <body>, outside the .shop wrapper, so a scoped rule would never match it. */
.lightbox-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: oklch(0.15 0.02 245 / 0.92);
    display: flex; align-items: center; justify-content: center; padding: 4vmin;
}
.lightbox-overlay[hidden] { display: none; }
.lightbox-content {
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    max-width: 100%; max-height: 100%;
}
.lightbox-image { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 6px; }
.lightbox-caption {
    margin: 0; color: oklch(0.9 0.01 240); font-size: 0.9375rem; text-align: center;
    font-family: 'Manrope', system-ui, sans-serif;
}
.lightbox-caption[hidden] { display: none; }
.lightbox-controls { display: flex; align-items: center; gap: 1rem; }
.lightbox-counter { color: oklch(0.8 0.01 240); font-size: 0.875rem; min-width: 4rem; text-align: center; }
.lightbox-btn, .lightbox-close {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 999px;
    border: none; background: oklch(1 0 0 / 0.12); color: oklch(0.98 0 0);
    font-size: 1.5rem; cursor: pointer;
}
.lightbox-btn:hover, .lightbox-close:hover { background: oklch(1 0 0 / 0.24); }
.lightbox-btn:disabled { opacity: 0.3; cursor: default; }
.lightbox-close { position: absolute; top: 3vmin; right: 3vmin; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .shop { --gutter: 32px; }
    .bereich-grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .werke-grid { grid-template-columns: repeat(2, 1fr); }
    .product-grid, .wishlist-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonial-grid { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .home-hero { grid-template-columns: 1fr; gap: 32px; padding-block: 48px 40px; }
    /* Picture first on a phone: the hero copy alone is a wall of text to scroll
       past before anything shows what the site is about. */
    .home-hero-figure { order: -1; aspect-ratio: 3 / 2; }
    .band-split, .about-hero, .contact-layout, .product-detail,
    .checkout-layout, .ways-grid, .leistung, .leistung:nth-child(even) {
        grid-template-columns: 1fr;
    }
    .band-split-figure { min-height: 260px; }
    .band-split-body { padding: 40px 32px; }
    .leistung:nth-child(even) .leistung-figure { order: 0; }
    .leistung-body { padding: 32px 28px; }
    .contact-intro { position: static; }
    .checkout-summary { position: static; }
    .cta-panel { padding: 48px 28px; }
    .cta-strip { padding: 40px 28px; }
    .timeline-row { grid-template-columns: 1fr; gap: 6px; }

    /* Nav collapses to a disclosure panel driven by storefront.js. */
    .nav-toggle { display: inline-flex; }
    .site-nav {
        display: none;
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; gap: 0;
        background: var(--surface); border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-md); padding: var(--space-sm) var(--gutter) var(--space-md);
    }
    /* `site-nav--open` (not `is-open`): storefront.js already owns this class name
       and toggling it is what opens the panel. */
    .site-nav.site-nav--open { display: flex; }
    .site-nav a { padding: 0.875rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; opacity: 1; }
    .site-nav a:last-child { border-bottom: none; }
    .header-inner { position: relative; }
    /* On a phone the cart pill keeps only its icon + count. */
    .cart-trigger-label { display: none; }
    .cart-trigger { padding: 9px 12px; }
}

@media (max-width: 640px) {
    .shop { --gutter: 20px; }
    .home-stats { grid-template-columns: 1fr; gap: var(--space-md); }
    .bereich-grid, .process-grid, .values-grid { grid-template-columns: 1fr; }
    .werke-grid { grid-template-columns: 1fr; }
    .product-grid, .wishlist-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .form-panel { padding: 24px 20px; }
    .footer-inner { grid-template-columns: 1fr; gap: 28px; }
    .footer-meta { flex-direction: column; gap: 6px; }
    .trust-row { grid-template-columns: 1fr; }
    .legal-facts { grid-template-columns: 1fr; gap: 2px var(--space-md); }
    .legal-facts dd { margin-bottom: var(--space-sm); }
    /* The floating CTA keeps its icon only, so it can't cover the page. */
    .fab-inquiry { bottom: 16px; right: 16px; padding: 14px; }
    .fab-inquiry-label { display: none; }
    .quick-panel { bottom: 76px; right: 16px; }
}

@media print {
    .site-header, .site-footer, .fab-inquiry, .quick-panel, .cart-drawer, .drawer-scrim { display: none !important; }
    .shop { background: #fff; }
}