/* ==========================================================================
   shk-bernhardt-koepenick — the design language „farbblock-duo · Köpenick“
   The page is a stack of FULL-BLEED COLOUR BLOCKS that alternate VERMILION (dark ink text)
   ⇄ DEEP TEAL (white text, aqua accents), with white / mist reading bands between them;
   zig-zag splits flip the picture side from block to block.
   Köpenick's own devices, taken from the favicon (a vermilion HEX NUT holding a water drop
   split down the middle — white | aqua, warm meets cold):
     · the HEX NUT — every icon tile, step number, toggle, badge, the logo and the big frames
       are a regular hexagon (pointy top/bottom, flats left/right, softly rounded corners,
       --m-nut). On hover a nut TURNS 60° — a quarter-turn of the spanner — and lands on itself.
     · the WARM|COLD SPLIT — a seam where warm meets cold: the hero art mat (white|aqua on
       vermilion, vermilion|aqua on teal), split edges on plates and promise cards, the split
       eyebrow nut, the footer seam, the call bar, the phone band (light | deep), the nut on the
       seam between two quiet bands.
     · MACHINED SURFACES — small radii (4–12 px), one chamfered (cut) top-right corner on cards,
       plates and gallery tiles, one restrained soft shadow; no pills, no rounded-square tiles, no glow.
   Every value below is a token; per-page code never adds a colour, font, radius, shadow
   or motion value of its own. Contrast gate: tools/contrast.php · spec: DESIGN-LANGUAGE.md
   ========================================================================== */

:root{
  /* colour — locked from the favicon (brand/FAVICON.md): vermilion nut, white|aqua split drop */
  --vermilion:#ff4a1c;--vermilion-hi:#ff6b45;--vermilion-700:#b8300c;--on-vermilion:#1b0904;
  --teal:#0c3a47;--teal-700:#0a2f3a;--deep:#061d24;
  --on-teal:#fff;--on-teal-2:#d4eef3;--foot-text:#c4e4ea;
  --aqua:#2fe0ff;
  --white:#fff;--mist:#edf8fa;--mist-2:#d3eef2;--line:#cfe3e7;--line-strong:#678f98;
  --ink:#0a2f3a;--text:#14262b;--muted:#4d5e63;
  --danger:#b3261e;--danger-bg:#fdf0ee;
  /* shape — machined: small radii; the nut is a regular hexagon (width = .866 × height) */
  --r-xs:4px;--r-btn:6px;--r:8px;--r-lg:12px;--cut:22px;--ov:40px;
  --sh-sm:0 1px 2px rgba(6,29,36,.1),0 3px 10px rgba(6,29,36,.07);
  --sh:0 10px 28px rgba(6,29,36,.18);
  --sh-lg:0 22px 50px rgba(6,29,36,.28);
  --wrap:1180px;--gut:clamp(16px,4vw,24px);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* weights: the stack has 400/600/700/900 everywhere (Segoe UI has no 800) — UI text 700, display 900 */
  --sans:'Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
  --topbar-h:44px;
  /* masks (the colour is the element's background): the hex nut, the favicon drop, a hex-dot lattice */
  --m-nut:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6.7 0 86.6 100'%3E%3Cpath d='M45.5 2.6A9 9 0 0 1 54.5 2.6L88.8 22.4A9 9 0 0 1 93.3 30.2L93.3 69.8A9 9 0 0 1 88.8 77.6L54.5 97.4A9 9 0 0 1 45.5 97.4L11.2 77.6A9 9 0 0 1 6.7 69.8L6.7 30.2A9 9 0 0 1 11.2 22.4Z'/%3E%3C/svg%3E");
  --m-drop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='136 60 240 358'%3E%3Cpath d='M256 60L152.4 237.5A120 120 0 1 0 359.6 237.5Z'/%3E%3C/svg%3E");
  --m-hexdots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48'%3E%3Cpath d='M14 7.4L18 9.7V14.3L14 16.6L10 14.3V9.7ZM0 31.4L4 33.7V38.3L0 40.6L-4 38.3V33.7ZM28 31.4L32 33.7V38.3L28 40.6L24 38.3V33.7Z'/%3E%3C/svg%3E");
}

/* ------------------------------------------- tone scopes (band tokens) --
   Every brick reads these; a band or a surface sets them for its subtree.
   --warm/--cold: the split ON the band itself (eyebrow nut, rules) · --mat-a/--mat-b: the art mat ·
   --nut/--nut-fg: set per tile (below) · --call-*: the band-aware phone button and its nut.        */
/* LIGHT — page default, white + mist bands, and every white surface (a card on a vermilion band stays white) */
:root,.band--white,.band--mist,
.card,.notice,.compare__col,.factsheet,.phonebox,.qa,.hero__dial,.hero__foot .hq,.gal figure,.trustbar,.masthead,.drawer__p,.sub,.phoneband__copy,
.band--teal .hero__badge,.band--teal .hero__fig figcaption{
  --bg-band:var(--white);--fg:var(--text);--fg-h:var(--ink);--fg-muted:var(--muted);--link:var(--teal);--link-ul:var(--vermilion);--focus:var(--teal);
  --kick-fg:var(--vermilion-700);--warm:var(--vermilion);--cold:var(--teal);--mat-a:var(--vermilion);--mat-b:var(--teal);--hl:var(--vermilion-700);
  --card:var(--white);--card-bd:var(--line);--tile-bg:var(--vermilion);--tile-fg:var(--on-vermilion);--num-bg:var(--teal);--num-fg:var(--white);
  --chip-bg:var(--white);--chip-bd:var(--line-strong);--chip-ic:var(--vermilion-700);
  --call-bg:var(--vermilion);--call-fg:var(--on-vermilion);--call-hov:var(--vermilion-hi);--call-nut:var(--deep);--call-nut-fg:var(--aqua);
  --rule:var(--line);--mark:rgba(255,74,28,.28);--pipe:var(--teal);--wm:var(--mist-2)
}
.band--mist{--bg-band:var(--mist);--chip-bg:var(--white)}
/* VERMILION colour block — dark ink on #ff4a1c; deep carries the call button, the numbers and the focus ring */
.band--vermilion,.legal-hero,.band--teal .cta__dial{
  --bg-band:var(--vermilion);--fg:var(--on-vermilion);--fg-h:var(--on-vermilion);--fg-muted:var(--on-vermilion);--link:var(--on-vermilion);--link-ul:var(--deep);--focus:var(--deep);
  --kick-fg:var(--on-vermilion);--warm:var(--white);--cold:var(--teal);--mat-a:var(--white);--mat-b:var(--aqua);--hl:var(--deep);
  --card:var(--white);--card-bd:transparent;--tile-bg:var(--teal);--tile-fg:var(--white);--num-bg:var(--deep);--num-fg:var(--white);
  --chip-bg:var(--white);--chip-bd:var(--white);--chip-ic:var(--teal);
  --call-bg:var(--deep);--call-fg:var(--white);--call-hov:var(--teal);--call-nut:var(--aqua);--call-nut-fg:var(--deep);
  --rule:rgba(27,9,4,.26);--mark:rgba(255,255,255,.55);--pipe:var(--deep);--wm:rgba(27,9,4,.08)
}
/* TEAL colour block — white on #0c3a47, AQUA for kickers, links, icons, focus; vermilion carries the call button and the numbers */
.band--teal,.callrow,.band--white .cta__dial,.band--mist .cta__dial,.cta__dial{
  --bg-band:var(--teal);--fg:var(--on-teal);--fg-h:var(--white);--fg-muted:var(--on-teal-2);--link:var(--aqua);--link-ul:var(--aqua);--focus:var(--aqua);
  --kick-fg:var(--aqua);--warm:var(--vermilion);--cold:var(--aqua);--mat-a:var(--vermilion);--mat-b:var(--aqua);--hl:var(--aqua);
  --card:rgba(6,29,36,.36);--card-bd:rgba(255,255,255,.16);--tile-bg:var(--vermilion);--tile-fg:var(--on-vermilion);--num-bg:var(--vermilion);--num-fg:var(--on-vermilion);
  --chip-bg:rgba(6,29,36,.36);--chip-bd:rgba(255,255,255,.34);--chip-ic:var(--aqua);
  --call-bg:var(--vermilion);--call-fg:var(--on-vermilion);--call-hov:var(--vermilion-hi);--call-nut:var(--deep);--call-nut-fg:var(--aqua);
  --rule:rgba(255,255,255,.22);--mark:rgba(6,29,36,.5);--pipe:var(--aqua);--wm:rgba(6,29,36,.34)
}
/* DEEP — topbar, footer, the hero badge, the asks half of the phone band, a dial plate on a vermilion band, the call row on a teal band */
.topbar,.foot,.hero__badge,.phoneband__asks,.band--vermilion .cta__dial,.band--teal .callrow,.callbar,.hero__fig figcaption,.hero__strip figcaption{
  --bg-band:var(--deep);--fg:var(--foot-text);--fg-h:var(--white);--fg-muted:var(--foot-text);--link:var(--white);--link-ul:var(--aqua);--focus:var(--aqua);
  --kick-fg:var(--aqua);--warm:var(--vermilion);--cold:var(--aqua);--mat-a:var(--vermilion);--mat-b:var(--aqua);--hl:var(--aqua);
  --card:rgba(255,255,255,.06);--card-bd:rgba(255,255,255,.14);--tile-bg:var(--vermilion);--tile-fg:var(--on-vermilion);--num-bg:var(--aqua);--num-fg:var(--deep);
  --call-bg:var(--vermilion);--call-fg:var(--on-vermilion);--call-hov:var(--vermilion-hi);--call-nut:var(--deep);--call-nut-fg:var(--aqua);
  --rule:rgba(255,255,255,.16);--pipe:var(--aqua);--wm:rgba(255,255,255,.05)
}
/* band-level tokens a white SURFACE must not reset (they describe the band UNDER it):
   --under (band colour, for the chamfered corner) · --cut-line (the cut's hairline) · --bk-* (the nut on a card's seam) ·
   --sedge-a/-b (the split edge of a surface) · --ring-out (a focus ring drawn outside a white card, i.e. on the band) */
