/* ==========================================================================
   shk-hannover — look: farbblock-duo in LIGHT MODE with a BRIGHT-POLARITY brand. The pink of the favicon is a bright colour: it carries INK, never white.
   Two full-bleed colour blocks alternate down every page: Band A „Rosa“ (--c1) and Band B „Butter“ (--c2), with white and warm-paper reading bands between. Both blocks carry INK text.
   --pink is the FILL of the phone button, the logo plate, number rings and thin rules (ink on it 6.51 : 1). Links are INK with a thick pink underline — there is no second accent colour. Focus ring = ink with a white offset.
   Signature MAUL (from the open-end wrench of the favicon): a U-shaped jaw notch cut into the top edge of surfaces (.haj-maul), a row of jaw tabs between two bands (.haj-maul__strip),
   a ring-badge with a U opening for every number (.haj-maul-badge) and a small U mark as the bullet of kickers, chips and lists.
   Nothing on this site is dark; there is no dark-mode query. Every colour is a token in :root (mirrored in theme.json); the gate is tools/contrast.php.
   ========================================================================== */

:root{
  /* THE DUO — two strong LIGHT-value colour blocks, ink on both */
  --c1:#FF79C0;--c2:#FFE9A6;--on-c1:#141008;--on-c2:#141008;
  --pink-wash:#FFE3EE;--butter-wash:#FFF6D8;
  /* PINK — locked from the favicon; BRIGHT, carries INK (6.51 : 1). --pink-2 is the favicon's second tone: the hover label on an ink fill */
  --pink:#FF5C93;--pink-2:#FF79C0;
  --ink:#141008;--ink-soft:#52454A;--ink-2:#2E2226;
  --white:#FFFFFF;--paper:#FBF7F7;
  --line-strong:#85717A;
  --danger:#B3261E;--danger-bg:#FBEDEB;
  /* hairlines (ink at 14 / 22 %), shadows: the phone button carries a HARD ink offset, everything else stays flat or soft */
  --hair:rgba(20,16,8,.14);--hair-2:rgba(20,16,8,.22);
  --sh-sm:0 1px 2px rgba(20,16,8,.06),0 6px 18px rgba(20,16,8,.07);
  --sh:0 20px 44px -16px rgba(20,16,8,.26);
  --sh-btn:4px 4px 0 var(--ink);
  /* shape — small radii; --bw is the ink edge of every surface; the MAUL notch is 46 x 22 px with a round bottom */
  --r-xs:6px;--r-s:10px;--r-c:12px;--r-h:14px;--rd:8px;--bw:2px;
  --maul-w:46px;--maul-d:22px;--maul-r:12px;--maul-x:30px;
  --wrap:1200px;--gut:clamp(16px,4vw,28px);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* type — bold system sans for headings and body (no web fonts) */
  --head:'Segoe UI Variable Display','Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
  --sans:'Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
  --topbar-h:40px;
}

/* ------------------------------------------- tone scopes (band tokens) --
   A band only changes the ground (--bg-band) and the text colours that must follow it. White and paper are the reading grounds; rosa (Band A) and butter (Band B) are the colour blocks.
   --plate = the fill of icon plates, --alt = the OTHER block colour (phone band half), --mk = the U mark, --ul = the link underline, --hv = the link hover fill.
   White surfaces inside a block (cards, plates) re-declare the white scope below. */
:root,.band--white{--bg-band:var(--white);--fg:var(--ink);--muted:var(--ink-soft);--link:var(--ink);--kick:var(--ink);--ul:var(--pink);--hv:var(--pink);--mk:var(--pink);--plate:var(--pink-wash);--alt:var(--c1)}
.band--paper{--bg-band:var(--paper);--plate:var(--pink-wash);--alt:var(--c2)}
.band--rosa{--bg-band:var(--c1);--fg:var(--on-c1);--muted:var(--ink-2);--link:var(--ink);--kick:var(--ink);--ul:var(--ink);--hv:var(--white);--mk:var(--ink);--plate:var(--white);--alt:var(--c2)}
.band--butter{--bg-band:var(--c2);--fg:var(--on-c2);--muted:var(--ink-2);--link:var(--ink);--kick:var(--ink);--ul:var(--ink);--hv:var(--c1);--mk:var(--ink);--plate:var(--white);--alt:var(--c1)}
.card,.tile,.promise,.notice,.factsheet,.phonebox,.callrow,.cta__dial,.hero__dial,.phoneband__copy,.compare__col,.foot__phone,.sub,.drawer__p,.hero__tag,.gal figcaption,.fig--framed figcaption{--fg:var(--ink);--muted:var(--ink-soft);--link:var(--ink);--kick:var(--ink);--ul:var(--pink);--hv:var(--pink);--mk:var(--pink);--plate:var(--pink-wash)}
/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:100px}
body{margin:0;font:18px/1.66 var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
.ic{width:22px;height:22px;flex:none;stroke-width:2.2}
a{color:var(--link);text-decoration:underline;text-decoration-color:var(--ul);text-decoration-thickness:.18em;text-underline-offset:.16em}
a:hover{text-decoration-thickness:.28em}
:is(p,li,dd,figcaption,.lead,.prose) a:not([class]):hover{background:var(--hv);text-decoration-color:var(--ink)}
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(--head);color:var(--fg);line-height:1.12;letter-spacing:-.018em;margin:0;font-weight:800;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5}
h3{font-size:1.3rem}
ul,ol{margin:0;padding:0}
ul[role=list],ol[role=list]{list-style:none}
b,strong{font-weight:700}
.nowrap{white-space:nowrap}
.center{text-align:center}.mt-s{margin-top:12px}.mt-m{margin-top:clamp(20px,3vw,28px)}.mt-l{margin-top:clamp(30px,4vw,48px)}
.gap-m{display:block;height:clamp(30px,4vw,48px)}.small{font-size:.9em}
.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: a 3 px ink ring with a white gap on every ground */
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--white)}
.band--rosa :focus-visible,.band--butter :focus-visible{outline-color:var(--ink)}
.skip{position:fixed;left:12px;top:-90px;z-index:400;background:var(--white);color:var(--ink);padding:12px 18px;border:3px solid var(--ink);border-radius:0 0 var(--rd) var(--rd);font-weight:700;text-decoration:none;transition:top .15s}
.skip:focus{top:0}
.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}
.haj-content>*:first-child{margin-top:0}
.wp-block-post-content{margin:0}

/* type scale */
.display{font-size:clamp(34px,4.7vw,60px);line-height:1.05;letter-spacing:-.03em;font-weight:800}
.display--long{font-size:clamp(30px,3.7vw,46px)}
.stitle{font-size:clamp(28px,3.3vw,44px);line-height:1.1;letter-spacing:-.025em;font-weight:800;margin-bottom:.45em}
.display,.stitle{text-wrap:balance}
.stitle mark,.statement__t mark,.display mark{background:linear-gradient(transparent 58%,var(--hv) 58% 94%,transparent 94%);color:inherit;padding:0 .1em}
.lead{font-size:1.14rem;color:var(--muted);max-width:62ch}
.hl{color:var(--link)}

/* KICKER — uppercase, letter-spaced, a small U mark (the wrench jaw) in front */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font:800 .76rem/1.35 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--kick);margin:0 0 14px}
.eyebrow::before,.phonestrip__k::before,.sub__k::before,.cta__k::before,.foot__dial-k::before,.factsheet__t::before,.phoneband__k::before,.hero__dial-k::before,.foot__col h2::before{content:"";display:inline-block;flex:none;width:16px;height:12px;border:3px solid var(--mk);border-top:0;border-radius:0 0 8px 8px}

/* reveal on scroll (JS adds .in; without JS everything shows) */
.reveal{opacity:0;transform:translateY(20px);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}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:8px 24px;border-radius:var(--rd);border:2px solid transparent;font:800 1rem/1.2 var(--sans);
  text-decoration:none;cursor:pointer;text-align:left;transition:transform .16s var(--ease),box-shadow .2s,background-color .2s,border-color .2s,color .2s}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn--lg{min-height:60px;font-size:1.08rem;padding:8px 28px}
.btn__ic{width:38px;height:38px;border-radius:var(--rd);background:var(--ink);color:var(--pink-2);display:grid;place-items:center;flex:none;transition:transform .2s var(--ease),background-color .2s,color .2s}
.btn--lg .btn__ic{width:42px;height:42px}
.btn__ic .ic{width:19px;height:19px}
.btn:hover .btn__ic{transform:translateY(-1px) scale(1.06)}
.btn__l{font-weight:600}
/* THE PHONE BUTTON — identical on white, paper, rosa and butter: PINK fill, INK label (6.51 : 1), 2 px ink border (the >= 3 : 1 edge), a HARD ink offset shadow; hover = ink fill with the favicon's second tone as label, pressed in */
.btn--call{padding:8px 26px 8px 8px;background:var(--pink);color:var(--ink);border-color:var(--ink);box-shadow:var(--sh-btn);white-space:nowrap}
.btn--call:hover{background:var(--ink);color:var(--pink-2);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn--call:hover .btn__ic{background:var(--pink);color:var(--ink)}
.btn--call:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn--lg.btn--call{padding:9px 30px 9px 9px}
.btn--call:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:var(--sh-btn),0 0 0 6px var(--white)}
.btn--accent:not(.btn--call){background:var(--white);color:var(--ink);border-color:var(--ink)}
.btn--accent:not(.btn--call):hover{background:var(--ink);color:var(--white)}
/* secondary actions: ink ghost, white plate, text link — never pink-filled (the pink fill is reserved for the phone) */
.btn--outline-dark,.btn--ghost{background:transparent;color:var(--fg);border-color:var(--fg);padding-inline:24px}
.btn--outline-dark:hover,.btn--ghost:hover{background:var(--white);color:var(--ink)}
.btn--soft{background:var(--white);color:var(--ink);border-color:var(--white);padding-inline:24px}
.btn--soft:hover{border-color:var(--ink)}
.btn--white:not(.btn--call){background:var(--white);color:var(--ink);border-color:var(--hair-2);padding-inline:24px}
.btn--text{background:none;color:var(--link);padding-inline:6px;min-height:44px}
.btn--text span{text-decoration:underline;text-decoration-color:var(--ul);text-decoration-thickness:.18em;text-underline-offset:.16em}
.tail{white-space:nowrap}.tail .ic{display:inline-block;vertical-align:-.2em;margin-left:.4em;width:1.05em;height:1.05em}

