/* =============================================================================
   steglitz-schloss24.de — the ONE shared design language
   "stahl-kupfer · Graphit, gebürsteter Stahl und Bordeaux"
   Machined, sober, transparent. Cool graphite + brushed-steel neutrals; the page is built from RULED
   OBJECTS (hairline keypad grids, segmented slabs, bordered cabinets, ledger rows) instead of floating
   cards. ONE accent — Bordeaux, from the favicon tile — reserved for the phone and a few tiny marks
   (key-bit eyebrow, pin-tumbler shear line, inlay edge). Square = structural (radius ≤ 4 px), round =
   interactive (pills, the call capsule, toggles). Every page links this file UNEDITED; per-page <style>
   is LAYOUT ONLY. Tokens = theme.json palette; tools/wcag.php measures every pairing.
   Sections:
    0 tokens · 1 base · 2 layout + bands + seams · 3 heads + marks · 4 buttons + phone · 5 chrome ·
    6 hero · 7 phone blocks · 8 trust + keypad · 9 cards + rows · 10 lists · 11 steps · 12 faq ·
    13 notice · 14 compare · 15 split + frames + mosaic · 16 ledger + factors + keyfacts ·
    17 chips + crumbs + strip · 18 prose · 19 Schlüsselbrett · 20 motion · 21 print
   ========================================================================== */

/* ── 0 · tokens ──────────────────────────────────────────────────────────── */
:root{
  /* colour — identical to theme.json + tools/wcag.php */
  --bg:#F4F6F7; --surface:#FFFFFF; --alt:#ECEFF1; --steel:#DEE3E7;
  --line:#D0D6DB; --line-strong:#68737D;
  --text:#1B2127; --muted:#48525C; --head:#111519;
  --primary:#2E353C; --primary-deep:#22282E; --primary-subtle:#E5E9EC;
  --dark:#171B20; --dark-2:#21272D; --dark-deep:#101317;
  --dark-line:#353D45; --dark-line-strong:#6C7782; --dark-text:#DDE2E6; --dark-muted:#A7B0B9;
  --accent:#7A2340; --accent-hover:#8C2A4A; --accent-ink:#6E1F3A; --accent-light:#F2A7BC;
  --tile:#5F3B48;
  --danger:#B42318; --danger-ink:#9F1F15; --danger-tint:#FCEEEC; --danger-line:#E5B3AD;
  --focus:#0F1316;
  /* the brushed-steel texture: hairlines of --primary at 3.5 % and 2 % (wcag.php measures the darkest composite) */
  --brush:repeating-linear-gradient(90deg,rgba(46,53,60,.035) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(46,53,60,.02) 0 1px,transparent 1px 11px);
  /* the drafting-paper ground (grid): a 32 px hairline grid of --primary at 5 % over --bg */
  --grid:linear-gradient(rgba(46,53,60,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(46,53,60,.05) 1px,transparent 1px);
  --brush-dark:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 1px,transparent 1px 11px);
  /* context tokens — dark contexts flip them (section 1), light islands reset them */
  --c-text:var(--text); --c-head:var(--head); --c-muted:var(--muted);
  --c-line:var(--line); --c-line-strong:var(--line-strong);
  --c-link:var(--accent-ink); --c-link-hover:var(--head); --c-accent:var(--accent-ink);
  --c-cell:var(--surface); --c-cell-alt:var(--alt); --c-flood:var(--primary-subtle); --c-icon:var(--primary);
  --ring-in:#FFFFFF; --ring-out:var(--focus);
  /* type */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --fs-body:1.125rem;                                    /* 18 px — never 16 */
  --fs-small:1rem; --fs-micro:.875rem;
  --fs-lead:clamp(1.1875rem,1.08rem + .45vw,1.375rem);
  --fs-h3:clamp(1.1875rem,1.1rem + .3vw,1.375rem);       /* 19 → 22 px */
  --fs-title:clamp(1.6875rem,3.3vw,2.625rem);            /* 27 → 42 px — the ONE section title */
  --fs-display:clamp(2.125rem,5.6vw,3.875rem);           /* 34 → 62 px */
  --fs-display-long:clamp(1.875rem,4.4vw,3.25rem);
  --fs-eyebrow:.8125rem;                                  /* 13 px */
  /* space */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:1rem; --sp-4:1.5rem; --sp-5:2rem; --sp-6:3rem;
  --sp-7:clamp(4rem,2.9rem + 4.2vw,6.5rem);              /* band padding */
  --gut:clamp(16px,4vw,32px); --wrap:75rem; --wrap-wide:82.5rem; --narrow:53.75rem; --measure:68ch;
  --seam:56px;                                           /* the overlap grammar's pull */
  /* shape */
  --r-sm:4px; --r-pill:999px; --notch:16px; --notch-photo:30px; --tap:44px;
  --sh-1:0 1px 2px rgba(17,21,25,.08); --sh-2:0 12px 28px rgba(17,21,25,.12);
  --ds:drop-shadow(0 14px 22px rgba(17,21,25,.16));      /* elevation on clipped (notched) boxes */
  /* motion: fast for atoms, slower for composites */
  --t-atom:.18s cubic-bezier(.22,.61,.36,1); --t-comp:.45s cubic-bezier(.22,.61,.36,1); --rise:18px;
}

/* ── 1 · base ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px}
html.drawer-open{overflow:hidden}
body{margin:0;background:var(--surface);color:var(--c-text);font-family:var(--font);font-size:var(--fs-body);
  line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
.wp-site-blocks>*,.site-main>*{margin-block:0}
.site-main{display:block}
.part-header,.part-footer{display:contents}
img,svg{max-width:100%}
img{height:auto;display:block}
p{margin:0 0 var(--sp-3)}
ul,ol{margin:0 0 var(--sp-3);padding-left:1.25em}
h1,h2,h3,h4{margin:0 0 var(--sp-3);color:var(--c-head);font-weight:800;line-height:1.15;letter-spacing:-.012em;
  overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
h1{hyphens:manual;-webkit-hyphens:manual}             /* an H1 breaks at spaces and hard hyphens only */
h3{font-size:var(--fs-h3);line-height:1.25}
h4{font-size:1.125rem}
strong,b{font-weight:800;color:inherit}
a{color:var(--c-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;
  transition:color var(--t-atom),text-decoration-color var(--t-atom)}
a:hover{color:var(--c-link-hover);text-decoration-thickness:2px}
small{font-size:var(--fs-micro)}
abbr[title]{text-decoration:underline dotted}
::selection{background:var(--accent);color:#fff}
/* the dual focus ring: an inner ring in the ground colour + an outer ring — visible on every ground */
:focus{outline:none}
:focus-visible{outline:3px solid var(--ring-out);outline-offset:3px;box-shadow:0 0 0 3px var(--ring-in)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}
.num{font-variant-numeric:lining-nums tabular-nums;letter-spacing:0}
.skip{position:absolute;left:var(--gut);top:-120px;z-index:400;padding:12px 18px;background:var(--surface);color:var(--head);
  font-weight:800;text-decoration:none;border:2px solid var(--primary);border-radius:var(--r-sm)}
.skip:focus{top:12px}

/* dark contexts flip the context tokens — links, rules, icons and the focus ring follow automatically.
   There is deliberately NO `.section--dark a{color}` rule: links read --c-link, and every button-like
   link (.btn, .chip, .telbig, .row__a, .brand …) sets its own colour at class specificity (design.md trap 4). */
.section--dark,.section--strip,.hero--on-dark,.pcard,.phonebox--dark,.slab,.hubindex,.sbrett--dark .sbrett__board,
.ledger--dark,.callrow--dark,.site-footer,.drawer__call--dark{
  --c-text:var(--dark-text); --c-head:#FFFFFF; --c-muted:var(--dark-muted);
  --c-line:var(--dark-line); --c-line-strong:var(--dark-line-strong);
  --c-link:var(--accent-light); --c-link-hover:#FFFFFF; --c-accent:var(--accent-light);
  --c-cell:var(--dark-2); --c-cell-alt:var(--dark); --c-flood:var(--dark-2); --c-icon:var(--dark-text);
  --ring-in:var(--dark); --ring-out:var(--accent-light);
  color:var(--c-text);
}
/* light islands inside a dark context reset them */
.callcard,.phonebox--light,.notice,.callrow--light,.nav__drop,.hero__check{
  --c-text:var(--text); --c-head:var(--head); --c-muted:var(--muted);
  --c-line:var(--line); --c-line-strong:var(--line-strong);
  --c-link:var(--accent-ink); --c-link-hover:var(--head); --c-accent:var(--accent-ink);
  --c-cell:var(--surface); --c-cell-alt:var(--alt); --c-flood:var(--primary-subtle); --c-icon:var(--primary);
  --ring-in:#FFFFFF; --ring-out:var(--focus);
  color:var(--c-text);
}

/* ── 2 · layout, bands, seams ────────────────────────────────────────────── */
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.wrap--wide{max-width:calc(var(--wrap-wide) + 2 * var(--gut))}
.wrap--narrow{max-width:calc(var(--narrow) + 2 * var(--gut))}
.wrap--prose{max-width:calc(72ch + 2 * var(--gut))}

.section{position:relative;display:flow-root;padding-block:var(--sp-7);background:var(--surface)}
.section>.wrap{display:flow-root}
.section--tight{padding-block:var(--sp-6)}
.section--flush-top{padding-top:0}
.section--flush-bottom{padding-bottom:0}
.section--surface{background:var(--surface)}
.section--alt{background:var(--alt)}
/* the drafting-paper band (grid; alias bg) — reads as a different white beside surface; measured as grid* */
.section--grid{background-color:var(--bg);background-image:var(--grid);background-size:32px 32px;background-position:-1px -1px}
/* the brushed-steel band — a MATERIAL texture (german-design.md §4.3), never a decorative gradient */
.section--steel{background-color:var(--steel);background-image:var(--brush)}
.section--dark{background-color:var(--dark);background-image:var(--brush-dark)}
.section--strip{padding-block:.95rem;background:var(--primary)}
.section--danger{background:var(--danger-tint)}
.section>.wrap>:last-child:not(.seam-down){margin-bottom:0}

/* THE OVERLAP GRAMMAR — every other band has exactly ONE element crossing its boundary, by negative
   margin, never by decoration. The crossing element is the FIRST or LAST child of its band and has a
   fill of its own (phone card, slab, keypad, checklist, notice, compare, ledger, board, photo).
   · .seam-up on the FIRST child of the lower band → stz_section() adds .section--seamed itself.
   · .seam-down on the LAST child of the upper band + .section--hang on that band; the band below gets
     .section--catch automatically (stz_section reads the flow). Both collapse below 700 px. */
.section--seamed{padding-top:0}
.seam-up{position:relative;z-index:3;margin-top:calc(-1 * var(--seam))!important}
.section--hang,.hero--hang{padding-bottom:0!important}
.seam-down{position:relative;z-index:3;margin-bottom:calc(-1 * var(--seam))!important}
.section--catch{padding-top:calc(var(--sp-7) + var(--seam))}
.section--catch.section--tight{padding-top:calc(var(--sp-6) + var(--seam))}
.section--catch>.wrap>.seam-up:first-child{margin-top:0!important}
.section>.wrap>.seam-up:first-child+*{margin-top:var(--sp-5)}
/* a crossing element without a fill of its own gets one (it stands on two grounds at once) */
:is(.faq,.rows,.steps,.chips,.iclist--rows,.iclist--ruled,.checks,.tstrip).seam-up,:is(.faq,.rows,.steps,.chips,.iclist--rows,.iclist--ruled,.checks,.tstrip).seam-down{background:var(--c-cell);border:1px solid var(--c-line-strong);padding:var(--sp-3) var(--sp-4);box-shadow:var(--sh-2)}
/* a crossing split: only the notched photo crosses — the copy keeps a seam of air on its own band */
.split.seam-up{align-items:stretch}.split.seam-up .split__media,.split.seam-up .split__aside{align-self:start}.split.seam-up .split__copy{align-self:center;padding-top:calc(var(--seam) + var(--sp-3))}
.split.seam-down{align-items:stretch}.split.seam-down .split__media,.split.seam-down .split__aside{align-self:end}.split.seam-down .split__copy{align-self:center;padding-bottom:calc(var(--seam) + var(--sp-3))}
/* a crossing board: the intro column keeps clear of the seam */
.schluesselbrett.seam-up .sbrett__intro{padding-top:calc(var(--seam) + var(--sp-3))}.schluesselbrett.seam-down .sbrett__intro{padding-bottom:calc(var(--seam) + var(--sp-3))}
.callband__grid.seam-down .callband__aside{padding-bottom:var(--seam)}
@media (max-width:700px){
  .seam-up{margin-top:0!important}
  .split.seam-up .split__copy,.split.seam-down .split__copy,.schluesselbrett.seam-up .sbrett__intro,.schluesselbrett.seam-down .sbrett__intro{padding-top:0;padding-bottom:0}
  .callband__grid.seam-down .callband__aside{padding-bottom:0}
  .section--seamed{padding-top:var(--sp-6)}
  .seam-down{margin-bottom:0!important}
  .section--hang,.hero--hang{padding-bottom:var(--sp-6)!important}
  .section--catch,.section--catch.section--tight{padding-top:var(--sp-6)}
}

/* the 60-column fill grid: every row of a ruled grid is closed — an orphaned last cell widens
   (stz_spans() prints --s desktop / --st tablet per cell) */
.grid60{display:grid;grid-template-columns:repeat(60,minmax(0,1fr))}
.grid60>*{grid-column:span var(--s,60);min-width:0}
@media (max-width:980px){.grid60>*{grid-column:span var(--st,60)}}
@media (max-width:640px){.grid60>*{grid-column:span 60}}

.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-6);align-items:center}
.duo--wide{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.duo--narrow{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.duo--start{align-items:start}
.duo>*{min-width:0}
@media (max-width:900px){.duo,.duo--wide,.duo--narrow{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}}

/* ── 3 · section heads, the key-bit eyebrow, the pin-tumbler rule ────────── */
.shead{margin:0 0 var(--sp-5);max-width:48rem}
.shead>:last-child{margin-bottom:0}
.shead--wide{max-width:none}
.shead--center{margin-inline:auto;text-align:center}
.shead--center .eyebrow{justify-content:center}
.shead--split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--sp-3) var(--sp-6);align-items:end;max-width:none}
.shead--split .shead__t>:last-child,.shead--split .shead__i>:last-child{margin-bottom:0}
@media (max-width:860px){.shead--split{grid-template-columns:minmax(0,1fr)}}
/* HEADLINE DISCIPLINE: ONE .stitle — modifiers change max-width, alignment, colour; never size or weight */
.stitle{font-size:var(--fs-title);font-weight:800;line-height:1.12;letter-spacing:-.022em;color:var(--c-head);margin:0 0 var(--sp-3);max-width:24ch}
.stitle--wide,.shead--wide .stitle,.shead--split .stitle{max-width:30ch}
.shead--center .stitle{margin-inline:auto}
.shead__intro{font-size:var(--fs-lead);line-height:1.6;color:var(--c-muted);max-width:var(--measure)}
.shead--center .shead__intro{margin-inline:auto}
.shead--split .shead__intro{font-size:var(--fs-body)}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--c-muted);max-width:var(--measure)}
.muted{color:var(--c-muted)}
/* the Bezirk name never splits at its hyphen from 761 px on (stz_ht wraps it in .bz; text unchanged) */
@media (min-width:761px){.bz{white-space:nowrap}}