:root,.band--white{--under:var(--white);--cut-line:var(--line);--bk-bg:var(--vermilion);--bk-fg:var(--on-vermilion);--sedge-a:var(--vermilion);--sedge-b:var(--teal);--ring-out:var(--teal)}
.band--mist{--under:var(--mist);--cut-line:var(--line);--bk-bg:var(--vermilion);--bk-fg:var(--on-vermilion);--sedge-a:var(--vermilion);--sedge-b:var(--teal);--ring-out:var(--teal)}
/* on vermilion the warm half of a surface edge is the darker vermilion-700 (deep | teal were two darks and read as one bar, not as warm | cold) */
.band--vermilion,.legal-hero{--under:var(--vermilion);--cut-line:transparent;--bk-bg:var(--teal);--bk-fg:var(--white);--sedge-a:var(--vermilion-700);--sedge-b:var(--teal);--ring-out:var(--deep)}
.band--teal{--under:var(--teal);--cut-line:transparent;--bk-bg:var(--vermilion);--bk-fg:var(--on-vermilion);--sedge-a:var(--vermilion);--sedge-b:var(--aqua);--ring-out:var(--aqua)}
.foot{--under:var(--deep);--cut-line:transparent;--sedge-a:var(--vermilion);--sedge-b:var(--aqua)}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
/* scroll-padding: anchors and keyboard focus never land under the sticky header (or, on phones, the call bar) */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;font:18px/1.62 var(--sans);color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
.ic{width:22px;height:22px;flex:none}
a{color:var(--link);text-decoration-color:var(--link-ul);text-underline-offset:.2em;text-decoration-thickness:2px}
a:hover{text-decoration-thickness:3px}
p{margin:0 0 1em}
p,li,dd,dt,figcaption,blockquote{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5;overflow-wrap:break-word}
h1,h2,h3,h4{font-family:var(--sans);color:var(--fg-h);line-height:1.15;letter-spacing:-.012em;margin:0;font-weight:700;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5}
h3{font-size:1.18rem;font-weight:700;letter-spacing:-.005em}
ul,ol{margin:0;padding:0}
ul[role=list],ol[role=list]{list-style:none}
b,strong{font-weight:700;color:var(--fg-h)}
.nowrap{white-space:nowrap}
.screen-reader-text,.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* fixed (not absolute): the header is sticky, so an absolute skip link would sit 44 px above the viewport on a scrolled page */
.skip{position:fixed;left:12px;top:-90px;z-index:400;background:var(--deep);color:var(--white);padding:12px 18px;border-radius:0 0 var(--r-btn) var(--r-btn);font-weight:700;text-decoration:none;transition:top .15s}
/* the skip link shows for KEYBOARD focus only (a tap on to-top moves focus here without revealing it) */
.skip:focus{top:0;color:var(--white);outline-color:var(--aqua)}
.skip:focus:not(:focus-visible){top:-90px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.wrap--narrow{max-width:880px}
.wp-site-blocks{padding:0}
.sbk-content>*:first-child{margin-top:0}
.wp-block-post-content{margin:0}

/* type scale */
.display{font-size:clamp(34px,4.7vw,56px);line-height:1.06;letter-spacing:-.024em;font-weight:900}
.stitle{font-size:clamp(28px,3.4vw,41px);line-height:1.12;letter-spacing:-.02em;font-weight:900;margin-bottom:.38em}
.display,.stitle{text-wrap:balance}
.lead{font-size:clamp(18.5px,1.5vw,20.5px);line-height:1.58;color:var(--fg-muted);max-width:60ch}

/* ------------------------------------------------------ the hex nut (tiles) --
   The tile is a plain box (its focus ring, if any, stays rectangular and visible); its NUT is the ::before,
   masked from --nut — so the glyph inside is never clipped and the nut can turn on hover. */
.telbig__ic,.trustbar__ic,.ci__ic,.card__ic,.card__bk,.card__bigic,.card__num,.promise__ic,.step__n,.row__n,.tile__ic,.factor__ic,.notice__ic,.asks__n,.qa__ic,.foot__telic,.hero__badge-ic,.ersteps__n,.portrait__badge,.btn__nut,.hq__ic{
  position:relative;isolation:isolate;display:grid;place-items:center;flex:none;color:var(--nut-fg)}
.telbig__ic::before,.trustbar__ic::before,.ci__ic::before,.card__ic::before,.card__bk::before,.card__bigic::before,.card__num::before,.promise__ic::before,.step__n::before,.row__n::before,.tile__ic::before,.factor__ic::before,.notice__ic::before,.asks__n::before,.qa__ic::before,.foot__telic::before,.hero__badge-ic::before,.ersteps__n::before,.portrait__badge::before,.btn__nut::before,.hq__ic::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--nut);-webkit-mask:var(--m-nut) center/contain no-repeat;mask:var(--m-nut) center/contain no-repeat;transition:transform .6s var(--ease),background-color .2s}
/* the quarter-turn: a regular hexagon turned 60° lands on itself, so the motion shows only while it happens */
:is(.card--link,.factor,.tile,.promise,.row--link,.checklist li,.telbig,.btn,.trustbar li,.qa__b,.foot__tel,.step,.ersteps li):hover :is(.card__bk,.card__ic,.card__bigic,.card__num,.factor__ic,.tile__ic,.promise__ic,.row__n,.ci__ic,.telbig__ic,.btn__nut,.trustbar__ic,.qa__ic,.foot__telic,.step__n,.ersteps__n)::before{transform:rotate(60deg)}
/* small bullets: the split nut (warm | cold), the favicon in miniature */
.eyebrow::before,.nav__phone span::before,.hero__dial-k::before,.phoneband__k::before,.factsheet__t::before,.cta__k::before,.foot__dial-k::before,.sub__k::before,.gal figcaption b::before{
  content:"";display:inline-block;width:12px;height:14px;flex:none;background:linear-gradient(90deg,var(--warm) 50%,var(--cold) 50%);-webkit-mask:var(--m-nut) center/contain no-repeat;mask:var(--m-nut) center/contain no-repeat}

/* ------------------------------------------------------------------ bands */
.band{position:relative;padding:clamp(60px,7vw,88px) 0;background-color:var(--bg-band);color:var(--fg);isolation:isolate}
.band--tight{padding:clamp(40px,4.8vw,58px) 0}
.band--tall{padding:clamp(76px,8.6vw,116px) 0}
.band--flush-top{padding-top:0}
.band--hero{padding:clamp(48px,5.2vw,74px) 0 clamp(60px,6.2vw,86px)}
.band--rule{border-top:1px solid var(--line)}
.band--vermilion.band--rule,.band--teal.band--rule{border-top:0}
/* the nut on the seam: two quiet bands (white | mist, 1.1 : 1) are joined by a hairline with a split nut sitting on it */
.band--white+.band--mist,.band--mist+.band--white{border-top:1px solid var(--line)}
.band--white+.band--mist::before,.band--mist+.band--white::before{content:"";position:absolute;z-index:2;left:50%;top:-1px;width:26px;height:30px;transform:translate(-50%,-50%);
  background:linear-gradient(90deg,var(--vermilion) 50%,var(--teal) 50%);-webkit-mask:var(--m-nut) center/contain no-repeat;mask:var(--m-nut) center/contain no-repeat}
.band--noedge::before,.band--flush-top::before{display:none}

/* ------------------------------------------------------------ eyebrow/head */
/* small caps labels: 13.6 px minimum (older callers). No tag box: split nut · label · a short rule */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 .85rem/1.25 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--kick-fg);margin-bottom:14px;max-width:100%;text-wrap:balance}
.eyebrow::after{content:"";width:34px;height:2px;flex:none;background:currentColor;opacity:.5}
.head{max-width:780px;margin:0 0 clamp(30px,3.8vw,46px)}
/* a head directly above the FAQ is centred like the 880 px FAQ column under it, even without 'center' => true */
.head--center,.head:not(.head--rule):has(+.faq){margin-left:auto;margin-right:auto;text-align:center}
:is(.head--center,.head:not(.head--rule):has(+.faq)) .eyebrow::after{display:none}
:is(.head--center,.head:not(.head--rule):has(+.faq)) .lead{margin-left:auto;margin-right:auto}
.head--wide{max-width:980px}
.head--narrow{max-width:640px}
.head .stitle{margin-bottom:.3em}
.head .lead{margin-top:0;margin-bottom:0}
.head--rule{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,4vw,56px);align-items:end;max-width:none;padding-bottom:clamp(20px,2.6vw,28px);border-bottom:2px solid var(--rule)}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 22px;border-radius:var(--r-btn);border:2px solid transparent;
  font:700 1rem/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:transform .14s var(--ease),box-shadow .18s,background-color .18s,color .18s,border-color .18s}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn .ic{width:19px;height:19px}
/* the phone button carries its glyph inside a NUT (deep nut + aqua glyph on vermilion, aqua nut + deep glyph on deep) */
.btn__nut{width:36px;height:36px;margin:-8px 2px -8px -10px;--nut:var(--call-nut);--nut-fg:var(--call-nut-fg)}
.btn__nut .ic{width:17px;height:17px}
/* a wrapped label stays centred and balanced; its trailing arrow rides on the last word (sbk_tail) */
.btn>span{text-wrap:balance}
/* call label + colon is one unit (sbk_callbtn): a wrapped call button reads „Rufen Sie an:“ / „0176 …“, never „Rufen Sie“ / „an: 0176 …“ */
.btn__l{display:inline-block;max-width:100%}
.btn--lg>span,.btn:not(.btn--call)>span{text-align:center}
.tail{white-space:nowrap}
.tail .ic{display:inline-block;vertical-align:-.2em;margin-left:.42em}
.btn .tail .ic{margin-left:10px;vertical-align:-4px}
.btn--lg{min-height:58px;padding:14px 28px;font-size:1.06rem}
.btn--lg .btn__nut{width:40px;height:40px;margin-left:-12px}
/* the phone button is the strongest element: the band's call colour — vermilion on light and teal, deep on vermilion */
.btn--accent{background:var(--call-bg);color:var(--call-fg);box-shadow:var(--sh-sm)}
.btn--accent:hover{background:var(--call-hov);color:var(--call-fg);box-shadow:var(--sh)}
.btn--vermilion{--call-nut:var(--deep);--call-nut-fg:var(--aqua);background:var(--vermilion);color:var(--on-vermilion);box-shadow:var(--sh-sm)}
.btn--vermilion:hover{background:var(--vermilion-hi);color:var(--on-vermilion);box-shadow:var(--sh)}
.btn--teal{--call-nut:var(--vermilion);--call-nut-fg:var(--on-vermilion);background:var(--teal);color:var(--white);box-shadow:var(--sh-sm)}
.btn--teal:hover{background:var(--teal-700);color:var(--white);box-shadow:var(--sh)}
.btn--deep{--call-nut:var(--aqua);--call-nut-fg:var(--deep);background:var(--deep);color:var(--white);box-shadow:var(--sh-sm)}
.btn--deep:hover{background:var(--teal);color:var(--white);box-shadow:var(--sh)}
.btn--white{--call-nut:var(--vermilion);--call-nut-fg:var(--on-vermilion);background:var(--white);color:var(--teal-700);box-shadow:var(--sh-sm)}
.btn--white:hover{background:var(--mist);color:var(--teal-700);box-shadow:var(--sh)}
.btn--outline-dark{background:transparent;border-color:var(--fg-h);color:var(--fg-h)}
.btn--outline-dark:hover{background:var(--fg-h);color:var(--bg-band)}
.btn--outline-light{background:transparent;border-color:var(--white);color:var(--white)}
.btn--outline-light:hover{background:var(--white);color:var(--teal-700)}
.btn--text{min-height:44px;padding:8px 2px;border:0;border-radius:0;color:var(--link);background:none;box-shadow:none;text-decoration:underline;text-decoration-color:var(--link-ul)}
/* the big number: a nut with the phone glyph + the digits */
.telbig{display:inline-flex;align-items:center;gap:14px;font:900 clamp(26px,3.2vw,38px)/1.1 var(--sans);letter-spacing:-.015em;color:var(--fg-h);text-decoration:none;white-space:nowrap;min-height:48px}
.telbig__ic{width:56px;height:56px;--nut:var(--num-bg);--nut-fg:var(--num-fg)}
.telbig__ic .ic{width:24px;height:24px}
.telbig--light .telbig__ic{--nut:var(--vermilion);--nut-fg:var(--on-vermilion)}
.telbig--dark .telbig__ic{--nut:var(--teal);--nut-fg:var(--white)}
.telbig:hover .telbig__n{text-decoration:underline;text-decoration-color:var(--link-ul);text-decoration-thickness:3px;text-underline-offset:.16em}
/* inside a panel the big number is sized from the PANEL (container query), so it never crosses the edge —
   not at 320 px, not at a 305 px layout (400 % zoom). 7.9 em ≈ the number's width (measured 7.44 em) + margin;
   --tb-room = icon + gap; --tb-max = the design size. */
.hero__dial,.cta__dial,.phoneband__num,.phonebox__top,.callrow{container-type:inline-size;--tb-max:clamp(26px,3.2vw,38px);--tb-room:72px}
.hero__dial{--tb-max:clamp(27px,3.4vw,40px)}
.cta__dial{--tb-max:clamp(28px,3vw,40px)}
.phoneband__num{--tb-max:clamp(30px,4vw,48px);--tb-room:80px}
:is(.hero__dial,.cta__dial,.phoneband__num,.phonebox__top,.callrow) .telbig{font-size:max(19px,min(var(--tb-max),calc((100cqi - var(--tb-room)) / 7.9)))}

/* ------------------------------------------------------------ header/top */
.site-top{position:sticky;top:calc(var(--topbar-h) * -1);z-index:100}
.admin-bar .site-top{top:calc(32px - var(--topbar-h))}
.topbar{background:var(--deep);color:var(--fg);font-size:.9rem;height:var(--topbar-h);overflow:hidden}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:100%}
.topbar p{margin:0;white-space:nowrap;display:flex;align-items:center;gap:9px}
.topbar__l{min-width:0;overflow:hidden;text-overflow:ellipsis}
.topbar__r{flex:none;color:var(--fg)}
/* the favicon's drop, split white | aqua */
.topbar__drop{width:11px;height:16px;flex:none;background:linear-gradient(90deg,var(--white) 50%,var(--aqua) 50%);-webkit-mask:var(--m-drop) center/contain no-repeat;mask:var(--m-drop) center/contain no-repeat}
/* the phone link is a full 44 px target (validator A11) with its focus ring drawn inside */
.topbar a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin:0 -6px;color:var(--aqua);font-weight:900;letter-spacing:.01em;text-decoration:underline;text-decoration-color:var(--aqua);text-decoration-thickness:1.5px}
.topbar a:hover{text-decoration-thickness:3px}
.topbar a:focus-visible{outline-offset:-3px}
.topbar__short{display:none}
.topbar__x::before{content:"";display:inline-block;width:6px;height:7px;margin:0 9px 0 0;background:var(--vermilion);-webkit-mask:var(--m-nut) center/contain no-repeat;mask:var(--m-nut) center/contain no-repeat;vertical-align:middle}
/* the farbblock header edge: a 4 px colour-block line (c1 = vermilion) under the white bar — it melts into a vermilion hero and
   shows as the warm edge over every other band once the header is sticky */