/* ================================================================== CHROME */
/* the wrapper is the sticky unit: the topbar scrolls away, the masthead stays (the negative top equals the topbar height) */
.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(--c2);color:var(--on-c2);font-size:.86rem;height:var(--topbar-h);border-bottom:2px solid var(--ink);--link:var(--ink);--kick:var(--ink)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:100%}
.topbar p{margin:0;display:flex;align-items:center;gap:10px;line-height:1.2;white-space:nowrap;font-weight:600}
.topbar__l{min-width:0;overflow:hidden}
.topbar__mk{width:16px;height:12px;border:3px solid var(--ink);border-top:0;border-radius:0 0 8px 8px;flex:none}
.topbar__short,.topbar__x{display:none}
.topbar a{color:var(--ink);font-weight:800;text-decoration:underline;text-decoration-thickness:.16em;text-underline-offset:.2em;display:inline-flex;align-items:center;min-height:var(--topbar-h);white-space:nowrap}
.topbar a:hover{text-decoration-thickness:.26em}
.masthead{position:relative;background:var(--white);border-bottom:4px solid var(--c1);transition:box-shadow .25s var(--ease),background-color .25s}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .is-scrolled .masthead{background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(150%) blur(12px);backdrop-filter:saturate(150%) blur(12px)}
}
.is-scrolled .masthead{box-shadow:0 8px 24px -12px rgba(20,16,8,.24)}
.nav{display:flex;align-items:center;gap:22px;height:78px;transition:height .28s var(--ease)}
.is-scrolled .nav{height:66px}
/* logo: the FAVICON geometry (pink plate, corner Keil in the second tone, ink open-end wrench) + a bold wordmark, „SHK“ on a pink plate, over the small-caps sub-line */
.brand{display:inline-flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);flex:none;min-height:44px}
.brand__mk{display:block;flex:none;width:48px;height:48px;border-radius:var(--r-s);overflow:hidden;transition:width .28s var(--ease),height .28s var(--ease)}
.brand__mk svg{width:100%;height:100%}
.is-scrolled .brand__mk{width:42px;height:42px}
.brand__t{display:flex;flex-direction:column;line-height:1.08}
.brand__n{font:800 1.4rem/1.08 var(--head);letter-spacing:-.025em;color:var(--ink);white-space:nowrap}
.brand__n b{font-weight:800;color:var(--ink);background:var(--pink);padding:0 .16em;margin-right:.1em;border-radius:6px}
.brand__s{font:800 .64rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;margin-top:4px}
.nav__main{flex:1;display:flex;justify-content:center}
.menu{display:flex;align-items:center;gap:2px;list-style:none}
.menu>li{position:relative;display:flex;align-items:center}
.menu a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:var(--rd);color:var(--ink);font-weight:700;font-size:.97rem;text-decoration:none;position:relative}
.menu>li>a::after{content:"";position:absolute;left:50%;bottom:3px;width:24px;height:9px;margin-left:-12px;border:3px solid var(--pink);border-top:0;border-radius:0 0 8px 8px;transform:scaleY(0);transform-origin:top;transition:transform .22s var(--ease)}
.menu>li>a:hover::after,.menu>li.is-current>a::after,.menu>li:focus-within>a::after{transform:scaleY(1)}
.menu>li.is-current>a{color:var(--ink);font-weight:800}
.menu__tg{width:30px;height:44px;margin-left:-10px;display:grid;place-items:center;background:none;border:0;color:var(--ink);cursor:pointer;border-radius:var(--rd)}
.menu__tg .ic{width:16px;height:16px;transition:transform .2s}
.menu__tg[aria-expanded=true] .ic{transform:rotate(180deg)}
.sub{position:absolute;left:-6px;top:100%;width:min(700px,92vw);padding-top:12px;visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:5;background:none}
.menu>li.has-sub:hover:not(.is-dismissed)>.sub,.menu>li.has-sub:focus-within:not(.is-dismissed)>.sub,.menu>li.has-sub.open:not(.is-dismissed)>.sub{visibility:visible;opacity:1;transform:none}
.sub>*{position:relative}
.sub::before{content:"";position:absolute;left:0;right:0;top:12px;bottom:0;background:var(--white);border:2px solid var(--ink);border-radius:var(--r-c);box-shadow:var(--sh)}
.sub__k{display:flex;align-items:center;gap:10px;margin:0;padding:22px 22px 8px;font:800 .74rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--kick)}
.sub__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px;padding:4px 14px 8px}
.sub__grid a{padding:8px 10px;font-weight:700;font-size:.95rem}
.sub__grid a .ic{width:36px;height:36px;padding:8px;border-radius:var(--r-s);background:var(--plate);color:var(--ink)}
.sub__grid a:hover{background:var(--paper)}
.sub__all{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px 14px 14px;margin:6px 14px 0;border-top:1px solid var(--hair-2)}
.sub__all a{color:var(--ink);font-weight:800;padding-inline:10px}
.sub__all .ic{width:18px;height:18px}
.sub__tel{color:var(--ink)!important}
.nav__right{display:flex;align-items:center;gap:14px;flex:none}
.nav__phone{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-height:44px;line-height:1.15;text-decoration:none;color:var(--ink)}
.nav__phone b{font:800 1.18rem/1.1 var(--head);color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.nav__phone span{display:inline-flex;align-items:center;font:800 .68rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--kick);margin-top:3px}
.nav__call{min-height:48px}
.burger{display:none;width:48px;height:48px;border:2px solid var(--ink);border-radius:var(--r-s);background:var(--white);color:var(--ink);cursor:pointer;place-items:center}
.burger .ic{width:24px;height:24px}
/* drawer (light: a paper veil, a white panel) */
.drawer{position:fixed;inset:0;z-index:300;visibility:hidden;opacity:0;background:rgba(251,247,247,.88);transition:opacity .25s var(--ease),visibility .25s}
.drawer.open{visibility:visible;opacity:1}
.drawer__p{position:absolute;right:0;top:0;bottom:0;width:min(390px,92vw);background:var(--white);padding:16px 18px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;transform:translateX(100%);transition:transform .32s var(--ease);display:flex;flex-direction:column;gap:12px;border-left:3px solid var(--ink);box-shadow:var(--sh)}
.drawer.open .drawer__p{transform:none}
.drawer__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.drawer__x{width:48px;height:48px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:var(--r-s);background:var(--white);color:var(--ink);cursor:pointer}
.drawer__nav{display:flex;flex-direction:column;gap:2px}
.drawer__nav>a,.drawer__nav summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:50px;padding:10px 14px;border-radius:var(--r-s);border-left:4px solid transparent;color:var(--ink);font:800 1.2rem/1.2 var(--head);text-decoration:none;cursor:pointer;list-style:none}
.drawer__nav summary::-webkit-details-marker{display:none}
.drawer__nav>a:hover,.drawer__nav summary:hover{background:var(--paper)}
.drawer__nav a[aria-current=page],.drawer__nav details.is-current>summary{background:var(--pink-wash);border-left-color:var(--pink);color:var(--ink)}
.drawer__nav summary .ic{width:18px;height:18px;transition:transform .2s}
.drawer__nav details[open] summary .ic{transform:rotate(180deg)}
.drawer__sub{display:grid;gap:2px;padding:4px 0 8px 10px}
.drawer__sub a{display:flex;align-items:center;gap:12px;min-height:46px;padding:8px 12px;border-radius:var(--rd);color:var(--ink);font-weight:700;text-decoration:none}
.drawer__sub a:hover{background:var(--paper)}
.drawer__sub a[aria-current=page]{background:var(--pink-wash);color:var(--ink)}
.drawer__sub .ic{width:30px;height:30px;padding:6px;border-radius:8px;background:var(--plate);color:var(--ink)}
.drawer__call{margin-top:auto;padding:16px;border-radius:var(--r-c);background:var(--c2);border:2px solid var(--ink);display:grid;gap:10px;color:var(--ink)}
.drawer__call .btn{width:100%}
.drawer__call p{margin:0;font-size:.92rem;color:var(--ink-2);font-weight:600}
.drawer-open .callbar,.drawer-open .totop{display:none}
/* no JS: the main links as a wrapping row instead of the burger */
.no-js .burger,.no-js .menu__tg,.no-js .sub{display:none}

/* ================================================================== BANDS */
.band{--padt:clamp(58px,7.4vw,98px);--padb:clamp(58px,7.4vw,98px);position:relative;background:var(--bg-band);color:var(--fg);padding:var(--padt) 0 var(--padb)}
.band--tight{--padt:clamp(36px,5vw,58px);--padb:clamp(36px,5vw,58px)}
.band--tall{--padt:clamp(74px,9.4vw,120px);--padb:clamp(74px,9.4vw,120px)}
.band--white+.band--white.band--flush-top,.band--paper+.band--paper.band--flush-top,.band--rosa+.band--rosa.band--flush-top,.band--butter+.band--butter.band--flush-top{--padt:0px}
.band--rule{border-top:1px solid var(--hair-2)}
.band--orn,.band--closing{--padt:calc(clamp(58px,7.4vw,98px) + 16px)}
.band--herozone,.band--closing{overflow-x:clip}
/* section head */
.head{max-width:760px;margin:0 0 clamp(28px,4vw,46px)}
.head--center{margin-inline:auto;text-align:center}
.head--center .lead{margin-inline:auto}
.head--wide{max-width:none}.head--narrow{max-width:620px}
.head--rule{max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:12px clamp(28px,5vw,64px);align-items:end;padding-bottom:clamp(18px,2.4vw,26px);border-bottom:2px solid var(--fg)}
.head--rule .stitle{margin-bottom:0}.head--rule .lead{margin:0}
.head--rule:has(+ .rows){border-bottom:0;margin-bottom:0;padding-bottom:clamp(14px,2vw,22px)}
:is(.hero--column,.head--center,.statement,.pull--center,.center) .eyebrow{justify-content:center}
.head>.lead{margin-top:.2em}

/* MAUL divider (haj_orn): see the signature block further down */

