/* LP System 2 - Boutique Serif theme. Active source: sr-volketswil/showroom-volketswil.html. */
  /* ============================================================
     Draft B - Boutique Serif / Warm Hospitality
     Serif DISPLAY headings (system stack, zero download) on warm
     papers; small-caps gold-ruled labels; drop-cap hero lead over a
     full-bleed scrimmed photo; editorial single column, asymmetric
     image placement. Rust CTA, gold rules, petrol as anchor.
     ============================================================ */
  :root {
    --serif: Georgia, "Iowan Old Style", Palatino, Cambria, "Times New Roman", serif;
    --gold: #AE8A56;
    --gold-soft: rgba(174, 138, 86, .42);
    --gold-light: #EAC58C;
    --rust: #8B2C1F;
    --rust-dk: #74221733;
    --petrol: #00374D;
    --paper: #FBF8F0;
    --paper-warm: #FFF9EC;
    --ink: #1a1613;
    --ink-soft: #4a423b;
  }

  html { scroll-behavior: smooth; }
  body {
    background: var(--paper);
    color: var(--ink);
    line-height: 1.7;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
  }
  ::selection { background: var(--paper-warm); }

  .hold { max-width: 1160px; margin: 0 auto; padding: 0 40px; }
  .measure { max-width: 62ch; }
  .measure--push { margin-left: auto; }

  h2, h3 { font-family: var(--serif); color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
  a { color: var(--petrol); }

  /* ---- small-caps gold-ruled section label (NOT a centered uppercase eyebrow) ---- */
  .label {
    display: inline-block;
    font-family: var(--font-body);
    font-variant: small-caps;
    letter-spacing: .2em;
    font-weight: 600;
    font-size: 14px;
    color: var(--gold);
    border-bottom: 1px solid var(--gold);
    padding-bottom: 6px;
    margin: 0 0 22px;
  }

  .h2 { font-size: 36px; line-height: 1.12; margin: 0 0 22px; }
  .lede { font-size: 20px; line-height: 1.6; color: var(--ink-soft); }

  /* ---- buttons ---- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1;
    padding: 15px 28px; border: 0; border-radius: 1px; cursor: pointer;
    text-decoration: none; letter-spacing: .02em; transition: background .15s ease, color .15s ease;
  }
  .btn--sm { padding: 11px 20px; font-size: 14px; }
  .btn--rust { background: var(--rust); color: #fff; }
  .btn--rust:hover { background: #742217; }
  .btn--petrol { background: var(--petrol); color: #fff; }
  .btn--petrol:hover { background: #002637; }
  .btn--onDark { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.72); }
  .btn--onDark:hover { background: rgba(255,255,255,.1); }
  .btn--petrolline { background: transparent; color: var(--petrol); box-shadow: inset 0 0 0 1px var(--petrol); }
  .btn--petrolline:hover { background: var(--petrol); color: #fff; }
  .btn--goldline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--gold); }
  .btn--goldline:hover { background: var(--gold); color: #fff; }
  .cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
  .linklike {
    font-family: var(--font-body); background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--rust); font-weight: 600; font-size: inherit; text-decoration: underline;
    text-underline-offset: 3px; text-decoration-thickness: 1px;
  }

  /* ---- header ---- */
  .site-head {
    position: sticky; top: 0; z-index: 40;
    background: rgba(251, 248, 240, .93);
    backdrop-filter: saturate(1.1) blur(6px);
    border-bottom: 1px solid var(--gold-soft);
  }
  .head__in { display: flex; align-items: center; gap: 28px; height: 78px; }
  .brand { display: inline-flex; margin-right: auto; }
  .brand img { width: 96px; height: 40px; }
  .nav { display: flex; gap: 26px; }
  .nav a {
    font-family: var(--font-body); font-variant: small-caps; letter-spacing: .12em;
    font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
  }
  .nav a:hover { color: var(--rust); }

  /* ---- breadcrumb ---- */
  .crumb { background: var(--paper); border-bottom: 1px solid var(--gold-soft); }
  .crumb .hold { padding-top: 12px; padding-bottom: 12px; }
  .crumb, .crumb a { font-size: 13px; color: var(--ink-soft); text-decoration: none; letter-spacing: .02em; }
  .crumb a:hover { color: var(--rust); }
  .crumb .sep { color: var(--gold); margin: 0 8px; }
  .crumb [aria-current] { color: var(--petrol); font-weight: 600; }

  /* ---- HERO: full-bleed scrimmed photo, overlay text, drop-cap lead ---- */
  .hero { position: relative; min-height: 82vh; display: flex; align-items: flex-end; overflow: hidden; }
  .hero__media, .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
  .hero__img { object-fit: cover; object-position: center; }
  .hero__scrim {
    position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgba(0,23,33,.78) 0%, rgba(0,23,33,.5) 42%, rgba(0,23,33,.12) 100%),
      linear-gradient(0deg, rgba(0,20,29,.86) 0%, rgba(0,20,29,.34) 46%, rgba(0,20,29,.12) 100%);
  }
  .hero__inner { position: relative; z-index: 2; color: #fff; padding: 120px 0 66px; }
  .hero__col { max-width: 40rem; }
  .eyebrow--onDark {
    display: inline-block; font-family: var(--font-body); font-variant: small-caps;
    letter-spacing: .22em; font-weight: 600; font-size: 14px; color: var(--gold-light);
    border-bottom: 1px solid rgba(234,197,140,.7); padding-bottom: 6px; margin: 0 0 20px;
  }
  .hero__title {
    font-family: var(--serif); font-weight: 700; font-size: 56px; line-height: 1.04;
    letter-spacing: -.015em; color: #fff; margin: 0 0 20px; max-width: 15ch;
    text-shadow: 0 2px 10px rgba(0,0,0,.4);
  }
  .hero__lead {
    font-size: 19px; line-height: 1.6; color: #fbf5ea; max-width: 44ch; margin: 0 0 8px;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
  }
  .hero__lead::first-letter {
    font-family: var(--serif); font-weight: 700; font-size: 4em; line-height: .74;
    float: left; margin: 8px 14px 0 0; color: var(--gold-light);
    text-shadow: 0 2px 8px rgba(0,0,0,.45);
  }
  .hero__lead strong { color: #fff; font-weight: 700; }
  .facts { list-style: none; margin: 24px 0 28px; padding: 0; display: flex; flex-wrap: wrap;
    font-size: 14px; letter-spacing: .02em; color: #f4ede0; }
  .facts li { display: inline-flex; align-items: center; }
  .facts li + li::before { content: "\00B7"; color: var(--gold-light); margin: 0 14px; }

  /* ---- generic section rhythm (varied, not a mechanical band march) ---- */
  .sec { padding: 84px 0; }
  .sec--tight { padding: 64px 0; }
  .sec--paper { background: var(--paper); }
  .sec--warm { background: var(--paper-warm); }
  .sec--white { background: #fff; }
  .rule-top { border-top: 1px solid var(--gold-soft); }

  /* ---- NAP: asymmetric ruled address block (no shadow-card triad) ---- */
  .nap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; }
  .nap__main { padding-right: 44px; }
  .nap__addr {
    font-family: var(--serif); font-size: 30px; line-height: 1.25; color: var(--petrol);
    margin: 0 0 20px;
  }
  .nap__list { border-left: 1px solid var(--gold-soft); padding-left: 44px; margin: 0; }
  .nap__row { padding: 4px 0 20px; border-bottom: 1px solid var(--gold-soft); margin-bottom: 20px; }
  .nap__row:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
  .nap__row dt {
    font-family: var(--font-body); font-variant: small-caps; letter-spacing: .16em;
    font-weight: 600; font-size: 13px; color: var(--gold); margin-bottom: 8px;
  }
  .nap__row dd { margin: 0; line-height: 1.7; }
  .nap__row dd a { color: var(--petrol); font-weight: 600; text-decoration: none; }
  .nap__row dd a:hover { text-decoration: underline; }

  /* ---- Terminablauf: editorial numbered sequence (serif numerals, gold rules) ---- */
  .steps { margin: 0; }
  .step { display: grid; grid-template-columns: 96px 1fr; gap: 30px; align-items: baseline;
    padding: 30px 0; border-top: 1px solid var(--gold-soft); }
  .step:first-of-type { border-top: 0; padding-top: 6px; }
  .step__n { font-family: var(--serif); font-size: 60px; line-height: .9; color: var(--gold);
    font-weight: 400; }
  .step__h { font-family: var(--serif); font-size: 24px; margin: 0 0 8px; color: var(--ink); }
  .step__p { margin: 0; color: var(--ink-soft); max-width: 60ch; }
  .step-hint { margin-top: 28px; font-family: var(--font-body); font-variant: small-caps;
    letter-spacing: .1em; font-size: 14px; color: var(--rust); }

  /* ---- Advisor: elegant named block, small-caps byline, serif quote (no rust left-rule) ---- */
  .advisor { max-width: 760px; }
  .advisor__name { font-family: var(--serif); font-size: 42px; line-height: 1.05; margin: 6px 0 6px;
    color: var(--petrol); }
  .advisor__byline { font-family: var(--font-body); font-variant: small-caps; letter-spacing: .16em;
    font-size: 14px; font-weight: 600; color: var(--gold); margin: 0 0 26px; }
  .advisor__quote { position: relative; font-family: var(--serif); font-style: italic;
    font-size: 24px; line-height: 1.5; color: var(--ink); margin: 0 0 28px; padding-top: 30px;
    border: 0; }
  .advisor__quote::before { content: "\201C"; position: absolute; top: -14px; left: -6px;
    font-family: var(--serif); font-size: 76px; line-height: 1; color: var(--gold-soft); }

  /* ---- Sortiment + product groups ---- */
  .groups { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap;
    gap: 12px 0; font-family: var(--font-body); font-variant: small-caps; letter-spacing: .1em;
    font-weight: 600; color: var(--petrol); font-size: 16px; }
  .groups li { display: inline-flex; align-items: center; }
  .groups li:not(:last-child)::after { content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold); margin: 0 20px; display: inline-block; }

  /* ---- Gallery: full-bleed section, staggered asymmetric grid ---- */
  .gallery-sec { background: #fff; padding: 78px 0; border-top: 1px solid var(--gold-soft); }
  .gallery { max-width: 1300px; margin: 0 auto; padding: 0 40px;
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 34px 34px; align-items: start; }
  .fig { margin: 0; }
  .fig img { width: 100%; height: auto; display: block; }
  .fig figcaption { font-family: var(--font-body); font-variant: small-caps; letter-spacing: .12em;
    font-size: 12px; color: var(--gold); margin-top: 12px; border-top: 1px solid var(--gold-soft);
    padding-top: 8px; }
  /* One row of three. The earlier four-slot layout gave the right column a two-row span for a
     portrait motif; both galleries now carry three landscape photographs cropped to a common
     3:2, so equal columns with no vertical offset put all six pictures on one line and give
     both showroom pages the same gallery (owner, 2026-08-05). At the 1300px container each
     slot is about 384px, which the 1200w derivative still covers on a three-times display. */
  .fig--a { grid-column: 1 / 5; }
  .fig--b { grid-column: 5 / 9; }
  .fig--c { grid-column: 9 / 13; }

  /* ---- Inventory ledger ---- */
  .inv { max-width: 820px; }
  .inv__h3 { font-family: var(--serif); font-size: 24px; margin: 0 0 16px; color: var(--ink); }
  .inv-banner { background: var(--paper-warm); border: 1px solid var(--gold-soft);
    padding: 16px 20px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 22px; }
  .inv-banner strong { color: var(--rust); font-weight: 700; }
  .legend { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px;
    font-size: 14px; color: var(--ink-soft); }
  .legend li { display: inline-flex; align-items: center; gap: 10px; }
  .tag { font-family: var(--font-body); font-variant: small-caps; letter-spacing: .08em;
    font-size: 12px; font-weight: 600; padding: 3px 9px; border: 1px solid; border-radius: 0;
    white-space: nowrap; }
  .tag--in { color: var(--petrol); border-color: var(--petrol); }
  .tag--online { color: #6a6258; border-color: #cabfa8; }
  .inv-group { margin-top: 26px; }
  .inv-cat { font-family: var(--font-body); font-variant: small-caps; letter-spacing: .16em;
    font-weight: 700; font-size: 14px; color: var(--gold); border-bottom: 1px solid var(--gold);
    padding-bottom: 6px; margin: 0 0 6px; }
  .inv-row { display: flex; justify-content: space-between; align-items: center; gap: 18px;
    padding: 11px 0; border-bottom: 1px dotted rgba(26,22,19,.16); }
  .inv-name { color: var(--ink); }
  .inv-name em { font-style: normal; color: #8a8175; font-size: .86em; }

  /* ---- Anfahrt: ruled travel list + click-to-load map + fallback ---- */
  .anfahrt { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  .travel { margin: 0; }
  .travel > div { padding: 18px 0; border-top: 1px solid var(--gold-soft); }
  .travel > div:first-child { border-top: 0; padding-top: 0; }
  .travel dt { font-family: var(--font-body); font-variant: small-caps; letter-spacing: .14em;
    font-weight: 600; font-size: 13px; color: var(--gold); margin-bottom: 6px; }
  .travel dd { margin: 0; color: var(--ink-soft); line-height: 1.65; }
  .map { border: 1px solid var(--gold); background: var(--paper-warm); padding: 34px 32px; }
  .map__addr { font-family: var(--serif); font-size: 24px; color: var(--petrol); margin: 0 0 12px; }
  .map__note { font-size: 14px; color: var(--ink-soft); margin: 0 0 22px; }
  .map__fallback { margin: 22px 0 0; font-size: 15px; color: var(--ink-soft); }
  .map__fallback a { color: var(--rust); font-weight: 600; }

  /* ---- Vorbereiten: ruled editorial list (no shadow cards) ---- */
  .prep { margin: 0; }
  .prep__item { display: grid; grid-template-columns: 3.2rem 1fr; gap: 26px; align-items: baseline;
    padding: 26px 0; border-top: 1px solid var(--gold-soft); }
  .prep__item:first-child { border-top: 0; padding-top: 4px; }
  .prep__mark { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--gold); }
  .prep__h { font-family: var(--serif); font-size: 23px; margin: 0 0 8px; color: var(--ink); }
  .prep__p { margin: 0; color: var(--ink-soft); max-width: 58ch; }

  /* ---- FAQ ---- */
  .faq { max-width: 780px; }
  details { border-top: 1px solid var(--gold-soft); padding: 18px 0; }
  details:last-of-type { border-bottom: 1px solid var(--gold-soft); }
  summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between;
    align-items: center; gap: 20px; font-family: var(--serif); font-size: 21px; color: var(--ink); }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: "+"; font-family: var(--font-body); font-weight: 400; font-size: 26px;
    color: var(--gold); line-height: 1; }
  details[open] summary::after { content: "\00D7"; }
  details p { margin: 12px 0 0; color: var(--ink-soft); max-width: 62ch; }

  /* ---- Closer (editorial, left-aligned; NOT a centered petrol band) ---- */
  .closer { background: var(--paper-warm); }
  .closer .hold { padding-top: 78px; padding-bottom: 78px; }
  .closer__copy { font-size: 20px; line-height: 1.6; color: var(--ink-soft); max-width: 52ch;
    margin: 0 0 30px; }

  /* ---- Footer (petrol anchor) ---- */
  .foot { background: var(--petrol); color: #e7edf0; }
  .foot .hold { padding-top: 60px; padding-bottom: 0; }
  .foot__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding-bottom: 44px; }
  .foot__title { font-family: var(--font-body); font-variant: small-caps; letter-spacing: .14em;
    font-weight: 700; font-size: 14px; color: var(--gold-light); margin: 0 0 14px; }
  .foot p { margin: 0 0 12px; line-height: 1.7; }
  .foot ul { list-style: none; margin: 0; padding: 0; }
  .foot li { margin-bottom: 10px; }
  .foot a { color: #e7edf0; text-decoration: none; }
  .foot a:hover { color: #fff; text-decoration: underline; }
  .foot__base { border-top: 1px solid rgba(255,255,255,.16); padding: 22px 0 26px; font-size: 13px;
    color: #b9c6cd; }

  /* ---- Responsive ---- */
  @media (max-width: 1024px) {
    .hero__title { font-size: 46px; }
    .anfahrt { gap: 40px; }
  }
  @media (max-width: 768px) {
    body { font-size: 16px; }
    .hold { padding: 0 22px; }
    .site-head { position: sticky; }
    .head__in { height: auto; min-height: 0; padding-top: 12px; padding-bottom: 10px; flex-wrap: wrap; gap: 12px; }
    .brand { width: 100%; justify-content: center; margin-right: 0; }
    .brand img { width: 87px; height: 36px; }
    .head__cta { display: none; }
    /* The row wraps, it does not scroll (owner 2026-08-18): every nav item has to
       be visible without a sideways drag. Column gap only, because .nav a's 8px
       vertical padding already separates the rows. */
    .nav { width: 100%; justify-content: center; flex-wrap: wrap; column-gap: 18px; row-gap: 0;
      padding: 0 0 2px; }
    /* Vertical padding buys the touch target: 12px text alone is a 20px tap
       area, which is half the 44px guideline. Costs 4px of header height. */
    .nav a { flex: 0 0 auto; font-size: 12px; letter-spacing: .08em; white-space: nowrap; padding: 8px 0; }
    .hero { min-height: calc(100svh - 132px); }
    .hero__inner { padding: 76px 0 40px; }
    .hero__title { font-size: 36px; }
    .hero__lead { font-size: 17px; }
    .cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .cta-row .btn, .cta-row a, .cta-row button { width: 100%; }
    .sec { padding: 56px 0; }
    .h2 { font-size: 28px; }
    .nap { grid-template-columns: 1fr; }
    .nap__main { padding-right: 0; padding-bottom: 24px; border-bottom: 1px solid var(--gold-soft);
      margin-bottom: 24px; }
    .nap__list { border-left: 0; padding-left: 0; }
    .step { grid-template-columns: 62px 1fr; gap: 18px; }
    .step__n { font-size: 42px; }
    .advisor__name { font-size: 32px; }
    .advisor__quote { font-size: 20px; }
    .gallery { grid-template-columns: 1fr; gap: 26px; padding: 0 22px; }
    .fig--a, .fig--b, .fig--c { grid-column: auto; grid-row: auto; margin-top: 0; }
    .anfahrt { grid-template-columns: 1fr; }
    .prep__item { grid-template-columns: 2.2rem 1fr; gap: 16px; }
    .foot__grid { grid-template-columns: 1fr; gap: 30px; }
  }

  @media (max-width: 380px) {
    .hero__title { font-size: 31px; }
    .facts { font-size: 13px; }
  }

  @media (max-width: 480px) {
    .head__in { padding-top: 10px; padding-bottom: 10px; }
    .hero { min-height: calc(100svh - 96px); }
    .crumb .hold { padding-top: 9px; padding-bottom: 9px; }
  }

  /* ============================================================
     Appended after the accepted resting design. These blocks add only
     keyboard-focus, reduced-motion and form styling.
     Specs: design-sys-LP.md 5.8, 5.7, 6.18. Status: specified (not yet GM-verified).

     2026-08-03 owner rework: the resting design above is no longer frozen.
     Approved mutations: --paper-warm changed in place at theme:18 (#FFF0DC ->
     #FFF9EC), and the appended mobile header and hero blocks below alter the
     resting render (the hero block flattens every page, the Golden Master
     included). Everything else above is untouched, and edits stay in-place or
     appended so the theme:NNN references in design-sys-LP.md keep resolving.
     ============================================================ */

  /* ---- 5.8 Focus visibility (resolves GAP-02) ---- */
  /* Keyboard-only :focus-visible ring; mouse/resting render unchanged; the ring is never removed. */
  :focus-visible {
    outline: 2px solid var(--petrol);   /* petrol/paper 11.97:1 */
    outline-offset: 2px;
  }
  .hero :focus-visible,
  .foot :focus-visible {
    outline-color: #fff;   /* white/petrol 12.70:1; --gold-light (7.78:1) is a permitted warmer alt */
  }

  /* ---- 5.7 Reduced motion (resolves GAP-03) ---- */
  /* The only two motion sources are smooth scroll and the .btn transition. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn { transition: none; }
  }

  /* ---- 6.18 Form elements (resolves GAP-01) ---- */
  .field { margin: 0 0 20px; }
  .field__label {
    display: block; font-family: var(--font-body); font-weight: 600; font-size: 14px;
    color: var(--ink); margin: 0 0 6px;   /* ink, NOT gold (gold at 14px fails AA, DEBT-01) */
  }
  .field__req { color: var(--rust); margin-left: 4px; }   /* visible required marker; aria-label carries meaning */
  .field__control {
    display: block; width: 100%; box-sizing: border-box;
    font-family: var(--font-body); font-size: 16px; color: var(--ink);
    background: #fff; border: 1px solid var(--gold-soft); border-radius: 1px;
    padding: 11px 14px;
  }
  .field__control:focus-visible {
    outline: 2px solid var(--petrol); outline-offset: 2px;   /* per 5.8 */
    border-color: var(--petrol);
  }
  .field--invalid .field__control { border-color: var(--rust); }   /* rust/paper 7.99:1 */
  .field__error {
    margin: 6px 0 0; font-family: var(--font-body); font-size: 14px; color: var(--rust);
  }   /* the text prefix (e.g. "Fehler: ...") carries the state, not color alone; linked via aria-describedby */

  /* ---- selection, pinned (2026-08-03) ---- */
  /* --paper-warm carried ::selection until the owner rework made it whiter. At the new
     value a paper-warm selection is invisible on --paper, so selection keeps the tone it
     was approved with instead of following the token. See design-sys-LP.md palette notes. */
  ::selection { background: #FFF0DC; }

  /* ---- 6.1b Mobile header, owner rework 2026-08-03 (resolves "header looks pressed") ---- */
  /* Desktop header (theme:83-97, .head__in height 78px) is unchanged. Below 768px the
     header wraps to two rows and the original 12/10px padding left the brand and the nav
     sitting on the viewport edges. These blocks only add vertical breathing room; the
     .hero min-height calc values are re-derived from the taller header so the hero still
     fills exactly the space below it. */
  @media (max-width: 768px) {
    .head__in { padding-top: 20px; padding-bottom: 16px; gap: 16px; }
    .nav { column-gap: 22px; row-gap: 0; padding: 6px 0 8px; }
    .hero { min-height: calc(100svh - 152px); }
  }
  @media (max-width: 480px) {
    .head__in { padding-top: 18px; padding-bottom: 14px; }
    .hero { min-height: calc(100svh - 108px); }
  }

  /* ---- 6.4 Hero flattened onto the page grid, owner rework 2026-08-03 ---- */
  /* Grid: .hero__inner is .hold, but the padding shorthand (theme:117) resets .hold's
     gutters to 0 and the shrink-to-fit flex item sat off the page grid (the KNOWN
     DEVIATION, now resolved). width: 100% re-engages .hold's max-width and auto margins;
     the explicit gutters mirror .hold's 40px, 22px below 768.
     Flat: the guide shipped these values first (owner: the 40rem column read like a
     mobile layout on an open field) and the owner made them canonical for every hero the
     same day: column released, title 30ch, less desktop height, deeper 90deg scrim
     mid-stop because the text reaches into the lighter half. The lead measure obeys the
     drop-cap rule: the gold cap clears three lines, so a lead must wrap to exactly three
     lines or to five and more, never four, or one line strands under the cap. 46ch is the
     base, 54ch from 961px up (owner decision 2026-08-04: at 84ch a showroom lead stood as
     three lines with an empty corner under the cap and ran about 110 characters wide; 54ch
     is the widest measure that still wraps it to five, 56ch drops it to four). Longer leads
     cap at 62ch via .hero--lead-long in wp.css (the guide, five lines on desktop). */
  .hero__inner { width: 100%; padding-left: 40px; padding-right: 40px; }
  .hero__col { max-width: none; }
  .hero__title { max-width: 30ch; }
  .hero__lead { max-width: 46ch; }
  @media (min-width: 769px) {
    .hero { min-height: 68vh; }
    .hero__inner { padding-top: 96px; padding-bottom: 56px; }
    .hero__scrim {
      background:
        linear-gradient(90deg, rgba(0,23,33,.78) 0%, rgba(0,23,33,.56) 62%, rgba(0,23,33,.12) 100%),
        linear-gradient(0deg, rgba(0,20,29,.86) 0%, rgba(0,20,29,.34) 46%, rgba(0,20,29,.12) 100%);
    }
  }
  @media (min-width: 961px) {
    .hero__lead { max-width: 54ch; }
  }
  @media (max-width: 768px) {
    .hero__inner { padding-left: 22px; padding-right: 22px; }
  }
  /* Hero CTAs are full width below 768 (theme:317-318); tighter gutters and one size step
     down keep long labels on one line at small widths (first hit: the guide's primary). */
  @media (max-width: 480px) {
    .hero .cta-row .btn { padding-left: 14px; padding-right: 14px; font-size: 14px; }
  }

  /* ---- 6.12 Ledger value column, promoted from the child theme 2026-08-04 ---- */
  /* A ledger row can state a value instead of an availability tag (guide content: property
     and its value). Desktop keeps the two-column ledger: the value sits right, so the dotted
     rules stay readable. Below 769 two columns cannot hold a sentence, and the value used to
     start wherever its name ended, so every description in a group began on a different
     column (owner, 2026-08-04: canonical for every listing on the site). It takes its own
     full-width line instead and they all start on the row's left edge. A tag row keeps its
     one line: wrapping is decided on the items' content widths, so .inv-name is given a zero
     basis and wraps its own text as before instead of pushing the tag down. Only the value,
     with its 100% basis, forces a line of its own. ink-soft on paper is 9.27:1 (5.2). */
  .inv-val {
    font-family: var(--font-body); font-size: 15px; color: var(--ink-soft);
    text-align: right; max-width: 62%;
  }
  @media (max-width: 768px) {
    .inv-row { flex-wrap: wrap; gap: 2px 18px; }
    .inv-name { flex: 1 1 0; min-width: 0; }
    .inv-val { flex: 1 0 100%; text-align: left; max-width: none; }
  }

  /* ---- 6.17 Full site footer, owner rework 2026-08-17 ----
     The slim three-column showroom footer became the full site footer: four
     equal link columns (Kundenservice, Wissenswertes, Kontakt, Showrooms),
     then the base row carrying the legal line and the language switcher.
     Changed in place above: .foot__grid (theme:287) went from 1.4fr 1fr 1fr to
     repeat(4, 1fr). The 768px one-column collapse (theme:339) is unchanged;
     the two-column step for the 769-1024 band is added here. Markup comes from
     mv_boutique_footer(); spec: design-sys-LP.md 6.17. */
  .foot .foot__title:not(:first-child) { margin-top: 26px; }
  .foot .linklike { color: #e7edf0; }   /* rust on petrol fails contrast; footer link pair instead */
  .foot .linklike:hover { color: #fff; }
  .foot__base {
    display: flex; flex-wrap: wrap; justify-content: space-between;
    align-items: center; gap: 12px 20px;
  }
  /* Band-scoped: an open max-width query here would sit after the 768px
     one-column collapse (theme:339) and win the cascade below 768. */
  @media (min-width: 769px) and (max-width: 1024px) {
    .foot__grid { grid-template-columns: 1fr 1fr; }
  }

  /* ---- 6.1c Header spread, owner rework 2026-08-17 ----
     Owner: nav labels stay on one line, aligned with the logo and the shop
     CTA. The header hold releases the 1160px cap to the gallery container
     width (1300px, section 7 precedent) so the six-item row has room, and
     labels never break mid-label. Real-browser font metrics run wider than
     the headless check, hence the generous band: between 1121 and 1280px the
     row tightens one step instead of wrapping; from 769 to 1120px whole
     labels wrap as units (two tidy rows, never a broken label). */
  .site-head .hold { max-width: 1300px; }
  .nav a { white-space: nowrap; }
  @media (min-width: 1121px) and (max-width: 1280px) {
    .head__in { gap: 20px; }
    .nav { gap: 18px; }
    .nav a { font-size: 14px; }
  }
  @media (min-width: 769px) and (max-width: 1120px) {
    .nav { flex-wrap: wrap; }
  }

  /* ---- 6.1d Header cart link, owner 2026-08-26 ----
     A cart icon between the switcher and the shop CTA, same glyph as the
     parent theme's shop header. The count badge is WordPress-only markup
     (session read, hidden at zero); the Golden Master shows the empty state.
     Hidden with the CTA on mobile (6.1b: no conversion action in the header).
     Neither the icon nor the CTA may shrink: between 769 and 1120px the nav is
     the element that wraps (6.1c), and a shrinking CTA had broken "Zum Shop"
     onto two lines there before the cart arrived. */
  .head__cart { position: relative; display: inline-flex; align-items: center; flex: none; color: var(--ink); }
  .head__cart:hover { color: var(--rust); }
  .head__cart svg { width: 24px; height: 24px; }
  .head__cta { white-space: nowrap; }
  .head__cart-count {
    position: absolute; top: -7px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 1px; background: var(--rust); color: #fff; text-align: center;
    font-family: var(--font-body); font-weight: 600; font-size: 11px; line-height: 16px;
  }
  @media (max-width: 768px) { .head__cart { display: none; } }

  /* ---- 6.19 Language switcher (Weglot-compatible), owner rework 2026-08-17 ----
     Class names are Weglot's own (country-selector, weglot_choice, wgcurrent,
     weglot-language-xx) and must not be renamed: on live the plugin substitutes
     its generated switcher for the placeholder and these rules style that
     markup; the local static preview emits the same structure. Disclosure is
     the checkbox (input:checked ~ ul), no JavaScript involved; aria-expanded
     stays static (accepted, design-sys-LP.md 6.19 a11y row). */
  .country-selector { position: relative; }
  .country-selector ul { list-style: none; margin: 0; padding: 0; }
  /* Header desktop: compact dropdown. The checkbox is an invisible overlay
     over the whole control, tabbable, toggled by click or Space; the 5.8
     focus ring draws on it. */
  .nav .country-selector { display: inline-flex; align-items: center; }
  .nav .weglot_choice {
    appearance: none; -webkit-appearance: none; position: absolute; inset: 0;
    margin: 0; border: 0; background: transparent; cursor: pointer; z-index: 2;
  }
  .nav .wgcurrent {
    font-family: var(--font-body); font-variant: small-caps; letter-spacing: .12em;
    font-size: 15px; font-weight: 600; color: var(--ink);
  }
  .nav .wgcurrent::after { content: "\25BE"; color: var(--gold); margin-left: 6px; font-size: 11px; }
  .nav .country-selector ul { display: none; }
  .nav .weglot_choice:checked ~ ul {
    display: block; position: absolute; top: calc(100% + 14px); right: 0; z-index: 50;
    background: var(--paper); border: 1px solid var(--gold-soft); padding: 6px 0; min-width: 76px;
  }
  .nav .country-selector ul a { display: block; padding: 8px 18px; }
  /* Footer: flattened inline row, the current language a plain marker (the
     hidden checkbox makes its label inert). */
  .foot .country-selector { display: inline-flex; align-items: baseline; gap: 16px; }
  .foot .weglot_choice { display: none; }
  .foot .country-selector ul { display: inline-flex; align-items: baseline; gap: 16px; position: static; }
  .foot .wgcurrent {
    pointer-events: none; color: var(--gold-light);
    font-family: var(--font-body); font-variant: small-caps; letter-spacing: .12em;
    font-size: 13px; font-weight: 600;
  }
  .foot .country-selector a {
    font-variant: small-caps; letter-spacing: .12em; font-size: 13px; font-weight: 600;
  }
  /* Mobile header: same flattened row, wrapping with the nav link row. A dropdown
     panel has nothing to anchor to once the row wraps, so the languages sit inline
     as ordinary items. */
  @media (max-width: 768px) {
    /* safe center is kept as a guard: the row no longer scrolls, but a single
       label wider than the viewport would still overflow, and safe center
       start-aligns it instead of clipping its left end (unsupported browsers
       fall back to plain center, no worse than before). */
    .nav { justify-content: safe center; }
    .nav .weglot_choice { display: none; }
    .nav .wgcurrent::after { content: none; }
    .nav .country-selector { gap: 18px; }
    .nav .country-selector ul,
    .nav .weglot_choice:checked ~ ul {
      display: inline-flex; gap: 18px; position: static;
      border: 0; background: none; padding: 0; min-width: 0;
    }
    /* Current-language marker in gold: the small-caps gold label idiom
       (theme:41-52); non-interactive, so the 14px AA debt note does not bind. */
    .nav .wgcurrent { pointer-events: none; color: var(--gold); font-size: 12px; letter-spacing: .08em; padding: 8px 0; }
    .nav .country-selector ul a { padding: 8px 0; }
  }