.masthead{position:relative;background:var(--white);border-bottom:4px solid var(--vermilion);transition:box-shadow .2s}
.is-scrolled .masthead{box-shadow:0 8px 24px rgba(6,29,36,.14)}
.nav{display:flex;align-items:center;gap:18px;height:78px;transition:height .2s var(--ease)}
.is-scrolled .nav{height:68px}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--ink);flex:none}
.brand__mk{display:block;flex:none}
.brand__mk svg{width:46px;height:46px}
.mk__nut{fill:var(--vermilion)}.mk__w{fill:var(--white)}.mk__c{fill:var(--aqua)}
.brand__t{display:flex;flex-direction:column}
.brand__n{font:900 1.42rem/1 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.brand__s{font:700 .78rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--vermilion-700);margin-top:5px;white-space:nowrap}
.brand:hover .brand__n{color:var(--teal)}
.brand:hover .mk__nut{fill:var(--vermilion-hi)}
.menu{display:flex;align-items:center;gap:2px;margin:0 0 0 14px;list-style:none}
.menu>li{position:relative;display:flex;align-items:center}
.menu>li>a{position:relative;display:flex;align-items:center;white-space:nowrap;min-height:46px;padding:9px 13px;border-radius:var(--r-btn);font-weight:600;font-size:.97rem;color:var(--teal-700);text-decoration:none;transition:background-color .15s,color .15s}
.menu>li>a:hover{background:var(--mist)}
/* current section: a split underline, vermilion | teal */
.menu>li.is-current>a{font-weight:700}
.menu>li.is-current>a::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:3px;background:linear-gradient(90deg,var(--vermilion) 50%,var(--teal) 50%)}
.menu__tg{display:grid;place-items:center;width:44px;height:46px;margin-left:-12px;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:var(--r-btn)}
.no-js .menu__tg{display:none}
.menu__tg .ic{width:15px;height:15px;transition:transform .2s}
.menu>li.open .menu__tg .ic{transform:rotate(180deg)}
.sub{position:absolute;top:calc(100% + 18px);left:-14px;width:600px;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 14px 12px;
  background:linear-gradient(90deg,var(--vermilion) 50%,var(--teal) 50%) top/100% 4px no-repeat,var(--white);
  box-shadow:var(--sh-lg);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s var(--ease),visibility .18s;z-index:50}
.sub::before{content:"";position:absolute;left:0;right:0;top:-26px;height:24px}
.menu>li:hover>.sub,.menu>li:focus-within>.sub,.menu>li.open>.sub{opacity:1;visibility:visible;transform:none}
.menu>li.is-dismissed>.sub,.menu>li.is-dismissed:hover>.sub{opacity:0;visibility:hidden}
.sub__k{display:flex;align-items:center;gap:9px;font:700 .84rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--vermilion-700);margin:0 8px 8px}
.sub__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px}
.sub a{display:flex;align-items:center;gap:11px;min-height:46px;padding:7px 9px;border-radius:var(--r-btn);color:var(--teal-700);text-decoration:none;font-weight:600;font-size:.95rem}
.sub a:hover{background:var(--mist)}
.sub a[aria-current]{font-weight:700}
.sub__grid .ic{width:30px;height:34px;padding:8px 6px;background:var(--vermilion);color:var(--on-vermilion);-webkit-mask:var(--m-nut) center/contain no-repeat;mask:var(--m-nut) center/contain no-repeat}
.sub__all{display:flex;justify-content:space-between;gap:10px;margin-top:8px;border-top:1px solid var(--line);padding-top:8px}
.sub__all a{color:var(--vermilion-700);font-weight:700}
.sub__all .ic{width:18px;height:18px}
.sub .sub__tel{color:var(--teal-700);font-weight:900}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav__phone{display:flex;flex-direction:column;justify-content:center;min-height:44px;text-align:right;line-height:1.12;text-decoration:none;color:var(--teal-700);white-space:nowrap}
.nav__phone b{font:900 1.1rem/1.1 var(--sans);color:var(--teal-700)}
.nav__phone span{display:inline-flex;align-items:center;justify-content:flex-end;gap:7px;font:700 .85rem/1.2 var(--sans);color:var(--vermilion-700);margin-top:4px}
.nav__phone:hover b{text-decoration:underline;text-decoration-color:var(--vermilion)}
.nav__call{min-height:50px;white-space:nowrap}
.burger{display:none;width:48px;height:48px;border:2px solid var(--line);border-radius:var(--r-btn);background:var(--white);color:var(--teal-700);cursor:pointer;place-items:center}
.burger .ic{width:24px;height:24px}

/* mobile drawer — a white panel with a split left edge */
.drawer{position:fixed;inset:0;z-index:300;background:rgba(6,29,36,.6);opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s}
.drawer.open{opacity:1;visibility:visible;transition:opacity .22s,visibility 0s}
.drawer__p{position:absolute;right:0;top:0;bottom:0;width:min(380px,90vw);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s var(--ease);overflow-y:auto;overscroll-behavior:contain;
  border-left:6px solid transparent;background:linear-gradient(180deg,var(--vermilion) 50%,var(--teal) 50%) left/6px 100% no-repeat border-box,var(--white) padding-box}
.drawer.open .drawer__p{transform:none}
.drawer__top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.drawer__top .brand__mk svg{width:40px;height:40px}
.drawer__top .brand__n{font-size:1.2rem}
.drawer__top .brand__s-x{display:none}
.drawer__x{width:48px;height:48px;border:2px solid var(--line);border-radius:var(--r-btn);background:var(--white);display:grid;place-items:center;cursor:pointer;color:var(--teal-700);flex:none}
.drawer__nav{padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.drawer__nav>a,.drawer__nav summary{display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:10px 14px;border-radius:var(--r-btn);font:700 1.08rem/1.2 var(--sans);color:var(--teal-700);text-decoration:none;cursor:pointer;list-style:none}
.drawer__nav>a:hover,.drawer__nav summary:hover{background:var(--mist)}
.drawer__nav>a[aria-current],.drawer__nav details.is-current>summary{background:var(--mist);box-shadow:inset 4px 0 0 var(--vermilion)}
.drawer__nav summary::-webkit-details-marker{display:none}
.drawer__nav summary .ic{transition:transform .2s}
.drawer__nav details[open] summary .ic{transform:rotate(180deg)}
.drawer__sub{display:grid;gap:2px;padding:4px 0 8px}
.drawer__sub a{display:flex;align-items:center;gap:11px;min-height:48px;padding:8px 12px 8px 16px;border-radius:var(--r-btn);color:var(--text);text-decoration:none;font-weight:600}
.drawer__sub a:hover{background:var(--mist)}
.drawer__sub a .ic{width:28px;height:32px;padding:8px 6px;background:var(--vermilion);color:var(--on-vermilion);-webkit-mask:var(--m-nut) center/contain no-repeat;mask:var(--m-nut) center/contain no-repeat}
/* the call block is PINNED to the panel's bottom edge: the Leistungen disclosure starts collapsed, and once a
   visitor opens it the long list scrolls under the button, so the phone button is on screen whenever the menu is open */
.drawer__call{position:sticky;bottom:0;z-index:1;padding:16px;margin-top:auto;border-top:1px solid var(--line);background:var(--mist);box-shadow:0 -10px 24px rgba(6,29,36,.1)}
.drawer__call .btn{width:100%}
.drawer__call p{font-size:.9rem;color:var(--muted);margin:10px 0 0;text-align:center}

/* ------------------------------------------------------------------ crumbs */
.crumbs{margin:0 0 10px;font-size:.9rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:0;list-style:none}
.crumbs li{display:flex;align-items:center;color:var(--fg-muted)}
/* the separator trails its item (not leads the next one), so a wrapped trail never starts a line with it */
.crumbs li:not(:last-child)::after{content:"";width:7px;height:8px;background:currentColor;margin:0 11px;opacity:.75;-webkit-mask:var(--m-nut) center/contain no-repeat;mask:var(--m-nut) center/contain no-repeat}
.crumbs a{color:var(--fg-h);font-weight:700;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-decoration-color:var(--link-ul);text-decoration-thickness:1.5px}
.crumbs a:hover{text-decoration-thickness:3px}
.crumbs [aria-current]{font-weight:600}

/* -------------------------------------------------------------------- hero */
.hero .display{margin:0 0 .32em}
.hero .lead{margin:0 0 28px;color:var(--fg)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero__note{display:flex;gap:9px;align-items:flex-start;margin:20px 0 0;font-size:.95rem;font-weight:600;max-width:56ch;color:var(--fg)}
.hero__note .ic{width:20px;height:20px;margin-top:2px;color:var(--chip-ic)}
/* quick facts as an icon row (heroes without the plate): a small nut + the line, no box */
.hq{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:26px}
.hq li{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.95rem;line-height:1.3;color:var(--fg-h)}
.hq__ic{width:32px;height:32px;--nut:var(--tile-bg);--nut-fg:var(--tile-fg)}
.hq__ic .ic{width:16px;height:16px}
/* block + teal — copy beside the SPLIT MAT: the illustration sits on a mat split down the middle (white | aqua on a
   vermilion block, vermilion | aqua on a teal block — the favicon's drop), a nut medallion sits on the mat's top seam,
   a big hex nut stands behind it as a watermark; the quick facts form a white PLATE that straddles the seam to the next band */
.band--herozone{overflow-x:clip}
.hero--block{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero--block.hero--rev{grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)}
.hero--block.hero--nomedia{grid-template-columns:minmax(0,1fr);max-width:820px}
.hero--rev>.hero__media{order:-1}
.hero__media{position:relative;isolation:isolate;padding:46px 0 40px}
.hero__media::before{content:"";position:absolute;z-index:-1;top:50%;right:-9%;width:min(108%,600px);aspect-ratio:.866;transform:translateY(-50%);background:var(--wm);
  -webkit-mask:var(--m-nut) center/100% 100% no-repeat;mask:var(--m-nut) center/100% 100% no-repeat}
.hero--rev .hero__media::before{right:auto;left:-9%}
.hero__frame{--fp:clamp(10px,1.3vw,16px);position:relative;padding:var(--fp);border-radius:var(--r-lg);background:linear-gradient(90deg,var(--mat-a) 50%,var(--mat-b) 50%);box-shadow:var(--sh-lg)}
.hero__pic{overflow:hidden;border-radius:var(--r-xs);background:var(--mist)}
.hero__pic .illu{width:100%;aspect-ratio:4/3;object-fit:cover}
/* the medallion: a nut holding the split drop, ringed in the band colour so it reads as cut into the seam */
.hero__nut{position:absolute;z-index:2;top:calc(46px - 38px);left:calc(50% - 33px);width:66px;height:76px;
  filter:drop-shadow(4px 0 0 var(--bg-band)) drop-shadow(-4px 0 0 var(--bg-band)) drop-shadow(0 4px 0 var(--bg-band)) drop-shadow(0 -4px 0 var(--bg-band))}
.hero__nut::before,.hero__nut::after{content:"";position:absolute;-webkit-mask:var(--m-nut) center/contain no-repeat;mask:var(--m-nut) center/contain no-repeat}
.hero__nut::before{inset:0;background:var(--deep)}
.hero__nut::after{left:30%;right:30%;top:18%;bottom:20%;background:linear-gradient(90deg,var(--white) 50%,var(--aqua) 50%);-webkit-mask-image:var(--m-drop);mask-image:var(--m-drop)}
.band--teal .hero__nut::before{background:var(--vermilion)}
.hero__media:hover .hero__nut::before{transform:rotate(60deg);transition:transform .6s var(--ease)}
.hero__badge{position:absolute;z-index:2;left:-20px;bottom:0;max-width:min(340px,calc(100% - 24px));display:flex;align-items:center;gap:13px;padding:14px 18px 14px 14px;border-radius:var(--r);background:var(--bg-band);color:var(--fg);box-shadow:var(--sh-lg)}
.hero--rev .hero__badge{left:auto;right:-20px}
.hero__badge-ic{width:46px;height:46px;--nut:var(--vermilion);--nut-fg:var(--on-vermilion)}
.hero__badge-ic .ic{width:22px;height:22px}
.hero__badge b{display:block;font-size:1.02rem;line-height:1.25;color:var(--fg-h)}
.hero__badge small{display:block;color:var(--fg-muted);font-size:.88rem;line-height:1.35;margin-top:2px}
/* the plate: the hero band stacks above its neighbour, the plate hangs --ov into it; the neighbour makes room with a transparent top border */
/* flow-root: the plate's negative bottom margin must not collapse through the band (then the band itself would end below the plate) */
.band.band--hasfoot{display:flow-root;padding-bottom:0;z-index:2}
.band.band--hasfoot+*{border-top:var(--ov) solid transparent}
.hero__foot{position:relative;margin:clamp(54px,5.6vw,80px) 0 calc(var(--ov) * -1)}
.hero__foot .hq{display:grid;grid-template-columns:repeat(var(--sn,3),minmax(0,1fr));gap:1px;margin:0;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)}
.hero__foot .hq li{background:var(--white);padding:18px 22px;gap:14px;font-size:.98rem}
.hero__foot .hq__ic{width:42px;height:42px}
.hero__foot .hq__ic .ic{width:19px;height:19px}
.hero__foot .hq li:nth-child(even) .hq__ic{--nut:var(--teal);--nut-fg:var(--white)}
:is(.hero__foot .hq,.trustbar ul):not(:has(>li:nth-child(3))){--sn:2}
:is(.hero__foot .hq,.trustbar ul):has(>li:nth-child(4)){--sn:4}
:is(.hero__foot .hq,.trustbar ul):has(>li:nth-child(5)){--sn:5}
/* split — light band: copy beside a figure that stands on an offset backing plate split warm | cold, a deep caption tab */
.hero--split{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,5vw,64px);align-items:center}
.hero--split.hero--rev{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.hero--split.hero--rev>:last-child{order:-1}
.hero__fig{margin:0;position:relative;padding:0 18px 18px 0}
.hero__fig::before{content:"";position:absolute;inset:18px 0 0 18px;border-radius:var(--r-lg);background:linear-gradient(90deg,var(--mat-a) 50%,var(--mat-b) 50%)}
.hero__fig-in{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--mist);border:2px solid var(--deep)}
.hero__fig-in .illu{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero__fig figcaption,.hero__strip figcaption{position:relative;display:table;margin:-24px 0 0 22px;padding:10px 16px;border-radius:var(--r-btn);background:var(--bg-band);color:var(--fg-h);font-size:.9rem;font-weight:700;line-height:1.35;max-width:calc(100% - 44px);box-shadow:var(--sh)}
/* column — centred copy, a wide strip below on a hex-dot lattice */
.hero--column{text-align:center;max-width:920px;margin:0 auto}
.hero--column .crumbs ol,.hero--column .hero__cta,.hero--column .hq{justify-content:center}
.hero--column .lead{margin-left:auto;margin-right:auto}
.hero--column .hero__note{justify-content:center;margin-left:auto;margin-right:auto;text-align:left}
.hero--column .display{font-size:clamp(34px,5.2vw,60px)}
.hero__strip{margin:clamp(32px,4.4vw,52px) 0 0}
.hero__strip-in{position:relative;isolation:isolate;display:flex;justify-content:center;padding:clamp(14px,2.4vw,28px);border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line);box-shadow:var(--sh)}
.hero__strip-in::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--mist-2);-webkit-mask:var(--m-hexdots) 0 0/28px 48px repeat;mask:var(--m-hexdots) 0 0/28px 48px repeat}
.hero__strip-pic{width:min(100%,calc(clamp(220px,30vw,380px) * 4 / 3));overflow:hidden;border-radius:var(--r);background:var(--mist);border:2px solid var(--deep)}
.hero__strip-pic .illu{width:100%;aspect-ratio:4/3;object-fit:cover}
/* panel — copy + aside */
.hero--panel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,64px);align-items:center}
.hero__aside{position:relative;min-width:0}
/* emergency — teal block, a white dial plate with a split top edge, the first steps as numbered veil cards */
.hero--emergency{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(26px,4vw,56px);align-items:center}
.hero--emergency .hero__copy .lead{margin:0}
/* the split top edge reads the BAND's surface-edge pair (--sedge-*: vermilion | aqua on teal) — a fixed vermilion | teal edge let its
   teal half melt into the teal hero, so only a half bar was left */