/* ================================================================== HERO */
/* the hero zone is a COLOUR BLOCK: rose (Band A) on most pages, blush (Band B) on some. Copy and the illustration frame stand side by side — never a photo overlay. */
.band--herozone{--padt:clamp(30px,4.4vw,56px);--padb:clamp(46px,6.4vw,88px)}
.hero{position:relative;z-index:1;min-width:0}
.hero__copy{min-width:0}
.hero .display{color:var(--fg)}
.hero .lead{color:var(--muted);font-size:clamp(1.06rem,1.4vw,1.2rem);margin:0 0 4px;max-width:54ch;font-weight:500}
.hero .display+.lead{margin-top:18px}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;margin-top:26px}
.hero__note{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;font-weight:700;font-size:.95rem;color:var(--fg)}
.hero__note .ic{margin-top:2px;color:var(--fg);width:20px;height:20px}
.hero .eyebrow{margin-bottom:16px}
/* the quiet fact row */
.hq{display:flex;flex-wrap:wrap;gap:12px 26px;margin:26px 0 0;padding-top:20px;border-top:2px solid var(--fg);list-style:none}
.hq li{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.92rem;color:var(--fg);line-height:1.3}
.hq__ic{width:34px;height:34px;display:grid;place-items:center;background:var(--plate);color:var(--ink);border-radius:8px;flex:none}
.hq__ic .ic{width:17px;height:17px}
/* BLOCK hero (variants rosa / butter; „cover“ = rosa): copy left, art right — .hero--rev mirrors it. The art frame is a white plate with a 3 px ink edge and the MAUL notch in its top edge;
   the claim hangs as a label over its lower edge (padding-bottom of the media column makes room for it). */
.hero--block,.hero--cover{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(30px,5vw,76px);align-items:center}
.hero__card{grid-column:1;grid-row:1;min-width:0}
.hero__media{grid-column:2;grid-row:1;position:relative;z-index:1;isolation:isolate;min-width:0;padding-bottom:28px;--bw:3px}
.hero--rev .hero__card{grid-column:2}.hero--rev .hero__media{grid-column:1}
.hero--cover.hero--nomedia,.hero--block.hero--nomedia{display:block}
.hero__card .hero__copy>*:first-child{margin-top:0}
.hero__side{padding:0;border:0}
.hero__copy+.hero__side{margin-top:20px}
.hero__frame{position:relative;z-index:1;border-radius:var(--r-h);overflow:hidden;background:var(--pink-wash);border:3px solid var(--ink)}
.hero__pic{aspect-ratio:4/3;display:flex}
.hero__pic img{width:100%;height:100%;object-fit:cover;object-position:50% 78%}
/* no illustration yet / on purpose: a 2 x 2 grid of icon plates on ink hairlines stands in */
.plates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:3px;width:100%;background:var(--ink)}
.plates>span{display:grid;place-items:center;background:var(--pink-wash);color:var(--ink);min-height:0}
.plates>span:nth-child(2),.plates>span:nth-child(3){background:var(--butter-wash)}
.plates .ic{width:clamp(40px,6vw,72px);height:clamp(40px,6vw,72px);stroke-width:1.8}
.hero__pic.plates{display:grid}
/* the claim: a white label with an ink edge, straddling the lower edge of the art (one TRUE statement) */
.hero__tag{position:absolute;z-index:4;left:18px;bottom:0;max-width:min(320px,82%);display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-c)}
.hero--rev .hero__tag{left:auto;right:18px}
.hero--butter .hero__tag-ic{background:var(--c1)}
.hero__tag-ic{width:38px;height:38px;display:grid;place-items:center;background:var(--pink);color:var(--ink);border:2px solid var(--ink);border-radius:50%;flex:none}
.hero__tag-ic .ic{width:18px;height:18px}
.hero__tag b{display:block;font:800 .84rem/1.25 var(--sans);color:var(--ink)}
.hero__tag small{display:block;font-size:.74rem;line-height:1.25;color:var(--ink-soft)}
/* SPLIT hero: the band itself is two halves — rosa with the copy, butter with the art (rev: art left) */
.band--herosplit{background:linear-gradient(90deg,var(--c1) 50%,var(--c2) 50%);--padb:0;--padt:0}
.band--herosplit.band--herosplit-rev{background:linear-gradient(90deg,var(--c2) 50%,var(--c1) 50%)}
.hero--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch}
.hero--split .hero__copy{padding:clamp(34px,4.6vw,64px) clamp(24px,4vw,64px) clamp(40px,5.4vw,76px) 0;align-self:center}
.hero--split.hero--rev .hero__copy{order:2;padding:clamp(34px,4.6vw,64px) 0 clamp(40px,5.4vw,76px) clamp(24px,4vw,64px)}
.hero__fig{margin:0;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,4.6vw,64px) 0 clamp(40px,5.4vw,76px) clamp(24px,4vw,64px);min-width:0}
.hero--rev .hero__fig{padding:clamp(34px,4.6vw,64px) clamp(24px,4vw,64px) clamp(40px,5.4vw,76px) 0;order:1}
.hero__fig-in{border-radius:var(--r-h);overflow:hidden;background:var(--pink-wash);border:3px solid var(--ink);aspect-ratio:4/3;display:flex;position:relative;z-index:1}
.hero__fig-in.plates{display:grid}
.hero__fig-in img{width:100%;height:100%;object-fit:cover}
.hero__fig figcaption{margin-top:14px;font-size:.92rem;font-weight:600;color:var(--ink-2);padding-left:14px;border-left:4px solid var(--ink)}
.hero--split.hero--nomedia{grid-template-columns:minmax(0,1fr)}
/* column: a centred title, THE BIG NUMBER, a slim art strip below */
.hero--column{display:block;text-align:center}
.hero--column .eyebrow{justify-content:center}
.hero--column .lead{margin-inline:auto}
.hero--column .hero__cta{justify-content:center}
.hero--column .hero__tel{margin-top:22px}
.hero--column .hq{justify-content:center}
.hero--column .hero__note{justify-content:center}
.hero__strip{margin:clamp(28px,3.8vw,46px) auto 0;max-width:920px;position:relative;isolation:isolate}
.hero__strip-pic{position:relative;border-radius:var(--r-h);border:3px solid var(--ink);background:var(--pink-wash);aspect-ratio:16/9;display:flex;--bw:3px}
.hero__strip-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;border-radius:calc(var(--r-h) - 3px)}
.hero__strip figcaption{margin-top:14px;font-size:.9rem;color:var(--muted);font-weight:600}
/* panel: copy + an aside (phone box / fact sheet / the page's own art) */
.hero--panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4.4vw,64px);align-items:center}
.hero--panel .hero__copy>.hero__cta:first-child{margin-top:0}
.hero__aside{min-width:0;position:relative;z-index:3}
.hero__aside .hero__fig{margin:0;padding:0}
.hero--nomedia.hero--panel{grid-template-columns:minmax(0,1fr)}
/* emergency: copy, a white dial plate with the number, the first steps as numbered rows */
.hero--emergency{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4.4vw,60px);align-items:start}
.hero--emergency .hero__copy{grid-column:1;grid-row:1}
.hero__dial{grid-column:2;grid-row:1;align-self:center;background:var(--white);border:2px solid var(--ink);border-radius:var(--r-h);padding:clamp(22px,2.8vw,32px);box-shadow:var(--sh);display:grid;gap:14px;position:relative;z-index:3}
.hero__dial-k{display:flex;align-items:center;gap:10px;font:800 .74rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--kick)}
.hero__dial-n{margin:0;color:var(--muted);font-size:.97rem}
.hero__dial-btn{width:100%}
.hero--emergency .ersteps{grid-column:1 / -1;grid-row:2}
.hero--emergency .hq{grid-column:1 / -1;margin-top:0}
/* wide screens: the first steps run in two columns under copy + dial (no empty area under the lead); phones keep the single column (reset in the 1060 px query below) */
@media (min-width:1061px){
  .hero--emergency .ersteps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4.4vw,60px)}
  .hero--emergency .ersteps>li:last-child:nth-child(odd){grid-column:1 / -1}
}
.ersteps{display:grid;gap:0;list-style:none;border-top:2px solid var(--fg)}
.ersteps li{display:flex;align-items:flex-start;gap:16px;padding:14px 4px;border-bottom:1px solid var(--hair-2)}
.ersteps__n{width:42px;height:42px;display:grid;place-items:center;background:var(--pink);color:var(--ink);font:800 1.1rem var(--head);flex:none}
.ersteps b{display:block;color:var(--fg)}.ersteps span:not(.ersteps__n){display:block;color:var(--muted);font-size:.95rem}
/* compact: slim paper hero for legal / utility pages (also the legal template) */
.band--hero-flat{--padb:clamp(30px,4vw,48px);border-bottom:2px solid var(--ink)}
.hero--compact{display:block;max-width:900px}
.hero--compact .display{font-size:clamp(30px,4vw,48px)}
.hero--compact .hero__cta{margin-top:22px}
.legal-hero{--padt:clamp(30px,4.4vw,52px);--padb:clamp(30px,4.4vw,52px);border-bottom:2px solid var(--ink)}
.legal-hero .display{font-size:clamp(30px,4vw,48px);margin:0}
.legal-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px}
.legal-hero__note{font-size:.95rem;font-weight:700;color:var(--muted)}
/* breadcrumbs: the separator is a small U mark */
.crumbs{margin:0 0 16px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;list-style:none;font-size:.86rem;font-weight:700}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li+li::before{content:"";width:12px;height:9px;margin:0 10px 0 6px;border:3px solid var(--mk);border-top:0;border-radius:0 0 6px 6px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--link)}
.crumbs [aria-current]{color:var(--fg);font-weight:800}