/* the key-bit eyebrow mark: a 30 × 12 accent bar clipped to a 4-tooth bitting profile (4 = the measured cap) */
.eyebrow{display:flex;align-items:flex-start;gap:.6rem;margin:0 0 var(--sp-2);font-size:var(--fs-eyebrow);font-weight:800;
  line-height:1.45;letter-spacing:.15em;text-transform:uppercase;color:var(--c-accent);overflow-wrap:anywhere}
.eyebrow::before{content:"";flex:none;width:30px;height:12px;margin-top:.22em;background:currentColor;
  clip-path:polygon(0 52%,30% 52%,30% 0,42% 0,42% 52%,50% 52%,50% 24%,61% 24%,61% 52%,67% 52%,67% 6%,78% 6%,78% 52%,85% 52%,85% 30%,95% 30%,95% 52%,100% 52%,100% 100%,0 100%)}
@media (max-width:420px){.eyebrow{letter-spacing:.1em}}

/* the pin-tumbler rule: five pins of unequal depth HANGING from a shear line (top-anchored = a lock
   cross-section; bottom-anchored bars would read as signal strength) */
.pinrule{display:flex;align-items:flex-start;gap:6px;width:80px;height:26px;margin:0 0 var(--sp-4);border-top:2px solid var(--c-accent)}
.pinrule i{display:block;width:7px;background:var(--c-line-strong)}
.pinrule i:nth-child(1){height:16px}.pinrule i:nth-child(2){height:9px}.pinrule i:nth-child(3){height:22px}
.pinrule i:nth-child(4){height:12px}.pinrule i:nth-child(5){height:19px}
.pinrule--center{margin-inline:auto}
.pindiv{display:flex;align-items:flex-start;gap:18px;margin:var(--sp-5) 0}
.pindiv::before,.pindiv::after{content:"";flex:1;height:1px;margin-top:0;background:var(--c-line-strong)}
.pindiv .pinrule{margin:0}