.hero__dial{position:relative;color:var(--fg);border-radius:var(--r-lg);padding:clamp(26px,3vw,36px) clamp(22px,3vw,34px) clamp(22px,3vw,32px);
  background:linear-gradient(90deg,var(--sedge-a) 50%,var(--sedge-b) 50%) top/100% 8px no-repeat,var(--white);box-shadow:var(--sh-lg)}
.hero__dial-k{display:inline-flex;align-items:center;gap:10px;font:700 .85rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--vermilion-700);margin-bottom:14px}
.hero__dial .telbig{display:flex}
.hero__dial-n{margin:14px 0 18px;color:var(--muted);font-size:.97rem}
.hero__dial-btn{width:100%}
.ersteps{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}
.ersteps li{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--r);background:var(--card);border:1px solid var(--card-bd)}
.ersteps__n{width:44px;height:44px;--nut:var(--num-bg);--nut-fg:var(--num-fg);font:900 1.1rem/1 var(--sans)}
.ersteps b{display:block;color:var(--fg-h);font:700 1.06rem/1.3 var(--sans);margin-bottom:4px}
.ersteps li>div>span{display:block;color:var(--fg-muted);font-size:.95rem;line-height:1.5}
.hero--emergency .hq{grid-column:1/-1;margin-top:0}

/* ---------------------------------------------------------------- trustbar */
.trustbar{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trustbar ul{display:grid;grid-template-columns:repeat(var(--sn,3),auto);justify-content:space-between;gap:14px 30px;padding:18px 0;list-style:none}
.trustbar li{display:flex;align-items:center;gap:11px;font-weight:700;font-size:.96rem;color:var(--ink)}
.trustbar__ic{width:40px;height:40px;--nut:var(--vermilion);--nut-fg:var(--on-vermilion)}
.trustbar li:nth-child(even) .trustbar__ic{--nut:var(--teal);--nut-fg:var(--white)}
.trustbar__ic .ic{width:19px;height:19px}

/* ------------------------------------------------------------------- split */
.split{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:clamp(30px,5vw,64px);align-items:center}
.split--rev{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr)}
.split--rev>:last-child{order:-1}
.split--wide-l{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr)}
.split--wide-r{grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr)}
.split--top{align-items:start}
.split__copy>.stitle{margin-bottom:.4em}
.split__copy .lead{margin-bottom:1em}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
.cols--wide-l{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.cols--wide-r{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.split>*,.cols>*,.lede>*,.row>*,.pblock>*,.phoneband>*,.cta>*,.factsheet dl>div>*,.notice>*{min-width:0}

/* figures + portrait */
.fig{margin:0;position:relative}
.fig__in{overflow:hidden;background:var(--mist);border-radius:var(--r-lg);box-shadow:var(--sh)}
.fig__in .illu{width:100%;aspect-ratio:4/3;object-fit:cover}
.fig__in .illu--sq{aspect-ratio:1}
.fig--tilt .fig__in{transform:rotate(-1.6deg)}
.fig--round .fig__in{border-radius:50%;border:8px solid var(--white)}
.fig--round .illu{aspect-ratio:1}
.fig--flat .fig__in{box-shadow:none}
/* nut frame: the split mat of the hero, smaller (sbk_figure() maps an old frame name to 'nut' before it prints the class) */
.fig--nut .fig__in{padding:12px;border-radius:var(--r-lg);background:linear-gradient(90deg,var(--mat-a) 50%,var(--mat-b) 50%);box-shadow:var(--sh)}
.fig--nut .fig__in .illu{border-radius:var(--r-xs);background:var(--mist)}
.fig figcaption{margin-top:16px;font-size:.92rem;font-weight:700;color:var(--fg-muted);text-align:center}
/* the portrait is the favicon blown up: a vermilion HEX NUT ring with the person inside, a deep nut badge on its lower right flank */
.portrait{position:relative;width:min(370px,86%);margin:0 auto;filter:drop-shadow(0 20px 26px rgba(6,29,36,.32))}
.portrait__ring{position:relative;aspect-ratio:.866;background:var(--vermilion);-webkit-mask:var(--m-nut) center/100% 100% no-repeat;mask:var(--m-nut) center/100% 100% no-repeat}
.portrait__ring .illu{position:absolute;left:7%;top:6%;width:86%;height:88%;object-fit:cover;background:var(--mist);-webkit-mask:var(--m-nut) center/100% 100% no-repeat;mask:var(--m-nut) center/100% 100% no-repeat}
.band--vermilion .portrait__ring{background:var(--teal)}
.band--white .portrait__ring,.band--mist .portrait__ring{background:linear-gradient(90deg,var(--vermilion) 50%,var(--teal) 50%)}
.portrait__badge{position:absolute;right:-2%;bottom:14%;width:74px;height:74px;--nut:var(--deep);--nut-fg:var(--aqua);
  filter:drop-shadow(4px 0 0 var(--bg-band)) drop-shadow(-4px 0 0 var(--bg-band)) drop-shadow(0 4px 0 var(--bg-band)) drop-shadow(0 -4px 0 var(--bg-band))}
.portrait__badge .ic{width:28px;height:28px}
.pblock{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5.4vw,72px);align-items:center}
.pblock--rev{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.pblock--rev>.pblock__media{order:-1}
.pblock__copy .lead{margin-bottom:28px}
.pblock__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ------------------------------------------------------ illustration zoom --
   The art is full-bleed (no mat), so --z is 1; hover multiplies it. The square 'monteur' is zoomed into the nut. */
:is(.hero__pic,.card__media,.gal__pic,.row__shot,.fig__in,.hero__fig-in,.hero__strip-pic) .illu{transform:scale(var(--z,1));transition:transform .55s var(--ease)}
.fig--round .fig__in .illu--sq{--z:1.32;transform-origin:50% 50%}

/* -------------------------------------------------------------------- lede */
.lede{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(28px,4.6vw,56px);align-items:start}
.lede__cols{column-count:2;column-gap:clamp(24px,3vw,38px)}
.lede__cols p{margin:0 0 16px;break-inside:avoid}
.lede__cols p:first-child{font-size:1.08em;color:var(--fg-h);font-weight:600}
.lede__aside{position:sticky;top:110px}
/* pull statement: a surface with a split left edge (warm over cold) */
.pull{margin:0;padding:26px 28px 26px 34px;border-radius:var(--r);border:1px solid var(--card-bd);
  background:linear-gradient(180deg,var(--sedge-a) 50%,var(--sedge-b) 50%) left/6px 100% no-repeat,var(--card);font:700 clamp(19px,1.9vw,23px)/1.4 var(--sans);color:var(--fg-h)}
.band--white .pull,.band--mist .pull{box-shadow:var(--sh-sm)}
.pull p{margin:0}
.pull cite{display:block;font:600 .88rem/1.4 var(--sans);font-style:normal;color:var(--fg-muted);margin-top:12px}
.pull--center{max-width:840px;margin:0 auto;text-align:center;padding:30px 32px 30px 38px}

/* -------------------------------------------------------------------- rows */
.rows{display:grid;gap:16px}
.row{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) 210px;gap:clamp(16px,2.6vw,28px);align-items:center;padding:clamp(16px,2vw,20px);background:var(--card);border:1px solid var(--card-bd);border-radius:var(--r);
  transition:transform .2s var(--ease),box-shadow .2s}
.band--white .row,.band--mist .row,.band--vermilion .row{box-shadow:var(--sh-sm)}
.rows--nomedia .row{grid-template-columns:56px minmax(0,1fr)}
.row--link:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.row__n{width:52px;height:52px;--nut:var(--num-bg);--nut-fg:var(--num-fg);font:900 1.02rem/1 var(--sans)}
.row__t{font-size:clamp(1.12rem,1.5vw,1.26rem);margin:0 0 5px}
.row__b p{margin:0;color:var(--fg-muted);font-size:.97rem;line-height:1.56}
.row__a{color:inherit;text-decoration:none}
.row__a::after{content:"";position:absolute;inset:0;z-index:1}
.row__a:focus-visible{outline:none}
.row--link:focus-within{outline:3px solid var(--ring-out);outline-offset:4px}
.row__more{display:inline-block;margin-top:10px;font-weight:700;font-size:.92rem;color:var(--fg-h)}
.row__more .ic{width:16px;height:16px;color:var(--hl);transition:transform .16s var(--ease)}
.row--link:hover .row__more .ic{transform:translateX(4px)}
.row__shot{aspect-ratio:16/10;border-radius:var(--r-btn);overflow:hidden;background:var(--mist)}
.row__shot .illu{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.row--link:hover .row__shot .illu{transform:scale(calc(var(--z,1) * 1.05))}

/* ---------------------------------------- the chamfer (one cut top-right corner) --
   A triangle in the colour of the band UNDER the surface (--under, not reset by the white surface) with the
   surface's hairline on its diagonal — cards, gallery tiles, stat and dial plates read as machined, not moulded. */
.card:not(.cards--plain .card)::before,.gal figure::before,.stat::before,.cta__dial::before,.phonebox::before{
  content:"";position:absolute;z-index:3;top:-1px;right:-1px;width:var(--cut);height:var(--cut);pointer-events:none;
  background:linear-gradient(225deg,var(--under) 0 calc(50% - .5px),var(--cut-line) calc(50% - .5px) calc(50% + .75px),transparent calc(50% + .75px))}

/* ----------------------------------------------------------------- gallery */
.gal{display:grid;gap:20px;grid-auto-flow:dense}
.gal--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gal--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gal figure{position:relative;margin:0;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--card-bd);border-radius:var(--r);box-shadow:var(--sh-sm);transition:transform .25s var(--ease),box-shadow .25s}
.band--vermilion .gal figure,.band--teal .gal figure{border-color:transparent}
.gal figure:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.gal__pic{position:relative;border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;overflow:hidden;background:var(--mist)}
.gal__pic .illu{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s var(--ease)}
.gal figure:hover .illu{transform:scale(calc(var(--z,1) * 1.05))}
.gal figcaption{padding:12px 14px 14px;font-size:.9rem;color:var(--muted);line-height:1.42}
.gal figcaption b{display:flex;align-items:flex-start;gap:8px;color:var(--ink);font-size:1rem;font-weight:700;margin-bottom:2px}
/* the nut sits on the FIRST line of a wrapped title (1.42 = the caption line-height), not in the middle of the block */
.gal figcaption b::before{margin-top:calc((1.42em - 14px) / 2)}
.gal figcaption span{display:block}
.gal>.gal--wide{grid-column:span 2}
.gal>.gal--wide .illu{aspect-ratio:2/1}
.gal>.gal--big{grid-column:span 2;grid-row:span 2}
.gal>.gal--tall{grid-row:span 2}
.gal>:is(.gal--big,.gal--tall) .gal__pic{flex:1;min-height:200px}
.gal>:is(.gal--big,.gal--tall) .illu{position:absolute;inset:0;height:100%;aspect-ratio:auto}

/* ----------------------------------------------------------------- callrow */
.callrow{position:relative;overflow:hidden;isolation:isolate;background-color:var(--bg-band);color:var(--fg);border-radius:var(--r-lg);padding:clamp(24px,3.2vw,36px) clamp(22px,3.6vw,44px);display:flex;justify-content:space-between;align-items:center;gap:20px 30px;flex-wrap:wrap;box-shadow:var(--sh)}
/* the watermark nut rises from the lower right edge: its top vertex and upper flanks show, so it reads as a nut (centred, only its
   straight flank showed and looked like a dark slab) */
.callrow::after{content:"";position:absolute;z-index:-1;right:-34px;bottom:-112px;width:170px;height:196px;background:var(--wm);-webkit-mask:var(--m-nut) center/contain no-repeat;mask:var(--m-nut) center/contain no-repeat}
.callrow p.callrow__t{font:900 clamp(1.3rem,2.2vw,1.7rem)/1.2 var(--sans);color:var(--fg-h);margin:0 0 4px}
.callrow p{margin:0;color:var(--fg-muted);max-width:56ch}
.callrow .telbig{color:var(--fg-h)}

/* --------------------------------------------------------------- checklist */
.checklist{display:grid;gap:20px 32px;margin:4px 0 0}
.checklist--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.checklist li{display:flex;gap:16px;align-items:flex-start}
.ci__ic{width:50px;height:50px;--nut:var(--tile-bg);--nut-fg:var(--tile-fg)}
.ci__ic .ic{width:23px;height:23px}
.checklist b{display:block;font:700 1.08rem/1.3 var(--sans);margin:3px 0 3px;color:var(--fg-h)}
.checklist li>div>span{color:var(--fg-muted);font-size:.97rem;line-height:1.55;display:block}

/* ------------------------------------------------------------------- cards
   White machined cards (chamfered corner); a photo card's icon NUT sits on the seam between picture and text. */
.cards{display:grid;gap:24px}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;background:var(--white);color:var(--fg);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;box-shadow:var(--sh-sm);
  transition:transform .22s var(--ease),box-shadow .22s}
