/* ============================================================================
   stahl-kupfer — the SHARED DESIGN LANGUAGE.
   This block is generated into all four pages so their styles cannot drift.
   Tokens: gunmetal steel-blue primary + copper CTA + brushed-metal neutrals.
   Every colour pair below is machine-verified — see design.md "Colour".
   ========================================================================== */
:root{
  /* --- surfaces (cool, faintly blue-cast: "brushed metal", never pure grey) --- */
  --bg:#f7f9fb; --surface:#ffffff; --surface-alt:#eef2f6; --steel:#e2e8ee;
  --line:#d2dae2;          /* decorative hairline */
  --line-strong:#7f90a1;   /* 3.28:1 — use when a border is the ONLY signal */
  --dark:#101923; --dark-2:#18232f; --dark-line:#2b3947; --dark-muted:#a3b5c6;

  /* --- ink --- */
  --text:#182430;          /* 15.74:1 on surface */
  --muted:#4a5a6a;         /*  7.09:1 on surface — "muted" is chroma, never contrast */
  --head:#101c28;

  /* --- brand --- */
  --primary:#22415c;       /* gunmetal steel-blue · 10.61:1 on surface */
  --primary-hover:#182f43;
  --primary-subtle:#e6edf3;
  --on-primary:#ffffff;

  /* --- the ONE reserved accent: the phone CTA --- */
  --cta:#b8541c;           /* copper · white on it 4.86:1 · as text on bg 4.60:1 */
  --cta-hover:#9c4415;
  --cta-light:#e8a06a;     /* copper for text ON DARK (8.16:1) — never use --cta there */
  --brand:#a8c61c;       /* the mark's yellow-green. A LOGO colour, not a UI colour:
                            it is 9.08:1 on --dark and 8.3:1 on --dark-2, but only
                            1.9:1 on white, so it never carries text or a border. */
  --cta-ink:#a04716;       /* copper for TEXT on any LIGHT band. --cta itself is 4.86:1 on
                              white but only 4.32 on --surface-alt, 4.11 on --primary-subtle
                              and 3.94 on --steel, so it is a FILL token, not a text token.
                              --cta-ink clears 4.5:1 on all five light grounds (worst 4.99). */
  --on-cta:#ffffff;

  --dark-3:#1e2c3a;        /* raised surface ON a dark band (icon badge, ledger key) */
  --dark-4:#22313f;        /* hover surface / ghost graphic on dark */
  --dark-line-2:#41576c;   /* hover border on dark */
  --on-dark:#d6e2ec;       /* body copy on any dark or primary fill (8.06:1 on --primary) */
  --tint-2:#dde7ef;        /* pressed/hover tint on light */
  --cta-tint:#fdf4ef;      /* ground of the info notice + accent hover tint */
  --focus:#0b1a26;         /* always paired with a white inner ring, see :focus-visible */
  --danger:#b3261e; --danger-tint:#fdf1f0;
  --success:#1c6b3f;

  /* --- personality --- */
  --r-xs:2px; --r-sm:4px; --r:8px; --r-lg:14px; --pill:999px;
  --notch:14px;                                   /* the key-bow corner cut */
  --sh-sm:0 1px 2px rgba(16,25,35,.06), 0 2px 6px rgba(16,25,35,.05);
  --sh:0 6px 18px rgba(16,25,35,.08);
  --sh-lg:0 18px 44px rgba(16,25,35,.13);
  --sh-dark:0 18px 44px rgba(0,0,0,.34);

  --c:1180px; --gut:24px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.22s; --dur-slow:.58s;
  --tap:44px;
  --f:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --f-num:ui-monospace,'SF Mono','Cascadia Mono','Segoe UI Mono',Menlo,Consolas,monospace;
}

/* ---------------------------------------------------------------- base ---- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--f);
  font-size:18px;              /* A10 floor — never drop to 16px */
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-underline-offset:.18em;
}
img{max-width:100%;height:auto;display:block}
/* An inline <svg> with a viewBox and no CSS size scales to whatever box it
   lands in. With `display:block` alone, every component had to remember to
   size its own icon — and the two that forgot rendered map pins at 186px
   inside a 40px pill and 162px beside a 12.5px eyebrow. axe passes, nothing
   overflows, the page validates. So the base rule carries a sane default and
   every component rule below (all of them more specific) still wins. */
svg{display:block;width:1.25em;height:1.25em;flex:none}
a{color:var(--primary);text-decoration-thickness:1px}
/* THE BUG THIS FIXES: a bare `a:hover` is (0,1,1) and beats `.btn{color:var(--btn-fg)}`
   (0,1,0), so on hover every button label turned copper — and on .btn--cta that is
   copper text on a darker-copper wipe, i.e. the label disappears. A link that IS a
   component owns its own colour; only prose links take the copper hover.
   (Same specificity trap as `.section--dark a` further down — attribute/state selectors
   quietly outrank plain class rules.) */
a:not(.btn):not(.callbtn):not(.calltab):not(.chip):not(.brand):not(.ftel):not(.telbig):hover{
  color:var(--cta-ink)}
/* hyphens:auto on a DISPLAY heading produces mid-word breaks that read as a defect
   ("Schließzylin-" / "der" at 48px). Headings get hyphens:manual with overflow-wrap
   as the safety net for a compound too long for its column; body copy — where German
   hyphenation genuinely helps the ragged edge — keeps hyphens:auto. */
h1,h2,h3,h4{color:var(--head);line-height:1.14;letter-spacing:-.018em;font-weight:800;
  overflow-wrap:break-word;hyphens:manual}
p{max-width:68ch;hyphens:auto}
ul,ol{margin:0;padding:0}
strong{color:var(--head);font-weight:700}
::selection{background:var(--cta);color:#fff}

/* one focus treatment that survives EVERY band: white inner ring + dark outer */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--focus);
  border-radius:var(--r-sm);
}
.section--dark :where(a,button,summary):focus-visible{
  box-shadow:0 0 0 3px var(--dark),0 0 0 6px var(--cta-light);
}

/* ------------------------------------------------------------ structure --- */
.wrap{max-width:var(--c);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:860px}
.wrap--wide{max-width:1320px}
.section{padding:clamp(58px,7.2vw,104px) 0;position:relative}
.section--tight{padding:clamp(40px,4.6vw,64px) 0}
.section--alt{background:var(--surface-alt)}
.section--surface{background:var(--surface)}
.section--dark{background:var(--dark);color:var(--dark-muted)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
/* ROOT-CAUSE FIX: a bare `.section--dark a` is (0,1,1) and silently beat every
   button's own (0,1,0) colour, so .btn/.callbtn inside a dark band rendered their
   label in --cta-light — copper-on-copper at ~1.4:1 on the CTA fill. A link that is
   a BUTTON carries its own colour; only prose links take the dark-band link colour. */
.section--dark a:not(.btn):not(.callbtn):not(.calltab):not(.chip):not(.brand):not(.ftel){
  color:var(--cta-light)}
.section--dark .lead{color:var(--on-dark)}

/* the SIGNATURE band: brushed steel. A material texture (german-design.md §4.3),
   not a decorative gradient — fine vertical hairlines at 2.5% over a flat tint. */
.section--steel{
  background:
    repeating-linear-gradient(90deg,
      rgba(34,65,92,.022) 0 1px, rgba(255,255,255,0) 1px 6px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.42) 0 1px, rgba(255,255,255,0) 1px 14px),
    var(--steel);
}
.section--dark.section--steel{
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.035) 0 1px, rgba(255,255,255,0) 1px 4px),
    var(--dark);
}