/* ── 4 · buttons + the phone ─────────────────────────────────────────────── */
.i{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ictile{display:inline-grid;place-items:center;flex:none;width:46px;height:46px;border:1px solid var(--c-line-strong);
  border-radius:var(--r-sm);color:var(--c-icon);background:var(--c-cell)}
.ictile .i{width:22px;height:22px}
.ictile--danger{color:var(--danger);border-color:var(--danger-line);background:var(--danger-tint)}

.btn{--btn-bg:var(--primary);--btn-ink:#FFFFFF;--btn-line:var(--primary);--btn-wipe:var(--primary-deep);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;max-width:100%;min-height:var(--tap);
  padding:.7rem 1.25rem;border:2px solid var(--btn-line);border-radius:var(--r-sm);background:var(--btn-bg);color:var(--btn-ink);
  font:inherit;font-size:1rem;font-weight:800;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;
  overflow:hidden;isolation:isolate;transition:color var(--t-atom),border-color var(--t-atom),background-color var(--t-atom)}
/* the scaleX wipe fill — paints above the button ground, below the label */
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-wipe);transform:scaleX(0);transform-origin:left;transition:transform var(--t-comp)}
.btn:hover{color:var(--btn-ink);text-decoration:none}
.btn:hover::after{transform:scaleX(1)}
.btn .i{width:1.1em;height:1.1em}
.btn--outline{--btn-bg:transparent;--btn-ink:var(--c-head);--btn-line:var(--c-line-strong);--btn-wipe:var(--primary)}
.btn--outline:hover{--btn-ink:#FFFFFF;--btn-line:var(--primary)}
.btn--ghost{--btn-bg:transparent;--btn-ink:#FFFFFF;--btn-line:var(--dark-line-strong);--btn-wipe:#FFFFFF}
.btn--ghost:hover{--btn-ink:var(--head);--btn-line:#FFFFFF}
.btn--lg{padding:.85rem 1.5rem;font-size:1.0625rem}
.btn--block{display:flex;width:100%}

/* THE CALL CAPSULE — round (= you can act on it), the accent fill, a full-white label (trap 5: never
   dimmed text on the accent), the phone in a disc. NO motion at all: no wipe, no lift, no pulse. */
.btn--call{--btn-bg:var(--accent);--btn-ink:#FFFFFF;--btn-line:var(--accent);
  border-radius:var(--r-pill);padding:.45rem 1.35rem .45rem .45rem;gap:.7rem;text-align:left}
.btn--call::after{display:none}
.btn--call:hover{--btn-bg:var(--accent-hover);--btn-line:var(--accent-hover)}
.btn__disc{display:grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;border-radius:50%;background:#FFFFFF;color:var(--accent)}
.btn__disc .i{width:1.15rem;height:1.15rem;fill:currentColor;stroke:none}
.btn__txt{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .5rem;min-width:0}
.btn__num{font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap}
.btn--stack .btn__txt{flex-direction:column;align-items:flex-start;gap:0}
.btn--stack .btn__l{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
.btn--stack .btn__num{font-size:1.1875rem;line-height:1.2}
.btn--call.btn--lg{padding:.5rem 1.6rem .5rem .5rem}
.btn--call.btn--lg .btn__disc{width:2.6rem;height:2.6rem}
.btn--call.btn--xl{padding:.6rem 1.9rem .6rem .6rem}
.btn--call.btn--xl .btn__disc{width:3rem;height:3rem}
.btn--call.btn--xl.btn--stack .btn__num{font-size:clamp(1.3125rem,1.1rem + 1vw,1.625rem)}
.btn--call.btn--block{justify-content:center}
.btn--call.btn--icon{padding:0;width:var(--tap);height:var(--tap);justify-content:center;border-radius:50%}
.btn--call.btn--icon .btn__disc{background:transparent;color:#FFFFFF;width:auto;height:auto}
/* trap 6 (this palette): the deep Bordeaux has too little edge contrast on graphite — on every dark
   ground the capsule turns WHITE with the accent number and disc (reference: the white pill in the dark card) */
:is(.section--dark,.hero--on-dark,.pcard,.phonebox--dark,.site-footer,.drawer__call--dark) .btn--call{--btn-bg:#FFFFFF;--btn-ink:var(--accent-ink);--btn-line:#FFFFFF}
:is(.section--dark,.hero--on-dark,.pcard,.phonebox--dark,.site-footer,.drawer__call--dark) .btn--call:hover{--btn-bg:var(--primary-subtle);--btn-line:var(--primary-subtle)}
:is(.section--dark,.hero--on-dark,.pcard,.phonebox--dark,.site-footer,.drawer__call--dark) .btn--call .btn__disc{background:var(--accent);color:#FFFFFF}
:is(.callcard,.phonebox--light,.callrow--light,.notice) .btn--call{--btn-bg:var(--accent);--btn-ink:#FFFFFF;--btn-line:var(--accent)}
:is(.callcard,.phonebox--light,.callrow--light,.notice) .btn--call:hover{--btn-bg:var(--accent-hover);--btn-line:var(--accent-hover)}
:is(.callcard,.phonebox--light,.callrow--light,.notice) .btn--call .btn__disc{background:#FFFFFF;color:var(--accent)}

/* the phone number as display type — tabular figures, no button chrome, its own 44 px floor */
.telbig{display:inline-flex;align-items:center;gap:.45rem;min-height:var(--tap);max-width:100%;padding-block:.1rem;
  font-size:clamp(1.75rem,1.2rem + 2.4vw,3rem);font-weight:800;line-height:1.05;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--c-head);text-decoration:none;white-space:nowrap}
.telbig:hover{color:var(--c-accent);text-decoration:none}
.telbig__ic{display:inline-grid;place-items:center;flex:none;width:.95em;height:.95em;border-radius:50%;background:var(--accent);color:#FFFFFF}
.telbig__ic .i{width:.5em;height:.5em;fill:currentColor;stroke:none}
.telbig--xl{font-size:clamp(2rem,1.1rem + 4.2vw,3.375rem)}
.telbig--md{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.125rem)}
.telnote{margin:.5rem 0 0;font-size:var(--fs-small);line-height:1.55;color:var(--c-muted);max-width:38rem}
@media (max-width:360px){.telbig,.telbig--xl{font-size:1.625rem}}

/* ── 5 · chrome ──────────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--line);transition:box-shadow var(--t-comp),border-color var(--t-comp)}
.site-header.is-stuck{border-bottom-color:var(--line-strong);box-shadow:0 10px 24px rgba(17,21,25,.07)}
.hdr{display:flex;align-items:center;gap:var(--sp-4);min-height:78px}
.brand{display:inline-flex;align-items:center;gap:12px;min-width:0;color:var(--head);text-decoration:none}
.brand:hover{color:var(--head);text-decoration:none}
.brand__mark{display:block;flex:none;width:46px;height:46px}
.mark{display:block;width:100%;height:100%;border-radius:var(--r-sm)}
.brand__t{display:flex;flex-direction:column;min-width:0;line-height:1.12}
.brand__l1{font-size:1.25rem;font-weight:800;letter-spacing:-.015em;color:var(--c-head)}
.brand__l2{font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);white-space:nowrap}
.brand__sep{margin-inline:.35em}
.mainnav{margin-left:auto}
.nav{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav__item{position:relative;display:flex;align-items:center}
.nav__l{position:relative;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 12px;color:var(--head);font-size:1rem;font-weight:800;text-decoration:none}
.nav__l::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--t-comp)}
.nav__l:hover{color:var(--head);text-decoration:none}
.nav__l:hover::after,.nav__l[aria-current="page"]::after,.nav__item.is-active>.nav__l::after{transform:scaleX(1)}
.nav__l[aria-current="page"]::after,.nav__item.is-active>.nav__l::after{background:var(--primary)}
.nav__tog{display:grid;place-items:center;width:32px;height:var(--tap);margin-left:-8px;padding:0;border:0;background:none;color:var(--head);cursor:pointer;border-radius:var(--r-pill)}
.nav__tog .i{width:18px;height:18px;transition:transform var(--t-atom)}
.nav__item.is-open .nav__tog .i{transform:rotate(180deg)}
.nav__drop{position:absolute;top:100%;left:0;z-index:20;width:22rem;padding:6px;background:var(--surface);border:1px solid var(--line-strong);
  border-top:3px solid var(--primary);box-shadow:var(--sh-2);visibility:hidden;opacity:0;transform:translateY(6px);
  transition:opacity var(--t-atom),transform var(--t-atom),visibility 0s linear .18s}
.nav__item.is-open .nav__drop,.nav__item:not(.is-dismissed):hover .nav__drop{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.nav__sub{list-style:none;margin:0;padding:0}
.nav__sub a{display:flex;align-items:center;gap:12px;min-height:var(--tap);padding:8px 10px;color:var(--head);font-weight:700;font-size:1rem;text-decoration:none}
.nav__sub a:hover{background:var(--primary-subtle);color:var(--head)}
.nav__sub a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--accent)}
.nav__sub .ictile{width:34px;height:34px}
.nav__sub .ictile .i{width:18px;height:18px}
.nav__over{margin:6px 0 0;border-top:1px solid var(--line)}
.nav__over a{font-size:.9375rem;color:var(--accent-ink)}
.nav__over a .i{width:16px;height:16px}
.hdr__call{display:flex;align-items:center;gap:10px;flex:none}
.burger{display:none;align-items:center;gap:8px;min-height:var(--tap);padding:0 14px 0 12px;border:2px solid var(--line-strong);border-radius:var(--r-pill);
  background:var(--surface);color:var(--head);font:inherit;font-size:.9375rem;font-weight:800;cursor:pointer}
.burger__bars,.burger__bars::before,.burger__bars::after{display:block;width:18px;height:2px;background:currentColor}
.burger__bars{position:relative}
.burger__bars::before,.burger__bars::after{content:"";position:absolute;left:0}
.burger__bars::before{top:-6px}.burger__bars::after{top:6px}
.menulink{display:none}
@media (max-width:1180px){.hdr__btn.btn--stack .btn__l{display:none}.hdr{gap:var(--sp-3)}}
@media (max-width:900px){
  .mainnav{display:none}
  .burger{display:inline-flex}
  .hdr__call{margin-left:auto}
  .hdr{min-height:68px}
}
@media (max-width:640px){
  .hdr__btn{padding:0;width:var(--tap);height:var(--tap);justify-content:center;border-radius:50%}
  .hdr__btn .btn__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hdr__btn .btn__disc{background:transparent;color:#FFFFFF;width:auto;height:auto}
  .burger{padding:0;width:var(--tap);justify-content:center}
  .burger__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .brand__mark{width:40px;height:40px}
  .brand{gap:10px}
}
@media (max-width:440px){
  /* "· Berlin" leaves the visible lock-up (it stays in the link's accessible name) */
  .brand__sep,.brand__sub{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .brand__l1{font-size:1.0625rem}
  .brand__l2{font-size:.6875rem;letter-spacing:.08em}
}
@media (max-width:359px){.hdr__call{gap:6px}.brand{gap:8px}.brand__mark{width:34px;height:34px}.brand__l1{font-size:.9375rem}.brand__l2{font-size:.625rem;letter-spacing:.05em}}
.no-js .burger{display:none!important}
.no-js .nav__tog{display:none}
@media (max-width:900px){.no-js .menulink{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 8px;font-weight:800;color:var(--head)}}

/* the drawer — a modal panel (theme.js: focus trap, Esc, scrim, scroll lock) */
.drawer{position:fixed;inset:0;z-index:300;visibility:hidden;transition:visibility 0s linear .3s}
.drawer.is-open{visibility:visible;transition-delay:0s}
.drawer__scrim{position:absolute;inset:0;background:rgba(15,19,22,.55);opacity:0;transition:opacity var(--t-comp)}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;width:min(25rem,90vw);background:var(--surface);
  border-left:1px solid var(--line-strong);transform:translateX(100%);transition:transform var(--t-comp);overflow-y:auto;overscroll-behavior:contain}
.drawer.is-open .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;gap:12px;padding:14px var(--gut);border-bottom:1px solid var(--line)}
.drawer__head .brand__mark{width:38px;height:38px}
.drawer__title{margin:0;font-weight:800;font-size:1.125rem;color:var(--head)}
.drawer__close{display:grid;place-items:center;margin-left:auto;width:var(--tap);height:var(--tap);padding:0;border:2px solid var(--line-strong);border-radius:50%;background:none;color:var(--head);cursor:pointer}
.drawer__nav ul{list-style:none;margin:0;padding:0}
.drawer__nav>ul>li{border-bottom:1px solid var(--line)}
.drawer__nav a,.drawer__nav summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:6px var(--gut);
  color:var(--head);font-weight:800;text-decoration:none;cursor:pointer;list-style:none}
.drawer__nav summary::-webkit-details-marker{display:none}
.drawer__nav summary .i{transition:transform var(--t-atom)}
.drawer__nav details[open] summary .i{transform:rotate(180deg)}
.drawer__nav a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--accent)}
.drawer__sub{background:var(--alt);border-top:1px solid var(--line)}
.drawer__sub a{min-height:46px;font-weight:700;font-size:1rem;padding-left:calc(var(--gut) + 14px)}
.drawer__call{margin-top:auto;padding:var(--sp-4) var(--gut);background:var(--alt);border-top:1px solid var(--line)}

/* footer — graphite, measured */
.site-footer{background:var(--dark-deep);padding-top:var(--sp-6);border-top:1px solid var(--dark-line)}
.foot__top{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:var(--sp-3) var(--sp-6);align-items:center;padding-bottom:var(--sp-5);border-bottom:1px solid var(--dark-line)}
.site-footer .brand{color:#FFFFFF}
.site-footer .brand__l1{color:#FFFFFF}
.foot__blurb{margin:0;max-width:56ch;color:var(--dark-muted);font-size:var(--fs-small)}
.foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5);padding-block:var(--sp-5) var(--sp-6)}
.foot__h::before{content:"";flex:none;width:24px;height:10px;margin-top:.25em;background:var(--accent-light);clip-path:polygon(0 52%,30% 52%,30% 0,42% 0,42% 52%,50% 52%,50% 24%,61% 24%,61% 52%,67% 52%,67% 6%,78% 6%,78% 52%,85% 52%,85% 30%,95% 30%,95% 52%,100% 52%,100% 100%,0 100%)}
.foot__h{display:flex;align-items:flex-start;gap:.6rem;margin:0 0 var(--sp-3);font-size:var(--fs-eyebrow);font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#FFFFFF}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0}
.foot li a{display:inline-flex;align-items:center;min-height:40px;color:var(--dark-text);font-size:var(--fs-small);text-decoration:none;line-height:1.35}
.foot li a:hover{color:#FFFFFF;text-decoration:underline}
.foot li a[aria-current="page"]{color:#FFFFFF;text-decoration:underline;text-decoration-color:var(--accent-light)}
.foot__tel{font-size:clamp(1.5rem,1.2rem + 1vw,1.875rem)}
.foot__note{margin:.5rem 0 0;font-size:var(--fs-small);color:var(--dark-muted)}
.fbar{border-top:1px solid var(--dark-line);padding-block:var(--sp-3) calc(var(--tap) + 28px)} /* bottom room: the fixed to-top button never sits on the last footer line at page end */
.fbar__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem var(--sp-4)}
.fbar p{margin:0;font-size:.9375rem;color:var(--dark-muted)}
@media (max-width:980px){.foot{grid-template-columns:repeat(2,minmax(0,1fr))}.foot__top{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.foot{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}}

/* the sticky mobile call bar + scroll-to-top */
.callbar{display:none}
@media (max-width:760px){
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:block;padding:8px var(--gut) calc(8px + env(safe-area-inset-bottom));
    background:var(--surface);border-top:1px solid var(--line-strong);box-shadow:0 -8px 22px rgba(17,21,25,.08)}
  .callbar .btn--call{padding-block:.35rem}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
}
@media (max-width:340px){.callbar .btn__l{display:none}}
.totop{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:20px;z-index:80;display:grid;place-items:center;width:var(--tap);height:var(--tap);
  padding:0;border:2px solid var(--surface);border-radius:50%;background:var(--primary);color:#FFFFFF;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--t-atom),transform var(--t-atom),visibility 0s linear .18s,background-color var(--t-atom)}
.totop.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.totop:hover{background:var(--primary-deep)}
@media (max-width:760px){.totop{bottom:calc(80px + env(safe-area-inset-bottom))}}

/* ── 6 · the hero family (exactly one <h1>; .hero--<variant> + .hero--on-<ground>) ── */
.hero{position:relative;display:flow-root;padding-block:clamp(2.5rem,1.6rem + 3.4vw,4.75rem) var(--sp-7);background:var(--surface)}
.hero>.wrap{position:relative;z-index:1;display:flow-root}
.hero--on-steel{background-color:var(--steel);background-image:var(--brush)}
.hero--on-alt{background:var(--alt)}
.hero--on-grid{background-color:var(--bg);background-image:var(--grid);background-size:32px 32px;background-position:-1px -1px}
.hero--on-dark{background-color:var(--dark);background-image:var(--brush-dark)}
.display{font-size:var(--fs-display);font-weight:800;line-height:1.04;letter-spacing:-.026em;color:var(--c-head);margin:0 0 var(--sp-4);max-width:17ch}
.display--long{font-size:var(--fs-display-long);max-width:21ch}
@media (max-width:374px){.display{font-size:1.75rem}.display--long{font-size:1.625rem}}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:var(--sp-6);align-items:center}
.hero__copy,.hero__media,.hero__head,.hero__body{min-width:0}
.hero__copy>:last-child,.hero__body>:last-child{margin-bottom:0}
.hero__lead{font-size:var(--fs-lead);line-height:1.6;color:var(--c-muted);max-width:60ch;margin-bottom:var(--sp-3)}
.hero__more{color:var(--c-muted);max-width:60ch}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin:var(--sp-4) 0 0}
.hero__note{margin:var(--sp-3) 0 0;font-size:var(--fs-small);color:var(--c-muted);max-width:52ch}
.crumbs+.eyebrow,.crumbs+.display{margin-top:0}
/* micro-assurances: one ruled line of short facts with square ticks (structural, not buttons) */
.assure{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;list-style:none;margin:var(--sp-4) 0 0;padding:.85rem 0 0;border-top:1px solid var(--c-line)}
.assure li{display:flex;align-items:center;gap:.55rem;margin:0;font-size:var(--fs-small);font-weight:700;color:var(--c-head);line-height:1.4}
.assure .i{width:1.1rem;height:1.1rem;padding:2px;border:1.5px solid var(--c-line-strong);border-radius:2px;color:var(--c-accent);stroke-width:2.6}
@media (max-width:640px){.assure{display:grid;gap:.55rem}}

/* the notched photo slot (key-bow cut top right) on a hairline mount that traces the cut */
.nphoto{position:relative;margin:0}
.nphoto__frame{position:relative;z-index:1;clip-path:polygon(0 0,calc(100% - var(--notch-photo)) 0,100% var(--notch-photo),100% 100%,0 100%)}
.nphoto--mount{padding:0 16px 16px 0}
.nphoto--mount::before,.nphoto--mount::after{content:"";position:absolute;top:16px;left:16px;right:0;bottom:0;
  clip-path:polygon(0 0,calc(100% - var(--notch-photo)) 0,100% var(--notch-photo),100% 100%,0 100%)}
.nphoto--mount::before{background:var(--c-line-strong)}
.nphoto--mount::after{inset:17px 1px 1px 17px;background:var(--c-cell-alt);clip-path:polygon(0 0,calc(100% - var(--notch-photo) + 1px) 0,100% calc(var(--notch-photo) - 1px),100% 100%,0 100%)}
.hero--on-steel .nphoto--mount::after{background-color:var(--steel);background-image:var(--brush)}
/* the small ruled badge plate ("Badge:" text) — a plate, never a seal or a rating */
.hero__badge{position:absolute;z-index:2;bottom:34px;display:inline-flex;align-items:center;gap:.5rem;max-width:calc(100% - 48px);margin:0;padding:.55rem .85rem;
  background:var(--surface);border:1px solid var(--line-strong);border-left:4px solid var(--accent);color:var(--head);
  font-size:.875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;box-shadow:var(--sh-1)}
.hero__badge--bl{left:-12px}
.hero__badge--br{right:4px}
.hero__badge--below{position:static;margin-top:var(--sp-3);max-width:100%}
.hero__badge .i{width:1rem;height:1rem;color:var(--accent-ink)}

/* home — machined: brushed steel, display H1, call capsule, notched photo, the slab across the seam */
.hero--home .hero__media{justify-self:end;width:min(100%,27rem)}
.hero__slab{margin-top:var(--sp-6)}
/* service — split on white; the photo column stands on a brushed-steel field that runs to the edge */
.hero--service::before{content:"";position:absolute;top:0;bottom:0;right:0;width:38%;background-color:var(--steel);background-image:var(--brush);border-left:1px solid var(--line)}
.hero--service.hero--media-left::before{right:auto;left:0;border-left:0;border-right:1px solid var(--line)}
.hero--field-none::before{content:none!important}
.hero--field-dark::before{background-color:var(--dark);background-image:var(--brush-dark);border-color:var(--dark)!important}
.hero--field-dark .nphoto--mount::before{background:var(--dark-line-strong)}
.hero--field-dark .nphoto--mount::after{background:var(--dark-2)}
.hero--service.hero--diptych::before{width:50%}
.hero--diptych .hero__grid,.hero--diptych.hero--media-left .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:calc(2 * var(--sp-6))}
.hero--diptych .hero__media{justify-self:center}
.hero--service .hero__media{justify-self:end;width:min(100%,25rem)}
.hero--media-left .hero__grid{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
.hero--media-left .hero__media{order:-1;justify-self:start}
/* notdienst — dark; the call card comes right after the H1 (first on phones), the checklist crosses the seam */
.hero__grid--nd{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"head card" "body card";align-items:start;row-gap:0}
.hero__grid--nd .hero__head{grid-area:head}
.hero__grid--nd .callcard{grid-area:card;align-self:center}
.hero__grid--nd .hero__body{grid-area:body}
.hero__photo-sm{max-width:22rem;margin-top:var(--sp-5)}
.hero__grid--void .hero__media--nd{grid-area:card;align-self:end;justify-self:end;width:min(100%,22rem)}
.hero__check{margin-top:var(--sp-6)}
.callcard{position:relative;padding:var(--sp-4) var(--sp-5) var(--sp-5);background:var(--surface);border-top:5px solid var(--accent);box-shadow:0 24px 48px rgba(0,0,0,.28)}
.callcard__label{margin:0 0 .15rem;font-size:var(--fs-eyebrow);font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-ink)}
.callcard .telbig{margin-bottom:var(--sp-3)}
/* the card's number fits the card at 901–940 px too (same container-unit cap as the closing band, §7) */
.callcard{container-type:inline-size}
.callcard .telbig{font-size:clamp(1.5rem,min(10.5cqi,1.2rem + 2.4vw),3rem)}
.callcard .telbig__n{white-space:normal}
.callcard__ready{margin:var(--sp-4) 0 0;padding-top:var(--sp-3);border-top:1px solid var(--line)}
.callcard__rt{margin:0 0 .35rem;font-size:var(--fs-small);font-weight:800;color:var(--head)}
.callcard__ready .checks{margin-top:0}
.callcard__safety{display:flex;gap:.6rem;align-items:flex-start;margin:var(--sp-3) 0 0;padding:.7rem .85rem;background:var(--danger-tint);border-left:4px solid var(--danger);
  font-size:.9375rem;line-height:1.5;color:var(--text)}
.callcard__safety .i{color:var(--danger);margin-top:.12em}
.callcard__safety a{color:var(--danger-ink)}
/* preise — no photo: the small ruled "So entsteht Ihr Preis" ledger */
.hledger{background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--sh-1)}
.hledger__t{display:flex;align-items:center;gap:.6rem;margin:0;padding:.85rem var(--sp-4);background:var(--primary);color:#FFFFFF;font-size:var(--fs-eyebrow);font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.hledger__t::before{content:"";flex:none;width:30px;height:12px;background:var(--accent-light);
  clip-path:polygon(0 52%,30% 52%,30% 0,42% 0,42% 52%,50% 52%,50% 24%,61% 24%,61% 52%,67% 52%,67% 6%,78% 6%,78% 52%,85% 52%,85% 30%,95% 30%,95% 52%,100% 52%,100% 100%,0 100%)}
.hledger ol{list-style:none;margin:0;padding:0}
.hledger li{display:grid;grid-template-columns:4.25rem minmax(0,1fr);margin:0;border-top:1px solid var(--line)}
.hledger li:first-child{border-top:0}
.hledger__n{display:grid;place-items:center;align-self:stretch;background:var(--alt);border-right:1px solid var(--line);font-weight:800;font-size:1.0625rem;color:var(--head);font-variant-numeric:tabular-nums}
.hledger__c{padding:.9rem var(--sp-4)}
.hledger__c strong{display:block;color:var(--head);line-height:1.35}
.hledger__c span{display:block;font-size:var(--fs-small);color:var(--muted);line-height:1.55;margin-top:.2rem}
.hledger--plain li{grid-template-columns:minmax(0,1fr)}
/* hub — the index of the services as ruled rows in a dark cabinet */
.hubindex{background-color:var(--dark);background-image:var(--brush-dark);border-top:5px solid var(--accent)}
.hubindex__l{display:flex;align-items:center;gap:.6rem;margin:0;padding:.95rem var(--sp-4);font-size:var(--fs-eyebrow);font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-light);border-bottom:1px solid var(--dark-line)}
.hubindex ul{list-style:none;margin:0;padding:0}
.hubindex li{margin:0;border-bottom:1px solid var(--dark-line)}
.hubindex li:last-child{border-bottom:0}
.hubindex__a{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-3);padding:.9rem var(--sp-4);
  color:#FFFFFF;text-decoration:none;isolation:isolate;overflow:hidden}
.hubindex__a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--dark-2);transform:scaleY(0);transform-origin:bottom;transition:transform var(--t-comp)}
.hubindex__a:hover{color:#FFFFFF;text-decoration:none}
.hubindex__a:hover::before{transform:scaleY(1)}
.hubindex__t{display:block;font-weight:800;font-size:1.0625rem;line-height:1.3}
.hubindex__p{display:block;font-size:.9375rem;color:var(--dark-muted);line-height:1.45;margin-top:.15rem}
.hubindex__go{width:1.1rem;height:1.1rem;color:var(--accent-light);transition:transform var(--t-atom)}
.hubindex__a:hover .hubindex__go{transform:translateX(4px)}
/* plain — legal pages + 404 */
.hero--plain .hero__copy{max-width:52rem}
.hero--plain .display{max-width:24ch}
@media (max-width:900px){
  .hero__grid,.hero--media-left .hero__grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
  .hero--home .hero__media,.hero--service .hero__media{justify-self:start;width:min(100%,24rem)}
  .hero--media-left .hero__media{order:0}
  /* stacked: the field runs full width under the photo — the diptych selector is listed so its 50 % (same
     specificity, earlier) loses on BOTH sides */
  .hero--service::before,.hero--service.hero--media-left::before,.hero--service.hero--diptych::before{top:auto;left:0;right:0;width:auto;height:min(46%,22rem);border:0;border-top:1px solid var(--line)}
  .hero__grid--nd{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "card" "body";row-gap:var(--sp-4)}
  .hero__grid--void{grid-template-areas:"head" "body" "card"}
  .hero__grid--void .hero__media--nd{justify-self:start;width:min(100%,24rem)}
  .hero--diptych .hero__grid,.hero--diptych.hero--media-left .hero__grid{grid-template-columns:minmax(0,1fr);column-gap:0}
  .hero--diptych .hero__media{justify-self:start}
}
@media (max-width:640px){.callcard{padding:var(--sp-4) var(--sp-3) var(--sp-4)}.hero__badge--bl{left:0}}

/* ── 7 · the phone blocks ────────────────────────────────────────────────── */
/* stz_callband — THE DARK PHONE CARD INSIDE A LIGHT BAND (phone-block) */
.callband__grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--sp-5);align-items:center}
.callband__grid--solo{grid-template-columns:minmax(0,1fr)}
.callband--right .callband__grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.callband--right .pcard{order:2}
.callband__aside{min-width:0}
.callband__grid.seam-up .callband__aside{padding-top:var(--seam)}
@media (max-width:700px){.callband__grid.seam-up .callband__aside{padding-top:0}}
.callband__aside>:last-child{margin-bottom:0}
.pcard{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--sp-5);padding:clamp(1.5rem,1rem + 2vw,2.75rem);
  background-color:var(--dark);background-image:var(--brush-dark);border-top:5px solid var(--accent);box-shadow:var(--sh-2);min-width:0}