.band--vermilion .card,.band--teal .card{border-color:transparent;--cut-line:transparent}
.card--link:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.card__body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.card__media{background:var(--mist);aspect-ratio:16/10;overflow:hidden;border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
.card__media .illu{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.card--link:hover .card__media .illu{transform:scale(calc(var(--z,1) * 1.05))}
.card__media--ic{display:grid;place-items:center;background-color:var(--mist)}
.card__bigic{width:84px;height:84px;--nut:var(--vermilion);--nut-fg:var(--on-vermilion)}
.card__bigic .ic{width:34px;height:34px}
/* the nut on the seam: ringed in the card's white so it reads as set into the edge */
.card__bk{z-index:2;align-self:flex-start;margin:-52px 0 8px -4px;width:54px;height:54px;--nut:var(--bk-bg);--nut-fg:var(--bk-fg);
  filter:drop-shadow(3px 0 0 var(--white)) drop-shadow(-3px 0 0 var(--white)) drop-shadow(0 3px 0 var(--white)) drop-shadow(0 -3px 0 var(--white))}
.card__bk .ic{width:24px;height:24px}
.card__ic{width:54px;height:54px;--nut:var(--tile-bg);--nut-fg:var(--tile-fg);margin-bottom:16px}
.card__ic .ic{width:24px;height:24px}
.card__num{width:50px;height:50px;--nut:var(--num-bg);--nut-fg:var(--num-fg);font:900 1.12rem/1 var(--sans);margin-bottom:16px}
.card__t{font-size:1.2rem;margin:0 0 8px}
.card p{color:var(--fg-muted);font-size:.97rem;margin:0;line-height:1.56}
.card__a{color:inherit;text-decoration:none}
.card__a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r)}
.card__a:focus-visible{outline:none}
/* the card is a white surface (light token scope), but its ring is drawn on the BAND: --ring-out comes from the band */
.card--link:focus-within{outline:3px solid var(--ring-out);outline-offset:4px}
.card__more{margin-top:auto;padding-top:16px;display:block;font-weight:700;font-size:.93rem;color:var(--fg-h)}
.card__more .ic{width:17px;height:17px;color:var(--hl);transition:transform .16s var(--ease)}
.card--link:hover .card__more .ic{transform:translateX(4px)}
/* line = a split top edge (the band's surface edge: vermilion | teal on light, deep | teal on vermilion, vermilion | aqua on teal) */
.cards--line .card{background:linear-gradient(90deg,var(--sedge-a) 50%,var(--sedge-b) 50%) top/100% 6px no-repeat,var(--white);padding-top:6px}
/* plain = no surface: the card takes the BAND's colours (it is in the light scope list as a .card) */
.cards--plain .card{background:transparent;border:0;box-shadow:none;--fg:inherit;--fg-h:inherit;--fg-muted:inherit;--link:inherit;--focus:inherit;--hl:inherit;--tile-bg:inherit;--tile-fg:inherit;--num-bg:inherit;--num-fg:inherit}
.cards--plain .card__body{padding:0}
.cards--plain .card p{color:inherit}

/* --------------------------------------------------------------- promises
   Instead of reviews: our working principles. The surface follows the band (deep veil on teal, white elsewhere),
   with a split top edge, a nut, and an index number in the kicker colour. */
.promises{display:grid;gap:24px}
.promises--2{grid-template-columns:repeat(2,minmax(0,1fr))}.promises--3{grid-template-columns:repeat(3,minmax(0,1fr))}.promises--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.promise{position:relative;display:flex;flex-direction:column;color:var(--fg);border:1px solid var(--card-bd);border-radius:var(--r);padding:30px 26px 22px;
  background:linear-gradient(90deg,var(--sedge-a) 50%,var(--sedge-b) 50%) top/100% 6px no-repeat,var(--card);transition:transform .22s var(--ease),box-shadow .22s}
.band--white .promise,.band--mist .promise,.band--vermilion .promise{box-shadow:var(--sh-sm)}
.promise:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.promise__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.promise__ic{width:56px;height:56px;--nut:var(--tile-bg);--nut-fg:var(--tile-fg)}
.promise__ic .ic{width:25px;height:25px}
.promise__n{font:900 1rem/1 var(--sans);letter-spacing:.14em;color:var(--kick-fg)}
.promise__t{font-size:1.2rem;margin:0 0 8px;color:var(--fg-h)}
.promise p{margin:0;color:var(--fg)}
.promise p.promise__foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:16px;border-top:1px solid var(--rule);font-size:.88rem;font-weight:700;color:var(--kick-fg)}
.promise__foot .ic{width:17px;height:17px}
.promise>p:not(.promise__foot){margin-bottom:18px}

/* ------------------------------------------------------------------- steps
   „boxes“: step cards joined by a PIPE at the height of their number nuts (one-row layouts, ≥ 1061 px; on phones
   the pipe runs vertically from nut to nut) · „rail“: open steps on one continuous pipe · „line“ · „vertical“ */
.steps{display:grid;gap:var(--sg);--sg:28px}
.steps--c2{grid-template-columns:repeat(2,minmax(0,1fr))}.steps--c3{grid-template-columns:repeat(3,minmax(0,1fr))}.steps--c4{grid-template-columns:repeat(4,minmax(0,1fr))}.steps--c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.step{position:relative;padding:22px;background:var(--card);border:1px solid var(--card-bd);border-radius:var(--r)}
.band--white .step,.band--mist .step,.band--vermilion .step{box-shadow:var(--sh-sm)}
.step__n{width:52px;height:52px;--nut:var(--num-bg);--nut-fg:var(--num-fg);font:900 1.2rem/1 var(--sans);margin:0 0 16px}
.step__t{font-size:1.1rem;margin:0 0 6px}
.step p{margin:0;color:var(--fg-muted);font-size:.96rem;line-height:1.56}
.steps--rail .step,.steps--line .step{background:none;border:0;box-shadow:none;padding:0}
.steps--line .step{border-top:4px solid var(--pipe);padding-top:20px;border-radius:0}
.steps.steps--vertical{grid-template-columns:minmax(0,1fr);--sg:14px}
.steps--vertical .step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;align-items:start;padding:18px 22px}
.steps--vertical .step__n{margin:0}
.steps--vertical .step:not(:last-child)::after{content:"";position:absolute;z-index:2;left:calc(22px + 26px - 3px);top:calc(18px + 52px);width:6px;height:calc(100% - 52px + var(--sg));background:var(--pipe)}
@media (min-width:1061px){
  /* pipe segment across the gap (boxes) / from nut to nut (rail), at the nut's centre line; never past a row end */
  .steps--boxes:not(.steps--vertical) .step:not(:last-child)::after{content:"";position:absolute;z-index:2;top:calc(22px + 26px - 3px);left:66px;right:calc((var(--sg) + 23px) * -1);height:6px;border-radius:3px;background:var(--pipe)}
  .steps--boxes:not(.steps--vertical) .step:not(:last-child)::before{content:"";position:absolute;z-index:3;top:calc(22px + 26px - 9px);right:calc(var(--sg) / -2 - 8px);width:16px;height:18px;background:var(--pipe);-webkit-mask:var(--m-nut) center/contain no-repeat;mask:var(--m-nut) center/contain no-repeat}
  .steps--rail .step:not(:last-child)::after{content:"";position:absolute;z-index:0;top:23px;left:60px;right:calc(var(--sg) * -1 + 4px);height:6px;border-radius:3px;background:var(--pipe)}
  :is(.steps--c2 .step:nth-child(2n),.steps--c3 .step:nth-child(3n),.steps--c4 .step:nth-child(4n),.steps--c5 .step:nth-child(5n))::after,
  :is(.steps--c2 .step:nth-child(2n),.steps--c3 .step:nth-child(3n),.steps--c4 .step:nth-child(4n),.steps--c5 .step:nth-child(5n))::before{display:none}
}

/* --------------------------------------------------------------- phoneband
   Instead of the callback form: ONE panel split warm | cold — light copy half with the number and the call
   button, deep half with „Was wir am Telefon fragen“ — and a nut with the phone glyph sitting on the seam. */
.phoneband{position:relative;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);border-radius:var(--r-lg);box-shadow:var(--sh-lg)}
.phoneband--solo{grid-template-columns:minmax(0,1fr)}
.phoneband__copy{background:var(--mist);color:var(--fg);padding:clamp(26px,4.2vw,52px);border-radius:var(--r-lg) 0 0 var(--r-lg);border:1px solid var(--line);border-right:0}
.phoneband--solo .phoneband__copy{border-radius:var(--r-lg);border-right:1px solid var(--line)}
.band--mist .phoneband__copy{background:var(--white)}
.phoneband .stitle{margin-bottom:.3em}
.phoneband .lead{margin:0;color:var(--fg)}
.phoneband__num{margin:24px 0 20px}
.phoneband__num .telbig{gap:16px}
.phoneband__num .telbig__ic{width:62px;height:62px}
.phoneband__note{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;font-size:.95rem;font-weight:600}
.phoneband__note .ic{width:20px;height:20px;margin-top:2px;color:var(--vermilion-700)}
.phoneband__asks{position:relative;background:var(--deep);color:var(--fg);padding:clamp(26px,3.6vw,44px) clamp(24px,3.4vw,40px) clamp(26px,3.6vw,44px) clamp(36px,4.4vw,56px);border-radius:0 var(--r-lg) var(--r-lg) 0}
/* the nut on the seam (first child of the deep half): on the vertical seam on wide screens, on the horizontal seam when stacked */
.phoneband__nut{position:absolute;z-index:2;left:-30px;top:clamp(26px,3.6vw,44px);width:60px;height:70px;display:grid;place-items:center;isolation:isolate;color:var(--on-vermilion)}
.phoneband__nut::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--vermilion);-webkit-mask:var(--m-nut) center/contain no-repeat;mask:var(--m-nut) center/contain no-repeat}
.phoneband__nut .ic{width:24px;height:24px}
.phoneband:hover .phoneband__nut::before{transform:rotate(60deg);transition:transform .6s var(--ease)}
.phoneband__k{display:flex;align-items:center;gap:10px;font:700 .85rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--kick-fg);margin:0 0 8px}
.asks li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--rule)}
.asks li:last-child{border-bottom:0;padding-bottom:0}
.asks__n{width:38px;height:38px;--nut:var(--num-bg);--nut-fg:var(--num-fg);font:900 .98rem/1 var(--sans)}
.asks b{display:block;color:var(--fg-h);line-height:1.35}
.asks li>div>span{display:block;color:var(--fg-muted);font-size:.95rem;line-height:1.5;margin-top:2px}