/* --------------------------------------------------------- typography ----- */
.display{
  font-size:clamp(34px,5.6vw,62px);font-weight:800;line-height:1.05;
  letter-spacing:-.026em;color:var(--head);
}
.display .l2{display:block;color:var(--primary)}
.section--dark .display,.hero--dark .display{color:#fff}
.section--dark .display .l2,.hero--dark .display .l2{color:var(--cta-light)}
.display--long{font-size:clamp(30px,4.4vw,48px)}

.stitle{font-size:clamp(27px,3.3vw,42px);font-weight:800;letter-spacing:-.022em}
.h3{font-size:clamp(19px,1.5vw,22px);font-weight:700;letter-spacing:-.012em;line-height:1.28}
.lead{font-size:clamp(18px,1.35vw,20.5px);line-height:1.66;color:var(--muted)}
.small{font-size:16.5px;line-height:1.6}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* section head — the eyebrow + title + optional lead, three rhythms */
.shead{margin-bottom:clamp(30px,3.4vw,50px);max-width:760px}
.shead--center{margin-inline:auto;text-align:center}
.shead--split{display:grid;gap:22px clamp(28px,4vw,64px);align-items:end;max-width:none;
  grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.shead--split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.shead .stitle+.lead{margin-top:15px}

/* eyebrow — variant A: copper key-bit mark + label */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:var(--cta-ink);margin-bottom:15px}
.section--dark .eyebrow{color:var(--cta-light)}
/* the key-bitting mark — 4 teeth at 30x12. Measured: a 7-tooth profile at 26x9 renders
   as an illegible smear, so the tooth count is capped at what survives at this size. */
.eyebrow::before{content:"";width:30px;height:12px;flex:none;background:currentColor;
  clip-path:polygon(0 100%,0 42%,20% 42%,20% 8%,40% 8%,40% 58%,60% 58%,60% 22%,80% 22%,80% 70%,100% 70%,100% 100%)}
/* eyebrow — variant B: boxed, for use where a rule would be too quiet */
.eyebrow--box{border:1.5px solid var(--line-strong);color:var(--primary);
  padding:7px 14px;letter-spacing:.13em;font-size:12px}
.eyebrow--box::before{display:none}
.section--dark .eyebrow--box{border-color:var(--dark-line);color:var(--cta-light)}
/* eyebrow — variant C: the pin-tumbler rule. Pins HANG from a shear line rather than
   standing on a baseline — bottom-anchored bars read as signal-strength bars, which is
   the wrong object entirely. Top-anchored under a rule reads as a lock cross-section. */
.pinrule{display:flex;align-items:flex-start;gap:5px;height:24px;margin-bottom:16px;
  padding-top:4px;border-top:2px solid var(--cta);width:45px}
.pinrule i{width:4px;background:var(--cta);display:block;border-radius:0 0 2px 2px}
.pinrule i:nth-child(1){height:13px}.pinrule i:nth-child(2){height:7px}
.pinrule i:nth-child(3){height:17px}.pinrule i:nth-child(4){height:10px}
.pinrule i:nth-child(5){height:15px}
.section--dark .pinrule{border-top-color:var(--cta-light)}
.section--dark .pinrule i{background:var(--cta-light)}

/* ------------------------------------------------------------- buttons ---- */
.btn{
  --btn-bg:var(--primary); --btn-fg:var(--on-primary); --btn-bg-h:var(--primary-hover);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-height:var(--tap);padding:14px 26px;border:0;border-radius:var(--r-sm);
  background:var(--btn-bg);color:var(--btn-fg);
  font:700 17px/1.2 var(--f);letter-spacing:.005em;text-decoration:none;cursor:pointer;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
  overflow:hidden;isolation:isolate;
}
/* The wipe MUST be z-index:-1, not 0. CSS paint order puts a positioned descendant at
   z-index:0 ABOVE the element's own inline content — so a button whose label is a bare
   text node (most of them) had its text painted over by the wipe on hover. `.btn>*`
   cannot rescue it: a text node is not an element and can never be lifted.
   At -1, and with `isolation:isolate` on .btn keeping it inside this stacking context,
   the wipe paints above the button's background and below the label, wrapped or not. */
.btn>*{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-bg-h);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.btn:hover::before{transform:scaleX(1)}
.btn:hover{box-shadow:var(--sh)}
.btn:active{transform:translateY(1px)}
.btn--cta{--btn-bg:var(--cta);--btn-fg:var(--on-cta);--btn-bg-h:var(--cta-hover)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--primary);--btn-bg-h:var(--primary);
  box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn--ghost:hover{color:#fff}
.section--dark .btn--ghost{--btn-fg:#fff;--btn-bg-h:#fff;box-shadow:inset 0 0 0 1.5px var(--dark-line)}
.section--dark .btn--ghost:hover{color:var(--dark)}
.btn--lg{padding:18px 32px;font-size:18.5px}
.btn--block{display:flex;width:100%}
.btn svg{width:20px;height:20px;flex:none}

/* the call button: label above the number, icon disc at the left.
   Lifted from the Dexon hero treatment, re-coloured to copper. */
.callbtn{
  display:inline-flex;align-items:center;gap:14px;min-height:var(--tap);
  padding:11px 26px 11px 11px;border-radius:var(--pill);
  background:var(--cta);color:#fff;text-decoration:none;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.callbtn:hover{background:var(--cta-hover);color:#fff;transform:translateY(-2px);box-shadow:var(--sh-lg)}
.callbtn .disc{width:46px;height:46px;flex:none;border-radius:50%;background:rgba(255,255,255,.19);
  display:grid;place-items:center}
.callbtn .disc svg{width:21px;height:21px;stroke:#fff}
/* opacity:.86 white over copper blends to #f5e7df = 4.02:1 — under AA for 12px text.
   Full white is 4.86:1. Never dim text on the accent fill to "soften" it. */
.callbtn .cap{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;line-height:1}
.callbtn .num{display:block;font-size:21px;font-weight:800;letter-spacing:-.01em;margin-top:3px;
  font-variant-numeric:tabular-nums}
/* Specificity note: `.section--dark a` is (0,1,1) and would otherwise win over a
   plain `.callbtn--dark` (0,1,0), painting this white-ground button in --cta-light
   at ~1.9:1. Doubling the class to (0,2,0) is what keeps it readable on a dark band. */
.callbtn.callbtn--dark{background:var(--surface);color:var(--primary)}
.callbtn.callbtn--dark:hover{background:var(--surface);color:var(--primary)}
.callbtn--dark .disc{background:var(--cta)}
.callbtn--dark .cap{color:var(--muted);opacity:1}

/* ------------------------------------------------------- icon badges ------ */
.ibadge{width:54px;height:54px;flex:none;border-radius:var(--r);display:grid;place-items:center;
  background:var(--primary-subtle);color:var(--primary);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.ibadge svg{width:26px;height:26px;stroke-width:1.7}
.ibadge--cta{background:var(--cta);color:#fff}
.ibadge--dark{background:var(--primary);color:#fff}
.ibadge--outline{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.ibadge--round{border-radius:50%}
.ibadge--lg{width:70px;height:70px}.ibadge--lg svg{width:32px;height:32px}
.ibadge--sm{width:40px;height:40px;border-radius:var(--r-sm)}.ibadge--sm svg{width:20px;height:20px}
.section--dark .ibadge{background:var(--dark-3);color:var(--cta-light)}

/* --------------------------------------------------------------- cards ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.2vw,30px);position:relative;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease)}
.card:hover{border-color:var(--line-strong);box-shadow:var(--sh);transform:translateY(-3px)}
.card h3,.card .h3{margin-bottom:9px}
.card p{color:var(--muted);font-size:17px}
.section--dark .card{background:var(--dark-2);border-color:var(--dark-line);color:var(--dark-muted)}
.section--dark .card:hover{border-color:var(--dark-line-2)}
.section--dark .card p{color:var(--dark-muted)}

/* the key-bow NOTCH — the style's structural signature: one cut top-right corner.
   NOTE: clip-path also clips border AND box-shadow, so a notched box can never carry
   either. Two forms exist, and both are honest about that:
     .card--notch  — a FILLED notched card (no edge). Only legible on a band that
                     contrasts its fill, so it ships on tint/steel/dark bands.
     .notch/.notch__in — a two-element notched card WITH a hairline edge: the outer
                     box is the line colour, the inner is inset 1px and re-clipped.
   Elevation on a clipped box must use filter:drop-shadow(), which is applied after
   clipping and therefore traces the notch; box-shadow would be cut away. */
.card--notch{
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%);
  border:0;background:var(--primary-subtle);box-shadow:none;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),filter var(--dur) var(--ease)}
.card--notch:hover{background:var(--tint-2);filter:drop-shadow(0 10px 20px rgba(16,25,35,.13))}
.section--dark .card--notch{background:var(--dark-2)}
.section--dark .card--notch:hover{background:var(--dark-4);filter:none}

.notch{--notch-line:var(--line);
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%);
  background:var(--notch-line);padding:1px;
  transition:background var(--dur) var(--ease),filter var(--dur) var(--ease)}
.notch:hover{--notch-line:var(--line-strong);filter:drop-shadow(0 10px 20px rgba(16,25,35,.12))}
.notch__in{
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% calc(var(--notch) - 1px),100% 100%,0 100%);
  background:var(--surface);padding:clamp(22px,2.2vw,30px);height:100%}
.section--dark .notch{--notch-line:var(--dark-line)}
.section--dark .notch:hover{--notch-line:var(--dark-line-2);filter:none}
.section--dark .notch__in{background:var(--dark-2)}

/* the COPPER INLAY — a 3px leading edge marking the emphasis card in a set */
.card--inlay{border-top:3px solid var(--cta)}
.card--lead{background:var(--primary);border-color:var(--primary);color:var(--on-dark)}
.card--lead h3,.card--lead .h3{color:#fff}
.card--lead p{color:var(--on-dark)}

/* -------------------------------------------------------------- grids ----- */
.grid{display:grid;gap:clamp(16px,1.7vw,24px)}
.g2{grid-template-columns:minmax(0,1fr)}
.g3{grid-template-columns:minmax(0,1fr)}
.g4{grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.split{display:grid;gap:clamp(28px,4vw,60px);align-items:center;grid-template-columns:1fr}
@media(min-width:900px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split--wide-l{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
  .split--wide-r{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
  .split--flip>*:first-child{order:2}
}

/* --------------------------------------------------------------- chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:9px;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--pill);
  background:var(--surface);border:1px solid var(--line);font-size:16px;font-weight:600;color:var(--text);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.chip svg{width:18px;height:18px}
.chip:hover{border-color:var(--cta);background:var(--cta-tint)}
.chip--solid{background:var(--primary-subtle);border-color:transparent;color:var(--primary)}
.section--dark .chip{background:var(--dark-3);border-color:var(--dark-line);color:var(--on-dark)}

/* ------------------------------------------------------- image slots ------ */
.imgph{position:relative;display:block;width:100%;background:var(--steel);border-radius:var(--r);
  overflow:hidden;color:var(--muted)}
.imgph img{width:100%;height:100%;object-fit:cover}
.imgph--notch{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);border-radius:0}
.ratio-16x9{aspect-ratio:16/9}.ratio-4x3{aspect-ratio:4/3}.ratio-1x1{aspect-ratio:1/1}
.ratio-3x4{aspect-ratio:3/4}.ratio-3x2{aspect-ratio:3/2}

/* ------------------------------------------------------------- motion ----- */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
/* one-shot clip reveal for images — fires from the same observer */
.wipe{clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease)}
.wipe.in{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .wipe{clip-path:none}
}

/* ======================================================================== */
/*  SHARED CHROME — identical on every page (navbar, call bar, to-top,      */
/*  footer). Built once here so the four pages cannot drift.                */
/* ======================================================================== */

/* --- topbar: the number is ALWAYS visible, never behind the hamburger --- */
.topbar{background:var(--dark);color:var(--dark-muted);font-size:15.5px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:var(--tap);flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:9px;
  min-height:var(--tap);font-weight:600}
.topbar a:hover{color:var(--cta-light)}
.topbar svg{width:17px;height:17px;stroke:var(--cta-light);flex:none}
.topbar .tb-note{display:none}
@media(min-width:760px){.topbar .tb-note{display:inline-flex;align-items:center;gap:9px}}

/* --- header --- */
header{position:sticky;top:0;z-index:120;background:var(--surface);
  border-bottom:1px solid var(--line);transition:box-shadow var(--dur) var(--ease)}
header.stuck{box-shadow:0 6px 20px rgba(16,25,35,.09)}
.navrow{display:flex;align-items:center;gap:18px;min-height:74px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand .bmark{width:40px;height:40px;flex:none;border-radius:var(--r-sm);background:var(--dark);
  display:grid;place-items:center;overflow:hidden}
/* The mark fills the tile at the favicon's own viewBox, so the header lockup
   and the browser tab are literally the same picture. It is a FILLED evenodd
   path — the shared `svg{}` sizing rule and the icon stroke must both be
   overridden here or the shield gains an outline it was never drawn with. */
.brand .bmark svg{width:100%;height:100%;fill:var(--brand);stroke:none}
.brand b{font-size:20px;font-weight:800;color:var(--head);letter-spacing:-.02em;line-height:1.1}
@media(max-width:400px){
  /* the lockup alone was 229px, overflowing a 320px viewport once the burger
     and gutters were counted. */
  .brand b{font-size:16.5px}.brand span{font-size:11px}
  .brand .bmark{width:34px;height:34px}
  .navrow{gap:10px}
}
.brand span{display:block;font-size:12.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.nav{display:none;gap:4px;list-style:none}
.nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 11px;
  font-size:16.2px;font-weight:600;color:var(--text);text-decoration:none;border-radius:var(--r-sm);
  white-space:nowrap;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--primary);background:var(--primary-subtle)}
.navcall{display:none}
.navcall span{white-space:nowrap}
/* raised from 1040: with four items plus the brand and the call button, the bar
   only genuinely fits from ~1120px. Below that the burger is the honest answer. */
@media(min-width:1120px){.nav{display:flex}.navcall{display:inline-flex}
  .brand b{white-space:nowrap}}
/* flex:none is load-bearing — as a flex item in .navrow the burger shrank to 38px
   wide at tablet widths, i.e. under the 44px floor for the ONE control that opens
   the menu. Width alone does not protect a flex item. */
.burger{display:inline-grid;place-items:center;flex:none;
  width:var(--tap);height:var(--tap);min-width:var(--tap);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer}
.burger svg{width:24px;height:24px;stroke:var(--head)}
@media(min-width:1120px){.burger{display:none}}
.mobmenu{display:none;border-top:1px solid var(--line);background:var(--surface)}
.mobmenu.open{display:block}
.mobmenu ul{list-style:none;padding:10px 0 18px}
.mobmenu a{display:flex;align-items:center;min-height:52px;font-size:17.5px;font-weight:600;
  color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.mobmenu a:hover{color:var(--cta-ink)}

/* --- sticky mobile call bar (C2: class matches (call|tel|phone|anruf) + position:fixed) --- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:150;display:none;
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -6px 22px rgba(16,25,35,.15);padding:9px 14px calc(9px + env(safe-area-inset-bottom))}
.callbar a{display:flex;align-items:center;justify-content:center;gap:11px;min-height:52px;
  border-radius:var(--r-sm);background:var(--cta);color:#fff;text-decoration:none;
  font-size:18.5px;font-weight:800;letter-spacing:.01em}
.callbar a svg{width:22px;height:22px;stroke:#fff;flex:none}
@media(max-width:1119px){.callbar{display:block}body{padding-bottom:84px}}

/* --- scroll to top --- */
.totop{position:fixed;right:16px;bottom:96px;z-index:140;width:48px;height:48px;
  display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;
  background:var(--surface);color:var(--primary);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(9px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),
             visibility var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{box-shadow:var(--sh);border-color:var(--line-strong)}
.totop svg{width:22px;height:22px;stroke:currentColor}
@media(min-width:1120px){.totop{bottom:24px}}

/* --- footer --- */
footer{background:var(--dark);color:var(--dark-muted);padding-top:clamp(48px,5.4vw,76px)}
footer h3{color:#fff;font-size:17px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:17px}
.fgrid{display:grid;gap:34px clamp(24px,3vw,48px);grid-template-columns:1fr}
@media(min-width:700px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.fgrid{grid-template-columns:1.4fr 1fr 1fr 1.1fr}}
footer ul{list-style:none}
/* 44px floor on footer links too: A11 only WARNS on non-call controls, but this
   audience is older and often one-handed on a phone, so the floor is worth the height. */
footer li{margin-bottom:0}
footer a{color:var(--dark-muted);text-decoration:none;
  display:inline-flex;align-items:center;min-height:var(--tap)}
footer a:hover{color:var(--cta-light);text-decoration:underline}
footer .ftel{display:inline-flex;align-items:center;gap:11px;min-height:var(--tap);
  color:#fff;font-size:21px;font-weight:800;font-variant-numeric:tabular-nums}
footer .ftel svg{width:21px;height:21px;stroke:var(--cta-light);flex:none}
.fbase{margin-top:clamp(34px,4vw,52px);border-top:1px solid var(--dark-line);
  padding:22px 0 26px;display:flex;flex-wrap:wrap;gap:10px 22px;
  align-items:center;justify-content:space-between;font-size:15.5px}
.fbase ul{display:flex;flex-wrap:wrap;gap:2px 20px}
.fbase li{margin:0}
.fbase a{min-height:var(--tap)}

/* skip link — visible only on focus, above the sticky header */
.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--cta);color:#fff;
  padding:13px 20px;font-weight:700;text-decoration:none;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0;color:#fff}

/* footer lockup reuses .brand with dark-band colours */
.brand--foot b{color:#fff}
.brand--foot span span{color:var(--dark-muted)}
.brand--foot .bmark{background:var(--dark-2);border:1px solid var(--dark-line)}
.brand--foot .bmark svg{fill:var(--brand)}

/* ======================================================================== */
/*  Two late primitives, both from the hotlock/dexon reads.                 */
/* ======================================================================== */

/* THE KEYPAD GRID — the layout lines ARE the design. One `gap:1px` over a line-
   coloured ground, cells painted in the surface colour, so the rules are drawn by
   the gap rather than by per-cell borders (the source hand-tuned border-width per
   cell at every breakpoint; this needs no arithmetic and reflows for free).
   Reads unmistakably as security hardware — the closest thing this style has to a
   trade-specific structure. Also the mechanism behind the segmented assurance slab:
   three cells at gap:2px read as ONE slab, not three cards. */
.keypad{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.keypad>*{background:var(--surface);padding:clamp(20px,2.2vw,30px);margin:0}
.keypad--tight{gap:2px;background:var(--line-strong);border:0}
.keypad--cta{gap:2px;background:var(--cta-hover);border:0}
.keypad--cta>*{background:var(--cta);color:#fff}
.keypad--cta>* :where(h2,h3,h4,.h3,strong){color:#fff}
.section--dark .keypad{background:var(--dark-line);border-color:var(--dark-line)}
.section--dark .keypad>*{background:var(--dark-2)}
@media(min-width:640px){.keypad--2{grid-template-columns:repeat(2,1fr)}
  .keypad--3{grid-template-columns:repeat(2,1fr)}.keypad--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.keypad--3{grid-template-columns:repeat(3,1fr)}
  .keypad--4{grid-template-columns:repeat(4,1fr)}.keypad--6{grid-template-columns:repeat(6,1fr)}}

/* PHONE NUMBER AS DISPLAY TYPE — no button chrome at all. On a page where the call
   IS the only conversion channel, a huge tappable number outranks another square
   button, and it still clears the 44px target by a wide margin. */
.telbig{display:inline-flex;align-items:center;gap:14px;text-decoration:none;
  font-size:clamp(30px,4.4vw,54px);font-weight:800;line-height:1.06;
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--head);
  transition:color var(--dur) var(--ease)}
.telbig:hover{color:var(--cta-ink)}
.telbig svg{width:.72em;height:.72em;flex:none;stroke:var(--cta);stroke-width:1.8}
.section--dark .telbig{color:#fff}
.section--dark .telbig:hover{color:var(--cta-light)}
.section--dark .telbig svg{stroke:var(--cta-light)}

/* THE CALL TAB — a copper block that reads as die-cut out of the image above it:
   one rounded corner, zero top radius, and a negative pull so it bites into the
   photo's bottom edge. From the `blocks` kit, where it is a generic tab; the recon
   flagged it as "the best-shaped button in the corpus and it wants a phone number",
   so here it only ever carries the number. Unlike .btn it has NO hover wipe —
   design-tokens.md §5 forbids animating the CTA; the hover is colour only. */
.calltab{
  display:inline-flex;align-items:center;gap:13px;position:relative;z-index:2;
  margin-top:-34px;padding:20px 30px 20px 26px;
  border-radius:0 var(--r-lg) 0 0;
  background:var(--cta);color:#fff;text-decoration:none;
  font-size:clamp(19px,1.7vw,24px);font-weight:800;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;min-height:var(--tap);
  transition:background var(--dur) var(--ease)}
.calltab:hover{background:var(--cta-hover);color:#fff}
.calltab svg{width:1.05em;height:1.05em;flex:none;stroke:currentColor;stroke-width:1.9}
.calltab .cap{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;line-height:1;margin-bottom:4px}

/* TAP-TARGET FLOOR for every click-to-call, whatever a page happens to call it.
   A11 measures the rendered box, so a number styled as pure display type still has
   to clear 44px. min-height only bites on a flex/block box, hence the display switch;
   verified that no tel: link on any page sits inline inside a <p>, so this is safe. */
/* :not(.navcall) is load-bearing: this rule is (0,1,1) and would otherwise beat
   `.navcall{display:none}` (0,1,0) below 1040px, resurrecting the desktop call
   button and pushing the burger off-screen on every phone <=390px. */
a[href^="tel:"]:not(.navcall){display:inline-flex;align-items:center;min-height:var(--tap)}
/* ============================================================================
   stahl-kupfer — SHARED LANGUAGE, PART 2.
   Section + layout primitives and the widget set, all drawn from the recon
   catalogue (`_recon-catalogue.md`). Neutral, composable bricks — never finished
   templates. Every value is a token; nothing here introduces a new theme value.
   ========================================================================== */

/* ------------------------------------------------------------------------- */
/*  A · THE SEAM HELPERS — the overlap grammar, made hard to get wrong.       */
/*  Rule 1 of the style is "every other band has exactly one element crossing  */
/*  its boundary". Two traps make it easy to botch by hand: the crossing       */
/*  element must be the FIRST or LAST child of its band (pulling up a mid-     */
/*  section element just collides with the heading above it), and it needs a   */
/*  z-index or the next band paints over it. These encode both.               */
/* ------------------------------------------------------------------------- */
.seam-up{position:relative;z-index:2;margin-top:calc(-1 * var(--seam,54px))}
.seam-down{position:relative;z-index:2;margin-bottom:calc(-1 * var(--seam,54px))}
.seam-sm{--seam:32px} .seam-lg{--seam:82px}
/* A .seam-down is only half the mechanism and on its own it does NOTHING: the pull is
   smaller than the band's own bottom padding, so the element never reaches the seam.
   It takes THREE classes, and all three are required:
     .section--hang   on the band the element hangs OUT of  (drops its bottom padding)
     .seam-down       on that band's LAST child
     .section--catch  on the following band                 (makes room for the overhang)
   The .seam-up counterpart needs only .seam-up on the next band's FIRST child, plus
   enough bottom padding on the band above for the element to sit in. */
.section--hang{padding-bottom:0}
.section--catch{padding-top:calc(clamp(58px,7.2vw,104px) + var(--seam,54px))}
@media(max-width:699px){
  /* below 700px the bands are too short for a crossing element to read as
     deliberate — it just looks like a mistake. Collapse them. */
  .seam-up,.seam-down{margin-top:0;margin-bottom:0}
  .section--catch{padding-top:clamp(58px,7.2vw,104px)}
}

/* ------------------------------------------------------------------------- */
/*  B · SECTION + LAYOUT PRIMITIVES                                           */
/* ------------------------------------------------------------------------- */

/* B1 · DIPTYCH — zero-gutter two-column band, each half carrying its OWN fill,
   meeting at the exact centreline with no divider. Off-centre text comes from
   asymmetric percentage padding, so it stays optically centred at every width
   with no media query for position. (hotlock: three visually different bands
   from one grid rule.) */
.diptych{display:grid;grid-template-columns:minmax(0,1fr)}
.diptych__half{padding:clamp(38px,5vw,72px) var(--gut)}
@media(min-width:900px){
  .diptych{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .diptych__half{padding:clamp(52px,6vw,92px) 8% clamp(52px,6vw,92px) 14%}
  .diptych__half+.diptych__half{padding:clamp(52px,6vw,92px) 14% clamp(52px,6vw,92px) 8%}
}
.diptych__half--dark{background:var(--dark);color:var(--dark-muted)}
.diptych__half--dark :where(h2,h3,h4){color:#fff}
.diptych__half--steel{background:var(--steel)}
.diptych__half--primary{background:var(--primary);color:var(--on-dark)}
.diptych__half--primary :where(h2,h3,h4){color:#fff}
/* steel ground so a slow or failed image reads as an empty slot, not a black void */
.diptych__half--media{padding:0;position:relative;min-height:320px;background:var(--steel)}
.diptych__half--media img,.diptych__half--media .imgph{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}

/* B2 · LEDGER — one hairline frame around rows whose narrow cell is a label tab
   and whose wide cell carries the content. A ruled register reads as a record;
   a card grid reads as marketing. Right for Öffnungszeiten, coverage, liability
   splits, credential lists. (dexon: 20% white label cell / 80% filled cell.) */
.ledger{border:1px solid var(--line);background:var(--surface)}
.ledger__row{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
.ledger__row:first-child{border-top:0}
.ledger__k{padding:16px clamp(16px,2vw,24px);font-weight:700;color:var(--head);
  background:var(--surface-alt);font-size:16.5px;display:flex;align-items:center}
.ledger__v{padding:16px clamp(16px,2vw,24px);color:var(--muted);font-size:16.8px;line-height:1.55}
@media(min-width:700px){
  .ledger__row{grid-template-columns:minmax(180px,.26fr) 1fr}
  .ledger__k{border-right:1px solid var(--line)}
}
.ledger--dark{border-color:var(--dark-line);background:var(--dark-2)}
.ledger--dark .ledger__row{border-top-color:var(--dark-line)}
.ledger--dark .ledger__k{background:var(--dark-3);color:#fff;border-right-color:var(--dark-line)}
.ledger--dark .ledger__v{color:var(--dark-muted)}

/* B3 · SIDE RAIL — a sticky column against a single-file stack. The spine of a
   long service page: the number stays reachable through explanatory copy.
   Single-viewport sticky only — never a multi-viewport scroll sequence. */
.rail{display:grid;gap:clamp(28px,4vw,54px);grid-template-columns:1fr;align-items:start}
@media(min-width:1000px){
  .rail{grid-template-columns:minmax(0,.4fr) minmax(0,1fr)}
  .rail__side{position:sticky;top:108px}
  .rail--right .rail__side{order:2}
}
.rail__main{display:grid;gap:clamp(30px,3.6vw,52px)}

/* B4 · OFFSET GRID — hand-placed masonry rhythm with zero JS and no library.
   Every nth item drops, so the grid reads composed rather than tabulated.
   (ekvator built this with presentational spacer divs; nth-child is cleaner.) */
.offgrid{display:grid;gap:clamp(16px,1.8vw,26px);grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:640px){
  .offgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offgrid>*:nth-child(2n){margin-top:clamp(20px,3vw,44px)}
}
@media(min-width:980px){
  .offgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .offgrid--3>*:nth-child(2n){margin-top:0}
  .offgrid--3>*:nth-child(3n-1){margin-top:clamp(24px,3.4vw,52px)}
}

/* B5 · PEEK RAIL — user-driven horizontal scroll with the next card bleeding off
   the edge as the affordance. scroll-snap, NOT an auto-carousel: nothing moves
   until the reader moves it, and every card is keyboard-reachable. */
.peek{display:flex;gap:clamp(14px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:14px;scrollbar-width:thin}
.peek>*{flex:0 0 clamp(250px,74vw,330px);scroll-snap-align:start}
@media(min-width:760px){.peek>*{flex-basis:330px}}
.peek::-webkit-scrollbar{height:8px}
.peek::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--pill)}
.peek::-webkit-scrollbar-track{background:var(--surface-alt)}

/* B6 · MOSAIC — one tall image beside two stacked halves. An asymmetric 1+2
   composition out of a plain two-column grid. */
.mosaic{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.mosaic{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.mosaic__col{display:grid;gap:14px;grid-template-rows:1fr 1fr}
.mosaic .imgph{height:100%}
.mosaic--flip>*:first-child{order:2}

/* B7 · COMPARE — a static two-up with a shared centre rule. This is the LEGAL
   form of a before/after: the source templates build that with <input
   type="range">, which the validator hard-fails. Nothing here is interactive. */
.compare{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--line);
  background:var(--surface)}
.compare__side{padding:clamp(22px,2.6vw,34px)}
.compare__side+.compare__side{border-top:1px solid var(--line)}
@media(min-width:760px){
  .compare{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .compare__side+.compare__side{border-top:0;border-left:1px solid var(--line)}
}
.compare__tag{display:inline-flex;align-items:center;gap:9px;margin-bottom:13px;
  font-size:12.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.compare__tag svg{width:17px;height:17px}
.compare__side--a .compare__tag{color:var(--success)}
.compare__side--b .compare__tag{color:var(--danger)}

/* B8 · TIMELINE — vertical connected steps. Order matters, so a stepper, not a
   grid. The connector is a pseudo-element so no extra markup carries it. */
.timeline{list-style:none;display:grid;gap:clamp(20px,2.4vw,32px);counter-reset:tl}
.timeline>li{position:relative;padding-left:64px;counter-increment:tl}
.timeline>li::before{content:counter(tl,decimal-leading-zero);position:absolute;left:0;top:0;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);color:var(--primary);box-shadow:inset 0 0 0 1.5px var(--line-strong);
  font:800 14px/1 var(--f-num);letter-spacing:.02em}
.timeline>li::after{content:"";position:absolute;left:21.5px;top:52px;bottom:calc(-1 * clamp(20px,2.4vw,32px));
  width:1px;background:var(--line)}
.timeline>li:last-child::after{display:none}
.section--dark .timeline>li::before{background:var(--dark-2);color:var(--cta-light);
  box-shadow:inset 0 0 0 1.5px var(--dark-line)}
.section--dark .timeline>li::after{background:var(--dark-line)}

/* B9 · STEPPER — the horizontal counterpart, for a sibling page that must not
   repeat the timeline's shape. */
.stepper{list-style:none;display:grid;gap:clamp(18px,2vw,26px);grid-template-columns:minmax(0,1fr);
  counter-reset:st}
@media(min-width:820px){.stepper{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stepper>li{counter-increment:st;position:relative;padding-top:56px}
.stepper>li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:0;
  width:42px;height:42px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--primary);color:#fff;font:800 14px/1 var(--f-num)}
.stepper>li::after{content:"";position:absolute;left:52px;top:20px;right:0;height:1px;
  background:var(--line)}
.stepper>li:last-child::after{display:none}
@media(max-width:819px){.stepper>li::after{display:none}}

/* B10 · NOTICE — a real callout, never a paragraph. --danger is the safety
   register (gas, electrical, 110/112); --info carries the copper. */
.notice{border:1px solid var(--danger);border-left-width:5px;background:var(--danger-tint);
  padding:clamp(22px,2.6vw,34px);border-radius:var(--r-sm)}
.notice__head{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.notice__ic{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--danger);color:#fff}
.notice__ic svg{width:22px;height:22px;stroke:currentColor}
.notice h2,.notice h3,.notice .h3{color:var(--danger)}
.notice--info{border-color:var(--cta);background:var(--cta-tint)}
.notice--info .notice__ic{background:var(--cta)}
.notice--info :where(h2,h3,.h3){color:var(--cta-ink)}

/* B11 · STAT RAIL — static figures only. The sources animate these with
   odometers; counters are on the banlist and an invented figure breaks iron
   rule 4, so a figure appears here only if the partner can defend it. */
.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:820px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stats>div{background:var(--surface);padding:clamp(20px,2.4vw,30px)}
.stats b{display:block;font-size:clamp(28px,3.4vw,40px);font-weight:800;color:var(--primary);
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1.05}
.stats span{display:block;margin-top:7px;font-size:16px;color:var(--muted);line-height:1.4}
.section--dark .stats{background:var(--dark-line);border-color:var(--dark-line)}
.section--dark .stats>div{background:var(--dark-2)}
.section--dark .stats b{color:var(--cta-light)}
.section--dark .stats span{color:var(--dark-muted)}

/* B12 · INDEX ROWS — the hover-flood service index. Three independent sources
   converged on this shape, and it is the answer to "never a bare <ul>": a list
   that is also a gallery. Four coordinated changes, all pure CSS. */
.rows{list-style:none;border-top:1px solid var(--line)}
.rows>li{position:relative;isolation:isolate;border-bottom:1px solid var(--line);
  transition:border-color var(--dur) var(--ease)}
.rows__flood{position:absolute;inset:auto 0 0 0;height:0;z-index:-1;background:var(--primary);
  transition:height .34s var(--ease)}
.rows>li:hover .rows__flood,.rows>li:focus-within .rows__flood{height:100%}
.rows__link{display:grid;gap:6px 20px;align-items:center;padding:clamp(20px,2.4vw,30px) 0;
  text-decoration:none;color:inherit;min-height:var(--tap)}
.rows__link::after{content:"";position:absolute;inset:0;z-index:1}
.rows>li:hover :where(.rows__t,.rows__d),.rows>li:focus-within :where(.rows__t,.rows__d){color:#fff}
.rows__t{font-size:clamp(19px,1.6vw,23px);font-weight:700;color:var(--head);
  transition:color var(--dur) var(--ease)}
.rows__d{font-size:16.8px;color:var(--muted);line-height:1.55;max-width:62ch;
  transition:color var(--dur) var(--ease)}
.rows__n{font:800 13px/1 var(--f-num);color:var(--muted);letter-spacing:.08em}
.rows__thumb{position:absolute;right:clamp(16px,2.4vw,36px);top:50%;translate:0 -50%;
  width:180px;aspect-ratio:16/11;overflow:hidden;border-radius:var(--r-sm);
  opacity:0;scale:.86;transition:opacity .3s var(--ease),scale .3s var(--ease);
  pointer-events:none;display:none}
@media(min-width:1040px){
  .rows__thumb{display:block}
  .rows__link{padding-right:230px}
  .rows>li:hover .rows__thumb,.rows>li:focus-within .rows__thumb{opacity:1;scale:1}
}

/* B13 · BAND STRIP — a full-bleed accent rule between sections, carrying the
   service vocabulary. The source MARQUEES this; continuous motion is banned, so
   it is static and reads as a hard divider. */
.strip{background:var(--cta);padding:22px 0}
.strip ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:12px clamp(16px,2vw,26px)}
.strip li{color:#fff;font-size:clamp(15px,1.5vw,19px);font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:12px clamp(16px,2vw,26px)}
.strip li:not(:last-child)::after{content:"";width:26px;height:11px;flex:none;background:#fff;
  opacity:.62;
  clip-path:polygon(0 100%,0 42%,20% 42%,20% 8%,40% 8%,40% 58%,60% 58%,60% 22%,80% 22%,80% 70%,100% 70%,100% 100%)}
.strip--dark{background:var(--dark)}
.strip--steel{background:var(--steel)}
.strip--steel li{color:var(--head)}
.strip--steel li:not(:last-child)::after{background:var(--cta);opacity:1}

/* ------------------------------------------------------------------------- */
/*  C · WIDGETS                                                              */
/* ------------------------------------------------------------------------- */

/* C1 · numeral pill — the step marker. Reads better than a bare digit or a
   filled circle, and it is the right shape for a numbered flow. */
.numpill{display:inline-flex;align-items:center;justify-content:center;min-width:44px;
  min-height:30px;padding:5px 14px;border-radius:var(--pill);border:1px solid var(--line);
  background:var(--surface-alt);color:var(--primary);font:800 13.5px/1 var(--f-num);
  letter-spacing:.04em}
.numpill--cta{background:var(--cta);border-color:var(--cta);color:#fff}
.section--dark .numpill{background:var(--dark-2);border-color:var(--dark-line);color:var(--cta-light)}

/* C2 · seal — a circular CREDENTIAL mark, sized to straddle a band seam.
   Deliberately NOT a rating badge: the sources put "4.5 (1,200 reviews)" in this
   slot, and a rating may only appear if it is real, attributable and evidenced. */
.seal{width:clamp(120px,12vw,148px);height:clamp(120px,12vw,148px);border-radius:50%;
  background:var(--cta);color:#fff;display:grid;place-content:center;justify-items:center;
  gap:3px;text-align:center;padding:12px;border:6px solid var(--surface)}
.seal svg{width:25px;height:25px;stroke:currentColor}
.seal b{font-size:12.5px;font-weight:800;line-height:1.15}
/* opacity:.92 white over copper blends to #f9f1ed = 4.35:1 — under AA for 11px text, and
   axe flags every seal on the page. Same trap the .callbtn .cap comment names: never dim
   text on the accent fill to "soften" it. Full white is 4.86:1. */
.seal i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase}
.seal--on-dark{border-color:var(--dark)}
.seal--primary{background:var(--primary)}

/* C3 · caption chip welded to an image corner — one widget, two content types
   (a Stadtteil on a job photo, a date on an article), which is where a gallery
   and a blog grid start reading as one family. */
.capchip{position:absolute;left:0;bottom:0;z-index:2;background:var(--surface);color:var(--head);
  padding:9px 15px;font-size:14px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  border-radius:0 var(--r-sm) 0 0;max-width:calc(100% - 22px)}
.capchip--cta{background:var(--cta);color:#fff}
.capchip--tr{left:auto;right:0;bottom:auto;top:0;border-radius:0 0 0 var(--r-sm)}

/* C4 · avatar cluster ending in a quote mark — the only social-proof widget in
   the whole corpus that carries zero numbers and zero stars, which is why it is
   the one that ports into a German trade site untouched. */
.avatars{display:flex;align-items:center;flex-wrap:wrap}
.avatars img,.avatars .avatars__q{width:56px;height:56px;border-radius:50%;object-fit:cover;
  border:3px solid var(--surface);flex:none}
.avatars>*+*{margin-left:-15px}
.avatars__q{background:var(--cta);color:#fff;display:grid;place-items:center}
.avatars__q svg{width:22px;height:22px}
.section--dark .avatars img,.section--dark .avatars .avatars__q{border-color:var(--dark)}

/* C5 · quote card — a speech card with a tail. No stars, no counts, no rating. */
.quote{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(22px,2.4vw,30px)}
.quote p{font-size:17.2px;line-height:1.62;color:var(--text)}
.quote__by{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cta-ink)}
.section--dark .quote{background:var(--dark-2);border-color:var(--dark-line)}
.section--dark .quote p{color:var(--on-dark)}
.section--dark .quote__by{color:var(--cta-light);border-top-color:var(--dark-line)}

/* C6 · flanked hairline — centred text with two rules growing to fill the row.
   Three declarations, and nothing like the usual border-top. */
.hrule{display:flex;align-items:center;gap:18px;font-size:14px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hrule::before,.hrule::after{content:"";flex:1;height:1px;background:var(--line)}
/* the LABEL needs the dark-band colour too, not only the two rules — --muted on --dark
   is 2.49:1. Every widget below that paints text in --muted needs the same partner rule. */
.section--dark .hrule{color:var(--dark-muted)}
.section--dark .hrule::before,.section--dark .hrule::after{background:var(--dark-line)}

/* C7 · colophon chip — a bordered circle holding one letter, beside a name.
   Pure editorial garnish; the right home for a Meister/Innung mark in a hero. */
.colophon{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;
  letter-spacing:.05em;color:var(--muted)}
.colophon i{font-style:normal;width:22px;height:22px;flex:none;border-radius:50%;
  border:1.6px solid var(--line-strong);display:grid;place-items:center;
  font:800 11px/1 var(--f-num);color:var(--primary)}
.section--dark .colophon{color:var(--dark-muted)}
.section--dark .colophon i{border-color:var(--dark-line);color:var(--cta-light)}

/* C8 · double-framed card — an outer tinted frame at 10px padding with an inner
   hairline. Two rules, and every card stops looking flat. */
.framed{background:var(--surface-alt);border-radius:var(--r-lg);padding:10px}
.framed__in{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.2vw,28px);height:100%}
.section--dark .framed{background:var(--dark-3)}
.section--dark .framed__in{background:var(--dark-2);border-color:var(--dark-line)}

/* C9 · expanding hover pill — an arrow square at rest that grows into a labelled
   button. max-width (not width) so there is no layout shift. */
.hpill{display:inline-flex;align-items:center;gap:0;min-height:var(--tap);
  border-radius:var(--pill);background:var(--primary);color:#fff;text-decoration:none;
  padding:6px;overflow:hidden}
.hpill__ic{width:32px;height:32px;flex:none;display:grid;place-items:center}
.hpill__ic svg{width:18px;height:18px;stroke:currentColor}
.hpill__t{max-width:0;opacity:0;white-space:nowrap;overflow:hidden;font-weight:700;font-size:16px;
  transition:max-width .34s var(--ease),opacity .28s var(--ease),padding .34s var(--ease);padding:0}
.hpill:hover,.hpill:focus-visible{color:#fff;background:var(--cta)}
.hpill:hover .hpill__t,.hpill:focus-visible .hpill__t{max-width:16rem;opacity:1;padding:0 12px 0 4px}

/* C10 · eyebrow variant D — a bordered chip with a solid accent disc flush in
   its left cap. Gives a section a coloured anchor without a coloured band. */
.eyebrow--cap{border:1.5px solid var(--line);border-radius:var(--pill);
  padding:4px 16px 4px 4px;color:var(--primary);letter-spacing:.11em;gap:11px}
.eyebrow--cap::before{width:28px;height:28px;border-radius:50%;background:var(--cta);
  clip-path:none}
.section--dark .eyebrow--cap{border-color:var(--dark-line);color:#fff}

/* C11 · crushed numeral — one deliberate break in the type system. A token-driven
   design with no exceptions reads machine-made; exactly one exception reads
   art-directed. Use it ONCE per page, never twice.
   THE NUMERAL IS DECORATION, AND THE MARKUP HAS TO SAY SO. At --line it carries
   1.41:1 (--dark-4 on --dark: 1.33:1) and could never clear AA as text — 3:1 is the
   floor even for display sizes. So the digits are passed in `data-n` and painted by the
   pseudo-element, the same move .timeline already makes for its step counters: a graphic
   in numeral form, not text a reader must decipher. Meaning belongs in the heading
   beside it. Written as <span class="bignum" data-n="01" aria-hidden="true"></span>. */
.bignum{font-size:clamp(56px,8vw,104px);font-weight:800;line-height:.72;letter-spacing:-.04em;
  color:var(--line);font-variant-numeric:tabular-nums;display:block}
.bignum::before{content:attr(data-n)}
.bignum--cta{color:var(--cta)}
.section--dark .bignum{color:var(--dark-4)}

/* C12 · hours rows — opening times as a real record, not a paragraph. */
.hours{list-style:none;display:grid;gap:0}
.hours li{display:flex;justify-content:space-between;gap:18px;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:16.8px}
.hours li:last-child{border-bottom:0}
.hours b{color:var(--head);font-weight:700}
.hours span{color:var(--muted);text-align:right}
.section--dark .hours li{border-bottom-color:var(--dark-line)}
.section--dark .hours b{color:#fff}
.section--dark .hours span{color:var(--dark-muted)}

/* C13 · breadcrumbs */
.crumbs{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;font-size:15.5px}
.crumbs li{display:inline-flex;align-items:center;gap:4px;color:var(--muted)}
.crumbs li+li::before{content:"";width:6px;height:6px;flex:none;border-right:1.5px solid var(--line-strong);
  border-top:1.5px solid var(--line-strong);rotate:45deg;margin-right:4px}
.crumbs a{display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap);
  color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--cta-ink);text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--head);font-weight:700}

/* C14 · in-page index — the sticky rail's table of contents. */
.toc{list-style:none;display:grid;gap:2px;border-left:2px solid var(--line)}
.toc a{display:flex;align-items:center;min-height:var(--tap);padding:6px 0 6px 16px;
  margin-left:-2px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;
  font-size:16.5px;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.toc a:hover,.toc a[aria-current="true"]{color:var(--primary);border-left-color:var(--cta);
  font-weight:700}

/* C15 · tab switcher — buttons with the real roles. The sources build this from
   radio inputs; any <input> is a hard validator fail, and site.js already wires
   [data-switcher] with roving focus. */
.tabs{display:grid;gap:clamp(24px,3vw,44px);grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:900px){.tabs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.tabs__list{display:grid;gap:0;list-style:none}
/* The source dims the inactive tab with opacity:.45. That cannot be rescued: --muted at
   .45 over white is 2.07:1, and even at .9 it is still 4.63:1 on --steel — an opacity
   veil scales the CONTRAST down along with the colour, so no value both dims visibly and
   clears AA on every band this style ships. The inactive state is therefore carried by
   colour and border, the way the rest of the style carries state. */
.tabs__btn{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:18px 0;border-bottom:1px solid var(--line);color:inherit;font:inherit;
  min-height:var(--tap);transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.tabs__btn:hover{border-bottom-color:var(--line-strong)}
.tabs__btn[aria-selected="true"]{border-bottom-color:var(--cta);border-bottom-width:2px}
.tabs__btn b{display:block;font-size:clamp(18px,1.5vw,21px);font-weight:700;color:var(--muted);
  margin-bottom:5px;transition:color var(--dur) var(--ease)}
.tabs__btn:hover b,.tabs__btn[aria-selected="true"] b{color:var(--head)}
.tabs__btn span{display:block;font-size:16.4px;color:var(--muted);line-height:1.55}
.section--dark .tabs__btn b,.section--dark .tabs__btn span{color:var(--dark-muted)}
.section--dark .tabs__btn:hover b,.section--dark .tabs__btn[aria-selected="true"] b{color:#fff}
.tabs__panel[hidden]{display:none}

/* C16 · FAQ accordion — native <details>, so it works with JS off; site.js only
   adds the one-open-at-a-time behaviour. */
.faq{display:grid;gap:12px}
.faq details{border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);overflow:hidden}
.faq summary{display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:18px clamp(16px,2vw,24px);min-height:var(--tap);cursor:pointer;list-style:none;
  font-size:clamp(17px,1.4vw,19.5px);font-weight:700;color:var(--head)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;flex:none;
  border-right:2px solid var(--cta);border-bottom:2px solid var(--cta);rotate:45deg;
  translate:0 -3px;transition:rotate var(--dur) var(--ease)}
.faq details[open] summary::after{rotate:-135deg;translate:0 3px}
.faq details[open]{border-color:var(--cta)}
.faq__a{padding:0 clamp(16px,2vw,24px) 20px;color:var(--muted);font-size:17px;line-height:1.62}
.section--dark .faq details{background:var(--dark-2);border-color:var(--dark-line)}
.section--dark .faq summary{color:#fff}
.section--dark .faq summary::after{border-color:var(--cta-light)}

/* C17 · check / icon list — the default treatment for factors, symptoms and
   benefits. Never a <ul> with the bullets deleted. */
.iclist{list-style:none;display:grid;gap:clamp(14px,1.7vw,22px)}
.iclist--2{grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.iclist--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.iclist li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.iclist__ic{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--primary-subtle);color:var(--primary)}
.iclist__ic svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.2}
.iclist--cta .iclist__ic{background:var(--cta);color:#fff}
.iclist b{display:block;color:var(--head);font-weight:700;font-size:17.5px;margin-bottom:3px}
.iclist p{font-size:16.6px;color:var(--muted);line-height:1.55}
.section--dark .iclist__ic{background:var(--dark-3);color:var(--cta-light)}
.section--dark .iclist b{color:#fff}
.section--dark .iclist p{color:var(--dark-muted)}

/* C18 · media frame — an image with the notch, a seam badge slot and a caption
   chip, so a photo is a composed object rather than a rectangle. */
.frame{position:relative}
.frame__seal{position:absolute;left:50%;bottom:0;translate:-50% 50%;z-index:3}
.frame__seal--r{left:auto;right:clamp(16px,4vw,54px);translate:0 50%}


/* ==========================================================================
   stahl-kupfer — SHARED LANGUAGE, PART 3 (this build).
   Composable section bricks generalised out of the reference pages' page-local
   layers, plus the WordPress-specific corrections. LAYOUT ONLY: every colour,
   font, radius and shadow below is a var() from Part 1.
   ========================================================================== */

/* ---------------------------------------------------------------- 0 · WP -- */
/* WordPress wraps every rendered template part in its own element. The theme
   emits <main> AROUND those wrappers (see functions.php) so the landmark is
   never nested inside <header>. These keep the wrappers out of the layout. */
.wp-block-template-part{display:contents}
main#main{display:block}
/* WP injects an empty <p> for a stray newline inside a pattern; never let one
   open a gap at the top of a band. */
.section>p:empty,.wrap>p:empty{display:none}

/* Root gutter protection: `.wrap` may be combined with a band class that also
   sets padding. Every band uses padding-block ONLY, so the gutter survives. */
.section{padding-block:clamp(58px,7.2vw,104px);padding-inline:0}
.section--tight{padding-block:clamp(40px,4.6vw,64px)}
.section--flush{padding-block:0}
.section--pt0{padding-top:0}
.section--pb0{padding-bottom:0}

/* A band that receives a crossing element must drop its own top padding AND
   establish a block formatting context, or the child's negative margin collapses
   THROUGH the parent and the whole band travels up instead of the element
   crossing. Encoded so forgetting the explicit class cannot silently kill it. */
.section:has(> .wrap > .seam-up:first-child),
.section:has(> .seam-up:first-child){padding-top:0;display:flow-root}
.section--hang,.section--catch{display:flow-root}

/* --------------------------------------------------- 0b · INK CONTAINMENT -- */
/* A dark PANEL inside a light band is dark by its own background, so none of the
   `.section--dark <x>` rules reach it. `.on-dark` re-declares the descendant set.
   It must RE-DECLARE, never re-reference: `background:var(--surface)` inside
   .on-dark would paint the light token again. */
.on-dark{background:var(--dark);color:var(--on-dark)}
.on-dark :where(h1,h2,h3,h4,.h3,.stitle,.display,strong,b){color:#fff}
.on-dark .lead,.on-dark p{color:var(--on-dark)}
.on-dark .eyebrow{color:var(--cta-light)}
.on-dark .pinrule{border-top-color:var(--cta-light)}
.on-dark .pinrule i{background:var(--cta-light)}
.on-dark a:not(.btn):not(.callbtn):not(.calltab):not(.chip):not(.brand):not(.ftel):not(.telbig){
  color:var(--cta-light)}
.on-dark .telbig{color:#fff}
.on-dark .telbig:hover{color:var(--cta-light)}
.on-dark .telbig svg{stroke:var(--cta-light)}
.on-dark .ibadge{background:var(--dark-3);color:var(--cta-light)}
.on-dark .iclist__ic{background:var(--dark-3);color:var(--cta-light)}
.on-dark .iclist b{color:#fff}
.on-dark .iclist p{color:var(--dark-muted)}
.on-dark .chip{background:var(--dark-3);border-color:var(--dark-line);color:var(--on-dark)}
.on-dark .numpill{background:var(--dark-2);border-color:var(--dark-line);color:var(--cta-light)}
.on-dark .hours li{border-bottom-color:var(--dark-line)}
.on-dark .hours b{color:#fff}
.on-dark .hours span{color:var(--dark-muted)}
.on-dark :where(a,button,summary):focus-visible{
  box-shadow:0 0 0 3px var(--dark),0 0 0 6px var(--cta-light)}
.on-dark--primary{background:var(--primary)}
/* An "island" of light INSIDE .on-dark must re-declare too — a class that undoes
   a context can never re-reference the context's own tokens. */
.on-dark .island{background:var(--surface);color:var(--text)}
.on-dark .island :where(h1,h2,h3,h4,.h3){color:var(--head)}
.on-dark .island p{color:var(--muted)}
.on-dark .island a:not(.btn):not(.callbtn):not(.calltab):not(.chip){color:var(--cta-ink)}

/* ------------------------------------------------------------- 1 · HEROES -- */
/* Eight variants over one grid. The plan assigns one per page; cohesion comes
   from the shared type + tokens, variety from the composition. */
.hero{position:relative;padding-block:clamp(44px,5.4vw,76px) clamp(52px,6.4vw,92px)}
.hero__grid{display:grid;gap:clamp(30px,4vw,58px);grid-template-columns:minmax(0,1fr);
  align-items:center}
@media(min-width:980px){
  .hero__grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
  .hero--wide-copy .hero__grid{grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr)}
  .hero--wide-media .hero__grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
  .hero--flip .hero__media{order:-1}
}
.hero__copy .lead{margin-top:17px;max-width:56ch}
.hero__cta{margin-top:clamp(22px,2.6vw,32px);display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero__media{position:relative;min-width:0}
.hero__note{margin-top:18px;font-size:16.4px;line-height:1.55;color:var(--muted);max-width:56ch}
.section--dark .hero__note,.hero--dark .hero__note{color:var(--dark-muted)}

/* v1 · centred poster — a single column, no media. For the calmest pages. */
.hero--center .hero__grid{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.hero--center .hero__copy{max-width:820px}
.hero--center .hero__copy .lead{margin-inline:auto}
.hero--center .hero__cta{justify-content:center}
.hero--center p{margin-inline:auto}

/* v2 · emergency bar — the number is the first thing, on a dark ground. */
.hero--bar{padding-block:clamp(30px,4vw,56px)}
.hero--bar .hero__grid{grid-template-columns:minmax(0,1fr);gap:clamp(22px,2.6vw,34px)}
@media(min-width:900px){
  .hero--bar .hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
}
.hero__callbox{padding:clamp(24px,2.8vw,36px);border:2px solid var(--cta);
  border-radius:var(--r-sm);background:rgba(184,84,28,.09)}
.hero__callbox .cap{display:block;font-size:12.5px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cta-light);margin-bottom:9px}

/* v3 · solid panel — copy sits inside one bordered slab. */
.hero--panel .hero__grid{grid-template-columns:minmax(0,1fr)}
.hero__panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(28px,3.4vw,54px);max-width:900px}
.section--dark .hero__panel{background:var(--dark-2);border-color:var(--dark-line)}

/* v4 · local context — a Bezirk line above the H1 and a fact rail below. */
.hero__context{display:inline-flex;align-items:center;gap:11px;padding:8px 16px;
  border-radius:var(--pill);background:var(--primary-subtle);color:var(--primary);
  font-size:15.5px;font-weight:700;margin-bottom:16px;max-width:100%}
.hero__context svg{width:17px;height:17px;flex:none;stroke:currentColor}
.section--dark .hero__context{background:var(--dark-3);color:var(--cta-light)}
.hero__facts{list-style:none;display:grid;gap:11px;margin-top:clamp(22px,2.6vw,30px)}
.hero__facts li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;
  align-items:start;font-size:16.6px;line-height:1.5}
.hero__facts li::before{content:"";width:11px;height:2px;margin-top:.68em;
  background:var(--cta);flex:none}
.section--dark .hero__facts li::before{background:var(--cta-light)}

/* v5 · the overhanging trust rail (dexon) — bleeds onto the media column. */
.hero__rail{margin-top:20px;padding:24px 22px 30px;border:2px solid var(--surface);
  border-bottom:0;background:rgba(16,25,35,.55)}
.hero__rail-lead{font-size:13px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--cta-light);margin-bottom:15px;line-height:1.3}
.hero__rail ul{list-style:none;display:grid;gap:11px;font-size:16.4px;line-height:1.45;
  color:var(--on-dark)}
.hero__rail li{position:relative;padding-left:23px}
.hero__rail li::before{content:"";position:absolute;left:0;top:.64em;width:11px;height:2px;
  background:var(--cta-light)}
@media(min-width:1100px){
  .hero--rail .hero__media{padding-left:80px}
  .hero--rail .hero__rail{position:absolute;left:-44px;top:50%;transform:translateY(-48%);
    width:244px;margin-top:0;z-index:2}
}

/* v6 · assurance list under the copy */
.hero__assure{list-style:none;display:grid;gap:12px;margin-top:clamp(24px,2.8vw,34px)}
.hero__assure li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;
  align-items:center;font-size:16.8px;font-weight:600;line-height:1.4}

/* v7 · alert band hero — a danger rule down the left edge */
.hero--alert{border-left:6px solid var(--danger)}
.hero--alert .hero__copy{padding-left:clamp(0px,1.4vw,18px)}

/* ------------------------------------------------- 2 · SEGMENTED SLAB ------ */
/* dexon · three flat cells split by 2px gaps read as ONE slab, not three
   cards. Its natural home is pulled up into the hero (.seam-up). */
/* NO `margin` shorthand here: `.slab` is declared after `.seam-up` at equal
   specificity, and a shorthand would silently zero the seam pull. */
.slab{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;
  background:var(--dark)}
@media(min-width:640px){.slab--2,.slab--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:760px){.slab--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:980px){.slab--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.slab__cell{background:var(--dark-2);color:var(--dark-muted);padding:clamp(24px,2.6vw,34px);
  min-width:0}
.slab__cell .h3{display:block;color:#fff;margin:17px 0 9px}
.slab__cell p{font-size:16.6px;line-height:1.6;max-width:46ch;color:var(--dark-muted)}
.slab__cell .ibadge{background:var(--dark-3);color:var(--cta-light)}
.slab__cell--cta{background:var(--cta);color:var(--on-cta)}
.slab__cell--cta .h3{color:var(--on-cta)}
.slab__cell--cta p{color:var(--on-cta)}
.slab__cell--cta .ibadge{background:none;color:var(--on-cta);
  box-shadow:inset 0 0 0 1.5px var(--on-cta)}
.slab__cell--cta a:not(.btn):not(.callbtn){color:#fff}

/* ------------------------------------------------- 3 · SERVICE INDEX ROWS -- */
/* neatzel x zerixs x fixbild — the answer to "never a bare <ul>": a list that is
   also a gallery. Complete at rest; hover and :focus-within are enhancements. */
.srows{list-style:none;margin:0}
.srow{position:relative;isolation:isolate;display:grid;align-items:start;
  grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2vw,28px);
  padding:clamp(22px,2.4vw,32px) clamp(4px,1vw,14px);
  border-top:1px solid var(--line);transition:border-color var(--dur) var(--ease)}
.srow:last-child{border-bottom:1px solid var(--line)}
.srow__flood{position:absolute;inset:0;z-index:0;background:var(--cta);
  transform:scaleY(0);transform-origin:bottom;transition:transform var(--dur-slow) var(--ease)}
.srow>*:not(.srow__flood){position:relative;z-index:1}
.srow__num{display:grid;place-items:center;min-width:56px;padding:5px 15px;
  border:1.5px solid var(--line-strong);border-radius:var(--pill);
  background:var(--primary-subtle);color:var(--primary);
  font-size:16px;font-weight:800;letter-spacing:.04em;line-height:1.5;
  font-variant-numeric:tabular-nums;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease)}
.srow__title{margin-bottom:8px;font-size:clamp(19px,1.6vw,23px);font-weight:700}
.srow__title a{text-decoration:none;color:var(--head);
  transition:color var(--dur) var(--ease);display:inline-flex;align-items:center;
  min-height:var(--tap)}
.srow__title a::after{content:"";position:absolute;inset:0;z-index:3}
.srow__body p{color:var(--muted);font-size:17px;max-width:66ch;
  transition:color var(--dur) var(--ease)}
.srow__chips{margin-top:14px}
.srow__chips .chip{transition:background var(--dur) var(--ease),
  border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.srow__thumb{display:block;overflow:hidden;border-radius:var(--r-sm);grid-column:2;
  width:100%;max-width:240px;margin-top:16px}
.srow__thumb img{width:100%;height:auto}
.srow:hover,.srow:focus-within{border-top-color:transparent}
.srow:hover+.srow,.srow:focus-within+.srow{border-top-color:transparent}
.srow:last-child:hover,.srow:last-child:focus-within{border-bottom-color:transparent}
.srow:hover .srow__flood,.srow:focus-within .srow__flood{transform:scaleY(1)}
.srow:hover .srow__title a,.srow:focus-within .srow__title a,
.srow:hover .srow__body p,.srow:focus-within .srow__body p{color:var(--on-cta)}
.srow:hover .srow__num,.srow:focus-within .srow__num{background:none;
  border-color:var(--on-cta);color:var(--on-cta)}
.srow:hover .srow__chips .chip,.srow:focus-within .srow__chips .chip{background:none;
  border-color:var(--on-cta);color:var(--on-cta)}
@media(min-width:1040px){
  .srow{padding-right:290px}
  .srow .srow__thumb{position:absolute;right:clamp(18px,2.4vw,40px);top:50%;
    width:240px;max-width:none;margin-top:0;z-index:1;pointer-events:none;
    transform:translateY(-50%) scale(.8);opacity:0;
    transition:transform var(--dur-slow) var(--ease),opacity var(--dur-slow) var(--ease)}
  .srow:hover .srow__thumb,.srow:focus-within .srow__thumb{
    transform:translateY(-50%) scale(1);opacity:1}
}

/* ------------------------------------------------------- 4 · CABINET ------- */
/* voltsflow · ONE bordered object internally ruled — not three floating
   cards. Deliberately not built from .card: that brings its own edge + lift. */
.cabinet{background:var(--surface);border:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1fr)}
.cabinet__pane{padding:clamp(26px,2.7vw,38px);min-width:0}
.cabinet__pane+.cabinet__pane{border-top:1px solid var(--line)}
.cabinet__pane .h3{margin:18px 0 10px}
.cabinet__pane p{color:var(--muted);font-size:17px}
@media(min-width:980px){
  .cabinet--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cabinet--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cabinet--3 .cabinet__pane+.cabinet__pane,
  .cabinet--2 .cabinet__pane+.cabinet__pane{border-top:0;border-left:1px solid var(--line)}
}
.section--dark .cabinet{background:var(--dark-2);border-color:var(--dark-line)}
.section--dark .cabinet__pane+.cabinet__pane{border-color:var(--dark-line)}
.section--dark .cabinet__pane p{color:var(--dark-muted)}

/* -------------------------------------------------------- 5 · PHONE CARD -- */
/* mykey · the one dark rectangle inside a light band is ALWAYS the phone
   card. It carries .on-dark so its ink is contained (see 0b). */
.phonecard{padding:clamp(28px,3vw,42px);align-self:stretch;
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%)}
.phonecard__title{margin-bottom:12px}
.phonecard>p{font-size:17px}
.phonecard__call{margin-top:24px}
.phonecard__notes{list-style:none;display:grid;gap:9px;margin-top:24px;padding-top:22px;
  border-top:1px solid var(--dark-line);font-size:16.2px;line-height:1.5}
.phonecard__notes li{position:relative;padding-left:24px}
.phonecard__notes li::before{content:"";position:absolute;left:0;top:.64em;width:12px;
  height:2px;background:var(--cta-light)}

/* ---------------------------------------------------------- 6 · USP PANEL -- */
.usp{display:grid;gap:clamp(24px,3vw,44px);grid-template-columns:minmax(0,1fr);
  align-items:center;background:var(--primary);color:var(--on-dark);
  padding:clamp(30px,3.6vw,56px);border-radius:var(--r)}
.usp :where(h2,h3,.h3,.stitle){color:#fff}
.usp p{color:var(--on-dark)}
/* `strong` inherits --head from the base rule and lands at 1.62:1 on --primary. */
.usp :where(strong,b,em){color:#fff}
.usp .ibadge{color:#fff}
.usp .eyebrow{color:var(--cta-light)}
.usp a:not(.btn):not(.callbtn):not(.telbig):not(.chip){color:var(--cta-light)}
.usp :where(a,button):focus-visible{box-shadow:0 0 0 3px var(--primary),0 0 0 6px var(--cta-light)}
@media(min-width:900px){.usp--split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.usp__marks{list-style:none;display:grid;gap:14px;min-width:0}
.usp__marks li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;
  align-items:start;font-size:16.8px;line-height:1.5}
.usp__marks .ibadge{background:rgba(255,255,255,.13);color:#fff}
.usp--steel{background:var(--steel);color:var(--text)}
.usp--steel :where(h2,h3,.h3,.stitle){color:var(--head)}
.usp--steel p{color:var(--muted)}
.usp--steel :where(strong,b,em){color:var(--head)}
.usp--steel .eyebrow{color:var(--cta-ink)}
.usp--steel a:not(.btn):not(.callbtn):not(.telbig):not(.chip){color:var(--cta-ink)}
.usp--steel .ibadge{background:var(--surface);color:var(--primary)}
.usp--steel :where(a,button):focus-visible{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--focus)}

/* --------------------------------------------------------- 7 · TRUST ROW -- */
.trustrow{list-style:none;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.trustrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.trustrow--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trustrow--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.trustrow li{background:var(--surface);padding:clamp(18px,2vw,26px);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.trustrow b{display:block;font-size:16.8px;font-weight:700;color:var(--head);line-height:1.35}
.trustrow span{display:block;font-size:15.6px;color:var(--muted);line-height:1.45;margin-top:3px}
.section--dark .trustrow{background:var(--dark-line);border-color:var(--dark-line)}
.section--dark .trustrow li{background:var(--dark-2)}
.section--dark .trustrow b{color:#fff}
.section--dark .trustrow span{color:var(--dark-muted)}

/* ------------------------------------------------------ 8 · GLOSSARY LIST -- */
/* A real <dl>. Each term is an anchor target so the glossary is linkable. */
.glist{display:grid;gap:0;border-top:1px solid var(--line)}
.glist__item{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;
  padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid var(--line);scroll-margin-top:120px}
@media(min-width:820px){
  .glist__item{grid-template-columns:minmax(180px,.3fr) minmax(0,1fr);gap:8px clamp(20px,3vw,44px)}
}
.glist dt{font-size:18.5px;font-weight:800;color:var(--head);line-height:1.3;min-width:0;
  overflow-wrap:break-word}
.glist dd{margin:0;font-size:17px;color:var(--muted);line-height:1.6;min-width:0}
.glist dd a{color:var(--cta-ink)}
.section--dark .glist{border-top-color:var(--dark-line)}
.section--dark .glist__item{border-bottom-color:var(--dark-line)}
.section--dark .glist dt{color:#fff}
.section--dark .glist dd{color:var(--dark-muted)}

/* ---------------------------------------------------------- 9 · CTA BAND --- */
.ctaband{display:grid;gap:clamp(24px,3vw,44px);grid-template-columns:minmax(0,1fr);
  align-items:center}
@media(min-width:900px){.ctaband{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.ctaband__act{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
@media(min-width:900px){.ctaband--right .ctaband__act{align-items:flex-end;text-align:right}}
.ctaband__act .small{color:var(--dark-muted)}

/* --------------------------------------------------------- 10 · WORK GRID -- */
/* ekvator · hand-placed offset rhythm, zero JS, caption chip welded to each
   image's bottom-left corner. */
.workgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,1.8vw,26px);
  align-items:start;position:relative;z-index:1}
.workgrid__item{position:relative;min-width:0}
@media(min-width:640px){
  .workgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workgrid__item:nth-child(2n){margin-top:38px}
}
@media(min-width:980px){
  .workgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .workgrid--3 .workgrid__item:nth-child(2n){margin-top:0}
  .workgrid--3 .workgrid__item:nth-child(3n+2){margin-top:58px}
  .workgrid--3 .workgrid__item:nth-child(3n){margin-top:26px}
}

/* ------------------------------------------------------ 11 · SAFETY ALERT -- */
.alert{background:var(--danger-tint);border:2px solid var(--danger);border-radius:var(--r);
  padding:clamp(24px,3vw,42px);display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(18px,2.4vw,32px);align-items:start}
@media(min-width:760px){.alert{grid-template-columns:auto minmax(0,1fr)}}
.alert__mark{width:56px;height:56px;flex:none;color:var(--danger)}
.alert__mark svg{width:100%;height:100%}
.alert__title{color:var(--danger)}
.alert__body>p{margin-top:14px;color:var(--text);font-size:17.5px}
.alert__list{list-style:none;display:grid;gap:12px;margin-top:clamp(18px,2.2vw,26px)}
.alert__list li{position:relative;padding-left:34px;font-size:17px;line-height:1.5;
  color:var(--text)}
.alert__list li::before{content:"";position:absolute;left:0;top:.16em;width:22px;height:22px;
  border-radius:50%;background:var(--danger)}
.alert__list li::after{content:"";position:absolute;left:10px;top:calc(.16em + 5px);
  width:2px;height:7px;border-radius:1px;background:var(--surface);
  box-shadow:0 9px 0 0 var(--surface)}
.alert--info{background:var(--cta-tint);border-color:var(--cta)}
.alert--info .alert__mark,.alert--info .alert__title{color:var(--cta-ink)}
.alert--info .alert__list li::before{background:var(--cta)}

/* ------------------------------------------------- 12 · CREDENTIAL LEDGER -- */
/* ekvator · rows sandwiched by full-width rules. A ruled register reads as
   real credentials; a logo carousel reads as marketing. */
.credledger{border-top:1px solid var(--line-strong)}
.credledger__row{display:grid;grid-template-columns:minmax(0,1fr);
  border-bottom:1px solid var(--line-strong)}
.credledger__cell{padding:20px 4px;display:grid;gap:5px;align-content:start;min-width:0}
.credledger__k{font-size:12.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--primary);line-height:1.3}
.credledger__v{font-size:18.5px;font-weight:700;color:var(--head);line-height:1.3;
  letter-spacing:-.012em;overflow-wrap:break-word}
@media(min-width:640px){
  .credledger__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .credledger__cell{padding-inline:20px}
  .credledger__cell:first-child{padding-left:4px}
}
@media(min-width:980px){.credledger__row--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.section--dark .credledger{border-top-color:var(--dark-line)}
.section--dark .credledger__row{border-bottom-color:var(--dark-line)}
.section--dark .credledger__k{color:var(--cta-light)}
.section--dark .credledger__v{color:#fff}

/* ------------------------------------------------------------ 13 · PROSE --- */
.prose{max-width:74ch}
.prose p+p{margin-top:16px}
.prose p{font-size:17.6px;color:var(--muted)}
.prose--lead p:first-child{font-size:clamp(18px,1.35vw,20.5px);line-height:1.66;color:var(--muted)}
.section--dark .prose p{color:var(--dark-muted)}

/* --------------------------------------------------- 14 · CONTAINER SAFETY - */
/* A grid sized by VIEWPORT width stays N-across inside a narrow column and the
   cells overflow. These bricks may sit in a split column, so they size by their
   own container. container-type on an element does nothing for itself — the
   query must target a DESCENDANT, hence the wrapper. */
.cq{container-type:inline-size}
@container (max-width: 560px){
  .cq .g3,.cq .g4,.cq .keypad--3,.cq .keypad--4,.cq .trustrow,
  .cq .stats,.cq .cabinet,.cq .stepper,.cq .slab,.cq .usp--split,
  .cq .compare,.cq .ledger__row,.cq .credledger__row,.cq .mosaic,
  .cq .glist__item,.cq .iclist--2{grid-template-columns:minmax(0,1fr)}
  .cq .peek>*{flex-basis:min(78%,300px)}
}

/* -------------------------------------------------- 15 · GERMAN COMPOUNDS -- */
/* A 25-character compound overflows its cell and paints over the next column —
   it reads like a line-height bug and is not one. Soft hyphens in the copy plus
   these two declarations are the fix. */
:where(h1,h2,h3,h4,.h3,.stitle,.display,.srow__title,.glist dt,.credledger__v,
       .card b,.iclist b,.trustrow b,.ledger__k,.chip,.rows__t){
  overflow-wrap:break-word;word-break:normal;min-width:0}
.chip{max-width:100%}

/* ------------------------------------------------------- 16 · UTILITIES ---- */
.mt-0{margin-top:0}.mt-s{margin-top:clamp(16px,1.8vw,24px)}
.mt-m{margin-top:clamp(24px,2.8vw,38px)}.mt-l{margin-top:clamp(34px,4vw,56px)}
.tac{text-align:center}
.maxw-m{max-width:760px}.maxw-l{max-width:960px}.mi-auto{margin-inline:auto}
.stack{display:grid;gap:clamp(20px,2.4vw,32px)}
.stack--s{gap:clamp(14px,1.6vw,20px)}
.flexrow{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.anchor{scroll-margin-top:118px}


/* ==========================================================================
   SEAM HELPERS, RE-DECLARED LAST.
   Rule 1 of this style is "every other band has exactly one element crossing
   its boundary", and it is easy to lose by accident: any later component rule
   carrying a `margin` SHORTHAND at equal specificity silently zeroes the pull,
   and `margin-block` does nothing at all on an inline element. So the helpers
   are re-declared at the end of the sheet, as longhands, with block layout
   forced. Measure the result against the receiving band's own box top — never
   by grepping for negative margins.
   ========================================================================== */
.seam-up{position:relative;z-index:2;margin-top:calc(-1 * var(--seam,54px));margin-bottom:0}
.seam-down{position:relative;z-index:2;margin-bottom:calc(-1 * var(--seam,54px));margin-top:0}
.seam-up:not(.slab):not(.grid):not(.keypad):not(.cabinet),
.seam-down:not(.slab):not(.grid):not(.keypad):not(.cabinet){display:block}
.seam-sm{--seam:32px} .seam-lg{--seam:82px}
@media(max-width:699px){
  .seam-up{margin-top:0}
  .seam-down{margin-bottom:0}
  .section--catch{padding-top:clamp(58px,7.2vw,104px)}
}

/* `.seal` is a grid box with an explicit width, so text-align:center on its
   parent does nothing — it needs its own auto inline margins. */
.center-x{display:grid;justify-items:center}
.tac > .seal,.center-x > .seal{margin-inline:auto}

/* ==========================================================================
   THE TOPBAR IS PART OF THE BANNER.
   Left outside <header> it is page content in no landmark at all, which is an
   axe `region` violation on every page. Moved inside, it would also stick — and
   44px of permanently parked chrome on top of a 74px navbar is a lot on a
   phone. Pinning the header at `top: -44px` lets exactly the topbar scroll away
   while the navigation row still sticks: one element, both behaviours.
   ========================================================================== */
.site-header{position:sticky;top:calc(-1 * var(--topbar-h,44px));z-index:120;
  background:var(--surface);border-bottom:1px solid var(--line);
  transition:box-shadow var(--dur) var(--ease)}
.site-header.stuck{box-shadow:0 6px 20px rgba(16,25,35,.09)}
.topbar .wrap{min-height:var(--topbar-h,44px);flex-wrap:nowrap}
/* the note needs room for a full German sentence beside the number */
.topbar .tb-note{display:none}
@media(min-width:900px){.topbar .tb-note{display:inline-flex;align-items:center;gap:9px}}


/* ==========================================================================
   DARK-BAND INK, THE LAST TWO LEAKS.
   Both are the same failure: a base rule paints an element in a LIGHT-band
   token, and the `.section--dark <x>` set never mentioned that element — so it
   keeps its light colour on a dark ground and nobody notices until something
   measures it.
     · `strong { color: var(--head) }`  -> #101c28 on #101923 is 1.03:1
     · `.crumbs [aria-current] { color: var(--head) }` -> same pair, same result
   ========================================================================== */
.section--dark :where(strong,b){color:#fff}
.section--dark .crumbs li{color:var(--dark-muted)}
.section--dark .crumbs a{color:var(--dark-muted)}
.section--dark .crumbs a:hover{color:var(--cta-light)}
.section--dark .crumbs [aria-current="page"]{color:#fff}
.section--dark .crumbs li+li::before{border-color:var(--dark-line-2)}
.on-dark .crumbs li,.on-dark .crumbs a{color:var(--dark-muted)}
.on-dark .crumbs [aria-current="page"]{color:#fff}
/* The hero call box paints a translucent copper wash over the dark band; its
   caption and number must stay on the dark-band scale, not the copper one. */
.hero__callbox .telbig{color:#fff}
.hero__callbox .telbig svg{stroke:var(--cta-light)}

/* ==========================================================================
   GERMAN COMPOUNDS IN AUTO/1fr GRID CELLS.
   `grid-template-columns: auto 1fr` gives BOTH tracks a min-content minimum, so
   a 20-character compound ("Gebärdensprachvideos", "Nachkriegssiedlungen")
   sets the cell's minimum width and spills a few pixels past its column. It
   reads like a line-height bug and is not one — only a leaf-element
   scrollWidth sweep finds it. Every two-track list brick gets minmax(0,1fr)
   plus a breakable text cell.
   ========================================================================== */
.iclist li{grid-template-columns:auto minmax(0,1fr)}
.iclist li > *,
.usp__marks li > *,
.hero__facts li > *,
.hero__assure li > *,
.trustrow li > *,
.slab__cell > *{min-width:0;overflow-wrap:break-word}
.usp__marks li,.hero__assure li,.trustrow li{grid-template-columns:auto minmax(0,1fr)}

/* A panel hero that carries a motif becomes two columns; without one it stays
   the single calm slab it was designed as.
   NOTE the doubled selector: `.hero--panel .hero__grid` above is (0,2,0) and a
   bare `.hero__grid--panel` (0,1,0) loses to it at every width — the media
   column silently stacked full-width under the panel instead. */
@media(min-width:980px){
  .hero--panel .hero__grid--panel{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
}
.hero--panel .hero__panel{max-width:none}