.callband__grid:not(.callband__grid--solo) .pcard{grid-template-columns:minmax(0,1fr)}
.pcard__copy{min-width:0}
.pcard__copy>:last-child{margin-bottom:0}
.pcard .stitle{max-width:22ch}
.pcard__p{color:var(--dark-text)}
.pcard__items{list-style:none;margin:var(--sp-3) 0;padding:0;border-top:1px solid var(--dark-line)}
.pcard__items li{margin:0;padding:.65rem 0;border-bottom:1px solid var(--dark-line);font-size:var(--fs-small);color:var(--dark-muted);line-height:1.55}
.pcard__items strong{color:#FFFFFF}
.pcard__call{align-self:center;min-width:0;padding-left:var(--sp-5);border-left:1px solid var(--dark-line)}
.callband__grid:not(.callband__grid--solo) .pcard__call{padding:var(--sp-4) 0 0;border-left:0;border-top:1px solid var(--dark-line)}
.pcard__label,.phonebox__label{margin:0 0 .1rem;font-size:var(--fs-eyebrow);font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--c-accent)}
.pcard .telbig,.phonebox .telbig{margin-bottom:var(--sp-3)}
.pcard__call .telbig,.phonebox .telbig,.ctaband__call .telbig,.callcard .telbig{display:flex;width:max-content}
@media (max-width:900px){
  .callband__grid,.callband--right .callband__grid{grid-template-columns:minmax(0,1fr)}
  .callband--right .pcard{order:0}
  .pcard{grid-template-columns:minmax(0,1fr)}
  .pcard__call{padding:var(--sp-4) 0 0;border-left:0;border-top:1px solid var(--dark-line)}
}
/* stz_phonebox — the compact phone card (dark by default; light for dark grounds) */
.phonebox{padding:var(--sp-5);min-width:0}
.phonebox--dark{background-color:var(--dark);background-image:var(--brush-dark);border-top:5px solid var(--accent)}
.phonebox--light{background:var(--surface);border:1px solid var(--line-strong);border-top:5px solid var(--accent)}
.phonebox .btn--call{margin-top:.25rem}
/* stz_callrow — a ruled call row for any band */
.callrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-3) var(--sp-5);align-items:center;padding:var(--sp-4) var(--sp-5);border-left:5px solid var(--accent)}
.callrow--light{background:var(--surface);border-top:1px solid var(--line-strong);border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.callrow--dark{background-color:var(--dark);background-image:var(--brush-dark)}
.callrow__t{margin:0 0 .2rem;font-size:var(--fs-h3);font-weight:800;line-height:1.25;color:var(--c-head)}
.callrow__s{margin:0;color:var(--c-muted);font-size:var(--fs-small)}
.callrow .telbig{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.25rem)}
@media (max-width:760px){.callrow{grid-template-columns:minmax(0,1fr);padding:var(--sp-4)}}
/* stz_ctaband — the dark closing band: the number as the largest type on the page */
.ctaband__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--sp-6);align-items:center}
.ctaband__copy>:last-child{margin-bottom:0}
.ctaband .lead{color:var(--dark-text)}
.ctaband__call{container-type:inline-size;min-width:0;padding:var(--sp-5) 0 var(--sp-5) var(--sp-5);border-left:1px solid var(--dark-line)}
.ctaband__call .telbig{margin-bottom:var(--sp-3)}
/* the number always fits its column (320–1440+): disc + number ≈ 8.7 em (Segoe UI) / ≈ 9.3 em (SF), so it is
   capped at 10.5 % of the call column (container units) and never larger than the viewport clamp; a wider
   fallback font breaks between the digit groups instead of scrolling the page */