/* --------------------------------------------------------------------- faq
   White rows; an OPEN answer gets a teal frame, a split left edge (vermilion over teal) and a vermilion nut toggle */
.faq{max-width:880px;margin:0 auto;display:grid;gap:12px}
.qa{position:relative;background:var(--white);color:var(--fg);border:2px solid var(--line);border-radius:var(--r);transition:border-color .2s,box-shadow .2s}
.qa.is-open{border-color:var(--teal);box-shadow:var(--sh);background:linear-gradient(180deg,var(--vermilion) 50%,var(--teal) 50%) left/6px 100% no-repeat,var(--white)}
.qa__h{margin:0;font-size:inherit;font-weight:inherit;letter-spacing:0}
.qa__b{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:14px 18px 14px 24px;background:none;border:0;border-radius:inherit;cursor:pointer;text-align:left;font:700 1.06rem/1.38 var(--sans);color:var(--fg-h)}
.qa__b:focus-visible{outline-offset:-5px}
.qa__b:hover .qa__q{text-decoration:underline;text-decoration-color:var(--vermilion);text-decoration-thickness:3px;text-underline-offset:.2em}
.qa__ic{width:40px;height:40px;--nut:var(--mist-2);--nut-fg:var(--teal-700)}
.qa__ic .ic{width:18px;height:18px;transition:transform .25s var(--ease)}
.qa.is-open .qa__ic{--nut:var(--vermilion);--nut-fg:var(--on-vermilion)}
.qa.is-open .qa__ic .ic{transform:rotate(45deg)}
.qa__a{padding:0 26px 24px 24px;color:var(--fg);max-width:78ch}
.qa__a:not([hidden]){animation:qa-in .28s var(--ease)}
.qa__a p{margin:0 0 .8em}.qa__a p:last-child{margin:0}
.no-js .qa__a[hidden]{display:block}
@keyframes qa-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------------ notice */
.notice{--ntc:var(--teal);display:flex;gap:16px;align-items:flex-start;padding:20px 24px;border-radius:var(--r);border:2px solid var(--ntc);max-width:920px;background:var(--white);color:var(--fg);box-shadow:var(--sh-sm)}
.notice--danger{--ntc:var(--danger);background:var(--danger-bg)}
.notice--ok{--ntc:var(--vermilion-700)}
.notice__ic{width:48px;height:48px;--nut:var(--ntc);--nut-fg:var(--white)}
.notice__ic .ic{width:22px;height:22px}
.notice__t{font:700 1.12rem/1.3 var(--sans);color:var(--fg-h);margin:9px 0 6px}
.notice--danger .notice__t{color:var(--danger)}
.notice__b p{margin:0 0 .6em}.notice__b p:last-child{margin:0}
.notice--center{margin-left:auto;margin-right:auto}
/* a notice placed directly in a band (under a full-width grid, compare or split) spans the content width like them,
   instead of a 920 px box left-aligned with an empty strip on its right; 'center' => true keeps the centred 920 px box */
.wrap>.notice:not(.notice--center){max-width:none}
.hazard__steps{counter-reset:h;display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin:12px 0 14px}
.hazard__steps li{counter-increment:h;display:flex;gap:12px;align-items:flex-start;font-weight:600;min-width:0}
.hazard__steps li>span{min-width:0;overflow-wrap:break-word}
.hazard__steps li::before{content:counter(h);display:grid;place-items:center;flex:none;width:30px;height:34px;background:var(--danger);color:var(--white);font-size:.92rem;font-weight:700;-webkit-mask:var(--m-nut) center/contain no-repeat;mask:var(--m-nut) center/contain no-repeat}

/* ------------------------------------------------------------------- chips
   Hex TAGS: a flat-topped bar with pointed ends (a nut stretched sideways). The shape is drawn by two masked layers
   (::before = edge, ::after = fill) so the link's own focus ring stays a visible rectangle. */
.chips{display:flex;flex-wrap:wrap;gap:10px 12px}
.chips--center{justify-content:center;max-width:1000px;margin-left:auto;margin-right:auto}
.chip{--pt:14px;position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:8px;text-wrap:balance;min-height:46px;padding:10px 26px;font-weight:700;font-size:.95rem;line-height:1.25;text-decoration:none;color:var(--fg-h);transition:transform .16s var(--ease),color .16s}
.chip::before,.chip::after{content:"";position:absolute;z-index:-1;clip-path:polygon(var(--pt) 0,calc(100% - var(--pt)) 0,100% 50%,calc(100% - var(--pt)) 100%,var(--pt) 100%,0 50%);transition:background-color .16s}
.chip::before{inset:0;background:var(--chip-bd)}
.chip::after{inset:2px;background:var(--chip-bg)}
.chip .ic{width:17px;height:17px;color:var(--chip-ic);transition:transform .16s var(--ease)}
a.chip:hover{color:var(--call-fg);transform:translateY(-2px)}
a.chip:hover::before,a.chip:hover::after{background:var(--call-bg)}
a.chip:hover .ic{color:inherit;transform:translateX(3px)}
.chip--static{cursor:default}
.chips--band{gap:12px 14px}
.chips--band .chip{min-height:52px;padding:12px 30px;font-size:1rem}

/* --------------------------------------------------------------------- cta
   The closing: copy + links on the left, the DIAL PLATE on the right — kicker, big number, call button — in the
   counter-colour of the band (vermilion plate on teal, deep plate on vermilion, teal plate on light), chamfered,
   with a nut watermark; the band itself carries a big nut watermark low on the left. */
.cta{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"copy dial" "links dial";gap:0 clamp(32px,5vw,72px);align-items:center}
.cta__copy{grid-area:copy;align-self:end;max-width:640px}
.cta .stitle{margin-bottom:.35em}
.cta .lead{margin:0;color:var(--fg)}
.cta__dial{grid-area:dial;position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(24px,3vw,36px);border-radius:var(--r-lg);background-color:var(--bg-band);color:var(--fg);box-shadow:var(--sh-lg)}
.cta__dial::after{content:"";position:absolute;z-index:-1;right:-56px;bottom:-70px;width:220px;height:254px;background:var(--wm);-webkit-mask:var(--m-nut) center/contain no-repeat;mask:var(--m-nut) center/contain no-repeat}
.cta__dial .btn{width:100%;margin-top:4px}
.cta__k{display:inline-flex;align-items:center;gap:10px;text-wrap:balance;font:700 .85rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--kick-fg)}
.cta__links{grid-area:links;align-self:start;display:flex;flex-wrap:wrap;gap:6px 26px;margin:22px 0 0;font-weight:700}
.cta__links a{display:inline-flex;align-items:center;min-height:44px}
.band--cta{overflow:clip}
.band--cta::after{content:"";position:absolute;z-index:-1;left:max(-80px,calc(50% - var(--wrap)/2 - 140px));bottom:-90px;width:340px;height:392px;background:var(--wm);opacity:.6;-webkit-mask:var(--m-nut) center/contain no-repeat;mask:var(--m-nut) center/contain no-repeat;pointer-events:none}

/* ---------------------------------------------------------------- phonebox */
.phonebox{position:relative;color:var(--fg);border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--sh-lg);overflow:hidden;
  background:linear-gradient(90deg,var(--sedge-a) 50%,var(--sedge-b) 50%) top/100% 6px no-repeat,var(--white)}
.phonebox__top{padding:clamp(24px,3vw,32px) clamp(22px,3vw,30px) clamp(22px,3vw,28px);border-bottom:1px solid var(--line)}
.phonebox p.phonebox__t{font:900 1.3rem/1.2 var(--sans);color:var(--fg-h);margin:0 0 6px}
.phonebox__top p{color:var(--fg-muted);margin:0 0 16px}
.phonebox__asks{padding:clamp(12px,2vw,18px) clamp(22px,3vw,30px);display:grid;background:var(--mist)}
.phonebox__asks li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.phonebox__asks li:last-child{border-bottom:0}
.phonebox__asks .ic{width:21px;height:21px;color:var(--vermilion-700);margin-top:3px}
.phonebox__asks b{display:block}
.phonebox__asks li>div>span{display:block;color:var(--fg-muted);font-size:.95rem}
.phonebox__note{display:flex;gap:10px;align-items:flex-start;margin:0;padding:15px clamp(22px,3vw,30px);font-size:.94rem;font-weight:600;background:var(--white)}
.phonebox__note .ic{width:20px;height:20px;color:var(--vermilion-700);margin-top:2px}

/* ----------------------------------------------------------------- factors */
.factors{display:grid;gap:22px}
.factors--2{grid-template-columns:repeat(2,minmax(0,1fr))}.factors--3{grid-template-columns:repeat(3,minmax(0,1fr))}.factors--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.factor{padding:24px;border-radius:var(--r);background:var(--card);border:1px solid var(--card-bd);transition:transform .2s var(--ease),box-shadow .2s}
.band--white .factor,.band--mist .factor,.band--vermilion .factor{box-shadow:var(--sh-sm)}
.factor:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.factor__ic{width:52px;height:52px;--nut:var(--tile-bg);--nut-fg:var(--tile-fg);margin-bottom:15px}
.factor__ic .ic{width:24px;height:24px}
.factor__t{font-size:1.1rem;margin-bottom:6px}
.factor p{margin:0;color:var(--fg-muted);font-size:.96rem;line-height:1.56}

/* ------------------------------------------------------------------- stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:0}
.stat{position:relative;padding:22px 24px;border-radius:var(--r);background:var(--card);border:1px solid var(--card-bd);display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px}
/* column-reverse packs from the bottom: flex-end lifts the numbers to one top line in every card, whatever the label length */
.band--white .stat,.band--mist .stat,.band--vermilion .stat{box-shadow:var(--sh-sm)}
.stat dd{margin:0;font:900 clamp(36px,3.8vw,48px)/1 var(--sans);letter-spacing:-.03em;color:var(--hl)}
.stat dt{font-size:.94rem;font-weight:700;color:var(--fg-muted);overflow-wrap:anywhere}

/* ----------------------------------------------------------------- compare */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.compare__col{border-radius:var(--r);padding:24px 26px;background:var(--white);color:var(--fg);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.compare__col--yes{border-top:6px solid var(--vermilion)}
.compare__col--no{border-top:6px solid var(--line-strong);background:var(--mist)}
.compare__t{display:flex;align-items:center;gap:10px;font:700 1.12rem/1.3 var(--sans);color:var(--fg-h);margin:0 0 12px}
.compare__col--yes .compare__t .ic{color:var(--vermilion-700)}
.compare__col--no .compare__t .ic{color:var(--muted)}
.compare li{padding:9px 0 9px 28px;position:relative;line-height:1.5;border-bottom:1px solid var(--line)}
.compare li:last-child{border-bottom:0}
.compare li::before{content:"";position:absolute;left:2px;top:.78em;width:12px;height:7px;border-left:3px solid var(--vermilion-700);border-bottom:3px solid var(--vermilion-700);transform:rotate(-45deg)}
.compare__col--no li::before{width:11px;height:3px;border:0;background:var(--muted);transform:none;top:1.05em}

/* ------------------------------------------------------------------- tiles */
.tiles{display:grid;gap:20px}
.tiles--2{grid-template-columns:repeat(2,minmax(0,1fr))}.tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}.tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{padding:22px 20px;border-radius:var(--r);background:var(--card);border:1px solid var(--card-bd);transition:transform .2s var(--ease),box-shadow .2s}
.band--white .tile,.band--mist .tile,.band--vermilion .tile{box-shadow:var(--sh-sm)}
.tile:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.tile__ic{width:50px;height:50px;--nut:var(--num-bg);--nut-fg:var(--num-fg);margin-bottom:14px}
.tile__ic .ic{width:23px;height:23px}
.tile__t{font-size:1.07rem;margin-bottom:5px}
.tile p{margin:0;color:var(--fg-muted);font-size:.95rem;line-height:1.55}

