/* ==========================================================================
   shk-marzahn — the design language „farbblock-duo · Marzahn“
   Full-bleed COLOUR BLOCKS alternate HOT PINK (dark ink text) ⇄ DEEP GRAPHITE (white text, blush accents), with white / mist
   reading bands between; zig-zag splits flip the picture side from block to block.
   Marzahn's own shape language is the FAVICON's (brand/FAVICON.md): a pink HOUSE with a chimney holding a white water DROP
   with a FLAME cut out of it = water + heat.
     · the GABLE — every icon tile, step number, badge and the to-top button is the house pentagon (45° roof, flush walls,
       softly rounded joints, the glyph set low in the wall); the hero art stands in a big gable frame with the chimney notch.
     · the DROP WITH THE FLAME — the marker for kickers, list bullets, crumbs, chips and the watermarks; on a FAQ row the flame
       is LIT when the answer opens.
     · the ROOFLINE — where two bands meet, a fixed 45° ridge with a chimney rises out of the lower band (.band--roof, the
       closing band); the footer's top edge is a row of roofs. Sparingly.
     · SIGNAL SURFACES — 2 px borders, flat colour, one HARD offset shadow (no blur) on raised surfaces, a key-like edge under
       buttons; soft shadows only for floating layers (dropdown, drawer, call bar).
   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: hot-pink house, white drop, flame cut-out (two hues + tints, white, mist) */
  --pink:#ff2ea0;--pink-hi:#ff5ab8;--pink-700:#b0156f;--on-pink:#1f0714;
  --graphite:#22262e;--graphite-700:#1a1d24;--deep:#0f1116;
  --on-graphite:#fff;--on-graphite-2:#e6dfe5;--foot-text:#d9cdd6;
  --blush:#ff8ccb;
  --white:#fff;--mist:#f6f2f5;--mist-2:#e6dfe5;--line:#ddd6dd;--line-strong:#8b8794;
  --ink:#1a1d24;--text:#1c1f26;--muted:#5a5560;
  --danger:#b3261e;--danger-bg:#ffeaf6;
  /* shape — the house's softly rounded joints; 2 px borders; ONE hard offset shadow (--hard) on raised surfaces */
  --r-btn:8px;--r:12px;--r-lg:18px;--ov:40px;--bw:2px;--hard:6px;
  --sh-sm:0 1px 2px rgba(15,17,22,.1),0 3px 10px rgba(15,17,22,.07);
  --sh:0 10px 28px rgba(15,17,22,.18);
  --sh-lg:0 22px 50px rgba(15,17,22,.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). Gable: the favicon house, 45° roof, rounded joints (stroke-linejoin) ·
     gable-c: + the chimney on the right slope · house: the 4:5 hero frame (eaves at half the width) · dropf: the drop with the flame
     cut out (evenodd) · flame: the flame alone, same box · ridge: one 45° roof with chimney (2:1) · roofs: a row of gables (160×36) · tiles: roof-tile chevrons */
  --m-gable:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6L94 50V94H6V50Z' stroke='%23000' stroke-width='12' stroke-linejoin='round'/%3E%3C/svg%3E");
  --m-gable-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6L94 50V94H6V50Z' stroke='%23000' stroke-width='12' stroke-linejoin='round'/%3E%3Crect x='66' y='4' width='15' height='40' rx='3'/%3E%3C/svg%3E");
  --m-house:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cpath d='M200 12L388 200V488H12V200Z' stroke='%23000' stroke-width='24' stroke-linejoin='round'/%3E%3Crect x='286' y='42' width='50' height='120' rx='10'/%3E%3C/svg%3E");
  --m-dropf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='114 80 284 324'%3E%3Cpath fill-rule='evenodd' d='M256 80L370 233.3A142 142 0 1 1 142 233.3ZM280 198C306 238 342 272 342 328C342 374 304 404 258 404C208 404 170 374 170 326C170 300 182 280 198 266C204 290 216 302 232 308C228 262 244 230 280 198Z'/%3E%3C/svg%3E");
  --m-flame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='114 80 284 324'%3E%3Cpath d='M280 198C306 238 342 272 342 328C342 374 304 404 258 404C208 404 170 374 170 326C170 300 182 280 198 266C204 290 216 302 232 308C228 262 244 230 280 198Z'/%3E%3C/svg%3E");
  --m-ridge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'%3E%3Cpath d='M0 40L40 0L80 40Z'/%3E%3Crect x='52' y='5' width='11' height='24' rx='2'/%3E%3C/svg%3E");
  --m-roofs:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 36'%3E%3Cpath d='M0 36L36 0L72 36ZM72 36L96 12L120 36ZM120 36L140 16L160 36Z'/%3E%3Crect x='49' y='5' width='10' height='22' rx='2'/%3E%3C/svg%3E");
  --m-tiles:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 12L12 3L24 12' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

/* ------------------------------------------- tone scopes (band tokens) --
   Every brick reads these; a band or a surface sets them for its subtree.
   --mat/--emb: the house frame and the drop on its roof · --mk: the drop marker (kickers, bullets) · --gb/--gf: set per tile (below) ·
   --call-*: the band-aware phone button, its key edge and its gable.                                    */