.ctaband__call .telbig--xl{font-size:clamp(1.5rem,min(10.5cqi,1.1rem + 4.2vw),3.375rem)}
.ctaband__call .telbig__n{white-space:normal}
.ctaband .checks{margin-top:var(--sp-4)}
@media (max-width:900px){.ctaband__grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}.ctaband__call{padding:var(--sp-4) 0 0;border-left:0;border-top:1px solid var(--dark-line)}}

/* ── 8 · trust + the keypad ─────────────────────────────────────────────── */
/* the keypad: the LINES are the design — gap:1px over a rule-coloured ground, cells in the cell colour */
.keypad{display:grid;gap:1px;list-style:none;margin:0;padding:0;background:var(--c-line-strong);border:1px solid var(--c-line-strong)}
.keypad>*{margin:0;background:var(--c-cell)}
/* the segmented assurance slab (keypad--cta): at gap:2px three graphite cells read as ONE slab,
   the accent inlay edge on top. A hero slab crosses the hero seam (.seam-down). */
.slab{display:grid;gap:2px;margin:0;padding:0;list-style:none;background:#7E8892;border:2px solid #7E8892;border-top:5px solid var(--accent);box-shadow:var(--sh-2)}
.slab{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
@media (max-width:760px){.slab{grid-template-columns:minmax(0,1fr)}}
.slab__c{display:grid;align-content:start;grid-template-columns:auto minmax(0,1fr);gap:.4rem var(--sp-3);align-items:start;margin:0;padding:var(--sp-4);background-color:var(--primary);background-image:var(--brush-dark)}
.slab__ic{grid-row:span 2;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--dark-line-strong);border-radius:var(--r-sm);color:var(--accent-light)}
.slab__ic .i{width:21px;height:21px}
.slab__t{display:block;margin:0;font-size:1.0625rem;font-weight:800;line-height:1.3;color:#FFFFFF}
.slab__p{display:block;margin:0;font-size:.9375rem;line-height:1.5;color:var(--dark-muted)}
.slab--noic .slab__c{grid-template-columns:minmax(0,1fr)}
/* the quiet trust strip: one ruled line of short facts */
.tstrip{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:0;list-style:none;margin:0;padding:0;border-top:1px solid var(--c-line-strong);border-bottom:1px solid var(--c-line)}
.tstrip li{display:flex;align-items:flex-start;gap:.65rem;margin:0;padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;font-weight:800;font-size:var(--fs-small);line-height:1.4;color:var(--c-head)}
.tstrip li+li{padding-left:var(--sp-3);border-left:1px solid var(--c-line)}
.tstrip .i{width:1.25rem;height:1.25rem;color:var(--c-icon)}
.tstrip small{display:block;margin-top:.2rem;font-weight:400;color:var(--c-muted);font-size:.9375rem}
@media (max-width:860px){.tstrip{grid-template-columns:repeat(2,minmax(0,1fr))}.tstrip li:nth-child(odd){padding-left:0;border-left:0}.tstrip li:nth-child(n+3){border-top:1px solid var(--c-line)}}
@media (max-width:480px){.tstrip{grid-template-columns:minmax(0,1fr)}.tstrip li{padding-left:0!important;border-left:0!important}.tstrip li+li{border-top:1px solid var(--c-line)}}
/* zusagen — quiet promise cells of a keypad: icon + short title + one sentence (never a quote, name or star) */
.zcell{display:grid;align-content:start;grid-template-columns:auto minmax(0,1fr);gap:.35rem var(--sp-3);align-items:start;padding:var(--sp-4)}
.zcell .ictile{grid-row:span 2}
.zcell__t{margin:.55rem 0 0;font-size:1.125rem;line-height:1.3}
.zcell__p{margin:0;font-size:var(--fs-small);color:var(--c-muted);line-height:1.6}
.keypad--stack .zcell{grid-template-columns:minmax(0,1fr)}
.keypad--stack .zcell .ictile{grid-row:auto;margin-bottom:.4rem}
.keypad--stack .zcell__t{margin-top:0}

/* ── 9 · cards + the rows index ─────────────────────────────────────────── */
/* keypad cards: cells of one ruled object */
.kcard{position:relative;display:flex;flex-direction:column;min-width:0;padding:var(--sp-4);transition:background-color var(--t-comp)}
.kcard__media{margin:calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-4);overflow:hidden}
.kcard__media img{width:100%;aspect-ratio:13/10;object-fit:cover;transition:transform var(--t-comp)}
@media (min-width:981px){.kcard__media img{aspect-ratio:var(--ar,1.3)}}
@media (min-width:641px) and (max-width:980px){.kcard__media img{aspect-ratio:var(--art,1.3)}}
.kcard .ictile{margin-bottom:var(--sp-3)}
.kcard__t{margin:0 0 .45rem;font-size:var(--fs-h3)}
.kcard__t a{color:var(--c-head);text-decoration:none}
.kcard__t a::after{content:"";position:absolute;inset:0;z-index:1}
.kcard p{margin:0 0 .5rem;font-size:var(--fs-small);color:var(--c-muted);line-height:1.6}
.kcard__more{display:inline-flex;align-items:center;gap:.4rem;margin:auto 0 0!important;padding-top:var(--sp-3);font-weight:800;color:var(--c-accent)!important;font-size:.9375rem!important}
.kcard__more .i{width:1rem;height:1rem;transition:transform var(--t-atom)}
.kcard--link:hover{background:var(--c-flood)}
.kcard--link:hover .kcard__t a{color:var(--c-accent)}
.kcard--link:hover .kcard__more .i{transform:translateX(4px)}
.kcard--link:hover .kcard__media img{transform:scale(1.03)}
.kcard--link:focus-within{outline:3px solid var(--ring-out);outline-offset:-3px}
.kcard--link .kcard__t a:focus-visible{outline:none;box-shadow:none}
/* notched cards: the two-element form — the hairline traces the key-bow cut (clip-path clips borders) */
.ncards{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
@media (max-width:980px){.ncards{--c:2!important}}
@media (max-width:640px){.ncards{--c:1!important}}
.ncard{position:relative;flex:1 1 calc((100% - (var(--c,3) - 1) * var(--sp-4)) / var(--c,3));min-width:0;padding:1px;background:var(--c-line-strong);clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%);transition:filter var(--t-comp)}
.ncard__in{height:100%;display:flex;flex-direction:column;padding:var(--sp-4);background:var(--c-cell);clip-path:polygon(0 0,calc(100% - var(--notch) + .4px) 0,100% calc(var(--notch) - .4px),100% 100%,0 100%)}
.ncard__media{margin:calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-4);overflow:hidden}
.ncard__media img{width:100%;aspect-ratio:13/10;object-fit:cover}
.ncard .ictile{margin-bottom:var(--sp-3)}
.ncard__t{margin:0 0 .45rem;font-size:var(--fs-h3)}
.ncard__t a{color:var(--c-head);text-decoration:none}
.ncard__t a::after{content:"";position:absolute;inset:0;z-index:1}
.ncard p{margin:0 0 .5rem;font-size:var(--fs-small);color:var(--c-muted);line-height:1.6}
.ncard .kcard__more{margin-top:auto!important}
.ncard--inlay .ncard__in{box-shadow:inset 0 -4px 0 var(--accent)}
.ncard--link:hover{filter:var(--ds);background:var(--c-head)}
.ncard--link:hover .ncard__t a{color:var(--c-accent)}
.ncard--link:focus-within{background:var(--ring-out)}
.ncard--link .ncard__t a:focus-visible{outline:none;box-shadow:none}
/* the cabinet: ONE bordered object internally ruled — never floating cards */
.cabinet{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));border:1px solid var(--c-line-strong);background:var(--c-cell)}
.cabinet__pane{position:relative;min-width:0;padding:var(--sp-5) var(--sp-4)}
.cabinet__pane+.cabinet__pane{border-left:1px solid var(--c-line)}
.cabinet__n{display:block;margin:0 0 var(--sp-3);font-size:.875rem;font-weight:800;letter-spacing:.12em;color:var(--c-muted);font-variant-numeric:tabular-nums}
.cabinet .ictile{margin-bottom:var(--sp-3)}
.cabinet__t{margin:0 0 .45rem;font-size:var(--fs-h3)}
.cabinet__pane p{margin:0;font-size:var(--fs-small);color:var(--c-muted);line-height:1.6}
.cabinet__pane--inlay{box-shadow:inset 0 4px 0 var(--accent)}
@media (max-width:860px){.cabinet{grid-template-columns:minmax(0,1fr)}.cabinet__pane+.cabinet__pane{border-left:0;border-top:1px solid var(--c-line)}}
/* the outlined numeral pill (steps, rows) */
.numpill{display:inline-grid;place-items:center;flex:none;min-width:3.1rem;height:1.95rem;padding:0 .7rem;border:1.5px solid var(--c-line-strong);border-radius:var(--r-pill);
  font-size:.875rem;font-weight:800;line-height:1;color:var(--c-head);font-variant-numeric:tabular-nums;background:var(--c-cell)}