/* ---------------------------------------------------------------- timeline
   A vertical pipe with nuts as markers; each nut holds the favicon's drop */
.timeline{position:relative;display:grid;gap:22px;max-width:880px}
.timeline::before{content:"";position:absolute;left:21px;top:26px;bottom:26px;width:6px;background:var(--pipe);opacity:.55}
.timeline li{position:relative;padding-left:72px;min-height:52px}
.timeline li::before{content:"";position:absolute;left:0;top:0;width:48px;height:52px;background:var(--num-bg);-webkit-mask:var(--m-nut) center/contain no-repeat;mask:var(--m-nut) center/contain no-repeat}
.timeline li::after{content:"";position:absolute;left:17px;top:15px;width:14px;height:21px;background:var(--num-fg);-webkit-mask:var(--m-drop) center/contain no-repeat;mask:var(--m-drop) center/contain no-repeat}
.timeline__k{display:block;font:700 .85rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--kick-fg);padding-top:2px}
.timeline__t{font-size:1.12rem;margin:2px 0 4px}
.timeline p{margin:0;color:var(--fg-muted)}

/* --------------------------------------------------------------- statement */
.statement{max-width:920px;margin:0 auto;text-align:center}
.statement__t{font:900 clamp(26px,3.2vw,40px)/1.22 var(--sans);letter-spacing:-.02em;color:var(--fg-h);margin:0;text-wrap:balance}
.statement__t mark{background:linear-gradient(transparent 58%,var(--mark) 58% 94%,transparent 94%);color:inherit;padding:0 .06em}
.statement__s{margin:18px auto 0;color:var(--fg-muted);max-width:60ch}

/* --------------------------------------------------------------- factsheet */
.factsheet{position:relative;color:var(--fg);border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh);padding:clamp(22px,2.6vw,30px) clamp(20px,2.6vw,30px) clamp(16px,2vw,22px);container-type:inline-size;
  background:linear-gradient(90deg,var(--sedge-a) 50%,var(--sedge-b) 50%) top/100% 6px no-repeat,var(--white)}
.factsheet__t{display:inline-flex;align-items:center;gap:10px;font:700 .85rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--vermilion-700);margin:0 0 12px}
.factsheet dl{margin:0;display:grid}
.factsheet dl>div{display:grid;grid-template-columns:minmax(110px,40%) minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.factsheet dt{font-weight:700;color:var(--fg-muted);font-size:.94rem}
.factsheet dd{margin:0;color:var(--fg-h);font-weight:600}
.factsheet dt,.factsheet dd{overflow-wrap:break-word}
/* a NARROW sheet (e.g. the lede aside at 981–1199 px) stacks label over value instead of squeezing long
   German compounds into a 120 px column — sized by the sheet itself */
@container (max-width:356px){.factsheet dl>div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* ------------------------------------------------------------------- prose */
.prose{max-width:72ch}
.prose h2{margin:1.3em 0 .5em}.prose h2:first-child{margin-top:0}
.prose h3{margin:1.4em 0 .4em;font-size:1.22rem}
.prose p{color:var(--fg)}
.ticks{display:grid;gap:11px;margin:0 0 1.2em}
.ticks li{display:flex;gap:12px;align-items:flex-start}
.ticks .ic{width:24px;height:27px;margin-top:0;padding:7px 5px;background:var(--tile-bg);color:var(--tile-fg);-webkit-mask:var(--m-nut) center/contain no-repeat;mask:var(--m-nut) center/contain no-repeat}

/* ------------------------------------------------------------------ footer
   Deep. A warm | cold seam across the top edge, then the PHONE LINE — a big aqua number with a vermilion nut,
   the whole line one tel: link — then brand · Leistungen · Service · Rechtliches as open columns (no panels). */
.foot{position:relative;background:var(--deep);color:var(--fg);padding:clamp(48px,5.6vw,72px) 0 26px;font-size:.95rem}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--vermilion) 50%,var(--aqua) 50%)}
.foot__dial{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px;padding-bottom:clamp(26px,3.2vw,38px);margin-bottom:clamp(28px,3.4vw,42px);border-bottom:1px solid var(--rule)}
.foot__dial-k{display:flex;align-items:center;gap:10px;font:700 .85rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;margin:0 0 8px;color:var(--kick-fg)}
.foot__tel{display:inline-flex;align-items:center;gap:16px;min-height:56px;font:900 clamp(30px,4.4vw,54px)/1.05 var(--sans);letter-spacing:-.02em;color:var(--aqua);text-decoration:none;white-space:nowrap}
.foot__tel:hover span:last-child{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.14em}
.foot__telic{width:62px;height:62px;--nut:var(--vermilion);--nut-fg:var(--on-vermilion)}
.foot__telic .ic{width:26px;height:26px}
.foot__note{margin:0;max-width:36ch;font-size:1rem;font-weight:600;color:var(--fg-h)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.6fr) minmax(0,.8fr) minmax(0,.85fr);gap:clamp(22px,3vw,40px)}
.foot .brand{margin-bottom:16px}
.foot .brand__n{color:var(--white)}
.foot .brand__s{color:var(--aqua)}
.foot__brandcol p{max-width:40ch;margin:0}
.foot h2{display:flex;align-items:center;gap:9px;font:700 .85rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--kick-fg);margin:0 0 10px}
.foot ul{list-style:none;display:grid;column-gap:24px}
.foot__col--svc ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.foot__col--more{display:contents}
.foot li a,.foot__col nav a{color:var(--link);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;min-width:44px;line-height:1.3}
.foot li a:hover{text-decoration:underline;text-decoration-color:var(--aqua)}
.foot__bar{margin-top:clamp(28px,3.4vw,40px);padding-top:20px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;font-size:.86rem}
.foot__bar p{margin:0}

/* ------------------------------------------------------- callbar + to-top */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:200;display:none;padding:12px 14px calc(10px + env(safe-area-inset-bottom));background:var(--deep);box-shadow:0 -8px 24px rgba(6,29,36,.22)}
.callbar::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--vermilion) 50%,var(--aqua) 50%)}
.callbar .btn{width:100%;min-height:54px}
.drawer-open .callbar,.drawer-open .totop{display:none}
/* to-top: a teal nut (the shape is the ::before, so the focus ring of the button itself stays visible) */
.totop{position:fixed;right:22px;bottom:24px;z-index:190;width:52px;height:56px;border:0;padding:0;background:none;color:var(--white);display:grid;place-items:center;cursor:pointer;isolation:isolate;
  filter:drop-shadow(0 6px 10px rgba(6,29,36,.3));opacity:0;visibility:hidden;translate:0 14px;transition:opacity .25s,translate .25s var(--ease),visibility .25s,color .2s}
.totop::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--teal);-webkit-mask:var(--m-nut) center/contain no-repeat;mask:var(--m-nut) center/contain no-repeat;transition:transform .6s var(--ease),background-color .2s}
.totop .ic{width:22px;height:22px}
.totop.show{opacity:1;visibility:visible;translate:0 0}
.totop:hover{color:var(--on-vermilion)}
.totop:hover::before{background:var(--vermilion);transform:rotate(60deg)}
/* two-tone ring: white 3 px + deep halo — visible over every band, vermilion included */
.totop:focus-visible{outline:3px solid var(--white);outline-offset:2px;box-shadow:0 0 0 7px var(--deep)}

/* ------------------------------------------------------------- legal page */
.legal-hero{background-color:var(--vermilion);color:var(--on-vermilion)}
.legal-hero .display{font-size:clamp(32px,4vw,48px);margin:0;color:var(--on-vermilion)}
.legal-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:22px}
.legal-hero__note{font-size:.95rem;font-weight:600;color:var(--fg)}
.legal-body{max-width:880px}
.legal-body h2{font-size:1.5rem;font-weight:900;margin:1.6em 0 .5em;color:var(--ink)}
.legal-body h3{font-size:1.18rem;margin:1.4em 0 .4em;color:var(--ink)}
.legal-body ul{padding-left:1.2em;margin:0 0 1em}
.legal-body li{margin:0 0 .3em}
.legal-body li::marker{color:var(--vermilion-700)}
.legal-slot{border:2px dashed var(--line-strong);border-radius:var(--r);padding:24px;background:var(--mist)}
.legal-lead{font-size:1.14rem;color:var(--muted);margin:0 0 1.4em;padding-left:18px;background:linear-gradient(180deg,var(--vermilion) 50%,var(--teal) 50%) left/5px 100% no-repeat}
.legal-ledger{margin:0 0 1.4em;border-top:3px solid var(--teal)}
.legal-ledger>div{display:grid;grid-template-columns:minmax(150px,32%) minmax(0,1fr);gap:6px 18px;padding:12px 0;border-bottom:1px solid var(--line)}
.legal-ledger dt{font-weight:700;color:var(--ink)}
.legal-ledger dd{margin:0;color:var(--text);overflow-wrap:anywhere}
.legal-toc{background:var(--mist);border-radius:var(--r);padding:18px 22px;margin:0 0 1.6em;border:1px solid var(--line)}
.legal-toc ol{margin:0;padding-left:1.4em;columns:2;column-gap:32px}
.legal-toc li{margin:0 0 .3em;break-inside:avoid}
.legal-body h2[id]{scroll-margin-top:110px}
.legal-note{margin-top:2em;padding:16px 20px;border-radius:var(--r);background:var(--mist);color:var(--muted);font-size:.95rem}
/* the phone number and the mail address of the Impressum are the contact path: a full 44 px target. In the ledger (a block of its own) the link is a 44 px flex box;
   in the running sentence of the note it stays inline and gets 10 px of padding above and below, which extends the hit area without breaking the line rhythm */
.legal-ledger a{display:inline-flex;align-items:center;min-height:44px}
.legal-note a{padding-block:10px}
.legal-body h2:has(+ .legal-note){margin-top:2.4em}
@media (max-width:640px){.legal-ledger>div{grid-template-columns:minmax(0,1fr)}.legal-toc ol{columns:1}}
/* „Datenschutzerklärung“ is one 20-letter word and carries no soft hyphen (it is the focus keyword): on small
   phones the legal H1 scales with the viewport so the word fits the line whole (320 px → 26 px) */
@media (max-width:420px){.legal-hero .display{font-size:clamp(26px,8vw,32px)}}

/* ---------------------------------------------------------------- utilities */
.center{text-align:center}
.mt-s{margin-top:12px}.mt-m{margin-top:clamp(18px,2.4vw,26px)}.mt-l{margin-top:clamp(28px,3.6vw,44px)}
.gap-m{height:clamp(20px,2.6vw,30px)}
.small{font-size:.92rem}.muted{color:var(--fg-muted)}

/* ------------------------------------------------------------------ motion */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .fig--tilt .fig__in{transform:none}
}