/* PHONE STRIP (optional slim row under a hero). NO form, NO input (iron rule 3) */
.phonestrip{position:relative;background:var(--white);padding:clamp(20px,2.8vw,30px) 0;border-block:2px solid var(--ink)}
.phonestrip__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px clamp(24px,4vw,56px)}
.phonestrip__copy{min-width:0;max-width:520px}
.phonestrip__k{display:flex;align-items:center;gap:12px;font:800 .74rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--kick);margin:0 0 6px}
.phonestrip__copy p:not(.phonestrip__k){margin:0;font-weight:700;font-size:1.02rem;color:var(--ink)}
/* ZUSAGEN strip: qualitative promises between a hero and the first band — a full-bleed colour strip (butter under a rosa hero, white otherwise), each promise opened by a ring badge with the U opening */
.trustbar{background:var(--bg-band);color:var(--fg);padding:clamp(18px,2.4vw,26px) 0;position:relative}
.trustbar ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px 0;list-style:none}
.trustbar li{display:flex;align-items:center;gap:14px;padding:4px clamp(12px,1.4vw,20px);font-weight:800;font-size:.95rem;line-height:1.3;color:var(--fg)}
.trustbar li+li{border-left:2px solid var(--ink)}
.trustbar__ic{width:46px;height:46px;display:grid;place-items:center;flex:none;background:var(--pink);color:var(--ink)}
.trustbar__ic .ic{width:20px;height:20px}
@media (min-width:761px) and (max-width:1060px){.trustbar ul:has(> li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}.trustbar ul:has(> li:nth-child(4):last-child) li:nth-child(odd){border-left:0}}

/* the big phone number */
.telbig{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--fg);white-space:nowrap}
.telbig:hover{text-decoration:none;color:var(--link)}
.telbig__ic{width:50px;height:50px;display:grid;place-items:center;background:var(--pink);color:var(--ink);border-radius:12px;flex:none;transition:transform .2s var(--ease)}
.telbig:hover .telbig__ic{transform:translateY(-2px) scale(1.05)}
.telbig__ic .ic{width:23px;height:23px}
.telbig__n{font:800 clamp(1.7rem,3vw,2.3rem)/1 var(--head);letter-spacing:-.02em}
.telbig--xl .telbig__ic{width:60px;height:60px}.telbig--xl .telbig__n{font-size:clamp(2.1rem,5vw,3.4rem)}