/* the rows index — a list that is also a gallery: one shared rule, the flood rises from the bottom
   edge, the thumbnail blooms from scale(.8) (decorative, alt="") */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-line-strong)}
.rows>li{margin:0;border-bottom:1px solid var(--c-line)}
.row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:var(--sp-3) var(--sp-4);padding:var(--sp-4) var(--sp-3);isolation:isolate}
.row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c-flood);transform:scaleY(0);transform-origin:bottom;transition:transform var(--t-comp)}
.row--link:hover::before,.row--link:focus-within::before{transform:scaleY(1)}
.row .numpill{align-self:start;margin-top:.15rem}
.row__body{min-width:0}
.row__t{margin:0 0 .3rem;font-size:clamp(1.1875rem,1.05rem + .55vw,1.5rem);line-height:1.25}
.row__t a{color:var(--c-head);text-decoration:none}
.row__t a::after{content:"";position:absolute;inset:0;z-index:1}
.row--link:hover .row__t a{color:var(--c-accent)}
.row__p{margin:0;max-width:62ch;font-size:var(--fs-small);color:var(--c-muted);line-height:1.6}
.row__chips{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:.65rem 0 0;padding:0}
.row__chips li{margin:0;padding:.2rem .7rem;border:1px solid var(--c-line);border-radius:var(--r-sm);font-size:.875rem;font-weight:700;color:var(--c-text);background:var(--c-cell)}
.row__thumb{display:block;width:150px;aspect-ratio:13/10;overflow:hidden;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.row__thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-comp),opacity var(--t-comp)}
.row__go{display:grid;place-items:center;width:var(--tap);height:var(--tap);border:1.5px solid var(--c-line-strong);border-radius:50%;color:var(--c-head);transition:background-color var(--t-atom),color var(--t-atom),border-color var(--t-atom)}
.row__go .i{width:1.1rem;height:1.1rem}
.row--link:hover .row__go{background:var(--primary);border-color:var(--primary);color:#FFFFFF}
.row--link:focus-within{outline:3px solid var(--ring-out);outline-offset:-3px}
.row--link .row__t a:focus-visible{outline:none;box-shadow:none}
@media (hover:hover) and (min-width:901px){
  .row__thumb img{opacity:0;transform:scale(.8)}
  .row--link:hover .row__thumb img,.row--link:focus-within .row__thumb img{opacity:1;transform:none}
}
@media (max-width:760px){
  .row{grid-template-columns:auto minmax(0,1fr);padding-inline:0;gap:var(--sp-2) var(--sp-3)}
  .row__thumb{display:none}
  .row__go{grid-column:2;justify-self:start;width:auto;height:auto;border:0;border-radius:0;padding:0}
  .row__go::after{content:attr(data-more);margin-left:.4rem;font-size:.9375rem;font-weight:800;color:var(--c-accent)}
  .row__go{display:flex;flex-direction:row-reverse;gap:.4rem;color:var(--c-accent)}
  .row--link:hover .row__go{background:none;color:var(--c-accent)}
}

/* ── 10 · icon rows, ticks, the checklist ───────────────────────────────── */
.iclist{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:var(--sp-4) var(--sp-5);list-style:none;margin:0;padding:0}
.iclist__i{display:grid;align-content:start;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-3);align-items:start;margin:0;min-width:0}
.iclist__c>:last-child{margin-bottom:0}
.iclist__t{margin:.6rem 0 .3rem;font-size:1.125rem;line-height:1.3}
.iclist__c>p:first-child{margin-top:.6rem}
.iclist p{margin:0 0 .4rem;font-size:var(--fs-small);color:var(--c-muted);line-height:1.6}
.iclist--ruled{gap:0 var(--sp-5)}
.iclist--ruled .iclist__i{padding-block:var(--sp-4);border-top:1px solid var(--c-line)}
.iclist--keypad{gap:1px;background:var(--c-line-strong);border:1px solid var(--c-line-strong)}
.iclist--keypad .iclist__i{padding:var(--sp-4);background:var(--c-cell)}
@media (max-width:900px){.iclist{grid-template-columns:repeat(min(var(--cols,2),2),minmax(0,1fr))}}
@media (max-width:640px){.iclist{grid-template-columns:minmax(0,1fr)}}
.checks{display:grid;gap:.5rem;list-style:none;margin:var(--sp-3) 0 0;padding:0}
.checks--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem var(--sp-4)}
.checks li{display:flex;align-items:flex-start;gap:.6rem;margin:0;font-size:var(--fs-small);line-height:1.55}
.checks__m{display:grid;place-items:center;flex:none;width:1.25rem;height:1.25rem;margin-top:.15em;border:1.5px solid var(--c-line-strong);border-radius:2px;color:var(--c-accent)}
.checks__m .i{width:.85rem;height:.85rem;stroke-width:2.8}
.checks--cross .checks__m{color:var(--danger);border-color:var(--danger-line)}
:is(.section--dark,.hero--on-dark,.pcard,.slab,.site-footer) .checks--cross .checks__m{color:var(--accent-light);border-color:var(--dark-line-strong)}
@media (max-width:640px){.checks--2{grid-template-columns:minmax(0,1fr)}}
/* the ruled checklist panel — drawn square boxes; never looks like a form (no inputs) */
.clist{background:var(--c-cell);border:1px solid var(--c-line-strong);box-shadow:var(--sh-1)}
.clist__head{display:flex;align-items:center;gap:.6rem;margin:0;padding:.9rem var(--sp-4);background:var(--primary);color:#FFFFFF;font-size:1.0625rem;font-weight:800;line-height:1.3}
.clist__head .i{color:var(--accent-light)}
.clist__list{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));list-style:none;margin:0;padding:0}
.clist__i{display:grid;align-content:start;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-3);align-items:start;margin:0;padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--c-line)}
.clist--c2 .clist__i:nth-child(even){border-left:1px solid var(--c-line)}
.clist--c2 .clist__i:nth-child(-n+2),.clist--c1 .clist__i:first-child{border-top:0}
.clist__box{display:grid;place-items:center;width:1.85rem;height:1.85rem;margin-top:.05rem;border:2px solid var(--c-line-strong);border-radius:2px;color:var(--c-head)}
.clist__box .i{width:1.05rem;height:1.05rem;stroke-width:2.6}
.clist__n{font-weight:800;font-size:.9375rem;font-variant-numeric:tabular-nums}
.clist__c>:last-child{margin-bottom:0}
.clist__t{margin:.15rem 0 .2rem;font-size:1.0625rem;line-height:1.35}
.clist__c p{margin:0;font-size:var(--fs-small);color:var(--c-muted);line-height:1.55}
.clist__i--warn .clist__box{border-color:var(--danger);color:var(--danger);background:var(--danger-tint)}
.clist__foot{display:flex;gap:.6rem;align-items:flex-start;margin:0;padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--c-line-strong);background:var(--c-cell-alt);font-size:var(--fs-small);color:var(--c-text)}
.clist__foot .i{color:var(--c-accent);margin-top:.15em}
@media (max-width:760px){.clist__list{grid-template-columns:minmax(0,1fr)}.clist--c2 .clist__i:nth-child(even){border-left:0}.clist--c2 .clist__i:nth-child(2){border-top:1px solid var(--c-line)}.clist__i{padding-inline:var(--sp-3)}}

/* ── 11 · steps: outlined numeral pills — stepper (horizontal) / timeline (vertical) ── */
.steps{display:grid;gap:var(--sp-5);list-style:none;margin:0;padding:0;counter-reset:none}
.step{position:relative;display:grid;gap:var(--sp-3);margin:0;min-width:0}
.step__c>:last-child{margin-bottom:0}
.step__t{margin:0 0 .35rem;font-size:1.1875rem;line-height:1.3}
.step__c p{margin:0 0 .4rem;font-size:var(--fs-small);color:var(--c-muted);line-height:1.6}
.step .numpill{position:relative;z-index:1;justify-self:start}
.steps--stepper{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--sp-4)}
.steps--stepper .step{grid-template-rows:auto 1fr;align-content:start}
.steps--stepper .step::before{content:"";position:absolute;top:calc(1.95rem / 2);left:3.4rem;right:calc(-1 * var(--sp-4) + .3rem);height:1px;background:var(--c-line-strong)}
.steps--stepper .step:last-child::before{display:none}
.steps--stepper .step__c{padding-top:var(--sp-3);border-top:3px solid var(--c-line)}
.steps--timeline{gap:0}
.steps--timeline .step{grid-template-columns:3.1rem minmax(0,1fr);gap:var(--sp-4);padding-bottom:var(--sp-5)}
.steps--timeline .step:last-child{padding-bottom:0}
.steps--timeline .step::before{content:"";position:absolute;left:1.55rem;top:1.95rem;bottom:0;width:1px;background:var(--c-line-strong)}
.steps--timeline .step:last-child::before{display:none}
.steps--timeline .step__c{padding-top:.1rem}
@media (max-width:980px){.steps--stepper{grid-template-columns:repeat(2,minmax(0,1fr))}.steps--stepper .step::before{display:none}
  .steps--stepper .step:last-child:nth-child(odd){grid-column:1/-1} /* 3 or 5 steps on two columns: no orphan half cell */}