/* LIGHT — page default, white + mist bands, and every white surface (a card on a pink 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--graphite .hero__badge,.band--graphite .hero__fig figcaption{
  --bg-band:var(--white);--fg:var(--text);--fg-h:var(--ink);--fg-muted:var(--muted);--link:var(--graphite);--link-ul:var(--pink);--focus:var(--graphite);
  --kick-fg:var(--pink-700);--mk:var(--pink);--mat:var(--graphite);--emb:var(--pink);--hl:var(--pink-700);
  --card:var(--white);--card-bd:var(--line);--tile-bg:var(--pink);--tile-fg:var(--on-pink);--num-bg:var(--graphite);--num-fg:var(--white);
  --chip-bg:var(--white);--chip-bd:var(--line-strong);--chip-ic:var(--pink-700);
  --call-bg:var(--pink);--call-fg:var(--on-pink);--call-hov:var(--pink-hi);--call-edge:var(--pink-700);--call-gb:var(--deep);--call-gf:var(--blush);
  --rule:var(--line);--mark:rgba(255,46,160,.28);--pipe:var(--graphite);--wm:var(--mist-2)
}
.band--mist{--bg-band:var(--mist);--chip-bg:var(--white)}
/* PINK colour block — dark ink on #ff2ea0; deep carries the call button, the numbers and the focus ring */
.band--pink,.legal-hero,.band--graphite .cta__dial,.foot__dial{
  --bg-band:var(--pink);--fg:var(--on-pink);--fg-h:var(--on-pink);--fg-muted:var(--on-pink);--link:var(--on-pink);--link-ul:var(--deep);--focus:var(--deep);
  --kick-fg:var(--on-pink);--mk:var(--deep);--mat:var(--white);--emb:var(--pink);--hl:var(--deep);
  --card:var(--white);--card-bd:transparent;--tile-bg:var(--graphite);--tile-fg:var(--white);--num-bg:var(--deep);--num-fg:var(--white);
  --chip-bg:var(--white);--chip-bd:var(--deep);--chip-ic:var(--graphite);
  --call-bg:var(--deep);--call-fg:var(--white);--call-hov:var(--graphite);--call-edge:var(--graphite);--call-gb:var(--blush);--call-gf:var(--deep);
  --rule:rgba(31,7,20,.26);--mark:rgba(255,255,255,.55);--pipe:var(--deep);--wm:rgba(31,7,20,.08)
}
/* GRAPHITE colour block — white on #22262e, BLUSH for kickers, links, icons, focus; pink carries the call button and the numbers */
.band--graphite,.callrow,.band--white .cta__dial,.band--mist .cta__dial,.cta__dial{
  --bg-band:var(--graphite);--fg:var(--on-graphite);--fg-h:var(--white);--fg-muted:var(--on-graphite-2);--link:var(--blush);--link-ul:var(--blush);--focus:var(--blush);
  --kick-fg:var(--blush);--mk:var(--pink);--mat:var(--pink);--emb:var(--white);--hl:var(--blush);
  --card:rgba(15,17,22,.36);--card-bd:rgba(255,255,255,.2);--tile-bg:var(--pink);--tile-fg:var(--on-pink);--num-bg:var(--pink);--num-fg:var(--on-pink);
  --chip-bg:rgba(15,17,22,.36);--chip-bd:rgba(255,255,255,.34);--chip-ic:var(--blush);
  --call-bg:var(--pink);--call-fg:var(--on-pink);--call-hov:var(--pink-hi);--call-edge:var(--pink-700);--call-gb:var(--deep);--call-gf:var(--blush);
  --rule:rgba(255,255,255,.22);--mark:rgba(15,17,22,.5);--pipe:var(--blush);--wm:rgba(15,17,22,.34)
}
/* DEEP — topbar, footer, the hero badge, the asks half of the phone band, a dial plate on a pink band, the call row on a graphite band */
.topbar,.foot,.hero__badge,.phoneband__asks,.band--pink .cta__dial,.band--graphite .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(--blush);--focus:var(--blush);
  --kick-fg:var(--blush);--mk:var(--pink);--mat:var(--pink);--emb:var(--white);--hl:var(--blush);
  --card:rgba(255,255,255,.06);--card-bd:rgba(255,255,255,.14);--tile-bg:var(--pink);--tile-fg:var(--on-pink);--num-bg:var(--blush);--num-fg:var(--deep);
  --call-bg:var(--pink);--call-fg:var(--on-pink);--call-hov:var(--pink-hi);--call-edge:var(--pink-700);--call-gb:var(--deep);--call-gf:var(--blush);
  --rule:rgba(255,255,255,.16);--pipe:var(--blush);--wm:rgba(255,255,255,.05)
}
/* band-level tokens a white SURFACE must not reset (they describe the band UNDER it):
   --bd (border of a raised white surface) · --hs (its hard shadow) · --fs (hard shadow of a house frame) ·
   --ds (hard shadow of a dial plate) · --edge (accent edge: top bar, left rule) · --bk-* (the gable on a card's seam) ·
   --ring-out (a focus ring drawn outside a white card, i.e. on the band) */
:root,.band--white{--bd:var(--graphite);--hs:var(--pink);--fs:var(--pink);--ds:var(--pink);--edge:var(--pink);--bk-bg:var(--pink);--bk-fg:var(--on-pink);--ring-out:var(--graphite)}
.band--mist{--bd:var(--graphite);--hs:var(--pink);--fs:var(--pink);--ds:var(--pink);--edge:var(--pink);--bk-bg:var(--pink);--bk-fg:var(--on-pink);--ring-out:var(--graphite)}
.band--pink,.legal-hero{--bd:var(--deep);--hs:var(--deep);--fs:var(--deep);--ds:var(--graphite);--edge:var(--deep);--bk-bg:var(--graphite);--bk-fg:var(--white);--ring-out:var(--deep)}
.band--graphite{--bd:var(--white);--hs:var(--pink);--fs:var(--blush);--ds:var(--blush);--edge:var(--pink);--bk-bg:var(--pink);--bk-fg:var(--on-pink);--ring-out:var(--blush)}
.foot{--hs:var(--pink);--fs:var(--blush);--edge:var(--pink)}