/* -------------------------------------------------------------- responsive */
@media (max-width:1200px){
  .menu{margin-left:6px}
  .menu>li>a{padding:8px 10px;font-size:.95rem}
  .menu>li.is-current>a::after{left:10px;right:10px}
  .nav__phone{display:none}
}
@media (max-width:1100px){
  :is(.hero__foot .hq,.trustbar ul):has(>li:nth-child(4)){--sn:2}
  :is(.hero__foot .hq,.trustbar ul):has(>li:nth-child(5)){--sn:2}
  .hero__foot .hq:has(>li:nth-child(5))>li:nth-child(5){grid-column:1/-1}
  .trustbar ul{justify-content:start}
  /* the second topbar line would be cut with an ellipsis here — drop it whole */
  .topbar__x{display:none}
}
@media (max-width:1060px){
  .nav__main{display:none}
  .burger{display:grid}
  /* without JavaScript the burger is inert: show the main links as a wrapping row under the logo instead */
  .no-js .burger,.no-js .menu__tg,.no-js .sub{display:none}
  .no-js .nav{height:auto;flex-wrap:wrap;padding-block:8px 13px}
  .no-js .nav__main{display:block;order:3;flex:1 0 100%}
  .no-js .menu{flex-wrap:wrap;margin:0;gap:0 4px}
  .cards--4,.tiles--4,.factors--4,.promises--4,.steps--c4,.steps--c5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__grid{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) minmax(0,.85fr)}
  .foot__brandcol{grid-column:1/-1}
  .nav__phone{display:flex}
}
@media (max-width:980px){
  .split,.split--rev,.split--wide-l,.split--wide-r,.cols,.cols--wide-l,.cols--wide-r,.hero--panel,.hero--emergency,.hero--split,.hero--block,.hero--block.hero--rev,.hero--split.hero--rev,.lede,.head--rule,.pblock,.pblock--rev{grid-template-columns:minmax(0,1fr)}
  .split--rev>:last-child,.hero--split.hero--rev>:last-child,.hero--rev>.hero__media{order:0}
  .pblock--rev>.pblock__media,.pblock>.pblock__media{order:-1}
  /* a stacked split whose media is a single figure opens with the picture (like the portrait block), so a
     colour band never starts with a long run of copy; facts, notices and other media keep the copy-first order */
  .split>.split__media:has(>.fig:only-child){order:-1}
  .portrait{width:min(290px,72%)}
  .hero--split .hero__fig,.hero--block .hero__media{max-width:640px}
  .hero__media::before{right:-12%;width:min(100%,520px)}
  .cards--3,.factors--3,.tiles--3,.promises--3,.steps--c3,.gal--4,.gal--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* in two columns the big tile fills a whole row, so nothing stands beside its two rows: they collapsed to the 200 px minimum
     and cut the picture to a sliver — it becomes a wide 2:1 tile instead */
  .gal>.gal--big{grid-row:auto}
  .gal>.gal--big .gal__pic{flex:none;min-height:0}
  .gal>.gal--big .illu{position:static;height:auto;aspect-ratio:2/1}
  .ersteps{grid-template-columns:minmax(0,1fr)}
  .checklist--2{grid-template-columns:minmax(0,1fr)}
  .lede__cols{column-count:1}
  .lede__aside{position:static}
  .row{grid-template-columns:52px minmax(0,1fr)}
  .row__shot{display:none}
  .nav__phone{display:none}
  /* the closing stacks: copy, plate, links */
  .cta{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "dial" "links";gap:0}
  .cta__dial{margin-top:28px}
  /* the phone band stacks: copy over the deep asks, the seam nut moves onto the horizontal seam */
  .phoneband{grid-template-columns:minmax(0,1fr)}
  .phoneband__copy{border-radius:var(--r-lg) var(--r-lg) 0 0;border-right:1px solid var(--line);border-bottom:0}
  .phoneband--solo .phoneband__copy{border-radius:var(--r-lg);border-bottom:1px solid var(--line)}
  .phoneband__asks{border-radius:0 0 var(--r-lg) var(--r-lg);padding-top:clamp(44px,8vw,56px)}
  .phoneband__nut{left:auto;right:clamp(22px,4vw,40px);top:-35px}
}
/* an odd LAST card in a two-column grid stands centred at half width instead of alone on a half-empty row
   (3 promises at 768 px, 5 steps, 7 services …). One block per breakpoint at which a grid drops to two columns. */
.cards,.promises{--cg:24px}.factors{--cg:22px}.tiles{--cg:20px}.steps{--cg:var(--sg)}
@media (min-width:761px){
  :is(.cards--2,.tiles--2,.factors--2,.promises--2,.steps--c2):not(.steps--vertical)>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - var(--cg)/2)}
}
@media (min-width:761px) and (max-width:980px){
  :is(.cards--3,.tiles--3,.factors--3,.promises--3,.steps--c3):not(.steps--vertical)>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - var(--cg)/2)}
}
@media (min-width:761px) and (max-width:1060px){
  :is(.cards--4,.tiles--4,.factors--4,.promises--4,.steps--c4,.steps--c5):not(.steps--vertical)>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - var(--cg)/2)}
}
@media (max-width:760px){
  html{scroll-padding-top:86px;scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  /* room for the fixed call bar sits INSIDE the deep footer (bar height + the device's home-indicator inset) */
  .foot{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))}
  .topbar{font-size:.86rem}
  .topbar__long,.topbar__x,.topbar__rk{display:none}
  .topbar__short{display:inline}
  .callbar{display:block}
  .totop{bottom:100px;right:16px;width:48px;height:52px}
  .band{padding:clamp(52px,12vw,64px) 0}
  .band--hero{padding:34px 0 52px}
  :root{--ov:32px}
  .nav{height:70px;gap:10px}
  .is-scrolled .nav{height:66px}
  .brand__mk svg{width:42px;height:42px}
  .brand__n{font-size:1.26rem}
  .brand__s-x{display:none}
  .nav__call{padding:8px 12px;min-width:50px}
  .nav__call .btn__nut{margin:-6px}
  .nav__call .nav__call-t{display:none}
  .cards--2,.cards--3,.cards--4,.factors--2,.factors--3,.factors--4,.tiles--2,.tiles--3,.tiles--4,.promises--2,.promises--3,.promises--4,.steps--c2,.steps--c3,.steps--c4,.steps--c5,.compare{grid-template-columns:minmax(0,1fr)}
  .gal>.gal--wide,.gal>.gal--big{grid-column:span 2}
  .gal>.gal--big,.gal>.gal--tall{grid-row:auto}
  .gal>:is(.gal--big,.gal--tall) .illu{position:static;aspect-ratio:4/3}
  .gal>.gal--big .illu,.gal>.gal--wide .illu{aspect-ratio:2/1}
  .gal{gap:14px}
  .gal figcaption{font-size:.86rem;padding:10px 10px 12px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* an odd last stat spans the row instead of leaving an empty cell beside it */
  .stats>:last-child:nth-child(odd){grid-column:1/-1}
  .telbig__ic{width:50px;height:50px}
  .factsheet dl>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .sub{display:none}
  /* the hero art: the badge hangs under the frame instead of covering the picture */
  .hero__media,.hero--rev .hero__media{padding:42px 0 0}
  .hero__nut{top:10px;width:56px;height:64px;left:calc(50% - 28px)}
  .hero__badge,.hero--rev .hero__badge{position:relative;left:auto;right:auto;bottom:auto;margin:-22px 14px 0;max-width:none}
  .hero__foot .hq li{padding:14px 16px;font-size:.93rem}
  .hero__foot .hq__ic{width:38px;height:38px}
  .trustbar ul{gap:12px 22px}
  .row{grid-template-columns:46px minmax(0,1fr);gap:14px;padding:16px}
  .row__n{width:44px;height:44px}
  .cta__dial .btn{width:100%}
  /* photo cards become compact rows: a 4:3 thumbnail top left, copy right; the nut sits on the seam between them */
  .cards--photo{row-gap:18px}
  .cards--photo .card{display:grid;grid-template-columns:124px minmax(0,1fr);align-items:start}
  .cards--photo .card__media{aspect-ratio:4/3;height:auto;margin:16px 0 16px 16px;border-radius:var(--r-btn)}
  .cards--photo .card__body{padding:16px 18px 18px 26px}
  .cards--photo .card__t{font-size:1.1rem}
  .cards--photo .card p{font-size:.93rem}
  .cards--photo .card__more{padding-top:12px}
  .cards--photo .card__bigic{width:56px;height:56px}
  .cards--photo .card__bigic .ic{width:26px;height:26px}
  .cards--photo .card__bk{position:absolute;width:38px;height:38px;top:28px;left:108px;margin:0}
  .cards--photo .card__bk .ic{width:18px;height:18px}
  .head--rule{padding-bottom:16px}
  .steps{--sg:20px}
  .steps:not(.steps--line) .step{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:start;padding:18px}
  .steps--rail .step{padding:0}
  .steps:not(.steps--line) .step__n{margin:0;width:48px;height:48px}
  /* the pipe now runs vertically from nut to nut */
  .steps:is(.steps--boxes,.steps--rail,.steps--vertical) .step:not(:last-child)::after{content:"";position:absolute;z-index:2;left:calc(18px + 24px - 3px);top:calc(18px + 48px);width:6px;height:calc(100% - 48px + var(--sg));background:var(--pipe)}
  .steps--rail .step:not(:last-child)::after{left:21px;top:48px;height:calc(100% - 48px + var(--sg))}
  .foot__dial{flex-direction:column;align-items:flex-start}
  .foot__col--svc ul{column-gap:20px}
}
@media (max-width:560px){
  .hero__foot .hq{--sn:1!important}
  .trustbar ul{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px 0;gap:14px 18px}
  .trustbar ul:not(:has(>li:nth-child(4))){grid-template-columns:minmax(0,1fr)}
  :is(.hero__foot .hq,.trustbar ul)>li>span{min-width:0;overflow-wrap:break-word}
  .trustbar li{font-size:.92rem;line-height:1.35}
  .trustbar__ic{width:36px;height:36px}
  .foot__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:440px){
  /* a long eyebrow wraps here; its trailing rule would then float beside the first line — the split nut alone leads it */
  .eyebrow::after{display:none}
  .nav{gap:8px}
  .brand{gap:9px}
  .nav__right{gap:8px}
  .btn--lg{padding:14px 18px;font-size:1rem}
  .hq li{font-size:.9rem}
  .qa__b{padding:14px 12px 14px 18px}
  .qa__a{padding:0 18px 18px}
  .telbig{font-size:clamp(23px,7.4vw,28px);gap:10px}
  :is(.hero__dial,.cta__dial,.phonebox__top,.callrow){--tb-max:clamp(23px,7.4vw,28px)}
  .phoneband__num{--tb-max:clamp(25px,8.2vw,32px)}
  .phoneband__num .telbig__ic{width:50px;height:50px}
  /* phones: two ~120 px columns break trust lines mid-word („unverbindlic/h“) — one row per item instead */
  .trustbar ul{grid-template-columns:minmax(0,1fr);gap:12px}
  .notice{flex-direction:column;gap:10px;padding:18px 18px 18px 20px}
  .notice__t{margin-top:0}
  .card__body{padding:20px}
  .phoneband__copy,.phoneband__asks{padding-left:18px;padding-right:18px}
  .chips--band{gap:10px}
  .chips--band .chip{min-height:46px;padding:9px 24px;font-size:.93rem}
  .foot__tel{font-size:clamp(24px,7.6vw,32px);gap:12px}
  .foot__telic{width:48px;height:48px}
  .foot__col--svc ul{grid-template-columns:minmax(0,1fr)}
  .hero__badge{margin:-22px 0 0}
}
@media (max-width:480px){
  /* captioned gallery tiles: one column of compact rows (picture left, caption right), the big/wide tile on top */
  .gal{grid-template-columns:minmax(0,1fr)}
  .gal>.gal--wide,.gal>.gal--big{grid-column:auto}
  .gal>figure:not(.gal--big,.gal--wide){display:grid;grid-template-columns:42% minmax(0,1fr);align-items:start}
  .gal>figure:not(.gal--big,.gal--wide) .gal__pic{border-radius:calc(var(--r) - 1px) 0 0 calc(var(--r) - 1px);height:100%}
  .gal>figure:not(.gal--big,.gal--wide) .gal__pic .illu{height:100%}
}
@media (max-width:360px){
  .telbig{gap:8px}
  .telbig__ic,.phoneband__num .telbig__ic{width:44px;height:44px}
  .phoneband__num .telbig{gap:10px}
  :is(.hero__dial,.cta__dial,.phoneband__num,.phonebox__top,.callrow){--tb-room:58px}
}
@media (max-width:380px){
  /* compact gallery rows: a narrower picture leaves the caption ~145 px instead of ~125 px for the title */
  .gal>figure:not(.gal--big,.gal--wide){grid-template-columns:35% minmax(0,1fr)}
  .nav{gap:6px}
  .brand__mk svg{width:38px;height:38px}
  .brand__n{font-size:1.12rem}
  .brand__s{letter-spacing:.11em}
  .nav__right{gap:6px}
  .burger{width:46px;height:46px}
  .hero__cta .btn{width:100%}
  .cards--photo .card{grid-template-columns:104px minmax(0,1fr)}
  .cards--photo .card__media{margin:14px 0 14px 14px}
  .cards--photo .card__body{padding:14px 14px 16px 24px}
  .cards--photo .card__bk{left:88px}
  .cards--photo .card__t{font-size:1.04rem}
  .topbar__in{justify-content:center}
  .topbar p.topbar__l{display:none}
}
/* the header row (logo + call + burger) needs ~335 px of content width at ≤ 380 px; narrower screens — and 320 px with a
   classic scrollbar, i.e. 305 px of layout (400 % zoom) — shrink the logo, keep both buttons at 44 px */
@media (max-width:349px){
  .nav{gap:5px}
  .brand{gap:8px}
  .brand__mk svg{width:34px;height:34px}
  .brand__n{font-size:1.02rem}
  .nav__right{gap:4px}
  .nav__call{min-width:46px;min-height:46px;padding:6px 8px}
  .burger{width:44px;height:44px}
}
@media (max-width:324px){
  .brand{gap:7px}
  .brand__mk svg{width:30px;height:30px}
  .brand__n{font-size:.94rem}
  .brand__s{letter-spacing:.08em}
}
/* print: chrome hidden; colour blocks print black on white */
@media print{.site-top,.callbar,.totop,.drawer{display:none!important}.band,.foot{padding:20px 0;background:#fff!important;color:#000}.band *,.foot *{color:#000!important}.callrow,.cta__dial,.hero__foot .hq,.phoneband__asks,.hero__badge{background:#fff!important;border:1px solid #000;box-shadow:none}.reveal{opacity:1;transform:none}.band::before,.band::after,.hero__media::before,.hero__nut,.foot::before,.cta__dial::after,.callrow::after{display:none}.band--hasfoot+*{border-top:0}}