/* ================================================================== BRICKS */
/* portrait: a ROUND illustration / icon plate (never a person) — a ring with the U opening at the top, an ink edge, a phone badge at its foot */
.portrait{position:relative;max-width:400px;margin-inline:auto;isolation:isolate;--bw:3px}
.portrait__ring{background:var(--white);border:3px solid var(--ink);border-radius:50%;position:relative}
.portrait__ring img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--pink-wash);border-radius:50%}
.portrait__ring.plates{aspect-ratio:1;display:grid;overflow:hidden}
.portrait__badge{position:absolute;left:2%;bottom:4%;width:62px;height:62px;display:grid;place-items:center;background:var(--pink);color:var(--ink);border:3px solid var(--ink);border-radius:50%;box-shadow:var(--sh-btn)}
.portrait__badge .ic{width:27px;height:27px}
.pblock{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:center}
.pblock--rev .pblock__media{order:-1}
.pblock__cta{margin-top:26px}
.pblock__copy{min-width:0}
/* checklist: icon plates, hairline rows */
.checklist{display:grid;gap:0;list-style:none;margin:22px 0 0;border-top:2px solid var(--fg)}
.checklist--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.checklist li{display:flex;gap:16px;align-items:flex-start;padding:16px 2px;border-bottom:1px solid var(--hair-2)}
.ci__ic{width:46px;height:46px;display:grid;place-items:center;flex:none;background:var(--plate);color:var(--ink);border-radius:12px}
.ci__ic .ic{width:22px;height:22px}
.checklist b{display:block;color:var(--fg);font:800 1.1rem/1.3 var(--head)}.checklist span:not(.ci__ic){display:block;color:var(--muted);font-size:.97rem}
/* promise cards (replace reviews) */
.promises{display:grid;gap:clamp(18px,2.4vw,30px);list-style:none}
.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;background:var(--white);color:var(--ink);border-radius:var(--r-c);padding:26px 24px 26px;border:var(--bw) solid var(--ink);transition:transform .25s var(--ease),box-shadow .25s}
.promise:hover{transform:translateY(-4px);box-shadow:0 6px 0 var(--ink)}
.promise__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.promise__ic{width:50px;height:50px;display:grid;place-items:center;background:var(--plate);color:var(--ink);border-radius:12px}
.promise__n{font:800 2.3rem/1 var(--head);color:var(--ink);letter-spacing:-.03em}
.promise__t{font-size:1.28rem;margin-bottom:8px;color:var(--ink)}
.promise p{color:var(--muted);font-size:.99rem;margin:0 0 .6em}
.promise__foot{display:flex;align-items:center;gap:8px;margin:14px 0 0!important;font-weight:800;font-size:.88rem!important;color:var(--ink)!important}
.promise__foot .ic{width:18px;height:18px}
/* phone band (replaces the callback form): ONE panel in two halves — the white copy half and the asks half in the OTHER block colour; the notch sits on the copy half. NO form, NO input. */
.phoneband{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);border:2px solid var(--ink);border-radius:var(--r-h);background:var(--white)}
.phoneband--solo{grid-template-columns:minmax(0,1fr)}
.phoneband__copy{background:var(--white);padding:clamp(24px,3.4vw,44px);border-radius:calc(var(--r-h) - 2px) 0 0 calc(var(--r-h) - 2px)}
.phoneband--solo .phoneband__copy{border-radius:calc(var(--r-h) - 2px)}
.phoneband__num{margin:18px 0 6px}.phoneband__cta{margin-top:20px}
.phoneband__note{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;font-weight:700;font-size:.95rem;color:var(--ink)}
.phoneband__asks{position:relative;background:var(--alt);padding:clamp(24px,3.4vw,44px);border-left:2px solid var(--ink);border-radius:0 calc(var(--r-h) - 2px) calc(var(--r-h) - 2px) 0;--fg:var(--ink);--muted:var(--ink-2);--kick:var(--ink);--link:var(--ink);--mk:var(--ink);--plate:var(--white)}
.phoneband__ic{position:absolute;right:22px;top:22px;width:50px;height:50px;display:grid;place-items:center;background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:50%}
.phoneband__k{display:flex;align-items:center;gap:10px;margin:0 0 16px;font:800 .74rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--kick);padding-right:64px}
.asks{display:grid;gap:14px;list-style:none}
.asks li{display:flex;gap:12px;align-items:flex-start}
.asks__n{width:34px;height:34px;display:grid;place-items:center;background:var(--pink);color:var(--ink);border:2px solid var(--ink);font:800 .95rem var(--head);border-radius:50%;flex:none}
.asks b{display:block;color:var(--fg)}.asks span:not(.asks__n){display:block;font-size:.95rem;color:var(--muted)}
/* chips: services / emergency situations (NEVER places) — white pills with an ink edge and a small U mark */
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin-top:20px}
.chips--center{justify-content:center}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 18px;background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:999px;font-weight:700;font-size:.95rem;text-decoration:none;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
a.chip::before,.chip--static::before{content:"";flex:none;width:14px;height:10px;border:3px solid var(--pink);border-top:0;border-radius:0 0 7px 7px}
a.chip:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink);text-decoration:none}
.chip--static{font-weight:600}
.band--chips .chips{margin-top:0}
/* editorial: a bold intro block in two columns beside a statement plate */
.lede{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.lede__cols{columns:2;column-gap:clamp(24px,3vw,40px)}
.lede__cols p{break-inside:avoid;color:var(--fg)}
.lede__cols p:first-child{column-span:all;font:700 clamp(1.15rem,1.7vw,1.38rem)/1.45 var(--head);letter-spacing:-.01em;margin-bottom:1em}
.lede__aside{min-width:0}
.lede__aside>*+*,.lede__aside>*+.pull{margin-top:clamp(16px,2.4vw,24px)}   /* the .pull selector is the stronger one: `.pull{margin:0}` below would otherwise win */
.pull{position:relative;margin:0;padding:26px 28px 26px 34px;background:var(--white);color:var(--ink);border-radius:var(--r-c);border:var(--bw) solid var(--ink);border-left:10px solid var(--pink)}
.pull p{margin:0;font:800 clamp(1.2rem,1.9vw,1.5rem)/1.3 var(--head);letter-spacing:-.015em;color:var(--ink);hyphens:manual}
.pull cite{display:block;margin-top:14px;font:800 .8rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-style:normal}
.pull--center{max-width:760px;margin-inline:auto;text-align:center;border-left-width:2px;border-left-color:var(--ink);box-shadow:inset 0 8px 0 var(--pink)}
.statement{max-width:960px;margin-inline:auto;text-align:center}
.statement__t{font:800 clamp(1.9rem,4.2vw,3.2rem)/1.1 var(--head);letter-spacing:-.03em;color:var(--fg);margin:0 0 .4em}
.statement__s{color:var(--muted);margin:0 auto;max-width:56ch}
/* numbered ROWS: number ring · copy · picture */
.rows{display:grid;gap:0;border-bottom:2px solid var(--fg)}
.row{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,300px);gap:clamp(18px,3vw,40px);align-items:center;padding:clamp(22px,2.8vw,32px) clamp(4px,1vw,12px);border-top:2px solid var(--fg);transition:background-color .25s var(--ease)}
.rows--nomedia .row,.row:not(:has(.row__shot)){grid-template-columns:64px minmax(0,1fr)}
.row__n{width:58px;height:58px;display:grid;place-items:center;background:var(--plate);color:var(--ink);font:800 1.2rem var(--head);transition:background-color .25s}
.row:hover .row__t{text-decoration:underline;text-decoration-color:var(--ul);text-decoration-thickness:.12em;text-underline-offset:.14em}
.row:hover .row__n{background:var(--pink)}
.row__b{min-width:0}
.row__t{font-size:clamp(1.3rem,2vw,1.65rem);margin-bottom:8px}
.row__a{color:var(--fg);text-decoration:none}
.row__a::after{content:"";position:absolute;inset:0}
.row--link{position:relative;cursor:pointer}
.row__b p{color:var(--muted);margin:0 0 .6em;max-width:60ch}
.row__more{display:inline-block;font-weight:800;font-size:.93rem;color:var(--link)}
.row__more .ic{transition:transform .2s var(--ease)}
.row:hover .row__more .ic{transform:translateX(4px)}
.row__shot{border-radius:var(--r-c);overflow:hidden;border:var(--bw) solid var(--ink);background:var(--pink-wash);aspect-ratio:4/3}
.row__shot img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.row:hover .row__shot img{transform:scale(1.05)}
/* ILLUSTRATION GALLERY (Symbolbild): tall / wide / big frames, white caption plate */
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:220px;grid-auto-flow:dense;gap:16px}
.gal--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gal figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r-c);border:var(--bw) solid var(--ink);background:var(--pink-wash)}
.gal figure:nth-child(even){border-radius:var(--r-c)}
.gal__pic{position:absolute;inset:0}
.gal__pic img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.gal figure:hover .gal__pic img{transform:scale(1.06)}
.gal--tall{grid-row:span 2}.gal--wide{grid-column:span 2}.gal--big{grid-column:span 2;grid-row:span 2}
.gal--wide .gal__pic img{object-position:50% 24%}   /* a 4:3 drawing in a 2.5:1 frame: keep the roofline, let the caption plate cover the ground */
.gal__tag{position:absolute;left:10px;top:10px;z-index:2;padding:5px 11px;border-radius:8px;background:var(--white);color:var(--ink);font:800 .68rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;border:var(--bw) solid var(--ink)}
.gal figcaption{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;background:var(--white);border-radius:8px;padding:10px 14px;border:var(--bw) solid var(--ink);transition:transform .3s var(--ease)}
.gal figure:hover figcaption{transform:translateY(-4px)}
.gal figcaption b{display:block;font:800 1rem/1.25 var(--head);color:var(--ink)}
.gal figcaption span{display:block;font-size:.84rem;line-height:1.35;color:var(--ink-soft);margin-top:2px}
/* call row: a white plate, one rounded corner, the number + the phone button */
.callrow{position:relative;background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-h);padding:clamp(24px,3.2vw,38px) clamp(24px,3.6vw,48px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 32px;box-shadow:var(--sh-sm)}
.callrow__copy{min-width:0;max-width:520px;flex:1 1 300px}
.callrow__t{font:800 clamp(1.4rem,2.2vw,1.8rem)/1.2 var(--head);color:var(--ink);margin:0 0 4px}
.callrow__copy p:not(.callrow__t){margin:0;color:var(--muted)}
.callrow__act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
/* composites */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.split--wide-l{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}.split--wide-r{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
.split--top{align-items:start}
.split--rev .split__media{order:-1}
.split__copy,.split__media{min-width:0}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.cols--wide-l{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}.cols--wide-r{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
/* framed figure: a 3 px ink edge, the MAUL notch in its top edge */
.fig{margin:0;position:relative;isolation:isolate}
.fig__in{position:relative;border-radius:var(--r-h);border:3px solid var(--ink);background:var(--pink-wash);--bw:3px}
.fig__in img{width:100%;height:auto;border-radius:calc(var(--r-h) - 3px)}
.fig figcaption{margin-top:16px;font-size:.9rem;font-weight:600;color:var(--muted);padding-left:14px;border-left:4px solid var(--ink)}
.fig--tilt .fig__in{transform:rotate(-1.2deg)}
.fig--round .fig__in::after,.fig--flat .fig__in::after,.fig--tilt .fig__in::after,.fig--framed .fig__in::after{display:none}
.fig--framed{border:2px solid var(--ink);border-radius:var(--r-h);overflow:hidden;background:var(--white)}
.fig--framed .fig__in{border:0;border-radius:0}
.fig--framed .fig__in img{border-radius:0}
.fig--framed figcaption{margin:0;padding:12px 16px;border:0;border-top:2px solid var(--ink);background:var(--white);color:var(--ink-soft)}

/* cards: white plates with an ink edge and the MAUL notch, a picture on top, a pink title underline that grows */
.cards{display:grid;gap:clamp(16px,2vw,26px)}
.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;display:flex;flex-direction:column;background:var(--white);color:var(--ink);border:var(--bw) solid var(--ink);border-radius:var(--r-c);transition:transform .25s var(--ease),box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 6px 0 var(--ink)}
.card__media{aspect-ratio:4/3;overflow:hidden;background:var(--pink-wash);border-bottom:var(--bw) solid var(--ink);border-radius:calc(var(--r-c) - var(--bw)) calc(var(--r-c) - var(--bw)) 0 0}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__media--ic{display:grid;place-items:center;background:var(--pink-wash)}
.card:nth-child(even) .card__media--ic{background:var(--butter-wash)}
.card__bigic{width:78px;height:78px;display:grid;place-items:center;background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:50%}
.card__bigic .ic{width:36px;height:36px}
.card__body{position:relative;padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.card__bk{position:absolute;right:20px;top:-27px;width:54px;height:54px;display:grid;place-items:center;background:var(--pink);color:var(--ink);border-radius:50%;border:2px solid var(--ink)}
.card__bk .ic{width:23px;height:23px}
.card__ic{width:50px;height:50px;display:grid;place-items:center;background:var(--plate);color:var(--ink);border-radius:12px;margin-bottom:14px}
.card__num{display:block;font:800 2.4rem/1 var(--head);color:var(--ink);margin-bottom:10px;letter-spacing:-.03em}
.card__t{font-size:1.3rem;margin-bottom:8px;color:var(--ink)}
.card__t::after{content:"";display:block;width:44px;height:5px;margin-top:10px;background:var(--pink);border-radius:3px;transition:width .3s var(--ease)}
.card:hover .card__t::after{width:92px}
.card__a{color:var(--ink);text-decoration:none}
.card__a::after{content:"";position:absolute;inset:0;z-index:1}
.card--link{cursor:pointer}
.card__body p{color:var(--ink-soft);font-size:.98rem;margin:0 0 .6em}
.card__more{margin-top:auto;padding-top:8px;display:block;font-weight:800;font-size:.93rem;color:var(--ink)}
.card__more .ic{transition:transform .2s var(--ease)}
.card:hover .card__more .ic{transform:translateX(4px)}
.cards--line .card{box-shadow:inset 0 6px 0 var(--pink)}
.cards--line .card:hover{box-shadow:inset 0 6px 0 var(--pink),0 6px 0 var(--ink)}
.cards--plain .card{background:none;border:0;border-radius:0;border-top:2px solid var(--fg);box-shadow:none;color:var(--fg);--ink-soft:var(--muted)}
.cards--plain .card::after{display:none}
.cards--plain .card:hover{transform:none;box-shadow:none}
.cards--plain .card__body{padding-inline:0}

/* process: an open RAIL — a heavy ink line (the shaft of the wrench) runs through ring badges with the U opening; the copy stands open on the band, no cards */
.steps{--sg:clamp(18px,2.4vw,30px);display:grid;gap:34px var(--sg);list-style:none;padding-top:6px}
.steps--c1{grid-template-columns:minmax(0,1fr)}.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:82px 4px 0 0;color:var(--fg)}
.step::before{content:"";position:absolute;left:32px;right:calc(var(--sg) * -1);top:29px;height:4px;background:var(--ink)}
.step:last-child::before{display:none}
.step__n{position:absolute;left:0;top:0;z-index:1;width:64px;height:64px;display:grid;place-items:center;background:var(--pink);color:var(--ink);font:800 1.55rem/1 var(--head);--bw:3px}
.step__t{font-size:1.2rem;margin-bottom:8px;color:var(--fg)}
.step__b p{color:var(--muted);font-size:.98rem;margin:0}
.steps--vertical,.steps--line{grid-template-columns:minmax(0,1fr)}

/* FAQ: heavy ink rules, bold questions, a plate plus toggle (markup unchanged: FAQPage JSON-LD is parsed from it) */
.faq{border-bottom:2px solid var(--fg);max-width:900px;margin-inline:auto}
.qa{border-top:2px solid var(--fg)}
.qa__h{font-size:inherit}
.qa__b{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:68px;padding:16px 8px 16px 4px;background:none;border:0;cursor:pointer;text-align:left;color:var(--fg);font:800 clamp(1.08rem,1.6vw,1.26rem)/1.3 var(--head);letter-spacing:-.01em;transition:color .2s}
.qa__b:hover{color:var(--link)}
.qa__ic{width:42px;height:42px;flex:none;display:grid;place-items:center;background:var(--plate);color:var(--ink);border-radius:12px;transition:background-color .25s,color .25s}
.qa__ic .ic{width:20px;height:20px;transition:transform .3s var(--ease)}
.qa__b[aria-expanded=true] .qa__ic{background:var(--pink);color:var(--ink)}
.qa__b[aria-expanded=true] .qa__ic .ic{transform:rotate(45deg)}
.qa__a{padding:0 64px 24px 4px;color:var(--muted)}
.qa__a p:last-child{margin-bottom:0}
.no-js .qa__a[hidden]{display:block}

/* notices: white plate with the Maul notch; danger = hazard red on a light red tint (gas / water safety only) */
.notice{display:flex;gap:16px;align-items:flex-start;background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-c);padding:20px 24px}
.notice--center{max-width:880px;margin-inline:auto}
.notice__ic{width:46px;height:46px;display:grid;place-items:center;background:var(--plate);color:var(--ink);border-radius:12px;flex:none}
.notice__b{min-width:0}.notice__b>*:last-child{margin-bottom:0}
.notice__t{font:800 1.15rem/1.3 var(--head);color:var(--ink);margin:0 0 6px}
.notice--danger{background:var(--danger-bg);border-color:var(--danger);border-left-width:8px;color:var(--ink)}
.notice--danger .notice__ic{background:var(--danger);color:var(--white)}
.notice--danger .notice__t{color:var(--danger)}
.hazard__steps{display:grid;gap:10px;list-style:none;margin:12px 0;counter-reset:hz}
.hazard__steps li{display:flex;gap:12px;align-items:flex-start;counter-increment:hz}
.hazard__steps li::before{content:counter(hz);width:30px;height:30px;display:grid;place-items:center;background:var(--danger);color:var(--white);font:800 .9rem var(--head);border-radius:8px;flex:none}
/* factors (WORAUF ES ANKOMMT) / tiles / stats / compare */
.factors{display:grid;gap:0 clamp(24px,4vw,56px);list-style:none}
.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{display:grid;grid-template-columns:54px minmax(0,1fr);gap:0 16px;padding:22px 0;border-top:2px solid var(--fg)}
.factor__ic{grid-row:span 2;width:50px;height:50px;display:grid;place-items:center;background:var(--plate);color:var(--ink);border-radius:12px;transition:background-color .25s,color .25s}
.factor:hover .factor__ic{background:var(--pink);color:var(--ink)}
.factor__t{font-size:1.18rem;margin-bottom:4px}
.factor p{margin:0;color:var(--muted);font-size:.97rem}
.factors--3 .factor,.factors--4 .factor{grid-template-columns:minmax(0,1fr)}.factors--3 .factor__ic,.factors--4 .factor__ic{grid-row:auto;margin-bottom:12px}
.tiles{display:grid;gap:clamp(14px,2vw,22px);list-style:none}
.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{background:var(--white);color:var(--ink);border:1px solid var(--hair-2);border-radius:var(--r-c);padding:22px 22px 24px;box-shadow:var(--sh-sm);transition:transform .2s var(--ease),box-shadow .2s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.tile__ic{width:48px;height:48px;display:grid;place-items:center;background:var(--plate);color:var(--ink);border-radius:12px;margin-bottom:14px}
.tile__t{font-size:1.14rem;margin-bottom:6px;color:var(--ink)}
.tile p{margin:0;color:var(--ink-soft);font-size:.95rem}
.stats{display:flex;flex-wrap:wrap;gap:0;margin:0;border-top:2px solid var(--fg);border-bottom:2px solid var(--fg)}
.stat{flex:1 1 180px;padding:22px 24px;display:flex;flex-direction:column-reverse}
.stat+.stat{border-left:2px solid var(--hair-2)}
.stat dt{color:var(--muted);font-size:.92rem;font-weight:600}
.stat dd{margin:0;font:800 2.8rem/1.1 var(--head);color:var(--link);letter-spacing:-.03em}
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.compare__col{background:var(--white);color:var(--ink);border:1px solid var(--hair-2);border-radius:var(--r-c);padding:24px 26px;box-shadow:var(--sh-sm)}
.compare__col--yes{box-shadow:inset 0 6px 0 var(--pink)}.compare__col--no{box-shadow:inset 0 6px 0 var(--line-strong)}
.compare__t{display:flex;align-items:center;gap:12px;font:800 1.2rem/1.3 var(--head);margin:0 0 14px;color:var(--ink)}
.compare__t .ic{color:var(--ink)}
.compare ul,.ticks{list-style:none;display:grid;gap:10px}
.compare li,.ticks li{display:flex;gap:12px;align-items:flex-start}
.compare li::before,.ticks li::before{content:"";flex:none;width:14px;height:10px;margin-top:.62em;border:3px solid var(--pink);border-top:0;border-radius:0 0 7px 7px}
.timeline{list-style:none;position:relative;display:grid;gap:0;padding-left:38px}
.timeline::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:3px;background:var(--hair-2)}
.timeline li{position:relative;padding:0 0 28px}
.timeline li::before{content:"";position:absolute;left:-38px;top:3px;width:24px;height:24px;background:var(--pink);border:3px solid var(--white);border-radius:8px}
.timeline__k{display:block;font:800 .74rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--kick);margin-bottom:4px}
.timeline__t{font-size:1.2rem;margin-bottom:4px}
.timeline p{margin:0;color:var(--muted)}
/* fact sheet / phone box (white plates) */
.factsheet{background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-c);padding:22px 26px}
.factsheet__t{display:flex;align-items:center;gap:12px;font:800 .74rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--kick);margin:0 0 10px}
.factsheet dl{margin:0}
.factsheet dl>div{display:grid;grid-template-columns:minmax(120px,36%) minmax(0,1fr);gap:4px 16px;padding:12px 0;border-top:1px solid var(--hair-2)}
.factsheet dt{font-weight:800;color:var(--ink)}.factsheet dd{margin:0;color:var(--ink-soft)}
@media (max-width:480px){.factsheet dl>div{grid-template-columns:minmax(0,1fr)}}
.phonebox{background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-h)}
.phonebox__top{padding:clamp(22px,2.8vw,32px);display:grid;gap:10px;justify-items:start}
.phonebox__top p{margin:0;color:var(--ink-soft)}
.phonebox__t{font:800 1.4rem/1.2 var(--head);color:var(--ink)!important}
.phonebox__asks{display:grid;gap:0;list-style:none;border-top:2px solid var(--ink);background:var(--butter-wash);padding:8px clamp(22px,2.8vw,32px)}
.phonebox__asks li{display:flex;gap:12px;align-items:flex-start;padding:12px 0}
.phonebox__asks li+li{border-top:1px solid var(--hair-2)}
.phonebox__asks .ic{margin-top:2px;color:var(--ink)}
.phonebox__asks b{display:block}.phonebox__asks span{display:block;color:var(--ink-soft);font-size:.95rem}
.phonebox__note{display:flex;gap:10px;margin:0;padding:14px clamp(22px,2.8vw,32px);border-top:2px solid var(--ink);font-weight:700;font-size:.93rem}
/* prose */
.prose{max-width:760px}
.prose p{margin:0 0 1.1em}
.prose h2{margin:1.6em 0 .5em}
.prose h3{margin:1.4em 0 .4em}
.prose .ticks{margin:0 0 1.2em}