/* ------------------------------------------------------------------ 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(--blush)}
.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}
.smz-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}
.display--long{font-size:clamp(32px,4.1vw,48px)}
.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 gable (tiles) --
   The tile is a plain box (its focus ring, if any, stays rectangular and visible); its GABLE is the ::before, masked from --m-gable —
   so the glyph inside is never clipped. A 45° roof takes the upper half, so the glyph is set LOW (padding-top). Never below ~30 px:
   smaller, the roof reads as a home plate — use the drop marker there. */
.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,.foot__telic,.hero__badge-ic,.ersteps__n,.portrait__badge,.btn__gable,.hq__ic,.phoneband__gable{
  position:relative;isolation:isolate;display:grid;place-items:center;flex:none;color:var(--gf);padding-top:.7em;transition:transform .28s var(--ease)}
.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,.foot__telic::before,.hero__badge-ic::before,.ersteps__n::before,.portrait__badge::before,.btn__gable::before,.hq__ic::before,.phoneband__gable::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--gb);-webkit-mask:var(--m-gable) center/100% 100% no-repeat;mask:var(--m-gable) center/100% 100% no-repeat;transition:background-color .2s}
/* the lift: a house stands up a little on hover (no rotation — a turned house looks broken) */
:is(.card--link,.factor,.tile,.promise,.row--link,.checklist li,.telbig,.btn,.trustbar li,.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__gable,.trustbar__ic,.foot__telic,.step__n,.ersteps__n){transform:translateY(-3px)}
/* small bullets: the drop with the flame cut out — 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,.chip::before,.ticks li::before{
  content:"";display:inline-block;width:14px;height:16px;flex:none;background:var(--mk);-webkit-mask:var(--m-dropf) center/contain no-repeat;mask:var(--m-dropf) 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--pink.band--rule,.band--graphite.band--rule{border-top:0}
/* the drop on the seam: two quiet bands (white | mist, 1.1 : 1) are joined by a hairline with a drop marker 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:20px;height:23px;transform:translate(-50%,-50%);
  background:var(--pink);-webkit-mask:var(--m-dropf) center/contain no-repeat;mask:var(--m-dropf) center/contain no-repeat}
.band--noedge::before,.band--flush-top::before{display:none}
/* the ROOFLINE: one fixed 45° ridge (with the favicon's chimney) rises out of the band into the band above — a notch, not a wedge, so the
   angle stays 45° on every screen width. smz_band( …, 'roof' => true ) and the closing band. Never straight after the hero (its foot plate owns that seam). */
.band--roof,.band--cta{--roofh:34px}
.band--roof::before,.band--cta::before{content:"";display:block;position:absolute;z-index:2;left:var(--ridge-x,50%);bottom:calc(100% - 1px);width:calc(var(--roofh) * 2);height:var(--roofh);transform:translateX(-50%);
  background:var(--bg-band);-webkit-mask:var(--m-ridge) center/100% 100% no-repeat;mask:var(--m-ridge) center/100% 100% no-repeat;pointer-events:none}
.band--cta{--ridge-x:max(64px,calc(50% - var(--wrap) / 2 + 130px))}