@media (max-width:760px){
  .steps--stepper{grid-template-columns:minmax(0,1fr);gap:0}
  .steps--stepper .step{grid-template-columns:3.1rem minmax(0,1fr);grid-template-rows:auto;gap:var(--sp-4);padding-bottom:var(--sp-4)}
  .steps--stepper .step::before{display:block;left:1.55rem;right:auto;top:1.95rem;bottom:0;width:1px;height:auto}
  .steps--stepper .step:last-child::before{display:none}
  .steps--stepper .step__c{padding-top:.1rem;border-top:0}
}

/* ── 12 · FAQ — native <details> as a ruled ledger in the narrow band ───── */
.faq{max-width:var(--narrow);border-top:2px solid var(--c-line-strong)}
.faq--center{margin-inline:auto}
.faq__i{border-bottom:1px solid var(--c-line)}
.faq__i>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:var(--tap);padding:var(--sp-3) 0;cursor:pointer;list-style:none}
.faq__i>summary::-webkit-details-marker{display:none}
.faq__q{font-size:1.125rem;font-weight:800;line-height:1.4;color:var(--c-head)}
.faq__i>summary:hover .faq__q{color:var(--c-accent)}
.faq__ic{position:relative;flex:none;width:2.25rem;height:2.25rem;border:1.5px solid var(--c-line-strong);border-radius:50%;transition:background-color var(--t-atom),border-color var(--t-atom)}
.faq__ic::before,.faq__ic::after{content:"";position:absolute;left:50%;top:50%;width:.85rem;height:2px;margin:-1px 0 0 -.425rem;background:var(--c-head);transition:transform var(--t-comp)}
.faq__ic::after{transform:rotate(90deg)}
.faq__i[open] .faq__ic{background:var(--primary);border-color:var(--primary)}
.faq__i[open] .faq__ic::before,.faq__i[open] .faq__ic::after{background:#FFFFFF}
.faq__i[open] .faq__ic::after{transform:rotate(0)}
.faq__i>summary:focus-visible{outline-offset:2px}
.faq__a{padding:0 3.25rem var(--sp-4) 0;color:var(--c-text)}
.faq__a p{margin:0 0 .75rem;max-width:var(--measure);color:var(--c-muted)}
.faq__a>:last-child{margin-bottom:0}
@media (max-width:640px){.faq__a{padding-right:0}.faq__q{font-size:1.0625rem}}

/* ── 13 · notice — danger (110 / 112 as text) and info ──────────────────── */
.notice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-3) var(--sp-4);padding:var(--sp-4) var(--sp-5);border:1px solid var(--line);border-left-width:6px}
.notice--danger{background:var(--danger-tint);border-color:var(--danger-line);border-left-color:var(--danger)}
.notice--info{background:var(--surface);border-color:var(--line-strong);border-left-color:var(--accent)}
.notice__ic{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:var(--r-sm)}
.notice--danger .notice__ic{background:var(--surface);color:var(--danger);border:1px solid var(--danger-line)}
.notice--info .notice__ic{background:var(--alt);color:var(--accent-ink);border:1px solid var(--line)}
.notice__ic .i{width:1.45rem;height:1.45rem}
.notice__body{min-width:0}
.notice__body>:last-child{margin-bottom:0}
.notice__tag{margin:0 0 .25rem;font-size:var(--fs-eyebrow);font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.notice--danger .notice__tag{color:var(--danger-ink)}
.notice__h{margin:0 0 .45rem;font-size:var(--fs-h3);line-height:1.25;color:var(--head)}
.notice--danger .notice__h{color:var(--danger-ink)}
.notice__nums{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .75rem;margin:0 0 .6rem;font-size:1.0625rem}
.notice__num strong{font-size:1.375rem;color:var(--danger-ink);font-variant-numeric:tabular-nums}
.notice__sep{color:var(--danger-line)}
.notice__body p{color:var(--text)}
.notice__list{margin:.25rem 0 0;padding-left:1.1em}
.notice__list li{margin:0 0 .3rem;font-size:var(--fs-small)}
.notice__list li::marker{color:var(--danger)}
.notice--info .notice__list li::marker{color:var(--accent-ink)}
@media (max-width:560px){.notice{grid-template-columns:minmax(0,1fr);padding:var(--sp-4)}}

/* ── 14 · compare — the static two-up with a shared centre rule ─────────── */
.compare{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--c-line-strong);background:var(--c-cell)}
.compare__side{min-width:0;padding:var(--sp-5)}
.compare__side--b{position:relative;background:var(--c-cell-alt);border-left:1px solid var(--c-line-strong)}
.compare__side>:last-child{margin-bottom:0}
.compare__tag{display:inline-flex;align-items:center;gap:.45rem;margin:0 0 var(--sp-3);padding:.3rem .7rem;border:1px solid var(--c-line-strong);border-radius:var(--r-sm);
  font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-head)}
.compare__tag .i{width:1rem;height:1rem;color:var(--c-icon)}
.compare__h{margin:0 0 .5rem;font-size:var(--fs-h3)}
.compare__lead{color:var(--c-muted);font-size:var(--fs-small)}
.compare__vs{position:absolute;z-index:2;left:0;top:-1px;transform:translate(-50%,-50%);padding:.35rem .6rem;background:var(--c-head);color:var(--c-cell);
  font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1}
@media (max-width:760px){.compare{grid-template-columns:minmax(0,1fr)}.compare__side--b{border-left:0;border-top:1px solid var(--c-line-strong)}.compare__side{padding:var(--sp-4)}
  .compare__vs{left:var(--sp-4);top:0;transform:translateY(-50%)}}

/* ── 15 · split, frames, mosaic ─────────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-6);align-items:center}
.split--wide{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split--media-left .split__media,.split--media-left .split__aside{order:-1}
.split--media-left.split--wide{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split__copy{min-width:0}
.split__copy>:last-child{margin-bottom:0}
.split__copy .shead{margin-bottom:var(--sp-4)}
.split__paras p{max-width:var(--measure)}
.split__foot{margin-top:var(--sp-4)}
.split__media{position:relative;min-width:0;margin:0}
.split__aside{min-width:0}
.split__cap,.fig__cap,.mosaic__cap{margin:.6rem 0 0;font-size:.9375rem;color:var(--c-muted);line-height:1.5}
@media (max-width:900px){.split,.split--wide,.split--media-left.split--wide{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}.split--media-left .split__media,.split--media-left .split__aside{order:0}}
.frame{position:relative;overflow:hidden;background:var(--alt);margin:0}
.frame img{width:100%;height:100%;object-fit:cover;object-position:var(--focal,50% 50%)}
.frame--1310{aspect-ratio:13/10}
.frame--79{aspect-ratio:7/9}
.frame--52{aspect-ratio:5/2}
.frame--sq{aspect-ratio:1}
.frame--43{aspect-ratio:4/3}
.frame--32{aspect-ratio:3/2}
.frame--169{aspect-ratio:16/9}
.frame--notch{clip-path:polygon(0 0,calc(100% - var(--notch-photo)) 0,100% var(--notch-photo),100% 100%,0 100%)}
.fig{margin:0}
.mosaic{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:var(--sp-3);margin:0}
.mosaic__tall{grid-row:span 2;display:flex;flex-direction:column;min-width:0;margin:0}
.mosaic__tall .frame{flex:1;aspect-ratio:auto;min-height:100%}
.mosaic__half{min-width:0;margin:0}
.mosaic--right .mosaic__tall{grid-column:2;grid-row:1 / span 2}
.mosaic--right{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
@media (max-width:640px){.mosaic,.mosaic--right{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.mosaic__tall,.mosaic--right .mosaic__tall{grid-column:1 / -1;grid-row:auto}.mosaic__tall .frame{aspect-ratio:7/9;max-height:28rem}}

/* ── 16 · ledger, factors, key facts ────────────────────────────────────── */
.ledger{margin:0;border:1px solid var(--c-line-strong);background:var(--c-cell)}
.ledger--dark{background-color:var(--dark);background-image:var(--brush-dark)}
.ledger__dl{margin:0}
.ledger__row{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,1fr);border-top:1px solid var(--c-line)}
.ledger__row:first-child{border-top:0}
.ledger__l{display:flex;align-items:flex-start;gap:.6rem;margin:0;padding:var(--sp-4);background:var(--c-cell-alt);border-right:1px solid var(--c-line);
  font-weight:800;font-size:1.0625rem;line-height:1.35;color:var(--c-head)}