/* closing band: ONE per page, on a colour block (rose or blush) with ink text; the white dial plate carries the pink phone button */
.cta{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.cta__copy{min-width:0}
.cta__copy .stitle{margin-bottom:.35em}
.cta__dial{background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-h);padding:clamp(22px,2.8vw,32px);box-shadow:var(--sh);display:grid;gap:18px;justify-items:start;position:relative}
.cta__top{display:grid;gap:10px}
.cta__k{display:flex;align-items:center;gap:10px;font:800 .74rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--kick)}
.cta__band{width:100%}.cta__band .btn{width:100%}
.cta__links{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:0 24px}
.cta__links a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}

/* ================================================================== FOOTER (light) */
/* a pink-wash ground under the colour-A rule of the header (bookends): the PHONE BAR first — one white plate, the number left, the pink button right —, then the brand and the three link columns */
.foot{background:var(--pink-wash);color:var(--ink);position:relative;border-top:4px solid var(--c1);--link:var(--ink);--kick:var(--ink);--mk:var(--ink)}
.foot__main{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,4vw,48px);padding-top:clamp(40px,5.2vw,64px);padding-bottom:clamp(30px,4vw,48px)}
.foot__phone{position:relative;background:var(--white);border:2px solid var(--ink);border-radius:var(--r-h);padding:clamp(22px,2.8vw,30px) clamp(22px,3vw,38px);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k btn" "tel btn" "note btn";align-items:center;gap:6px 36px}
.foot__dial-k{grid-area:k;display:flex;align-items:center;gap:12px;margin:0;font:800 .74rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--kick)}
.foot__tel{grid-area:tel;justify-self:start;display:inline-flex;align-items:center;gap:14px;font:800 clamp(1.6rem,3vw,2.3rem)/1.1 var(--head);letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.foot__tel:hover{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:.14em}
.foot__telic{width:48px;height:48px;display:grid;place-items:center;background:var(--pink);color:var(--ink);border:2px solid var(--ink);border-radius:50%;transition:transform .2s var(--ease)}
.foot__tel:hover .foot__telic{transform:translateY(-2px) scale(1.05)}
.foot__call{grid-area:btn;justify-self:end;align-self:center}
.foot__note{grid-area:note;margin:0;color:var(--ink-soft);font-size:.93rem}
.foot__body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:clamp(30px,5vw,72px);align-items:start;border-top:2px solid var(--ink);padding-top:clamp(26px,3.4vw,40px)}
.foot__lead{min-width:0}
.foot__lead>p{margin:18px 0 0;max-width:46ch;color:var(--ink-soft)}
.foot__cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,3vw,40px);align-content:start}
.foot__col h2{display:flex;align-items:center;gap:10px;font:800 .74rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--kick);margin:0 0 14px}
.foot__col ul{display:grid;gap:0;list-style:none}
.foot__col--svc ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
.foot__col a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere;padding:3px 0;color:var(--ink);font-weight:600;font-size:.96rem;text-decoration:none}
.foot__col a:hover{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:.16em;text-underline-offset:.16em}
.foot__strip{background:var(--white);border-top:2px solid var(--ink);padding:16px 0}
.foot__strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px}
.foot__strip p{margin:0;font-size:.86rem;color:var(--ink-soft)}
/* sticky mobile call bar (light: white, hairline top, the pink phone button) + to-top */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;background:var(--white);border-top:1px solid var(--hair-2);box-shadow:0 -10px 24px -14px rgba(20,16,8,.28);padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.callbar .btn{width:100%}
.totop{position:fixed;right:18px;bottom:20px;z-index:90;width:50px;height:50px;display:grid;place-items:center;background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-s);cursor:pointer;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .25s,transform .25s var(--ease),background-color .2s;box-shadow:var(--sh-sm)}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--c1)}
.totop .ic{width:22px;height:22px}