/* ------------------------------------------------------------ eyebrow/head */
/* small caps labels: 13.6 px minimum (older callers). No tag box: the drop marker · label */
.eyebrow{display:inline-flex;align-items:center;gap:9px;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}
/* centred contexts: a wrapped eyebrow keeps the drop marker on its FIRST line (inline flow) instead of parking it at the far left of a full-width flex box */
:is(.hero--column,.head--center,.head:not(.head--rule):has(+.faq),.statement,.pull--center,.center) .eyebrow{display:block}
:is(.hero--column,.head--center,.head:not(.head--rule):has(+.faq),.statement,.pull--center,.center) .eyebrow::before{display:inline-block;vertical-align:-3px;margin-right:9px}
.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)) .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(2px)}
.btn .ic{width:19px;height:19px}
/* the phone button carries its glyph inside a GABLE (deep gable + blush glyph on pink, blush gable + deep glyph on deep) */
.btn__gable{width:38px;height:38px;margin:-9px 2px -9px -10px;--gb:var(--call-gb);--gf:var(--call-gf)}
.btn__gable .ic{width:17px;height:17px}
/* a wrapped label stays centred and balanced; its trailing arrow rides on the last word (smz_tail) */
.btn>span{text-wrap:balance}
/* call label + colon is one unit (smz_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__gable{width:42px;height:42px;margin-left:-12px}
/* the phone button is the strongest element: the band's call colour — pink on light and graphite, deep on pink — with a key edge underneath */
.btn--accent{background:var(--call-bg);color:var(--call-fg);box-shadow:0 4px 0 var(--call-edge)}
.btn--accent:hover{background:var(--call-hov);color:var(--call-fg);box-shadow:0 6px 0 var(--call-edge)}
.btn--accent:active{box-shadow:0 1px 0 var(--call-edge)}
.btn--pink{--call-gb:var(--deep);--call-gf:var(--blush);background:var(--pink);color:var(--on-pink);box-shadow:0 4px 0 var(--pink-700)}
.btn--pink:hover{background:var(--pink-hi);color:var(--on-pink);box-shadow:0 6px 0 var(--pink-700)}
.btn--graphite{--call-gb:var(--pink);--call-gf:var(--on-pink);background:var(--graphite);color:var(--white);box-shadow:0 4px 0 var(--deep)}
.btn--graphite:hover{background:var(--graphite-700);color:var(--white);box-shadow:0 6px 0 var(--deep)}
.btn--deep{--call-gb:var(--blush);--call-gf:var(--deep);background:var(--deep);color:var(--white);box-shadow:0 4px 0 var(--graphite)}
.btn--deep:hover{background:var(--graphite);color:var(--white);box-shadow:0 6px 0 var(--deep)}
.btn--white{--call-gb:var(--pink);--call-gf:var(--on-pink);background:var(--white);color:var(--graphite-700);box-shadow:0 4px 0 var(--mist-2)}
.btn--white:hover{background:var(--mist);color:var(--graphite-700);box-shadow:0 6px 0 var(--mist-2)}
.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(--graphite-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 gable 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;--gb:var(--num-bg);--gf:var(--num-fg)}
.telbig__ic .ic{width:24px;height:24px}
.telbig--light .telbig__ic{--gb:var(--pink);--gf:var(--on-pink)}
.telbig--dark .telbig__ic{--gb:var(--graphite);--gf: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 (flame cut out) */
.topbar__drop{width:12px;height:14px;flex:none;background:var(--mk);-webkit-mask:var(--m-dropf) center/contain no-repeat;mask:var(--m-dropf) 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(--blush);font-weight:900;letter-spacing:.01em;text-decoration:underline;text-decoration-color:var(--blush);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:8px;height:9px;margin:0 9px 0 0;background:var(--blush);-webkit-mask:var(--m-dropf) center/contain no-repeat;mask:var(--m-dropf) center/contain no-repeat;vertical-align:middle}
/* the farbblock header edge: a 4 px colour-block line (c1 = pink) under the white bar — it melts into a pink hero and
   shows as the pink edge over every other band once the header is sticky */
.masthead{position:relative;background:var(--white);border-bottom:4px solid var(--pink);transition:box-shadow .2s}
.is-scrolled .masthead{box-shadow:0 8px 24px rgba(15,17,22,.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__h{fill:var(--pink)}.mk__d{fill:var(--white)}
.brand__t{display:flex;flex-direction:column}
.brand__n{font:900 1.42rem/1 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.brand__n b{font-weight:900;color:var(--pink-700)}
.brand__s{font:700 .78rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);margin-top:5px;white-space:nowrap}
.brand:hover .brand__n{color:var(--graphite)}
.brand:hover .mk__h{fill:var(--pink-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(--graphite-700);text-decoration:none;transition:background-color .15s,color .15s}
.menu>li>a:hover{background:var(--mist)}
/* current section: a pink bar under the link */
.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:var(--pink)}
.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-top:4px solid var(--pink);border-radius:var(--r-lg);padding:18px 14px 12px;
  background: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(--pink-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(--graphite-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:34px;height:34px;padding:12px 6px 5px;background:var(--pink);color:var(--on-pink);-webkit-mask:var(--m-gable) center/100% 100% no-repeat;mask:var(--m-gable) center/100% 100% 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(--pink-700);font-weight:700}
.sub__all .ic{width:18px;height:18px}
.sub .sub__tel{color:var(--graphite-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(--graphite-700);white-space:nowrap}
.nav__phone b{font:900 1.1rem/1.1 var(--sans);color:var(--graphite-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(--pink-700);margin-top:4px}
.nav__phone:hover b{text-decoration:underline;text-decoration-color:var(--pink)}
.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(--graphite-700);cursor:pointer;place-items:center}
.burger .ic{width:24px;height:24px}

/* mobile drawer — a white panel with a pink left edge */
.drawer{position:fixed;inset:0;z-index:300;background:rgba(15,17,22,.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 var(--pink);background:var(--white)}
.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__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(--graphite-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(--graphite-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(--pink)}
.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:34px;height:34px;padding:12px 6px 5px;background:var(--pink);color:var(--on-pink);-webkit-mask:var(--m-gable) center/100% 100% no-repeat;mask:var(--m-gable) center/100% 100% 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(15,17,22,.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:9px;height:11px;background:currentColor;margin:0 11px;opacity:.75;-webkit-mask:var(--m-dropf) center/contain no-repeat;mask:var(--m-dropf) 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 gable + 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:34px;height:34px;--gb:var(--tile-bg);--gf:var(--tile-fg)}
.hq__ic .ic{width:16px;height:16px}
/* block + graphite — copy beside the HOUSE FRAME: the illustration stands in the wall of a big gable (45° roof, the favicon's chimney),
   the drop with the flame cut out sits in the roof, a hard house-shaped shadow falls to the lower right; 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.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero--block.hero--rev{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.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;width:min(100%,468px);justify-self:center;padding-bottom:6px}
.hero__frame{position:relative;aspect-ratio:4/5;filter:drop-shadow(12px 12px 0 var(--fs))}
.hero__frame::before{content:"";position:absolute;inset:0;background:var(--mat);-webkit-mask:var(--m-house) center/100% 100% no-repeat;mask:var(--m-house) center/100% 100% no-repeat}
/* the picture stands in the WALL of the house (4:3, below the eaves); the drop with the flame sits in the roof */
.hero__pic{position:absolute;left:5%;right:5%;bottom:4%;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-btn);background:var(--mist);border:var(--bw) solid var(--deep)}
.hero__pic .illu{width:100%;height:100%;object-fit:cover}
.hero__emblem{position:absolute;left:36.8%;top:11%;width:26.4%;aspect-ratio:284/324;transition:transform .5s var(--ease)}
.hero__emblem::before{content:"";position:absolute;inset:0;background:var(--emb);-webkit-mask:var(--m-dropf) center/100% 100% no-repeat;mask:var(--m-dropf) center/100% 100% no-repeat}
.hero__media:hover .hero__emblem{transform:translateY(-5px)}
.hero__badge{position:absolute;z-index:2;left:-26px;bottom:-12px;max-width:min(330px,calc(100% - 12px));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:-26px}
.hero__badge-ic{width:46px;height:46px;--gb:var(--pink);--gf:var(--on-pink)}
.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:2px;margin:0;background:var(--line);border:var(--bw) solid var(--bd);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--hard) var(--hard) 0 var(--hs)}
.hero__foot .hq li{background:var(--white);padding:18px 22px;gap:14px;font-size:.98rem}
.hero__foot .hq__ic{width:44px;height:44px}
.hero__foot .hq__ic .ic{width:19px;height:19px}
.hero__foot .hq li:nth-child(even) .hq__ic{--gb:var(--graphite);--gf: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 on a graphite backing plate; a roof ridge with the chimney sits on the picture's top edge */
.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{--roofh:30px;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:var(--graphite)}
.hero__fig::after{content:"";position:absolute;z-index:1;right:calc(18px + 12%);bottom:calc(100% - 1px);width:calc(var(--roofh) * 2);height:var(--roofh);background:var(--deep);-webkit-mask:var(--m-ridge) center/100% 100% no-repeat;mask:var(--m-ridge) center/100% 100% no-repeat}
.hero__fig-in{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--mist);border:var(--bw) 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 roof-tile 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--column .display--long{font-size:clamp(32px,4.6vw,52px)}
.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:var(--bw) solid var(--bd);box-shadow:var(--hard) var(--hard) 0 var(--hs)}
.hero__strip-in::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--mist-2);-webkit-mask:var(--m-tiles) 0 0/24px 12px repeat;mask:var(--m-tiles) 0 0/24px 12px repeat}
.hero__strip-pic{width:min(100%,calc(clamp(220px,30vw,380px) * 4 / 3));overflow:hidden;border-radius:var(--r);background:var(--mist);border:var(--bw) 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 — graphite block, a white dial plate with a thick pink 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 dial plate: a white surface with a thick accent top edge (the band's --edge) and a hard offset shadow */
.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:var(--white);border:var(--bw) solid var(--bd);border-top:8px solid var(--edge);box-shadow:8px 8px 0 var(--hs)}
.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(--pink-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;--gb:var(--num-bg);--gf: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;--gb:var(--pink);--gf:var(--on-pink)}
.trustbar li:nth-child(even) .trustbar__ic{--gb:var(--graphite);--gf: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}
/* house frame (smz_figure frame 'house'; its legacy API names map to it): the picture on a mat in the band's mat colour, a roof ridge on top */
.fig--house{--roofh:36px}
.fig--house::before{content:"";position:absolute;z-index:1;left:14%;bottom:calc(100% - 12px);width:calc(var(--roofh) * 2);height:var(--roofh);background:var(--mat);-webkit-mask:var(--m-ridge) center/100% 100% no-repeat;mask:var(--m-ridge) center/100% 100% no-repeat}
.fig--house .fig__in{padding:12px;border-radius:var(--r-lg);background:var(--mat);box-shadow:var(--hard) var(--hard) 0 var(--fs)}
.fig--house .fig__in .illu{border-radius:var(--r-btn);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 gable ring with the favicon's chimney holds the person, a deep gable badge with the phone sits on its lower right flank */
.portrait{position:relative;width:min(380px,86%);margin:0 auto;filter:drop-shadow(12px 12px 0 var(--fs))}
.portrait__ring{position:relative;aspect-ratio:1;background:var(--mat);-webkit-mask:var(--m-gable-c) center/100% 100% no-repeat;mask:var(--m-gable-c) center/100% 100% no-repeat}
.portrait__ring .illu{position:absolute;left:8%;top:10%;width:84%;height:82%;object-fit:cover;background:var(--mist);-webkit-mask:var(--m-gable) center/100% 100% no-repeat;mask:var(--m-gable) center/100% 100% no-repeat}
.portrait__badge{position:absolute;right:-2%;bottom:12%;width:78px;height:78px;--gb:var(--deep);--gf:var(--blush);
  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 round frame. */
: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 thick accent rule on the left */
.pull{margin:0;padding:26px 28px 26px 30px;border-radius:var(--r);border:1px solid var(--card-bd);border-left:8px solid var(--edge);
  background: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--pink .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;--gb:var(--num-bg);--gf: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))}

/* ------------------------------------------------ raised surfaces ----------
   Raised = a 2 px border (--bd) + ONE hard offset shadow (--hs): cards, gallery tiles, plates, dial plates, the phone band, an open FAQ row.
   Quiet surfaces (steps, factors, tiles, rows, promises) stay flat. The band decides the colours (band-level tokens above). */

/* ----------------------------------------------------------------- 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:var(--bw) solid var(--bd);border-radius:var(--r);box-shadow:5px 5px 0 var(--hs);transition:transform .25s var(--ease),box-shadow .25s}
.gal figure:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--hs)}
.gal__pic{position:relative;border-radius:calc(var(--r) - var(--bw)) calc(var(--r) - var(--bw)) 0 0;overflow:hidden;background:var(--mist);border-bottom:var(--bw) solid var(--bd)}
.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 drop 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 - 16px) / 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 drop with the flame rises from the lower right edge as a watermark */
.callrow::after{content:"";position:absolute;z-index:-1;right:-26px;bottom:-96px;width:150px;height:172px;background:var(--wm);-webkit-mask:var(--m-dropf) center/contain no-repeat;mask:var(--m-dropf) 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;--gb:var(--tile-bg);--gf: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 RAISED cards (2 px border, hard offset shadow) on every band; a photo card's icon GABLE sits on the seam between picture and text. */
.cards{display:grid;gap:28px}
.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:var(--bw) solid var(--bd);border-radius:var(--r);display:flex;flex-direction:column;box-shadow:var(--hard) var(--hard) 0 var(--hs);
  transition:transform .22s var(--ease),box-shadow .22s}
.card--link:hover{transform:translate(-3px,-3px);box-shadow:calc(var(--hard) + 3px) calc(var(--hard) + 3px) 0 var(--hs)}
.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) - var(--bw)) calc(var(--r) - var(--bw)) 0 0;border-bottom:var(--bw) solid var(--bd)}
.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:88px;height:88px;--gb:var(--pink);--gf:var(--on-pink)}
.card__bigic .ic{width:34px;height:34px}
/* the gable 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:-54px 0 8px -4px;width:58px;height:58px;--gb:var(--bk-bg);--gf: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:56px;height:56px;--gb:var(--tile-bg);--gf:var(--tile-fg);margin-bottom:16px}
.card__ic .ic{width:24px;height:24px}
.card__num{width:54px;height:54px;--gb:var(--num-bg);--gf: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 thick accent top edge (the band's --edge: pink on light and graphite, deep on pink) */
.cards--line .card{border-top:8px solid var(--edge)}
/* 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:hover{transform:none}
.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 graphite, white elsewhere),
   with a thick top edge, a gable, 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-top:8px solid var(--edge);border-radius:var(--r);padding:26px 26px 22px;
  background:var(--card);transition:transform .22s var(--ease),box-shadow .22s}
.band--white .promise,.band--mist .promise,.band--pink .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:58px;height:58px;--gb:var(--tile-bg);--gf: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 gables (one-row layouts, ≥ 1061 px; on phones
   the pipe runs vertically from gable to gable) · „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--pink .step{box-shadow:var(--sh-sm)}
.step__n{width:54px;height:54px;--gb:var(--num-bg);--gf: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 + 27px - 3px);top:calc(18px + 54px);width:6px;height:calc(100% - 54px + var(--sg));background:var(--pipe)}
@media (min-width:1061px){
  /* pipe segment across the gap (boxes) / from gable to gable (rail), through the wall of the number gable; a small drop couples each gap; never past a row end */
  .steps--boxes:not(.steps--vertical) .step:not(:last-child)::after{content:"";position:absolute;z-index:2;top:calc(22px + 40px - 3px);left:72px;right:calc((var(--sg) + 23px) * -1);height:6px;border-radius:3px;
    /* the pipe is cut for the coupling drop (20 px, centred in the gap) so the flame hole shows the band, not the pipe */
    background:linear-gradient(90deg,var(--pipe) calc(100% - var(--sg) / 2 - 33px),transparent 0,transparent calc(100% - var(--sg) / 2 - 13px),var(--pipe) 0)}
  .steps--boxes:not(.steps--vertical) .step:not(:last-child)::before{content:"";position:absolute;z-index:3;top:calc(22px + 40px - 14px);right:calc(var(--sg) / -2 - 11px);width:22px;height:25px;background:var(--pipe);-webkit-mask:var(--m-dropf) center/contain no-repeat;mask:var(--m-dropf) center/contain no-repeat}
  .steps--rail .step:not(:last-child)::after{content:"";position:absolute;z-index:0;top:37px;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 raised panel in two halves — light copy half with the number and the call
   button, deep half with „Was wir am Telefon fragen“ — and a gable 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:8px 8px 0 var(--hs)}