.ledger--dark .ledger__l{background:rgba(0,0,0,.18)}
.ledger__l .i{color:var(--c-icon);margin-top:.1em}
.ledger__c{margin:0;padding:var(--sp-4);min-width:0}
.ledger__c>:last-child{margin-bottom:0}
.ledger__c p{margin:0 0 .5rem;font-size:var(--fs-small);color:var(--c-text);line-height:1.6}
.ledger__head{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,1fr);background:var(--primary);color:#FFFFFF;font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.ledger__head span{padding:.7rem var(--sp-4)}
@media (max-width:700px){.ledger__row,.ledger__head{grid-template-columns:minmax(0,1fr)}.ledger__l{border-right:0;border-bottom:1px solid var(--c-line);padding:var(--sp-3) var(--sp-4)}.ledger__head span+span{display:none}}
/* factors — what changes the effort, without a single figure, as a ruled register */
.ftable{border:1px solid var(--c-line-strong);background:var(--c-cell)}
.ftable table{width:100%;border-collapse:collapse}
.ftable caption{padding:.75rem var(--sp-4);text-align:left;font-size:var(--fs-small);font-weight:800;color:var(--c-head);border-bottom:1px solid var(--c-line)}
.ftable thead th{padding:.75rem var(--sp-4);background:var(--primary);color:#FFFFFF;text-align:left;font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;vertical-align:bottom}
.ftable tbody th,.ftable td{padding:var(--sp-4);text-align:left;vertical-align:top;border-top:1px solid var(--c-line);font-size:var(--fs-small);line-height:1.6}
.ftable tbody th{width:30%;background:var(--c-cell-alt);border-right:1px solid var(--c-line);font-weight:800;font-size:1.0625rem;line-height:1.35;color:var(--c-head)}
.ftable td{color:var(--c-text)}
.ftable td+td{border-left:1px solid var(--c-line)}
.ftable__f{display:flex;align-items:flex-start;gap:.6rem}
.ftable__f .i{color:var(--c-icon);margin-top:.1em}
.ftable__foot{display:flex;gap:.6rem;margin:0;padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--c-line-strong);font-size:var(--fs-small);color:var(--c-text)}
@media (max-width:760px){
  .ftable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ftable tr{display:block;border-top:1px solid var(--c-line-strong)}
  .ftable tr:first-child{border-top:0}
  .ftable tbody th,.ftable td{display:block;width:auto;border:0;padding:var(--sp-3) var(--sp-3)}
  .ftable tbody th{border-bottom:1px solid var(--c-line)}
  .ftable td+td{border-left:0;border-top:1px dashed var(--c-line)}
  .ftable td[data-label]::before{content:attr(data-label);display:block;margin-bottom:.2rem;font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
}
.keyfacts{margin:0;border-top:1px solid var(--c-line-strong)}
.keyfacts__row{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:var(--sp-3);padding:.85rem 0;border-bottom:1px solid var(--c-line)}
.keyfacts dt{display:flex;align-items:flex-start;gap:.5rem;font-weight:800;color:var(--c-head);font-size:var(--fs-small);line-height:1.45}
.keyfacts dt .i{color:var(--c-icon);margin-top:.1em}
.keyfacts dd{margin:0;font-size:var(--fs-small);color:var(--c-text);line-height:1.55}
@media (max-width:520px){.keyfacts__row{grid-template-columns:minmax(0,1fr);gap:.15rem}}

/* ── 17 · chips, crumbs, the service strip ──────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:0}
.chips--center{justify-content:center}
.chips li{margin:0}
.chip{display:inline-flex;align-items:center;gap:.5rem;min-height:var(--tap);padding:.45rem 1.05rem;border:1.5px solid var(--c-line-strong);border-radius:var(--r-pill);
  background:var(--c-cell);color:var(--c-head);font-size:1rem;font-weight:800;line-height:1.25;text-decoration:none;transition:background-color var(--t-atom),color var(--t-atom),border-color var(--t-atom)}
.chip .i{width:1rem;height:1rem;transition:transform var(--t-atom)}
.chip:hover{background:var(--primary);border-color:var(--primary);color:#FFFFFF;text-decoration:none}
.chip:hover .i{transform:translateX(3px)}
.chip[aria-current="page"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
:is(.section--dark) .chip:hover{background:#FFFFFF;border-color:#FFFFFF;color:var(--head)}
.chips__note{margin:var(--sp-3) 0 0;font-size:var(--fs-small);color:var(--c-muted)}
.crumbs{margin:0 0 var(--sp-4)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .5rem;list-style:none;margin:0;padding:0;font-size:.9375rem}
.crumbs li{display:inline-flex;align-items:center;gap:.5rem;margin:0;color:var(--c-muted)}
.crumbs li+li::before{content:"";width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--c-text);font-weight:700}
.crumbs [aria-current]{font-weight:700;color:var(--c-head)}
.strip{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.6rem;list-style:none;margin:0;padding:0}
.strip li{display:flex;align-items:center;gap:1.6rem;margin:0;color:#FFFFFF;font-size:.9375rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.strip li+li::before{content:"";flex:none;width:22px;height:9px;background:var(--accent-light);
  clip-path:polygon(0 52%,30% 52%,30% 0,42% 0,42% 52%,50% 52%,50% 24%,61% 24%,61% 52%,67% 52%,67% 6%,78% 6%,78% 52%,85% 52%,85% 30%,95% 30%,95% 52%,100% 52%,100% 100%,0 100%)}
@media (max-width:640px){.strip{gap:.4rem 1rem}.strip li{gap:1rem;font-size:.8125rem;letter-spacing:.06em}}

/* ── 18 · prose (legal pages: measure ≤ 72ch) ───────────────────────────── */
.prose{max-width:72ch;color:var(--c-text);overflow-wrap:break-word}
.prose>:last-child{margin-bottom:0}
.prose h2{margin:var(--sp-5) 0 var(--sp-3);font-size:clamp(1.375rem,1.2rem + .7vw,1.75rem)}
.prose h3{margin:var(--sp-4) 0 .5rem;font-size:1.1875rem}
.prose h4{margin:var(--sp-3) 0 .4rem}
.prose ul{padding-left:1.15em}
.prose ul li::marker{color:var(--c-line-strong)}
.prose li{margin:0 0 .35rem}
.prose a{overflow-wrap:anywhere}
.prose--lead>p:first-child{font-size:var(--fs-lead);color:var(--c-muted)}
.prose--card{padding:var(--sp-5);background:var(--c-cell);border:1px solid var(--c-line-strong)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 var(--sp-3);font-size:var(--fs-small)}
.prose th,.prose td{padding:.5rem .75rem;border:1px solid var(--c-line);text-align:left;vertical-align:top}

/* ── 19 · THE SCHLÜSSELBRETT — the house types of the Bezirk as key tags on a ruled key board ── */
.schluesselbrett{display:grid;gap:var(--sp-5)}
.sbrett--intro{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start}
.sbrett--intro.sbrett--intro-right{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.sbrett--intro-right .sbrett__intro{order:2}
.sbrett__intro{min-width:0;position:sticky;top:110px}
.sbrett__intro>:last-child{margin-bottom:0}
.sbrett__main{min-width:0}
/* the board: a hairline keypad over line-strong; every row carries a graphite hook rail on top */
.sbrett__board{display:grid;grid-template-columns:repeat(60,minmax(0,1fr));gap:1px;list-style:none;margin:0;padding:0;
  background:var(--line-strong);border:1px solid var(--line-strong);--c-cell:var(--surface)}
.sbrett__tag{position:relative;grid-column:span var(--s,30);display:grid;grid-template-columns:4.75rem minmax(0,1fr);grid-template-rows:auto 1fr;gap:var(--sp-3) var(--sp-4);
  margin:0;min-width:0;padding:2.6rem var(--sp-4) var(--sp-4);background:var(--c-cell)}
.sbrett__tag::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:linear-gradient(180deg,#59636D 0,#3A434C 55%,#2A3138 100%);border-bottom:1px solid #1F252B}
.sbrett__hang{position:relative;grid-row:1 / span 2;align-self:start;width:4.75rem;margin-top:-2.6rem;color:var(--primary)}
.sbrett__svg{display:block;width:100%;height:auto;overflow:visible}
.sbrett__svg .peg{fill:#1F252B}
.sbrett__svg .pin{fill:var(--accent)}
.sbrett__svg .ring{fill:none;stroke:#8A949E;stroke-width:2.2}
.sbrett__svg .tag{fill:var(--primary);stroke:#1F252B;stroke-width:1.5;stroke-linejoin:round}
.sbrett__svg .eyelet{fill:var(--c-cell);stroke:#8A949E;stroke-width:2}
.sbrett__svg .edge{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1}
.sbrett__code{position:absolute;left:0;right:0;top:69%;transform:translateY(-50%);text-align:center;color:#FFFFFF;font-weight:800;font-size:1.0625rem;letter-spacing:.06em;line-height:1;font-variant-numeric:tabular-nums}
.sbrett__head{min-width:0}
.sbrett__label{display:inline-flex;align-items:center;margin:0 0 .45rem;padding:.2rem .6rem;border:1px solid var(--c-line-strong);border-radius:2px;
  font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-head);background:var(--c-cell)}
.sbrett__t{margin:0;font-size:var(--fs-h3);line-height:1.25}
.sbrett__body{grid-column:2;min-width:0}
.sbrett__rows{margin:0;border-top:1px solid var(--c-line)}
.sbrett__rows>div{padding:.6rem 0;border-bottom:1px solid var(--c-line)}
.sbrett__rows dt{margin:0 0 .1rem;font-size:.8125rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted)}
.sbrett__rows dd{margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--c-text)}
.sbrett__rows dd p{margin:0 0 .4rem}
.sbrett__rows dd p:last-child{margin-bottom:0}
.sbrett__say{display:flex;gap:.6rem;align-items:flex-start;margin:.75rem 0 0;padding:.65rem .8rem;background:var(--c-cell-alt);border-left:3px solid var(--c-line-strong);font-size:var(--fs-small);line-height:1.55;color:var(--c-text)}
.sbrett__say .i{flex:none;width:1.05rem;height:1.05rem;margin-top:.2em;color:var(--c-accent)}
.sbrett__say strong{display:block;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted)}
.sbrett__foot{margin:var(--sp-3) 0 0;font-size:.9375rem;color:var(--c-muted)}
/* three columns: the tag sits on top of its text */
.sbrett--c3 .sbrett__tag{grid-template-columns:4.25rem minmax(0,1fr);gap:var(--sp-3)}
.sbrett--c3 .sbrett__hang{width:4.25rem}
.sbrett--c3 .sbrett__body{grid-column:1 / -1}
.sbrett--c3 .sbrett__hang{grid-row:1}
.sbrett--c3 .sbrett__head{align-self:end;padding-bottom:.3rem}
/* compact: smaller tags, rows inline */
.sbrett--compact .sbrett__tag{grid-template-columns:3.6rem minmax(0,1fr);padding-top:2.2rem}
.sbrett--compact .sbrett__hang{width:3.6rem;margin-top:-2.2rem}
.sbrett--compact .sbrett__code{font-size:.875rem}
@media (min-width:1101px){.sbrett--compact:not(.sbrett--intro) .sbrett__rows>div{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:.75rem}.sbrett--compact:not(.sbrett--intro) .sbrett__rows dt{margin-top:.15rem}}
.sbrett--compact .sbrett__tag{padding-bottom:var(--sp-3)}
/* on a dark band: the board turns graphite, the tags steel */
.sbrett--dark .sbrett__board{background:var(--dark-line-strong);border-color:var(--dark-line-strong)}
.sbrett--dark .sbrett__tag::before{background:linear-gradient(180deg,#8B959F 0,#66707A 60%,#4B545D 100%);border-bottom-color:#0F1316}
.sbrett--dark .sbrett__svg .tag{fill:#DEE3E7;stroke:#0F1316}
.sbrett--dark .sbrett__svg .edge{stroke:rgba(255,255,255,.6)}
.sbrett--dark .sbrett__svg .peg{fill:#0F1316}
.sbrett--dark .sbrett__svg .pin{fill:var(--accent-light)}
.sbrett--dark .sbrett__code{color:var(--head)}
@media (max-width:1100px){.sbrett--intro,.sbrett--intro.sbrett--intro-right{grid-template-columns:minmax(0,1fr)}.sbrett--intro-right .sbrett__intro{order:0}.sbrett__intro{position:static}}
@media (max-width:980px){.sbrett__tag{grid-column:span var(--st,30)}.sbrett--c3 .sbrett__tag{grid-template-columns:4.25rem minmax(0,1fr)}}
@media (max-width:640px){
  .sbrett__tag{grid-column:span 60;grid-template-columns:3.9rem minmax(0,1fr);gap:var(--sp-3);padding:2.3rem var(--sp-3) var(--sp-4)}
  .sbrett__hang,.sbrett--c3 .sbrett__hang{width:3.9rem;margin-top:-2.3rem}
  .sbrett__body{grid-column:1 / -1}
  .sbrett__head{align-self:end;padding-bottom:.25rem}
  .sbrett__code{font-size:.9375rem}
}

/* ── 20 · motion — reveal, stagger; all inside prefers-reduced-motion ───── */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(var(--rise));transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
  .js .reveal.in{opacity:1;transform:none}
  .js .reveal.d2{transition-delay:.06s}.js .reveal.d3{transition-delay:.12s}.js .reveal.d4{transition-delay:.18s}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}

/* ── 21 · print ──────────────────────────────────────────────────────────── */
@media print{
  .site-header,.drawer,.callbar,.totop{display:none!important}
  .section--dark,.hero--on-dark,.pcard,.phonebox--dark,.slab,.slab__c,.hubindex,.ctaband,.site-footer,.ledger--dark{background:#fff!important;color:#000!important}
  .section--dark *,.hero--on-dark *,.pcard *,.slab *,.hubindex *,.site-footer *{color:#000!important}
  body{padding:0}
}