/* ---------------------------------------------------------------- before / after slider (Symbolbild) */
.ba{margin:0 auto;max-width:920px}
.ba__stage{position:relative;aspect-ratio:16/10;border-radius:var(--r-h);overflow:hidden;border:3px solid var(--ink);background:var(--pink-wash);user-select:none;-webkit-user-select:none;touch-action:pan-y;--pos:50%}
.ba__pane{position:absolute;inset:0}
.ba__pane svg,.ba__pane img{width:100%;height:100%;object-fit:cover}
.ba__pane--after{clip-path:inset(0 0 0 var(--pos))}
.ba__lab{position:absolute;top:14px;z-index:3;white-space:nowrap;padding:6px 14px;border-radius:8px;background:var(--white);border:2px solid var(--ink);color:var(--ink);font:800 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.ba__pane--before .ba__lab{left:14px}.ba__pane--after .ba__lab{right:14px}
.ba.is-live .ba__lab{max-width:calc(50% - 22px);overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){.ba__lab{top:10px;padding:5px 9px;font-size:.66rem;letter-spacing:.07em}.ba__pane--before .ba__lab{left:10px}.ba__pane--after .ba__lab{right:10px}.ba.is-live .ba__lab{white-space:normal;max-width:calc(50% - 16px);line-height:1.15;text-align:center}}
.ba__sym{position:absolute;left:50%;bottom:12px;translate:-50% 0;z-index:5;pointer-events:none;padding:6px 14px;border-radius:8px;background:var(--white);border:2px solid var(--ink);color:var(--ink);font:700 .74rem/1.2 var(--sans);letter-spacing:.05em;white-space:nowrap}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:56px;margin-left:-28px;z-index:4;display:grid;place-items:center;padding:0;background:none;border:0;cursor:ew-resize;touch-action:none}
.ba__handle[hidden]{display:none}
.ba__handle::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:var(--white);box-shadow:0 0 0 1px var(--hair-2)}
.ba__knob{position:relative;width:50px;height:50px;border-radius:12px;background:var(--pink);color:var(--ink);display:grid;place-items:center;border:3px solid var(--white);box-shadow:var(--sh-btn);transition:transform .2s var(--ease)}
.ba__knob .ic{width:22px;height:22px}
.ba__handle:hover .ba__knob,.is-drag .ba__knob{transform:scale(1.08)}
.ba__handle:focus-visible{outline:none;box-shadow:none}
.ba__handle:focus-visible .ba__knob{outline:3px solid var(--ink);outline-offset:3px}
.ba__cap{margin:16px 0 0;text-align:center;color:var(--muted);font-size:.93rem}
.ba__hint{display:inline}
.ba:not(.is-live) .ba__stage{aspect-ratio:auto;display:grid;gap:14px;overflow:visible;box-shadow:none;background:none;border:0}
.ba:not(.is-live) .ba__pane{position:relative;aspect-ratio:16/10;clip-path:none;border-radius:var(--r-c);overflow:hidden}
.ba:not(.is-live) .ba__sym,.ba:not(.is-live) .ba__hint{display:none}
.ba-a{fill:var(--c1)}.ba-b{fill:var(--butter-wash)}.ba-c{fill:var(--paper)}.ba-d{fill:var(--c2)}.ba-e{fill:var(--pink)}.ba-f{fill:var(--white)}.ba-g{fill:var(--white)}.ba-h{fill:var(--line-strong)}.ba-i{fill:var(--ink)}.ba-k{fill:var(--danger)}
.ba-s{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.ba-n{fill:none;stroke:var(--pink);stroke-width:6;stroke-linecap:round}

/* ---------------------------------------------------------------- legal pages (the pasted text keeps its own markup) */
.legal-body{max-width:880px}
.legal-body h2{font-size:1.55rem;margin:1.6em 0 .5em}
.legal-body h3{font-size:1.2rem;margin:1.4em 0 .4em}
.legal-body ul{padding-left:1.2em;margin:0 0 1em}
.legal-body li{margin:0 0 .3em}
.legal-body li::marker{color:var(--ink)}
.legal-slot{border:2px dashed var(--line-strong);border-radius:var(--rd);padding:24px;background:var(--paper)}
.legal-lead{font-size:1.14rem;color:var(--ink-soft);margin:0 0 1.4em;padding-left:18px;border-left:5px solid var(--pink)}
.legal-ledger{margin:0 0 1.4em;border-top:2px solid var(--ink)}
.legal-ledger>div{display:grid;grid-template-columns:minmax(150px,32%) minmax(0,1fr);gap:6px 18px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--hair-2)}
.legal-ledger dt{font-weight:800;color:var(--ink)}
.legal-ledger dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.legal-toc{background:var(--paper);border-radius:var(--r-c);padding:18px 22px;margin:0 0 1.6em;border:1px solid var(--hair-2);border-left:6px solid var(--pink)}
.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-note{margin-top:2em;padding:16px 20px;border-radius:var(--r-c);background:var(--paper);color:var(--ink-soft);font-size:.95rem}
.legal-ledger a[href^="tel:"],.legal-ledger a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:44px}
.legal-ledger a:not([href^="tel:"]):not([href^="mailto:"]),.legal-note a{padding-block:10px}
.legal-body h2[id]{scroll-margin-top:110px}
.legal-body h2:has(+ .legal-note){margin-top:2.4em}

/* sibling air: a call row, notice, prose block or split that follows a grid / list brick DIRECTLY inside a band gets a gap above it */
:is(.steps,.factors,.tiles,.rows,.compare,.cards,.split,.prose,.statement,.promises,.gal,.checklist,.ticks)+:is(.callrow,.notice,.rows,.split),
:is(.steps,.factors,.tiles,.rows,.compare,.cards,.promises,.checklist,.ticks)+.prose{margin-top:clamp(28px,4vw,44px)}
:is(.checklist,.ticks)+p:not(.prose){margin-top:clamp(20px,3vw,28px)}
.notice+.notice{margin-top:16px}
/* sibling air (2): a figure followed by a head inside split media, a before/after slider followed by a call row or notice, a split followed by a checklist */
.fig+.head,.ba+:is(.callrow,.notice),.split+:is(.checklist,.ticks){margin-top:clamp(28px,4vw,44px)}
/* phone button on phones: a long label may wrap onto a second line (the number is one .nowrap unit and never breaks), so label + number never run past the button's border */
@media (max-width:400px){.btn--call{white-space:normal}}
/* the phone number in the legal ledger / legal text never breaks across two lines */
:where(.legal-ledger,.legal-body) a[href^="tel:"]{white-space:nowrap}

/* 3-item grids: between 761 and 1060 px a 3-item cards / tiles / factors / promises grid stays in 3 columns (no orphan third card); tiles with 3 items stack on phones */
@media (min-width:761px) and (max-width:1060px){
  :is(.cards--3,.tiles--3,.tiles--4,.factors--3,.promises--3):not(:has(> :nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr))}
  /* five steps in two columns: the odd fifth spans the full row (2 + 2 + 1 wide) instead of hanging alone in a half column */
  .steps--c5:not(.steps--multi)>.step:last-child{grid-column:1 / -1}
}
@media (max-width:760px){
  :is(.tiles--3,.tiles--4):not(:has(> :nth-child(4))){grid-template-columns:minmax(0,1fr)}
}

/* spacing utilities (after the components so they win over .head etc.) */
.mt-s{margin-top:12px}.mt-m{margin-top:clamp(20px,3vw,28px)}.mt-l,.head.mt-l{margin-top:clamp(40px,5vw,64px)}

/* ================================================================== SIGNATURE: MAUL — the jaw of the open-end wrench */
/* 1 · MAULKERBE: a U-shaped notch (46 x 22 px, round bottom) cut into the top edge of a surface. It is drawn by ::after in the colour of the ground behind the surface (--bg-band) with the
   surface's own ink edge (--bw); the notch alternates sides in grids and in the mirrored hero. .haj-maul puts it on any hand-made surface. */
.haj-maul,.card,.promise,.tile,.compare__col,.notice,.callrow,.phonebox,.phoneband,.cta__dial,.hero__dial,.foot__phone,.factsheet,.pull,.fig__in,.portrait__ring,.hero__strip-pic,.hero__media{position:relative}
.haj-maul::after,.card::after,.promise::after,.tile::after,.compare__col::after,.notice::after,.callrow::after,.phonebox::after,.phoneband::after,.cta__dial::after,.hero__dial::after,.foot__phone::after,.factsheet::after,.pull::after,.fig__in::after,.portrait__ring::after,.hero__strip-pic::after,.hero__media::after{
  content:"";position:absolute;z-index:3;top:calc(var(--bw) * -1);right:var(--maul-x);width:var(--maul-w);height:var(--maul-d);box-sizing:border-box;background:var(--bg-band);border:var(--bw) solid var(--ink);border-top:0;border-radius:0 0 var(--maul-r) var(--maul-r);pointer-events:none}
.hero__media::after{top:0}
.cards>:nth-child(even)::after,.promises>:nth-child(even)::after,.tiles>:nth-child(even)::after,.hero--rev .hero__media::after,.phoneband::after,.haj-maul--l::after{right:auto;left:var(--maul-x)}
.portrait__ring::after{right:auto;left:50%;margin-left:calc(var(--maul-w) / -2)}
.foot__phone::after{background:var(--pink-wash)}
.promise,.tile,.compare__col{border:var(--bw) solid var(--ink);box-shadow:none}
.tile:hover,.compare__col:hover{box-shadow:none}
/* icon plates share the ink edge */
:is(.hq__ic,.tile__ic,.card__ic,.promise__ic,.ci__ic,.factor__ic,.qa__ic,.notice__ic,.sub__grid a .ic){border:2px solid var(--ink)}
.notice--danger .notice__ic{border-color:var(--danger)}
.notice--danger::after{border-color:var(--danger)}
/* 2 · JAW TABS (haj_orn): a row of U-bottomed tabs hangs from the band above into the band below — drawn in the colour of the band above (currentColor), straddling the seam */
.haj-maul__strip{position:absolute;left:0;top:0;width:100%;height:16px;display:block;pointer-events:none;color:var(--white)}
.haj-maul__strip--rosa{color:var(--c1)}.haj-maul__strip--butter{color:var(--c2)}.haj-maul__strip--paper{color:var(--paper)}.haj-maul__strip--white{color:var(--white)}
/* 3 · MAUL BADGE: a ring (ink edge, pink fill) with the U opening at its top — the number badge of the process rail, the rows, the Zusagen strip, the emergency steps */
:is(.haj-maul-badge,.ersteps__n,.row__n,.trustbar__ic){position:relative}
.haj-maul-badge,.step__n,.ersteps__n,.row__n,.trustbar__ic{border-radius:50%;border:var(--bw) solid var(--ink)}
.haj-maul-badge::after,.step__n::after,.ersteps__n::after,.row__n::after,.trustbar__ic::after{content:"";position:absolute;left:50%;top:calc(var(--bw) * -1);width:30%;height:25%;margin-left:-15%;box-sizing:border-box;background:var(--bg-band);border:var(--bw) solid var(--ink);border-top:0;border-radius:0 0 8px 8px}
.haj-maul-badge{display:inline-grid;place-items:center;width:52px;height:52px;background:var(--pink);color:var(--ink);font:800 1.2rem var(--head)}
/* the rail ends at the last badge of every row; on tablets two columns end every row at the right edge, on phones one column turns the rail vertical */
.steps--c2>.step:nth-child(2n)::before,.steps--c3>.step:nth-child(3n)::before,.steps--c4>.step:nth-child(4n)::before,.steps--c5>.step:nth-child(5n)::before{display:none}
@media (min-width:761px) and (max-width:1060px){.steps--c4>.step:nth-child(2n)::before,.steps--c5>.step:nth-child(2n)::before{display:none}}
@media (max-width:760px){
  .step{padding:4px 0 0 88px;min-height:64px}
  .steps>.step:nth-child(n)::before{display:block;left:30px;right:auto;top:68px;bottom:-34px;width:4px;height:auto}
  .steps>.step:last-child::before{display:none}
}