.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:var(--bw) solid var(--bd);border-right:0}
.phoneband--solo .phoneband__copy{border-radius:var(--r-lg);border-right:var(--bw) solid var(--bd)}
.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(--pink-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(40px,4.8vw,60px);border-radius:0 var(--r-lg) var(--r-lg) 0}
/* the gable on the seam (first child of the deep half): on the vertical seam on wide screens, on the horizontal seam when stacked */
.phoneband__gable{position:absolute;left:-32px;top:clamp(26px,3.6vw,44px);width:64px;height:64px;--gb:var(--pink);--gf:var(--on-pink)}
.phoneband__gable .ic{width:26px;height:26px}
.phoneband:hover .phoneband__gable{transform:translateY(-3px)}
.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:40px;height:40px;--gb:var(--num-bg);--gf: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 with a 2 px line; the drop with the flame leads every question — an OPEN row gets a graphite frame, a hard pink shadow
   and the flame is LIT (graphite flame in the pink drop). The + on the right turns to ×. */
.faq{max-width:880px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.qa{position:relative;background:var(--white);color:var(--fg);border:var(--bw) solid var(--line);border-radius:var(--r);transition:border-color .2s,box-shadow .2s}
.qa.is-open{border-color:var(--graphite);box-shadow:6px 6px 0 var(--pink)}
.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:12px;min-height:64px;padding:14px 10px 14px 22px;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__q{position:relative;min-width:0;padding-left:34px;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5}
.qa__q::before,.qa__q::after{content:"";position:absolute;left:0;top:.06em;width:20px;height:23px}
.qa__q::before{background:var(--line-strong);-webkit-mask:var(--m-dropf) center/contain no-repeat;mask:var(--m-dropf) center/contain no-repeat;transition:background-color .2s}
.qa__q::after{background:var(--graphite);-webkit-mask:var(--m-flame) center/contain no-repeat;mask:var(--m-flame) center/contain no-repeat;transform:scale(0);transform-origin:50% 88%;transition:transform .32s var(--ease)}
.qa.is-open .qa__q::before{background:var(--pink)}
.qa.is-open .qa__q::after{transform:scale(1)}
.qa__b:hover .qa__q{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:3px;text-underline-offset:.2em}
.qa__ic{display:grid;place-items:center;width:44px;height:44px;flex:none;color:var(--graphite-700)}
.qa__ic .ic{width:20px;height:20px;transition:transform .25s var(--ease)}
.qa.is-open .qa__ic{color:var(--pink-700)}
.qa.is-open .qa__ic .ic{transform:rotate(45deg)}
.qa__a{padding:0 26px 24px 56px;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(--graphite);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(--pink-700)}
.notice__ic{width:50px;height:50px;--gb:var(--ntc);--gf: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:34px;height:34px;padding-top:.45em;background:var(--danger);color:var(--white);font-size:.92rem;font-weight:700;-webkit-mask:var(--m-gable) center/100% 100% no-repeat;mask:var(--m-gable) center/100% 100% no-repeat}

/* ------------------------------------------------------------------- chips
   Rounded tags with a 2 px edge; the drop with the flame leads the label. On hover the chip fills with the band's call colour. */
.chips{display:flex;flex-wrap:wrap;gap:10px 12px}
.chips--center{justify-content:center;max-width:1000px;margin-left:auto;margin-right:auto}
.chip{position:relative;display:inline-flex;align-items:center;gap:9px;text-wrap:balance;min-height:46px;padding:10px 18px 10px 15px;border:var(--bw) solid var(--chip-bd);border-radius:var(--r-btn);background:var(--chip-bg);
  font-weight:700;font-size:.95rem;line-height:1.25;text-decoration:none;color:var(--fg-h);transition:transform .16s var(--ease),color .16s,background-color .16s,border-color .16s,box-shadow .16s}
.chip::before{width:12px;height:14px;transition:background-color .16s}
.chip .ic{display:none}
a.chip:hover{color:var(--call-fg);background:var(--call-bg);border-color:var(--call-bg);transform:translateY(-2px);box-shadow:0 3px 0 var(--call-edge)}
a.chip:hover::before{background:var(--call-fg)}
.chip--static{cursor:default}
.chips--band{gap:12px 14px}
.chips--band .chip{min-height:52px;padding:12px 24px 12px 18px;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 (pink plate on graphite, deep plate on pink, graphite plate on light) with a hard offset shadow and a drop
   watermark; the band itself carries a big drop watermark low on the left and the roofline ridge on its top edge. */
.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:8px 8px 0 var(--ds)}
.cta__dial::after{content:"";position:absolute;z-index:-1;right:-44px;bottom:-60px;width:190px;height:217px;background:var(--wm);-webkit-mask:var(--m-dropf) center/contain no-repeat;mask:var(--m-dropf) 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-x:clip}
.band--cta::after{content:"";position:absolute;z-index:-1;left:max(-80px,calc(50% - var(--wrap)/2 - 140px));bottom:-90px;width:300px;height:342px;background:var(--wm);opacity:.6;-webkit-mask:var(--m-dropf) center/contain no-repeat;mask:var(--m-dropf) center/contain no-repeat;pointer-events:none}

/* ---------------------------------------------------------------- phonebox */
.phonebox{position:relative;color:var(--fg);border-radius:var(--r-lg);border:var(--bw) solid var(--bd);border-top:8px solid var(--edge);box-shadow:var(--hard) var(--hard) 0 var(--hs);overflow:hidden;
  background: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(--pink-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(--pink-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--pink .factor{box-shadow:var(--sh-sm)}
.factor:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.factor__ic{width:54px;height:54px;--gb:var(--tile-bg);--gf: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);border-left:8px solid var(--edge);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--pink .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(--pink)}
.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(--pink-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(--pink-700);border-bottom:3px solid var(--pink-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--pink .tile{box-shadow:var(--sh-sm)}
.tile:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.tile__ic{width:52px;height:52px;--gb:var(--num-bg);--gf: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 gables as markers; each gable holds the favicon's drop with the flame */
.timeline{position:relative;display:grid;gap:22px;max-width:880px}
.timeline::before{content:"";position:absolute;left:20px;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:46px;height:46px;background:var(--num-bg);-webkit-mask:var(--m-gable) center/100% 100% no-repeat;mask:var(--m-gable) center/100% 100% no-repeat}
.timeline li::after{content:"";position:absolute;left:14px;top:20px;width:18px;height:20px;background:var(--num-fg);-webkit-mask:var(--m-dropf) center/contain no-repeat;mask:var(--m-dropf) 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:var(--bw) solid var(--bd);border-top:8px solid var(--edge);box-shadow:var(--hard) var(--hard) 0 var(--hs);padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,30px) clamp(16px,2vw,22px);container-type:inline-size;
  background: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(--pink-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 li::before{width:14px;height:17px;margin-top:.32em;background:var(--pink)}

/* ------------------------------------------------------------------ footer
   Deep. A ROOFLINE of gables rises out of its top edge into the band above; first a PINK call panel (the strongest element of the
   footer: kicker, the big number, the note), then brand · Leistungen · Service · Rechtliches as open columns (no panels). */
.foot{position:relative;background:var(--deep);color:var(--fg);padding:clamp(60px,6.4vw,84px) 0 26px;font-size:.95rem}
.foot::before{content:"";position:absolute;left:0;right:0;top:-35px;height:36px;background:var(--deep);-webkit-mask:var(--m-roofs) 0 0/160px 36px repeat-x;mask:var(--m-roofs) 0 0/160px 36px repeat-x;pointer-events:none}
.foot__dial{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 32px;padding:clamp(16px,2vw,24px) clamp(20px,3.2vw,38px);margin-bottom:clamp(26px,3.2vw,40px);border-radius:var(--r-lg);background:var(--pink);color:var(--fg)}
.foot__dial::after{content:"";position:absolute;z-index:-1;right:-26px;bottom:-60px;width:140px;height:160px;background:var(--wm);-webkit-mask:var(--m-dropf) center/contain no-repeat;mask:var(--m-dropf) center/contain no-repeat}
.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 4px;color:var(--kick-fg)}
.foot__tel{display:inline-flex;align-items:center;gap:16px;min-height:52px;font:900 clamp(28px,3.5vw,44px)/1.05 var(--sans);letter-spacing:-.02em;color:var(--fg-h);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:54px;height:54px;--gb:var(--deep);--gf:var(--blush)}
.foot__telic .ic{width:22px;height:22px}
.foot__note{margin:0;max-width:36ch;font-size:1rem;font-weight:700;color:var(--fg-h)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2.05fr) minmax(0,.8fr) minmax(0,.85fr);gap:clamp(22px,3vw,40px)}
.foot .brand{margin-bottom:16px}
.foot .brand__n{color:var(--white)}
.foot .brand__n b{color:var(--blush)}
.foot .brand__s{color:var(--blush)}
.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(--blush)}
.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:14px 14px calc(10px + env(safe-area-inset-bottom));background:var(--deep);box-shadow:0 -8px 24px rgba(15,17,22,.22)}
.callbar::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--pink)}
.callbar .btn{width:100%;min-height:54px}
.drawer-open .callbar,.drawer-open .totop{display:none}
/* to-top: a graphite gable with the arrow in its wall (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:56px;height:56px;border:0;padding:.75em 0 0;background:none;color:var(--white);display:grid;place-items:center;cursor:pointer;isolation:isolate;
  filter:drop-shadow(0 6px 10px rgba(15,17,22,.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(--graphite);-webkit-mask:var(--m-gable) center/100% 100% no-repeat;mask:var(--m-gable) center/100% 100% no-repeat;transition:background-color .2s}
.totop .ic{width:22px;height:22px}
.totop.show{opacity:1;visibility:visible;translate:0 0}
.totop:hover{color:var(--on-pink);translate:0 -3px}
.totop:hover::before{background:var(--pink)}
/* two-tone ring: white 3 px + deep halo — visible over every band, pink 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(--pink);color:var(--on-pink)}
.legal-hero .display{font-size:clamp(32px,4vw,48px);margin:0;color:var(--on-pink)}
.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(--pink-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;border-left:5px solid var(--pink)}
.legal-ledger{margin:0 0 1.4em;border-top:3px solid var(--graphite)}
.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,2fr) minmax(0,.75fr) minmax(0,.85fr)}
  .foot ul{column-gap:18px}
  .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{max-width:640px}
  .hero--block .hero__media{width:min(100%,420px)}
  .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 gable 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:var(--bw) solid var(--bd);border-bottom:0}
  .phoneband--solo .phoneband__copy{border-radius:var(--r-lg);border-bottom:var(--bw) solid var(--bd)}
  .phoneband__asks{border-radius:0 0 var(--r-lg) var(--r-lg);padding-top:clamp(44px,8vw,56px)}
  .phoneband__gable{left:auto;right:clamp(22px,4vw,40px);top:-32px}
  /* the gable reaches 32 px up into the copy block: keep its last line (note or button) clear of it */
  .phoneband:not(.phoneband--solo) .phoneband__copy{padding-bottom:max(52px,clamp(26px,4.2vw,52px))}
}
/* 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:50px;height:50px}
  .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}
  .nav__call{padding:8px 12px;min-width:50px}
  .nav__call .btn__gable{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{width:min(100%,340px);padding-bottom:0}
  .hero__frame{filter:drop-shadow(8px 8px 0 var(--fs))}
  .portrait{filter:drop-shadow(8px 8px 0 var(--fs))}
  .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 gable 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 gable to gable */
  .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){
  .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 6px 14px 16px}
  .qa__q{padding-left:30px}
  .qa__a{padding:0 18px 18px 46px}
  .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 18px 9px 16px;font-size:.93rem}
  .foot__tel{font-size:clamp(24px,7.6vw,32px);gap:12px}
  .foot__telic{width:52px;height:52px}
  .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}
  /* 305 px of layout: browsers without a German hyphenation dictionary (headless Chrome, some WebViews) would split long compounds
     mid-word ("Wasserrohrbruch", "Durchlauferhitzer", "zusammenkommen?") — trim type and card/FAQ chrome so they fit whole;
     where hyphens:auto works it still hyphenates */
  .display,.display--long,.hero--column .display,.hero--column .display--long{font-size:29px}
  .stitle{font-size:25px}
  .cards--photo .card{grid-template-columns:92px minmax(0,1fr)}
  .cards--photo .card__media{margin:12px 0 12px 12px}
  .cards--photo .card__body{padding:12px 8px 14px 22px}
  .cards--photo .card__bk{left:76px;width:34px;height:34px}
  .cards--photo .card__bk .ic{width:16px;height:16px}
  .cards--photo .card__t{font-size:1rem}
  .cards--photo .card p{font-size:.9rem}
  .compare__col{padding:20px 16px}
  .compare li{font-size:.94rem}
  .qa__b{padding:14px 4px 14px 14px;gap:6px;font-size:1rem}
  .qa__q{padding-left:28px}
  .qa__ic{width:36px}
  .qa__a{padding-left:42px}
}
@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__emblem,.hero__fig::after,.fig--house::before,.foot::before,.foot__dial::after,.cta__dial::after,.callrow::after{display:none}.hero__frame{filter:none}.hero__frame::before{display:none}.hero__pic{position:static}.band--hasfoot+*{border-top:0}}