/* ================================================================== RESPONSIVE */
@media (max-width:1180px){.topbar__long{display:none}.topbar__short{display:inline}.nav{gap:14px}.menu a{padding-inline:11px}.nav__phone span{display:none}}
@media (max-width:1060px){
  .nav__main,.nav__phone{display:none}.burger{display:grid}.nav{justify-content:space-between}.nav__right{margin-left:auto}
  .hero--block,.hero--cover{grid-template-columns:minmax(0,1fr)}
  .hero__card,.hero--rev .hero__card{grid-column:1;grid-row:1}.hero__media,.hero--rev .hero__media{grid-column:1;grid-row:2;max-width:640px;width:100%}
  .hero--rev .hero__media{justify-self:start}
  .hero--panel,.hero--emergency{grid-template-columns:minmax(0,1fr)}
  .hero--emergency .hero__copy,.hero__dial,.hero--emergency .ersteps{grid-column:1;grid-row:auto}
  /* split hero stacks: the copy stays on rose, the art becomes a full-bleed blush panel below it */
  .band--herosplit,.band--herosplit.band--herosplit-rev{background:var(--c1)}
  .hero--split{grid-template-columns:minmax(0,1fr)}
  .hero--split .hero__copy,.hero--split.hero--rev .hero__copy{order:0;padding:clamp(30px,5vw,44px) 0 clamp(30px,5vw,40px)}
  .hero__fig,.hero--rev .hero__fig{order:0;margin-inline:calc(var(--gut) * -1);padding:clamp(28px,5vw,44px) var(--gut) clamp(34px,5vw,48px);background:var(--c2)}
  .hero__aside .hero__fig{background:none;margin-inline:0;padding:0}
  .lede,.split,.split--wide-l,.split--wide-r,.cols,.cols--wide-l,.cols--wide-r,.pblock,.cta,.phoneband,.head--rule{grid-template-columns:minmax(0,1fr)}
  .split--rev .split__media,.pblock--rev .pblock__media{order:0}
  .cards--3,.cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promises--3,.promises--4,.factors--3,.factors--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles--4,.tiles--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps--c4,.steps--c5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal{grid-template-columns:repeat(3,minmax(0,1fr))}.gal--4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .phoneband__asks{border-left:0;border-top:2px solid var(--ink)}
  .foot__col a{min-height:44px}.sub__all a{min-height:44px}
  .foot__body{grid-template-columns:minmax(0,1fr)}
  .foot__phone{grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "tel" "note" "btn"}.foot__call{justify-self:stretch}
  .lede__cols{columns:1}
}
@media (max-width:900px){
  .foot__cols{grid-template-columns:repeat(2,minmax(0,1fr))}.foot__col--svc{grid-column:1 / -1}
  .row{grid-template-columns:58px minmax(0,1fr)}.row__shot{display:none}
}
@media (max-width:760px){
  :root{--topbar-h:44px}
  .callbar{display:block}.totop{bottom:86px}
  body{padding-bottom:84px}
  .topbar__x{display:none}
  .cards--3,.cards--2,.cards--4,.promises--2,.promises--3,.promises--4,.factors--2,.factors--3,.factors--4,.compare,.checklist--2,.steps--c2,.steps--c3,.steps--c4,.steps--c5{grid-template-columns:minmax(0,1fr)}
  .tiles--2,.tiles--3,.tiles--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trustbar ul{grid-template-columns:minmax(0,1fr)}.trustbar li+li{border-left:0}.trustbar li{padding-inline:4px}
  .phonestrip__in{flex-direction:column;align-items:flex-start}
  .hero__pic,.hero__fig-in{aspect-ratio:4/3}
  .hero__strip-pic{aspect-ratio:4/3}.hero__strip-pic img{object-position:50% 50%}
  .hero__tag{right:10px;bottom:10px;padding:6px 12px 6px 6px}.hero--rev .hero__tag{left:10px}.hero__tag small{display:none}.hero__tag-ic{width:30px;height:30px}
  /* photo cards become compact rows: art left */
  .cards--photo .card{display:grid;grid-template-columns:112px minmax(0,1fr)}
  .cards--photo .card__media{align-self:stretch;aspect-ratio:auto}.cards--photo .card__media img{height:100%}
  .cards--photo .card__body{padding:16px 18px}.cards--photo .card__bk{display:none}
  .cards--photo .card__bigic{width:52px;height:52px}
  .gal,.gal--4,.gal--3{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:240px}.gal--big,.gal--tall,.gal--wide{grid-column:span 2;grid-row:auto}
  .legal-ledger>div{grid-template-columns:minmax(0,1fr)}
  .qa__b{padding-left:2px}.qa__a{padding-right:12px}
  .hero__cta .btn{width:100%}.hero__cta .btn--call{justify-content:flex-start}
  .telbig__n{white-space:nowrap}
  .callrow__act{width:100%}.callrow__act .btn{width:100%}
  .portrait__badge{left:-6px;bottom:-8px}
}
@media (max-width:560px){
  .topbar .topbar__l{display:none}.topbar__in{justify-content:center}
  .gal,.gal--4,.gal--3{grid-template-columns:minmax(0,1fr);grid-auto-rows:230px}.gal--big,.gal--tall,.gal--wide{grid-column:auto}
  .tiles--2,.tiles--3,.tiles--4{grid-template-columns:minmax(0,1fr)}
  .foot__cols{grid-template-columns:minmax(0,1fr)}.foot__col--svc ul{grid-template-columns:minmax(0,1fr)}
  .foot__tel{font-size:1.5rem}
  .cta__dial{padding:20px}
  .hq{gap:12px 20px}
  .legal-toc ol{columns:1}
  .promise__n{font-size:2rem}
}
@media (max-width:560px){.nav{gap:10px}.brand{gap:10px}.brand__mk{width:42px;height:42px}.is-scrolled .brand__mk{width:38px;height:38px}.brand__n{font-size:1.24rem}.nav__right{gap:10px}}
@media (max-width:420px){.cards--photo .card{display:block}.cards--photo .card__media{aspect-ratio:16/10}.cards--photo .card__media img{height:100%}.cards--photo .card__body{padding:18px 18px 20px}}   /* 320-420: a 92 px picture beside the text column crops the art to a sliver — the card stacks and shows the whole picture */
@media (max-width:420px){.nav__call-t{display:none}.nav__call{padding:6px;min-height:48px}.nav__call .btn__ic{width:34px;height:34px}.brand__s{display:none}.cards--photo .card{grid-template-columns:92px minmax(0,1fr)}.hero__tag{max-width:calc(100% - 20px)}}
@media (max-width:380px){.nav{gap:8px}.brand{gap:8px}.brand__mk,.is-scrolled .brand__mk{width:38px;height:38px}.brand__n{font-size:1.1rem}.nav__right{gap:6px}.burger{width:44px;height:44px}.telbig__n{font-size:1.5rem}.telbig--xl .telbig__n{font-size:1.85rem}.telbig__ic{width:42px;height:42px}.telbig--xl .telbig__ic{width:50px;height:50px}}
/* the phone number never wraps and never leaves its button: below 400 px the call button shrinks its gap, padding and type fluidly */
@media (max-width:400px){.btn--call,.btn--lg.btn--call{gap:8px;padding:7px 12px 7px 7px;font-size:clamp(.84rem,4.2vw,1rem)}.btn--lg .btn__ic,.btn--call .btn__ic{width:38px;height:38px}}
@media (max-width:349px){.topbar__short{display:none}.brand__n{font-size:1.1rem}.telbig{gap:10px}.telbig__ic,.telbig--xl .telbig__ic{width:38px;height:38px}.telbig__n{font-size:1.3rem}.telbig--xl .telbig__n{font-size:1.55rem}.btn--lg{font-size:1rem}}
/* full-check fixes (small phones): a long single word in a heading never breaks mid-word, a notice stacks its icon above the text, short headings balance their lines */
.callrow__t,.notice__t,.row__t,.hero__tag,.eyebrow{text-wrap:balance}
@media (max-width:430px){.legal-hero .display{font-size:clamp(20px,7.2vw,30px)}}
@media (max-width:360px){
  .row,.rows--nomedia .row,.row:not(:has(.row__shot)){grid-template-columns:46px minmax(0,1fr);gap:14px}.row__n{width:46px;height:46px;font-size:1.05rem}.row__t{font-size:1.1rem}
  .notice{flex-direction:column;gap:12px;padding:18px}
}

/* ================================================================== MOTION + PRINT + FORCED COLOURS */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .reveal{opacity:1;transform:none}
  .card:hover,.tile:hover,.promise:hover,.btn:hover,.chip:hover{transform:none}
}
@media (forced-colors:active){
  .btn,.chip,.qa,.card,.notice,.promise,.phonebox,.hero__tag,.totop,.burger,.callrow,.tile,.phoneband,.pull{border:2px solid CanvasText}
  .btn--call{forced-color-adjust:none;background:ButtonFace;color:ButtonText;border-color:ButtonText}
  .hero__media::after,.haj-maul__strip{display:none}
  a.chip::before,.chip--static::before,.ticks li::before,.compare li::before,.topbar__mk,.crumbs li+li::before,.eyebrow::before{forced-color-adjust:none;border-color:CanvasText}
  :focus-visible{outline:3px solid Highlight}
}
@media print{
  :root{--c1:#ffffff;--c2:#ffffff;--pink-wash:#ffffff;--butter-wash:#ffffff;--paper:#ffffff}
  .topbar,.masthead,.drawer,.callbar,.totop,.hero__media,.hero__fig,.hero__strip,.phonestrip,.trustbar,.foot__cols,.ba,.faq .qa__ic{display:none!important}
  body{font-size:11pt;color:#000;background:#fff;padding:0}
  .band,.band--closing,.band--herozone,.band--herosplit{background:#fff!important;color:#000!important;padding:14pt 0!important;margin:0!important;border:0}
  .hero__card{margin:0;box-shadow:none;border:0}
  .reveal{opacity:1!important;transform:none!important}
  .qa__a[hidden]{display:block}
  a{color:#000}
  a[href^="tel:"]::after{content:" (" attr(href) ")"}
  .card,.qa,.promise,.factor,.tile,.step{break-inside:avoid;border:1px solid #000}
}